/* ============================================================
   site.css — the engine behind the startup-stack site.

   Brand-neutral on purpose. Every colour, font, radius, shadow
   and timing value is read from a custom property; the values
   themselves live in tokens.css. Restyling the whole site means
   editing that one file and nothing in here.

   Layout is topbar / sidebar / content / toc rail, mobile first.

   Custom properties this file expects tokens.css to define:
     surfaces  --bg --surface --surface-alt --surface-sunken --code-bg
     text      --text --text-muted --text-faint --link --link-hover
     lines     --border --border-strong --scrim --kbd-bg
     brand     --primary --primary-contrast --accent --accent-strong
               --accent-tint --accent-contrast
     status    --success --success-tint --warning --warning-tint --danger
     chrome    --topbar-bg --sidebar-bg --hero-bg --hero-text --hero-muted
     glass     --glass-bg --glass-blur --glass-border --glass-shadow
     shape     --radius-sm --radius-md --radius-lg --radius-pill
     depth     --shadow-1 --shadow-2 --shadow-3
     motion    --speed --ease
     type      --font-body --font-display --font-mono --font-serif
   ============================================================ */

/* ---------- reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.015em; color: var(--text); text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: 700; }
h3 { font-size: 1.12rem; font-weight: 600; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection { background: var(--accent-tint); color: var(--text); }
kbd {
  font-family: var(--font-mono); font-size: 0.72em;
  background: var(--kbd-bg); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 1px 5px;
  color: var(--text-muted);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-contrast);
  padding: 10px 18px; border-radius: 0 0 var(--radius-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- horizontal-overflow guard ----------
   Nothing on this site may push the page sideways on a narrow phone.
   Use clip rather than hidden: hidden turns the element into a scroll
   container, which silently kills every position:sticky descendant —
   topbar, sidebar, toc rail, table headers. clip trims the overflow
   without creating that scroll context. The hidden declaration stays
   first as a fallback for browsers that predate clip. */
html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 10px;
  height: 58px; padding: 0 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .topbar { background: var(--topbar-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
}
.nav-toggle {
  display: inline-flex; width: 38px; height: 38px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center; color: var(--text-muted); flex: none;
}
.nav-toggle:hover { background: var(--surface-alt); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; white-space: nowrap; min-width: 0; }
.brand:hover { text-decoration: none; color: var(--text); }
/* The mark sits on the hero gradient, which is dark in BOTH themes — so the
   glyph takes --hero-text rather than inheriting --text from .brand, which
   would paint it near-black on near-black in light mode. Same reason the
   favicon is drawn from these two values. */
.brand-mark {
  width: 30px; height: 30px; border-radius: var(--radius-sm); flex: none;
  background: var(--hero-bg);
  color: var(--hero-text);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--hero-text) 18%, transparent);
}
/* sized rather than left to fill the box, so the glyph keeps the same breathing
   room the favicon has — the two are meant to be the same mark */
.brand-mark svg { display: block; width: 19px; height: 19px; }
.brand-name { font-family: var(--font-display); font-size: 0.98rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.brand-name .thin { color: var(--text-faint); font-weight: 500; }
.topbar-spacer { flex: 1; }
.searchbtn {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text-faint); font-size: 0.86rem;
  transition: border-color var(--speed) var(--ease);
  min-width: 190px;
}
.searchbtn:hover { border-color: var(--border-strong); color: var(--text-muted); }
.searchbtn svg { width: 15px; height: 15px; flex: none; }
.searchbtn kbd { margin-left: auto; }
.icon-btn {
  width: 38px; height: 38px; border-radius: var(--radius-sm); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.icon-btn:hover { background: var(--surface-alt); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }
.theme-toggle .sun { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }
@media (max-width: 480px) {
  .topbar { gap: 8px; }
  .brand { gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-mark svg { width: 16px; height: 16px; }
  .brand-name { font-size: 0.8rem; letter-spacing: 0; line-height: 1.1; }
  .brand-name .thin { display: none; }
}

/* ---------- animated hamburger ----------
   One button, two jobs: it opens the drawer on mobile and collapses the
   rail on desktop, so the bars morph into an X whenever the nav is showing. */
.nav-toggle .hb { position: relative; width: 18px; height: 14px; display: block; transition: transform 200ms var(--ease); }
.nav-toggle:active .hb { transform: scale(0.88); }
.nav-toggle .hb span {
  position: absolute; left: 0; height: 2px; width: 100%; border-radius: var(--radius-pill);
  background: currentColor;
  transition: transform 260ms var(--ease), opacity 180ms var(--ease), width 260ms var(--ease), top 260ms var(--ease), bottom 260ms var(--ease);
}
.nav-toggle .hb-t { top: 0; }
.nav-toggle .hb-m { top: 6px; }
.nav-toggle .hb-b { bottom: 0; }
@media (max-width: 1023px) {
  body.nav-open .nav-toggle .hb-t { transform: translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle .hb-m { opacity: 0; transform: translateX(-6px); }
  body.nav-open .nav-toggle .hb-b { transform: translateY(-6px) rotate(-45deg); }
}
@media (min-width: 1024px) {
  :root:not(.rail-collapsed) .nav-toggle .hb-t { transform: translateY(6px) rotate(45deg); }
  :root:not(.rail-collapsed) .nav-toggle .hb-m { opacity: 0; transform: translateX(-6px); }
  :root:not(.rail-collapsed) .nav-toggle .hb-b { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- layout ----------
   The sidebar pins to the viewport's left edge; the content column caps
   its own width and centres in what is left, so a very wide screen gets
   breathing room instead of a floating sidebar island. */
.layout {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
}
/* the rail is painted on the grid itself, so it runs unbroken from topbar
   to footer even when the page is taller than the sticky sidebar */
@media (min-width: 1024px) {
  .layout {
    background: linear-gradient(to right,
      var(--sidebar-bg) calc(268px - 1px),
      var(--border) calc(268px - 1px) 268px,
      transparent 268px);
  }
}
.content {
  padding: 30px clamp(18px, 4vw, 56px) 72px;
  min-width: 0;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}
@media (min-width: 1700px) {
  .layout {
    grid-template-columns: 300px minmax(0, 1fr);
    background: linear-gradient(to right,
      var(--sidebar-bg) calc(300px - 1px),
      var(--border) calc(300px - 1px) 300px,
      transparent 300px);
  }
}
.content-with-toc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1280px) {
  .content-with-toc { grid-template-columns: minmax(0, 1fr) 200px; }
}

/* ---------- sidebar ---------- */
.sidebar {
  position: sticky; top: 58px; height: calc(100dvh - 58px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  padding: 20px 12px 40px;
  scrollbar-width: thin;
}
.sidebar-group { margin-bottom: 1px; }
/* A collapsed rail is a list of seven headings, so the gap between them is the
   whole rhythm of it — 14px of lead-in per group turned that list into a
   column of islands. */
.sidebar-head { display: flex; align-items: center; gap: 2px; padding: 2px 4px 2px 0; }
.sidebar-group:not(.is-collapsed) .sidebar-head { padding-top: 8px; }
.sidebar-items { padding-bottom: 6px; }
.sidebar-title {
  display: flex; align-items: center; gap: 7px; flex: 1 1 auto; min-width: 0;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-faint); padding: 4px 10px; border-radius: var(--radius-sm);
}
a.sidebar-title:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
a.sidebar-title[aria-current="page"] { color: var(--accent-strong); }
.sidebar-title svg { width: 14px; height: 14px; flex: none; opacity: 0.8; }
.sidebar-caret {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-sm); color: var(--text-faint);
}
.sidebar-caret:hover { background: var(--surface-alt); color: var(--text); }
/* the whole head is one control, so hovering either half lights the caret —
   otherwise a 13px glyph at the edge of the rail reads as decoration */
.sidebar-head:hover .sidebar-caret { color: var(--text); }
.sidebar-caret svg { width: 15px; height: 15px; transform: rotate(90deg); transition: transform 0.15s ease; }
.sidebar-group.is-collapsed .sidebar-caret svg { transform: rotate(0deg); }
.sidebar-group.is-collapsed .sidebar-items { display: none; }
@media (prefers-reduced-motion: reduce) { .sidebar-caret svg { transition: none; } }
.sidebar a.nav-link {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 0.885rem; line-height: 1.35;
}
.sidebar a.nav-link:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.sidebar a.nav-link[aria-current="page"] {
  background: var(--accent-tint); color: var(--accent-strong); font-weight: 600;
}
.sidebar details { border-radius: var(--radius-sm); }
.sidebar summary {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 0.885rem; font-weight: 600;
  cursor: pointer; list-style: none; user-select: none;
}
.sidebar summary::-webkit-details-marker { display: none; }
.sidebar summary .sum-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar summary:hover { background: var(--surface-alt); color: var(--text); }
.sidebar summary .chev { margin-left: auto; transition: transform var(--speed) var(--ease); color: var(--text-faint); width: 14px; height: 14px; flex: none; }
.sidebar details[open] > summary .chev { transform: rotate(90deg); }
.sidebar details > div { padding-left: 8px; border-left: 1px solid var(--border); margin: 2px 0 4px 14px; }
.count-pill {
  margin-left: auto; font-size: 0.68rem; font-weight: 600; color: var(--text-faint);
  background: var(--surface-sunken); border-radius: var(--radius-pill); padding: 1px 7px;
}

/* mobile off-canvas drawer */
.scrim { position: fixed; inset: 0; z-index: 69; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--speed) var(--ease); }
@media (max-width: 1023px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .nav-toggle { display: inline-flex; }
  .sidebar {
    position: fixed; left: 0; top: 58px; z-index: 70;
    width: min(310px, 85vw); height: calc(100dvh - 58px);
    transform: translateX(-102%);
    transition: transform 240ms var(--ease);
    box-shadow: var(--shadow-3);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .scrim { opacity: 1; pointer-events: auto; }
  /* Scroll lock while the drawer is open. Mobile browsers keep scrolling the
     document even with overflow:hidden set on body and html, which lets the
     page slide under the fixed drawer and detach it from the header. The lock
     that holds: freeze the body with position:fixed at the current offset (the
     script sets top:-scrollY and restores the position on close) and pin the
     topbar to the viewport so the header and its close button stay put. */
  body.nav-open { position: fixed; left: 0; right: 0; overflow: hidden; }
  :root.nav-open { overflow: hidden; }
  body.nav-open .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 71; }
  .searchbtn { min-width: 0; width: 38px; height: 38px; padding: 0; justify-content: center; border: none; background: none; color: var(--text-muted); }
  .searchbtn .searchbtn-label, .searchbtn kbd { display: none; }
  .searchbtn svg { width: 19px; height: 19px; }
}

/* desktop rail collapse — the nav toggle doubles as a collapse button */
@media (min-width: 1024px) {
  /* Fixed, not sticky. A sticky element cannot leave its containing block, and
     the sidebar's is .layout — which ends where the footer begins. So at the
     bottom of a page the rail was dragged up by the height of the footer,
     taking its first few links under the topbar where nothing could reach
     them: its own scrollbar was already at zero, and the page had nowhere
     further to go. Fixed decouples it from page scroll entirely, the way the
     mobile drawer already is. The grid still reserves the column, so nothing
     about the content layout changes. */
  .sidebar { position: fixed; left: 0; top: 58px; height: calc(100dvh - 58px); }
  /* taking the sidebar out of flow makes main the first grid item, so it has
     to be told to stay in the second column */
  .layout > .content { grid-column: 2; }
  /* A fixed rail is the full height of the viewport at every scroll position,
     including the one where the footer is on screen — so the footer has to
     begin where the rail ends rather than run underneath it. The rail's own
     background continues the column down past the footer's top border, which
     is what it looked like when the sidebar was sticky. */
  .footer { margin-left: 268px; transition: margin-left 240ms var(--ease); }
  :root.rail-collapsed .footer { margin-left: 0; }
  /* an explicit width so the sidebar slides off intact instead of squashing
     while the grid column animates shut */
  .sidebar { width: 268px; transition: transform 240ms var(--ease), visibility 0s; }
  .layout { transition: grid-template-columns 240ms var(--ease); }
  :root.rail-collapsed .layout { grid-template-columns: 0 minmax(0, 1fr); background: none; }
  :root.rail-collapsed .sidebar {
    transform: translateX(-102%);
    visibility: hidden;                       /* off-screen links leave the tab order */
    transition: transform 240ms var(--ease), visibility 0s 240ms;
  }
}
@media (min-width: 1700px) {
  .sidebar { width: 300px; }
  .footer { margin-left: 300px; }
  :root.rail-collapsed .footer { margin-left: 0; }
  :root.rail-collapsed .layout { grid-template-columns: 0 minmax(0, 1fr); background: none; }
}

/* ---------- breadcrumbs / page header ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-faint); margin-bottom: 18px; }
.crumbs a { color: var(--text-faint); }
.crumbs a:hover { color: var(--link); }
.crumbs .sep { opacity: 0.55; }
.page-head { margin-bottom: 28px; }
.page-head .kicker {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}

/* the intro paragraph that sits under a page title */
.lede { font-size: 1.05rem; line-height: 1.6; color: var(--text-muted); max-width: 64ch; }
.page-head .lede { margin-top: 10px; }

/* ---------- prose ---------- */
.prose { overflow-wrap: anywhere; }
.prose > * + * { margin-top: 14px; }
.prose h2 { margin-top: 40px; padding-top: 8px; }
.prose h3 { margin-top: 26px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose .lead { font-size: 1.05rem; color: var(--text-muted); }
.prose blockquote {
  border-left: 3px solid var(--accent); background: var(--surface-alt);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 16px; color: var(--text-muted);
}
.prose code {
  font-family: var(--font-mono); font-size: 0.86em;
  background: var(--code-bg); border-radius: var(--radius-sm); padding: 1px 5px;
}
.prose pre {
  position: relative;                       /* anchor for .copy-btn */
  background: var(--code-bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  font-size: 0.84rem; line-height: 1.6;
}
.prose pre code { background: none; padding: 0; font-size: inherit; }

/* A copyable block is wrapped so the button has something to sit against that
   does not scroll: the <pre> itself scrolls sideways, and an absolutely
   positioned child of it slides off with the code. */
.codeblock { position: relative; }
.codeblock > pre { padding-top: 40px; }

/* copy-to-clipboard button, injected by the script into every pre[data-copy] */
.copy-btn {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  user-select: none; -webkit-user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: 0.72rem; font-weight: 600; line-height: 1.5;
  color: var(--text-muted); background: var(--surface);
  border: 1px solid var(--border);
  opacity: 0;
  transition: opacity var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.copy-btn:hover { color: var(--text); border-color: var(--border-strong); }
.copy-btn.is-done { color: var(--success); border-color: var(--success); opacity: 1; }
.copy-btn.is-failed { color: var(--danger); border-color: var(--danger); opacity: 1; }
pre:hover > .copy-btn, .codeblock:hover > .copy-btn, .copy-btn:focus-visible { opacity: 1; }
@media (hover: none) { .copy-btn { opacity: 1; } }

/* ---------- fact tags ----------
   The four states every claim in the stack carries. Same pill, four tones. */
.tag-sot, .tag-nv, .tag-tbd, .tag-conflict {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  border-radius: var(--radius-pill); padding: 2px 9px;
  border: 1px solid transparent;
}
.tag-sot::before, .tag-nv::before, .tag-tbd::before, .tag-conflict::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.tag-sot { color: var(--success); background: var(--success-tint); }
.tag-nv { color: var(--warning); background: var(--warning-tint); }
.tag-tbd { color: var(--text-muted); background: var(--surface-sunken); border-color: var(--border); }
.tag-conflict { color: var(--danger); background: color-mix(in srgb, var(--danger) 13%, var(--surface)); }

/* ---------- figure (inlined SVG diagram) ---------- */
.figure {
  width: 100%; margin: 24px 0; padding: 18px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.figure > svg,
.figure > .figure-zoom > svg { display: block; margin: 0 auto; width: 100%; max-width: 100%; height: auto; }
/* A raster infographic behaves the other way round to an inlined SVG: it has a
   fixed pixel size, so it fits the column and the click opens it at full
   resolution. Scrolling a 2000px image sideways inside a 700px column would be
   a worse way to read it than opening it. */
.figure > .figure-zoom { display: block; }
.figure > .figure-zoom > img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-sm); background: #fff;
}
.figure > .figure-zoom:hover { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
.figure-cap {
  margin-top: 12px; font-size: 0.8rem; line-height: 1.5;
  color: var(--text-faint); text-align: center;
}
.figure-cap b { color: var(--text-muted); font-weight: 600; }

/* ---------- hero ---------- */
.hero {
  background: var(--hero-bg);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 56px);
  color: var(--hero-text);
  position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 260px at 88% -10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 65%),
    radial-gradient(420px 240px at -5% 110%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 65%);
}
.hero > * { position: relative; z-index: 1; }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--hero-muted);
  border: 1px solid color-mix(in srgb, var(--hero-text) 22%, transparent); border-radius: var(--radius-pill);
  padding: 5px 13px; margin-bottom: 20px;
  background: color-mix(in srgb, var(--hero-text) 6%, transparent);
}
.hero h1 { color: var(--hero-text); font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; max-width: 21ch; }
.hero p { color: var(--hero-muted); font-size: clamp(0.98rem, 2vw, 1.12rem); max-width: 58ch; margin-top: 14px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-search {
  display: flex; align-items: center; gap: 10px; width: min(520px, 100%);
  background: color-mix(in srgb, var(--hero-text) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--hero-text) 25%, transparent);
  border-radius: var(--radius-md); padding: 12px 16px; color: var(--hero-muted);
  font-size: 0.95rem; text-align: left; margin-top: 28px;
  transition: background var(--speed) var(--ease);
}
.hero-search:hover { background: color-mix(in srgb, var(--hero-text) 16%, transparent); }
.hero-search svg { width: 17px; height: 17px; flex: none; }
.hero-search kbd {
  margin-left: auto;
  background: color-mix(in srgb, var(--hero-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--hero-text) 30%, transparent);
  color: var(--hero-muted);
}
@media (max-width: 420px) {
  .hero h1 { font-size: 1.7rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-md);
  font-weight: 600; font-size: 0.92rem; line-height: 1;
  border: 1px solid transparent;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), background var(--speed) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--accent-strong); color: var(--accent-contrast); box-shadow: var(--shadow-2); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--text-faint); color: var(--text); }
.btn-ghost { color: var(--link); }
.btn-ghost:hover { background: var(--surface-alt); }
.hero .btn-secondary {
  background: color-mix(in srgb, var(--hero-text) 10%, transparent);
  border-color: color-mix(in srgb, var(--hero-text) 30%, transparent);
  color: var(--hero-text);
}
.hero .btn-secondary:hover { background: color-mix(in srgb, var(--hero-text) 18%, transparent); color: var(--hero-text); }
@media (max-width: 560px) {
  .hero-actions .btn { flex: 1 1 100%; text-align: center; }
  .hero .kicker { font-size: 0.68rem; padding: 4px 11px; }
}

/* ---------- stat tiles ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 34px; }
.stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 20px;
}
.stat .n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); line-height: 1.1; }
.stat .l { font-size: 0.82rem; color: var(--text-muted); margin-top: 4px; }
.stat .n em { font-style: normal; color: var(--accent); }
a.stat { display: block; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
a.stat:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-1); }
a.stat .l { color: var(--link); }
@media (max-width: 420px) {
  .stats { gap: 8px; }
  .stat .n { font-size: 1.35rem; }
}

/* ---------- card grids ---------- */
.grid { display: grid; gap: 16px; margin-top: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; position: relative;
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
a.card { color: inherit; display: block; }
a.card:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card h3 { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; }
.card p { color: var(--text-muted); font-size: 0.895rem; margin-top: 8px; }
.card .go { position: absolute; top: 20px; right: 18px; color: var(--text-faint); transition: transform var(--speed) var(--ease), color var(--speed) var(--ease); }
a.card:hover .go { transform: translateX(3px); color: var(--accent); }
.card-icon {
  width: 38px; height: 38px; border-radius: var(--radius-md); flex: none;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent);
}
.card-icon svg { width: 19px; height: 19px; }

/* ---------- panel: one wide card, for a second audience ---------- */
.panel {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 16px; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
a.panel-link { color: inherit; transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease); }
a.panel-link:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.panel-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--accent-strong);
}
.panel-icon svg { width: 20px; height: 20px; }
.panel-body { flex: 1 1 auto; min-width: 0; }
.panel-body h3 { font-size: 1.02rem; }
.panel-body p { color: var(--text-muted); font-size: 0.895rem; margin-top: 8px; max-width: 78ch; }
.panel-go { flex: none; color: var(--text-faint); transition: transform var(--speed) var(--ease); }
.panel-go svg { width: 18px; height: 18px; }
a.panel-link:hover .panel-go { transform: translateX(3px); color: var(--accent-strong); }
@media (max-width: 560px) { .panel-go { display: none; } }
.card-icon.tone-success { background: var(--success-tint); color: var(--success); }
.card-icon.tone-warning { background: var(--warning-tint); color: var(--warning); }
.card-icon.tone-danger { background: color-mix(in srgb, var(--danger) 13%, var(--surface)); color: var(--danger); }
.card-icon.tone-quiet { background: var(--surface-sunken); color: var(--text-muted); }

/* ---------- prompt cards (the prompt library grid) ---------- */
.prompt-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; color: inherit; box-shadow: var(--shadow-1);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
a.prompt-card:hover { text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.prompt-card .pc-num {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--accent);
}
.prompt-card h3, .prompt-card .pc-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.3;
}
.prompt-card .pc-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; flex: 1; }
.prompt-card .pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; }
.pc-chip {
  display: inline-block; white-space: nowrap;
  font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 2px 9px;
}
.pc-chip.is-key { color: var(--accent); background: var(--accent-tint); border-color: transparent; }

/* ---------- badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  border-radius: var(--radius-pill); padding: 3px 10px;
  white-space: nowrap;
  background: var(--surface-sunken); color: var(--text-muted);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.b-accent { background: var(--accent-tint); color: var(--accent-strong); }
.badge.b-success { background: var(--success-tint); color: var(--success); }
.badge.b-warning { background: var(--warning-tint); color: var(--warning); }
.badge.b-danger { background: color-mix(in srgb, var(--danger) 13%, var(--surface)); color: var(--danger); }
.badge.b-plain::before { display: none; }
.badge.b-quiet { background: var(--surface-sunken); color: var(--text-muted); }

/* ---------- filter bar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 6px; }
.toolbar .field { position: relative; flex: 1 1 220px; min-width: 180px; }
.toolbar .field svg { position: absolute; left: 11px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; color: var(--text-faint); pointer-events: none; }
.toolbar input[type="search"] {
  width: 100%; height: 40px; padding: 0 12px 0 34px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.9rem;
}
.toolbar input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.toolbar select {
  height: 40px; padding: 0 30px 0 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.88rem;
  appearance: none; max-width: 100%;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.chip-row .chip-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); align-self: center; margin-right: 2px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 5px 13px; font-size: 0.82rem; font-weight: 500; color: var(--text-muted);
  background: var(--surface);
  transition: background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
:root[data-theme="dark"] .chip[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-strong); }
.result-count { font-size: 0.84rem; color: var(--text-faint); margin: 10px 0 14px; }
.result-count b { color: var(--text); }
.empty-state {
  text-align: center; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  padding: 44px 20px; color: var(--text-muted); margin-top: 18px;
}
.empty-state .big { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); margin-bottom: 8px; }

/* ---------- data tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-top: 18px; background: var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
table.data th, table.data td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
table.data thead th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-faint); background: var(--surface-alt);
  position: sticky; top: 0; white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-alt); }
table.data td .sub { display: block; font-size: 0.78rem; color: var(--text-faint); margin-top: 2px; }
table.data .num { font-family: var(--font-mono); font-size: 0.8rem; white-space: nowrap; }
table.data .cell-wide { min-width: 220px; }
table.data .cell-tight { white-space: nowrap; }
/* opt in when a table has too many columns to fold; it scrolls in .table-wrap */
table.data.data-wide { min-width: 820px; }

/* ---------- detail page: facts panel ---------- */
.facts {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; margin: 24px 0;
}
.fact { background: var(--surface); padding: 14px 18px; flex: 1 1 190px; min-width: min(190px, 100%); }
.fact .k { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 6px; }
.fact .v { font-size: 0.92rem; font-weight: 600; }
.fact .v .badge { margin: 2px 4px 2px 0; }

/* ---------- detail page: sections ---------- */
.section { margin-top: 36px; scroll-margin-top: 76px; }
.section > h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 1.22rem; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 16px;
}
.section > h2 .sec-icon {
  width: 30px; height: 30px; border-radius: var(--radius-sm); flex: none;
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent);
}
.section > h2 .sec-icon svg { width: 16px; height: 16px; }
.section .body { color: var(--text); }
.section .body p + p { margin-top: 12px; }

/* checklist */
.checklist { list-style: none; padding: 0; display: grid; gap: 10px; }
.checklist li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 12px 16px;
}
.checklist .tick {
  width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
  display: grid; place-items: center;
  background: var(--success-tint); color: var(--success);
}
.checklist .tick svg { width: 12px; height: 12px; }

/* key links */
.keylinks { display: flex; flex-wrap: wrap; gap: 10px; }
.keylink {
  display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-width: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--surface); padding: 10px 15px;
  font-size: 0.88rem; font-weight: 600; color: var(--link);
  transition: border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.keylink:hover { border-color: var(--link); box-shadow: var(--shadow-1); text-decoration: none; }
.keylink svg { width: 15px; height: 15px; flex: none; }
.keylink > span { min-width: 0; overflow: hidden; }
.keylink .sub { display: block; font-weight: 400; font-size: 0.76rem; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }

/* callout */
.callout {
  display: flex; gap: 12px; border-radius: var(--radius-md);
  padding: 14px 16px; font-size: 0.9rem;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--text-muted); margin-top: 18px;
}
.callout.tone-info { background: var(--accent-tint); border-color: transparent; color: var(--text); }
.callout.tone-warn { background: var(--warning-tint); border-color: transparent; color: var(--text); }
.callout .ic { flex: none; margin-top: 2px; color: var(--accent); }
.callout.tone-warn .ic { color: var(--warning); }
.callout .ic svg { width: 17px; height: 17px; }
.callout a { font-weight: 600; }

/* prev / next */
.pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 44px; }
.pagenav a {
  border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 13px 16px; color: inherit; display: flex; flex-direction: column; gap: 3px;
  transition: border-color var(--speed) var(--ease);
}
.pagenav a:hover { text-decoration: none; border-color: var(--border-strong); }
.pagenav .dir { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); }
.pagenav .t { font-size: 0.88rem; font-weight: 600; color: var(--link); }
.pagenav a.next { text-align: right; align-items: flex-end; }
@media (max-width: 560px) { .pagenav { grid-template-columns: 1fr; } .pagenav a.next { text-align: left; align-items: flex-start; } }

/* ---------- toc rail ---------- */
.toc { display: none; }
@media (min-width: 1280px) {
  .toc { display: block; position: sticky; top: 84px; align-self: start; font-size: 0.82rem; max-height: calc(100dvh - 110px); overflow-y: auto; }
  .toc .toc-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); margin-bottom: 10px; }
  .toc a { display: block; padding: 4px 0 4px 12px; color: var(--text-muted); border-left: 2px solid var(--border); }
  .toc a:hover { color: var(--text); text-decoration: none; }
  .toc a.active { color: var(--accent-strong); border-left-color: var(--accent); font-weight: 600; }
}

/* ---------- search modal ---------- */
/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 110; display: none; }
.lightbox.open { display: block; }
.lightbox .backdrop {
  position: absolute; inset: 0; background: var(--scrim);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.lightbox-inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: clamp(16px, 4vw, 48px); pointer-events: none;
}
.lightbox-inner > * { pointer-events: auto; }
.lightbox img {
  max-width: 100%; max-height: calc(100vh - 150px);
  width: auto; height: auto; object-fit: contain;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
}
.lightbox-cap {
  max-width: 70ch; margin: 0; text-align: center;
  font-size: 0.82rem; line-height: 1.5; color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}
.lightbox-close {
  position: absolute; top: clamp(10px, 2vw, 20px); right: clamp(10px, 2vw, 20px);
  background: var(--surface); border: 1px solid var(--border);
}
/* the figure itself is a button now, so say so */
.figure > .figure-zoom { cursor: zoom-in; }

.search-modal { position: fixed; inset: 0; z-index: 100; display: none; }
.search-modal.open { display: block; }
.search-modal .backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.search-panel {
  position: relative; margin: min(12vh, 110px) auto 0; width: min(620px, calc(100vw - 28px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3); overflow: hidden;
  display: flex; flex-direction: column; max-height: min(64vh, 540px);
}
.search-panel .search-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.search-panel .search-head svg { width: 17px; height: 17px; color: var(--text-faint); flex: none; }
.search-panel input { flex: 1; border: none; background: none; font: inherit; font-size: 1rem; color: var(--text); outline: none; min-width: 0; }
.search-panel .results { overflow-y: auto; padding: 8px; }
.search-panel .hit { display: block; padding: 10px 12px; border-radius: var(--radius-md); color: inherit; }
.search-panel .hit:hover, .search-panel .hit.sel { background: var(--surface-alt); text-decoration: none; }
.search-panel .hit .h-name { font-weight: 600; font-size: 0.92rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.search-panel .hit .h-sub { font-size: 0.79rem; color: var(--text-faint); margin-top: 2px; }
.search-panel .none { padding: 26px 16px; text-align: center; color: var(--text-faint); font-size: 0.9rem; }
.search-panel .search-foot { border-top: 1px solid var(--border); padding: 8px 16px; display: flex; gap: 14px; font-size: 0.72rem; color: var(--text-faint); }
.search-panel mark { background: var(--accent-tint); color: var(--accent-strong); border-radius: var(--radius-sm); padding: 0 2px; }
.hit .h-kind {
  display: inline-block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 1px 7px; vertical-align: middle;
}

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--sidebar-bg); }
.footer-inner {
  max-width: 1460px; margin: 0 auto; padding: 16px clamp(18px, 4vw, 56px);
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  font-size: 0.73rem; color: var(--text-faint);
}
.footer a { color: var(--text-muted); }
.footer .f-links { display: flex; flex-wrap: wrap; gap: 12px; }
.footer .footer-note { flex: 1 1 260px; max-width: 58ch; line-height: 1.5; }
.footer-author { display: flex; align-items: center; gap: 12px; flex: none; }
.author-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid var(--border-strong); flex: none;
}
.author-meta { line-height: 1.4; }
.author-role {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.author-nameline { display: flex; align-items: center; gap: 8px; }
.author-name { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.author-links { display: flex; gap: 2px; }
.author-links a {
  display: inline-flex; width: 22px; height: 22px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center; color: var(--text-faint);
}
.author-links a:hover { background: var(--surface-alt); color: var(--accent-strong); }
.author-links svg { width: 14px; height: 14px; }

/* ---------- utilities ---------- */
.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }
.mono { font-family: var(--font-mono); }
.mt-0 { margin-top: 0; }
.section-gap { margin-top: 46px; }
.home-h2 { display: flex; align-items: baseline; gap: 12px; margin-top: 52px; }
.home-h2 .more { margin-left: auto; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
hr.rule { border: none; border-top: 1px solid var(--border); margin: 40px 0; }

/* serif accent, for the one or two words that carry a page */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.2px; }
.hero h1 .serif { font-style: italic; }

/* frosted surface; falls back to a flat panel where backdrop-filter is missing */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--surface); }
}

/* back to top */
.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-2); color: var(--text-muted);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; translate: 0 8px;
  transition: opacity var(--speed) var(--ease), translate var(--speed) var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; translate: 0 0; }
.to-top svg { width: 18px; height: 18px; }

/* ---------- print ---------- */
@media print {
  .topbar, .sidebar, .toc, .to-top, .pagenav, .scrim, .search-modal, .copy-btn, .footer .f-links { display: none !important; }
  .layout { display: block; }
  .content { padding: 0; }
  /* print from the light system palette whatever theme the screen is in;
     Canvas / CanvasText are keywords, so no colour lands in this file */
  :root { color-scheme: light; }
  body { background: Canvas; color: CanvasText; font-size: 12px; }
  a { color: inherit; text-decoration: underline; }
  .card, .prompt-card, .facts, .table-wrap, .figure { box-shadow: none; break-inside: avoid; }
  .section { break-inside: avoid; }
  .prose pre { white-space: pre-wrap; overflow: visible; }
}

/* ---------- home: the three loops ----------
   One card per loop, distinguished by a colour rail rather than an icon,
   because the loops are a sequence and the rail reads as one. */
.loop { border-left: 3px solid var(--border-strong); }
.loop h3 { font-size: 0.98rem; }
.loop-build { border-left-color: var(--loop-build); }
.loop-enrich { border-left-color: var(--loop-enrich); }
.loop-pulse { border-left-color: var(--loop-pulse); }

/* Tables opt out of the prose-wide break-anywhere rule: a cell is narrow
   enough that it would split a short word down the middle, and the table
   already scrolls inside .table-wrap when it genuinely runs out of room. */
.prose .table-wrap th, .prose .table-wrap td { overflow-wrap: break-word; }

/* nested headings in the on-this-page rail */
@media (min-width: 1280px) {
  .toc a.l3 { padding-left: 24px; font-size: 0.95em; color: var(--text-faint); }
}

/* five equal columns on a desktop, so the last step does not orphan */
@media (min-width: 1100px) { .grid.steps { grid-template-columns: repeat(5, 1fr); } }
.grid.steps .card { padding: 16px; }
.grid.steps .card h3 { font-size: 0.95rem; }
.grid.steps .card p { font-size: 0.83rem; }

/* ---------- home: the five steps ----------
   Numbered cards, because "what do I actually do" is the first question the
   page has to answer and prose was not answering it. */
.step-card .n {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 800;
  line-height: 1; color: var(--accent); display: block; margin-bottom: 10px;
}