/**
 * Structural base.
 *
 * This file sets LAYOUT and nothing else. Every colour, font, radius, weight and
 * border comes from a custom property that theme.css defines, so a stylesheet
 * that declares the token contract gets a complete, working interface and then
 * overrides whatever it wants.
 *
 * The split is what made a whole visual redirection cheap: palette, typography,
 * radius, ornament and motion all live in one file, and none of them can break
 * the citation expander or the abstention panel by accident. It survived seven
 * treatments being deleted for that reason alone.
 *
 * TOKEN CONTRACT: see the :root block at the end. theme.css MUST define all of
 * it.
 */

/* Defaults for tokens a theme may legitimately not care about. :where() keeps
   specificity at zero, so a theme's own :root block always wins. */
:where(:root) {
  --answer-size: clamp(22px, 3.4vw, 34px);
  --answer-weight: 500;
  --display-weight: 600;
  --r-pill: 999px;
  --r-tl: 50%;
  --orb: 168px;
  --maxw: 1280px;
  --maxw-doc: 1000px;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
svg { display: block; }

/* Every number on screen is monospaced and tabular. Proportional digits jitter
   as a live readout updates, which reads as a rendering bug. */
.sh-num, .doc-stat .sh-num, td.sh-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Shell                                                               */
/* ------------------------------------------------------------------ */

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  max-height: 76px;
  padding: 12px 0;
}

.topbar-spacer { flex: 1; }

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand small {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--fg-3);
  letter-spacing: 0;
}

.navlinks { display: flex; align-items: center; gap: 8px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--fg-2);
  font-size: 13px;
  font-weight: 500;
  transition: background .18s, color .18s, border-color .18s, transform .1s;
}
.btn:hover { color: var(--fg); border-color: var(--line-strong); background: var(--bg-3); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); filter: brightness(1.08); }

/* Two service indicators. The dot carries real state, which is the only reason
   a coloured dot earns its place here. */
.sh-health { display: flex; gap: 14px; align-items: center; }
.sh-health-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
}
.sh-health-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--halt);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--halt) 18%, transparent);
}
.sh-health-item[data-up="true"] .sh-health-dot {
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.sh-health-item[data-up="true"] { color: var(--fg-2); }

/* ------------------------------------------------------------------ */
/* Mic                                                                 */
/* ------------------------------------------------------------------ */

.mic {
  position: relative;
  width: var(--orb, 168px);
  height: var(--orb, 168px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--accent-fg);
  transition: transform .16s cubic-bezier(.16,1,.3,1);
}
.mic:hover { transform: scale(1.02); }
.mic:active { transform: scale(.98); }
.mic-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The amplitude ring. --amp is written by the animation frame loop in app.js and
   drives a transform only, so it never triggers layout. */
.mic-ring {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: calc(.18 + var(--amp, 0) * .82);
  transform: scale(calc(1 + var(--amp, 0) * .22));
  transition: opacity .08s linear;
  pointer-events: none;
}
.mic-ring-2 {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: calc(var(--amp, 0) * .45);
  transform: scale(calc(1 + var(--amp, 0) * .34));
  pointer-events: none;
}
[data-state="idle"] .mic-ring, [data-state="idle"] .mic-ring-2 { opacity: .16; transform: none; }
[data-state="processing"] .mic-ring { animation: sh-pulse 1.1s ease-in-out infinite; }

@keyframes sh-pulse {
  0%, 100% { opacity: .25; transform: scale(1); }
  50% { opacity: .7; transform: scale(1.06); }
}

.sh-state {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.sh-transcript {
  font-size: clamp(19px, 2.6vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  min-height: 1.4em;
  color: var(--fg);
}
.sh-transcript:empty::before {
  content: "Your question appears here.";
  color: var(--fg-3);
}

.sh-error {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--halt);
  border-left: 2px solid var(--halt);
  padding-left: 10px;
}

/* ------------------------------------------------------------------ */
/* Text fallback and samples                                           */
/* ------------------------------------------------------------------ */

.sh-form { display: flex; gap: 8px; }
/* Toggled by Ctrl + . or shruti.chat.off(). The element stays in the DOM and
   stays wired, so turning it back on costs nothing and loses no state. */
body[data-chat="off"] .sh-form { display: none; }
.sh-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  color: var(--fg);
  font: inherit;
  font-size: 15px;
}
.sh-input::placeholder { color: var(--fg-3); }
.sh-input:focus { border-color: var(--accent); outline: none; }

.sh-samples { display: flex; flex-wrap: wrap; gap: 6px; }
.sh-sample {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill, 999px);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-3);
  transition: color .16s, border-color .16s, background .16s;
}
.sh-sample:hover { color: var(--fg); border-color: var(--line-strong); }
.sh-sample[data-kind="refuses"] { border-style: dashed; }
.sh-sample[data-kind="refuses"]:hover { color: var(--halt); border-color: var(--halt); }

/* ------------------------------------------------------------------ */
/* Answer                                                              */
/* ------------------------------------------------------------------ */

.sh-idle { color: var(--fg-3); font-size: 14px; line-height: 1.6; }

/* The answer splits in two. The first sentence carries the answer and is set
   large; the surrounding passage context is set small. Nothing is hidden, it is
   only weighted, so a reader gets the answer at a glance and the evidence
   underneath it. */
.sh-answered { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-w, 190px); gap: 28px; align-items: start; }
.sh-answer-main { min-width: 0; }

.sh-answer-text {
  font-size: var(--answer-size);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: var(--answer-weight);
  max-width: 40ch;
}
.sh-answer-rest {
  margin-top: 10px;
  /* Proportional to the lead, but never below a readable floor. A theme with a
     small display size would otherwise drive this to nine pixels. */
  font-size: max(13.5px, calc(var(--answer-size) * .55));
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 64ch;
}

.sh-answer-side {
  display: grid;
  gap: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--line);
}
.sh-side-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sh-side-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.sh-side-v { font-size: 16px; color: var(--fg); }
.sh-side-dim { color: var(--fg-3); }
.sh-side-note { margin-top: 6px; font-size: 11px; line-height: 1.55; color: var(--fg-3); }

.sh-answer-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.sh-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  color: var(--fg-2);
}
.sh-badge[data-path="EXTRACTIVE"] { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.sh-badge[data-path="GENERATIVE"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }

.sh-fineprint { font-size: 12px; line-height: 1.5; color: var(--fg-3); }

.sh-cites { margin-top: 18px; display: grid; gap: 6px; }
.sh-cite { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.sh-cite-head {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-3);
  transition: background .16s;
}
.sh-cite-head:hover { background: var(--bg-3); color: var(--fg-2); }
.sh-cite-n {
  width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--bg-3); color: var(--fg-2); font-size: 10px;
}
.sh-cite-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-cite-score { color: var(--fg-2); }
.sh-cite-body {
  padding: 0 12px 12px 40px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 68ch;
}

/* Abstention gets equal visual weight to an answer. It is a scored feature, not
   an error, and it must not look like something broke. */
.sh-abstain-head {
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.sh-reason-code {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .09em;
  color: var(--halt);
  margin-top: 8px;
}
.sh-reason-text { font-size: 15px; color: var(--fg-2); margin-top: 6px; max-width: 46ch; }

.sh-scorebar {
  position: relative;
  height: 6px;
  margin: 22px 0 10px;
  background: var(--bg-3);
  border-radius: var(--r-pill, 999px);
}
.sh-scorebar-floor {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  background: var(--halt);
}
.sh-scorebar-mark {
  position: absolute; top: 50%; width: 11px; height: 11px;
  margin: -5.5px 0 0 -5.5px; border-radius: 50%;
  background: var(--fg);
  border: 2px solid var(--bg);
}
.sh-scorenums { display: flex; gap: 26px; }
.sh-scorenums dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--fg-3); text-transform: uppercase; }
.sh-scorenums dd { margin: 2px 0 0; font-size: 18px; }
.sh-abstain .sh-fineprint { margin-top: 12px; }

/* ------------------------------------------------------------------ */
/* Waterfall                                                           */
/* ------------------------------------------------------------------ */

.sh-wf-total { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.sh-wf-big { font-size: clamp(30px, 5vw, 46px); line-height: 1; letter-spacing: -0.03em; color: var(--ok); }
.sh-wf[data-over="true"] .sh-wf-big { color: var(--halt); }
.sh-wf-unit { font-family: var(--font-mono); font-size: 14px; color: var(--fg-3); }
.sh-wf-verdict { font-size: 12px; color: var(--fg-3); margin-left: 4px; }

.sh-wf-rows { margin-top: 16px; display: grid; gap: 5px; }
.sh-wf-row {
  display: grid;
  grid-template-columns: 108px 1fr 54px;
  align-items: center;
  gap: 10px;
}
.sh-wf-name { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; }
.sh-wf-track { height: 9px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.sh-wf-bar {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left;
  animation: sh-grow .45s cubic-bezier(.16,1,.3,1) both;
}
.sh-wf-ms { font-size: 11.5px; text-align: right; color: var(--fg-2); }
.sh-wf-row[data-status="skipped"] .sh-wf-bar {
  background: repeating-linear-gradient(45deg, var(--warn) 0 3px, transparent 3px 6px);
}
.sh-wf-row[data-status="failed"] .sh-wf-bar { background: var(--halt); }
.sh-wf .sh-fineprint { margin-top: 14px; }

@keyframes sh-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ */
/* Analytics                                                           */
/* ------------------------------------------------------------------ */

.sh-an-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sh-an-title { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.sh-an-export {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 9px;
  transition: color .16s, border-color .16s;
}
.sh-an-export:hover { color: var(--fg); border-color: var(--line-strong); }

/* A grid item defaults to min-width:auto, so a wide table inside the analytics
   panel can push its whole column past the viewport. These keep the panel
   shrinkable and let the one genuinely wide thing scroll inside itself. */
.sh-an, .sh-an-band, .sh-an-block { min-width: 0; }
.sh-an-published { overflow-x: auto; }
.sh-an-band, .sh-an-block { margin-top: 18px; }
.sh-an-band-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px;
}
.sh-an-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sh-an-band[data-band="B"] .sh-an-grid { grid-template-columns: repeat(3, 1fr); }
.sh-an-cell {
  display: grid; gap: 3px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-2);
}
.sh-an-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: var(--fg-3); }
.sh-an-v { font-size: 19px; line-height: 1.1; color: var(--ok); }
.sh-an-cell[data-over="true"] .sh-an-v { color: var(--halt); }

.sh-spark { width: 100%; height: 34px; margin-top: 10px; }
.sh-spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sh-spark-budget { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: .6; }

.sh-an-path { display: grid; grid-template-columns: 92px 1fr 24px; align-items: center; gap: 9px; margin-bottom: 5px; }
.sh-an-path-name { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); }
.sh-an-path-bar { height: 7px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.sh-an-path-bar span { display: block; height: 100%; background: var(--fg-3); }
.sh-an-path[data-path="EXTRACTIVE"] .sh-an-path-bar span { background: var(--ok); }
.sh-an-path[data-path="GENERATIVE"] .sh-an-path-bar span { background: var(--warn); }
.sh-an-path[data-path="NONE"] .sh-an-path-bar span { background: var(--halt); }
.sh-an-path .sh-num { font-size: 11px; text-align: right; color: var(--fg-2); }

.sh-an-stages { display: grid; gap: 3px; }
.sh-an-stage {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
  padding: 3px 0;
}
.sh-an-stage .sh-num { color: var(--fg-2); }
.sh-an .sh-fineprint { margin-top: 14px; }

/* ------------------------------------------------------------------ */
/* Tables, shared by the panel and the docs                            */
/* ------------------------------------------------------------------ */

.sh-table { font-size: 13px; }
.sh-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.sh-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.sh-table td.sh-num { text-align: right; padding-right: 14px; white-space: nowrap; }
.sh-table th:last-child, .sh-table td:last-child { padding-right: 0; }
.sh-table tr[data-ok="false"] td.sh-num { color: var(--warn); }
.sh-table tr[data-shipped="true"] { background: var(--bg-2); }
/* A row that reuses another row's index is real, measured and NOT independent
   evidence. Dimming its numbers says that at a glance, which the pill in the
   first cell then says in words. */
.sh-table tr[data-derived="true"] td.sh-num { color: var(--fg-3); }
/* A number that is only there to show what cheating would have looked like.
   It must never read as a result. */
.sh-table tr[data-leak="true"] td { color: var(--halt); }

/* A number column is read down its digits, so its header belongs over the last
   digit rather than the first. A left aligned header sitting on top of right
   aligned numbers is the misalignment that becomes obvious the moment a column
   changes width, which is every time the window does. */
.sh-table th.sh-th-num { text-align: right; padding-right: 14px; }
.sh-table th.sh-th-num:last-child { padding-right: 0; }

/* Below this width the columns stop being narrow and start being broken: a
   header wraps to three lines, the cell under it does not, and the two stop
   lining up. A floor plus the scrolling wrapper keeps the table intact and
   moves it sideways instead. */
.doc-tablewrap .sh-table { min-width: 560px; }
.sh-an-published .sh-table { min-width: 380px; }

/* ------------------------------------------------------------------ */
/* Documentation page                                                  */
/* ------------------------------------------------------------------ */

.doc { max-width: var(--maxw-doc, 1000px); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 120px; }

.doc-hero { padding: clamp(48px, 9vw, 88px) 0 clamp(32px, 5vw, 52px); }
.doc-hero h1 {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: var(--display-weight, 600);
  max-width: 18ch;
}
.doc-hero p { margin-top: 18px; font-size: clamp(16px, 2vw, 19px); color: var(--fg-2); max-width: 62ch; }

/* The sticky section bar.

   Four things live in it and three are visible at any one width. Wide: the
   section list, with the run button pinned right because the page header has
   scrolled away by the time anyone wants it. Narrow: the brand, which goes back
   to the demo, and one button naming the section you are in that opens the same
   list as a menu. Nine links wrapping onto three lines was the single largest
   source of clutter on a phone. */
.doc-toc {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 12px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.doc-toc-links { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.doc-toc a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--fg-3); text-decoration: none;
  padding: 4px 9px; border-radius: var(--r-sm);
  transition: color .16s, background .16s;
}
.doc-toc a:hover { color: var(--fg); background: var(--bg-3); }
/* Same treatment the mode toggle uses for its selected state, so "where I am"
   and "what is on" read as one idea across the site. */
.doc-toc a[aria-current="true"] { background: var(--accent); color: var(--accent-fg); }

/* Neither of these is a section link, so both take back the size and colour the
   section links set. */
.doc-toc .doc-toc-brand {
  display: none;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  padding: 4px 6px 4px 0;
  background: none;
}
.doc-toc .doc-toc-run {
  margin-left: auto;
  padding: 5px 11px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-fg);
  white-space: nowrap;
}
.doc-toc .doc-toc-run:hover {
  background: var(--accent); color: var(--accent-fg); filter: brightness(1.08);
}

/* Neither of these earns its place until the bar is pinned. Until then the page
   header is still on screen a line or two above, carrying both already. */
.doc-toc:not([data-stuck="true"]) .doc-toc-brand,
.doc-toc:not([data-stuck="true"]) .doc-toc-run { display: none; }

.doc-toc-picker { position: relative; display: none; min-width: 0; }
.doc-toc-current {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg);
}
.doc-toc-current-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Drawn rather than typed, because a glyph like the down arrow is missing from
   several of the type stacks these themes ask for. */
.doc-toc-chev {
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .16s;
}
.doc-toc-current[aria-expanded="true"] .doc-toc-chev { transform: rotate(180deg); }

.doc-toc-menu {
  position: absolute; top: calc(100% + 7px); left: 0; z-index: 10;
  display: grid; gap: 2px;
  min-width: 200px; padding: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .38);
}
/* display:grid would otherwise beat the hidden attribute. */
.doc-toc-menu[hidden] { display: none; }
.doc-toc-menu a { font-size: 12px; padding: 7px 10px; }

@media (max-width: 760px) {
  .doc-toc { flex-wrap: nowrap; gap: 8px; }
  .doc-toc-links { display: none; }
  .doc-toc-picker { display: block; }
  .doc-toc .doc-toc-brand { display: block; }
}

html { scroll-behavior: auto; }
.doc-sec { scroll-margin-top: 72px; }

.doc-sec { padding: clamp(40px, 6vw, 68px) 0; border-bottom: 1px solid var(--line); }
.doc-sec:last-child { border-bottom: 0; }
.doc-sec-head { margin-bottom: 28px; }
.doc-h2 {
  font-size: clamp(24px, 3.6vw, 36px);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: var(--display-weight, 600);
  max-width: 22ch;
}
.doc-kicker { margin-top: 10px; font-size: 14px; color: var(--fg-3); max-width: 66ch; line-height: 1.6; }
.doc-h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.doc-h3-standalone { margin: 34px 0 14px; }
.doc-lead { font-size: 17px; line-height: 1.6; color: var(--fg-2); max-width: 64ch; margin-bottom: 22px; }
.doc-note { margin-top: 14px; font-size: 13.5px; line-height: 1.65; color: var(--fg-3); max-width: 68ch; }
.doc-caption { margin-top: 10px; font-size: 12px; color: var(--fg-3); max-width: 70ch; }

.doc-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 1px 5px; margin-right: 7px; white-space: nowrap;
}

.doc-tablewrap { overflow-x: auto; }
.doc-td-name strong { display: block; font-weight: 600; }
.doc-td-name span { display: block; font-size: 12px; color: var(--fg-3); margin-top: 2px; max-width: 40ch; }
.doc-td-verdict { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; }

.doc-pill {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
  color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
  border-radius: var(--r-sm); padding: 1px 5px;
}
/* The plain pill means "this is the one we shipped". A row that reuses another
   row's index is neither a win nor a loss, so it must not borrow that colour. */
.doc-pill.doc-pill-note { color: var(--fg-3); border-color: var(--line-strong); }

/* Requirements */
.doc-reqs { display: grid; gap: 10px; }
.doc-req {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 18px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-2);
}
.doc-req-n {
  font-family: var(--font-mono); font-size: 22px; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.doc-req-body p { font-size: 14px; line-height: 1.6; margin-top: 8px; max-width: 62ch; }
.doc-req-ask { color: var(--fg-3); }
.doc-req-ev { color: var(--fg-3); font-size: 13px; }
.doc-req-status {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ok); white-space: nowrap;
}
.doc-req[data-status="partial"] .doc-req-status { color: var(--warn); }

/* Bands */
.doc-bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
.doc-band { padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.doc-band[data-ok="true"] { border-color: color-mix(in srgb, var(--ok) 38%, var(--line)); }
.doc-band p { font-size: 13px; line-height: 1.55; margin-top: 10px; color: var(--fg-2); }
.doc-band-letter {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: var(--r-sm); background: var(--bg-3);
  font-family: var(--font-mono); font-size: 11px; margin-right: 6px;
}
.doc-band-verdict { color: var(--fg) !important; font-weight: 500; }

/* Pipeline figure.
   Real elements rather than a fixed width SVG, so it reflows instead of forcing
   a horizontal scrollbar on a phone. Each zone is a labelled group; the arrows
   are their own elements between cards, so when a row wraps the arrow wraps
   with it and still points at the next card. */
.flow { display: grid; gap: 14px; margin: 26px 0; }

.flow-zone {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 16px 18px;
  background: var(--bg-2);
}
.flow-zone[data-timed="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-2));
}

.flow-zone-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.flow-zone-name { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.flow-zone[data-timed="true"] .flow-zone-name { color: var(--accent); }
.flow-zone-note { font-size: 11.5px; color: var(--fg-3); }

.flow-cards { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }

.flow-card {
  flex: 1 1 148px;
  min-width: 132px;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
}
.flow-zone[data-timed="true"] .flow-card { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.flow-card-label { font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em; }
.flow-card-sub { font-family: var(--font-mono); font-size: 10px; line-height: 1.45; color: var(--fg-3); }
.flow-card-ms {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--accent);
  margin-top: 3px;
}

/* The connector. A short rule with a chevron, rotated a quarter turn when the
   layout stacks. */
.flow-arrow {
  flex: 0 0 auto;
  align-self: center;
  width: 16px; height: 8px;
  position: relative;
  color: var(--line-strong);
}
.flow-arrow::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 100%; height: 1px; background: currentColor;
}
.flow-arrow::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 5px; height: 5px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.flow-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; font-size: 11.5px; color: var(--fg-3); }
.flow-legend b { color: var(--fg-2); font-weight: 600; }

@media (max-width: 720px) {
  .flow-cards { flex-direction: column; align-items: stretch; }
  .flow-card { flex: 1 1 auto; }
  .flow-arrow { width: 8px; height: 16px; margin-left: 18px; }
  .flow-arrow::before { left: 50%; top: 0; width: 1px; height: 100%; }
  .flow-arrow::after { right: 50%; top: auto; bottom: 0; transform: translateX(50%) rotate(135deg); }
}

/* Stage bars */
.doc-stages { display: grid; gap: 7px; }
.doc-stage { display: grid; grid-template-columns: 132px 1fr 62px 1fr; gap: 12px; align-items: center; }
.doc-stage-name { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.doc-stage-track { height: 10px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.doc-stage-bar { display: block; height: 100%; background: var(--accent); }
.doc-stage-ms { font-size: 12px; text-align: right; }
.doc-stage-note { font-size: 11.5px; color: var(--fg-3); }

/* Quote blocks */
.doc-quote {
  margin-top: 28px; padding: 20px 22px;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 var(--r) var(--r) 0;
}
.doc-quote p { font-size: 14px; line-height: 1.65; color: var(--fg-2); max-width: 74ch; }
.doc-quote p + p { margin-top: 12px; }
.doc-quote p:first-child { color: var(--fg); font-weight: 600; }
.doc-quote-warn { border-left-color: var(--warn); }
.doc-quote-title { font-size: 15px !important; }

/* Lists */
.doc-list { display: grid; gap: 10px; margin-top: 12px; }
.doc-list li { font-size: 13.5px; line-height: 1.6; color: var(--fg-2); padding-left: 18px; position: relative; max-width: 68ch; }
.doc-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 1px; background: var(--fg-3); }
.doc-list-x li::before { content: "no"; top: 0; width: auto; height: auto; background: none; font-family: var(--font-mono); font-size: 9px; color: var(--halt); }
.doc-list-x li { padding-left: 26px; }
.doc-list-num { counter-reset: g; }
.doc-list-num li { padding-left: 26px; }
.doc-list-num li::before {
  counter-increment: g; content: counter(g);
  top: 0; width: auto; height: auto; background: none;
  font-family: var(--font-mono); font-size: 11px; color: var(--accent);
}

.doc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 30px; }

/* Stats */
.doc-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 18px 0; }
.doc-stat {
  display: grid; gap: 3px; padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
}
.doc-stat .sh-num { font-size: 18px; line-height: 1.1; letter-spacing: -0.02em; }
.doc-stat span:last-child { font-size: 11px; color: var(--fg-3); }

/* Bars */
.doc-bars { display: grid; gap: 6px; margin-top: 16px; max-width: 560px; }
.doc-bar-row { display: grid; grid-template-columns: 110px 1fr 42px; gap: 11px; align-items: center; font-size: 12px; }
.doc-bar-row > span:first-child { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
.doc-bar-track { height: 9px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.doc-bar-track span { display: block; height: 100%; background: var(--accent); }
.doc-bar-row[data-path="EXTRACTIVE"] .doc-bar-track span { background: var(--ok); }
.doc-bar-row[data-path="GENERATIVE"] .doc-bar-track span { background: var(--warn); }
.doc-bar-row[data-path="ABSTAIN"] .doc-bar-track span { background: var(--halt); }
.doc-bar-row .sh-num { font-size: 11.5px; text-align: right; color: var(--fg-2); }

/* Thresholds */
.doc-thresholds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.doc-threshold {
  display: grid; gap: 6px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2);
}
.doc-threshold .doc-tag { justify-self: start; }
.doc-threshold .sh-num { font-size: 24px; letter-spacing: -0.02em; }

.doc-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.doc-code {
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--fg-2); background: var(--bg-2);
}

/* Harness */
.doc-harnesses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.doc-harness { padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.doc-harness p { font-size: 13.5px; line-height: 1.6; color: var(--fg-2); margin-top: 8px; }

/* Timeline.
   The rail column and the marker are both --tl-rail wide, so the marker centre
   is exactly --tl-rail/2. The connecting line is placed at that same coordinate
   and translated back by half its own width, which is what keeps the two
   aligned at every breakpoint. It runs from the bottom of one marker to the top
   of the next, so there is no stub hanging off the final item. */
.doc-tl { display: grid; gap: 0; --tl-rail: 40px; }
.doc-tl-item {
  display: grid;
  grid-template-columns: var(--tl-rail) minmax(0, 1fr);
  gap: 20px;
  position: relative;
  padding-bottom: 32px;
}
.doc-tl-item:last-child { padding-bottom: 0; }
.doc-tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: calc(var(--tl-rail) / 2);
  transform: translateX(-50%);
  top: calc(var(--tl-rail) + 6px);
  height: calc(100% - var(--tl-rail) - 6px);
  width: 1px;
  background: var(--line-strong);
}
.doc-tl-marker { display: grid; place-items: start center; }
.doc-tl-phase {
  width: var(--tl-rail); height: var(--tl-rail);
  display: grid; place-items: center;
  border-radius: var(--r-tl);
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
}
.doc-tl-body p { font-size: 14px; line-height: 1.6; color: var(--fg-2); margin-top: 8px; max-width: 66ch; }
.doc-tl-date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 3px !important; }
.doc-tl-why { color: var(--fg-3) !important; font-size: 13px !important; }
.doc-tl-nums { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.doc-tl-nums .sh-num {
  font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--fg-2);
}

.doc-closing p { font-size: 15px; line-height: 1.7; color: var(--fg-2); max-width: 68ch; margin-top: 14px; }

.doc-footer {
  padding: 40px 0;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--fg-3);
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
  .sh-answered { grid-template-columns: 1fr; gap: 20px; }
  .sh-answer-side {
    padding-left: 0; border-left: 0;
    border-top: 1px solid var(--line); padding-top: 14px;
    grid-template-columns: repeat(2, 1fr); column-gap: 20px;
  }
  .sh-side-note { grid-column: 1 / -1; }
  .doc-bands, .doc-harnesses, .doc-thresholds { grid-template-columns: 1fr; }
  .doc-split { grid-template-columns: 1fr; gap: 26px; }
  .doc-stats { grid-template-columns: repeat(2, 1fr); }
  .doc-stage { grid-template-columns: 108px 1fr 56px; }
  .doc-stage-note { display: none; }
  .doc-req { grid-template-columns: 32px 1fr; }
  .doc-req-status { grid-column: 2; }
}

/* The topbar carries five things and a phone has room for about three.
   Wrapping them onto two rows put the brand alone on the first line and every
   control on the second, which is a header that opens the page with nothing in
   it. Instead the two that are said again elsewhere are dropped: the tagline,
   and the repo link, which is also in the footer of every page. What is left
   fits one line at 375px with room to spare. */
@media (max-width: 900px) {
  /* Wrapping is still allowed as a last resort, but the spacer no longer forces
     it: `flex-basis: 100%` on the spacer meant the row ALWAYS broke, whether or
     not the contents needed it to. */
  .topbar { flex-wrap: wrap; max-height: none; gap: 12px; }
  .brand small { display: none; }
}
@media (max-width: 640px) {
  .topbar { gap: 8px; min-height: 56px; padding: 10px 0; }
  .topbar .navlinks a[href^="http"] { display: none; }
  .topbar .btn { padding: 7px 10px; font-size: 12px; }
  /* The dot is the state. The words next to it are a label for a colour that
     is already unambiguous. */
  .sh-health { gap: 9px; }
  .sh-health-item { gap: 0; }
  .sh-health-label { display: none; }
}

@media (max-width: 640px) {
  /* Second readings of something already on screen. On a wide page they sit
     beside the thing they annotate; on a phone they stack under it and turn a
     dense page into a crammed one. Nothing measured is hidden by any of these:
     the caption restates the sums in the diagram above it, and the zone note
     restates the zone name. */
  .doc-caption, .flow-zone-note { display: none; }

  /* One variable moves the rail, the marker and the line together. */
  .doc-tl { --tl-rail: 32px; }
  .doc-tl-item { gap: 14px; }
  .doc-tl-phase { font-size: 12px; }
  .sh-wf-row { grid-template-columns: 88px 1fr 48px; }
  .sh-an-grid { grid-template-columns: repeat(2, 1fr); }
  .doc-stats { grid-template-columns: 1fr 1fr; }
}

/* Anything that moves collapses to static. Non negotiable. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .mic-ring, .mic-ring-2 { transform: none !important; }
}