/* gridiron.css — The Gridiron King (NFL) brand layer, layered on the
   ColesAlgoPicks design system (tennis.css supplies the topbar, layout,
   buttons, drawer + base structure). This file ONLY re-skins the tokens to
   the network gold/crimson and adds a few football-flavored components.
   Network color tokens (do not invent new ones):
     --brand-gold:#F5C542  --brand-crimson:#D9342B  (== HRK --gold/--crimson) */

:root {
  /* re-point the design-system signature tokens to the network gold/crimson.
     tennis.css references --optic/--gold/--ball everywhere, so aliasing them
     re-skins the whole shell without touching tennis.css. */
  --gold:#F5C542; --optic:#F5C542; --optic-2:#ffd969; --ball:#F5C542;
  --optic-ink:#0a0808;
  --crimson:#D9342B;
  /* darker, slightly warm gridiron base so the gold/crimson pop */
  --bg:#0a0808; --bg-2:#140a0a; --panel:#16111a; --panel-2:#1d141d;
  --panel-solid:#16111a; --raise:#241a22; --hair:#2a1f23; --hair-2:#3a2c2f;
  --line:#2a1f23; --card:#16111a;
  --ink:#f1e7dd; --ink-2:#c4b3a8; --ink-3:#8a7770; --ink-4:#5a4a45;
  --pos:#54e39a; --neg:#ff7d7d;
  --glow:radial-gradient(1100px 560px at 78% -12%,rgba(245,197,66,.10),transparent 58%),
         radial-gradient(820px 520px at 6% -6%,rgba(217,52,43,.08),transparent 56%);
}

/* topbar: no nav-search on the skeleton, push nav to the right edge */
.topbar{display:flex;align-items:center}
.nav{margin-left:auto}
@media(max-width:760px){.nav{margin-left:0}}

/* crown chip uses the gold gradient + a football tint */
.crown{background:radial-gradient(circle at 32% 28%,var(--optic-2),var(--gold) 55%,#b8902a)}
.logo .name .gold{color:var(--gold)}
.logo .name .crimson{color:var(--crimson)}

/* grade chip (kept identical semantics to the rest of the network) */
.grade{display:inline-block;min-width:2.1em;text-align:center;font-weight:800;border-radius:6px;padding:2px 6px;font-size:.82rem;font-family:'JetBrains Mono',monospace}
.grade.Ap,.grade.A{background:#173d2a;color:#5fe39a;border:1px solid #2e6b48}
.grade.B{background:#1c3520;color:#8fd6a0;border:1px solid #2e5b3a}
.grade.C{background:#34320f;color:#e7d77a;border:1px solid #5a541d}
.grade.D{background:#3a2417;color:#e9a06a;border:1px solid #6a3f23}
.grade.F{background:#3a1820;color:#e87f8c;border:1px solid #6a2c38}
.edge-pos{color:#5fe39a;font-weight:700}.edge-neg{color:#e87f8c}
.side-over{color:#5fe39a;font-weight:700}.side-under{color:#e89a6a;font-weight:700}

/* a generic "coming soon" placeholder card for the skeleton pages */
.gk-soon{max-width:720px;margin:3rem auto;padding:0 1.2rem;text-align:center}
.gk-soon .badge{display:inline-block;padding:5px 12px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--hair);color:var(--gold);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:18px}
.gk-soon h1{font-family:'Bricolage Grotesque';font-size:clamp(2rem,6vw,3.2rem);margin:.2rem 0 .6rem}
.gk-soon h1 .gold{color:var(--gold)}
.gk-soon p{color:var(--ink-2);max-width:560px;margin:.6rem auto 1.6rem;font-size:1.05rem}
.gk-soon .cta a{display:inline-block;padding:.7rem 1.3rem;border-radius:10px;font-weight:700;
  background:var(--gold);color:#0a0808;text-decoration:none}

/* ============================================================
   Gridiron King — shared component layer used by every app page.
   (tennis.css supplies the shell/topbar/drawer; this adds the
   page-body components the network's data pages rely on.)
   ============================================================ */
.mini{color:var(--ink-3);font-size:.78rem}
.muted{color:var(--ink-3)}
.gold-t{color:var(--gold)}
.right{text-align:right}.center{text-align:center}
.nowrap{white-space:nowrap}

/* page header (compact, used on data pages instead of the giant .hero) */
.page-head{margin:0 0 1.1rem}
.page-head .eyebrow{display:inline-block;padding:4px 11px;border-radius:999px;background:var(--panel-2);
  border:1px solid var(--hair);color:var(--gold);font-size:10.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:12px}
.page-head h1{font-family:'Bricolage Grotesque';font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1;margin:0 0 .35rem;letter-spacing:-.02em}
.page-head h1 .gold{color:var(--gold)}
.page-head .sub{color:var(--ink-2);font-size:.98rem;max-width:760px;margin:0}
.vintage-note{display:inline-flex;align-items:center;gap:.4rem;margin-top:.55rem;padding:3px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2);font:600 .72rem/1.3 'Hanken Grotesk',sans-serif;letter-spacing:.01em}
.vintage-note .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}

/* honesty / info banner */
.gk-banner{display:flex;gap:.7rem;align-items:flex-start;background:linear-gradient(168deg,var(--panel-2),var(--panel-solid));
  border:1px solid var(--hair);border-left:3px solid var(--gold);border-radius:12px;padding:.85rem 1rem;margin:0 0 1.3rem;color:var(--ink-2);font-size:.88rem;line-height:1.55}
.gk-banner .ic{font-size:1.05rem;line-height:1.2}
.gk-banner b{color:var(--ink)}
.gk-banner.live{border-left-color:var(--pos)}
.gk-banner.soon{border-left-color:var(--crimson)}

/* KPI / stat strip */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:1px;background:var(--hair);
  border:1px solid var(--hair);border-radius:14px;overflow:hidden;margin:0 0 1.4rem}
.kpis .k{background:linear-gradient(168deg,var(--panel-2),var(--panel-solid));padding:14px 16px}
.kpis .k .v{font-family:'Bricolage Grotesque';font-size:1.7rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.kpis .k .v.gold{color:var(--gold)}.kpis .k .v.pos{color:var(--pos)}.kpis .k .v.neg{color:var(--neg)}
.kpis .k .l{color:var(--ink-3);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-top:6px}

/* cards / panels */
.gk-card{background:linear-gradient(168deg,var(--panel-2),var(--panel-solid));border:1px solid var(--hair);border-radius:14px;padding:1rem 1.1rem}
.gk-grid{display:grid;gap:.9rem}
.gk-grid.c2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.gk-grid.c3{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.sec-title{font-family:'Bricolage Grotesque';font-size:1.18rem;font-weight:700;margin:1.6rem 0 .7rem}
.sec-title:first-child{margin-top:0}

/* responsive table — never overflows (wrapper scrolls on mobile) */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hair);border-radius:14px;background:var(--panel-solid)}
table.gk{width:100%;border-collapse:collapse;font-size:.85rem}
table.gk th{position:sticky;top:0;z-index:1;background:var(--panel-2);text-align:right;padding:.6rem .7rem;
  white-space:nowrap;color:var(--ink-3);border-bottom:1px solid var(--hair);font-weight:800;font-size:.72rem;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;user-select:none}
table.gk th.nosort{cursor:default}
table.gk th:first-child,table.gk td:first-child{text-align:left}
table.gk td{padding:.55rem .7rem;text-align:right;border-bottom:1px solid var(--hair);white-space:nowrap;color:var(--ink)}
table.gk tbody tr:last-child td{border-bottom:0}
table.gk tbody tr:hover td{background:var(--raise)}
table.gk td a{color:var(--ink);font-weight:700}table.gk td a:hover{color:var(--gold)}
table.gk .num{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
table.gk th.sorted{color:var(--gold)}

/* chips / tags */
.tag{display:inline-block;font:800 .64rem/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em;
  border-radius:6px;padding:.3em .5em;border:1px solid var(--hair-2);background:var(--panel-2);color:var(--ink-2);vertical-align:middle}
.tag.pos{background:#173d2a;color:#5fe39a;border-color:#2e6b48}
.tag.neg{background:#3a1820;color:#e87f8c;border-color:#6a2c38}
.tag.warn{background:#34320f;color:#e7d77a;border-color:#5a541d}
.tag.info{background:#1b2740;color:#8fb6ff;border-color:#2c477a}
.tag.gold{background:#33290c;color:var(--gold);border-color:#5a4a1d}
.idx{font:800 .8rem/1 'JetBrains Mono',monospace;border-radius:6px;padding:.28em .5em;display:inline-block;min-width:3.2em;text-align:center}
.idx.soft{background:#3a1820;color:#ff9a9a}      /* def allows more = good for offense */
.idx.softish{background:#34320f;color:#e7d77a}
.idx.neutral{background:var(--panel-2);color:var(--ink-2)}
.idx.toughish{background:#15301f;color:#9fdcb4}
.idx.tough{background:#173d2a;color:#5fe39a}      /* stingy defense */
.pct-pos{color:var(--pos);font-weight:700}.pct-neg{color:var(--neg);font-weight:700}

/* segmented controls / filter bar reuse tennis.css .seg/.chip; add a toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin:0 0 1rem}
.toolbar input[type=search],.toolbar select{padding:.5rem .65rem;border-radius:9px;border:1px solid var(--hair-2);
  background:var(--panel-2);color:var(--ink);font-size:.86rem;font-family:inherit}
.toolbar input[type=search]:focus,.toolbar select:focus{outline:0;border-color:var(--gold)}
.toolbar label{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2);font-size:.85rem;font-weight:600}

/* tier divider rows inside fantasy tables */
.tier-row td{background:var(--bg-2)!important;color:var(--gold);font:800 .68rem/1 'JetBrains Mono',monospace;
  letter-spacing:.08em;text-transform:uppercase;padding:.45rem .7rem;text-align:left}

/* matchup / game row card (for games / today / live) */
.matchcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.9rem}
.mc{background:linear-gradient(168deg,var(--panel-2),var(--panel-solid));border:1px solid var(--hair);border-radius:14px;
  padding:.85rem 1rem;display:block;color:inherit;transition:.16s}
.mc:hover{border-color:var(--hair-2);transform:translateY(-1px)}
.mc .mc-top{display:flex;justify-content:space-between;align-items:center;font:700 .68rem/1 'JetBrains Mono',monospace;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.55rem}
.mc .mc-team{display:flex;justify-content:space-between;align-items:baseline;font:700 1.02rem/1.4 'Hanken Grotesk'}
.mc .mc-team .ml{font:600 .8rem/1 'JetBrains Mono',monospace;color:var(--ink-2)}
.mc .mc-line{display:flex;justify-content:space-between;gap:.5rem;font:600 .76rem/1.4 'JetBrains Mono',monospace;color:var(--ink-2);margin-top:.55rem;border-top:1px solid var(--hair);padding-top:.5rem}
.mc .mc-lean{margin-top:.5rem}

/* empty state */
.gk-empty{text-align:center;color:var(--ink-3);padding:2.4rem 1rem;font-size:.95rem}
.gk-empty .ic{font-size:2rem;display:block;margin-bottom:.5rem;opacity:.7}

/* the canonical footer injected by inject_nav.py */
footer.site-foot{max-width:1140px;margin:2.5rem auto 0;padding:1.4rem 24px 2.4rem;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;color:var(--ink-3);font-size:.82rem}
footer.site-foot a{color:var(--ink-2);text-decoration:none}footer.site-foot a:hover{color:var(--gold)}
footer.site-foot span{color:var(--ink-4)}
footer.site-foot .foot-fine{flex-basis:100%;color:var(--ink-4);font-size:.74rem;margin-top:.6rem;line-height:1.6}

/* cheatsheet cross-link tab strip injected by inject_nav.py */
.cheat-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.2rem}
.cheat-tabs a{padding:.45rem .9rem;border-radius:9px;background:var(--panel-2);border:1px solid var(--hair);
  color:var(--ink-2);font-weight:700;font-size:.85rem;text-decoration:none}
.cheat-tabs a:hover{color:var(--gold);border-color:var(--hair-2)}
.cheat-tabs a.active{background:var(--gold);color:#0a0808;border-color:var(--gold)}

/* fantasy player headshot/name block */
.pl-cell{display:flex;align-items:center;gap:.5rem}
.pl-cell .pos-pill{font:800 .6rem/1 'JetBrains Mono',monospace;border-radius:5px;padding:.28em .4em;background:var(--panel-2);border:1px solid var(--hair-2);color:var(--ink-2)}
.pos-QB{color:#ff9a9a!important;border-color:#6a2c38!important}
.pos-RB{color:#9fdcb4!important;border-color:#2e6b48!important}
.pos-WR{color:#8fb6ff!important;border-color:#2c477a!important}
.pos-TE{color:#e7d77a!important;border-color:#5a541d!important}

@media(max-width:600px){
  .wrap{padding:22px 14px 70px}
  table.gk{font-size:.8rem}
  table.gk th,table.gk td{padding:.45rem .5rem}
  .page-head h1{font-size:1.7rem}
}

/* ============ QA pass 2026-06-09: overflow + mobile polish ============ */
/* Global guard: the off-canvas mobile nav drawer (translateX(100%)) and any
   wide content must never create page-level horizontal scroll. */
html,body{max-width:100%;overflow-x:hidden}

/* Segmented controls can have many options (e.g. stat categories, position
   filters) — let them scroll horizontally instead of widening the page. */
.seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.seg::-webkit-scrollbar{height:0}

@media (max-width:560px){
  /* Bet-tracker entry row: stack instead of 4 cramped columns. */
  .bet-add{grid-template-columns:1fr 1fr!important}
  .bet-add #bdesc{grid-column:1 / -1}
  .bet-add #add{grid-column:1 / -1}
  /* Toolbars wrap cleanly and selects/inputs don't overflow. */
  .toolbar input[type=search],.toolbar select{max-width:100%}
}

/* ============ UI polish 2026-06-09: legend + advanced usage columns ============ */
/* "What do these mean?" collapsible jargon key on data tables. */
details.gk-legend{margin:0 0 1rem;border:1px solid var(--hair);border-radius:12px;background:var(--panel-solid)}
details.gk-legend>summary{cursor:pointer;list-style:none;padding:.6rem .85rem;font:700 .82rem/1.3 "Hanken Grotesk";color:var(--ink-2)}
details.gk-legend>summary::-webkit-details-marker{display:none}
details.gk-legend>summary::before{content:"▸ ";color:var(--gold)}
details.gk-legend[open]>summary::before{content:"▾ "}
details.gk-legend>summary:hover{color:var(--gold)}
.gk-legend .legend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem .9rem;padding:.2rem .9rem 1rem}
.gk-legend .legend-grid div{font-size:.8rem;color:var(--ink-2);line-height:1.45}
.gk-legend .legend-grid b{color:var(--ink);font-weight:700}
/* a "th" with a help affordance: dotted underline + help cursor on hover-title */
table.gk th[title]{text-decoration:underline dotted var(--hair-2);text-underline-offset:3px;cursor:help}
table.gk th[title].sorted{text-decoration-color:var(--gold)}
/* advanced-usage columns are hidden until the toggle adds .show-adv to the table */
table.gk:not(.show-adv) .adv-col{display:none}
.toolbar label.adv-toggle{margin-left:auto}
@media(max-width:600px){.toolbar label.adv-toggle{margin-left:0}}

/* Mobile quick position-jump: sticky thumb bar so a 700+ row board isn't an
   endless scroll. Hidden on desktop (the toolbar #pos seg covers it there). */
.posjump{display:none}
@media(max-width:760px){
  .posjump{display:flex;gap:.35rem;position:sticky;top:0;z-index:30;margin:0 -14px .8rem;
    padding:.5rem 14px;background:color-mix(in srgb,var(--panel-solid) 92%,transparent);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);
    overflow-x:auto;-webkit-overflow-scrolling:touch}
  .posjump::-webkit-scrollbar{height:0}
  .posjump button{flex:0 0 auto;padding:.5rem .85rem;border-radius:999px;border:1px solid var(--hair-2);
    background:var(--panel-2);color:var(--ink-2);font:700 .82rem/1 "Hanken Grotesk";cursor:pointer}
  .posjump button[aria-pressed=true]{background:var(--gold);color:#1a1206;border-color:var(--gold)}
}

/* Start/Sit depth (backup) rows dimmed so clipboard QBs don't visually lead. */
table.gk tr.is-depth td{opacity:.62}
table.gk tr.is-depth .tag.mini{opacity:1;background:var(--panel-2);color:var(--ink-2)}