/* ---------------------------------------------------------------------------
   Capex Watch — the whole site's styling, in one file.

   Until 11 Sept 2026 every page carried its own copy of this: the palette was
   pasted into fifteen pages, the base typography into fourteen. That is how
   drift starts — one page gets a corrected colour and fourteen do not, and
   nothing on the rendered page shows it. scripts/check-pages.py now fails the
   deploy if a page declares a token this file owns.

   A page may still carry its own <style>, and several do, but only for
   something that page alone has: a chart, a widget, the revision note. Rules
   that describe how the site looks belong here.

   TWO SCALES, ONE DESIGN. The default is the article scale — the eight
   company pages, the FAQ, the reading list, the opt-out page, the ledger.
   index.html and tracking.html (the essay and the scoreboard) run larger and
   wider; they set class="main" on <html>, and everything that changes for them
   sits in the one block near the foot of this file, so the difference between
   the two scales reads as a list instead of having to be hunted for.

   Writing a page-local override? A page's own <style> comes after this link,
   so an equally specific rule in it wins, as you would expect. The one trap
   is the `.main` block: `.main p` outranks a plain `.poolcaption` in a page's
   block, because the class makes it more specific. If a value needs to stay
   overridable, hold it in a variable instead — that is what --para-gap and
   --prose-width below are for, and why they exist at all.
   --------------------------------------------------------------------------- */

:root {
  --paper: #F8DFDB;        /* RAAK blush */
  --ink: #0F0F0F;
  --muted: #6E5B57;
  --hairline: #E6C4BC;
  --capital: #FC221C;      /* RAAK red — capital, warnings */
  --capital-soft: #FCD8D4;
  --labour: #401210;       /* RAAK dark maroon — labour */
  --labour-soft: #EBD2CC;
  --amber: #B4690E;
  --amber-soft: #F3E0CE;
  --card: #FDF3F0;
  --serif: "orpheus-pro", "Cormorant Garamond", Georgia, serif;
  --sans: "adobe-garamond-pro", "EB Garamond", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;

  /* The paragraph gap and the prose measure are the only two scale values
     held as variables rather than overridden under `.main` below. They have
     to be: a `.main p` rule would outrank `footer p` and `.claim`, which a
     plain `p` rule does not, and every page relied on that order before this
     file existed. Read them as "the default scale"; `html.main` resets both. */
  --para-gap: 16px;
  --prose-width: none;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Only the two long pages have in-page links worth animating. */
html.main { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 700px; margin: 0 auto; padding: 0 20px; }
.wide { max-width: 860px; margin: 0 auto; padding: 0 20px; }
a { color: var(--capital); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- header ---------- */
header { padding: 56px 0 44px; border-bottom: 1px solid var(--hairline); }
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 24px;
}
.kicker a { color: var(--muted); }
/* site nav: the companion pages are only reachable from here and the footer,
   so the links stay legible rather than decorative */
.sitenav { margin-bottom: 28px; }
.sitenav a { color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.sitenav a:hover { color: var(--ink); border-bottom-color: currentColor; }
.sitenav span { opacity: 0.5; margin: 0 8px; }
h1 {
  color: var(--capital); font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 5vw, 46px); line-height: 1.12; margin-bottom: 18px;
}
.standfirst {
  font-family: var(--serif); font-size: 20px; font-weight: 400;
  line-height: 1.5; color: #35302E;
}

/* ---------- stat strip ---------- */
.statstrip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline); margin-top: 40px;
}
.stat { background: var(--paper); padding: 18px 16px; }
.stat small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 6px; }
.stat b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.stat span { font-size: 13px; color: var(--muted); line-height: 1.45; display: block; }

/* ---------- sections ---------- */
section { padding: 44px 0 4px; }
.clause {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--capital); margin-bottom: 14px;
}
h2 {
  color: var(--capital); font-family: var(--serif); font-weight: 400;
  font-size: 25px; line-height: 1.25; margin-bottom: 14px;
}
p { margin-bottom: var(--para-gap); max-width: var(--prose-width); }
p.note { font-size: 14px; color: var(--muted); }
.claim {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  line-height: 1.45; margin-bottom: 16px; max-width: 620px;
}

/* ---------- panels & controls ---------- */
.panel { background: var(--card); border: 1px solid var(--hairline); padding: 28px 26px; margin: 30px 0 26px; }
.ctl { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.ctl label { font-size: 14px; color: var(--muted); min-width: 168px; }
.ctl output { font-family: var(--mono); font-size: 14px; font-weight: 500; min-width: 64px; text-align: right; }
input[type=range] {
  flex: 1; min-width: 140px; appearance: none; height: 2px;
  background: #D9B4AC; outline-offset: 6px; cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink); cursor: grab;
}
input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ink); border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink); cursor: grab;
}
input[type=range]:focus-visible { outline: 2px solid var(--capital); }
button:focus-visible { outline: 2px solid var(--capital); outline-offset: 2px; }

.readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 20px 0 6px; }
.readout .cell { background: var(--paper); border: 1px solid var(--hairline); padding: 14px 16px; }
.readout .cell small { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.readout .cell b { font-family: var(--mono); font-size: 23px; font-weight: 500; }

.legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.legend i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; }

.pooltoggle { display: inline-flex; border: 1px solid var(--ink); margin-bottom: 22px; }
.pooltoggle button {
  font-family: var(--mono); font-size: 13px; padding: 10px 18px;
  background: var(--paper); color: var(--ink); border: none; cursor: pointer;
}
.pooltoggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* The revenue-floor bar: the front page's §2 draws it, and since 11 Sept
   2026 so does debt.html, which splits the return segment in two. The
   geometry and the three shared segments live here; a page that adds a
   segment styles only that one. */
.floorbar { display: flex; height: 46px; border: 1px solid var(--hairline); background: var(--paper); overflow: hidden; }
.floorbar div { transition: width 0.25s ease; min-width: 2px; }
.fb-dep { background: var(--capital); }
.fb-opx { background: #B98A93; }
.fb-ret { background: var(--amber); }
.floortotal { font-family: var(--mono); font-size: 15px; margin-top: 12px; }
.floortotal b { font-size: 22px; font-weight: 500; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 10px; }
th {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); text-align: left;
  padding: 9px 12px 9px 0; border-bottom: 1px solid var(--ink);
}
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
td.m { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.beat { color: var(--labour); }
.miss { color: var(--capital); }

/* Slope sparklines: the pace a company is actually growing at against the
   ~40%/yr the revenue floor requires. Static SVG angles, no JS — redrawn by
   hand when a print lands. `white-space: normal` is load-bearing: on the
   company pages the sparkline sits inside a td.m, which is nowrap. */
.slope { display: inline-flex; align-items: center; gap: 8px; margin-top: 5px; }
.slope svg { flex: none; }
.slope small { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: normal; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--ink); margin-top: 64px; padding: 36px 0 72px; font-size: 14px; color: var(--muted); }
footer p { font-size: 14px; margin-bottom: 12px; }

/* ---------------------------------------------------------------------------
   The larger scale — index.html and tracking.html only, via class="main" on
   <html>. Same design, more air and bigger type: these two are read start to
   finish, the rest are looked things up in.
   --------------------------------------------------------------------------- */
html.main { --para-gap: 18px; --prose-width: 640px; }
.main body { font-size: 17px; }
.main header { padding: 72px 0 56px; }
.main .kicker { margin-bottom: 28px; }
.main h1 { font-size: clamp(38px, 6vw, 58px); line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 22px; }
.main .standfirst { font-size: 21px; max-width: 560px; }
.main .statstrip { margin-top: 48px; }
.main .stat { padding: 20px 18px; }
.main .stat b { font-family: var(--mono); font-size: 26px; font-weight: 500; }
.main .stat span { line-height: 1.4; }
.main section { padding: 64px 0 8px; }
.main h2 { font-size: clamp(26px, 4vw, 34px); line-height: 1.2; margin-bottom: 18px; }
.main table { margin: 26px 0; }
.main th { padding: 10px 12px 10px 0; }
.main td { padding: 12px 12px 12px 0; line-height: 1.5; }
.main td.date { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.main td b { font-weight: 600; }
.main .slope { margin-top: 7px; }
.main footer { margin-top: 72px; padding: 40px 0 80px; }

/* ---------- phones ---------- */
@media (max-width: 620px) {
  .statstrip { grid-template-columns: 1fr; }
  .ctl label { min-width: 100%; }
  /* a numeric table scrolls in place rather than crushing its columns */
  table { display: block; overflow-x: auto; }

  /* The scoreboard's watch list is prose, not numbers: three columns are
     unreadable at phone width, so each row stacks as a card and the date
     becomes a small mono label. */
  .main table { overflow-x: visible; }
  .main thead { display: none; }
  .main table, .main tbody, .main tr, .main td { display: block; width: 100%; }
  .main tr { border-bottom: 1px solid var(--ink); padding: 10px 0 12px; }
  .main td { border-bottom: none; padding: 2px 0; }
  .main td.date { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

  .main header { padding: 48px 0 36px; }
  .main section { padding: 44px 0 8px; }

  /* Charts: shrinking an 820-unit viewBox to phone width makes internal labels
     about 6px, so instead keep the chart near full size and let it scroll
     sideways inside its own container (the page itself never scrolls x). This
     is why every scrollable chart carries class="chart" — the rule used to
     list the charts by id, and a new chart added without touching that list
     got no mobile handling at all. */
  *:has(> .chart) { overflow-x: auto; }
  .chart { min-width: 640px; }
}
