/* ============================================================================
   Nekotopia wiki — Kernel theme overrides for MkDocs Material
   ----------------------------------------------------------------------------
   Maps Material's CSS variables onto the same --k-* tokens the dashboard
   uses, so the wiki and dashboards read as one product. Material variable
   names taken from https://squidfunk.github.io/mkdocs-material/customization/
   ============================================================================ */

/* ---- Kernel design tokens (mirrors website/admin-kernel-theme.css) ---- */

:root {
  /* mode-independent */
  --k-font-sans: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --k-font-mono: 'IBM Plex Mono', 'Geist Mono', 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --k-radius-sm: 6px;
  --k-radius:    10px;
  --k-radius-lg: 14px;
  --k-radius-pill: 999px;
}

/* ---- Light palette (default scheme = "default") ---- */
[data-md-color-scheme="default"] {
  --k-bg:            #F2F0E7;  /* Kernel beige */
  --k-surface-0:     #ECE9DE;
  --k-surface-1:     #FBFAF5;
  --k-surface-2:     #F0EDE3;
  --k-border:        #D6D2C2;
  --k-border-soft:   #E5E1D3;
  --k-border-strong: #A8A496;

  --k-text:          #1C2024;
  --k-text-dim:      #44494F;
  --k-text-muted:    #75736A;
  --k-text-faint:    #A8A496;

  --k-accent:        #81B300;  /* Kernel readable lime on cream */
  --k-accent-dim:    #6B9300;
  --k-accent-soft:   rgba(129, 179, 0, 0.14);
  --k-accent-glow:   rgba(129, 179, 0, 0.22);
  --k-on-accent:     #0A0B0A;

  --k-warn:    #A06400;
  --k-danger:  #A6332A;

  /* === Material variable remap === */
  --md-default-bg-color: var(--k-bg);
  --md-default-fg-color: var(--k-text);
  --md-default-fg-color--light: var(--k-text-dim);
  --md-default-fg-color--lighter: var(--k-text-muted);
  --md-default-fg-color--lightest: var(--k-text-faint);

  --md-primary-fg-color: var(--k-text);
  --md-primary-fg-color--light: var(--k-text-dim);
  --md-primary-fg-color--dark: var(--k-text);
  --md-primary-bg-color: var(--k-bg);
  --md-primary-bg-color--light: var(--k-surface-1);

  --md-accent-fg-color: var(--k-accent);
  --md-accent-fg-color--transparent: var(--k-accent-soft);
  --md-accent-bg-color: var(--k-on-accent);

  --md-typeset-color: var(--k-text);
  --md-typeset-a-color: var(--k-accent);
  --md-typeset-mark-color: var(--k-accent-soft);

  --md-code-bg-color: var(--k-surface-0);
  --md-code-fg-color: var(--k-text);
  --md-code-hl-color: var(--k-accent-soft);

  --md-footer-bg-color: var(--k-surface-0);
  --md-footer-bg-color--dark: var(--k-surface-0);
  --md-footer-fg-color: var(--k-text-dim);
  --md-footer-fg-color--light: var(--k-text-muted);
}

/* ---- Dark palette (scheme = "slate", set as default in mkdocs.yml) ---- */
[data-md-color-scheme="slate"] {
  --k-bg:            #131416;
  --k-surface-0:     #18191D;
  --k-surface-1:     #1D1E22;
  --k-surface-2:     #24252A;
  --k-border:        #2A2B30;
  --k-border-soft:   #222328;
  --k-border-strong: #3A3B41;

  --k-text:          #ECEDF0;
  --k-text-dim:      #A4A6AD;
  --k-text-muted:    #6B6E76;
  --k-text-faint:    #4A4C53;

  --k-accent:        #9FFF24;  /* Kernel signature bright lime */
  --k-accent-dim:    #7FCC1C;
  --k-accent-soft:   rgba(159, 255, 36, 0.12);
  --k-accent-glow:   rgba(159, 255, 36, 0.20);
  --k-on-accent:     #0A0B0A;

  --k-warn:    #E5B85C;
  --k-danger:  #E57362;

  /* Material remap (same shape as light scheme) */
  --md-default-bg-color: var(--k-bg);
  --md-default-fg-color: var(--k-text);
  --md-default-fg-color--light: var(--k-text-dim);
  --md-default-fg-color--lighter: var(--k-text-muted);
  --md-default-fg-color--lightest: var(--k-text-faint);

  --md-primary-fg-color: var(--k-text);
  --md-primary-fg-color--light: var(--k-text-dim);
  --md-primary-fg-color--dark: var(--k-text);
  --md-primary-bg-color: var(--k-bg);
  --md-primary-bg-color--light: var(--k-surface-1);

  --md-accent-fg-color: var(--k-accent);
  --md-accent-fg-color--transparent: var(--k-accent-soft);
  --md-accent-bg-color: var(--k-on-accent);

  --md-typeset-color: var(--k-text);
  --md-typeset-a-color: var(--k-accent);
  --md-typeset-mark-color: var(--k-accent-soft);

  --md-code-bg-color: var(--k-surface-0);
  --md-code-fg-color: var(--k-text);
  --md-code-hl-color: var(--k-accent-soft);

  --md-footer-bg-color: var(--k-surface-0);
  --md-footer-fg-color: var(--k-text-dim);
}

/* ============================================================================
   Typography — match dashboard rules
   ============================================================================ */

body, .md-typeset {
  font-family: var(--k-font-sans);
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset code,
.md-typeset pre,
.md-typeset kbd,
.md-typeset samp,
.md-code__content,
.highlight code {
  font-family: var(--k-font-mono) !important;
  font-feature-settings: 'zero', 'ss01';
}

/* Display headings — Kernel weight 300, lowercase, tight tracking */
.md-typeset h1 {
  font-family: var(--k-font-sans);
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--k-text);
  line-height: 1.15;
  margin: 0 0 1.25rem;
}
.md-typeset h2 {
  font-family: var(--k-font-sans);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--k-text);
  margin: 2rem 0 0.75rem;
}
.md-typeset h3 {
  font-family: var(--k-font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--k-text);
  margin: 1.5rem 0 0.5rem;
}
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--k-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--k-text-muted);
}

/* ============================================================================
   Header (top bar)
   ============================================================================ */

.md-header {
  background: var(--k-bg);
  border-bottom: 1px solid var(--k-border);
  box-shadow: none;
  color: var(--k-text);
}

.md-header__title {
  font-family: var(--k-font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

/* Material renders TWO .md-header__topic elements stacked for the
   site-title ↔ page-title swap animation. Our typography overrides broke
   the animation, leaving both visible. We don't need the swap (the
   sidebar already shows the current page), so just hide the second
   topic and keep the site title visible everywhere. */
.md-header__topic + .md-header__topic {
  display: none;
}

/* Tabs row */
.md-tabs {
  background: var(--k-bg);
  border-bottom: 1px solid var(--k-border);
  color: var(--k-text-dim);
}
.md-tabs__item {
  font-family: var(--k-font-sans);
}
.md-tabs__link {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  opacity: 1;
  color: var(--k-text-dim);
}
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--k-text);
}

/* ============================================================================
   Sidebar nav
   ============================================================================ */

.md-sidebar {
  background: var(--k-bg);
}
.md-nav__title {
  font-family: var(--k-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--k-text-muted);
}
.md-nav__link {
  font-family: var(--k-font-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--k-text-dim);
  border-radius: var(--k-radius-sm);
  padding: 4px 8px;
  transition: background 140ms ease, color 140ms ease;
}
.md-nav__link:hover,
.md-nav__link--passed {
  color: var(--k-text);
}
.md-nav__link--active,
.md-nav__item--active > .md-nav__link {
  color: var(--k-text) !important;
  font-weight: 600;
  position: relative;
}
.md-nav__link--active::before,
.md-nav__item--active > .md-nav__link::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--k-accent);
  border-radius: 2px;
}

/* ============================================================================
   Content body — Kernel-style cards, admonitions, code
   ============================================================================ */

.md-content {
  background: var(--k-bg);
}

.md-typeset a {
  color: var(--k-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}
.md-typeset a:hover {
  border-bottom-color: var(--k-accent);
}

.md-typeset hr {
  border-color: var(--k-border);
}

.md-typeset blockquote {
  color: var(--k-text-dim);
  border-left: 2px solid var(--k-border-strong);
  background: transparent;
  padding-left: 1rem;
}

/* Inline code */
.md-typeset code {
  background: var(--k-surface-2);
  border: 1px solid var(--k-border-soft);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.85em;
  color: var(--k-text);
}

/* Code blocks */
.md-typeset pre,
.md-typeset .highlight {
  background: var(--k-surface-0);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  padding: 0;
}
.md-typeset pre > code,
.md-typeset .highlight code {
  background: transparent;
  border: none;
  padding: 14px 16px;
  font-size: 12.5px;
  line-height: 1.55;
}

/* Tables */
.md-typeset table:not([class]) {
  background: transparent;
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius);
  overflow: hidden;
  font-size: 0.85rem;
}
.md-typeset table:not([class]) th {
  background: var(--k-surface-1);
  color: var(--k-text-muted);
  font-family: var(--k-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 500;
  border-bottom: 1px solid var(--k-border);
}
.md-typeset table:not([class]) td {
  color: var(--k-text);
  border-bottom: 1px solid var(--k-border-soft);
}

/* Admonitions — the wiki's answer to Confluence's panels */
.md-typeset .admonition,
.md-typeset details {
  background: var(--k-surface-1);
  border: 1px solid var(--k-border);
  border-left: 2px solid var(--k-accent);
  border-radius: var(--k-radius);
  box-shadow: none;
  font-size: 0.85rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  font-family: var(--k-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--k-text-muted);
  background: transparent;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before {
  background-color: var(--k-accent);
}
.md-typeset .admonition.note,
.md-typeset details.note { border-left-color: var(--k-accent); }
.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset details.warning { border-left-color: var(--k-warn); }
.md-typeset .admonition.warning .admonition-title::before,
.md-typeset .admonition.caution .admonition-title::before { background-color: var(--k-warn); }
.md-typeset .admonition.danger,
.md-typeset .admonition.error,
.md-typeset details.danger { border-left-color: var(--k-danger); }
.md-typeset .admonition.danger .admonition-title::before,
.md-typeset .admonition.error .admonition-title::before { background-color: var(--k-danger); }
.md-typeset .admonition.tip,
.md-typeset .admonition.success,
.md-typeset details.tip { border-left-color: var(--k-accent); }

/* Search */
.md-search__form {
  background: var(--k-surface-1);
  border: 1px solid var(--k-border);
  border-radius: var(--k-radius-sm);
}
.md-search__input::placeholder {
  color: var(--k-text-muted);
}
.md-search__output {
  background: var(--k-surface-1);
  border: 1px solid var(--k-border);
}
.md-search-result__article {
  background: transparent;
  border-bottom: 1px solid var(--k-border-soft);
}
.md-search-result__title {
  color: var(--k-text);
}

/* TOC right rail */
.md-nav--secondary .md-nav__title {
  background: var(--k-bg);
}

/* Footer */
.md-footer {
  background: var(--k-surface-0);
  color: var(--k-text-muted);
  border-top: 1px solid var(--k-border);
}
.md-footer-meta {
  background: var(--k-surface-0);
}
.md-footer__inner {
  display: none;  /* drop the prev/next pager — single-author wiki, content order is loose */
}

/* Logo dot — same signature as the dashboards. Placed on the ellipsis
   wrapper (the immediate parent of both .md-header__topic items) so it
   sits cleanly before the title text without disturbing Material's
   internal stacking. */
.md-header__ellipsis {
  display: flex;
  align-items: center;
}
.md-header__ellipsis::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--k-accent);
  box-shadow: 0 0 0 3px var(--k-accent-glow);
  margin-right: 16px;
  margin-left: 4px;
}