/* Poppins carries every role through weight alone — labels and body text at
   400, interface text at 600, the numbers that matter at 700. Chosen to read
   as warm and approachable rather than another default system-font finance
   app; falls back to the system stack for the handful of symbols (the arrows
   in "Past → expected") Poppins itself doesn't include glyphs for, which is
   normal font-stack behaviour, not a gap to work around. */
@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/poppins-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/poppins-semibold.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/poppins-bold.woff2') format('woff2');
}

/* Design tokens. Every color in the app resolves through these, including the
   canvas charts, which read them at draw time — so light/dark is one swap here
   rather than a branch in the drawing code.

   Structure: five category hues spaced far apart around the wheel (cyan,
   indigo, green, pink, orange), then each asset takes a step within its
   category's hue. Category colour is what the allocation bar and the table
   groups use, because five things can be told apart at a glance and sixteen
   cannot. Per-asset colour only ever appears next to that asset's own name, so
   the six greens never have to be distinguished from each other in isolation.

   The neutrals are cool rather than grey — a faint blue bias that sits under
   the accent instead of fighting it. The accent itself is a warm forest green,
   deliberately picked to sit apart from the "NZ companies" category green
   (--cat-nz) so the two never get mistaken for each other. */
:root {
  color-scheme: light;

  --page: #f7f8fa;
  --surface-1: #ffffff;
  --surface-2: #eef0f4;

  --text-primary: #0d1117;
  --text-secondary: #4a5261;
  --text-muted: #79818f;

  --grid: #e4e7ec;
  --axis: #c2c8d2;
  --border: rgba(13, 17, 23, 0.11);

  --cat-defensive: #0891b2;
  --cat-funds: #4f46e5;
  --cat-nz: #16a34a;
  --cat-world: #db2777;
  --cat-crypto: #ea580c;

  --series-portfolio: #0d1117;
  /* The portfolio line is near-black so it reads as "you"; its area fill needs
     its own hue, well away from the benchmark indigo. */
  --series-portfolio-fill: #059669;
  /* The opponent: a hue used nowhere else, so the race reads instantly. */
  --series-opponent: #db2777;
  --series-cash: #94a3b8;

  --series-nzbond: #0e7490;
  --series-kiwisaver: #06b6d4;

  --series-nzx50: #6366f1;
  --series-sp500: #4f46e5;
  --series-world: #4338ca;

  --series-fph: #15803d;
  --series-mft: #16a34a;
  --series-xro: #22c55e;
  --series-mel: #0d9f6e;
  --series-atm: #65a30d;
  --series-air: #4d7c0f;

  --series-aapl: #db2777;
  --series-nvda: #e11d48;
  --series-tsla: #a21caf;

  --series-btc: #ea580c;
  --series-eth: #d97706;

  --up: #15803d;
  --down: #dc2626;
  --accent: #3f6b35;
  --accent-ink: #ffffff;

  /* Risk badges: a green-to-red severity ramp. The word inside each badge
     already states the level, so colour is reinforcement rather than the only
     channel carrying the meaning. */
  --risk-1-bg: #d1fae5; --risk-1-ink: #065f46;
  --risk-2-bg: #dbeafe; --risk-2-ink: #1e40af;
  --risk-3-bg: #fef3c7; --risk-3-ink: #92400e;
  --risk-4-bg: #ffedd5; --risk-4-ink: #9a3412;
  --risk-5-bg: #fee2e2; --risk-5-ink: #991b1b;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(13, 17, 23, 0.06);
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* The dark column is the same hues re-stepped for a dark ground, not an
   automatic inversion — every value was checked against the dark surface
   rather than derived from its light counterpart. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;

    --page: #0f1115;
    --surface-1: #14161a;
    --surface-2: #1c1f26;

    --text-primary: #f2f4f8;
    --text-secondary: #b6bec9;
    --text-muted: #7d8593;

    --grid: #262a32;
    --axis: #3a3f4a;
    --border: rgba(242, 244, 248, 0.12);

    --cat-defensive: #22d3ee;
    --cat-funds: #818cf8;
    --cat-nz: #4ade80;
    --cat-world: #f472b6;
    --cat-crypto: #fb923c;

    --series-portfolio: #ffffff;
    --series-portfolio-fill: #34d399;
    --series-opponent: #f472b6;
    --series-cash: #7d8593;

    --series-nzbond: #38bdf8;
    --series-kiwisaver: #22d3ee;

    --series-nzx50: #a5b4fc;
    --series-sp500: #818cf8;
    --series-world: #7c8cf8;

    --series-fph: #4ade80;
    --series-mft: #34d399;
    --series-xro: #6ee7b7;
    --series-mel: #2dd4bf;
    --series-atm: #a3e635;
    --series-air: #84cc16;

    --series-aapl: #f472b6;
    --series-nvda: #fb7185;
    --series-tsla: #e879f9;

    --series-btc: #fb923c;
    --series-eth: #fbbf24;

    --up: #4ade80;
    --down: #f87171;
    --accent: #7fb56a;
    --accent-ink: #10190c;

    --risk-1-bg: #064e3b; --risk-1-ink: #6ee7b7;
    --risk-2-bg: #1e3a5f; --risk-2-ink: #93c5fd;
    --risk-3-bg: #78350f; --risk-3-ink: #fcd34d;
    --risk-4-bg: #7c2d12; --risk-4-ink: #fdba74;
    --risk-5-bg: #7f1d1d; --risk-5-ink: #fca5a5;

    --shadow: none;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --page: #0f1115;
  --surface-1: #14161a;
  --surface-2: #1c1f26;

  --text-primary: #f2f4f8;
  --text-secondary: #b6bec9;
  --text-muted: #7d8593;

  --grid: #262a32;
  --axis: #3a3f4a;
  --border: rgba(242, 244, 248, 0.12);

  --cat-defensive: #22d3ee;
  --cat-funds: #818cf8;
  --cat-nz: #4ade80;
  --cat-world: #f472b6;
  --cat-crypto: #fb923c;

  --series-portfolio: #ffffff;
  --series-portfolio-fill: #34d399;
  --series-opponent: #f472b6;
  --series-cash: #7d8593;

  --series-nzbond: #38bdf8;
  --series-kiwisaver: #22d3ee;

  --series-nzx50: #a5b4fc;
  --series-sp500: #818cf8;
  --series-world: #7c8cf8;

  --series-fph: #4ade80;
  --series-mft: #34d399;
  --series-xro: #6ee7b7;
  --series-mel: #2dd4bf;
  --series-atm: #a3e635;
  --series-air: #84cc16;

  --series-aapl: #f472b6;
  --series-nvda: #fb7185;
  --series-tsla: #e879f9;

  --series-btc: #fb923c;
  --series-eth: #fbbf24;

  --up: #4ade80;
  --down: #f87171;
  --accent: #7fb56a;
  --accent-ink: #10190c;

  --risk-1-bg: #064e3b; --risk-1-ink: #6ee7b7;
  --risk-2-bg: #1e3a5f; --risk-2-ink: #93c5fd;
  --risk-3-bg: #78350f; --risk-3-ink: #fcd34d;
  --risk-4-bg: #7c2d12; --risk-4-ink: #fdba74;
  --risk-5-bg: #7f1d1d; --risk-5-ink: #fca5a5;

  --shadow: none;
}


* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
}

button {
  font: inherit;
  cursor: pointer;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 36px 28px 96px;
}

/* ---------- header ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 4px 0 20px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-right: auto;
}

.brand h1 {
  font-size: 19px;
}

.brand .tag {
  color: var(--text-muted);
  font-size: 13px;
}

.clock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.icon-btn {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}

/* Slightly forward of the other header buttons — it is an offer, not a setting,
   and it disappears for good once taken. */
.icon-btn.install {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.icon-btn.install:hover {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- cards ---------- */

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
}

.card + .card {
  margin-top: 32px;
}

.card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.card-head h2 {
  font-size: 15px;
}

.card-head .sub {
  color: var(--text-muted);
  font-size: 13px;
  margin-right: auto;
}

/* ---------- layout ---------- */

.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 940px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- hero + stat tiles ---------- */

.hero-row {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}

.hero-label {
  color: var(--text-muted);
  font-size: 13px;
}

.hero-figure {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  /* Proportional figures: tabular-nums makes a large number look loose. */
}

.hero-delta {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}

.up {
  color: var(--up);
}

.down {
  color: var(--down);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 18px;
  margin-top: 28px;
}

.tile {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 20px 18px;
}

.tile .k {
  color: var(--text-muted);
  font-size: 12px;
}

.tile .v {
  font-size: 19px;
  font-weight: 600;
  margin-top: 1px;
}

.tile .n {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- chart ---------- */

.chart-box {
  position: relative;
  /* Height covers the plot plus the x-axis band, so the axis labels are never
     cut off into a nested scrollbar. */
  height: 268px;
  margin-top: 10px;
}

.chart-box canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.legend .item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.key {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  flex: none;
}

.key.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(11, 11, 11, 0.16);
  padding: 9px 11px;
  font-size: 12.5px;
  min-width: 168px;
  z-index: 5;
}

.tooltip.on {
  opacity: 1;
}

.tooltip .t-head {
  color: var(--text-muted);
  margin-bottom: 5px;
}

.tooltip .t-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
}

.tooltip .t-row .v {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  font-weight: 600;
}

/* ---------- allocation stacked bar ---------- */

.alloc-bar {
  display: flex;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 12px;
  background: var(--surface-2);
  /* 2px surface-colored gaps separate the segments — no borders on marks. */
  gap: 2px;
}

.alloc-seg {
  height: 100%;
  min-width: 2px;
  transition: width 0.25s ease;
}

.alloc-empty {
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 12px;
}

/* ---------- market table ---------- */

.table-scroll {
  overflow-x: auto;
  margin-top: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

th {
  text-align: right;
  font-weight: 500;
  color: var(--text-muted);
  font-size: 12px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th:first-child,
td:first-child {
  text-align: left;
}

td {
  text-align: right;
  padding: 16px 14px;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

/* The asset column absorbs the slack in a wide card, so the numeric columns
   stay grouped near the trade controls instead of drifting apart. */
.market-table th:first-child,
.market-table td:first-child {
  width: 100%;
}

.asset-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}

.asset-name {
  font-weight: 600;
  color: var(--text-primary);
}

.asset-kind {
  color: var(--text-muted);
  font-size: 12px;
}

.spark {
  width: 62px;
  height: 22px;
  display: block;
}

.risk {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* Ordinal ramp — one hue, light to dark, each step clearing 2:1 on its
   surface. Text color flips by fill luminance so it always reads. */
.risk-1 {
  background: var(--risk-1-bg);
  color: var(--risk-1-ink);
}

.risk-2 {
  background: var(--risk-2-bg);
  color: var(--risk-2-ink);
}

.risk-3 {
  background: var(--risk-3-bg);
  color: var(--risk-3-ink);
}

.risk-4 {
  background: var(--risk-4-bg);
  color: var(--risk-4-ink);
}

.risk-5 {
  background: var(--risk-5-bg);
  color: var(--risk-5-ink);
}

/* Seven columns cannot fit a phone, and sideways scrolling puts the Buy button
   out of reach of the asset name. Below this width each asset becomes a stacked
   card instead, with the column headers repeated inline as labels. */
@media (max-width: 660px) {
  .market-table thead {
    display: none;
  }

  .market-table,
  .market-table tbody,
  .market-table tr,
  .market-table td {
    display: block;
    width: auto;
  }

  .market-table tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .market-table tbody tr:last-child {
    border-bottom: none;
  }

  .market-table td {
    border: none;
    padding: 3px 0;
    text-align: left;
    white-space: normal;
  }

  .market-table td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 90px;
    color: var(--text-muted);
    font-size: 12px;
  }

  /* Shown on phones as a full-width tappable strip. It used to be hidden here,
     which removed the asset detail panel from exactly the students most likely
     to be squinting at a 62px chart. */
  .market-table .col-history {
    display: block;
  }

  .market-table .spark-btn {
    width: 100%;
  }

  .market-table .spark-btn .spark {
    width: 100%;
    height: 34px;
  }

  .market-table .trade-cell {
    justify-content: flex-start;
    margin-top: 4px;
  }

  .market-table .trade-cell input {
    flex: 1;
    max-width: 120px;
  }

  .table-scroll {
    overflow-x: visible;
  }
}

.trade-cell {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  align-items: center;
}

.trade-cell input {
  width: 76px;
  padding: 5px 7px;
  font: inherit;
  font-size: 13px;
  text-align: right;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.mini {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  /* Comfortable hit target rather than a pinpoint one. */
  min-height: 30px;
}

.mini:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text-primary);
}

.mini:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mini.buy:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- controls ---------- */

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

.primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 600;
}

.primary:hover:not(:disabled) {
  filter: brightness(1.08);
}

.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ghost {
  background: var(--surface-1);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
}

.ghost:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text-primary);
}

.ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.hint {
  color: var(--text-muted);
  font-size: 12.5px;
}

.notice {
  margin-top: 10px;
  font-size: 13px;
  color: var(--down);
  min-height: 18px;
}

/* ---------- news feed ---------- */

.feed {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

.feed li {
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  display: flex;
  gap: 10px;
}

.feed li:last-child {
  border-bottom: none;
}

.feed .when {
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  flex: none;
  width: 52px;
}

.feed .what {
  color: var(--text-secondary);
}

.feed .empty {
  color: var(--text-muted);
}

/* ---------- news banner ---------- */

.banner {
  margin-top: 14px;
  padding: 13px 15px;
  border-radius: 8px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
}

.banner .b-head {
  font-weight: 600;
  font-size: 14px;
}

.banner .b-why {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 4px;
}

/* ---------- learn ---------- */

.learn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 18px;
}

.learn .item {
  background: var(--surface-2);
  border-radius: 14px;
  padding: 22px;
}

.learn h3 {
  font-size: 13.5px;
  margin-bottom: 3px;
}

.learn p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

/* ---------- results ---------- */

.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.verdict {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--surface-2);
}

.verdict h3 {
  font-size: 14.5px;
  margin-bottom: 6px;
}

.verdict ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 13.5px;
}

.verdict li {
  margin-bottom: 6px;
}

.verdict li:last-child {
  margin-bottom: 0;
}

/* ---------- setup / config row ---------- */

.setup {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 10px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field label {
  font-size: 12px;
  color: var(--text-muted);
}

.field input,
.field select {
  padding: 8px 10px;
  font: inherit;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-1);
  color: var(--text-primary);
}

.field input {
  width: 132px;
}

/* ---------- table view toggle ---------- */

.data-table {
  margin-top: 12px;
  max-height: 240px;
  overflow-y: auto;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

footer {
  margin-top: 24px;
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
}

/* ============================================================
   Explain-on-click terms
   ============================================================ */

/* An explainable word looks like a word, not a button — a dotted underline in
   the accent hue. It has to read as "there is more here" without turning every
   paragraph into a wall of controls. */
.term-link {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: help;
  border-bottom: 1px dotted var(--accent);
  transition: color 0.12s ease, border-color 0.12s ease;
}

.term-link:hover {
  color: var(--accent);
  border-bottom-style: solid;
}

/* The panel is a floating card on desktop and a bottom sheet on a phone, where
   there is nowhere sensible to anchor it. */
.term-pop {
  position: absolute;
  z-index: 60;
  width: min(370px, calc(100vw - 24px));
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(13, 17, 23, 0.16);
  padding: 14px 16px 16px;
}

.term-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.term-head h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.term-close {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.term-close:hover {
  color: var(--text-primary);
}

.term-body p {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.term-body p:last-child {
  margin-bottom: 0;
}

.term-body strong {
  color: var(--text-primary);
}

/* A worked example students can follow line by line. */
.term-sum {
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.term-sum-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  font-size: 13px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.term-sum-row:last-child {
  border-bottom: none;
}

.term-sum-row span:first-child {
  color: var(--text-secondary);
}

.term-sum-row span:last-child {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

.term-sum-row.strong {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.term-sum-row.strong span {
  color: var(--text-primary);
}

.term-see {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.term-see-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.term-chip {
  appearance: none;
  font: inherit;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  cursor: pointer;
}

.term-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 620px) {
  .term-pop {
    position: fixed;
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 78vh;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    padding-bottom: 22px;
  }
}

/* ============================================================
   Auto-play controls
   ============================================================ */

.primary.play {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Drawn rather than typed, so it never depends on a glyph the system may not
   have and it always matches the button's text colour. */
.play-icon {
  width: 0;
  height: 0;
  border-left: 9px solid currentColor;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

.play.is-playing .play-icon {
  width: 10px;
  height: 12px;
  border: none;
  background: linear-gradient(
    to right,
    currentColor 0 3px,
    transparent 3px 7px,
    currentColor 7px 10px
  );
}

.secondary-controls {
  margin-top: 8px;
  align-items: center;
}

.speed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.speed select {
  font: inherit;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
}

/* A pause-worthy headline gets an accent rail; ordinary news does not. */
.banner.big {
  border-left: 3px solid var(--accent);
}

/* ============================================================
   Market table: category groups and the two return figures
   ============================================================ */

.cat-row td {
  padding: 16px 10px 6px;
  border-bottom: 1px solid var(--border);
}

.cat-row:first-child td {
  padding-top: 4px;
}

.cat-chip {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 7px;
  vertical-align: middle;
}

.cat-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.cat-blurb {
  margin-left: 10px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Past and expected sit side by side because the gap between them is the
   point. The past figure is deliberately the quieter of the two. */
.ret-pair {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  cursor: help;
  font-variant-numeric: tabular-nums;
}

.ret-past {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.ret-sep {
  color: var(--text-muted);
  font-size: 11px;
}

.ret-exp {
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 1px dotted var(--accent);
}

.ret-note {
  display: block;
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

.table-foot {
  margin: 12px 2px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 74ch;
}

@media (max-width: 660px) {
  .cat-row td {
    padding: 14px 0 4px;
  }

  .cat-blurb {
    display: block;
    margin-left: 16px;
    margin-top: 2px;
  }

  .ret-note {
    display: inline;
    margin-left: 6px;
  }
}

.field-help {
  font-size: 11px;
  color: var(--text-muted);
  margin: 2px 0 4px;
  align-self: flex-start;
}

/* A soft wash behind the headline figure, bleeding to the card's edges. Card
   padding is 18px, so the negative margin pulls it flush and the padding puts
   the content back where it was. Purely decorative — it sits under the text and
   carries no meaning, which is why it is this faint. */
.hero-row {
  position: relative;
  margin: -18px -18px 0;
  padding: 18px 18px 14px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--series-portfolio-fill) 13%, transparent),
    color-mix(in srgb, var(--accent) 7%, transparent) 55%,
    transparent 90%
  );
}

/* Tabular figures so the headline does not jitter horizontally while auto-play
   is running and the number changes every few hundred milliseconds. */
.hero-figure {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   The goal
   ============================================================ */

.goal {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.goal.reached {
  border-color: var(--up);
  background: color-mix(in srgb, var(--up) 10%, var(--surface-2));
}

.goal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.goal-name {
  font-weight: 700;
  font-size: 13.5px;
}

.goal-count {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.goal-track {
  height: 9px;
  border-radius: 999px;
  background: var(--grid);
  overflow: hidden;
}

.goal-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--series-portfolio-fill), var(--accent));
  /* Eased because this bar is a reward, unlike the chart which is a reading. */
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.goal.reached .goal-fill {
  background: var(--up);
}

.goal-note {
  margin-top: 7px;
  font-size: 12px;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .goal-fill {
    transition: none;
  }
}

/* ============================================================
   The crash decision
   ============================================================ */

.decision-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(13, 17, 23, 0.62);
  backdrop-filter: blur(2px);
}

.decision-backdrop[hidden] {
  display: none;
}

.decision {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 20px 60px rgba(13, 17, 23, 0.35);
}

.d-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--down);
  font-weight: 700;
}

.decision h2 {
  margin: 6px 0 8px;
  font-size: 21px;
  line-height: 1.25;
  text-wrap: balance;
}

.d-why {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* The damage in dollars. This is the number that makes it feel real. */
.d-money {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--down) 10%, var(--surface-2));
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}

.d-before {
  font-size: 17px;
  color: var(--text-muted);
  text-decoration: line-through;
}

.d-arrow {
  color: var(--text-muted);
}

.d-after {
  font-size: 24px;
  font-weight: 700;
}

.d-drop {
  font-weight: 700;
  color: var(--down);
  margin-left: auto;
}

/* Three or four options depending on whether the headline hit one category,
   so the grid flows rather than being pinned to a column count. */
.d-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 9px;
}

.d-choice.sell-cat:hover {
  border-color: var(--cat-crypto);
}

.d-choice[hidden] {
  display: none;
}

.d-choice {
  appearance: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.d-choice:hover {
  transform: translateY(-1px);
}

.d-choice strong {
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
}

.d-choice small {
  display: block;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* No option is styled as the right answer — that is the student's call, and
   the end screen is where they find out. */
.d-choice.sell:hover {
  border-color: var(--down);
}

.d-choice.hold:hover {
  border-color: var(--accent);
}

.d-choice.buy:hover {
  border-color: var(--up);
}

.d-foot {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .d-choices {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .d-choice:hover {
    transform: none;
  }
}

/* ============================================================
   What your decisions cost
   ============================================================ */

.cost-block {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cost-block h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

.cost-row {
  display: flex;
  gap: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent);
  margin-bottom: 8px;
}

.cost-row.bad {
  border-left-color: var(--down);
}

.cost-row.good {
  border-left-color: var(--up);
}

.cost-row.total {
  border-left-color: var(--text-muted);
}

.cost-when {
  flex: none;
  width: 82px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding-top: 1px;
}

.cost-what {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.cost-what strong {
  color: var(--text-primary);
}

@media (max-width: 560px) {
  .cost-row {
    flex-direction: column;
    gap: 4px;
  }

  .cost-when {
    width: auto;
  }
}

.d-money-label {
  flex: 1 0 100%;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.setup-hint {
  align-self: center;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

/* The button becomes the obvious next step once the controls have moved on
   from the run being played. */
.ghost.pending {
  border-color: var(--accent);
  color: var(--accent);
}

.d-choice:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.d-choice:disabled:hover {
  transform: none;
  border-color: var(--border);
}

/* ============================================================
   Mode tabs
   ============================================================ */

.modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.mode-tab {
  appearance: none;
  font: inherit;
  cursor: pointer;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-secondary);
  font-weight: 700;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.mode-tab small {
  display: block;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.mode-tab:hover {
  border-color: var(--accent);
}

.mode-tab.is-on {
  border-color: var(--accent);
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-1));
}

/* ============================================================
   The opponent
   ============================================================ */

.opp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.opp-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--series-opponent);
}

.opp-tagline {
  font-size: 12px;
  color: var(--text-muted);
  max-width: 40ch;
}

.opp-value {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.opp-race {
  margin-top: 12px;
}

/* Two-sided: who is ahead should be readable without arithmetic. */
.race-bar {
  display: flex;
  height: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--grid);
}

.race-you {
  background: var(--series-portfolio-fill);
}

.race-them {
  background: var(--series-opponent);
}

.race-legend {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.race-legend .you {
  color: var(--text-secondary);
}

.race-legend .ahead {
  color: var(--up);
  font-weight: 700;
}

.race-legend .behind {
  color: var(--down);
  font-weight: 700;
}

.opp-moves {
  margin-top: 12px;
  max-height: 150px;
  overflow-y: auto;
}

@media (max-width: 560px) {
  .modes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   The economy
   ============================================================ */

.econ-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.econ-phase {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.econ-phase.mood-good { color: var(--up); }
.econ-phase.mood-warm { color: var(--cat-crypto); }
.econ-phase.mood-bad  { color: var(--down); }

.econ-blurb {
  font-size: 12.5px;
  color: var(--text-secondary);
  max-width: 42ch;
  margin-top: 2px;
}

.econ-gdp {
  text-align: right;
  flex: none;
}

.econ-gdp-v {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.econ-gdp-k {
  font-size: 11px;
  color: var(--text-muted);
}

/* The four stages, drawn as the loop students are taught by name. */
.econ-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.econ-step {
  font-size: 10.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

.econ-step span {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: var(--grid);
  margin-bottom: 5px;
}

.econ-step.is-on {
  color: var(--text-primary);
  font-weight: 700;
}

.econ-step.is-on.mood-good span { background: var(--up); }
.econ-step.is-on.mood-warm span { background: var(--cat-crypto); }
.econ-step.is-on.mood-bad  span { background: var(--down); }

.econ-chart {
  height: 44px;
  margin-top: 12px;
}

.econ-chart canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.econ-teach {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ============================================================
   Result code and class leaderboard
   ============================================================ */

.share-block {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.share-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.share-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#share-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  user-select: all;
}

.share-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  max-width: 64ch;
}

.board-help {
  margin: 0 0 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

#board-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-primary);
  resize: vertical;
}

.board-warn {
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--down);
  background: color-mix(in srgb, var(--down) 8%, var(--surface-2));
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.board-warn.soft {
  border-left-color: var(--text-muted);
  background: var(--surface-2);
}

#board-out {
  margin-top: 12px;
}

/* ============================================================
   Asset detail panel
   ============================================================ */

/* The sparkline is a control now, so it has to look like one on hover without
   adding a sixteen-row row of borders at rest. */
.spark-btn {
  appearance: none;
  border: 1px solid transparent;
  background: none;
  padding: 3px 4px;
  border-radius: 7px;
  cursor: zoom-in;
  display: block;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.spark-btn:hover,
.spark-btn:focus-visible {
  border-color: var(--border);
  background: var(--surface-2);
}

.asset-pop {
  position: absolute;
  z-index: 70;
  width: min(420px, calc(100vw - 24px));
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(13, 17, 23, 0.18);
  padding: 14px 16px 16px;
}

.ap-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ap-name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.ap-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

.ap-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.ap-close {
  appearance: none;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.ap-close:hover {
  color: var(--text-primary);
}

.ap-chart {
  height: 132px;
  margin: 12px 0 10px;
}

.ap-chart canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.ap-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-2);
}

.ap-k {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.ap-v {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The two lines that were written for students and never shown until now. */
.ap-what {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: 600;
}

.ap-blurb {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.ap-holding {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}

.ap-hold-k {
  color: var(--text-muted);
}

.ap-hold-v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 620px) {
  .asset-pop {
    position: fixed;
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 82vh;
    overflow-y: auto;
    border-radius: 14px 14px 0 0;
    border-bottom: none;
    padding-bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spark-btn {
    transition: none;
  }
}

/* ============================================================
   Opening briefing
   ============================================================ */

.intro-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(13, 17, 23, 0.66);
  backdrop-filter: blur(3px);
}

.intro-backdrop[hidden] {
  display: none;
}

.intro {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow: 0 20px 60px rgba(13, 17, 23, 0.35);
}

.intro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.intro-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--accent);
}

.intro-skip {
  appearance: none;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 4px;
}

.intro-skip:hover {
  color: var(--text-primary);
}

.intro h2 {
  margin: 8px 0 12px;
  font-size: 21px;
  line-height: 1.25;
  text-wrap: balance;
}

.intro-body p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.intro-body strong {
  color: var(--text-primary);
}

.intro-list {
  margin: 0;
  padding-left: 20px;
}

.intro-list li {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 9px;
}

/* The one thing everybody asks about, so it gets the accent rail. */
.intro-note {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.intro-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.intro-dots {
  display: flex;
  gap: 6px;
}

.intro-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--grid);
}

.intro-dot.is-on {
  background: var(--accent);
}

.intro-nav {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.intro-nav .ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   Disclaimer
   ============================================================ */

/* Given the app puts real company names next to simulated prices, this needs to
   be readable rather than the usual grey small print nobody sees. */
.disclaimer {
  border-top: 1px solid var(--border);
  padding-top: 16px;
  max-width: 78ch;
  /* The footer centres its one-liner; four paragraphs of prose need ranged-left
     to be readable, and a measure short enough to scan. */
  text-align: left;
}

.disclaimer > strong {
  display: block;
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.disclaimer p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.disclaimer strong {
  color: var(--text-secondary);
}

.disclaimer-last {
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.ap-div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--up) 9%, var(--surface-2));
  font-size: 12.5px;
}

.ap-div-k {
  color: var(--text-muted);
  flex: none;
}

.ap-div-v {
  font-weight: 700;
  text-align: right;
  color: var(--up);
}

/* A company that pays nothing should say so plainly rather than in the colour
   used for money arriving. */
.ap-div-v.none {
  color: var(--text-muted);
  font-weight: 600;
}