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

:root {
  /* ══ DIRECTION A — BROADCAST TERMINAL (tokens documented in DESIGN.md) ══
     Three near-blacks, never pure #000. Cards read by surface contrast, not
     borders or radius. Orange is punctuation only; the green→red ramp is the
     only other color that carries meaning. */
  --bg:        #0B0C0E;   /* page background            */
  --surface:   #131519;   /* card / raised panel        */
  --surface-2: #191C21;   /* second raise: heads, hover */
  --border:    #23262C;   /* strongest line — sparingly */
  --hairline:  #1B1D22;   /* row dividers               */
  --ink:       #E8EAED;
  --muted:     #8A9099;
  --dim:       #565C66;
  --orange:    #F76900;   /* runtime-overridden by app_settings accent in base.html */
  --orange-dk: #D35400;
  --orange-lt: #2A1D14;   /* dark accent tint (matches _tint_dark in app.py) */
  --down:      #C63F3F;   /* faller / negative delta */
  /* grade ramp, green → red across the 0–10 bands (text figures) */
  --g9: #3FD68F; --g8: #9ED36A; --g7: #D3C954; --g6: #DBA84E;
  --g5: #D97F45; --g4: #D45B49; --g0: #C63F3F;
  /* type */
  --font-body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Archivo', sans-serif;   /* font-stretch 125% headers · 66% labels */
  /* legacy aliases — old names resolve to the new scale so untouched rules retheme */
  --navy:   #131519;
  --navy2:  #191C21;
  --white:  #131519;      /* old "card white" = surface now */
  --radius: 4px;
  --sh:     none;
  --sh-md:  0 8px 24px rgba(0,0,0,.5);
}

/* ── Grade colors (9 shades, terminal-tuned chips) ── */
.grade-bg-g1 { background:#123B28; color:#3FD68F; }
.grade-bg-g2 { background:#12331F; color:#5ACD7E; }
.grade-bg-g3 { background:#142C1B; color:#7FC96C; }
.grade-bg-y1 { background:#38300F; color:#D3C954; }
.grade-bg-y2 { background:#372709; color:#DBA84E; }
.grade-bg-y3 { background:#33200C; color:#D97F45; }
.grade-bg-r1 { background:#3B1614; color:#D45B49; }
.grade-bg-r2 { background:#361110; color:#C63F3F; }
.grade-bg-r3 { background:#300E0E; color:#B03636; }
/* ramp-colored text figures (grade numbers without a chip) */
.grade-tx-g1 { color:#3FD68F; } .grade-tx-g2 { color:#5ACD7E; } .grade-tx-g3 { color:#7FC96C; }
.grade-tx-y1 { color:#D3C954; } .grade-tx-y2 { color:#DBA84E; } .grade-tx-y3 { color:#D97F45; }
.grade-tx-r1 { color:#D45B49; } .grade-tx-r2 { color:#C63F3F; } .grade-tx-r3 { color:#B03636; }

/* ── Base ────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
/* Direction A type utilities */
.t-exp  { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; }
.t-cond { font-family: var(--font-display); font-stretch: 66%; font-weight: 600;
          text-transform: uppercase; letter-spacing: .14em; }

/* ── Nav ─────────────────────────────────────────── */
.site-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 54px;
  position: sticky;
  top: 0;
  z-index: 200;
}
.nav-brand {
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.brand-icon { color: var(--orange); font-size: 17px; }
.brand-fb   { color: var(--orange); font-weight: 900; letter-spacing: -.01em; }
.nav-logo   { height: 40px; width: auto; display: block; }

/* ── Public read-only mode: hide every edit affordance (the server also blocks them) ── */
body.read-only .btn-nav-add,
body.read-only .btn-nav-gear,
body.read-only .hero-actions,
body.read-only .add-btn,
body.read-only .btn-cancel,
body.read-only .edit-row-btn,
body.read-only .stat-edit-row,
body.read-only #injury-alert,
body.read-only .hub-alert-icon,
body.read-only form[action*="/player/"] { display: none !important; }

.btn-nav-add {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
  display: flex; align-items: center; gap: 5px;
}
.btn-nav-add:hover { background: var(--orange-dk); color: #fff; }

.page-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

/* ── Hub search + table ───────────────────────────── */
.hub-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
}
.hub-search-input-wrap { display: flex; flex: 1; min-width: 220px; }
.hub-search-input-wrap input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-right: none;
  border-radius: 4px 0 0 9px;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  background: var(--white);
  font-family: inherit;
  transition: border-color .15s;
}
.hub-search-input-wrap input:focus { border-color: var(--orange); }
.hub-search-input-wrap button {
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 0 9px 9px 0;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 16px;
  transition: background .15s;
}
.hub-search-input-wrap button:hover { background: var(--orange-dk); }
.hub-filter {
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 9px 12px;
  font-size: 13px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}
.hub-filter:focus { border-color: var(--orange); }
.clear-link { font-size: 13px; color: var(--muted); text-decoration: none; }
.clear-link:hover { color: #C63F3F; }

.prospect-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh);
}
.prospect-table thead tr {
  background: var(--surface-2);
}
.prospect-table th {
  padding: 12px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.prospect-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color .1s;
}
.prospect-table th.sortable:hover { color: rgba(255,255,255,.85); }
.prospect-table th.sort-asc,
.prospect-table th.sort-desc { color: var(--orange); }
.sort-icon { font-size: 9px; }
.prospect-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--bg);
  vertical-align: middle;
}
.prospect-table tbody tr:last-child td { border-bottom: none; }
.prospect-table tbody tr { cursor: pointer; transition: background .08s; }
.prospect-table tbody tr:hover td { background: var(--orange-lt); }

.row-green  { border-left: 3px solid #3FD68F; }
.row-yellow { border-left: 3px solid #DBA84E; }
.row-red    { border-left: 3px solid #C63F3F; }
.row-none   { border-left: 3px solid transparent; }

.pos-badge {
  background: var(--surface-2); color: var(--muted);
  border-radius: 4px; padding: 2px 8px;
  font-size: 11px; font-weight: 700;
}
.player-name-cell { font-weight: 600; }
.view-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  transition: all .12s;
}
.view-btn:hover { border-color: var(--orange); color: var(--orange); }
.result-count { font-size: 12px; color: var(--muted); margin-top: 10px; }

.empty-hub { text-align: center; padding: 80px 20px; color: var(--muted); }
.empty-hub i { font-size: 48px; display: block; margin-bottom: 16px; color: var(--orange); opacity: .5; }
.empty-hub p { font-size: 16px; margin-bottom: 20px; }

/* ── Hub grade badge ─────────────────────────────── */
.hub-grade-badge {
  display: inline-block;
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 700;
  white-space: nowrap;
}
.hub-grade-empty {
  background: var(--bg); color: var(--muted);
  border-radius: 4px; padding: 3px 9px;
  font-size: 11px; font-weight: 700;
}

/* ── Hub headshot ─────────────────────────────────── */
.hub-headshot {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  border: 2px solid var(--border);
  display: block;
}
.hub-headshot-placeholder {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 16px;
}

/* ── Player hero ──────────────────────────────────── */
.player-hero {
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--sh-md);
  margin-bottom: 24px;
}
.hero-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 28px 20px;
}
.logo-wrap { display: block; flex-shrink: 0; }
.school-logo {
  width: 76px; height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.logo-placeholder {
  width: 76px; height: 76px;
  background: rgba(255,255,255,.07);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; color: rgba(255,255,255,.2);
  flex-shrink: 0;
}
.hero-center { flex: 1; min-width: 0; }
.player-name {
  font-size: 30px; font-weight: 800;
  color: #fff; letter-spacing: -.03em;
  line-height: 1.15; margin-bottom: 8px;
}
.player-meta {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 5px;
  font-size: 13px; color: rgba(255,255,255,.5);
}
.meta-school { font-weight: 600; color: rgba(255,255,255,.9); text-decoration: none; }
.meta-school:hover { color: #fff; }
.meta-sep { color: rgba(255,255,255,.2); }
.meta-pos { font-weight: 700; color: rgba(255,255,255,.85); }
.meta-draft { color: var(--orange); font-weight: 600; }

.hero-right {
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 12px;
}
.social-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sbtn {
  width: 40px; height: 40px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; text-decoration: none;
  transition: transform .15s, opacity .15s;
  flex-shrink: 0;
}
.sbtn:hover { border-color: var(--orange); color: var(--orange); }
.sbtn-x       { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.sbtn-ig      { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.sbtn-bio     { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.sbtn-247     { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); font-size: 11px; font-weight: 800; letter-spacing: -.02em; }
.sbtn-recruit { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); font-size: 12px; font-weight: 800; }

.hero-actions { display: flex; gap: 8px; align-items: center; }
.btn-edit {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 4px; padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  text-decoration: none; transition: background .12s;
}
.btn-edit:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-del {
  background: rgba(239,68,68,.15);
  color: #E0968A;
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 4px; padding: 6px 10px;
  font-size: 14px; cursor: pointer; transition: background .12s;
}
.btn-del:hover { background: rgba(239,68,68,.3); }

/* ── Hero photo ───────────────────────────────────── */
.hero-photo-wrap { position: relative; flex-shrink: 0; }
.hero-photo {
  width: 90px; height: 90px;
  border-radius: 4px;
  object-fit: cover;
  object-position: center;
  border: 3px solid rgba(255,255,255,.15);
  display: block;
}
.hero-logo-badge {
  position: absolute;
  bottom: -6px; right: -6px;
  width: 32px; height: 32px;
  background: rgba(10,39,71,.85);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 3px;
  border: 1.5px solid rgba(255,255,255,.15);
}
.hero-logo-badge img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}

/* ── Tabs ─────────────────────────────────────────── */
.player-tabs {
  display: flex;
  gap: 2px;
  padding: 0 28px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.2);
  overflow-x: auto;
}
.ptab {
  padding: 12px 16px;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.ptab:hover { color: rgba(255,255,255,.8); }
.ptab.active { color: #fff; border-bottom-color: var(--orange); font-weight: 700; }

.grade-pip {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}

/* ── Tab body + layout grids ─────────────────────── */
.tab-body { }

.two-col {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}
.overview-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 760px) {
  .two-col, .overview-grid { grid-template-columns: 1fr; }
  .player-name { font-size: 22px; }
  .hero-inner { flex-wrap: wrap; padding: 20px; }
  .hero-right { align-items: flex-start; }
  .player-tabs { padding: 0 16px; }
  .page-wrap { padding: 16px 12px 60px; }
}

/* ── Cards ───────────────────────────────────────── */
.pcard {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--sh);
  overflow: hidden;
  margin-bottom: 16px;
}
.pcard:last-child { margin-bottom: 0; }

.pcard-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bg);
}
.pcard-title-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bg);
  flex-wrap: wrap; gap: 8px;
}
.pcard-title-row .pcard-title { padding: 0; border: none; }

.irow {
  display: flex; justify-content: space-between;
  align-items: baseline; gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--bg);
}
.irow:last-child { border-bottom: none; }
.ilabel { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.ivalue { font-weight: 500; text-align: right; word-break: break-word; font-size: 13px; }
.stars-gold { color: #DBA84E; font-size: 16px; letter-spacing: 1px; }
.stars-gold.lg { font-size: 20px; }

.card-prose {
  padding: 14px 18px;
  color: var(--muted); font-size: 13px; line-height: 1.7;
  white-space: pre-wrap;
}
.empty-text {
  padding: 14px 18px;
  color: var(--muted); font-size: 13px; font-style: italic;
}
.empty-text a { color: var(--orange); text-decoration: none; }
.empty-text a:hover { color: var(--orange-dk); }
.card-link-sm {
  display: block; padding: 10px 18px;
  font-size: 12px; font-weight: 600;
  color: var(--orange); text-decoration: none;
  border-top: 1px solid var(--bg);
}
.card-link-sm:hover { color: var(--orange-dk); }

.agent-name { padding: 14px 18px 4px; font-weight: 600; font-size: 15px; }

/* ── Recruiting rank blocks ───────────────────────── */
.recruit-ranks-row {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 14px 18px 12px;
}
.rank-block { text-align: center; }
.rank-big { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.rank-block-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 2px; }
.recruit-details { padding: 4px 0; }

/* ── Transfer card ────────────────────────────────── */
.transfer-card { border-left: 3px solid var(--navy2); }
.transfer-card .pcard-title { color: var(--ink); }

.transfer-stint {
  padding: 14px 18px;
  border-bottom: 1px solid var(--bg);
}
.transfer-stint:last-child { border-bottom: none; }
.transfer-stint-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.transfer-route {
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.transfer-arrow { color: var(--ink); font-size: 12px; }
.transfer-year-tag {
  background: var(--surface-2); color: var(--ink);
  border-radius: 4px; padding: 2px 8px;
  font-size: 11px; font-weight: 700;
}
.transfer-ranks {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px;
}
.transfer-rank-block { text-align: center; }
.transfer-rank-big { font-size: 16px; font-weight: 800; color: var(--ink); }
.transfer-rank-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.transfer-notes { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* ── Grade section ───────────────────────────────── */
.grade-display-card {
  margin: 16px 18px;
  border-radius: 4px;
  padding: 24px 20px;
  text-align: center;
}
.grade-score-xl { font-size: 52px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.grade-score-xl span { font-size: 22px; font-weight: 400; opacity: .6; }
.grade-label-xl { font-size: 18px; font-weight: 700; margin-top: 4px; }
.grade-tier-sub { font-size: 12px; opacity: .65; margin-top: 2px; }

.grade-summary-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
}
.grade-score-big {
  width: 56px; height: 56px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; flex-shrink: 0;
}
.grade-label-big { font-size: 16px; font-weight: 700; }
.grade-tier-label { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Floor–Current–Ceiling range bar */
.grade-range { margin-top: 12px; }
.grade-range-lg { margin-top: 14px; }
.range-track { position: relative; height: 10px; border-radius: 4px;
  background: linear-gradient(90deg,#991b1b 0%,#991b1b 26%,#D3C954 34%,#D3C954 60%,#3FD68F 68%,#3FD68F 100%); }
.range-window { position: absolute; top: -3px; bottom: -3px; border: 2px solid var(--text,#fff);
  border-radius: 4px; box-shadow: 0 0 0 1px #0006; }
.range-dot { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid #111; transform: translate(-50%,-50%); box-shadow: 0 1px 4px #0009; }
.range-ends { display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
  font-size: 11px; color: var(--muted); }
.range-chip { display: inline-block; padding: 1px 6px; border-radius: 4px; font-weight: 800; font-size: 12px; }
.range-spread { font-size: 10px; opacity: .65; text-transform: uppercase; letter-spacing: .04em; }
/* Ceiling|Floor pair. flex-wrap + a min basis makes them sit side-by-side when the
   card is wide enough and auto-stack (never clip the floor card) in the narrow
   300px grade-tab column or on phones. min-width:0 lets them shrink to fit. */
.grade-rng-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 18px 0; }
.grade-rng-cards .grade-display-card {
  flex: 1 1 140px; min-width: 0; margin: 0 !important; padding: 20px 12px;
}
.grade-rng-cards .grade-score-xl { font-size: 36px; }

.grade-legend {
  padding: 12px 18px;
  border-top: 1px solid var(--bg);
  display: flex; flex-direction: column; gap: 4px;
}
.legend-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; border-radius: 4px;
  transition: background .1s;
}
.legend-row.legend-active { background: var(--bg); }
.legend-swatch { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.legend-range { font-size: 11px; color: var(--muted); width: 36px; }
.legend-label { font-size: 12px; font-weight: 500; }

/* ── Tables (stats / depth) ──────────────────────── */
.tbl-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead tr { background: var(--bg); }
.data-table th {
  padding: 9px 14px; text-align: left;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bg);
  white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--orange-lt); }
/* ── Measurables grid ────────────────────────────── */
.measurables-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 10px 10px 6px;
}
.meas-block {
  text-align: center;
  padding: 10px 14px;
  min-width: 72px;
}
.meas-val {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.meas-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-top: 4px;
}

/* ── Recruiting & Transfer merged tab ───────────── */
.recruit-transfer-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  align-items: start;
}
.recruit-left, .recruit-right { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 760px) {
  .recruit-transfer-grid { grid-template-columns: 1fr; }
}

/* ── Stats tab layout ────────────────────────────── */
.stats-lower-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .stats-lower-grid { grid-template-columns: 1fr; }
}

/* ── Compact depth list ──────────────────────────── */
.depth-list { list-style: none; }
.depth-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  border-bottom: 1px solid var(--bg);
  gap: 8px;
}
.depth-list-item:last-child { border-bottom: none; }
.depth-list-team {
  font-size: 11px; color: var(--muted);
  margin-left: 6px;
}
.depth-list-year {
  font-size: 12px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
}

.edit-row-btn {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600;
  color: var(--muted); text-decoration: none;
  transition: all .12s; white-space: nowrap;
  display: inline-block;
}
.edit-row-btn:hover { border-color: var(--border-2); color: var(--ink); }

.stat-edit-row td { background: var(--surface-2); }
.stat-edit-form { padding: 10px 14px; }
.stat-edit-fields {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}

.depth-tag {
  background: #e0e7ff; color: #3730a3;
  border-radius: 4px; padding: 3px 10px;
  font-size: 12px; font-weight: 700;
}

/* ── Add / inline forms ──────────────────────────── */
.add-btn {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 600;
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: all .12s; white-space: nowrap;
}
.add-btn:hover { background: var(--orange-lt); border-color: var(--orange); color: var(--orange); }

.inline-form {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
}
.form-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; margin-bottom: 8px;
}
.form-row:last-child { margin-bottom: 0; }
.fi {
  border: 1.5px solid var(--border);
  border-radius: 4px; padding: 7px 10px;
  font-size: 13px; outline: none;
  flex: 1; min-width: 80px; background: var(--white);
  font-family: inherit; transition: border-color .12s;
}
.fi:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(249,115,22,.1); }
.w60 { flex: 0 0 60px; min-width: 60px; }
.w80 { flex: 0 0 80px; min-width: 80px; }

.btn-save {
  background: #3FD68F; color: #fff;
  border: none; border-radius: 4px;
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.btn-save:hover { background: #3FD68F; }
.btn-save:disabled { background: var(--muted); cursor: not-allowed; }
.btn-save-sm {
  background: var(--orange); color: #fff;
  border: none; border-radius: 4px;
  padding: 4px 10px; font-size: 11px; font-weight: 700;
  cursor: pointer; white-space: nowrap; font-family: inherit;
}
.btn-save-sm:hover { background: var(--orange-dk); }
.btn-cancel {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 4px; padding: 7px 14px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  font-family: inherit;
}
.btn-cancel:hover { color: var(--ink); border-color: var(--muted); }
.x-btn {
  background: transparent; border: none;
  color: var(--muted); cursor: pointer;
  padding: 2px 5px; font-size: 16px; border-radius: 4px;
  flex-shrink: 0;
}
.x-btn:hover { color: #C63F3F; }

/* ── School autocomplete ──────────────────────────── */
.school-ac-wrap { position: relative; flex: 1; min-width: 200px; }
.ac-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 300;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--sh-md);
  max-height: 230px; overflow-y: auto;
}
.ac-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; cursor: pointer; gap: 8px;
  border-bottom: 1px solid var(--bg);
  transition: background .08s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.ac-active { background: var(--orange-lt); }
.ac-school { font-size: 13px; font-weight: 500; }
.ac-conf { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ── Media list ───────────────────────────────────── */
.media-list { list-style: none; }
.media-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px solid var(--bg); gap: 8px;
}
.media-item:last-child { border-bottom: none; }
.media-card { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
.media-source {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.media-title {
  font-size: 13px; color: var(--ink);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.media-title:hover { color: #1e40af; text-decoration: underline; }

/* ── News fetch results ───────────────────────────── */
.news-results { }
.fetching-text {
  padding: 14px 18px; color: var(--muted); font-size: 13px;
  display: flex; align-items: center; gap: 8px;
}
.fetched-header {
  padding: 10px 18px;
  font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--bg);
}
.fetched-list { list-style: none; }
.fetched-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--bg);
  align-items: center;
}
.fetched-item:last-child { border-bottom: none; }
.fetched-meta { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.fetched-source { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fetched-date { font-size: 11px; color: var(--muted); }
.fetched-title {
  grid-column: 1; grid-row: 2;
  font-size: 13px; color: var(--ink);
  text-decoration: none; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.fetched-title:hover { color: #1e40af; text-decoration: underline; }
.fetched-item .btn-save-sm { grid-column: 2; grid-row: 1 / 3; align-self: center; }

/* ── Offer sheet ──────────────────────────────────── */
.offer-count {
  background: var(--orange-lt); color: var(--orange-dk);
  border-radius: 4px; padding: 1px 7px;
  font-size: 11px; font-weight: 700;
  margin-left: 6px;
}
.offer-tags { padding: 14px 18px; }
.offer-conf-group { margin-bottom: 14px; }
.offer-conf-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin-bottom: 7px;
}
.offer-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f0fdf4; border: 1px solid #bbf7d0;
  color: #14532d; border-radius: 4px;
  padding: 4px 8px 4px 10px;
  font-size: 12px; font-weight: 600;
  margin: 0 6px 6px 0;
}
.offer-x {
  background: transparent; border: none;
  color: #86efac; cursor: pointer; padding: 0 2px;
  font-size: 14px; line-height: 1; transition: color .1s;
}
.offer-x:hover { color: #C63F3F; }

/* ── Form page ────────────────────────────────────── */
.form-page { max-width: 820px; }
.form-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 28px;
}
.back-link {
  color: var(--muted); text-decoration: none;
  font-size: 13px; display: flex; align-items: center; gap: 4px;
}
.back-link:hover { color: var(--orange); }
.form-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

.fsec {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--sh);
  margin-bottom: 18px; overflow: hidden;
}
.fsec-title {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  padding: 13px 20px 11px;
  border-bottom: 1px solid var(--bg);
  display: flex; align-items: center; gap: 8px;
}
.fsec-sub { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 11px; }
.fgrid {
  display: flex; flex-wrap: wrap; gap: 16px; padding: 18px 20px;
}
.field {
  display: flex; flex-direction: column; gap: 5px;
  flex: 1; min-width: 160px;
}
.fsm { flex: 0 0 120px; min-width: 120px; }
.flg { flex: 2 1 240px; }
.ffull { flex: 1 1 100%; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--border);
  border-radius: 4px; padding: 8px 12px;
  font-size: 13px; font-family: inherit; outline: none;
  background: var(--white); color: var(--ink);
  transition: border-color .12s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.1);
}
.field textarea { resize: vertical; }
.req { color: #C63F3F; }

.grade-preview {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px 16px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.grade-preview .legend-swatch { width: 24px; height: 24px; border-radius: 4px; }

.form-actions {
  display: flex; gap: 12px; align-items: center;
  padding-top: 4px; padding-bottom: 20px;
}
.btn-primary-lg {
  background: var(--orange); color: #fff;
  border: none; border-radius: 4px;
  padding: 11px 28px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .12s;
}
.btn-primary-lg:hover { background: var(--orange-dk); }
.btn-secondary-lg {
  background: var(--white); color: var(--muted);
  border: 1.5px solid var(--border);
  border-radius: 4px; padding: 11px 24px;
  font-size: 14px; font-weight: 600;
  text-decoration: none; transition: border-color .12s;
}
.btn-secondary-lg:hover { border-color: var(--muted); color: var(--ink); }

.fsec-note {
  padding: 0 20px 14px;
  font-size: 12px; color: var(--muted); font-style: italic;
}

/* ── Dashboard stat cards ────────────────────────── */
.hub-dashboard {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 22px;
}
.stat-card {
  background: var(--white);
  border-radius: 4px;
  box-shadow: var(--sh);
  padding: 16px 20px;
  text-align: center;
  flex: 1; min-width: 80px;
  text-decoration: none; color: inherit;
  transition: transform .12s, box-shadow .12s;
  border-top: 3px solid transparent;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.stat-num { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }
.stat-total  { border-top-color: var(--border-2); }
.stat-total .stat-num  { color: var(--ink); }
.stat-green  { border-top-color: #3FD68F; }
.stat-green .stat-num  { color: #3FD68F; }
.stat-yellow { border-top-color: #DBA84E; }
.stat-yellow .stat-num { color: #DBA84E; }
.stat-red    { border-top-color: #C63F3F; }
.stat-red .stat-num    { color: #C63F3F; }
.stat-none   { border-top-color: var(--muted); }
.stat-none .stat-num   { color: var(--muted); }
.stat-watch  { border-top-color: var(--orange); }
.stat-watch .stat-num  { color: var(--orange); }

/* ── Watchlist buttons ───────────────────────────── */
.watchlist-btn {
  background: transparent; border: none;
  color: var(--muted); cursor: pointer;
  padding: 4px; font-size: 16px;
  border-radius: 4px; transition: color .12s;
  display: flex; align-items: center;
}
.watchlist-btn:hover { color: var(--orange); }
.watchlist-btn.active { color: var(--orange); }

.watchlist-btn-hero {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.6);
  border-radius: 4px; padding: 6px 12px;
  font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .12s;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.watchlist-btn-hero:hover { background: rgba(249,115,22,.2); border-color: var(--orange); color: var(--orange); }
.watchlist-btn-hero.active { background: rgba(249,115,22,.2); border-color: var(--orange); color: var(--orange); }

/* ── Hub table name cell ─────────────────────────── */
.player-hub-name { font-weight: 600; font-size: 14px; }
.player-hub-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  margin-top: 3px;
}
.last-updated-text {
  font-size: 11px; color: var(--muted); font-style: italic; flex-shrink: 0;
}

/* ── Tag chips (hub table) ───────────────────────── */
.tag-chip {
  background: var(--surface-2); color: var(--muted);
  border-radius: 2px; padding: 1px 6px;
  font-family: var(--display); font-stretch: 75%;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.tag-chip-more { background: var(--bg); color: var(--muted); }

/* ── Hero tags ───────────────────────────────────── */
.hero-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.hero-tag-chip {
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 2px; padding: 3px 8px;
  font-family: var(--display); font-stretch: 75%;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.hero-tags .hero-tag-chip:first-child { color: var(--orange); box-shadow: inset 0 -2px 0 var(--orange); }
.hero-tag-more { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.5); }

/* ── Tags grid (overview) ────────────────────────── */
.tags-grid {
  display: flex; flex-wrap: wrap; gap: 20px;
  padding: 16px 18px;
}
.tag-category-group { min-width: 180px; }
.tag-category-label {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 8px;
}
.tag-category-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-btn {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 4px; padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--muted); cursor: pointer;
  transition: all .1s; font-family: inherit;
}
.tag-btn:hover { border-color: var(--navy2); color: var(--ink); background: var(--surface-2); }
.tag-btn.active {
  background: var(--navy); border-color: var(--border-2);
  color: #fff; font-weight: 700;
}
.tag-btn.active:hover { background: var(--navy2); border-color: var(--navy2); color: #fff; }

/* ── Transfer toggle ──────────────────────────────── */
.toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
}
.toggle-switch {
  position: relative; width: 42px; height: 24px; flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--border); border-radius: 4px;
  cursor: pointer; transition: background .2s;
}
.toggle-slider:before {
  content: ""; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  left: 3px; top: 3px; background: var(--surface);
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--navy2); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }
.toggle-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.toggle-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* ── News alert banner ───────────────────────────── */
/* Injury alert — compact dark strip (dark "Sleeper" theme) */
.injury-alert {
  display: flex; align-items: center; gap: 12px;
  background: rgba(220,38,38,.10);
  border: 1px solid rgba(220,38,38,.40);
  border-left: 3px solid #C63F3F;
  border-radius: 4px; padding: 10px 14px; margin-bottom: 18px;
}
.ia-icon { font-size: 17px; line-height: 1; flex-shrink: 0; }
.ia-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.ia-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: #D45B49; flex-shrink: 0;
}
.ia-headline {
  font-size: 13px; color: var(--ink); font-style: italic; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.ia-headline:hover { text-decoration: underline; }
.ia-meta { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.ia-more { color: #D45B49; font-weight: 600; margin-left: 4px; }
.ia-dismiss {
  background: none; border: 1px solid rgba(220,38,38,.45); color: #D45B49;
  border-radius: 4px; padding: 4px 11px; font-size: 11px; font-weight: 600;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.ia-dismiss:hover { background: rgba(220,38,38,.15); }

/* Hub injury-sweep button */
.hub-actions { display: flex; align-items: center; gap: 12px; margin: 2px 0 14px; }
.hub-scan-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--border); color: var(--muted);
  border-radius: 4px; padding: 7px 13px; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: color .12s, border-color .12s;
}
.hub-scan-btn:hover,
.hub-scan-btn[data-running="1"] { color: #D45B49; border-color: rgba(220,38,38,.5); }
.hub-scan-progress { font-size: 12px; color: var(--muted); }

/* Quick Notes — read-only render (the editable form is hidden on the public site) */
.quick-notes-read { padding: 12px 18px 16px; font-size: 13.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }

/* ── Hub alert icon ──────────────────────────────── */
.hub-alert-icon {
  font-size: 13px; margin-left: 5px; color: #d97706;
  cursor: default; vertical-align: middle;
}

.hub-jersey {
  font-size: 12px; font-weight: 700; color: var(--muted);
  margin-right: 4px; letter-spacing: 0.01em;
}

.hero-jersey {
  font-size: 0.65em; font-weight: 700; color: var(--muted);
  margin-right: 6px; vertical-align: middle; letter-spacing: 0.01em;
}

/* ── Grade reviewed stamp ────────────────────────── */
.grade-reviewed-stamp {
  font-size: 11px; color: var(--muted); padding: 8px 18px 12px;
  display: flex; align-items: center; gap: 5px;
}
.grade-reviewed-never { color: #d97706; }

/* ── Media source row + date ─────────────────────── */
.media-source-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.media-date { font-size: 11px; color: var(--muted); }

/* ── Scouting notes sources block ───────────────── */
.grade-sources-block {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 18px 14px; border-top: 1px solid var(--border); margin-top: 4px;
}
.grade-sources-label {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); white-space: nowrap; flex-shrink: 0;
}
.grade-sources-text { font-size: 12px; color: var(--muted); }

/* ── Add scouting report inline form ────────────── */
.add-media-form { padding: 12px 18px 14px; border-top: 1px solid var(--border); margin-top: 8px; }
.add-media-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.add-media-row .fi { font-size: 13px; padding: 7px 10px; }

/* ═══════════════════════════════════════════════════════════════
   BROADCAST THEME — ScoutSZN
   Condensed uppercase display type (Oswald) + punchy orange.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --orange:    #F76900;
  --orange-dk: #d35400;
  --orange-lt: #2A1D14;
  --display:   'Archivo', system-ui, sans-serif;
}
/* Direction A width axis: figures & big headings run expanded, labels condensed.
   (Replaces the old Oswald condensed-everything look.) */
.player-name, .board-title h1, .bstat-num, .grade-score-xl, .grade-score-big,
.rank-big, .stat-num, .meas-val, .transfer-rank-big, .grade-label-xl, .hg-num,
.form-title, .nav-brand, .brand-fb { font-stretch: 125%; }
.pcard-title, .fsec-title, .bstat-lbl, .btn-nav-add { font-stretch: 75%; }

/* Nav — solid navy banner, orange baseline */
.site-nav { background: var(--navy); border-bottom: 3px solid var(--orange); }
.nav-brand {
  font-family: var(--display); font-weight: 700;
  font-size: 23px; letter-spacing: .05em; text-transform: uppercase;
}
.brand-fb { font-family: var(--display); font-weight: 700; }
.brand-icon { font-size: 20px; }
.btn-nav-add {
  font-family: var(--display); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .05em; border-radius: 4px;
}

/* Big display headings + numbers */
.player-name {
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .015em;
  font-size: 38px; line-height: 1.05;
}
.form-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.rank-big, .stat-num, .meas-val, .transfer-rank-big,
.grade-score-xl, .grade-score-big, .grade-label-xl {
  font-family: var(--display); font-weight: 700;
}
.hero-jersey, .hub-jersey { font-family: var(--display); color: var(--orange); }

/* Section / card titles — broadcast lower-third bar */
.pcard-title, .fsec-title {
  font-family: var(--display); font-weight: 600;
  font-size: 13px; letter-spacing: .09em; color: var(--ink);
  border-left: 4px solid var(--orange); padding-left: 14px;
}
.pcard-title-row { border-left: 4px solid var(--orange); }
.pcard-title-row .pcard-title { border-left: none; padding-left: 0; }

/* Tiny uppercase labels → condensed */
.prospect-table th, .data-table th, .stat-label, .rank-block-label,
.meas-lbl, .transfer-rank-lbl, .offer-conf-label, .tag-category-label,
.fetched-source, .media-source, .pcard-title-row .pcard-title {
  font-family: var(--display); font-weight: 500; letter-spacing: .08em;
}
.prospect-table th, .data-table th { font-size: 12px; font-weight: 600; }

/* Tabs */
.ptab { font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: 14px; }
.ptab.active { font-weight: 700; color: #fff; }

/* Badges / chips — condensed uppercase, chunkier */
.pos-badge, .hub-grade-badge, .hub-grade-empty, .tag-chip,
.transfer-year-tag, .depth-tag, .offer-count {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .04em;
}
.pos-badge { background: var(--navy); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 4px; }
.hub-grade-badge { font-size: 12px; padding: 4px 10px; }

/* Dashboard cards */
.stat-num { font-size: 30px; }
.stat-card { border-top-width: 4px; }

/* Buttons */
.btn-primary-lg, .btn-save { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }
.view-btn { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Re-assert responsive sizes after the overrides above */
@media (max-width: 760px) {
  .player-name { font-size: 26px; }
  .nav-brand { font-size: 20px; }
}

/* ── Hero refinement: depth + small jersey tag + confident eyebrow ── */
.player-hero {
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(8,20,40,.30), inset 0 1px 0 rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.05);
}
.hero-photo { border: 1px solid var(--border-2); box-shadow: none; }
.school-logo { filter: drop-shadow(0 3px 10px rgba(0,0,0,.55)); }

/* small jersey "tag" before the name */
.hero-jersey {
  display: inline-block;
  font-family: var(--display); font-weight: 600;
  font-size: 16px; line-height: 1.45;
  color: var(--orange);
  border: 1.5px solid rgba(247,105,0,.55);
  border-radius: 4px; padding: 0 8px;
  margin-right: 13px; vertical-align: middle; letter-spacing: .02em;
}

/* confident eyebrow — school pops in orange */
.meta-school {
  font-family: var(--display); color: var(--orange);
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.meta-school:hover { color: #ffa45c; }

/* ═══════════════════════════════════════════════════════════════
   DARK / SLEEPER THEME — ScoutSZN
   ═══════════════════════════════════════════════════════════════ */
:root {
  --bg:     #0B0C0E;   /* page */
  --white:  #131519;   /* card / surface */
  --ink:    #E8EAED;   /* primary text */
  --muted:  #8A9099;   /* secondary text */
  --border: #23262C;   /* hairlines */
}
body { background: var(--bg); color: var(--ink); }

/* Nav */
.site-nav { background: var(--surface); border-bottom: 2px solid var(--orange); box-shadow: none; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.btn-nav-gear {
  color: var(--muted); font-size: 17px; text-decoration: none;
  width: 34px; height: 34px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color .12s, background .12s;
}
.btn-nav-gear:hover { color: var(--orange); background: rgba(255,255,255,.05); }

/* Surfaces → flat dark with hairline borders, no soft shadows */
.prospect-table, .pcard, .fsec, .stat-card, .ac-dropdown, .form-page .fsec {
  background: var(--white); box-shadow: none; border: 1px solid var(--border);
}
.prospect-table thead tr, .data-table thead tr { background: var(--bg); }
.prospect-table th, .data-table th { color: var(--muted); border-bottom: 1px solid var(--border); }
.prospect-table td, .data-table td { border-bottom: 1px solid var(--border); }
.prospect-table tbody tr:hover td, .data-table tbody tr:hover td { background: var(--surface-2); }
.prospect-table td { padding: 9px 12px; }

/* Hub row: position-colored avatar */
.hub-av { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; border: 2px solid var(--border); display: block; }
.hub-av-ph {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 16px; border: 1.5px solid;
}
.player-hub-name { color: var(--ink); font-size: 15px; }
.last-updated-text { color: var(--muted); }

/* Position chip (colors set inline per position) */
.pos-badge {
  background: transparent; font-family: var(--display); font-weight: 600;
  font-size: 12px; letter-spacing: .04em; border-radius: 4px; padding: 3px 9px;
}

/* Card internals on dark */
.pcard-title, .fsec-title { color: #cdd2da; border-bottom-color: var(--border); }
.irow, .depth-list-item, .media-item, .grade-legend, .card-link-sm,
.add-media-form, .grade-sources-block, .grade-reviewed-stamp { border-color: var(--border); }
.card-prose { color: #c2c6cd; }
.ivalue { color: var(--ink); }
.ilabel, .empty-text, .result-count { color: var(--muted); }
.hub-grade-empty { background: var(--bg); color: var(--muted); }

/* Inputs / filters dark */
.field input, .field select, .field textarea, .fi, .hub-filter,
.hub-search-input-wrap input, .ac-dropdown {
  background: var(--bg); color: var(--ink); border-color: var(--border);
}
.field label { color: #c2c6cd; }
.inline-form, .stat-edit-row td { background: var(--bg); border-color: var(--border); }

/* Buttons that were light-on-light */
.view-btn, .add-btn, .tag-btn, .btn-secondary-lg, .edit-row-btn, .btn-cancel { color: #c2c6cd; }
.add-btn, .tag-btn { background: var(--surface-2); border-color: var(--border); }
.view-btn { border-color: var(--border); }

/* Dashboard cards */
.stat-card { border-top-width: 3px; }
.form-title { color: var(--ink); }
.back-link { color: var(--muted); }

/* Tag chips on dark */
.tag-chip { background: var(--surface-3); color: var(--muted); }
.tag-chip-more { background: var(--surface-2); color: var(--muted); }
.ac-item { border-color: var(--border); }
.ac-item:hover, .ac-item.ac-active { background: var(--surface-2); }

/* Article / news title links — readable on dark */
.media-title, .fetched-title { color: #7fb3e8; }
.media-title:hover, .fetched-title:hover { color: #a9cdf5; text-decoration: underline; }
.media-source, .fetched-source, .media-date, .fetched-date { color: var(--muted); }

/* Dashboard "Prospects" total + result count visible on dark */
.stat-total .stat-num { color: #e6e9ee; }
.result-count { color: #9aa1ac; }

/* Nav: Compare link */
.btn-nav-link {
  color: var(--ink); text-decoration: none; font-family: var(--display);
  text-transform: uppercase; letter-spacing: .04em; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 4px;
  white-space: nowrap;
}
.btn-nav-link:hover { color: var(--orange); background: rgba(255,255,255,.06); }
/* Between phone and full desktop the 7 labeled links don't fit on one line —
   collapse to icons early rather than wrapping the bar to two rows. */
@media (max-width: 1250px) {
  .nav-label { display: none; }
  .nav-right { gap: 5px; }
  .btn-nav-link, .btn-nav-add { padding: 7px 10px; }
  .btn-nav-add .bi { margin: 0; }
}

/* ── Compare page ── */
.cmp-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.cmp-filter-hint { font-size: 12px; color: var(--muted); }
.cmp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.cmp-select { min-width: 230px; }
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; align-items: start; }
.cmp-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.cmp-card-head { text-align: center; margin-bottom: 12px; }
.cmp-av { width: 48px; height: 48px; border-radius: 4px; border: 1.5px solid; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 19px; margin: 0 auto 8px; }
.cmp-name { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); text-decoration: none; text-transform: uppercase; letter-spacing: .01em; }
.cmp-name:hover { color: var(--orange); }
.cmp-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.cmp-grade { display: flex; flex-direction: column; align-items: center; gap: 2px; border-radius: 4px; padding: 12px; margin-bottom: 6px; }
.cmp-grade-num { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; }
.cmp-grade-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; opacity: .9; }
.cmp-grade-none { background: var(--surface-2); color: var(--muted); font-size: 13px; }
.cmp-best { outline: 2px solid var(--orange); outline-offset: 2px; }
.cmp-section-label { font-family: var(--display); text-transform: uppercase; letter-spacing: .07em; font-size: 10px; color: var(--muted); margin: 14px 0 6px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.cmp-meas { font-size: 13px; color: var(--ink); }
.cmp-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.cmp-stat-grid { font-size: 12px; }
.cmp-stat-grid th, .cmp-stat-grid td { padding: 5px 7px; }

/* ── Grade history timeline ── */
.grade-hist { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 18px 8px; }
.grade-hist-pt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.grade-hist-badge { font-family: var(--display); font-weight: 600; font-size: 15px; padding: 4px 11px; border-radius: 4px; }
.grade-hist-year { font-size: 11px; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.grade-hist-arrow { color: var(--muted); font-size: 16px; }
.grade-hist-note { padding: 0 18px 14px; font-size: 11px; color: var(--muted); font-style: italic; }

/* ── Settings page ── */
.pos-color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; padding: 18px 20px; }
.pos-color-cell { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 10px 12px; }
.pos-color-cell input[type=color] { width: 38px; height: 38px; border: none; border-radius: 4px; background: none; cursor: pointer; padding: 0; }
.pos-color-name { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .04em; }

/* ═══════════════════════════════════════════════════════════════════════════
   BOLD REDESIGN — Draft-room analytics terminal
   Big board hub + grade-as-hero player page. Wins the cascade (appended last).
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Direction A elevation ramp (DESIGN.md) — three near-blacks, never #000 */
  --bg:        #0B0C0E;   /* page floor */
  --surface-1: #0F1114;   /* sunken: table head, inputs, grooves */
  --surface-2: #131519;   /* card / panel */
  --surface-3: #191C21;   /* raised / hover */
  --white:     #131519;   /* alias: existing .pcard/.prospect-table etc. */
  --border:    #23262C;   /* hairline */
  --border-2:  #2E323C;   /* stronger hairline */
  --ink:       #E8EAED;   /* primary text */
  --ink-2:     #C4C9D1;   /* secondary text */
  --muted:     #8A9099;   /* tertiary — AA on dark for small text */
  --faint:     #565C66;   /* quaternary / disabled */

  /* Deliberate spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* Bright on-dark tier hues for big readouts (AA: large-text ≥3:1, here ≥4.5:1) */
  --tier-green:  #3FD68F;
  --tier-yellow: #D3C954;
  --tier-red:    #D45B49;

  /* Semantic z-scale */
  --z-sticky: 100; --z-nav: 200; --z-dropdown: 300; --z-modal: 400; --z-toast: 500;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
body { background: var(--bg); }

/* Tabular, condensed numerals everywhere a number carries meaning */
.hub-grade-badge, .hub-grade-empty, .bstat-num, .hg-num, .grade-score-xl, .grade-score-big,
.rank-cell, .meas-val, .rank-big, .transfer-rank-big, .hgr-chip, .range-chip, .gd-seg-c,
.grade-hist-badge, .cmp-grade-num, .stat-num, .data-table td, .board-sub, .gd-key b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Grade ramp: terminal chips — dark tier field, ramp-colored figure ──
   (matches the .grade-bg-* set at the top of this file; kept here so the
   late cascade stays consistent if the early block ever drifts) */
.grade-bg-g1 { background:#123B28; color:#3FD68F; }
.grade-bg-g2 { background:#12331F; color:#5ACD7E; }
.grade-bg-g3 { background:#142C1B; color:#7FC96C; }
.grade-bg-y1 { background:#38300F; color:#D3C954; }
.grade-bg-y2 { background:#372709; color:#DBA84E; }
.grade-bg-y3 { background:#33200C; color:#D97F45; }
.grade-bg-r1 { background:#3B1614; color:#D45B49; }
.grade-bg-r2 { background:#361110; color:#C63F3F; }
.grade-bg-r3 { background:#300E0E; color:#B03636; }

/* ═══════════════ HUB — BIG BOARD ═══════════════ */

/* Board header */
.board-head { margin-bottom: var(--sp-5); }
.board-head-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.board-title h1 {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .035em; font-size: 30px; line-height: .95; color: var(--ink);
}
.board-sub { margin-top: 7px; font-size: 12.5px; color: var(--muted); letter-spacing: .01em; }
.bsub-dot { margin: 0 8px; opacity: .35; }

.board-readout { display: flex; align-items: stretch; }
.bstat {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  padding: 2px 0 2px var(--sp-5); margin-left: var(--sp-5);
  text-decoration: none; border-left: 1px solid var(--border);
}
.bstat:first-child { border-left: none; margin-left: 0; padding-left: 0; }
.bstat-num {
  font-family: var(--display); font-weight: 700; font-size: 27px; line-height: 1;
  color: var(--ink); letter-spacing: .01em;
}
.bstat-lbl {
  font-family: var(--display); font-size: 10.5px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-top: 6px; white-space: nowrap;
}
.bstat-green  { color: var(--tier-green); }
.bstat-watch  { color: var(--orange); }
.bstat-link   { transition: transform .12s var(--ease-out); }
.bstat-link:hover { transform: translateY(-1px); }
.bstat-link:hover .bstat-lbl { color: var(--ink-2); }

/* Clickable stacked grade-distribution bar */
.gd-bar {
  display: flex; height: 36px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-1);
  transform-origin: left center; animation: gd-grow .55s var(--ease-out) both;
}
@keyframes gd-grow { from { transform: scaleX(0); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
.gd-seg {
  display: flex; align-items: center; justify-content: center; min-width: 3px;
  position: relative; text-decoration: none; overflow: hidden;
  transition: filter .15s var(--ease-out);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.28);
}
.gd-seg:last-child { box-shadow: none; }
.gd-seg:hover { filter: brightness(1.18) saturate(1.1); }
.gd-seg-c { font-family: var(--display); font-weight: 600; font-size: 12px; opacity: .95; }
.gd-seg-none {
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 7px, var(--surface) 7px 14px);
  color: var(--muted);
}
.gd-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin-top: 11px; }
.gd-key {
  display: flex; align-items: center; gap: 7px; text-decoration: none;
  font-family: var(--display); font-size: 12px; letter-spacing: .03em; color: var(--muted);
  transition: color .12s;
}
.gd-key:hover { color: var(--ink-2); }
.gd-key b { color: var(--ink); font-weight: 700; margin-left: 1px; }
.gd-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.gd-dot-none { background: #2e323c; }

/* Table → true big board: sticky header, rank rail, bold grade readout */
.prospect-table { overflow: visible; border-radius: var(--radius); }
.prospect-table thead th {
  position: sticky; top: 54px; z-index: var(--z-sticky);
  background: var(--surface-1); border-bottom: 1px solid var(--border-2);
}
.prospect-table thead th:first-child { border-top-left-radius: var(--radius); }
.prospect-table thead th:last-child  { border-top-right-radius: var(--radius); }
.prospect-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
.prospect-table tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius); }
.prospect-table tbody tr { transition: background .1s var(--ease-out); }
.prospect-table tbody tr:hover td { background: var(--surface-3); }

.th-rank {
  font-family: var(--display); font-weight: 600; letter-spacing: .08em;
  text-align: center !important;
}
.th-grade { text-align: left; }

/* Rank cell — clean number, no colored rail (team identity is the logo + grade, not a stripe) */
.rank-cell {
  position: relative; width: 50px; text-align: center;
  font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--ink-2);
}
.row-green, .row-yellow, .row-red, .row-none { border-left: none; }

/* School cell — small team logo for identity */
.school-cell { white-space: nowrap; }
.hub-school-logo {
  width: 20px; height: 20px; object-fit: contain; vertical-align: middle;
  margin-right: 8px; display: inline-block;
}
.school-name { vertical-align: middle; }

/* Grade = the IP: a bold readout with a tier label underneath */
.grade-cell { white-space: nowrap; }
.hub-grade-badge, .hub-grade-empty {
  display: inline-block; min-width: 48px; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .01em;
  padding: 5px 11px; border-radius: 4px;
}
.hub-grade-tier {
  display: block; margin-top: 4px; font-family: var(--display);
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .045em;
  color: var(--muted);
}
.hub-grade-tier-none { color: var(--faint); }

/* ═══════════════ PLAYER — GRADE IS THE HERO ═══════════════ */
.hero-inner { align-items: stretch; gap: var(--sp-5); flex-wrap: wrap; }
.hero-left { display: flex; align-items: center; flex-shrink: 0; }
.hero-center { display: flex; flex-direction: column; flex: 1 1 320px; min-width: 0; }
.hero-tools {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-4); flex-wrap: wrap;
}
.hero-tools .social-btns { justify-content: flex-start; }

/* The grade panel — centerpiece */
.hero-grade {
  flex: 0 0 auto; width: 296px; align-self: stretch;
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.09); border-radius: 4px;
  box-shadow: none;
}
.hg-main { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-decoration: none; }
.hg-num {
  font-family: var(--display); font-weight: 700; font-size: 66px; line-height: .82;
  letter-spacing: -.01em; display: flex; align-items: baseline; flex-shrink: 0;
}
.hg-num .hg-scale { font-size: 19px; font-weight: 500; color: var(--muted); margin-left: 3px; }
.hg-num.tier-green  { color: var(--tier-green); }
.hg-num.tier-yellow { color: var(--tier-yellow); }
.hg-num.tier-red    { color: var(--tier-red); }
.hg-num.tier-none   { color: var(--faint); }
.hg-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hg-eyebrow {
  font-family: var(--display); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .11em; color: var(--muted);
}
.hg-label {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink); line-height: 1.08;
}
.hg-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.hg-group { font-size: 11.5px; color: var(--muted); }
.hg-main:hover .hg-label { color: #fff; }
.hg-ungraded .hg-num { font-weight: 700; }

/* Premium floor–current–ceiling range bar */
.hg-range { animation: hgr-rise .45s var(--ease-out) both .12s; }
.hgr-track {
  display: none;   /* scale strip retired — floor/ceiling figures carry the range */
  position: relative; height: 11px; border-radius: 4px;
  background: linear-gradient(90deg,
    #5a1f1f 0%, #5a1f1f 33%, #6b5310 33%, #6b5310 67%, #1f5b32 67%, #1f5b32 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.hgr-fill {
  position: absolute; top: -2px; bottom: -2px; border-radius: 4px;
  border: 1.5px solid rgba(255,255,255,.9); background: rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.hgr-pin {
  position: absolute; top: 50%; width: 3px; height: 21px; border-radius: 2px;
  background: var(--orange); transform: translate(-50%,-50%);
  box-shadow: 0 0 0 2px rgba(0,0,0,.55), 0 0 9px rgba(247,105,0,.55);
}
.hgr-ends { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.hgr-end { display: flex; align-items: center; gap: 7px; }
.hgr-end-r { flex-direction: row-reverse; }
.hgr-chip {
  font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 16px;
  padding: 0; border-radius: 0; background: transparent !important;
}
.hgr-end-lbl {
  font-family: var(--display); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.hgr-spread { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
@keyframes hgr-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* Tabs — refined */
.player-tabs { background: rgba(0,0,0,.3); padding: 0 var(--sp-5); gap: 0; }
.ptab { padding: 14px 0; margin-right: var(--sp-5); border-bottom-width: 2px; }
.ptab:last-child { margin-right: 0; }
.ptab.active { border-bottom-color: var(--orange); }

/* Verdict card (overview) */
.verdict-prose {
  padding: 13px 18px 8px; color: var(--ink-2); font-size: 13.5px; line-height: 1.7;
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden;
}

/* Stronger stat tables */
.data-table thead th {
  background: var(--surface-1); color: var(--muted);
  border-bottom: 1px solid var(--border-2);
}
.data-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.014); }
.data-table tbody tr:hover td { background: var(--surface-3) !important; }
.data-table th:nth-child(n+3), .data-table td:nth-child(n+3) { text-align: right; }
.data-table td:first-child { font-weight: 600; color: var(--ink); }
.meas-val { font-variant-numeric: tabular-nums; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .board-head-top { align-items: flex-start; }
  .board-readout { width: 100%; }
}
@media (max-width: 760px) {
  .board-title h1 { font-size: 24px; }
  .board-readout { gap: 0; }
  .bstat { padding-left: var(--sp-4); margin-left: var(--sp-4); }
  .bstat-num { font-size: 22px; }
  .hero-grade { width: 100%; }
  .hg-num { font-size: 56px; }
  .prospect-table thead th { top: 54px; }
  .hub-grade-badge, .hub-grade-empty { font-size: 16px; min-width: 42px; }
}

/* On the narrow big board, lead with Rank · Name · Pos · Grade — keep the IP on screen.
   Fixed layout + explicit widths so the name cell can't grow the table past the viewport. */
@media (max-width: 620px) {
  /* Nav: collapse labels to icons so it never forces the body wider than the viewport */
  .site-nav { padding: 0 12px; }
  .nav-logo { height: 32px; }
  .nav-right { gap: 4px; }
  .nav-label { display: none; }
  .btn-nav-link, .btn-nav-add { padding: 7px 10px; }
  .btn-nav-add .bi { margin: 0; }

  /* Board on mobile: Rank · Name · Pos · Grade. Meta/tags hidden keeps the name cell
     short, so plain auto layout fits the viewport with no overflow (wrapper is a safety net). */
  .board-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
  .prospect-table thead th { position: static; }   /* sticky needs body scroll; sacrifice on mobile */
  .prospect-table th:nth-child(2),  .prospect-table td:nth-child(2),   /* Watchlist star */
  .prospect-table th:nth-child(3),  .prospect-table td:nth-child(3),   /* Avatar */
  .prospect-table th:nth-child(6),  .prospect-table td:nth-child(6),   /* School */
  .prospect-table th:nth-child(7),  .prospect-table td:nth-child(7),   /* Class */
  .prospect-table th:nth-child(8),  .prospect-table td:nth-child(8),   /* Draft Yr */
  .prospect-table th:nth-child(10), .prospect-table td:nth-child(10)   /* View */
    { display: none; }
  .prospect-table th, .prospect-table td { padding: 9px 8px; }
  .player-hub-meta { display: none; }   /* tags/timeago bloat the cell; board here = rank · name · pos · grade */
  .player-hub-name { font-size: 14px; }
  .grade-cell { text-align: right; }
  .hub-grade-badge, .hub-grade-empty { font-size: 16px; min-width: 38px; padding: 4px 7px; }
  .hgr-spread { display: none; }
}

/* ── Motion: respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  .gd-bar, .hg-range { animation: none; }
  .bstat-link:hover, .prospect-table tbody tr, .gd-seg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WAR-ROOM BOARD v2 — masthead + tier shelves (replaces the dashboard)
   ═══════════════════════════════════════════════════════════════════════════ */
.board-masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4) var(--sp-6); flex-wrap: wrap;
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.bm-head { display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; }
.bm-title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .035em; font-size: 34px; line-height: .85; color: var(--ink);
  display: inline-flex; align-items: baseline;
}
.bm-cursor {
  width: 12px; height: 27px; background: var(--orange); margin-left: 9px;
  display: inline-block; transform: translateY(2px);
  animation: bm-blink 1.15s steps(1, end) infinite;
}
@keyframes bm-blink { 50% { opacity: 0; } }
.bm-meta { display: inline-flex; align-items: baseline; gap: 7px; }
.bm-count {
  font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.bm-meta-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }

.bm-key { display: flex; flex-wrap: wrap; gap: 5px 6px; align-items: center; max-width: 560px; justify-content: flex-end; }
.bm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: none; border: none; padding: 3px 2px;
}
.bm-chip:hover { color: var(--ink); }
.bm-swatch { width: 3px; height: 12px; border-radius: 1px; flex-shrink: 0; }

/* Tier shelves inside the board */
.shelf-row td {
  padding: 0; background: var(--surface-1);
  border-top: 1px solid var(--border-2); border-bottom: 1px solid var(--border-2);
}
.shelf-row:first-child td { border-top: none; }
.shelf { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-right: 14px; }
.shelf-bar { width: 5px; align-self: stretch; flex-shrink: 0; }
.shelf-bar-none { background: var(--border-2); }
.shelf-label {
  margin-left: 13px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; font-size: 14px; color: var(--ink);
}
.shelf-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.shelf-count {
  margin-left: auto; margin-right: 2px;
  font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.shelf-row.shelf-green  td { background: rgba(63,214,143,.04); }
.shelf-row.shelf-yellow td { background: rgba(211,201,84,.04); }
.shelf-row.shelf-red    td { background: rgba(212,91,73,.04); }
.shelf-row.shelf-none   td { background: var(--surface-1); }

@media (prefers-reduced-motion: reduce) { .bm-cursor { animation: none; } }

@media (max-width: 620px) {
  .bm-title { font-size: 27px; }
  .bm-cursor { height: 21px; width: 10px; }
  .bm-key { display: none; }   /* keep the mobile masthead tight; rail colors decode on desktop */
  .shelf-label { font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYER v2 — draft stock, position keys, board standing
   ═══════════════════════════════════════════════════════════════════════════ */
/* Hero foot: stock direction + board rank chips */
.hg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 2px; }
.hg-stock {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--display); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 4px; border: 1px solid;
}
.hg-stock-ar { font-size: 9px; line-height: 1; }
.hg-stock-up   { color: var(--tier-green); border-color: rgba(74,222,128,.42);  background: rgba(74,222,128,.10); }
.hg-stock-down { color: var(--tier-red);   border-color: rgba(248,113,113,.42); background: rgba(248,113,113,.10); }
.hg-stock-flat { color: var(--muted);      border-color: var(--border-2);       background: rgba(255,255,255,.04); }
.hg-rank {
  display: inline-flex; align-items: baseline; gap: 5px; text-decoration: none;
  padding: 3px 9px; border-radius: 4px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
}
.hg-rank b { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hg-rank i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
a.hg-rank:hover { border-color: rgba(247,105,0,.5); }
a.hg-rank:hover b { color: var(--orange); }

/* Position keys — the defining stats as big callouts */
.keys-season { font-family: var(--display); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.keys-grid { display: flex; }
.key-block { flex: 1; text-align: center; padding: 16px 10px; border-right: 1px solid var(--border); }
.key-block:last-child { border-right: none; }
.key-val {
  font-family: var(--display); font-weight: 700; font-size: 28px; line-height: 1;
  color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.key-lbl {
  font-family: var(--display); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-top: 6px;
}

/* Board standing — rank + nearest peers on the board */
.bc-rank-row { display: flex; border-bottom: 1px solid var(--border); }
.bc-rank { flex: 1; text-align: center; padding: 14px 10px; border-right: 1px solid var(--border); }
.bc-rank:last-child { border-right: none; }
.bc-rank-num {
  display: block; font-family: var(--display); font-weight: 700; font-size: 26px;
  line-height: 1; color: var(--orange); font-variant-numeric: tabular-nums;
}
.bc-rank-lbl {
  display: block; margin-top: 5px; font-family: var(--display); font-size: 10px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
}
.bc-rank-lbl i { font-style: normal; opacity: .55; }
.bc-peer-label { font-family: var(--display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 11px 16px 5px; }
.bc-peers { list-style: none; }
.bc-peer { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.bc-peer:last-child { border-bottom: none; }
.bc-peer-rk { font-family: var(--display); font-weight: 600; font-size: 12px; color: var(--faint); width: 34px; font-variant-numeric: tabular-nums; }
.bc-peer-nm { flex: 1; font-size: 13px; color: var(--ink-2); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.bc-peer-nm:hover { color: var(--orange); }
.bc-peer-g { font-family: var(--display); font-weight: 700; font-size: 13px; padding: 2px 7px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.bc-peer-self { background: rgba(247,105,0,.09); }
.bc-peer-self .bc-peer-nm { color: var(--ink); font-weight: 700; }
.bc-peer-self .bc-peer-rk { color: var(--orange); }

/* ═══════════════════════════════════════════════════════════════════════════
   VISUAL POLISH — depth, texture, tactility (no new widgets)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero: flat file card (Direction A — nothing fades) */
.player-hero { background-image: none; }
.hero-photo { box-shadow: 0 6px 20px rgba(0,0,0,.5); }

/* The grade readout: tier glow makes the IP the brightest thing on the page */
.hg-num.tier-green, .hg-num.tier-yellow, .hg-num.tier-red { text-shadow: none; }
.hero-grade {
  background: var(--surface-2);
  box-shadow: none;
}

/* Grade chips read like physical tiles (top highlight + drop) everywhere they appear */
.hub-grade-badge, .hgr-chip, .bc-peer-g, .grade-hist-badge, .grade-score-big, .cmp-grade-num {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.4);
}
.grade-display-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 22px -10px rgba(0,0,0,.6); }

/* Cards get a hairline top highlight for elevation */
.pcard, .fsec, .cmp-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }

/* Board rows: tactile hover — the position rail lights up, the grade lifts */
.prospect-table tbody tr { transition: background .12s var(--ease-out); }
.prospect-table tbody tr:not(.shelf-row):hover td { background: var(--surface-3); }
.prospect-table tbody tr:not(.shelf-row):hover .rank-cell::before {
  box-shadow: 0 0 12px -1px var(--tc, var(--pc)); width: 5px;
}
.prospect-table tbody tr:not(.shelf-row):hover .rank-cell { color: var(--ink); }
.prospect-table tbody tr:not(.shelf-row):hover .hub-grade-badge { transform: translateY(-1px); }
.hub-grade-badge { transition: transform .12s var(--ease-out); }

/* Shelf headers: tier-colored bar gains a matching glow + crisper type */
.shelf-row.shelf-green  .shelf-bar { box-shadow: 0 0 14px -2px rgba(74,222,128,.7); }
.shelf-row.shelf-yellow .shelf-bar { box-shadow: 0 0 14px -2px rgba(251,191,36,.7); }
.shelf-row.shelf-red    .shelf-bar { box-shadow: 0 0 14px -2px rgba(248,113,113,.6); }
.shelf-label { text-shadow: 0 1px 0 rgba(0,0,0,.4); }

/* Masthead cursor + count get a subtle glow; key chips lift on hover */
.bm-cursor { box-shadow: 0 0 12px rgba(247,105,0,.6); }
.bm-count { text-shadow: none; }
.bm-chip { transition: border-color .12s, color .12s; }
.bm-chip:hover { color: var(--ink-2); border-color: var(--border-2); }

/* Position-aware key callouts: a faint top-down sheen */
.keys-grid { background: linear-gradient(180deg, rgba(255,255,255,.02), transparent); }

@media (prefers-reduced-motion: reduce) {
  .prospect-table tbody tr, .hub-grade-badge { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB HOOKS — featured top-of-board + risers/fallers (team-colored)
   ═══════════════════════════════════════════════════════════════════════════ */
.featured { margin-bottom: var(--sp-5); }
.feat-eyebrow {
  font-family: var(--display); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--muted); margin-bottom: 10px;
}
.feat-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.feat-card {
  position: relative; flex: 1 0 150px; min-width: 150px;
  display: flex; flex-direction: column; border-radius: 4px; text-decoration: none; overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border); border-top: 2px solid var(--border-2);
  transition: transform .15s var(--ease-out), border-color .15s;
}
.feat-card.feat-tier-green  { border-top-color: var(--tier-green); }
.feat-card.feat-tier-yellow { border-top-color: var(--tier-yellow); }
.feat-card.feat-tier-red    { border-top-color: var(--tier-red); }
.feat-card:hover { transform: translateY(-4px); border-color: var(--border-2); }
/* Portrait photo (shows head-to-chest) with a team-color fade only at the very bottom */
.feat-photo-wrap { position: relative; height: 200px; overflow: hidden; background: var(--surface-1); }
.feat-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; }
.feat-photo-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 52px; color: color-mix(in srgb, var(--acc) 40%, var(--muted)); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%); }
.feat-photo-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--deep) 35%, transparent) 82%, var(--surface-2) 100%);
}
.feat-rank {
  position: absolute; top: 8px; left: 10px; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 14px; color: #fff;
  font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.feat-logo { position: absolute; top: 7px; right: 8px; z-index: 2; width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(0,0,0,.7)); }
.feat-grade {
  position: absolute; bottom: 8px; left: 10px; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 25px; line-height: 1;
  padding: 3px 10px; border-radius: 3px; font-variant-numeric: tabular-nums;
  background: rgba(11,12,14,.82); box-shadow: none; font-stretch: 125%;
}
.feat-body { padding: 11px 12px 13px; }
.feat-name {
  font-family: var(--display); font-weight: 700; font-size: 15px; text-transform: uppercase;
  letter-spacing: .01em; color: var(--ink); line-height: 1.12;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feat-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.movers { display: flex; flex-direction: column; gap: 16px; margin-bottom: var(--sp-5); }
.trend-col { width: 100%; }
.trend-head {
  font-family: var(--display); font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; margin-bottom: 9px; display: flex; align-items: center; gap: 7px;
}
.trend-head-up      { color: var(--tier-green); }
.trend-head-down    { color: var(--tier-red); }
.trend-head-sleeper { color: #7dd3fc; }
.trend-head-bust    { color: #fbbf24; }
.trend-sub { font-family: var(--display); font-weight: 500; font-size: 10px; letter-spacing: .06em; color: var(--faint); margin-left: -2px; }
.trend-ar { font-size: 10px; }
.trend-strip { display: flex; flex-wrap: wrap; gap: 9px; }
.trend-delta { font-weight: 700; font-variant-numeric: tabular-nums; }
.trend-delta-up   { color: var(--tier-green); }
.trend-delta-down { color: var(--tier-red); }
.trend-chip {
  position: relative; flex: 1 1 175px; min-width: 0; display: flex; align-items: center; gap: 9px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 13px 8px 14px; overflow: hidden; transition: transform .12s var(--ease-out), border-color .12s;
}
.trend-chip::before { content: none; }
.trend-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acc) 55%, var(--border)); }
.trend-av { width: 26px; height: 34px; border-radius: 2px; object-fit: cover; object-position: top; flex-shrink: 0;
  border: 0; border-bottom: 2px solid var(--acc); display: block; background: var(--surface-3); }
.trend-av-ph { display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 12px; color: color-mix(in srgb, var(--acc) 60%, var(--muted)); background: color-mix(in srgb, var(--acc) 18%, var(--surface-1)); }
.trend-grade { font-family: var(--display); font-weight: 700; font-size: 15px; padding: 2px 8px; border-radius: 4px; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.trend-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trend-nm { font-family: var(--display); font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; }
.trend-pos { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (prefers-reduced-motion: reduce) {
  .feat-card, .trend-chip { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLAYER HERO — team-color accents (--acc / --deep set inline per school)
   ═══════════════════════════════════════════════════════════════════════════ */
.player-hero {
  position: relative;
  background-image: none;
  background-color: var(--surface);
}
.player-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--acc); box-shadow: none; z-index: 1;
}
.player-hero .player-name { color: var(--ink); text-shadow: none; }
.player-hero .meta-school { color: var(--acc); }
.player-hero .meta-school:hover { color: color-mix(in srgb, var(--acc) 75%, #fff); }
.player-hero .hero-jersey { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.hero-photo {
  width: 176px !important; height: 224px !important; border-radius: 2px !important;
  object-fit: cover; object-position: top;
  border: 0 !important; border-top: 3px solid var(--acc) !important;
  box-shadow: none !important;
}
.hero-logo-badge { display: none; }
.hero-grade { border-color: var(--border) !important; }
@media (max-width: 760px) {
  .hero-photo { width: 128px !important; height: 164px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEAD-TO-HEAD — team-colored matchup cards
   ═══════════════════════════════════════════════════════════════════════════ */
.cmp-card { position: relative; overflow: hidden; border-top: 2px solid var(--acc); }
.cmp-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; pointer-events: none;
  background: radial-gradient(120% 100% at 50% -30%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%);
}
.cmp-winner {
  border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc), 0 12px 34px -14px color-mix(in srgb, var(--acc) 65%, transparent);
}
.cmp-crown {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--acc); display: flex; align-items: center; gap: 4px;
}
.cmp-av-wrap { position: relative; width: 64px; margin: 0 auto 8px; z-index: 1; }
.cmp-photo { width: 64px; height: 64px; border-radius: 4px; object-fit: cover; border: 2px solid var(--acc); display: block; }
.cmp-av { width: 64px !important; height: 64px !important; margin: 0 !important; font-size: 24px !important; border: 2px solid var(--acc) !important; }
.cmp-logo { position: absolute; bottom: -6px; right: -8px; width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.cmp-name { position: relative; z-index: 1; color: var(--acc) !important; }
.cmp-name:hover { color: color-mix(in srgb, var(--acc) 75%, #fff) !important; }
.cmp-grade-num { line-height: 1; }
.cmp-grade-scale { font-size: .5em; font-weight: 500; opacity: .6; }
.cmp-grade-rng { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .85; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3 — cranked energy + team-colored deep-dive tabs + motion
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CRANK THE ENERGY ── */
.hg-num { font-size: 78px; letter-spacing: -.02em; }
.hg-num.tier-green, .hg-num.tier-yellow, .hg-num.tier-red { text-shadow: none; }
.player-hero {
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 72px),
    radial-gradient(130% 160% at 92% -25%, color-mix(in srgb, var(--acc) 42%, transparent), transparent 58%),
    linear-gradient(150deg, var(--bg) 0%, #11141b 52%, color-mix(in srgb, var(--deep) 46%, var(--bg)) 100%);
}
.hero-grade {
  background:
    radial-gradient(150% 130% at 100% 0%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.22));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px -12px rgba(0,0,0,.7),
              0 0 30px -16px var(--acc);
}
.feat-grade { font-size: 27px; }
.hub-grade-badge { font-size: 19px; }
.bm-title { font-size: 38px; }
.bm-count { font-size: 21px; }

/* ── TEAM COLOR REACHES THE DEEP-DIVE TABS ── */
.player-page .pcard-title, .player-page .pcard-title-row { border-left-color: var(--acc); }
.player-page .card-link-sm { color: var(--acc); }
.player-page .card-link-sm:hover { color: color-mix(in srgb, var(--acc) 70%, #fff); }
.player-page .ptab.active { border-bottom-color: var(--acc); color: #fff; }
.player-page .transfer-card { border-left-color: var(--acc); }
.player-page .stars-gold { color: var(--acc); }
.player-page .data-table tbody tr:hover td { background: color-mix(in srgb, var(--acc) 12%, var(--surface-3)) !important; }
/* The grade tab's big readout already pops; give its container a team frame */
.player-page #mock-links .pcard-title, .player-page #scouting-links .pcard-title { border-left-color: var(--acc); }

/* ── MOTION & LIFE ── */
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pop-in  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.board-masthead { animation: rise-in .4s var(--ease-out) both; }
.featured       { animation: fade-in .3s var(--ease-out) both; }
.feat-row .feat-card { animation: rise-in .5s var(--ease-out) both; }
.feat-row .feat-card:nth-child(1) { animation-delay: .04s; }
.feat-row .feat-card:nth-child(2) { animation-delay: .10s; }
.feat-row .feat-card:nth-child(3) { animation-delay: .16s; }
.feat-row .feat-card:nth-child(4) { animation-delay: .22s; }
.feat-row .feat-card:nth-child(5) { animation-delay: .28s; }
.trend-strip .trend-chip { animation: rise-in .45s var(--ease-out) both; }
.trend-strip .trend-chip:nth-child(1) { animation-delay: .05s; }
.trend-strip .trend-chip:nth-child(2) { animation-delay: .10s; }
.trend-strip .trend-chip:nth-child(3) { animation-delay: .15s; }
.trend-strip .trend-chip:nth-child(4) { animation-delay: .20s; }
.trend-strip .trend-chip:nth-child(5) { animation-delay: .25s; }

.player-hero { animation: rise-in .45s var(--ease-out) both; }
.hero-grade  { animation: pop-in .55s var(--ease-out) both .12s; }
.tab-body > * { animation: fade-in .35s var(--ease-out) both .05s; }

/* Tactile press feedback */
.feat-card:active, .trend-chip:active, .bstat-link:active, .gd-key:active { transform: scale(.975); }
.view-btn:active, .btn-nav-add:active, .btn-primary-lg:active, .hub-grade-badge { transition: transform .1s var(--ease-out); }
.prospect-table tbody tr:not(.shelf-row):active td { background: color-mix(in srgb, var(--tc, var(--orange)) 14%, var(--surface-3)); }

@media (prefers-reduced-motion: reduce) {
  .board-masthead, .featured, .feat-card, .trend-chip, .player-hero, .hero-grade, .tab-body > * { animation: none !important; }
  .feat-card:active, .trend-chip:active, .bstat-link:active, .gd-key:active { transform: none; }
}

/* ── Head-to-head matchup table (winner highlighted per category) ── */
.cmp-matchup { margin-bottom: 22px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); }
.mu-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.mu-table th, .mu-table td { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--border); border-left: 1px solid var(--border); }
.mu-table th:first-child, .mu-table td:first-child { border-left: none; }
.mu-table tbody tr:last-child td { border-bottom: none; }
.mu-corner { text-align: left; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--muted); background: var(--surface-1); }
.mu-player { background: var(--surface-1); border-top: 3px solid var(--acc); vertical-align: bottom; min-width: 120px; }
.mu-av { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; object-position: center 12%; border: 1.5px solid var(--acc); display: block; margin: 0 auto 7px; }
.mu-name { display: block; font-family: var(--display); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .01em; color: var(--acc); text-decoration: none; line-height: 1.1; }
.mu-name:hover { color: color-mix(in srgb, var(--acc) 70%, #fff); }
.mu-sub { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.mu-label { text-align: left; font-family: var(--display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap; }
.mu-cell { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.mu-win { color: var(--tier-green); background: rgba(74,222,128,.10); box-shadow: inset 0 0 0 1px rgba(74,222,128,.25); }
.mu-ar { font-size: 9px; margin-right: 4px; vertical-align: middle; }

/* ═══════════════════════════════════════════════════════════════════════════
   v4 — team logo watermark, clickable position filter chips, compare hook
   ═══════════════════════════════════════════════════════════════════════════ */

/* Broadcast-style team-logo watermark behind the player hero */
.hero-inner { position: relative; z-index: 1; }
.player-tabs { position: relative; z-index: 1; }
.hero-watermark {
  position: absolute; right: 5%; top: 50%; transform: translateY(-50%);
  width: 340px; height: 340px; object-fit: contain;
  opacity: .12; filter: drop-shadow(0 0 1px rgba(0,0,0,.4));
  pointer-events: none; z-index: 0; user-select: none;
}
@media (max-width: 760px) { .hero-watermark { width: 210px; height: 210px; right: -30px; opacity: .08; } }

/* Masthead position chips → clickable filters */
a.bm-chip { transition: border-color .12s, color .12s, background .12s, transform .12s; cursor: pointer; }
a.bm-chip:hover { color: var(--ink-2); border-color: color-mix(in srgb, var(--pc) 60%, var(--border)); transform: translateY(-1px); }
.bm-chip-on { color: #fff; border-color: var(--pc); background: color-mix(in srgb, var(--pc) 22%, var(--surface-2)); }

/* "Compare rivals" hook in Board Standing */
.bc-compare {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 16px; border-top: 1px solid var(--border);
  font-family: var(--display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--acc); text-decoration: none; transition: background .12s;
}
.bc-compare:hover { background: color-mix(in srgb, var(--acc) 12%, transparent); }

/* ── Position Rankings (leaderboards) ── */
.lb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.lb-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); animation: rise-in .45s var(--ease-out) both; }
.lb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border-2); background: var(--surface-1); border-left: 4px solid var(--pc); }
.lb-pos { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .04em; color: var(--pc); text-decoration: none; }
.lb-pos:hover { filter: brightness(1.2); }
.lb-pos-lbl { font-family: var(--display); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lb-list { list-style: none; }
.lb-row { display: flex; align-items: center; gap: 11px; padding: 9px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s var(--ease-out); }
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: color-mix(in srgb, var(--acc) 13%, var(--surface-3)); }
.lb-rk { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--faint); width: 16px; text-align: center; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.lb-av { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; object-position: center 12%; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface-1); }
.lb-av-ph { background: var(--surface-3); }
.lb-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lb-nm a { font-family: var(--display); font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-nm a:hover { color: var(--acc); }
.lb-school { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.lb-logo { width: 15px; height: 15px; object-fit: contain; }
.lb-poschip { font-family: var(--display); font-weight: 600; font-size: 10px; letter-spacing: .04em; color: var(--muted); background: var(--surface-3); border-radius: 4px; padding: 2px 6px; flex-shrink: 0; }
.lb-grade { font-family: var(--display); font-weight: 700; font-size: 16px; padding: 3px 9px; border-radius: 4px; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .lb-card { animation: none; } }

/* ── Board row hover preview card ── */
.row-preview {
  position: fixed; z-index: var(--z-tooltip, 600); width: 300px; left: 0; top: 0;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border-2); border-top: 3px solid var(--acc); border-radius: 4px;
  box-shadow: 0 18px 44px -16px rgba(0,0,0,.85), 0 0 30px -18px var(--acc);
  padding: 14px; pointer-events: none; opacity: 0; transform: translateY(6px) scale(.98);
  transition: opacity .13s var(--ease-out), transform .13s var(--ease-out);
}
.row-preview.on { opacity: 1; transform: none; }
.rp-head { display: flex; align-items: center; gap: 11px; }
.rp-photo { width: 52px; height: 52px; border-radius: 4px; object-fit: cover; object-position: center 12%; border: 2px solid var(--acc); flex-shrink: 0; }
.rp-photo-ph { display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--muted); background: var(--surface-3); }
.rp-id { flex: 1; min-width: 0; }
.rp-name { font-family: var(--display); font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: .01em; color: var(--acc); line-height: 1.1; }
.rp-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.rp-logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
.rp-gradeline { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.rp-grade { font-family: var(--display); font-weight: 700; font-size: 22px; padding: 3px 11px; border-radius: 4px; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.rp-label { font-family: var(--display); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.rp-range { margin-top: 12px; }
.rp-track { position: relative; height: 9px; border-radius: 4px; background: linear-gradient(90deg, #5a1f1f 0%, #5a1f1f 33%, #6b5310 33%, #6b5310 67%, #1f5b32 67%, #1f5b32 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.rp-fill { position: absolute; top: -2px; bottom: -2px; border-radius: 4px; border: 1.5px solid rgba(255,255,255,.85); background: rgba(255,255,255,.12); }
.rp-pin { position: absolute; top: 50%; width: 3px; height: 17px; border-radius: 2px; background: var(--orange); transform: translate(-50%,-50%); box-shadow: 0 0 0 2px rgba(0,0,0,.55); }
.rp-ends { display: flex; justify-content: space-between; margin-top: 8px; }
.rp-chip { font-family: var(--display); font-weight: 700; font-size: 12px; padding: 1px 7px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.rp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.rp-tag { font-size: 10px; font-weight: 600; background: var(--surface-3); color: var(--ink-2); border-radius: 2px; padding: 2px 7px; }
@media (prefers-reduced-motion: reduce) { .row-preview { transition: opacity .1s; transform: none; } }

/* ── Quick-compare: row checkbox + floating bar ── */
.ctrl-cell { padding: 0 6px; white-space: nowrap; }
.cmp-check { width: 15px; height: 15px; accent-color: var(--orange); cursor: pointer; vertical-align: middle; margin-right: 4px; flex-shrink: 0; }
.ctrl-cell .watchlist-btn { display: inline-flex; vertical-align: middle; padding: 2px; }
.cmp-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: var(--z-toast, 500); display: flex; align-items: center; gap: 14px;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 4px;
  padding: 9px 11px 9px 18px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.85);
  animation: rise-in .28s var(--ease-out);
}
.cmp-bar[hidden] { display: none; }
.cmp-bar-count { font-family: var(--display); font-size: 13px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.cmp-bar-count b { color: var(--orange); font-size: 16px; font-variant-numeric: tabular-nums; }
.cmp-bar-hint { font-size: 11px; color: var(--muted); }
.cmp-bar-go { background: var(--orange); color: #fff; border: none; border-radius: 4px; padding: 8px 16px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 13px; cursor: pointer; transition: background .12s; }
.cmp-bar-go:disabled { background: var(--surface-3); color: var(--faint); cursor: not-allowed; }
.cmp-bar-go:not(:disabled):hover { background: var(--orange-dk); }
.cmp-bar-clear { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 6px; }
.cmp-bar-clear:hover { color: var(--ink); }

/* ── Loading: shimmer placeholders behind big photos + static tiles for small avatars ── */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.feat-photo-wrap, .hero-photo-wrap {
  background-image:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc, var(--orange)) 20%, transparent), transparent 70%),
    linear-gradient(100deg, var(--surface-2) 38%, #262a34 50%, var(--surface-2) 62%);
  background-size: 100% 100%, 200% 100%; animation: shimmer 1.5s linear infinite;
}
/* Silhouette behind the photo slot — visible while loading or if the CDN image dies. */
.feat-photo-wrap::before {
  content: "\f4da"; /* bi-person-fill */
  font-family: "bootstrap-icons"; font-size: 64px;
  color: color-mix(in srgb, var(--acc, var(--orange)) 30%, var(--faint, #3a3f4c));
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 28px; z-index: 0;
}
.feat-photo { position: relative; z-index: 1; }
.hub-av, .lb-av, .trend-av, .cmp-av, .mu-av, .rp-photo { background-color: var(--surface-1); }
@media (prefers-reduced-motion: reduce) { .feat-photo-wrap, .hero-photo-wrap { animation: none; } }

/* ── Player page: Quick Notes editor styled to match the card system ── */
.qn-form { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 14px; }
.qn-input {
  width: 100%; min-height: 96px; resize: vertical;
  background: var(--surface-1); color: var(--ink);
  border: 1px solid var(--border-2); border-radius: 4px;
  padding: 10px 12px; font: inherit; font-size: 13px; line-height: 1.55;
  transition: border-color .15s, box-shadow .15s;
}
.qn-input::placeholder { color: var(--faint); }
.qn-input:focus {
  outline: none; border-color: var(--acc, var(--orange));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc, var(--orange)) 20%, transparent);
}
.qn-actions { display: flex; justify-content: flex-end; }

/* Numbers align in columns everywhere data reads as a table. */
.data-table td, .prospect-table td, .irow .ivalue, .rank-cell { font-variant-numeric: tabular-nums; }

/* ── Board infinite scroll sentinel ── */
.board-more {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 16px 0 4px; color: var(--muted); font-size: 13px;
}
.board-more.loading .board-more-btn { opacity: .5; pointer-events: none; }
.board-more-note b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Empty / no-results polish ── */
.empty-hub { border: 1px dashed var(--border-2); border-radius: var(--radius); background: var(--surface-1); }
.empty-hub i { opacity: .6; }

/* ── My Board / quick filters / export ── */
.bm-head { flex-wrap: wrap; }
.bm-export {
  align-self: center; margin-left: 6px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  font-family: var(--display); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 6px 12px; border-radius: 4px; cursor: pointer; transition: color .12s, border-color .12s;
}
.bm-export:hover { color: var(--orange); border-color: rgba(247,105,0,.5); }
.quick-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 18px; }
.qf-label { font-family: var(--display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-right: 2px; }
.qf-sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; }
.qf-chip {
  font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .03em;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 5px 11px; text-decoration: none; transition: color .12s, border-color .12s, background .12s;
}
.qf-chip:hover { border-color: var(--border-2); color: var(--ink); }
.qf-on { background: var(--orange); border-color: var(--orange); color: #fff; }
.qf-on:hover { color: #fff; }
.empty-sub { font-size: 13px; color: var(--muted); margin-top: -8px; }
.sbtn-export { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); cursor: pointer; }
.sbtn-export:hover { border-color: var(--orange); color: var(--orange); }

/* ═══════════════ EXPORT / PRINT — clean ink-friendly one-pager ═══════════════ */
@media print {
  @page { margin: 0.5in; }
  body { background: #fff !important; color: #111 !important; }
  .site-nav, .hub-search-bar, .quick-filters, .hub-actions, .movers, .featured,
  .bm-export, .bm-key, .row-preview, .player-tabs, .hero-tools, .hero-actions,
  .hero-watermark, #injury-alert, .card-link-sm, .add-btn, .watchlist-btn,
  .view-btn, .result-count, .last-updated-text, .hub-alert-icon, .tag-chip,
  .grade-reviewed-stamp, form { display: none !important; }
  .page-wrap { padding: 0 !important; max-width: 100% !important; }
  .board-masthead { border-color: #ccc !important; margin-bottom: 10px; }
  .bm-cursor { display: none !important; }
  .bm-title, .bm-count, .player-name, .hg-num { color: #111 !important; text-shadow: none !important; }
  .bm-meta-lbl { color: #555 !important; }
  .board-table-wrap { overflow: visible !important; }
  .prospect-table, .pcard, .data-table, .hero-grade, .keys-card, .board-ctx-card, .verdict-card {
    background: #fff !important; border-color: #ddd !important; box-shadow: none !important;
  }
  .prospect-table thead th { position: static !important; background: #f2f2f2 !important; color: #333 !important; border-color: #ccc !important; }
  .prospect-table td, .data-table td, .player-hub-name, .school-name, .rank-cell, .ivalue,
  .card-prose, .verdict-prose, .key-val, .bc-rank-num, .meas-val { color: #111 !important; }
  .prospect-table td { border-color: #eee !important; }
  .shelf-row td { background: #eee !important; }
  .shelf-label, .pcard-title { color: #111 !important; }
  .ilabel, .meas-lbl, .key-lbl, .hg-eyebrow, .hg-group, .hgr-end-lbl, .bc-rank-lbl { color: #555 !important; }
  .player-hero { background: #fff !important; border: 1px solid #ccc !important; }
  .player-hero .player-name, .player-hero .meta-school, .player-hero .hero-jersey { color: #111 !important; }
  .player-meta, .meta-pos, .meta-draft { color: #444 !important; }
  [class*="grade-bg-"], .pos-badge, .hgr-chip, .hg-dot { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .prospect-table tbody tr, .pcard, .keys-card, .board-ctx-card { break-inside: avoid; }
}

@media print {
  .hg-label, .hg-num .hg-scale, .bc-peer-nm, .bc-peer-nm a, .hg-rank b, .feat-name, .lb-nm a, .trend-nm { color: #111 !important; }
  .hg-group, .hg-rank i, .bc-peer-rk, .feat-meta, .keys-season { color: #555 !important; }
  .hg-dot, .hg-rank { border-color: #ccc !important; }
}

@media print {
  /* Only My Board (and player pages) are exportable — never the full big board */
  .board-table-wrap:not(.export-ok) { display: none !important; }
  .board-table-wrap:not(.export-ok)::after {
    content: "Export is available on My Board and individual player pages.";
    display: block; color: #555; font-style: italic; padding: 20px 0;
  }
}

/* ═══════════════ TEAMS INDEX ═══════════════ */
.conf-section { margin-bottom: var(--sp-6); }
.conf-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--sp-3); border-bottom: 1px solid var(--border); padding-bottom: 8px; }
/* Reveal: team cards rise in like the featured row — first two rows only, then instant */
.team-grid .team-card { animation: rise-in .45s var(--ease-out) both; animation-delay: .3s; }
.team-grid .team-card:nth-child(1) { animation-delay: .03s; }
.team-grid .team-card:nth-child(2) { animation-delay: .07s; }
.team-grid .team-card:nth-child(3) { animation-delay: .11s; }
.team-grid .team-card:nth-child(4) { animation-delay: .15s; }
.team-grid .team-card:nth-child(5) { animation-delay: .19s; }
.team-grid .team-card:nth-child(6) { animation-delay: .23s; }
@media (prefers-reduced-motion: reduce) { .team-grid .team-card { animation: none; } }
.conf-name { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-size: 18px; font-weight: 600; color: var(--ink); }
.conf-count { font-size: 12px; color: var(--muted); }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--sp-4); }
.team-card {
  display: flex; flex-direction: column; background: linear-gradient(135deg, color-mix(in srgb, var(--deep) 45%, var(--surface-2)), var(--surface-2) 62%);
  border: 1px solid var(--border); border-left: 3px solid var(--acc); border-radius: 4px;
  padding: 14px 14px 11px; text-decoration: none; color: var(--ink);
  transition: transform .15s var(--ease-out), border-color .15s, box-shadow .15s;
}
.team-card:hover { transform: translateY(-3px); border-color: var(--acc); box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--acc) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .team-card { transition: none; } .team-card:hover { transform: none; } }
.tc-top { display: flex; gap: 11px; align-items: center; margin-bottom: 11px; }
.tc-logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
.tc-logo-ph { display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 22px; }
.tc-id { min-width: 0; }
.tc-school { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-conf { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.tc-stats { display: flex; gap: 16px; padding: 9px 0; border-top: 1px solid var(--border); }
.tc-stat b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-stat i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tc-topplayer { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 9px; font-size: 12.5px; margin-top: auto; }
.tc-top-lbl { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; flex: none; }
.tc-top-nm { flex: 1; min-width: 0; color: var(--ink-2); font-weight: 600; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ═══════════════ TEAM PAGE ═══════════════ */
.team-hero {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border); border-left: 3px solid var(--acc); border-radius: 4px;
  padding: 34px 34px 28px; margin-bottom: var(--sp-5);
}
.th-inner { position: relative; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.th-logo { width: 132px; height: 132px; object-fit: contain; flex: none; filter: none; }
.th-id { min-width: 0; }
.th-name { font-family: var(--display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; letter-spacing: -.005em; font-size: clamp(38px, 4.5vw, 56px); line-height: .95; color: var(--ink); }
.th-meta { margin-top: 6px; font-size: 13px; color: var(--muted); }
.th-dist { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 12px; max-width: 420px; }
.th-dist-seg { min-width: 3px; }
.th-dist-green  { background: #3FD68F; }
.th-dist-yellow { background: #DBA84E; }
.th-dist-red    { background: #ef4444; }
.th-dist-none   { background: #3a3f4a; }
.th-dist-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.th-key-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }
.th-stats { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
.th-stats { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.th-stat b { display: block; font-family: var(--display); font-stretch: 125%; font-weight: 800;
             font-size: 52px; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.th-stat i { display: block; margin-top: 8px; font-style: normal; font-family: var(--display); font-stretch: 75%;
             font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--faint); }
.th-actions { position: relative; margin-top: 14px; }

/* ── Depth chart board ── */
.depth-board { margin-top: var(--sp-5); }
.dc-section { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 16px 18px 12px; margin-bottom: var(--sp-4); }
.dc-section-head { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 15px; margin-bottom: 10px; color: var(--ink); border-left: 3px solid var(--acc); padding-left: 9px; }
.dc-cols-head { display: grid; grid-template-columns: 64px 1fr 1fr 1fr; gap: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); padding-bottom: 6px; }
.dc-row { display: grid; grid-template-columns: 64px 1fr 1fr 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); }
.dc-pos { padding-top: 4px; }
.dc-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dc-empty {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px; padding: 9px 14px; border: 1px dashed var(--border); border-radius: 4px;
  color: var(--faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
}
.dc-chip {
  display: flex; align-items: center; gap: 8px; background: var(--surface-3);
  border: 1px solid var(--border); border-radius: 4px; padding: 6px 9px;
  text-decoration: none; color: var(--ink); min-width: 0; transition: border-color .12s, background .12s;
}
.dc-chip:hover { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--surface-3)); }
.dc-grade { font-size: 11.5px; font-weight: 800; border-radius: 4px; padding: 2px 6px; font-variant-numeric: tabular-nums; flex: none; }
.dc-grade-none { background: var(--surface-1); color: var(--faint); border: 1px solid var(--border); }
.dc-body { min-width: 0; }
.dc-nm { display: block; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-sub { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dc-reserves { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0 6px; border-top: 1px dashed var(--border); }
.dc-res-lbl { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.dc-res-chip { font-size: 11.5px; color: var(--ink-2); text-decoration: none; background: var(--surface-1); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }
.dc-res-chip:hover { border-color: var(--acc); color: var(--ink); }
.dc-res-role { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.dc-returners { border-top: none; padding-top: 0; }
.grade-txt-green  { color: var(--tier-green); }
.grade-txt-yellow { color: var(--tier-yellow); }
.grade-txt-red    { color: var(--tier-red); }
@media (max-width: 860px) {
  .dc-cols-head { display: none; }
  .dc-row { grid-template-columns: 1fr; gap: 6px; }
  .dc-row .dc-cell:nth-child(2)::before { content: "1st string"; }
  .dc-row .dc-cell:nth-child(3)::before { content: "2nd string"; }
  .dc-row .dc-cell:nth-child(4)::before { content: "3rd string"; }
  .dc-row .dc-cell::before { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
  .th-stats { margin-left: 0; }
}

/* ═══════════════ PRINT REPORT — dedicated scouting one-pager ═══════════════ */
.print-only, .print-report { display: none; }
@media print {
  /* Player page: print ONLY the dedicated report, never the on-screen chrome */
  .player-page, #injury-alert { display: none !important; }
  .print-report { display: block !important; color: #111; font-size: 12px; line-height: 1.45; }
  .print-only { display: block !important; }

  .pr-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 3px solid #111; padding-bottom: 8px; margin-bottom: 14px; }
  .pr-brand { font-family: var(--display), 'Oswald', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .02em; color: #111; }
  .pr-brand span { color: #c2410c; }
  .pr-title { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: #555; }
  .pr-date { margin-left: auto; font-size: 11px; color: #555; }

  .pr-id { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 14px; }
  .pr-photo { width: 86px; height: 86px; object-fit: cover; border-radius: 10px; border: 1px solid #ccc; }
  .pr-id-main { flex: 1; min-width: 0; }
  .pr-id-main h1 { font-family: var(--display), 'Oswald', sans-serif; font-size: 26px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: #111; line-height: 1.05; }
  .pr-jersey { color: #777; font-weight: 500; }
  .pr-meta { margin-top: 4px; font-size: 12px; color: #333; }
  .pr-meas { margin-top: 5px; font-size: 11.5px; color: #555; }
  .pr-grade-box { text-align: right; flex: none; }
  .pr-grade-num { display: inline-block; font-size: 26px; font-weight: 800; padding: 4px 14px; border-radius: 10px; font-variant-numeric: tabular-nums; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pr-grade-lbl { margin-top: 4px; font-size: 12px; font-weight: 700; color: #111; }
  .pr-grade-sub { margin-top: 2px; font-size: 10.5px; color: #555; }

  .pr-sec { margin-bottom: 12px; break-inside: avoid; }
  .pr-sec-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #555; border-bottom: 1px solid #ddd; padding-bottom: 3px; margin-bottom: 6px; }
  .pr-prose { font-size: 12px; color: #111; white-space: pre-line; }
  .pr-2col { display: flex; gap: 20px; }
  .pr-2col > div { flex: 1; min-width: 0; }
  .pr-line { font-size: 12px; color: #111; margin-bottom: 3px; }
  .pr-line b { font-weight: 700; }
  .pr-line i { font-style: normal; color: #555; }

  .pr-stats { width: 100%; border-collapse: collapse; font-size: 11px; }
  .pr-stats th { text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: #555; border-bottom: 1px solid #bbb; padding: 3px 6px 3px 0; }
  .pr-stats td { border-bottom: 1px solid #eee; padding: 3px 6px 3px 0; color: #111; font-variant-numeric: tabular-nums; }

  .pr-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  .pr-tag { font-size: 10px; border: 1px solid #bbb; border-radius: 999px; padding: 2px 8px; color: #333; }

  .pr-foot { margin-top: 16px; border-top: 1px solid #ddd; padding-top: 6px; display: flex; gap: 10px; font-size: 9.5px; color: #777; }
  .pr-foot .pf-r { margin-left: auto; }

  /* My Board print masthead (replaces the on-screen masthead in print) */
  .pr-board-head { display: flex !important; align-items: baseline; gap: 12px; border-bottom: 3px solid #111; padding-bottom: 8px; margin-bottom: 12px; }
  .board-masthead { display: none !important; }
  .empty-hub { background: #fff !important; border-color: #ddd !important; color: #333 !important; }
  .empty-hub p { color: #333 !important; }

  /* Team page prints its natural layout, recolored (same treatment as the board) */
  .team-hero, .dc-section, .team-card { background: #fff !important; border-color: #ccc !important; box-shadow: none !important; }
  .th-name, .dc-nm, .conf-name, .tc-school { color: #111 !important; }
  .th-meta, .dc-sub, .th-stat i, .dc-res-lbl, .tc-conf { color: #555 !important; }
  .th-stat b { color: #111 !important; }
  .dc-chip, .dc-res-chip { background: #fff !important; border-color: #ccc !important; color: #111 !important; }
  .th-actions, .hero-watermark { display: none !important; }
  .dc-section, .dc-row { break-inside: avoid; }
}

/* ═══════════════ HOME ═══════════════ */
.home-hero { padding: var(--sp-7) 0 var(--sp-6); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-6); }
.hh-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: var(--orange); font-weight: 700; margin-bottom: 14px; }
.hh-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(38px, 5.5vw, 60px); line-height: .95; color: var(--ink); text-wrap: balance; }
.hh-sub { margin-top: 16px; max-width: 60ch; font-size: 15px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.hh-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hh-cta {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 700; font-size: 13.5px; padding: 11px 18px; border-radius: 4px;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--border-2);
  transition: border-color .15s, background .15s, transform .15s var(--ease-out);
}
.hh-cta:hover { border-color: var(--orange); transform: translateY(-1px); }
.hh-cta-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
.hh-cta-primary:hover { background: var(--orange-dk); border-color: var(--orange-dk); }

/* ── Hero search (front-and-center navigation) ─────────────── */
.hh-search { position: relative; margin-top: 24px; max-width: 560px; }
.hh-search-ic {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 15px; pointer-events: none; z-index: 1;
}
.hh-search-in {
  width: 100%; height: 48px; padding: 0 46px 0 44px;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 4px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.hh-search-in::placeholder { color: var(--muted); }
.hh-search-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.hh-search-in:focus {
  outline: none; background: var(--surface-1); border-color: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent);
}
.hh-search-kbd {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 22px; height: 22px;
  font-family: var(--display); font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 4px;
  pointer-events: none; transition: opacity .15s;
}
.hh-search-in:focus ~ .hh-search-kbd { opacity: 0; }
.hh-search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  list-style: none; margin: 0; padding: 6px;
  background: var(--surface-1); border: 1px solid var(--border-2); border-radius: 4px;
  box-shadow: var(--sh-md); max-height: 380px; overflow-y: auto;
}
.hh-sr-item {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 4px;
  cursor: pointer; scroll-margin: 6px;
}
.hh-sr-item.hh-sr-on, .hh-sr-item:hover { background: var(--surface-3); }
.hh-sr-av { flex: none; width: 34px; height: 34px; border-radius: 4px; object-fit: cover; background: var(--surface-2); }
.hh-sr-av-ph { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); }
.hh-sr-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.hh-sr-nm { font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-sr-sub { font-size: 12px; color: var(--muted); }
.hh-sr-grade {
  flex: none; min-width: 34px; text-align: center; padding: 3px 7px; border-radius: 4px;
  font-family: var(--display); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums;
}
.hh-sr-empty { padding: 14px 12px; font-size: 13px; color: var(--muted); text-align: center; }

/* ── What's New — daily-hub headline feed ──────────────────── */
.wn-feed {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
}
.wn-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  text-decoration: none; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  transition: border-color .14s, background .14s, transform .14s var(--ease-out);
}
.wn-item:hover { border-color: color-mix(in srgb, var(--acc, var(--orange)) 55%, var(--border)); background: var(--surface-3); transform: translateY(-1px); }
.wn-face { position: relative; flex: none; }
.wn-av { width: 32px; height: 32px; border-radius: 3px; object-fit: cover; background: var(--surface-1); }
.wn-av-ph { display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); }
.wn-logo {
  position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; object-fit: contain;
  background: var(--surface-1); border: 1.5px solid var(--surface-2); border-radius: 4px; padding: 1px;
}
.wn-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.wn-headline {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wn-item:hover .wn-headline { color: var(--orange); }
.wn-meta { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); flex-wrap: wrap; }
.wn-name { font-weight: 700; color: var(--ink-2); }
.wn-sub { color: var(--muted); }
.wn-src { color: var(--muted); font-weight: 500; }
.wn-dot { color: var(--faint); }
.wn-time { color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wn-grade {
  flex: none; align-self: flex-start; min-width: 36px; text-align: center;
  padding: 4px 8px; border-radius: 4px;
  font-family: var(--display); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) { .wn-feed { grid-template-columns: 1fr; } }

/* Section heads */
.home-sec { margin-bottom: var(--sp-6); }
.hsec-head {
  position: relative; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--hairline);
}
.hsec-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; background: var(--orange); }
.hsec-idx {
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 11px;
  letter-spacing: .14em; color: var(--faint); font-variant-numeric: tabular-nums;
}
.hsec-title { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.hsec-head .hsec-note, .hsec-head .hsec-link { margin-left: auto; }
.hsec-link { font-size: 12.5px; font-weight: 600; color: var(--orange); text-decoration: none; }
.hsec-link:hover { text-decoration: underline; }
.hsec-note { font-size: 12px; color: var(--muted); }

/* Big-board preview + rail */
.hh-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--sp-5); align-items: start; }
.mini-board { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.mb-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; text-decoration: none; color: var(--ink); border-top: 1px solid var(--border); transition: background .12s; }
.mb-row:first-child { border-top: none; }
.mb-row:hover { background: var(--surface-3); }
.mb-rank { flex: none; width: 22px; text-align: right; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mb-av { flex: none; width: 32px; height: 32px; border-radius: 4px; object-fit: cover; background: var(--surface-1); }
.mb-av-ph { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); }
.mb-nm { min-width: 0; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-row .pos-badge, .mb-row .hub-grade-badge { flex: none; }
.mb-school { display: flex; align-items: center; gap: 7px; margin-left: auto; flex: none; color: var(--muted); font-size: 12.5px; }
.mb-school img { width: 20px; height: 20px; object-fit: contain; }
.mb-row-more { justify-content: center; color: var(--orange); font-weight: 700; font-size: 12.5px; }

.hh-rail { display: flex; flex-direction: column; gap: var(--sp-4); }
.rail-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 12px 14px; }
.rail-head { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin-bottom: 5px; }
.rail-head .bi { color: var(--orange); font-size: 12px; }
.rail-head a { margin-left: auto; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--orange); text-decoration: none; }
.rail-head a:hover { text-decoration: underline; }
.rail-sub { margin-left: auto; font-family: 'Inter', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--faint); }
.rail-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.rail-pos { flex: none; width: 26px; font-family: var(--display); font-weight: 700; font-size: 12.5px; }
.rail-delta { flex: none; width: 36px; font-weight: 800; font-size: 12px; color: var(--tier-green); font-variant-numeric: tabular-nums; }
.rail-nm { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s; }
.rail-row:hover .rail-nm { color: var(--orange); }
.rail-nm-sub { font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); }
.rail-row .hub-grade-badge { flex: none; }

/* Program wall */
.logo-wall { display: flex; flex-wrap: wrap; gap: 6px; }
.lw-tile { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; transition: border-color .12s, background .12s; }
.lw-tile:hover { border-color: var(--orange); background: var(--surface-3); }
.lw-tile img { width: 28px; height: 28px; object-fit: contain; }

.hh-recent { flex-wrap: wrap; }
.home-close { border-top: 1px solid var(--border); margin-top: var(--sp-6); padding: var(--sp-4) 0 var(--sp-5); }
.home-close p { font-size: 12.5px; color: var(--muted); max-width: 72ch; line-height: 1.6; }
.home-close a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.home-close a:hover { color: var(--orange); }

@media (max-width: 900px) {
  .home-hero { padding-top: var(--sp-5); }
  .hh-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mb-school { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-cta { transition: none; }
  .hh-cta:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v5 — ANALYTICS DEPTH
   Key-stat position context, career strip, board range bands,
   team grade histogram + room strength, cross-page motion polish.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Player: key-stat context (percentile vs national position cohort) ── */
.key-ctx { margin-top: 9px; }
.key-ctx-track {
  height: 4px; border-radius: 2px; background: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--border); overflow: hidden;
}
.key-ctx-fill {
  height: 100%; width: var(--w); border-radius: 2px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 55%, transparent), var(--acc));
  transform-origin: left center; animation: ctx-grow .6s var(--ease-out) both .15s;
}
@keyframes ctx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.key-ctx-lbl {
  margin-top: 5px; font-family: var(--display); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.key-ctx-lbl b { color: var(--ink-2); font-weight: 700; }

/* ── Player: career production strip (overview) ── */
.career-table { font-size: 12.5px; }
.career-table th, .career-table td { padding: 8px 12px; }
.career-table td:first-child { color: var(--ink); }
.career-team { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

/* ── Team: grade histogram (hero) ── */
.th-hist { margin-top: 14px; max-width: 460px; }
.th-hist-bars {
  position: relative; display: flex; align-items: flex-end; gap: 2px;
  height: 58px; padding-bottom: 1px; border-bottom: 1px solid var(--border-2);
}
.th-hist-slot { flex: 1; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.th-hist-slot:hover .th-hist-bar { filter: brightness(1.25) saturate(1.1); }
.th-hist-bar {
  width: 100%; height: max(var(--h), 3px); border-radius: 2px 2px 0 0;
  transform-origin: bottom center; animation: hist-rise .55s var(--ease-out) both .1s;
  transition: filter .12s var(--ease-out);
}
@keyframes hist-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.th-hist-median {
  position: absolute; top: -6px; bottom: -1px; width: 2px;
  background: var(--ink); border-radius: 1px; transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}
.th-hist-median-lbl {
  position: absolute; top: -7px; left: 7px;
  font-family: var(--display); font-size: 9.5px; font-weight: 600;
  letter-spacing: .07em; color: var(--ink-2); white-space: nowrap;
}
.th-hist-axis {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-family: var(--display); font-size: 9.5px; color: var(--faint);
  font-variant-numeric: tabular-nums; letter-spacing: .04em;
}

/* ── Team: room strength vs FBS pool ── */
.ps-board { margin-bottom: var(--sp-5); }
.ps-card {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 16px 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.ps-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.ps-row:last-of-type { border-bottom: none; }
.ps-row .pos-badge { flex: 0 0 44px; text-align: center; }
.ps-bar { flex: 1 1 220px; min-width: 120px; }
.ps-track {
  position: relative; height: 10px; border-radius: 4px;
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--border);
}
.ps-fill {
  position: absolute; top: 2px; bottom: 2px; left: 2px; width: var(--w);
  border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 40%, transparent), var(--pc));
  transform-origin: left center; animation: ctx-grow .6s var(--ease-out) both .12s;
}
.ps-pool-tick {
  position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px;
  background: var(--ink-2); transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55);
}
.ps-avg {
  flex: 0 0 64px; font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ps-avg i {
  display: block; font-style: normal; font-family: var(--display); font-weight: 500;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.ps-edge {
  flex: 0 0 auto; font-family: var(--display); font-weight: 700; font-size: 12px;
  padding: 2px 8px; border-radius: 4px; border: 1px solid; font-variant-numeric: tabular-nums;
}
.ps-edge-up   { color: var(--tier-green); border-color: rgba(74,222,128,.4);  background: rgba(74,222,128,.09); }
.ps-edge-down { color: var(--tier-red);   border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.09); }
.ps-top {
  flex: 0 1 200px; min-width: 0; display: flex; align-items: center; gap: 8px;
  justify-content: flex-end; text-decoration: none; margin-left: auto;
}
.ps-top-nm {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .12s;
}
.ps-top:hover .ps-top-nm { color: var(--acc); }
.ps-foot {
  padding: 9px 0 4px; font-size: 11px; color: var(--faint); line-height: 1.5;
}
@media (max-width: 720px) {
  .ps-row { flex-wrap: wrap; gap: 8px 12px; }
  .ps-bar { flex: 1 1 100%; order: 5; }
  /* Deterministic 3-line stack: [badge · avg · edge] / [top prospect] / [bar] */
  .ps-top { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; order: 4; }
}

/* ── Nav: fit the icon row inside a 375px viewport (it was 24px over, panning
   every mobile page sideways) ── */
@media (max-width: 620px) {
  .site-nav { padding: 0 10px; }
  .nav-right { gap: 2px; }
  .btn-nav-link, .btn-nav-add { padding: 7px 7px; }
  .btn-nav-gear { width: 30px; }
}

/* ── Cross-document view transitions: pages hand off with a quick crossfade ── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }

/* ── Keyboard focus: a visible ring everywhere, tuned for the dark surfaces ── */
:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 2px;
  border-radius: 4px;
}
.prospect-table tbody tr:focus-visible td { background: var(--surface-3); }

/* ── Reduced motion: everything above settles instantly ── */
@media (prefers-reduced-motion: reduce) {
  .key-ctx-fill, .ps-fill, .th-hist-bar { animation: none; }
  .th-hist-slot:hover .th-hist-bar { filter: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── Print: team analytics keep exact colors ── */
@media print {
  .th-hist-bar, .ps-fill, .ps-edge { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .th-hist-bars { border-color: #ccc !important; }
  .th-hist-median { background: #111 !important; box-shadow: none !important; }
  .th-hist-median-lbl, .ps-avg, .ps-top-nm { color: #111 !important; }
  .th-hist-axis, .key-ctx-lbl, .ps-avg i, .ps-foot { color: #555 !important; }
  .ps-card { background: #fff !important; border-color: #ccc !important; }
  .ps-track, .key-ctx-track { background: #f2f2f2 !important; box-shadow: inset 0 0 0 1px #ddd !important; }
  .ps-pool-tick { background: #333 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v6 — UI CRAFT PASS
   True 9-band tier ladder in the hero grade panel, sticky player identity
   bar, entrance rhythm on overview cards, hero typography crank.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero name: bigger broadcast presence ── */
.player-hero .player-name { font-size: 46px; line-height: .98; }
@media (max-width: 760px) { .player-hero .player-name { font-size: 30px; } }

/* ── Grade scale → true 9-band tier ladder (replaces the flat 3-zone strip).
   Off-tier bands sit dimmed; the player's band burns at full color, so the
   readout carries "where he sits on the whole scale" at a glance. ── */
.hgr-ladder { display: none; }   /* scale strip retired — floor/ceiling figures carry the range */
.hgr-seg {
  height: 100%; min-width: 2px;
  box-shadow: inset -1px 0 0 rgba(0,0,0,.5);
  filter: saturate(1.1) brightness(1.12);
}
span.hgr-seg:first-of-type { border-radius: 4px 0 0 6px; }
span.hgr-seg:last-of-type  { border-radius: 0 6px 6px 0; box-shadow: none; }
.hgr-seg.hgr-here { filter: saturate(1.2) brightness(1.35); }

/* The range IS the lit stretch of the line: everything outside floor→ceiling
   sits under a dark veil. One continuous bar — no floating window box. */
.hgr-veil {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  background: rgba(4,5,7,.72);
  transition: opacity .18s var(--ease-out);
  animation: fill-reveal .5s var(--ease-out) both .45s;
}
.hgr-veil-l { left: 0;  border-radius: 4px 0 0 6px; box-shadow: 1px 0 0 rgba(255,255,255,.28); }
.hgr-veil-r { right: 0; border-radius: 0 6px 6px 0; box-shadow: -1px 0 0 rgba(255,255,255,.28); }
.hgr-track:hover .hgr-veil { opacity: .45; }
@keyframes fill-reveal { from { opacity: 0; } to { opacity: 1; } }
/* The white range bubble rides above the veils; the pin above everything */
.hgr-fill { z-index: 2; animation: fill-reveal .5s var(--ease-out) both .45s; }
.hgr-pin { z-index: 3; }
.hgr-pin  { animation: pin-drop .45s var(--ease-out) both .62s; }
@keyframes pin-drop {
  from { opacity: 0; transform: translate(-50%, -150%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
/* Grade number lands with a settle pulse right as the count-up finishes */
.hg-num { transform-origin: left 70%; animation: num-land .4s var(--ease-out) both .66s; }
@keyframes num-land { 0% { transform: scale(1); } 45% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* ── Sticky identity bar (fixed under the nav; team-colored) ── */
.pbar {
  position: fixed; top: 54px; left: 0; right: 0; z-index: calc(var(--z-nav) - 10);
  transform: translateY(-110%); transition: transform .24s var(--ease-out);
  background: linear-gradient(90deg, color-mix(in srgb, var(--deep) 55%, var(--bg)), var(--bg) 68%);
  border-bottom: 1px solid color-mix(in srgb, var(--acc) 45%, var(--border));
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.85);
}
.pbar.on { transform: translateY(0); }
.pbar-inner {
  display: flex; align-items: center; gap: 12px; width: 100%;
  max-width: 1160px; margin: 0 auto; padding: 7px 20px;
  background: none; border: none; cursor: pointer; text-align: left; font-family: inherit;
}
.pbar-av {
  width: 32px; height: 32px; border-radius: 4px; object-fit: cover; object-position: center 12%;
  border: 1.5px solid var(--acc); flex: none; background: var(--surface-1);
}
.pbar-av-logo { object-fit: contain; padding: 2px; }
.pbar-nm {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  text-transform: uppercase; letter-spacing: .015em; color: var(--acc);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pbar-meta { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pbar-rank {
  margin-left: auto; font-family: var(--display); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap;
}
.pbar-rank b { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; margin-right: 3px; }
.pbar-grade {
  flex: none; font-family: var(--display); font-weight: 700; font-size: 16px;
  padding: 3px 10px; border-radius: 4px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.4);
}
.pbar-rank + .pbar-grade { margin-left: 0; }
.pbar-grade:only-child, .pbar-meta + .pbar-grade { margin-left: auto; }
@media (max-width: 560px) {
  .pbar-meta, .pbar-rank { display: none; }
  .pbar-grade { margin-left: auto; }
}

/* ── Overview cards: staggered rise on entry (both columns) ── */
.ov-left .pcard,  .ov-right .pcard  { animation: rise-in .45s var(--ease-out) both; }
.ov-left .pcard:nth-child(1),  .ov-right .pcard:nth-child(1) { animation-delay: .06s; }
.ov-left .pcard:nth-child(2),  .ov-right .pcard:nth-child(2) { animation-delay: .13s; }
.ov-left .pcard:nth-child(3),  .ov-right .pcard:nth-child(3) { animation-delay: .20s; }
.ov-left .pcard:nth-child(4),  .ov-right .pcard:nth-child(4) { animation-delay: .27s; }
.ov-left .pcard:nth-child(n+5), .ov-right .pcard:nth-child(n+5) { animation-delay: .33s; }

/* ── Reduced motion: v6 settles instantly ── */
@media (prefers-reduced-motion: reduce) {
  .hgr-veil, .hgr-fill, .hgr-pin, .hg-num, .ov-left .pcard, .ov-right .pcard { animation: none; }
  .pbar, .hgr-veil { transition: none; }
}

/* ── Print: the identity bar never prints ── */
@media print { .pbar { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   v7 — DRAW-THEM-IN
   Page atmosphere, nav depth + current-page state, cinematic home hero with
   the №1 prospect, tier strips on team cards, featured №1 rankings rows.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Atmosphere: a faint stadium glow + yard-line grain instead of flat black.
   The glow lives at the top of the document and scrolls away naturally. ── */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(90% 520px at 50% -120px, rgba(247,105,0,.06), transparent 72%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.006) 0 1px, transparent 1px 108px);
}

/* ── Nav: vertical depth + a lit state for the page you're on ── */
.site-nav {
  background: linear-gradient(180deg, #0e0f14, #070608 90%);
  border-bottom: 2px solid var(--orange);
}
.btn-nav-link.nav-on {
  color: #fff;
  background: rgba(247,105,0,.15);
  box-shadow: inset 0 0 0 1px rgba(247,105,0,.38);
  border-radius: 4px;
}

/* ── Home hero: lede + featured №1 prospect ── */
.hh-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 340px);
  gap: var(--sp-6); align-items: center;
}
.hh-title-acc { color: var(--orange); }
.hh-title { font-size: clamp(40px, 6vw, 68px); }
/* terminal stat readout — one strip, hairline-divided, no boxes */
.hh-statline {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  margin-top: 18px; background: none; border-radius: 0; overflow: visible;
}
.hh-stat { padding: 0 26px 0 0; text-align: left; min-width: 0; }
.hh-stat + .hh-stat { border-left: 1px solid var(--border); padding-left: 26px; }
.hh-stat b {
  display: block; font-family: var(--display); font-stretch: 125%; font-weight: 800;
  font-size: 28px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.hh-stat:nth-child(3) b { color: var(--orange); }   /* draft caliber runs hot */
.hh-stat i {
  display: block; margin-top: 6px; font-style: normal; font-family: var(--display);
  font-stretch: 75%; font-weight: 600; font-size: 10px; text-transform: uppercase;
  letter-spacing: .14em; color: var(--faint);
}
@media (max-width: 560px) { .hh-statline { display: flex; } .hh-stat { flex: 1 1 45%; } }
.hh-feat {
  position: relative; display: block; border-radius: 4px; overflow: hidden;
  text-decoration: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--deep) 60%, var(--surface-2)), var(--surface-2) 75%);
  border: 1px solid color-mix(in srgb, var(--acc) 42%, var(--border));
  box-shadow: 0 20px 48px -20px color-mix(in srgb, var(--acc) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
  animation: pop-in .5s var(--ease-out) both .1s;
}
.hh-feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px -20px color-mix(in srgb, var(--acc) 65%, transparent), inset 0 1px 0 rgba(255,255,255,.08);
}
.hh-feat-eyebrow {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font-family: var(--display); font-weight: 600; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase; color: #fff;
  background: color-mix(in srgb, var(--acc) 78%, #000);
  padding: 4px 10px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.hh-feat-photo-wrap {
  position: relative; height: 348px;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--acc) 24%, transparent), transparent 70%), var(--surface-1);
}
.hh-feat-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 8%; display: block; }
.hh-feat-photo-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--deep) 45%, transparent) 82%, var(--surface-2) 100%);
}
.hh-feat-logo {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 40px; height: 40px; object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.7));
}
.hh-feat-grade {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1;
  padding: 5px 13px; border-radius: 4px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 10px rgba(0,0,0,.55);
}
.hh-feat-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px 15px;
}
.hh-feat-id { min-width: 0; }
.hh-feat-nm {
  display: block; font-family: var(--display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: .01em; color: var(--ink); line-height: 1.05;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hh-feat-meta { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* The grade stays behind the click — the card sells the player, not the number */
.hh-feat-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--orange);
  border: 1px solid rgba(247,105,0,.45); border-radius: 4px; padding: 7px 12px;
  transition: background .15s, color .15s;
}
.hh-feat:hover .hh-feat-cta { background: var(--orange); color: #fff; }
.hh-feat-cta .bi { font-size: 11px; }
@media (max-width: 900px) {
  .hh-grid { grid-template-columns: 1fr; }
  .hh-feat { max-width: 420px; }
  .hh-feat-photo-wrap { height: 280px; }
  .hh-statline { gap: var(--sp-5); }
}

/* (Teams cards: median + tier strip removed on request — no casual grade leaks) */

/* ── Home is grade-free: rank + face + identity carry the hook, numbers live
   behind the click. Rows get heavier and more tactile to compensate. ── */
.mb-row { padding: 11px 16px; }
.mb-rank {
  width: 30px; font-size: 19px; color: var(--faint);
  transition: color .12s;
}
.mb-row:hover .mb-rank { color: var(--acc, var(--orange)); }
.mb-av { width: 40px; height: 40px; border-radius: 4px; object-position: center 12%; object-fit: cover; }
.mb-nm { font-size: 14.5px; }
.mb-go {
  flex: none; margin-left: 2px; font-size: 13px; color: var(--faint);
  transition: color .12s, transform .15s var(--ease-out);
}
.mb-row:hover .mb-go, .rail-row:hover .mb-go, .trend-chip:hover .mb-go {
  color: var(--acc, var(--orange)); transform: translateX(3px);
}
.mb-row-more { color: var(--orange); }
.rail-av {
  flex: none; width: 28px; height: 28px; border-radius: 4px;
  object-fit: cover; object-position: center 12%;
  border: 1px solid var(--border); background: var(--surface-1); display: block;
}
.rail-av-ph { background: var(--surface-3); }
.rail-row .mb-go { margin-left: auto; }
.trend-chip .mb-go { margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .mb-go { transition: none; }
  .mb-row:hover .mb-go, .rail-row:hover .mb-go, .trend-chip:hover .mb-go { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8 — HOME AS A FRONT PAGE
   Full-width hero, Stock Watch (risers/fallers/sleepers/busts), method band,
   conference coverage chips, real footer. Still zero grade numbers.
   ═══════════════════════════════════════════════════════════════════════════ */

.home-hero { padding: var(--sp-6) 0 var(--sp-5); }
.hh-sub { max-width: 62ch; }

/* ── Stock Watch: four vertical columns of team-colored player chips ── */
.sw-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-4) var(--sp-5);
}
.sw-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sw-col .trend-head { margin-bottom: 3px; }
.sw-chip { flex: none; }
.sw-empty {
  font-size: 12px; line-height: 1.55; color: var(--faint);
  border: 1px dashed var(--border-2); border-radius: 4px; padding: 12px 13px;
}

/* ── Method band: three prose columns, hairline-separated ── */
.method-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4) var(--sp-5);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 14px 16px; box-shadow: none;
}
.method-band p {
  font-size: 13px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty;
  padding-left: 14px; border-left: 1px solid var(--border-2);
}
.method-band p b {
  display: block; margin-bottom: 4px;
  font-family: var(--display); font-weight: 600; font-size: 14px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
}

/* ── Conference coverage chips ── */
.conf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-4); }
.conf-chip {
  display: inline-flex; align-items: baseline; gap: 7px; text-decoration: none;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  padding: 7px 13px; transition: border-color .12s, background .12s;
}
.conf-chip:hover { border-color: var(--orange); background: var(--surface-3); }
.conf-chip b {
  font-family: var(--display); font-weight: 700; font-size: 13.5px;
  letter-spacing: .03em; color: var(--ink);
}
.conf-chip span { font-size: 11px; color: var(--muted); }

/* ── Footer: a real close, not a whisper ── */
.home-close { display: flex; flex-direction: column; gap: 12px; }
.hc-brand {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: .04em; color: var(--ink);
}
.hc-brand span { color: var(--orange); }
.hc-nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.hc-nav a {
  font-family: var(--display); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); text-decoration: none; transition: color .12s;
}
.hc-nav a:hover { color: var(--orange); }

@media (max-width: 720px) {
  .method-band { padding: 16px 16px; }
}

/* ── Rankings: the №1 at each position is featured, team-colored ── */
.lb-row:first-child {
  padding: 14px 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 15%, transparent), transparent 72%);
}
.lb-row:first-child .lb-av { width: 52px; height: 52px; border-radius: 4px; border-color: var(--acc); }
.lb-row:first-child .lb-nm a { font-size: 17px; }
.lb-row:first-child .lb-grade { font-size: 19px; padding: 4px 11px; }
.lb-row:first-child .lb-rk { color: var(--acc); font-size: 15px; }

/* ── Reduced motion / print ── */
@media (prefers-reduced-motion: reduce) {
  .hh-feat { animation: none; transition: none; }
  .hh-feat:hover { transform: none; }
}
@media print {
  body { background-image: none !important; }
  .hh-feat, .tc-dist { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Mock Draft ── */
.md-tools { display: flex; gap: 8px; margin-left: auto; }
.md-danger { border-color: #7f1d1d; color: #E0968A; }
.md-note { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
.md-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.md-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.md-row:hover { border-color: var(--orange); background: #1a1e27; }
.md-row.md-open { cursor: default; border-style: dashed; }
.md-pick {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 22px;
  color: var(--orange); min-width: 40px; text-align: center;
}
.md-team { display: flex; align-items: center; gap: 10px; min-width: 210px; }
.md-nfl-logo { width: 38px; height: 38px; object-fit: contain; }
.md-team-txt { display: flex; flex-direction: column; line-height: 1.15; }
.md-team-name { font-weight: 700; font-size: 15px; }
.md-via { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.md-player { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 240px; }
.md-player-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.md-player-name { font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.md-player-name:hover { color: var(--orange); }
.md-player-meta { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; }
.md-empty-slot { color: var(--dim); font-size: 13px; font-style: italic; }
.md-edit { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.md-select { max-width: 300px; }
@media (max-width: 760px) {
  .md-team { min-width: 150px; }
  .md-edit { width: 100%; margin-left: 0; }
  .md-select { flex: 1; max-width: none; }
}

/* ── The Daily (guess-the-prospect) ── */
.dg-wrap { max-width: 860px; margin: 18px auto 0; }
.dg-search-wrap { position: relative; margin-bottom: 16px; }
.dg-input { width: 100%; font-size: 16px; padding: 12px 14px; }
.dg-ac {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid #2a2f3d; border-radius: 4px;
  overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.5);
}
.dg-ac-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; }
.dg-ac-item:hover, .dg-ac-item.dg-ac-on { background: #222735; }
.dg-ac-nm { font-weight: 600; }
.dg-ac-meta { color: var(--muted); font-size: 12px; margin-left: auto; }
.dg-av { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; background: var(--border); flex: none; }
.dg-av-ph { display: inline-block; }
.dg-grid { display: flex; flex-direction: column; gap: 6px; }
.dg-row {
  display: grid; grid-template-columns: minmax(140px, 1.6fr) repeat(7, 1fr);
  gap: 6px; align-items: stretch;
}
.dg-head span {
  color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; padding: 0 2px; align-self: end;
}
.dg-player { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dg-player-nm { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-cell {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  border-radius: 4px; font-weight: 700; font-size: 13px; padding: 9px 4px;
  border: 1px solid transparent; text-align: center;
}
.dg-cell.dg-g { background: #14532d; border-color: #3FD68F; color: #bbf7d0; }
.dg-cell.dg-y { background: #4a3a12; border-color: #DBA84E; color: #fde68a; }
.dg-cell.dg-x { background: #1c202a; border-color: #2a2f3d; color: #9aa0aa; }
.dg-flip { animation: dgflip .5s ease both; }
@keyframes dgflip { 0% { transform: rotateX(90deg); opacity: 0; } 100% { transform: rotateX(0); opacity: 1; } }
.dg-remaining { color: var(--muted); font-size: 13px; margin-top: 10px; }
.dg-result { margin-top: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 18px; }
.dg-result-msg { font-family: 'Oswald', sans-serif; font-size: 20px; margin-bottom: 12px; }
.dg-win { color: #3FD68F; } .dg-loss { color: #D45B49; }
.dg-answer-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: #1c202a; border-radius: 4px; }
.dg-ans-av { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; background: var(--border); }
.dg-ans-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dg-ans-name { font-weight: 800; font-size: 17px; }
.dg-ans-meta { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.dg-result-actions { display: flex; gap: 10px; margin-top: 14px; }
.dg-stats { display: flex; gap: 18px; margin-top: 16px; color: var(--muted); font-size: 13px; }
.dg-stats b { color: var(--ink); font-size: 16px; }
.dg-countdown { color: var(--dim); font-size: 12px; margin-top: 12px; }
@media (max-width: 640px) {
  .dg-row { grid-template-columns: minmax(90px, 1.4fr) repeat(7, 1fr); gap: 4px; }
  .dg-cell { font-size: 11px; padding: 8px 2px; }
  .dg-player-nm { font-size: 11px; }
  .dg-av { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .dg-flip { animation: none; } }

/* ── Mock Draft simulator ── */
.mds-step-lbl { font-family: 'Oswald', sans-serif; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.mds-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.mds-team {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: 12px 6px 10px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600;
  transition: border-color .12s, background .12s, transform .12s;
}
.mds-team img { width: 44px; height: 44px; object-fit: contain; }
.mds-team:hover { border-color: #3a4152; transform: translateY(-1px); }
.mds-team.mds-on { border-color: var(--orange); background: var(--orange-lt); color: #fff; }
.mds-rounds { display: flex; gap: 8px; }
.mds-round-btn {
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--muted);
  font-weight: 700; padding: 10px 18px; cursor: pointer;
}
.mds-round-btn.mds-on { border-color: var(--orange); background: var(--orange-lt); color: #fff; }
.mds-start {
  display: block; margin: 24px 0 8px; background: var(--orange); border: 0; border-radius: 4px;
  color: var(--bg); font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: .04em; text-transform: uppercase; padding: 13px 34px; cursor: pointer;
}
.mds-start:disabled { opacity: .35; cursor: not-allowed; }
.mds-start:not(:disabled):hover { background: var(--orange-dk); }
.mds-clock {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 12px 16px;
}
.mds-clock img { width: 44px; height: 44px; object-fit: contain; }
.mds-clock-txt { font-size: 16px; } .mds-clock-txt em { color: var(--muted); font-style: normal; font-size: 12px; }
.mds-you { background: var(--orange); color: var(--bg); font-weight: 800; font-size: 11px; border-radius: 4px; padding: 2px 8px; margin-left: 8px; letter-spacing: .05em; }
.mds-progress { margin-left: auto; color: var(--muted); font-size: 13px; }
.mds-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.mds-panel-lbl { font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 8px 0; }
.mds-feed, .mds-avail, .mds-myclass { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mds-feed { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.mds-feed-row, .mds-avail-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px;
}
.mds-feed-row.mds-mine { border-color: var(--orange); background: var(--orange-lt); }
.mds-fr-pick { font-family: 'Oswald', sans-serif; font-weight: 700; color: var(--orange); min-width: 42px; }
.mds-fr-logo { width: 28px; height: 28px; object-fit: contain; }
.mds-fr-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.mds-fr-name { font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.mds-fr-name:hover { color: var(--orange); }
.mds-fr-meta { color: var(--muted); font-size: 12px; }
.mds-search { width: 100%; margin-bottom: 8px; }
.mds-posfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.mds-pos-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-weight: 700; font-size: 12px; padding: 4px 12px; cursor: pointer; }
.mds-pos-chip.mds-on { border-color: var(--orange); color: #fff; background: var(--orange-lt); }
.mds-avail { max-height: 54vh; overflow-y: auto; padding-right: 4px; }
.mds-draft-btn {
  background: var(--orange); border: 0; border-radius: 4px; color: var(--bg);
  font-weight: 800; font-size: 12px; padding: 7px 14px; cursor: pointer; text-transform: uppercase;
}
.mds-draft-btn:hover { background: var(--orange-dk); }
.mds-result-head { display: flex; align-items: center; gap: 12px; font-size: 18px; margin: 20px 0 6px; }
.mds-result-head img { width: 48px; height: 48px; object-fit: contain; }
.mds-myclass { margin-bottom: 18px; }
@media (max-width: 860px) {
  .mds-cols { grid-template-columns: 1fr; }
  .mds-feed-wrap { order: 2; }
  .mds-feed { max-height: 34vh; }
  .mds-pickpanel { order: 1; }
}

/* ── Compare v2: slot chips + search picker + matchup bars ── */
.cmp-slots { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0 20px; }
.cmp-slot {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--acc, #3a4152);
  border-radius: 4px; padding: 8px 10px 8px 12px;
}
.cmp-slot-av { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--border); }
.cmp-slot-txt { display: flex; flex-direction: column; line-height: 1.2; }
.cmp-slot-name { font-weight: 700; font-size: 14px; }
.cmp-slot-meta { color: var(--muted); font-size: 12px; }
.cmp-slot-x {
  background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 13px;
  padding: 6px; border-radius: 4px; margin-left: 2px;
}
.cmp-slot-x:hover { color: #D45B49; background: var(--border); }
.cmp-addwrap { position: relative; min-width: 260px; flex: 1; max-width: 380px; }
.cmp-add { width: 100%; padding: 11px 13px; font-size: 14px; }
.cmp-hint { color: var(--muted); font-size: 14px; display: flex; align-items: center; gap: 8px; margin: 8px 0 18px; }
.mu-val { display: block; }
.mu-bar { display: block; height: 4px; background: var(--border); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.mu-bar-fill { display: block; height: 100%; background: #4a5164; border-radius: 3px; }
.mu-bar-fill.mu-bar-win { background: var(--orange); }

/* ── Representation (rep status pills, /reps board, agency pages) ─────────── */
.rep-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 3px; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.rep-pill-sm { font-size: 11px; padding: 3px 9px; gap: 4px; }
.rep-open    { background: #123B28; color: #3FD68F; border-color: #1F5B32; }
a.rep-open:hover { border-color: #3FD68F; }
.rep-signed  { background: var(--surface-3); color: var(--ink-2); border-color: var(--border-2); }
a.rep-signed:hover { border-color: var(--orange); color: var(--ink); }
.rep-unknown { background: var(--surface); color: var(--muted); border-color: #2a2e3a; }
a.rep-unknown:hover { color: #c2c6cd; }
.hero-rep { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; }
.hero-rep .rep-pill { font-size: 14px; padding: 6px 14px; }
.rep-conf { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; border: 1px solid; white-space: nowrap; }
.rep-conf-confirmed  { color: #3FD68F; border-color: #3FD68F55; background: #3FD68F14; }
.rep-conf-likely     { color: #facc15; border-color: #facc1555; background: #facc1514; }
.rep-conf-unverified { color: var(--muted); border-color: var(--muted)55; background: var(--muted)14; }
.rep-agency-link { color: var(--ink-2); text-decoration: none; }
.rep-agency-link:hover { text-decoration: underline; }
.rep-cell { max-width: 150px; overflow: hidden; }
.rep-cell .rep-pill { max-width: 140px; display: inline-block; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.rep-empty { color: var(--muted); }
.rep-verified { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Rep card inline edit (player page) */
.rep-edit-btn { float: right; background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; padding: 0 2px; }
.rep-edit-btn:hover { color: var(--orange); }
.rep-form { display: none; padding: 12px 16px 14px; }
#rep-card.editing .rep-form { display: block; }
#rep-card.editing .rep-view { display: none; }
.rep-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.rep-form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px;
  font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.rep-form-grid .rep-span2 { grid-column: 1 / -1; }
.rep-form-grid input, .rep-form-grid select {
  background: var(--bg); color: var(--ink); border: 1.5px solid var(--border);
  border-radius: 4px; padding: 7px 10px; font-size: 13.5px; font-family: inherit;
  font-weight: 400; letter-spacing: 0; text-transform: none;
}
.rep-form .qn-actions { margin-top: 12px; display: flex; gap: 8px; justify-content: flex-end; }
.btn-cancel-sm { background: none; border: 1.5px solid var(--border); color: #c2c6cd;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer; }

/* /reps + agency pages */
.reps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin: 6px 0 16px; }
.reps-sub { color: var(--muted); margin-top: 4px; }
.reps-sub a { color: var(--ink-2); text-decoration: none; }
.reps-crumb { color: var(--muted); font-size: 13px; margin-bottom: 2px; }
.reps-crumb a { color: var(--ink-2); text-decoration: none; }
.reps-stat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.reps-stat { display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 92px; padding: 9px 14px; border-radius: var(--radius);
  background: var(--surface); border: 1.5px solid var(--border); text-decoration: none; }
.reps-stat b { font-family: var(--display); font-size: 20px; color: var(--ink); }
.reps-stat span { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.reps-stat.on { border-color: var(--orange); }
.rep-stat-open b { color: #3FD68F; }
.rep-stat-unknown b { color: var(--muted); }
.rep-stat-signed b { color: var(--ink-2); }
.reps-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.reps-q { min-width: 220px; }
.reps-range { display: inline-flex; align-items: center; gap: 4px; }
.reps-gnum { width: 68px; }
.reps-range-sep { color: var(--muted); }
.reps-clear { color: var(--muted); font-size: 13px; text-decoration: none; }
.reps-clear:hover { color: var(--ink); }
.reps-count { color: var(--muted); font-size: 12.5px; margin: 10px 2px; }
.reps-table tbody tr { cursor: pointer; }
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: var(--orange); }
.th-sort.sort-asc::after  { content: " ▲"; font-size: 9px; }
.th-sort.sort-desc::after { content: " ▼"; font-size: 9px; }

/* Agency index cards */
.agency-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.agency-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  text-decoration: none; transition: border-color .12s, transform .12s; }
.agency-card:hover { border-color: var(--orange); transform: translateY(-1px); }
.agency-card-name { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.agency-card-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.ag-stat { font-size: 12px; color: var(--muted); }
.ag-stat b { color: var(--ink); font-size: 13px; }
.ag-stat-dc b { color: #3FD68F; }
.agency-card-pos, .agency-posrow { display: flex; flex-wrap: wrap; gap: 6px; }
.agency-posrow { margin: -4px 0 14px; }
.ag-pos { font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px; }
.ag-pos b { color: var(--ink); margin-left: 4px; }
@media (max-width: 720px) {
  .rep-form-grid { grid-template-columns: 1fr; }
  .reps-stat { min-width: 72px; padding: 7px 10px; }
}

/* ── Accounts + sharing (signup/login, publish board, /b and /m share pages) ── */
.nav-user {
  display: flex; align-items: center; gap: 6px;
  color: var(--orange); font-weight: 700; font-size: 13px; text-decoration: none;
  padding: 7px 10px; border-radius: 4px;
}
.nav-user:hover { background: rgba(255,255,255,.05); color: var(--orange); }
.nav-logout-form { display: inline; margin: 0; }
.nav-logout {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: 16px; width: 34px; height: 34px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color .12s, background .12s;
}
.nav-logout:hover { color: var(--orange); background: rgba(255,255,255,.05); }

.auth-wrap { display: flex; justify-content: center; padding: 48px 0 30px; }
.auth-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 36px 28px; width: 100%; max-width: 420px;
}
.auth-title { font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: 26px; margin: 0 0 6px; color: var(--ink); }
.auth-sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; line-height: 1.5; }
.auth-error {
  background: rgba(185,28,28,.12); border: 1px solid rgba(185,28,28,.4); color: #E0968A;
  border-radius: 4px; padding: 10px 12px; font-size: 13px; margin-bottom: 16px;
  display: flex; gap: 8px; align-items: center;
}
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: #c2c6cd; }
.auth-input {
  background: var(--bg); color: var(--ink); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 12px; font-size: 14px;
}
.auth-input:focus { outline: none; border-color: var(--orange); }
.auth-submit {
  background: var(--orange); color: #fff; border: none; border-radius: 4px;
  padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 6px;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .05em;
}
.auth-submit:hover { background: var(--orange-dk); }
.auth-switch { margin: 18px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.auth-switch a { color: var(--orange); font-weight: 600; text-decoration: none; }

.bm-publish-result {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; font-size: 13px; color: #c2c6cd;
}
.bm-publish-result .bi-check-circle-fill { color: #3FD68F; }
.bm-publish-result a { color: var(--orange); font-weight: 600; text-decoration: none; word-break: break-all; }
.bm-copy {
  background: var(--surface-2); color: #c2c6cd; border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.bm-copy:hover { color: var(--orange); border-color: rgba(247,105,0,.5); }

.share-badge-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-badge {
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  text-decoration: none; padding: 3px 10px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--white);
}
.share-badge-scout { color: var(--ink); }
.share-badge-szn { color: var(--orange); }
.share-cta { color: var(--orange); font-weight: 700; text-decoration: none; margin-left: auto; }
.share-cta:hover { text-decoration: underline; }

.bshare-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bshare-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: 4px;
  padding: 10px 16px;
}
.bshare-rank {
  font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--orange);
  min-width: 34px; text-align: right;
}
.bshare-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bshare-name { color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.bshare-name:hover { color: var(--orange); }
.bshare-meta { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 6px; }

.mshare-user { margin-bottom: 26px; }
.mshare-letter { color: var(--orange); font-family: var(--display); font-size: 18px; }
.mshare-grades {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px;
  margin: 10px 0 26px;
}
.mshare-gcell {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--white); border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 6px; font-family: var(--display); font-size: 16px; color: var(--ink);
}
.mshare-gcell img { width: 26px; height: 26px; object-fit: contain; }
.mshare-gcell-mine { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.mshare-feed { margin-bottom: 22px; }

.mds-share-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 22px; }
.mds-share-result { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.mds-share-result a { color: var(--orange); font-weight: 600; text-decoration: none; word-break: break-all; }

/* ── Reps v2: agency crest tiles, photo rosters, Target Board ─────────────── */
.agency-crest {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .02em;
  color: hsl(var(--ah, 210), 70%, 82%);
  background: linear-gradient(145deg, hsl(var(--ah, 210), 45%, 26%), hsl(var(--ah, 210), 55%, 15%));
  border: 1.5px solid hsl(var(--ah, 210), 45%, 38%);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.agency-crest-lg { width: 84px; height: 84px; flex-basis: 84px; border-radius: 4px; font-size: 26px; }
.agency-grid-tiles { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.agency-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  text-decoration: none; transition: border-color .12s, transform .12s; }
.agency-tile:hover { border-color: hsl(var(--ah, 210), 50%, 45%); transform: translateY(-1px); }
.agency-tile-body { min-width: 0; }
.agency-tile .agency-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agency-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 6px 0 14px; }
.agency-hero-body { flex: 1; min-width: 220px; }

/* Photo roster grid (agency client pages) */
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.roster-card { display: flex; flex-direction: column; background: var(--surface);
  border: 1.5px solid var(--border); border-radius: var(--radius); overflow: hidden;
  text-decoration: none; transition: border-color .12s, transform .12s; }
.roster-card:hover { border-color: var(--acc, var(--orange)); transform: translateY(-2px); }
.roster-photo-wrap { position: relative; aspect-ratio: 5 / 6; background: var(--bg); }
.roster-photo { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.roster-photo-ph { display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 38px; color: var(--pc, #94a3b8);
  background: linear-gradient(160deg, #171b24, var(--bg)); }
.roster-grade { position: absolute; top: 8px; right: 8px; font-family: var(--display);
  font-weight: 700; font-size: 13px; padding: 3px 9px; border-radius: 4px; }
.roster-logo { position: absolute; bottom: 8px; left: 8px; width: 26px; height: 26px;
  object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.roster-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.roster-name { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-pos { font-weight: 700; }
.roster-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; min-height: 18px; }
.roster-agent { font-size: 11.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Family/Guardian rep state — no pro rep, but not fully open either */
.rep-family { background: #1d2a2a; color: #7dd3c8; border-color: #2f4a46; }
a.rep-family:hover { border-color: #4a7a72; color: #a7ede4; }
.rep-stat-family b { color: #7dd3c8; }

/* Stale rep intel (> REP_STALE_DAYS since last verified) */
.rep-verified.rep-stale { color: #d9a441; }
.rep-stale-chip { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; color: #d9a441; background: #d9a44114; border: 1px solid #d9a44155;
  border-radius: 4px; padding: 1px 6px; vertical-align: middle; }
@media (max-width: 720px) {
  .roster-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .agency-crest-lg { width: 64px; height: 64px; flex-basis: 64px; font-size: 20px; }
}

/* Rep Target Board crosshair (agent-pursuit list — distinct from the My Board star) */
.target-btn { background: none; border: none; cursor: pointer; font-size: 16px;
  color: #4a5164; padding: 4px 6px; line-height: 1; transition: color .12s, transform .12s; }
.target-btn:hover { color: #f87171; transform: scale(1.15); }
.target-btn.active, .target-mark { color: #ef4444; }
.rep-stat-mine b { color: #f87171; }
.rep-stat-mine b .bi { font-size: 15px; }
.agency-tile-family { border-color: #2f4a46; }
.agency-tile-family .agency-crest { font-size: 20px; }

/* ═══════════════ LIVE BOARD TICKER (Direction A) ═══════════════
   Real grade moves from grade_history, streaming under the nav.
   Team tick = school accent; ▲ risers read orange, ▼ fallers red. */
.board-ticker {
  display: flex; align-items: stretch; height: 32px; overflow: hidden;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
  white-space: nowrap; position: relative; z-index: 150;
}
.bt-live {
  display: flex; align-items: center; gap: 7px; padding: 0 14px; flex: none;
  background: var(--surface-3); color: var(--ink);
  font-family: var(--display); font-stretch: 75%; font-weight: 600;
  font-size: 10px; text-transform: uppercase; letter-spacing: .16em;
}
.bt-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); animation: bt-pulse 1.6s infinite; }
@keyframes bt-pulse { 50% { opacity: .35; } }
.bt-clip { overflow: hidden; flex: 1; display: flex; align-items: center; }
.bt-tape { display: inline-block; padding-left: 100%; animation: bt-tape 55s linear infinite; }
.board-ticker:hover .bt-tape { animation-play-state: paused; }
.bt-item { margin-right: 34px; font-size: 11.5px; color: var(--muted); text-decoration: none; }
.bt-item:hover { color: var(--ink); }
.bt-item b { color: var(--ink); font-weight: 600; }
.bt-tick { display: inline-block; width: 3px; height: 11px; border-radius: 1px; margin-right: 7px; vertical-align: -1px; }
.bt-score { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.bt-badge { font-style: normal; font-family: var(--display); font-stretch: 75%; font-weight: 600;
            font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
.bt-up   { color: var(--tier-green); font-size: 11px; }
.bt-down { color: var(--down); font-size: 11px; }
@keyframes bt-tape { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .bt-tape { animation: none; padding-left: 16px; }
  .bt-live i { animation: none; }
}
@media (max-width: 640px) { .board-ticker { display: none; } }
@media print { .board-ticker { display: none !important; } }

/* ═══ Direction A board-row language: grade figures, range bars, team ticks ═══ */
.prospect-table th.th-num { text-align: right; }
.prospect-table td.grade-cell, .prospect-table td.range-cell { text-align: right; }
.grade-fig {
  font-family: var(--display); font-stretch: 125%; font-weight: 800;
  font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums;
}
.grade-fig-empty { color: var(--faint); font-weight: 600; }
.rng { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.rng-lo, .rng-hi { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rng-bar { position: relative; width: 72px; height: 4px; background: var(--surface-3); border-radius: 2px; flex: none; }
.rng-bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; opacity: .6; }
.rng-bar b { position: absolute; top: -2px; width: 2px; height: 8px; background: var(--ink); border-radius: 1px; }
.rng-fill-green  { background: var(--tier-green); }
.rng-fill-yellow { background: var(--tier-yellow); }
.rng-fill-red    { background: var(--tier-red); }
.rng-none { color: var(--faint); }
.team-tick {
  display: inline-block; width: 3px; height: 12px; border-radius: 1px;
  background: var(--tc, var(--border-2)); margin-right: 8px; vertical-align: -1px;
}
.school-cell { white-space: nowrap; }
/* denser terminal rows */
.prospect-table td { padding-top: 8px; padding-bottom: 8px; }
@media (max-width: 900px) { .th-range, .range-cell { display: none; } }

/* terminal position badge — monochrome label, position color reduced to a tick */
.pos-badge-term {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0;
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.pos-tick { display: inline-block; width: 3px; height: 12px; border-radius: 1px; }
.pos-sub { font-style: normal; margin-left: 5px; padding: 1px 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent, #6b7cff) 16%, transparent);
  color: var(--accent, #8b96ff); font-size: 10px; letter-spacing: .08em; }
/* split-confidence cues: tentative (247-HS only) reads lighter; conflict flagged amber */
.pos-tentative { opacity: .55; }
.pos-conflict .pos-tick { box-shadow: 0 0 0 2px #d9a406; }

/* ═══ Board rows, preview-spec reduction ═══
   Row anatomy: rank · star · 26×34 headshot (team underline) · name + eligibility
   sub · pos tick · team tick + school · class · draft yr · grade figure · range
   bar · rep dot+text. No jersey #s, no timestamps, no tag stacks, no logos,
   no view buttons — that detail lives on the player page. */
.hub-av, .hub-av-ph {
  width: 26px !important; height: 34px !important;
  border-radius: 2px !important; object-fit: cover; object-position: top;
  border: 0 !important; border-bottom: 2px solid var(--border-2) !important;
  background: var(--surface-3);
}
.hub-av-ph {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-stretch: 75%; font-size: 10px; font-weight: 600;
  color: var(--muted); letter-spacing: .05em;
}
.player-hub-name { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.2; white-space: nowrap; }
.player-hub-sub  { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.rep-line {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.rep-line i { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.rep-line-yes { color: var(--ink); }   .rep-line-yes i { background: var(--tier-green); }
.rep-line-fam { color: var(--muted); } .rep-line-fam i { background: var(--tier-yellow); }
.rep-line-no  { color: var(--muted); } .rep-line-no i  { background: var(--orange); }
.rep-line-unk { color: var(--faint); } .rep-line-unk i { background: var(--faint); }
a.rep-line:hover { color: var(--orange); }
/* preview row rhythm */
.prospect-table td { padding-top: 10px; padding-bottom: 10px; }
.prospect-table .rank-cell { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 15px; color: var(--muted); }

/* ═══ Player hero, preview-spec file card ═══ */
.hero-file {
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 10px;
  text-transform: uppercase; letter-spacing: .16em; color: var(--faint); margin-bottom: 12px;
}
.hero-file b { color: var(--orange); font-weight: 600; }
.hero-watermark { display: none; }
.hero-meas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin: 12px 0 4px; }
.hero-meas .hm { display: inline-flex; align-items: baseline; gap: 7px; }
.hero-meas .hm b { font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hero-meas .hm .hm-unit { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: -3px; }
.hero-meas .hm i { font-style: normal; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.hero-repline { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 2px; }
.hero-repline .hr-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 5px; flex: none; }
.hr-dot-yes { background: var(--tier-green); } .hr-dot-fam { background: var(--tier-yellow); }
.hr-dot-no  { background: var(--orange); }     .hr-dot-unk { background: var(--faint); }
.hr-field { display: flex; flex-direction: column; gap: 1px; margin-right: 14px; }
.hr-field em {
  font-style: normal; font-family: var(--display); font-stretch: 75%; font-weight: 600;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.hr-field b { font-size: 13px; font-weight: 600; color: var(--ink); }
.hr-field a { text-decoration: none; }
.hr-field a:hover b { color: var(--orange); }
/* grade panel: logo → figure → caliber line → floor/ceiling */
.hero-grade .hg-main { align-items: center; text-align: center; gap: 6px; }
.hg-logo { width: 52px; height: 52px; object-fit: contain; margin-bottom: 4px; }
.hg-caliber {
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.hero-grade .hg-foot { display: none; }   /* board/pos rank lives in the file eyebrow now */

/* ═══ Dense data tables (Teams / Rankings / Reps conversions per DESIGN.md) ═══ */
.prospect-table .td-num { text-align: right; font-variant-numeric: tabular-nums; }
.tt-logo { width: 20px; height: 20px; object-fit: contain; margin-right: 9px; vertical-align: -5px; }
.tt-school { font-weight: 600; color: var(--ink); }
.tt-green { color: var(--tier-green); font-weight: 700; }
.tt-dim { color: var(--faint); }
.grade-fig-sm { font-size: 13px; margin-left: 7px; }
.teams-table td { padding-top: 9px; padding-bottom: 9px; }

/* rankings mini-tables */
.lb-sec { min-width: 0; }
.lb-table { width: 100%; }
.lb-table td { padding-top: 8px; padding-bottom: 8px; }
.lb-table .rank-cell { width: 34px; }
.lb-table .player-hub-name a { color: var(--ink); text-decoration: none; }
.lb-table .player-hub-name a:hover { color: var(--orange); }
.lb-table .player-hub-sub { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.lb-table .shelf { min-height: 40px; }
.lb-pos-link { color: var(--ink); text-decoration: none; }
.lb-pos-link:hover { color: var(--orange); }

/* agency table */
.agency-cell { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); }
.agency-crest-sm {
  width: 24px; height: 24px; border-radius: 3px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-stretch: 75%; font-size: 9px; font-weight: 700;
  letter-spacing: .04em;
  background: hsl(var(--ah, 20) 30% 16%); color: hsl(var(--ah, 20) 45% 62%);
}
.agency-table td { padding-top: 8px; padding-bottom: 8px; }

/* rep names must never run off — cap and ellipsize */
.rep-cell { max-width: 150px; }
.rep-line { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* home: top-of-board cards + board table + denser stock watch */
.home-feat { margin: 26px 0 6px; }
.home-board-table td { padding-top: 9px; padding-bottom: 9px; }
.home-board-table .rank-cell { width: 34px; }
.mb-row-more {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px; margin-top: 1px; border-radius: 0 0 4px 4px;
  background: var(--surface); color: var(--muted); text-decoration: none;
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase;
}
.mb-row-more:hover { color: var(--orange); }
.trend-chip.sw-chip { padding: 7px 10px; }
.trend-chip .trend-av { width: 26px; height: 34px; border-radius: 2px; }

/* board trend strips: bare ramp figures instead of grade chips */
.trend-chip .trend-grade {
  background: transparent !important; padding: 0; border-radius: 0;
  font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 15px;
}
/* filter deck: one surface card instead of floating controls */
.hub-search-bar {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 4px; padding: 14px 14px 8px;
}

/* compare quick-start matchup chips */
.cmp-quick { max-width: 880px; margin: 6px auto 0; }
.cmp-quick-lbl {
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 18px 0 10px;
}
.cmp-quick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-quick-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 4px;
  padding: 9px 14px; text-decoration: none; color: var(--muted); font-size: 12.5px;
}
.cmp-quick-chip:hover { border-color: var(--orange); color: var(--ink); }
.cmp-quick-chip b { color: var(--ink); font-weight: 600; }
.cmp-quick-chip em {
  font-style: normal; font-family: var(--display); font-stretch: 75%; font-weight: 600;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
}
.cmp-quick-pos {
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  border-right: 1px solid var(--hairline); padding-right: 8px;
}
.cmp-quick-sub { color: var(--faint); font-size: 11.5px; }
.cmp-quick-sub .num { font-variant-numeric: tabular-nums; color: var(--muted); }

/* trend chips: grade figure anchors the right edge (photo · name · figure) */
.trend-chip .trend-grade { order: 3; margin-left: auto; font-size: 17px; }
.trend-chip .trend-body { order: 2; min-width: 0; }
.trend-chip .trend-av { order: 1; }

/* ═══ HOME COMPRESSION PASS — two-col hero w/ Prospect Spotlight, tightened rhythm ═══ */
/* hero: lede left (~55%), spotlight right (~45%) */
.home-hero { padding: var(--sp-5) 0 var(--sp-4); margin-bottom: var(--sp-4); }
.hh-grid { display: grid; grid-template-columns: 55fr 45fr; gap: 40px; align-items: start; }
/* tighten the lede's internal gaps by ~a third */
.hh-sub { margin-top: 10px; }
.hh-search { margin-top: 16px; }
.hh-ctas { margin-top: 16px; }

/* Prospect Spotlight — the player-file treatment in panel form */
.hh-spotlight {
  display: flex; gap: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; overflow: hidden; align-self: stretch;
}
.sp-photo { flex: 0 0 168px; position: relative; background: var(--surface-3); min-height: 224px; }
.sp-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sp-photo::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--acc, var(--border-2)); }
.sp-main { flex: 1; min-width: 0; padding: 18px 20px 16px; display: flex; flex-direction: column; }
.hh-spotlight .hero-file { margin-bottom: 8px; }
.sp-name {
  font-family: var(--display); font-stretch: 125%; font-weight: 800;
  font-size: clamp(22px, 2vw, 30px); line-height: .95; text-transform: uppercase;
  letter-spacing: -.005em; color: var(--ink);
}
.sp-meta { margin-top: 7px; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.sp-meta b { color: var(--ink); }
.sp-gradeline { display: flex; align-items: flex-end; gap: 18px; margin-top: 12px; }
.sp-grade { font-family: var(--display); font-stretch: 125%; font-weight: 900; font-size: 46px; line-height: .85; font-variant-numeric: tabular-nums; }
.sp-fc { display: flex; flex-direction: column; gap: 1px; }
.sp-fc em {
  font-style: normal; font-family: var(--display); font-stretch: 75%; font-weight: 600;
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.sp-fc b { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-rep { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.sp-link {
  margin-top: auto; padding-top: 12px; text-decoration: none;
  font-family: var(--display); font-stretch: 75%; font-weight: 600; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange);
}
.sp-link:hover { color: var(--ink); }

/* global section rhythm: one continuous document, not floating islands */
.home-sec { margin-bottom: var(--sp-5); }
.home-feat { margin: 18px 0 var(--sp-5); }
.wn-feed { gap: 6px; }
.wn-headline { font-size: 12.5px; }

/* responsive: spotlight below the lede on tablets/mobile */
@media (max-width: 900px) {
  .hh-grid { grid-template-columns: 1fr; gap: 24px; }
  .hh-spotlight { max-width: 560px; }
}
@media (max-width: 560px) {
  .hh-spotlight { flex-direction: column; max-width: 100%; }
  .sp-photo { flex: none; height: 240px; }
  .hh-stat { padding-right: 16px; }
  .hh-stat + .hh-stat { padding-left: 16px; }
}
.trend-chip .mb-go { order: 4; margin-left: auto; }
.trend-chip .trend-grade + .trend-body + .mb-go { margin-left: 0; }

/* Real agency logos (crest chips) — fall back to the monogram when absent */
.agency-crest.has-logo { background:#0f1218; border-color:#2a2f3a; padding:0; overflow:hidden; }
.agency-crest.has-logo .agency-logo-img { width:100%; height:100%; object-fit:contain; padding:14%; display:block; }
.agency-crest-sm.has-logo .agency-logo-img { padding:9%; }
.agency-tile.has-logo:hover { border-color: var(--brand, var(--orange)); }

/* Agency logo chip inline next to an agency name (player profile, board) */
.hr-logo { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  border-radius:5px; margin-right:6px; vertical-align:middle; overflow:hidden; border:1px solid #2a2f3a; }
.hr-logo img { width:100%; height:100%; object-fit:contain; padding:2px; }
.hr-agency { display:inline-flex; align-items:center; }

/* ticker: old → new readouts */
.bt-old { color: var(--faint); font-variant-numeric: tabular-nums; text-decoration: line-through; text-decoration-color: rgba(138,144,153,.5); }
.bt-to { color: var(--faint); font-size: 10px; }

/* re-grade log under the season track in Grade History */
.regrade-log { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 4px; }
.regrade-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 7px 0; border-bottom: 1px solid var(--hairline); }
.regrade-row:last-child { border-bottom: 0; }
.regrade-when {
  flex: none; width: 68px; font-family: var(--display); font-stretch: 75%; font-weight: 600;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.regrade-move { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--faint); }
.regrade-old { text-decoration: line-through; text-decoration-color: rgba(138,144,153,.5); font-weight: 600; }
.regrade-ar { font-style: normal; font-size: 10px; }
.regrade-up { color: var(--tier-green); }
.regrade-down { color: var(--tier-red); }
.regrade-note { flex: 1 1 100%; font-size: 12px; color: var(--muted); padding-left: 80px; }
@media (max-width: 640px) { .regrade-note { padding-left: 0; } }

/* ══════════════════════════════════════════════════════════════════════════
   2026-07-20 consumer build-out: brief · my-team · Stock Report · scale ·
   about/coverage · rep wire/tiers/pipelines · case · similar · share/embed ·
   higher-lower · depth watch · receipts · one-pager hooks
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero team picker ── */
.hh-teampick { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); }
.hh-teampick .bi { color: var(--orange); font-size: 12px; }
.hh-teampick select { background: transparent; border: 0; color: var(--ink); font: 600 12.5px var(--font-body); outline: none; max-width: 180px; cursor: pointer; }
.hh-teampick select option { background: var(--surface); color: var(--ink); }

/* ── The 30-Second Brief ── */
.brief-sec { margin-top: 26px; }
.brief-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); }
.brief-head { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--hairline); }
.brief-tag { font-family: var(--font-display); font-stretch: 66%; font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.brief-date { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.brief-cols { display: grid; grid-template-columns: 1.25fr 1fr; }
.brief-col { padding: 12px 18px 14px; }
.brief-col + .brief-col { border-left: 1px solid var(--hairline); }
.brief-col-head { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0; }
.brief-col-head .bi { color: var(--orange); margin-right: 4px; }
.brief-item { display: block; padding: 7px 0; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--hairline); }
.brief-item:last-child { border-bottom: 0; }
.brief-item:hover .brief-hl { color: var(--orange); }
.brief-hl { display: block; font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.brief-sub { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.brief-move-fig { white-space: nowrap; margin-left: 6px; font-size: 12.5px; }
@media (max-width: 760px) { .brief-cols { grid-template-columns: 1fr; } .brief-col + .brief-col { border-left: 0; border-top: 1px solid var(--hairline); } }

/* ── Your Team strip ── */
.myteam-sec { border: 1px solid var(--border); border-top: 2px solid var(--acc, var(--orange)); background: var(--surface); border-radius: var(--radius); padding: 16px 18px 18px; }
.mt-logo { width: 30px; height: 30px; object-fit: contain; }
.mt-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 22px; margin-top: 6px; }
@media (max-width: 760px) { .mt-grid { grid-template-columns: 1fr; } }

/* ── Stock Report spotlights + receipts ── */
.sr-spots { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 700px) { .sr-spots { grid-template-columns: 1fr; } }
.sr-spot { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); text-decoration: none; color: var(--ink); position: relative; }
.sr-spot:hover { background: var(--surface-2); }
.sr-spot-tag { position: absolute; top: -9px; left: 12px; padding: 2px 8px; font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; border-radius: 3px; }
.sr-spot-up .sr-spot-tag { background: #10281c; color: var(--g9); border: 1px solid #1d4632; }
.sr-spot-down .sr-spot-tag { background: #2a1414; color: var(--down); border: 1px solid #4a2222; }
.sr-spot-av { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--acc, var(--orange)); flex: none; }
.sr-spot-nm { font-family: var(--font-display); font-weight: 800; font-size: 15px; display: block; }
.sr-spot-sub { font-size: 11.5px; color: var(--muted); display: block; }
.sr-spot-fig { font-size: 13px; display: block; margin-top: 2px; }
.sr-spot-note { font-size: 11.5px; color: var(--muted); display: block; margin-top: 2px; font-style: italic; }
.receipt-strip { margin-top: 18px; }
.receipt-chip { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; padding: 6px 12px; border: 1px solid #1d4632; background: #10281c; color: var(--g9); border-radius: var(--radius); font-size: 12px; font-weight: 600; }

/* ── Grade sparkline (player hero) ── */
.hg-spark { display: inline-flex; align-items: center; gap: 7px; }
.hg-spark svg { display: block; }
.hg-spark i { font-style: normal; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hg-spark-up { color: var(--g9); }
.hg-spark-down { color: var(--down); }
.hg-spark-flat { color: var(--muted); }

/* ── The Case (for / against) ── */
.case-card .case-cols { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .case-card .case-cols { grid-template-columns: 1fr; } }
.case-col { padding: 12px 18px 16px; }
.case-col + .case-col { border-left: 1px solid var(--hairline); }
.case-head { font-family: var(--font-display); font-weight: 800; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.case-for .case-head { color: var(--g9); }
.case-against .case-head { color: var(--down); }
.case-col ul { margin: 0; padding-left: 16px; }
.case-col li { font-size: 13px; line-height: 1.5; margin-bottom: 7px; color: var(--ink); }

/* ── Similar players + Share card ── */
.similar-card .similar-list { padding: 6px 12px 10px; }
.share-card { overflow: hidden; }
.share-preview { display: block; width: calc(100% - 36px); margin: 12px 18px 0; border: 1px solid var(--border); border-radius: var(--radius); }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; }
.share-actions .hh-cta { font-size: 12px; padding: 7px 11px; }
.share-embed { padding: 0 18px 14px; }
.share-embed summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.share-embed summary:hover { color: var(--orange); }
.share-embed textarea { width: 100%; margin-top: 8px; background: var(--bg); color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); font: 11px/1.5 ui-monospace, monospace; padding: 8px; resize: none; }

/* ── Rep hub: wire, tiers, pipelines, open market ── */
.wire-strip, .om-teaser { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 12px 16px 14px; margin-bottom: 18px; }
.wire-strip-head { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.wire-strip-head .bi { color: var(--orange); }
.wire-strip-head a { margin-left: auto; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--orange); text-decoration: none; font-family: var(--font-body); font-weight: 600; }
.wire-strip-items, .wire-feed { display: flex; flex-direction: column; }
.wire-feed { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 6px 16px; }
.wire-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); }
.wire-item:last-child { border-bottom: 0; }
.wire-item:hover b { color: var(--orange); }
.wire-kind { flex: none; width: 78px; text-align: center; padding: 3px 0; font-family: var(--font-display); font-weight: 800; font-size: 9.5px; letter-spacing: .1em; border-radius: 3px; }
.wire-signed .wire-kind { background: #10281c; color: var(--g9); }
.wire-switched .wire-kind { background: #2a2110; color: var(--g6); }
.wire-dropped .wire-kind, .wire-open .wire-kind { background: #2a1414; color: var(--down); }
.wire-body { min-width: 0; flex: 1; font-size: 13px; }
.wire-sub { color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.wire-line { display: block; font-size: 12px; color: var(--muted); }
.wire-when { flex: none; font-size: 11px; color: var(--dim); }
.om-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rep-tier-head { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 10px; }
.rep-field-toggle { margin-left: auto; font-size: 12px; padding: 6px 11px; }
.pipe-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pipe-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid var(--border); border-left: 2px solid var(--acc, var(--orange)); background: var(--surface); border-radius: var(--radius); font-size: 12px; color: var(--ink); text-decoration: none; }
.pipe-chip:hover { background: var(--surface-2); }
.pipe-chip .bi { color: var(--dim); font-size: 10px; }
.pipe-n { color: var(--orange); font-weight: 700; }
.agency-pipes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 18px; }
.agency-pipes-lbl { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }

/* ── The Scale ── */
.scale-page, .about-page, .coverage-page, .dw-page, .hl-page { max-width: 980px; margin: 0 auto; }
.scale-lede { color: var(--muted); font-size: 14.5px; line-height: 1.6; max-width: 68ch; margin: 10px 0 26px; }
.scale-group { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; margin: 30px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.scale-group-green { color: var(--g9); }
.scale-group-yellow { color: var(--g6); }
.scale-group-red { color: var(--down); }
.scale-rung { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; }
.scale-band { display: flex; align-items: center; gap: 12px; }
.scale-range { font-family: var(--font-display); font-weight: 900; font-size: 13px; padding: 3px 9px; border-radius: 3px; }
.scale-label { font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.scale-count { margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scale-desc { color: var(--muted); font-size: 13px; margin: 8px 0 12px; }
.scale-faces { display: flex; flex-wrap: wrap; gap: 8px; }
.scale-foot { color: var(--muted); font-size: 13px; margin: 26px 0; }
.scale-foot a { color: var(--orange); text-decoration: none; }

/* ── About ── */
.about-page { max-width: 760px; padding: 30px 0 60px; }
.about-brand { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 15px; letter-spacing: .18em; color: var(--ink); }
.about-brand span { color: var(--orange); }
.about-title { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(28px, 5vw, 44px); line-height: 1.05; text-transform: uppercase; margin: 14px 0 22px; }
.about-body p { font-size: 15px; line-height: 1.75; color: var(--ink); margin-bottom: 18px; max-width: 68ch; }
.about-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* ── Coverage ── */
.cov-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 18px; }
.cov-stat { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 14px 16px; }
.cov-stat b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 24px; font-variant-numeric: tabular-nums; }
.cov-stat span { font-size: 11.5px; color: var(--muted); }
.cov-notes { margin: 26px 0 40px; }
.cov-notes p { color: var(--muted); font-size: 13.5px; line-height: 1.7; max-width: 75ch; }

/* ── Depth Watch ── */
.dw-school { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); margin-bottom: 14px; padding: 4px 16px 8px; }
.dw-school-head { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; padding: 10px 0 6px; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--acc, var(--orange)); margin-bottom: 4px; }
.dw-move { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: var(--ink); font-size: 13px; }
.dw-move:last-child { border-bottom: 0; }
.dw-dir { flex: none; width: 18px; text-align: center; }
.dw-up { color: var(--g9); } .dw-down { color: var(--down); }
.dw-nm { font-weight: 600; }
.dw-pos { color: var(--muted); font-size: 11.5px; }
.dw-slots { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.dw-old { font-style: normal; color: var(--dim); }
.dw-new { color: var(--ink); }

/* ── Higher / Lower ── */
.hl-head { margin-bottom: 20px; }
.hl-head a { color: var(--orange); text-decoration: none; }
.hl-scorebar { display: flex; gap: 18px; margin-top: 10px; }
.hl-score { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.hl-score b { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: var(--ink); margin-left: 6px; }
.hl-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 640px) { .hl-arena { grid-template-columns: 1fr; } .hl-vs { display: none; } }
.hl-vs { align-self: center; font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 22px; color: var(--dim); }
.hl-pick { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); cursor: pointer; color: var(--ink); font-family: var(--font-body); transition: border-color .15s, background .15s; }
.hl-pick:hover:not(:disabled) { border-color: var(--orange); background: var(--surface-2); }
.hl-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.hl-nm { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin-top: 6px; }
.hl-sub { font-size: 12px; color: var(--muted); }
.hl-grade { margin-top: 8px; padding: 6px 14px; border-radius: 4px; font-family: var(--font-display); font-weight: 900; font-size: 20px; }
.hl-grade i { display: block; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hl-win { border-color: var(--g9); }
.hl-lose { opacity: .55; }
.hl-verdict { margin-top: 16px; font-size: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hl-right { color: var(--g9); } .hl-wrong { color: var(--down); }
.hl-study { color: var(--orange); text-decoration: none; font-size: 12.5px; }
.hl-loading { color: var(--muted); padding: 30px 0; }

/* ── Mock lock ── */
.mds-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
.mds-lock input { accent-color: var(--orange); }
.mds-lock .bi { color: var(--orange); }
.mock-locked-badge { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); font-size: 12px; color: var(--muted); }
.mock-locked-badge .bi { color: var(--orange); }

/* ── Team page tools ── */
.th-tool { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; padding: 4px 10px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); color: var(--ink); font: 600 11.5px var(--font-body); text-decoration: none; cursor: pointer; }
.th-tool:hover { border-color: var(--orange); color: var(--orange); }

/* ── Method → scale link ── */
.method-scale-link { margin-top: 14px; display: inline-flex; }

/* ── 2026-07-20 feedback round: nav dropdowns · searchable team picker ·
      share overlay · logo-not-wordmark · clickable scale bands ── */

/* Nav dropdown groups (Games / Intel) */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop-btn { cursor: pointer; background: none; border: 0; }
.nav-caret { font-size: 9px; margin-left: 2px; opacity: .7; }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 176px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px; box-shadow: var(--sh-md); }
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { display: block; }
.nav-drop-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 3px;
  color: var(--ink); text-decoration: none; font: 600 12.5px var(--font-body); white-space: nowrap; }
.nav-drop-menu a:hover { background: var(--surface-2); color: var(--orange); }
.nav-drop-menu a .bi { color: var(--muted); font-size: 12px; width: 14px; }
.nav-drop-menu a:hover .bi { color: var(--orange); }
.nav-drop-menu a.nav-on { color: var(--orange); }

/* Searchable favorite-team picker */
.hh-teampick { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.tp-heart { color: var(--orange); font-size: 12px; position: absolute; left: 12px; pointer-events: none; }
.tp-search { position: relative; }
.tp-search input { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink); font: 600 12.5px var(--font-body); padding: 10px 12px 10px 30px; width: 260px; outline: none; }
.hh-teampick .tp-chip + .tp-clear + .tp-search input { padding-left: 12px; }
.tp-search input:focus { border-color: var(--orange); }
.tp-search input::placeholder { color: var(--muted); }
.tp-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; margin: 0; padding: 5px;
  list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--sh-md); max-height: 300px; overflow-y: auto; }
.tp-results li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 3px;
  font: 600 12.5px var(--font-body); color: var(--ink); cursor: pointer; }
.tp-results li:hover { background: var(--surface-2); color: var(--orange); }
.tp-results li img { width: 20px; height: 20px; object-fit: contain; }
.tp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink); font: 700 12.5px var(--font-body); }
.tp-chip:hover { border-color: var(--orange); }
.tp-chip img { width: 20px; height: 20px; object-fit: contain; }
.tp-chip .bi { color: var(--orange); font-size: 11px; }
.tp-clear { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--muted); cursor: pointer; font-size: 12px; }
.tp-clear:hover { color: var(--down); border-color: var(--down); }

/* Share overlay — the card appears on demand, not inline */
.share-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(5, 6, 8, .82);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.share-overlay[hidden] { display: none; }
.share-overlay-inner { position: relative; max-width: 780px; width: 100%; }
.share-overlay-inner img { display: block; width: 100%; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: var(--sh-md); }
.share-overlay-x { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--ink); cursor: pointer; font-size: 14px; }
.share-overlay-x:hover { color: var(--orange); border-color: var(--orange); }
.share-overlay-actions { justify-content: center; padding: 14px 0 0; }

/* Logo instead of wordmark */
.hc-brand-logo { height: 44px; width: auto; display: block; margin: 0 auto 14px; }
.about-brand-logo { height: 40px; width: auto; display: block; }
.tp-brand-logo { height: 30px; width: auto; display: block; margin-left: auto; }
.tp-brand { text-align: right; }
.tp-brand i { display: block; font-style: normal; font-weight: 500; font-family: 'IBM Plex Sans'; font-size: 9px; color: #777; margin-top: 3px; }

/* Scale bands are doors now */
a.scale-band { text-decoration: none; color: inherit; border-radius: var(--radius); margin: -4px -6px; padding: 4px 6px; }
a.scale-band:hover { background: var(--surface-2); }
a.scale-band:hover .scale-count { color: var(--orange); }
.scale-count .bi { font-size: 10px; }

/* ── The Gauntlet: champ tag + game-over screen ── */
.hl-pick { position: relative; }
.hl-champ-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 3px 10px; border-radius: 3px; background: var(--orange-lt); border: 1px solid var(--orange-dk);
  color: var(--orange); font: 800 10px var(--font-display); letter-spacing: .12em; }
.hl-gameover { margin-top: 22px; padding: 26px 24px; border: 1px solid #4a2222; background: #1c0f0f;
  border-radius: var(--radius); text-align: center; }
.hl-over-tag { font-family: var(--font-display); font-stretch: 125%; font-weight: 900; font-size: 34px;
  letter-spacing: .06em; color: var(--down); }
.hl-over-line { margin-top: 8px; font-size: 14.5px; color: var(--ink); }
.hl-over-line b { color: var(--orange); }
.hl-over-actions { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 16px; }

/* ── About: photo + split layout ── */
.about-split { display: grid; grid-template-columns: 1fr 280px; gap: 34px; align-items: start; }
@media (max-width: 760px) { .about-split { grid-template-columns: 1fr; } .about-photo { max-width: 300px; } }
.about-photo { margin: 6px 0 0; }
.about-photo img { width: 100%; border-radius: 6px; border: 1px solid var(--border); display: block; }
.about-photo figcaption { margin-top: 8px; font-size: 11.5px; color: var(--muted); text-align: center; }

/* ── 30-Second Brief v2 — daily edition, faces first ── */
.brief-edition { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: .1em;
  padding: 3px 9px; border: 1px solid var(--orange-dk); background: var(--orange-lt); color: var(--orange); border-radius: 3px; }
.brief-grid { display: grid; grid-template-columns: 280px 1.35fr 1fr; }
@media (max-width: 980px) { .brief-grid { grid-template-columns: 1fr 1fr; } .brief-potd { grid-column: 1 / -1; } }
@media (max-width: 640px) { .brief-grid { grid-template-columns: 1fr; } }
.brief-grid > * { padding: 12px 18px 14px; border-left: 1px solid var(--hairline); }
.brief-grid > *:first-child { border-left: 0; }
@media (max-width: 980px) { .brief-grid > * { border-left: 0; border-top: 1px solid var(--hairline); } .brief-grid > *:first-child { border-top: 0; } }
.brief-potd { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.brief-potd-img { width: 100%; max-width: 244px; aspect-ratio: 3/4; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--border); border-bottom: 3px solid var(--acc, var(--orange)); }
.brief-potd:hover .brief-potd-nm { color: var(--orange); }
.brief-potd-tag { font-family: var(--font-display); font-weight: 800; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--orange); }
.brief-potd-nm { font-family: var(--font-display); font-weight: 800; font-size: 17px; display: block; }
.brief-potd-grade { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 4px;
  padding: 4px 10px; border-radius: 4px; font-family: var(--font-display); font-weight: 900; font-size: 15px; }
.brief-potd-grade i { font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.brief-potd-line { font-size: 12px; line-height: 1.5; color: var(--muted); }
.brief-item-face { display: flex; gap: 10px; align-items: flex-start; }
.brief-av { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; margin-top: 2px;
  background: var(--surface-2); border: 1px solid var(--border); }
.brief-av-ph { display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px var(--font-display); color: var(--muted); }
.brief-item-body { min-width: 0; }
.brief-more { margin-left: auto; font-size: 10.5px; color: var(--orange); text-decoration: none; letter-spacing: 0; text-transform: none; }
.brief-col-head { display: flex; align-items: baseline; gap: 6px; }
.brief-rep-kind { font-style: normal; font-family: var(--font-display); font-weight: 800; font-size: 9px;
  letter-spacing: .1em; padding: 2px 6px; border-radius: 3px; margin-left: 5px; vertical-align: 2px; }
.brief-rep-signed { background: #10281c; color: var(--g9); }
.brief-rep-switched { background: #2a2110; color: var(--g6); }
.brief-rep-dropped, .brief-rep-open { background: #2a1414; color: var(--down); }

/* ── Brief v2.1: lead story + fuller columns ── */
.brief-lead { padding: 10px 12px; margin: 2px 0 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.brief-lead:hover { border-color: var(--orange); }
.brief-lead-tag { display: block; font-family: var(--font-display); font-weight: 800; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 3px; }
.brief-hl-lead { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; line-height: 1.3; }
.brief-av-lg { width: 46px; height: 46px; }

/* ── Brief v2.2: cards stretch to fill the full panel height — no dead space ── */
.brief-grid > .brief-col { display: flex; flex-direction: column; }
.brief-col .brief-col-head { flex: none; margin-bottom: 8px; }
.brief-big { flex: 1 1 0; min-height: 0; display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; margin: 0 0 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface-2); }
.brief-big:last-child { margin-bottom: 0; }
.brief-big:hover { border-color: var(--orange); }
.brief-big .brief-av-lg { width: 64px; height: 64px; margin-top: 0; }
.brief-big .brief-hl-lead { font-size: 19px; line-height: 1.28; }
.brief-big .brief-sub { font-size: 12.5px; margin-top: 5px; }
/* Narrow screens: the brief cards stop being equal-height flex children. `flex: 1 1 0`
   + min-height:0 collapses each card to ~34px while its 19px headline needs far more,
   so headlines overflowed and painted on top of each other. Let the cards size to their
   content and give the text room next to the avatar. */
@media (max-width: 760px) {
  .brief-big { flex: 0 0 auto; min-height: 0; align-items: flex-start; gap: 12px; padding: 14px; }
  .brief-big .brief-av-lg { width: 48px; height: 48px; }
  .brief-big .brief-hl-lead { font-size: 16px; line-height: 1.3; }
  .brief-item-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
  .brief-teaser { display: none; }
}

/* ── Brief v2.3: bookend layout — Player of the Day left, Sleeper of the Day right ── */
.brief-grid { grid-template-columns: 300px 1fr 300px; }
@media (max-width: 980px) { .brief-grid { grid-template-columns: 1fr 1fr; } .brief-potd { grid-column: auto; } }
@media (max-width: 640px) { .brief-grid { grid-template-columns: 1fr; } }
.brief-potd .brief-potd-img { max-width: 100%; }

/* bookend cards: portrait stretches so both sides bottom out flush */
.brief-potd { display: flex; flex-direction: column; }
.brief-potd .brief-potd-img { flex: 1 1 0; min-height: 220px; width: 100%; max-width: none;
  aspect-ratio: auto; object-fit: cover; object-position: top; }
.brief-potd .brief-potd-body { flex: none; }

/* ── Brief v2.4: matched bookend portraits + click-bait teasers ── */
.brief-potd .brief-potd-img { flex: none; aspect-ratio: 3/4; min-height: 0; }
.brief-potd .brief-potd-body { flex: 1 1 auto; }
.brief-teaser { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Ticker: rep-move items ── */
.bt-badge.bt-rep { background: var(--orange-lt); color: var(--orange); border: 1px solid var(--orange-dk); }
.bt-agency { color: var(--muted); font-size: 0.92em; }

/* ── Global nav search ────────────────────────────────────────────────────────
   Player search that lives in the nav on EVERY page (a viewer asked for it:
   from a player profile you shouldn't have to back out to the board to look
   someone else up). Wide screens get a real input; under 1100px the nav is
   icon-only, so it collapses to a magnifier that drops a full-width bar. */
.nav-search { position: relative; display: flex; align-items: center; margin: 0 auto 0 18px; }
.nav-search-btn {
  display: none; align-items: center; justify-content: center; width: 32px; height: 32px;
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--ink-2); font-size: 13px; cursor: pointer; transition: color .12s, border-color .12s;
}
.nav-search-btn:hover { color: var(--orange); border-color: var(--orange); }
.nav-search-box {
  display: flex; align-items: center; gap: 8px; height: 34px; width: 252px; padding: 0 10px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius);
}
.nav-search-box:focus-within { border-color: var(--orange); }
.nsb-ico { font-size: 12px; color: var(--muted); flex: none; }
.nav-search-box input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--ink); font: 500 12.5px var(--font-body);
}
.nav-search-box input::placeholder { color: var(--muted); }
.nav-search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.nsb-close { display: none; background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; padding: 4px; }
.nav-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  margin: 0; padding: 5px; list-style: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-md);
  max-height: 368px; overflow-y: auto;
}
.nsr-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 3px; cursor: pointer; }
.nsr-item:hover, .nsr-item.nsr-active { background: var(--surface-1); }
.nsr-av { width: 27px; height: 27px; border-radius: 3px; object-fit: cover; flex: none; background: var(--surface-1); }
.nsr-av-ph { display: flex; align-items: center; justify-content: center; font: 700 9px var(--display); color: var(--muted); }
.nsr-body { flex: 1; min-width: 0; }
.nsr-name { font: 600 12.5px var(--display); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsr-meta { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nsr-logo { width: 12px; height: 12px; object-fit: contain; vertical-align: -2px; margin-right: 3px; }
.nsr-grade { font: 700 12.5px var(--display); font-variant-numeric: tabular-nums; flex: none; }
.nsr-msg { padding: 9px 8px; font-size: 11.5px; color: var(--muted); }
/* Below 1450px the nav is at its widest (labels only collapse at 1250px), so an
   inline 252px input would overflow it — fall back to the magnifier + drop-down bar. */
@media (max-width: 1449px) {
  .nav-search { margin: 0 0 0 8px; }
  .nav-search-btn { display: flex; }
  .nav-search-box { display: none; }
  /* tablet + laptop: a panel anchored under the magnifier */
  .nav-search.open .nav-search-box {
    display: flex; position: absolute; top: calc(100% + 9px); left: 0; width: 304px; height: 40px;
    z-index: 260; background: var(--surface); box-shadow: var(--sh-md);
  }
  .nav-search.open .nsb-close { display: flex; }
}
/* phones: the nav is cramped, so the open search takes the full width under it */
@media (max-width: 700px) {
  .nav-search.open .nav-search-box {
    position: fixed; top: 54px; left: 0; right: 0; width: auto; height: 48px;
    padding: 0 12px; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none;
  }
  .nav-search.open .nav-search-results { position: fixed; top: 104px; left: 8px; right: 8px; }
}
@media print { .nav-search { display: none; } }

/* Sticky player bar: its children are all `white-space: nowrap`, and a flex item
   defaults to `min-width: auto` — so the row refused to shrink below its content
   (~587px) and forced horizontal scroll on the whole player page at phone widths.
   Let it shrink, and drop the secondary bits on small screens. */
.pbar-inner { min-width: 0; }
.pbar-nm { min-width: 0; flex: 0 1 auto; }
.pbar-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) {
  .pbar-inner { padding: 7px 12px; gap: 9px; }
  .pbar-nm { font-size: 14px; }
  .pbar-meta, .pbar-rank { display: none; }
}

/* Phone nav: 10-12 icon buttons never fit a 390px screen, so .nav-right was
   overflowing and dragging the WHOLE page into horizontal scroll (every page,
   pre-existing). Contain it: let the nav strip scroll on its own instead. The
   dropdown menus have to go fixed, because a scroll container clips them. */
@media (max-width: 700px) {
  /* justify-content:flex-end would clip the overflow at the START edge (unreachable
     by scrolling) — so start-align and push right with margin-left:auto instead,
     which right-aligns when it fits and scrolls cleanly when it doesn't. */
  .nav-right {
    flex: 1 1 auto; min-width: 0; justify-content: flex-start; margin-left: auto;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .nav-right::-webkit-scrollbar { display: none; }
  .btn-nav-link, .btn-nav-add, .btn-nav-gear, .nav-user, .nav-drop { flex: none; }
  .nav-drop-menu { position: fixed; top: 52px; left: auto; right: 8px; }
}

/* A <textarea> carries an intrinsic cols-based width and min-width:auto, so inside
   a grid/flex column it refuses to shrink and pushes the card past the viewport
   (25px of horizontal scroll on the player overview at phone widths). */
.qn-input { width: 100%; min-width: 0; box-sizing: border-box; }
.qn-form, .qn-actions { min-width: 0; }

/* A `1fr` grid track has an automatic minimum of its item's min-content, so one
   wide child (a table, a long token) stretches the whole column past the
   container and scrolls the page sideways. min-width:0 lets tracks shrink. */
.overview-grid > *, .two-col > * { min-width: 0; }