/* Vervly

   An instrument on a deep blue-black ground. Two panes, before and after,
   with a divider you can drag; California Gold for the primary action,
   active states and the horizon; Berkeley Blue, pale and at low alpha, for
   the second hairline tone; three restrained tones for the verdict; every
   numeral in mono. Behind it an ASCII field (field.js) the panes sit in
   front of.

   Colour: the two UC Berkeley colours (brand.berkeley.edu) used sparingly
   on the same near-black ground as before. California Gold #FDB515 is the
   one accent (Gold Dark #FC9313 pressed, Gold Medium #FFC31B hover).
   Berkeley Blue appears as --blue for ink on light grounds and, as Blue
   Light #9FD1FF at low alpha, for hairlines and quiet hovers. Never a
   page surface.

   Type: the campus's own web pair, both on Google Fonts
     Inter             text, controls
     Source Serif 4    the headline, the draft, the rewrite, pane titles
     Barlow Condensed  eyebrows and small labels, secondary only
     Fira Mono         numerals, the shortcut, the field, construction labels

   Rules for editing any of this: web/DESIGN.md */

:root {
  color-scheme: dark;

  /* ground and surfaces: near-black with Berkeley Blue in it, one step
     lighter as they come forward. Dark enough to read as black at a glance,
     blue enough that the gold sits on a Berkeley ground. */
  --g0: #06081a;
  --g1: #0a0e20;
  --g2: #10172f;
  --g3: #171f3e;
  --g4: #1f2a4f;

  /* hairlines: Berkeley's Blue Light at low alpha, never opaque grey */
  --line:   rgba(159, 209, 255, 0.14);
  --line-2: rgba(159, 209, 255, 0.24);

  /* text: off-white, two steps down, all AA on --g2 */
  --fg:   #ece8df;
  --fg-2: #b5b0a5;
  --fg-3: #8e897e;

  /* the one accent, California Gold, in four strengths */
  --accent:      #FDB515;
  --accent-deep: #FC9313;
  --accent-line: rgba(253, 181, 21, 0.42);
  --accent-wash: rgba(253, 181, 21, 0.12);
  --on-accent:   #010133;

  /* Berkeley Blue, the second colour, kept quiet: ink on light grounds, and
     as Blue Light at low alpha for the horizon and the secondary hover */
  --blue:      #002676;
  --blue-line: rgba(159, 209, 255, 0.36);
  --blue-wash: rgba(159, 209, 255, 0.06);
  /* the quiet gold: a hairline's worth, for rules and borders at rest */
  --gold-line: rgba(253, 181, 21, 0.22);

  /* the verdict family: three tones, one lightness, used as text and hairline */
  --human: #9ad46a;
  --mixed: #e8c25a;
  --ai:    #f08466;
  --human-wash: rgba(154, 212, 106, 0.14);
  --mixed-wash: rgba(232, 194, 90, 0.14);
  --ai-wash:    rgba(240, 132, 102, 0.14);

  /* sentence shading, faint to strong, all translucent so text stays --fg */
  --risk-0: transparent;
  --risk-1: rgba(240, 132, 102, 0.07);
  --risk-2: rgba(240, 132, 102, 0.13);
  --risk-3: rgba(240, 132, 102, 0.19);
  --risk-4: rgba(240, 132, 102, 0.26);
  --risk-5: rgba(240, 132, 102, 0.34);

  --sans: "Inter", ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* the writing surfaces and the headline: Berkeley's serif, so the text a person
     reads and edits looks like a page, while controls and numerals stay technical */
  --serif: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, Times, serif;
  /* the campus's condensed face, secondary only: eyebrows and small labels */
  --cond: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "Fira Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale: 12 / 13 / 14 / 16 / 18 / 22 */
  --t-0: 0.75rem;
  --t-1: 0.8125rem;
  --t-2: 0.875rem;
  --t-3: 1rem;
  --t-4: 1.125rem;
  --t-5: 1.375rem;

  /* spacing: a 4px scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* one radius */
  --r: 6px;

  --fast: 160ms;
  --slow: 260ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* the shell fills a 1440 screen edge to edge at a 32px gutter; on wider
     screens the field runs at full strength in the margins that remain */
  --page-max: 1440px;
  --gutter: var(--s-8);

  /* the split: app.js sets --col-before; the divider column is 16px */
  --col-before: calc((100% - 16px) * 0.5);
  --before-h: 34vh;
}

/* reset */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; -webkit-text-size-adjust: 100%; background: var(--g1); }
body {
  min-height: 100%;
  margin: 0;
  background: var(--g1);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-2);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}
h1, h2, h3, p, pre, ol, ul { margin: 0; }
button, select, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
::selection { background: rgba(253, 181, 21, 0.30); color: var(--fg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: -200vw; top: var(--s-3); z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: var(--s-2) var(--s-3); border-radius: var(--r); text-decoration: none;
}
.skip-link:focus { left: var(--s-3); }

.muted { color: var(--fg-3); font-size: var(--t-1); line-height: 1.5; }

/* the field sits behind everything. Scoped to the canvas by id: .field is
   also the class of the form field wrapper (label.field) in the console. */
#field {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
  background: var(--g1);
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
#field[data-on] { opacity: 1; }
.shell {
  position: relative; z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  /* the gutter, or the device's safe area if that is wider (notches, rounded corners) */
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
}

/* the top row: wordmark, one sentence, the tools; a horizon line under it */
.top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--s-8);
  align-items: baseline;
  padding: calc(var(--s-6) + env(safe-area-inset-top, 0px)) 0 var(--s-4);
  position: relative;
}
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, var(--accent-line), var(--line) 30%, var(--line) 70%, transparent);
}
.wordmark {
  font-weight: 500;
  font-size: var(--t-5);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--fg);
}
.lede { color: var(--fg-2); font-size: var(--t-2); line-height: 1.5; }
.top-tools { display: flex; align-items: center; gap: var(--s-6); }

.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-1);
  color: var(--fg-2);
  white-space: nowrap;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--fg-3);
  transition: background var(--fast) var(--ease);
}
.pill[data-kind="ok"]::before  { background: var(--accent); }
.pill[data-kind="bad"]::before { background: var(--ai); }
.pill[data-kind="bad"] { color: var(--fg); }

.notice {
  margin: var(--s-4) 0 0;
  font-size: var(--t-2);
  color: var(--fg-2);
}
.notice strong { color: var(--fg); font-weight: 500; margin-right: var(--s-1); }

.page { padding: var(--s-6) 0; }

/* the console: the one primary action, the judge, the status */
.console {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--s-6);
  align-items: center;
  padding: var(--s-1) 0 var(--s-4);
}
.console-act { display: flex; align-items: center; gap: var(--s-3); }
.key { font-family: var(--mono); font-size: var(--t-0); color: var(--fg-3); white-space: nowrap; }
.judge { font-size: var(--t-1); color: var(--fg-3); }
.judge span { color: var(--fg-2); }
.status { font-size: var(--t-1); color: var(--fg-2); text-align: right; min-height: 1.5em; max-width: 52ch; }
.status[data-state="loading"] { color: var(--accent); }
.status[data-state="error"]   { color: var(--ai); }
.status[data-state="stale"]   { color: var(--fg-3); }

/* ── controls ─────────────────────────────────────────────────────────────
   Two button styles. Every state is a different picture: rest, hover (surface
   lifts one step), active (pressed one step further and 1px down), focus
   (2px ring, offset 2px), disabled (text and border drop to the third tier,
   nothing responds). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: transparent;
  color: var(--fg);
  font-weight: 500;
  font-size: var(--t-2);
  line-height: 1;
  text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { border-color: var(--blue-line); background: var(--g3); }
.btn:active { background: var(--g4); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent-line); }
.btn[disabled] { color: var(--fg-3); border-color: var(--line); background: transparent; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  padding: 0 var(--s-5);
}
.btn-primary:hover { background: #FFC31B; border-color: #FFC31B; }
.btn-primary:active { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-primary[disabled] { background: rgba(253, 181, 21, 0.16); border-color: transparent; color: rgba(253, 181, 21, 0.62); }
.btn-primary[data-busy="1"] { color: var(--fg-2); }

select {
  min-height: 36px;
  padding: 0 var(--s-8) 0 var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--fg);
  background: var(--g1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23aab7cb' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right var(--s-2) center / 16px;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
}
select:hover { border-color: var(--accent-line); background-color: var(--g3); }
select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent-line); }

/* the switch: a 32 by 18 track with a 14px thumb. The track is the one pill
   on the page because a switch's shape is its affordance. Off: recessed
   ground, thumb in the second text tier. On: accent track, thumb on-accent. */
.switch-row { display: inline-flex; align-items: center; gap: var(--s-3); cursor: pointer; color: var(--fg-2); }
.switch-label { font-size: var(--t-2); line-height: 1.3; }
.switch-row:hover .switch-label { color: var(--fg); }
.switch {
  position: relative; flex: none;
  width: 32px; height: 18px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: var(--g1);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.switch::after {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--fg-2);
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease);
}
.switch:hover { border-color: var(--accent-line); }
.switch:hover::after { background: var(--fg); }
.switch:active::after { transform: scaleX(1.12); transform-origin: left center; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); box-shadow: none; }
.switch[aria-checked="true"]::after { transform: translateX(14px); background: var(--on-accent); }
.switch[aria-checked="true"]:active::after { transform: translateX(14px) scaleX(1.12); transform-origin: right center; }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch[disabled] { border-color: var(--line); cursor: not-allowed; }
.switch[disabled]::after { background: var(--fg-3); }

/* the tooltip: for the two probability numbers. Hover or focus the reading and
   one sentence says what the number is and who judged it. */
.tip { position: relative; }
.tip::after {
  content: attr(data-tip);
  position: absolute; right: 0; top: calc(100% + var(--s-2));
  z-index: 6;
  width: max-content; max-width: 34ch;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--g4);
  color: var(--fg);
  font-family: var(--sans); font-size: var(--t-1); font-weight: 400; font-style: normal; line-height: 1.45;
  text-align: left; white-space: normal;
  opacity: 0; transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--fast) var(--ease) 80ms, transform var(--fast) var(--ease) 80ms;
}
.tip[data-tip=""]::after { display: none; }
.tip:hover::after, .tip:focus-visible::after { opacity: 1; transform: none; }
.tip:focus-visible { outline-offset: 4px; border-radius: 2px; }

/* ── the instrument ──────────────────────────────────────────────────── */
.instrument {
  display: grid;
  grid-template-columns: minmax(0, var(--col-before)) 16px minmax(0, 1fr);
  align-items: stretch;
}
.instrument.is-gliding { transition: grid-template-columns var(--slow) var(--ease); }
.instrument.is-dragging { user-select: none; cursor: col-resize; }
.pane {
  min-width: 0;
  display: flex; flex-direction: column;
  background: var(--g2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color var(--slow) var(--ease);
}
.pane:focus-within { border-color: var(--line-2); }

.pane-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border-bottom: 1px solid var(--line);
  background: var(--blue-wash);
}
.pane-title { font-size: var(--t-2); font-weight: 500; color: var(--fg-2); line-height: 1.2; white-space: nowrap; }

.reading { display: flex; align-items: baseline; gap: var(--s-2); font-size: var(--t-1); line-height: 1.2; white-space: nowrap; }
.reading-p { color: var(--fg); font-size: var(--t-2); }
.reading-p:empty { display: none; }
.reading-word { color: var(--fg-2); }
.reading-word[data-label="none"] { color: var(--fg-3); font-style: italic; }
.reading-word[data-label="human"] { color: var(--human); }
.reading-word[data-label="mixed"] { color: var(--mixed); }
.reading-word[data-label="ai"]    { color: var(--ai); }
.reading-word:not([data-label="none"])::before { content: "reads as "; color: var(--fg-3); font-style: normal; }
.reading[data-stale="1"] { opacity: 0.5; }

.pane-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--s-6) var(--s-8) var(--s-8);
  min-height: 46vh;
  min-height: 46dvh;
}

/* a folded pane is a 44px rail with its title turned on its side */
.instrument[data-collapsed="before"] .pane-before,
.instrument[data-collapsed="after"] .pane-after { cursor: pointer; }
.instrument[data-collapsed="before"] .pane-before > :not(.pane-head),
.instrument[data-collapsed="after"] .pane-after > :not(.pane-head) { display: none; }
.instrument[data-collapsed="before"] .pane-before .pane-head,
.instrument[data-collapsed="after"] .pane-after .pane-head {
  border-bottom: 0; padding: var(--s-4) 0 0; justify-content: center; flex: 1;
}
.instrument[data-collapsed="before"] .pane-before .reading,
.instrument[data-collapsed="after"] .pane-after .reading { display: none; }
.instrument[data-collapsed="before"] .pane-before .pane-title,
.instrument[data-collapsed="after"] .pane-after .pane-title {
  writing-mode: vertical-rl; transform: rotate(180deg);
}

.canvas {
  outline: none;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 66ch;
  min-height: 12em;
  color: var(--fg);
  caret-color: var(--accent);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  /* when focus scrolls the draft into view (the on-screen keyboard opening),
     leave room above it so the pane head stays visible */
  scroll-margin-top: var(--s-6);
  scroll-margin-bottom: var(--s-6);
}
.canvas p { margin: 0 0 1em; }
.canvas p:last-child { margin-bottom: 0; }
.canvas:empty::before,
.canvas[data-empty="1"]::before {
  content: attr(data-placeholder);
  display: block;
  color: var(--fg-3);
  pointer-events: none;
}
.canvas[data-empty="1"] { min-height: 0; }
.canvas-after { min-height: 0; }
.canvas-after:empty { display: none; }
.canvas-after:focus-visible { outline: 2px solid var(--accent-line); outline-offset: var(--s-2); border-radius: 2px; }

.sent {
  border-radius: 3px;
  padding: 0.06em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background var(--slow) var(--ease);
}
.sent.risk-0 { background: var(--risk-0); }
.sent.risk-1 { background: var(--risk-1); }
.sent.risk-2 { background: var(--risk-2); }
.sent.risk-3 { background: var(--risk-3); }
.sent.risk-4 { background: var(--risk-4); }
.sent.risk-5 { background: var(--risk-5); }
@keyframes sentflash {
  0%   { box-shadow: 0 0 0 0 var(--accent-wash); }
  35%  { box-shadow: 0 0 0 6px var(--accent-wash); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.sent.flash { animation: sentflash 1100ms ease-in-out 1; }

.empty-state { margin-top: var(--s-5); max-width: 60ch; display: grid; gap: var(--s-3); }
.empty-body { color: var(--fg-3); font-size: var(--t-2); }
.samples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.chip {
  min-height: 32px; padding: 0 var(--s-3);
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: transparent; color: var(--fg-2);
  font-size: var(--t-1); font-weight: 500; line-height: 1;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.chip:hover { border-color: var(--accent-line); color: var(--fg); background: var(--g3); }
.chip:active { background: var(--g4); transform: translateY(1px); }
.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip-upload { border-color: var(--gold-line); color: var(--fg); }

/* a file held over the draft: the pane body takes a dashed gold edge until it
   is dropped or carried away. Set by app.js on #pane-before. */
.pane-before[data-drop="1"] .pane-body {
  outline: 2px dashed var(--accent);
  outline-offset: -8px;
  background: rgba(253, 181, 21, 0.05);
}
.pane-before[data-drop="1"] .canvas, .pane-before[data-drop="1"] .empty-state { opacity: 0.4; }

/* the quiet state of the after pane, before any run: a small live ASCII orbit
   and two sentences */
.after-empty { max-width: 40ch; color: var(--fg-3); font-size: var(--t-2); line-height: 1.55; display: grid; gap: var(--s-2); }
.after-empty-sub { font-size: var(--t-1); }
.ascii-tile { display: block; width: 264px; height: 112px; margin: 0 0 var(--s-3) -2px; color: var(--accent); }
.ascii-tile-run { width: 120px; height: 112px; margin: 0; flex: none; }

/* the verdict, one line, coloured by outcome */
.verdict-strip { margin-bottom: var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); display: grid; gap: var(--s-2); }
.verdict-line { font-size: var(--t-2); line-height: 1.55; color: var(--fg-2); max-width: 60ch; }
.instrument[data-outcome="flipped"] .verdict-line { color: var(--human); }
.instrument[data-outcome="held"]    .verdict-line { color: var(--ai); }
.instrument[data-outcome="mixed"]   .verdict-line { color: var(--mixed); }
.instrument[data-outcome="flipped"] .pane-after { border-color: rgba(154, 212, 106, 0.4); }
.instrument[data-outcome="held"]    .pane-after { border-color: rgba(240, 132, 102, 0.4); }
.instrument[data-outcome="mixed"]   .pane-after { border-color: rgba(232, 194, 90, 0.4); }
.verdict-kept { font-size: var(--t-2); line-height: 1.55; color: var(--fg); max-width: 60ch; }
.verdict-refused { font-size: var(--t-1); line-height: 1.55; color: var(--fg-2); max-width: 60ch; }
.refused-h { color: var(--fg); }
.refused-list { margin: var(--s-1) 0; padding-left: 1.1em; display: grid; gap: 2px; }
.refused-list li::marker { color: var(--mixed); }
.refused-hint { color: var(--fg-3); }

.pane-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-6);
  border-top: 1px solid var(--line);
  min-height: 56px;
}
.counts { color: var(--fg-3); font-size: var(--t-0); line-height: 1.4; min-width: 0; overflow-wrap: anywhere; }
.counts:empty { display: none; }
.pane-acts { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; flex: none; }

/* the divider: a 16px column with a hairline, a grip, and three snap ticks
   that show while it is being dragged */
.divider {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  cursor: col-resize;
  touch-action: none;
  border-radius: var(--r);
  transition: background var(--fast) var(--ease);
}
.divider::before {
  content: ""; position: absolute; top: var(--s-3); bottom: var(--s-3); left: 50%; width: 1px; margin-left: -0.5px;
  background: var(--line);
  transition: background var(--fast) var(--ease);
}
.divider-grip {
  position: relative; z-index: 1;
  width: 4px; height: 32px; border-radius: 2px;
  background: var(--fg-3);
  transition: background var(--fast) var(--ease), height var(--fast) var(--ease);
}
.divider:hover::before, .divider:focus-visible::before, .is-dragging .divider::before { background: var(--accent-line); }
.divider:hover .divider-grip, .divider:focus-visible .divider-grip, .is-dragging .divider-grip { background: var(--accent); height: 40px; }
.divider:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.divider-snaps { display: none; }
.divider-snaps i {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--accent-line);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.is-dragging .divider-snaps { display: block; }
.is-dragging .divider-snaps i[data-near="1"] { opacity: 1; }

.legend { margin-top: var(--s-3); font-size: var(--t-0); color: var(--fg-3); }
.legend::before {
  content: ""; display: inline-block; width: 44px; height: 6px; margin-right: var(--s-2); border-radius: 2px;
  vertical-align: middle;
  background: linear-gradient(to right, var(--risk-1), var(--risk-5));
}

/* folds under the instrument */
.fold { border-top: 1px solid var(--line); }
.fold:first-of-type { margin-top: var(--s-8); }
.fold-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3);
  padding: var(--s-4) 0;
  color: var(--fg-2);
  transition: color var(--fast) var(--ease);
}
.fold-summary:hover { color: var(--fg); }
.fold-summary:focus-visible { outline-offset: 4px; border-radius: 2px; }
.fold-summary::before {
  content: ""; width: 7px; height: 7px; flex: none; align-self: center;
  border-right: 1px solid var(--fg-3); border-bottom: 1px solid var(--fg-3);
  transform: rotate(-45deg) translateY(-1px);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.fold[open] .fold-summary::before { transform: rotate(45deg) translateY(-2px); border-color: var(--accent); }
.fold-title { font-weight: 500; color: var(--fg); font-size: var(--t-2); }
.fold-hint { color: var(--fg-3); font-size: var(--t-1); }
.facts-summary[data-state="filled"] .fold-title::after { content: ", in use"; font-weight: 400; color: var(--accent-deep); }
.fold-body { padding: var(--s-1) 0 var(--s-6) var(--s-5); }

.facts-input {
  width: 100%;
  max-width: 72ch;
  min-height: 84px;
  resize: vertical;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--g1);
  color: var(--fg);
  font-size: var(--t-3);
  line-height: 1.6;
  transition: border-color var(--fast) var(--ease);
}
.facts-input:hover { border-color: var(--accent-line); }
.facts-input:focus { outline: none; border-color: var(--accent); }
.facts-input::placeholder { color: var(--fg-3); }

.options-body { display: grid; gap: var(--s-5); }
.field { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.field-label { color: var(--fg-2); }
.field-stack { display: grid; gap: var(--s-2); align-items: start; max-width: 72ch; }
.key-field { display: grid; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.text-input {
  width: 100%; max-width: 48ch; font: inherit; min-height: 36px; padding: 0 var(--s-3);
  color: var(--fg); background: var(--g1);
  border: 1px solid var(--line-2); border-radius: var(--r);
  transition: border-color var(--fast) var(--ease);
}
.text-input:hover { border-color: var(--accent-line); }
.text-input:focus { outline: none; border-color: var(--accent); }
.text-input::placeholder { color: var(--fg-3); }
.field-hint { font-size: var(--t-1); color: var(--fg-3); line-height: 1.5; max-width: 62ch; }

/* the run checklist fills the after pane while a run is on */
.progress {
  position: absolute; inset: 0;
  z-index: 3;
  background: var(--g2);
  padding: var(--s-6) var(--s-8);
  overflow: auto;
}
.progress-card { max-width: 56ch; }
.progress-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.progress-title { font-weight: 500; font-size: var(--t-4); line-height: 1.25; color: var(--fg); }
.progress-meta {
  margin-top: var(--s-2);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-1) var(--s-4);
  font-size: var(--t-1); color: var(--fg-3);
}
.progress-elapsed { color: var(--fg); }
.progress-tag {
  display: inline-block; margin-left: var(--s-1); padding: 1px var(--s-2);
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-family: var(--mono); font-size: var(--t-0); color: var(--fg-3); vertical-align: middle;
}
.progress-tag[data-kind="live"] { color: var(--accent); border-color: var(--accent-line); }

.stages { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.stage {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto;
  column-gap: var(--s-3); align-items: center;
  padding: var(--s-2) 0;
  border-top: 1px solid var(--line);
}
.stage:first-child { border-top: 0; }
.stage-ring, .stage-ring svg { width: 24px; height: 24px; display: block; }
.ring-track { fill: none; stroke: var(--line-2); stroke-width: 2; }
.ring-fill {
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 20px 20px;
  transition: stroke-dashoffset 420ms var(--ease);
}
.ring-check { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--fast) var(--ease); }
.stage[data-status="done"] .ring-check { opacity: 1; }
.stage[data-status="done"] .ring-fill { opacity: 0.35; }
.stage[data-status="skipped"] .ring-track { stroke-dasharray: 3 4; }
.stage[data-status="error"] .ring-fill { stroke: var(--ai); }
.stage-label { font-size: var(--t-2); color: var(--fg-3); line-height: 1.35; }
.stage[data-status="active"] .stage-label { color: var(--fg); font-weight: 500; }
.stage[data-status="done"] .stage-label { color: var(--fg-2); }
.stage-detail { display: block; margin-top: 2px; font-size: var(--t-1); color: var(--fg-3); line-height: 1.4; overflow-wrap: anywhere; }
.stage-detail:empty { display: none; }
.stage-pct { font-size: var(--t-0); color: var(--fg-3); }
.stage[data-status="active"] .stage-pct, .stage[data-status="done"] .stage-pct { color: var(--fg); }
@keyframes ringspin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.stage[data-progress="unknown"] .ring-fill { animation: ringspin 1400ms linear infinite; }

.progress-foot { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.progress-note { font-size: var(--t-1); color: var(--fg-2); line-height: 1.5; max-width: 42ch; }
.progress-note[data-kind="warn"] { color: var(--mixed); }

/* errors */
.error {
  margin-bottom: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--ai-wash);
  border: 1px solid rgba(240, 132, 102, 0.35);
  border-radius: var(--r);
  display: grid; gap: var(--s-2); justify-items: start;
}
.error-title { font-weight: 500; font-size: var(--t-3); color: var(--fg); }
.error-code { font-family: var(--mono); font-size: var(--t-1); color: var(--fg-2); overflow-wrap: anywhere; }
.error-help { font-size: var(--t-1); color: var(--fg-2); line-height: 1.5; max-width: 70ch; }

/* details */
.more-body { padding-left: var(--s-5); }
.msection { padding: var(--s-5) 0 var(--s-2); border-top: 1px solid var(--line); max-width: 72ch; }
.msection:first-child { border-top: 0; padding-top: var(--s-1); }
.msection-h { font-weight: 500; font-size: var(--t-3); color: var(--fg); margin-bottom: var(--s-2); }
.msection-lede { font-size: var(--t-1); color: var(--fg-3); line-height: 1.5; margin-bottom: var(--s-3); max-width: 56ch; }

.rows { display: grid; }
.row {
  display: grid; grid-template-columns: 10em minmax(0, 1fr); gap: var(--s-3);
  padding: var(--s-2) 0; border-top: 1px solid var(--line);
  font-size: var(--t-1);
}
.row:first-child { border-top: 0; }
.row-k { color: var(--fg-3); }
.row-v { color: var(--fg); overflow-wrap: anywhere; }

.edits { display: grid; gap: var(--s-4); }
.edit { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.edit:first-child { border-top: 0; padding-top: 0; }
.edit-kind { font-size: var(--t-1); color: var(--fg-3); margin-bottom: var(--s-1); }
.edit-diff { font-size: var(--t-3); line-height: 1.6; }
.edit-del { background: var(--ai-wash); text-decoration: line-through; text-decoration-color: var(--ai); padding: 1px 3px; border-radius: 3px; }
.edit-ins { background: var(--human-wash); padding: 1px 3px; border-radius: 3px; }
.edit-arrow { color: var(--fg-3); margin: 0 var(--s-1); }
.edit-why { margin-top: var(--s-1); font-size: var(--t-1); color: var(--fg-2); line-height: 1.5; }

.flagged { display: grid; }
.flag-btn {
  display: flex; gap: var(--s-3); align-items: baseline; text-align: left;
  width: 100%; padding: var(--s-2) 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--fg);
  transition: color var(--fast) var(--ease);
}
.flag-btn:first-child { border-top: 0; }
.flag-btn:hover .flag-text { color: var(--accent); }
.flag-btn:focus-visible { outline-offset: 4px; border-radius: 2px; }
.flag-risk { font-family: var(--mono); font-size: var(--t-1); flex: none; min-width: 3.5ch; color: var(--ai); }
.flag-text {
  font-size: var(--t-3); line-height: 1.5; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  transition: color var(--fast) var(--ease);
}

.measure-list { display: grid; }
.measure {
  display: block; width: 100%; text-align: left;
  padding: var(--s-2) 0; border: 0; border-top: 1px solid var(--line);
  background: none; color: var(--fg);
}
.measure:first-child { border-top: 0; }
.measure:hover .measure-name { color: var(--accent); }
.measure:focus-visible { outline-offset: 4px; border-radius: 2px; }
.measure-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.measure-name { font-size: var(--t-1); color: var(--fg); transition: color var(--fast) var(--ease); }
.measure-right { display: flex; align-items: baseline; gap: var(--s-3); flex: none; }
.measure-value { font-size: var(--t-2); color: var(--fg); }
.state { font-family: var(--mono); font-size: var(--t-0); color: var(--fg-3); min-width: 6.5ch; text-align: right; }
.state[data-state="in band"] { color: var(--human); }
.state[data-state="low"], .state[data-state="high"] { color: var(--mixed); }
.measure-band { margin-top: 2px; font-size: var(--t-0); color: var(--fg-3); }
.measure-plain { margin-top: var(--s-2); font-size: var(--t-1); color: var(--fg-2); line-height: 1.55; max-width: 56ch; }

.signals { display: grid; gap: var(--s-3); }
.signal-head { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-1); }
.signal-name { color: var(--fg); }
.signal-v { color: var(--fg-3); }
.signal-bar { margin-top: var(--s-1); height: 2px; background: var(--line); border-radius: 1px; overflow: hidden; }
.signal-bar i { display: block; height: 100%; background: var(--accent); transition: width var(--slow) var(--ease); }

.findings { display: grid; gap: var(--s-3); }
.finding { padding-left: var(--s-3); border-left: 1px solid var(--line-2); }
.finding[data-severity="high"]   { border-left-color: var(--ai); }
.finding[data-severity="medium"] { border-left-color: var(--mixed); }
.finding[data-severity="low"]    { border-left-color: var(--human); }
.finding-top { display: flex; gap: var(--s-2); align-items: baseline; font-size: var(--t-0); color: var(--fg-3); }
.sev { color: var(--fg-2); font-weight: 500; }
.finding-code { font-family: var(--mono); }
.finding-msg { margin-top: 2px; font-size: var(--t-2); color: var(--fg); line-height: 1.5; }
.finding-detail { margin-top: 2px; font-size: var(--t-1); color: var(--fg-2); line-height: 1.5; }

/* how it works, folded */
.how-body { display: grid; gap: var(--s-5); }
.verdict-note { font-size: var(--t-2); color: var(--fg-2); line-height: 1.55; max-width: 62ch; }
.facts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-8); row-gap: var(--s-5); }
.fact { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.fact-h { font-weight: 500; font-size: var(--t-3); line-height: 1.3; color: var(--fg); }
.fact-p { margin-top: var(--s-2); font-size: var(--t-1); line-height: 1.55; color: var(--fg-2); max-width: 40ch; }

.foot { padding: var(--s-2) 0 calc(var(--s-10) + env(safe-area-inset-bottom, 0px)); }
.foot-p { font-size: var(--t-0); color: var(--fg-3); }

/* the site footer is styled in brand/footer.css. Two guards live here so the
   page never scrolls sideways and the last line clears a phone's home bar:
   a long address may break anywhere rather than widen the page, and the
   bottom padding grows by the safe area. */
.shell .site-foot-col a { overflow-wrap: anywhere; }
.shell .site-foot { padding-bottom: calc(var(--s-12) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  .shell .site-foot { padding-bottom: calc(var(--s-10) + env(safe-area-inset-bottom, 0px)); }
}

/* copy that only makes sense with a keyboard or a mouse (the backtick key,
   "click") versus with a finger. index.html marks the spans. */
.touch-only { display: none; }
@media (hover: none) {
  .kb-only { display: none; }
  .touch-only { display: inline; }
}

/* ── the construction layer ──────────────────────────────────────────────
   Hairline outlines and mono labels over every region, the 8px grid, and the
   data path into each element. app.js builds the boxes; it is shown while the
   switch is on or the backtick key is held. */
.construction {
  position: absolute; left: 0; top: 0; width: 100%;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;   /* a tag beside a narrow box must never widen the page */
  background-image:
    linear-gradient(to right, rgba(253, 181, 21, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(253, 181, 21, 0.07) 1px, transparent 1px);
  background-size: 8px 8px;
  font-family: var(--mono);
}
.construction-shell {
  position: absolute; top: 0; bottom: 0;
  border-left: 1px dashed var(--accent-line); border-right: 1px dashed var(--accent-line);
}
.c-box {
  position: absolute;
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
}
.c-box[data-hidden="1"] { border-style: dashed; opacity: 0.55; }
.c-tag {
  position: absolute; left: -1px; top: -1px;
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  max-width: calc(100% + 2px);
  padding: 2px var(--s-2);
  background: var(--g0);
  border: 1px solid var(--accent-line);
  border-radius: var(--r) 0 var(--r) 0;
  color: var(--accent);
  font-size: var(--t-0);
  line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-tag-out { left: calc(100% + var(--s-1)); top: 50%; transform: translateY(-50%); max-width: none; border-radius: var(--r); }
.c-tag .c-src { color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; }
.c-tag .c-src::before { content: "\2190  "; color: var(--fg-3); }
.c-box[data-flow="out"] .c-tag .c-src::before { content: "\2192  "; }
.c-dim { position: absolute; right: var(--s-1); bottom: 0; color: var(--fg-3); font-size: var(--t-0); line-height: 1.4; }
:root[data-construction="on"] .divider::before { background: var(--accent-line); }

/* entrance staging: only once anim.js has confirmed it can run */
:root[data-anim="on"] .top:not([data-anim-done]),
:root[data-anim="on"] .console:not([data-anim-done]),
:root[data-anim="on"] .pane:not([data-anim-done]),
:root[data-anim="on"] .fold:not([data-anim-done]) { opacity: 0; }

/* narrow screens: the panes stack and the divider is a horizontal handle that
   sets the height of the draft */
@media (max-width: 960px) {
  .instrument { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 24px auto; }
  .instrument.is-gliding { transition: none; }
  .instrument.is-dragging { cursor: row-resize; }
  .pane-before .pane-body {
    min-height: 0; height: var(--before-h); overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .instrument[data-collapsed="before"] .pane-before,
  .instrument[data-collapsed="after"] .pane-after { min-height: 44px; }
  .instrument[data-collapsed="before"] .pane-before .pane-title,
  .instrument[data-collapsed="after"] .pane-after .pane-title { writing-mode: horizontal-tb; transform: none; }
  .instrument[data-collapsed="before"] .pane-before .pane-head,
  .instrument[data-collapsed="after"] .pane-after .pane-head { padding: 0; }
  .pane-body { min-height: 34vh; min-height: 34dvh; }
  .divider { cursor: row-resize; }
  .divider::before { top: 50%; bottom: auto; left: var(--s-3); right: var(--s-3); width: auto; height: 1px; margin: -0.5px 0 0; }
  .divider-grip { width: 40px; height: 4px; }
  .divider:hover .divider-grip, .divider:focus-visible .divider-grip, .is-dragging .divider-grip { height: 4px; width: 56px; }
  .divider-snaps { display: none !important; }
  .top { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s-2); }
  .top-tools { flex-wrap: wrap; justify-content: flex-end; row-gap: var(--s-2); }
  .lede { grid-column: 1 / -1; grid-row: 2; }
  .console { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s-2); }
  .status { grid-column: 1 / -1; text-align: left; }
  .facts-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  :root { --gutter: var(--s-4); --fast: 120ms; --slow: 200ms; }
  /* the top row on a phone: wordmark and service pill on the first line, the
     sentence under them, the Construction switch on its own line with its
     label showing, since the backtick key does not exist here */
  /* Column 1 is sized by the wordmark, never squeezed: with `minmax(0, 1fr)`
     the account row's intrinsic width took the whole track and the wordmark
     collapsed to 7px under the service pill (measured 2026-10-05 at 390px).
     The account gets its own full-width row and wraps. */
  .top { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s-2); padding: calc(var(--s-4) + env(safe-area-inset-top, 0px)) 0 var(--s-3); }
  .top-tools { display: contents; }
  .wordmark { grid-area: 1 / 1; }
  .top-tools .pill { grid-area: 1 / 2; align-self: center; justify-self: end; max-width: 100%; }
  .lede { grid-area: 2 / 1 / 3 / 3; }
  .top-tools .switch-row { grid-area: 3 / 1 / 4 / 3; min-height: 44px; }
  .top-tools .account { grid-area: 4 / 1 / 5 / 3; justify-self: stretch; align-self: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
  .top-tools .account[hidden] { display: none; }
  .who { max-width: 14ch; }
  .console { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2); padding-top: var(--s-2); }
  .console-act { flex-wrap: wrap; }
  .console-act .btn-primary { flex: 1 1 auto; }
  .console-act .field-inline { flex: 0 1 auto; }
  .key { display: none; }
  .judge, .status { max-width: none; }
  .pane-head { padding: var(--s-3) var(--s-4); }
  .pane-body { padding: var(--s-5) var(--s-4) var(--s-6); min-height: 30vh; min-height: 30dvh; }
  .progress { padding: var(--s-5) var(--s-4); }
  .progress-title { font-size: var(--t-3); }
  .canvas { font-size: var(--t-3); line-height: 1.65; }
  .pane-foot { padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4); flex-wrap: wrap; }
  .pane-acts { margin-left: auto; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fold-body, .more-body { padding-left: 0; }
  .fold-summary { padding: var(--s-3) 0; }
  .fold-hint { flex-basis: 100%; padding-left: calc(7px + var(--s-3)); }
  .ascii-tile { width: 100%; max-width: 264px; }
  .progress-head { flex-wrap: wrap; }
  .progress-foot .btn { width: 100%; }
  .tip::after { max-width: min(34ch, calc(100vw - var(--s-10))); }
}
/* a phone on its side: little height, so the top row and console tighten */
@media (max-width: 960px) and (max-height: 480px) {
  .lede { display: none; }
  .top { padding-bottom: var(--s-2); }
  .page { padding: var(--s-3) 0; }
  .console { padding-bottom: var(--s-3); }
  .pane-body { min-height: 0; }
  .fold:first-of-type { margin-top: var(--s-5); }
}
/* the draft's default height follows the visible viewport where the browser
   can say what that is, so the on-screen keyboard never hides the pane */
@supports (height: 1dvh) {
  :root { --before-h: 34dvh; }
}

/* ── touch ────────────────────────────────────────────────────────────────
   On a coarse pointer every control is at least 44px on both axes. Buttons,
   selects and inputs grow; the switch and the divider gain an invisible hit
   area around their drawn size so their picture stays the same. */
@media (pointer: coarse) {
  .btn, select, .text-input { min-height: 44px; }
  .chip { min-height: 44px; padding: 0 var(--s-4); }
  .samples { gap: var(--s-3); }
  .pane-acts { gap: var(--s-3); }
  .switch-row { min-height: 44px; }
  .switch::before { content: ""; position: absolute; left: -6px; right: -6px; top: -13px; bottom: -13px; }
  .fold-summary { min-height: 44px; align-content: center; }
  .flag-btn, .measure { min-height: 44px; padding: var(--s-3) 0; }
  .facts-input { min-height: 96px; }
  .divider::after { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; right: -14px; }
  /* iOS zooms into a field whose text is under 16px; keep every input at 16px */
  select, .text-input, .facts-input { font-size: var(--t-3); }
}
@media (pointer: coarse) and (max-width: 960px) {
  .divider::after { top: -10px; bottom: -10px; left: 0; right: 0; }
}
/* no hover on this device: the shortcut hint goes, and a tap does not leave a
   control stuck in its hover picture */
@media (hover: none) {
  .key { display: none; }
  .btn:hover { border-color: var(--line-2); background: transparent; }
  .btn-primary:hover { background: var(--accent); border-color: var(--accent); }
  .btn[disabled]:hover { border-color: var(--line); }
  .btn-primary[disabled]:hover { background: var(--g3); border-color: var(--line-2); }
  .chip:hover { border-color: var(--line-2); color: var(--fg-2); background: transparent; }
  select:hover { border-color: var(--line-2); background-color: var(--g1); }
  .switch:hover { border-color: var(--line-2); }
  .switch[aria-checked="true"]:hover { border-color: var(--accent); }
  .switch:hover::after { background: var(--fg-2); }
  .switch[aria-checked="true"]:hover::after { background: var(--on-accent); }
  .switch-row:hover .switch-label { color: var(--fg-2); }
  .fold-summary:hover { color: var(--fg-2); }
  .flag-btn:hover .flag-text { color: var(--fg); }
  .measure:hover .measure-name { color: var(--fg); }
  .facts-input:hover, .text-input:hover { border-color: var(--line-2); }
  .divider:hover::before { background: var(--line); }
  .divider:hover .divider-grip { background: var(--fg-3); }
  .is-dragging .divider:hover::before, .divider:focus-visible::before { background: var(--accent-line); }
  .is-dragging .divider:hover .divider-grip, .divider:focus-visible .divider-grip { background: var(--accent); }
  .tip:hover::after { opacity: 0; }
  .tip:focus-visible::after { opacity: 1; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .sent.flash { box-shadow: 0 0 0 3px var(--accent-wash); }
  :root[data-anim="on"] .top, :root[data-anim="on"] .console,
  :root[data-anim="on"] .pane, :root[data-anim="on"] .fold { opacity: 1; }
}

/* strength sits beside the primary action */
.field-inline { display: inline-flex; align-items: center; gap: var(--s-2); }
.field-inline .field-label { font-size: var(--t-1); color: var(--fg-3); }
.field-inline select { padding-top: var(--s-1); padding-bottom: var(--s-1); }
.how-body .field-stack { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* the mark beside the name in the top row; the name is a link to the front page */
.wordmark { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--fg); text-decoration: none; }
a.wordmark:hover .wordmark-mark { color: var(--accent); }
a.wordmark:focus-visible { outline-offset: 4px; border-radius: 2px; }

/* who is signed in, and the way out. A quiet button: no border at rest. */
.account { display: inline-flex; align-items: center; gap: var(--s-2); }
.who { font-size: var(--t-1); color: var(--fg-2); max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-quiet { border-color: transparent; color: var(--fg-2); font-weight: 400; font-size: var(--t-1); padding: 0 var(--s-3); }
.btn-quiet:hover { color: var(--fg); border-color: transparent; }
.wordmark-mark { display: inline-flex; width: 16px; height: 16px; color: var(--fg); }
.wordmark-mark svg { width: 16px; height: 16px; display: block; }

/* human surfaces: draft, rewrite, headline and pane titles in the serif */
.canvas, #after, .after-body, .wordmark, .lede, .pane-title, .verdict-word, .empty-title, .verdict-line {
  font-family: var(--serif);
}
.canvas, #after, .after-body { font-size: 17.5px; line-height: 1.7; letter-spacing: 0.002em; }

/* ── billing ─────────────────────────────────────────────────────────────
   The balance in the top row, the cost hint beside Humanize, and the plans
   sheet. Every one of them is hidden while the paywall is off. */
.balance { font-size: var(--t-1); color: var(--fg-2); white-space: nowrap; }
.balance .num { color: var(--fg); }
.plan-name { font-size: var(--t-1); color: var(--fg-3); white-space: nowrap; }
.cost { font-size: var(--t-1); color: var(--fg-3); line-height: 1.3; }
.cost .num { color: var(--fg-2); }
.cost[data-short="1"] { color: var(--mixed); }

/* a button that reads as a link, inside a sentence */
.link-btn {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; line-height: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.link-btn:hover { color: var(--fg); }
.link-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* the sheet: a fixed ground at 72 percent over the page, one opaque --g2
   card in the middle. The ground fades and the card rises 8px, both in the
   fast duration. No shadow; the hairline closes the card. */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 40;
  display: grid; place-items: center;
  padding: calc(var(--s-4) + env(safe-area-inset-top, 0px)) max(var(--s-4), env(safe-area-inset-right, 0px))
           calc(var(--s-4) + env(safe-area-inset-bottom, 0px)) max(var(--s-4), env(safe-area-inset-left, 0px));
  background: rgba(10, 11, 13, 0.72);
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}
.sheet-backdrop[data-in="1"] { opacity: 1; }
.sheet {
  width: 100%; max-width: 560px; max-height: 100%;
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--g2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: var(--s-6);
  display: grid; gap: var(--s-4);
  transform: translateY(8px);
  transition: transform var(--fast) var(--ease);
}
.sheet-backdrop[data-in="1"] .sheet { transform: none; }
.sheet:focus { outline: none; }
.sheet:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html[data-sheet] { overflow: hidden; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.sheet-title { font-family: var(--serif); font-weight: 400; font-size: var(--t-5); line-height: 1.2; color: var(--fg); }
.sheet-why { font-size: var(--t-2); color: var(--fg); line-height: 1.5; }
.sheet-free { font-size: var(--t-2); color: var(--fg-2); line-height: 1.5; }
.sheet-free:empty { display: none; }
.sheet-sub { font-weight: 500; font-size: var(--t-2); color: var(--fg-2); line-height: 1.3; }
.plan-rows { display: grid; }
.plan-rows:empty { display: none; }
.plan-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; column-gap: var(--s-5);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}
.plan-row:last-child { border-bottom: 1px solid var(--line); }
.plan-h { font-weight: 500; font-size: var(--t-3); color: var(--fg); line-height: 1.3; }
.plan-meta { margin-top: 2px; font-size: var(--t-1); color: var(--fg-2); line-height: 1.5; }
.plan-price { font-size: var(--t-2); color: var(--fg); white-space: nowrap; text-align: right; }
.plan-price:empty { display: none; }
.plan-current { font-size: var(--t-1); color: var(--accent-deep); white-space: nowrap; min-height: 36px; display: inline-flex; align-items: center; }
.sheet-note { font-size: var(--t-1); color: var(--fg-3); line-height: 1.5; max-width: 60ch; }
.sheet-link { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.sheet-link:hover { color: var(--fg); }
.sheet-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.sheet-status { font-size: var(--t-1); color: var(--fg-2); line-height: 1.5; margin-left: auto; text-align: right; }
.sheet-status:empty { display: none; }
.sheet-status[data-state="wait"]  { color: var(--accent); }
.sheet-status[data-state="error"] { color: var(--ai); text-align: left; margin-left: 0; flex: 1 1 100%; }
@media (max-width: 600px) {
  .sheet { padding: var(--s-5) var(--s-4); }
  .plan-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-2); }
  .plan-main { grid-column: 1 / -1; }
  .plan-price { text-align: left; }
  .sheet-status { text-align: left; margin-left: 0; }
}
@media (max-width: 600px) {
  /* the account row on a phone: the balance stays, the plan name goes */
  .plan-name { display: none; }
}