/* Vervly

   An instrument on a deep blue-black ground. Two panes, before and after,
   with a divider you can drag; one teal for the primary action, active
   states and hairlines; three restrained tones for the verdict; every
   numeral in mono. Behind it an ASCII field (field.js) the panes sit in
   front of.

   Type
     Fira Sans   text, controls, the draft, the rewrite
     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, blue-black, one step lighter as they come forward */
  --g0: #0a0b0d;
  --g1: #0e1013;
  --g2: #15181d;
  --g3: #1c2026;
  --g4: #252a32;

  /* hairlines: pale blue at low alpha, never opaque grey */
  --line:   rgba(230, 220, 200, 0.12);
  --line-2: rgba(230, 220, 200, 0.22);

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

  /* the one accent, one hue, in four strengths */
  --accent:      #a8e6b0;
  --accent-deep: #7ccb8a;
  --accent-line: rgba(168, 230, 176, 0.38);
  --accent-wash: rgba(168, 230, 176, 0.12);
  --on-accent:   #0b1f12;

  /* 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: "Source Sans 3", ui-sans-serif, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* the writing surfaces and the headline: a humanist serif, so the text a person
     reads and edits looks like a page, while controls and numerals stay technical */
  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, 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: 4px;

  --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(168, 230, 176, 0.28); 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(--accent-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: #c4f0ca; border-color: #c4f0ca; }
.btn-primary:active { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-primary[disabled] { background: var(--g3); border-color: var(--line-2); color: var(--fg-3); }
.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);
}
.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; }

/* 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(168, 230, 176, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 230, 176, 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; }
}