/* ==========================================================================
   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);
  --link: var(--ember-600);
}
: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);
  --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);
    --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);
  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); }

.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(--accent); }

.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;
  font-size: .9rem; color: var(--fg-muted);
}
.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 select {
  font: inherit; padding: 4px 8px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--fg-body);
}

/* ---- 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); 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);
}
.callout-warning { border-left-color: var(--ember-600); }
.callout-warning .callout-label { color: var(--ember-600); }
.callout-warning { background: color-mix(in oklab, var(--ember-600) 8%, transparent); }
.callout-gotcha { border-left-color: var(--moss-600); }
.callout-gotcha .callout-label { color: var(--moss-700); }
.callout-gotcha { background: color-mix(in oklab, var(--moss-600) 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;
}
/* 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); 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) */
.prose {
  max-width: 72ch;
  /* 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;
}
.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;
   wrap them in a horizontal scroll container so the page itself doesn't
   scroll horizontally. */
.prose table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.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
   Generated to match the amber/espresso scheme. */
:root {
  --chroma-keyword: var(--ember-700);
  --chroma-string:  var(--moss-700);
  --chroma-number:  var(--amber-700);
  --chroma-comment: var(--fg-faint);
  --chroma-name:    var(--fg-body);
}
:root[data-theme="dark"], :root[data-theme="auto"] {
  --chroma-keyword: var(--amber-400);
  --chroma-string:  var(--moss-400);
  --chroma-number:  var(--amber-300);
  --chroma-comment: var(--sand-500);
  --chroma-name:    var(--cream);
}
.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(--ember-600); }
.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;
  color: var(--fg-3);
  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);
  color: var(--fg-2);
  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-3);
  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;
  }
}