/* The redesign's stylesheet.
 *
 * site.css grew page by page to twelve thousand lines, and each section of the
 * site ended up with its own dialect: numbered editorial rows on Finances, a
 * dark calculator on Tax, monospace pills on Claims. This file is the one
 * system they move onto, a page at a time. A page links either site.css or
 * this, never both, so nothing here has to fight the old cascade.
 *
 * The rules it holds to:
 *   - One face, Public Sans, for text and figures alike (tabular numerals on
 *     anything that lines up).
 *   - White ground, navy ink, one civic blue for anything you can press.
 *   - Verdicts and vote outcomes share four tones (ok, warn, bad, cool), and
 *     each tone carries an icon as well as a colour, so it reads without hue.
 *   - Every tap target is at least 44px. Phone first: most readers arrive on
 *     a phone from a link someone sent them.
 */

:root {
  --ink: #14202e;
  --ink-2: #33414f;
  --muted: #4a5868;
  --line: #dce1e7;
  --line-soft: #edf0f3;
  --ground: #ffffff;
  --surface: #f4f6f8;
  --blue: #1d4f91;
  --blue-hover: #123766;
  --blue-soft: #eaf1fa;
  --on-dark: #ffffff;
  --on-dark-muted: #c9d3dd;
  --on-dark-link: #a9c8f0;
  --band: #14202e;

  --ok-fg: #1e6b3f;   --ok-bg: #e3f2e8;   --ok-edge: #8cc7a1;   --ok-solid: #1e6b3f;
  --warn-fg: #5a3b00; --warn-bg: #fff6e0; --warn-edge: #e2b44a; --warn-solid: #8a5a00;
  --bad-fg: #8f2418;  --bad-bg: #fbe4e1;  --bad-edge: #e79a90;  --bad-solid: #a3271b;
  --cool-fg: #3e4a57; --cool-bg: #e6eaef; --cool-edge: #b9c3ce; --cool-solid: #5b6675;

  --radius: 12px;
  --gutter: 16px;
  --measure: 40rem;
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e8edf2;
    --ink-2: #c5ced8;
    --muted: #9aa7b5;
    --line: #2c3a49;
    --line-soft: #233040;
    --ground: #0f1923;
    --surface: #182533;
    --blue: #8fb8ee;
    --blue-hover: #b5d0f5;
    --blue-soft: #1b2d44;
    --band: #060c12;

    --ok-fg: #9fd9b3;   --ok-bg: #12301f;   --ok-edge: #2f6b47;   --ok-solid: #2f8a55;
    --warn-fg: #f2d38c; --warn-bg: #3a2b08; --warn-edge: #8a6a1f; --warn-solid: #a87412;
    --bad-fg: #f3aaa1;  --bad-bg: #3a1714;  --bad-edge: #8a3a30;  --bad-solid: #c2392b;
    --cool-fg: #c5ced8; --cool-bg: #222f3d; --cool-edge: #3d4c5c; --cool-solid: #6c7a8a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e8edf2; --ink-2: #c5ced8; --muted: #9aa7b5; --line: #2c3a49; --line-soft: #233040;
  --ground: #0f1923; --surface: #182533; --blue: #8fb8ee; --blue-hover: #b5d0f5; --blue-soft: #1b2d44;
  --band: #060c12;
  --ok-fg: #9fd9b3; --ok-bg: #12301f; --ok-edge: #2f6b47; --ok-solid: #2f8a55;
  --warn-fg: #f2d38c; --warn-bg: #3a2b08; --warn-edge: #8a6a1f; --warn-solid: #a87412;
  --bad-fg: #f3aaa1; --bad-bg: #3a1714; --bad-edge: #8a3a30; --bad-solid: #c2392b;
  --cool-fg: #c5ced8; --cool-bg: #222f3d; --cool-edge: #3d4c5c; --cool-solid: #6c7a8a;
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  /* Room for the fixed tab bar on phones; see .v2-tabbar. */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

a { color: var(--blue); text-underline-offset: 0.15em; }
a:hover { color: var(--blue-hover); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
p { margin: 0; }
.num { font-variant-numeric: tabular-nums; }

.v2-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ground); color: var(--ink); padding: 12px 16px; z-index: 50;
}
.v2-skip:focus { left: 8px; top: 8px; }

.v2-wrap { width: 100%; max-width: 70rem; margin: 0 auto; padding: 0 var(--gutter); }
.v2-wrap--read { max-width: calc(var(--measure) + 2 * var(--gutter)); }

/* ---------- Who runs this ----------
   On every page, above everything: most readers arrive from a link, not the
   front page, and the first thing they need is whose site this is. */

.v2-strip { background: var(--band); color: var(--on-dark); font-size: 0.875rem; line-height: 1.45; }
.v2-strip .v2-wrap { padding-top: 10px; padding-bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; }
.v2-strip strong { font-weight: 700; }
.v2-strip a { color: var(--on-dark-link); font-weight: 600; }

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

.v2-header { border-bottom: 1px solid var(--line); background: var(--ground); }
.v2-header .v2-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; }
.v2-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: 44px; }
.v2-brand:hover { color: var(--ink); }
.v2-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--band); display: grid; place-items: center; flex-shrink: 0; }
.v2-mark svg { width: 18px; height: 18px; }
.v2-brand-name { font-weight: 800; font-size: 1.0625rem; letter-spacing: -0.01em; display: block; }
.v2-brand-place { font-size: 0.75rem; color: var(--muted); display: block; line-height: 1.2; }

.v2-nav { display: none; }
@media (min-width: 900px) {
  .v2-nav { display: flex; gap: 2px; align-items: center; }
  .v2-nav a {
    padding: 10px 12px; border-radius: 8px; text-decoration: none;
    font-size: 0.9375rem; font-weight: 500; color: var(--ink-2);
  }
  .v2-nav a:hover { background: var(--surface); color: var(--ink); }
  .v2-nav a[aria-current="page"], .v2-nav a.is-section { background: var(--surface); color: var(--ink); font-weight: 700; }
}

/* ---------- Mobile tab bar ---------- */

.v2-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--ground); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.v2-tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 64px; text-decoration: none; font-size: 0.6875rem; font-weight: 500; color: var(--muted);
  border-top: 3px solid transparent;
}
.v2-tabbar a svg { width: 22px; height: 22px; }
.v2-tabbar a.is-section { color: var(--blue); font-weight: 700; border-top-color: var(--blue); }
@media (min-width: 900px) { .v2-tabbar { display: none; } }

/* ---------- Breadcrumb, labels ---------- */

.v2-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.875rem; color: var(--muted); padding-top: 18px; }
.v2-crumbs a { font-weight: 600; text-decoration: none; }
.v2-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Verdict ---------- */

.v2-tone-ok   { --t-fg: var(--ok-fg);   --t-bg: var(--ok-bg);   --t-edge: var(--ok-edge);   --t-solid: var(--ok-solid); }
.v2-tone-warn { --t-fg: var(--warn-fg); --t-bg: var(--warn-bg); --t-edge: var(--warn-edge); --t-solid: var(--warn-solid); }
.v2-tone-bad  { --t-fg: var(--bad-fg);  --t-bg: var(--bad-bg);  --t-edge: var(--bad-edge);  --t-solid: var(--bad-solid); }
.v2-tone-cool { --t-fg: var(--cool-fg); --t-bg: var(--cool-bg); --t-edge: var(--cool-edge); --t-solid: var(--cool-solid); }

.v2-pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 0.75rem; font-weight: 700; padding: 3px 10px 3px 6px; border-radius: 999px;
  color: var(--t-fg); background: var(--t-bg);
}
.v2-pill svg { width: 14px; height: 14px; flex-shrink: 0; }

.v2-verdict {
  border: 2px solid var(--t-edge); background: var(--t-bg); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.v2-verdict-head { display: flex; align-items: center; gap: 12px; }
.v2-verdict-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--t-solid); display: grid; place-items: center; flex-shrink: 0; }
.v2-verdict-icon svg { width: 20px; height: 20px; }
.v2-verdict-label { font-size: 1.3125rem; font-weight: 800; color: var(--t-fg); line-height: 1.15; }
.v2-verdict-meaning { font-size: 0.875rem; color: var(--t-fg); }
.v2-verdict-ruling { font-size: 1.0625rem; line-height: 1.5; color: var(--ink); }

/* ---------- Buttons ---------- */

.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: 10px; border: 1px solid transparent;
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; text-decoration: none;
}
.v2-btn svg { width: 18px; height: 18px; }
.v2-btn--primary { background: var(--blue); color: var(--ground); }
.v2-btn--primary:hover { background: var(--blue-hover); color: var(--ground); }
.v2-btn--quiet { background: var(--ground); color: var(--ink); border-color: var(--cool-edge); font-weight: 600; }
.v2-btn--quiet:hover { background: var(--surface); color: var(--ink); }

/* ---------- Fact check page ---------- */

.v2-check { display: flex; flex-direction: column; gap: 26px; padding: 14px 0 40px; }
.v2-check-claim { display: flex; flex-direction: column; gap: 10px; }
.v2-check-claim h1 { font-size: clamp(1.625rem, 5.5vw, 2.25rem); font-weight: 800; letter-spacing: -0.015em; }
.v2-check-quote { margin: 0; font-size: 1.125rem; line-height: 1.5; color: var(--ink-2); border-left: 0; }
.v2-check-quote::before { content: "What's being said: "; font-weight: 700; color: var(--ink); }
.v2-check-seen { font-size: 0.875rem; color: var(--muted); }

.v2-section { display: flex; flex-direction: column; gap: 10px; }
.v2-section > h2 { font-size: 1.1875rem; font-weight: 800; }
.v2-section > p { font-size: 1.0625rem; }
.v2-dot-h { display: flex; align-items: center; gap: 8px; }
.v2-dot-h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--t-solid); flex-shrink: 0; }

.v2-figs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.v2-fig { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; background: var(--surface); border-radius: 10px; }
.v2-fig-text { display: flex; flex-direction: column; gap: 2px; }
.v2-fig-label { font-size: 0.9375rem; font-weight: 600; }
.v2-fig-note { font-size: 0.8125rem; color: var(--muted); }
.v2-fig-value { font-size: 1.1875rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.v2-note { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; font-size: 0.9375rem; color: var(--ink-2); }

.v2-sources { display: flex; flex-direction: column; gap: 10px; }
.v2-source { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.v2-source blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.5; }
.v2-source-note { font-size: 0.875rem; color: var(--muted); }
.v2-source figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; color: var(--muted); }
.v2-source-who { color: var(--ink-2); font-weight: 600; }
.v2-source-links { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: 22px; background: var(--blue-soft); text-decoration: none; font-weight: 700; font-size: 0.875rem;
}

.v2-share { display: flex; flex-wrap: wrap; gap: 10px; }
.v2-share .v2-btn--primary { flex: 1 1 12rem; }

.v2-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v2-list li { border-bottom: 1px solid var(--line-soft); }
.v2-list a { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; text-decoration: none; color: var(--ink); }
.v2-list a:hover .v2-list-title { color: var(--blue); }
.v2-list-title { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.v2-more { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }

.v2-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

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

.v2-footer { border-top: 1px solid var(--line); margin-top: 24px; padding: 20px 0 28px; font-size: 0.875rem; color: var(--muted); }
.v2-footer .v2-wrap { display: flex; flex-direction: column; gap: 8px; }
.v2-footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.v2-footer a { display: inline-flex; align-items: center; min-height: 32px; }

@media print {
  .v2-strip, .v2-tabbar, .v2-share, .v2-nav { display: none; }
  body { padding-bottom: 0; }
}