/* remove(ai) — strip the machine out of your text.
   Dark only, on purpose: the palette is the design, and a light variant of it
   would be a different one. Both faces are self-hosted (web/fonts/LICENSE.txt);
   nothing here loads off-origin, which is what privacy.html §7 promises. */

@font-face {
  font-family: "Allerta Stencil";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/AllertaStencil-400.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/JetBrainsMono-400.woff2") format("woff2");
}

/* ---------- tokens ---------- */
:root {
  --display: "Allerta Stencil", "JetBrains Mono", ui-monospace, monospace;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  --bg-page: #17181a;
  --bg-panel: #1c1e20;
  --bg-raised: #202224;
  --bg-track: #26282b;

  --line: #3a3d40;
  --line-soft: #2b2e31;
  --line-head: #33363a;

  --accent: #ffce00;
  --on-accent: #141414;
  --danger: #ff4d3d;
  --danger-soft: #ff6b5e;

  --ink-0: #f2f0e9;
  --ink-1: #e8e6df;
  --ink-2: #d6d4cd;

  /* TEXT greys stop here. The artboard's ramp continues down through #75797d,
     #565a5e and #494d50, and those are kept below — but as RULES, TICKS and
     TRACKS only. Measured against the three backgrounds, #75797d reaches just
     3.81:1 on the panel and #565a5e 2.40:1, against the 4.5:1 WCAG AA needs for
     normal text; 10-11px letter-spaced labels are normal text, and no size or
     weight lift can make them large text (that needs 24px, or 18.66px bold), so
     the only fix available is the colour. Both step up exactly one notch to
     --muted-1, which clears 4.78:1 on every background here. Nothing else about
     the palette moves, and the lower steps keep their decorative jobs. */
  --muted-0: #a9aca6;
  --muted-1: #8a8d90;
  --dec-1: #75797d;
  --dec-2: #565a5e;
  --dec-3: #494d50;

  /* The four removal categories (internal/detect/spanrewrite.go). Fixed ids,
     fixed colours; the UI never invents a fifth. Colour is never the only
     carrier — the stat rows name the category in words and every changed diff
     line carries its name for a screen reader. */
  --cat-hidden: #ff6b5e;
  --cat-phrase: var(--accent);
  --cat-rewrite: #d7e022;
  --cat-label: #8a8d90;

  --hazard: repeating-linear-gradient(-45deg, var(--accent) 0 12px, #141414 12px 24px);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  font-feature-settings: "calt" 1, "liga" 0;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, p { margin: 0; }

a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: #fff; }

code {
  font-family: var(--mono);
  font-size: 0.94em;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  padding: 0.05em 0.4em;
}

/* One visible focus ring for everything, drawn in the accent so it reads on
   every surface here. Keyboard operability is not negotiable on a dark UI. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Text for assistive tech only — where colour is doing a job on screen that has
   to be said in words everywhere else. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- type utilities ---------- */
.t-display {
  font-family: var(--display);
  font-size: clamp(22px, 4.4vw, 30px);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.15;
  color: var(--ink-0);
}
.t-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-1);
}
.t-caption { font-size: 11px; line-height: 1.45; color: var(--muted-1); }
.t-num { font-variant-numeric: tabular-nums; }

/* ---------- primitives ---------- */
.btn {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 2px;
  padding: 11px 28px;
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  border-radius: 0;
  user-select: none;
}
.btn:hover { background: #fff; }
.btn:disabled { background: var(--bg-raised); color: var(--muted-1); cursor: not-allowed; }

/* Secondary: the outlined shape the artboard uses for its inline actions. */
.btn.ghost {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 9px 16px;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted-0);
}
.btn.ghost:hover { background: none; color: var(--danger-soft); border-color: var(--danger-soft); }

.btn.sm {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.btn.sm:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.sm:disabled { background: var(--bg-panel); color: var(--muted-1); border-color: var(--line); }

.panel { border: 1px solid var(--line); background: var(--bg-panel); padding: 14px 16px; }

/* The hazard stripe: two 6px rules that bracket the whole document. */
.stripe { height: 6px; background: var(--hazard); flex: 0 0 auto; }

.dot { width: 10px; height: 10px; margin-top: 4px; display: block; }
.dot.cat-hidden { background: var(--cat-hidden); }
.dot.cat-phrase { background: var(--cat-phrase); }
.dot.cat-rewrite { background: var(--cat-rewrite); }
.dot.cat-label { background: var(--cat-label); }

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line-head);
  background: var(--bg-panel);
}
.brand {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--ink-0);
  text-decoration: none;
}
.brand .paren { color: var(--accent); }
.brand:hover { color: #fff; }
.tagline {
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--muted-1);
  border-left: 1px solid var(--line-head);
  padding-left: 20px;
}
.top-link {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--muted-1);
  text-decoration: none;
}
.top-link:hover { color: var(--accent); }

/* ---------- layout ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 32px 32px 64px; width: 100%; }
.grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.rail { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.rail > div { display: flex; flex-direction: column; gap: 14px; }
.rail > div[hidden] { display: none; }
.rail-note {
  font-size: 11px;
  color: var(--muted-1);
  border-left: 3px solid var(--line);
  padding: 2px 0 2px 12px;
}

/* ---------- the box ---------- */
.box { border: 1px solid var(--line); background: var(--bg-panel); min-width: 0; }
.box-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--line-soft); }
.box-head .spacer { flex: 1; }
.paste-label { padding: 12px 16px; align-self: center; }
.paste-label[hidden] { display: none; }
.chars {
  padding: 12px 16px;
  border-left: 1px solid var(--line-soft);
  color: var(--muted-1);
  white-space: nowrap;
  align-self: center;
}

/* The tabs are buttons, not links: they swap what the box shows, they do not
   navigate. aria-pressed is the single source of the styling and the announced
   state, so the two cannot drift apart. */
.tabs { display: flex; }
.tabs[hidden] { display: none; }
.tabs button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  padding: 10px 18px;
  cursor: pointer;
  background: none;
  border: none;
  border-right: 1px solid var(--line-soft);
  border-top: 3px solid transparent;
  color: var(--muted-1);
}
.tabs button:hover { color: var(--ink-0); }
.tabs button[aria-pressed="true"] {
  background: var(--bg-page);
  border-top-color: var(--accent);
  color: var(--ink-0);
  font-weight: 700;
}

.copy, .filter-chip, #paste, #clear {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 0 16px;
  cursor: pointer;
  background: none;
  border: none;
  border-left: 1px solid var(--line-soft);
  color: var(--muted-1);
}
.copy:hover, .filter-chip:hover, #paste:hover, #clear:hover { color: var(--accent); }
.filter-chip { color: var(--accent); border-left: none; }
.copy[hidden], .filter-chip[hidden], #paste[hidden], #clear[hidden] { display: none; }

textarea {
  display: block;
  width: 100%;
  min-height: 380px;
  resize: vertical;
  background: var(--bg-page);
  color: var(--ink-2);
  border: none;
  border-radius: 0;
  padding: 16px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}
textarea::placeholder { color: var(--muted-1); }
textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
textarea[hidden] { display: none; }

.box-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.box-foot .hint { color: var(--muted-1); }
.box-foot .hint[hidden] { display: none; }
.box-foot .status { margin-left: auto; text-align: right; color: var(--muted-0); }

/* ---------- the diff ---------- */
/* Line numbers, marks and folds are all read off the RESULT text and the exact
   edit spans the server returned (out[start,end) === after, rune offsets). No
   diff is computed here — the lines are the result's own lines, and N in a fold
   is a count of consecutive untouched ones. */
.diff {
  background: var(--bg-page);
  min-height: 380px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px 0;
  font-size: 13px;
}
.diff[hidden] { display: none; }

.diff-line {
  display: grid;
  grid-template-columns: 44px 16px 1fr;
  gap: 0 10px;
  padding: 2px 16px 2px 0;
  line-height: 1.7;
  border-left: 3px solid transparent;
  /* Untouched lines are subordinate, but they are still the document being read,
     so they take a text grey rather than one of the rule/tick steps. */
  color: var(--muted-0);
}
.diff-line .gut {
  text-align: right;
  color: var(--muted-1);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.diff-line .mark { text-align: center; font-weight: 700; color: transparent; user-select: none; }
/* break-spaces rather than pre-wrap: pre-wrap hangs a trailing space past the
   wrap point, which clips exactly the boundary whitespace the markers are there
   to show. */
.diff-line .body { min-width: 0; white-space: break-spaces; overflow-wrap: anywhere; }

.diff-line.changed { background: rgba(255, 206, 0, 0.04); border-left-color: var(--accent); color: var(--ink-1); }
.diff-line.changed .mark { color: var(--accent); }
.diff-line.changed.cat-hidden { border-left-color: var(--cat-hidden); }
.diff-line.changed.cat-hidden .mark { color: var(--cat-hidden); }
.diff-line.changed.cat-phrase { border-left-color: var(--cat-phrase); }
.diff-line.changed.cat-phrase .mark { color: var(--cat-phrase); }
.diff-line.changed.cat-rewrite { border-left-color: var(--cat-rewrite); }
.diff-line.changed.cat-rewrite .mark { color: var(--cat-rewrite); }
.diff-line.changed.cat-label { border-left-color: var(--cat-label); }
.diff-line.changed.cat-label .mark { color: var(--cat-label); }

/* The filtered-out lines. They stay in place so the document does not reflow
   under the reader; their del spans are dropped in app.js, so what is left reads
   as the cleaned text with one category called out. */
/* ponytail: the dimmed step is below the 4.5:1 the tokens block insists on for
   text. It is a transient, user-requested de-emphasis with a one-click escape
   (the FILTER chip), and the same lines read at full contrast with the filter
   off — so the ceiling is accepted rather than hidden. Upgrade path if it ever
   stops being transient: dim with a background wash instead of the ink. */
.diff-line.dim { background: none; border-left-color: transparent; color: var(--dec-2); }
.diff-line.dim .mark { color: transparent; }
.diff-line.hot { background: rgba(255, 206, 0, 0.07); }

.diff-line del {
  color: var(--danger-soft);
  background: rgba(255, 77, 61, 0.14);
  text-decoration: line-through;
  padding: 0 2px;
}
/* A removed passage that spanned several lines keeps them: its own newlines are
   real structure, and .body is pre-wrap so they survive. Block so the
   replacement that follows starts on a fresh line rather than continuing the
   last removed one. */
.diff-line del.multiline { display: block; }
.diff-line ins {
  color: var(--on-accent);
  background: var(--accent);
  text-decoration: none;
  padding: 0 2px;
}
/* The stand-in for a space, tab or newline that was added or removed. Dimmed
   against its del/ins ground so it reads as notation rather than as text, and
   boxed so a run of them can be counted. */
.diff-line .ws {
  /* Atomic inline: a del's line-through is not propagated into one, so the glyph
     stays readable instead of being struck out by the very mark that hid it. */
  display: inline-block;
  opacity: 0.7;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0 1px;
  margin: 0 1px;
  user-select: none;
}

.diff-fold {
  text-align: center;
  color: var(--muted-1);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 0;
  margin: 4px 0;
  border-top: 1px dashed var(--line-soft);
  border-bottom: 1px dashed var(--line-soft);
}

/* An invisible character, made visible. Inverted so it cannot be mistaken for
   the text around it, and a button so touch and keyboard reach its caption. */
.tok {
  display: inline;
  border: none;
  margin: 0;
  font: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--danger);
  color: var(--on-accent);
  text-decoration: none;
  padding: 0 3px;
  cursor: pointer;
}
.tok-caption {
  margin: 0 16px 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  font-size: 12px;
  color: var(--muted-0);
}
.tok-caption[hidden] { display: none; }

/* ---------- the risk heatmap ---------- */
.heatmap {
  background: var(--bg-page);
  min-height: 380px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 16px;
  font-size: 13px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.heatmap[hidden] { display: none; }

.heatmap-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  color: var(--muted-1);
}
.heatmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.risk-mark {
  display: inline;
  padding: 1px 2px;
  border-radius: 2px;
  cursor: help;
  transition: background 0.15s ease;
}
.risk-mark.high {
  background: rgba(255, 77, 61, 0.22);
  border-bottom: 2px solid var(--danger);
  color: var(--ink-0);
}
.risk-mark.high:hover {
  background: rgba(255, 77, 61, 0.4);
}
.risk-mark.med {
  background: rgba(255, 206, 0, 0.18);
  border-bottom: 2px solid var(--accent);
  color: var(--ink-1);
}
.risk-mark.med:hover {
  background: rgba(255, 206, 0, 0.32);
}
.risk-mark.low {
  background: rgba(215, 224, 34, 0.14);
  border-bottom: 1px dashed var(--cat-rewrite);
  color: var(--ink-1);
}
.risk-mark.clean {
  color: var(--muted-0);
}

/* ---------- the rail: input phase ---------- */
.legend { padding: 16px; }
.legend-row {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--bg-track);
}
.legend .t-label { margin-bottom: 10px; }
.legend-h { font-size: 12px; letter-spacing: 1px; color: var(--ink-1); }
.legend-b { font-size: 11px; color: var(--muted-1); }

/* ---------- the rail: verdict ---------- */
/* Three variants, and the third one is the point: a result that still scores at
   or above the strong-signal line is drawn as a warning, not a success. The
   headline says which in words — the border is never the only signal. */
.verdict {
  border: 2px solid var(--accent);
  background: rgba(255, 206, 0, 0.06);
  color: var(--ink-0);
  padding: 14px 16px;
}
.verdict.bad { border-color: var(--danger); background: rgba(255, 77, 61, 0.07); }
.verdict.flat { border-color: var(--line); background: var(--bg-panel); }
.verdict .t-label { color: var(--muted-0); margin-bottom: 4px; }
.verdict-title {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: 1px;
  line-height: 1.25;
}
.verdict-sub { font-size: 11px; margin-top: 6px; color: var(--muted-0); }

/* ---------- the rail: category stats ---------- */
.stats { padding: 8px 0; }
.stats-head { display: block; padding: 8px 16px 6px; }
.stat {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  gap: 0 12px;
  align-items: start;
  width: 100%;
  padding: 9px 16px;
  background: none;
  border: none;
  border-top: 1px solid var(--bg-track);
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: var(--mono);
  text-align: left;
}
.stat:hover:enabled { background: var(--bg-raised); }
/* A row the diff has nothing to show for is not a filter. It keeps its count and
   its copy — the change really happened — it just stops pretending to click. */
.stat:disabled { cursor: default; }
.stat[aria-pressed="true"] { background: rgba(255, 206, 0, 0.07); border-left-color: var(--accent); }
.stat-mid { min-width: 0; }
.stat-h { display: block; font-size: 12px; letter-spacing: 1px; color: var(--ink-1); }
.stat-b { display: block; font-size: 11px; color: var(--muted-1); overflow-wrap: anywhere; }
.stat-n { font-weight: 700; font-size: 13px; }
.stat[data-cat="hidden"] .stat-n { color: var(--cat-hidden); }
.stat[data-cat="phrase"] .stat-n { color: var(--cat-phrase); }
.stat[data-cat="rewrite"] .stat-n { color: var(--cat-rewrite); }
.stat[data-cat="label"] .stat-n { color: var(--cat-label); }
/* Nothing found in this category: dimmed, but still there and still saying so. */
.stat.zero .dot { opacity: 0.3; }
.stat.zero .stat-n { color: var(--dec-3); }

/* ---------- the rail: score bar ---------- */
.score-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom: 6px;
  color: var(--muted-1);
}
.score-head > span:first-child { color: var(--muted-0); }
.score-head .before { color: var(--danger-soft); }
.score-head .after { color: var(--accent); }
.score-track { position: relative; height: 6px; background: var(--bg-track); }
.score-fill { position: absolute; left: 0; top: 0; height: 100%; }
.score-fill.before { background: rgba(255, 77, 61, 0.35); }
.score-fill.after { background: var(--accent); }
.score-cap { font-size: 10px; color: var(--muted-1); margin-top: 6px; }

/* ---------- pass envelope ---------- */
.envelope {
  padding: 12px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
}
.envelope[hidden] { display: none; }
.envelope.clear { border-left: 3px solid var(--accent); }
.envelope.borderline { border-left: 3px solid var(--cat-rewrite); }
.envelope.elevated_risk { border-left: 3px solid var(--danger); }
.envelope.uncertain {
  border-left: 3px solid var(--muted-1);
  background: rgba(255, 255, 255, 0.02);
}
.envelope-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: bold;
  padding: 2px 6px;
  border: 1px solid var(--line);
}
.envelope.clear .envelope-badge {
  color: var(--accent);
  border-color: rgba(255, 206, 0, 0.4);
  background: rgba(255, 206, 0, 0.08);
}
.envelope.borderline .envelope-badge {
  color: var(--cat-rewrite);
  border-color: rgba(255, 140, 0, 0.4);
  background: rgba(255, 140, 0, 0.08);
}
.envelope.elevated_risk .envelope-badge {
  color: var(--danger);
  border-color: rgba(255, 77, 61, 0.4);
  background: rgba(255, 77, 61, 0.08);
}
.envelope.uncertain .envelope-badge {
  color: var(--muted-0);
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.05);
}
.envelope-summary {
  font-size: 12px;
  color: var(--ink-0);
  margin-top: 8px;
  line-height: 1.45;
  font-weight: 500;
}
.envelope-detail {
  font-size: 11px;
  color: var(--muted-0);
  margin-top: 4px;
  line-height: 1.4;
}
.envelope-caveat {
  font-size: 10px;
  color: var(--muted-1);
  margin-top: 8px;
  line-height: 1.35;
  border-top: 1px dashed var(--line-soft);
  padding-top: 6px;
}

/* ---------- independent signal readouts ---------- */
.readouts {
  padding: 12px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
}
.readouts[hidden] { display: none; }
.readouts-head { display: block; margin-bottom: 8px; color: var(--muted-0); font-size: 10px; }
.readouts-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.readout-card {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--muted-1);
}
.readout-card.low { border-left-color: var(--accent); }
.readout-card.moderate { border-left-color: var(--cat-rewrite); }
.readout-card.elevated { border-left-color: var(--danger); }
.readout-card.abstained { border-left-color: var(--muted-1); }
.readout-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}
.readout-name {
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--ink-0);
  font-weight: bold;
}
.readout-level {
  font-family: var(--mono);
  font-size: 9px;
  padding: 1px 5px;
  font-weight: bold;
  letter-spacing: 0.5px;
}
.readout-card.low .readout-level { color: var(--accent); background: rgba(255, 206, 0, 0.1); }
.readout-card.moderate .readout-level { color: var(--cat-rewrite); background: rgba(255, 140, 0, 0.1); }
.readout-card.elevated .readout-level { color: var(--danger); background: rgba(255, 77, 61, 0.1); }
.readout-card.abstained .readout-level { color: var(--muted-1); background: rgba(255, 255, 255, 0.05); }
.readout-summary {
  font-size: 11px;
  color: var(--ink-1);
  line-height: 1.35;
}
.readouts-cap {
  font-size: 10px;
  color: var(--muted-1);
  margin-top: 8px;
  line-height: 1.35;
  border-top: 1px dashed var(--line-soft);
  padding-top: 6px;
}

/* ---------- the rail: consent and feedback ---------- */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted-0);
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 12px 14px;
}
.consent[hidden] { display: none; }
.consent input { accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.note { color: var(--muted-0); }
.note[hidden] { display: none; }

.feedback {
  border: 1px dashed var(--line);
  background: var(--bg-panel);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
}
.fb-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fb-prompt { font-size: 11px; letter-spacing: 1px; color: var(--muted-0); }

/* ---------- PRO Tier Block (dem-c5j.9) ---------- */
.pro {
  padding: 0;
  border: 1px solid var(--line);
  background: var(--bg-panel);
  order: 9;
}
.pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.pro-tag {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--accent);
}
.badge-striped {
  font-size: 9px;
  letter-spacing: 2px;
  color: #141414;
  background: repeating-linear-gradient(-45deg, #ffce00 0 8px, #e0b400 8px 16px);
  padding: 3px 8px;
  font-weight: 700;
}
.pro-features {
  display: flex;
  flex-direction: column;
}
.pro-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line-soft);
  opacity: 0.85;
}
.pro-bullet {
  color: var(--muted-1);
  font-size: 11px;
}
.pro-title {
  font-size: 12px;
  color: var(--ink-0);
  letter-spacing: 1px;
  font-weight: 500;
}
.pro-desc {
  font-size: 11px;
  color: var(--muted-0);
  line-height: 1.35;
}
.pro-foot {
  padding: 12px 16px;
}
.pro-btn {
  width: 100%;
  box-sizing: border-box;
  background: none;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pro-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #141414;
}
.pro-btn:disabled {
  opacity: 0.6;
  cursor: default;
  border-color: var(--line);
  color: var(--muted-0);
}
.pro-note {
  font-size: 10px;
  color: var(--muted-1);
  margin-top: 6px;
  line-height: 1.35;
}

/* ---------- privacy ---------- */
.privacy { max-width: 780px; margin: 0 auto; padding: 36px 32px 80px; width: 100%; }
.privacy .t-display { margin-bottom: 6px; }
.privacy .lede { font-size: 12px; color: var(--muted-1); margin-bottom: 34px; }
/* Each numbered section becomes the artboard's numeral-and-rule pair. The
   numeral is the one the heading already carried, moved into its own column —
   not a generated one — so every character of the real copy survives. */
.privacy h2 {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink-1);
  margin: 26px 0 0;
}
.privacy h2 .no {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--accent);
  border-top: 3px solid var(--accent);
  padding-top: 6px;
}
.privacy h2 > span + span { border-top: 1px solid var(--line-head); padding-top: 8px; }
.privacy p, .privacy ul {
  font-size: 13px;
  color: var(--muted-0);
  margin: 8px 0 0 74px;
  text-wrap: pretty;
}
.privacy ul { padding-left: 2ch; }
.privacy .lede { margin-left: 0; }
.privacy .contact {
  border: 1px solid var(--line);
  background: var(--bg-panel);
  padding: 14px 18px;
  font-size: 12px;
  color: var(--muted-1);
  margin: 34px 0 0;
}

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line-head); background: var(--bg-panel); }
.footer-inner {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 16px 32px;
  font-size: 11px;
  /* The privacy claim is informational text, not decoration, so it takes a text
     grey — the ramp below --muted-1 is for rules and ticks (see the tokens). */
  color: var(--muted-1);
  flex-wrap: wrap;
}
.footer-brand { font-family: var(--display); letter-spacing: 1px; color: var(--muted-1); }
.footer-end { margin-left: auto; }
.footer-inner a { color: var(--muted-1); }

/* ---------- narrow viewports ---------- */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  /* Unpinned once it is under the box rather than beside it. */
  .rail { position: static; }
}

@media (max-width: 640px) {
  /* At 320px the bar is wider than the viewport. One scrolling strip rather
     than a stacked bar, and the overflow is contained here so the page body
     never scrolls sideways. */
  .topbar {
    gap: 12px;
    padding: 12px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar { display: none; }
  .topbar > * { flex: 0 0 auto; }
  .tagline { display: none; }

  .wrap, .privacy { padding: 24px 16px 56px; }
  .footer-inner { padding: 16px; gap: 10px 16px; }
  .footer-end { margin-left: 0; }

  .box-head { flex-wrap: wrap; }
  .box-foot .status { margin-left: 0; text-align: left; }
  .tabs button { padding: 10px 12px; }
  .diff-line { grid-template-columns: 34px 14px 1fr; padding-right: 8px; }

  /* The numeral column costs more than it earns at this width. */
  .privacy h2 { grid-template-columns: 34px 1fr; gap: 12px; }
  .privacy p, .privacy ul { margin-left: 46px; }
}

/* ---------- touch input ---------- */
/* Keyed on the pointer, not the width: a mouse-driven small window does not
   need finger-sized targets, and a touch tablet at 900px does. ~44px baseline. */
@media (hover: none) and (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn.sm, .btn.ghost, .tabs button, .copy, .filter-chip, #paste, #clear {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .brand, .top-link, .footer-inner a { min-height: 44px; display: inline-flex; align-items: center; }
  .stat { padding-top: 12px; padding-bottom: 12px; }

  /* iOS Safari zooms the page when focusing any control under 16px. */
  textarea { font-size: 16px; }
}