/* ============================================================================
   mode.css — Documentation theme layer
   ----------------------------------------------------------------------------
   A thin, attribute-driven skin that sits ON TOP of dist/mode.css.
   No classes. Every hook is a semantic µ-* attribute.
   Safe to copy into your own project as a starting docs theme.
   ============================================================================ */

:root {
  /* Docs chrome accents (kept separate from the content color system) */
  --brand:        #6366f1;   /* indigo */
  --brand-2:      #00d3a7;   /* teal   */

  /* Docs layout rails */
  --docs-max:     1320px;
  --docs-aside:   208px;
  --docs-toc:     200px;

  /* Code surface */
  --code-bg:      #0b0d12;
  --code-text:    #e6edf3;
  --code-border:  #1f2733;
  --code-comment: #6b7686;
  --code-token:   #8be9c8;
}

/* ----------------------------------------------------------------------------
   Dark mode — driven by the native #theme-toggle checkbox (zero JS).
   :has() lets the toggle re-paint the whole document, body included.
   ---------------------------------------------------------------------------- */
body:has(#theme-toggle:checked) {
  --color-bg:     #0b0d12;
  --color-text:   #c9d1d9;
  --color-muted:  #8b95a5;
  --color-border: #1f2733;
  --color-accent: #f3f6fb;
  --color-accent-text: #0b0d12;
  --code-bg:      #06080c;
}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

/* ============================================================================
   HEADER — sticky, translucent, with brand + theme toggle
   ============================================================================ */
body > header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
}


body > header b {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  & code {padding: 0 .25em;font-weight: bolder;color: #ff7a18;background:#272727}
}

/* The little µ glyph badge in the logo */
body > header b > span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
}
body > header b > i { font-style: normal; color: var(--color-muted); font-weight: 600;   text-transform: uppercase;   font-size: medium;}


/* GitHub / version pill on the right of the nav */
[µ-pill] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: var(--size-small);
  font-weight: 600;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-muted);
}
[µ-pill]:hover { border-color: var(--brand); color: var(--brand); opacity: 1; }

/* Theme toggle button (sun / moon), reusing the native label-for-checkbox hook */
label[for="theme-toggle"] {
  cursor: pointer;
  padding: 0.4rem;
  font-size: 1.1rem;
  line-height: 1;
}
label[for="theme-toggle"]::before { content: "◐"; }
body:has(#theme-toggle:checked) label[for="theme-toggle"]::before { content: "◑"; }
/* mode.css hides every header label ≥1024px (hamburger logic) — re-show this one */
@media (min-width: 1024px) {
  body > header label[for="theme-toggle"] { display: block; }
}

/* ============================================================================
   DOCS SHELL — sidebar · content · (optional) table of contents
   <main µ-docs> · <main µ-docs="with-toc">
   ============================================================================ */
main[µ-docs] {
  max-width: var(--docs-max);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding-block: var(--spacing);
}

@media (min-width: 1024px) {
  main[µ-docs]          { grid-template-columns: var(--docs-aside) minmax(0, 1fr); }
  main[µ-docs="with-toc"] {
    grid-template-columns: var(--docs-aside) minmax(0, 1fr) var(--docs-toc);
  }
}

/* The article column shouldn't blow out — let code blocks scroll instead */
main[µ-docs] > article { min-width: 0; }
main[µ-docs] > article > section { padding-block: 0 calc(var(--spacing) * 2.5); }

/* ----------------------------------------------------------------------------
   SIDEBAR (left rail) — hidden on mobile (the header hamburger covers nav)
   ---------------------------------------------------------------------------- */
main[µ-docs] > aside {
  display: none;
}
@media (min-width: 1024px) {
  main[µ-docs] > aside {
    display: block;
    position: sticky;
    top: 5rem;
    align-self: start;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding-right: 0.5rem;
  }
}
main[µ-docs] > aside nav ul { list-style: none; margin: 0; display: grid; gap: 0.15rem; }
main[µ-docs] > aside nav small {
  display: block;
  margin: 1.25rem 0 0.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  font-size: 0.7rem;
}
main[µ-docs] > aside nav a {
  display: block;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--color-muted);
  border-left: 2px solid transparent;
}
main[µ-docs] > aside nav a:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  opacity: 1;
}
/* Active link — set [µ-here] on the current page's link */
main[µ-docs] > aside nav a[µ-here] {
  color: var(--brand);
  font-weight: 600;
  border-left-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

/* ----------------------------------------------------------------------------
   TABLE OF CONTENTS (right rail) — "On this page"
   ---------------------------------------------------------------------------- */
main[µ-docs] > nav[µ-toc] { display: none; }
@media (min-width: 1280px) {
  main[µ-docs] > nav[µ-toc] {
    display: block;
    position: sticky;
    top: 5rem;
    align-self: start;
    font-size: 0.85rem;
  }
}
main[µ-docs] > nav[µ-toc] small {
  display: block;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  font-size: 0.7rem;
  margin-bottom: 0.6rem;
}
main[µ-docs] > nav[µ-toc] ul { list-style: none; margin: 0; display: grid; gap: 0.1rem; }
main[µ-docs] > nav[µ-toc] a {
  display: block;
  padding: 0.25rem 0.6rem;
  color: var(--color-muted);
  border-left: 2px solid var(--color-border);
}
main[µ-docs] > nav[µ-toc] a:hover { color: var(--brand); border-left-color: var(--brand); opacity: 1; }

/* ============================================================================
   PAGE HEADINGS — anchor-friendly, with a generous lede
   ============================================================================ */
[µ-lede] {
  font-size: 1.2rem;
  color: var(--color-muted);
  max-width: 60ch;
  margin-bottom: calc(var(--spacing) * 1.25);
}

/* Section titles get a quiet eyebrow when wrapped in <small> */
article section > h2 { scroll-margin-top: 5rem; margin-top: 0.2rem; }
article section > h3 { scroll-margin-top: 5rem; }

/* Eyebrow label above a heading */
[µ-eyebrow] {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 0.5rem;
}

/* ============================================================================
   CODE — inline + blocks
   ============================================================================ */
:not(pre) > code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: color-mix(in srgb, var(--brand) 80%, var(--color-text));
  white-space: nowrap;
}

pre {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin-bottom: var(--spacing);
  font-size: 0.84rem;
  line-height: 1.7;
  tab-size: 2;
}
pre code {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color: inherit;
  white-space: pre;
}
/* Optional filename ribbon: <pre µ-file="index.html"> */
pre[µ-file] { padding-top: 2.4rem; position: relative; }
pre[µ-file]::before {
  content: attr(µ-file);
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 0.4rem 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--code-comment);
  background: color-mix(in srgb, var(--code-text) 6%, transparent);
  border-bottom: 1px solid var(--code-border);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ============================================================================
   EXAMPLE — live preview stacked over its source
   <figure µ-example> <div>…live HTML…</div> <pre><code>…</code></pre> </figure>
   ============================================================================ */
[µ-example] {
  margin: 0 0 var(--spacing);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}
[µ-example] > div:first-child {
  padding: clamp(1.25rem, 4vw, 2rem);
  background:
    radial-gradient(color-mix(in srgb, var(--color-border) 55%, transparent) 1px, transparent 1px);
  background-size: 16px 16px;
}
[µ-example] > div:first-child > :last-child { margin-bottom: 0; }
[µ-example] > pre {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--code-border);
  border-radius: 0;
}
/* Caption row, e.g. a label for the example */
[µ-example] > figcaption {
  padding: 0.5rem 1rem;
  font-size: var(--size-small);
  color: var(--color-muted);
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-border) 25%, transparent);
}

/* ============================================================================
   CALLOUTS — <aside µ-note>, "warn", "tip", "danger"
   ============================================================================ */
[µ-note] {
  --_c: var(--brand);
  margin: 0 0 var(--spacing);
  padding: 0.9rem 1.1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: 3px solid var(--_c);
  background: color-mix(in srgb, var(--_c) 8%, transparent);
  font-size: 0.95rem;
}
[µ-note] > :last-child { margin-bottom: 0; }
[µ-note] strong:first-child { color: var(--_c); }
[µ-note~="tip"]    { --_c: #10b981; }
[µ-note~="warn"]   { --_c: #f59e0b; }
[µ-note~="danger"] { --_c: #ef4444; }

/* ============================================================================
   REFERENCE TABLES
   ============================================================================ */
[µ-table] { overflow-x: auto; margin-bottom: var(--spacing); }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
thead th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}
tbody tr:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
td code { white-space: nowrap; }

/* ============================================================================
   PILLS / BADGES / KBD niceties
   ============================================================================ */
[µ-badge] {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--brand);
}
[µ-badge~="ghost"] { background: transparent; border: 1px solid var(--color-border); color: var(--color-muted); }
kbd {
  font-family: ui-monospace, monospace;
  font-size: 0.78em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--color-border) 25%, transparent);
}

/* ============================================================================
   HERO (docs landing intro)
   ============================================================================ */
[µ-hero] {
  text-align: center;
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(1.5rem, 5vw, 3rem);
}
[µ-hero] h1 {
  font-size: clamp(2.4rem, 6vw, 3.1rem);
  background: linear-gradient(120deg, var(--color-accent), var(--brand) 60%, var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.6rem;
}
[µ-hero] p { font-size: 1.2rem; color: var(--color-muted); max-width: 56ch; margin-inline: auto; }
[µ-hero] [µ-buttons] { justify-content: center; margin-top: 1.5rem; }

/* Generic button cluster used in the hero / callouts */
[µ-buttons] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
[µ-buttons] a[role="button"], [µ-buttons] button { width: auto; }
[µ-buttons] a[µ-ghost] {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
}
[µ-buttons] a[µ-ghost]:hover { border-color: var(--brand); color: var(--brand); opacity: 1; }

/* Footer polish */
body > footer b { color: var(--color-accent); }
body > footer a:hover { color: var(--brand); opacity: 1; }

/* ============================================================================
   mode.js API docs — additions on top of the mode.css docs theme.
   Same rules as above: no classes, every hook a semantic µ-* attribute.
   ============================================================================ */

/* Library divider in the left rail — <b µ-lib>µ — mode.js</b> */
[µ-lib] {
  display: block;
  margin: 1.5rem 0 .1rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--brand);
}
[µ-lib]:first-child { margin-top: 0; }

/* ----------------------------------------------------------------------------
   Collapsible left-rail groups — pure CSS via native <details>/<summary>.
   Reference: mode.css kit5 accordions (native details, no JS).

   The group label is a real link: <summary><a href="#section">Group</a></summary>.
   Per the HTML spec the click's activation target is the innermost activatable
   element, so clicking the <a> navigates and the <details> does NOT toggle,
   while clicking anywhere else on the summary row (the free space + chevron)
   toggles the group. No JS, no classes.
   ---------------------------------------------------------------------------- */
main[µ-docs] > aside nav details {
  border: 0;
}

main[µ-docs] > aside nav summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0.35rem;
  padding: 0.1rem 0.45rem 0.1rem 0;
  border-radius: var(--radius);
  cursor: pointer;                  /* the row toggles */
  list-style: none;                 /* hide the default disclosure triangle */
  user-select: none;
}
main[µ-docs] > aside nav summary::-webkit-details-marker { display: none; }

/* The label link — sized to its text; the rest of the row stays the toggle. */
main[µ-docs] > aside nav summary > a {
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  color: var(--color-muted);
  text-decoration: none;
  cursor: pointer;                  /* the label navigates */
  transition: color 0.12s, background 0.12s;
}
main[µ-docs] > aside nav summary > a:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  opacity: 1;
}
main[µ-docs] > aside nav details[open] > summary > a { color: var(--color-accent); }

/* Hover feedback on the toggle zone (row minus the link). */
main[µ-docs] > aside nav summary:hover {
  background: color-mix(in srgb, var(--brand) 6%, transparent);
}
main[µ-docs] > aside nav summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* disclosure chevron — pinned right, points right when collapsed, down when open */
main[µ-docs] > aside nav summary::after {
  content: "›";
  margin-left: auto;                /* push the chevron to the far right */
  padding-right: 0.2rem;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-muted);
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
main[µ-docs] > aside nav details[open] > summary::after {
  transform: rotate(90deg);
  opacity: 1;
}

/* Method signature: <h3 id="…">name <span µ-badge>sync</span></h3> */
article section > h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 2.2rem;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--brand);
}

/* The docs badge is indigo (sync); async reads teal. */
[µ-badge~="async"] {
  background: color-mix(in srgb, var(--brand-2) 16%, transparent);
  color: var(--brand-2);
}

/* ----------------------------------------------------------------------------
   Code surface — Prism owns the tokens, this theme owns the container.
   prism-tomorrow styles pre[class*="language-"] (0,1,1). pre[µ-code] matches
   that specificity and loads later, so the docs surface wins with no
   !important and no class selector authored here.
   ---------------------------------------------------------------------------- */
pre[µ-code] {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 var(--spacing);
  overflow-x: auto;
  font-size: 0.82rem;
  line-height: 1.7;
  tab-size: 2;
}
pre[µ-code] > code {
  background: none;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: inherit;
  white-space: pre;
}

/* The API index is long — let the right rail scroll with the viewport. */
@media (min-width: 1280px) {
  main[µ-docs] > nav[µ-toc] {
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}

/* ============================================================================
   SCROLLBARS — native chrome, theme-aware.
   ----------------------------------------------------------------------------
   `color-scheme` is the native hook: it tells the UA to paint its OWN
   scrollbars — plus every other native control — in light or dark. Declaring
   it explicitly also stops a dark-OS browser from painting dark scrollbars
   onto our light theme (and vice versa).

   The #theme-toggle checkbox lives inside <body>, but :has() still reaches the
   root from there — so the *page* scrollbar flips too, not just the rails.

   The standard scrollbar-* properties then slim the internal rails down, and
   the ::-webkit-* block covers engines that don't support them yet
   (Safari < 18.2, Chrome < 121). All colours come from the theme tokens.
   ============================================================================ */
:root {
  color-scheme: light;
  --scroll-thumb: color-mix(in srgb, var(--color-border) 60%, var(--color-text));
  --scroll-thumb-hover: var(--brand);
}

html:has(#theme-toggle:checked) {
  color-scheme: dark;
  --scroll-thumb: color-mix(in srgb, var(--code-border) 80%, var(--color-muted));
}

/* every internal scroll container in the docs shell */
main[µ-docs] > aside,
main[µ-docs] > nav[µ-toc],
[µ-table],
pre[µ-code] {
  scrollbar-width: .5em;
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* WebKit / Blink fallback */
:is(main[µ-docs] > aside, main[µ-docs] > nav[µ-toc], [µ-table], pre[µ-code])::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
:is(main[µ-docs] > aside, main[µ-docs] > nav[µ-toc], [µ-table], pre[µ-code])::-webkit-scrollbar-track {
  background: transparent;
}
:is(main[µ-docs] > aside, main[µ-docs] > nav[µ-toc], [µ-table], pre[µ-code])::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
:is(main[µ-docs] > aside, main[µ-docs] > nav[µ-toc], [µ-table], pre[µ-code]):hover::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-hover);
  background-clip: padding-box;
}
:is(main[µ-docs] > aside, main[µ-docs] > nav[µ-toc], [µ-table], pre[µ-code])::-webkit-scrollbar-corner {
  background: transparent;
}