:root {
  color-scheme: dark;
  --bg: #071426;
  --surface: #0e2036;
  --surface-2: #142a45;
  --line: #1d3553;
  --grid: #152a42;
  --text: #f3f7fc;
  --text-2: #a6b8cc;
  --muted: #6f87a4;
  --up: #27e6a0;
  --up-bg: rgba(39, 230, 160, .14);
  --down: #ff647c;
  --down-bg: rgba(255, 100, 124, .15);
  --warn: #ffb547;
  --blue: #168bff;
  --blue-hi: #5cb0ff;
  --purple: #a66bff;
  --jody: #4a7dff;
  --katy: #e8559e;
  --gold: #ffc857;
  /* Figures use Inter too (bold, with tabular digits so columns line up); --mono is kept as the name for "a figure". */
  --sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: var(--sans);
  --radius: 18px;
  /* Cards: a faint top-left light on navy, a hairline edge and a soft drop shadow. */
  --card-bg: linear-gradient(155deg, #11274a 0%, #0d1f37 45%, #0b1b30 100%);
  --card-edge: rgba(120, 170, 235, .13);
  --card-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .04);
  --page-glow: radial-gradient(900px 520px at 78% -8%, rgba(22, 139, 255, .14), transparent 62%), radial-gradient(760px 480px at -12% 38%, rgba(166, 107, 255, .09), transparent 60%);
  --nav-bg: linear-gradient(180deg, #0b1c33 0%, #071426 100%);
  --tabbar-bg: rgba(8, 21, 40, .9);
  /* Colours that only exist to sit on top of the palette above (swapped in light mode). */
  --topbar-bg: rgba(7, 20, 38, .82);
  --track-2: #0b1b30;
  --scrim: rgba(2, 8, 18, .72);
  --shadow: rgba(0, 0, 0, .5);
  --on-up: #04241a;
  --on-warn: #241600;
}

/* Light mode (theme.js sets data-theme from the 🌓 button: auto follows the phone). Same jobs, deeper shades:
   the bright green, gold and amber of the dark theme can't be read on white. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef3f9;
  --surface: #ffffff;
  --surface-2: #eef3f9;
  --line: #d8e1ec;
  --grid: #e7edf4;
  --text: #0b1b30;
  --text-2: #475a72;
  --muted: #687b93;
  --blue: #0f6fd6;
  --blue-hi: #0f6fd6;
  --purple: #7442d0;
  --card-bg: #ffffff;
  --card-edge: #d8e1ec;
  --card-shadow: 0 10px 28px -20px rgba(20, 40, 70, .35);
  --page-glow: radial-gradient(900px 520px at 78% -8%, rgba(15, 111, 214, .08), transparent 62%);
  --nav-bg: #ffffff;
  --tabbar-bg: rgba(255, 255, 255, .92);
  --up: #0a8a4c;
  --up-bg: rgba(10, 138, 76, .12);
  --down: #d42a3c;
  --down-bg: rgba(212, 42, 60, .1);
  --warn: #b36a00;
  --gold: #b07d0a;
  --topbar-bg: rgba(238, 243, 249, .86);
  --track-2: #e3e8ef;
  --scrim: rgba(25, 35, 55, .38);
  --shadow: rgba(20, 30, 50, .16);
  --on-up: #fff;
  --on-warn: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
body { min-height: 100vh; padding-bottom: env(safe-area-inset-bottom); background: var(--page-glow), var(--bg); background-attachment: fixed; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; font-weight: 700; }
.muted { color: var(--muted); }
.dim { color: var(--text-2); }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--text-2); }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  /* Equal side columns keep the leader pill centred on the screen, whatever the logo's width. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background: var(--topbar-bg); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo { margin: 0; font-family: var(--mono); font-weight: 800; letter-spacing: .12em; font-size: 14px; }
.logo span { color: var(--gold); }
/* The two-lane J: Jody's and Katy's lanes racing to the gold £1M dot (same drawing as icon.svg). */
.logo { display: flex; align-items: center; }
.logo-mark { width: 22px; height: 22px; flex: none; margin-right: 8px; fill: none; stroke-width: 3.5; stroke-linecap: round; }
.logo-mark .lj { stroke: var(--jody); }
.logo-mark .lk { stroke: var(--katy); }
.logo-mark circle { fill: var(--gold); }
/* Phones: the mark already says "race", so drop the word and keep the £ target clear of the leader pill. */
.logo .logo-word { color: inherit; }
@media (max-width: 480px) { .logo .logo-word { display: none; } }
.top-actions { display: flex; gap: 10px; justify-self: end; }
.iconbtn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); text-decoration: none; font-size: 16px; }



main { max-width: 1100px; margin: 0 auto; padding: 16px; display: grid; gap: 16px; }
.card { background: var(--card-bg); border: 1px solid var(--card-edge); border-radius: var(--radius); padding: 18px; box-shadow: var(--card-shadow); }
/* Card titles: small capitals, like the mock-ups' NEXT MILESTONE / COMBINED WEALTH. */
.card h2 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text); display: flex; align-items: center; gap: 8px; }
.card h2 .spacer { flex: 1; }
/* Notes beside a heading (a date, "payday to payday") stay small and quiet. */
.card h2 .muted { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ---------- navigation: sidebar (wide), icon rail (tablet), bottom bar + slide-in menu (phones) ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ni { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu-btn { display: none; }
.menu-btn .ni { width: 20px; height: 20px; }

.view { display: grid; gap: 16px; min-width: 0; align-content: start; animation: view-in .28s ease-out; }
.view[hidden] { display: none; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .view { animation: none; } }

.sidenav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: 216px; display: flex; flex-direction: column; gap: 22px;
  padding: calc(env(safe-area-inset-top) + 24px) 14px calc(env(safe-area-inset-bottom) + 16px); overflow-y: auto;
  background: var(--nav-bg); border-right: 1px solid var(--line); }
.sn-brand { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 0 6px; }
.sn-crown { font-size: 32px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(255, 200, 87, .4)); }
.sn-brand b { font-weight: 900; font-size: 21px; letter-spacing: .05em; line-height: 1.08; }
.sn-brand em { font-style: normal; color: var(--gold); }
.sn-brand small { color: var(--text-2); font-size: 12.5px; line-height: 1.45; max-width: 180px; }
.sn-links, .sn-more { display: grid; gap: 4px; }
.sn-more { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.sidenav a, .sn-more button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: none;
  color: var(--text-2); font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s; }
.sn-more a, .sn-more button { padding: 10px 14px; font-size: 14px; }
.sidenav a:hover, .sn-more button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.sidenav a[aria-current] { color: var(--text); background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 34%, transparent), color-mix(in srgb, var(--blue) 10%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent); }
.sidenav a[aria-current] .ni { color: var(--blue-hi); }
.nav-scrim, .tabbar { display: none; }

@media (min-width: 1100px) {
  body { padding-left: 216px; }
  main { max-width: 1480px; }
  .topbar .logo { display: none; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  body { padding-left: 88px; }
  .topbar .logo { display: none; }
  .sidenav { width: 88px; padding-inline: 8px; gap: 18px; }
  .sn-brand b, .sn-brand small { display: none; }
  .sidenav a, .sn-more button { flex-direction: column; gap: 5px; padding: 10px 2px; font-size: 11px; text-align: center; }
}
@media (max-width: 767px) {
  body { padding-bottom: calc(env(safe-area-inset-bottom) + 76px); }
  .menu-btn { display: grid; }
  .tb-admin { display: none; } /* Settings is in the slide-in menu */
  .sidenav { width: min(290px, 84vw); transform: translateX(-102%); visibility: hidden; transition: transform .24s ease-out, visibility 0s linear .24s; }
  body.menu-open .sidenav { transform: none; visibility: visible; transition-delay: 0s; box-shadow: 20px 0 60px var(--shadow); }
  body.menu-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 25; background: var(--scrim); }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 6px 4px calc(env(safe-area-inset-bottom) + 4px); background: var(--tabbar-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
  .tabbar a { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; }
  .tabbar a[aria-current] { color: var(--blue-hi); }
  .tabbar a[aria-current] .ni { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blue) 60%, transparent)); }
}
@media (prefers-reduced-motion: reduce) { .sidenav { transition: none; } }

/* ---------- Race section ---------- */
/* The banner: painted scenery (race-hero.js draws road, runners and markers on it), title on the sky. */
.race-hero { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 375 / 400; min-height: 340px; cursor: pointer;
  background: #1b2143; box-shadow: var(--card-shadow); isolation: isolate; -webkit-tap-highlight-color: transparent; }
.race-hero:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }
/* A height, not an aspect ratio: with a minimum height the ratio would push the banner wider than its column. */
.race-hero.is-wide { aspect-ratio: auto; min-height: 0; height: clamp(340px, 30vw, 440px); }
.rh-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* A soft navy wash at the top so the title reads on the bright sky. */
.race-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 46%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 20, 38, .72), rgba(7, 20, 38, 0)); }
.rh-head { position: absolute; z-index: 2; top: 16px; left: 0; right: 0; display: grid; justify-items: center; text-align: center; padding: 0 16px; pointer-events: none; }
.rh-crown-top { font-size: 30px; line-height: 1; filter: drop-shadow(0 4px 12px rgba(255, 200, 87, .45)); }
.rh-title { margin: 4px 0 0; font-size: clamp(24px, 7.4vw, 30px); font-weight: 900; line-height: 1.02; letter-spacing: .03em; color: #fff;
  text-shadow: 0 3px 14px rgba(0, 0, 0, .45); }
.rh-lead { margin: 10px 0 0; padding: 5px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; color: #fff; background: rgba(7, 20, 38, .72); border: 1px solid var(--c, var(--gold));
  box-shadow: 0 0 16px color-mix(in srgb, var(--c, var(--gold)) 40%, transparent); backdrop-filter: blur(4px); }
.rh-lead[hidden] { display: none; }
.rh-lead b { font-weight: 800; }
.rh-title em { display: block; font-style: normal; color: var(--gold); }
.rh-sub { display: none; margin: 8px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .88); text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.rh-hint { position: absolute; z-index: 2; right: 12px; bottom: 10px; padding: 4px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; color: #fff;
  background: rgba(7, 20, 38, .55); backdrop-filter: blur(6px); pointer-events: none; }
.rh-svg .rh-guide { fill: none; stroke: rgba(255, 255, 255, .28); stroke-linecap: round; }
.rh-svg .rh-trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rh-svg .rh-dot { fill: #fff; opacity: .9; }
.rh-svg .rh-pill rect { fill: rgba(7, 20, 38, .78); stroke: rgba(255, 255, 255, .22); }
.rh-svg .rh-pill text { fill: #fff; font-family: var(--sans); font-weight: 700; text-anchor: middle; }
.rh-svg .rh-pill.gold rect { fill: rgba(30, 22, 4, .82); stroke: var(--gold); }
.rh-svg .rh-pill.gold text { fill: var(--gold); }
.rh-svg .rh-flag line { stroke: #e9eef5; }
.rh-svg .rh-crown { text-anchor: middle; }
.rh-svg .rh-bob { animation: rh-bob 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.rh-svg .rh-runner:nth-of-type(2n) .rh-bob { animation-delay: -.8s; }
@keyframes rh-bob { 50% { transform: translateY(-3%); } }
@media (prefers-reduced-motion: reduce) { .rh-svg .rh-bob { animation: none; } }

/* Wide banner: the title on one line across the sky. */
.race-hero.is-wide .rh-head { top: 18px; }
.race-hero.is-wide .rh-crown-top { display: none; }
.race-hero.is-wide .rh-title { font-size: clamp(28px, 3.3vw, 44px); }
.race-hero.is-wide .rh-title em { display: inline; }
.race-hero.is-wide .rh-sub { display: block; }
.next-ms .bar, .pc-prog { display: block; height: 8px; margin-top: 6px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.pc-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff 0%), var(--c)); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); transition: width .8s ease-out; }

/* Player cards: a slim bar for how far each of you is towards the target. */
.pc-prog { height: 6px; margin: 8px 0 2px; background: var(--track-2); }

/* Next milestone and finish dates. */
.race-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.nm-row, .fin-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.nm-row + .nm-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.nm-row .avatar, .fin-row .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--photo) center 20% / cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c); }
.nm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.nm-goal { font-size: 20px; color: var(--text); }
.nm-left { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.next-ms .bar { background: var(--track-2); }
.next-ms .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #1fc98a, var(--up)); box-shadow: 0 0 12px color-mix(in srgb, var(--up) 50%, transparent); transition: width .8s ease-out; }
.nm-pct { font-size: 12px; margin-top: 5px; }
.fin-row { grid-template-columns: auto minmax(0, 1fr) auto auto; width: 100%; padding: 12px; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.fin-row:first-of-type { margin-top: 0; }
.fin-row:hover { border-color: color-mix(in srgb, var(--blue) 50%, var(--line)); }
.fin-who { font-weight: 600; }
.fin-when { display: grid; text-align: right; }
.fin-when b { font-size: 16px; }
.fin-when small { font-size: 12px; }
.fin-go { color: var(--text-2); font-size: 20px; }

/* Four "together" tiles. */
.race-tiles { display: none; }
.tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; padding: 16px 18px; min-width: 0; container-type: inline-size;
  border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--card-edge); box-shadow: var(--card-shadow); }
.tile[role="button"] { cursor: pointer; }
.tile-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; background: color-mix(in srgb, var(--t) 18%, transparent); }
/* Header: small icon chip, the label, and the (i) that explains the number. Then figure and mini-chart on one row. */
.tile-h { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.tile-h .tile-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; font-size: 15px; }
.tile-l { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.tile-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; min-width: 0; }
.tile-v { font-size: clamp(22px, 1.65vw, 26px); line-height: 1.1; min-width: 0; margin-top: 0; font-variant-numeric: tabular-nums; }
.tile-v .of { font-size: .55em; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.tile-v.status { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; font-weight: 800; }
.tile-v.warn { color: var(--gold); }
.tile-s { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12.5px; line-height: 1.35; color: var(--text-2); margin-top: 8px; }
.tile-s .chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-weight: 700; background: color-mix(in srgb, currentColor 14%, transparent); }
.tile-bar { height: 8px; margin-top: 10px; background: var(--track-2); }
.tile-bar i { background: linear-gradient(90deg, #8d63e8, var(--purple)); }
/* The (i): hover, focus or tap shows how the number is worked out. */
.tip-btn { margin-left: auto; display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font: italic 700 12px/1 Georgia, serif; cursor: help; }
.tip-btn:hover, .tip-btn:focus-visible { color: var(--text); border-color: var(--text-2); }
.tip { position: absolute; z-index: 6; left: 10px; right: 10px; top: 50px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 12px 30px var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s; }
.tile-h:hover .tip, .tile-h:focus-within .tip, .tip:hover { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.tip-more { display: block; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--blue-hi); font: inherit; font-weight: 700; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .tip { transition: none; transform: none; } }

/* Wide screens: the dashboard. Banner with milestone and finish dates beside it, the player cards right under the banner, then the tiles. */
@media (min-width: 1100px) {
  .view[data-view="race"] { grid-template-columns: minmax(0, 1fr) minmax(260px, 310px); grid-template-areas: "hero side" "players players" "tiles tiles"; }
  .race-hero { grid-area: hero; }
  .race-side { grid-area: side; }
  /* Two by two until there's room for four across (with the sidebar, from about 1400px). */
  .race-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .view[data-view="race"] .players { grid-area: players; }
}
@media (min-width: 1400px) { .race-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Tablets and narrower desktop windows: the same dashboard in two columns (banner, the player cards, milestone and finish
   dates side by side, the tiles two by two, then the bottom row). */
@media (min-width: 768px) and (max-width: 1099px) {
  .view[data-view="race"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hero hero" "players players" "side side" "tiles tiles" "bottom bottom"; }
  .race-hero { grid-area: hero; }
  .race-side { grid-area: side; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .race-tiles { grid-area: tiles; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .race-bottom { grid-area: bottom; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  #race-perf { grid-column: 1 / -1; }
  .view[data-view="race"] .players { grid-area: players; }
}
/* Phones keep Race short, like the mock-up: banner, player cards, next milestone (finish dates are on the cards). */
@media (max-width: 767px) { .finish-card { display: none; } }

/* ---------- section headings, tabs inside a section ---------- */
.view-title { margin: 4px 2px -4px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { min-height: 38px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s; }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #2a98ff, var(--blue)); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--blue) 80%, transparent); }
.seg-sm { margin-bottom: 14px; }
.seg-sm button { min-height: 34px; font-size: 13px; }
.panel { display: grid; gap: 16px; min-width: 0; }
.panel[hidden] { display: none; }
.bar { display: block; height: 8px; border-radius: 99px; background: var(--track-2); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--c, var(--up)); transition: width .8s ease-out; }
@media (prefers-reduced-motion: reduce) { .bar i, .pc-prog i, .next-ms .bar i { transition: none; } }

/* ---------- Wealth ---------- */
.perf-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.perf-l, .goal-l, .fs-l { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.perf-v { font-size: clamp(30px, 8vw, 40px); line-height: 1.1; margin-top: 4px; }
.perf-c { font-size: 14px; font-weight: 600; margin-top: 2px; }
.perf-ranges { display: flex; gap: 2px; }
.perf-svg { display: block; width: 100%; height: 190px; margin-top: 12px; cursor: pointer; }
.wealth-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wealth-tiles .tile { padding: 14px; }
/* Two across a phone: icon above the words, so the figure gets the full width. */
.wealth-tiles .tile { grid-template-columns: minmax(0, 1fr); }
.wealth-tiles .tile-ic { width: 34px; height: 34px; font-size: 17px; margin-bottom: 8px; }
.acct-group[hidden] { display: none; }

/* ---------- Goals ---------- */
.goal-head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; margin-bottom: 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.goal-head h2 { margin: 0; flex: 1; }
.goal-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; background: color-mix(in srgb, var(--up) 16%, transparent); }
.goal-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; }
.goal-v { font-size: clamp(28px, 8vw, 36px); }
.goal-pct { font-size: 13px; color: var(--text-2); margin: 4px 0 8px; }
.goal-bar { height: 10px; }
.goal-bar i { background: linear-gradient(90deg, #1fc98a, var(--up)); box-shadow: 0 0 14px color-mix(in srgb, var(--up) 50%, transparent); }
.goal-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.goal-p { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.goal-p .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--photo) center 20% / cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c); }
.goal-p > span:nth-child(2) { display: grid; }
.goal-p .num { font-size: 18px; }
.goal-p .bar { grid-column: 1 / -1; height: 6px; }

/* ---------- Freedom ---------- */
.fr-hero { position: relative; display: grid; gap: 0; padding: 26px 16px 16px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  background: #0b1b30; min-height: 240px; box-shadow: var(--card-shadow); }
/* The beach is a band across the top that fades into navy behind the summary card. */
.fr-hero::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 330px; z-index: -2; background: url(/img/scene-freedom.webp?v=1) 30% 55% / cover;
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.fr-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 130px; z-index: -1; background: linear-gradient(180deg, rgba(7, 20, 38, .6), rgba(7, 20, 38, 0)); }
.fr-hero-title { margin: 0 0 150px; font-size: clamp(26px, 7.4vw, 34px); font-weight: 800; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .5); }
.fr-hero .fs-card { background: rgba(8, 22, 42, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(160, 200, 255, .16); color: #fff; }
.fr-hero .fs-card .muted, .fr-hero .fs-card .fs-l { color: rgba(255, 255, 255, .72); }
.fs-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.fs-age { font-size: clamp(32px, 9vw, 42px); line-height: 1.1; margin-top: 2px; }
.fs-inc { font-size: 24px; margin-top: 2px; }
.fs-note { font-size: 12px; }
.fs-ring { position: relative; display: grid; justify-items: center; width: 118px; text-align: center; }
.fs-ring svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.fs-ring circle { fill: none; stroke-width: 9; }
.fs-ring .r0 { stroke: rgba(255, 255, 255, .12); }
.fs-ring .r1 { stroke: var(--up); stroke-linecap: round; stroke-dasharray: calc(var(--p) * 1) 100; transition: stroke-dasharray .8s ease-out; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--up) 60%, transparent)); }
.fs-ring b { position: absolute; top: 34px; font-size: 24px; }
.fs-ring span { font-size: 11.5px; color: var(--text-2); margin-top: 4px; line-height: 1.25; }
.fs-whatif { margin-top: 16px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(160, 200, 255, .12); }
.fs-q { font-size: 14px; font-weight: 600; }
.fs-amt { margin-top: 4px; }
.fs-amt b { font-size: 26px; }
.fs-slider { width: 100%; margin: 12px 0 4px; accent-color: var(--blue); height: 28px; }
.fs-ticks { display: flex; justify-content: space-between; font-size: 11px; }
.fs-out { margin-top: 10px; font-size: 14px; line-height: 1.45; }
.fs-explore { width: 100%; margin-top: 14px; min-height: 46px; border: 0; border-radius: 14px; font-weight: 700; color: #fff; background: linear-gradient(90deg, var(--blue), var(--purple)); cursor: pointer; }
@media (min-width: 900px) {
  .fr-hero { padding: 32px; min-height: 320px; }
  .fr-hero-title { margin-bottom: 150px; }
  /* The full width of the banner: headline numbers on the left, the what-if on the right, the button underneath. */
  #freedom-summary:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: center; padding: 22px 24px; }
  #freedom-summary > .seg { grid-column: 1; margin-bottom: 18px; }
  #freedom-summary .fs-grid { grid-column: 1; }
  #freedom-summary .fs-whatif { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  #freedom-summary .fs-explore { grid-column: 1 / -1; margin-top: 18px; }
}

/* ---------- Rewards ---------- */
.rw-heroes .heroes { margin: 0; }
.rw-heroes .hero { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), var(--surface-2); }
@media (min-width: 900px) { .rw-heroes .heroes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
/* Badges as hexagons, framed in their rarity colour. */
.tiles { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.btile { border: 0 !important; background: none !important; padding: 4px 2px 6px; }
/* Outer hexagon in the rarity colour, inner one a shade of it: a framed hexagon (clip-path can't take a border). */
.btile .i { position: relative; isolation: isolate; display: grid; place-items: center; width: 64px; height: 72px; font-size: 28px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--line); }
.btile .i::before { content: ''; position: absolute; inset: 3px; z-index: -1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--surface-2); }
.btile.got .i { background: var(--rar); }
.btile.got .i::before { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rar) 42%, var(--surface)), color-mix(in srgb, var(--rar) 16%, var(--surface)) 72%); }
.btile.got { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--rar) 30%, transparent)); }
.btile .n { font-size: 11px; margin-top: 4px; }
.streak-card .st-person + .st-person { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.st-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-head .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--photo) center 20% / cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c); }
.st-chip { margin-left: auto; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
@media (min-width: 700px) { .st-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-stat { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.st-stat b { font-size: 22px; }
.st-stat small { font-size: 12px; color: var(--text-2); }

/* ---------- Race, wide screens: the bottom row ---------- */
.race-wide-only { display: none; }
/* The cards in a row share one height: the chart takes the spare room and Next achievement sits at the bottom. */
.race-bottom > .card:not([hidden]) { display: flex; flex-direction: column; }
#race-perf .perf-svg { flex: 1; min-height: 190px; }
#race-recent .next-ach { margin-top: auto; }
#race-recent .rc-row:last-of-type { margin-bottom: 12px; }
.rc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px; margin-top: 8px; border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.rc-row { border-left: 3px solid var(--c, var(--line)); }
/* The badge is framed in its rarity colour, like the trophy cabinet's. */
.rc-ic { position: relative; isolation: isolate; display: grid; place-items: center; width: 46px; height: 52px; font-size: 22px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: var(--rar); filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--rar) 35%, transparent)); }
.rc-ic::before { content: ''; position: absolute; inset: 2.5px; z-index: -1; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rar) 42%, var(--surface)), color-mix(in srgb, var(--rar) 16%, var(--surface)) 72%); }
.rc-main b { font-size: 14px; }
.rc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; font-size: 11.5px; }
.rc-who { font-style: normal; font-weight: 700; padding: 1px 8px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.rc-rar { font-weight: 700; color: var(--rar); }
.rc-when { display: grid; justify-items: end; line-height: 1.25; }
.rc-when b { font-size: 13px; }
.rc-when small { color: var(--text-2); }
.rc-row.fresh .rc-ic { animation: rc-shine 2.6s ease-in-out infinite; }
@keyframes rc-shine { 50% { filter: drop-shadow(0 0 10px var(--rar)) brightness(1.15); } }
@media (prefers-reduced-motion: reduce) { .rc-row.fresh .rc-ic { animation: none; } }
.rc-main { display: grid; min-width: 0; }
.rc-main small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-when { white-space: nowrap; }
.link-btn { background: none; border: 0; color: var(--blue-hi); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: 0; text-transform: none; }
.next-ach { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; width: 100%; margin-top: 12px; padding: 16px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--purple) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--purple) 30%, var(--surface)), color-mix(in srgb, var(--purple) 10%, var(--surface)));
  color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.next-ach .rc-ic { grid-row: span 3; --rar: var(--purple); }
.na-l { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.na-n { font-size: 17px; font-weight: 800; }
.na-t { font-size: 12.5px; color: var(--text-2); }
.next-ach .bar { grid-column: 2 / 3; height: 6px; margin-top: 4px; }
.next-ach .bar i { background: linear-gradient(90deg, var(--purple), #d58bff); }
.next-ach .fin-go { grid-row: 1 / 4; grid-column: 3; }
/* Tiny charts in the corner of a tile: real history only (combined total over the chart period, money paid in by month). */
.tile-spark { flex: none; width: 72px; height: 32px; overflow: visible; pointer-events: none; }
.tile-spark polyline { fill: none; stroke: var(--t); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tile-spark .area { fill: color-mix(in srgb, var(--t) 22%, transparent); stroke: none; }
.tile-spark rect { fill: var(--t); opacity: .85; }
.tile-spark rect.now { opacity: 1; }
/* A tile too narrow for figure and chart side by side keeps the figure whole and drops the chart. */
@container (max-width: 215px) { .tile-spark { display: none; } }
.tile-check { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 20px; font-weight: 900;
  color: var(--up); background: color-mix(in srgb, var(--up) 16%, transparent); }
@media (min-width: 1100px) {
  /* Under the tiles: performance, freedom and achievements side by side, sized like the mock-up. */
  .view[data-view="race"] { grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    grid-template-areas: "hero side" "players players" "tiles tiles" "bottom bottom"; }
  .race-bottom { grid-area: bottom; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
  #race-perf .perf-v { font-size: 30px; }
  #race-freedom .fs-ring { width: 104px; }
  #race-freedom .fs-ring svg { width: 92px; height: 92px; }
  #race-freedom .fs-ring b { top: 29px; font-size: 21px; }
  #race-freedom .fs-age { font-size: 34px; }
}


/* ---------- player cards ---------- */
.players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.player { position: relative; padding: 14px 12px; border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--card-edge); box-shadow: var(--card-shadow); overflow: hidden; }
.player::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); }
.player .name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.player > * { position: relative; }
.player .avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--photo) center 20% / cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--c); }
/* Leader's crown sits on the top-left of the photo, tilted to follow the circle. */
.player .avatar { position: relative; }
.player .avatar .crown { position: absolute; top: -12px; left: -8px; font-size: 15px; line-height: 1; transform: rotate(-32deg); opacity: 0; transition: opacity .4s, transform .4s;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); pointer-events: none; }
.player .avatar.crowned .crown { opacity: 1; animation: crown-drop .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes crown-drop { from { transform: translateY(-8px) rotate(-55deg); opacity: 0; } to { transform: rotate(-32deg); opacity: 1; } }
.player .total { font-family: var(--mono); font-size: clamp(20px, 6.2vw, 34px); font-weight: 700; margin: 6px 0 2px; border-radius: 6px; padding: 0 2px; margin-left: -2px; transition: background-color .8s; }
.player .chg { font-family: var(--mono); font-size: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.player .meta { margin-top: 10px; display: grid; gap: 4px; font-size: 13px; color: var(--text-2); }
.player .meta div { display: flex; justify-content: space-between; gap: 6px; }
.player .meta .num { color: var(--text); }
.player .meta .num.up { color: var(--up); }
.player .meta .num.down { color: var(--down); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.chip.good { background: var(--up-bg); color: var(--up); }
.chip.bad { background: var(--down-bg); color: var(--down); }
.chip.warn { background: rgba(255,176,32,.15); color: var(--warn); }

/* ---------- together ---------- */
.together { position: relative; overflow: hidden; }
.tg-head { display: flex; align-items: center; gap: 8px; padding-right: 30px; }
.tg-hearts { position: relative; flex: none; width: 30px; height: 20px; }
.tg-hearts svg { position: absolute; top: 1px; width: 18px; height: 18px; fill: var(--c); transform-origin: 50% 60%; }
.tg-hearts .h1 { left: 0; transform: rotate(-12deg); animation: beat 1.6s ease-in-out infinite; }
.tg-hearts .h2 { right: 0; transform: rotate(12deg); animation: beat 1.6s ease-in-out .2s infinite; opacity: .92; mix-blend-mode: screen; }
/* Screen blending turns the second heart white on a light page. */
:root[data-theme="light"] .tg-hearts .h2 { mix-blend-mode: multiply; }
@keyframes beat { 0%, 40%, 100% { scale: 1; } 15% { scale: 1.16; } 28% { scale: 1.05; } }
.together .tg-label { margin: 0; font-size: 16px; font-weight: 600; }
.tg-total { font-size: clamp(28px, 8vw, 40px); font-weight: 800; margin: 10px 0 2px -4px; display: inline-block; padding: 0 4px; border-radius: 8px; }
.tg-chg { font-size: 12px; }
.tg-split { display: flex; gap: 2px; height: 8px; margin: 14px 0 6px; border-radius: 999px; overflow: hidden; }
.tg-split .seg { background: var(--c); transition: flex-grow 1s; min-width: 4px; }
.tg-legend { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.tg-legend .lt { color: var(--muted); }
.tg-legend > span { display: inline-flex; align-items: center; }

/* flashing */
.flash-up { animation: flashUp 1.1s ease-out; }
.flash-down { animation: flashDown 1.1s ease-out; }
@keyframes flashUp { 0% { background: rgba(25,210,122,.55); color: #fff; } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(255,77,94,.55); color: #fff; } 100% { background: transparent; } }

/* ---------- race track ---------- */
.lane { margin: 10px 0 18px; }
.lane:last-child { margin-bottom: 4px; }
.lane-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.lane-top .num { color: var(--text-2); }
.track { position: relative; height: 14px; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 10%, var(--track-2) 10% 20%); border: 1px solid var(--line); }
.track .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), var(--c)); transition: width 1s cubic-bezier(.2,.8,.2,1); min-width: 14px; }
.track .runner { position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--c) center 20% / cover no-repeat;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c), 0 0 16px var(--c); transition: left 1s cubic-bezier(.2,.8,.2,1); z-index: 1; }
.lane { margin-bottom: 30px; }
.lane:last-child { margin-bottom: 18px; }
.lane-top { margin-bottom: 12px; }
.track .ghost { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--text-2); opacity: .7; }
.track .ghost::after { content: attr(data-label); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--muted); white-space: nowrap; margin-top: 9px; }
.track .flag { position: absolute; right: -6px; top: 50%; transform: translateY(-78%); line-height: 0; pointer-events: none; }
.track .flag .pole { fill: var(--text-2); }
.track .flag rect:not(.pole) { stroke: color-mix(in srgb, var(--text) 25%, transparent); stroke-width: .25; }
/* Each column rises and falls a little later than the one before, and further from the pole moves more. */
.track .flag .fc { animation: flag-wave 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.14s); }
@keyframes flag-wave {
  0%, 100% { transform: translateY(calc(var(--i) * -.35px)); }
  50% { transform: translateY(calc(var(--i) * .35px + 1px)); }
}
@media (prefers-reduced-motion: reduce) { .track .flag .fc { animation: none; } }

/* ---------- leaderboard ---------- */
.board { width: 100%; border-collapse: collapse; font-size: 13px; }
.board th { text-align: right; font-weight: 700; font-size: 11px; padding: 0 0 8px; }
.board th:first-child { text-align: left; color: var(--text-2); font-weight: 600; }
.board td { padding: 9px 0; border-top: 1px solid var(--line); text-align: right; font-family: var(--mono); font-size: 12px; }
.board td:first-child { text-align: left; font-family: var(--sans); color: var(--text-2); font-size: 12px; }
.board td.win { color: var(--text); font-weight: 700; }
.board td.win::before { content: '▸ '; color: var(--gold); }
.board td.lose { color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }

/* ---------- chart ---------- */
.ranges { display: flex; gap: 2px; }
.chart-head { flex-wrap: wrap; row-gap: 8px; }
.chart-head .title { white-space: nowrap; }
.ranges button { background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; font-family: var(--mono); font-size: 11px; color: var(--text-2); cursor: pointer; }
.ranges button.on { border-color: var(--line); background: var(--surface-2); color: var(--text); }
.chart-wrap { position: relative; }
.chart-wrap svg { display: block; width: 100%; height: 240px; touch-action: pan-y; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-2); margin-top: 8px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; }
.tooltip { position: absolute; pointer-events: none; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12px; min-width: 150px; box-shadow: 0 6px 20px var(--shadow); opacity: 0; transition: opacity .1s; }
.tooltip .t { color: var(--text-2); font-size: 11px; margin-bottom: 4px; }
.tooltip .r { display: flex; justify-content: space-between; gap: 12px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--text-2); font-size: 11px; text-decoration: underline; cursor: pointer; letter-spacing: 0; text-transform: none; font-weight: 500; }
.tablewrap { max-height: 260px; overflow: auto; margin-top: 10px; }
.tablewrap table { width: 100%; font-size: 12px; border-collapse: collapse; }
.tablewrap td, .tablewrap th { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--line); font-family: var(--mono); }
.tablewrap td:first-child, .tablewrap th:first-child { text-align: left; }
.empty { color: var(--muted); font-size: 13px; padding: 30px 0; text-align: center; }

/* ---------- accounts ---------- */
.acct-group + .acct-group { margin-top: 16px; }
.acct-group h3 { margin: 0 0 6px; font-size: 13px; display: flex; align-items: center; }
.acct { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.acct .ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); font-size: 15px; }
.acct .nm { font-size: 13px; font-weight: 600; }
.acct .sub { font-size: 11px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.acct .val { text-align: right; }
.acct .val .num { font-size: 14px; font-weight: 700; border-radius: 4px; padding: 0 2px; }
.acct .val .c { font-family: var(--mono); font-size: 11px; }
.src { font-size: 9px; font-weight: 700; letter-spacing: .06em; padding: 1px 5px; border-radius: 4px; background: var(--surface-2); color: var(--text-2); }
.src.ok { background: var(--up-bg); color: var(--up); }
.src.err { background: var(--down-bg); color: var(--down); }
.src.stale { background: rgba(255,176,32,.15); color: var(--warn); }

/* ---------- ISA ---------- */
.isa-row { margin-bottom: 12px; }
.isa-row .top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > div { height: 100%; border-radius: 999px; background: var(--c); transition: width 1s; }

/* ---------- badges ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.badge { position: relative; text-align: center; padding: 10px 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.badge .i { font-size: 24px; filter: grayscale(1) opacity(.25); }
.badge .n { font-size: 10px; font-weight: 700; margin-top: 4px; color: var(--muted); }
.badge .owners { display: flex; justify-content: center; gap: 3px; margin-top: 5px; min-height: 14px; }
.badge .owners span { font-size: 9px; font-weight: 700; padding: 1px 4px; border-radius: 4px; color: #fff; }
.badge.got .i { filter: none; }
.badge.got .n { color: var(--text); }
.badge.got { border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }

/* ---------- mortgage ---------- */
.mortgage .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.mg-goal { text-align: center; padding: 14px 10px 16px; margin-bottom: 14px; border-radius: 12px; position: relative; overflow: hidden;
  background: radial-gradient(closest-side, rgba(255, 209, 102, .14), transparent) center / 100% 160% no-repeat, var(--surface-2); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); }
.mg-goal .date { font-family: var(--mono); font-size: clamp(34px, 11vw, 52px); font-weight: 800; color: var(--gold); line-height: 1.1; margin-top: 4px; letter-spacing: -.02em; }
.mg-goal .countdown { font-size: 15px; font-weight: 700; margin-top: 2px; }
.mg-goal .pace { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.mg-owed .owed { font-family: var(--mono); font-size: clamp(24px, 7vw, 34px); font-weight: 800; border-radius: 6px; padding: 0 2px; margin-left: -2px; }
.mg-owed .est { font-size: 11px; }
.mg-contract { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-2); }
.mg-contract .v { font-size: 16px; font-weight: 700; color: var(--text-2); margin-top: 2px; }
.mg-contract .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mg-bar { position: relative; height: 12px; border-radius: 999px; background: var(--surface-2); margin: 26px 0 24px; border: 1px solid var(--line); }
.mg-bar .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, rgba(25,210,122,.35), var(--up)); transition: width 1s; }
/* Whole-mortgage bar: the years before the race in a calm green, the race's own part in full green. */
.mg-bar.total .fill { background: color-mix(in srgb, var(--up) 35%, transparent); }
.mg-bar .race { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--up); transition: left 1s, width 1s; }
.mg-owed .paid { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.mg-owed .paid b { font-family: var(--mono); }
.mg-bar .ghost { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--gold); }
/* Above the bar, so it never runs into the paid-off line underneath. */
.mg-bar .ghost::after { content: attr(data-label); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; margin-bottom: 1px; }
.mg-bar .pct { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; text-align: right; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
/* The whole-mortgage label is longer and can wrap to two lines on a phone. */
.mg-bar.total { margin-bottom: 42px; }
.mg-bar .pct .nw { white-space: nowrap; }
.mg-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 0; }
.mg-stat .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.mg-stat .v { font-family: var(--mono); font-size: 16px; font-weight: 700; margin-top: 3px; }
.mg-stat .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.mg-stat .bar { margin-top: 6px; height: 6px; }
/* A tile with nothing to act on for now (e.g. "To hit the goal" while the overpay allowance is maxed). */
.mg-stat.off { opacity: .45; filter: grayscale(1); }
.mg-chart svg { display: block; width: 100%; height: 200px; margin-top: 14px; }
.mg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11px; color: var(--text-2); margin-top: 6px; }
.mg-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--c); margin-right: 5px; vertical-align: middle; }
.mg-legend i.dash { border-top-style: dashed; }
@media (min-width: 820px) { .mg-stats { grid-template-columns: repeat(3, 1fr); } .mg-chart svg { height: 260px; } }

.grid-2 { display: grid; gap: 16px; }
footer { text-align: center; color: var(--muted); font-size: 11px; padding: 10px 16px 30px; }

@media (min-width: 820px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .chart-wrap svg { height: 320px; }
}

/* ---------- admin ---------- */
.admin main { max-width: 760px; }
.form { display: grid; gap: 10px; }
.form .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
input[type=date] { min-width: 0; }
label { display: grid; gap: 4px; font-size: 11px; color: var(--text-2); font-weight: 600; }
input, select, textarea { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 11px; }
input:focus, select:focus { outline: 2px solid var(--jody); outline-offset: 0; border-color: transparent; }
.btn { appearance: none; border: 0; border-radius: 10px; padding: 11px 14px; font-weight: 700; font-size: 14px; background: var(--jody); color: #fff; cursor: pointer; }
.btn.ghost { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.btn.small { padding: 6px 10px; font-size: 12px; }
.btn.danger { background: var(--down-bg); color: var(--down); }
.btn:disabled { opacity: .5; }
/* Tabs wrap onto extra rows so every section is visible on a phone. */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; color: var(--text-2); }
.tabs button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .grow small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; overflow-wrap: anywhere; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; font-size: 13px; z-index: 50; box-shadow: 0 8px 30px var(--shadow); }
.toast.err { border-color: var(--down); color: var(--down); }
.note { font-size: 12px; color: var(--text-2); line-height: 1.5; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
details summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 0; }
.coin-id { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.coin-id img { border-radius: 50%; flex: none; background: var(--surface-2); }
.coin-id small { display: block; font-size: 11px; color: var(--muted); }
.coin-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); align-items: center; }
.coin-row .coin-id { grid-column: 1 / -1; }
.coin-row .coin-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.coin-result { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin-top: 6px; cursor: pointer; font-size: 13px; }
.coin-result .muted { margin-left: auto; font-size: 11px; }
.danger-zone { margin-top: 26px; padding-top: 16px; border-top: 1px dashed color-mix(in srgb, var(--down) 45%, var(--line)); display: grid; gap: 10px; }
.danger-zone h2 { color: var(--down) !important; margin: 0 !important; }
.danger-zone .btn { justify-self: start; }
.hidden { display: none !important; }
.src.est { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }

/* ---------- holdings ---------- */
.acct.expandable { cursor: pointer; }
.acct.expandable:hover .nm { color: var(--text); text-decoration: underline; text-decoration-color: var(--line); }
.chev { color: var(--muted); font-size: 11px; }
.holdings { margin: 0 0 6px 40px; padding: 4px 0 6px 12px; border-left: 2px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.pos { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px dashed var(--line); }
.pos:first-child { border-top: 0; }
.pos img, .pos-tag { width: 24px; height: 24px; border-radius: 50%; }
.pos-tag { display: grid; place-items: center; background: var(--surface-2); font-size: 7px; font-weight: 800; letter-spacing: -.02em; color: var(--text-2); font-family: var(--mono); }
.pos-n { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.pos-n span { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-n small { font-size: 10px; color: var(--muted); font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-v { display: flex; flex-direction: column; align-items: flex-end; }
.pos-v .v { font-size: 13px; font-weight: 700; border-radius: 4px; padding: 0 2px; }
.pos-v .pl { font-size: 10px; }
.pos-foot { font-size: 10px; padding-top: 6px; }
.tg-net { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); text-align: left; }
.tg-net-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; }
.tg-net-row .nw { font-size: 17px; font-weight: 800; border-radius: 4px; padding: 0 3px; }
.tg-net-sub { font-size: 12px; margin-top: 2px; }

/* ---------- monthly saving ---------- */
.saving { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv { min-width: 0; }
.sv-head { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.sv-head .avatar { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--photo) center 20% / cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--c); }
.sv-streak { margin-left: auto; font-size: 10px; color: var(--gold); white-space: nowrap; }
.sv-amt { margin-top: 6px; font-size: 11px; }
.sv-amt .paid { font-size: clamp(18px, 5.5vw, 24px); font-weight: 800; border-radius: 4px; padding: 0 2px; margin-left: -2px; }
.sv-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 6px 0; }
.sv-bar .fill { height: 100%; border-radius: 999px; background: var(--c); transition: width 1s; }
.sv-bar .fill.over { background: linear-gradient(90deg, var(--c), var(--gold)); }
.sv-status { font-size: 11px; min-height: 15px; }
.sv-status .warn { color: var(--warn); }
.sv-strip { margin-top: 10px; }
.sv-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 2px; }
.sv-badge { display: grid; justify-items: center; gap: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-badge i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 13px; line-height: 1;
  background: radial-gradient(circle, var(--surface) 58%, transparent 60%), conic-gradient(var(--ring, var(--up)) var(--p), var(--line) 0); }
.sv-badge { position: relative; }
.sv-badge small { font-size: 9px; color: var(--muted); }
.sv-gift { position: absolute; top: -6px; right: 0; font-size: 10px; font-style: normal; }
.sv-badge.hit i { --ring: var(--gold); box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 45%, transparent); }
.sv-badge.some i { --ring: var(--up); }
.sv-badge.now i { --ring: var(--c); animation: sv-pulse 2s ease-in-out infinite; }
.sv-badge.none i { opacity: .45; }
.sv-badge.out i { --ring: var(--down); background: radial-gradient(circle, var(--surface) 58%, transparent 60%), var(--down); }
.sv-badge.na i { background: none; border: 1.5px solid var(--line); }
.sv-badge.na, .sv-badge.future { cursor: default; }
.sv-badge.future i { background: none; border: 1.5px dashed var(--line); }
.sv-badge.future small, .sv-badge.na small { opacity: .6; }
.sv-year { font-size: 11px; margin-bottom: 6px; }
.sv-year b { color: var(--text-2); }
.sv-badge.sel i { outline: 2px solid var(--text-2); outline-offset: 1px; }
.sv-badge-read { font-size: 11px; margin-top: 6px; min-height: 1.4em; }
.sv-where { margin-top: 3px; line-height: 1.5; color: var(--text-2); }
@keyframes sv-pulse { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); } }
.sv-cheer { margin: -2px 0 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px; background: color-mix(in srgb, var(--gold) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); }
#saving-card { position: relative; overflow: hidden; }
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.confetti i { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 2px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translate(var(--dx), 420px) rotate(var(--r)); opacity: 0; } }
.sv-period { font-size: 10px; margin-top: 5px; }
.saving-note { font-size: 10px; line-height: 1.5; margin: 12px 0 0; }
.sv-impact { font-size: 11px; line-height: 1.5; margin-top: 6px; }
.sv-impact b { color: var(--text); }
.sv-of a { color: var(--gold); }
.player .meta .chip { font-size: 12px; padding: 2px 6px; }
.chip.peer-top { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.chip.peer-above { background: var(--up-bg); color: var(--up); }
.chip.peer-typical { background: var(--surface-2); color: var(--text-2); }
.chip.peer-below { background: rgba(255,176,32,.15); color: var(--warn); }
.tg-peers { font-size: 12px; margin-top: 10px; line-height: 1.5; }
.tg-peers b { color: var(--text); font-weight: 600; }

/* Make the hidden attribute win over layout rules like .player .meta div { display:flex } */
[hidden] { display: none !important; }

/* ---------- admin: £1M what-if slider ---------- */
.whatif { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 12px 10px; }
.wi-slider { width: 100%; padding: 0; border: 0; background: transparent; accent-color: var(--c); height: 28px; }
.wi-scale { display: flex; justify-content: space-between; font-size: 9px; margin-top: -2px; }
.wi-out { margin-top: 8px; font-size: 12px; line-height: 1.6; }
.wi-big { font-size: 15px; color: var(--text); }
.wi-big span { font-size: 11px; color: var(--muted); }

/* ---------- player card: more stats ---------- */
.more-btn { margin-top: 10px; background: none; border: 0; padding: 2px 0; font-size: 12px; color: var(--text-2); cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); }
.player .meta.more { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.player .meta.more .mix-wrap { justify-content: flex-start; }
.mix { display: flex !important; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; margin: 2px 0 4px; }
.mix span { display: block; min-width: 3px; }
.mix-legend { display: flex !important; flex-wrap: wrap; gap: 3px 10px; font-size: 10px; color: var(--text-2); justify-content: flex-start !important; }
.mix-legend span { display: inline-flex; align-items: center; gap: 4px; }
.mix-legend i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }

/* ---------- top bar: leader pill ---------- */
/* ---------- freedom planner ---------- */
.fr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.fr-tile { display: grid; gap: 2px; justify-items: start; text-align: left; min-width: 0; padding: 10px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); }
.fr-tile.on { border-color: var(--c); box-shadow: 0 0 0 1px var(--c) inset; }
.fr-who { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); }
.fr-who .avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--photo) center 20% / cover; box-shadow: 0 0 0 1.5px var(--c); }
.fr-age { font-size: 26px; font-weight: 800; color: var(--c); line-height: 1.1; }
.fr-sub { font-size: 11px; line-height: 1.35; color: var(--muted); max-width: 100%; }
.fr-race { margin: 10px 0 0; font-size: 13px; }
.fr-race:empty { display: none; }
.fr-hint { font-size: 11px; margin-top: 8px; }
.fr-detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.fr-slider-label { display: grid; gap: 6px; font-size: 13px; }
.fr-slider { width: 100%; accent-color: var(--c, var(--gold)); }
.fr-out { display: grid; gap: 4px; font-size: 13px; }
.fr-out .warn { color: var(--warn); }
.fr-mc { padding: 6px 0; }
.fr-units { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); justify-self: start; }
.fr-units button { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
.fr-units button.on { background: var(--surface); color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); }
.fr-growth { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.fr-growth-head { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.fr-gwrap svg { display: block; width: 100%; height: 190px; touch-action: pan-y; }
.fr-gtip { font-size: 11.5px; min-height: 2.8em; line-height: 1.5; margin-top: 2px; }
.fr-glegend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11px; color: var(--text-2); margin: 4px 0 8px; }
.fr-glegend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; opacity: .8; }
.fr-glegend i.band { background: var(--text-2); opacity: .25; }
.fr-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-key { font-size: 11.5px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.fr-key.bad { border-color: color-mix(in srgb, var(--down) 50%, var(--line)); }
.bm { display: grid; gap: 4px; margin-top: 8px; padding-top: 10px; border-top: 1px dashed var(--line); }
.bm-bar { position: relative; height: 8px; margin: 22px 4px 20px; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--down) 45%, var(--surface-2)), color-mix(in srgb, var(--warn) 45%, var(--surface-2)), color-mix(in srgb, var(--up) 55%, var(--surface-2))); }
.bm-tick, .bm-own { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; }
.bm-tick i { width: 2px; height: 14px; margin-top: -3px; background: var(--text-2); }
.bm-tick small { font-size: 9.5px; color: var(--muted); white-space: nowrap; margin-top: 2px; }
.bm-own { top: -19px; }
.bm-own i { width: 2px; height: 14px; background: var(--gold); }
.bm-own small { font-size: 9.5px; color: var(--gold); white-space: nowrap; }
.bm-you { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--c); border: 2px solid var(--surface); box-shadow: 0 0 0 2px var(--c), 0 0 10px var(--c); }
.fr-big { font-size: 15px; }
.fr-big b { font-family: var(--mono); font-size: 17px; color: var(--text); }
.fr-story { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.fr-story li { display: grid; padding: 7px 0; border-left: 2px solid var(--line); margin-left: 6px; padding-left: 12px; position: relative; font-size: 12.5px; }
.fr-story li::before { content: ''; position: absolute; left: -6px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--c, var(--gold)); }
.fr-story li.short::before { border-color: var(--down); }
.fr-story li.end { border-left-color: transparent; }
.fr-when { font-weight: 700; color: var(--c, var(--gold)); white-space: nowrap; margin-right: 4px; }
.fr-why { font-weight: 600; margin-bottom: 2px; }
.fr-ages { font-size: 11px; margin-bottom: 2px; }

/* ---------- crown race ---------- */
.crown-dialog { padding: 0; border: 0; background: transparent; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); color: var(--text); }
.crown-dialog::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.crown-dialog .crown-card { margin: 0; max-height: calc(100dvh - 40px); overflow-y: auto; }
.crown-dialog[open] .crown-card { animation: cd-in .22s ease-out; }
@keyframes cd-in { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.cd-close { margin-left: 8px; background: none; border: 0; color: var(--text-2); font-size: 16px; cursor: pointer; padding: 2px 4px; }
.player .avatar { cursor: pointer; }
.crown-month { color: var(--gold); margin-left: 4px; }
.hist-dialog { width: min(760px, calc(100vw - 24px)); }
.hist-dialog > .card { margin: 0; max-height: calc(100dvh - 40px); overflow-y: auto; }
.hist-dialog[open] > .card { animation: cd-in .22s ease-out; }
.track-card { cursor: pointer; }
.track-more { font-size: 12px; color: var(--text-2); margin-top: 10px; text-decoration: underline; text-decoration-color: var(--line); }
.crown-left { letter-spacing: 0; text-transform: none; font-weight: 500; }
.cr-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.cr-side { display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.cr-side.lead { border-color: var(--gold); box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 25%, transparent); }
.cr-side .avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--photo) center 20% / cover; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--c); }
.cr-mini { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-12deg); font-size: 18px; }
.cr-name { font-size: 12px; color: var(--text-2); }
.cr-pts { font-size: 30px; font-weight: 800; color: var(--c); line-height: 1; }
.cr-dash { font-size: 22px; }
.cr-status { text-align: center; font-size: 13px; margin: 10px 0 6px; }
.cr-table { display: grid; }
.cr-row { display: grid; grid-template-columns: 1fr 64px 64px; gap: 6px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cr-head { font-size: 11px; border-top: 0; padding-bottom: 4px; }
.cr-head span:not(:first-child), .cr-v { text-align: right; }
.cr-cat { display: grid; min-width: 0; }
.cr-cat small { font-size: 10.5px; }
.cr-w { font-size: 10px; color: var(--muted); margin-left: 2px; }
.cr-v { color: var(--text-2); }
.cr-v.win { color: var(--c); font-weight: 700; }
.cr-v.draw { color: var(--text); }
.cr-row.na { opacity: .55; }
.cr-note { font-size: 11px; margin: 8px 0 0; }
.cr-year { margin-top: 10px; font-size: 12px; display: grid; gap: 6px; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 50%, var(--line)); background: color-mix(in srgb, var(--c) 12%, var(--surface)); }

/* ---------- notifications banner ---------- */
.notify-banner { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4;
  background: var(--surface); border: 1px solid var(--line); }
.notices { position: relative; display: grid; }
.notices.empty, .notices .nt-off { display: none !important; }
.notices.multi > :not(.nt-dots) { padding-bottom: 24px; }
.nt-dots { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); display: flex; gap: 6px; padding: 6px 10px; border: 0; background: none; cursor: pointer; }
.nt-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.nt-dots i.on { background: var(--text); }
.nb-text { flex: 1; min-width: 0; }
.review-banner { text-decoration: none; color: inherit; }
.nb-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px; }

/* ---------- pay review wizard ---------- */
.klog { margin-top: 6px; font-size: 11px; }
.klog summary { cursor: pointer; color: var(--text-2); }
.klog div { padding: 2px 0; }
.rv-who { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rv-steps { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.rv-steps .on { color: var(--gold); font-weight: 700; }
.rv-steps .done { color: var(--up); }
.rv-step h3 { margin: 0; font-size: 15px; }
.rv-live { font-size: 13px; line-height: 1.6; min-height: 1.6em; }
.rv-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; }
.rv-pension { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--line); }
.rv-sum { display: grid; gap: 4px; font-size: 13px; }
.rv-sum > div { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
#rv-min-slider { width: 100%; accent-color: var(--gold); }

/* ---------- medals hanging from the player cards ---------- */
.player { padding-bottom: 66px; }
.player > .medals { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 2; height: 58px; display: flex; align-items: flex-start; gap: 4px; padding: 0 10px;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.medals .rail { position: absolute; left: 10px; right: 10px; top: 6px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 70%, var(--line)) 12%, color-mix(in srgb, var(--c) 70%, var(--line)) 88%, transparent); }
.medal { position: relative; display: grid; justify-items: center; margin-top: 6px; transform-origin: top center; animation: medal-sway 6s ease-in-out infinite; }
.medal:nth-child(odd) { animation-delay: -2s; }
.medal .ribbon { width: 12px; height: 16px; background: linear-gradient(90deg, var(--c) 0 50%, color-mix(in srgb, var(--c) 55%, #fff) 50%); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%); }
/* Each medal is framed in its rarity colour (grey, green, blue, purple, orange), like the trophy cabinet. */
.medal b { display: grid; place-items: center; width: 27px; height: 27px; margin-top: -4px; border-radius: 9px; font-size: 15px; font-weight: 700;
  border: 2px solid var(--rar, var(--gold)); background: color-mix(in srgb, var(--rar, var(--gold)) 16%, var(--surface)); box-shadow: 0 2px 5px rgba(0,0,0,.25); }
/* The next goal: a ring that fills as you get closer, hung at the end of the rail. */
.medals .goal { margin-left: auto; margin-top: 10px; display: flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--line); }
.goal .ring { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--rar) var(--pct), var(--grid) 0); }
.goal .ring b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: var(--surface); font-size: 14px; }
.goal-text { display: grid; line-height: 1.2; text-align: left; }
.goal-text b { font-family: var(--mono); font-size: 12px; color: var(--rar); }
.goal-text small { font-size: 10px; color: var(--text-2); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
/* Phone-width cards: three medals and the ring (the cabinet has the details). */
@media (max-width: 520px) { .goal-text { display: none; } .medals .goal { padding-left: 6px; } .goal .ring { width: 30px; height: 30px; } .goal .ring b { width: 23px; height: 23px; font-size: 13px; } }
.medal.empty { opacity: .35; filter: grayscale(1); }
.medals small { align-self: center; margin-top: 8px; font-size: 11px; }
.medal.new { animation: medal-jiggle .5s ease-in-out 5; }
@keyframes medal-sway { 50% { transform: rotate(3deg); } }
@keyframes medal-jiggle { 25% { transform: rotate(-22deg) scale(1.15); } 75% { transform: rotate(22deg) scale(1.15); } }
.burst { position: fixed; width: 6px; height: 9px; border-radius: 2px; pointer-events: none; z-index: 60; animation: burst-out 1.2s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes burst-out { to { transform: translate(var(--dx), calc(var(--dy) + 60px)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .medal, .medal.new { animation: none; } }

.lead-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; justify-self: center; padding: 3px 10px 3px 3px; border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--gold)) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c, var(--gold)) 45%, var(--line));
  font-size: 12px; white-space: nowrap; box-shadow: 0 0 14px color-mix(in srgb, var(--c, var(--gold)) 25%, transparent); }
.lead-pill:empty { visibility: hidden; }
.lp-avatar { width: 22px; height: 22px; border-radius: 50%; flex: none; background: center 20% / cover; box-shadow: 0 0 0 1.5px var(--c); }
.lp-text { color: var(--text-2); }
.lp-text b { color: var(--c); }
.lp-gap { color: var(--text); font-weight: 700; }
.lead-pill a { color: var(--gold); text-decoration: none; padding-left: 8px; }

/* ---------- crown steal ---------- */
.player .avatar.crowned { cursor: pointer; }
.player .avatar.crowned.no-drop .crown { animation: none; }
.crown-fly { position: fixed; z-index: 100; font-size: 15px; line-height: 1; pointer-events: none; transform-origin: 50% 60%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(255,209,102,.6)); }

/* ---------- title ribbons ---------- */
.titles { display: grid; gap: 4px; margin: 12px 0 0; }
.player:not(.stats-open) .titles > .ribbon:nth-child(n+2) { display: none; }
.titles:empty { display: none; }
.ribbon { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 7px; padding: 8px 9px; border-radius: 10px;
  background: var(--surface-2); transform-origin: left center;
  animation: ribbon-in .7s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(.35s + var(--i) * .18s); }
.ribbon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform: translateX(-120%); animation: ribbon-shine 1.1s ease-out both; animation-delay: calc(1s + var(--i) * .18s); pointer-events: none; }
.r-icon { font-size: 14px; line-height: 1; animation: ribbon-pop .5s cubic-bezier(.2,1.8,.4,1) both; animation-delay: calc(.75s + var(--i) * .18s); }
.r-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.r-text b { font-size: 13px; font-weight: 600; color: var(--gold); }
.r-text small { font-size: 12px; color: var(--text-2); }
/* The daytime gold is too light for small text on the pale tile. */
:root[data-theme="light"] .r-text b { color: #8a6208; }
@keyframes ribbon-in { from { opacity: 0; transform: translateX(-24px) scaleX(.2) skewX(-12deg); } to { opacity: 1; transform: none; } }
@keyframes ribbon-shine { to { transform: translateX(120%); } }
@keyframes ribbon-pop { from { transform: scale(0) rotate(-40deg); } to { transform: scale(1) rotate(0); } }

/* ---------- risk meter ---------- */
.risk-meter { position: relative; height: 6px !important; border-radius: 999px; margin: 2px 0 8px; display: block !important;
  background: linear-gradient(90deg, #19d27a, #ffd166 50%, #ff4d5e); }
.risk-meter i { position: absolute; top: -3px; width: 10px; height: 12px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 2px var(--surface); transition: left 1s; }
.risk-meter::before, .risk-meter::after { position: absolute; top: 8px; font-size: 10px; }
.risk-meter::before { content: '🛡️'; left: -2px; }
.risk-meter::after { content: '🎢'; right: -2px; }

/* ---------- leaderboard (collapsible) ---------- */
.board-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.board-summary b { font-size: 18px; }
.board-summary .bs-of { font-size: 11px; margin-left: auto; }
.board { margin-top: 12px; }
.sv-inout { font-size: 10.5px; margin-top: 2px; color: var(--text-2); }
/* A month with a withdrawal gets a small red marker under its bar. */
/* Paid in / Taken out toggle */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seg label { display: block; }
.seg input { position: absolute; opacity: 0; pointer-events: none; width: auto; }
.seg span { display: block; text-align: center; padding: 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.seg input:checked + span { color: var(--text); border-color: var(--up); background: var(--up-bg); }
.seg label:last-child input:checked + span { border-color: var(--down); background: var(--down-bg); }
.seg input:focus-visible + span { outline: 2px solid var(--jody); }
.mg-more-btn { margin: 0 0 4px; }
.mg-more { margin-top: 10px; }

/* Line the two saving cards up row by row: each card spans the same 10 rows of a shared grid (subgrid),
   so a line one person has and the other doesn't leaves a matching gap instead of shifting everything up. */
.saving { row-gap: 0; }
.sv { display: grid; grid-row: span 10; grid-template-rows: subgrid; align-content: start; }
.sv-line { font-size: 11px; line-height: 1.5; }
.sv-line b { color: var(--text); }
.sv-event { margin-top: 6px; }
.sv-inout:empty, .sv-line:empty { min-height: 0; }

/* ---------- race history (collapsible) ---------- */
.hist-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 13px; }
.hist-summary > span { display: inline-flex; align-items: center; gap: 4px; }
.hist-summary .hs-of { font-size: 11px; margin-left: auto; }
#hist-toggle { margin-top: 8px; }
#hist-body { margin-top: 10px; }
.pos img { object-fit: cover; background: #fff; }

/* Player cards share one row grid (subgrid), so every line sits at the same height on both cards and the cards
   are always equal height. The stat lists use display:contents so each stat row is its own grid row. */
.players { grid-template-rows: repeat(24, auto); row-gap: 0; }
.player { display: grid; grid-row: 1 / span 24; grid-template-rows: subgrid; align-content: start; row-gap: 0; }
.player .meta, .player .meta.more { display: contents; }
.player .meta > div { margin-top: 5px; font-size: 13px; color: var(--text-2); align-items: center; }
.player .meta:not(.more) > div:first-child { margin-top: 10px; }
.player .meta.more > div:first-child { margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.player .more-btn { justify-self: start; }
.player .more-row { justify-self: stretch; }
.player .meta > .mix { align-items: stretch; margin-top: 2px; }

/* Top bar: eye + settings on the right. */
#privacy-toggle { margin-left: auto; cursor: pointer; }
@media (max-width: 400px) { .logo { font-size: 13px; } }

/* ==================== Admin (redesign): sidebar, pages, tables, save bar ==================== */
body.admin { --nav-w: 232px; }
.admin .adm-top { display: flex; align-items: center; gap: 10px; }
.admin .adm-top .logo span { color: var(--gold); }
.adm-where { font-size: 13px; font-weight: 600; color: var(--text-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-where::before { content: '›'; margin-right: 8px; color: var(--muted); }
.adm-who { font-size: 12px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); align-items: start; max-width: 1180px; margin: 0 auto; }
.adm-nav { position: sticky; top: 58px; display: flex; flex-direction: column; gap: 2px; padding: 16px 10px 24px; max-height: calc(100dvh - 58px); overflow-y: auto; }
/* Admin is a tool: a quieter palette than the dashboard. Meta text a step lighter so it reads (4.5:1), and a control
   edge one step stronger than the card's line. */
body.admin { --muted: #8a96ab; --control: #2a3447; }
:root[data-theme="light"] body.admin { --muted: #5f6a7d; --control: #c3ccd8; }
.adm-group { font-size: 12px; font-weight: 500; color: var(--muted); padding: 18px 10px 6px; }
.adm-group:first-child { padding-top: 0; }
.adm-nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 9px; padding: 8px 10px;
  font-size: 14px; color: var(--text-2); cursor: pointer; }
.adm-nav button i { font-style: normal; width: 18px; text-align: center; }
.adm-nav button:hover { color: var(--text); }
/* The open section: a neutral pill and the label brightening, nothing coloured. */
.adm-nav button.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.adm-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--warn); color: var(--on-warn); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.adm-badge.dot { min-width: 8px; width: 8px; height: 8px; padding: 0; background: var(--down); }
.adm-badge[hidden] { display: none; }
.adm-back { display: none; margin-top: 18px; padding: 8px 10px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.adm-menu { display: none; }
.adm-scrim { display: none; }
.admin main.adm-main { max-width: 900px; width: 100%; padding: 28px 32px 120px; margin: 0; display: grid; gap: 16px; }
.page { display: grid; gap: 16px; }
.page.hidden { display: none; }
.page-head { padding: 0 0 4px; }
.page-head h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.015em; display: flex; align-items: center; gap: 10px; }
.page-head h1 .spacer { flex: 1; }
.page-head p { margin: 6px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 680px; }
.admin .page > .card, .admin .adm-cols > .card { margin: 0; }
.admin .card { padding: 20px; }
.admin .card h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.help { margin: 0 0 14px; font-size: 13px; color: var(--text-2); line-height: 1.55; max-width: 640px; }
small.help { display: block; margin: -2px 0 2px; font-size: 12px; color: var(--muted); }
.adm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adm-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Admin controls: fields with a clear edge on the card's own fill, and one primary per form - inverted (light on dark,
   dark on light), as wide as its words. Scoped to Admin so the dashboard's pop-ups keep their look. */
body.admin label { font-size: 13px; font-weight: 500; gap: 6px; }
body.admin input, body.admin select, body.admin textarea { background: var(--surface); border-color: var(--control); font-size: 15px; padding: 9px 12px; min-height: 40px; }
body.admin input[type=checkbox], body.admin input[type=radio] { min-height: 0; width: auto; }
body.admin input:focus, body.admin select:focus, body.admin textarea:focus { outline: 2px solid var(--text-2); outline-offset: 1px; border-color: var(--control); }
body.admin .btn { background: var(--text); color: var(--bg); border-radius: 999px; padding: 0 18px; min-height: 38px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
body.admin .btn:hover { opacity: .88; }
body.admin .btn.ghost { background: transparent; border: 1px solid var(--control); color: var(--text); }
body.admin .btn.ghost:hover { opacity: 1; border-color: var(--text-2); }
body.admin .btn.small { min-height: 30px; padding: 0 12px; font-size: 13px; }
body.admin .btn.danger { background: transparent; border: 1px solid color-mix(in srgb, var(--down) 55%, var(--line)); color: var(--down); }
body.admin form > .btn, body.admin .form > .btn { justify-self: start; min-width: 140px; }
body.admin .seg span { background: transparent; border-color: var(--control); }
body.admin .seg input:checked + span { background: var(--surface-2); border-color: var(--up); color: var(--up); }
body.admin .seg label:last-child input:checked + span { background: var(--surface-2); border-color: var(--down); color: var(--down); }
body.admin .list-row { font-size: 14px; padding: 12px 0; }
body.admin .list-row .grow small { font-size: 12px; }
/* Admin → Email & notifications: the pause switch. */
.np { margin: 4px 0 14px; }
.np-state { margin: 0 0 8px; font-size: 14px; }
.np-state.paused b { color: var(--warn); }
.admin .danger-zone { border-color: color-mix(in srgb, var(--down) 40%, var(--line)); margin-top: 0; }
.admin details summary { cursor: pointer; list-style: none; }
.admin details summary::-webkit-details-marker { display: none; }
.admin details summary::after { content: ' ▾'; color: var(--muted); }
.admin details[open] summary::after { content: ' ▴'; }

/* Targets: one person at a time, grouped fields */
.adm-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); justify-self: start; }
.adm-switch button { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: 9px; cursor: pointer; }
.adm-switch button.on { background: var(--surface-2); color: var(--c); box-shadow: inset 0 -2px 0 var(--c); }
#targets { display: grid; gap: 14px; }
#targets form[hidden] { display: none; }
.grp { margin: 14px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; color: var(--text); }
form > .grp:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* Forms with the save bar do not need their own Save button. */
form[data-sticky] > button.btn:last-child { display: none; }

/* Save bar */
.savebar { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  box-shadow: 0 12px 40px var(--shadow); font-size: 13px; animation: cd-in .2s ease-out; }
.savebar > span { color: var(--gold); font-weight: 600; margin-right: 4px; }
.savebar[hidden] { display: none; }

/* Tables */
.tbl-wrap { overflow-x: auto; margin: 0 -4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); padding: 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl td small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.tbl .r { text-align: right; }
.tbl .nowrap { white-space: nowrap; }
.tbl .acts { text-align: right; white-space: nowrap; }
.tbl .acts .btn { margin-left: 4px; }
.tbl code { font-size: 11.5px; color: var(--text-2); }
.tbl-filter { width: auto; font-size: 12px; padding: 5px 8px; border-radius: 8px; }

/* Overview */
/* Title row: the everyday jobs beside the title, the main one last and filled. */
.ov-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ov-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Accounts: one column per person, each account a row with its value flush right and how fresh it is under it. */
.ov-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px 32px; }
.ov-person h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.ov-who { display: inline-flex; align-items: center; gap: 8px; }
.ov-who::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ov-person h3 .num { margin-left: auto; font-size: 15px; }
.ov-acct { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; min-width: 0; }
.ov-acct:last-child { border-bottom: 0; }
.ov-acct .grow { flex: 1; min-width: 0; }
.ov-acct .num { flex: none; font-size: 14px; }
.ov-acct small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; overflow-wrap: anywhere; }
.ov-link { border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ov-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--up); }
.ov-acct.warn .ov-dot { background: var(--warn); }
.ov-acct.bad .ov-dot { background: var(--down); }
.ov-acct.bad small { color: var(--down); }
.ov-todo { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; margin-top: 8px; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface-2); border: 1px solid transparent; }
.ov-todo:first-child { margin-top: 0; }
.ov-todo i { margin-left: auto; font-style: normal; color: var(--muted); }
.ov-todo:hover { border-color: var(--control); }
.ov-todo.bad { border-color: color-mix(in srgb, var(--down) 50%, var(--line)); }
.ov-todo.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--line)); }
.ov-allgood { font-size: 14px; color: var(--up); }

/* Phones: the menu slides in from the left */
@media (max-width: 860px) {
  .adm-shell { grid-template-columns: minmax(0, 1fr); }
  .adm-menu { display: grid; }
  .adm-who { display: none; }
  .adm-nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 30; width: min(280px, 84vw); max-height: none; padding: calc(env(safe-area-inset-top) + 18px) 12px 24px;
    background: var(--bg); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform .22s ease-out; }
  body.menu-open .adm-nav { transform: none; box-shadow: 20px 0 60px var(--shadow); }
  .adm-back { display: block; }
  .adm-scrim { position: fixed; inset: 0; z-index: 25; background: var(--scrim); }
  body.menu-open .adm-scrim { display: block; }
  .admin main.adm-main { padding: 20px 16px 110px; }
  .page-head h1 { font-size: 22px; }
  body.admin input, body.admin select, body.admin textarea { font-size: 16px; } /* 16px stops iPhones zooming in */
  body.admin form > .btn, body.admin .form > .btn { justify-self: stretch; min-height: 44px; }
  .admin .card { padding: 16px; }
  .adm-cols { grid-template-columns: minmax(0, 1fr); }
  .tbl .acts .btn { margin: 2px 0 0 4px; }
}

/* ---------- help popups ---------- */
.help-btn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--text-2); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0; cursor: pointer; }
.help-btn:hover { color: var(--text); border-color: var(--text-2); }
.help-card h3 { margin: 16px 0 4px; font-size: 13px; color: var(--gold); }
.help-card p, .help-card li { font-size: 13px; line-height: 1.55; color: var(--text-2); margin: 4px 0; }
.help-card b { color: var(--text); }
.help-card ul { margin: 4px 0; padding-left: 18px; }
.help-card .muted { color: var(--muted); }

/* Public demo site */
.demo-banner { padding: 11px 12px; border-radius: 12px; font-size: 14px; line-height: 1.4; background: var(--surface); border: 1px solid var(--line); }
.demo-banner[hidden] { display: none; }

/* ---------- popups (dialogs): iPhone-safe ----------
   The popup sits inside the safe screen area (below the notch / status bar, above the home bar), only the card
   inside it scrolls, and its title row with the ✕ stays pinned at the top. The page behind is locked while a
   popup is open (see lockScrollWhileDialogOpen in app.js). */
dialog.crown-dialog[open] {
  position: fixed; inset: 0; margin: auto; display: flex; flex-direction: column;
  top: calc(env(safe-area-inset-top, 0px) + 12px); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  height: fit-content;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
}
dialog.crown-dialog[open] > .card {
  flex: 1 1 auto; min-height: 0; max-height: none; margin: 0; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: 0;
}
dialog.crown-dialog[open] > .card > h2:first-child {
  position: sticky; top: 0; z-index: 2; margin: 0 -2px 8px; padding: 14px 2px 10px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
dialog.crown-dialog .cd-close { min-width: 36px; min-height: 36px; font-size: 18px; }
html.modal-open, html.modal-open body { overflow: hidden; }

/* "A new version is available" */
.update-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 12px;
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--up) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--up) 45%, var(--line)); }
.update-banner b { padding: 4px 12px; border-radius: 8px; background: var(--up); color: var(--on-up); }
.update-banner[hidden] { display: none; }

/* Pull to refresh (home-screen app) */
.ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px); z-index: 60; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 6px 20px var(--shadow);
  transform: translate(-50%, -60px); opacity: 0; pointer-events: none; transition: opacity .15s; }
.ptr span { font-size: 17px; color: var(--text-2); transition: transform .2s; }
.ptr.ready span { transform: rotate(180deg); color: var(--up); }
.ptr.loading span { animation: ptr-spin .8s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* "How it works" ? buttons on the cards */
.card h2 .help-btn { margin-left: 4px; flex: none; }
.player > .pc-help { position: absolute; top: 12px; right: 10px; z-index: 3; width: 20px; height: 20px; font-size: 11px; opacity: .75; }
.together { position: relative; }
.together > .tg-help { position: absolute; top: 12px; right: 12px; z-index: 3; }
.adm-guide { margin-top: 18px; padding: 8px 10px; font-size: 13px; color: var(--text-2); text-decoration: none; }
.adm-guide + .adm-back { margin-top: 0; }
/* Room at the end of the guide, so its last sections can still scroll to the top when opened from a ? */
#guide .card::after { content: ""; display: block; height: 45dvh; }

/* ---------- month report ---------- */
.report-card h2 #report-month { letter-spacing: .08em; }
.rp-tabs { margin-bottom: 12px; }
.rp-story { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.rp-bar { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.rp-bar i { min-width: 3px; }
.rp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 12px; color: var(--text-2); }
.rp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.rp-legend span > i { width: 8px; height: 8px; border-radius: 2px; }
.rp-legend b { color: var(--text); font-weight: 600; }
.rp-total { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.report-card h3 { margin: 18px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.rp-line { font-size: 13px; line-height: 1.5; padding: 6px 0; border-bottom: 1px solid var(--line); }
.rp-line:last-child { border-bottom: 0; }
.rp-line .muted { font-size: 12px; }
.rp-foot { margin: 14px 0 0; font-size: 11px; line-height: 1.5; }
.sv-report { display: block; margin-top: 6px; }
.warn { color: var(--warn); }

/* Today / this week / month / year: the label is dotted to show it can be tapped. */
.player .chg, .tg-day { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rng { border-bottom: 1px dotted currentColor; }

/* ---------- crypto cycle ---------- */
.stack { display: grid; gap: 16px; align-content: start; }
.cy-clock { position: relative; padding: 18px 0 12px; }
.cy-segs { display: flex; gap: 2px; }
.cy-seg { min-width: 0; }
.cy-seg i { display: block; height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--c) 45%, var(--surface-2)); }
.cy-seg.on i { background: var(--c); }
.cy-mark { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 10px; color: var(--text-2); pointer-events: auto; }
.cy-mark small { font-size: 9px; line-height: 1; }
.cy-now { top: 0; }
.cy-now b { order: 2; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; background: var(--text); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.cy-now small { order: 1; color: var(--text); font-weight: 700; }
.cy-high { top: 13px; color: var(--gold); flex-direction: column-reverse; }
.cy-high small { display: none; }
.cy-ends { display: flex; justify-content: space-between; font-size: 10.5px; margin-top: -6px; }
.cy-line { font-size: 13px; line-height: 1.5; padding: 7px 0; border-bottom: 1px solid var(--line); }
.fg { display: flex; gap: 14px; align-items: center; padding: 10px 0 2px; flex-wrap: wrap; }
.fg-left { display: flex; flex-direction: column; align-items: center; width: 128px; flex: none; }
.fg-gauge { width: 128px; height: 70px; }
.fg-val { display: flex; flex-direction: column; align-items: center; margin-top: -2px; }
.fg-val b { font-size: 24px; line-height: 1.1; }
.fg-val span { font-size: 12px; font-weight: 700; }
.fg-right { flex: 1; min-width: 150px; }
.fg-title { font-size: 13px; font-weight: 700; }
.fg-trend { width: 100%; height: 44px; margin: 6px 0 2px; display: block; }
.fg-back { font-size: 11px; }
.fg-back b { color: var(--text); }
.cy-foot { margin: 10px 0 0; font-size: 11px; line-height: 1.5; }
.cy-key { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 2px; font-size: 11px; color: var(--muted); }
.cy-key span { display: inline-flex; align-items: center; gap: 5px; }
.cy-key span.on { color: var(--text); font-weight: 700; }
.cy-key i { width: 8px; height: 8px; border-radius: 2px; }
.cy-mood { margin: 14px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.fg + .fg { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }

/* Usual bonuses list (Admin → Targets) */
.bp-list { display: grid; gap: 10px; }
.bp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 10px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.bp-out { font-size: 12px; align-self: center; }
.bp-out b { color: var(--text); }
.bp-del { justify-self: start; }
.bp-add { justify-self: start; margin-top: 2px; }
.rv-bonus { margin: 6px 0; font-size: 13px; }
.rv-bonus b { color: var(--text); }

/* ---------- seasons ---------- */
.badge-group { grid-column: 1 / -1; margin: 6px 0 -2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.badge-group:first-child { margin-top: 0; }
.badge .owners span.dip, .medal.dip { opacity: .4; }
.cr-season { font-size: 11px; margin-top: 4px; }
.cr-hall { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.cr-hall-row { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; }
.cr-hall-row .num { color: var(--text-2); }

/* ---------- quick add ---------- */
.player > .pc-add { position: absolute; top: 11px; right: 36px; z-index: 3; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.player > .pc-add:hover { border-color: var(--c); color: var(--c); }
.quick-card #quick-tabs { margin-bottom: 12px; }
.quick-form { display: grid; gap: 10px; }
.quick-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.quick-form input, .quick-form select { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); }
.quick-form .qm-dir { justify-self: start; }
.qm-hint { margin: 0; font-size: 12px; line-height: 1.4; }

/* ---------- road to £1M ---------- */
:root { --mi-start: color-mix(in srgb, var(--jody) 55%, var(--surface)); --mi-put: #2bb3a3; --mi-bonus: #9b7bff; --mi-grow: var(--gold); }
.million-card .mi-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, var(--k) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--k) 55%, var(--line)); white-space: nowrap; }
.mi-chart { position: relative; margin: 6px 0 4px; }
.mi-chart svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.mi-chart path { stroke: var(--surface); stroke-width: 1; }
.mi-tip { top: 8px; }
.mi-what { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.mi-table-btn { margin-top: 10px; font-size: 12px; }
.mi-tbl td, .mi-tbl th { font-size: 12px; }
.eta-row { cursor: pointer; }
.eta-row .eta { text-decoration: underline dotted; text-underline-offset: 3px; }
.mi-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.mi-link b { text-decoration: underline dotted; text-underline-offset: 3px; }
.million-card h3 { margin: 18px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.mi-toggle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; margin: 0 0 10px; cursor: pointer; }
.mi-toggle input { width: 18px; height: 18px; accent-color: var(--gold); }
/* A checkbox with its sentence beside it (the plain label rule would stack them). */
label.mi-toggle { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; font-weight: 500; color: var(--text); }
label.mi-toggle input { flex: none; margin: 1px 0 0; }

/* Mortgage quick add */
.card h2 .mg-add { flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; letter-spacing: 0; }
.card h2 .mg-add:hover { border-color: var(--up); color: var(--up); }
#mg-tabs { margin-bottom: 12px; flex-wrap: wrap; }
.quick-form .mg-who { justify-self: start; }


/* Monty, the (not a) money man: the little adviser on each player card and his what-if corner. A calm planner in
   the same 3D style as the player avatars (design/adviser/), so he sits still on the card's own colours. */
.player .pc-monty { position: absolute; top: 8px; right: 62px; z-index: 3; width: 28px; height: 28px; padding: 0; border-radius: 50%; overflow: hidden;
  border: 1.5px solid var(--line); background: var(--surface-2); cursor: pointer; transition: transform .15s, border-color .15s; }
.player .pc-monty img { width: 100%; height: 100%; display: block; object-fit: cover; }
.player .pc-monty:hover, .player .pc-monty:focus-visible { transform: scale(1.12); border-color: var(--gold); }
/* Phone-width cards have no room beside the name: Monty waits in the bottom corner instead. */
.player .more-row { position: static; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
@media (max-width: 600px) { .player .pc-monty { position: static; flex: none; margin-top: 6px; } }
.adv-head { display: flex; align-items: flex-end; gap: 10px; margin: 0 0 12px; }
.adv-monty { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface-2); }
.adv-bubble { position: relative; flex: 1; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); font-size: 13px; line-height: 1.45; }
/* The results stay pinned while the sliders scroll underneath, so you see things move as you drag. */
.adv-results { position: sticky; top: -1px; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px 0 8px; background: var(--surface); }
@media (max-width: 520px) { .adv-results { grid-template-columns: repeat(2, 1fr); } }
.adv-tile { display: grid; gap: 2px; padding: 8px 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2, var(--surface)); min-width: 0; }
.adv-tile > span { font-size: 11px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adv-tile > b { font-size: 18px; line-height: 1.2; }
.adv-tile > b small { font-size: 11px; font-weight: 600; color: var(--text-2); }
.adv-tile > i { font-style: normal; font-size: 11px; font-weight: 600; }
.adv-tile > i.up { color: var(--up); } .adv-tile > i.down { color: var(--down); } .adv-tile > i.flat { color: var(--muted); font-weight: 500; }
.adv-gauge { margin: 4px 0 8px; font-size: 12px; }
.adv-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; margin-bottom: 5px; }
.adv-fill { height: 100%; border-radius: 99px; transition: width .15s, background-color .3s; }
.adv-fill.low { background: var(--muted); } .adv-fill.ok, .adv-fill.good { background: var(--up); } .adv-fill.warn { background: var(--warn); } .adv-fill.bad { background: var(--down); }
.adv-levers { display: grid; gap: 4px; margin-top: 4px; }
label.adv-lever { display: grid; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text); }
.adv-lever-top { display: flex; justify-content: space-between; gap: 8px; }
.adv-val { white-space: nowrap; } .adv-val .muted { font-weight: 500; }
.adv-lever input[type=range] { width: 100%; height: 28px; accent-color: var(--gold); margin: 0; }
.adv-effect { font-size: 12px; font-weight: 500; line-height: 1.4; }
.adv-actions { display: flex; justify-content: flex-end; margin: 4px 0 6px; font-size: 12px; }
.adv-tips, .adv-steps { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 0; }
.adv-tips li, .adv-steps li { font-size: 13px; line-height: 1.5; padding: 7px 0; border-bottom: 1px solid var(--line); }
.adv-steps { counter-reset: step; }
.adv-save { width: 100%; margin-top: 12px; }
.adv-save-note { font-size: 11px; margin: 6px 0 0; }

/* Admin: nothing under 11px (source tags in the money list, the what-if slider's scale). */
body.admin .src { font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 2px 6px; }
body.admin .wi-scale { font-size: 11px; }

/* ---------- levels ---------- */
.player .lvl { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; cursor: pointer; }
.player .lvl .lv-n { font-weight: 800; color: var(--lv); }
.player .lvl .lv-t { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.xpbar { flex: 1; min-width: 28px; height: 5px; border-radius: 3px; background: var(--grid); overflow: hidden; display: block; }
.xpbar i { display: block; height: 100%; background: var(--lv); border-radius: 3px; transition: width .6s; }
.badge.got { border-color: color-mix(in srgb, var(--rar) 60%, var(--line)); }
.heroes { display: grid; gap: 10px; margin-bottom: 14px; }
.hero { display: grid; grid-template-columns: 96px 1fr; gap: 4px 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--lv) 45%, var(--line)); }
/* The hero stands idle: breathing, a slight sway and a soft shadow, pivoting on the feet. Each hero is out of step
   (--delay). Not switched off for reduced motion: it's gentle, and Windows often has that setting on. */
.hero-fig { position: relative; width: 96px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; }
.hero-img { position: relative; width: 96px; height: 96px; object-fit: contain; display: block; transform-origin: 50% 96%;
  animation: hero-idle 3.4s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.hero-shadow { position: absolute; left: 28%; right: 28%; bottom: 1px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .28);
  filter: blur(2px); animation: hero-shadow 3.4s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.hero-fig.hop .hero-img { animation: hero-hop .6s cubic-bezier(.3, 0, .3, 1); }
.hero-fig.hop .hero-shadow { animation: hero-hop-shadow .6s cubic-bezier(.3, 0, .3, 1); }
@keyframes hero-idle {
  0%, 100% { transform: rotate(0) scale(1, 1); }
  25% { transform: rotate(-1.4deg) scale(1.01, .99); }
  50% { transform: rotate(0) scale(.99, 1.025); }
  75% { transform: rotate(1.4deg) scale(1.01, .99); }
}
/* The animated looks move by themselves; the CSS idle is only for a still. */
.hero-img.live, .levelup img.live { animation: none; }
@keyframes hero-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.9); opacity: .8; } }
@keyframes hero-hop {
  0% { transform: scale(1, 1); }
  18% { transform: scale(1.08, .9); }
  45% { transform: translateY(-16px) scale(.95, 1.06); }
  72% { transform: translateY(0) scale(1.06, .93); }
  100% { transform: scale(1, 1); }
}
@keyframes hero-hop-shadow { 45% { transform: scaleX(.6); opacity: .4; } }
.hero-name { font-weight: 700; font-size: 15px; color: var(--c); }
.hero-lv { font-family: var(--mono); font-size: 12px; font-weight: 800; color: var(--lv); margin-left: 4px; }
.hero-title { font-size: 13px; font-weight: 600; margin: 2px 0 6px; }
.hero .xpbar { height: 7px; }
.hero-xp, .hero-from { font-size: 11px; color: var(--text-2); margin-top: 4px; }
.hero-from { color: var(--muted); }
.levelup { position: relative; text-align: center; padding: 20px 16px; border: 1px solid var(--lv); }
.levelup img { width: min(260px, 70vw); aspect-ratio: 1; object-fit: contain; transform-origin: 50% 96%; animation: hero-idle 3.4s ease-in-out infinite; }
.levelup h2 { justify-content: center; margin: 6px 0 4px; }
.levelup p { margin: 0; }
.levelup .cd-close { position: absolute; top: 10px; right: 10px; }

/* ---------- trophy cabinet ---------- */
.cab-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.cab-tabs button { border: 1px solid var(--line); background: none; color: var(--text-2); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.cab-tabs button[aria-selected="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.cab-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.cab-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 4px 0 6px; }
.next-up { display: grid; gap: 6px; margin-bottom: 12px; }
.nu-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--rar); border-radius: 10px; padding: 8px 10px; --lv: var(--rar); }
.nu-row .i { font-size: 22px; }
.nu-body { flex: 1; min-width: 0; display: grid; gap: 4px; }
.nu-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.nu-top b { font-weight: 600; }
.nu-top .rar { font-size: 11px; color: var(--rar); white-space: nowrap; }
.nu-text { font-size: 11px; color: var(--text-2); }
.shelf { border-top: 1px solid var(--line); }
.shelf summary { display: flex; justify-content: space-between; padding: 10px 2px; cursor: pointer; font-size: 13px; font-weight: 700; list-style: none; }
.shelf summary::-webkit-details-marker { display: none; }
.shelf summary::after { content: '▸'; color: var(--muted); margin-left: 8px; }
.shelf[open] summary::after { content: '▾'; }
.shelf summary .muted { margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; padding-bottom: 12px; }
.btile { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 8px 4px 7px; font: inherit; color: var(--muted); cursor: pointer;
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px; }
.btile .i { font-size: 24px; filter: grayscale(1) opacity(.3); }
.btile .n { font-size: 10px; font-weight: 700; line-height: 1.2; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btile.got { border: 1.5px solid var(--rar); color: var(--text); background: color-mix(in srgb, var(--rar) 9%, var(--surface-2)); }
.btile.got .i { filter: none; }
.btile.dip { opacity: .55; }
.btile .who { display: flex; gap: 3px; }
.btile .who i { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid; }
.btile .mini { width: 70%; height: 3px; border-radius: 2px; background: var(--grid); overflow: hidden; }
.btile .mini i { display: block; height: 100%; background: var(--rar); }
.badge-sheet { position: relative; text-align: center; padding: 22px 18px; }
.badge-sheet .cd-close { position: absolute; top: 10px; right: 10px; }
.bs-icon { width: 76px; height: 76px; margin: 0 auto; display: grid; place-items: center; font-size: 40px; border-radius: 18px;
  border: 2px solid var(--rar); background: color-mix(in srgb, var(--rar) 12%, var(--surface-2)); }
.badge-sheet h2 { justify-content: center; margin: 10px 0 2px; }
.bs-rar { font-size: 12px; font-weight: 600; }
.badge-sheet .bs-desc { color: var(--text); font-weight: 600; margin: 12px 0 10px; }
.bs-how { text-align: left; border-left: 3px solid var(--line); padding: 2px 0 2px 10px; margin: 0 0 12px; }
.bs-how b { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bs-how p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.bs-rows { display: grid; gap: 6px; text-align: left; background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.bs-row { display: flex; justify-content: space-between; gap: 10px; }
.bs-row span:last-child { text-align: right; }

/* ---------- your time ---------- */
.tm-big { font-size: 22px; font-weight: 700; margin-top: 2px; }
.tm-big span { color: var(--c); }
.tm-sub { font-size: 12px; margin: 2px 0 12px; }
.tm-gain { font-size: 13px; font-weight: 600; margin: -4px 0 12px; }
.tm-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; max-width: 360px; }
.tm-dot { display: block; aspect-ratio: 1; border-radius: 50%; position: relative; box-sizing: border-box; }
/* Working years are hollow rings, clearly visible on both themes; lived is grey, free is your colour. */
.tm-dot.lived, .tm-legend i.lived { background: color-mix(in srgb, var(--muted) 75%, transparent); }
.tm-dot.work, .tm-legend i.work { background: transparent; border: 1.5px solid color-mix(in srgb, var(--muted) 70%, transparent); }
.tm-dot.free, .tm-legend i.free { background: var(--c); }
.tm-dot.now { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--gold); }
.tm-dot.sp::after { content: ''; position: absolute; inset: 28%; border-radius: 50%; background: var(--surface); }
.tm-dot.gain { animation: tm-gain 1.2s ease-in-out 4; }
@keyframes tm-gain { 50% { transform: scale(1.35); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 35%, transparent); } }
.tm-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tm-tags span { font-size: 11px; border-radius: 999px; padding: 3px 9px; background: var(--surface-2); border: 1px solid var(--line); }
.tm-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 11px; }
.tm-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; box-sizing: border-box; }
.tm-line { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-style: italic; color: var(--text-2); font-size: 13px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 500; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
#time-show { margin-top: 10px; }
/* The track and Your time: stacked on phones, side by side on wide screens (the track takes the full width when
   Your time is hidden). Inside the card the dots go left and the labels sit beside them, to keep it short. */
.track-row { display: grid; gap: 16px; }
@media (min-width: 820px) {
  .track-row:has(> #time-card:not(.hidden)) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .tm-body { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 16px; align-items: start; }
  .tm-grid { gap: 5px; }
  .tm-side .tm-tags { margin-top: 0; flex-direction: column; align-items: flex-start; }
  .tm-side .tm-legend { flex-direction: column; gap: 6px; }
}

/* ---------- What's new ---------- */
.nav-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--blue-hi); box-shadow: 0 0 8px var(--blue); flex: none; }
.nav-dot[hidden] { display: none; }
.menu-btn { position: relative; }
.menu-btn .nav-dot { position: absolute; top: 5px; right: 5px; margin: 0; }
.news-v { padding: 14px 0; border-top: 1px solid var(--line); }
.news-v:first-child { border-top: 0; padding-top: 2px; }
.news-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.news-head b { font-size: 15px; }
.news-head small { margin-left: auto; font-size: 12px; }
.news-tag { padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 800; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); }
.news-v.latest .news-tag { color: #fff; background: var(--blue); border-color: var(--blue); }
.news-v ul { margin: 8px 0 0; padding-left: 18px; }
.news-v li { font-size: 13.5px; line-height: 1.5; color: var(--text-2); margin: 3px 0; }
@media (min-width: 768px) and (max-width: 1099px) { .sidenav .nav-dot { position: absolute; top: 8px; right: 14px; margin: 0; } .sn-more button { position: relative; } }

/* ---------- Motion: a section coming into view, hover lifts ---------- */
/* Bars grow from the left and the race trails draw themselves (nav.js adds .entering for a moment). The numbers
   themselves never count up: they show their real value straight away. */
@keyframes bar-grow { from { transform: scaleX(0); } }
@keyframes rh-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rh-in { from { opacity: 0; transform: translateX(-3%); } }
.view.entering :is(.bar, .pc-prog, .xpbar, .goal-bar) > i, .view.entering .sv-bar > .fill { transform-origin: left center; animation: bar-grow .9s cubic-bezier(.2, .8, .2, 1) both; }
.view.entering .rh-trail { stroke-dasharray: 1; animation: rh-draw 1.3s cubic-bezier(.3, .7, .2, 1) both; }
.view.entering .rh-runner { animation: rh-in .7s ease-out both; }
.view.entering .tile, .view.entering .race-side > .card, .view.entering .race-bottom > .card { animation: view-in .5s ease-out both; }
.view.entering .race-tiles > .tile:nth-child(2), .view.entering .race-bottom > .card:nth-child(2) { animation-delay: .06s; }
.view.entering .race-tiles > .tile:nth-child(3), .view.entering .race-bottom > .card:nth-child(3) { animation-delay: .12s; }
.view.entering .race-tiles > .tile:nth-child(4) { animation-delay: .18s; }
/* Passed milestones on the race banner. */
/* The leader's name tag glows gently; a milestone just passed pops once. */
.rh-svg .rh-pill.lead rect { stroke: var(--gold); animation: rh-glow 2.8s ease-in-out infinite; }
@keyframes rh-glow { 50% { filter: drop-shadow(0 0 5px rgba(255, 200, 87, .7)); } }
.rh-svg .rh-pill.pop { transform-box: fill-box; transform-origin: center; animation: rh-pop .9s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes rh-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .rh-svg .rh-pill.lead rect, .rh-svg .rh-pill.pop { animation: none; } }
.rh-svg .rh-pill.done rect { fill: rgba(6, 40, 30, .85); stroke: var(--up); }
.rh-svg .rh-pill.done text { fill: var(--up); }
.rh-svg .rh-dot.done { fill: var(--up); }
@media (hover: hover) {
  :is(.tile[role="button"], .fin-row, .rc-row, .goal-p, .next-ach, .nu-row) { transition: transform .15s ease-out, border-color .15s, box-shadow .15s; }
  :is(.tile[role="button"], .fin-row, .rc-row, .goal-p, .next-ach, .nu-row):hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(0, 0, 0, .8); }
  .btile { transition: transform .15s ease-out; }
  .btile:hover { transform: translateY(-3px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .view.entering *, .view.entering .rh-trail { animation: none !important; }
  :is(.tile, .fin-row, .rc-row, .goal-p, .next-ach, .nu-row, .btile):hover { transform: none; }
}
/* Achievement descriptions may take two lines instead of being cut off. */
.rc-main small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Time-period and person pickers: easier to hit, and a clear "on" state. */
.perf-ranges button, .seg-sm button { min-height: 30px; }
.perf-ranges button { padding: 4px 10px; }
.perf-ranges button.on { color: var(--text); font-weight: 700; }
@media (pointer: coarse) { .perf-ranges button, .seg-sm button { min-height: 40px; } .perf-ranges button { padding: 4px 12px; } .tip-btn { width: 32px; height: 32px; } }
.fs-basis { margin: 12px 0 0; font-size: 11.5px; line-height: 1.4; }
/* Phones: the banner's title block stays compact so the lead line clears the runners' name tags, and the header's
   leader pill shrinks (with an ellipsis) rather than running under the buttons beside it. */
@media (max-width: 520px) {
  .rh-lead { margin-top: 6px; padding: 3px 12px; font-size: 12.5px; }
  .race-hero:not(.is-wide) .rh-crown-top { font-size: 24px; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lead-pill { max-width: 100%; }
  .lp-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 400px) { .logo { font-size: 0; } .logo-mark { margin-right: 0; } } /* just the mark: the leader pill needs the room */
@media (max-width: 400px) { .lp-verb { display: none; } }
/* The road to £1M card: the mortgage chart's look, with three figures underneath. */
.road-card .seg { margin-bottom: 4px; }
.road-card .mg-legend span:first-child i { --c: var(--road-c); }
.road-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.road-stats .lbl { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.road-stats .v { font-size: 16px; font-weight: 700; margin-top: 2px; }
.road-stats .s { font-size: 11px; color: var(--muted); margin-top: 2px; }
@media (max-width: 420px) { .road-stats { grid-template-columns: 1fr 1fr; } }
/* A suggestion under a status: one calm line per person who is behind. */
.tile-fix { flex-basis: 100%; padding: 6px 10px; border-radius: 10px; font-size: 12px; line-height: 1.4; color: var(--text); background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.tile-fix b { font-weight: 700; }
.road-fix { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.road-fix[hidden] { display: none; }
.road-fix a { color: var(--blue-hi); font-weight: 700; }
.road-why { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; }
.road-why[hidden] { display: none; }
/* Feedback: feature requests and bug reports */
.request-card #request-kind { margin-bottom: 12px; }
.quick-form textarea { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); resize: vertical; }
.rq-h { margin: 18px 0 8px; font-size: 14px; }
.rq-item { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 8px; font-size: 13px; line-height: 1.45; }
.rq-item b { font-weight: 700; }
.rq-item p { margin: 4px 0 0; }
.rq-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 11.5px; color: var(--text-2); }
.rq-tag { padding: 2px 8px; border-radius: 99px; font-weight: 700; background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--blue-hi); }
.rq-tag.doable, .rq-tag.done, .rq-tag.fixed { background: color-mix(in srgb, var(--up) 18%, transparent); color: var(--up); }
.rq-tag.not_doable, .rq-tag.not_a_bug { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.rq-reply { padding-left: 10px; border-left: 2px solid var(--gold); }
/* A small animated tag beside Feedback: "New" until it's been opened once, then "Reply" whenever an answer is waiting. */
.fb-badge { margin-left: auto; flex: none; position: relative; padding: 2px 8px; border-radius: 99px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, var(--blue), var(--blue-hi), var(--blue)); background-size: 200% 100%; animation: fb-shine 2.4s linear infinite, fb-ring 2s ease-out infinite; }
.fb-badge[hidden] { display: none; }
.fb-badge.reply { background: linear-gradient(90deg, #1fae6a, var(--up), #1fae6a); background-size: 200% 100%; }
@keyframes fb-shine { to { background-position: -200% 0; } }
@keyframes fb-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue-hi) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@media (prefers-reduced-motion: reduce) { .fb-badge { animation: none; } }
/* The scenery comes alive, very gently: the sun breathes and the lake shimmers (shapes are placed in race-hero.js). */
.rh-fx { pointer-events: none; }
.rh-fx .rh-sun, .rh-fx .rh-refl { transform-box: fill-box; transform-origin: center; }
.rh-sun { animation: rh-breathe 7s ease-in-out infinite alternate; }
.rh-refl { animation: rh-flicker 5s ease-in-out infinite alternate; }
.rh-shim { stroke: #fff0c4; stroke-width: 2; stroke-linecap: round; opacity: 0; animation: rh-drift var(--t, 6s) ease-in-out var(--d, 0s) infinite; }
.rh-shim.near { stroke: #fffbe6; stroke-width: 2.4; }
@keyframes rh-breathe { from { opacity: .6; transform: scale(.9); } to { opacity: 1; transform: scale(1.12); } }
@keyframes rh-flicker { from { opacity: .6; transform: scaleX(.8); } to { opacity: 1; transform: scaleX(1.2); } }
@keyframes rh-drift { 0%, 100% { opacity: 0; transform: translateX(calc(var(--dx, 4px) * -1)); } 50% { opacity: .85; transform: translateX(var(--dx, 4px)); } }
@media (prefers-reduced-motion: reduce) { .rh-sun, .rh-refl { animation: none; opacity: .85; } .rh-shim { animation: none; opacity: 0; } .rh-shim.near { opacity: .45; } }
/* The weather over the banner (public/weather.js): what it says, and how it moves. */
.rh-wx-chip { position: absolute; z-index: 2; top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff;
  background: rgba(8, 14, 36, .55); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); white-space: nowrap; }
.rh-wx-chip[hidden] { display: none; }
.rh-wx { pointer-events: none; }
.rh-cloud { animation: rh-cloud var(--dur, 140s) linear var(--delay, 0s) infinite; }
@keyframes rh-cloud { from { transform: translateX(var(--x0)); } to { transform: translateX(var(--x1)); } }
.rh-drop { stroke: #cfdcf2; stroke-width: 1.8; stroke-linecap: round; opacity: .42; animation: rh-fall var(--dur) linear var(--delay) infinite; }
.wx-storm .rh-drop { opacity: .5; }
@keyframes rh-fall { from { transform: translate(0, 0); } to { transform: translate(calc(var(--fall) * -.22), var(--fall)); } }
.rh-flake { fill: #fff; opacity: .85; animation: rh-snow var(--dur) linear var(--delay) infinite; }
@keyframes rh-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--sway), calc(var(--fall) * .5)); } 100% { transform: translate(0, var(--fall)); } }
.rh-bolt { opacity: 0; animation: rh-flash 11s linear infinite; }
@keyframes rh-flash { 0%, 89% { opacity: 0; } 90% { opacity: .34; } 91.5% { opacity: 0; } 93% { opacity: .22; } 95%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rh-cloud { animation: none; transform: translateX(var(--xs)); }
  .rh-precip, .rh-bolt, .rh-leaves { display: none; }
}
.rh-leaf { animation: rh-leaf var(--dur) linear var(--delay) infinite; }
@keyframes rh-leaf { 0% { transform: translate(var(--x0), 0) rotate(0deg); } 50% { transform: translate(calc((var(--x0) + var(--x1)) / 2), var(--rise)) rotate(360deg); } 100% { transform: translate(var(--x1), calc(var(--rise) * -.6)) rotate(760deg); } }
.wx-storm .rh-drop { stroke-width: 2.2; }