/* pages.css — the documentation pages: /docs, /changelog, /receipts.
   ─────────────────────────────────────────────────────────────────────────
   Loaded AFTER shell.css, never instead of it. Every colour, size and space
   below is a token shell.css already declares; nothing here invents a palette,
   and the two agent colours keep their meaning — blue is Codex, orange is
   Claude, on this page as on the front one.

   It is NOT styles.css. That file is the hero's, and its first rule is
   `html, body { height: 100%; overflow: hidden }` — one screen that does not
   scroll. These pages are long documents. Loading the hero's stylesheet here
   would stop them scrolling at all, so they load shell.css + this and nothing
   else.

   Three pages share one file rather than each carrying an inline <style>,
   because they share a component set: the section grid, the code block, the
   definition rows, the crosslink strip. Copies drift.

   No webfont, no CDN, no image. The whole site is meant to make exactly zero
   third-party requests, and a documentation page arguing that the tool sends
   nothing anywhere has to be able to survive its own network panel. */

/* ── the page ─────────────────────────────────────────────────────────────
   Same wrap, same gutter, same top offset as .doc in shell.css, so /docs and
   /privacy start their first line on the same vertical rule. The measure is
   NOT capped on the container — the docs page is a two-column grid and the
   changelog is a full-width timeline — so every prose child caps itself. */
.pg {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--band)) var(--pad) var(--s-8);
}

.pg-head { max-width: 68ch; }
.pg-head .eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg-head h1 {
  max-width: 22ch;
  margin: var(--s-3) 0 0;
  font-family: var(--mono);
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.pg-head .lede {
  margin: var(--s-5) 0 0;
  font-size: var(--t-lg);
  line-height: 1.6;
  color: var(--ink-2);
}
.pg-head .lede b { color: var(--text); font-weight: 500; }

/* ── prose ────────────────────────────────────────────────────────────────
   Scoped to .prose rather than set on p/li globally, so the changelog's own
   layout does not have to fight a paragraph rule it never wanted. */
.prose { max-width: 68ch; }
.prose p { margin: var(--s-4) 0 0; color: var(--ink-2); line-height: 1.65; }
.prose p b, .prose li b, .prose dd b { color: var(--text); font-weight: 500; }
.prose ul { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.prose li { position: relative; margin: 0; padding: var(--s-2) 0 var(--s-2) var(--s-5); color: var(--ink-2); line-height: 1.6; }
.prose li::before { content: "·"; position: absolute; left: var(--s-2); color: var(--blue); }
.prose h3 {
  max-width: 40ch;
  margin: var(--s-6) 0 0;
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}

/* Inline code. Ligatures off for the same reason shell.css and pricing.html
   turn them off: SF Mono draws `--flag` as a single long dash, so a flag a
   reader copies out of a sentence is silently not the flag. Same four features
   pricing.html disables, including "dlig", which is the one that actually
   carries the double-hyphen substitution in some builds. */
code, kbd, .mono, .code pre, .defs dt {
  font-family: var(--mono);
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0;
}
.prose code, .defs code, .cl code, .rc code {
  font-size: .88em;
  color: var(--text);
  overflow-wrap: break-word;
}
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: var(--orange); }

/* ── section ──────────────────────────────────────────────────────────────
   Every h2 carries an id and the sidebar points at it. The scroll-margin is
   what keeps a jumped-to heading from landing underneath the fixed nav — the
   single most common way an anchored docs page is quietly broken. */
.sec { margin-top: var(--band); }
.sec:first-of-type { margin-top: var(--s-8); }
.sec > h2 {
  max-width: 34ch;
  margin: 0 0 var(--s-4);
  font-size: var(--t-xl);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text);
}
:target,
[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-6)); }

/* The section you jumped to says so, because a long page that scrolls you
   somewhere silently has not told you where it put you. The rule is on the
   SECTION, since the section carries the id the sidebar links to. */
.sec:target > h2 {
  color: #fff;
  border-left: 2px solid var(--blue);
  margin-left: calc(-1 * var(--s-4));
  padding-left: calc(var(--s-4) - 2px);
}

/* ── docs: sidebar + body ─────────────────────────────────────────────────
   One column on a phone with the contents at the top as a plain list, two
   columns from 64rem. No JavaScript in either arrangement: the sidebar is a
   list of anchors, which is a thing HTML already does. */
.dx { display: grid; gap: var(--s-7); align-items: start; margin-top: var(--s-8); }
@media (min-width: 64rem) {
  .dx { grid-template-columns: 210px minmax(0, 1fr); gap: var(--s-8); }
  .dx-toc { position: sticky; top: calc(var(--nav-h) + var(--s-5)); }
}

.dx-toc {
  min-width: 0;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
@media (min-width: 64rem) {
  .dx-toc { padding: 0 0 0 var(--s-4); border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; }
}
.dx-toc h2 {
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.dx-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.dx-toc li { margin: 0; counter-increment: toc; }
.dx-toc a {
  display: block;
  padding: var(--s-2) 0;
  font-size: var(--t-sm);
  line-height: 1.35;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.dx-toc a::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: .7em;
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--muted);
}
.dx-toc a:hover { color: var(--text); }
.dx-body { min-width: 0; }

/* ── code block ───────────────────────────────────────────────────────────
   Selectable with the mouse whether or not any script ran. The copy button is
   APPENDED by JavaScript and does not exist in the markup, so a reader with
   scripts off gets a code block rather than a button that does nothing. */
.code {
  position: relative;
  margin: var(--s-5) 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.code pre {
  margin: 0;
  padding: var(--s-5);
  overflow-x: auto;
  font-size: clamp(12px, 1.05vw, 13.5px);
  line-height: 1.75;
  color: var(--text);
}
.code pre b { color: var(--text); font-weight: 400; }
.code pre i { font-style: normal; color: var(--muted); }
.code pre .k { color: var(--blue); }
.code pre .w { color: var(--orange); }
.code__copy {
  position: absolute;
  top: var(--s-2);
  right: var(--s-2);
  padding: var(--s-2) var(--s-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* :focus, not :focus-visible. A button that only appears for the heuristic is a
   button a keyboard user can land on and not see — measured: programmatic and
   script-driven focus both leave focus-visible unmatched, and the control stays
   at opacity 0 with a focus ring drawn on nothing. */
.code:hover .code__copy,
.code:focus-within .code__copy,
.code__copy:focus { opacity: 1; }
.code__copy:hover { color: var(--text); }
.code__copy[data-copied] { color: var(--blue); opacity: 1; }
/* A touch screen has no hover, so the button would be permanently invisible. */
@media (hover: none) { .code__copy { opacity: 1; } }

.cap {
  margin: var(--s-3) 0 0;
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 68ch;
}

/* ── definition rows ──────────────────────────────────────────────────────
   Flags, session commands, stop reasons. A <dl>, because that is what it is.
   Stacked on a phone, two columns once there is room for the widest term. */
.defs { margin: var(--s-5) 0 0; }
.defs > div {
  display: grid;
  gap: var(--s-1) var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line);
}
.defs > div:last-child { border-bottom: 1px solid var(--line); }
.defs dt {
  min-width: 0;
  font-family: var(--mono);
  font-size: var(--t-sm);
  color: var(--text);
  overflow-wrap: break-word;
}
.defs dt small { display: block; margin-top: 2px; color: var(--muted); }
.defs dd { min-width: 0; margin: 0; color: var(--ink-2); line-height: 1.6; }
.defs dd + dd { margin-top: var(--s-2); }
@media (min-width: 48rem) {
  .defs > div { grid-template-columns: 15.5rem minmax(0, 1fr); }
}
/* The stop table's terms are longer than a flag's. */
.defs--wide dt { color: var(--blue); }
@media (min-width: 48rem) {
  .defs--wide > div { grid-template-columns: 13rem minmax(0, 1fr); }
}

/* ── callout ──────────────────────────────────────────────────────────────
   Used for the one thing on each page a reader must not skim past. */
.note {
  margin: var(--s-6) 0 0;
  padding: var(--s-5);
  /* No measure cap: a callout sits between a code block and a table, both of
     which fill the column, and a narrower box between two wide ones reads as a
     mistake. The column itself is already the measure. */
  border: 1px solid var(--line);
  border-left: 2px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
}
.note > :first-child { margin-top: 0; }
.note p { margin: var(--s-3) 0 0; color: var(--ink-2); line-height: 1.6; }
.note b { color: var(--text); font-weight: 500; }
.note--blue { border-left-color: var(--blue); }

/* ── a table that never pushes the page sideways ──────────────────────────
   The scroll lives on the wrapper, not the body. Nothing on this site may
   scroll horizontally at 375px, and a wide table is the usual culprit. */
.scroll { margin: var(--s-5) 0 0; overflow-x: auto; }
.tbl { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--t-sm); }
.tbl th, .tbl td { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl th { font-weight: 500; color: var(--text); font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; }
.tbl td { color: var(--ink-2); }
.tbl td:first-child { color: var(--text); font-family: var(--mono); white-space: nowrap; }

/* ── changelog ────────────────────────────────────────────────────────────
   A day is a heading with a rule; a theme is a block under it; the commits
   are the evidence. The subjects are quoted verbatim from git log, because
   the point of a changelog nobody can check is nothing. */
.cl { max-width: 74ch; }
.cl-day { margin-top: var(--band); }
.cl-day:first-of-type { margin-top: var(--s-8); }
.cl-day > h2 {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin: 0 0 var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--text);
}
.cl-day > h2 .n {
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.cl-day > .rule { height: 1px; background: var(--line); margin-bottom: var(--s-6); }

.cl-group { margin-top: var(--s-7); }
.cl-group h3 {
  margin: 0;
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--text);
}
.cl-group p { margin: var(--s-3) 0 0; color: var(--ink-2); line-height: 1.65; }
.cl-commits { margin: var(--s-4) 0 0; padding: 0; list-style: none; }
.cl-commits li {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.cl-commits li:first-child { border-top: 0; }
.cl-commits .sha { font-family: var(--mono); font-size: var(--t-xs); color: var(--muted); padding-top: .18em; }
@media (max-width: 30rem) {
  .cl-commits li { grid-template-columns: minmax(0, 1fr); }
  .cl-commits .sha { padding-top: 0; }
}

/* ── receipts ─────────────────────────────────────────────────────────────
   The anatomy list, and the two-column "does / does not" pair. */
.rc { max-width: 74ch; }
.pair { display: grid; gap: var(--s-5); margin: var(--s-5) 0 0; }
@media (min-width: 48rem) { .pair { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.card {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.card h3 {
  margin: 0 0 var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}
.card--yes h3 { color: var(--blue); }
.card--no h3 { color: var(--orange); }
.card ul { margin: 0; padding: 0; list-style: none; }
.card li { position: relative; padding: var(--s-2) 0 var(--s-2) var(--s-5); color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }
.card li::before { content: "·"; position: absolute; left: var(--s-2); color: var(--muted); }
.card--yes li::before { color: var(--blue); }
.card--no li::before { content: "×"; color: var(--orange); font-size: .9em; }
.card b { color: var(--text); font-weight: 500; }

/* An illustrative sample is labelled as one, in the markup and on the screen.
   The one thing on this site that must never be faked is a run receipt, so a
   mock carries a band saying so and is not styled to pass for the real file. */
.mock { margin: var(--s-5) 0 0; border: 1px dashed var(--edge); border-radius: var(--r-md); overflow: hidden; }
.mock__band {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px dashed var(--edge);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--orange);
}
.mock__body { padding: var(--s-5); }
.mock__body .rowline { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-2) var(--s-4); padding: var(--s-2) 0; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); }
.mock__body .rowline:first-child { border-top: 0; }
.mock__body .rowline span:first-child { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: .2em; }
@media (max-width: 30rem) { .mock__body .rowline { grid-template-columns: minmax(0, 1fr); } }

/* ── crosslinks ───────────────────────────────────────────────────────────
   Three pages that are not in the nav have to link to each other, or the only
   way to the other two is a URL you were told about. */
.crosslinks {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--band);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
@media (min-width: 48rem) { .crosslinks { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.crosslinks a {
  display: block;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text);
  transition: border-color var(--dur) var(--ease);
}
.crosslinks a:hover { border-color: var(--edge); color: var(--text); }
.crosslinks b { display: block; font-family: var(--mono); font-size: var(--t-sm); font-weight: 400; }
.crosslinks span { display: block; margin-top: var(--s-2); font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }

.stamp {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 68ch;
}
.stamp a { color: var(--blue); }

@media (prefers-reduced-motion: reduce) {
  .code__copy, .crosslinks a, .dx-toc a { transition: none; }
}