/* ============================================================
   polarize-ui — DOCS layer

   A documentation site for a library or tool: the three-column shell (top bar
   with search, left nav, "on this page"), a code window, the example panel that
   shows one real call with its input and output, the plots it draws, an API
   reference entry, package cards, dataset cards, callouts and chips.

   The layout follows the familiar docs-site shape (Tailwind's Syntax and
   Protocol templates are the reference); the surface follows landing.css:
   hairline --border-strong rules, --radius-xs cards, 2px chips, no shadows.
   The code window is always dark in both themes (tokens.json `code`).

   Load AFTER design.css (zero-build) or after src/index.css (React), with
   landing.css if you use its .ui-cta / .ui-brand / <ui-cellfield> in the hero.
   Behaviour (search, copy, tabs, scroll-spy, theme toggle, plots) is docs.js.
   Guide: DOCS-SITES.md.

   Rules, the same as design.css, publication.css and landing.css, checked by
   dev_check.py:
     · every colour is a token — no hex, no rgb()
     · the sans is never bold and never tracked
     · uppercase is always the mono face; the display serif is never uppercased
     · the brand colour is read through --pub-accent (see publication.css)
   ============================================================ */

.ui-docsite {
  --docsite-bar-h: 64px;
  --docsite-nav-w: 256px;
  --docsite-toc-w: 220px;
  --docsite-grid: color-mix(in oklab, var(--foreground) 6%, transparent);
  margin: 0; background: var(--background); color: var(--foreground);
}
html:has(.ui-docsite) { scroll-padding-top: calc(var(--docsite-bar-h, 64px) + 24px); }
.ui-docsite :where(a) { color: inherit; }
.ui-docsite :not(pre) > code {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--muted); border: 1px solid var(--border-strong); border-radius: 2px; padding: .08em .35em;
  overflow-wrap: anywhere;
}
.ui-docsite kbd {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground);
  border: 1px solid var(--border-strong); border-radius: 2px; padding: 1px 5px; background: var(--muted);
}

/* ---------- Top bar ---------- */
.ui-docsite__bar {
  position: sticky; top: 0; z-index: 40; height: var(--docsite-bar-h);
  display: flex; align-items: center; gap: var(--space-4);
  padding: 0 clamp(var(--space-4), 3vw, var(--space-7));
  background: color-mix(in oklab, var(--background) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-strong);
}
.ui-docsite__brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--foreground); }
.ui-docsite__brand-sub {
  font-family: var(--font-mono); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .18em;
  color: var(--faint-foreground);
}
.ui-docsite__search-btn {
  margin-left: 28px; display: flex; align-items: center; gap: 10px; width: min(360px, 40vw); height: 40px;
  padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); background: transparent;
  color: var(--muted-foreground); font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color var(--motion-fast) cubic-bezier(.2, .7, .3, 1);
}
.ui-docsite__search-btn:hover { border-color: var(--pub-accent, var(--accent)); }
.ui-docsite__search-btn > span { flex: 1; text-align: left; }
.ui-docsite__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.ui-docsite__iconbtn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong); background: transparent; color: var(--foreground); cursor: pointer;
  transition: border-color var(--motion-fast) cubic-bezier(.2, .7, .3, 1);
}
.ui-docsite__iconbtn:hover { border-color: var(--pub-accent, var(--accent)); }
.ui-docsite__iconbtn:focus-visible, .ui-docsite__search-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-docsite__iconbtn svg { width: 18px; height: 18px; }
.ui-docsite__navtoggle { display: none; }
/* A pill for a status the reader must not miss (e.g. PRIVATE). */
.ui-docsite__flag {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--refuted); border: 1px solid color-mix(in oklab, var(--refuted) 45%, transparent);
  border-radius: 2px; padding: 3px 9px; margin-right: 6px;
}
/* Theme-toggle icons: sun in light, moon in dark, following the three-state rule. */
.ui-docsite__moon { display: none; }
:root[data-theme$="dark"] .ui-docsite__sun, :root[data-theme="polarize"] .ui-docsite__sun { display: none; }
:root[data-theme$="dark"] .ui-docsite__moon, :root[data-theme="polarize"] .ui-docsite__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .ui-docsite__sun { display: none; }
  :root:not([data-theme]) .ui-docsite__moon { display: block; }
}

/* ---------- Three-column shell ---------- */
.ui-docsite__shell {
  display: grid; grid-template-columns: var(--docsite-nav-w) minmax(0, 1fr) var(--docsite-toc-w);
  max-width: 1440px; margin: 0 auto;
}
.ui-docsite__shell--wide { grid-template-columns: var(--docsite-nav-w) minmax(0, 1fr); }
.ui-docsite__shell--wide .ui-docsite__toc { display: none; }
.ui-docsite__nav {
  position: sticky; top: var(--docsite-bar-h); height: calc(100vh - var(--docsite-bar-h)); overflow-y: auto;
  padding: 28px 20px 40px 24px; border-right: 1px solid var(--border-strong);
}
.ui-docsite__navgroup + .ui-docsite__navgroup { margin-top: 26px; }
.ui-docsite__navtitle {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--foreground);
}
.ui-docsite__nav ul, .ui-docsite__toc ul { list-style: none; margin: 0; padding: 0; }
.ui-docsite__nav ul { border-left: 1px solid var(--border-strong); }
.ui-docsite__nav li a {
  display: flex; align-items: center; gap: 6px; margin-left: -1px; padding: 5px 0 5px 14px;
  border-left: 1px solid transparent; color: var(--muted-foreground); text-decoration: none; font-size: 13.5px;
}
.ui-docsite__nav li a:hover { color: var(--foreground); border-left-color: var(--foreground); }
.ui-docsite__nav li a.is-current { color: var(--pub-accent, var(--accent)); border-left-color: var(--pub-accent, var(--accent)); }
/* A sub-page of the item above it (e.g. the signal types under one extension). */
.ui-docsite__nav li.is-sub a { padding-left: 28px; font-size: 13px; }
.ui-docsite__nav li.is-sub a::before { content: "↳"; margin-right: 2px; color: var(--faint-foreground); }
.ui-docsite__navmeta { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--faint-foreground); }

.ui-docsite__main { min-width: 0; padding: 40px clamp(20px, 4vw, 56px) 80px; }
.ui-docsite__shell:not(.ui-docsite__shell--wide) .ui-docsite__main > * { max-width: 780px; }
.ui-docsite__shell:not(.ui-docsite__shell--wide) .ui-docsite__main > .ui-example { max-width: 1000px; }
.ui-docsite__toc {
  position: sticky; top: var(--docsite-bar-h); height: calc(100vh - var(--docsite-bar-h)); overflow-y: auto;
  padding: 36px 20px 40px 8px; font-size: 12.5px;
}
.ui-docsite__toc li a { display: block; padding: 4px 0; color: var(--muted-foreground); text-decoration: none; line-height: 1.35; }
.ui-docsite__toc li.is-sub a { padding-left: 12px; font-size: var(--text-sm); }
.ui-docsite__toc li a:hover { color: var(--foreground); }
.ui-docsite__toc li a.is-active { color: var(--pub-accent, var(--accent)); }
.ui-docsite__foot { margin-top: 72px; padding-top: 18px; border-top: 1px solid var(--border-strong); font-size: var(--text-sm); color: var(--faint-foreground); }

/* ---------- Page type ---------- */
.ui-docsite__eyebrow {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pub-accent, var(--accent));
}
.ui-docsite__title, .ui-docsite__hero-title {
  font-family: var(--font-display); font-weight: 400; line-height: 1.06; letter-spacing: -.015em; text-transform: none;
}
.ui-docsite__title { margin: 0 0 12px; font-size: var(--display-1); }
.ui-docsite__lead { font-size: 16px; line-height: 1.6; color: var(--muted-foreground); margin: 0 0 22px; max-width: 64ch; }
.ui-docsite__h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: -.015em; line-height: 1.15;
  margin: 56px 0 10px; padding-top: 20px; border-top: 1px solid var(--border-strong);
}
.ui-docsite__sublead { color: var(--muted-foreground); margin: 0 0 22px; }
.ui-docsite__prose { line-height: 1.7; color: var(--muted-foreground); }
.ui-docsite__prose strong { color: var(--foreground); font-weight: 400; }
.ui-docsite__prose h2, .ui-docsite__prose h3, .ui-docsite__prose h4 { color: var(--foreground); font-weight: 400; }
.ui-docsite__prose h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: -.015em; margin: 40px 0 8px; }
.ui-docsite__prose h3 { font-family: var(--font-display); font-size: 21px; letter-spacing: -.015em; margin: 30px 0 6px; }
.ui-docsite__prose h4 { font-size: 15px; margin: 22px 0 4px; }
.ui-docsite__prose p { margin: 0 0 14px; }
.ui-docsite__prose ul, .ui-docsite__prose ol { padding-left: 20px; margin: 0 0 14px; }
.ui-docsite__prose li { margin: 4px 0; }
.ui-docsite__prose li::marker { color: var(--faint-foreground); }
.ui-docsite__prose a {
  color: var(--pub-accent, var(--accent)); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--pub-accent, var(--accent)) 35%, transparent);
}
.ui-docsite__prose blockquote { margin: 18px 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--pub-accent, var(--accent)); color: var(--foreground); }
.ui-docsite__prose .ui-codewin, .ui-docsite__prose > pre { margin: 14px 0 18px; }
.ui-docsite__tablewrap { overflow-x: auto; margin: 16px 0 20px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.ui-docsite__tablewrap table, .ui-datatable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ui-docsite__tablewrap th, .ui-datatable th {
  text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--foreground); background: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--border-strong);
}
.ui-docsite__tablewrap td, .ui-datatable td { padding: 9px 12px; border-bottom: 1px solid var(--border-strong); vertical-align: top; color: var(--muted-foreground); }
.ui-docsite__tablewrap tr:last-child td, .ui-datatable tr:last-child td { border-bottom: 0; }
.ui-datatable-wrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }

/* ---------- Code window: always dark ---------- */
.ui-codewin {
  border-radius: var(--radius-xs); overflow: hidden;
  background: var(--code-background); border: 1px solid var(--code-border); color: var(--code-foreground);
}
.ui-codewin__bar {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px;
  background: var(--code-bar); border-bottom: 1px solid var(--code-border);
}
.ui-codewin__dots { display: flex; gap: 6px; }
.ui-codewin__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--code-border); display: block; }
.ui-codewin__name { font-family: var(--font-mono); font-size: 11.5px; color: var(--code-muted); }
.ui-codewin__copy {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--code-muted); background: transparent; border: 1px solid var(--code-border); border-radius: 2px;
  padding: 3px 8px; cursor: pointer;
}
.ui-codewin__copy:hover { color: var(--code-foreground); border-color: var(--code-muted); }
.ui-codewin pre, pre.ui-codewin__code { margin: 0; padding: 16px 18px; overflow-x: auto; font-size: 12.5px; line-height: 1.65; }
.ui-codewin pre code { font-family: var(--font-mono); font-size: inherit; background: none; border: 0; padding: 0; color: inherit; }
.ui-codewin__out { border-top: 1px dashed var(--code-border); color: var(--code-muted); font-size: 11.5px; }
.ui-codewin__note { margin: 0; padding: 8px 18px 12px; font-size: 11px; color: var(--code-muted); }
.ui-tok--kw { color: var(--syntax-keyword); }
.ui-tok--str { color: var(--syntax-string); }
.ui-tok--num { color: var(--syntax-number); }
.ui-tok--com { color: var(--syntax-comment); font-style: italic; }
.ui-tok--fn { color: var(--syntax-function); }

/* ---------- Home hero: copy beside a code window, optional cell field behind ---------- */
.ui-docsite__hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px); margin: -8px 0 28px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow: hidden;
}
.ui-docsite__kicker {
  margin: 0 0 14px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pub-accent, var(--accent));
}
.ui-docsite__hero-title { margin: 0 0 16px; font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.05; }
.ui-docsite__hero-lead { color: var(--muted-foreground); font-size: 15.5px; line-height: 1.65; margin: 0 0 24px; max-width: 52ch; }
.ui-docsite__hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.ui-docsite__hero-actions .ui-cta { text-decoration: none; }
.ui-docsite__hero-actions .ui-cta--solid .ui-cta__text { height: 42px; }
.ui-docsite__hero .ui-codewin pre { font-size: var(--text-sm); }

/* ---------- Counts, explainer row ---------- */
.ui-statrow { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); margin-bottom: 8px; }
.ui-statrow__item { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; }
.ui-statrow__item + .ui-statrow__item { border-left: 1px solid var(--border-strong); }
.ui-statrow__n { font-family: var(--font-display); font-size: 34px; line-height: 1; }
.ui-statrow__label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.ui-howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.ui-howto__item { padding: 18px 20px; }
.ui-howto__item + .ui-howto__item { border-left: 1px solid var(--border-strong); }
.ui-howto__step {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--pub-accent, var(--accent));
}
.ui-howto__text { margin: 0; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.55; }

/* ---------- Package cards (an extension, plugin, module) ---------- */
.ui-pkgcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ui-pkgcard {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--radius-xs);
  border: 1px solid var(--border-strong); background: transparent; text-decoration: none; overflow: hidden; isolation: isolate;
  transition: border-color var(--motion-fast) cubic-bezier(.2, .7, .3, 1);
}
.ui-pkgcard:hover { border-color: var(--pub-accent, var(--accent)); }
.ui-pkgcard:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
/* The grid texture follows the pointer (docs.js sets --mx/--my). */
.ui-pkgcard__grid {
  position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--motion-slow) cubic-bezier(.2, .7, .3, 1);
  background-image: linear-gradient(var(--docsite-grid) 1px, transparent 1px), linear-gradient(90deg, var(--docsite-grid) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), black, transparent);
  mask-image: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), black, transparent);
}
.ui-pkgcard:hover .ui-pkgcard__grid { opacity: 1; }
.ui-pkgcard__top { display: flex; align-items: center; justify-content: space-between; }
.ui-pkgcard__icon {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 2px;
  color: var(--pub-accent, var(--accent)); border: 1px solid var(--border-strong);
}
.ui-pkgcard__icon svg { width: 20px; height: 20px; }
.ui-pkgcard__ver { font-family: var(--font-mono); font-size: 11px; color: var(--muted-foreground); }
.ui-pkgcard__title { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; letter-spacing: -.015em; color: var(--foreground); }
.ui-pkgcard__desc { margin: 0; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.55; flex: 1; }
.ui-pkgcard__foot {
  display: flex; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint-foreground);
}

/* ---------- Chips, callouts, empty state ---------- */
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 22px; }
.ui-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--border-strong);
  border-radius: 2px; font-size: 12.5px; color: var(--muted-foreground); text-decoration: none;
}
a.ui-chip:hover { border-color: var(--pub-accent, var(--accent)); color: var(--foreground); }
.ui-chip code { background: none !important; border: 0 !important; padding: 0 !important; font-size: 11.5px; color: var(--foreground); }
.ui-chip__label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint-foreground); }
.ui-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--measured); }
.ui-chip__lic { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint-foreground); }
.ui-callout { border-radius: var(--radius-xs); padding: 14px 18px; margin: 0 0 22px; border: 1px solid; font-size: 13.5px; line-height: 1.6; }
.ui-callout p { margin: 0 0 6px; }
.ui-callout p:last-child { margin: 0; }
.ui-callout strong { font-weight: 400; color: var(--foreground); }
.ui-callout__label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ui-callout--warn { border-color: color-mix(in oklab, var(--exploring) 40%, transparent); background: color-mix(in oklab, var(--exploring) 7%, transparent); }
.ui-callout--warn .ui-callout__label { color: var(--exploring); }
.ui-callout--info { border-color: color-mix(in oklab, var(--predicted) 35%, transparent); background: color-mix(in oklab, var(--predicted) 6%, transparent); }
.ui-callout--info .ui-callout__label { color: var(--predicted); }
.ui-empty { padding: 22px; border: 1px dashed var(--border-strong); border-radius: var(--radius-xs); color: var(--muted-foreground); font-size: 13.5px; }

/* ---------- Example: one real call, its code, input and output ---------- */
.ui-example { margin: 28px 0 44px; }
.ui-example__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ui-example__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: -.015em; }
.ui-example__summary { margin: 0; color: var(--muted-foreground); line-height: 1.6; }
.ui-example__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ui-example__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ui-example__io { border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow: hidden; }
.ui-example__tabs { display: flex; align-items: center; gap: 2px; padding: 0 10px; height: 42px; border-bottom: 1px solid var(--border-strong); }
.ui-example__tab {
  height: 42px; padding: 0 10px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-foreground); cursor: pointer;
}
.ui-example__tab[aria-selected="true"] { color: var(--pub-accent, var(--accent)); border-bottom-color: var(--pub-accent, var(--accent)); }
.ui-example__spacer { flex: 1; }
.ui-example__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 22px; }
.ui-example__foot { margin: 10px 0 0; font-size: 11.5px; color: var(--faint-foreground); }
.ui-example__raw { margin-top: 12px; font-size: 12.5px; }
.ui-example__raw pre {
  max-height: 360px; overflow: auto; background: var(--code-background); color: var(--code-foreground);
  border-radius: var(--radius-xs); padding: 14px; font-size: 11.5px; margin-top: 8px;
}
.ui-example__raw summary, .ui-apientry__more summary {
  cursor: pointer; color: var(--muted-foreground); font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
}
/* A broken example stays on the page, labelled; it is never silently dropped. */
.ui-example__error { padding: 14px; border: 1px solid color-mix(in oklab, var(--refuted) 40%, transparent); border-radius: var(--radius-xs); font-size: 12.5px; }
.ui-example__error pre { font-size: 11px; overflow: auto; }
.ui-example__failed { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--refuted); font-weight: 500; }
.ui-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 14px 0 0; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.ui-facts__item { padding: 12px 16px; }
.ui-facts__item + .ui-facts__item { border-left: 1px solid var(--border-strong); }
.ui-facts dt { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint-foreground); margin-bottom: 4px; }
.ui-facts dd { margin: 0; font-size: 14px; color: var(--foreground); overflow-wrap: anywhere; }

/* ---------- Plots drawn by docs.js from a JSON spec ---------- */
.ui-plot { margin: 0; }
.ui-plot__title {
  margin: 0 0 8px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--foreground);
}
.ui-plot__cap { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--faint-foreground); }
.ui-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ui-plot .ui-plot__ax { stroke: var(--border-strong); stroke-width: 1; }
.ui-plot .ui-plot__grid { stroke: var(--border); stroke-width: 1; }
.ui-plot .ui-plot__tick { fill: var(--faint-foreground); font-family: var(--font-mono); font-size: 10px; }
.ui-plot .ui-plot__axl { fill: var(--muted-foreground); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; }
.ui-plot .ui-plot__mk { stroke: var(--exploring); stroke-width: 1; stroke-dasharray: 3 3; }
.ui-plot .ui-plot__mkl { fill: var(--exploring); font-family: var(--font-mono); font-size: 10px; }
.ui-plot .ui-plot__hover { stroke: var(--foreground); stroke-width: 1; opacity: .35; }
.ui-plot .ui-plot__tip { font-family: var(--font-mono); font-size: 10.5px; fill: var(--foreground); }
.ui-plot__legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 11.5px; color: var(--muted-foreground); }
.ui-plot__legend i { display: inline-block; width: 10px; height: 2px; margin-right: 5px; vertical-align: middle; }
.ui-stems { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ui-stems__cell { border: 1px solid var(--border-strong); border-radius: var(--radius-xs); padding: 10px 12px 8px; }
.ui-stems__name {
  margin: 0 0 2px; display: flex; gap: 8px; align-items: baseline; font-family: var(--font-mono); font-size: 11px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.ui-stems__flag { font-family: var(--font-mono); font-size: 9.5px; color: var(--refuted); letter-spacing: .12em; text-transform: uppercase; }
.ui-stems__note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--faint-foreground); }
.ui-verdicts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); }
.ui-verdicts__item { display: grid; grid-template-columns: 170px 96px 1fr; gap: 12px; padding: 10px 12px; font-size: 12.5px; align-items: baseline; }
.ui-verdicts__item + .ui-verdicts__item { border-top: 1px solid var(--border-strong); }
.ui-verdicts__key { font-family: var(--font-mono); font-size: 11.5px; color: var(--foreground); overflow-wrap: anywhere; }
.ui-verdicts__key small { display: block; color: var(--faint-foreground); font-size: 10px; margin-top: 2px; }
/* The verdict WORD is always shown; colour only reinforces it. */
.ui-verdicts__word {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; justify-self: start; border: 1px solid; color: var(--exploring);
  border-color: color-mix(in oklab, var(--exploring) 40%, transparent);
}
.ui-verdicts__word[data-verdict="yes"] { color: var(--measured); border-color: color-mix(in oklab, var(--measured) 40%, transparent); }
.ui-verdicts__word[data-verdict="no"] { color: var(--refuted); border-color: color-mix(in oklab, var(--refuted) 40%, transparent); }
.ui-verdicts__word[data-verdict="none"] { color: var(--muted-foreground); border-color: var(--border-strong); border-style: dashed; }
.ui-verdicts__reason { color: var(--muted-foreground); line-height: 1.5; }
.ui-hbars { display: flex; flex-direction: column; gap: 6px; }
.ui-hbars__row { display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; align-items: center; font-size: var(--text-sm); }
.ui-hbars__label { font-family: var(--font-mono); color: var(--muted-foreground); }
.ui-hbars__track { height: 10px; background: var(--muted); border-radius: 2px; overflow: hidden; }
.ui-hbars__fill { height: 100%; background: var(--series-1); border-radius: 2px; }
.ui-hbars__value { font-family: var(--font-mono); text-align: right; color: var(--foreground); }

/* ---------- API reference ---------- */
.ui-apimod { margin: 26px 0 34px; }
.ui-apimod__title { margin: 0 0 4px; font-size: 15px; font-weight: 400; }
.ui-apimod__sum { margin: 0 0 14px; color: var(--muted-foreground); font-size: 13.5px; line-height: 1.6; }
.ui-apientry { padding: 16px 0; border-top: 1px solid var(--border-strong); }
.ui-apientry__head { display: flex; align-items: baseline; gap: 10px; }
.ui-apientry__name { margin: 0; font-weight: 400; }
.ui-apientry__name code { font-size: 14px; color: var(--foreground); background: none !important; border: 0 !important; padding: 0 !important; }
.ui-apientry__kind {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pub-accent, var(--accent)); border: 1px solid var(--border-strong); border-radius: 2px; padding: 1px 6px;
}
.ui-apientry__src {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--faint-foreground);
  text-decoration: none; letter-spacing: .08em; text-transform: uppercase;
}
.ui-apientry__src:hover { color: var(--pub-accent, var(--accent)); }
.ui-apientry__sig {
  margin: 10px 0; padding: 10px 12px; border-radius: var(--radius-xs); background: var(--muted); border: 1px solid var(--border-strong);
  font-size: var(--text-sm); overflow-x: auto; white-space: pre-wrap;
}
.ui-apientry__sig code { font-family: var(--font-mono); background: none !important; border: 0 !important; padding: 0 !important; color: var(--foreground); }
.ui-apientry__doc { font-size: 13.5px; }
.ui-apientry__doc p { margin: 0; }
.ui-apientry__more { margin-top: 8px; }
.ui-apientry__more .ui-docsite__prose { font-size: 13px; margin-top: 8px; }
.ui-modlist { border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow: hidden; }
.ui-modlist__row {
  display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 10px 14px; font-size: 13px;
  color: var(--muted-foreground); text-decoration: none; line-height: 1.5;
}
.ui-modlist__row + .ui-modlist__row { border-top: 1px solid var(--border-strong); }
a.ui-modlist__row:hover { background: var(--muted); }
.ui-modlist__row > code { color: var(--foreground); background: none !important; border: 0 !important; padding: 0 !important; }

/* ---------- Dataset card: licence and citation travel with the data ---------- */
.ui-dataset { padding: 22px 0 26px; border-top: 1px solid var(--border-strong); }
.ui-dataset__head { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; }
.ui-dataset__head h2, .ui-dataset__head h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--display-3); letter-spacing: -.015em; }
.ui-dataset__lic {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--measured); border: 1px solid color-mix(in oklab, var(--measured) 40%, transparent);
  padding: 2px 8px; border-radius: 2px; white-space: nowrap;
}
.ui-dataset__why { color: var(--muted-foreground); line-height: 1.6; }
.ui-dataset__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; }
.ui-dataset__dl dt { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint-foreground); margin-bottom: 3px; }
.ui-dataset__dl dd { margin: 0; font-size: 13px; }
.ui-dataset__dl a, .ui-dataset__cite a { color: var(--pub-accent, var(--accent)); }
.ui-dataset__cite, .ui-dataset__used { font-size: 13px; color: var(--muted-foreground); line-height: 1.6; }

/* ---------- Search palette ---------- */
.ui-docsearch {
  position: fixed; inset: 0; z-index: 80; background: color-mix(in oklab, var(--foreground) 45%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); display: flex; justify-content: center; padding-top: 12vh;
}
.ui-docsearch[hidden] { display: none; }
.ui-docsearch__panel {
  width: min(620px, calc(100vw - 32px)); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); overflow: hidden;
}
.ui-docsearch__input { border: 0; border-bottom: 1px solid var(--border-strong); padding: 16px 18px; font: inherit; font-size: 15px; background: transparent; color: var(--foreground); outline: none; }
.ui-docsearch__results { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.ui-docsearch__results a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 9px 12px; border-radius: 2px; text-decoration: none; }
.ui-docsearch__results a.is-selected { background: var(--muted); }
.ui-docsearch__t { font-size: 13.5px; color: var(--foreground); font-family: var(--font-mono); overflow-wrap: anywhere; }
.ui-docsearch__k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--pub-accent, var(--accent)); align-self: center; }
.ui-docsearch__s { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-docsearch__results mark { background: color-mix(in oklab, var(--pub-accent, var(--accent)) 20%, transparent); color: inherit; border-radius: 2px; }
.ui-docsearch__hint { margin: 0; padding: 8px 14px; border-top: 1px solid var(--border-strong); font-size: 11.5px; color: var(--faint-foreground); display: flex; gap: 6px; align-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .ui-docsite__shell { grid-template-columns: var(--docsite-nav-w) minmax(0, 1fr); }
  .ui-docsite__toc { display: none; }
  .ui-docsite__hero { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .ui-docsite__shell, .ui-docsite__shell--wide { grid-template-columns: minmax(0, 1fr); }
  .ui-docsite__navtoggle { display: inline-grid; }
  .ui-docsite__nav {
    position: fixed; z-index: 60; top: var(--docsite-bar-h); left: 0; width: min(300px, 85vw); background: var(--background);
    transform: translateX(-102%); visibility: hidden;
    transition: transform var(--motion-base) cubic-bezier(.2, .7, .3, 1), visibility 0s linear var(--motion-base);
  }
  .ui-docsite.is-nav-open .ui-docsite__nav { transform: none; visibility: visible; transition: transform var(--motion-base) cubic-bezier(.2, .7, .3, 1); }
  .ui-docsite__search-btn { margin-left: auto; width: 40px; padding: 0; justify-content: center; }
  .ui-docsite__search-btn > span, .ui-docsite__search-btn kbd, .ui-docsite__flag { display: none; }
  .ui-docsite__actions { margin-left: 0; }
  .ui-docsite__main { padding: 28px 16px 64px; }
  .ui-statrow { grid-template-columns: repeat(2, 1fr); }
  .ui-statrow__item:nth-child(3) { border-left: 0; }
  .ui-statrow__item:nth-child(n+3) { border-top: 1px solid var(--border-strong); }
  .ui-howto__item + .ui-howto__item, .ui-facts__item + .ui-facts__item { border-left: 0; border-top: 1px solid var(--border-strong); }
  .ui-verdicts__item { grid-template-columns: 1fr auto; }
  .ui-verdicts__reason { grid-column: 1 / -1; }
  .ui-modlist__row { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-pkgcard, .ui-pkgcard__grid, .ui-docsite__nav, .ui-docsite__iconbtn, .ui-docsite__search-btn { transition: none; }
}