/* ==========================================================================
   base.css — resets, typography defaults, layout primitives.
   Tokens come from tokens.css (concatenated before this file).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-body);
  background: var(--bg-app);
  text-wrap: pretty;
}

/* Theme handling — light by default; data-theme=dark or data-theme=auto +
   prefers-color-scheme:dark swap the palette. tokens.css defines the raw
   palette (--espresso-*, --cream-*, --amber-* …); we remap role variables
   here using those tokens.

   NOTE: Designer's first draft referenced --cream and --sand-* which were
   never defined in tokens.css. Those have been corrected to the real
   token names below. */
:root {
  --bg-app: var(--cream-50);
  --bg-card: #ffffff;
  --fg-body: var(--espresso-900);
  --fg-muted: var(--espresso-600);
  --fg-faint: var(--espresso-400);
  --border: var(--espresso-100);
  --accent: var(--amber-500);
  --accent-fg: var(--espresso-900);
  /* --accent-text: accent used AS TEXT on a page surface. The fill accent
     (amber-500) is only ~2.1:1 on the light surface and fails AA, so accent
     text uses a deeper amber in light and the bright signature in dark. Use
     --accent for fills/borders/focus rings (dark text sits on them); use
     --accent-text for amber-coloured words (eyebrows, the wordmark, em). */
  --accent-text: var(--amber-700);
  /* Callout label/accent text — theme-aware so each reads AA on its tinted
     surface in both light and dark. (The old chroma/callout CSS reached for
     --moss-*/--sand-* tokens that were never defined; these replace them.) */
  --warn-text: var(--ember-700);
  --gotcha-text: var(--success-700);
  /* ember-700, not -600: the lighter ember dips just under 4.5:1 once a link
     sits on a tinted callout surface (e.g. the warning well). -700 clears AA
     on every site surface. */
  --link: var(--ember-700);
}
:root[data-theme="dark"] {
  --bg-app: var(--espresso-900);
  --bg-card: var(--espresso-800);
  --fg-body: var(--cream-50);
  --fg-muted: var(--espresso-200);
  --fg-faint: var(--espresso-300);
  --border: var(--espresso-700);
  --accent: var(--amber-500);
  --accent-fg: var(--espresso-900);
  --accent-text: var(--amber-400);
  --warn-text: var(--ember-400);
  --gotcha-text: var(--success-400);
  --link: var(--amber-400);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg-app: var(--espresso-900);
    --bg-card: var(--espresso-800);
    --fg-body: var(--cream-50);
    --fg-muted: var(--espresso-200);
    --fg-faint: var(--espresso-300);
    --border: var(--espresso-700);
    --accent: var(--amber-500);
    --accent-fg: var(--espresso-900);
    --accent-text: var(--amber-400);
    --warn-text: var(--ember-400);
    --gotcha-text: var(--success-400);
    /* tokens.css gives --brand-wordmark the light value by default; the dark
       chrome needs the bright signature, which the explicit [data-theme=dark]
       block sets but the auto path must repeat for system-dark visitors. */
    --brand-wordmark: var(--amber-400);
    --link: var(--amber-400);
  }
}

/* Skip link + visually hidden helpers */
.skip-link {
  position: absolute; left: -9999px; top: 8px;
  background: var(--accent); color: var(--accent-fg);
  padding: 8px 14px; border-radius: 6px; z-index: 100;
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 8px; }
.visually-hidden {
  position: absolute !important; clip: rect(0 0 0 0);
  width: 1px; height: 1px; overflow: hidden;
}

/* Wrap container — full-width with side padding; never centers a narrow
   column on big screens. Per-section width constraints (e.g. the
   readable article column) are applied where they belong. */
.wrap { max-width: none; margin: 0; padding: 0 32px; }
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
}

/* Headings */
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; line-height: 1.2; }
h1 { font-size: clamp(2rem, 2vw + 1.5rem, 3rem); letter-spacing: -0.02em; margin: 0 0 .4em; }
h2 { font-size: 1.6rem; margin: 2em 0 .6em; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; margin: 1.6em 0 .4em; }
h4 { font-size: 1rem; margin: 1.4em 0 .3em; }
p  { margin: 0 0 1em; }

/* Links */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Code */
code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
:not(pre) > code {
  background: var(--bg-card); border: 1px solid var(--border);
  padding: .1em .35em; border-radius: 4px;
}
pre {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  overflow-x: auto;
  line-height: 1.5;
}
pre code { background: transparent; border: 0; padding: 0; }

/* Tables */
table {
  width: 100%; border-collapse: collapse; margin: 1em 0;
  font-size: .95em;
}
th, td {
  text-align: left; padding: .55em .8em;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
th { font-weight: 600; background: color-mix(in oklab, var(--accent) 8%, transparent); }

/* Images */
img { max-width: 100%; height: auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Utility */
.muted { color: var(--fg-muted); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .8rem; font-weight: 600; color: var(--accent-text);
  margin: 0 0 .5em;
}
.lede { font-size: 1.2rem; color: var(--fg-muted); margin: 0 0 1.2em; max-width: 60ch; }
/* ==========================================================================
   components.css — header, footer, hero, buttons, callouts, version UI.
   ========================================================================== */

/* ---- Header ----
   Brand top-left, nav middle, version selector + theme toggle top-right.
   Scrolls with the page (not sticky). Wraps to multiple rows on narrow
   viewports.
*/
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-app);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
  padding-top: 16px; padding-bottom: 16px;
}
/* Hamburger trigger — hidden on desktop, visible on tablet/mobile
   when on a /docs/ page. */
.hamburger {
  display: none;
  background: transparent; border: 0;
  padding: 6px;
  color: var(--fg-body);
  cursor: pointer;
  margin-right: 4px;
}
@media (max-width: 1024px) {
  .hamburger { display: inline-flex; align-items: center; }
}
.hamburger:hover { color: var(--accent-text); }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg-body); text-decoration: none;
}
.brand img { display: block; }
.brand .wordmark {
  font-family: var(--font-mono);
  font-size: 1.1rem; letter-spacing: -.01em;
  color: var(--fg-body);
}
.brand .wordmark b { font-weight: 700; color: var(--brand-wordmark); }

.primary-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 20px;
}
.primary-nav a {
  color: var(--fg-body); text-decoration: none; font-weight: 500;
  padding: 6px 0;
}
.primary-nav a[aria-current="page"] {
  border-bottom: 2px solid var(--accent);
}
.header-tools { margin-left: auto; display: flex; gap: 12px; align-items: center; }

/* Theme toggle (radiogroup) */
.theme-toggle {
  border: 1px solid var(--border); border-radius: 999px;
  padding: 2px; margin: 0; display: inline-flex; gap: 2px;
}
.theme-toggle legend { display: none; }
.theme-toggle label {
  cursor: pointer; padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center;
  color: var(--fg-muted);
}
.theme-toggle__icon { display: block; }
.theme-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.theme-toggle label:has(input:checked) {
  background: var(--accent); color: var(--accent-fg);
}
.theme-toggle label:focus-within {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Version selector */
.version-selector { display: inline-flex; align-items: center; gap: 6px; }
.version-selector select {
  font: inherit; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--fg-body);
}
/* The select's change handler navigates for pointer/JS users, so the submit
   stays out of the way — but it is a real, focusable control (keyboard + no-JS
   fallback, and it satisfies WCAG H32). It surfaces when focused. */
.version-selector__go {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0;
}
.version-selector__go:focus {
  position: static; width: auto; height: auto; overflow: visible;
  clip: auto; white-space: normal;
  font: inherit; cursor: pointer;
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--accent); color: var(--accent-fg);
}

/* ---- Footer ----
   Single line: copyright text. Scrolls with the page.
*/
.site-footer {
  margin-top: 64px;
  border-top: 1px solid var(--border);
  padding: 24px 0;
}
.site-footer .wrap {
  font-size: .9rem;
}
.site-footer p { margin: 0; }

/* ---- Hero ---- */
.hero {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 48px; align-items: center;
  padding: 80px 0;
}
.hero h1 em { color: var(--accent-text); font-style: italic; }
.cta-row { display: flex; gap: 12px; margin-top: 24px; }
.hero-illo img { max-height: 320px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 8px;
  font-weight: 600; text-decoration: none;
  font-size: 1rem; line-height: 1; cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--accent); color: var(--accent-fg);
  box-shadow: 0 1px 0 rgba(0,0,0,.1), 0 8px 20px -10px var(--amber-700);
}
.btn-primary:hover { background: var(--amber-600); }
.btn-ghost {
  background: transparent; color: var(--fg-body); border-color: var(--border);
}
.btn-ghost:hover { background: var(--bg-card); }

/* ---- Callouts ---- */
.callout {
  border-left: 4px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  padding: 16px 20px;
  border-radius: 4px;
  margin: 1.5em 0;
}
.callout-label {
  text-transform: uppercase; font-size: .8rem;
  letter-spacing: .08em; font-weight: 700;
  margin: 0 0 .4em; color: var(--accent-text);
}
.callout-warning { border-left-color: var(--warn-text); }
.callout-warning .callout-label { color: var(--warn-text); }
.callout-warning { background: color-mix(in oklab, var(--ember-600) 8%, transparent); }
.callout-gotcha { border-left-color: var(--gotcha-text); }
.callout-gotcha .callout-label { color: var(--gotcha-text); }
.callout-gotcha { background: color-mix(in oklab, var(--success-500) 8%, transparent); }
.callout-body > :last-child { margin-bottom: 0; }

/* ---- Version banner ---- */
.version-banner {
  background: color-mix(in oklab, var(--ember-600) 10%, transparent);
  border: 1px solid color-mix(in oklab, var(--ember-600) 30%, transparent);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 auto 24px; max-width: 1120px;
}
.version-banner p { margin: 0; }
.version-banner a { color: var(--ember-700); font-weight: 600; }

/* ---- Generic ---- */
.eyebrow { display: block; }
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-size: .8em;
}
.card-list {
  list-style: none; padding: 0; margin: 32px 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.card-list li a {
  display: block; padding: 20px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-card); color: inherit;
  text-decoration: none;
}
.card-list li a:hover { border-color: var(--accent); }
.card-list h2 { font-size: 1.1rem; margin: 0 0 6px; }
.card-list p { margin: 0; color: var(--fg-muted); font-size: .95em; }

/* Not found */
.not-found { padding: 80px 0; text-align: center; }
/* ==========================================================================
   docs.css — 3-column docs layout, sidebar, TOC, page meta.
   ========================================================================== */

.docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  gap: 40px;
  align-items: start;
  padding-top: 32px;
}
/* Unversioned docs pages drop the left version-nav sidebar (see single.html)
   but KEEP its column reserved, so the main content left-aligns with a normal
   (sidebar'd) docs page instead of jumping to the page edge. The article and
   TOC are placed into columns 2 and 3; column 1 stays empty. Desktop only —
   the max-width:1024px rule below collapses every docs page to one column, so
   on tablet/mobile compat and docs already share the full-width edge. */
@media (min-width: 1025px) {
  .docs-layout--unversioned > .docs-article { grid-column: 2; }
  .docs-layout--unversioned > .docs-toc { grid-column: 3; }
}
/* Devblog uses the same left-sidebar shell as docs but no right TOC. */
.blog-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  padding-top: 32px;
}
@media (max-width: 1024px) {
  .blog-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 1024px) {
  /* Tablet and mobile: single column. The right-rail TOC is hidden
     and replaced by a collapsible "On this page" panel inline at the
     top of the article (see .docs-toc-inline below). The section
     sidebar becomes a slide-in drawer triggered by the hamburger
     button in the header.

     minmax(0, 1fr) — NOT bare 1fr — so the column doesn't grow to
     min-content of its widest descendant (code blocks, tables). */
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .docs-toc { display: none; }

  .docs-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(85vw, 320px);
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    padding: 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform 200ms ease;
    z-index: 100;
    box-shadow: 4px 0 20px rgba(0,0,0,0.25);
  }
  .docs-sidebar.is-open {
    transform: translateX(0);
  }
  .drawer-close {
    display: block;
    margin-left: auto;
    padding: 6px;
    background: transparent;
    border: 0;
    color: var(--fg-muted);
    cursor: pointer;
  }
  .drawer-close:hover { color: var(--fg-body); }
}

/* Sidebar and TOC scroll with the page (not sticky). */
.docs-sidebar, .docs-toc {
  font-size: .95rem;
}
/* The close button is only meaningful inside the drawer. */
.drawer-close { display: none; }

/* Backdrop shown when the drawer is open. */
.drawer-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
}
.drawer-backdrop.is-open { display: block; }

/* min-width: 0 lets these flex/grid children shrink below the
   min-content of their widest descendant. Without it, a wide code
   block or table forces the whole article column to grow. */
.docs-article, .page-body, .prose {
  min-width: 0;
}
.docs-sidebar nav, .docs-toc {
  padding-right: 8px;
}
.sidebar-title { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; color: var(--fg-muted); }
.sidebar-list { list-style: none; padding: 0; margin: 0; }
.sidebar-section h3 {
  font-size: .85rem; text-transform: uppercase;
  letter-spacing: .05em; margin: 18px 0 6px;
  color: var(--fg-faint);
}
.sidebar-section > ul, .sidebar-list > li ul { list-style: none; padding: 0; margin: 0; }
.sidebar-list a {
  display: block; padding: 4px 0;
  color: var(--fg-body); text-decoration: none;
}
.sidebar-list a:hover { color: var(--link); }
.sidebar-list a[aria-current="page"] {
  color: var(--accent-text); font-weight: 600;
}

.docs-toc h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 12px; color: var(--fg-muted); }
.docs-toc ul, .docs-toc li, .docs-toc nav > ul {
  list-style: none; padding: 0; margin: 0;
}
.docs-toc ul ul { padding-left: 12px; }
.docs-toc a {
  display: block; padding: 3px 0;
  color: var(--fg-muted); text-decoration: none;
  font-size: .9em;
}
.docs-toc a:hover { color: var(--link); }

/* Inline "On this page" — collapsible TOC shown only on tablet/mobile.
   Hidden on desktop where the right-rail .docs-toc takes over. */
.docs-toc-inline { display: none; }
@media (max-width: 1024px) {
  .docs-toc-inline {
    display: block;
    margin: 24px 0 32px;
    /* No top/bottom padding on the container — the summary owns the
       top edge so its sticky background can run flush to the rounded
       corners. */
    padding: 0 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    /* Stick to the top of the viewport once the natural position has
       been scrolled past. When expanded, the TOC's own height is
       capped at 80vh and its body scrolls internally so it never
       fills the screen — and the sticky summary inside (below) stays
       visible so it can always be tapped to close. */
    position: sticky;
    top: 0;
    z-index: 40;
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  /* Collapsed: drop the max-height cap so the closed bar never
     accidentally shows a scrollbar from its own padding. */
  .docs-toc-inline:not([open]) {
    max-height: none;
    overflow: visible;
  }
  .docs-toc-inline > summary {
    cursor: pointer;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--fg-muted);
    /* Negative side margin so the summary's own background extends
       to the rounded corners of the card; vertical padding owns the
       top breathing room. */
    margin: 0 -16px;
    padding: 12px 16px;
    background: var(--bg-card);
    border-radius: 8px 8px 0 0;
    list-style: revert;  /* keep native disclosure marker */
    /* Stay pinned at the top of the (scrolling) details container so
       the user can always tap to close, even after scrolling deep
       into a long TOC. */
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .docs-toc-inline > summary:hover { color: var(--fg-body); }
  /* When the TOC is open and pinned, the closed corner-radius
     looks wrong (a rounded bottom under content); flatten it. */
  .docs-toc-inline[open] > summary {
    border-bottom: 1px solid var(--border);
    border-radius: 8px 8px 0 0;
    margin-bottom: 8px;
  }
  /* The list itself needs no scroll — its parent provides it.
     A little bottom padding inside the scrolling area keeps the
     last entry from butting against the card's bottom edge. */
  .docs-toc-inline > nav { padding-bottom: 12px; }
  .docs-toc-inline nav, .docs-toc-inline ul {
    list-style: none; padding: 0; margin: 0;
  }
  .docs-toc-inline ul ul { padding-left: 16px; }
  .docs-toc-inline a {
    display: block;
    padding: 4px 0;
    color: var(--fg-muted);
    text-decoration: none;
    font-size: .9rem;
  }
  .docs-toc-inline a:hover { color: var(--link); }
}

/* Prose styling — applies to .prose containers (doc body, blog body).
   The container fills its grid column; flowing TEXT keeps a readable measure
   (rule below) while wide block content — tables, the dependency report,
   figures — expands to fill the column instead of being crammed into a narrow
   band with a gap before the TOC on wide screens. (Blog body is separately
   capped by .blog-post, so it is unaffected.) */
.prose {
  max-width: none;
  /* Long unbreakable strings in body text (Windows registry paths,
     PowerShell commands inside <code>, URLs) would otherwise push the
     paragraph wider than the container. `anywhere` breaks them only
     when nothing else fits — normal prose still wraps at word
     boundaries. */
  overflow-wrap: anywhere;
}
/* Readable line length for flowing text. Wide blocks (tables/details/figures)
   are deliberately NOT capped here, so they fill the full content column. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > blockquote,
.prose > h2,
.prose > h3,
.prose > h4 {
  max-width: 72ch;
}
.prose h2 { padding-top: 8px; }
.prose h2::before {
  content: ""; display: block; width: 32px; height: 3px;
  background: var(--accent); margin-bottom: 12px; border-radius: 2px;
}
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: .25em 0; }
.prose blockquote {
  border-left: 3px solid var(--border);
  margin: 1em 0; padding: 0 0 0 16px;
  color: var(--fg-muted); font-style: italic;
}
.prose figure { margin: 1.5em 0; }
.prose figure.diagram { overflow-x: auto; }
.prose figure.diagram svg { max-width: 100%; height: auto; display: block; }

/* Tables can have content that doesn't break cleanly on narrow screens, so
   the render-table.html hook wraps every table in a .table-scroll region that
   owns the horizontal overflow. The wrapper scrolls; the table sizes to its
   content (max-content) so cells don't wrap into an unreadable column on
   mobile. The region is keyboard-focusable so the scroll is operable without a
   pointer (WCAG 2.1.1). */
.prose .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin: 1.5em 0;
}
/* keyboard focus on the scroll region must be visible, like any other */
.prose .table-scroll:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 2px;
}
.prose .table-scroll > table {
  display: table;
  width: max-content;
  max-width: none;
  margin: 0;
}
/* don't break version strings (e.g. 6.12.90+deb13.1-amd64) mid-token inside a
   scrollable data table — let the row get wide and scroll instead. */
.prose .table-scroll th,
.prose .table-scroll td {
  overflow-wrap: normal;
}
/* Collapsible <details> summaries (e.g. the dependency report) are interactive
   — show the pointer cursor on hover so it reads as clickable. */
.prose summary { cursor: pointer; }
.prose figcaption {
  text-align: center; font-size: .9em;
  color: var(--fg-muted); margin-top: 6px;
}
.page-head { margin-bottom: 32px; }
.page-meta { font-size: .9rem; }

/* Blog */
.blog-post { padding-top: 32px; max-width: 760px; }
.blog-index .post-list {
  list-style: none; padding: 0; margin: 32px 0;
}
.blog-index .post-list li { padding: 24px 0; border-bottom: 1px solid var(--border); }
.blog-index .post-list h2 { margin: .2em 0; }
.blog-index .post-list h2 a { color: inherit; text-decoration: none; }
.blog-index .post-list h2 a:hover { color: var(--link); }
/* Chroma syntax highlighting — Raft palette.

   Theme handling MUST mirror base.css exactly: light is the default, an
   explicit [data-theme="dark"] opts into dark, and [data-theme="auto"] only
   goes dark under prefers-color-scheme:dark. The previous version applied the
   dark palette to [data-theme="auto"] unconditionally, so a system-light
   visitor on "auto" got bright-amber tokens on a white code background
   (well under 4.5:1). It also referenced --moss-*/--sand-*/--cream tokens that
   were never defined, collapsing those colours to the inherited body text. */

/* Light — dark ink on the light code surface (>= 4.5:1). */
:root {
  --chroma-keyword: var(--ember-700);
  --chroma-string:  var(--success-700);
  --chroma-number:  var(--amber-700);
  --chroma-comment: var(--espresso-500);
  --chroma-name:    var(--fg-body);
  --chroma-err:     var(--danger-500);
}
/* Dark — bright ink on the espresso code surface (>= 4.5:1). */
:root[data-theme="dark"] {
  --chroma-keyword: var(--amber-300);
  --chroma-string:  var(--success-400);
  --chroma-number:  var(--amber-300);
  --chroma-comment: var(--espresso-200);
  --chroma-name:    var(--cream-50);
  --chroma-err:     var(--danger-300);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --chroma-keyword: var(--amber-300);
    --chroma-string:  var(--success-400);
    --chroma-number:  var(--amber-300);
    --chroma-comment: var(--espresso-200);
    --chroma-name:    var(--cream-50);
    --chroma-err:     var(--danger-300);
  }
}

.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { color: var(--chroma-keyword); }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .sb, .chroma .sc, .chroma .sd, .chroma .sh, .chroma .si, .chroma .sx { color: var(--chroma-string); }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il { color: var(--chroma-number); }
.chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { color: var(--chroma-comment); font-style: italic; }
.chroma .n, .chroma .na, .chroma .nb, .chroma .nc, .chroma .nf, .chroma .nv { color: var(--chroma-name); }
.chroma .err { color: var(--chroma-err); }
.chroma { background: transparent; }
/* ==========================================================================
   home.css — coming-soon landing page.
   Tokens from tokens.css. Classes namespaced under .home-* to avoid
   colliding with the dormant marketing layout's .hero / .cta-row rules in
   components.css.
   ========================================================================== */

.home-hero {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-20) var(--space-8) var(--space-24);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* --accent-text (not --fg-3): the faint token is sub-AA on the light surface
     for 11px text, and --fg-3 doesn't flip under prefers-color-scheme:auto so
     it failed on system-dark. The amber accent reads AA in every theme and
     matches the eyebrow treatment elsewhere. */
  color: var(--accent-text);
  margin: 0 0 var(--space-5);
}

.home-hero h1 {
  font-size: 72px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 var(--space-6);
  max-width: 940px;
  text-wrap: balance;
}

.home-lead {
  font-size: var(--text-lg);
  line-height: var(--lh-normal);
  /* --fg-muted is the auto-aware role token; --fg-2 stays light-mode dark and
     fails on system-dark. */
  color: var(--fg-muted);
  max-width: 720px;
  margin: 0 0 var(--space-10);
  text-wrap: pretty;
}

.home-note {
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
  max-width: 720px;
  margin: calc(var(--space-10) * -1 + var(--space-5)) 0 var(--space-10);
  text-wrap: pretty;
}

.home-cta {
  margin: 0;
}

.home-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--brand);
  color: var(--brand-fg);
  border: 1px solid transparent;
  padding: 14px 22px;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgb(20 16 9 / 0.18),
    var(--shadow-xs);
  transition:
    background var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.home-cta .btn-primary:hover {
  background: var(--brand-hover);
  box-shadow:
    inset 0 0 0 1px rgb(20 16 9 / 0.22),
    var(--shadow-sm);
}

.home-cta .btn-primary:active {
  background: var(--brand-press);
  transform: translateY(1px);
}

.home-cta .btn-primary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.home-cta .btn-primary span {
  transition: transform var(--dur-fast) var(--ease);
}

.home-cta .btn-primary:hover span {
  transform: translateX(3px);
}

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 700px) {
  .home-hero {
    padding: var(--space-12) var(--space-5) var(--space-16);
  }
  .home-hero h1 {
    font-size: 40px;
    line-height: 1.05;
  }
  .home-lead {
    font-size: var(--text-md);
  }
}

@media (max-width: 380px) {
  .home-hero h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cta .btn-primary,
  .home-cta .btn-primary span {
    transition: none;
  }
  .home-cta .btn-primary:hover span {
    transform: none;
  }
}
/* ==========================================================================
   install.css — the /install page (raftmgmt.com/install)
   Scoped under .install-page. Uses semantic tokens so it themes light/dark.
   Terminal blocks stay dark in BOTH themes (a terminal is always dark).
   ========================================================================== */

.install-page { max-width: 880px; margin: 0 auto; padding: var(--space-12) var(--space-6) var(--space-20); }

.install-page .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-text); margin: 0 0 var(--space-3); }
.install-page h1 { font-size: var(--text-4xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--fw-bold); color: var(--fg-1); margin: 0 0 var(--space-4); }
.install-page .lead { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg-2); max-width: 44rem; margin: 0; text-wrap: pretty; }
.install-page .lead code, .install-page p code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1px 6px; color: var(--fg-1); }

/* Subscription banner — first thing on the page, deliberately prominent.
   Amber-tinted (theme-aware via color-mix; solid surface fallback) with a
   brand left-rule and the same early-access CTA as the home page. */
.install-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin: 0 0 var(--space-12); padding: var(--space-5) var(--space-6); border: 1px solid var(--amber-200); border-left: 4px solid var(--brand); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--surface-1); background: color-mix(in srgb, var(--brand) 8%, var(--surface-1)); }
[data-theme="dark"] .install-banner { border-color: var(--border-strong); }
.install-banner p { margin: 0; color: var(--fg-1); font-size: var(--text-md); line-height: var(--lh-normal); max-width: 46rem; }
.install-banner .btn-primary { white-space: nowrap; }

.install-sec { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--border); }
.install-sec > h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-tight); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0 0 var(--space-2); }
.install-sec > .sub { font-size: var(--text-base); color: var(--fg-2); max-width: 44rem; margin: 0 0 var(--space-8); line-height: var(--lh-normal); }

/* Platform cards */
.install-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); margin: 0 0 var(--space-5); box-shadow: var(--shadow-xs); }
.ic-head { margin-bottom: var(--space-4); }
.ic-head h3 { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--fg-1); margin: 0; letter-spacing: var(--tracking-tight); }
.ic-head .since { display: block; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); margin-top: 3px; }

/* Channel tabs — CSS-only (radio + sibling combinator). No JS, CSP-safe,
   keyboard-navigable. Active = fill + weight, not colour alone. */
.ic-tabs { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.ic-tabs .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic-tabrow { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.ic-tabrow label { font-size: var(--text-sm); font-weight: var(--fw-medium); padding: 7px 15px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); cursor: pointer; background: var(--surface-1); color: var(--fg-2); user-select: none; transition: background var(--dur-fast) var(--ease); }
.ic-tabrow label:hover { background: var(--surface-2); }
.ic-panel { display: none; }

#deb-s:checked ~ .ic-tabrow label[for="deb-s"],
#deb-u:checked ~ .ic-tabrow label[for="deb-u"],
#rpm-s:checked ~ .ic-tabrow label[for="rpm-s"],
#rpm-u:checked ~ .ic-tabrow label[for="rpm-u"],
#win-s:checked ~ .ic-tabrow label[for="win-s"],
#win-u:checked ~ .ic-tabrow label[for="win-u"] { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); font-weight: var(--fw-semibold); }

#deb-s:checked ~ .p-deb-s, #deb-u:checked ~ .p-deb-u,
#rpm-s:checked ~ .p-rpm-s, #rpm-u:checked ~ .p-rpm-u,
#win-s:checked ~ .p-win-s, #win-u:checked ~ .p-win-u { display: block; }

#deb-s:focus-visible ~ .ic-tabrow label[for="deb-s"],
#deb-u:focus-visible ~ .ic-tabrow label[for="deb-u"],
#rpm-s:focus-visible ~ .ic-tabrow label[for="rpm-s"],
#rpm-u:focus-visible ~ .ic-tabrow label[for="rpm-u"],
#win-s:focus-visible ~ .ic-tabrow label[for="win-s"],
#win-u:focus-visible ~ .ic-tabrow label[for="win-u"] { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Terminal block — always dark */
.term { background: var(--espresso-900); border: 1px solid var(--espresso-700); border-radius: var(--radius-md); overflow: hidden; }
.term .bar { background: var(--espresso-800); padding: 9px 13px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid var(--espresso-700); }
.term .dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--espresso-500); }
.term .ttl { color: var(--espresso-300); font-family: var(--font-mono); font-size: var(--text-xs); margin-left: 8px; }
.term pre { margin: 0; padding: var(--space-4) var(--space-5); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--lh-loose); color: var(--cream-50); overflow-x: auto; white-space: pre; background: transparent; border: 0; }
.term .c { color: var(--espresso-300); }       /* comment */
.term .p { color: var(--amber-400); }          /* prompt */
.term .v { color: var(--warn-400); }           /* package / value */
.term .warn { color: var(--danger-300); font-weight: var(--fw-bold); }  /* a11y-light red for dark chrome */

.ic-note { font-size: var(--text-sm); color: var(--fg-2); margin: var(--space-3) 0 0; }
.ic-warn { color: var(--danger-fg); background: var(--danger-bg); border-left: 3px solid var(--danger-400); border-radius: var(--radius-sm); padding: 8px 12px; font-weight: var(--fw-semibold); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.tbd { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--warn-fg); background: var(--warn-bg); border: 1px dashed var(--amber-300); border-radius: var(--radius-sm); padding: 2px 8px; display: inline-block; }

/* Verify / browse */
.install-kv { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-2); margin: 0 0 var(--space-2); }
.install-browse { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.install-browse a { display: inline-flex; align-items: center; gap: 8px; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 12px 18px; text-decoration: none; color: var(--fg-1); font-weight: var(--fw-semibold); }
.install-browse a:hover { background: var(--surface-2); }
.install-browse .d { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); font-weight: var(--fw-regular); }

@media (max-width: 680px) { .install-page h1 { font-size: var(--text-3xl); } }