/* The machinery look, in Evergreen (T4.1), carried from web/looktests/machinery/ (badc05f). Three faces for three
   layers: the product, the Court's words and the API, each a token in the type block below (self-hosted, T5.5).
   The palette is built in OKLCH, Evergreen deepened (the user's review, round 25): the court's side is paper, warm
   neutrals from --hn with a deep, quiet green brand from --h0; the machinery's side is the API window's dark green
   panel. The brighter green (--live) marks only what is working right now: the working step, the waiting line, the
   caret. Four source hues at equal lightness and chroma, so every kept passage weighs the same. Red is for check
   flags only. Dark mode follows the system (T4.1). */

:root {
  --h0: 158;
  --hn: 85;
  --s1: 245; --s2: 295; --s3: 75; --s4: 350;
}

/* light */
:root {
  color-scheme: light;
  --bg: oklch(0.985 0.007 var(--hn));
  --surface: oklch(0.958 0.011 var(--hn));
  --raise: oklch(0.997 0.003 var(--hn));
  --ink: oklch(0.23 0.014 var(--hn));
  --muted: oklch(0.48 0.018 var(--hn));
  --line: oklch(0.885 0.014 var(--hn));
  --brand: oklch(0.42 0.085 var(--h0));
  --brand-hover: oklch(0.36 0.08 var(--h0));
  --on-brand: oklch(0.985 0.007 var(--hn));
  --live: oklch(0.52 0.14 var(--h0));
  --flag: oklch(0.55 0.19 27);
  --src-l: 0.55; --src-c: 0.13;
  --mix: 15%;
  --code-bg: oklch(0.20 0.02 var(--h0));
  --code-raise: oklch(0.24 0.024 var(--h0));
  --code-line: oklch(0.31 0.026 var(--h0));
  --code-ink: oklch(0.90 0.012 var(--h0));
  --code-muted: oklch(0.66 0.025 var(--h0));
  --shadow: 0 1px 2px oklch(0.25 0.02 var(--hn) / 0.06), 0 10px 30px -14px oklch(0.3 0.04 var(--hn) / 0.25);
}
/* dark: follows the system */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: oklch(0.175 0.008 var(--hn));
    --surface: oklch(0.21 0.01 var(--hn));
    --raise: oklch(0.24 0.012 var(--hn));
    --ink: oklch(0.93 0.01 var(--hn));
    --muted: oklch(0.72 0.016 var(--hn));
    --line: oklch(0.33 0.014 var(--hn));
    --brand: oklch(0.76 0.10 var(--h0));
    --brand-hover: oklch(0.82 0.09 var(--h0));
    --on-brand: oklch(0.175 0.008 var(--hn));
    --live: oklch(0.82 0.13 var(--h0));
    --flag: oklch(0.72 0.15 27);
    --src-l: 0.76; --src-c: 0.12;
    --mix: 26%;
    --code-bg: oklch(0.135 0.014 var(--h0));
    --code-raise: oklch(0.165 0.016 var(--h0));
    --code-line: oklch(0.27 0.02 var(--h0));
    --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 10px 30px -14px oklch(0 0 0 / 0.6);
  }
}
:root {
  --h1: oklch(var(--src-l) var(--src-c) var(--s1));
  --h2: oklch(var(--src-l) var(--src-c) var(--s2));
  --h3: oklch(var(--src-l) var(--src-c) var(--s3));
  --h4: oklch(var(--src-l) var(--src-c) var(--s4));
  --code-key: oklch(0.78 0.10 250);
  --code-str: oklch(0.84 0.10 80);
  --code-num: oklch(0.82 0.10 165);
  /* the reading width of the conversation, its composer and the landing page: 25% over the original 41rem */
  --chat: 51.25rem;
  --gutter: clamp(1rem, 3vw, 2.5rem);
  /* the type: every family the page uses is named here and nowhere else in the stylesheet; fonts.css loads them.
     To change one, point its token at a family fonts.css declares. */
  --ui: "IBM Plex Sans", system-ui, sans-serif;             /* the product */
  --src: "Libre Caslon Text", Georgia, serif;               /* the Court's words */
  --display: "Libre Caslon Display", var(--src);            /* the amendment behind the first view */
  --display-i: var(--src);                                  /* its italic phrase, for a display cut with no italic */
  --code: "IBM Plex Mono", ui-monospace, monospace;         /* the API */
  --hand: "Caveat", var(--src);                             /* the margin notes */
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.h1 { --hue: var(--h1); }
.h2 { --hue: var(--h2); }
.h3 { --hue: var(--h3); }
.h4 { --hue: var(--h4); }

.wordmark { font-family: var(--ui); font-weight: 600; letter-spacing: -0.035em; margin: 0; }
.wordmark .l { color: var(--brand); }

/* ---------- views ---------- */
body[data-view="landing"] #run { display: none; }
body[data-view="run"] #landing { display: none; }
/* one row: the prototype's second row sat under its switcher banner; without the banner #run fell into the auto row */
body[data-view="run"] { height: 100dvh; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr); }

/* ---------- landing ---------- */
/* two parts (the user, Oct 25, 2026): a first screen with only the question and the recorded runs, and a scroll
   below it for the figure, in a wider column, and the fine print */
.first {
  position: relative;
  min-height: 100dvh;
  display: grid;
  align-content: end;      /* the hero at the foot, the amendment from the head (margin.js) */
  justify-items: center;
  padding: 3rem 1rem 5rem;
}
.more {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}
.more::after { content: ""; width: 0.5rem; height: 0.5rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.more:hover { color: var(--ink); }
.more:empty { display: none; }
.below {
  display: grid;
  justify-items: center;
  gap: 4.5rem;
  padding: 4rem 1rem 2rem;
}
html { scroll-behavior: smooth; }
.hero { position: relative; z-index: 1; width: 100%; max-width: var(--chat); }
.first > .more { z-index: 1; }

/* ---------- the annotated amendment behind the first view (margin.js; the user, Oct 25, 2026) ---------- */
.amend { position: absolute; inset: 0; z-index: 0; display: grid; align-content: start; overflow: hidden;
  padding: 1.75rem clamp(1rem, 4vw, 4rem) 3rem; pointer-events: none; }
.amend p { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4.6vw, 4.4rem); line-height: 1.38; letter-spacing: -0.01em;
  color: color-mix(in oklch, var(--ink) 9%, var(--bg)); text-wrap: pretty; }
.amend .wd { display: inline-block; white-space: pre; transition: opacity 0.5s ease, transform 0.7s ease, color 0.6s ease; }
.amend .kw.on .wd { color: color-mix(in oklch, var(--ink) 34%, var(--bg)); }
/* the underline a leader ends on: 2px at 88% down each word's box (margin.js measures it there) */
.amend .kw .wd { background: linear-gradient(var(--brand), var(--brand)) no-repeat 0 88% / 0 2px;
  transition: background-size 0.6s ease, color 0.6s ease, opacity 0.5s ease, transform 0.7s ease; }
.amend .kw.on .wd { background-size: 100% 2px; }
.amend .pc { font-family: var(--display-i); font-style: italic; }
.amend .pc.lit .wd { color: var(--ink); }
/* a halo of the page's colour behind the hero, so its text reads over the print */
.hero::before { content: ""; position: absolute; inset: -2.5rem -3rem; z-index: -1; pointer-events: none; transition: opacity 0.45s ease;
  background: radial-gradient(closest-side, var(--bg) 72%, color-mix(in oklch, var(--bg) 0%, transparent)); }
.leads { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leads path { fill: none; stroke: var(--brand); stroke-width: 1.25; transition: stroke-dashoffset 0.6s ease, opacity 0.4s ease; }
.note { position: absolute; z-index: 1; width: max-content; max-width: 15rem; pointer-events: none; color: var(--brand);
  font-family: var(--hand); font-weight: 600; font-size: clamp(1.35rem, 1.9vw, 1.75rem); line-height: 1.05; }
.note .ln { display: block; width: max-content; padding-right: 0.2em; clip-path: inset(0 100% 0 0); transition: clip-path 0.45s linear; }
.note .ln.go { clip-path: inset(0 0 0 0); }
.note .src { display: block; margin-top: 0.3rem; font-family: var(--ui); font-weight: 400; font-size: 0.75rem; line-height: 1.3;
  color: var(--muted); opacity: 0; transition: opacity 0.4s ease; }
.note .src + .src { margin-top: 0; }
.note.cited .src { opacity: 1; }
/* the exit's "l": opens its room in "cause" and drops in; nothing clips it, so the italic's overhang shows whole */
.amend .ins { display: inline-block; color: var(--brand); opacity: 0; transform: translateY(-0.35em);
  transition: width 0.45s ease, opacity 0.35s ease 0.15s, transform 0.45s ease 0.15s; }
.amend .ins.go { opacity: 1; transform: none; }
.motion { position: absolute; right: 1rem; bottom: 1rem; z-index: 1; border: 0; background: none; padding: 0.25rem 0.4rem;
  font: inherit; font-size: 0.8125rem; color: var(--muted); cursor: pointer; }
.motion:hover { color: var(--ink); }
/* a run starts: everything steps back, the wordmark too (the user, Oct 25, 2026), so only the amendment's "probable
   clause" is left; the wordmark then leaves the view transition, and the bar's appears with the page */
.hero > *, .first > .more, .motion { transition: opacity 0.45s ease; }
.first.leaving .hero > *, .first.leaving > .more, .first.leaving .motion, .first.leaving .hero::before { opacity: 0; }
.first.leaving .wordmark { view-transition-name: none; }
.hero .wordmark { font-size: clamp(2.75rem, 8vw, 5.25rem); line-height: 1; view-transition-name: wordmark; }
.pitch { margin: 1.25rem 0 2rem; font-size: 1.0625rem; color: var(--muted); }
.pitch p { margin: 0; }
.pitch .lead { margin-bottom: 0.6rem; font-size: 1.25rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink); }
.pitch em { font-style: normal; font-weight: 600; color: var(--brand); }
.field {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--raise);
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}
#ask, #composer { view-transition-name: composer; }
.field:focus-within { border-color: var(--brand); }
.field textarea {
  flex: 1;
  min-width: 0;
  width: 0;                 /* no width of its own (a textarea's default is about 20 columns): the field sizes it */
  border: 0;
  outline: 0;
  resize: none;
  font: inherit;
  font-size: 1.1875rem;
  line-height: 1.45;
  padding: 0.35rem 0;
  background: transparent;
  color: var(--ink);
}
.field textarea::placeholder { color: var(--muted); opacity: 0.8; }
.primary {
  border: 0;
  border-radius: 12px;
  padding: 0.7rem 1.2rem;
  white-space: nowrap;      /* "Search opinions" stays one line beside the composer on a phone */
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
}
.primary:hover { background: var(--brand-hover); }
.ghost {
  border: 1px solid var(--line);
  background: var(--raise);
  border-radius: 10px;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
}
.ghost:hover { border-color: var(--muted); }

.recorded { margin-top: 1.75rem; }
.recorded p { margin: 0 0 0.6rem; font-size: 0.9375rem; color: var(--muted); }
/* the recorded runs: side by side where they fit, one to a line on a phone; full questions, so cards, not pills */
.recorded ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.5rem; }
.recorded .chip { display: flex; width: 100%; height: 100%; border-radius: 14px; padding: 0.6rem 0.95rem 0.6rem 0.8rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.45rem 0.95rem 0.45rem 0.75rem;
  background: var(--raise);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.chip::before {
  content: "";
  flex: none;
  border-left: 7px solid var(--brand);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.chip:hover { border-color: var(--brand); }

/* the trace figure: one citation followed in three numbered steps, each its words beside its card (stacked on a
   narrow screen) */
.trace { margin: 0; width: 100%; max-width: 60rem; }
.how { margin: 0 0 0.6rem; text-align: center; font-size: clamp(1.375rem, 3vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; }
.fig-lead { max-width: var(--chat); margin: 0 auto 2.5rem; text-align: center; font-size: 1rem; color: var(--muted); }
.fig-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.fig-step { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.5rem 2rem; align-items: start; }
.fig-say h3 { margin: 0.6rem 0 0.3rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.fig-say p { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.fig-n {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--brand) 18%, transparent);
  color: var(--brand);
  font-size: 0.875rem;
  font-weight: 700;
}
.t-card {
  min-width: 0;
  border-radius: 14px;
  padding: 0.9rem 1rem;
  font-size: 0.9375rem;
  border: 1px solid var(--line);
  background: var(--raise);
}
.t-card p { margin: 0; }
.t-cited { text-decoration: underline 2px var(--h1); text-underline-offset: 4px; }
.t-source { border-left: 4px solid var(--hue); }
.t-case, .t-text { font-family: var(--src); }
.t-text .dim { opacity: 0.4; }
.t-text .pin { font-family: var(--ui); font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.t-text .hit { background: color-mix(in oklab, var(--h1) var(--mix), transparent); border-radius: 3px; }
.t-wire { background: var(--code-bg); border-color: var(--code-bg); color: var(--code-ink); }
/* the figure's closing note: the two warnings, laid on the steps' grid without a number */
.fig-limits { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0.75rem 2rem; align-items: start;
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.fig-limits h3 { margin: 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.limits-text p { margin: 0 0 0.6rem; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.limits-text p:last-child { margin-bottom: 0; }
.t-wire pre { margin: 0; font-family: var(--code); font-size: 0.75rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.t-wire .cm { color: var(--code-muted); }
.fig-full { margin-top: 0.75rem; border-top: 1px solid var(--code-line); padding-top: 0.6rem; }
.fig-full summary { cursor: pointer; font-size: 0.8125rem; color: var(--code-muted); }
.fig-full summary:hover { color: var(--code-ink); }
.fig-full pre { margin-top: 0.6rem; }
.k { color: var(--code-key); }
.s { color: var(--code-str); }
.n { color: var(--code-num); }

.fine { font-size: 0.8125rem; color: var(--muted); width: 100%; max-width: var(--chat); text-align: center; }
/* the landing footer at the figure's width: the coverage line, then the affiliation left and the links right */
#landing-fine { max-width: 60rem; padding-top: 1.25rem; border-top: 1px solid var(--line); text-align: left;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.35rem 2rem; }
#landing-fine p { margin: 0; }
#landing-fine .cover { flex-basis: 100%; }
#landing-fine .links { justify-content: flex-start; margin: 0 !important; }
.fine p { margin: 0 0 0.4rem; }

.pill {
  display: inline-block;
  padding: 0 0.45em;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 0.12em;
  color: var(--hue, var(--muted));
  background: color-mix(in oklab, var(--hue, var(--muted)) var(--mix), transparent);
  white-space: nowrap;
}

/* ---------- run view ---------- */
#run { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; }
/* explicit rows: on desktop the tab bar is hidden, and without these the panes would fall into its auto row */
.bar { grid-row: 1; }
.tabs { grid-row: 2; }
.cols { grid-row: 3; }
.bar { padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bar-links { display: flex; gap: 1.25rem; font-size: 0.8125rem; }
.bar-links a { color: var(--muted); text-decoration: none; }
.bar-links a:hover { color: var(--ink); text-decoration: underline; }
.wordmark.small { font-size: 1.25rem; border: 0; background: none; padding: 0; view-transition-name: wordmark; }
.tabs { display: none; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 27rem; min-height: 0; }
.col { min-height: 0; }
.scroller { overflow-y: auto; overscroll-behavior: contain; }
#pane-thread { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
#pane-sources { background: var(--surface); border-left: 1px solid var(--line); padding: 0 1rem 2rem; }
.col-head { position: sticky; top: 0; z-index: 2; padding: 1.1rem 0 0.75rem; background: var(--surface); }
.col-head h2 { margin: 0; font-size: 1rem; }
.col-head p { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--muted); }

/* the conversation grows from the bottom, like a chat */
.thread {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
  max-width: calc(var(--chat) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 2rem var(--gutter) 1rem;
}
.ask-msg { align-self: flex-end; max-width: 85%; text-align: right; }
.bubble {
  display: inline-block;
  text-align: left;
  padding: 0.65rem 1rem;
  border-radius: 18px 18px 4px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 1.0625rem;
}
.ask-msg .caption { margin: 0.3rem 0.25rem 0 0; font-size: 0.8125rem; color: var(--muted); }

.dock { padding: 0.5rem var(--gutter) 0.75rem; }
.dock > * { max-width: var(--chat); margin-left: auto; margin-right: auto; }
.composer { padding: 0.5rem 0.5rem 0.5rem 1rem; border-radius: 16px; align-items: center; }
.composer textarea { font-size: 1rem; }
.composer .primary { padding: 0.55rem 1rem; }
body:not(.replaying) #skip, body.replaying #send { display: none; }
.status { min-height: 1.3rem; margin-top: 0 !important; margin-bottom: 0.4rem !important; font-size: 0.8125rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
/* no pulsing dot here: the working step in the log already pulses (the user, Oct 25, 2026) */
@keyframes pulse { 50% { opacity: 0.25; } }

/* steps: a numbered sequence on a rail */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps:empty { display: none; }
.step { position: relative; padding: 0 0 1.1rem 2.5rem; counter-increment: step; }
.step::before {
  content: counter(step);
  position: absolute; left: 0; top: 0.05rem;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 600;
  background: var(--surface);
  color: var(--muted);
}
/* the waking step and the run's last step sit in lists of their own, outside research's count: a mark, no number */
.steps.pre .step::before, .steps.post .step::before { content: ""; }
.step::after { content: ""; position: absolute; left: calc(0.8rem - 1px); top: 1.85rem; bottom: 0.2rem; width: 2px; background: var(--line); }
.step:last-child { padding-bottom: 0; }
.step:last-child::after { display: none; }
.step.working::before { background: var(--live); color: var(--on-brand); animation: pulse 1.2s ease-in-out infinite; }
.step.done::before { background: var(--ink); color: var(--bg); }
.step.rejected::before { background: var(--flag); color: var(--bg); }
.step h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.6rem; }
.step p { margin: 0.2rem 0 0; }
.step .say { color: var(--muted); font-style: italic; }
.step .query { font-family: var(--src); font-size: 1.0625rem; }
.step .meta { font-size: 0.875rem; color: var(--muted); }
.step .meta:empty { display: none; }
.refused {
  margin-top: 0.5rem !important;
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  background: color-mix(in oklab, var(--flag) 10%, transparent);
  color: var(--flag);
  font-size: 0.9375rem;
}
.chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem !important; }
.chips .pill { cursor: pointer; border: 0; }
.pill.out { --hue: var(--muted); text-decoration: line-through; }

/* only content that just arrived animates; switching panes must not replay it */
.fresh { animation: enter 0.35s ease-out both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }

/* update check */
.update { position: relative; padding: 1.1rem 1.25rem; border-radius: 14px; border: 1px dashed var(--muted); transition: border-color 0.45s ease; }
/* its arrival (band.js inkIn): the edge is inked around, then the lines come up one by one; the drawn edge then
   hands over to the box's own border */
.update.inking { border-color: transparent; }
.update.inking.inked { border-color: var(--muted); }
.update.inking > :not(.ink) { animation: enter 0.45s ease-out both; animation-delay: calc(0.3s + var(--i, 0) * 0.07s); }
.update .ink { position: absolute; left: -1px; top: -1px; overflow: visible; pointer-events: none; transition: opacity 0.45s ease; }
.update.inked .ink { opacity: 0; }
.update .ink .edge { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; }
.update .ink .pen { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 0.9s ease-in-out forwards; }
.band-waiting { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; color: var(--muted); }
.band-waiting::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--live); animation: pulse 1.2s ease-in-out infinite; }
.update h2 { margin: 0 0 0.3rem; font-size: 1rem; }
.update .label { margin: 0 0 0.8rem; font-size: 0.875rem; color: var(--muted); }
.update .summary { margin: 0 0 0.8rem; }
.whose { display: block; font-size: 0.8125rem; color: var(--muted); margin-bottom: 0.15rem; }
.update ul { margin: 0 0 0.8rem; padding: 0; list-style: none; }
.update li { padding: 0.35rem 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.update li > span { display: block; font-size: 0.8125rem; color: var(--muted); }
.params { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.15rem 1rem; margin: 0; font-size: 0.8125rem; }
.params dt { color: var(--muted); }
.params dd { margin: 0; overflow-wrap: anywhere; }

/* answer */
.answer h2 { font-size: 1.375rem; letter-spacing: -0.015em; margin: 0 0 0.25rem; }
.answer .by { margin: 0 0 1rem; font-size: 0.875rem; color: var(--muted); }
.prose { font-size: 1.0625rem; line-height: 1.7; }
.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.cited { cursor: pointer; text-decoration: underline 2px color-mix(in oklab, var(--hue) 55%, transparent); text-underline-offset: 5px; border-radius: 4px; transition: background 0.15s; }
.cited.lit, .cited:hover { background: color-mix(in oklab, var(--hue) var(--mix), transparent); text-decoration-color: var(--hue); }
.cited .pill { margin-left: 0.3rem; }
.answer .key { margin: -0.6rem 0 1rem; font-size: 0.875rem; color: var(--muted); }
.key-cited { color: var(--ink); text-decoration: underline 2px var(--h2); text-underline-offset: 4px; }
.flagged { text-decoration: underline wavy var(--flag) 1.5px; text-underline-offset: 4px; }
.flag-note {
  margin: -0.4rem 0 1rem;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--flag);
  border-radius: 0 8px 8px 0;
  background: color-mix(in oklab, var(--flag) 8%, transparent);
  font-size: 0.9375rem;
}
.caret::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--live); vertical-align: -0.15em; margin-left: 2px; animation: pulse 0.9s step-end infinite; }

/* passages. The border is one colour all the way round, so no corner has a seam; the kept stripe is an
   inset shadow, which follows the inner curve and thins to nothing at the corners. */
.passages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.card {
  background: var(--raise);
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 0.9rem 1rem 0.9rem 1.2rem;
  transition: opacity 0.3s, box-shadow 0.2s, border-color 0.3s;
}
.card.kept { border-color: color-mix(in oklab, var(--hue) 40%, var(--line)); box-shadow: inset 4px 0 0 var(--hue); }
.card.found { box-shadow: inset 4px 0 0 color-mix(in oklab, var(--brand) 30%, transparent); }
/* lit: a single border, 2px with a 5px left side, and no shadows. A border plus a ring or an inset stripe
   leaves antialiased hairlines where the shapes meet; one border in one colour is one smooth shape.
   The padding gives back the extra width so the text does not move. */
.card.lit { border: 2px solid var(--hue, var(--muted)); border-left-width: 5px; padding: calc(0.9rem - 1px) calc(1rem - 1px) calc(0.9rem - 1px) calc(1.2rem - 4px); box-shadow: none; }
.card p { margin: 0; }
.verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-size: 0.875rem; }
.verdict .pid { font-weight: 700; }
.verdict .mark { font-weight: 600; }
.card.kept .mark { color: var(--hue); }
.card.notkept .mark { color: var(--muted); }
.verdict .reason { flex-basis: 100%; color: var(--muted); }
.card .case { margin-top: 0.55rem !important; font-family: var(--src); font-size: 1.0625rem; line-height: 1.35; }
.card .meta { font-size: 0.8125rem; color: var(--muted); margin-top: 0.15rem !important; }
/* the passage's real ID, in the small print (P4.35): its tag leads the card */
.card .meta .id { font-family: var(--code); font-size: 0.75rem; white-space: nowrap; }
.card .text { margin-top: 0.6rem !important; font-family: var(--src); font-size: 1rem; line-height: 1.55; }
.card .pin { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }
.card .small { font-size: 0.8125rem; color: var(--muted); margin-top: 0.45rem !important; }
.card .guarantee::before { content: "✓ "; color: var(--h2); font-weight: 700; }
.card.notkept { opacity: 0.66; }
.card.notkept .body { display: none; }
.card.notkept.open .body { display: block; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.7rem; }
.card-actions button { font-size: 0.8125rem; }
.toggle { border: 0; background: none; padding: 0.35rem 0; color: var(--brand); }
.card:not(.notkept) .toggle { display: none; }
.api-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; }
.api-btn::before { content: "{ }"; font-family: var(--code); font-size: 0.6875rem; font-weight: 500; color: var(--brand); }
.read-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; }
.read-btn::before { content: "¶"; font-family: var(--src); font-size: 0.9375rem; line-height: 1; color: var(--brand); }

/* text blocks: a citation lights its block range and dims the rest of the paragraph, so it reads in context */
.sb { border-radius: 3px; transition: opacity 0.2s, background 0.2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.card.focus .sb, .card.focus .pin { opacity: 0.38; }
.card.focus .sb.hit { opacity: 1; background: color-mix(in oklab, var(--hue) var(--mix), transparent); }

/* ---------- the API modal ---------- */
/* ids outrank the browser's own dialog:modal size limits */
#api, #reader {
  width: min(68rem, calc(100vw - 2rem));
  max-width: none;
  max-height: min(36rem, calc(100dvh - 4rem));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg);
  color: var(--ink);
  box-shadow: 0 30px 80px -20px oklch(0 0 0 / 0.45);
  overflow: hidden;
}
dialog::backdrop { background: oklch(0.15 0.015 var(--hn) / 0.55); backdrop-filter: blur(2px); }
dialog[open] { animation: rise 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
.dlg { display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(36rem, calc(100dvh - 4rem)); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 1rem 0.7rem 1.25rem; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; font-size: 1rem; }
.dlg-head p { margin: 0.1rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.dlg-head .ghost { padding: 0.3rem 0.7rem; }
.dlg-body { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); min-height: 0; }
.dlg-body h3 { margin: 0 0 0.5rem; font-size: 0.8125rem; color: var(--muted); font-weight: 600; }
.dlg-source { padding: 0.9rem 1rem; background: var(--surface); overflow-y: auto; }
.dlg-source .card { padding: 0.75rem 0.85rem 0.75rem 1.05rem; }
.dlg-source .card .text { font-size: 0.9375rem; }
.dlg-source .card-actions { display: none; }
.dlg-source .card.notkept { opacity: 1; }
.dlg-source .card.notkept .body { display: block; }
.dlg-wire { padding: 0.9rem 1rem 1rem; background: var(--code-bg); color: var(--code-ink); overflow-y: auto; }
.dlg-wire h3 { color: var(--code-muted); }
/* each exchange is one line until opened; the citation itself opens by default */
.xchg { list-style: none; margin: 0; padding: 0; counter-reset: x; display: grid; gap: 0.4rem; }
.xchg li { counter-increment: x; border: 1px solid var(--code-line); border-radius: 10px; background: var(--code-raise); }
.x-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 0.1rem 0.6rem; padding: 0.45rem 0.75rem; font-size: 0.8125rem; cursor: pointer; list-style: none; }
.x-head::-webkit-details-marker { display: none; }
.x-head::before { content: ""; align-self: center; border-left: 5px solid var(--code-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
details[open] > .x-head::before { transform: rotate(90deg); }
details[open] > .x-head { border-bottom: 1px solid var(--code-line); }
.x-head b { font-weight: 600; color: var(--code-ink); min-width: 0; }
.x-head b::before { content: counter(x) ". "; color: var(--code-muted); font-weight: 400; }
.x-head span { color: var(--code-muted); font-size: 0.75rem; white-space: nowrap; }
.x-preview { grid-column: 2 / -1; font-family: var(--code); font-size: 0.6875rem; color: var(--code-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details[open] .x-preview { display: none; }
.x-body { padding: 0.5rem 0.75rem; }
.x-body .path { margin: 0 0 0.2rem; font-family: var(--code); font-size: 0.6875rem; color: var(--code-muted); }
.x-body pre + .path { margin-top: 0.5rem; }
.x-body pre { margin: 0; font-family: var(--code); font-size: 0.71875rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.x-body pre.cite { box-shadow: inset 3px 0 0 var(--hue); padding-left: 0.6rem; }
.x-note { margin: 0; padding: 0 0.75rem 0.5rem; font-size: 0.8125rem; color: var(--code-muted); }
.xchg > li > .x-note:only-child { padding-top: 0.5rem; }

/* ---------- the source reader ---------- */
#reader { width: min(50rem, calc(100vw - 2rem)); height: min(52rem, calc(100dvh - 4rem)); max-height: min(52rem, calc(100dvh - 4rem)); }
.reader { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.reader-head h2 { font-family: var(--src); font-weight: 500; font-size: 1.125rem; }
.reader-actions { display: flex; gap: 0.5rem; flex: none; }
.nw { white-space: nowrap; }
.reader-body { position: relative; overflow-y: auto; padding: 2rem 5.25rem 2.5rem; } /* side room for the margin page numbers */
.reader-text { max-width: 38rem; margin: 0 auto; font-family: var(--src); font-size: 1.125rem; line-height: 1.7; }
.reader-text h3 { margin: 0 0 0.35rem; text-align: center; font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; }
.reader-text .byline { margin: 0 0 1.75rem; text-align: center; font-style: italic; color: var(--muted); font-size: 1rem; }
.reader-text p { margin: 0 0 1.1em; }
/* page numbers sit in the left margin, as in the printed reports */
.pg { float: left; width: 3rem; margin-left: -4.85rem; text-align: right; font-family: var(--ui); font-size: 0.75rem; line-height: 1.9rem; color: var(--muted); }
.pg-word { display: none; }
/* the passage Claude retrieved, in place; cited sentences lit, the rest of it dimmed */
.excerpt {
  position: relative;
  margin: 1.4rem -1.1rem;
  padding: 0.85rem 1.1rem 0.85rem 1.35rem;
  border: 1px solid color-mix(in oklab, var(--hue, var(--muted)) 40%, var(--line));
  border-radius: 12px;
  box-shadow: inset 4px 0 0 var(--hue, var(--muted));
  background: color-mix(in oklab, var(--hue, var(--muted)) 5%, var(--raise));
}
/* the excerpt's page number hangs outside its box, in the same margin column as the others */
.excerpt > .pg { position: absolute; float: none; top: 0.85rem; left: calc(-3.75rem - 1px); margin: 0; line-height: 1.3; }
.excerpt .ex-label { margin: 0 0 0.35rem; font-family: var(--ui); font-size: 0.8125rem; color: var(--muted); }
.excerpt .ex-text { margin: 0; }
.excerpt.focus .sb { opacity: 0.45; }
.excerpt.focus .sb.hit { opacity: 1; background: color-mix(in oklab, var(--hue) var(--mix), transparent); }
.reader-foot { max-width: 38rem; margin: 2rem auto 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted); }
.reader-foot p { margin: 0 0 0.35rem; }

/* threads */
.threads { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 20; overflow: visible; }
.threads path { fill: none; stroke-width: 2; stroke-linecap: round; }
.threads circle { stroke: var(--bg); stroke-width: 2; }
.threads .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 0.45s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* view transition: the question box glides down to become the composer */
::view-transition-group(composer), ::view-transition-group(wordmark) { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }

/* ---------- the real build's pieces (T4.3, T4.4), in the prototype's style ---------- */
.block { display: block; }
.mono { font-family: var(--code); font-size: 0.875rem; }
button:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.6; }
.ask-note { min-height: 1.4rem; margin: 0.6rem 0.25rem 0; font-size: 0.9375rem; color: var(--muted); }
.ask-note:empty { min-height: 0; margin: 0; }
.chiplist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.step .chiplist { margin-top: 0.6rem; }
.fine .block { margin-top: 0.4rem; }
/* the fine print's row of links (main.js); the later-developments box's page lists share the name, not the look */
p.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 1.25rem; margin: 0.2rem 0 0.4rem !important; }
/* centred under the composer, in its column: auto side margins, as .dock > * sets them */
.scratch { margin: 0.4rem auto 0; font-size: 0.8125rem; color: var(--muted); text-align: center; }
body.playing .scratch { display: none; }

.steps-box { display: grid; gap: 1.1rem; }
.step.stopped::before { background: var(--line); color: var(--muted); }
.step .retry { margin-top: 0.3rem; font-size: 0.875rem; color: var(--muted); }
.step .retry.failed { color: var(--ink); }
.step .actions { margin-top: 0.5rem; }
.step .said { margin: 0.3rem 0 0; padding-left: 1.1rem; color: var(--muted); font-style: italic; }
.step .said .src { font-style: normal; font-size: 0.75rem; }
/* long unbroken text (a pasted URL, an ID run) wraps instead of widening the page */
.bubble, .step .query, .step .say, .prose, .verdict .reason, .refused, .notice, .update, .card .text { overflow-wrap: anywhere; }

/* the copy guard's withheld text (contract §4.G.2): shown as it is, muted, never as an error */
.withheld { color: var(--muted); font-style: italic; }
.refused .withheld { color: inherit; opacity: 0.75; }
.chips .pill, .cited .pill { border: 0; font-family: var(--ui); }
.cited .pill { cursor: pointer; }

/* notices above the answer: the scope note, the Voyage warning, the replay banner (T4.4 #7, #11); never red */
.notice { margin: 0 0 1rem; padding: 0.65rem 0.9rem; border-left: 3px solid var(--brand); border-radius: 0 10px 10px 0; background: var(--surface); font-size: 0.9375rem; }
/* the replay notice stays at the top from the start; everything after it stacks from the bottom (the user, Oct 25, 2026) */
.notice.replay { margin: 0 0 auto; }
.notice .whose { margin-bottom: 0.2rem; }
.stop-label { margin: 0 0 1rem; padding: 0.55rem 0.85rem; border: 1px solid var(--line); border-radius: 10px; font-size: 0.9375rem; font-weight: 600; }
.stop-label.end { margin: 1rem 0 0; }
.pointer { margin: 1rem 0 0; font-size: 0.875rem; color: var(--muted); }
.answer .standard { margin: 0 0 0.8rem; color: var(--muted); }
.prose h3, .prose h4, .prose h5, .prose h6 { margin: 1.4rem 0 0.5rem; font-size: 1.0625rem; letter-spacing: -0.005em; }
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin: 0.25rem 0; }
.prose blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--line); color: var(--muted); }
.prose pre { overflow-x: auto; font-size: 0.875rem; }
.prose code { font-family: var(--code); font-size: 0.875em; }
.cited.straddle { white-space: normal; }
.caret-host::after { content: ""; display: inline-block; width: 2px; height: 1.05em; background: var(--live); vertical-align: -0.15em; margin-left: 2px; animation: pulse 0.9s step-end infinite; }
.run-fine { font-size: 0.8125rem; color: var(--muted); }
.run-fine p { margin: 0 0 0.4rem; }
.costs { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--muted); }
.costs summary { cursor: pointer; }
.costs .params { margin: 0.5rem 0; }
.costs p { margin: 0.35rem 0 0; }
.end-slot:empty, .band-slot:empty, .answer-slot:empty { display: none; }

/* the band (T4.3 #4) */
.update h3 { margin: 1rem 0 0.4rem; font-size: 0.875rem; color: var(--muted); }
.update .outcome { margin: 0 0 0.8rem; font-weight: 600; }
.update .findings { margin: 0 0 0.8rem; padding: 0; list-style: none; }
.update .findings > li { padding: 0.5rem 0; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.update .findings > li > p { margin: 0 0 0.35rem; }
.update .links { margin: 0; padding: 0; list-style: none; }
.update .links li { padding: 0.25rem 0; border: 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.update .links li span { display: block; font-size: 0.8125rem; color: var(--muted); }
.update .search { padding: 0.5rem 0; border-top: 1px solid var(--line); }
.update .search .meta { margin: 0.35rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.update .fixed { margin: 0.6rem 0 0; font-size: 0.8125rem; color: var(--muted); }
.update .all-pages { margin-top: 0.8rem; font-size: 0.875rem; }
.update .all-pages summary { cursor: pointer; color: var(--brand); }
.update .all-pages .links { margin-top: 0.4rem; }

/* footnotes folded inside a card (T4.3 #1) */
.card .fns { margin-top: 0.5rem; font-size: 0.875rem; }
.card .fns summary { cursor: pointer; color: var(--brand); }
.card .fn { margin-top: 0.35rem !important; font-family: var(--src); font-size: 0.9375rem; line-height: 1.5; }
.card .fn .pid { font-family: var(--ui); font-size: 0.75rem; color: var(--muted); }
.fn-label { font-weight: 600; }

/* the reader: margin page numbers placed by layout() level with their line; inline above it on a phone */
.reader-text { position: relative; }
.reader-text .section { margin: 1.6rem 0 0.8rem; font-family: var(--ui); font-size: 0.9375rem; text-align: center; letter-spacing: 0.02em; }
.reader-text .pg { position: absolute; float: none; left: -4.85rem; margin: 0; width: 3rem; line-height: 1.7; }
.pgb { display: inline; }
.pgb .pg-word { display: none; }
.fnref { line-height: 0; }
.fnref button { border: 0; background: none; padding: 0 0.1rem; font-family: var(--ui); font-size: 0.75em; color: var(--brand); }
.fnote p { font-size: 1rem; }
.reader-wait { color: var(--muted); text-align: center; }
.ex-text.pre-line { white-space: pre-line; }

/* the figure's steps: words above their card until there is room beside it (a sideways phone included) */
@media (max-width: 759px) {
  .fig-step { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
  .fig-limits { grid-template-columns: minmax(0, 1fr); }
  .fig-say { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: center; }
  .fig-say h3 { margin: 0; }
  .fig-say p { grid-column: 2; }
}

/* ---------- phone: one pane at a time ---------- */
@media (max-width: 759px) {
  /* room above the hero for the amendment's first lines, so a note can write itself beside one of their words */
  .first { padding: 11rem 1rem 4.5rem; }
  /* the pause control goes to the top corner, clear of "How Claude's citations work"; notes keep out of its box */
  .motion { top: 0.5rem; bottom: auto; right: 0.5rem; }
  /* the hero fills a phone's first view: the print stays fainter and the halo would only push the page sideways */
  .amend p { color: color-mix(in oklch, var(--ink) 5%, var(--bg)); }
  .hero::before { inset: 0; background: none; }
  .below { gap: 3rem; padding-top: 3rem; }
  .pitch { font-size: 1rem; }
  .pitch .lead { font-size: 1.125rem; }
  .field { padding-left: 1rem; flex-wrap: wrap; }
  .field textarea { flex-basis: 100%; font-size: 1.0625rem; }
  .field .primary { margin-left: auto; }
  .composer { flex-wrap: nowrap; }
  .composer textarea { flex-basis: auto; font-size: 1rem; }

  .bar { padding: 0.55rem 1rem; }
  .wordmark.small { font-size: 1.0625rem; }
  .tabs { display: flex; gap: 0.25rem; padding: 0.4rem 1rem; border-bottom: 1px solid var(--line); }
  .tabs button { flex: 1; border: 0; background: none; border-radius: 8px; padding: 0.4rem 0.5rem; font-size: 0.875rem; color: var(--muted); }
  body[data-pane="thread"] .tabs [data-pane="thread"],
  body[data-pane="sources"] .tabs [data-pane="sources"] { background: var(--surface); color: var(--ink); font-weight: 600; }

  .cols { grid-template-columns: minmax(0, 1fr); }
  .col { display: none !important; }
  body[data-pane="thread"] #pane-thread { display: grid !important; }
  body[data-pane="sources"] #pane-sources { display: block !important; }
  #pane-sources { border-left: 0; }
  .threads { display: none; }
  .ask-msg { max-width: 92%; }

  #api, #reader { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border-radius: 0; border: 0; }
  .dlg { height: 100dvh; max-height: 100dvh; }
  .dlg-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .dlg-source, .dlg-wire { overflow: visible; }
  .reader { height: 100dvh; }
  .reader-head { flex-wrap: wrap; }
  .reader-body { padding: 1.25rem 1rem 2rem; }
  .reader-text { font-size: 1.0625rem; }
  .pg { float: none; display: block; width: auto; margin: 0 0 0.15rem; text-align: left; line-height: 1.4; }
  .pg-word { display: inline; }
  .reader-text .pg { display: none; }
  /* no room beside the wordmark on a phone: the links are under the landing page */
  .bar-links { display: none; }
  .scratch { font-size: 0.75rem; }
  .pgb .pg-word { display: block; margin: 0.4rem 0 0.15rem; font-family: var(--ui); font-size: 0.75rem; color: var(--muted); }
  .excerpt { margin: 1.25rem 0; }
  .excerpt > .pg { position: static; margin: 0 0 0.15rem; }
}

/* sideways phone: short viewport */
@media (max-height: 500px) and (min-width: 760px) {
  .bar { padding: 0.35rem 1rem; }
  .scratch { display: none; }
  .dock { padding-top: 0.25rem; }
  .status { margin-bottom: 0.2rem !important; }
  .composer { padding: 0.3rem 0.3rem 0.3rem 0.8rem; }
  .composer .primary, .composer .ghost { padding: 0.4rem 0.8rem; }
  .dock { padding-bottom: 0.4rem; }
  .cols { grid-template-columns: minmax(0, 1fr) 22rem; }
  .dlg-body { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .dlg-source, .dlg-wire { overflow: visible; }
}

/* ---------- the site's own pages: sources and credits, privacy ---------- */
.doc { max-width: 42rem; margin: 0 auto; padding: 1.5rem var(--gutter) 4rem; }
a.wordmark { display: inline-block; color: var(--ink); text-decoration: none; }
.doc h1 { margin: 3rem 0 1.5rem; font-size: clamp(1.75rem, 5vw, 2.25rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.doc p { margin: 0 0 1.1rem; line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}