/* ─────────────────────────────────────────────────────────────────────────────
   AFNIO DOCS — TELLURIO BRAND COLORS
   Primary accent: hsl(71, 85%, 40%) — GameBoy yellow-green (#9BBC0F)

   Values mapped from Tellurio landing page globals.css.
   Light mode uses darkened brand (32% L) for WCAG AA contrast on white.
   Dark mode uses full brand (40% L) — 9.33:1 on near-black.
───────────────────────────────────────────────────────────────────────────── */

/* ── Light mode ── */
:root,
[data-md-color-scheme="default"] {
  /* brand */
  --md-primary-fg-color:             hsl(71, 80%, 32%);
  /* brand-200 */
  --md-primary-fg-color--light:      hsl(71, 80%, 48%);
  /* derived — pressed/active states */
  --md-primary-fg-color--dark:       hsl(71, 80%, 24%);
  /* brand-foreground */
  --md-primary-bg-color:             hsl(0, 0%, 100%);
  --md-primary-bg-color--light:      hsla(0, 0%, 100%, 0.7);

  /* brand (same as primary — monochromatic) */
  --md-accent-fg-color:              hsl(71, 80%, 32%);
  --md-accent-fg-color--transparent: hsla(71, 80%, 32%, 0.1);
  /* brand-foreground */
  --md-accent-bg-color:              hsl(0, 0%, 100%);
  --md-accent-bg-color--light:       hsla(0, 0%, 100%, 0.7);

  /* brand */
  --md-typeset-a-color:              hsl(71, 80%, 32%);

  /* te-foreground / te-background */
  --md-default-fg-color:             hsl(0, 0%, 4%);
  --md-default-bg-color:             hsl(0, 0%, 96%);
  --md-default-bg-color--light:      hsla(0, 0%, 96%, 0.7);
  --md-footer-bg-color:              hsl(0, 0%, 96%);

  /* Code blocks: distinct shade so snippets are visible against the page bg
     (which is itself 96% gray — Material's default code bg would blend in). */
  --md-code-bg-color:                hsl(0, 0%, 90%);
}

/* ── Dark mode (slate) ── */
[data-md-color-scheme="slate"] {
  /* brand */
  --md-primary-fg-color:             hsl(71, 85%, 40%);
  /* brand-200 */
  --md-primary-fg-color--light:      hsl(71, 85%, 65%);
  /* derived — pressed/active states */
  --md-primary-fg-color--dark:       hsl(71, 85%, 30%);
  /* brand-foreground */
  --md-primary-bg-color:             hsl(80, 75%, 3%);
  --md-primary-bg-color--light:      hsla(80, 75%, 3%, 0.7);

  /* brand (same as primary — monochromatic) */
  --md-accent-fg-color:              hsl(71, 85%, 40%);
  --md-accent-fg-color--transparent: hsla(71, 85%, 40%, 0.1);
  /* brand-foreground */
  --md-accent-bg-color:              hsl(80, 75%, 3%);
  --md-accent-bg-color--light:       hsla(80, 75%, 3%, 0.7);

  /* brand */
  --md-typeset-a-color:              hsl(71, 85%, 40%);

  /* te-foreground / te-background */
  --md-default-fg-color:             hsl(0, 0%, 92%);
  --md-default-bg-color:             hsl(0, 0%, 4%);
  --md-default-bg-color--light:      hsla(0, 0%, 4%, 0.7);
  --md-footer-bg-color:              hsl(0, 0%, 4%);

  /* Code blocks: lifted ~6% above the page bg so snippets read as distinct,
     mirroring the light-mode treatment. */
  --md-code-bg-color:                hsl(0, 0%, 10%);
}

/* ── Logo: brand color via currentColor ── */
.md-logo {
  color: var(--md-primary-fg-color);
}
.md-logo svg {
  width: 100%;
  height: auto;
}

/* ── Footer meta: match page background ── */
.md-footer-meta {
  background-color: var(--md-default-bg-color);
}

/* ── Link hover: shift to brand-200 for visible feedback ── */
.md-typeset a:hover {
  color: var(--md-primary-fg-color--light);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR NAVIGATION HIERARCHY
   Make section labels (e.g. "Getting Started", "Learn the Basics") read as
   headings rather than bolded links, and dim leaves for contrast.
───────────────────────────────────────────────────────────────────────────── */

/* Section label — extra top margin to separate groups; otherwise inherits
   the default color/weight. Covers both the plain-label form and the
   index-link form that navigation.indexes produces. */
.md-nav__item--section > label.md-nav__link,
.md-nav__item--section > .md-nav__container > a.md-nav__link {
  margin-top: 0.2rem;
}

/* First section in a tab doesn't need the extra airspace above. */
.md-nav__item--section:first-of-type > label.md-nav__link,
.md-nav__item--section:first-of-type > .md-nav__container > a.md-nav__link {
  margin-top: 0;
}

/* Dim the leaf links so the section label stands out by contrast.
   Scoped to non-section items only — otherwise it would also match the
   level-2 section labels nested under an active tab. */
.md-nav__item--section
  .md-nav__item:not(.md-nav__item--section)
  > .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-default-fg-color--light);
}

/* Right TOC ("On this page"): mute all items, only the active one stays
   brand-colored — matches the left nav's leaf treatment. */
.md-nav--secondary .md-nav__link:not(.md-nav__link--active) {
  color: var(--md-default-fg-color--light);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER — Matches afnio.ai landing page (Header.tsx) on both desktop and
   small screens, with the addition of a docs-specific search trigger.

   Breakpoints follow Tailwind (sm = 640px, lg = 1024px):
     - Below 640px (max-sm): hide top-bar nav links, show in mobile dropdown
     - Below 1024px (max-lg): hide desktop right-side cluster, show chevron toggle
   All sizes use px to bypass Material's 125% root font-size scaling.
───────────────────────────────────────────────────────────────────────────── */

.afnio-header {
  background-color: var(--md-default-bg-color);
  /* Forced border + no box-shadow → always-visible separator, regardless of
     Material's `.md-header--shadow` toggling during scroll. */
  border-bottom: 1px solid rgba(102, 102, 102, 0.2) !important;
  box-shadow: none !important;
  /* Z-index above the Menu bar (30) so the main-header dropdown paints over
     the Menu, not behind it. Material's default `.md-header { z-index: 4 }`
     would otherwise put the entire header stacking context below the Menu. */
  z-index: 40;
}

.afnio-header__inner {
  display: flex;
  align-items: center;
  height: 56px;             /* h-14 in landing */
  max-width: 1400px;        /* max-w-350 */
  margin: 0 auto;
  padding: 0 16px;          /* px-4 */
  gap: 0;
  /* Override Material's inherited `.md-header { font-size: .5rem }` (10px at
     20px root). Match landing's effective base so anything inside that uses
     em units (or inherits) lines up. */
  font-size: 14px;
  line-height: 24px;
}

/* Brand block: Tellurio | / | Afnio + wordmark */
.afnio-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 2px;                 /* gap-0.5 */
  margin-right: 24px;       /* mr-6 */
  flex-shrink: 0;
}

.afnio-header__brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.afnio-header__brand-link--product {
  gap: 6px;                 /* gap-1.5 between Afnio icon and wordmark */
}

.afnio-header__brand-icon {
  width: 28px;
  height: 28px;
}

[data-md-color-scheme="slate"] .afnio-header__brand-icon--tellurio,
[data-md-color-scheme="slate"] .afnio-header__brand-icon--afnio {
  filter: invert(1);        /* mirrors `dark:invert` on the landing */
}

.afnio-header__brand-slash {
  width: 28px;
  height: 28px;
  color: var(--md-default-fg-color--light);
  opacity: 0.4;             /* /40 alpha in landing */
  flex-shrink: 0;
}

/* Wordmark color: landing inherits a brighter near-white in dark mode
   (#fbfbfe — brighter than --color-te-foreground #ebebeb) and a deeper
   near-black in light mode. Match both explicitly. */
.afnio-header__wordmark {
  font-size: 18px;          /* text-lg */
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.025em; /* tracking-tight */
  color: #09090b;           /* light mode near-black */
}

[data-md-color-scheme="slate"] .afnio-header__wordmark {
  color: #fbfbfe;           /* dark mode near-white */
}

/* Desktop nav links — visible at sm+ */
.afnio-header__links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;                 /* gap-2 */
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;          /* text-sm */
}

.afnio-header__link {
  display: inline-flex;
  align-items: center;
  padding: 8px;             /* p-2 */
  border-radius: 6px;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.afnio-header__link:hover {
  color: var(--md-default-fg-color);
}

/* Right-side actions cluster */
.afnio-header__actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;                 /* gap-1.5 */
}

/* Generic icon button (search trigger, GitHub link, chevron summary).
   Matches landing's `p-2 [&_svg]:size-5` → 36×36 button with 20×20 SVG.
   Not muted; full default-fg color matches landing. */
.afnio-header__icon-btn,
.afnio-header a.afnio-header__icon-btn,
.afnio-header__icon-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 6px;
  color: var(--md-default-fg-color);
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  list-style: none;         /* hide summary marker */
}

.afnio-header__icon-btn::-webkit-details-marker {
  display: none;
}

.afnio-header__icon-btn:hover,
.afnio-header a.afnio-header__icon-btn:hover {
  background-color: hsla(0, 0%, 50%, 0.1);
}

.afnio-header__icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Material + simple-icons SVGs need `fill: currentColor`; Lucide SVGs are
   stroke-based with inline `fill="none"` and must stay that way (otherwise
   the chevron's V outline gets filled into a solid wedge). */
.afnio-header__icon-btn svg:not(.lucide) {
  fill: currentColor;
}

/* Chevron toggle: landing's `p-2 size-5.5` = 38×38 with 22px SVG.
   Never shows a background (no hover/focus/active highlight). */
.afnio-header__mobile-toggle {
  width: 38px;
  height: 38px;
}

.afnio-header__mobile-toggle svg {
  width: 22px;
  height: 22px;
}

.afnio-header__mobile-toggle,
.afnio-header__mobile-toggle:hover,
.afnio-header__mobile-toggle:focus,
.afnio-header__mobile-toggle:active {
  background-color: transparent !important;
  outline: none;
}

/* GitHub icon button: landing's `p-1.5 size-5` = 32×32 with 20px SVG
   (smaller than search/chevron, which use p-2). */
.afnio-header__github,
.afnio-header a.afnio-header__github {
  width: 32px;
  height: 32px;
  padding: 6px;
}

/* Ensure the search trigger label sizes match the icon-btn buttons */
.afnio-header .md-header__button.afnio-header__icon-btn {
  width: 36px;
  height: 36px;
  padding: 8px;
  margin: 0;
}

/* Theme palette pill — landing's style with both sun+moon visible, but a
   SINGLE clickable button. Click anywhere on the pill toggles theme via
   theme-toggle.js. Colors mapped to landing's te-* tokens from globals.css. */
.afnio-header__theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;                /* gap-0.5 */
  padding: 4px 6px;        /* py-1 px-1.5 */
  border: 1px solid hsla(0, 0%, 80%, 0.5);   /* light mode te-border */
  border-radius: 9999px;
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

[data-md-color-scheme="slate"] .afnio-header__theme-toggle {
  border-color: hsla(0, 0%, 40%, 0.2);       /* dark mode te-border */
}

.afnio-header__theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;             /* size-6 */
  height: 24px;
  border-radius: 9999px;
  color: hsl(0, 0%, 45%);                    /* light mode te-muted-foreground */
  transition: background-color 0.15s ease, color 0.15s ease;
  pointer-events: none;    /* clicks fall through to the button */
}

[data-md-color-scheme="slate"] .afnio-header__theme-icon {
  color: hsla(0, 0%, 70%, 0.8);              /* dark mode te-muted-foreground */
}

.afnio-header__theme-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Active icon: highlight bg + brighter text. Light mode active is the sun
   (light scheme), dark mode active is the moon (slate scheme). */
[data-md-color-scheme="default"] .afnio-header__theme-icon--light {
  background-color: hsla(0, 0%, 82%, 0.5);   /* light mode te-accent */
  color: hsl(0, 0%, 9%);                     /* light mode te-accent-foreground */
}

[data-md-color-scheme="slate"] .afnio-header__theme-icon--dark {
  background-color: hsla(0, 0%, 41%, 0.3);   /* dark mode te-accent */
  color: hsl(0, 0%, 90%);                    /* dark mode te-accent-foreground */
}

/* Hide Zensical's auto-generated palette form (we only need its radio inputs
   for state — the visible labels above replace its built-in toggle button). */
.afnio-header__palette-host {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

/* GitHub icon visible by default; hidden below lg (1024px) via media query
   below (see "Responsive" block). */

/* Mobile chevron menu button (matches landing's <button>+sibling-<div>
   structure, replacing the earlier <details>/<summary>). */
.afnio-header__mobile-toggle {
  display: none;            /* hidden by default; shown at <lg via media query */
  border: 0;
}

.afnio-header__mobile-toggle svg {
  transition: transform 0.2s ease;
}

.afnio-header__mobile-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Chevron has no background — landing's version is a plain icon. */
.afnio-header__mobile-toggle,
.afnio-header__mobile-toggle:hover,
.afnio-header__mobile-toggle:focus,
.afnio-header__mobile-toggle:active {
  background-color: transparent !important;
  outline: none;
}

/* Mobile dropdown panel — full-width below header, no inner padding/flex of
   its own; that lives on `.afnio-header__dropdown-content`. */
.afnio-header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--md-default-bg-color);
  border-bottom: 1px solid rgba(102, 102, 102, 0.2);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1),
              0 4px 6px -4px hsla(0, 0%, 0%, 0.1); /* Tailwind shadow-lg */
  z-index: 50;
}

/* Content wrapper — matches landing's
   `flex flex-col p-4 sm:flex-row sm:items-center sm:justify-end`. */
.afnio-header__dropdown-content {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

@media screen and (min-width: 40em) {
  .afnio-header__dropdown-content {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
}

/* Nav-links group inside dropdown — matches landing's `flex flex-col sm:hidden` */
.afnio-header__dropdown-links {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.afnio-header__dropdown-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;                 /* gap-2 */
  padding: 6px 0;           /* py-1.5 */
  /* Landing's link has no font-size class — inherits body's default 16px.
     Set explicitly to defeat Material's `.md-header { font-size: .5rem }`
     inheritance (which would otherwise leak down to 10px). */
  font-size: 16px;
  line-height: 24px;
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: color 0.15s ease;
}

.afnio-header__dropdown-link:hover {
  color: var(--md-default-fg-color--light);
}

/* Icon size 16px (landing's `[&_svg]:size-4`) — Lucide icons render
   stroke-only because they have inline `fill="none"`. */
.afnio-header__dropdown-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Actions group — matches landing's
   `-ms-1.5 flex flex-row items-center gap-2 max-sm:mt-2`.
   At <sm: full-width (cross-axis stretch in flex-col parent), separator
   stretches → GitHub left, Toggle right.
   At sm+: content-sized (in flex-row justify-end parent), separator collapses
   → GitHub adjacent to Toggle, both on the right. */
.afnio-header__dropdown-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;                 /* gap-2 */
  margin-left: -6px;        /* -ms-1.5 */
}

.afnio-header__dropdown-spacer {
  flex: 1;                  /* stretches at <sm (full-width), collapses at sm+ */
}

/* Responsive: below sm (640px) — hide desktop top-bar nav links */
@media screen and (max-width: 39.9375em) {
  .afnio-header__links {
    display: none;
  }
  /* Dropdown actions sit below the nav-links group with an 8px gap. Matches
     landing's `max-sm:mt-2` — no extra padding or border. */
  .afnio-header__dropdown-actions {
    margin-top: 8px;
  }
}

/* Responsive: below lg (1024px) — collapse desktop right-cluster to chevron only.
   Hide the main-bar GitHub link, the main-bar theme toggle, and Material's
   compact search button. The search icon trigger (label) stays visible. */
@media screen and (max-width: 63.9375em) {
  .afnio-header .afnio-header__github,
  .afnio-header > nav > .afnio-header__actions > a.afnio-header__github {
    display: none;
  }
  /* Re-show GitHub inside the dropdown */
  .afnio-header__dropdown-actions .afnio-header__github {
    display: inline-flex;
  }
  .afnio-header__theme-toggle--main {
    display: none;
  }
  .afnio-header .md-search__button {
    display: none;
  }
  /* Force the search icon trigger to stay visible — Material's CSS hides
     `.md-header__button` at narrow widths by default. */
  .afnio-header label.md-header__button[for="__search"] {
    display: inline-flex !important;
  }
  .afnio-header__mobile-toggle {
    display: inline-flex;
  }
  /* Tighten the right-side cluster to match landing's `flex ms-auto -me-1.5` —
     icons sit flush with each other and against the right edge. */
  .afnio-header__actions {
    gap: 0;
    margin-right: -6px;
  }
}

/* Above lg — hide the dropdown's theme toggle (the main-bar one is visible). */
@media screen and (min-width: 64em) {
  .afnio-header__theme-toggle--dropdown {
    display: none;
  }
}

/* Above sm — hide the dropdown links list (Docs/Pricing are in the top bar
   from 640px upward; they only need to appear in the dropdown below sm).
   The dropdown-content's `sm:flex-row sm:justify-end` (handled above) then
   right-aligns the remaining actions group. */
@media screen and (min-width: 40em) {
  .afnio-header__dropdown-links {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE "MENU" BAR — Next.js style. Replaces Material's sidebar drawer at
   narrow widths. Bar sits below the main header; tapping toggles a panel
   below that contains the same switcher + nav as the desktop sidebar.
───────────────────────────────────────────────────────────────────────────── */

/* Hidden by default — visible only where the primary sidebar isn't shown
   inline. Material's default sidebar breakpoint is 76.1875em (= 1220px). */
.afnio-menu {
  display: none;
}

/* Menu bar replaces the primary sidebar only at narrow widths (< 60em).
   At 60em–76.234375em the primary sidebar is brought inline by the
   override below, and the Menu isn't needed. */
@media screen and (max-width: 59.9375em) {
  .afnio-menu {
    display: block;
    background-color: var(--md-default-bg-color);
    border-bottom: 1px solid rgba(102, 102, 102, 0.2);
    /* Stay docked below the main header on scroll. */
    position: sticky;
    top: 56px;             /* main header height */
    z-index: 30;
  }
  /* When open, take over the viewport below the main header — corpus is
     hidden beneath. Bar stays at top of the overlay, panel scrolls below. */
  .afnio-menu[data-state="open"] {
    position: fixed;
    top: 56px;             /* main header height */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    border-bottom: 0;
  }
  .afnio-menu[data-state="open"] .afnio-menu__panel {
    flex: 1;
    min-height: 0;
    /* No overflow here — the inner `.afnio-menu__scroll` handles scrolling
       so the switcher (sibling) stays pinned outside the scroll area. */
  }
  /* Hide Material's primary sidebar (and its drawer behavior) — replaced
     by the Menu bar at this breakpoint. */
  .md-sidebar--primary {
    display: none;
  }
}

/* Sidebar visibility swap.
   Material's defaults: primary visible ≥ 76.25em (drawer below), secondary
   visible ≥ 60em (hidden below). User wants the reverse — secondary should
   disappear FIRST. New behavior:
     <  60em                : neither visible (Menu replaces primary)
     60em – 76.234375em     : primary inline, secondary hidden
     ≥  76.25em             : both visible (Material defaults)
*/

/* Hide secondary at < 76.25em (was visible at 60em+). */
@media screen and (max-width: 76.234375em) {
  .md-sidebar--secondary {
    display: none !important;
  }
}

/* In the 60em–76.234375em range, make primary inline-visible instead of
   drawer-mode. Overrides Material's drawer styles (`position: fixed`,
   off-screen `left`/`right`, `backdrop-filter`, etc.).

   Note on height: at ≥ 76.25em Material's JS dynamically sets the sidebar's
   height; CSS only gives `height: 0`. That JS path doesn't run in this
   breakpoint range (Material thinks the sidebar is still in drawer mode), so
   we set an explicit viewport-based height. The inner `.md-sidebar__scrollwrap`
   is `position: absolute; top:0; bottom:0` and fills this height; without an
   explicit height the scrollwrap collapses to 0 and the nav is invisible. */
@media screen and (min-width: 60em) and (max-width: 76.234375em) {
  .md-sidebar--primary {
    position: sticky !important;
    top: 2.4rem !important;
    left: auto !important;
    right: auto !important;
    width: 12.1rem !important;
    height: calc(100vh - 4.8rem) !important;
    transform: none !important;
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    z-index: auto !important;
    padding: 1.1rem 0 !important;
    flex-shrink: 0;
    display: block !important;
    align-self: flex-start;
  }
  /* Content margin like Material adds at desktop, so the article doesn't
     butt up against the sidebar. */
  [dir="ltr"] .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
    margin-left: 1.2rem;
  }
  /* Menu is hidden in this range — primary sidebar is back inline. */
  .afnio-menu {
    display: none !important;
  }

  /* Replicate Material's "lifted" nav styling (normally only at ≥ 76.25em) so
     the inline sidebar at this breakpoint shows the same flat layout as
     desktop — active tab's section headers + their child pages — instead of
     the drawer-style collapsed tree.

     The rules below mirror the ones in Material's bundled `main.*.min.css`
     that live inside `@media (min-width: 76.25em)` (selectors targeting
     `.md-nav--primary`, `.md-nav__item--section`, `.md-nav--lifted`). */
  .md-sidebar--primary .md-nav--primary {
    margin-bottom: 0.1rem;
    margin-top: 0;
  }
  .md-sidebar--primary .md-nav__source,
  .md-sidebar--primary .md-nav__title,
  .md-sidebar--primary .md-nav .md-nav__title[for="__drawer"] {
    display: none !important;
  }
  /* Hide the chevron arrow next to section headers (matches the rule
     Material applies in `@media (min-width: 76.25em)`). */
  .md-sidebar--primary .md-nav__item--nested.md-nav__item--section > .md-nav__link .md-nav__icon:after {
    display: none;
  }
  [dir="ltr"] .md-sidebar--primary .md-nav__list .md-nav__item--section > .md-nav > .md-nav__list {
    margin-left: 0;
  }
  [dir="rtl"] .md-sidebar--primary .md-nav__list .md-nav__item--section > .md-nav > .md-nav__list {
    margin-right: 0;
  }
  .md-sidebar--primary .md-nav__item--section > .md-nav__link--active,
  .md-sidebar--primary .md-nav__item--section > .md-nav__link > .md-nav__link--active {
    font-weight: 700;
  }
  .md-sidebar--primary .md-nav__item--section {
    margin-top: 0.4rem;
  }
  .md-sidebar--primary .md-nav__item--section:first-child {
    margin-top: 0;
  }
  .md-sidebar--primary .md-nav__item--section:last-child {
    margin-bottom: 0;
  }
  .md-sidebar--primary .md-nav__item--section > .md-nav__link {
    font-weight: 700;
  }
  .md-sidebar--primary .md-nav__item--section > .md-nav__link:not(.md-nav__container) {
    pointer-events: none;
  }
  .md-sidebar--primary .md-nav__item--section > .md-nav {
    display: block;
    opacity: 1;
    visibility: visible;
  }
  .md-sidebar--primary .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item {
    padding: 0;
  }
  .md-sidebar--primary .md-nav--lifted {
    margin-top: 0;
  }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item {
    display: none;
  }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active {
    display: block;
  }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav {
    margin-top: 0.1rem;
  }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav > .md-nav__list:before,
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    display: none;
  }
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active.md-nav__item--section {
    margin: 0;
  }
  .md-sidebar--primary .md-nav--lifted .md-nav[data-md-level="1"] {
    grid-template-rows: minmax(0.4rem, 1fr);
    opacity: 1;
    visibility: visible;
  }
}

.afnio-menu__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: 0;
  color: var(--md-default-fg-color);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.afnio-menu__toggle:hover {
  background-color: hsla(0, 0%, 50%, 0.04);
}

.afnio-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.afnio-menu__icon svg {
  width: 16px;
  height: 16px;
}

/* Rotate chevron-right to chevron-down when expanded */
.afnio-menu__toggle[aria-expanded="true"] .afnio-menu__icon {
  transform: rotate(90deg);
}

.afnio-menu__panel {
  border-top: 1px solid rgba(102, 102, 102, 0.2);
  /* When visible, becomes a column container with a fixed switcher up top and
     a scrollable nav region below — same layout as the desktop sidebar.
     Padding is applied to children so the scroll region can extend
     edge-to-edge while the switcher gets its own padded zone. */
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* Respect the `hidden` attribute — display:flex above would otherwise
   override the browser default `[hidden] { display: none }`. */
.afnio-menu__panel[hidden] {
  display: none;
}

/* Switcher sits at the top of the panel, never scrolls. */
.afnio-menu__panel > .afnio-nav-switcher {
  flex-shrink: 0;
  padding: 16px 16px 0;
  margin-bottom: 0;
}

/* Scrolling region containing the nav. */
.afnio-menu__scroll {
  flex: 1 1 auto;
  min-height: 0;            /* allow shrink below content size so overflow scrolls */
  overflow-y: auto;
  padding: 16px;
}

/* Reused switcher inside the Menu panel: not absolutely positioned (no sidebar
   to anchor to), but keep `position: relative` so the switcher's dropdown
   menu (which is `position: absolute; top: 100%`) anchors to the switcher
   card itself, not to the Menu panel. */
.afnio-menu__panel .afnio-nav-switcher {
  position: relative;
  top: auto;
  z-index: auto;
  width: auto;
  margin-bottom: 12px;
}

/* In the sidebar context the switcher has 0.6rem padding (the dropdown menu
   uses left/right: 0.6rem to align with the card AND top: calc(100% - 0.6rem)
   to overlap into the bottom-padding zone). In the Menu-panel context the
   switcher container has 16px horizontal padding (set above) — the dropdown
   must match the card by insetting left/right by the same 16px, otherwise it
   spans the full panel width. */
.afnio-menu__panel .afnio-nav-switcher__menu {
  top: 100%;
  left: 16px;
  right: 16px;
  margin-top: 4px;
}

/* Hide the nav's drawer label (logo + site name) and source link inside
   the Menu — those live in the main header now. !important to defeat
   Material's mobile-drawer CSS that re-shows them. */
.afnio-menu__panel .md-nav__title,
.afnio-menu__panel .md-nav__source {
  display: none !important;
}

/* Hide the active top-level section's own label/link (Developer Guide / API
   Reference) inside the Menu — the switcher already shows the active section,
   so repeating it as a heading is redundant. */
.afnio-menu__panel .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.afnio-menu__panel .md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link,
.afnio-menu__panel .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container {
  display: none !important;
}

/* Hide non-active top-level sections entirely. When Developer Guide is
   selected, API Reference and its children shouldn't render at all (and
   vice versa). Forces Material's `md-nav--lifted` rule which Material's
   own CSS might be losing specificity on. */
.afnio-menu__panel .md-nav--primary > .md-nav__list > .md-nav__item:not(.md-nav__item--active) {
  display: none !important;
}

/* Hide active-state markers (the "green dot" next to parent sections
   containing the active page). The dot is most likely the unhidden toggle
   checkbox bleeding through, or a pseudo-element indicator. */
.afnio-menu__panel .md-nav__item::before,
.afnio-menu__panel .md-nav__item::after,
.afnio-menu__panel .md-nav__link::before,
.afnio-menu__panel .md-nav__link::after,
.afnio-menu__panel .md-nav__item--section::before,
.afnio-menu__panel .md-nav__item--section::after,
.afnio-menu__panel .md-nav__link--active::after,
.afnio-menu__panel .md-nav__link--passed::after {
  content: none !important;
  display: none !important;
}

/* Toggle checkboxes themselves — sections in the Menu are always expanded,
   so the checkbox is functionally unused; if Material's CSS doesn't fully
   hide it across browsers, the default checkbox styling can render as a
   small dot. Force hide. */
.afnio-menu__panel .md-nav__toggle,
.afnio-menu__panel input.md-toggle {
  display: none !important;
}

/* Inside an indexed-section's container, the structure is:
     <div class="md-nav__link md-nav__container">
       <a class="md-nav__link md-nav__link--active">Section Name</a>
       <label class="md-nav__link md-nav__link--active" for="..."><span class="md-nav__icon"/></label>
     </div>
   The <a> carries the section's clickable text; the <label> is only a
   click target for the toggle icon. Even after hiding `.md-nav__icon`,
   the label keeps `--active` padding + background → renders as a "dot".
   Since sections in the Menu are always expanded, the label is purely
   decorative. Hide it. */
.afnio-menu__panel .md-nav__container > label.md-nav__link {
  display: none !important;
}

/* Force all nav sections expanded inside the Menu panel. This replicates
   Material's `navigation.expand` feature without enabling it globally
   (the feature triggers a Zensical build-cleanup bug). The same effect:
   make every nested `.md-nav` visible regardless of its toggle's checked
   state, by mimicking the `:checked` style. */
.afnio-menu__panel .md-nav__toggle ~ .md-nav {
  grid-template-rows: minmax(0.4rem, 1fr);
  opacity: 1;
  visibility: visible;
  transition: none;
}

.afnio-menu__panel .md-nav__toggle ~ .md-nav > .md-nav__list {
  overflow: visible;
}

/* Toggle-arrows inside the Menu are decorative only (sections always show),
   so hide them to reduce noise. */
.afnio-menu__panel .md-nav__icon {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR SWITCHER — Next.js-style cards at the top of the sidebar
   Replaces the header tab bar. Defined in partials/nav.html; renders one card
   per top-level nav item (Developer Guide, API Reference).
───────────────────────────────────────────────────────────────────────────── */

/* Switcher overlays the top of the sidebar absolutely with opaque background
   and z-index. Material's scrollwrap keeps its native `position: absolute;
   top:0; bottom:0` (fills the whole sidebar). The nav content inside gets a
   `padding-top` that pushes it down below the switcher, so scrolled content
   passes under the switcher and is hidden by its opaque background.

   This avoids fighting Material's sidebar sizing while keeping the switcher
   visually static. */
.md-sidebar--primary > .afnio-nav-switcher {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 4.5rem;
  padding: 0.6rem;
  background-color: var(--md-default-bg-color);
  box-sizing: border-box;
}

/* Nav content inside the scrollwrap starts below the switcher. Material's
   scroll-to-active uses scroll-padding-top to leave room for the switcher
   when scrolling an item into view. */
.md-sidebar--primary > .md-sidebar__scrollwrap {
  scroll-padding-top: 4.5rem;
}

.md-sidebar--primary .md-sidebar__inner {
  padding-top: 4.5rem;
}

/* Summary card (always visible) */
.afnio-nav-switcher__current {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid hsla(0, 0%, 50%, 0.15);
  border-radius: 0.4rem;
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  cursor: pointer;
  list-style: none;         /* hide default disclosure triangle (Firefox) */
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.afnio-nav-switcher__current::-webkit-details-marker {
  display: none;            /* hide default disclosure triangle (Safari/Chrome) */
}

.afnio-nav-switcher__current:hover {
  background-color: hsla(0, 0%, 50%, 0.06);
  border-color: hsla(0, 0%, 50%, 0.25);
}

/* Chevron rotates 180deg when open */
.afnio-nav-switcher .afnio-nav-switcher__chevron {
  transition: transform 0.2s ease;
}
.afnio-nav-switcher[open] .afnio-nav-switcher__chevron {
  transform: rotate(180deg);
}

/* Dropdown menu — floats above the nav. Matches the summary card's width
   (insets equal the switcher container's horizontal padding) and is pulled
   up to sit just below the card. */
.afnio-nav-switcher__menu {
  position: absolute;
  top: calc(100% - 0.6rem);   /* start at card bottom (switcher padding-bottom is 0.6rem) */
  left: 0.6rem;               /* match switcher horizontal padding */
  right: 0.6rem;
  margin-top: 0.15rem;        /* tight visual gap below card */
  display: flex;
  flex-direction: column;
  border: 1px solid hsla(0, 0%, 50%, 0.15);
  border-radius: 0.4rem;
  background-color: var(--md-default-bg-color);
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 4px 12px hsla(0, 0%, 0%, 0.12);
}

.afnio-nav-switcher__option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.6rem;     /* tighter than the summary card */
  background-color: transparent;
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.afnio-nav-switcher__option + .afnio-nav-switcher__option {
  border-top: 1px solid hsla(0, 0%, 50%, 0.15);
}

.afnio-nav-switcher__option:hover {
  background-color: hsla(0, 0%, 50%, 0.06);
}

/* Active option: no background highlight — green checkmark on the right
   marks the currently selected item instead. */
.afnio-nav-switcher__check {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--md-primary-fg-color);
}

.afnio-nav-switcher__check svg {
  width: 100%;
  height: 100%;
  /* Lucide check uses stroke; let its inline fill="none" apply. */
}

.afnio-nav-switcher__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0.3rem;
  background-color: var(--md-accent-fg-color--transparent); /* brand @ 0.1 */
  border: 1px solid var(--md-primary-fg-color);
  color: var(--md-primary-fg-color);                         /* icon stroke = brand */
  box-sizing: border-box;
}

.afnio-nav-switcher__icon svg {
  width: 0.9rem;
  height: 0.9rem;
  /* Lucide icons are stroke-based; let their inline fill="none" attr apply. */
}

.afnio-nav-switcher__text {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.afnio-nav-switcher__title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--md-default-fg-color);
  line-height: 1.3;
}

.afnio-nav-switcher__subtitle {
  font-size: 0.55rem;
  color: var(--md-default-fg-color--light);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.afnio-nav-switcher__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--md-default-fg-color--light);
}

.afnio-nav-switcher__chevron svg {
  width: 100%;
  height: 100%;
  /* Lucide chevron uses stroke; let its inline fill="none" apply. */
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER META — Tellurio brand block + link columns
   Mirrors afnio.ai landing page Footer.tsx
───────────────────────────────────────────────────────────────────────────── */

/* NOTE: Material for MkDocs sets `html { font-size: 125% }` (1rem = 20px).
   Tailwind on the landing page uses 1rem = 16px. To match the landing footer
   pixel-for-pixel, all sizes here are in px instead of rem. */

.afnio-footer-meta {
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  padding: 0;
}

/* Match landing-page color tokens within the footer (dark mode only).
   --color-te-foreground = #ebebeb (full text)
   --color-te-muted-foreground = rgba(179,179,179,0.8) (links, tagline, icons)
   Light mode keeps Material's defaults (near-black text, ~54% black muted),
   which match the landing's light-mode colors closely enough. */
[data-md-color-scheme="slate"] .afnio-footer-meta {
  --md-default-fg-color: #ebebeb;
  --md-default-fg-color--light: rgba(179, 179, 179, 0.8);
}

/* Reset link decoration only. Colors are set per-element below so that
   muted links keep their muted shade. */
.afnio-footer-meta a,
.afnio-footer-meta a:visited {
  text-decoration: none;
  border-bottom: 0;
}

/* Outer wrapper — mirrors landing's `mx-auto max-w-350 px-6 py-12 md:py-16`. */
.afnio-footer__container {
  max-width: 1400px;       /* max-w-350 */
  margin: 0 auto;
  padding: 48px 24px;      /* py-12 px-6 (mobile) */
}

@media screen and (min-width: 48em) {
  .afnio-footer__container {
    padding-top: 64px;     /* md:py-16 */
    padding-bottom: 64px;
  }
}

.afnio-footer {
  display: grid;
  grid-template-columns: 2fr 1px 1fr 1px 1fr 1px 1fr;
  gap: 32px;               /* gap-8 */
  align-items: stretch;
}

.afnio-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;               /* gap-6 */
}

.afnio-footer__brand-top {
  display: flex;
  flex-direction: column;
  gap: 6px;                /* gap-1.5 */
}

.afnio-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;               /* gap-2.5 */
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.afnio-footer__logo-img {
  width: 28px;             /* size-7 */
  height: 28px;
}

[data-md-color-scheme="slate"] .afnio-footer__logo-img {
  filter: invert(1);
}

.afnio-footer__brand-name {
  color: #09090b;          /* light mode near-black — matches landing's wordmark */
  font-weight: 600;
  font-size: 18px;         /* text-lg */
  line-height: 1;          /* tight line-box so the glyph centers with the 28px logo */
  /* Geist via Google Fonts has slightly different ascender metrics than via
     next/font on the landing page; nudge up 0.5px so the optical baseline aligns
     with the icon's center, matching the landing render. */
  transform: translateY(-0.5px);
}

[data-md-color-scheme="slate"] .afnio-footer__brand-name {
  color: #fbfbfe;          /* dark mode near-white — matches landing's wordmark */
}

.afnio-footer__tagline {
  font-size: 14px;         /* text-sm */
  line-height: 20px;       /* text-sm line-height */
  color: var(--md-default-fg-color--light);
  margin: 0;
}

.afnio-footer__social {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;               /* gap-3 */
}

.afnio-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;             /* size-5 */
  height: 20px;
  color: var(--md-default-fg-color--light);
  transition: color 0.15s ease;
}

.afnio-footer__social a:hover {
  color: var(--md-default-fg-color);
}

.afnio-footer__social svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.afnio-footer__divider {
  background-color: rgba(102, 102, 102, 0.2);  /* --color-te-border = #6663 */
  width: 1px;
  align-self: stretch;
}

.afnio-footer__section {
  display: flex;
  flex-direction: column;
  gap: 12px;               /* gap-3 */
}

.afnio-footer__heading {
  font-size: 14px;         /* text-sm */
  line-height: 20px;
  font-weight: 600;
  margin: 0;
  color: var(--md-default-fg-color);
}

.afnio-footer__link {
  font-size: 14px;         /* text-sm */
  line-height: 20px;
  color: var(--md-default-fg-color--light);
  text-decoration: none;
  transition: color 0.15s ease;
}

.afnio-footer__link:hover {
  color: var(--md-default-fg-color);
}

.afnio-footer__copyright {
  margin-top: 48px;        /* mt-12 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;               /* gap-4 */
  /* Compensate for Geist's text-xs descender area making the line-box render
     ~0.5px taller than landing's; without this the copyright sits visibly lower. */
  transform: translateY(-0.5px);
}

.afnio-footer-meta .afnio-footer__copyright p {
  margin: 0;
  padding: 0;
  font-size: 12px;         /* text-xs */
  line-height: 16px;
  color: var(--md-default-fg-color--light);
}

/* Mobile layout — single column, hide vertical dividers.
   Tailwind md: = 48em / 768px. Below that, collapse to one column. */
@media screen and (max-width: 47.9375em) {
  .afnio-footer {
    grid-template-columns: 1fr;
    gap: 32px;             /* gap-8 — matches landing's mobile gap */
  }
  .afnio-footer__divider {
    display: none;
  }
  /* Flatten the brand block so brand-top and social become direct grid items.
     Lets us reorder social to the bottom on mobile, matching landing's layout. */
  .afnio-footer__brand {
    display: contents;
  }
  .afnio-footer__social {
    order: 1;              /* push social icons after all link sections */
    margin-top: 0;         /* `margin-top: auto` is meaningless once flattened */
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   404 ERROR PAGE — Mirrors afnio.ai landing not-found.tsx

   Inner-element selectors are scoped under `.md-typeset` so they win against
   Material's default typography (`.md-typeset h1`, `.md-typeset a`, etc.),
   which would otherwise override font-size, color, and link background.
───────────────────────────────────────────────────────────────────────────── */

/* Cascade flex-grow from body down to .afnio-404 so the 404 wrapper fills the
   space between header and footer. Without this, .afnio-404 sits inside four
   nested wrappers (md-main → md-main__inner → md-content → md-content__inner)
   that stay sized-to-content, leaving the 60vh box too short and too high in
   the viewport. Scoped via :has(.afnio-404) so it only affects the 404 page. */
body:has(.afnio-404) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:has(.afnio-404) .md-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body:has(.afnio-404) .md-main__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body:has(.afnio-404) .md-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

body:has(.afnio-404) .md-content__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;            /* Material's article padding would offset our centering. */
}

.md-typeset .afnio-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 60vh;         /* Fallback floor: applies in browsers without :has() */
  gap: 24px;                /* gap-6 */
  padding: 0 24px;          /* px-6 */
  text-align: center;
}

.md-typeset .afnio-404__heading {
  font-size: 60px;          /* text-6xl */
  font-weight: 700;
  color: var(--md-primary-fg-color);
  margin: 0;
  line-height: 1;
}

.md-typeset .afnio-404__message {
  font-size: 18px;          /* text-lg */
  line-height: 28px;
  color: var(--md-default-fg-color--light);
  /* Landing's `max-w-md` = 28rem at 16px root = 448px. Material's root is
     125% (20px), so `28rem` here would expand to 560px. Pin to px to match. */
  max-width: 448px;
  margin: 0;
}

.md-typeset .afnio-404__cta,
.md-typeset a.afnio-404__cta,
.md-typeset .afnio-404__cta:visited {
  display: inline-flex;
  justify-content: center;
  padding: 12px 20px;       /* py-3 px-5 */
  border-radius: 9999px;    /* rounded-full */
  font-weight: 500;
  letter-spacing: -0.025em; /* tracking-tight */
  background-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.md-typeset a.afnio-404__cta:hover {
  background-color: var(--md-primary-fg-color--light);
  color: var(--md-primary-bg-color);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TELLURIO globals.css → Zensical variable mapping reference

   --md-primary-fg-color             ← --color-brand
   --md-primary-fg-color--light      ← --color-brand-200
   --md-primary-fg-color--dark       ← (derived, not in globals.css)
   --md-primary-bg-color             ← --color-brand-foreground
   --md-primary-bg-color--light      ← (derived from brand-foreground)
   --md-accent-fg-color              ← --color-brand
   --md-accent-fg-color--transparent ← (derived from brand)
   --md-accent-bg-color              ← --color-brand-foreground
   --md-accent-bg-color--light       ← (derived from brand-foreground)
   --md-typeset-a-color              ← --color-brand
   --md-default-fg-color             ← --color-te-foreground
   --md-default-bg-color             ← --color-te-background
   --md-footer-bg-color              ← --color-te-background
───────────────────────────────────────────────────────────────────────────── */