/* ============================================================
   EdgeRush Sports — Redesign Concept System
   Shared foundation for Concepts A / B / C
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Core palette — carried over from the live site */
  --bg:        #0a0d12;
  --bg-2:      #0e1219;
  --card:      #12161f;
  --card-2:    #171c28;
  --card-3:    #1c2230;
  --text:      #e8eaed;
  --dim:       #9aa3b2;
  --dimmer:    #6b7484;
  --accent:    #ff4b3e;
  --amber:     #ffb020;
  --green:     #2fd67a;
  --red:       #ff5c5c;
  --look:      #4da3ff;
  --border:    #232838;
  --border-2:  #2d3446;

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25);
  --maxw: 1200px;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'tnum' 1;
}

h1, h2, h3, h4, .display {
  font-family: 'Archivo', 'Inter', sans-serif;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.mono { font-variant-numeric: tabular-nums; }

/* ============================================================
   LOGO
   ============================================================ */
.logo-lockup { display: flex; align-items: center; gap: 10px; }
.logo-text {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.logo-text .edge { color: var(--accent); }
.logo-text .sub {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--dimmer);
  margin-top: 3px;
}

/* ============================================================
   TIER 1 NAV — global
   ============================================================ */
.nav1 {
  position: sticky; top: 0; z-index: 60;
  background: rgba(10,13,18,.93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav1-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 13px 24px;
  display: flex; align-items: center; gap: 32px;
}
.nav1 ul { list-style: none; display: flex; gap: 26px; align-items: center; margin-left: 4px; }
.nav1 a.link {
  font-size: 14px; font-weight: 600; color: var(--dim);
  padding: 6px 0; border-bottom: 2px solid transparent; transition: .15s;
}
.nav1 a.link:hover { color: var(--text); }
.nav1 a.link.on { color: var(--text); border-bottom-color: var(--accent); }
.nav1-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 700; padding: 9px 16px;
  border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer;
  transition: .15s; font-family: 'Inter', sans-serif;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #ff6055; }
.btn-ghost { border-color: var(--border-2); color: var(--dim); background: transparent; }
.btn-ghost:hover { color: var(--text); border-color: var(--dimmer); }

/* ============================================================
   TIER 2 NAV — contextual sport pills
   ============================================================ */
.nav2 {
  position: sticky; top: 53px; z-index: 55;
  background: rgba(14,18,25,.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav2-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; scrollbar-width: none;
}
.nav2-inner::-webkit-scrollbar { display: none; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  padding: 6px 13px; border-radius: 100px;
  border: 1px solid var(--border-2); color: var(--dim);
  background: var(--card); transition: .15s;
}
.pill:hover { color: var(--text); border-color: var(--dimmer); }
.pill.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pill .ct {
  font-size: 10.5px; font-weight: 800; padding: 1px 6px;
  border-radius: 100px; background: rgba(255,255,255,.12);
  font-variant-numeric: tabular-nums;
}
.pill.on .ct { background: rgba(0,0,0,.25); }
.pill.empty { opacity: .38; cursor: default; }
.pill.empty:hover { color: var(--dim); border-color: var(--border-2); }
.nav2-div { width: 1px; height: 20px; background: var(--border-2); margin: 0 6px; flex: none; }

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */
.sec { padding: 40px 0; }
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.sec-head h2 { font-size: 21px; font-weight: 800; }
.sec-head .more { font-size: 13px; font-weight: 600; color: var(--accent); }
.eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dimmer);
}

.tag {
  display: inline-block; font-size: 10.5px; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(255,75,62,.13); color: var(--accent);
}
.tag.mlb  { background: rgba(47,214,122,.13); color: var(--green); }
.tag.wnba { background: rgba(255,176,32,.13); color: var(--amber); }
.tag.mma  { background: rgba(255,92,92,.13);  color: var(--red); }
.tag.look { background: rgba(77,163,255,.13); color: var(--look); }

.when { font-size: 12px; color: var(--dimmer); font-weight: 500; }

/* --- Tier badges --- */
.tier {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.tier-hi  { background: rgba(47,214,122,.15); color: var(--green); }
.tier-mid { background: rgba(255,176,32,.15); color: var(--amber); }
.tier-low { background: rgba(154,163,178,.13); color: var(--dim); }

/* --- Verdict chips --- */
.verdict { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.v-conf { background: rgba(47,214,122,.13); color: var(--green); }
.v-neut { background: rgba(154,163,178,.12); color: var(--dim); }
.v-conf-x { background: rgba(255,92,92,.13); color: var(--red); }

/* ============================================================
   AUTO-GENERATED POST CARD (preview of the build output)
   ============================================================ */
.gcard {
  position: relative; aspect-ratio: 1200/630; border-radius: var(--r);
  overflow: hidden; border: 1px solid var(--border-2);
  background:
    radial-gradient(120% 140% at 88% 8%, rgba(255,75,62,.16), transparent 55%),
    linear-gradient(160deg, #151a25 0%, #0c1016 100%);
  padding: 7% 7.5%; display: flex; flex-direction: column;
}
.gcard::after {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 100% 7px; pointer-events: none;
}
.gcard .gc-top { display: flex; align-items: center; justify-content: space-between; }
.gcard .gc-lg {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(10px, 1.55vw, 15px); letter-spacing: -.03em;
}
.gcard .gc-lg .e { color: var(--accent); }
.gcard .gc-tag {
  font-size: clamp(7px,1vw,9.5px); font-weight: 800; letter-spacing: .12em;
  color: var(--dimmer); text-transform: uppercase;
}
.gcard .gc-mid { margin-top: auto; }
.gcard .gc-player {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: clamp(17px, 3.5vw, 36px); letter-spacing: -.035em; line-height: 1.03;
}
.gcard .gc-pick {
  font-size: clamp(9px, 1.5vw, 15px); color: var(--dim);
  font-weight: 600; margin-top: 5px;
}
.gcard .gc-bot {
  display: flex; align-items: flex-end; gap: clamp(10px,2.2vw,26px);
  margin-top: clamp(9px,1.8vw,18px); padding-top: clamp(8px,1.5vw,14px);
  border-top: 1px solid rgba(255,255,255,.09);
}
.gcard .gc-stat .k {
  font-size: clamp(6.5px,.85vw,9px); font-weight: 800; letter-spacing: .13em;
  color: var(--dimmer); text-transform: uppercase;
}
.gcard .gc-stat .v {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(12px,2.1vw,22px); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}
.gcard .gc-gap { margin-left: auto; text-align: right; }
.gcard .gc-gap .v { color: var(--green); font-size: clamp(16px,3vw,30px); }

/* ============================================================
   POST CARDS
   ============================================================ */
.grid { display: grid; gap: 18px; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }

.post {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; transition: .18s;
}
.post:hover { border-color: var(--border-2); transform: translateY(-2px); }
.post .body { padding: 15px 16px 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.post .meta-row { display: flex; align-items: center; gap: 9px; }
.post h3 { font-size: 16px; font-weight: 800; line-height: 1.24; }
.post p { font-size: 13.5px; color: var(--dim); line-height: 1.5; }
.post .foot {
  margin-top: auto; padding-top: 10px; display: flex;
  align-items: center; justify-content: space-between; gap: 8px;
}
.post.look { border-color: rgba(77,163,255,.32); }
.post.look:hover { border-color: rgba(77,163,255,.55); }

/* ============================================================
   TRACK RECORD / PROOF
   ============================================================ */
.proof-strip {
  display: flex; align-items: center; gap: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.proof-strip .cell { flex: 1; padding: 15px 18px; border-right: 1px solid var(--border); }
.proof-strip .cell:last-child { border-right: 0; }
.proof-strip .n {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  font-size: 27px; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.proof-strip .l {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dimmer); margin-top: 2px;
}

/* ============================================================
   EMAIL CAPTURE (paywall-ready shell)
   ============================================================ */
.capture {
  background: linear-gradient(150deg, rgba(255,75,62,.09), var(--card) 58%);
  border: 1px solid rgba(255,75,62,.26);
  border-radius: var(--r-lg); padding: 26px 28px;
}
.capture h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.capture p { font-size: 13.5px; color: var(--dim); max-width: 52ch; }
.capture form { display: flex; gap: 9px; margin-top: 16px; flex-wrap: wrap; }
.capture input {
  flex: 1; min-width: 220px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: 10px 13px; font-size: 14px; font-family: inherit;
}
.capture input::placeholder { color: var(--dimmer); }
.capture input:focus { outline: none; border-color: var(--accent); }
.capture .fine { font-size: 11.5px; color: var(--dimmer); margin-top: 10px; }

/* Member-only teaser — the paywall shell, disabled for now */
.locked { position: relative; }
.locked .veil {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center;
  background: linear-gradient(180deg, rgba(10,13,18,.25) 0%, rgba(10,13,18,.94) 62%);
  border-radius: var(--r); padding: 20px;
}
.locked .veil .lk { font-size: 13px; font-weight: 700; }
.locked .veil .lk span { color: var(--accent); }

/* ============================================================
   TABLES
   ============================================================ */
.tbl-wrap {
  border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; background: var(--card);
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dimmer);
  padding: 11px 14px; background: var(--card-2); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--card-2); }
.rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; background: var(--card-3);
  font-size: 11.5px; font-weight: 800; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.rank.top { background: var(--accent); color: #fff; }
.good { color: var(--green); font-weight: 700; }
.warn { color: var(--amber); font-weight: 700; }
.bad  { color: var(--red);   font-weight: 700; }
.p-name { font-weight: 700; }
.p-game { font-size: 11.5px; color: var(--dimmer); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty {
  border: 1px dashed var(--border-2); border-radius: var(--r);
  padding: 30px 26px; text-align: center; background: var(--card);
}
.empty h4 { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.empty p { font-size: 13.5px; color: var(--dim); max-width: 48ch; margin: 0 auto 14px; }
.empty .row { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.ft { border-top: 1px solid var(--border); margin-top: 50px; padding: 34px 0 26px; background: var(--bg-2); }
.ft-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 28px; }
.ft h5 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 11px; }
.ft a, .ft p { display: block; font-size: 13px; color: var(--dim); margin-bottom: 7px; }
.ft a:hover { color: var(--text); }
.ft-bot {
  border-top: 1px solid var(--border); margin-top: 24px; padding-top: 18px;
  font-size: 12px; color: var(--dimmer); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.rg-note {
  font-size: 12px; color: var(--dimmer); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 11px 14px; line-height: 1.5;
}

/* ============================================================
   CONCEPT BANNER (mockup only — not part of the real site)
   ============================================================ */
.cbanner {
  background: #1b1030; border-bottom: 1px solid #3a2260;
  padding: 9px 24px; font-size: 12.5px; color: #cbb6f5; text-align: center;
}
.cbanner b { color: #fff; }
.cbanner a { color: #b98cff; font-weight: 700; text-decoration: underline; }

@media (max-width: 900px) {
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .proof-strip { flex-wrap: wrap; }
  .proof-strip .cell { flex: 1 1 50%; border-bottom: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .g3, .g2 { grid-template-columns: 1fr; }
  .nav1 ul { display: none; }
}

/* ═══════════ PAGE LAYOUTS (from approved Concept A2) ═══════════ */
.hero-a { padding: 46px 0 40px; border-bottom: 1px solid var(--border);
    background: radial-gradient(90% 130% at 78% 0%, rgba(255,75,62,.10), transparent 58%); }
  .hero-a .grid-a { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; }
  .hero-a h1 { font-size: 44px; font-weight: 900; line-height: 1.02; }
  .hero-a h1 .hl { color: var(--accent); }
  .hero-a .lede { font-size: 15.5px; color: var(--dim); margin-top: 15px; max-width: 54ch; line-height: 1.6; }
  .ledger { background: var(--card); border: 1px solid var(--border-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
  .ledger .lh { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
  .ledger .lh .t { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dimmer); }
  .ledger .lh .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--green); }
  .ledger .lh .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
  .ledger .big { padding: 22px 20px 18px; text-align: center; border-bottom: 1px solid var(--border); }
  .ledger .big .n { font-family:'Archivo',sans-serif; font-weight: 900; font-size: 62px; line-height: 1; letter-spacing: -.05em; color: var(--amber); font-variant-numeric: tabular-nums; }
  .ledger .big .l { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer); margin-top: 7px; }
  .ledger .rows { display: grid; grid-template-columns: repeat(3,1fr); }
  .ledger .rows .c { padding: 14px 12px; text-align: center; border-right: 1px solid var(--border); }
  .ledger .rows .c:last-child { border-right: 0; }
  .ledger .rows .n { font-family:'Archivo',sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
  .ledger .rows .l { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--dimmer); margin-top: 3px; }
  .ledger .lf { padding: 12px 20px; background: var(--card-2); font-size: 12.5px; color: var(--dim); text-align: center; }
  .honest { display: flex; gap: 11px; align-items: flex-start; background: var(--card); border: 1px solid var(--border);
    border-left: 3px solid var(--amber); border-radius: var(--r-sm); padding: 13px 15px; margin-top: 20px; }
  .honest p { font-size: 13px; color: var(--dim); line-height: 1.55; }

  /* ═══ TABS ═══ */
  .tabbar { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; flex-wrap: wrap; }
  .tab { display: inline-flex; align-items: center; gap: 8px; padding: 12px 17px; font-size: 14.5px;
    font-weight: 700; color: var(--dim); border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer; transition: .15s; background: none; border-top: 0; border-left: 0; border-right: 0; font-family: inherit; }
  .tab:hover { color: var(--text); }
  .tab.on { color: var(--text); border-bottom-color: var(--accent); }
  .tab .ct { font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 100px;
    background: var(--card-3); color: var(--dim); font-variant-numeric: tabular-nums; }
  .tab.on .ct { background: var(--accent); color: #fff; }
  .panel { display: none; } .panel.on { display: block; }

  /* ═══ BOARD ═══ */
  .board-split { display: grid; grid-template-columns: 1fr 330px; gap: 20px; align-items: start; }
  .toolbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    padding: 11px 13px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r) var(--r) 0 0; border-bottom: 0; }
  .toolbar .lbl { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer); }
  .chip { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--border-2); color: var(--dim); background: var(--bg); transition: .15s; font-family: inherit; }
  .chip:hover { color: var(--text); }
  .chip.on { background: var(--card-3); color: var(--text); border-color: var(--dimmer); }
  .chip.hi.on { background: rgba(47,214,122,.16); color: var(--green); border-color: rgba(47,214,122,.4); }
  .chip.mid.on { background: rgba(255,176,32,.16); color: var(--amber); border-color: rgba(255,176,32,.4); }
  .toolbar .right { margin-left: auto; font-size: 12px; color: var(--dimmer); font-variant-numeric: tabular-nums; }
  .board-wrap { border-radius: 0 0 var(--r) var(--r); }
  table.tbl td.pick-cell { cursor: pointer; }
  .cbx { width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid var(--border-2);
    display: inline-flex; align-items: center; justify-content: center; flex: none; transition: .12s; }
  .cbx.on { background: var(--accent); border-color: var(--accent); }
  .cbx svg { opacity: 0; } .cbx.on svg { opacity: 1; }
  tr.sel { background: rgba(255,75,62,.06) !important; }
  tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

  /* ═══ SLIP ═══ */
  .slip { position: sticky; top: 108px; background: var(--card); border: 1px solid var(--border-2);
    border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
  .slip .sh { padding: 13px 15px; border-bottom: 1px solid var(--border); display: flex;
    align-items: center; justify-content: space-between; background: var(--card-2); }
  .slip .sh .t { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .slip .sh .clr { font-size: 11.5px; color: var(--dimmer); cursor: pointer; font-weight: 600; }
  .slip .sh .clr:hover { color: var(--red); }
  .slip .legs { max-height: 250px; overflow-y: auto; }
  .leg { display: flex; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--border); align-items: flex-start; }
  .leg .x { color: var(--dimmer); cursor: pointer; font-size: 15px; line-height: 1; flex: none; margin-top: 1px; }
  .leg .x:hover { color: var(--red); }
  .leg .ln { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
  .leg .lm { font-size: 11px; color: var(--dimmer); margin-top: 2px; }
  .leg .lo { margin-left: auto; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
  .slip .empty-s { padding: 26px 18px; text-align: center; }
  .slip .empty-s p { font-size: 12.5px; color: var(--dimmer); line-height: 1.55; }
  .slip .calc { padding: 14px 15px; border-bottom: 1px solid var(--border); }
  .crow { display: flex; align-items: baseline; justify-content: space-between; padding: 5px 0; font-size: 12.5px; }
  .crow .k { color: var(--dim); }
  .crow .v { font-family:'Archivo',sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 14px; }
  .crow.head { padding-bottom: 9px; margin-bottom: 5px; border-bottom: 1px solid var(--border); }
  .crow.head .k { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dimmer); }
  .crow.head .v { font-size: 25px; letter-spacing: -.03em; }
  .verdictbox { padding: 12px 15px; font-size: 12.5px; line-height: 1.5; }
  .verdictbox.ok { background: rgba(47,214,122,.07); border-top: 1px solid rgba(47,214,122,.22); color: var(--dim); }
  .verdictbox.warn { background: rgba(255,176,32,.07); border-top: 1px solid rgba(255,176,32,.22); color: var(--dim); }
  .verdictbox.bad { background: rgba(255,92,92,.07); border-top: 1px solid rgba(255,92,92,.22); color: var(--dim); }
  .verdictbox b { display: block; margin-bottom: 4px; font-size: 13px; }
  .verdictbox.ok b { color: var(--green); } .verdictbox.warn b { color: var(--amber); } .verdictbox.bad b { color: var(--red); }
  .corr { padding: 11px 15px; background: rgba(255,92,92,.08); border-top: 1px solid rgba(255,92,92,.25);
    font-size: 12px; color: var(--dim); line-height: 1.5; }
  .corr b { color: var(--red); }
  .slipfoot { padding: 11px 15px; background: var(--card-2); font-size: 11px; color: var(--dimmer); line-height: 1.5; border-top: 1px solid var(--border); }

  /* ═══ SLIDE-IN CAPTURE ═══ */
  .slidein { position: fixed; right: 20px; bottom: 20px; width: 348px; max-width: calc(100vw - 32px);
    background: var(--card); border: 1px solid var(--border-2); border-radius: var(--r-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,.6); padding: 19px 20px; z-index: 200;
    transform: translateY(140%); opacity: 0; transition: transform .42s cubic-bezier(.2,.8,.2,1), opacity .3s; }
  .slidein.up { transform: translateY(0); opacity: 1; }
  .slidein .cl { position: absolute; top: 11px; right: 13px; color: var(--dimmer); cursor: pointer;
    font-size: 17px; line-height: 1; }
  .slidein .cl:hover { color: var(--text); }
  .slidein h4 { font-size: 16.5px; font-weight: 800; margin-bottom: 6px; padding-right: 18px; }
  .slidein p { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
  .slidein form { display: flex; gap: 7px; margin-top: 13px; }
  .slidein input { flex: 1; min-width: 0; background: var(--bg); color: var(--text);
    border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 9px 11px; font-size: 13px; font-family: inherit; }
  .slidein input:focus { outline: none; border-color: var(--accent); }
  .slidein .fine { font-size: 10.5px; color: var(--dimmer); margin-top: 9px; }

  /* ═══ LEGEND / HOW TO READ ═══ */
  .legend { margin-top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
  .legend > .lgh { padding: 14px 17px; border-bottom: 1px solid var(--border); background: var(--card-2); }
  .legend > .lgh h3 { font-size: 15.5px; font-weight: 800; }
  .legend > .lgh p { font-size: 12.5px; color: var(--dim); margin-top: 4px; }
  .lgs { padding: 17px; border-bottom: 1px solid var(--border); }
  .lgs:last-child { border-bottom: 0; }
  .lgs > h4 { font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
    color: var(--dimmer); margin-bottom: 13px; }

  /* worked example */
  .walk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
    border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; background: var(--bg); }
  .walk .step { padding: 13px 14px; border-right: 1px solid var(--border); position: relative; }
  .walk .step:last-child { border-right: 0; }
  .walk .step .sn { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: var(--dimmer); text-transform: uppercase; }
  .walk .step .sv { font-family:'Archivo',sans-serif; font-weight: 900; font-size: 21px;
    letter-spacing: -.03em; margin: 5px 0 6px; font-variant-numeric: tabular-nums; }
  .walk .step .sd { font-size: 11.5px; color: var(--dim); line-height: 1.45; }
  .walk .step .calc2 { font-size: 10.5px; color: var(--dimmer); margin-top: 6px;
    font-variant-numeric: tabular-nums; background: var(--card-2); padding: 3px 6px;
    border-radius: 3px; display: inline-block; }
  .walk-cap { font-size: 12px; color: var(--dimmer); margin-top: 10px; line-height: 1.5; }
  .walk-cap b { color: var(--text); }

  /* definition grid */
  .defs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
  .def { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; }
  .def .dt { font-size: 12.5px; font-weight: 800; color: var(--text); line-height: 1.4; }
  .def .dd { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
  .def .dd em { color: var(--dimmer); font-style: normal; }

  .badgerow { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 10px; }
  .badgerow:last-child { margin-bottom: 0; }
  .badgerow .bl { flex: none; width: 92px; padding-top: 1px; }
  .badgerow .bd { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
  .badgerow .bd b { color: var(--text); }

  .warnbox { background: rgba(255,176,32,.07); border: 1px solid rgba(255,176,32,.24);
    border-radius: var(--r-sm); padding: 13px 15px; font-size: 12.5px; color: var(--dim); line-height: 1.55; }
  .warnbox b { color: var(--amber); }

  @media (max-width: 1100px) { .walk { grid-template-columns: repeat(2,1fr); } .walk .step { border-bottom: 1px solid var(--border); } }
  @media (max-width: 700px)  { .walk { grid-template-columns: 1fr; } .defs { grid-template-columns: 1fr; } }
  @media (max-width: 980px) { .board-split { grid-template-columns: 1fr; } .slip { position: static; } .hero-a .grid-a { grid-template-columns: 1fr; } }

/* ═══════════ ADDITIONS FOR THE REAL BUILD ═══════════ */
.post-header { padding: 40px 0 24px; }
.post-header h1 { font-size: 38px; font-weight: 900; line-height: 1.05; }
.post-header .dek { font-size: 16.5px; color: var(--dim); margin-top: 14px; max-width: 62ch; line-height: 1.6; }
.post-body { max-width: 760px; padding-bottom: 20px; }
.post-body h2 { font-size: 23px; font-weight: 800; margin: 30px 0 12px; }
.post-body h3 { font-size: 18px; font-weight: 800; margin: 22px 0 9px; }
.post-body p  { font-size: 15.5px; color: var(--dim); line-height: 1.68; margin-bottom: 15px; }
.post-body p b, .post-body b { color: var(--text); }
.post-body a  { color: var(--accent); font-weight: 600; }
.post-body ul, .post-body ol { margin: 0 0 15px 20px; }
.post-body li { font-size: 15.5px; color: var(--dim); line-height: 1.65; margin-bottom: 7px; }
.sub-note { font-size: 13.5px; color: var(--dimmer); margin-bottom: 8px; }
.leg-note { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border-2);
  border-radius: var(--r-sm); padding: 14px 16px; margin-bottom: 12px; font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.leg-note b { color: var(--text); }
.callout { background: rgba(255,176,32,.07); border: 1px solid rgba(255,176,32,.24);
  border-radius: var(--r-sm); padding: 15px 17px; margin: 18px 0; font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.warnbox .t, .warnbox b.t { color: var(--text); }
.locked-cut { background: linear-gradient(180deg, transparent, rgba(255,75,62,.09));
  border: 1px solid rgba(255,75,62,.3); border-radius: var(--r); padding: 26px; text-align: center; margin: 24px 0; }
.locked-cut b { font-size: 16px; display: block; margin-bottom: 6px; }
.locked-cut p { font-size: 13.5px; color: var(--dim); }
.ok-msg { font-size: 13px; color: var(--green); font-weight: 700; padding: 9px 0; }
.nav1 a.link.accent { color: var(--amber); }
.pill.quiet { opacity: .72; }
.look-header { max-width: var(--maxw); margin: 0 auto; padding: 36px 24px 26px; border-left: 3px solid var(--look); }
.look-header h1 { font-size: 36px; font-weight: 900; margin: 10px 0 8px; }
.look-header .meta { font-size: 14.5px; color: var(--dim); }
.look-badge { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: rgba(77,163,255,.14); color: var(--look); }
.updated-stamp { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 700;
  color: var(--look); background: rgba(77,163,255,.10); padding: 4px 10px; border-radius: 4px; }
.not-picks { background: rgba(77,163,255,.07); border: 1px solid rgba(77,163,255,.28);
  border-radius: var(--r); padding: 17px 19px; font-size: 14.5px; color: var(--dim); line-height: 1.6; margin-bottom: 8px; }
.not-picks b { color: var(--text); }
.change-entry { border-left: 2px solid rgba(77,163,255,.4); padding: 10px 0 10px 15px; margin-bottom: 14px;
  font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.change-entry .when { color: var(--look); font-weight: 700; display: block; margin-bottom: 4px; font-size: 12.5px; }
.tag.nfl { background: rgba(255,75,62,.13); color: var(--accent); }

.standfirst { font-size: 13.5px; color: var(--dimmer); margin-top: 10px; }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE FIXES — Aug 17
   The board table has a min-content width of ~671px. Its wrapper was
   overflow-x:hidden, so on a phone the table was clipped rather than
   scrollable, and an over-wide child inside overflow:hidden is a known
   cause of broken vertical scrolling on iOS. Landscape worked only
   because the table happened to fit.
   ═══════════════════════════════════════════════════════════════════ */

.tbl-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;   /* don't hijack the page's vertical scroll */
  max-width: 100%;
}
.legend, .walk, .slip { overflow-x: clip; max-width: 100%; }

/* ═══════════════════════════════════════════════════════════════════
   THE CUT-OFF BUG — fixed Sep 7 2026 (reported: Prop Builder clipped on
   phone AND desktop, with no way to scroll to the rest).

   Grid and flex children default to `min-width: auto`, so the `1fr`
   column of .board-split refused to shrink below the min-content width
   of the table inside it. The grid blew past its container (343 wide
   holding 454 of content on a phone; 1152 holding 1215 on desktop) and
   the old `overflow-x: clip` then hid the excess WITHOUT a scrollbar —
   cut off and unreachable, which is exactly what it looked like.

   `min-width: 0` lets the column shrink to its share; the table then
   overflows its own .tbl-wrap, which is `overflow-x: auto`, so the
   table scrolls sideways on its own and the page keeps scrolling down.
   Clip is removed rather than kept as a net: silently cutting content
   is how this went unnoticed for three weeks.
   ═══════════════════════════════════════════════════════════════════ */
.board-split { max-width: 100%; }
.board-split > *,
.grid > *,
.ggrid > *,
.hero-a .grid-a > * { min-width: 0; }

@media (max-width: 760px) {
  /* Let headers wrap instead of forcing the table wide */
  table.tbl th { white-space: normal; }
  table.tbl th, table.tbl td { padding: 10px 9px; }
  table.tbl { font-size: 12.5px; }

  /* On the board, Implied and Blended are the inputs to Gap — Gap is the
     number that matters, so drop them rather than side-scroll a phone. */
  .board-wrap table.tbl:not(.ins) thead th:nth-child(5),
  .board-wrap table.tbl:not(.ins) tbody td:nth-child(5),
  .board-wrap table.tbl:not(.ins) thead th:nth-child(6),
  .board-wrap table.tbl:not(.ins) tbody td:nth-child(6) { display: none; }

  .toolbar { gap: 6px; padding: 10px; }
  .toolbar .right { margin-left: 0; width: 100%; }
  .chip { font-size: 11.5px; padding: 5px 9px; }

  .hero-a { padding: 30px 0 26px; }
  .hero-a h1 { font-size: 30px; }
  .hero-a .lede { font-size: 14.5px; }
  .ledger .big .n { font-size: 46px; }

  .post-header h1 { font-size: 27px; }
  .post-header .dek { font-size: 15px; }
  .post-body h2 { font-size: 20px; }
  .post-body p, .post-body li { font-size: 15px; }

  .look-header h1 { font-size: 27px; }
  .sec { padding: 26px 0; }
  .wrap { padding: 0 16px; }

  /* The slide-in must never cover the page on a small screen */
  .slidein { right: 12px; left: 12px; bottom: 12px; width: auto; padding: 16px; }

  .ft-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 460px) {
  .board-wrap table.tbl:not(.ins) thead th:nth-child(8),
  .board-wrap table.tbl:not(.ins) tbody td:nth-child(8) { display: none; }  /* Matchup → shown in the slip */
  .nav1-inner { gap: 12px; padding: 11px 16px; }
  .nav1-right .btn { font-size: 12px; padding: 8px 11px; }
  .logo-text { font-size: 18px; }
}

/* ── Confidence column + market tag + sort control ── */
.confcell { display: flex; flex-direction: column; gap: 3px; min-width: 62px; }
.confnum { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums; line-height: 1; }
.confbar { display: block; height: 3px; border-radius: 2px; background: var(--card-3); overflow: hidden; }
.confbar i { display: block; height: 100%; border-radius: 2px; }
.mkt { color: var(--accent-2); font-weight: 700; }
.sortwrap { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px;
  padding-left: 10px; border-left: 1px solid var(--border-2); }
.chip.sort.on { background: rgba(255,75,62,.15); color: var(--accent); border-color: rgba(255,75,62,.4); }
.weakest { padding: 11px 15px; background: var(--card-2); border-top: 1px solid var(--border);
  font-size: 12px; color: var(--dim); line-height: 1.5; }
.weakest b { color: var(--text); }
@media (max-width: 760px) {
  .sortwrap { border-left: 0; padding-left: 0; margin-left: 0; }
  .board-wrap table.tbl:not(.ins) thead th:nth-child(7),
  .board-wrap table.tbl:not(.ins) tbody td:nth-child(7) { display: none; }  /* Gap — Confidence carries it */
}

/* ── Game-by-game dive blocks (2D) ──
   Each game gets a distinct frame: heavier outline, accent edge, breathing room,
   and a soft shadow so blocks read as separate cards when scanning a slate. */
.gamedive { background: var(--card); border: 2px solid var(--border); border-left: 4px solid var(--accent);
  border-radius: var(--r); margin-bottom: 28px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.gamedive + .gamedive { margin-top: 4px; }
.gd-head { padding: 13px 16px; background: var(--card-2); border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gd-head h3 { font-size: 16.5px; font-weight: 800; }
.gd-head .t { font-size: 12px; color: var(--dimmer); font-variant-numeric: tabular-nums; }
.gd-lines { display: flex; gap: 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.gd-lines .c { flex: 1; min-width: 110px; padding: 11px 14px; border-right: 1px solid var(--border); }
.gd-lines .c:last-child { border-right: 0; }
.gd-lines .k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer); }
.gd-lines .v { font-family: 'Archivo',sans-serif; font-weight: 800; font-size: 15px;
  margin-top: 3px; font-variant-numeric: tabular-nums; }
.gamedive .gd-body { padding: 14px 16px; font-size: 14.5px; color: var(--dim); line-height: 1.6; }
.gamedive .gd-body b { color: var(--text); }
.gd-lean { padding: 13px 16px; border-top: 1px solid var(--border);
  background: rgba(47,214,122,.05); display: flex; gap: 13px; align-items: flex-start; }
.gd-lean.nolean { background: rgba(154,163,178,.05); }
.gd-lean .conf { flex: none; text-align: center; min-width: 54px; }
.gd-lean .conf .n { font-family: 'Archivo',sans-serif; font-weight: 900; font-size: 21px;
  color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
.gd-lean.nolean .conf .n { color: var(--dimmer); font-size: 15px; }
.gd-lean .conf .l { font-size: 8.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dimmer); margin-top: 3px; }
.gd-lean .txt { font-size: 13.5px; color: var(--dim); line-height: 1.55; }
.gd-lean .txt b { color: var(--text); }
@media (max-width: 620px) { .gd-lines .c { min-width: 50%; border-bottom: 1px solid var(--border); } }

/* ═══ Sep 2 redesign: stacked game-block sections, section headers, prop-builder page ═══ */

/* Props get their own stacked band inside each game frame — no more cramming
   the verdict and the prop menu into one paragraph. */
.gd-props { padding: 13px 16px; border-top: 1px solid var(--border);
  background: rgba(91,140,255,.05); font-size: 14px; color: var(--dim); line-height: 1.6; }
.gd-props b { color: var(--text); }
.gd-props .pick-table-wrap { margin-top: 10px; }

/* Colorful section headers — the homepage should pop. */
.sec-head { display: block; margin-bottom: 18px; padding-left: 14px; border-left: 5px solid var(--accent); }
.sec-head h2 { font-size: 26px; font-weight: 900; letter-spacing: -.01em; }
.sec-head p { color: var(--dimmer); font-size: 13.5px; margin-top: 3px; }
.sec-head.accent { border-color: var(--accent); }  .sec-head.accent h2 { color: var(--accent); }
.sec-head.green  { border-color: var(--green); }   .sec-head.green h2  { color: var(--green); }
.sec-head.amber  { border-color: var(--amber); }   .sec-head.amber h2  { color: var(--amber); }

/* Today's cards get heavier frames so the top of the page feels like a front page. */
.today-grid .post { border: 2px solid var(--border); border-top: 4px solid var(--accent);
  box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.today-grid .post:hover { border-color: var(--accent); }

/* Prop Builder promo band on the homepage. */
.builder-promo { margin-top: 22px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 18px 20px; border: 2px solid var(--border);
  border-left: 5px solid var(--amber); border-radius: var(--r); background: var(--card); }
.builder-promo h3 { font-size: 17px; font-weight: 900; margin-bottom: 4px; }
.builder-promo p { color: var(--dim); font-size: 13.5px; max-width: 62ch; }

/* Prop Builder page header + organized filter panel: one labeled row per filter,
   nothing wraps into soup. */
.pagehead.builder { margin-bottom: 22px; padding: 22px 24px; border: 2px solid var(--border);
  border-left: 5px solid var(--accent); border-radius: var(--r); background: var(--card); }
.pagehead.builder h1 { font-size: 32px; font-weight: 900; }
.pagehead.builder h1 .hl { color: var(--accent); }
.pagehead.builder .lede { color: var(--dim); font-size: 14px; margin-top: 8px; max-width: 72ch; line-height: 1.6; }
.filterpanel { border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
  padding: 4px 14px; margin-bottom: 14px; }
.filterpanel .frow { display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px dashed var(--border); }
.filterpanel .frow.last { border-bottom: 0; }
.filterpanel .lbl { flex: none; width: 70px; font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer); }
.filterpanel .chips { display: flex; gap: 7px; flex-wrap: wrap; }
.filterpanel .right { margin-left: auto; font-size: 12px; color: var(--dimmer); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .filterpanel .lbl { width: 100%; } .filterpanel .frow { flex-wrap: wrap; } }
.filterpanel .frow { flex-wrap: wrap; }        /* a long chip row must never force the panel wide */
.filterpanel .chips { min-width: 0; }

/* ═══ Pass boxes: verification passes/grades as separate stamped, collapsible boxes ═══ */
.passes { margin-bottom: 26px; }
.passes-head { margin-bottom: 10px; }
.passes-head h2 { font-size: 15px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--amber); }
.passes-head p { font-size: 12.5px; color: var(--dimmer); margin-top: 2px; }
.pass-box { border: 1px solid var(--border); border-left: 4px solid var(--amber); border-radius: var(--r);
  background: var(--card); margin-bottom: 10px; overflow: hidden; }
.pass-box[open] { border-left-color: var(--green); }
.pass-box summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; background: var(--card-2); }
.pass-box summary::-webkit-details-marker { display: none; }
.pass-box summary::before { content: "▸"; color: var(--dimmer); font-size: 12px; flex: none; }
.pass-box[open] summary::before { content: "▾"; }
.pass-stamp { font-weight: 800; font-size: 13px; color: var(--text); line-height: 1.35; }
.pass-hint { margin-left: auto; flex: none; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dimmer); }
.pass-body { padding: 12px 14px 14px; font-size: 13.5px; line-height: 1.6; color: var(--dim); }
.pass-body b { color: var(--text); }

/* ═══ Matchup badges in game headers ═══ */
.gd-head { align-items: center; }
.gd-badge { flex: none; width: 150px; height: 50px; border-radius: 7px; margin-right: 12px;
  border: 1px solid var(--border-2); box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.gd-head h3 { flex: 1; min-width: 200px; }
@media (max-width: 640px) { .gd-badge { width: 120px; height: 40px; } }


/* ── Prop Score (0–10 scorecard, stars for the reader) ── */
.pscore { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1; cursor: help; }
.pscore .stars { font-size: 12px; letter-spacing: 1px; color: var(--dim); }
.pscore .num { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; color: var(--dim); }
.pscore.s5 .stars, .pscore.s5 .num { color: var(--green); }
.pscore.s4 .stars, .pscore.s4 .num { color: var(--green); opacity: .9; }
.pscore.s3 .stars, .pscore.s3 .num { color: var(--amber); }
.pscore.s2 .stars, .pscore.s2 .num { color: var(--dim); }
.pscore.s1 .stars, .pscore.s1 .num { color: var(--red); }
.pscore.none { color: var(--dim); opacity: .5; }
.score-badge { display: inline-block; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.score-badge.s5, .score-badge.s4 { background: rgba(47,214,122,.15); color: var(--green); }
.score-badge.s3 { background: rgba(255,176,32,.15); color: var(--amber); }
.score-badge.s2 { background: rgba(154,163,178,.13); color: var(--dim); }
.score-badge.s1 { background: rgba(255,92,92,.13); color: var(--red); }
.score-table td:first-child { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════
   INSIGHTS BOARDS (Sep 6 2026) — player board + game board per sport
   ═══════════════════════════════════════════════════════════════════ */
.subtabs { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.subtab {
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--dim); background: var(--card);
}
.subtab:hover { color: var(--text); border-color: var(--dimmer); }
.subtab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ins-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 14px; }
.ins-stats .stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 16px; min-width: 110px; display: flex; flex-direction: column; gap: 2px;
}
.ins-stats .stat b { font-size: 22px; font-weight: 900; line-height: 1; }
.ins-stats .stat span { font-size: 11px; color: var(--dimmer); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.viewtabs { display: flex; gap: 0; margin: 6px 0 14px; border-bottom: 1px solid var(--border); }
.viewtabs .vt {
  background: none; border: 0; color: var(--dim); font: inherit; font-weight: 800; font-size: 15px;
  padding: 10px 18px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.viewtabs .vt.on { color: var(--text); border-bottom-color: var(--accent); }
.q {
  background: var(--bg); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--r-sm);
  padding: 6px 10px; font: inherit; font-size: 13px; margin-left: 10px;
  flex: 1 1 160px; min-width: 0; max-width: 260px;
}
@media (max-width: 640px) { .q { margin-left: 0; max-width: none; flex-basis: 100%; } }
table.tbl.ins td { font-size: 13px; }
.ispub td { background: rgba(255,75,62,.045); }
.pub {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,75,62,.16); color: var(--accent); padding: 2px 6px; border-radius: 4px; vertical-align: middle; margin-left: 4px;
}
.itags { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }
.itag { font-size: 10.5px; font-weight: 700; color: var(--dim); background: var(--card-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 4px; }
.inote { font-size: 11.5px; color: var(--dim); margin-top: 4px; max-width: 420px; line-height: 1.4; }
.dpos { color: var(--green); font-weight: 700; }
.dneg { color: var(--red); font-weight: 700; }
.wins i { display: inline-block; min-width: 26px; text-align: center; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 3px; border-radius: 4px; margin-right: 2px; font-variant-numeric: tabular-nums; }
.wins .wg { background: rgba(47,214,122,.15); color: var(--green); }
.wins .wm { background: rgba(255,176,32,.15); color: var(--amber); }
.wins .wn { background: rgba(154,163,178,.10); color: var(--dimmer); }
.rd { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; padding: 3px 8px; border-radius: 4px; }
.rd-over  { background: rgba(47,214,122,.15); color: var(--green); }
.rd-under { background: rgba(255,176,32,.15); color: var(--amber); }
.rd-line  { background: rgba(154,163,178,.12); color: var(--dim); }
.rd-pass  { background: rgba(255,92,92,.12); color: var(--red); }
.agree { display: block; font-size: 10.5px; color: var(--dimmer); margin-top: 3px; }
.prov { display: inline-block; font-size: 10px; color: var(--amber); margin-left: 5px; font-weight: 700; }
.fineprint { font-size: 12px; color: var(--dimmer); line-height: 1.55; margin: 12px 4px 0; max-width: 900px; }
/* game board */
.gcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 16px 18px; margin-bottom: 12px; }
.gcard.stay { opacity: .92; }
.gtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.gname { font-size: 18px; font-weight: 900; }
.gmeta { font-size: 12px; color: var(--dimmer); margin-top: 2px; }
.gverdict { font-weight: 900; font-size: 14px; padding: 8px 14px; border-radius: var(--r-sm); white-space: nowrap; }
.gverdict.v-lean { background: rgba(47,214,122,.14); color: var(--green); }
.gverdict.v-stay { background: rgba(154,163,178,.12); color: var(--dim); }
.gconf { display: block; font-size: 11px; font-weight: 700; color: var(--dim); margin-top: 2px; }
.ggrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
@media (max-width: 860px) { .ggrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ggrid { grid-template-columns: 1fr; } }
.gcol, .spbox { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 12px; }
.sph { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--dimmer); margin-bottom: 6px; }
.sp { font-size: 12.5px; display: flex; gap: 8px; padding: 3px 0; border-top: 1px dashed var(--border); }
.sp:first-of-type { border-top: 0; }
.spl { color: var(--dimmer); min-width: 48px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }
.rt { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; border-top: 1px dashed var(--border); }
.rt:first-of-type { border-top: 0; }
.rtl { color: var(--dimmer); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.gsys { margin-top: 12px; }
.gsys ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.gsys li { margin: 3px 0; }
.sside { color: var(--green); }
.sside.sx { color: var(--red); }
.srec { color: var(--dimmer); font-size: 11.5px; }
.gnote { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--text); border-left: 3px solid var(--accent); padding-left: 12px; }
.ins-card.quiet { opacity: .6; }
.ins-card h3 { margin: 6px 0 8px; font-size: 18px; }
.ins-card .meta { font-size: 13px; color: var(--dim); margin: 0 0 8px; }
.ins-card .btn { margin-top: 6px; }


/* Insights boards: every column earns its place, so the table scrolls
   sideways inside its wrapper rather than dropping columns on a phone. */
.ins-stats, .viewtabs, .subtabs { max-width: 100%; }
.gcard, .gcol, .spbox { min-width: 0; }
.gcard { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  table.tbl.ins { font-size: 12px; }
  table.tbl.ins th, table.tbl.ins td { padding: 9px 8px; }
  .inote { max-width: 260px; }
  .viewtabs .vt { padding: 10px 14px; font-size: 14px; }
}

/* ═══ CARD FORMAT v3 (Sep 8 2026, user spec) ═══
   1. Updates live IN the analysis. No stacked callouts on top; an "Updated" stamp on the
      card header and on each changed game; the change log folds at the BOTTOM.
   2. Every player prop carries its why.
   3. Twelve positional players per game (QB/WR1/WR2/WR3/RB/TE × 2), each rated.
   4. Props are tiles in a grid, not rows in a wall. */
.upd-stamp { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green);
  background: rgba(47,214,122,.10); border: 1px solid rgba(47,214,122,.35); border-radius: 999px;
  padding: 3px 10px; white-space: nowrap; }
.upd-stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.gd-head .gd-upd { flex: none; margin-left: auto; }
@media (max-width: 640px) { .gd-head .gd-upd { margin-left: 0; width: 100%; justify-content: flex-start; } .gd-head .gd-upd .upd-stamp { white-space: normal; } }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 10px; }
.pgrid > * { min-width: 0; }
.ptile { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 13px 13px;
  display: flex; flex-direction: column; gap: 7px; border-top: 3px solid var(--border-2); }
.ptile.play  { border-top-color: var(--green); }
.ptile.watch { border-top-color: var(--amber); }
.ptile.nop   { border-top-color: var(--border-2); opacity: .88; }
.pt-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pt-pos { flex: none; font-size: 10px; font-weight: 900; letter-spacing: .08em; padding: 2px 7px; border-radius: 5px;
  background: var(--card-3); color: var(--dim); font-variant-numeric: tabular-nums; }
.pt-team { font-size: 11px; font-weight: 800; color: var(--dimmer); letter-spacing: .06em; }
.pt-name { font-weight: 800; color: var(--text); font-size: 14.5px; line-height: 1.25; flex-basis: 100%; }
.pt-mkt { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pt-mkt b { color: var(--text); font-size: 14px; }
.pt-mkt .odds { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--dim); font-variant-numeric: tabular-nums; }
.pt-mkt .odds .was { font-weight: 600; color: var(--dimmer); font-size: 11px; margin-left: 5px; }
.pt-verd { align-self: flex-start; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px; }
.pt-verd.play  { background: rgba(47,214,122,.15); color: var(--green); }
.pt-verd.watch { background: rgba(255,176,32,.15); color: var(--amber); }
.pt-verd.nop   { background: rgba(154,163,178,.12); color: var(--dimmer); }
.pt-proj { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; padding: 8px 10px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-sm); }
.pt-proj > div { min-width: 0; }
.pt-proj .k { display: block; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dimmer); }
.pt-proj .v { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.pt-proj .v.up { color: var(--green); } .pt-proj .v.dn { color: var(--red); } .pt-proj .v.flat { color: var(--dim); }
.pt-why { font-size: 12.8px; line-height: 1.55; color: var(--dim); }
.pt-why b { color: var(--text); }
.pt-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.pt-tags span { font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px;
  background: var(--card-3); color: var(--dim); }
.pt-tags span.x { background: rgba(255,92,92,.12); color: var(--red); }
.pt-tags span.ok { background: rgba(47,214,122,.12); color: var(--green); }
.ptile .score-badge { margin-left: 0; }
.gd-props .pgrid-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gd-props .pgrid-head .n { font-size: 11.5px; color: var(--dimmer); }

.changes { margin-top: 26px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); }
.changes summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 15px; }
.changes summary::-webkit-details-marker { display: none; }
.changes summary::before { content: "▸"; color: var(--dimmer); font-size: 12px; }
.changes[open] summary::before { content: "▾"; }
.changes summary h2 { font-size: 13.5px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); margin: 0; }
.changes summary .n { margin-left: auto; font-size: 11px; color: var(--dimmer); font-weight: 700; }
.changes .cbody { padding: 4px 15px 12px; }
.changes .change-entry { font-size: 13px; color: var(--dim); }
.passes { margin-top: 26px; margin-bottom: 0; }   /* legacy pass boxes now sit under the analysis */
table.tbl .was { font-size: 10.5px; color: var(--dimmer); font-weight: 600; white-space: nowrap; }