/*
 * HireProof stylesheet.
 *
 * Plain CSS, no framework and no build step, because the site is one
 * page served straight from docs/ by GitHub Pages. A framework would be
 * more to learn, more to explain, and more to go wrong than writing this
 * directly.
 *
 * THE DESIGN, IN ONE PARAGRAPH. Warm paper, warm ink, a clear grid and a
 * lot of whitespace. One accent - a slate ink that is nearly black - used
 * for links, focus rings and the primary button. The only saturated
 * colours on the page are the two direction colours in the breakdown and
 * the highlighting, so colour on this page always means "toward ghost" or
 * "toward real" and never decoration. No gradients, no glow, no
 * shadows beyond a hairline, nothing that moves unless it is showing a
 * value changing.
 *
 * TYPEFACES are self-hosted woff2 in docs/fonts/. Not a CDN: the page
 * promises the posting text never leaves the visitor's machine, and
 * fetching a font from a third party would put a request on the board
 * that undercuts the claim for no benefit. Instrument Sans for text,
 * IBM Plex Mono for every number, both OFL.
 */

/* --------------------------------------------------------------- Fonts */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;   /* show fallback text immediately, swap when ready */
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* --------------------------------------------------------------- Tokens */

:root {
  /* DARK IS THE DEFAULT, and it is stated here rather than inherited from
     the operating system. `color-scheme: dark` means light-dark() resolves
     to its second value unless the markup pins otherwise, so a visitor who
     has never touched the switch gets the dark design the page was drawn
     for. The two rules below let the header switch override it either way. */
  color-scheme: dark;

  /* Warm charcoal and warm cream. Every colour is written once as
     light-dark(), so there is no second copy of the palette to drift.
     Nothing here is pure black or pure white: the darkest surface is a
     warm brown-grey and the lightest ink is a cream, which is what keeps
     the page from reading as a generic dark UI. Every pair below was
     measured rather than eyeballed - all fourteen clear WCAG AA for body
     text, the lowest being the faint label at 5.02:1. */
  --paper:     light-dark(#f7f4ed, #15130f);
  --surface:   light-dark(#fffdf8, #1c1915);
  --raised:    light-dark(#ffffff, #232019);
  --ink:       light-dark(#1a1713, #ece4d6);
  --ink-soft:  light-dark(#4e483f, #b3aa9a);
  --ink-faint: light-dark(#6c655c, #8c8476);
  --rule:      light-dark(#e3ded3, #302b23);
  --rule-soft: light-dark(#efebe2, #241f18);

  /* THE ONE ACCENT. Slate: near-black with just enough blue to read as
     deliberate on paper, lifted to a soft tint on charcoal so it stays
     legible. Deliberately not a mid blue, because the "toward real"
     direction colour is one and the two must never be confused. */
  --accent:       light-dark(#35465c, #9db4ce);
  --accent-hover: light-dark(#22303f, #c3d3e4);
  --accent-ink:   light-dark(#fffdf8, #15130f);

  /* The two direction colours, softened to sit on warm backgrounds.
     Colour is never the only channel, and that matters more here than
     usual: these two differ by only 1.11 in relative luminance, so they
     are told apart by hue rather than lightness. Direction is therefore
     also carried by which side of the axis a bar sits on, by a +/- glyph,
     and by the row's own words - see ARCHITECTURE section 3.9. */
  --toward-ghost: light-dark(#a84036, #e08a7c);
  --toward-real:  light-dark(#2a5e96, #7faedc);
  --ghost-wash:   light-dark(#f6e4e0, #3a211d);
  --real-wash:    light-dark(#e3ecf6, #16293a);

  --warn-bg:   light-dark(#fbf4e6, #241f14);
  --warn-rule: light-dark(#e8d9b4, #453a24);
  --warn-ink:  light-dark(#6b4a09, #dfba77);

  /* The spacing scale. Every gap on the page is one of these rather than
     whatever looked right at the time, which is what makes the vertical
     rhythm read as deliberate instead of accidental. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 40px; --s7: 64px; --s8: 96px; --s9: 128px;

  --radius: 10px;        /* ONE radius. Pills use 999px; nothing else. */
  --shadow: 0 1px 2px light-dark(rgba(26,23,19,.04), rgba(0,0,0,.26)),
            0 8px 24px light-dark(rgba(26,23,19,.05), rgba(0,0,0,.22));
  --measure: 64ch;       /* ~60-70 characters, the comfortable reading span */

  /* THREE FAMILIES, each with one job. The serif carries the headline,
     the section headings and the score, because that is the voice of the
     page. The sans carries everything you read in quantity. The mono
     carries every number, so figures line up in a column and a weight
     never shifts when a digit changes. */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
           "Segoe UI", Roboto, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo,
           Consolas, monospace;

  /* The type scale, named by role. Sizes are clamped so the page is
     drawn for the window it is in rather than stepping at breakpoints. */
  --t-display: clamp(2.75rem, 5.6vw, 4.5rem);   /* 44 -> 72px */
  --t-h2:      clamp(2rem, 3.2vw, 2.5rem);      /* 32 -> 40px */
  --t-h3:      1.25rem;
  --t-score:   clamp(4.5rem, 10.5vw, 6.5rem);   /* 72 -> 104px */
  --t-body:    1.0625rem;                        /* 17px */
  --t-small:   0.875rem;                         /* 14px */
  --t-label:   0.75rem;                          /* 12px */
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

* { box-sizing: border-box; }

/* The hidden attribute must actually hide. A browser's [hidden] is a
   user-agent rule with the lowest priority there is, so any author rule
   setting display beats it - which silently kept several panels on
   screen the last time this was not stated. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* The switch repaints the whole page, so the two themes cross-fade
     rather than snapping. Only colour transitions - nothing moves. */
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* THE HEADINGS CARRY THE PAGE. Serif, large, tightly tracked. The old
   scale topped out at 36px for h1 and 21px for h2, which left the whole
   page sitting in a narrow band between 11px and 15px with nothing to
   anchor the eye. Size contrast is the point here. */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;   /* no orphaned last word in a headline */
}
h1 { font-size: var(--t-display); margin: 0 0 var(--s4); }
h2 { font-size: var(--t-h2);      margin: 0 0 var(--s4); line-height: 1.12; }
h3 { font-size: var(--t-h3);      margin: 0 0 var(--s2); line-height: 1.25;
     letter-spacing: -0.012em; }
p  { margin: 0 0 var(--s4); max-width: var(--measure); }

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

/* One focus style everywhere, and never colour alone. */
a:focus-visible, button:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s5); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  /* The rule is transparent at the top of the page and fades in once the
     header is actually overlapping content, so the hairline means
     "something is scrolled underneath" rather than being permanent
     furniture. app.js toggles .is-stuck from a scroll listener. */
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background-color 0.25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--rule); }
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: 60px;
}
.wordmark {
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
/* "Proof" carries the accent, and "Hire" steps back a shade.
   The first version used a slate so close to the body ink that the
   accent was invisible at wordmark size - the colour was technically
   applied and did nothing. Two channels now, weight and hue, so the
   split reads even in greyscale. */
.wordmark { color: var(--ink-soft); font-weight: 500; }
.wordmark b { font-weight: 600; color: var(--accent); }

.site-nav { display: flex; gap: var(--s5); margin-left: auto; align-items: center; }
.site-nav a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.site-nav a:hover { color: var(--ink); text-decoration: underline; }

.theme-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: var(--s1) var(--s3);
  color: var(--ink-soft);
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
}
.theme-btn:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ---------------------------------------------------- The view toggle */

.head-right { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }

/* A segmented control: two options, one visible choice, no dropdown for a
   binary. The selected half carries the accent as a filled block, which is
   the one place on the page a solid accent area appears. */
.view-toggle {
  display: inline-flex;
  padding: 2px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.view-btn {
  font: inherit;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--s1) var(--s4);
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.view-btn:hover { color: var(--ink); }
.view-btn[aria-selected="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ------------------------------------------------------------- Sections */

/* FULL-WIDTH BANDS, not more bordered cards.
   Every section used to be the same outlined box, so the page read as one
   texture from top to bottom. The tool keeps its cards because its parts
   are genuinely separate controls; the explanatory sections become bands
   that alternate tone, which is what gives the page a rhythm you can feel
   while scrolling without adding a single border. */
.section { padding: var(--s8) 0; }
.section-band {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section-lede { color: var(--ink-soft); }

/* The small label above every section heading. Mono and letter-spaced so
   it reads as a tag rather than as a very short sentence. */
.eyebrow-rule {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s3);
}
/* Section heads share one shape: small label, large heading, one line of
   intro - so the page reads as a system rather than as six designs. */
.section-head { margin-bottom: var(--s6); max-width: var(--measure); }

/* ------------------------------------------------------------ Workspace */

.workspace { padding: var(--s7) 0 var(--s8); }
.workspace-head { margin-bottom: var(--s6); }

/* Two columns on desktop, input first. Stacked below 900px, which is
   where the textarea stops being comfortable beside anything. */
.workspace-grid {
  display: grid;
  gap: var(--s6);
  align-items: start;
}
@media (min-width: 900px) {
  .workspace-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--rule-soft);
}
/* A panel head labels a control, so it stays in the interface voice:
   sans, small, spaced. Setting the serif loose at 15px here made these
   read as tiny section headings, which is exactly backwards. */
.panel-head h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}
.panel-body { padding: var(--s5); }

#posting {
  display: block;
  width: 100%;
  min-height: 340px;
  padding: var(--s4);
  font: inherit;
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  resize: vertical;
}
#posting::placeholder { color: var(--ink-faint); }

.input-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s4);
}
.btn {
  font: inherit;
  font-size: 0.88rem;
  padding: var(--s2) var(--s4);
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { border-color: var(--ink-faint); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.examples { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s4) 0 0; }
.examples-label { font-size: 0.82rem; color: var(--ink-faint); margin-right: var(--s1); }
.chip {
  font: inherit;
  font-size: 0.8rem;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.chip:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ---------------------------------------------------------- The result */

.empty-state {
  padding: var(--s7) var(--s5);
  text-align: center;
  color: var(--ink-faint);
}
.empty-state p { margin: 0 auto; max-width: 34ch; font-size: 0.9rem; }

.score-row { display: flex; align-items: baseline; gap: var(--s3); }
.score {
  /* Serif, to match the headings, and large enough to be the first
     thing the eye lands on. Tabular figures so the number does not
     jiggle sideways while it counts up. */
  font-family: var(--serif);
  font-size: var(--t-score);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.score-of { font-size: 0.82rem; color: var(--ink-faint); }

/* One sentence, at reading size. This is the answer the visitor came
   for, so it is not a 15px bold label squeezed under the number. */
.verdict {
  margin: var(--s4) 0 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  max-width: 46ch;
}
.verdict-note {
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
  max-width: 54ch;
}

/* A thin bar, with the two thresholds marked so a reader can see where
   the bands fall rather than only learning which one they landed in. */
/* THE PROBABILITY BAR.
   Full width of the result panel and thick enough to read as a chart
   rather than a progress spinner. It carries the accent, because it is
   showing one value on one axis - not a direction, which is what the
   coral/blue pair is reserved for. */
.bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: var(--s6) 0 var(--s2);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bar-track {
  position: relative;
  height: 14px;
  background: var(--rule-soft);
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The threshold marks. These used to render as a bare "40" and "70"
   floating under the bar with nothing saying what they were, which is
   worse than having no marks at all. Each one now names itself. */
.bar-ticks {
  position: relative;
  height: 32px;
  margin-top: var(--s2);
  font-family: var(--mono);
  font-size: var(--t-label);
  color: var(--ink-faint);
}
.bar-tick {
  position: absolute;
  transform: translateX(-50%);
  text-align: center;
  line-height: 1.25;
  /* The two marks sit at 40% and 70%, so on a narrow panel their labels
     are only ~30% of the width apart. nowrap ran them into each other;
     a hard measure makes them wrap to a second line instead. */
  max-width: 11ch;
  font-size: 0.6875rem;
}
.bar-tick::before {
  content: "";
  display: block;
  width: 1px;
  height: 6px;
  margin: 0 auto var(--s1);
  background: var(--ink-faint);
}
.bar-tick b { display: block; font-weight: 400; color: var(--ink-soft); }

.caution {
  margin: var(--s4) 0 0;
  padding: var(--s3) var(--s4);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-rule);
  border-radius: var(--radius);
}

.model-line {
  margin: var(--s4) 0 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ------------------------------------------------------- The breakdown */

.breakdown { margin: 0; padding: 0; list-style: none; }
.brow {
  display: grid;
  /* 96px was two characters short once the points grew a sign, a decimal
     and the "pts" unit: "+48.4 pts" wrapped and dropped its unit onto a
     second line. Sized to the longest real string, not to a round number. */
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.brow:last-child { border-bottom: 0; }
.brow-name { font-size: 0.84rem; }
.brow-meta {
  font-family: var(--mono);
  font-size: 0.76rem;
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* A diverging axis: the zero line is the middle, bars grow either way. */
.brow-axis {
  position: relative;
  height: 10px;
  margin-top: var(--s1);
  background:
    linear-gradient(var(--rule), var(--rule)) 50% 0 / 1px 100% no-repeat;
}
.brow-bar {
  position: absolute;
  top: 2px;
  height: 6px;
  border-radius: 2px;
}
.brow-bar.toward-ghost { left: 50%; background: var(--toward-ghost); }
.brow-bar.toward-real  { right: 50%; background: var(--toward-real); }
.brow-sign { font-weight: 600; }
.toward-ghost-ink { color: var(--toward-ghost); }
.toward-real-ink  { color: var(--toward-real); }

.legend { display: flex; gap: var(--s4); margin: 0 0 var(--s3); font-size: 0.78rem; color: var(--ink-soft); }
.legend span { display: inline-flex; align-items: center; gap: var(--s1); }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch-ghost { background: var(--toward-ghost); }
.swatch-real  { background: var(--toward-real); }

/* ------------------------------------------------- Phrase highlighting */

.annotated {
  margin: 0;
  padding: var(--s4);
  max-width: none;
  font-size: 0.88rem;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  /* Matches the textarea's height, so switching views does not make the
     panel jump and shove the rest of the page around. */
  min-height: 260px;
  max-height: 420px;
  overflow-y: auto;
}
/* MARKER PEN, not a link underline.
   A wash behind the words with a heavier rule beneath, so the mark reads
   as something laid over the text. Colour is still never the only signal:
   the underline weight survives greyscale and colour blindness, which
   matters here because the two direction colours differ in hue rather
   than in lightness. */
.annotated mark {
  padding: 2px 3px;
  margin: 0 -1px;
  border-radius: 3px;
  background: none;
  color: inherit;
  box-decoration-break: clone;          /* a wrapped phrase keeps its ends */
  -webkit-box-decoration-break: clone;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: help;
}
.annotated mark.toward-ghost {
  background: var(--ghost-wash);
  text-decoration-color: var(--toward-ghost);
}
.annotated mark.toward-real {
  background: var(--real-wash);
  text-decoration-color: var(--toward-real);
}
.annotated mark { animation: mark-in 0.25s ease-out backwards; }
@keyframes mark-in { from { opacity: 0; } to { opacity: 1; } }

.missing { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.missing li {
  font-size: 0.76rem;
  padding: 2px var(--s2);
  border: 1px dashed var(--rule);
  border-radius: 999px;
  color: var(--ink-soft);
}

/* --------------------------------------------------- How it works steps */

.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--rule-soft);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-faint);
  padding-top: 2px;
}
.step h3 { margin: 0 0 var(--s1); }
.step p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }
.step-figure {
  margin: var(--s3) 0 0;
  padding: var(--s3) var(--s4);
  font-family: var(--mono);
  font-size: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow-x: auto;
}

/* ----------------------------------------------------------- Model card */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3);
  margin: 0 0 var(--s5);
  padding: 0;
  list-style: none;
}
.stat {
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.stat-value { font-family: var(--mono); font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
.stat-label { font-size: 0.82rem; font-weight: 600; margin-top: var(--s1); }
.stat-note { font-size: 0.76rem; color: var(--ink-faint); }

.feature-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.feature-table th, .feature-table td {
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.feature-table th { font-size: 0.76rem; color: var(--ink-faint); font-weight: 600; }
.feature-table td.num { font-family: var(--mono); text-align: right; white-space: nowrap; }

.plain-list { margin: 0; padding-left: var(--s5); }
.plain-list li { margin-bottom: var(--s2); font-size: 0.9rem; color: var(--ink-soft); }
.plain-list strong { color: var(--ink); }

/* --------------------------------------------------------------- Footer */

.site-footer {
  padding: var(--s6) 0 var(--s8);
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------- Phones */

@media (max-width: 640px) {
  .wrap { padding: 0 var(--s4); }
  .section { padding: var(--s7) 0; }
  #posting { min-height: 220px; }
  .brow { grid-template-columns: minmax(0, 1fr) 92px; }

  /* At 375px "How it works" wrapped onto a second line and pushed the
     header to 44px of nav inside a 60px bar. nowrap plus a tighter scale
     keeps all four controls on one row; measured at 375px, the row comes
     to 266px of the 268px available, which is the reason for the 0.8rem
     rather than a round number. */
  .site-nav { gap: var(--s3); }
  .site-nav a { font-size: 0.8rem; white-space: nowrap; }
  .theme-btn { font-size: 0.78rem; padding: var(--s1) var(--s2); }
  .wordmark { font-size: 1rem; }

  /* The panel head stacks its label above the toggle rather than letting
     a segmented control and a word count fight over 180px. */
  .panel-head { flex-wrap: wrap; row-gap: var(--s2); }
  .head-right { gap: var(--s3); }
  .view-btn { padding: var(--s1) var(--s3); }

  /* Threshold labels have far less room between 40% and 70% here. */
  .bar-tick { max-width: 9ch; font-size: 0.625rem; }
}

/* Nothing on this page moves for decoration, so honouring the preference
   is a short list: the bar stops easing and the marks stop fading. */
@media (prefers-reduced-motion: reduce) {
  .bar-fill { transition: none; }
  .annotated mark { animation: none; }
}

/* ---- Utilities that replaced inline styles -------------------------
   Inline style attributes were doing real layout work here, which put
   CSS values in the markup and made it impossible for a test to tell a
   genuine metric from a width. Everything lives in the stylesheet now,
   so index.html carries structure and nothing else. */

.noscript-wrap { padding-top: var(--s7); }
.hint-inline { font-size: 0.78rem; color: var(--ink-faint); }
.panel-stacked { margin-top: var(--s6); }
.legend-inline { margin: 0; }
.section-lede.small { font-size: 0.88rem; }
.h3-spaced { margin-top: var(--s6); }
.footer-line { margin: 0 0 var(--s2); }
.footer-line-last { margin: 0; }
.how-input {
  width: 100%;
  max-width: var(--measure);
  padding: var(--s3);
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: var(--s4);
}