/* ============================================================================
 * Lucky Robots Engine Docs — styles.css
 *
 * Brand-fidelity reskin of docs.luckyrobots.com against the Lucky Robots
 * design system. Source of truth: ./DESIGN.md, mirrored from the
 * luckyrobots/landing-page repo (Tailwind v4 @theme + Nunjucks partials).
 *
 * Token rules:
 *   1. Surface hierarchy via cream warmth (#fff > #f5f4f2 > #e9e8e3), not color.
 *   2. Accents (green/yellow/red) are reserved for narrow semantic roles only.
 *   3. Anti-card: media uses rounded-[2px], interactive uses rounded-full,
 *      only the prompt panel gets a shadow (the docs don't use that shadow).
 *   4. Hover transitions are color/opacity only — no transform.
 *   5. Type-scale --text-* vars change at breakpoints — typography only;
 *      do NOT consume them for layout math.
 *   6. Every z-index consumption references --z-* tokens.
 *   7. Every interactive element shows :focus-visible.
 * ============================================================================ */

/* --------------------------------------------------------------------------
 * 1. Fonts (self-hosted from luckyrobots/landing-page)
 * -------------------------------------------------------------------------- */

@font-face {
  font-family: "Aeonik Regular";
  src: url("/fonts/aeonik-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Medium";
  src: url("/fonts/aeonik-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-700-latin-ext.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
 * 2. Tokens
 * -------------------------------------------------------------------------- */

:root {
  /* Core surface */
  --color-bg: #ffffff;
  --color-bg-top: #e9e8e3;
  --color-fg: #000000;
  --color-surface: #f5f4f2;

  /* fg opacity scale */
  --fg-55: rgba(0, 0, 0, 0.55);
  --fg-60: rgba(0, 0, 0, 0.60);
  --fg-65: rgba(0, 0, 0, 0.65);
  --fg-70: rgba(0, 0, 0, 0.70);
  --fg-75: rgba(0, 0, 0, 0.75);
  --fg-80: rgba(0, 0, 0, 0.80);

  /* black/alpha border scale */
  --b-08: rgba(0, 0, 0, 0.08);
  --b-10: rgba(0, 0, 0, 0.10);
  --b-15: rgba(0, 0, 0, 0.15);
  --b-25: rgba(0, 0, 0, 0.25);
  --b-40: rgba(0, 0, 0, 0.40);
  --b-85: rgba(0, 0, 0, 0.85);

  /* Accents — reserved semantic roles only */
  --color-accent-green:  #5dc24e;
  --color-accent-red:    #ef6c5c;
  --color-accent-yellow: #f7be46;

  /* Fonts */
  --font-sans:        "Aeonik Regular", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans-medium: "Aeonik Medium",  system-ui, -apple-system, sans-serif;
  --font-mono:        "IBM Plex Mono",  ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (typography only — do NOT consume for layout math) */
  --text-hero:              42px;
  --text-section-title:     30px;
  --text-subsection-title:  26px;
  --text-feature-title:     20px;
  --text-body:              16px;
  --text-mono-row:          16px;
  --text-pill:              14px;
  --text-wordmark:          19px;
  --text-mono-caption:      11px;
  --text-window-meta:       13px;

  /* Layout */
  --container-max:    1600px;
  --content-max:      760px;
  --content-max-wide: 1100px;
  --sidebar-w:        280px;
  --toc-w:            220px;
  --nav-h-mobile:     58px;
  --nav-h-desktop:    74px;
  --section-py:       60px;
  --px-mobile:        16px;
  --px-desktop:       40px;

  /* Radii */
  --r-media: 2px;
  --r-code:  4px;
  --r-cta:   6px;
  --r-pill:  9999px;

  /* The single allowed shadow (not used in docs) */
  --shadow-prompt: 0 4px 16px rgba(0, 0, 0, 0.10);

  /* Motion */
  --t-fast:   120ms;
  --t-normal: 150ms;
  --easing:   cubic-bezier(0.22, 1, 0.36, 1);

  /* Z-index stack — top-nav stays above the drawer + backdrop so the logo
     and nav links remain visible/clickable while the drawer is open. */
  --z-base:      0;
  --z-toc:       5;
  --z-sidebar:   10;
  --z-drawer:    900;
  --z-top-nav:   1000;
  --z-skip-link: 1100;

  /* Deep-link anchor scroll offset */
  --scroll-anchor-offset: calc(var(--nav-h-desktop) + 16px);
}

/* Typography breakpoints — these vars are typography-only, do not consume
   them for layout math at the affected widths.                         */
@media (min-width: 810px) {
  :root { --text-feature-title: 24px; }
}
@media (min-width: 1000px) {
  :root { --text-hero: 52px; --text-section-title: 40px; }
}
@media (min-width: 1200px) {
  :root { --text-subsection-title: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-normal: 0ms; }
}

/* --------------------------------------------------------------------------
 * 3. Resets and defaults
 * -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: linear-gradient(var(--color-bg-top) 0%, var(--color-bg) 100%);
  background-attachment: fixed;
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-normal) ease, background-color var(--t-normal) ease, border-color var(--t-normal) ease;
}

a:hover { color: var(--color-fg); }

/* Heading reset — per DESIGN.md, all headings are weight 400 with tight tracking */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-fg);
  line-height: 1.1;
}

p { margin: 0 0 1em; color: var(--fg-80); }

ul, ol { padding-left: 1.25em; margin: 0 0 1em; }
li { margin: 0.25em 0; }
li::marker { color: var(--b-40); }

strong { font-weight: 500; color: var(--color-fg); }
em { font-style: italic; }

img, svg, video { display: block; max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--b-10);
  margin: 2.5em 0;
}

code, pre, kbd {
  font-family: var(--font-mono);
  font-feature-settings: "ss01", "ss02";
}

/* Inline code */
code:not(pre code) {
  background: var(--color-surface);
  padding: 1px 6px;
  border-radius: var(--r-code);
  font-size: 0.88em;
  color: var(--color-fg);
}

pre {
  background: var(--color-surface);
  border: 1px solid var(--b-10);
  border-radius: var(--r-code);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.55;
  overflow-x: auto;
  margin: 1.25em 0;
}
pre code { background: transparent; padding: 0; }

/* :focus-visible — global. No outline:none anywhere. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-fg);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
 * 4. Skip link
 * -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-skip-link);
  background: var(--color-bg);
  color: var(--color-fg);
  padding: 10px 16px;
  border: 2px solid var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-pill);
}
.skip-link:focus {
  left: var(--px-desktop);
  top: 8px;
}

/* --------------------------------------------------------------------------
 * 5. Layout shell
 * -------------------------------------------------------------------------- */

body.site-frame {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-grid {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--px-mobile);
  flex: 1;
  gap: 32px;
  position: relative;
}

/* Tablet+: reserve room on the right for the floating TOC.
   Sidebar is still a drawer at this width to give main column room. */
@media (min-width: 768px) {
  .app-grid {
    padding-left: var(--px-desktop);
    padding-right: calc(var(--px-desktop) + var(--toc-w) + 32px);
  }
}

/* Wide desktop (≥1280): show sidebar inline as the first grid column. */
@media (min-width: 1280px) {
  .app-grid {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    gap: 40px;
  }
}

/* Sidebar — slide-in drawer at every width below 1280px.
   Uses #sidebar id-selector to outrank the later `.sidebar` declarations
   (default position: sticky) without relying on @media source order. */
@media (max-width: 1279px) {
  #sidebar.sidebar {
    position: fixed;
    top: var(--nav-h-mobile);
    bottom: 0;
    left: 0;
    right: auto;
    width: min(86vw, 340px);
    z-index: var(--z-drawer);
    background: var(--color-bg);
    border-right: 1px solid var(--b-10);
    box-shadow: none;
    transform: translateX(-100%);
    transition: transform 240ms var(--easing), box-shadow 240ms var(--easing);
    padding: 28px 28px 32px;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #sidebar.sidebar.is-open {
    transform: translateX(0);
    box-shadow: 12px 0 40px rgba(0, 0, 0, 0.12);
  }
  body.sidebar-open::after {
    content: "";
    position: fixed;
    top: var(--nav-h-mobile);
    inset-inline: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.40);
    z-index: calc(var(--z-drawer) - 1);
    animation: fadeIn 200ms var(--easing);
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

/* Drawer + backdrop tuck under the taller desktop nav at >=768px */
@media (min-width: 768px) and (max-width: 1279px) {
  #sidebar.sidebar { top: var(--nav-h-desktop); }
  body.sidebar-open::after { top: var(--nav-h-desktop); }
}

/* --------------------------------------------------------------------------
 * 6. Top nav
 * -------------------------------------------------------------------------- */

.top-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-top-nav);
  background: transparent;
  transition: backdrop-filter 200ms ease;
}

.top-nav.is-stuck {
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}

.top-nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--px-mobile);
  height: var(--nav-h-mobile);
}

@media (min-width: 768px) {
  .top-nav__inner { padding: 0 var(--px-desktop); height: var(--nav-h-desktop); }
}

.top-nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.top-nav__logo { width: 26px; height: 17px; }

.top-nav__wordmark {
  font-family: var(--font-sans-medium);
  font-weight: 500;
  font-size: var(--text-wordmark);
  line-height: 0.8;
  letter-spacing: -0.02em;
}

.top-nav__center {
  display: none;
  flex: 1;
  justify-content: center;
  gap: 28px;
  font-size: var(--text-pill);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.top-nav__center a {
  color: var(--fg-65);
}
.top-nav__center a:hover,
.top-nav__center a[aria-current="page"] {
  color: var(--color-fg);
}
.top-nav__center a[aria-current="page"] {
  font-weight: 500;
}

@media (min-width: 768px) {
  .top-nav__center { display: flex; }
}

.pill.top-nav__pill { display: none; }
@media (min-width: 768px) {
  .pill.top-nav__pill { display: inline-flex; align-items: center; }
}

.top-nav__toggle {
  margin-left: auto;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--color-fg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) {
  .top-nav__toggle { display: none; }
}

/* Icon swap (SVG paths ignore the [hidden] attribute in some renderers,
   so drive the swap via aria-expanded on the toggle). */
.top-nav__icon-close { display: none; }
.top-nav__toggle[aria-expanded="true"] .top-nav__icon-open  { display: none; }
.top-nav__toggle[aria-expanded="true"] .top-nav__icon-close { display: block; }

.top-nav__drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--z-drawer);
  background: var(--color-bg);
  border-bottom: 1px solid var(--b-10);
}
.top-nav__drawer[hidden] { display: none; }
.top-nav__drawer nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px var(--px-mobile);
}
.top-nav__drawer a {
  padding: 10px 4px;
  color: var(--fg-65);
  font-size: var(--text-pill);
}
.top-nav__drawer a:hover,
.top-nav__drawer a[aria-current="page"] {
  color: var(--color-fg);
}

/* --------------------------------------------------------------------------
 * 7. Pills (buttons / CTAs)
 * -------------------------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: var(--text-pill);
  line-height: 1.3;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-normal) ease, background-color var(--t-normal) ease, border-color var(--t-normal) ease;
  border: 1px solid transparent;
}

.pill-primary {
  background: var(--color-fg);
  color: var(--color-bg);
}
.pill-primary:hover { color: var(--color-bg); opacity: 0.9; }

.pill-outline-strong {
  border-color: var(--b-85);
  color: var(--color-fg);
}
.pill-outline-strong:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

.pill-outline-soft {
  border-color: var(--b-15);
  color: var(--color-fg);
}
.pill-outline-soft:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}

/* --------------------------------------------------------------------------
 * 8. Sidebar (left rail)
 * -------------------------------------------------------------------------- */

.sidebar {
  position: sticky;
  top: var(--nav-h-desktop);
  align-self: start;
  max-height: calc(100vh - var(--nav-h-desktop));
  overflow-y: auto;
  z-index: var(--z-sidebar);
  padding: 32px 0 48px;
}

.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--b-10); border-radius: 4px; }

.nav-section { margin-bottom: 28px; padding: 0 4px 0 0; }

.nav-section__label {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-55);
  margin: 0 0 10px;
  padding: 0 10px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li { margin: 0; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  color: var(--fg-65);
  font-size: 14px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: color var(--t-normal) ease, border-color var(--t-normal) ease;
}

.nav-link:hover { color: var(--color-fg); }

.nav-link[aria-current="page"] {
  color: var(--color-fg);
  border-left-color: var(--color-fg);
  padding-left: 8px;
}

.nav-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-55);
  min-width: 28px;
  flex-shrink: 0;
}

.nav-text { flex: 1; }

/* --------------------------------------------------------------------------
 * 9. Main content + .prose
 * -------------------------------------------------------------------------- */

.main {
  min-width: 0;
  padding: 32px 0 80px;
  grid-column: 1;
  grid-row: 1;
}

@media (min-width: 1280px) {
  .main { grid-column: 2; }
}

@media (min-width: 768px) {
  .main { padding: 20px 32px 96px; }
}

.prose {
  max-width: var(--content-max);
}

/* Allow breakouts: tables, diagrams, callouts, pre blocks may run wider */
.prose > .wide,
.prose > table,
.prose > .diagram,
.prose > .pager {
  max-width: var(--content-max-wide);
  width: 100%;
}

.prose h1 {
  font-size: var(--text-section-title);
  margin-bottom: 16px;
}
@media (min-width: 1000px) {
  .prose h1 { font-size: var(--text-section-title); }
}

.prose h2 {
  font-size: var(--text-subsection-title);
  margin: 48px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--b-10);
}

.prose h3 {
  font-size: var(--text-feature-title);
  margin: 32px 0 12px;
}

.prose h4 {
  font-size: 16px;
  font-weight: 500;
  margin: 24px 0 8px;
}

.prose p,
.prose li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-80);
}

.prose a {
  color: var(--color-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--b-25);
}
.prose a:hover { text-decoration-color: var(--color-fg); }

/* Deep-link anchor scroll offset — applied wide so individual pages cannot omit it */
.prose :is(h2, h3, h4)[id] {
  scroll-margin-top: var(--scroll-anchor-offset);
}

.lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-80);
  margin: 0 0 32px;
  max-width: var(--content-max);
}

/* --------------------------------------------------------------------------
 * 10. Crumbs (breadcrumb)
 * -------------------------------------------------------------------------- */

.crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-55);
  margin: 0 0 24px;
}
.crumbs a { color: var(--fg-55); }
.crumbs a:hover { color: var(--color-fg); }
.crumbs .sep { margin: 0 8px; color: var(--b-25); }

/* --------------------------------------------------------------------------
 * 11. Tags
 * -------------------------------------------------------------------------- */

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 24px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--b-10);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-70);
  line-height: 1.6;
}

.tag-accent { color: var(--color-fg); border-color: var(--b-85); }
.tag-good { color: var(--color-accent-green); border-color: var(--color-accent-green); }
.tag-warn { color: var(--color-fg); border-color: var(--color-accent-yellow); background: rgba(247, 190, 70, 0.08); }
.tag-danger { color: var(--color-fg); border-color: var(--color-accent-red); background: rgba(239, 108, 92, 0.06); }

/* --------------------------------------------------------------------------
 * 12. Row pattern (anti-card replacement for previous .card)
 * -------------------------------------------------------------------------- */

.row-list {
  display: flex;
  flex-direction: column;
  margin: 16px 0;
}

.row {
  border-top: 1px solid var(--b-10);
  padding: 28px 0;
  display: block;
  color: inherit;
}
.row-list > .row:first-child { border-top: 0; padding-top: 0; }
.row-list > .row:last-child { border-bottom: 1px solid var(--b-10); padding-bottom: 28px; }

.row-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-55);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.row-title {
  font-size: var(--text-feature-title);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  color: var(--color-fg);
}

a.row:hover .row-title { text-decoration: underline; text-underline-offset: 3px; }

.row-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-80);
  max-width: 60ch;
}

.row .tag-row { margin: 12px 0 0; }

/* Grouping headers inside row-list */
.row-list .group-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-55);
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--b-10);
}
.row-list .group-label:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
 * 13. Callouts
 * -------------------------------------------------------------------------- */

.callout {
  margin: 24px 0;
  padding: 16px 18px;
  background: var(--color-bg);
  border-left: 3px solid var(--b-85);
  border-radius: 0;
}
.callout.warn { border-left-color: var(--color-accent-yellow); }
.callout.danger { border-left-color: var(--color-accent-red); }
.callout.good { border-left-color: var(--color-accent-green); }

.callout-title {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-55);
  margin-bottom: 6px;
}

.callout p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-80); }
.callout p + p { margin-top: 0.5em; }

/* --------------------------------------------------------------------------
 * 14. Tables
 * -------------------------------------------------------------------------- */

/* Tables: keep their layout but overflow-scroll horizontally when wider than
   their column. The wrapper-less approach (display:block) lets us avoid
   editing every HTML table to add a wrapping div. */
.prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
  -webkit-overflow-scrolling: touch;
}

.prose table thead,
.prose table tbody {
  width: 100%;
  display: table;
  table-layout: auto;
}

thead {
  background: var(--color-surface);
}

.prose table th {
  text-align: left;
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-55);
  border-bottom: 1px solid var(--b-10);
  white-space: nowrap;
}

.prose table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--b-10);
  color: var(--fg-80);
  vertical-align: top;
  font-size: 14px;
  line-height: 1.6;
  min-width: 140px;
}

td code { font-size: 12.5px; }
tbody tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
 * 15. Diagrams (inline SVG framing)
 * -------------------------------------------------------------------------- */

.diagram {
  background: var(--color-surface);
  border: 1px solid var(--b-10);
  border-radius: var(--r-media);
  padding: 28px;
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: auto;
}

.diagram svg { max-width: 100%; height: auto; }

.diagram-caption {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.04em;
  color: var(--fg-55);
  text-align: center;
  margin-top: 12px;
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
 * 16. Pager (prev / next)
 * -------------------------------------------------------------------------- */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 64px 0 0;
  border-top: 1px solid var(--b-10);
  padding-top: 32px;
}

.pager a {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.pager .dir {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-55);
}
.pager .title {
  color: var(--color-fg);
  font-size: 16px;
  margin-top: 4px;
}
.pager .next { text-align: right; align-items: flex-end; }

@media (max-width: 600px) {
  .pager { grid-template-columns: 1fr; gap: 16px; }
  .pager .next { text-align: left; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
 * 17. TOC (right rail)
 * -------------------------------------------------------------------------- */

.toc {
  display: none;
  position: fixed;
  top: calc(var(--nav-h-desktop) + 32px);
  right: calc((100vw - var(--container-max)) / 2 + var(--px-desktop));
  width: var(--toc-w);
  max-height: calc(100vh - var(--nav-h-desktop) - 64px);
  overflow-y: auto;
  padding: 0;
  z-index: var(--z-toc);
}

@media (min-width: 768px) {
  .toc { display: block; }
}

/* When viewport is narrower than --container-max, snap to right edge */
@media (min-width: 768px) and (max-width: 1640px) {
  .toc { right: var(--px-desktop); }
}

.toc h4 {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-55);
  margin: 0 0 12px;
}

.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--b-10);
  color: var(--fg-65);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.toc li a:hover { color: var(--color-fg); }
.toc li a[aria-current="true"] {
  color: var(--color-fg);
  border-left-color: var(--color-fg);
}

/* --------------------------------------------------------------------------
 * 18. Hero (homepage)
 * -------------------------------------------------------------------------- */

.hero {
  padding: 0 0 var(--section-py);
  max-width: var(--content-max-wide);
}

.hero h1 {
  font-size: var(--text-hero);
  line-height: 0.96;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 20px;
}
@media (min-width: 1000px) {
  .hero h1 { line-height: 1.1; }
}

.hero .lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg-80);
  max-width: 60ch;
  margin: 0 0 32px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  margin: 32px 0 0;
}

.hero-stat { display: flex; flex-direction: column; gap: 4px; }

.hero-stat .v {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--color-fg);
  letter-spacing: -0.01em;
}

.hero-stat .l {
  font-family: var(--font-mono);
  font-size: var(--text-mono-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-55);
}

/* --------------------------------------------------------------------------
 * 19. CTA strip (full-bleed, NOT a card)
 * -------------------------------------------------------------------------- */

.cta-strip {
  background: var(--color-bg-top);
  padding: 48px var(--px-desktop);
  margin: 64px calc(-1 * var(--px-desktop)) 0;
}

.cta-strip__inner {
  max-width: var(--content-max-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-strip h2 {
  font-size: var(--text-section-title);
  margin: 0;
  max-width: 28ch;
}

@media (max-width: 767px) {
  .cta-strip { margin: 48px calc(-1 * var(--px-mobile)) 0; padding: 32px var(--px-mobile); }
}

/* --------------------------------------------------------------------------
 * 20. Kbd
 * -------------------------------------------------------------------------- */

.kbd {
  display: inline-block;
  background: var(--color-surface);
  border: 1px solid var(--b-15);
  border-bottom-width: 2px;
  border-radius: var(--r-media);
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg);
}

/* --------------------------------------------------------------------------
 * 21. Site footer
 * -------------------------------------------------------------------------- */

.site-footer {
  margin-top: 96px;
  border-top: 1px solid var(--b-10);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 40px var(--px-mobile);
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    padding: 40px var(--px-desktop);
  }
}

.site-footer__brand { color: var(--color-fg); }

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.site-footer__links a {
  color: var(--fg-70);
  font-size: var(--text-pill);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.site-footer__links a:hover { color: var(--color-fg); }

/* --------------------------------------------------------------------------
 * 22. Sidebar mobile menu trigger
 * -------------------------------------------------------------------------- */

.sidebar-trigger {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
  padding: 7px 16px 7px 12px;
  border: 1px solid var(--b-85);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-pill);
  line-height: 1.3;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color var(--t-normal) ease, color var(--t-normal) ease;
}
.sidebar-trigger:hover {
  background: var(--color-fg);
  color: var(--color-bg);
}
.sidebar-trigger svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
@media (max-width: 1279px) {
  .sidebar-trigger { display: inline-flex; }
}

/* --------------------------------------------------------------------------
 * 23. Reveal animation (opt-in, reduced-motion-safe)
 * -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s var(--easing), transform 0.6s var(--easing);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
 * 24. Print styles
 * -------------------------------------------------------------------------- */

@media print {
  .top-nav,
  .sidebar,
  .toc,
  .site-footer,
  .skip-link,
  .sidebar-trigger,
  .pager { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }
  .app-grid { display: block; padding: 0; max-width: none; }
  .main { padding: 0; }
  .prose { max-width: none; }
  .prose a { color: #000; text-decoration: underline; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  .prose h2 { page-break-after: avoid; border-bottom-color: #888; }
  pre, table, .diagram { page-break-inside: avoid; }
}