/* ===========================================================================
   FANTASY HOOPS — DESIGN SYSTEM
   ===========================================================================

   AUDIENCE. Someone mid-draft with a specific question. Numerate, already uses
   a competitor, lives in tables. This is a tool, not a marketing site, so the
   reference points are FiveThirtyEight and Linear — not a SaaS landing page.
   Data outranks chrome everywhere.

   IDENTITY. Two marks, and they answer different questions. The logo — BBF on
   a backboard over a rim — says what the site is about, and lives in the
   masthead, the tab and anywhere the brand is named. The range bar says what
   the site claims: that every number is an interval rather than a point. It
   is the section rule and the shape of every cell, so the argument is made by
   the table itself rather than by a slogan above it.

   TYPE. Two families with a job each. A serif for display and for anything a
   person reads as a sentence; a sans for data, labels and controls. Numbers are
   always tabular — on a numbers product the figures are a design element, so
   they get to be large and they must align.

   SPACE. 4px base. Every margin and pad is a step on the scale. Nothing is
   "about 18px".

   DEPTH. Value, not shadow. One elevation exists (the stuck header) and it is
   a hairline plus a 3% wash, never a blur. Radius is 0 for structure and 3px
   for things you click. Sharp corners read as editorial; rounded ones read as
   a template.

   COLOUR. One accent, one signal. Forest marks affordance and the data itself.
   Crimson marks absence — missing, punted, lower-is-better. A colour that is
   not carrying meaning is a colour that is not used.
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* --- neutral ramp: warm, paper ---------------------------------------- */
  --n0:  #FFFFFF;
  --n1:  #FAF9F6;
  --n2:  #F2F0EA;
  --n3:  #E6E3DB;
  --n4:  #C9C5BA;
  --n5:  #8A867C;
  --n6:  #4A4842;
  --n7:  #191815;

  /* --- accent: dark forest ---------------------------------------------- */
  --a-deep: #14321F;
  --a-mid:  #2C5F41;
  --a-lite: #7FA98C;
  --a-wash: #EAEFEA;

  /* --- signal: crimson --------------------------------------------------- */
  --s-deep: #8C1F19;
  --s-mid:  #B04A40;
  --s-wash: #FAECE9;

  /* --- semantic ---------------------------------------------------------- */
  --bg:        var(--n1);
  --bg-raised: var(--n0);
  --bg-sunk:   var(--n2);
  --ink:       var(--n7);
  --ink-2:     var(--n6);
  --ink-3:     var(--n5);
  --rule:      var(--n3);
  --rule-2:    var(--n4);

  /* --- type -------------------------------------------------------------- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --t-micro:   10px;
  --t-fine:  11.5px;
  --t-body:  13.5px;
  --t-read:    15px;
  --t-lede:    19px;
  --t-h3:      17px;
  --t-h2:      24px;
  --t-h1:      34px;
  --t-hero:    56px;

  --track-caps: 0.12em;

  /* --- space: 4px base ---------------------------------------------------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;
  --s9: 96px;  --s10: 128px;

  --gutter: var(--s7);
  --row: 32px;

  /* --- shape & motion ----------------------------------------------------- */
  --r-sm: 3px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 110ms;
  --med: 200ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --n0:  #0E100E;
    --n1:  #131513;
    --n2:  #1A1D1A;
    --n3:  #262A26;
    --n4:  #3C413C;
    --n5:  #7A7F79;
    --n6:  #A8ADA6;
    --n7:  #EDEBE5;

    --a-deep: #A8C4B0;
    --a-mid:  #8FAE99;
    --a-lite: #63846E;
    --a-wash: #18211B;

    --s-deep: #DE9189;
    --s-mid:  #BE7269;
    --s-wash: #261513;

    --bg:        var(--n1);
    --bg-raised: var(--n2);
    --bg-sunk:   var(--n0);
  }
}

@media (max-width: 1080px) { :root { --gutter: var(--s5); --t-hero: 40px; --t-h1: 28px; } }
@media (max-width: 640px)  { :root { --gutter: var(--s4); --t-hero: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-body)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink);
}

a { color: var(--a-deep); text-underline-offset: 3px; transition: color var(--fast) var(--ease); }
a:hover { color: var(--a-mid); }
::selection { background: var(--a-wash); color: var(--ink); }

:where(a, button, input, select, summary):focus-visible {
  outline: 2px solid var(--a-mid);
  outline-offset: 2px;
  border-radius: 1px;
}


/* ===========================================================================
   MASTHEAD
   =========================================================================== */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding: var(--s4) var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}

/* The wordmark, carrying the mark: BBF on a backboard above a rim and net.
   An <img> rather than a CSS background, so the same file serves the header,
   the print sheet and anyone who saves the page. */
.masthead .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--serif);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.masthead .brand picture { display: block; }
.masthead .brand img {
  display: block;
  width: 26px;
  height: auto;
  transition: transform var(--med) var(--ease);
}
.masthead .brand:hover img { transform: translateY(-1px); }

.nav { display: flex; gap: var(--s5); flex-wrap: wrap; }
.nav a {
  position: relative;
  color: var(--ink-2);
  text-decoration: none;
  font-size: var(--t-body);
  white-space: nowrap;
  padding: var(--s1) 0;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--a-deep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--med) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a.on { color: var(--ink); font-weight: 600; }
.nav a.on::after { transform: scaleX(1); }
.nav .count { font-size: var(--t-fine); color: var(--a-deep); font-weight: 700; }

.league-chip {
  margin-left: auto;
  display: grid;
  gap: 1px;
  justify-items: end;
  text-decoration: none;
  white-space: nowrap;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.league-chip:hover { border-color: var(--rule-2); background: var(--bg-raised); }
.league-chip span { font-size: var(--t-fine); font-weight: 600; color: var(--ink); }
.league-chip em { font-style: normal; font-size: var(--t-micro); color: var(--ink-3); letter-spacing: 0.04em; }

/* ===========================================================================
   PAGE FRAME
   =========================================================================== */

.page { padding: 0 var(--gutter) var(--s9); }
.page.narrow { max-width: 76ch; }

.top { padding: var(--s7) 0 var(--s5); }
.top h1 { margin: 0; font-size: var(--t-h1); }
.summary { margin: var(--s2) 0 0; color: var(--ink-3); font-size: var(--t-body); }
.summary a { color: var(--ink-2); }

.lede {
  margin: 0 0 var(--s5);
  max-width: 60ch;
  font-size: var(--t-read);
  line-height: 1.62;
  color: var(--ink-2);
}
.lede strong { color: var(--ink); font-weight: 600; }

.hint { margin: 0 0 var(--s3); font-size: var(--t-fine); line-height: 1.6; color: var(--ink-3); max-width: 62ch; }
.muted { color: var(--ink-3); font-weight: 400; text-transform: none; letter-spacing: 0; }
.soft { color: var(--ink-3); }
.warn, .bad { color: var(--s-deep); }

.error {
  margin: 0 0 var(--s4);
  padding: var(--s3) 0 var(--s3) var(--s4);
  border-left: 2px solid var(--s-deep);
  font-size: var(--t-body);
}
.backlink, .footnote { margin-top: var(--s6); font-size: var(--t-fine); color: var(--ink-3); }

/* ===========================================================================
   HOME — data first. The pitch is the numbers.
   =========================================================================== */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
  padding: var(--s9) 0 var(--s8);
}
.hero-copy { max-width: 52ch; }
.hero h1 {
  margin: var(--s3) 0 var(--s4);
  font-size: var(--t-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.hero h1 em { font-style: normal; color: var(--a-deep); }
.hero p { margin: 0; font-size: var(--t-read); line-height: 1.66; color: var(--ink-2); }
.hero-actions { display: flex; gap: var(--s5); align-items: center; margin-top: var(--s6); flex-wrap: wrap; }
.hero-note { margin: var(--s4) 0 0 !important; font-size: var(--t-fine) !important; color: var(--ink-3) !important; }

/* The live slice: a real ranking, right there, doing the arguing. */
.hero-panel {
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--bg-raised);
  overflow: hidden;
}
.hero-panel header {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-sunk);
}
.hero-panel header b { font: 700 var(--t-micro)/1.4 var(--sans); text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--ink-3); }
.hero-panel header span { margin-left: auto; font-size: var(--t-fine); color: var(--ink-3); }
.hero-rows { display: grid; }
.hero-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 50px 96px;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-body);
  text-decoration: none;
  color: inherit;
  transition: background var(--fast) var(--ease);
}
.hero-row:last-child { border-bottom: none; }
.hero-row:hover { background: var(--a-wash); }
.hero-row .rank { color: var(--ink-3); font-size: var(--t-fine); }
.hero-row .who { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hero-row .who em { font-style: normal; color: var(--ink-3); font-size: var(--t-micro); letter-spacing: 0.06em; margin-left: var(--s2); }
.hero-row .val { text-align: right; font-weight: 600; }
/* The rendered cell is a number plus an svg — two elements. Wrapped so the
   row stays one grid item per column instead of spilling onto a second line. */
.hero-row .bar { display: inline-flex; align-items: center; justify-content: flex-end; white-space: nowrap; }
.hero-row .bar .cell-num { min-width: 0; }
.hero-panel footer { padding: var(--s3) var(--s4); font-size: var(--t-fine); color: var(--ink-3); }

/* ===========================================================================
   TOOL INDEX — a ruled list, not a grid of boxes
   =========================================================================== */

.index { margin-bottom: var(--s2); }
.index-head { margin: 0; padding-bottom: var(--s2); border-bottom: 1px solid var(--ink); color: var(--ink); }
.index-group { margin-top: var(--s6); }
.index-group > h3 { margin: 0 0 var(--s1); }

.tiles { display: grid; }
.tile {
  display: grid;
  grid-template-columns: minmax(0, 16ch) minmax(0, 1fr) 18px;
  gap: var(--s5);
  align-items: baseline;
  padding: var(--s4) var(--s3) var(--s4) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background var(--fast) var(--ease), padding-left var(--med) var(--ease);
}
.tile:hover { background: var(--a-wash); padding-left: var(--s3); }
.tile h4 { margin: 0; font-size: var(--t-h3); font-weight: 600; transition: color var(--fast) var(--ease); }
.tile:hover h4 { color: var(--a-deep); }
.tile p { margin: 0; font-size: var(--t-fine); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.tile::after {
  content: "→";
  align-self: center;
  color: var(--ink-3);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease);
}
.tile:hover::after { opacity: 1; transform: none; }
.tile.muted-tile h4 { color: var(--ink-3); }

.strip-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s8);
  margin: var(--s8) 0 0;
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}
.points { margin: 0; }
.points dt { font-family: var(--serif); font-size: var(--t-h3); font-weight: 600; margin-top: var(--s4); }
.points dt:first-child { margin-top: 0; }
.points dd { margin: var(--s1) 0 0; font-size: var(--t-fine); color: var(--ink-2); line-height: 1.6; max-width: 52ch; }

/* ===========================================================================
   CONTROLS
   =========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  background: var(--a-deep);
  color: var(--bg);
  text-decoration: none;
  font-size: var(--t-body);
  font-weight: 600;
  border: 1px solid var(--a-deep);
  border-radius: var(--r-sm);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { background: var(--a-mid); border-color: var(--a-mid); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn.big { padding: var(--s3) var(--s6); font-size: var(--t-read); }
.btn.ghost {
  background: none; color: var(--ink); border-color: transparent;
  padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0;
}
.btn.ghost:hover { background: none; color: var(--a-deep); border-bottom-color: var(--a-deep); }
.btn.off { background: none; color: var(--s-deep); border-color: var(--s-mid); }

.tool-link {
  font-size: var(--t-fine); color: var(--a-deep); text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid var(--rule-2);
  transition: border-color var(--fast) var(--ease);
}
.tool-link:hover { border-bottom-color: var(--a-deep); }

input, select, button, textarea { font: inherit; font-size: var(--t-fine); color: var(--ink); }

input[type="number"], input[type="text"], input[type="search"], select {
  width: 100%;
  background: var(--bg-raised);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
  padding: var(--s2) var(--s2);
  transition: border-color var(--fast) var(--ease);
}
input:hover, select:hover { border-color: var(--ink-3); }

.apply {
  padding: var(--s2) var(--s5);
  background: var(--a-deep);
  color: var(--bg);
  border: 1px solid var(--a-deep);
  border-radius: var(--r-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.apply:hover { background: var(--a-mid); }
.apply.small { padding: var(--s1) var(--s4); font-size: var(--t-fine); }
body.js .setup-actions .apply { display: none; }

.icon {
  background: none; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--ink-3); padding: 2px var(--s1); cursor: pointer; font-size: var(--t-fine);
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.icon:hover { border-color: var(--rule-2); color: var(--ink); }
.icon.x:hover { border-color: var(--s-mid); color: var(--s-deep); }

.add {
  margin-top: var(--s3); padding: var(--s2) var(--s4);
  background: none; border: 1px dashed var(--rule-2); border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; font-size: var(--t-fine);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.add:hover { border-color: var(--a-deep); border-style: solid; color: var(--a-deep); }

.presets { display: flex; flex-wrap: wrap; gap: var(--s2); }
.presets a {
  font-size: var(--t-fine); color: var(--ink-2); text-decoration: none;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.presets a:hover { color: var(--ink); border-color: var(--rule-2); }
.presets a.on { color: var(--bg); background: var(--a-deep); border-color: var(--a-deep); font-weight: 600; }

.seg { display: inline-flex; border: 1px solid var(--rule-2); border-radius: var(--r-sm); overflow: hidden; }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: block; padding: var(--s1) var(--s3);
  font-size: var(--t-fine); color: var(--ink-2);
  border-right: 1px solid var(--rule-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.seg label:last-child span { border-right: none; }
.seg span:hover { background: var(--bg-sunk); }
.seg input:checked + span { background: var(--a-deep); color: var(--bg); font-weight: 600; }

.toolbar, .searchbar {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s3) 0; margin-bottom: var(--s2);
  border-block: 1px solid var(--rule);
}
input.tool-num { width: 60px; text-align: right; }
.tool-gap { flex: 1; }
.searchbar input[type="search"] { flex: 1; min-width: 200px; max-width: 440px; padding: var(--s2) var(--s3); }

.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s4); max-width: 640px; }
.fields label, .slots li, .pair label {
  display: grid; gap: var(--s1);
  font: 700 var(--t-micro)/1.4 var(--sans); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.slots.wide { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.slots input { text-align: right; }

/* ===========================================================================
   CONTROL BAR — categories are picked here, not buried in settings
   =========================================================================== */

.controls { border-block: 1px solid var(--rule); padding: var(--s3) 0 var(--s2); margin-bottom: var(--s3); }
.control-row {
  display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap; padding: var(--s1) 0;
}
.inline-field { display: flex; align-items: center; gap: var(--s2); }
.control-hint { margin: var(--s2) 0 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.chip {
  display: inline-block;
  padding: 3px var(--s3);
  font-size: var(--t-fine);
  font-weight: 600;
  color: var(--bg);
  background: var(--a-deep);
  border: 1px solid var(--a-deep);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease);
}
.chip:hover { background: var(--a-mid); border-color: var(--a-mid); color: var(--bg); }
.chip em { font-style: normal; opacity: 0.75; margin-left: 2px; }
/* Punted: still on the page, visibly not counting. Crimson because a category
   you are not scoring is an absence from the total, and absence is crimson
   everywhere else on this site. */
.chip.off {
  background: none; color: var(--s-deep);
  border-color: var(--s-mid); border-style: dashed;
  text-decoration: line-through;
}
.chip.off:hover { background: var(--s-wash); color: var(--s-deep); }
.chip.on { background: var(--a-deep); border-color: var(--a-deep); color: var(--bg); }
/* A filter chip is neutral until chosen; a category chip is solid because it
   is on by default and its off state is the news. */
.chip.filter { background: none; color: var(--ink-2); border-color: var(--rule-2); font-weight: 400; }
.chip.filter:hover { background: var(--bg-sunk); color: var(--ink); border-color: var(--ink-3); }
.chip.filter.on { background: var(--a-deep); border-color: var(--a-deep); color: var(--bg); font-weight: 600; }
/* Not producible: in your league, contributing nothing. Neither on nor off —
   and not clickable, because toggling it would change nothing. */
.chip.na {
  background: none; color: var(--ink-3);
  border-color: var(--rule-2); border-style: dotted;
  font-weight: 400; cursor: help; text-decoration: line-through;
  text-decoration-color: var(--rule-2);
}

.chip.add-chip {
  background: none; color: var(--ink-3); border-color: var(--rule-2); border-style: dashed;
  font-weight: 400;
}
.chip.add-chip:hover { background: none; color: var(--a-deep); border-color: var(--a-deep); }

/* ===========================================================================
   CATEGORY PICKER — a list you tick, not a field you type in
   =========================================================================== */

.catalog {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s5) var(--s6);
}
.catalog-group h3 {
  margin: 0 0 var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--rule);
  font: 700 var(--t-micro)/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--ink-3);
}
.stat {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 62px;
  gap: var(--s2);
  align-items: center;
  padding: var(--s1) 0;
  cursor: pointer;
}
.stat:hover .stat-name { color: var(--a-deep); }
.stat input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--a-deep); }
.stat-name { font-size: var(--t-body); transition: color var(--fast) var(--ease); }
.stat-name em {
  font-style: normal; margin-left: var(--s1);
  font-size: var(--t-micro); color: var(--ink-3); letter-spacing: 0.06em;
}
.stat select { padding: 2px var(--s1); font-size: var(--t-fine); }
/* Not producible yet: still listed, because a category list that quietly
   omits assists looks like one that forgot them. */
.stat.na .stat-name { color: var(--ink-3); }
.stat.na select { opacity: 0.5; }

.advanced { padding-bottom: var(--s4); }
.advanced > summary {
  cursor: pointer;
  font: 700 var(--t-micro)/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--ink-3);
  padding: var(--s3) 0 var(--s2);
}
.advanced > summary:hover { color: var(--ink); }
.formula {
  display: grid;
  grid-template-columns: 1fr 1.4fr 62px 84px 84px 26px;
  gap: var(--s1);
  margin-bottom: var(--s1);
}
.formula .mono { font-family: var(--mono); font-size: var(--t-fine); }
.formula .w { text-align: right; }

/* ===========================================================================
   SECTIONS — ruled, never boxed
   =========================================================================== */

.card { background: none; border: none; border-top: 1px solid var(--rule); border-radius: 0; padding: var(--s5) 0 var(--s2); }
.card > h2 { margin: 0 0 var(--s3); }
.card.empty { padding: var(--s9) 0; border-top: none; text-align: center; }
.card.empty h2 { font-family: var(--serif); font-size: var(--t-h2); text-transform: none; letter-spacing: -0.018em; color: var(--ink); }
.card.empty p { color: var(--ink-2); max-width: 48ch; margin: var(--s3) auto; font-size: var(--t-body); }

.two-col { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--s8); align-items: start; }
.two-col.spaced { margin-top: var(--s3); }

.prose h2 { margin: var(--s7) 0 var(--s2); font-size: var(--t-h2); }
.prose h2:first-child { margin-top: var(--s2); }
.prose p { margin: 0 0 var(--s3); font-size: var(--t-read); line-height: 1.7; max-width: 64ch; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code, .hint code, .tile code, .card code {
  font-family: var(--mono); font-size: var(--t-fine);
  background: var(--a-wash); color: var(--a-deep); padding: 1px var(--s1); border-radius: var(--r-sm);
}
.warn-box { padding: var(--s3) 0 var(--s3) var(--s4); border-left: 2px solid var(--s-deep); color: var(--ink-2); }
.warn-box strong { color: var(--s-deep); }
.flagline { margin: 0 0 var(--s4); padding: var(--s2) 0 var(--s2) var(--s3); border-left: 2px solid var(--s-mid); font-size: var(--t-fine); color: var(--ink-2); }

/* --- status strip ------------------------------------------------------- */

.status { padding: var(--s3) 0 var(--s3) var(--s4); border-left: 2px solid var(--rule-2); margin-bottom: var(--s4); }
.status.verdict-complete { border-left-color: var(--a-lite); }
.status.verdict-partial, .status.verdict-unusable { border-left-color: var(--s-deep); }
.status p { margin: 0; }
.gap { font-family: var(--serif); font-size: var(--t-read); }
.gap strong { color: var(--s-deep); font-weight: 600; }
.scope { margin-top: var(--s1) !important; font-size: var(--t-fine); color: var(--ink-3); }
.more { margin-top: var(--s2); }
.more > summary { cursor: pointer; font-size: var(--t-fine); color: var(--ink-3); }
.more > summary:hover { color: var(--ink); }
.more dl { margin: var(--s3) 0 0; display: grid; grid-template-columns: max-content 1fr; gap: var(--s1) var(--s5); max-width: 70ch; }
.more dt { font-weight: 600; font-size: var(--t-fine); }
.more dd { margin: 0; font-size: var(--t-fine); color: var(--ink-2); }
.legend { margin: 0 0 var(--s3); font-size: var(--t-fine); color: var(--ink-3); }
.unscored { color: var(--s-mid); }

/* The picker, promoted out of settings and onto the page it configures. */
.picker-panel { border-block: 1px solid var(--rule); padding: var(--s4) 0 var(--s3);
  margin-bottom: var(--s4); }
.picker-head { display: flex; align-items: center; gap: var(--s4);
  flex-wrap: wrap; margin-bottom: var(--s4); }
.picker-head h2 { margin: 0; }
.picker-panel .catalog { margin-bottom: var(--s5); }
.picker-panel .control-row { padding-top: var(--s3); border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------------------
   FILTER BAR — one row of dropdowns above the table.

   Three of these cannot be driven by anything we hold, so they are drawn with
   every option present and the control disabled. That is deliberate: a control
   that is missing raises "where is it", and a control that silently does
   nothing is worse than either. Disabled plus a reason on hover is the only
   version that tells the truth. They are dimmed, not hidden, and they never
   submit — a disabled select sends no value at all.
   --------------------------------------------------------------------------- */

.filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s3) var(--s4);
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.filter-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 96px;
}
.filter-cell.wide { min-width: 132px; }
.filter-cell > span {
  font: 700 var(--t-micro)/1.4 var(--sans);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--ink-3);
  white-space: nowrap;
}
.filter-cell select { width: 100%; padding: 5px var(--s2); }
.filterbar .apply { align-self: flex-end; margin-left: auto; }

.filter-cell.blocked { cursor: help; }
.filter-cell.blocked > span {
  color: var(--ink-3);
  text-decoration: underline dotted var(--rule-2);
  text-underline-offset: 3px;
}
.filter-cell.blocked select {
  color: var(--ink-3);
  background: var(--bg-sunk);
  border-style: dashed;
  cursor: help;
  opacity: 1;            /* the UA default fades this to unreadable */
  -webkit-text-fill-color: var(--ink-3);
}

/* ===========================================================================
   THE TABLE — the point of the site
   =========================================================================== */

.table-wrap { max-height: calc(100vh - 320px); overflow: auto; }

table.players { border-collapse: collapse; width: 100%; min-width: max-content; }

.players thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--ink);
  text-align: left;
  padding: 0 var(--s3) var(--s2);
  font: 700 var(--t-micro)/1.4 var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink);
  white-space: nowrap;
}
.players thead a { color: inherit; text-decoration: none; }
.players thead a:hover { text-decoration: underline; }
.players th.off { color: var(--ink-3); }
.sub { display: block; font: 400 var(--t-micro)/1.3 var(--sans); letter-spacing: 0.04em; color: var(--ink-3); text-transform: none; }

.players tbody tr { height: var(--row); border-bottom: 1px solid var(--rule); transition: background var(--fast) var(--ease); }
.players tbody tr:hover { background: var(--a-wash); }
.players td { padding: var(--s1) var(--s3); font-size: var(--t-body); white-space: nowrap; }

th.num, td.num { width: 32px; text-align: right; color: var(--ink-3); font-size: var(--t-fine); }
td.player { min-width: 150px; }
td.player .name, td.player a.name { font-weight: 500; color: var(--ink); text-decoration: none; }
td.player a.name:hover { color: var(--a-deep); text-decoration: underline; }
td.player .team { margin-left: var(--s2); font-size: var(--t-micro); color: var(--ink-3); letter-spacing: 0.07em; }
th.pos, td.pos { font-size: var(--t-fine); color: var(--ink-3); }
th.value, td.value { width: 60px; text-align: right; font-weight: 600; }
td.value.partial { color: var(--s-mid); }
th.cat, td.cat { width: 98px; }
td.cat.off { opacity: 0.38; }
th.pick, td.pick { width: 24px; text-align: center; }
td.pick a {
  display: inline-block; width: 18px; line-height: 18px; border-radius: var(--r-sm);
  color: var(--ink-3); text-decoration: none; font-size: var(--t-body);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
td.pick a:hover { background: var(--a-deep); color: var(--bg); }
td.pick a.on { color: var(--a-deep); font-weight: 700; }

.mark {
  display: inline-block; margin-left: var(--s1); padding: 0 var(--s1);
  font-size: var(--t-micro); color: var(--ink-3);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm); cursor: help;
}
.mark.warn { color: var(--s-deep); border-color: var(--s-mid); }

tr.break td { padding: var(--s4) var(--s3) var(--s2); border-top: 1px solid var(--rule-2); }
tr.none td { color: var(--ink-3); }
tr.none .name { font-weight: 400; font-style: italic; }

/* --- distribution cells: the brand mark, repeated 1400 times ------------- */

.cell-num { display: inline-block; min-width: 32px; text-align: right; }
.cell-range { margin-left: var(--s2); font-size: var(--t-micro); color: var(--ink-3); }
/* The volume under a percentage. Quiet on purpose — it is context for the
   number above it, not a second number competing with it. */
.cell-vol { margin-left: var(--s1); font-size: var(--t-micro); color: var(--ink-3); }
.cell-z { display: inline-block; min-width: 42px; text-align: right; font-weight: 600; }
.cell-z.pos { color: var(--a-deep); }
.cell-z.neg { color: var(--s-mid); }
/* The second line of a stat-line cell: what the number is made of, and how
   good it is. Secondary to the number above it, which is what the projections
   page is for — but the colour still carries the sign. */
.cell-under { display: block; line-height: 1.2; }
.cell-under .cell-vol { margin: 0 var(--s1) 0 0; }
.cell-under .cell-z { min-width: 0; font-size: var(--t-micro); font-weight: 600; }
th.cat.wide, td.cat.wide { width: 112px; }
.cell-partial { margin-left: 2px; font-size: 9px; color: var(--s-mid); cursor: help; }
.cell-missing { display: inline-block; min-width: 32px; text-align: right; color: var(--s-mid); cursor: help; }

.cell-svg { vertical-align: middle; margin-left: var(--s2); overflow: visible; }
.cell-svg .track  { fill: var(--rule); }
.cell-svg .span   { fill: var(--a-lite); opacity: 0.45; }
.cell-svg .mid    { fill: var(--a-deep); }
.cell-svg .fill   { fill: var(--a-lite); }
.cell-svg .spark  { fill: none; stroke: var(--a-lite); stroke-width: 1.2; }
.cell-svg .strip rect { fill: var(--a-lite); opacity: 0.68; }

/* ===========================================================================
   DATA LISTS
   =========================================================================== */

table.lines { width: 100%; border-collapse: collapse; }
table.lines th {
  text-align: left;
  font: 700 var(--t-micro)/1.4 var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
  padding: 0 var(--s3) var(--s2); border-bottom: 1px solid var(--rule-2);
}
table.lines td { padding: var(--s3); border-bottom: 1px solid var(--rule); font-size: var(--t-body); }
table.lines tbody tr { transition: background var(--fast) var(--ease); }
table.lines tbody tr:hover { background: var(--bg-sunk); }
table.lines tr:last-child td { border-bottom: none; }
table.lines .r { text-align: right; }
table.lines .num { font-weight: 600; }
table.lines span.sub { display: inline-block; font-size: var(--t-fine); color: var(--ink-3); margin-left: var(--s2); }
table.lines td.soft { color: var(--ink-3); font-size: var(--t-fine); }
table.lines tr.off td { opacity: 0.5; }
table.lines td.best { background: var(--a-wash); }
table.compare th.r {
  text-align: right; text-transform: none; letter-spacing: -0.018em;
  font: 600 var(--t-read)/1.3 var(--serif); color: var(--ink);
}
table.compare th .sub { display: block; margin-top: var(--s1); font-weight: 400; }
tr.rank-row td { background: var(--bg-sunk); }
.lines.tight td { padding: var(--s2); font-size: var(--t-fine); }

.tag {
  display: inline-block; margin-left: var(--s2); padding: 0 var(--s1);
  font: 700 9.5px/1.7 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--s-mid); color: var(--s-deep); border-radius: var(--r-sm);
}
.tag.quiet { border-color: var(--rule-2); color: var(--ink-3); }
.tag.good { border-color: var(--a-lite); color: var(--a-deep); }

.standing { font-weight: 600; font-size: var(--t-fine); }
.standing.elite, .standing.strength { color: var(--a-deep); }
.standing.strong, .standing.ahead { color: var(--a-mid); }
.standing.above-average, .standing.even { color: var(--ink-2); }
.standing.below-average, .standing.behind { color: var(--s-mid); }
.standing.weak, .standing.weakness { color: var(--s-deep); }

.mates, .squad, .movers { list-style: none; margin: 0; padding: 0; }
.mates li {
  display: grid; grid-template-columns: 1fr auto 66px auto; gap: var(--s3);
  align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-body);
}
.squad li {
  display: grid; grid-template-columns: 1fr auto 18px; gap: var(--s3);
  align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--rule); font-size: var(--t-body);
}
.mates li:last-child, .squad li:last-child { border-bottom: none; }
.mates a, .squad a, .movers a { text-decoration: none; color: var(--ink); font-weight: 500; }
.mates a:hover, .squad a:hover, .movers a:hover { color: var(--a-deep); text-decoration: underline; }
.squad .drop { color: var(--ink-3); text-align: center; font-weight: 400; }
.squad .drop:hover { color: var(--s-deep); }
.bar-mini { display: block; height: 3px; background: var(--rule); border-radius: var(--r-pill); overflow: hidden; }
.bar-mini i { display: block; height: 100%; background: var(--s-mid); }
.competes { font-size: var(--t-fine); color: var(--s-deep); white-space: nowrap; }

.movers { display: grid; gap: var(--s1); margin-bottom: var(--s3); }
.movers li { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-body); }
.delta { font-weight: 600; }
.delta.up { color: var(--a-deep); }
.delta.down { color: var(--s-mid); }
.punt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--s7); }
.punt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.punt-cols h3 { margin: 0 0 var(--s2); }
.punt-cols h3.up { color: var(--a-mid); }
.punt-cols h3.down { color: var(--s-mid); }

/* ===========================================================================
   PLAYER & LEAGUE PAGES
   =========================================================================== */

.player-head { display: flex; align-items: flex-start; gap: var(--s5); padding: var(--s7) 0 var(--s2); }
.player-head h1 { margin: 0; font-size: var(--t-h1); letter-spacing: -0.03em; }
.player-actions { margin-left: auto; padding-top: var(--s2); }

.setup { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s8); align-items: start; }
.setup-form { display: grid; gap: var(--s1); }
.setup-side { position: sticky; top: var(--s9); }
.setup-actions { display: flex; gap: var(--s5); align-items: center; margin-top: var(--s6); }

.cat-table { width: 100%; border-collapse: collapse; }
.cat-table th {
  text-align: left; font: 700 var(--t-micro)/1.4 var(--sans);
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); padding: 0 var(--s2) var(--s2);
}
.cat-table th.r { text-align: right; }
.cat-table td { padding: var(--s1) var(--s2); }
.cat-table tr.off input, .cat-table tr.off select { opacity: 0.5; }
.cat-table .mono { font-family: var(--mono); font-size: var(--t-fine); }
.cat-table .w { width: 58px; text-align: right; }
.cat-table .row-actions { display: flex; gap: var(--s1); white-space: nowrap; }

/* ===========================================================================
   FOOTER
   =========================================================================== */

.foot { margin-top: var(--s9); padding: var(--s6) var(--gutter) var(--s8); border-top: 1px solid var(--ink); background: var(--bg-sunk); }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s6); }
.foot h3 { margin: 0 0 var(--s2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.foot a { font-size: var(--t-fine); color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--a-deep); text-decoration: underline; }
.foot-note { margin: var(--s6) 0 0; font-size: var(--t-fine); color: var(--ink-3); max-width: 68ch; line-height: 1.6; }

.soon {
  margin-left: var(--s1); padding: 0 var(--s1);
  font: 700 9px/1.7 var(--sans); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--s-deep); border: 1px solid var(--s-mid); border-radius: var(--r-sm);
  vertical-align: 1px;
}
.soon.big { font-size: var(--t-micro); padding: 2px var(--s2); }

h2.spaced { margin-top: var(--s5); }
.results { margin-top: var(--s1); }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

@media (max-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding: var(--s7) 0 var(--s6); }
  .two-col, .setup { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .setup-side { position: static; }
  .table-wrap { max-height: none; }
  .strip-two { gap: var(--s6); }
}

@media (max-width: 720px) {
  .masthead { flex-wrap: wrap; gap: var(--s3); padding: var(--s3) var(--gutter); }
  .nav { order: 3; width: 100%; overflow-x: auto; gap: var(--s4); padding-bottom: var(--s1); }
  .nav::-webkit-scrollbar { display: none; }
  .league-chip { margin-left: auto; }
  .tile { grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding-right: 0; }
  .tile::after { display: none; }
  .tile:hover { padding-left: 0; }
  .punt-cols { grid-template-columns: 1fr; }
  .player-head { flex-wrap: wrap; }
  .player-actions { margin-left: 0; padding-top: var(--s3); }
  .foot { padding-bottom: var(--s7); }
}

/* ===========================================================================
   PRINT
   =========================================================================== */

body.print { padding: 0 var(--s5) var(--s6); }
body.print .status { margin: var(--s4) 0; }
body.print .table-wrap { max-height: none; overflow: visible; }
body.print .players thead th { position: static; }

@media print {
  :root {
    --bg: #fff; --bg-raised: #fff; --bg-sunk: #fff;
    --ink: #000; --ink-2: #333; --ink-3: #666;
    --rule: #ddd; --rule-2: #999;
    --a-deep: #14321F; --a-mid: #2C5F41; --a-lite: #7FA98C; --a-wash: #F2F5F2;
    --s-deep: #8C1F19; --s-mid: #B04A40;
  }
  body { font-size: 9pt; }
  .masthead, .foot, .toolbar, .searchbar, .setup, .more, script { display: none !important; }
  .status { page-break-inside: avoid; page-break-after: avoid; }
  .table-wrap { max-height: none; overflow: visible; }
  .players thead th { position: static; }
  .players tbody tr { height: auto; }
  .players tbody tr:hover { background: none; }
  thead { display: table-header-group; }
  tr { page-break-inside: avoid; }
  .reveal { opacity: 1 !important; transform: none !important; }
}