/* ==========================================================================
   King shell — visual pass (PROMPT 16). CFB.

   Type, colour and component styling ONLY. No layout order, copy or data
   changes: the structure shipped in PROMPT 12 is correct and stays.

   Loaded LAST so it wins over tennis.css / bball.css without editing them —
   those are shared by other sites and this pass is deliberately CFB-only until
   Austin signs off on the look.

   Reference: _ui_audit/proto-king-shell.html
   ========================================================================== */

:root{
  /* The accent was #8b6bff — violet, and named --brand-gold, which is how a
     wordmark ends up purple on a site whose family signature is gold. */
  /* bball.css:208 pins these with !important as a per-sport theme block, so the
     override needs the same weight. That block is also where the violet came
     from: it set --brand-gold, the family accent, to #8b6bff. */
  --brand-gold:#F5C542!important;
  --gold:#F5C542!important;
  --optic:#FF7A45!important;
  --optic-2:#FFA37A!important;
  --optic-ink:#180a04!important;
  --sport:#FF7A45!important;
  --sport-soft:rgba(255,122,69,.12)!important;
  --muted-2:#7A7A86;          /* 4.66:1 on --bg; the prototype's raised value */
  --pos:#7dd3a8;
  --neg:#ff8a8a;
  --fs-cell:12px;
}

/* ---- type ---------------------------------------------------------------
   Three families, each with a job: Bebas for display, Inter for UI and prose,
   JetBrains Mono for labels and figures. The site previously rendered all
   three roles in one geometric sans at heavy weight. */
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}

.home-h1,
h1{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:.03em;
   line-height:1.1;font-weight:400}
.home-h1{margin:6px 0 0}
/* the 2px sport rule under the h1 — the one place the sport hue identifies the site */
.home-h1::after{content:"";display:block;height:2px;width:64px;background:var(--sport);
  margin:8px 0;border-radius:2px}
.home-h1 .home-h1-sub{font-family:'Inter',system-ui,sans-serif;font-size:13px;
  font-weight:400;color:var(--muted,#8a8a98);letter-spacing:0;margin-top:0}
.home-h1 .gold,.hrk-name .gold,.gold{color:var(--brand-gold)}

/* ---- slate hero: one instrument panel, not five cards -------------------
   1px grid gaps with --border showing through, so the tiles read as a single
   panel. Values in Bebas gold; labels in mono at 0.1em tracking. */
.slate-hero .sh-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;background:var(--hair,#1f1f28);border:1px solid var(--hair,#1f1f28);
  border-radius:12px;overflow:hidden;margin:16px 0 22px;
}
.slate-hero .stat{
  background:var(--panel-2,#0f0f15);border:0;border-radius:0;padding:14px 16px;
}
.slate-hero .stat .v{
  font-family:'Bebas Neue',sans-serif;font-size:42px;font-weight:400;
  letter-spacing:.03em;line-height:1;color:var(--brand-gold);
  font-variant-numeric:tabular-nums;margin-top:4px;
}
.slate-hero .stat .l{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:0;
}
.slate-hero .sh-stamp{font-size:11px;color:var(--muted,#8a8a98);margin-top:8px}

/* ---- section header: title with a mono note beside it ------------------- */
.sect-t{
  display:flex;align-items:baseline;gap:10px;
  font-family:'Inter',system-ui,sans-serif;font-size:18px;font-weight:700;
  margin:26px 0 10px;
}
.sect-t .note{
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted-2);
}

/* ---- the board ----------------------------------------------------------
   border-collapse MUST be separate: Chrome will not position a sticky <thead>
   inside a border-collapse:collapse table — the header drops behind row 1.
   Borders live on the cells instead. top:0, never the topbar height, which
   parks the header on row 2 and hides a row. */
.tblwrap{
  overflow:auto;max-height:min(70vh,720px);
  border:1px solid var(--hair,#1f1f28);border-radius:10px;background:var(--panel,#14141a);
}
.tbl{border-collapse:separate;border-spacing:0;font-size:var(--fs-cell)}
.tbl thead th{
  position:sticky;top:0;z-index:2;background:var(--panel-2,#1b1b22);
  color:var(--muted,#8a8a98);font-family:'JetBrains Mono',monospace;font-size:11px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:9px 12px;border-bottom:1px solid var(--hair-2,#2d2d38);white-space:nowrap;
}
.tbl thead th .dir{color:var(--brand-gold);font-size:9px;margin-left:3px}
.tbl thead th:focus-visible{outline:2px solid var(--brand-gold);outline-offset:-2px}
.tbl tbody td{
  padding:0 12px;height:34px;border-bottom:1px solid var(--hair,#1f1f28);
  font-weight:600;color:var(--ink-2,#d4d4dc);font-variant-numeric:tabular-nums;
}
.tbl tbody tr:nth-child(even) td{background:rgba(15,15,21,.4)}
.tbl tbody tr:hover td{background:var(--panel-2,#1b1b22)}
.tbl td .nm{color:var(--ink,#f0f0f5);font-weight:700}

/* verdict — the most-scanned column on the page, and it was plain grey */
.v-over{color:var(--pos);font-weight:800}
.v-under{color:var(--neg);font-weight:800}

/* position chips */
.tbl td .pos-QB,.tbl td .pos-RB,.tbl td .pos-WR,.tbl td .pos-TE,
td[class^="pos-"],td[class*=" pos-"]{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;
}
.badge-chip{
  display:inline-flex;align-items:center;padding:2px 7px;border-radius:999px;
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;line-height:1.3;white-space:nowrap;
  border:1px solid currentColor;background:transparent;
}

/* ---- filters + tool cards ---------------------------------------------- */
.filters label,.filters .mut{font-family:'JetBrains Mono',monospace;font-size:10px;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.feat3 h3{font-family:'Inter',system-ui,sans-serif;font-size:1rem;font-weight:700}

/* ---- season banner: sport-tinted, mono countdown ------------------------ */
#season-banner{font-family:'Inter',system-ui,sans-serif}
#season-banner .sb-count{font-family:'JetBrains Mono',monospace;font-weight:800;
  font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .slate-hero .sh-grid{grid-template-columns:1fr 1fr}
  .slate-hero .stat .v{font-size:32px}
}

/* empty-state / gated row inside the board reads as prose, not a data row */
.tbl tbody td.mut{font-family:'Inter',system-ui,sans-serif;font-weight:500;
  color:var(--muted,#8a8a98);height:auto}

/* --- mechanical fixes that ride with the visual pass ---------------------- */
/* The 9px tile label measured 3.64:1 — it was still inheriting --ink-3 because
   the earlier home block sets the same selector. Pin the prototype's raised
   muted value, which is 4.66:1 on --bg. */
.slate-hero .stat .l{color:#8A8A98!important}   /* 4.89:1 on the tile surface rgb(27,30,39); the proto value 7A7A86 was measured against --bg, which is darker */
.sect-t .note,.filters label,.filters .mut{color:#7A7A86}

/* Touch targets reach 40px via min-height + padding rather than being redrawn
   larger — the type stays at its designed size, the hit area grows. */
@media (max-width:900px){
  .nav a,.navgrp-btn,.feat3 a,.filters select,.filters input,#f-week,#f-conf,#f-pos{
    min-height:40px;
  }
  .filters select,.filters input{padding:.5rem .6rem}
  .nav a,.navgrp-menu a{display:flex;align-items:center;padding:.55rem .7rem}
}

/* The freshness stamp is `.hrk-fresh` fleet-wide (HRK injects it under that
   name). CFB keeps #freshness-stamp as the JS hook and styles by the class, so
   one component does not port under two names. */
.slate-hero .hrk-fresh{font-size:11px;color:#8A8A98;margin-top:8px}