:root {
  --bg: #ffffff; --fg: #16181d; --muted: #5b6270; --line: #e2e5ea;
  --accent: #2f6f4f; --warn: #8a5a00; --warn-bg: #fff8e6; --danger: #a12b2b;
  --bar: #2f6f4f; --bar-2: #8fb3a1; --cap: #a12b2b;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#14161a; --fg:#e8eaee; --muted:#9aa2b1; --line:#2a2e36;
    --accent:#7dc9a0; --warn:#e0b464; --warn-bg:#2a2415; --danger:#e08585;
    --bar:#7dc9a0; --bar-2:#3f6553; --cap:#e08585; }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0 1.25rem 4rem; background: var(--bg); color: var(--fg);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", "Noto Sans SC", sans-serif;
}
header, main, footer { max-width: 60rem; margin: 0 auto; }
header { padding: 2.5rem 0 1rem; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: .01em; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 .75rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.tagline { color: var(--muted); margin: 0 0 1rem; }
.statusbar { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--accent); margin-right: .4em; }
.dot.stale { background: var(--warn); }

#fixture-banner {
  background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn);
  padding: .6rem .9rem; margin: 1rem auto 0; max-width: 60rem; font-size: .9rem; border-radius: 4px;
}
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.figure .n { font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.figure .l { color: var(--muted); font-size: .9rem; }
.figure .s { color: var(--muted); font-size: .78rem; }

.card { border: 1px solid var(--line); border-radius: 6px; padding: 1rem 1.1rem; margin: 1rem 0; }
.card h3 { margin: 0 0 .5rem; font-size: 1rem; }
.card .why { color: var(--muted); font-size: .87rem; margin: .35rem 0 0; }
.ok { color: var(--accent); font-weight: 600; }
.pending { color: var(--warn); font-weight: 600; }

.caveat {
  border: 1px solid var(--warn); background: var(--warn-bg); color: var(--warn);
  padding: .7rem .9rem; border-radius: 4px; font-size: .87rem; margin: .8rem 0 0;
}
details { border: 1px solid var(--line); border-radius: 6px; padding: .7rem 1rem; }
details summary { cursor: pointer; font-weight: 600; }
blockquote { margin: 0 0 1rem; padding: .8rem 1rem; border-left: 3px solid var(--line); color: var(--muted); font-size: .92rem; }
blockquote em { color: var(--fg); font-style: normal; }

table { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
.chart-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
/* An SVG that scales with the container keeps its aspect ratio, so on a phone
   the whole drawing — including the labels — shrinks with it: at 346 px the
   denomination chart renders its 11 px labels at 4.4 px, which is not "tight",
   it is unreadable. No amount of overflow or clipping measurement catches
   that, because nothing overflows and nothing is clipped. So the charts keep
   a legible floor and the wrapper scrolls instead. */
.chart-wrap svg { width: 100%; min-width: 34rem; }
.chart-wrap.wide svg { min-width: 44rem; }
svg { display: block; max-width: 100%; height: auto; }
svg text { fill: var(--muted); font-size: 11px; }
svg text.val { fill: var(--fg); }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
code { font-size: .85em; }

/* --- topbar + language toggle ------------------------------------------- */
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.lang {
  flex: none; border: 1px solid var(--line); background: transparent; color: var(--fg);
  border-radius: 999px; padding: .3rem .9rem; font: inherit; font-size: .85rem; cursor: pointer;
}
.lang:hover { border-color: var(--accent); color: var(--accent); }

/* --- self-check tool ----------------------------------------------------- */
.local-badge {
  margin: 0 0 .9rem; font-size: .87rem; color: var(--accent);
  border-left: 3px solid var(--accent); padding-left: .7rem;
}
.field { display: block; }
.field > label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .4rem; }
.input-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.input-row input {
  flex: 1 1 12rem; min-width: 8rem; padding: .5rem .7rem; font: inherit;
  font-variant-numeric: tabular-nums; border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg); color: var(--fg);
}
.input-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.input-row .unit { color: var(--muted); font-size: .9rem; }
.input-row button {
  border: 1px solid var(--accent); background: var(--accent); color: var(--bg);
  border-radius: 4px; padding: .5rem 1.2rem; font: inherit; cursor: pointer;
}
.input-row button:hover { filter: brightness(1.08); }
tr.warn td { color: var(--danger); font-weight: 600; }
tr.thin td { color: var(--warn); }
th { color: var(--muted); font-weight: 500; font-size: .82rem; }
ul, ol { margin: .4rem 0 0; padding-left: 1.2rem; }
li { margin: .25rem 0; }

/* --- narrow screens ------------------------------------------------------
   390 px is the real constraint: two headline numbers side by side and a
   right-aligned value column both overflow there, and an overflowing number
   is worse than a wrapped one — it silently truncates the digits. */
@media (max-width: 34rem) {
  body { padding: 0 .9rem 3rem; }
  .figures { grid-template-columns: 1fr; gap: 1.1rem; }
  .figure .n { font-size: 1.55rem; }
  .statusbar { line-height: 1.5; }

  /* Key/value tables stack: label on its own line, value under it, both
     left-aligned. Horizontal scrolling for a two-column table is a worse
     answer than stacking — the value is the thing people came for. */
  table.kv, table.kv tbody, table.kv tr, table.kv td { display: block; width: 100%; }
  table.kv tr { padding: .45rem 0; border-bottom: 1px solid var(--line); }
  table.kv td { border: 0; padding: 0; text-align: left; }
  table.kv td:first-child { color: var(--muted); font-size: .85rem; }
  table.kv td:last-child { font-size: 1rem; margin-top: .15rem; }

  .card { padding: .8rem .75rem; }
  h2 { font-size: 1.05rem; }
  h1 { font-size: 1.35rem; }
  .card h3 { font-size: .95rem; }
  .chart-wrap { margin: 0 -.75rem; padding: 0 .75rem; }
}

/* Long unbroken strings (hashes, ISO timestamps, grouped numbers) must wrap
   rather than push the page sideways. */
.statusbar, .figure .n, .figure .s, td, th, .why, .caveat, blockquote, li, h1, h2, h3 {
  overflow-wrap: anywhere;
}

/* Nothing may be wider than its container. Grid and flex children default to
   `min-width: auto`, which lets a long word or a wide table push the whole
   page sideways; the headline figures and the cards are exactly that shape. */
.figure, .figure > *, .card, .card > *, .chart-wrap, main > section, blockquote {
  min-width: 0;
  max-width: 100%;
}
svg, table, img { max-width: 100%; }

/* Deliberately NOT `body { overflow-x: hidden }`. Hiding the overflow turns a
   layout bug into missing content: the text is still off-screen, but now
   nobody can scroll to it and nobody can see that anything is wrong. If
   something does overflow, it should be visible and reachable. */