/* =====================================================================================
 * Cheezeyverse - the player-facing skin. Clubhouse layout, Brie palette (chosen 2026-09-25
 * from the mockups on the design canvas).
 *
 * Clubhouse: a rind-coloured sidebar with five places in it, white rounded cards on a cream
 * ground, Bricolage Grotesque for headings and big numbers, Figtree for everything else. On a
 * phone the sidebar becomes a bottom tab bar.
 *
 * Brie: soft cream, a rind-orange accent, bark brown for links. The league pages wear the same
 * palette - PALETTE in commissioner/publish/restyle.py uses these values, and
 * tests/test_rules.py checks that every one of them is still here. The two stylesheets are
 * independent on purpose (restyle.py's rules are all !important, to beat the inline <style>
 * FBPB3 writes into each page), so if you retune the palette, change both.
 *
 * Light only, by design.
 *
 * ACCENT FILLS CARRY INK, NOT WHITE. The mockup put white text on the #D0843A accent, which is
 * 2.98:1 - under the 4.5:1 any button label needs. Ink on the same orange is 5.3:1, so the
 * colour stays and the label becomes readable.
 * ===================================================================================== */

:root {
  --ground: #FBF7EE;      /* the page */
  --rind:   #F1E4CB;      /* the sidebar */
  --rind-line: #E3D2B2;
  --crust:  #D0843A;      /* the accent: active nav, primary buttons, progress */
  --crust-hover: #DB9450;
  --bark:   #8A5A2B;      /* links, emphasis, bars */
  --ink:    #2A2118;
  --muted:  #6E6152;
  --card:   #FFFFFF;
  --tile:   #F7F0E1;      /* a number inside a card */
  --line:   #F0E8D8;      /* rules between rows */
  --border: #E6D7BA;      /* control outlines */
  --tint:   #F7E6D3;      /* a chip's fill */
  --butter: #FCEFD9;      /* a row that is ours */
  --dark:   #3B2A1C;      /* the one dark card per page */
  --dark-2: #4A3726;
  --dark-line: #54402E;
  --human:  #1D5C8A;      /* the "human coach" blue FBPB3 uses for played teams */

  --good:   #2F6B37;
  --bad:    #96261F;

  --prep:    #5C6672;
  --college: #4F7942;
  --pro:     #D0843A;

  --display: 'Bricolage Grotesque', 'Figtree', system-ui, sans-serif;
  --font: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 20px;
  --radius-s: 12px;
  --gutter: 16px;
  --side: 232px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 var(--font);
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0 0 .4em; color: var(--ink); line-height: 1.15; font-family: var(--display); font-weight: 800; }
h1 { font-size: 40px; letter-spacing: -1px; }
h2 { font-size: 22px; letter-spacing: -.3px; }
h3 { font-size: 17px; }
p  { margin: 0 0 .8em; }

a { color: var(--bark); font-weight: 600; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

/* The old gold-with-holes band. Kept as a name because pages still carry it; the Brie look has
   no texture, so it now means nothing on its own and each component styles itself. */
.cv-cheese { background-image: none; }

/* ------------------------------------------------------------------------- the mark */
.cv-mark { flex: 0 0 auto; display: block; }
.cv-mark-wedge { fill: var(--crust); }
.cv-mark-hole { fill: var(--rind); }

/* ---------------------------------------------------------------------- the sidebar */
body.cv-shell { padding-left: var(--side); }

.cv-side {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: var(--side);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 18px 20px;
  background: var(--rind);
  color: var(--ink);
  overflow-y: auto;
}

.cv-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 6px 26px;
  color: var(--ink);
  font: 800 20px/1 var(--display);
  letter-spacing: -.3px;
  text-decoration: none;
}
.cv-brand:hover { text-decoration: none; }

.cv-nav { display: flex; flex-direction: column; gap: 4px; }
.cv-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.cv-nav a:hover { background: rgba(255, 255, 255, .55); color: var(--ink); text-decoration: none; }
.cv-nav a[aria-current='page'] { background: var(--crust); color: var(--ink); font-weight: 700; }

.cv-nav-more { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; }
.cv-nav-label {
  padding: 0 12px 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
}
.cv-nav-more a {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.cv-nav-more a:hover { background: rgba(255, 255, 255, .55); color: var(--ink); text-decoration: none; }
.cv-nav-more a[aria-current='page'] { color: var(--ink); font-weight: 700; background: rgba(255, 255, 255, .7); }

.cv-side-fill { flex: 1 1 auto; min-height: 20px; }

.cv-side .cv-create { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.cv-side .cv-create[aria-current='page'] { box-shadow: 0 0 0 2px var(--ink); }

.cv-who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cv-side .cv-who { margin-top: 12px; padding: 12px; border-radius: var(--radius-s); background: rgba(255, 255, 255, .5); }
.cv-side .cv-who .cv-btn { flex: 1 1 auto; }
.cv-who-name { flex: 1 1 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The phone's top bar and tab bar: hidden until the sidebar is. */
.cv-mtop, .cv-tabbar { display: none; }

/* ------------------------------------------------------------------------- page shell */
.cv-page { max-width: 1120px; margin: 0 auto; padding: 32px 36px 64px; }
.cv-page > h1 + .cv-muted { font-size: 15px; margin-bottom: 22px; max-width: 46em; }

.cv-foot {
  max-width: 1120px;
  margin: 0 auto;
  padding: 18px 36px 40px;
  font-size: 13px;
  color: var(--muted);
}
.cv-foot p { margin: 0 0 4px; }

/* ------------------------------------------------------------------------------ cards */
.cv-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 26px;
  margin: 0 0 20px;
}
.cv-card > :last-child { margin-bottom: 0; }
.cv-card-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin-bottom: 12px; }
.cv-card-head h2, .cv-card-head h3 { margin: 0; margin-right: auto; }
.cv-card.cv-sub { background: var(--ground); border-radius: 16px; padding: 16px 18px; margin: 0; }
.cv-card.cv-sub h3 { font-size: 16px; }

/* The one dark card a page may have: the GOAT board on Home. */
.cv-card.is-dark { background: var(--dark); color: var(--ground); }
.cv-card.is-dark h2, .cv-card.is-dark h3 { color: var(--ground); }
.cv-card.is-dark .cv-muted { color: #D9C9B0; }
.cv-card.is-dark a { color: #F2C08A; }

.cv-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--bark);
}

/* ---------------------------------------------------------------------- story feed */
.cv-story-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: start; }
.cv-story {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.cv-story h3 { margin: 8px 0 6px; font-size: 20px; line-height: 1.2; }
.cv-story p { margin-bottom: 6px; font-size: 14px; line-height: 1.45; color: #4A3F33; }
.cv-story-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cv-story-kicker .cv-muted { font-size: 12px; }
.cv-story-kind {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--bark);
  font-size: 12px;
  font-weight: 700;
}
.cv-story-kind.is-hot_streak, .cv-story-kind.is-career_high,
.cv-story-kind.is-award, .cv-story-kind.is-playoff { background: #E4EFE2; color: var(--good); }
.cv-story-kind.is-cold_streak { background: #E3EEF6; color: var(--human); }
.cv-story-kind.is-disaster { background: #F1E4F4; color: #632681; }
.cv-story-kind.is-award_race { background: var(--dark); color: #F2C08A; }
/* a story card inside a white card (the career page) needs a fill of its own */
.cv-card .cv-story { background: var(--ground); }
.cv-story-people { font-size: 13px; padding-top: 3px; }
.cv-story-controls .cv-fields { align-items: end; }
.cv-story-controls select { margin-top: 4px; }

/* compact stories in a sidebar card: rows, not cards */
.cv-mini-stories .cv-story { background: transparent; border-radius: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.cv-mini-stories .cv-story h3 { font-size: 16px; margin: 6px 0 2px; }
.cv-mini-stories .cv-story p { font-size: 13px; color: var(--muted); margin: 0; }
.cv-mini-stories .cv-story .cv-hint { display: none; }

/* The one quiz question that sets a ceiling rather than a rating. */
.cv-important { color: var(--bark); font-weight: 700; }

.cv-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cv-grid h3 { font-size: 18px; }
.cv-grid p { color: #4A3F33; font-size: 14px; }

/* Two columns: the main thing and a narrower side column. `minmax(0, ...)` on both tracks, because
   a grid child defaults to min-content width and a wide table would otherwise push the row wider
   than the page. */
.cv-split { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; }
.cv-split > .cv-card, .cv-split > div > .cv-card:last-child { margin-bottom: 0; }
.cv-split + * { margin-top: 20px; }
.cv-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cv-column > .cv-card { margin: 0; }
@media (max-width: 1100px) { .cv-split { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------------------- hero */
.cv-hero {
  background: var(--card);
  border-radius: 24px;
  padding: 28px 32px;
  margin-bottom: 20px;
}
.cv-hero h1 { font-size: 46px; line-height: 1.02; margin: 6px 0 12px; }
.cv-hero p { color: var(--muted); font-size: 16px; max-width: 40em; }
.cv-hero p:last-child { margin-bottom: 0; }
.cv-hero .cv-actions { margin-top: 18px; }

/* Home: words on the left, the season's pulse on the right */
.cv-hero.has-pulse { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: center; }
.cv-pulse-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--muted); }
.cv-progress { height: 12px; border-radius: 6px; background: var(--rind); margin-top: 8px; overflow: hidden; }
.cv-progress i { display: block; height: 100%; border-radius: 6px; background: var(--crust); }
.cv-pulse-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.cv-pulse-tiles div { border-radius: 14px; background: var(--ground); padding: 10px 12px; }
.cv-pulse-tiles b { display: block; font: 800 26px/1.1 var(--display); }
.cv-pulse-tiles span { font-size: 12px; color: var(--muted); }
@media (max-width: 1000px) { .cv-hero.has-pulse { grid-template-columns: minmax(0, 1fr); } }

/* ----------------------------------------------------------------------------- pills */
.cv-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--bark);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.cv-pill.is-active   { background: #E4EFE2; color: var(--good); }
.cv-pill.is-pending  { background: var(--card); color: var(--bark); box-shadow: inset 0 0 0 1px var(--border); }
.cv-pill.is-declared { background: var(--human); color: #fff; }
.cv-pill.is-retired  { background: var(--line); color: var(--muted); }

.cv-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--tint);
  color: var(--bark);
  font-size: 12px;
  font-weight: 700;
}
.cv-chip-mine { background: var(--crust); color: var(--ink); font-weight: 700; }

/* --------------------------------------------------------------------------- buttons */
.cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font: 700 14px/1.1 var(--font);
  padding: 9px 16px;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--crust);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
}
.cv-btn:hover { background: var(--crust-hover); text-decoration: none; }
.cv-btn:active { transform: translateY(1px); }
.cv-btn[disabled], .cv-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cv-btn.cv-ghost { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
.cv-btn.cv-ghost:hover { background: var(--tile); }
.cv-btn.cv-big { font-size: 15px; font-weight: 800; min-height: 46px; padding: 12px 20px; }
.cv-btn.cv-small { font-size: 13px; min-height: 32px; padding: 6px 12px; border-radius: 10px; }

.cv-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ----------------------------------------------------------------------------- forms */
label { display: block; font-weight: 700; font-size: 13px; color: var(--muted); margin-bottom: 4px; }

input[type='text'], input[type='number'], select, textarea {
  width: 100%;
  font: 15px/1.4 var(--font);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px 12px;
}
input[type='range'] { accent-color: var(--crust); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--bark); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
.cv-btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 3px solid var(--crust);
  outline-offset: 2px;
}

.cv-field { margin-bottom: 14px; }
.cv-fields { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.cv-hint { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 4px; }

/* archetype picker */
.cv-choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cv-choice {
  display: block;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 12px 14px;
  cursor: pointer;
  margin: 0;
}
.cv-choice:hover { border-color: var(--border); background: var(--ground); }
.cv-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-choice b { display: block; font-size: 15px; color: var(--ink); }
.cv-choice span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.cv-choice.is-on { border-color: var(--crust); background: var(--tint); }
.cv-choice.is-off { opacity: .4; }
.cv-choice:focus-within { outline: 3px solid var(--crust); outline-offset: 2px; }

.cv-choices-tight { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ------------------------------------------------------------- the creation quiz */
.cv-question { margin: 0 0 22px; }
.cv-question h3 {
  font: 700 15px/1.3 var(--font);
  color: var(--ink);
  padding-bottom: 6px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cv-question .cv-choice b { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; }

/* the live "right now this looks like a Playmaker" strip */
.cv-readout {
  background: var(--dark);
  color: var(--ground);
  border-radius: 16px;
  padding: 14px 18px;
  margin: 0 0 16px;
}
.cv-readout b { display: block; font: 800 19px/1.2 var(--display); color: var(--ground); }
.cv-readout span { display: block; font-size: 13px; color: #D9C9B0; margin-top: 3px; }

/* the eleven traits */
.cv-traits { margin: 0 0 14px; }
.cv-trait {
  display: grid;
  grid-template-columns: 9.5em minmax(60px, 1fr) 2.4em;
  gap: 4px 12px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.cv-trait:first-child { border-top: 0; }
.cv-trait-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.cv-trait-val { font-size: 14px; font-weight: 700; text-align: right; }
.cv-trait-blurb { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.cv-trait .cv-bar { grid-column: auto; }

/* the height strip on a player's page */
.cv-growth { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cv-growth-step {
  background: var(--tile);
  border-radius: 10px;
  padding: 6px 9px;
  text-align: center;
  min-width: 3.8em;
}
.cv-growth-step b { display: block; font-size: 13px; }
.cv-growth-step em { display: block; font-style: normal; font-size: 11px; color: var(--muted); }

/* ==================================================================== the career page */
/* career.html follows one character through all three saves. Everything below is only used
   there, and it reuses the same cards, pills, bars and tables the other pages do. */

/* the fact list under his name */
.cv-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
}
.cv-fact { min-width: 0; background: var(--tile); border-radius: 14px; padding: 12px 14px; }
.cv-facts dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.cv-facts dd { margin: 2px 0 0; font: 800 18px/1.2 var(--display); }

/* the shape of the career, at a glance: three segments, sized by seasons when we know them */
.cv-arc {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.cv-arc-step {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 14px;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 10px 12px;
  text-align: center;
}
.cv-arc-step b { display: block; font: 800 17px/1.2 var(--display); color: var(--ink); }
.cv-arc-step span { display: block; font-size: 12px; font-weight: 700; }
.cv-arc-step em { display: block; font-style: normal; font-size: 12px; color: var(--muted); min-height: 1.2em; }
.cv-arc-step.is-done { background: var(--tint); box-shadow: none; }
.cv-arc-step.is-now { background: var(--crust); box-shadow: none; }
.cv-arc-step.is-now b, .cv-arc-step.is-now span, .cv-arc-step.is-now em { color: var(--ink); }
.cv-arc-step.is-ahead { box-shadow: inset 0 0 0 1px var(--border); background: transparent; opacity: .7; }

/* the same three levels again, in words */
.cv-timeline { margin: 16px 0 0; }
.cv-tl-level {
  border-left: 4px solid var(--line);
  padding: 8px 0 8px 14px;
  margin: 0;
}
.cv-tl-level.is-done { border-left-color: var(--bark); }
.cv-tl-level.is-now { border-left-color: var(--crust); background: var(--ground); border-radius: 0 12px 12px 0; }
.cv-tl-level.is-ahead { border-left-style: dashed; opacity: .75; }
.cv-tl-level p { margin: 0 0 .25em; font-size: 14px; }
.cv-tl-level p:last-child { margin-bottom: 0; }
.cv-tl-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.cv-tl-head b { font: 800 17px/1.2 var(--display); color: var(--ink); }

.cv-tl-move {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 7px 0 7px 12px;
  margin-left: 2px;
  border-left: 2px dashed var(--line);
  font-size: 13px;
  color: var(--muted);
}
.cv-tl-move.is-done { border-left-color: var(--bark); color: var(--ink); font-weight: 600; }
.cv-tl-arrow { font-size: 15px; line-height: 1; color: var(--bark); }

/* links out to the three league sites */
.cv-links { list-style: none; margin: 0; padding: 0; }
.cv-links li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cv-links li:first-child { border-top: 0; }
.cv-links b { color: var(--ink); }

/* inline SVG charts - no library, sized by viewBox so they never overflow a phone */
.cv-chart-wrap {
  border-radius: 14px;
  background: var(--ground);
  padding: 8px;
  margin: 0 0 12px;
}
.cv-chart { display: block; width: 100%; height: auto; }
.cv-chart-grid { stroke: var(--border); stroke-width: 1; }
.cv-chart-axis { stroke: var(--muted); stroke-width: 1.5; }
.cv-chart-line { fill: none; stroke: var(--crust); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cv-chart-dot { fill: var(--bark); }
.cv-chart-expected { stroke: var(--bark); stroke-width: 1.5; stroke-dasharray: 5 4; }
.cv-chart-future { fill: var(--rind); opacity: .6; }
.cv-chart-label { fill: var(--muted); font: 600 10px var(--font); }
.cv-chart-note { fill: var(--muted); font: 700 11px var(--font); letter-spacing: 1px; text-transform: uppercase; }

/* the cap board: one contract per block, stacked from the floor. The block's own colour is set
   inline per player (fifteen adjacent bands have to be told apart), so these rules carry only
   the two states that mean something. */
.cv-chart-bar { stroke: #fff; stroke-width: 1; }
.cv-chart-bar.is-over { stroke: var(--bad); stroke-width: 2; }
.cv-chart-boxlabel { fill: #fff; font: 700 11px var(--font); paint-order: stroke;
  stroke: rgba(0,0,0,.35); stroke-width: 2.5px; }
/* The cap and tax lines cross the blocks rather than sitting in a margin, so both the line and
   its label need a halo - without one, a dark label on a dark contract is unreadable, which is
   the one thing a reference line cannot be. */
.cv-chart-refline { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 6 4; }
.cv-chart-refline-halo { stroke: var(--ground); stroke-width: 4; opacity: .8; }
.cv-chart-reflabel { fill: var(--ink); font: 700 11px var(--font); paint-order: stroke;
  stroke: var(--ground); stroke-width: 3.5px; stroke-linejoin: round; }

/* A REAL PERSON'S CONTRACT, and the team he plays for. The fill is a gold gradient defined in
   the SVG; these add the rim and the glow that make him findable in a column of ten colours
   without reading a single name. */
.cv-chart-bar.is-ours { stroke: #7A5A00; stroke-width: 2; filter: url(#cv-oursglow); }
.cv-tab.has-ours { box-shadow: 0 0 0 2px var(--crust), 0 0 10px 2px rgba(208, 132, 58, .6); }
.cv-tab.has-ours.is-on { box-shadow: 0 0 0 2px var(--crust), 0 0 12px 3px rgba(208, 132, 58, .75); }

/* the hover card: one node, moved to the cursor */
.cv-capcard { position: fixed; z-index: 60; pointer-events: none; max-width: 260px;
  background: var(--card); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(42, 33, 24, .18); padding: 10px 12px; font-size: 13px; color: var(--ink); }
.cv-capcard[hidden] { display: none; }
.cv-capcard-name { font-weight: 700; color: var(--ink); }
.cv-capcard-ours { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--ink);
  background: var(--crust); border-radius: 999px; padding: 1px 7px; }
.cv-capcard-money { margin-top: 2px; font-variant-numeric: tabular-nums; font-weight: 600; }
.cv-capcard-stats { display: flex; gap: 10px; margin-top: 6px; }
.cv-capcard-stats span { display: flex; flex-direction: column; align-items: center; }
.cv-capcard-stats b { font-variant-numeric: tabular-nums; }
.cv-capcard-stats i { font-style: normal; font-size: 10px; color: var(--muted); }
.cv-capcard-foot { margin-top: 6px; font-size: 11px; color: var(--muted); }

/* money in a column reads as money only when the digits line up */
.cv-num { font-variant-numeric: tabular-nums; }
.cv-strong { font-weight: 800; }
.cv-small { font-size: 13px; }

/* then-and-now table: one column layout for all five groups, so the numbers line up down the
   page instead of each little table choosing its own widths */
table.cv-then { table-layout: fixed; min-width: 560px; }
table.cv-then th:nth-child(1), table.cv-then td:nth-child(1) { width: 27%; }
table.cv-then th:nth-child(2), table.cv-then td:nth-child(2),
table.cv-then th:nth-child(3), table.cv-then td:nth-child(3),
table.cv-then th:nth-child(4), table.cv-then td:nth-child(4) { width: 9%; }
table.cv-then th:nth-child(5), table.cv-then td:nth-child(5) { width: 14%; }
.cv-delta { font-weight: 700; }
.cv-delta.is-up { color: var(--good); }
.cv-delta.is-down { color: var(--bad); }
.cv-bar-inline { grid-column: auto; display: block; min-width: 90px; width: 100%; margin-top: 4px; }

/* ------------------------------------------------------------------------ rating rows */
.cv-sheet { margin: 0 0 18px; }
.cv-sheet h3 {
  font: 700 12px/1.2 var(--font);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  padding: 8px 0;
  margin: 0;
}

.cv-rating {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 12px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.cv-rating.is-locked { opacity: .6; }

.cv-rating-name { font-size: 15px; font-weight: 600; }
.cv-rating-name em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); }
.cv-rating-name .cv-pending-note { font-size: 12px; font-weight: 700; color: var(--human); white-space: nowrap; }

.cv-rating-controls { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cv-step {
  font: 600 18px/1 var(--font);
  width: 40px; height: 34px;
  border: 0;
  border-radius: 10px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--muted);
  cursor: pointer;
}
.cv-step:hover { background: var(--tile); }
/* The raise button is the one that spends, so it is the one that stands out. */
.cv-step[aria-label^='Raise'] { background: var(--dark); color: #F2C08A; box-shadow: none; }
.cv-step[aria-label^='Raise']:hover { background: var(--dark-2); }
.cv-step[disabled], .cv-step[aria-label^='Raise'][disabled] { background: var(--line); color: var(--muted); box-shadow: none; opacity: .6; cursor: not-allowed; }
.cv-val { display: inline-block; min-width: 2.4em; text-align: right; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.cv-val.is-up { color: var(--good); }
.cv-cap { font-size: 12px; color: var(--muted); min-width: 5.6em; text-align: right; }

/* the bar underneath a rating, in the full width of the row */
.cv-bar {
  grid-column: 1 / -1;
  height: 10px;
  border-radius: 5px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.cv-bar i { display: block; height: 100%; border-radius: 5px; background: var(--bark); }
.cv-bar u {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--ink); text-decoration: none;
}
/* the shaded band on the create page: everywhere the roll could land */
.cv-bar s {
  position: absolute; top: 0; bottom: 0;
  background: var(--crust);
  opacity: .7;
  border-radius: 5px;
  text-decoration: none;
}
.cv-scout-word {
  font-size: 13px;
  font-weight: 700;
  color: var(--bark);
  text-align: right;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------ point meter */
/* The dark bar from the mockup's "2 changes / Send upgrades" strip. Sticky, so the number you
   are spending against stays in sight while you scroll the sheet. */
.cv-meter {
  position: sticky;
  top: 12px;
  z-index: 5;
  background: var(--dark);
  color: var(--ground);
  border-radius: 16px;
  padding: 12px 18px;
  margin-bottom: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  align-items: center;
}
.cv-meter b { font: 800 24px/1 var(--display); color: #F2C08A; }
.cv-meter span { font-size: 13px; font-weight: 600; color: #E8DCC8; }
.cv-meter .cv-meter-sep { margin-left: auto; }
.cv-meter-stat { display: inline-flex; align-items: baseline; gap: 7px; }

/* ---------------------------------------------------------------------------- tables */
table.cv-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.cv-table th {
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 8px 10px;
  white-space: nowrap;
}
/* `table.cv-table th` outranks a bare `.cv-right`, so a right-aligned column used to keep a
   left-aligned header sitting away from its own numbers. */
table.cv-table th.cv-right { text-align: right; }
/* a row header (the team or player name in the first column) reads as a name, not a label */
table.cv-table tbody th { color: var(--ink); font-size: 14px; letter-spacing: 0; text-transform: none; font-weight: 700; }
table.cv-table td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: top; }
table.cv-table tbody th { border-top: 1px solid var(--line); }
table.cv-table.cv-tight td, table.cv-table.cv-tight th { padding: 6px 8px; }
table.cv-table tr > :first-child { padding-left: 0; }
table.cv-table tr > :last-child { padding-right: 0; }
td.cv-rank { font: 800 16px/1.3 var(--display); color: var(--bark); }

/* ---- sortable headers ----
   A column you can sort has to LOOK like one before it is clicked, or nobody discovers it.
   The arrow is always there - faint when the column is idle, solid on the one in use - so the
   header reads as a control rather than as a label that happens to respond. */
table.cv-table th.cv-sortable { cursor: pointer; user-select: none; border-radius: 6px; }
table.cv-table th.cv-sortable::after {
  content: "\2195";                 /* up-down arrow: "this sorts" */
  margin-left: 5px;
  opacity: .35;
  font-weight: 400;
}
table.cv-table th.cv-sortable:hover { color: var(--ink); }
table.cv-table th.cv-sortable:hover::after { opacity: .8; }
table.cv-table th.cv-sortable:focus-visible { outline: 2px solid var(--crust); outline-offset: -2px; }
table.cv-table th.cv-sortable[aria-sort="descending"]::after { content: "\25BC"; opacity: 1; }
table.cv-table th.cv-sortable[aria-sort="ascending"]::after { content: "\25B2"; opacity: 1; }
table.cv-table th.cv-sortable[aria-sort] { color: var(--bark); }

/* ---- the "ours only" switch on the all-time page ---- */
.cv-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.cv-filter label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; color: var(--ink); }
tr.cv-ours td, tr.cv-ours th { background: var(--butter) !important; }
.cv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------------------- notices */
.cv-note {
  background: var(--tint);
  color: var(--ink);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 0 0 16px;
  font-size: 14px;
}
.cv-note.is-bad  { background: #FBE9E7; color: #4A1512; }
.cv-note.is-good { background: #E6F0E3; color: #1F4423; }
.cv-note ul { margin: 6px 0 0; padding-left: 20px; }
.cv-note p:last-child { margin-bottom: 0; }

.cv-muted { color: var(--muted); font-size: 13px; }
.cv-right { text-align: right; }
.cv-center { text-align: center; }
.cv-stack > * + * { margin-top: 12px; }

/* --------------------------------------------------------------------- league cards */
.cv-league-cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 20px; }
.cv-league-card {
  background: var(--card);
  border-radius: var(--radius);
  border-top: 5px solid var(--league, var(--crust));
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.cv-league-card.is-prep { --league: var(--prep); }
.cv-league-card.is-college { --league: var(--college); }
.cv-league-card.is-pro { --league: var(--pro); }
.cv-league-card header { display: flex; align-items: baseline; gap: 10px; }
.cv-league-card h2 { margin: 0; margin-right: auto; }
.cv-league-card header a { font-size: 13px; font-weight: 700; }
.cv-league-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cv-league-facts div { background: var(--tile); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.cv-league-facts span { display: block; font-size: 12px; color: var(--muted); }
.cv-league-facts b { display: block; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-league-card p { margin: 0; font-size: 14px; color: var(--muted); }
.cv-league-card p b { color: var(--ink); }
.cv-league-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
@media (max-width: 1000px) { .cv-league-cards { grid-template-columns: minmax(0, 1fr); } }

/* the old tiles, still used if a page asks for them */
.cv-leagues { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cv-league {
  display: block;
  border-radius: 16px;
  background: var(--tile);
  padding: 16px;
  color: var(--ink);
}
.cv-league:hover { text-decoration: none; background: var(--tint); }
.cv-league b { display: block; font: 800 18px/1.2 var(--display); }
.cv-league span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.cv-league.is-placeholder { opacity: .65; cursor: not-allowed; }
.cv-league-cell { display: flex; flex-direction: column; gap: 5px; }
.cv-league-sub { align-self: start; font-size: 13px; font-weight: 600; padding-left: 2px; }

/* the Leagues page: a segmented switch, then standings beside the leaders */
.cv-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.cv-page-head h1 { margin: 0 auto 0 0; }
.cv-page-head .cv-muted { flex-basis: 100%; font-size: 15px; margin: -6px 0 0; }
.cv-seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
}
.cv-seg button {
  min-height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 700 14px/1 var(--font);
  cursor: pointer;
}
.cv-seg button:hover { background: var(--tile); }
.cv-seg button[aria-selected='true'] { background: var(--ink); color: var(--ground); }
.cv-standings .cv-ours-names { color: var(--bark); font-size: 13px; font-weight: 700; }
.cv-standings tr.is-ours td, .cv-standings tr.is-ours th { background: var(--butter); }
.cv-leader-list { list-style: none; margin: 0; padding: 0; }
.cv-leader-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cv-leader-list li > span:first-child { width: 16px; color: var(--muted); font-weight: 700; font-size: 13px; }
.cv-leader-list .cv-leader-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-leader-list .cv-leader-team { font-size: 12px; color: var(--muted); }
.cv-leader-list b { width: 44px; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv-leader-list li.is-ours .cv-leader-name { font-weight: 700; }
.cv-ours-badge { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--tint); color: var(--bark); font-size: 11px; font-weight: 700; }
.cv-sitelinks { display: flex; flex-wrap: wrap; gap: 8px; }

/* ------------------------------------------------------------------------ characters */
.cv-roster { list-style: none; margin: 0; padding: 0; }
.cv-roster li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.cv-roster li:first-child { border-top: 0; }
.cv-roster b { font-size: 15px; }
.cv-roster .cv-muted { margin-left: auto; }

/* the crew on Home: an avatar, the name and where he plays, and his points to spend */
.cv-crew { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.cv-crew li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); min-width: 0; }
.cv-avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--league, var(--bark));
  color: #fff;
  font-weight: 800;
  font-size: 12px;
}
.cv-avatar.is-prep { --league: var(--prep); }
.cv-avatar.is-college { --league: var(--college); }
.cv-avatar.is-pro { --league: #9A5A1E; }
.cv-crew-who { flex: 1 1 auto; min-width: 0; }
.cv-crew-who a { display: block; color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-crew-who span { display: block; font-size: 12px; color: var(--muted); }
.cv-points { flex: 0 0 auto; padding: 3px 10px; border-radius: 999px; background: var(--tint); color: var(--bark); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .cv-crew { grid-template-columns: minmax(0, 1fr); } }

/* the GOAT top three on Home */
.cv-goat-mini { list-style: none; margin: 0; padding: 0; }
.cv-goat-mini li { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--dark-line); font-size: 15px; }
.cv-goat-mini li span:first-child { width: 20px; font-weight: 800; color: #F2C08A; }
.cv-goat-mini li span:nth-child(2) { flex: 1 1 auto; }

.cv-spinner { color: var(--muted); font-size: 14px; padding: 10px 0; }

/* ------------------------------------------------------------------------------ phone */
@media (max-width: 860px) {
  body.cv-shell { padding-left: 0; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .cv-side { display: none; }

  .cv-mtop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 6px;
  }
  .cv-mtop .cv-brand { margin: 0 auto 0 0; font-size: 20px; }
  .cv-mtop .cv-who-name { display: none; }

  .cv-tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 30;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--card);
    border-top: 1px solid var(--border);
  }
  .cv-tabbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
  }
  .cv-tabbar a[aria-current='page'] { color: var(--bark); }
  .cv-tabbar a[aria-current='page'] svg { color: var(--crust); }

  .cv-page { padding: 12px 14px 32px; }
  .cv-foot { padding: 8px 16px 24px; }
  h1 { font-size: 30px; }
  .cv-card { padding: 18px; border-radius: 18px; }
  .cv-hero { padding: 20px 18px; border-radius: 20px; }
  .cv-hero h1 { font-size: 30px; }
  .cv-hero p { font-size: 15px; }
  .cv-page-head .cv-seg { width: 100%; }
  .cv-page-head .cv-seg button { flex: 1 1 0; padding: 0 8px; }
}

@media (max-width: 640px) {
  /* A tab strip that wraps onto three lines is worse than one that scrolls sideways. */
  .cv-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
             scrollbar-width: none; padding-bottom: 2px; }
  .cv-tabs::-webkit-scrollbar { display: none; }
  .cv-tab { flex: 0 0 auto; }
  .cv-fields { grid-template-columns: 1fr; }
  .cv-meter { position: static; }
  .cv-rating { grid-template-columns: 1fr; }
  .cv-rating-controls { justify-content: flex-end; }
  .cv-roster .cv-muted { margin-left: 0; width: 100%; }
  .cv-choices { grid-template-columns: 1fr; }
  .cv-choices-tight { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .cv-trait { grid-template-columns: 8em minmax(40px, 1fr) 2.2em; }
  .cv-readout b { font-size: 17px; }
  /* the career arc: three wide segments become three stacked ones. flex-grow does nothing in a
     column with no definite height, so the inline season weighting simply stops applying. */
  .cv-arc { flex-direction: column; }
  .cv-facts { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .cv-story-list { grid-template-columns: minmax(0, 1fr); }
  .cv-pulse-tiles b { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- tabs and the roll call */
.cv-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px 0; }
.cv-tab {
  display: inline-flex;
  align-items: center;
  font: 600 14px/1 var(--font);
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 0;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--ink);
}
.cv-tab:hover { background: var(--tile); }
.cv-tab.is-on { background: var(--ink); color: var(--ground); box-shadow: none; }
/* inside a white card the off state needs a fill of its own */
.cv-card .cv-tab:not(.is-on) { background: var(--ground); box-shadow: none; }
.cv-card .cv-tab:not(.is-on):hover { background: var(--tile); }

.cv-tab-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: var(--tint); color: var(--bark); font-size: 12px; font-weight: 700;
}
.cv-tab.is-on .cv-tab-badge { background: var(--crust); color: var(--ink); }

/* Rank rows reuse the trait row's grid, but the two columns want opposite sizes: the label is
   "PTS" rather than "Motor", and the value is "104th" rather than "45". Left as-is the ordinal
   was clipped against the right edge of a phone - visible only by looking at it. */
.cv-ranks .cv-trait { grid-template-columns: 3.4em minmax(40px, 1fr) 3.8em; }
.cv-ranks .cv-trait-name { letter-spacing: .5px; }

/* head to head: two columns of numbers with the label down the middle, so the eye compares
   across rather than reading two separate tables. */
.cv-h2h td { text-align: center; font-variant-numeric: tabular-nums; }
.cv-h2h th { text-align: center; }
.cv-h2h tbody th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.cv-h2h-win { font-weight: 800; background: var(--tint); color: var(--bark); }

.cv-select {
  font: 600 15px var(--font);
  padding: 10px 12px; width: 100%; border-radius: var(--radius-s);
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
}
.cv-select:focus-visible { outline: 3px solid var(--crust); outline-offset: 2px; }

.cv-subhead {
  margin: 18px 0 8px; font: 700 12px/1.2 var(--font); text-transform: uppercase; letter-spacing: 1px;
  color: var(--muted);
}

/* A folded-away block of writing. The summary carries the headline, so leaving it shut costs
   the reader nothing; the arrow is drawn rather than the browser's default marker so it looks
   the same on every platform. */
.cv-fold { margin: 0 0 14px; border-radius: 14px; background: var(--ground); }
.cv-fold > summary {
  list-style: none; cursor: pointer; padding: 12px 16px;
  font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.cv-fold > summary::-webkit-details-marker { display: none; }
/* The arrow is drawn with borders, not a glyph. A character would need either a CSS escape -
   and an escape written through a script is how this line first shipped a literal 0x15, the
   backslash eaten so 25 was read as octal - or a raw character, which depends on the sheet
   being served as UTF-8. Borders need neither. */
.cv-fold > summary::after {
  content: ''; margin-left: auto; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--muted); transition: transform .15s ease;
}
.cv-fold[open] > summary::after { transform: rotate(180deg); }
.cv-fold > summary:hover { background: var(--tile); border-radius: 14px; }
.cv-fold[open] > summary:hover { border-radius: 14px 14px 0 0; }
.cv-fold > summary:focus-visible { outline: 3px solid var(--crust); outline-offset: 2px; }
.cv-fold-body { padding: 0 16px 14px; }
.cv-fold-body > :first-child { margin-top: 0; }
.cv-fold-body > :last-child { margin-bottom: 0; }

.cv-roll {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px;
  padding: 12px 0; border-top: 1px solid var(--line);
}
.cv-roll:first-child { border-top: 0; }
.cv-roll.is-mine { background: var(--butter); border-radius: 12px; padding: 12px; border-top-color: transparent; }
.cv-roll-main { display: flex; align-items: baseline; gap: 8px; flex: 1 1 260px; }
.cv-rollname { font: 800 17px/1.2 var(--display); color: var(--ink); text-decoration: none; }
a.cv-rollname:hover { text-decoration: underline; }
.cv-roll-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 14px; flex: 1 1 240px; }
.cv-roll-owner { flex: 0 0 auto; font-size: 13px; }

@media (max-width: 560px) {
  .cv-roll { flex-direction: column; gap: 4px; }
  .cv-roll-owner { order: 3; }
}

/* ---------------------------------------------------------------- signing a player */
/* The moment the whole page exists for. It arrives all at once otherwise - a form vanishes and
   a wall of numbers appears - so the card lands, then the NBA comparison, then the sheet. */
@keyframes cv-land {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes cv-pop {
  0%   { opacity: 0; transform: scale(.9); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: none; }
}
#signed > .cv-card { animation: cv-land .45s cubic-bezier(.2,.8,.3,1) both; }
#signed .cv-archetype { animation: cv-pop .5s cubic-bezier(.2,.8,.3,1) .55s both; }
#signed .cv-archetype-slot > .cv-hint { animation: cv-land .4s ease .9s both; }
#signed h3, #signed .cv-table, #signed .cv-traits {
  animation: cv-land .4s ease 1.05s both;
}
#signed .cv-actions { animation: cv-land .4s ease 1.3s both; }

.cv-archetype b { letter-spacing: .3px; }

/* Somebody who has asked their system not to animate things gets the card, immediately, with
   no movement at all. The content is identical either way - this is decoration, and decoration
   is the first thing that should yield. */
@media (prefers-reduced-motion: reduce) {
  #signed > .cv-card,
  #signed .cv-archetype,
  #signed .cv-archetype-slot > .cv-hint,
  #signed h3, #signed .cv-table, #signed .cv-traits,
  #signed .cv-actions { animation: none !important; }
}

/* A SEASON THAT HAPPENED BUT DOES NOT MEAN WHAT IT SAYS - see renderAnomalies in page-goats.js.
   Warning-coloured rather than error-coloured on purpose: nothing here is broken now, and the
   records it produced are real results of real games. The reader just needs to know why one
   season's numbers sit so far outside every other. */
.cv-anomaly {
  background: var(--tint);
  padding: 12px 16px;
  margin: 0 0 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
}
.cv-anomaly strong { color: var(--bark); }

/* ---- GOAT score (goats.html) ---------------------------------------------------------- */
.cv-goat-sliders { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 18px; margin: 8px 0 14px; }
.cv-goat-sliders label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.cv-goat-sliders input[type=range] { grid-column: 1 / -1; width: 100%; }
.cv-goat-sliders output { font-variant-numeric: tabular-nums; color: var(--bark); font-weight: 700; }
.cv-goat-row { cursor: pointer; }
.cv-goat-row:hover td { background: var(--ground); }
.cv-goat-open > td { background: var(--ground); border-radius: 0 0 12px 12px; }
.cv-goat-tag { margin-left: 6px; }
.cv-goat-tag.is-carrier { background: var(--dark); color: #F2C08A; }
.cv-goat-tag.is-passenger { background: var(--line); color: var(--muted); }
.cv-goat-detail { padding: 8px 4px 12px; }
.cv-goat-parts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cv-goat-parts div { display: flex; gap: 6px; font-size: 13px; background: var(--card); border-radius: 10px; padding: 6px 10px; }
.cv-goat-parts b { font-variant-numeric: tabular-nums; }

/* =====================================================================================
 * CHEESE HOLES (2026-09-26). "Brie" alone read as a plain cream website; the user wanted it to
 * look like cheese. Every hole is a radial-gradient, so there are no images to fetch and a hole
 * can never cover a click. Three kinds:
 *   - bites: half-circles cut into a card's edge in the page colour, as if the hole went
 *     right through the rind;
 *   - holes: faint circles inside a surface, placed in its padding where text rarely sits;
 *   - Swiss bars: every progress and rating bar is a strip of cheese with holes in it.
 * Colours are custom properties so each surface can set its own (--bite, --hole).
 * ===================================================================================== */

:root {
  --bite: var(--ground);
  --hole: #F3E7D0;
  --hole-dark: rgba(255, 255, 255, .07);
}

/* the page itself: a few big, very faint holes that stay put while the cards scroll over them */
body {
  background-image:
    radial-gradient(circle at 18% 12%, #F5ECDA 0 70px, transparent 71px),
    radial-gradient(circle at 88% 22%, #F5ECDA 0 44px, transparent 45px),
    radial-gradient(circle at 62% 58%, #F6EEDE 0 110px, transparent 111px),
    radial-gradient(circle at 30% 84%, #F5ECDA 0 56px, transparent 57px),
    radial-gradient(circle at 94% 88%, #F6EEDE 0 80px, transparent 81px),
    radial-gradient(circle at 46% 30%, #F7F0E2 0 26px, transparent 27px);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* cards: two bites on the right edge, one on the bottom, and a pair of small holes top right */
.cv-card, .cv-story, .cv-league-card, .cv-hero {
  background-image:
    radial-gradient(circle at 100% 34%, var(--bite) 0 14px, transparent 14.6px),
    radial-gradient(circle at 100% 54%, var(--bite) 0 6px, transparent 6.6px),
    radial-gradient(circle at 24% 100%, var(--bite) 0 10px, transparent 10.6px),
    radial-gradient(circle at calc(100% - 22px) 20px, var(--hole) 0 7px, transparent 7.6px),
    radial-gradient(circle at calc(100% - 42px) 12px, var(--hole) 0 3.5px, transparent 4.1px);
  background-repeat: no-repeat;
}
/* every other card is cut on the other side, so a page of them does not look stamped */
.cv-card:nth-of-type(even), .cv-story:nth-child(even), .cv-league-card:nth-child(2) {
  background-image:
    radial-gradient(circle at 0 62%, var(--bite) 0 13px, transparent 13.6px),
    radial-gradient(circle at 0 43%, var(--bite) 0 5px, transparent 5.6px),
    radial-gradient(circle at 78% 100%, var(--bite) 0 11px, transparent 11.6px),
    radial-gradient(circle at calc(100% - 20px) 20px, var(--hole) 0 5px, transparent 5.6px),
    radial-gradient(circle at calc(100% - 34px) 36px, var(--hole) 0 3px, transparent 3.6px);
}
/* a card on a cream card is bitten in the card's own white */
.cv-card .cv-card, .cv-card .cv-story { --bite: var(--card); --hole: #EFE4CE; }

/* the hero: a big wedge of cheese in the corner, holes and all */
.cv-hero { position: relative; overflow: hidden; }
.cv-hero::after {
  content: '';
  position: absolute;
  right: -34px; bottom: -40px;
  width: 260px; height: 180px;
  pointer-events: none;
  opacity: .16;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150'%3E%3Cpath d='M10 120 L210 120 L210 40 L10 104 Z' fill='%23D0843A'/%3E%3Ccircle cx='70' cy='104' r='10' fill='%23FFFFFF'/%3E%3Ccircle cx='130' cy='92' r='14' fill='%23FFFFFF'/%3E%3Ccircle cx='180' cy='100' r='7' fill='%23FFFFFF'/%3E%3Ccircle cx='165' cy='66' r='5' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cv-hero > * { position: relative; z-index: 1; }

/* dark surfaces: holes a shade lighter than the card */
.cv-card.is-dark, .cv-readout, .cv-meter, .cv-feature, .cv-spendbar.is-live {
  --bite: var(--ground);
  background-image:
    radial-gradient(circle at 100% 30%, var(--bite) 0 10px, transparent 10.6px),
    radial-gradient(circle at calc(100% - 30px) 22px, var(--hole-dark) 0 9px, transparent 9.6px),
    radial-gradient(circle at calc(100% - 58px) 46px, var(--hole-dark) 0 5px, transparent 5.6px),
    radial-gradient(circle at 18% calc(100% - 14px), var(--hole-dark) 0 6px, transparent 6.6px),
    radial-gradient(circle at 62% 12px, var(--hole-dark) 0 4px, transparent 4.6px);
  background-repeat: no-repeat;
}

/* the sidebar: holes all the way down, and two bites out of its right edge */
.cv-side {
  background-image:
    radial-gradient(circle at 100% 46%, var(--ground) 0 13px, transparent 13.6px),
    radial-gradient(circle at 100% 72%, var(--ground) 0 7px, transparent 7.6px),
    radial-gradient(circle at 82% 8%, #E9D6B1 0 7px, transparent 7.6px),
    radial-gradient(circle at 91% 38%, #E9D6B1 0 9px, transparent 9.6px),
    radial-gradient(circle at 93% 60%, #EBDAB8 0 5px, transparent 5.6px),
    radial-gradient(circle at 38% 78%, #E9D6B1 0 18px, transparent 18.6px),
    radial-gradient(circle at 86% 86%, #EBDAB8 0 9px, transparent 9.6px),
    radial-gradient(circle at 20% 95%, #EBDAB8 0 6px, transparent 6.6px);
  background-repeat: no-repeat;
}

/* the active nav item and every solid button: a couple of holes at the end, clear of the label */
.cv-nav a[aria-current='page'], .cv-btn:not(.cv-ghost) {
  background-image:
    radial-gradient(circle at calc(100% - 11px) 32%, rgba(255, 255, 255, .34) 0 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 20px) 70%, rgba(255, 255, 255, .28) 0 2px, transparent 2.6px),
    radial-gradient(circle at 8px 72%, rgba(255, 255, 255, .22) 0 1.6px, transparent 2.2px);
  background-repeat: no-repeat;
}
.cv-step[aria-label^='Raise']:not([disabled]) {
  background-image: radial-gradient(circle at 78% 26%, rgba(255, 255, 255, .12) 0 3px, transparent 3.6px);
  background-repeat: no-repeat;
}

/* Swiss bars: the fill of every bar is a strip of cheese with holes punched in it */
.cv-bar i, .cv-progress i {
  background-image:
    radial-gradient(circle at 30% 50%, rgba(255, 255, 255, .30) 0 2px, transparent 2.6px),
    radial-gradient(circle at 78% 30%, rgba(255, 255, 255, .22) 0 1.4px, transparent 2px);
  background-size: 17px 10px;
}
.cv-progress i { background-size: 24px 12px; }

/* tiles inside cards and the avatars: one small hole each */
.cv-league-facts div, .cv-pulse-tiles div, .cv-fact {
  background-image: radial-gradient(circle at calc(100% - 11px) 11px, #EFE2C8 0 4px, transparent 4.6px);
  background-repeat: no-repeat;
}
.cv-avatar {
  background-image:
    radial-gradient(circle at 80% 78%, rgba(255, 255, 255, .22) 0 3px, transparent 3.6px),
    radial-gradient(circle at 22% 22%, rgba(255, 255, 255, .14) 0 2px, transparent 2.6px);
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------ league shortcuts (chrome) */
.cv-quick { display: flex; gap: 6px; margin: -14px 6px 22px; }
.cv-quick a {
  flex: 1 1 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px;
  padding: 0 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.cv-quick a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--league, var(--crust)); flex: 0 0 auto; }
.cv-quick a.is-prep { --league: var(--prep); }
.cv-quick a.is-college { --league: var(--college); }
.cv-quick a.is-pro { --league: var(--pro); }
.cv-quick a:hover { background: #fff; text-decoration: none; }
.cv-mtop-row { display: flex; align-items: center; gap: 10px; }

/* ------------------------------------------------------------------ utility */
.cv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cv-inline-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: 13px; cursor: pointer; }
.cv-inline-select { margin: 0; }
.cv-inline-select .cv-select { width: auto; min-width: 170px; }

/* ================================================================ My players, compact */
.cv-player-tabs { margin-bottom: 18px; }
.cv-player-tabs .cv-tab { padding: 8px 8px 8px 14px; }

.cv-me-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.cv-me-who { flex: 1 1 auto; min-width: 0; }
.cv-me-who h2 { font-size: 32px; letter-spacing: -.8px; margin: 0 0 4px; }
.cv-me-who p { margin: 0; font-size: 14px; line-height: 1.6; }
.cv-me-points { text-align: right; flex: 0 0 auto; max-width: 180px; }
.cv-me-points b { display: block; font: 800 44px/1 var(--display); color: var(--bark); }
.cv-me-points span { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.cv-avatar.is-big { width: 60px; height: 60px; border-radius: 18px; font: 800 22px/1 var(--display); }
.cv-avatar.is-tiny { width: 22px; height: 22px; border-radius: 7px; font-size: 10px; }

.cv-spend-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 6px; }
.cv-seg.cv-seg-small button { min-height: 34px; padding: 0 14px; font-size: 13px; }
.cv-spend-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--muted); }
.cv-spend-legend > span { display: inline-block; margin-left: 6px; }
.cv-key-fill { width: 14px; height: 8px; border-radius: 4px; background: var(--bark); }
.cv-key-queued { width: 14px; height: 8px; border-radius: 4px; background: var(--crust); }
.cv-key-tick { width: 2px; height: 12px; background: var(--ink); }
.cv-fold.cv-fold-inline { margin: 0 0 0 auto; background: transparent; }
.cv-fold.cv-fold-inline > summary { padding: 6px 10px; font-size: 13px; color: var(--bark); }
.cv-fold.cv-fold-inline[open] { flex-basis: 100%; background: var(--ground); }

.cv-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; align-items: start; }
.cv-sheet-grid .cv-sheet { margin: 0 0 6px; }
@media (max-width: 1100px) { .cv-sheet-grid { grid-template-columns: minmax(0, 1fr); } }

.cv-rate {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(40px, 1fr) 4.4em auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}
.cv-rate.is-locked, .cv-rate.is-muted { opacity: .55; }
.cv-rate-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 14px; font-weight: 600; min-width: 0; }
.cv-rate .cv-bar { grid-column: auto; }
.cv-rate .cv-val { min-width: 0; font-size: 14px; white-space: nowrap; }
.cv-rate .cv-step { width: 38px; height: 34px; }
.cv-rtag { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--line); color: var(--muted); white-space: nowrap; }
.cv-rtag.is-easy { background: #E4EFE2; color: var(--good); }
.cv-rtag.is-hard { background: #F6E3DC; color: #8A3B26; }
.cv-rtag.is-waiting { background: #E3EEF6; color: var(--human); }
.cv-bar b { position: absolute; top: 0; bottom: 0; background: var(--crust); border-radius: 0 5px 5px 0; }
.cv-bar u.is-live { width: 3px; background: var(--crust); box-shadow: 0 0 0 1px var(--ink); }

/* The send bar. Sticky to the bottom of the window, so the button is always one tap away however
   far down the sheet you are - it used to be under the last rating. Dark once something is
   staged, so it is obvious there is something to send. */
.cv-spendbar {
  position: sticky;
  bottom: 12px;
  z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 14px;
  padding: 12px 14px 12px 18px;
  border-radius: 16px;
  background-color: var(--tile);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(42, 33, 24, .12);
}
.cv-spendbar.is-live { background-color: var(--dark); color: var(--ground); }
.cv-spendbar-what { flex: 1 1 260px; min-width: 0; font-size: 14px; }
.cv-spendbar-count { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--crust); color: var(--ink); font-weight: 800; font-size: 13px; margin-right: 4px; }
.cv-spendbar .cv-actions { flex: 0 0 auto; }
.cv-spendbar.is-live .cv-btn.cv-ghost { background: transparent; color: var(--ground); box-shadow: inset 0 0 0 1px var(--dark-line); }

@media (max-width: 860px) {
  .cv-spendbar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .cv-me-who h2 { font-size: 24px; }
  .cv-me-points b { font-size: 34px; }
  .cv-avatar.is-big { width: 46px; height: 46px; border-radius: 14px; font-size: 17px; }
}
@media (max-width: 640px) {
  .cv-me-head { flex-wrap: wrap; }
  .cv-me-points { order: -1; margin-left: auto; }
  .cv-me-who { flex-basis: 100%; }
  .cv-spend-legend { flex-wrap: wrap; row-gap: 4px; }
  .cv-rate { grid-template-columns: minmax(0, 1fr) minmax(36px, .7fr) 4.4em auto; gap: 8px; }
}

/* ======================================================================= Stories */
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.cv-chips.cv-people { margin-bottom: 20px; }
.cv-chip-btn {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--ink);
  font: 600 14px/1 var(--font);
  cursor: pointer;
}
.cv-chip-btn:hover { background: var(--tile); }
.cv-chip-btn.is-on { background: var(--ink); color: var(--ground); box-shadow: none; }
.cv-chip-count { padding: 2px 7px; border-radius: 999px; background: var(--tint); color: var(--bark); font-size: 12px; font-weight: 700; }
.cv-chip-btn.is-on .cv-chip-count { background: var(--crust); color: var(--ink); }
.cv-people .cv-chip-btn { padding-left: 6px; }

.cv-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 0 0 22px;
  padding: 28px 32px;
  border-radius: 24px;
  background-color: var(--dark);
  color: var(--ground);
}
.cv-feature .cv-kicker { color: #F2C08A; }
.cv-feature h2 { font-size: 38px; letter-spacing: -1px; margin: 6px 0 8px; color: var(--ground); }
.cv-feature p { color: #E2D4BE; font-size: 16px; margin: 0 0 6px; }
.cv-feature .cv-feature-game { font-size: 14px; color: #CDBBA0; }
.cv-feature-people a { color: #F2C08A; }
.cv-feature-tiles { display: flex; gap: 8px; }
.cv-feature-tiles div {
  width: 72px; padding: 10px 0; border-radius: 14px; background-color: var(--dark-2); text-align: center;
  background-image: radial-gradient(circle at calc(100% - 9px) 9px, rgba(255, 255, 255, .08) 0 4px, transparent 4.6px);
  background-repeat: no-repeat;
}
.cv-feature-tiles b { display: block; font: 800 28px/1.1 var(--display); color: #F2C08A; }
.cv-feature-tiles span { font-size: 12px; color: #D9C9B0; }
@media (max-width: 900px) {
  .cv-feature { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; }
  .cv-feature h2 { font-size: 28px; }
  .cv-feature-tiles { flex-wrap: wrap; }
  .cv-feature-tiles div { width: 62px; }
}

.cv-season-head { font-size: 24px; margin: 26px 0 12px; }
.cv-story-feed > .cv-season-head:first-child { margin-top: 0; }
.cv-story-list { margin-bottom: 8px; }
.cv-story-fold { grid-column: span 2; }
@media (max-width: 760px) { .cv-story-fold { grid-column: auto; } }
.cv-fold-list { list-style: none; margin: 4px 0 10px; padding: 0; }
.cv-fold-list li { padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; }
.cv-fold-list li:first-child { border-top: 0; }
.cv-fold-list a { color: var(--ink); font-weight: 600; }
.cv-more { display: flex; justify-content: center; margin: 18px 0 0; }

/* ======================================================================= GOAT page */
.cv-goat-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.cv-formula { position: sticky; top: 20px; }
.cv-formula .cv-goat-sliders { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) {
  .cv-goat-layout { grid-template-columns: minmax(0, 1fr); }
  .cv-formula { position: static; order: -1; }
  .cv-formula .cv-goat-sliders { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* rows, not cards: the stories in Home's side card stay plain */
.cv-mini-stories .cv-story { background-image: none; }

/* the phone's top bar carries the league shortcuts on a line of their own */
@media (max-width: 860px) {
  .cv-mtop { flex-direction: column; align-items: stretch; gap: 10px; }
  .cv-mtop .cv-quick { margin: 0; }
  .cv-mtop .cv-quick a { background: var(--card); box-shadow: inset 0 0 0 1px var(--border); }
}

/* The easy/hard tags are a dot, so a rating stays on one line; the words are in the tag's title
   and in the legend above the sheet. "fixed" and "next sim" keep their words - those change what
   you can do. */
.cv-rtag.is-easy, .cv-rtag.is-hard { font-size: 0; padding: 0; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.cv-rtag.is-easy { background: var(--good); }
.cv-rtag.is-hard { background: #B4452A; }
.cv-key-easy, .cv-key-hard { width: 8px; height: 8px; border-radius: 50%; }
.cv-key-easy { background: var(--good); }
.cv-key-hard { background: #B4452A; }

/* Range sliders (the GOAT formula): a rind track and a cheese-coloured thumb, not the browser's
   black-and-blue default. */
input[type='range'] { -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; }
input[type='range']::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: var(--rind); }
input[type='range']::-moz-range-track { height: 8px; border-radius: 4px; background: var(--rind); }
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-top: -6px;
  border-radius: 50%; background: var(--crust); border: 3px solid var(--card); box-shadow: 0 1px 4px rgba(42, 33, 24, .3);
}
input[type='range']::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--crust); border: 3px solid var(--card);
  box-shadow: 0 1px 4px rgba(42, 33, 24, .3);
}
input[type='range']:focus-visible { outline: 3px solid var(--crust); outline-offset: 2px; border-radius: 6px; }

/* ---- My players: groups that fold, prices on the buttons, and the summary column ---- */
.cv-sheet h3:has(.cv-sheet-toggle) { padding: 0; }
.cv-sheet-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 36px; padding: 6px 0;
  border: 0; background: transparent; cursor: pointer;
  font: 700 12px/1.2 var(--font); letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  text-align: left;
}
.cv-sheet-toggle::before {
  content: ''; width: 0; height: 0; flex: 0 0 auto;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--muted); transition: transform .15s ease;
}
.cv-sheet-toggle[aria-expanded='false']::before { transform: rotate(-90deg); }
.cv-sheet-toggle:hover { color: var(--ink); }
.cv-sheet-count { margin-left: auto; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bark); }
.cv-sheet.is-shut { border-bottom: 1px solid var(--line); }

.cv-rate .cv-step { width: auto; min-width: 38px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.cv-price { font: 700 11px/1 var(--font); opacity: .85; }

.cv-me-layout { display: flex; flex-direction: column-reverse; gap: 18px; }
.cv-me-aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cv-me-mini { background: var(--ground); border-radius: 16px; padding: 14px 16px; }
.cv-me-mini h3 { font: 700 12px/1.2 var(--font); letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.cv-me-mini p { margin: 6px 0 0; }
.cv-me-money { font: 800 24px/1.1 var(--display); color: var(--ink); }
.cv-mini-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cv-mini-tiles div {
  background-color: var(--card); border-radius: 10px; padding: 8px 8px 6px;
  background-image: radial-gradient(circle at calc(100% - 8px) 8px, #EFE2C8 0 3px, transparent 3.6px);
  background-repeat: no-repeat;
}
.cv-mini-tiles b { display: block; font: 800 20px/1.1 var(--display); }
.cv-mini-tiles span { font-size: 11px; color: var(--muted); }
@media (min-width: 1300px) {
  .cv-me-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
  .cv-me-aside { grid-template-columns: minmax(0, 1fr); position: sticky; top: 20px; }
  .cv-mini-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .cv-me-aside { display: none; } }

/* ---- the GOAT formula: fits the window, and folds shut where it sits above the board ---- */
.cv-formula { max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.cv-formula .cv-goat-sliders { gap: 4px 18px; margin: 4px 0 8px; }
.cv-formula .cv-goat-sliders label { margin: 0; }
.cv-formula-awards { grid-column: 1 / -1; margin: 6px 0 4px; }
.cv-formula-awards > summary { padding: 9px 12px; font-size: 14px; }
.cv-formula-awards .cv-goat-sliders { padding: 0 12px 8px; margin: 0; }
.cv-formula .cv-goat-sliders > .cv-btn { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }
.cv-formula-toggle { display: none; }
@media (max-width: 1100px) {
  .cv-formula { max-height: none; overflow: visible; }
  .cv-formula-toggle { display: inline-flex; }
  .cv-formula:not(.is-open) #formula { display: none; }
  .cv-formula:not(.is-open) .cv-card-head { margin-bottom: 0; }
}

/* ============================================================== a playoff series (series.html) */
.cv-series-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.cv-series-teams { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.cv-series-team {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 16px; background-color: var(--dark-2);
}
.cv-series-seed { min-width: 30px; font-weight: 700; color: #D9C9B0; }
.cv-series-name { flex: 1 1 auto; font: 800 26px/1.1 var(--display); color: var(--ground); }
.cv-series-wins { font: 800 40px/1 var(--display); color: #D9C9B0; }
.cv-series-team.is-winner { background-color: var(--crust); }
.cv-series-team.is-winner .cv-series-name, .cv-series-team.is-winner .cv-series-wins,
.cv-series-team.is-winner .cv-series-seed { color: var(--ink); }
.cv-series-won { padding: 3px 10px; border-radius: 999px; background: var(--ink); color: #F2C08A; font-size: 12px; font-weight: 800; }
.cv-series-mvp { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.cv-series-mvp h2 { margin: 0; font-size: 32px; }
.cv-series-mvp h2 a { color: var(--ground); }
.cv-series-mvp .cv-ours-badge { vertical-align: middle; }
@media (max-width: 900px) {
  .cv-series-hero { grid-template-columns: minmax(0, 1fr); }
  .cv-series-name { font-size: 21px; }
  .cv-series-wins { font-size: 32px; }
}

.cv-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.cv-game-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 12px 14px; border: 0; border-radius: 16px; cursor: pointer;
  background-color: var(--ground); color: var(--ink); font: 14px/1.35 var(--font);
  box-shadow: inset 0 0 0 1px var(--line);
}
.cv-game-card:hover { background-color: var(--tile); }
.cv-game-card.is-on { background-color: var(--card); box-shadow: inset 0 0 0 2px var(--ink); }
.cv-game-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.cv-game-head span { font-size: 12px; color: var(--muted); }
.cv-game-row { display: flex; justify-content: space-between; color: var(--muted); }
.cv-game-row.is-won { color: var(--ink); font-weight: 700; }
.cv-game-row b { font-variant-numeric: tabular-nums; }
.cv-game-mvp { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.cv-game-mvp span { font-weight: 800; color: var(--bark); }

.cv-box-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 4px 0 4px; }
.cv-box-head h3 { margin: 0; margin-right: auto; font-size: 20px; }
.cv-box-head a { font-size: 13px; }
table.cv-box-table { font-size: 13px; }
table.cv-box-table tbody th { white-space: nowrap; font-size: 13px; }
table.cv-box-table td { white-space: nowrap; }
table.cv-box-table tr.cv-total td, table.cv-box-table tr.cv-total th { font-weight: 800; background: var(--ground); }
table.cv-box-table tr.cv-splits td, table.cv-box-table tr.cv-splits th { font-weight: 600; color: var(--muted); border-top: 0; }
table.cv-box-table tr.is-mvp th { color: var(--bark); }
.cv-starter { margin-left: 6px; padding: 0 5px; border-radius: 4px; background: var(--line); color: var(--muted); font-size: 10px; font-weight: 800; }
.cv-mvp-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--crust); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .4px; }

.cv-series-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.cv-series-chip {
  display: inline-flex; align-items: center; gap: 2px; min-height: 38px; padding: 6px 14px;
  border-radius: 999px; background: var(--ground); box-shadow: inset 0 0 0 1px var(--border);
  color: var(--muted); font-size: 14px; font-weight: 600; text-decoration: none;
}
.cv-series-chip:hover { background: var(--tile); text-decoration: none; }
.cv-series-chip .is-won { color: var(--ink); font-weight: 800; }
.cv-series-chip.is-on { background: var(--ink); box-shadow: none; }
.cv-series-chip.is-on span, .cv-series-chip.is-on .is-won { color: var(--ground); }
.cv-split-cell small { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }

/* ------------------------------------------------------------------------------------------
 * THE SKILL TREE (2026-09-27): the Tree tab on My players. Five branch columns, a card per
 * node. A node he owns fills with rind and gets its holes; one he can buy wears the crust; a
 * Signature at the top of a branch is the one dark card. site/js/tree.js draws it.
 * ------------------------------------------------------------------------------------------ */
.cv-tree { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
@media (max-width: 1100px) { .cv-tree { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cv-tree { grid-template-columns: minmax(0, 1fr); } }
.cv-tree-branch { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv-tree-branch h3 { margin: 0; font-family: var(--display); font-size: 18px; }
.cv-tree-spent { margin: 0; font-size: 12px; }
.cv-tree-node { position: relative; overflow: hidden; border: 2px solid var(--line); border-radius: var(--radius-s);
  background: var(--card); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.cv-tree-node h4 { margin: 0; font-size: 15px; }
.cv-tree-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cv-tree-tier { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cv-tree-cost { font-size: 13px; color: var(--bark); }
.cv-tree-blurb { margin: 0; font-size: 13px; color: var(--ink); }
.cv-tree-state { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.cv-tree-node .cv-btn { align-self: flex-start; margin-top: 4px; }
.cv-tree-node.is-open { border-color: var(--crust); }
.cv-tree-node.is-queued { border-style: dashed; border-color: var(--crust); }
.cv-tree-node.is-queued .cv-tree-state { color: var(--bark); font-weight: 700; }
.cv-tree-node.is-owned { background: var(--rind); border-color: var(--rind-line); }
.cv-tree-node.is-owned .cv-tree-state { color: var(--good); font-weight: 700; }
.cv-tree-node.is-owned::after { content: ''; position: absolute; right: -10px; bottom: -10px; width: 42px; height: 42px;
  border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--hole, #F3E7D0) 0 9px, transparent 10px),
  radial-gradient(circle at 70% 65%, var(--hole, #F3E7D0) 0 6px, transparent 7px); opacity: .9; pointer-events: none; }
.cv-tree-node.is-locked { background: var(--ground); }
.cv-tree-node.is-locked h4, .cv-tree-node.is-locked .cv-tree-blurb { color: var(--muted); }
.cv-tree-node.is-signature { background: var(--dark); border-color: var(--dark-line); }
.cv-tree-node.is-signature h4, .cv-tree-node.is-signature .cv-tree-blurb { color: #FBF7EE; }
.cv-tree-node.is-signature .cv-tree-tier, .cv-tree-node.is-signature .cv-tree-state { color: #E9DCC4; }
.cv-tree-node.is-signature .cv-tree-cost { color: #F3D3AE; }
.cv-tree-node.is-signature.is-owned { outline: 3px solid var(--crust); }
.cv-tree-breakers { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-s); background: var(--tint); }
.cv-tree-breakers .cv-actions { margin: 0; gap: 8px; }
.cv-select { min-height: 36px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card);
  font: inherit; padding: 0 10px; }
.cv-tree-breakers .cv-actions { flex-wrap: nowrap; align-items: center; }
.cv-tree-breakers .cv-select { width: auto; max-width: 260px; }
@media (max-width: 720px) { .cv-tree-breakers .cv-actions { flex-wrap: wrap; } .cv-tree-breakers .cv-select { max-width: 100%; } }