/* AfricanMutualFunds.com — league table
   Mobile-first. No build step, no framework. */

/* ------------------------------------------------------------------
   Fonts — self-hosted IBM Plex, so the page keeps its typography
   offline and over file:// with no third-party request. Every rule
   below has a system fallback in the stacks further down, so the page
   never depends on a font actually loading.

   latin-ext carries U+20A0–U+20AB, which is where the naira sign (₦)
   lives — do not drop that subset.
   IBM Plex Sans ships as a variable font: one file, weights 100–700.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('fonts/plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plex-sans-cond-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/plex-sans-cond-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0E1A14;
  --green: #0B5C3E;
  /* Sampled off logo.png rather than picked to be near it, so the word
     and the mark beside it are the same gold and not two. */
  --gold: #D9B74C;
  --in: #12A150;
  --out: #C0392B;
  --paper: #FFFFFF;
  --line: #E3E7E4;
  --line-strong: #C9D1CC;
  --muted: #6B7A72;
  --wash: #F6F8F7;

  --display: "IBM Plex Sans Condensed", "Helvetica Neue Condensed",
             "Arial Narrow", Helvetica, Arial, sans-serif;
  --body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono",
          Menlo, Consolas, "Liberation Mono", monospace;

  --pad: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

/* A class that sets `display` beats the user-agent's [hidden] rule, which is
   how a hidden .btn stays on screen. Settle it once, here. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
}

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

a { color: var(--green); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Offset vertically, not horizontally: a negative `left` would extend
   the document's scroll area and give the page a sideways scroll. */
.skip {
  position: absolute;
  left: 0;
  top: -60px;
  z-index: 60;
  background: var(--green);
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 0; }

/* ---------- numerals ---------- */

.num, .price, .stat-value, .tile-value, td.cell, th .lbl {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.num {
  font-family: var(--mono);
  letter-spacing: -0.01em;
}
.pos { color: var(--in); }
.neg { color: var(--out); }
.lock-cell { color: var(--muted); letter-spacing: 0.14em; }
/* A dash is not an envelope. A column the board carries but this fund has
   no figure for must not look like the two columns nobody is sent. */
.no-value { color: var(--muted); }
.lock-flow { color: var(--muted); font-family: var(--body); font-size: 12px; white-space: nowrap; }

/* ---------- 1. header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--pad);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
/* MUTUAL is the gold of the mark it sits beside, so the masthead reads
   as one thing rather than a gold logo next to a green word. Gold on
   white is about 1.9:1, well under what body text needs — this is a
   logotype, the brand's own name set beside its mark, which is the case
   the contrast rules exempt. It is not a licence to use gold for
   anything that has to be read: nothing else on the site takes it. */
.wordmark span { color: var(--gold); }

/* The mark sits with the wordmark, not instead of it: the words are the
   name and stay readable at any size.

   Height is tied to the wordmark's own size so the sticky bar keeps the
   height the table's sticky offsets are measured against. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mark {
  width: auto;
  height: 1.55em;
  flex: 0 0 auto;
  /* The source is a 4:3-ish bitmap; let the browser scale it smoothly
     rather than nearest-neighbour it on a hi-dpi screen. */
  image-rendering: auto;
}

/* ---------- small in-flow buttons ---------- */

.linkish {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 400;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 4px;
  text-decoration: underline;
  cursor: pointer;
}
.linkish:hover { color: var(--ink); }
.linkish[disabled] { opacity: .5; cursor: default; }

.stat-fund {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 11px 16px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--green);
  border-radius: 3px;
  cursor: pointer;
}
.btn-solid { background: var(--green); color: #fff; }
.btn-ghost { background: var(--paper); color: var(--green); }
.btn-sm { padding: 8px 12px; font-size: 13px; white-space: nowrap; }
.btn-solid:hover { background: #094B32; }
.btn-ghost:hover { background: var(--wash); }

/* ---------- 2. status ---------- */

.status {
  padding: 14px var(--pad) 6px;
}
.status-line {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.status-line .dot { padding: 0 2px; }
#last-update { font-family: var(--mono); color: var(--ink); }
.status-offer {
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45;
}

/* ---------- 3. filters ---------- */

.controls { padding: 12px var(--pad) 0; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.chip:hover { border-color: var(--green); }
.chip[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.search { display: block; margin-top: 10px; }
.search input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.search input::placeholder { color: var(--muted); }

/* Locked, until this browser has registered. The input keeps its place
   in the layout rather than being swapped out, so the box a reader
   remembers is where they left it once they come back. */
.search { position: relative; }
.search input:disabled {
  background: var(--wash);
  color: transparent;              /* the lock button carries the words */
  cursor: pointer;
}
.search input:disabled::placeholder { color: transparent; }

/* Drawn over the disabled input rather than inside it: a disabled input
   takes no clicks, and the whole point of this one is to be clickable. */
.search-lock {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-family: var(--body);
  font-size: 15px;
  text-align: left;
  color: var(--green);
  background: transparent;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.search-lock::before {
  content: '\2709';
  font-size: 15px;
  line-height: 1;
}
.search-lock:hover { text-decoration: underline; }

/* The terms of registering, in the place the tickbox used to be and at
   the size it used to be. Quieter than the lead above it: this is the
   small print a reader checks, not the pitch. */
.digest-terms {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}

/* ---------- 4. year strip ---------- */

.years { margin-top: 12px; }
.years-scroll {
  display: flex;
  gap: 6px;
  padding: 0 var(--pad) 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.year {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 11px;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.year:hover { border-color: var(--green); }
.year-current {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  cursor: default;
}
.year-past { color: var(--muted); }
.year-all { border-color: var(--green); color: var(--green); }

/* ---------- 5. league table ---------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

table.league {
  width: 100%;
  /* Sized so 1Y — the one column the free tier actually fills in — lands
     inside a 390px screen without scrolling. Widened at 620px up. */
  min-width: 610px;
  border-collapse: collapse;
}

table.league th {
  /* Keeps any absolutely positioned child inside the scroll container
     rather than measuring against the viewport. */
  position: relative;
  padding: 0;
  text-align: right;
  vertical-align: bottom;
  background: var(--wash);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.league th:first-child { text-align: left; }

.th-inner {
  display: block;
  width: 100%;
  padding: 10px 9px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 0;
  text-align: inherit;
}
button.th-inner { cursor: pointer; }
button.th-inner:hover { color: var(--green); }
.th-sorted { color: var(--ink); }
.th-arrow { font-family: var(--mono); padding-left: 3px; }
.th-lock { padding-left: 4px; font-size: 10px; }

table.league td {
  padding: 11px 9px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-size: 14px;
}
/* Pinned, not merely floored. The table is wider than a phone and the
   browser hands the slack to the first column, which pushed the ranking
   column past the right edge of a 390px screen — the one number a reader
   needs without scrolling sideways. Fixing the width keeps the numbers
   where they can be reached; the wider layouts below relax it. */
table.league td.fund,
table.league th:first-child {
  width: 176px;
  min-width: 176px;
  max-width: 176px;
}
table.league td.fund { text-align: left; white-space: normal; }

/* The fund name stays put while the numbers scroll under it — on a 390px
   screen 1Y sits off to the right, and losing the name to reach it makes
   the row unreadable. */
table.league th:first-child,
table.league td.fund {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--paper);
  border-right: 1px solid var(--line);
}
table.league th:first-child { z-index: 3; background: var(--wash); }

tr.row { cursor: pointer; }
tr.row:hover td,
tr.row:hover td.fund { background: var(--wash); }
tr.row:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.fund-name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}
.fund-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}
.usd-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green);
  background: #EAF3EF;
  border-radius: 2px;
  vertical-align: 1px;
}

.empty { padding: 28px 12px; text-align: center; color: var(--muted); }

/* ---------- currency sheets ---------- */

tr.sheet-head th {
  position: static;
  padding: 10px 9px 8px;
  text-align: left;
  background: var(--wash);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line-strong);
}
tr.sheet-head:first-child th { border-top: 0; }

.sheet-label {
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.sheet-note {
  margin-left: 8px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

/* ---------- 6. under the table ---------- */

.fold-actions {
  padding: 12px var(--pad) 0;
}
.fold-toggle {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--green);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 8px 14px;
  cursor: pointer;
}
.fold-toggle:hover { background: var(--wash); }

/* ---------- advertising ---------- */

/* An unsold slot is `hidden` and draws nothing at all — no border, no
   reserved height, no "your ad here". The page has to look finished when
   nothing is sold. */
.ad-slot {
  padding: 22px var(--pad) 4px;
  text-align: center;
}
.ad-label {
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
/* Never wider than the column it sits in, and never taller than a strip:
   an advert that outsizes the board stops being an advert on a league
   table and becomes a page with a table underneath it. */
.ad-slot img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 160px;
  height: auto;
  border-radius: 3px;
}
.ad-slot a { display: inline-block; }
.fold-toggle:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.rowcount {
  padding: 12px var(--pad) 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}
.rename-mark {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  line-height: 0;
}
.renames {
  padding: 10px var(--pad) 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 78ch;
}
.modal-formerly {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.explainer {
  padding: 6px var(--pad) 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 60ch;
}

/* ---------- 7. marketing ---------- */

.pitch {
  margin-top: 32px;
  padding: 28px var(--pad);
  background: var(--wash);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.display {
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.02;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.pitch > p {
  margin-top: 14px;
  max-width: 58ch;
  font-size: 14px;
  color: #33443C;
}

.stats {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}
.stat {
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.stat-value.in { color: var(--in); }
.stat-value.out { color: var(--out); }
.stat-lock { margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---------- 8. what's free, and what isn't ---------- */

#data, #corrections { padding: 30px var(--pad); }

/* ---------- this week's cards ---------- */

#cards { padding: 30px var(--pad); border-top: 1px solid var(--line); }
.cards-lead { margin-top: 10px; max-width: 62ch; font-size: 14px; }

.card-grid {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.card-tile { min-width: 0; }

/* The frame is the card's own edge, not a shadow: the image is already a
   dark-ruled sheet on white, and a second border round it reads as two
   frames. One hairline, and the picture does the rest. */
.card-shot {
  display: block;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  overflow: hidden;
  background: var(--wash);
}
.card-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.card-shot:hover { border-color: var(--green); }

.card-meta { margin-top: 8px; }

.card-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.card-name:hover { color: var(--green); }

.card-links {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.card-links a { color: var(--muted); }
.card-links a:hover { color: var(--green); }
.card-links .linkish { padding: 0; font-size: 13px; }

.cards-empty {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 14px;
  color: var(--muted);
}

.cards-status {
  margin-top: 14px;
  padding: 10px 12px;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.5;
  background: #EAF3EF;
  border-left: 3px solid var(--green);
  border-radius: 0 3px 3px 0;
}
.cards-status.is-error {
  background: #FBEDEB;
  border-left-color: var(--out);
}

/* ---------- the week's ranking by email ---------- */

#digest {
  padding: 30px var(--pad);
  background: var(--wash);
  border-top: 1px solid var(--line);
}
.digest-lead { margin-top: 10px; max-width: 62ch; font-size: 14px; }

.digest-form { margin-top: 16px; max-width: 520px; }

/* Stacked on a phone, side by side the moment there is room. The button
   never shrinks below its label — a "Send it to me" clipped to "Send it"
   is the kind of thing that only shows up on the one device nobody
   tested. */
.digest-row { display: flex; flex-wrap: wrap; gap: 8px; }
.digest-row input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}
.digest-row input::placeholder { color: var(--muted); }
.digest-row input:disabled { color: var(--muted); background: var(--wash); }
.digest-row .btn { flex: 0 0 auto; }

.digest-repeat {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 14px;
  cursor: pointer;
}
.digest-repeat input { width: 16px; height: 16px; accent-color: var(--green); }

/* Reserved by `hidden` until there is something to say, so the block does
   not sit empty pushing the note down. */
.digest-status {
  margin-top: 12px;
  padding: 10px 12px;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.5;
  background: #EAF3EF;
  border-left: 3px solid var(--green);
  border-radius: 0 3px 3px 0;
}
.digest-status.is-error {
  background: #FBEDEB;
  border-left-color: var(--out);
}

.digest-note {
  margin-top: 14px;
  max-width: 62ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* The registered half. Same geometry as the form it replaces, so the
   section does not jump height when the server answers. */
.digest-known { margin-top: 16px; max-width: 520px; }

.digest-who { font-size: 14px; }
.digest-who strong { font-variant-numeric: tabular-nums; }
.digest-who .linkish { margin-left: 6px; font-size: 13px; }

.digest-known .digest-row { margin-top: 10px; }

.digest-weekly-on {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
}

.cards { display: grid; gap: 14px; margin-top: 18px; }

.card {
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--paper);
}
.card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  text-transform: uppercase;
}
.price {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 21px;
  font-weight: 600;
  color: var(--green);
}
.price-alt {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
}
/* Neither is a number, so neither is set in the figure face. */
.price-enq,
.price-free { font-family: var(--body); font-size: 17px; }
.card-kicker { margin-top: 4px; font-size: 13px; color: var(--muted); }
.billed { margin-top: 4px; font-size: 13px; color: var(--muted); }
.billed strong { color: var(--ink); font-family: var(--mono); font-variant-numeric: tabular-nums; }

.ticks { margin: 14px 0 0; padding: 0; list-style: none; }
.ticks li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.45;
}
.ticks li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--green);
}

.card-help {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.card-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.card-actions .btn { flex: 1 1 auto; }

/* ---------- 9. corrections ---------- */

#corrections {
  background: var(--wash);
  border-top: 1px solid var(--line);
}
#corrections p { margin-top: 12px; max-width: 62ch; font-size: 14px; }

/* ---------- 10. footer ---------- */

.site-footer {
  padding: 28px var(--pad) 40px;
  background: var(--ink);
  color: #C6D2CB;
  font-size: 13px;
}
/* The mark closes the page as well as opening it. Gold was always going
   to look better here than in the white header — this is the one dark
   surface on the site, and the one place the logo is not fighting the
   ground it sits on. */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.footer-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
}
/* The bright green, not the deep one: the deep brand green is a link
   colour on white and near-invisible on ink. */
.footer-name span { color: var(--in); }

.footer-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.site-footer p { margin-top: 10px; max-width: 62ch; line-height: 1.55; }
.site-footer strong { color: #fff; font-variant-numeric: tabular-nums; }
.footer-terms { margin-top: 10px; font-size: 13px; }
.footer-warn { font-weight: 700; color: #fff; }
.footer-contact { color: #C6D2CB; }
.site-footer a { color: #8FD9B4; }

/* ---------- modal ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(14, 26, 20, 0.55);
  padding: 0;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 18px 24px;
  background: var(--paper);
  border-radius: 6px 6px 0 0;
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.modal-close:hover { color: var(--ink); background: var(--wash); }

.modal-name {
  padding-right: 34px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
}
.modal-meta { margin-top: 6px; font-size: 13px; color: var(--muted); }

.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 18px;
}
.tile {
  padding: 12px 10px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 3px;
}
.tile-locked { background: var(--wash); }
.tile-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.3;
}
.tile-value {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 19px;
  font-weight: 600;
}
.tile-lock { font-size: 17px; }
.tile-sub { margin-top: 2px; font-size: 11px; color: var(--muted); min-height: 1em; }

.modal-panel {
  margin-top: 18px;
  padding: 16px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.modal-panel h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
}
.modal-panel p { margin-top: 6px; font-size: 13px; color: var(--muted); }

body.modal-open { overflow: hidden; }

/* ---------- wider screens ---------- */

@media (min-width: 620px) {
  :root { --pad: 24px; }
  table.league { min-width: 720px; }
  table.league td { padding: 11px 12px; }
  table.league td.fund,
  table.league th:first-child { width: 220px; min-width: 220px; max-width: 220px; }
  .th-inner { padding-left: 12px; padding-right: 12px; }
  body { font-size: 16px; }
  .wordmark { font-size: 20px; }
  .display { font-size: 44px; }
  .section-title { font-size: 30px; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .search { margin-top: 0; flex: 1 1 220px; }
  .modal-backdrop { align-items: center; padding: 20px; }
  .modal { border-radius: 6px; }
}

@media (min-width: 900px) {
  :root { --pad: 40px; }
  .display { font-size: 56px; }
  .cards { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .card-grid { grid-template-columns: repeat(4, 1fr); }
  table.league { min-width: 0; }
}

/* ---------- terms ---------- */

.legal { padding: 34px var(--pad) 72px; max-width: 660px; }
.legal-lede {
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.legal h2 {
  margin-top: 34px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.legal p { margin-top: 12px; font-size: 15px; line-height: 1.6; }
.legal-list { margin: 12px 0 0; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.legal-list li { margin-top: 10px; }

/* The two paragraphs a reader must not skim past: what a refund does to
   their access, and that none of this is advice. */
.legal-note,
.legal-warn {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--green);
  background: var(--wash);
}
.legal-warn {
  border-left-color: var(--out);
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.legal-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
  font-size: 14px;
}
.legal-table th,
.legal-table td {
  padding: 9px 10px 9px 0;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-table td:nth-child(2) {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.legal .card-actions { margin-top: 34px; }

/* ---------- one-screen notices ---------- */

/* Registration confirmed, unsubscribed, link already used. Server-rendered
   by netlify/functions/lib/page.mjs, which loads this stylesheet.

   They were `.welcome` until the membership came out — the class was named
   for the post-payment landing page, which is deleted. These pages are the
   only thing still using the shape, so it is named for what they are. */
.notice { padding: 34px var(--pad) 60px; max-width: 620px; }
.notice-body { margin-top: 12px; font-size: 15px; line-height: 1.55; }
.notice .card-actions { margin-top: 22px; }

/* ------------------------------------------------------------------
   Print — the board as a single fold

   A printed ranking is a tear-sheet: one page, all 20 funds, nothing
   else. Everything that only makes sense in a browser — filters, the
   year strip, the pitch, the free/on-request section, corrections —
   comes off, leaving the masthead, the table, and a line saying where
   it came from.

   Size and net flow print as on-request, because that is what they are
   on screen: the printout must not appear to hold a figure the site
   never had.
   ------------------------------------------------------------------ */

.print-only { display: none; }

@media print {
  /* 10mm top and bottom, not 12: three sheets, their bands and the rename
     footnote all have to land on one A4 side, and the two millimetres are
     the difference between one page and two. */
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  .print-only { display: block; }

  /* Keep the up/down colours: they carry the meaning of the column. */
  html, body {
    background: #fff;
    font-size: 9pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Everything that is browser furniture. */
  .skip,
  .site-header .btn,
  .controls,
  .years,
  .pitch,
  #cards,
  #digest,
  #data,
  #corrections,
  .ad-slot,
  .site-footer,
  .explainer,
  .fold-actions,
  .modal-backdrop {
    display: none !important;
  }

  /* The masthead stops floating and becomes a letterhead. */
  .site-header {
    position: static;
    padding: 0 0 6pt;
    border-bottom: 1.5pt solid var(--ink);
    margin-bottom: 8pt;
  }
  .wordmark { font-size: 15pt; }

  .status { padding: 0 0 8pt; }
  .status-line { font-size: 8pt; color: var(--ink); }
  .status-offer { display: none; }

  /* No scroll container on paper — the table must lay out in full. */
  .table-wrap {
    overflow: visible !important;
    border: 0;
  }
  table.league {
    min-width: 0 !important;
    width: 100%;
    border-collapse: collapse;
  }

  /* The sticky first column is a scrolling affordance and nothing else,
     and so is its pinned width — that exists to keep the ranking column
     on a 390px screen. On paper the fund column takes what it needs, or
     every long name wraps to three lines and the board runs to two
     pages. */
  table.league th:first-child,
  table.league td.fund {
    position: static !important;
    background: transparent !important;
    border-right: 0;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /* Dense enough that twenty funds are one page, not two. On screen the
     column headings never wrap because the table scrolls; on paper there
     is nowhere to scroll to, and "3M NET FLOW" held on one line is enough
     on its own to push the last column off an A4 sheet. */
  table.league th {
    background: transparent;
    border-bottom: 1pt solid var(--ink);
    white-space: normal;
  }

  /* The two sheets have to stay legibly apart on paper — that separation is
     the reason the board is split at all. */
  tr.sheet-head th {
    padding: 5pt 0 2pt;
    background: transparent;
    border-top: 1pt solid var(--ink);
    border-bottom: 0.5pt solid var(--ink);
  }
  tr.sheet-head:first-child th { padding-top: 2pt; }
  .sheet-label { font-size: 8.5pt; }
  .sheet-note { font-size: 6.5pt; }
  tr.sheet-head { page-break-after: avoid; }
  .th-inner { padding: 2pt 2.5pt; font-size: 6.5pt; color: var(--ink); }
  .th-lock, .th-arrow { display: none; }

  /* The flow cell reads "on request" at screen size and nowrap. Left
     alone it is the widest thing in the table and pushes the printed
     board past the paper, which the eye reads as a missing column. */
  .lock-flow { font-size: 6.5pt; white-space: normal; }

  /* Forty funds, two sheet bands and a header row have to land on one
     A4 side — that is what "one fold" means and it is the whole reason
     the board defaults to twenty a sheet. Every measurement here is
     doing that job, so loosening one costs a second page. */
  table.league td {
    padding: 1.2pt 2.5pt;
    font-size: 7.5pt;
    border-bottom: 0.4pt solid var(--line-strong);
  }
  table.league td.fund { white-space: normal; }
  /* On screen the manager sits on its own line under the fund name. On
     paper that second line is 40 extra lines of height and the board
     spills onto a second side, so the two run together instead. */
  .fund-name, .fund-sub { display: inline; font-size: 7.5pt; line-height: 1.15; }
  .fund-sub { font-size: 6pt; margin-top: 0; }
  .fund-sub::before { content: ' · '; }
  .usd-chip { padding: 0 2pt; font-size: 6pt; background: transparent; border: 0.4pt solid var(--green); }

  /* A fund must never be split across the fold. */
  tr, .rowcount, .print-note { page-break-inside: avoid; }
  thead { display: table-header-group; }

  .rowcount { padding: 6pt 0 0; font-size: 7.5pt; }

  /* The footnote is the caveat that travels with the printout, so it is
     one of the few things under the table that prints. */
  .renames {
    padding: 3pt 0 0;
    font-size: 6.5pt;
    line-height: 1.35;
    max-width: none;
  }
  .rename-mark { font-size: 6pt; }

  .print-note {
    padding-top: 4pt;
    margin-top: 4pt;
    border-top: 0.5pt solid var(--line-strong);
    font-size: 7pt;
    line-height: 1.4;
    color: var(--muted);
  }
  .print-note strong { color: var(--ink); }

  /* Links print as plain text; a printed URL in brackets is noise here. */
  a { text-decoration: none; color: inherit; }
}