@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&family=Nothing+You+Could+Do&family=Oswald:wght@500;600;700;800&display=swap');

:root{
  /* ---------------------------------------------------------------------
     Press Box. Cool grey page, pure white cards. Elevation keeps the logic
     the old dark theme had — "raised" still means lighter — so a card is cut
     out of the page rather than drawn on top of it.

     NOTE ON NAMES: --white is the primary TEXT colour and --ink is the PAGE
     background. Both names date from the dark theme and now say the opposite
     of what they hold. They are kept because renaming them touches ~200
     declarations across six stylesheets; the values are what matter.

     Every text token clears 4.5:1 and every border token 3:1 against all
     three grounds (#FFFFFF card, #F1F3F6 page, #ECEFF3 hover fill).
     --------------------------------------------------------------------- */
  --lime:#C8FF1E;                 /* THE brand colour — a FILL, never a letterform */
  --lime-dim:#F2FBD2;             /* tinted fill: row hover, callout backgrounds */
  --lime-ring:#C6E27A;            /* decorative border on a lime-tinted element */
  --on-lime:#05080d;              /* text ON a lime fill — 16.98:1 */
  /* Lime does three jobs and on a light ground they need three values.
     #C8FF1E is 1.06:1 on white, so it cannot carry letters at all. */
  --lime-text:#454C5A;            /* accent TEXT — Slate. 8.63 / 7.76 / 7.48 */
  --lime-line:#6F8F00;            /* accent BORDER + focus ring. 3.75 / 3.37 / 3.25 */

  --white:#0E1116;                /* primary text.  18.91 / 17.01 / 16.40 */
  --prose:#2E333D;                /* body paragraphs. 12.67 / 11.40 / 10.99 */
  --mute:#545A69;                 /* secondary text, table headers.  5.98 */
  --mute-dim:#656B7A;             /* tertiary text, result counts.   4.62 */

  --ink:#F1F3F6;                  /* page background */
  --ink-2:#FFFFFF;                /* dropdowns / mobile nav — floats above the page */
  --surface:#FFFFFF;              /* cards, panels, inputs */
  --raised:#ECEFF3;               /* hover fill, logo tiles, secondary buttons */

  --line:rgba(18,22,33,.13);
  --line-soft:rgba(18,22,33,.06);
  --line-strong:#85878D;          /* borders a user clicks or types into. 3.11 */
  --zebra:rgba(18,22,33,.035);

  --gain:#147235;                 /* 5.22 */
  --loss:#B4322B;                 /* 5.31 */
  --avoid:#9E1B14;                /* 6.95 */
  --warn:#8A5A00;                 /* 5.14 */
  --ok:#5F6673;                   /* 5.01 */
  --info:#0E6FA6;                 /* 4.74 — the "starter as a chip" hue */
  /* target/ok/fade is a semantic triad, not a brand accent: hanging target off
     --lime-text made it collapse into the same grey as ok. */
  --verdict-target:var(--gain);

  --header-bg:rgba(255,255,255,.93);
  --sticky-bg:rgba(241,243,246,.95);
  --shadow:rgba(18,22,33,.13);

  /* tier rails — each hue darkened until it clears 4.6:1 on all three grounds */
  --tier-1:#5A730D; --tier-2:#367192; --tier-3:#A15726;
  --tier-4:#7A5CA8; --tier-5:#227953; --tier-6:#6A6A6F;
  /* injured — a slate that reads as "unavailable" rather than as a bad call.
     Deliberately not --avoid (nobody faded him) and not --tier-6 (that grey is
     Desperate Start, a tier you can still start from). 6.19:1 on --raised. */
  --injured:#455A6E;

  --radius:12px;
  --radius-lg:18px;
  --max:1240px;
  --header-h:64px;
  color-scheme:light;             /* scrollbars, form controls, autofill */
}


*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:'Inter',system-ui,sans-serif;
  /* light-on-dark text blooms ~half a weight step and is smoothed to
     compensate; on a light ground the same setting renders it anaemic */
  -webkit-font-smoothing:auto;
  -moz-osx-font-smoothing:auto;
  min-height:100vh;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea,select{font-family:inherit}
button{cursor:pointer}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* focus visibility everywhere — a real interface has this */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,th button:focus-visible{
  outline:2px solid var(--lime-line);
  outline-offset:2px;
  border-radius:4px;
}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--mute);
  font-size:11px;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mute);flex:0 0 auto}
.eyebrow.accent{color:var(--lime-text)}
.eyebrow.accent::before{background:var(--lime)}

.display{
  font-family:'Anton',Impact,sans-serif;
  text-transform:uppercase;
  line-height:.96;
  letter-spacing:.005em;
  margin:10px 0;
  font-size:40px; /* hard floor — Anton never ships below this */
}
/* At display size any darkened chartreuse reads as olive, because large areas
   of dark colour lose apparent chroma. So the word is not coloured — it is
   highlighted. Ink on lime is ~17:1 and the lime stays fully saturated. */
.display .lime{
  color:var(--on-lime);
  background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 88%/100% .40em;
  padding:0 .07em;
}

.subhead{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin:0 0 8px;
  color:var(--white);
}

.meta-line{
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.1em;
  color:var(--mute);
  font-size:12.5px;
  font-weight:700;
  text-transform:uppercase;
}

.prose{color:var(--prose);font-size:15px;line-height:1.65}
.prose.small{font-size:13.5px;color:var(--mute)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  height:var(--header-h);
  background:var(--header-bg);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
}
.brand-mark{display:flex;align-items:center;gap:11px}
.brand-mark .badge{
  width:36px;height:36px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--lime-ring);
}
.brand-mark .badge img{width:100%;height:100%;object-fit:cover}
.brand-mark .txt .name{font-family:'Oswald',system-ui,sans-serif;font-weight:700;font-size:17px;line-height:1}
.brand-mark .txt .sub{font-family:'Barlow Condensed',sans-serif;letter-spacing:.28em;color:var(--mute);font-size:9.5px;margin-top:3px;font-weight:700}

.main-nav{display:flex;align-items:center;gap:2px}
.main-nav a{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  letter-spacing:.06em;
  font-size:14px;
  text-transform:uppercase;
  color:var(--mute);
  padding:9px 14px;
  border-radius:8px;
  border-bottom:2px solid transparent;
  transition:color .15s, background .15s, border-color .15s;
}
.main-nav a:hover{color:var(--white);background:var(--raised)}
.main-nav a.active{color:var(--white);border-color:var(--lime-line)}

/* Small inline status tag — e.g. "Beta" next to a nav link or eyebrow label. Mute +
   hairline border on purpose: lime stays reserved for primary CTAs/emphasis, not status
   chrome. Transparent background so it doesn't fight .main-nav a:hover's --raised fill. */
.tag-beta{
  display:inline-block;vertical-align:middle;flex:0 0 auto;
  font-family:'Barlow Condensed',sans-serif;font-weight:900;
  font-size:9.5px;letter-spacing:.16em;line-height:1;text-transform:uppercase;
  color:var(--mute);background:transparent;
  border:1px solid var(--line);border-radius:4px;padding:4px 5px 3px;
}
.main-nav a .tag-beta{margin-left:6px;transform:translateY(-1px)}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:38px;height:38px;color:var(--white);align-items:center;justify-content:center}
.nav-toggle svg{width:19px;height:19px}

.header-actions{display:flex;align-items:center;gap:6px}
.icon-social{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--mute);border:1px solid var(--line-soft);
  transition:color .15s, border-color .15s, background .15s;
}
.icon-social svg{width:16px;height:16px}
.icon-social:hover{color:var(--lime-text);border-color:var(--lime-ring);background:var(--lime-dim)}

/* Raised from 840px: the 7-item nav needed ~658px and the header only has room
   for it above ~870px, so 841-869px rendered the desktop nav with nowhere to
   put it and pushed the social icons off-screen. Measured, not guessed. */
@media (max-width:880px){
  .main-nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    background:var(--ink-2);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    padding:10px 20px 18px;
    gap:2px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .15s, transform .15s;
  }
  .main-nav.open{opacity:1;transform:translateY(0);pointer-events:auto}
  .main-nav a{text-align:center;padding:13px;border-bottom:none;border-left:2px solid transparent}
  .main-nav a.active{border-left-color:var(--lime-line);border-bottom-color:transparent}
  .nav-toggle{display:inline-flex}
}

/* ---------- Buttons / pills ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:14px;
  padding:12px 22px;border-radius:999px;border:1px solid transparent;
  transition:transform .12s, background .12s, border-color .12s;
}
.btn:hover{transform:translateY(-1px)}
/* a lime fill has a ~1.1:1 edge against the page, so the control's own shape
   stops identifying it (WCAG 1.4.11) — the hairline gives it back */
.btn-lime{background:var(--lime);color:var(--on-lime);border-color:var(--lime-line)}
.btn-lime:hover{background:#d7ff54}
.btn-outline{background:transparent;color:var(--white);border-color:var(--line)}
.btn-outline:hover{border-color:var(--mute)}
.btn-ghost{background:var(--surface);color:var(--white);border-color:var(--line-soft);font-size:12.5px;padding:9px 16px}
.btn-ghost:hover{background:var(--raised)}
.btn-danger-ghost{background:var(--surface);color:var(--loss);border-color:var(--line-soft);font-size:12.5px;padding:9px 16px}
.btn-danger-ghost:hover{border-color:var(--avoid)}
.btn-social{background:var(--raised);color:var(--white);border-color:var(--line)}
.btn-social svg{width:18px;height:18px;flex:0 0 auto}
.btn-social:hover{border-color:var(--lime-line);color:var(--lime-text);background:var(--lime-dim)}

/* ---------- Segmented control (replaces slide-style pill tabs) ---------- */
.seg{
  display:inline-flex;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:10px;
  padding:3px;
  gap:2px;
}
.seg-btn{
  background:transparent;
  border:none;
  color:var(--mute);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  letter-spacing:.04em;
  font-size:13.5px;
  text-transform:uppercase;
  padding:8px 15px;
  border-radius:7px;
  transition:background .12s, color .12s;
}
.seg-btn:hover{color:var(--white)}
.seg-btn[aria-selected="true"]{background:var(--lime);color:var(--on-lime);box-shadow:inset 0 0 0 1px var(--lime-line)}
/* A filter combination with nothing behind it. Greyed and unclickable rather
   than removed, so the reader can still see the category exists. */
.seg-btn:disabled{color:var(--mute-dim);opacity:.45;cursor:not-allowed}
.seg-btn:disabled:hover{color:var(--mute-dim)}

/* ---------- Toolbar ---------- */
.toolbar{
  position:sticky;
  top:var(--header-h);
  z-index:40;
  background:var(--sticky-bg);
  border-bottom:1px solid var(--line-soft);
  padding:14px 0;
  margin-bottom:0;
}
.toolbar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:space-between}
.toolbar-group{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.field{position:relative;display:flex;align-items:center}
.field input[type="search"],.field input[type="text"]{
  background:var(--surface);border:1px solid var(--line-strong);color:var(--white);
  border-radius:8px;padding:9px 12px 9px 34px;font-size:13.5px;width:210px;outline:none;
}
.field input[type="search"]:focus,.field input[type="text"]:focus{border-color:var(--lime-line)}
.field svg{position:absolute;left:10px;width:15px;height:15px;color:var(--mute);pointer-events:none}
.check-toggle{display:flex;align-items:center;gap:7px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.04em;font-size:13px;color:var(--mute);text-transform:uppercase;cursor:pointer}
.check-toggle input{accent-color:var(--lime-line);width:15px;height:15px}
.results-count{font-family:'Barlow Condensed',sans-serif;color:var(--mute-dim);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.select-inline{background:var(--surface);border:1px solid var(--line-strong);color:var(--white);border-radius:8px;padding:8px 10px;font-size:13px;font-family:'Barlow Condensed',sans-serif;font-weight:700}

/* ---------- Hero (compact — data lives above the fold, not a cover slide) ---------- */
.hero{padding:30px 0 22px;position:relative}
.hero .display{font-size:clamp(30px,4.2vw,48px)}
.hero p.lead{color:var(--prose);font-size:15.5px;line-height:1.6;max-width:600px;margin:12px 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

.home-hero{padding:36px 0 26px;position:relative;overflow:hidden}
/* The headline gives up roughly a third of its size so the rack clears the fold. Anton is
   the site's display face and has a hard 40px floor of its own (see .display), so the clamp
   floor stays above it and only the ceiling comes down. */
.home-hero .display{font-size:clamp(34px,5vw,54px)}
.home-hero .lead{font-size:16px;margin:10px 0 0}
@media (max-width:700px){
  /* The one element that buys nothing on a phone: the rack says the same thing, four times,
     more specifically. */
  .home-hero .lead{display:none}
}
.home-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 14% 0%, rgba(255,70,70,.10), transparent 26%),
    radial-gradient(circle at 88% 8%, rgba(39,103,255,.12), transparent 26%),
    radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 1.5px);
  background-size:auto,auto,50px 50px;
  opacity:.30;
  mix-blend-mode:multiply;
}
.home-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(circle at 50% -10%, rgba(200,255,30,.06), transparent 40%);
}

.section-block{padding:6px 0 56px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.section-head .display{font-size:clamp(26px,3vw,40px);margin:6px 0 0}

/* ---------- Home: preview + movers ---------- */
.home-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start}
@media (max-width:900px){.home-grid{grid-template-columns:1fr}}

.panel{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:22px}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.panel-head h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:16px;margin:0}
.panel-head a{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.06em;font-size:12.5px;color:var(--lime-text);text-transform:uppercase}

.preview-list{display:flex;flex-direction:column}
.preview-row{
  display:grid;grid-template-columns:26px 30px 1fr auto;align-items:center;gap:10px;
  padding:9px 4px;border-bottom:1px solid var(--line-soft);
}
.preview-row:last-child{border-bottom:none}
.preview-row .rk{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:15px;color:var(--mute)}
.preview-row .team-logo{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;overflow:hidden;background:var(--raised);flex:0 0 auto}
.preview-row .nm{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preview-row .dl{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px}

/* Grid and flex items default to min-width:auto, so they refuse to shrink below
   their content and push the whole page wider instead of letting the ellipsis
   on .nm do its job — the home panels overflowed by ~25px on every phone.
   min-width:0 down the chain is what actually lets the text truncate. */
.home-grid > .panel{min-width:0}
.movers-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}
.movers-col{min-width:0}
.mover-row{min-width:0}
.mover-row .nm{min-width:0}
.preview-row .nm{min-width:0}
/* Two mover columns side by side stop being readable once each is ~140px. */
@media (max-width:430px){.movers-cols{grid-template-columns:1fr;gap:10px}}
.movers-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.08em;font-size:11.5px;text-transform:uppercase;margin:0 0 8px;color:var(--mute)}
.movers-col.up h4{color:var(--gain)}
.movers-col.down h4{color:var(--loss)}
.mover-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-family:'Barlow Condensed',sans-serif}
.mover-row:last-child{border-bottom:none}
.mover-row .nm{font-weight:800;font-size:13.5px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mover-row .dl{font-weight:900;font-size:12.5px;flex:0 0 auto}
.mover-row.up .dl{color:var(--gain)}
.mover-row.down .dl{color:var(--loss)}

.adp-source{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-soft);color:var(--mute)}
.adp-source a{text-decoration:underline}

.soon-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;margin-left:3px;vertical-align:middle}

.freshness{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft);color:var(--mute);font-family:'Barlow Condensed',sans-serif;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- START HERE rack ----------
   Four tiles, not four buttons. Buttons cannot rank four things here: lime is a fill-only
   brand colour (1.06:1 on white), so a button row is one lime pill and three identical
   outlines, and at phone width they stack into a wall of sameness. A tile ranks by fill,
   by order and by a line of copy, and it degrades to a 60px row with the SAME markup —
   only the media query below changes, no duplicate DOM and no JS.

   Deliberately built on .board-card's conventions (--radius-lg, --line-soft, --lime-text)
   rather than a third card pattern to maintain. */
.rack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rack-label{display:block;margin-bottom:10px}
.rack-tile{
  display:flex;flex-direction:column;min-height:172px;padding:18px 18px 16px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  text-decoration:none;transition:background .12s,border-color .12s,transform .12s;
}
.rack-tile .rt-label{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime-text);line-height:1;margin-bottom:8px;
}
.rack-tile .rt-title{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;line-height:.98;
  letter-spacing:.005em;text-transform:uppercase;color:var(--white);
}
.rack-tile .rt-desc{font-size:13.5px;line-height:1.5;color:var(--mute);margin:8px 0 0}
/* margin-top:auto pins every action line to the tile floor, so all four align no matter how
   long the description runs — that alignment is what makes the row read as one object. */
.rack-tile .rt-go{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:6px;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--lime-text);
}
.rack-tile .rt-arrow{transition:transform .12s}
.rack-tile:hover{background:var(--raised);border-color:var(--line)}
.rack-tile:hover .rt-arrow{transform:translateX(3px)}
.rack-tile:active{transform:translateY(1px)}
.rack-tile:focus-visible{outline:3px solid var(--white);outline-offset:2px}
@media (max-width:700px){
  .rack{grid-template-columns:1fr;gap:8px}
  /* Grid, not row-flex. In a row-flex container `order` moves the label to the RIGHT of the
     title, not underneath it — which reads as "SLEEPERS → Most read" and loses the sub-line
     entirely. A two-column grid puts title over label in column 1 and spans the arrow down
     column 2, with the same DOM as the desktop tile. */
  .rack-tile{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    row-gap:2px;column-gap:12px;min-height:60px;padding:11px 14px;
  }
  .rack-tile .rt-title{grid-column:1;grid-row:1;font-size:19px}
  /* The micro-label becomes the sub-line under the title, so a row a third of the height
     still answers "when do I need this?". */
  .rack-tile .rt-label{
    grid-column:1;grid-row:2;
    font-family:'Inter',sans-serif;font-weight:400;font-size:11.5px;line-height:1.25;
    letter-spacing:normal;text-transform:none;color:var(--mute);margin:0;
  }
  .rack-tile .rt-desc{display:none}
  .rack-tile .rt-go{grid-column:2;grid-row:1 / span 2;margin:0;padding-top:0;font-size:16px}
  /* The label text is CLIPPED, not display:none — a bare arrow with no accessible name is a
     real link-purpose failure, and keeping the words costs nothing. */
  .rack-tile .rt-go-text{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
  }
}
/* Two of the four freshness facts are also destinations — this is how Rankings and the Draft
   Board buy back presence after the hero buttons go, for two anchor tags and no new pixels. */
.freshness a{color:var(--lime-text);text-decoration:none;border-bottom:1px solid rgba(69,76,90,.45)}
.freshness a:hover{color:var(--white);border-bottom-color:var(--white)}
.section-dek{margin:6px 0 0;color:var(--mute);font-size:14.5px}

.board-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:20px}
@media (max-width:640px){.board-grid{grid-template-columns:1fr}}
.board-card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:22px;transition:border-color .15s, transform .15s;
}
.board-card:hover{border-color:var(--lime-ring);transform:translateY(-2px)}
.board-card .tag{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.12em;font-size:11px;color:var(--lime-text);text-transform:uppercase}
.board-card h3{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;font-size:20px;margin:8px 0 10px;letter-spacing:.01em}
.board-card p{color:var(--mute);font-size:13.5px;line-height:1.55;margin:0 0 14px}
.board-card .mini-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.board-card .mini-row{display:flex;align-items:center;gap:8px;font-family:'Barlow Condensed',sans-serif;font-size:13px}
.board-card .mini-row .n{color:var(--mute-dim);font-weight:800;width:16px}
.board-card .mini-row .t{font-weight:800;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-card .go{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.1em;font-size:12.5px;color:var(--lime-text);display:inline-flex;align-items:center;gap:6px}

/* ---------- Data table (rankings) ---------- */
/* No overflow:hidden here — an overflow value other than visible makes this
   the sticky positioning container instead of the viewport, which breaks
   the thead's position:sticky (it stops tracking page scroll). Corners are
   rounded on the actual first/last cells instead. */
.table-wrap{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg)}
table.data-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.data-table thead th:first-child{border-top-left-radius:var(--radius-lg)}
.data-table thead th:last-child{border-top-right-radius:var(--radius-lg)}
.data-table tbody tr:last-child td:first-child{border-bottom-left-radius:var(--radius-lg)}
.data-table tbody tr:last-child td:last-child{border-bottom-right-radius:var(--radius-lg)}
.data-table thead th{
  position:sticky;top:var(--thead-top, 121px);z-index:20;
  background:var(--raised);
  border-bottom:1px solid var(--line);
  text-align:left;padding:0;
}
/* .th-label is the same header type for a column that doesn't sort — a bare
   <th> would fall back to body text and sit off the cell padding. */
.data-table thead th button,.data-table thead th .th-label{
  width:100%;background:none;border:none;color:var(--mute);
  font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.08em;font-size:12px;text-transform:uppercase;
  padding:12px 14px;display:flex;align-items:center;gap:6px;text-align:left;
}
.data-table thead th button:hover{color:var(--white)}
.data-table thead th[aria-sort="ascending"] button,.data-table thead th[aria-sort="descending"] button{color:var(--lime-text)}
.data-table thead th .caret{width:9px;height:9px;opacity:.5}
.data-table thead th[aria-sort] .caret{opacity:1}
.data-table thead th.num button,.data-table thead th.num .th-label{justify-content:flex-end}
.data-table th.num,.data-table td.num{text-align:right}

.data-table tbody tr{border-bottom:1px solid var(--line-soft);cursor:pointer}
.data-table tbody tr:nth-child(even){background:var(--zebra)}
.data-table tbody tr:hover{background:var(--lime-dim)}
.data-table tbody tr.expanded{background:var(--lime-dim)}
.data-table td{padding:10px 14px;vertical-align:middle}
.data-table td.rank{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:17px;color:var(--white);width:44px}
.data-table td.player{min-width:0}
.player-cell{display:flex;align-items:center;gap:10px;min-width:0}
.player-cell .team-logo{width:30px;height:30px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden}
.player-cell .team-logo img{width:100%;height:100%;object-fit:contain;padding:3px}

/* Fallback badge if a hotlinked team logo fails to load — see
   window.__logoFallback in app.js. Sits inside any .team-logo container,
   which is already centered via display:grid;place-items:center. */
.logo-fallback{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.02em;
  font-size:10px;text-transform:uppercase;
  /* This badge lands on three different grounds — a bare tile, a --raised tile,
     and an inline team brand colour — so it cannot inherit any of them and pass.
     White on NYJ (#FFFFFF) is 1:1; white on a --raised tile is 1.15:1. It gets
     its own constant dark substrate instead, which is the only value that works
     against all 32 team colours at once. */
  color:#fff;background:#1E2430;
  width:100%;height:100%;display:grid;place-items:center;border-radius:inherit;
}
.player-cell .who{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.player-cell .name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-cell .sub{font-family:'Barlow Condensed',sans-serif;color:var(--mute);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.pos-chip{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.06em;line-height:1;
  color:var(--ink);background:var(--mute);padding:2px 7px;border-radius:5px;display:inline-block;flex:0 0 auto;
}
.data-table td.delta{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13px;white-space:nowrap}
.data-table td.delta.gain{color:var(--gain)}
.data-table td.delta.loss{color:var(--loss)}
.data-table td.delta.none{color:var(--mute-dim)}
.data-table td.expand-toggle{width:24px;color:var(--mute);text-align:center}

.detail-row td{background:var(--raised);padding:0}
.detail-row .detail-inner{padding:14px 14px 16px 58px;display:flex;gap:28px;flex-wrap:wrap}
.detail-item .k{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.1em;font-size:10.5px;color:var(--mute);text-transform:uppercase;margin-bottom:4px}
.detail-item .v{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px}
.detail-item .v.target{color:var(--lime-text)}
.detail-item .v.avoid{color:var(--avoid)}
.detail-empty{color:var(--mute-dim);font-size:12.5px;font-style:italic}

@media (max-width:640px){
  .player-cell .team-logo{width:26px;height:26px}
  .data-table td,.data-table thead th button,.data-table thead th .th-label{padding-left:10px;padding-right:10px}
  .detail-row .detail-inner{padding-left:16px}
  /* Plain "Team" column (full franchise name, e.g. "Jacksonville Jaguars") has
     no width cap and no truncation, so on narrow phones it forces the table
     past the viewport with no scroll affordance. It's redundant with the
     abbreviation already shown under the player name, so drop it — same
     pattern the draft board table already uses for its Team/Pos column. */
  .data-table th:nth-child(3),.data-table td:nth-child(3){display:none}
}

/* ---------- Per-slot read (Roster Report + Grade My Draft) ----------
   Shared because both tools rate a starting spot with the same ladder from
   value-model.js. Verdict is carried by the left border AND the badge text,
   never colour alone. */
.rr-slots{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.rr-slot{
  display:grid;grid-template-columns:62px 1fr 82px;align-items:center;gap:12px;
  padding:10px 12px;border-radius:8px;background:var(--raised);
  border:1px solid var(--line-soft);border-left:3px solid var(--mute);
}
/* Verdict is carried by the left border AND the badge text, never colour alone. */
.rr-slot.elite{border-left-color:var(--gain)}
.rr-slot.solid{border-left-color:var(--mute)}
/* Fair sits between Solid and Weak: the same warning hue, held back, so the
   ladder reads as one scale rather than two unrelated states. On the dark theme
   this was a 42%-alpha wash; over a light row the same alpha resolves to 1.23:1
   against the row and the rung simply disappears, so it is a flat value now. */
.rr-slot.fair{border-left-color:#BFA05A}
.rr-slot.weak{border-left-color:var(--warn)}
.rr-slot.critical{border-left-color:var(--loss)}
.rr-slot.empty{border-left-color:var(--avoid);background:rgba(226,75,74,.07)}
.rr-slot .rs-label{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:12.5px;letter-spacing:.08em;
  color:var(--lime-text);text-transform:uppercase;
}
.rr-slot .rs-who{min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rr-slot .rs-name{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14.5px;text-transform:uppercase;
  color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rr-slot .rs-name.none{color:var(--avoid)}
.rr-slot .rs-delta{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:13.5px;
  font-variant-numeric:tabular-nums;text-align:right;
}
.rr-slot .rs-delta.up{color:var(--gain)}
.rr-slot .rs-delta.down{color:var(--loss)}
.rr-slot .rs-verdict{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;text-align:right;color:var(--mute);
}
.rr-slot.elite .rs-verdict{color:var(--gain)}
/* 2.42:1 on the row as #A99A6A — a dark-theme value that never got retuned.
   Darkened to 5.01:1, still a rung lighter in hue than Weak's #8A5A00, and
   the word plus the border carry the distinction anyway. */
.rr-slot.fair .rs-verdict{color:#79632B}
.rr-slot.weak .rs-verdict{color:var(--warn)}
.rr-slot.critical .rs-verdict,.rr-slot.empty .rs-verdict{color:var(--loss)}
/* The empty row carries a red wash, which costs the tertiary text just enough
   to drop the 'vs avg' bar to 4.26:1. It steps up one level on this row only. */
.rr-slot.empty .rs-bar{color:var(--mute)}

/* The bar a starting slot is measured against, shown beside the player so the
   per-slot number reads as "your WR10 vs an average WR6" rather than as a
   verdict on the player himself. */
.rs-bar {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute-dim); white-space: nowrap;
}

@media (max-width:640px){
  .rr-slot{grid-template-columns:46px 1fr 62px;gap:8px;padding:9px 10px}
}

/* ---------- Tiers ---------- */
.tier-rail{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;
  position:sticky;top:calc(var(--header-h) + 14px);z-index:15;
}
.tier-rail button{
  background:var(--surface);border:1px solid var(--line);color:var(--mute);
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.06em;
  padding:7px 12px;border-radius:8px;display:flex;align-items:center;gap:7px;text-transform:uppercase;
}
.tier-rail button:hover{color:var(--white)}
.tier-rail .dot{width:8px;height:8px;border-radius:50%;background:var(--tier-c,var(--lime))}
.tier-rail .ct{color:var(--mute-dim);font-weight:700}

.tier-board{display:block}
@media (min-width:1000px){
  /* auto-fill/minmax instead of repeat(tiers.length,1fr) — column width is
     driven by what a tier card needs (~300px for the longest titles), not by
     how many tiers exist. Scales cleanly from 4 tiers (TE) to 17+ (Overall). */
  .tier-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:start}
  .tier-board .tier-block{margin-bottom:0;height:100%}
}

.tier-block{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-lg);
  padding:18px 18px 16px;
  margin-bottom:16px;
  position:relative;
  overflow:hidden;
  scroll-margin-top:140px;
}
.tier-block::before{
  content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--tier-c, var(--lime));
}
.tier-head{margin-bottom:14px}
.tier-head .tag{font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.14em;font-size:11px;color:var(--tier-c,var(--lime));text-transform:uppercase;margin-bottom:8px}
.tier-count{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.06em;font-size:11.5px;
  color:var(--white);background:var(--raised);border:1px solid var(--line);padding:4px 10px;border-radius:999px;display:inline-block;
}
.tier-players{display:flex;flex-direction:column;gap:6px}
/* Drop-off-to-next-tier indicator — lives at the bottom of the card it describes
   (this tier's players, then what happens after them) so it reads at a glance
   without disturbing the multi-column tier grid. Shape + color both carry the
   signal: solid mute bar (mild) < solid red bar (moderate) < hazard-striped bar
   with a warning icon (steep). */
.tier-dropoff{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-soft)}
.tier-dropoff__bar{flex:0 0 26px;height:4px;border-radius:2px;background:var(--mute)}
.tier-dropoff__label{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dim)}
.tier-dropoff--falloff .tier-dropoff__bar{background:var(--loss)}
.tier-dropoff--falloff .tier-dropoff__label{color:var(--loss)}
.tier-dropoff--cliff{border-top-color:var(--avoid)}
.tier-dropoff--cliff .tier-dropoff__bar{height:5px;background:repeating-linear-gradient(90deg,var(--avoid) 0 6px,transparent 6px 10px)}
.tier-dropoff--cliff .tier-dropoff__label{color:var(--avoid);font-size:11.5px}
.tier-dropoff--cliff .tier-dropoff__label::before{content:"⚠ "}
.tier-chip{
  display:flex;align-items:center;gap:9px;
  background:var(--raised);
  border:1px solid var(--line-soft);
  border-radius:9px;
  padding:8px 10px;
  transition:opacity .15s;
}
.tier-chip:hover{border-color:rgba(255,255,255,.18)}
.tier-chip .team-logo{width:24px;height:24px;border-radius:6px;overflow:hidden;background:var(--ink);display:grid;place-items:center;flex:0 0 auto}
.tier-chip .team-logo img{width:100%;height:100%;object-fit:contain;padding:3px}
.tier-chip .name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.01em;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier-chip .pos{font-family:'Barlow Condensed',sans-serif;color:var(--mute);font-size:10px;letter-spacing:.08em;flex:0 0 auto}
.tier-chip .link-out{color:var(--mute-dim);flex:0 0 auto}
.tier-chip .link-out:hover{color:var(--lime-text)}

@media print{
  .site-header,.site-footer,.toolbar,.tier-rail,.hero-actions,.nav-toggle,.board-toolbar,.round-rail-wrap,.freshness{display:none!important}
  body{background:#fff;color:#000}
  .hero{padding:8px 0}
  .display{color:#000}
  .eyebrow,.eyebrow::before{color:#444}
  .tier-board{display:block!important}
  .tier-block{background:#fff;border:1px solid #999;break-inside:avoid;margin-bottom:10px;color:#000}
  .tier-block::before{background:#000}
  .tier-head .tag{color:#000}
  .tier-chip{background:#f4f4f4;border-color:#ccc;color:#000}
  .tier-chip .name{color:#000}
  .tier-chip .team-logo{display:none}
  .tier-dropoff{border-top-color:#999}
  .tier-dropoff__bar{background:#999!important}
  .tier-dropoff__label{color:#333!important}
}

/* ---------- Draft board ---------- */
.board-toolbar{
  position:sticky;top:var(--header-h);z-index:40;
  background:var(--sticky-bg);
  border-bottom:1px solid var(--line-soft);padding:14px 0;
}
.board-toolbar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}

.board-layout{display:block}
@media (min-width:1000px){
  .board-layout{display:grid;grid-template-columns:280px 1fr;gap:22px;align-items:start}
}

.round-rail-wrap{margin-bottom:16px}
@media (min-width:1000px){
  .round-rail-wrap{
    position:sticky;top:calc(var(--header-h) + 68px);
    max-height:calc(100vh - var(--header-h) - 90px);overflow-y:auto;
    margin-bottom:0;
  }
}
.round-rail{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
@media (min-width:1000px){.round-rail{flex-direction:column;gap:4px;overflow:visible}}
.rail-item{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--line-soft);border-left:3px solid transparent;
  border-radius:9px;padding:10px 14px;min-width:130px;text-align:left;
  color:var(--white);
}
@media (min-width:1000px){.rail-item{min-width:0;width:100%}}
.rail-item:hover{border-color:var(--line)}
.rail-item.active{background:var(--raised);border-left-color:var(--lime-line)}
.rail-item .rn{font-family:'Anton',Impact,sans-serif;font-size:30px;color:var(--lime-text);flex:0 0 auto;min-width:36px;line-height:1}
.rail-item .rc{font-family:'Barlow Condensed',sans-serif;font-weight:600;color:var(--mute);font-size:12px;letter-spacing:.06em;white-space:nowrap}

.round-detail{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:24px}
.round-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.round-detail-head .rnum{font-family:'Anton',Impact,sans-serif;font-size:52px;color:var(--lime-text);line-height:1}
.round-detail-head .rmeta{flex:1;min-width:200px}
.round-detail-head .rmeta .rlabel{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.08em;color:var(--mute)}

.verdict-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.vchip{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.08em;padding:6px 12px;border-radius:999px;border:1px solid currentColor}
.vchip.dim{opacity:.35}
.vchip.pick-chip{color:var(--mute);border-color:var(--line)}

.your-pick-note{
  display:flex;align-items:center;gap:10px;background:var(--lime-dim);border:1px solid var(--lime-ring);
  border-radius:10px;padding:10px 14px;margin-bottom:16px;font-family:'Barlow Condensed',sans-serif;font-size:13px;color:var(--white);
}
.your-pick-note b{color:var(--lime-text)}

table.player-table{width:100%;border-collapse:collapse;margin-bottom:20px}
.player-table th{
  text-align:left;font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.08em;font-size:11px;
  color:var(--mute);text-transform:uppercase;padding:8px 10px;border-bottom:1px solid var(--line);
}
.player-table th.num,.player-table td.num{text-align:right}
.player-table th.call{text-align:center}
.player-table td{padding:8px 10px;border-bottom:1px solid var(--line-soft);font-family:'Barlow Condensed',sans-serif;vertical-align:middle}
.player-table tr:nth-child(even){background:var(--zebra)}
.player-table tr.dim{opacity:.3}
.player-table tr.your-pick{background:var(--lime-dim)}
.player-table td.prank{color:var(--mute-dim);font-weight:700;font-size:12.5px}
.player-table td.pname{font-weight:800;font-size:14px;text-transform:uppercase}
.player-table td.pname .yp{margin-left:8px;font-size:10px;letter-spacing:.08em;color:var(--lime-text);border:1px solid var(--lime-line);border-radius:5px;padding:1px 5px}
.player-table td.pteam{color:var(--mute);font-size:11.5px;letter-spacing:.06em}
.player-table td.pverdict{display:flex;align-items:center;justify-content:center}
.player-table td.pverdict svg{display:block}

@media (max-width:640px){
  .round-detail-head .rnum{font-size:38px}
  .player-table th:nth-child(3),.player-table td:nth-child(3){display:none} /* team column hidden, kept in name subline via CSS content? handled in JS instead */
}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line-soft);margin-top:56px;padding:40px 0 28px}
.follow-band{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:26px 28px;margin-bottom:32px;
}
.follow-band .fb-copy{min-width:260px;flex:1}
.follow-band .fb-title{font-size:40px;margin:8px 0 8px}
.follow-band .prose.small{margin:0;max-width:440px}
.follow-band .fb-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
@media (max-width:700px){
  .follow-band{padding:22px 20px}
  .follow-band .fb-actions{width:100%}
  .follow-band .fb-actions .btn{flex:1 1 auto;justify-content:center}
}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:28px 48px;margin-bottom:28px;align-items:start}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr}}
.footer-col > p{max-width:40ch}
/* Board links: a flat list flows into two columns; grouped lists sit side by side */
.footer-links{columns:2;column-gap:28px}
.footer-links a{break-inside:avoid}
.footer-col.has-groups > h4{display:none}
.footer-links--grouped{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px}
.footer-group h4{margin-bottom:12px}
@media (max-width:560px){.footer-links--grouped{grid-template-columns:repeat(2,minmax(0,1fr))}}
.footer-col h4{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.1em;font-size:11.5px;color:var(--mute);text-transform:uppercase;margin:0 0 12px}
.footer-col a,.footer-col p{display:block;color:var(--white);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;margin-bottom:8px}
.footer-col p{color:var(--mute);font-weight:500;font-family:'Inter',sans-serif;font-size:13px;line-height:1.6}
.footer-col a:hover{color:var(--lime-text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line-soft);padding-top:18px}
.footer-bottom .fmeta{font-family:'Barlow Condensed',sans-serif;letter-spacing:.1em;color:var(--mute-dim);font-size:11.5px;text-transform:uppercase}

/* ---------- Draft Assistant ---------- */
.block-title{font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.08em;font-size:14px;color:var(--white);text-transform:uppercase;margin:0 0 12px}
.mute-inline{color:var(--mute-dim);font-weight:500;text-transform:none;letter-spacing:normal;font-size:12px;margin-left:6px}
.rec-disclaimer{
  font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.5;color:var(--mute);
  margin:12px 0 0;padding-left:11px;border-left:2px solid var(--line);max-width:620px;
}

.draft-setup-card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:24px 26px;max-width:720px;
}
/* Your Slot is the single most important input in this form — every recommendation
   depends on it — so it gets its own lime-bordered callout above the plain grid
   instead of blending in as one field among seven. */
.setup-slot-highlight{
  background:var(--raised);border:2px solid var(--lime-line);border-radius:var(--radius-lg);
  padding:16px 18px;margin-bottom:18px;display:flex;flex-direction:column;gap:8px;max-width:420px;
}
.setup-field--slot span{color:var(--lime-text);font-size:12px}
.setup-field--slot select{
  font-family:'Anton',sans-serif;font-size:22px;color:var(--white);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px;width:100%;
}
.setup-slot-hint{font-family:'Inter',sans-serif;font-size:12.5px;color:var(--mute);margin:0}
.setup-slot-hint strong{color:var(--white)}

.setup-resume-field{max-width:320px;margin-bottom:6px}

.setup-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px;margin-bottom:20px;
}
.setup-field{display:flex;flex-direction:column;gap:6px}
.setup-field span{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.08em;font-size:11px;color:var(--mute);text-transform:uppercase}
.number-inline{
  background:var(--raised);border:1px solid var(--line);color:var(--white);border-radius:8px;
  padding:8px 10px;font-size:14px;font-family:'Barlow Condensed',sans-serif;font-weight:700;width:100%;
}
.setup-note{margin-top:14px;max-width:520px}
.btn-big{width:100%;padding:16px 22px;font-size:15px}

.draft-status-bar{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:16px 20px;margin-bottom:18px;
}
.ds-item{display:flex;flex-direction:column;align-items:flex-start;min-width:70px}
.ds-num{font-family:'Anton',sans-serif;font-size:26px;line-height:1;color:var(--lime-text)}
.ds-label{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.08em;font-size:10px;color:var(--mute);text-transform:uppercase;margin-top:2px}
.ds-item--you .ds-num{color:var(--white)}
.ds-item--next{border-left:1px solid var(--line-soft);padding-left:24px}
.ds-item--next.is-live .ds-num{color:var(--avoid);animation:ds-pulse 1.4s ease-in-out infinite}
@keyframes ds-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.ds-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

.my-turn-block{margin-bottom:22px}
.rec-panel{margin-top:16px}
.rec-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:16px}
.rec-card{
  background:var(--surface);border:1px solid var(--line-soft);border-top:3px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:16px 18px;display:flex;flex-direction:column;gap:10px;
}
.rec-card[data-dropoff="step"]{border-top-color:var(--mute)}
.rec-card[data-dropoff="falloff"]{border-top-color:var(--loss)}
.rec-card[data-dropoff="cliff"]{border-top-color:var(--avoid)}
/* best pick keeps its lime top border regardless of dropoff severity — that signal
   already reads via .rec-dropoff text, this border is reserved for "this is the pick". */
.rec-card.best{border-color:var(--lime-line);background:var(--lime-dim);border-top-color:var(--lime-line)}
.rec-dropoff{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute-dim);
}
.rec-card[data-dropoff="falloff"] .rec-dropoff{color:var(--loss)}
.rec-card[data-dropoff="cliff"] .rec-dropoff{color:var(--avoid)}
.rec-tag{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.1em;font-size:11px;
  color:var(--mute);text-transform:uppercase;
}
.rec-card.best .rec-tag{color:var(--lime-text)}
.rec-player{display:flex;flex-direction:column;gap:3px}
.rp-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;text-transform:uppercase}
.rp-meta{color:var(--mute);font-size:12px;letter-spacing:.05em}
.rc-tier{
  display:inline-block;margin-top:2px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:11px;letter-spacing:.05em;color:var(--white);background:var(--raised);
  border:1px solid var(--line);border-radius:999px;padding:3px 9px;width:fit-content;
}
.rec-reason{font-family:'Inter',sans-serif;font-size:13px;color:var(--mute);line-height:1.5;margin:0}
.rec-search-field{margin-top:4px}
.rec-search-field input{width:100%}

.draft-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:28px;align-items:start}
/* Roster column's sticky positioning only makes sense next to the (taller)
   log column in the two-column layout. Once the grid stacks to one column
   below 820px, "sticky" has nothing to run alongside and just pins the
   roster panel awkwardly mid-scroll — turn it off in the same breakpoint. */
@media (max-width:820px){
  .draft-layout{grid-template-columns:1fr}
  .roster-col{position:static;top:auto}
}

.tier-picker .toolbar-group{margin-bottom:14px;flex-wrap:wrap}
.tier-picker .tier-board{max-height:520px;overflow-y:auto;padding-right:4px}
.tier-chip.draft-chip{
  all:unset;box-sizing:border-box;display:flex;align-items:center;gap:9px;width:100%;
  background:var(--raised);border:1px solid var(--line-soft);border-radius:9px;padding:8px 10px;
  cursor:pointer;transition:border-color .12s, opacity .12s;
}
.tier-chip.draft-chip:hover{border-color:var(--lime-line)}
.tier-chip.draft-chip:active{opacity:.6}

.search-results{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:260px;overflow-y:auto}
.search-row{
  /* These are real <button> elements. Without `all:unset`, browsers apply their own UA
     button color (the CSS system color ButtonText, tied to OS theme rather than this page's
     dark theme) instead of inheriting the page's white text — that's what made these rows
     look like near-invisible dark-on-dark text. Same fix already used by .tier-chip.draft-chip
     below for the identical reason. */
  all:unset;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;
  padding:9px 12px;text-align:left;cursor:pointer;transition:border-color .12s,background .12s;
}
.search-row:hover{border-color:var(--lime-line);background:var(--raised)}
.sr-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13.5px;text-transform:uppercase;color:var(--white)}
.sr-meta{color:var(--mute);font-size:11.5px}

.draft-log{display:flex;flex-direction:column;gap:2px;max-height:520px;overflow-y:auto}
.log-row{
  display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;
  padding:8px 10px;border-bottom:1px solid var(--line-soft);
}
.log-row.mine{background:var(--lime-dim)}
.lp{color:var(--mute-dim);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px}
.ln{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13.5px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.lw{font-size:10px;letter-spacing:.08em;color:var(--on-lime);background:var(--lime);border-radius:5px;padding:1px 6px;font-weight:800}
.lt{color:var(--mute);font-size:11.5px;letter-spacing:.05em;text-align:right}

.roster-col{position:sticky;top:calc(var(--header-h) + 16px)}
.roster-group{margin-bottom:16px}
.rg-label{font-family:'Barlow Condensed',sans-serif;font-weight:900;letter-spacing:.1em;font-size:11px;color:var(--lime-text);text-transform:uppercase;margin-bottom:6px}
.rg-player{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:8px;
  padding:8px 12px;margin-bottom:5px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:13.5px;text-transform:uppercase;
}
.rg-team{color:var(--mute);font-size:11px}

/* ---------- Grade My Draft ---------- */
.gmd-format-summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:16px 22px;max-width:720px;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:14px;text-transform:uppercase;
}
.gmd-picks-actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}

/* The grade reveal: a hand-drawn, red-pen letter grade circled like a teacher's mark on a
   paper, not a flat badge. Built as inline SVG (see grade-my-draft.js) so the ring and letter
   share one wobble filter — a clean vector circle around a clean vector letter reads as a
   generated badge; running both through the same turbulence displacement is what actually
   sells "drawn by a person." Red-pen color at every grade level, A+ included — lime stays
   reserved for CTAs, never used here. */
.gmd-grade-reveal{text-align:center;padding:12px 0 8px}
.grade-stamp{width:min(300px,64vw);margin:0 auto;color:var(--avoid)}
.grade-stamp svg{display:block;width:100%;height:auto;overflow:visible}
/* Pen color follows the grade: A- and up reads as a win (green), C- through B+ is a wash
   (amber), anything below C- is a real problem (red) — set via a tier-* class on .grade-stamp
   (see renderStamp() in grade-my-draft.js) and picked up here through currentColor so the ring
   and letter always match. */
.grade-stamp.tier-good{color:var(--gain)}
.grade-stamp.tier-mid{color:var(--warn)}
.grade-stamp.tier-bad{color:var(--avoid)}
.grade-ring{
  fill:none;stroke:currentColor;stroke-width:5.5;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;animation:gmd-pen-draw .8s .2s ease-out forwards;
}
/* The ring beside this is a real single-stroke pen path. The letter used to be
   the OUTLINE of a heavy condensed typeface — fill:none over stroke — which is
   a stencil, not handwriting, and the two marks read as made by different
   tools. A written letter is a FILL: the marker lays ink down as it travels.
   Nothing You Could Do is real handwriting rather than a drawn script, which is
   what the ring already is. It ships in one weight only, so the extra thickness
   comes from stroking the glyph outline in the same colour and painting that
   stroke UNDER the fill (paint-order) — the letterforms stay exactly as drawn
   and simply gain 4 units of ink, which lands them on the ring's 5.5px stroke.
   Do not add a transform here: the reveal animation below owns that property,
   and its forwards fill would erase any offset set on this rule. None is
   needed anyway — the ring's own centre is (151, 148), and the letter centres
   to (150, 147) on dominant-baseline alone. */
.grade-letter{
  font-family:'Nothing You Could Do','Bradley Hand','Segoe Script',cursive;
  font-weight:400;font-size:153px;
  fill:currentColor;
  stroke:currentColor;stroke-width:4;stroke-linejoin:round;paint-order:stroke fill;
  opacity:0;animation:gmd-pen-ink .4s .55s ease-out forwards;
}
/* A+, C-, D+ and friends. At 153px the two-character grades run past the ring
   entirely; 120px brings the widest (D-) to 168 units against roughly 200 of
   usable ring, which clears every one of the thirteen bands. */
.grade-letter.len2{font-size:120px}
@keyframes gmd-pen-draw{to{stroke-dashoffset:0}}
@keyframes gmd-pen-ink{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .grade-ring{animation:none;stroke-dashoffset:0}
  .grade-letter{animation:none;opacity:1;transform:none}
}
/* Skip the pen-draw reveal and show the finished mark immediately. For callers
   that re-render the stamp on every input change (Trade Verdict re-grades live
   as you build the trade): replaying an 0.55s-delayed reveal on each keystroke
   left the letter invisible most of the time and read as a flicker, so the
   animation is reserved for when the grade actually changes. */
.grade-stamp.no-anim .grade-ring{animation:none;stroke-dashoffset:0}
.grade-stamp.no-anim .grade-letter{animation:none;opacity:1;transform:none}
.grade-comment{
  font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;color:var(--white);
  max-width:560px;margin:14px auto 10px;
}

.gmd-summary-bar{justify-content:center;gap:40px}

.gmd-tape .log-row{grid-template-columns:52px 1fr auto;cursor:pointer}
.gmd-tape .log-row:hover{background:var(--raised)}
.vchip.steal{color:var(--gain)}
.vchip.value{color:var(--ok)}
.vchip.reach{color:var(--avoid)}
.gmd-lineup .log-row{grid-template-columns:64px 1fr auto;padding:9px 10px}
.gmd-lineup .lp{color:var(--lime-text);letter-spacing:.06em}
.gmd-tape-detail{
  background:var(--raised);border-bottom:1px solid var(--line-soft);
  padding:12px 14px 14px 58px;font-size:13px;color:var(--prose);line-height:1.55;
}
.gmd-tape-detail .gmd-vs{color:var(--mute);margin-top:4px}
.gmd-not-found{color:var(--mute-dim);font-style:italic}

/* ---------- Misc ---------- */
.empty-state{color:var(--mute);font-size:14px;padding:36px 20px;text-align:center}
/* Zero-result answer inside the pick search. Deliberately NOT .empty-state: that is a
   centred 36px void, and the shape alone reads as "broken" before the words are read.
   This is a left-aligned raised card sitting where a result row would sit, so it reads
   as an answer to the query. No --avoid/--warn: nothing failed here, the user asked a
   reasonable question about a position this model does not cover. */
/* Scope marker for a pick the model does not value. --mute on --raised, deliberately
   never --warn or --avoid: an ungraded pick is not an error or a risk, it is a position
   this model has no opinion about, and a semantic alarm hue would read as a defect. */
.ungraded,
.offboard{
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);background:var(--raised);
  border:1px solid var(--line);border-radius:3px;padding:2px 5px 1px;white-space:nowrap;
}
/* "Off board" and "Not graded" are both scope markers and share one look on purpose: the
   user does not need to learn two visual languages for "the model treats this differently".
   The words carry the difference — off-board players ARE graded, just low. */
.lt .offboard{margin-left:8px}
.sr-left{display:flex;align-items:center;gap:9px;min-width:0}
.lt .ungraded{margin-left:8px}
/* Ungraded rows sit back: no lime fill in the picks log, muted name in the tape. They are
   part of your draft, but they are not part of the thing being measured. */
.log-row.mine.ungraded-row{background:transparent}
.log-row.ungraded-row .ln{color:var(--mute)}
.vchip.none{color:var(--mute);border-color:var(--line)}

.search-note{
  background:var(--raised);border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;text-align:left;margin-top:4px;
}
.search-note b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:800;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--white);margin-bottom:4px;
}
.search-note span{font-family:'Inter',sans-serif;font-size:12.5px;line-height:1.5;color:var(--mute)}
.rec-disclaimer strong{color:var(--white);font-weight:600}
.gmd-picks-note{margin:10px 0 14px}
::selection{background:var(--lime);color:var(--on-lime)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}