/* ==========================================================================
   FSL design system — static/fsl.css
   Source of truth: design_handoff_fsl_website/README.md ("Design tokens",
   "Shared components"). Flat dark surfaces, hairline rules, condensed display
   type, color only for meaning. No gradients, glows, box-shadows or emoji.
   Loaded by templates/_fsl_head.html. Coexists with Tailwind on pages that
   have not migrated yet; nothing here is global enough to fight it except the
   body background/font, which only matters on migrated pages.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* surfaces */
  --bg-page:   #0b0d12;
  --bg-outer:  #06070b;
  --bg-card:   #0d0f15;
  --bg-sunken: #0a0c11;
  --bg-deep:   #08090d;
  --bg-chip:   #1a1d26;
  --bg-raised: #12151d;

  /* rules */
  --rule-1: rgba(255,255,255,.05);
  --rule-2: rgba(255,255,255,.07);
  --rule-3: rgba(255,255,255,.08);
  --rule-4: rgba(255,255,255,.10);
  --rule-strong: rgba(255,255,255,.14);
  --rule-card-hover: rgba(255,255,255,.22);
  --hover: rgba(255,255,255,.03);

  /* text */
  --text-1: #ffffff;
  --text-2: #e8eaf0;
  --text-2b: #eceef4;
  --text-3: #b9becd;
  --text-muted: #8a90a2;
  --text-dim: #5b6376;
  --text-faint: #7c8496;

  /* meaning */
  --blue: #5ab4f5;
  --blue-hover: #8ecdfa;
  --on-blue: #06121d;
  --blue-tint: rgba(90,180,245,.08);
  --blue-tint-strong: rgba(90,180,245,.45);
  --green: #3ddc84;
  --red: #ff5c5c;
  --red-light: #ff8a8a;
  --gold: #fbbf24;
  --gold-bright: #ffd700;
  --silver: #cbd5e1;
  --bronze: #c08457;
  --purple: #c084fc;

  /* chart series, in order */
  --s1: #5ab4f5; --s2: #3ddc84; --s3: #fbbf24; --s4: #c084fc;
  --s5: #ff8a5c; --s6: #2dd4bf; --s7: #f472b6; --s8: #a3e635;
  --s9: #60a5fa; --s10: #facc15; --s11: #fb7185; --s12: #34d399;

  /* progress */
  --progress-fill: #c9cddb;
  --progress-track: rgba(255,255,255,.08);

  /* type */
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;

  /* radii */
  --r-sm: 3px;
  --r-md: 4px;
  --r-pill: 99px;

  /* layout */
  --nav-h: 62px;
  --page-max: 1600px; /* mocks' canvas is 1440; 1600 fills a wide monitor without stretching rows too far */
  --gutter: 32px;
}

/* ---------- Base --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.fsl {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
body.fsl a { color: var(--blue); text-decoration: none; }
body.fsl a:hover { color: var(--blue-hover); }
body.fsl img { max-width: 100%; display: block; }
body.fsl button { font-family: inherit; }
/* Zero-specificity reset (:where) so page rules and .mt-* utilities on headings/paragraphs always win. */
:where(body.fsl) :where(h1, h2, h3, h4, p) { margin: 0; }
body.fsl ::selection { background: rgba(90,180,245,.35); color: #fff; }

.tnum, .fsl-num, .fsl-rank { font-variant-numeric: tabular-nums; }
/* Meaning colours win over text-tone utilities (.fsl-meta etc.) wherever they're combined. */
.gain, body.fsl .gain { color: var(--green); }
.loss, body.fsl .loss { color: var(--red); }
.loss-sm, body.fsl .loss-sm { color: var(--red-light); }
body.fsl .gold { color: var(--gold); } body.fsl .silver { color: var(--silver); } body.fsl .bronze { color: var(--bronze); } body.fsl .dim { color: var(--text-dim); }
.gold { color: var(--gold); }
.silver { color: var(--silver); }
.bronze { color: var(--bronze); }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Page frame --------------------------------------------------- */
.fsl-page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
}
.fsl-page--flush { padding-top: 0; }
.fsl-bleed { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }

/* 3-column shells. Rails collapse per README "Responsive". */
.fsl-3col {
  display: grid;
  grid-template-columns: 250px minmax(0,1fr) 220px;
  gap: 24px;
  align-items: start;
}
.fsl-2col-right { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; align-items: start; }
.fsl-2col-left  { display: grid; grid-template-columns: 280px minmax(0,1fr);  gap: 24px; align-items: start; }
@media (max-width: 1200px) {
  .fsl-3col { grid-template-columns: 250px minmax(0,1fr); }
  .fsl-3col > .fsl-rail-right { grid-column: 1 / -1; }
  .fsl-2col-right { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .fsl-page { padding: 20px var(--gutter) 32px; }
  .fsl-3col, .fsl-2col-left { grid-template-columns: minmax(0,1fr); }
  .fsl-3col > .fsl-rail-left, .fsl-2col-left > .fsl-rail-left { grid-column: 1 / -1; }
  .fsl-rail-left .rail-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .fsl-rail-left .rail-scroll::-webkit-scrollbar { display: none; }
}

/* ---------- Typography --------------------------------------------------- */
.fsl-display {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(40px, 5.3vw, 76px); line-height: .92; color: var(--text-1);
}
.fsl-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(32px, 3.6vw, 52px); line-height: .97; color: var(--text-1);
}
.fsl-title--md { font-size: clamp(28px, 2.7vw, 38px); }
.fsl-h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 22px; letter-spacing: .06em; line-height: 1.1; color: var(--text-1);
}
.fsl-card-title {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 19px; letter-spacing: .05em; line-height: 1.1; color: var(--text-1);
}
.fsl-card-title--lg { font-size: 24px; }
.fsl-num { font-family: var(--font-display); font-weight: 700; line-height: 1; color: var(--text-1); font-size: 26px; }
.fsl-num--lg { font-size: 36px; }
.fsl-num--xl { font-size: 48px; }
.fsl-rank { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1; }
.fsl-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-muted); line-height: 1.2;
}
.fsl-eyebrow--blue { color: var(--blue); }
.fsl-eyebrow--green { color: var(--green); }
.fsl-eyebrow--gold { color: var(--gold); }
.fsl-colhead {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-dim); line-height: 1.2;
}
.fsl-body { font-size: 14px; line-height: 1.55; color: var(--text-3); }
.fsl-body--lg { font-size: 17px; }
.fsl-meta { font-size: 12px; color: var(--text-muted); }
.fsl-meta--sm { font-size: 11px; }
.fsl-link { font-size: 12.5px; font-weight: 600; color: var(--blue); }
.fsl-link:hover { color: var(--blue-hover); }
.fsl-link::after { content: ' ›'; }
.fsl-link--plain::after { content: none; }

/* ---------- Cards -------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--rule-3);
  border-radius: var(--r-md);
  min-width: 0;
}
.card--hover:hover { border-color: var(--rule-card-hover); }
.card-pad { padding: 18px 20px; }
.card-pad--sm { padding: 16px; }
.card-pad--lg { padding: 22px; }
.card-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--rule-2);
}
.card-foot { padding: 12px 18px; border-top: 1px solid var(--rule-2); }
.card-sunken { background: var(--bg-sunken); border: 1px solid var(--rule-2); border-radius: var(--r-sm); }
.card-raised { background: var(--bg-raised); border-radius: var(--r-sm); }
.card--accent { border-top: 3px solid var(--accent, var(--blue)); }
.card--accent-2 { border-top: 2px solid var(--accent, var(--blue)); }
.card--gold { border-color: rgba(251,191,36,.35); }
.card--green { --accent: var(--green); }
.card--red { --accent: var(--red); }
.card--blue { --accent: var(--blue); }
.card--purple { --accent: var(--purple); }
.card--divider > * + * { border-top: 1px solid var(--rule-2); }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--compact { height: 44px; padding: 0 18px; font-size: 16px; }
.btn--sm { height: 32px; padding: 0 14px; font-size: 14px; letter-spacing: .06em; }
.btn--block { width: 100%; }
.btn-primary { background: var(--blue); color: var(--on-blue) !important; }
.btn-primary:hover { background: var(--blue-hover); color: var(--on-blue) !important; }
.btn-secondary { background: transparent; color: var(--text-2) !important; border-color: var(--rule-strong); }
.btn-secondary:hover { border-color: var(--rule-card-hover); color: var(--text-1) !important; }
.btn-gold { background: transparent; color: var(--gold) !important; border-color: rgba(251,191,36,.45); }
.btn-gold:hover { border-color: rgba(251,191,36,.8); }
.btn-ghost { background: transparent; color: var(--text-muted) !important; }
.btn-ghost:hover { color: var(--text-1) !important; background: var(--hover); }
.btn[disabled], .btn.is-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Inputs ------------------------------------------------------- */
.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 12px;
  background: var(--bg-sunken); color: var(--text-1);
  border: 1px solid var(--rule-4); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 14px; line-height: 1.2;
  transition: border-color .15s ease;
}
.textarea { height: auto; min-height: 120px; padding: 12px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue-tint-strong); }
.input.is-error, .textarea.is-error { border-color: rgba(255,92,92,.6); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.field-help { font-size: 12px; color: var(--text-muted); }
.field-error { font-size: 12px; color: var(--red-light); }
.check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text-3); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--blue); }

/* ---------- Pills / toggles / tags -------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px;
  border-radius: var(--r-pill); border: 1px solid var(--rule-4);
  font-size: 12px; font-weight: 500; color: var(--text-muted); background: transparent;
  cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s, background-color .15s;
}
.pill--compact { height: 24px; padding: 0 9px; font-size: 11px; }
.pill-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--series, var(--text-dim)); flex: none; }
.pill.on { border-color: var(--series, var(--blue)); background: rgba(255,255,255,.06); color: var(--text-1); }
.pill:hover { color: var(--text-2); border-color: var(--rule-strong); }
.tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px;
  border-radius: var(--r-sm); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--bg-chip); color: var(--text-3); white-space: nowrap;
}
.tag--blue { background: rgba(90,180,245,.16); color: var(--blue); }
.tag--green { background: rgba(61,220,132,.14); color: var(--green); }
.tag--gold { background: rgba(251,191,36,.14); color: var(--gold); }
.you-pill {
  display: inline-flex; align-items: center; height: 16px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--blue); color: var(--on-blue);
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.live-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 18px; padding: 0 7px;
  border-radius: var(--r-sm); background: rgba(61,220,132,.12); color: var(--green);
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- Segmented control ------------------------------------------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-raised); border-radius: var(--r-md); }
.seg-btn {
  height: 26px; padding: 0 12px; border: none; border-radius: var(--r-sm);
  background: transparent; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.seg-btn:hover { color: var(--text-2); }
.seg-btn.on { background: #1d212b; color: var(--text-1); font-weight: 600; }

/* ---------- Tabs (underline) -------------------------------------------- */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule-3); }
.tab {
  height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s;
}
.tab:hover { color: var(--text-2); }
.tab.on { color: var(--text-1); box-shadow: inset 0 -2px 0 var(--blue); }

/* ---------- Avatars ------------------------------------------------------ */
.avatar {
  width: 30px; height: 30px; border-radius: var(--r-pill); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-chip); color: var(--text-3);
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
}
.avatar--sm { width: 26px; height: 26px; font-size: 10px; }
.avatar--lg { width: 40px; height: 40px; font-size: 13px; }
.avatar--xl { width: 46px; height: 46px; font-size: 15px; }
.avatar.medal-1 { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
.avatar.medal-2 { background: transparent; border: 1px solid var(--silver); color: var(--silver); }
.avatar.medal-3 { background: transparent; border: 1px solid var(--bronze); color: var(--bronze); }
.avatar.you { background: var(--blue-tint); border: 1px solid var(--blue); color: var(--blue); }

/* ---------- Leaderboards (grid rows, not <table>) ----------------------- */
.lb { display: block; min-width: 0; }
.lb-scroll { overflow-x: auto; }
.lb-head, .lb-row {
  display: grid;
  grid-template-columns: var(--lb-cols, 62px minmax(0,1fr) 130px 150px 70px);
  align-items: center; gap: 12px;
}
.lb-head { padding: 11px 18px; border-bottom: 1px solid var(--rule-2); }
.lb-row { padding: 10px 18px; border-bottom: 1px solid var(--rule-1); color: var(--text-2); transition: background-color .12s; }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: var(--hover); }
.lb-row.is-you { background: var(--blue-tint); }
.lb-row.is-you:hover { background: rgba(90,180,245,.11); }
.lb-row.is-selected { background: var(--blue-tint); box-shadow: inset 2px 0 0 var(--blue); }
.lb-cell--r { text-align: right; justify-self: end; }
.lb-cell--c { text-align: center; justify-self: center; }
.rk { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rk.rk-1 { color: var(--gold); }
.rk.rk-2 { color: var(--silver); }
.rk.rk-3 { color: var(--bronze); }
.rk.rk-you { color: var(--blue); }
.mv { font-size: 9px; line-height: 1; }
.mv-up { color: var(--green); }
.mv-down { color: var(--red); }
.mv-flat { color: var(--text-dim); }
.lb-name { font-size: 13.5px; font-weight: 600; color: var(--text-2b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sub { font-size: 11px; color: var(--text-faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-chip {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm);
  background: var(--bg-raised); border: 1px solid var(--rule-2);
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--text-1);
}
.cutline {
  display: flex; align-items: center; gap: 10px; padding: 6px 18px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--green);
}
.cutline::before, .cutline::after { content: ''; flex: 1; border-top: 1px dashed rgba(61,220,132,.5); }

/* ---------- Expandable rows --------------------------------------------- */
.row-toggle { cursor: pointer; }
.caret { display: inline-block; width: 14px; height: 14px; transition: transform .2s ease; color: var(--text-dim); }
.is-open .caret { transform: rotate(90deg); }
.drawer { display: none; background: var(--bg-deep); box-shadow: inset 2px 0 0 var(--accent, var(--blue)); padding: 12px 18px 14px; }
.is-open + .drawer, .drawer.is-open { display: block; }

/* ---------- Progress / sparkline ---------------------------------------- */
.progress { height: 4px; border-radius: 2px; background: var(--progress-track); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--progress-fill); width: var(--pct, 0%); }
.spark { display: block; width: 100%; height: 26px; }

/* ---------- Live dot ----------------------------------------------------- */
@keyframes fslpulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--green); animation: fslpulse 1.2s ease-in-out infinite; }

/* ---------- Sponsor slots ------------------------------------------------
   Render nothing when there is no active sponsor (template-level rule). The
   logo sits straight on the page background: no card, border or gradient. */
.presented-by { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.presented-by--row { flex-direction: row; align-items: center; gap: 12px; }
.presented-by .fsl-eyebrow { letter-spacing: .2em; font-size: 10px; }
.presented-by img { max-height: 44px; width: auto; }
.presented-by-text { color: var(--green); font-size: 12px; font-weight: 600; }
.sponsor-mark-panel { background: #000; border-radius: var(--r-md); padding: 10px; display: inline-flex; }

/* ---------- Key-stat tiles ---------------------------------------------- */
.stat-tile { background: var(--bg-raised); border-radius: var(--r-sm); padding: 12px 14px; min-width: 0; }
.stat-tile .fsl-colhead { margin-bottom: 6px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------- Step cards --------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; border: 1px solid var(--rule-3); border-radius: var(--r-md); overflow: hidden; }
.step { padding: 24px 24px 28px; border-right: 1px solid var(--rule-2); min-width: 0; }
.step:last-child { border-right: none; }
.step-n { font-family: var(--font-display); font-size: 34px; font-weight: 700; color: #3a4152; line-height: 1; }
.step-head { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-1); margin-top: 10px; }
.step-body { font-size: 13.5px; line-height: 1.6; color: var(--text-3); margin-top: 9px; }
@media (max-width: 700px) { .step { border-right: none; border-bottom: 1px solid var(--rule-2); } .step:last-child { border-bottom: none; } }

/* ---------- Modal -------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(5,6,9,.72); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-backdrop.is-open { display: flex; }
.modal { width: 100%; max-width: 1080px; max-height: calc(100vh - 40px); overflow: auto; background: var(--bg-card); border: 1px solid var(--rule-4); border-radius: var(--r-md); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid var(--rule-2); }
.modal-body { padding: 22px 24px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--rule-2); }
.modal-close { width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--rule-strong); background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.modal-close:hover { color: var(--text-1); border-color: var(--rule-card-hover); }

/* ---------- Toast -------------------------------------------------------- */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 95; padding: 11px 20px; border-radius: var(--r-pill); background: var(--blue); color: var(--on-blue); font-size: 12.5px; font-weight: 700; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.toast.is-on { opacity: 1; }

/* ---------- Utility layout ---------------------------------------------- */
.row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.row--baseline { align-items: baseline; }
.stack { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.stack--sm { gap: 6px; }
.stack--lg { gap: 18px; }
.grow { flex: 1; min-width: 0; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.right { text-align: right; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-5 { margin-top: 20px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.hide-mobile { display: initial; }
@media (max-width: 900px) { .hide-mobile { display: none !important; } }
.show-mobile { display: none !important; }
@media (max-width: 900px) { .show-mobile { display: initial !important; } }

/* ---------- Top nav (templates/_nav.html) ------------------------------- */
.fnav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  background: var(--bg-page);
  border-bottom: 1px solid var(--rule-4);
}
.fnav-inner {
  height: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: stretch; gap: 24px;
}
.fnav-logo { display: flex; align-items: center; flex: none; }
.fnav-logo img { height: 34px; width: auto; }
.fnav-items { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 4px; scrollbar-width: none; }
.fnav-items::-webkit-scrollbar { display: none; }
/* Small screens scroll the strip; the More panel then anchors to the nav bar instead so it isn't clipped. */
@media (max-width: 900px) { .fnav-items { overflow-x: auto; } .fnav-more-panel { position: fixed; top: var(--nav-h); right: 12px; } }
.fnav-item {
  display: flex; align-items: center; padding: 0 10px; flex: none;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted) !important; white-space: nowrap;
  box-shadow: inset 0 -2px 0 transparent; transition: color .15s, box-shadow .15s;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
}
.fnav-item:hover { color: var(--text-2) !important; }
.fnav-item.is-active { color: var(--text-1) !important; box-shadow: inset 0 -2px 0 var(--blue); }
.fnav-item .tag { margin-left: 6px; }
.fnav-more { position: relative; display: flex; align-items: stretch; }
.fnav-more-panel {
  position: absolute; top: 100%; right: 0; min-width: 190px; padding: 6px 0;
  background: var(--bg-card); border: 1px solid var(--rule-4); border-radius: var(--r-md);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease; z-index: 70;
}
.fnav-more:hover .fnav-more-panel, .fnav-more:focus-within .fnav-more-panel, .fnav-more.is-open .fnav-more-panel { opacity: 1; pointer-events: auto; transform: translateY(0); }
.fnav-more.is-open > .fnav-item { color: var(--text-1) !important; }
.fnav-more-link { display: block; padding: 9px 16px; font-size: 12.5px; font-weight: 500; color: var(--text-3) !important; white-space: nowrap; }
.fnav-more-link:hover { background: var(--hover); color: var(--text-1) !important; }
.fnav-more-link.is-active { color: var(--blue) !important; }
.fnav-right { flex: none; display: flex; align-items: center; gap: 14px; }
.fnav-search-icon { display: none; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid var(--rule-4); border-radius: var(--r-sm); color: var(--text-muted) !important; }
.fnav-cta {
  height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--r-sm);
  background: var(--purple); color: #1b0a2a !important;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.fnav-cta:hover { background: #d9b8ff; }
.fnav-bell { position: relative; display: inline-flex; color: var(--text-muted) !important; }
.fnav-bell:hover { color: var(--text-1) !important; }
.fnav-bell .fnav-badge { top: -4px; right: -5px; min-width: 8px; height: 8px; padding: 0; font-size: 0; }
.fnav-bell .fnav-badge.has-n { min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; top: -7px; right: -8px; }
/* full-bleed page shell (Home 5A): no side padding, hairlines instead of a card */
.fsl-page--full { max-width: var(--page-max); margin: 0 auto; padding: 0; }
@media (min-width: 1601px) { .fsl-page--full { border-left: 1px solid var(--rule-2); border-right: 1px solid var(--rule-2); } }
.fnav-login {
  height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong); color: var(--text-2) !important;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.fnav-login:hover { border-color: var(--rule-card-hover); color: var(--text-1) !important; }
.fnav-avatar { position: relative; display: inline-flex; }
.fnav-avatar .avatar { width: 26px; height: 26px; font-size: 10px; color: var(--text-3); }
.fnav-avatar:hover .avatar { color: var(--text-1); }
.fnav-badge {
  position: absolute; top: -5px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--red); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 16px; text-align: center; display: none;
}
.fnav-badge.is-on { display: block; }
/* ---------- Notification pop-out (bell, templates/_nav.html) -------------
   One class, .is-open on .fnav-notif, shows the panel; same motion as the
   More menu. Rows are hairline-divided; unread rows carry the blue tint. */
.fnav-notif { position: relative; display: inline-flex; }
button.fnav-bell { background: none; border: none; padding: 0; cursor: pointer; font: inherit; }
.fnav-notif.is-open > .fnav-bell { color: var(--text-1) !important; }
.fnav-notif-panel {
  position: absolute; top: calc(100% + 14px); right: -8px; width: 380px; max-width: calc(100vw - 24px);
  background: var(--bg-card); border: 1px solid var(--rule-4); border-radius: var(--r-md); overflow: hidden;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease; z-index: 70;
}
.fnav-notif.is-open .fnav-notif-panel { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule-2); }
.nf-mark { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--blue); }
.nf-mark:hover { color: var(--blue-hover); }
.nf-mark[disabled] { color: var(--text-dim); cursor: default; }
.nf-list { max-height: min(60vh, 440px); overflow-y: auto; }
.nf-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule-1); color: inherit !important; text-align: left; transition: background-color .12s; }
.nf-list .nf-row:last-child { border-bottom: none; }
.nf-row:hover { background: var(--hover); }
.nf-row.is-unread { background: var(--blue-tint); }
.nf-row.is-unread:hover { background: rgba(90,180,245,.11); }
.nf-dot { flex: none; width: 8px; height: 8px; border-radius: 99px; margin-top: 6px; background: var(--text-dim); }
.nf-main { flex: 1; min-width: 0; }
.nf-t { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-1); line-height: 1.35; }
.nf-b { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.nf-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.nf-k { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.nf-time { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nf-row--friends { align-items: center; background: rgba(192,132,252,.08); border-bottom: 1px solid var(--rule-2); }
.nf-row--friends .nf-dot { background: var(--purple); margin-top: 0; }
.nf-row--friends[hidden] { display: none; }
.nf-empty { padding: 36px 18px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--text-faint); }
.nf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--rule-2); }
@media (max-width: 900px) { .fnav-notif-panel { position: fixed; top: var(--nav-h); right: 12px; width: calc(100vw - 24px); } }
/* ---------- Global search, handoff Home 9A "Field grows, panel drops" -----------------------
   Spec: search-9a-animation.md. One class, .is-open on the header, drives every transition.
   The panel is never display:none; only opacity / transform / pointer-events change.
   The field grows LEFT because of layout: it lives in the fixed-width right group and the
   nav links beside it are flex:1; min-width:0; overflow:hidden, so they give up room as the
   field goes 190px → 560px. Easing everywhere: cubic-bezier(.32,.72,0,1). */
/* Performance (search-9a-fixes.md): the form is a fixed 190px slot that never changes size, so the
   sticky header is not re-laid-out per frame. The .fnav-box inside is absolutely positioned,
   pinned right, and is the only thing whose width animates. The dim layer is a plain opacity
   fade — no backdrop-filter, which was repainting the whole page every frame. */
.fnav-search { position: relative; width: 190px; height: 32px; flex: none; border: none; background: none; padding: 0; }
.fnav-box {
  position: absolute; top: 0; right: 0; height: 32px; width: 190px;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border: 1px solid var(--rule-4); border-radius: var(--r-sm); background: transparent; box-sizing: border-box;
  transition: width .46s cubic-bezier(.32,.72,0,1), border-color .3s ease, background-color .3s ease;
  will-change: width; z-index: 81;
}
.fnav-box svg { flex: none; color: var(--text-muted); }
.fnav-box input { flex: 1; min-width: 0; height: 100%; background: transparent; border: none; outline: none; color: var(--text-2b); font-family: var(--font-body); font-size: 12.5px; }
.fnav-box input::placeholder { color: var(--text-muted); }
.fnav.is-open .fnav-box { width: 560px; border-color: var(--blue); background: #11141b; }
.fnav-items { transition: opacity .3s ease, transform .46s cubic-bezier(.32,.72,0,1); will-change: opacity, transform; }
.fnav.is-open .fnav-items { opacity: .18; transform: translateX(-14px); pointer-events: none; }
.fnav-kbd { flex: none; padding: 2px 6px; border: 1px solid var(--rule-strong); border-radius: var(--r-sm); font-size: 10.5px; color: var(--text-muted); }
.fnav-panel {
  position: absolute; top: 44px; right: 0; width: 560px; max-width: calc(100vw - 32px);
  background: #0e1016; border: 1px solid var(--rule-4); border-radius: 6px; overflow: hidden; z-index: 80;
  opacity: 0; transform: translateY(-10px) scale(.97); transform-origin: top right; pointer-events: none;
  transition: opacity .22s ease, transform .46s cubic-bezier(.32,.72,0,1);
  will-change: opacity, transform;
}
.fnav.is-open .fnav-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fnav-dim { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 55; background: rgba(5,6,9,.72); opacity: 0; pointer-events: none; transition: opacity .35s ease; will-change: opacity; }
.fnav.is-open ~ .fnav-dim { opacity: 1; pointer-events: auto; }
/* Idle rows: each carries --i; its group carries --base / --step. Delay applies only while
   opening; on close the base rule (no delay) wins so everything leaves together.
   .fs-pending is the pre-release state for rows that arrive after the panel is already open. */
/* --d is set per item (base + i*step, exactly the prototype's numbers); only used while open. */
.fs-stag { opacity: 0; transform: translateY(10px); transition: opacity .3s ease 0ms, transform .42s cubic-bezier(.32,.72,0,1) 0ms; }
.fnav.is-open .fs-stag { opacity: 1; transform: translateY(0); transition: opacity .3s ease var(--d, 0ms), transform .42s cubic-bezier(.32,.72,0,1) var(--d, 0ms); }
.fs-stag.fs-pending { opacity: 0 !important; transform: translateY(10px) !important; }
.fs-cards { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; padding: 0 20px; }
.fs-card { padding: 10px 11px; border-radius: 5px; background: #12151d; border: 1px solid var(--rule-2); color: inherit !important; min-width: 0; }
.fs-card:hover { border-color: rgba(90,180,245,.45); }
.fs-card .top { display: flex; align-items: baseline; justify-content: space-between; }
.fs-card .tk { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-1); }
.fs-card .pc { font-family: var(--font-display); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-card svg { width: 100%; height: 26px; display: block; }
.fs-card .v { font-size: 11.5px; color: #9aa1b2; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-mover .av { flex: none; width: 30px; height: 30px; border-radius: 99px; background: var(--bg-chip); color: var(--text-3); display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 600; text-transform: uppercase; overflow: hidden; }
.fs-mover .av img { width: 100%; height: 100%; object-fit: cover; }
.fs-mover .sub { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.fs-mover .r { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-1); }
.fs-tab .l { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); transition: color .2s ease; }
.fs-tab.on .l { color: var(--text-1); }
.fs-rows-wrap { position: relative; padding: 6px 0; max-height: 384px; overflow: auto; scrollbar-width: none; }
.fs-rows-wrap::-webkit-scrollbar { display: none; }
.fs-hi { position: absolute; left: 8px; right: 8px; top: 6px; height: 58px; border-radius: 5px; background: rgba(90,180,245,.09); box-shadow: inset 2px 0 0 var(--blue); pointer-events: none; opacity: 0; transition: transform .24s cubic-bezier(.32,.72,0,1), opacity .2s ease; will-change: transform; }
.fs-row .mid { flex: 1; min-width: 0; }
.fs-row .t, .fs-row .s { display: block; }
.fs-row .rt { flex: none; width: 64px; text-align: right; font-family: var(--font-display); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-h { padding: 18px 20px 6px; display: flex; align-items: baseline; justify-content: space-between; }
.fs-h .t { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-1); }
.fs-h .s { font-size: 11px; color: var(--text-faint); }
.fs-h button { background: none; border: none; color: var(--text-faint); font-size: 11px; cursor: pointer; font-family: inherit; }
.fs-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 20px 0; }
.fs-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: var(--r-pill); background: #151821; border: 1px solid var(--rule-3); font-size: 12px; color: #c9cddb; cursor: pointer; text-decoration: none; }
.fs-chip i { width: 6px; height: 6px; border-radius: 2px; background: var(--text-dim); display: inline-block; }
.fs-chip:hover { border-color: var(--rule-card-hover); color: var(--text-1) !important; }
.fs-movers { padding: 0 20px 10px; }
.fs-mover { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-1); color: inherit !important; }
.fs-mover:hover .n { color: var(--text-1); }
.fs-tabs { position: relative; display: grid; grid-template-columns: repeat(3, 140px); border-bottom: 1px solid var(--rule-3); }
.fs-tab { height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; background: none; border: none; cursor: pointer; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.fs-tab.on { color: var(--text-1); } .fs-tab .c { font-family: var(--font-body); font-size: 11px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.fs-tab-bar { position: absolute; left: 0; bottom: -1px; width: 140px; height: 2px; background: var(--blue); transition: transform .36s cubic-bezier(.32,.72,0,1); }
.fs-rows { position: relative; padding: 6px 0; max-height: 380px; overflow: auto; }
.fs-row { position: relative; height: 58px; padding: 0 20px; display: flex; align-items: center; gap: 13px; color: inherit !important; }
.fs-row { z-index: 1; }
.fs-row .av { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--bg-chip); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--text-3); overflow: hidden; }
.fs-row .av.round { border-radius: 99px; } .fs-row .av img { width: 100%; height: 100%; object-fit: cover; }
.fs-row .t { font-size: 13.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fs-row .t b { color: var(--text-1); font-weight: 700; }
.fs-row .s { font-size: 11px; color: var(--text-faint); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-row .k { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint); }
.fs-row .arrow { flex: none; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .24s; color: var(--blue); }
.fs-row.is-hi .arrow { opacity: 1; transform: none; }
.fs-empty { padding: 36px 20px; text-align: center; font-size: 13px; color: var(--text-faint); }
.fs-foot { display: flex; gap: 18px; padding: 11px 20px; border-top: 1px solid var(--rule-2); background: var(--bg-page); font-size: 11px; color: var(--text-faint); }
@media (max-width: 1100px) { .fnav-inner { gap: 16px; } .fnav-item { padding: 0 8px; } }
@media (max-width: 900px) {
  .fnav-search { display: none; }
  .fnav-search-icon { display: inline-flex; }
  .fnav-cta { display: none; }
  .fnav-panel { display: none; }
}

/* ---------- Footer (templates/_footer.html) ----------------------------- */
.ffoot { margin-top: 56px; background: var(--bg-deep); border-top: 1px solid var(--rule-4); color: var(--text-2); }
.ffoot-inner { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.ffoot-grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(4, minmax(0,1fr)); gap: 40px; padding: 56px 16px 44px; }
.ffoot-brand { display: flex; flex-direction: column; gap: 16px; max-width: 340px; }
.ffoot-brand img { height: 56px; width: auto; align-self: flex-start; margin-left: -18px; /* the PNG's own transparent padding; keeps the mark flush with the blurb */ }
.ffoot-blurb { font-size: 14px; line-height: 1.6; color: #9aa1b2; }
.ffoot-social { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ffoot-social a {
  width: 34px; height: 34px; border-radius: var(--r-pill); border: 1px solid var(--rule-strong);
  display: inline-flex; align-items: center; justify-content: center; color: #9aa1b2 !important;
  transition: color .15s, border-color .15s, background-color .15s;
}
.ffoot-social a:hover { color: #fff !important; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.05); }
.ffoot-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.ffoot-badge {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px 0 12px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 6px; background: #000; width: max-content;
  transition: border-color .15s;
}
.ffoot-badge:hover { border-color: rgba(255,255,255,.4); }
.ffoot-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.ffoot-badge-text small { font-size: 9.5px; color: #c9cddb; }
.ffoot-badge-text strong { font-size: 15px; font-weight: 600; color: #fff; }
.ffoot-col { display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.ffoot-col-title { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 3px; }
.ffoot-col a { font-size: 13.5px; color: #9aa1b2 !important; }
.ffoot-col a:hover { color: #fff !important; }
.ffoot-wordmark { padding: 0 8px 32px; white-space: nowrap; text-align: center; overflow: hidden; }
.ffoot-wordmark span {
  display: block; line-height: .82; font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(44px, 10.4vw, 152px);
  /* The one gradient in the system, by request: footer wordmark from mock 10A/10B. */
  background: linear-gradient(90deg, #1eb0ff 0%, #7a6cff 60%, #45e08a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ffoot-legal { margin: 0 16px; padding: 20px 0 26px; border-top: 1px solid var(--rule-3); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ffoot-legal-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-faint); }
.ffoot-legal-links a { color: #9aa1b2 !important; }
.ffoot-legal-links a:hover { color: #fff !important; }
.ffoot-disclaimer { max-width: 560px; text-align: right; font-size: 11.5px; line-height: 1.5; color: var(--text-faint); }
@media (max-width: 1100px) { .ffoot-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .ffoot-brand { grid-column: 1 / -1; max-width: none; } }
@media (max-width: 700px) {
  .ffoot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; padding: 40px 0 32px; }
  .ffoot-legal { margin: 0; flex-direction: column; align-items: flex-start; }
  .ffoot-disclaimer { text-align: left; }
}

/* ---------- Favourite league star ----------------------------------------
   One league can be the favourite: it leads Home, Leagues and My team. The
   toggle is a bare star button; .on fills it gold. .fav-mark is the static
   glyph shown beside a favourite in rails. */
.fav-btn { background: none; border: none; padding: 4px; margin: -4px; cursor: pointer; display: inline-flex; align-items: center; color: var(--text-dim); border-radius: var(--r-sm); transition: color .15s; }
.fav-btn:hover { color: var(--gold); }
.fav-btn.on { color: var(--gold); }
.fav-btn.on svg { fill: currentColor; }
.fav-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.fav-mark { display: inline-flex; align-items: center; color: var(--gold); flex: none; }
.fav-mark svg { fill: currentColor; }

/* ---------- Flat sections ---------------------------------------------------
   Page content sits straight on the page background. Sections are separated
   by hairline rules and never boxed; .card is kept for genuinely small tiles
   (stat tiles, leaderboard rows, modals). .fsl-flush strips the side padding
   from .lb rows so a leaderboard can sit on the page without a card. */
.fsl-sec { padding: 22px 0 26px; border-top: 1px solid var(--rule-2); min-width: 0; scroll-margin-top: calc(var(--nav-h) + 16px); }
.fsl-sec--accent { border-top-width: 2px; border-top-color: var(--accent, var(--blue)); }
.fsl-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fsl-flush .lb-head, .fsl-flush .lb-row { padding-left: 4px; padding-right: 4px; }

/* ---------- Long-form documents (rules, FAQ, about, privacy, terms) ------
   One pattern for copy-heavy pages: a title block, flat sections with a
   ruled display-type heading, body lists with square hairline bullets, data
   tables and neutral callouts. Optional sticky contents rail (.doc-layout). */
.fsl-doc { width: 100%; max-width: 900px; margin: 0 auto; }
.fsl-doc--wide { max-width: 1140px; }
.doc-head { padding: 14px 0 26px; border-bottom: 1px solid var(--rule-2); margin-bottom: 24px; }
.doc-sub { font-size: 16px; line-height: 1.55; color: var(--text-3); margin-top: 12px; max-width: 640px; }
.doc-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }
.doc-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 36px; align-items: start; }
.doc-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.doc-toc .fsl-eyebrow { display: block; margin-bottom: 10px; }
.doc-toc a { display: block; padding: 6px 0 6px 12px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); border-left: 1px solid var(--rule-3); transition: color .15s, border-color .15s; }
.doc-toc a:hover { color: var(--text-2); }
.doc-toc a.is-active { color: var(--text-1); border-left-color: var(--blue); }
.doc-section { min-width: 0; scroll-margin-top: calc(var(--nav-h) + 16px); }
.doc-section + .doc-section, .doc-stack > * + * { margin-top: 36px; }
.doc-section > h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
  color: var(--text-1); padding-bottom: 12px; border-bottom: 1px solid var(--rule-2); margin-bottom: 16px;
}
.doc-section > h2.is-blue { color: var(--blue); } .doc-section > h2.is-gold { color: var(--gold); }
.doc-section h3 { font-size: 14.5px; font-weight: 600; color: var(--text-1); margin-top: 18px; margin-bottom: 6px; }
.doc-section h3:first-child, .doc-section > h2 + h3 { margin-top: 0; }
.doc-section h4 { font-size: 13.5px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.doc-section p, .doc-callout p { font-size: 14px; line-height: 1.65; color: var(--text-3); }
.doc-section p + p, .doc-section ul + p, .doc-section ol + p, .doc-section p + ul, .doc-section p + ol, .doc-section ul + h3, .doc-section p + h3 { margin-top: 10px; }
.doc-section strong, .doc-callout strong { color: var(--text-2); font-weight: 600; }
.doc-section ul, .doc-section ol, .doc-callout ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.doc-section li + li, .doc-callout li + li { margin-top: 6px; }
.doc-section ul > li, .doc-callout ul > li { position: relative; padding-left: 16px; }
.doc-section ul > li::before, .doc-callout ul > li::before { content: ''; position: absolute; left: 0; top: .66em; width: 5px; height: 5px; border-radius: 1px; background: var(--text-dim); }
.doc-section ul ul { margin-top: 6px; }
.doc-ol > li { display: flex; gap: 12px; align-items: flex-start; }
.doc-ol > li + li { margin-top: 12px; }
.doc-ol .n { flex: none; width: 26px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; }
.doc-ol-plain { counter-reset: doc; }
.doc-ol-plain > li { position: relative; padding-left: 26px; counter-increment: doc; }
.doc-ol-plain > li::before { content: counter(doc) '.'; position: absolute; left: 0; top: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.doc-note { font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.doc-callout { background: var(--bg-sunken); border: 1px solid var(--rule-2); border-radius: var(--r-sm); padding: 14px 16px 15px; min-width: 0; }
.doc-callout--blue { border-color: rgba(90,180,245,.3); } .doc-callout--gold { border-color: rgba(251,191,36,.35); } .doc-callout--green { border-color: rgba(61,220,132,.35); }
.doc-callout + .doc-callout { margin-top: 10px; }
.doc-callout .fsl-eyebrow { display: block; margin-bottom: 8px; }
.doc-table-wrap { overflow-x: auto; border: 1px solid var(--rule-2); border-radius: var(--r-sm); margin-top: 12px; }
.doc-table { width: 100%; border-collapse: collapse; min-width: 320px; }
.doc-table th { text-align: left; padding: 11px 16px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--rule-2); white-space: nowrap; }
.doc-table td { padding: 10px 16px; font-size: 13.5px; color: var(--text-2); border-bottom: 1px solid var(--rule-1); }
.doc-table tr:last-child td { border-bottom: none; }
.doc-table tbody tr:hover td { background: var(--hover); }
.doc-table .num { font-family: var(--font-display); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue); }
.doc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
@media (max-width: 1000px) {
  .doc-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .doc-toc { position: static; }
  .doc-toc nav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .doc-toc nav::-webkit-scrollbar { display: none; }
  .doc-toc a { flex: none; padding: 6px 11px; border: 1px solid var(--rule-4); border-radius: var(--r-pill); white-space: nowrap; }
  .doc-toc a.is-active { border-color: var(--blue); }
}
@media (max-width: 700px) { .doc-section + .doc-section, .doc-stack > * + * { margin-top: 28px; } .doc-grid-2 { grid-template-columns: minmax(0,1fr); } }

/* ---------- Cookie consent (templates/_cookie_consent.html) --------------
   Bottom bar on the page surface with a hairline top rule; slides up once
   consent is pending. Settings reuse .modal; options are hairline-divided
   rows, not boxes. The re-open control is a quiet pill, bottom right. */
.ck-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 85;
  background: var(--bg-page); border-top: 1px solid var(--rule-4);
  transform: translateY(100%); transition: transform .35s cubic-bezier(.32,.72,0,1);
}
.ck-bar.is-on { transform: translateY(0); }
.ck-bar[hidden] { display: none; }
.ck-bar-inner {
  max-width: var(--page-max); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.ck-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 760px; }
.ck-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.05; color: var(--text-1); }
.ck-text { font-size: 13px; line-height: 1.55; color: var(--text-3); }
.ck-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ck-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ck-more { margin-left: 4px; }
.ck-backdrop { z-index: 92; }
.ck-modal { max-width: 620px; }
.ck-body { display: flex; flex-direction: column; gap: 0; }
.ck-body > .fsl-body { padding-bottom: 16px; }
.ck-opt { padding: 16px 0; border-top: 1px solid var(--rule-2); }
.ck-opt:last-child { padding-bottom: 4px; }
.ck-opt--off { color: var(--text-muted); }
.ck-opt-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ck-opt-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-opt-name strong { font-size: 14.5px; font-weight: 600; color: var(--text-1); }
.ck-opt--off .ck-opt-name strong { color: var(--text-3); }
.ck-opt-text { font-size: 13px; line-height: 1.55; color: var(--text-3); margin-top: 8px; }
.ck-opt--off .ck-opt-text { color: var(--text-muted); }
.ck-opt-meta { margin-top: 6px; }
.ck-k { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-right: 6px; }
.ck-check { flex: none; align-items: center; color: var(--text-2); font-weight: 500; }
.ck-check input { margin: 0; }
.ck-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  height: 28px; padding: 0 11px; border-radius: var(--r-pill);
  background: var(--bg-page); border: 1px solid var(--rule-strong); color: var(--text-muted);
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: color .15s, border-color .15s;
}
.ck-fab:hover { color: var(--text-1); border-color: var(--rule-card-hover); }
.ck-fab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ck-fab[hidden] { display: none; }
@media (max-width: 900px) {
  .ck-bar-inner { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px var(--gutter) 18px; }
  .ck-title { font-size: 20px; }
  .ck-actions { flex-wrap: wrap; }
  .ck-actions .btn { flex: 1 1 140px; }
  .ck-more { flex: 1 1 100%; text-align: center; margin: 2px 0 0; }
  .ck-opt-head { align-items: flex-start; }
  .ck-modal .modal-foot { flex-wrap: wrap; }
  .ck-modal .modal-foot .btn { flex: 1 1 140px; }
}

/* ---------- Motion preferences ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  /* Decorative motion only. The nav search open/close is kept (short, functional), per the owner. */
  :not(.fnav):not(.fnav *):not(.fnav-dim), :not(.fnav *)::before, :not(.fnav *)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Scrollbars ------------------------------------------------------
   The browser's default (white track, grey arrows on Windows) breaks the dark
   surfaces, so every scrollable area on the new design gets the same quiet bar:
   thin, no arrows, a rounded thumb in the hairline-rule grey that only brightens
   on hover. Firefox and new Chromium take the standard properties; older
   WebKit/Blink take the pseudo-elements. Pages that hide a scrollbar on purpose
   (scrollbar-width: none) are unaffected. color-scheme: dark also makes native
   bits we don't draw ourselves (date pickers, select menus) render dark. */
:root { color-scheme: dark; }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-corner { background: transparent; }