/* ===========================================================
   OJT Fantasy Football — shared design system
   Bebas Neue (display) · Oswald 600 (numbers) · Georgia (body)
   amber = wins/record camp · teal = points camp · rust = shame
   =========================================================== */
:root{
  --bg:#0C0F13; --bg2:#12161C; --bg3:#161C24;
  --ink:#EEF1F5; --soft:#9AA3AE; --faint:#7E8894;
  --line:#232A33; --line2:#2E3742;
  --wins:#F2A93B; --wins-dim:#8a6320; --wins-tint:rgba(242,169,59,.09);
  --points:#33C2B5; --points-dim:#1f6c65; --points-tint:rgba(51,194,181,.09);
  --shame:#E06A4E; --shame-dim:#8a3b2a; --shame-tint:rgba(224,106,78,.10);
  --ink-soft:#6b7683;
  --f-display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --f-num:'Oswald','Roboto Condensed',ui-monospace,monospace;
  --f-body:Georgia,'Times New Roman',serif;
  --pad:26px;            /* horizontal gutter — shared by .wrap and full-bleed charts so nothing overflows */
}
@media(max-width:600px){ :root{ --pad:20px; } }
@media (prefers-color-scheme:light){
  :root{
    --bg:#E9EBEE; --bg2:#FFFFFF; --bg3:#F4F6F8;
    --ink:#14181D; --soft:#525A63; --faint:#656A71;
    --line:#D9DDE2; --line2:#C8CDD3;
    --wins:#9C5C0C; --wins-dim:#c78a3a; --wins-tint:rgba(156,92,12,.07);
    --points:#0C7A6F; --points-dim:#5aa79f; --points-tint:rgba(12,122,111,.07);
    --shame:#B23A22; --shame-dim:#d08a79; --shame-tint:rgba(178,58,34,.06);
    --ink-soft:#9aa3ad;
  }
}
:root[data-theme="light"]{
  --bg:#E9EBEE; --bg2:#FFFFFF; --bg3:#F4F6F8;
  --ink:#14181D; --soft:#525A63; --faint:#656A71;
  --line:#D9DDE2; --line2:#C8CDD3;
  --wins:#9C5C0C; --wins-dim:#c78a3a; --wins-tint:rgba(156,92,12,.07);
  --points:#0C7A6F; --points-dim:#5aa79f; --points-tint:rgba(12,122,111,.07);
  --shame:#B23A22; --shame-dim:#d08a79; --shame-tint:rgba(178,58,34,.06);
  --ink-soft:#9aa3ad;
}
:root[data-theme="dark"]{
  --bg:#0C0F13; --bg2:#12161C; --bg3:#161C24;
  --ink:#EEF1F5; --soft:#9AA3AE; --faint:#7E8894;
  --line:#232A33; --line2:#2E3742;
  --wins:#F2A93B; --wins-dim:#8a6320; --wins-tint:rgba(242,169,59,.09);
  --points:#33C2B5; --points-dim:#1f6c65; --points-tint:rgba(51,194,181,.09);
  --shame:#E06A4E; --shame-dim:#8a3b2a; --shame-tint:rgba(224,106,78,.10);
  --ink-soft:#6b7683;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);line-height:1.62;-webkit-font-smoothing:antialiased;font-size:16.5px;overflow-x:clip;}
img,svg{max-width:100%;}
.wrap{max-width:1060px;margin:0 auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-weight:600;}
.disp{font-family:var(--f-display);font-weight:400;}
a{color:inherit;}
em{color:inherit;}

/* ---- top nav ---- */
.nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;min-height:54px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap;position:relative;}
.brand{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;flex:none;}
.brand .mark{font-family:var(--f-display);font-size:26px;letter-spacing:.06em;color:var(--ink);line-height:1;}
.brand .mark .o{color:var(--wins);} .brand .mark .j{color:var(--points);}
.brand .sub{font-family:var(--f-num);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);}
@media(max-width:440px){.brand .sub{display:none}}
.navright{display:flex;align-items:center;gap:clamp(11px,2.6vw,22px);flex-wrap:wrap;}
.navlinks{display:flex;gap:clamp(11px,2.6vw,22px);align-items:center;flex-wrap:wrap;}
.navlinks a{font-family:var(--f-display);letter-spacing:.11em;text-transform:uppercase;font-size:16px;color:var(--soft);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:color .15s;white-space:nowrap;}
.navlinks a:hover{color:var(--ink);}
.navlinks a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--wins);}
.themetoggle{appearance:none;background:transparent;border:1px solid var(--line2);color:var(--soft);width:34px;height:30px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s;flex:none;}
.themetoggle:hover{color:var(--ink);border-color:var(--soft);}
.themetoggle:focus-visible{outline:2px solid var(--points);outline-offset:2px;}
/* mobile: pin the toggle to the nav's top-right corner and force the links onto their own row; tighten the six tabs so they fit one line */
@media(max-width:600px){
  .navright{flex-basis:100%;}
  .themetoggle{position:absolute;top:7px;right:max(var(--pad),env(safe-area-inset-right));}
  .navlinks{gap:9px;}
  .navlinks a{font-size:13px;letter-spacing:.02em;}
}

/* ---- secondary sub-nav (section tabs, one level under the top nav) ---- */
.subnav{background:var(--bg2);border-bottom:1px solid var(--line);}
.subnav .wrap{display:flex;align-items:center;gap:clamp(15px,3vw,28px);min-height:43px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.subnav .wrap::-webkit-scrollbar{display:none;}
.subnav a,.subnav .soon{font-family:var(--f-num);font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;padding:12px 0;border-bottom:2px solid transparent;flex:none;}
.subnav a{color:var(--soft);text-decoration:none;transition:color .15s,border-color .15s;}
.subnav a:hover{color:var(--ink);}
.subnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--points);}
.subnav .soon{color:var(--faint);display:inline-flex;align-items:center;gap:7px;cursor:default;}
.subnav .soon::after{content:"soon";font-size:8.5px;letter-spacing:.06em;padding:2px 6px;border-radius:20px;
  background:var(--bg3);color:var(--faint);box-shadow:inset 0 0 0 1px var(--line2);}
@media(max-width:600px){
  .subnav .wrap{gap:18px;padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right));}
  .subnav a,.subnav .soon{font-size:12px;letter-spacing:.06em;}
}

/* ---- generic section scaffolding ---- */
section{border-bottom:1px solid var(--line);}
.sechead{font-family:var(--f-display);letter-spacing:.16em;text-transform:uppercase;font-size:clamp(24px,4vw,34px);margin:0;color:var(--ink);}
.secsub{color:var(--soft);font-size:16px;margin:8px 0 0;max-width:66ch;}
.secsub b{color:var(--ink);}
.pad{padding-top:40px;padding-bottom:40px;}
.eyebrow{font-family:var(--f-display);letter-spacing:.34em;font-size:15px;color:var(--soft);text-transform:uppercase;margin:0 0 22px;padding-left:.34em;}

/* ---- hero marquee ---- */
.marquee{border-bottom:1px solid var(--line);background:radial-gradient(120% 80% at 50% -10%, var(--bg3), var(--bg));}
.marquee .wrap{padding:46px 26px 40px;text-align:center;}
.vsline{display:flex;align-items:center;justify-content:center;gap:clamp(12px,4vw,42px);flex-wrap:wrap;}
.vsline .side{font-family:var(--f-display);line-height:.86;font-size:clamp(46px,13vw,132px);letter-spacing:.005em;}
.vsline .w{color:var(--wins);} .vsline .p{color:var(--points);}
.vsline .vs{font-family:var(--f-body);font-style:italic;font-size:clamp(20px,4vw,34px);color:var(--faint);font-weight:400;}
.subtitle{margin:20px auto 0;max-width:62ch;color:var(--soft);font-size:16px;}
.subtitle b{color:var(--ink);font-style:normal;}

/* compact header for inner pages */
.pagehead{border-bottom:1px solid var(--line);background:radial-gradient(120% 100% at 50% -40%, var(--bg3), var(--bg));}
.pagehead .wrap{padding:40px 26px 34px;}
.pagehead .ph-eyebrow{font-family:var(--f-display);letter-spacing:.28em;text-transform:uppercase;font-size:13px;color:var(--soft);margin:0 0 12px;}
.pagehead h1{font-family:var(--f-display);font-weight:400;line-height:.92;letter-spacing:.02em;margin:0;font-size:clamp(44px,9vw,86px);color:var(--ink);text-transform:uppercase;}
.pagehead h1 .accent{color:var(--wins);} .pagehead h1 .accent.p{color:var(--points);}
.pagehead .ph-lead{margin:16px 0 0;max-width:64ch;color:var(--soft);font-size:17px;line-height:1.6;}
.pagehead .ph-lead b{color:var(--ink);}

/* hero for the home / umbrella pages */
.hero{border-bottom:1px solid var(--line);background:radial-gradient(130% 90% at 50% -20%, var(--bg3), var(--bg));}
.hero .wrap{padding:52px 26px 44px;text-align:center;}
.hero h1{font-family:var(--f-display);font-weight:400;line-height:.9;letter-spacing:.01em;margin:0;font-size:clamp(52px,13vw,124px);}
.hero h1 .o{color:var(--wins);} .hero h1 .j{color:var(--points);}
.hero .tag{margin:18px auto 0;max-width:58ch;color:var(--soft);font-size:17px;}
.hero .tag b{color:var(--ink);}
.hero .meta{margin-top:20px;font-family:var(--f-num);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}

/* ---- stat tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;}
@media(max-width:860px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:18px 18px 16px;position:relative;overflow:hidden;}
.tile .tnum{font-family:var(--f-display);font-size:clamp(38px,6vw,52px);line-height:.86;letter-spacing:.01em;color:var(--ink);}
.tile.w .tnum{color:var(--wins);} .tile.p .tnum{color:var(--points);} .tile.s .tnum{color:var(--shame);}
.tile .tlbl{font-family:var(--f-body);font-weight:700;font-size:15px;margin-top:9px;color:var(--ink);}
.tile .tsub{font-size:13px;color:var(--soft);margin-top:5px;line-height:1.45;}

/* ---- nav cards (into sections) ---- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:26px;}
@media(max-width:640px){.cards{grid-template-columns:1fr}}
.card{display:block;text-decoration:none;background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:border-color .15s,transform .15s;}
.card:hover{border-color:var(--line2);transform:translateY(-2px);}
.card .ceyebrow{font-family:var(--f-display);letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--faint);}
.card h3{font-family:var(--f-display);letter-spacing:.04em;text-transform:uppercase;font-size:clamp(24px,3.4vw,30px);line-height:.96;margin:6px 0 8px;color:var(--ink);}
.card p{margin:0;color:var(--soft);font-size:15px;line-height:1.55;}
.card .go{display:inline-block;margin-top:12px;font-family:var(--f-display);letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--wins);}
.card.p .go{color:var(--points);}

/* ---- trophy board (all-time rings) ---- */
.rings{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.ringrow{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:14px;}
.ringrow .rname{font-family:var(--f-display);font-size:20px;letter-spacing:.02em;text-align:right;}
.ringrow .rpips{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;}
.pipunit{display:inline-flex;flex-direction:column;align-items:center;gap:4px;}
.pipyr{font-family:var(--f-num);font-size:11px;color:var(--soft);letter-spacing:.01em;}
.pipyr.dim{color:var(--faint);font-style:italic;}
/* trophy = football: amber prolate oval with a white lace seam */
.pip{width:24px;height:15px;border-radius:50%/58%;background:var(--wins);flex:none;position:relative;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);}
.pip::before{content:"";position:absolute;top:50%;left:26%;right:26%;height:1.5px;transform:translateY(-50%);background:rgba(255,255,255,.9);border-radius:2px;}
.pip::after{content:"";position:absolute;top:50%;left:50%;width:1.5px;height:6px;transform:translate(-50%,-50%);background:rgba(255,255,255,.9);box-shadow:-4px 0 0 rgba(255,255,255,.9),4px 0 0 rgba(255,255,255,.9);}
.pip.empty{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line2);}
.pip.empty::before,.pip.empty::after{display:none;}
.pip.mm{background:var(--wins-dim);}
.pip.mm::before,.pip.mm::after{background:rgba(255,255,255,.5);box-shadow:-4px 0 0 rgba(255,255,255,.5),4px 0 0 rgba(255,255,255,.5);}
.ringrow .rcount{font-family:var(--f-num);font-size:16px;color:var(--soft);min-width:20px;text-align:right;}
.ringnote{margin-top:14px;font-size:13.5px;color:var(--soft);}
.ringnote b{color:var(--ink);}

/* ---- champions timeline ---- */
.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:24px;}
@media(max-width:760px){.timeline{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.timeline{grid-template-columns:repeat(2,1fr)}}
.tl{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px 12px 14px;text-align:center;position:relative;}
.tl.crown{border-color:var(--wins);background:linear-gradient(180deg,var(--wins-tint),transparent);}
.tl .tly{font-family:var(--f-num);font-size:14px;color:var(--faint);}
.tl .tlc{font-family:var(--f-display);font-size:26px;letter-spacing:.03em;margin-top:6px;color:var(--ink);line-height:.95;}
.tl .tlr{font-family:var(--f-num);font-size:12px;color:var(--soft);margin-top:6px;}
.tl .tlseed{font-family:var(--f-display);letter-spacing:.08em;font-size:11px;text-transform:uppercase;color:var(--wins);margin-top:5px;}

/* ---- award cards (Hall of Fame / Shame) ---- */
.awards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;}
@media(max-width:680px){.awards{grid-template-columns:1fr}}
.award{background:var(--wins-tint);border:1px solid var(--line);border-radius:13px;padding:18px 20px;}
.award.shame{background:var(--shame-tint);}
.award .aname{font-family:var(--f-display);letter-spacing:.03em;text-transform:uppercase;font-size:20px;line-height:1.02;color:var(--wins);}
.award.shame .aname{color:var(--shame);}
.award .who{font-family:var(--f-display);letter-spacing:.02em;font-size:26px;margin:4px 0 8px;color:var(--ink);}
.award p{margin:0;font-size:15px;color:var(--soft);line-height:1.55;}
.award p b{color:var(--ink);}

/* ---- horizontal bar chart (moves, points-against, etc.) ---- */
.bars{margin-top:20px;display:flex;flex-direction:column;gap:8px;}
.barrow{display:grid;grid-template-columns:62px 1fr clamp(84px,24vw,152px);align-items:center;gap:10px;}
.barrow .bname{font-family:var(--f-display);font-size:19px;letter-spacing:.02em;text-align:right;}
.barrow .btrack{background:var(--bg3);border-radius:6px;height:26px;overflow:hidden;position:relative;}
.barrow .bfill{display:block;height:100%;border-radius:6px;min-width:2px;}
.barrow .bfill.w{background:var(--wins);} .barrow .bfill.p{background:var(--points);} .barrow .bfill.n{background:var(--ink-soft);} .barrow .bfill.s{background:var(--shame);}
.barrow .bval{font-family:var(--f-num);font-size:14px;color:var(--soft);line-height:1.3;}
.barrow .bval b{color:var(--ink);font-weight:600;}
.barcap{margin-top:12px;font-size:13.5px;color:var(--soft);line-height:1.5;}
.barcap b{color:var(--ink);}

/* ---- ledger tables ---- */
.tblwrap{overflow-x:auto;}
table.ledger{width:100%;border-collapse:collapse;min-width:440px;}
table.ledger th{font-family:var(--f-display);letter-spacing:.07em;text-transform:uppercase;font-size:11.5px;color:var(--faint);text-align:right;padding:8px 9px;border-bottom:1px solid var(--line2);font-weight:400;white-space:nowrap;}
table.ledger th.l,table.ledger td.l{text-align:left;}
table.ledger td{padding:8px 9px;border-bottom:1px solid var(--line);font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:15px;text-align:right;}
table.ledger td.name{font-family:var(--f-display);font-size:18px;letter-spacing:.02em;text-align:left;}
/* full champion roll: shrink to fit mobile (no horizontal scroll); drop the Note column on phones */
table.ledger.roll{min-width:0;}
table.ledger.roll td.l{white-space:normal;}
@media(max-width:600px){ table.ledger.roll th:last-child, table.ledger.roll td:last-child{display:none;} }
table.ledger tbody tr:nth-child(even) td{background:var(--bg3);}
table.ledger tbody tr:hover td{background:var(--line);}
table.ledger tr:last-child td{border-bottom:none;}
table.ledger tr.hl td{background:var(--wins-tint);}
.lean{font-family:var(--f-display);letter-spacing:.06em;font-size:12px;white-space:nowrap;}
.lean.p{color:var(--points);} .lean.w{color:var(--wins);} .lean.n{color:var(--faint);} .lean.s{color:var(--shame);}
.yrtag{font-family:var(--f-display);letter-spacing:.06em;font-size:12px;}
.yrtag.same{color:var(--faint);} .yrtag.split{color:var(--points);}
.chip-champ{font-family:var(--f-display);font-size:12px;letter-spacing:.06em;color:var(--wins);}

/* ---- podium medals: playoff result overlaid on a record-sorted standings table ---- */
/* tables rank by regular-season W-L (PF breaks ties); these three metallic discs
   mark the actual playoff champion / runner-up / third, so a losing-record champ
   wears gold while sitting well down the table. */
.medal{display:inline-block;width:15px;height:15px;border-radius:50%;vertical-align:-2px;margin-left:8px;flex:none;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.24),inset 0 1.5px 2px rgba(255,255,255,.55),0 0 0 1px rgba(0,0,0,.16);}
.medal.gold{background:radial-gradient(circle at 34% 30%,#FCE9A6,#E5AE34 74%);}
.medal.silver{background:radial-gradient(circle at 34% 30%,#F4F6F9,#AEB7C2 74%);}
.medal.bronze{background:radial-gradient(circle at 34% 30%,#EEC393,#AC6E2C 74%);}
.medalkey{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px 0 0;font-size:13px;color:var(--soft);font-family:var(--f-num);letter-spacing:.02em;}
.medalkey .mkitem{display:inline-flex;align-items:center;gap:6px;}
.medalkey .mk{width:13px;height:13px;border-radius:50%;flex:none;
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.24),inset 0 1.5px 2px rgba(255,255,255,.55),0 0 0 1px rgba(0,0,0,.16);}
.medalkey .mk.gold{background:radial-gradient(circle at 34% 30%,#FCE9A6,#E5AE34 74%);}
.medalkey .mk.silver{background:radial-gradient(circle at 34% 30%,#F4F6F9,#AEB7C2 74%);}
.medalkey .mk.bronze{background:radial-gradient(circle at 34% 30%,#EEC393,#AC6E2C 74%);}
.medalkey .mknote{color:var(--faint);font-style:italic;flex-basis:100%;}

/* ---- collapsible film-room ---- */
details.deep{background:var(--bg2);border:1px solid var(--line);border-radius:12px;margin-top:14px;overflow:hidden;}
details.deep>summary{list-style:none;cursor:pointer;padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:var(--f-display);letter-spacing:.1em;text-transform:uppercase;font-size:18px;color:var(--ink);}
details.deep>summary::-webkit-details-marker{display:none;}
details.deep>summary:focus-visible{outline:2px solid var(--points);outline-offset:2px;}
details.deep>summary .hint{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:13px;color:var(--faint);font-style:italic;margin-left:auto;}
details.deep>summary .chev{font-family:var(--f-num);color:var(--faint);transition:transform .2s;flex:none;}
details.deep[open]>summary .chev{transform:rotate(90deg);}
details.deep .body{padding:2px 20px 18px;}

/* ---- tale of the tape / small stat pairs ---- */
.tape-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
@media(max-width:640px){.tape-grid{grid-template-columns:1fr}}
.tt{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:18px 20px;}
.tt h4{font-family:var(--f-display);letter-spacing:.06em;font-size:19px;margin:0 0 14px;font-weight:400;color:var(--ink);text-transform:uppercase;}
.ttrow{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:7px 0;}
.ttrow+.ttrow{border-top:1px solid var(--line);}
.ttrow .who{font-family:var(--f-display);font-size:22px;letter-spacing:.02em;}
.ttrow .ppg{font-family:var(--f-num);font-size:21px;color:var(--points);text-align:right;min-width:64px;}
.ttrow .ws{font-family:var(--f-num);font-size:21px;color:var(--wins);text-align:right;min-width:52px;}
.ttcap{margin:12px 0 0;font-size:13.5px;color:var(--soft);line-height:1.5;}
.ttcap b{color:var(--ink);}

/* ---- polls ---- */
.pollcard{background:var(--bg2);border:1px solid var(--line);border-radius:13px;padding:18px 20px 16px;margin-top:16px;}
.pollcard .pq{font-family:var(--f-display);letter-spacing:.03em;text-transform:uppercase;font-size:21px;line-height:1.04;color:var(--ink);}
.pollcard .pmeta{font-family:var(--f-num);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-top:5px;}
.pollcard .pbody{margin:11px 0 0;font-size:15.5px;color:var(--soft);line-height:1.55;}
.pollcard .pbody b{color:var(--ink);}
.verdict-pill{display:inline-block;font-family:var(--f-display);letter-spacing:.08em;text-transform:uppercase;font-size:12px;padding:3px 10px;border-radius:20px;margin-top:12px;}
.verdict-pill.pass{color:var(--points);background:var(--points-tint);box-shadow:inset 0 0 0 1px var(--points-dim);}
.verdict-pill.fail{color:var(--shame);background:var(--shame-tint);box-shadow:inset 0 0 0 1px var(--shame-dim);}
.verdict-pill.mixed{color:var(--wins);background:var(--wins-tint);box-shadow:inset 0 0 0 1px var(--wins-dim);}

/* ---- misc content ---- */
.lead{font-size:17px;color:var(--soft);max-width:70ch;line-height:1.62;}
.lead b{color:var(--ink);}
.origin{margin-top:26px;background:var(--bg3);border:1px solid var(--line);border-radius:14px;padding:26px 28px;}
.origin .otag{font-family:var(--f-display);letter-spacing:.14em;text-transform:uppercase;font-size:13px;color:var(--points);}
.origin.w .otag{color:var(--wins);}
.origin h3{font-family:var(--f-display);letter-spacing:.02em;text-transform:uppercase;font-size:clamp(23px,3.8vw,33px);line-height:.96;margin:8px 0 12px;color:var(--ink);}
.origin p{font-size:17px;color:var(--soft);max-width:70ch;margin:0;line-height:1.6;}
.origin p b{color:var(--ink);}

/* ---- wins-vs-points page components ---- */
.corners{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:26px;}
@media(max-width:720px){.corners{grid-template-columns:1fr}}
.corner{background:var(--bg2);padding:26px 26px 24px;position:relative;}
.corner.wins{border-right:1px solid var(--line);}
@media(max-width:720px){.corner.wins{border-right:none;border-bottom:1px solid var(--line)}}
.corner .tape{display:flex;align-items:baseline;gap:12px;margin-bottom:4px;}
.corner .inthis{font-family:var(--f-display);letter-spacing:.16em;font-size:13px;color:var(--faint);text-transform:uppercase;}
.corner .big{font-family:var(--f-display);font-size:clamp(34px,5vw,46px);line-height:.9;letter-spacing:.01em;margin:2px 0 0;}
.wins .big{color:var(--wins);} .points .big{color:var(--points);}
.corner .tagline{font-style:italic;color:var(--soft);font-size:15px;margin:6px 0 16px;}
.corner .argue{font-size:16.5px;line-height:1.62;color:var(--ink);}
.corner .argue p{margin:0 0 11px;}
.corner .argue p:last-child{margin-bottom:0;}
.kicker-strong{font-weight:700;}
.tell{margin-top:18px;padding-top:15px;border-top:1px dashed var(--line2);font-family:var(--f-body);font-size:14px;color:var(--soft);line-height:1.5;}
.tell b{font-family:var(--f-display);letter-spacing:.12em;font-size:12px;display:block;margin-bottom:4px;}
.wins .tell b{color:var(--wins);} .points .tell b{color:var(--points);}
.tell strong{color:var(--ink);font-weight:700;}
.colkey{display:flex;gap:18px;margin-top:8px;font-family:var(--f-display);letter-spacing:.12em;font-size:12px;}
.colkey .kp{color:var(--points);} .colkey .kw{color:var(--wins);}

.stakes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
@media(max-width:640px){.stakes{grid-template-columns:1fr}}
.st{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:6px 20px 16px;}
.st .sh{font-family:var(--f-display);letter-spacing:.06em;text-transform:uppercase;font-size:18px;padding:14px 0 4px;}
.st.p .sh{color:var(--points);} .st.w .sh{color:var(--wins);}
.srow{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);}
.srow .sname{font-family:var(--f-display);font-size:22px;letter-spacing:.02em;}
.srow .sval{font-family:var(--f-num);font-size:20px;}
.st.p .sval{color:var(--points);} .st.w .sval{color:var(--wins);}
.st .ssub{font-size:12.5px;color:var(--faint);margin-top:9px;font-style:italic;}

.years{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:24px;}
@media(max-width:720px){.years{grid-template-columns:repeat(3,1fr)}}
.yr{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:14px 8px 12px;text-align:center;}
.yr .y{font-family:var(--f-num);font-size:15px;color:var(--faint);}
.yr .tag{font-family:var(--f-display);letter-spacing:.08em;font-size:20px;margin-top:7px;}
.yr.same .tag{color:var(--faint);}
.yr.split{border-color:var(--points);background:linear-gradient(180deg,var(--points-tint),transparent);}
.yr.split .tag{color:var(--points);}
.yr .who{font-family:var(--f-num);font-size:12px;color:var(--soft);margin-top:6px;line-height:1.5;}
.splitcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;}
@media(max-width:640px){.splitcards{grid-template-columns:1fr}}
.sc{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.sc .scy{font-family:var(--f-display);letter-spacing:.1em;font-size:16px;color:var(--points);}
.sc h5{font-family:var(--f-body);font-size:15.5px;margin:4px 0 10px;color:var(--ink);font-weight:700;}
.sc .split-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:14px;}
.sc .split-row .lbl{color:var(--soft);}
.sc .split-row .val{font-family:var(--f-num);font-size:16px;}
.sc .split-row .val.w{color:var(--wins)} .sc .split-row .val.p{color:var(--points)}
.sc .gap{margin-top:10px;padding-top:9px;border-top:1px dashed var(--line2);font-size:13.5px;color:var(--soft);}
.sc .gap strong{color:var(--ink);}

.verdict{margin-top:24px;}
.verdict .vrow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:16px 0;border-top:1px solid var(--line);}
.verdict .vrow:first-child{border-top:none;}
.vtag{font-family:var(--f-display);letter-spacing:.1em;font-size:15px;text-transform:uppercase;padding-top:2px;white-space:nowrap;}
.vtag.p{color:var(--points)} .vtag.w{color:var(--wins)} .vtag.n{color:var(--soft)}
.verdict p{margin:0;font-size:16.5px;line-height:1.6;}
.verdict strong{font-weight:700;}
@media(max-width:560px){.verdict .vrow{grid-template-columns:1fr;gap:6px;}}

.pot{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
.potcard{flex:1 1 150px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:16px;}
.potcard.big{flex:1 1 100%;}
.potcard .amt{font-family:var(--f-display);font-size:clamp(30px,5vw,42px);line-height:.9;letter-spacing:.01em;}
.potcard.p .amt{color:var(--points);} .potcard.w .amt{color:var(--wins);}
.potcard .plbl{font-family:var(--f-body);font-size:15px;margin-top:8px;color:var(--ink);font-weight:700;}
.potcard .ptag{font-family:var(--f-num);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:4px;}
.potnote{margin-top:18px;font-size:16.5px;color:var(--soft);max-width:66ch;line-height:1.55;}
.potnote b{color:var(--ink);}

.pa{margin-top:22px;display:flex;flex-direction:column;gap:7px;}
.parow{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:12px;}
.parow .paname{font-family:var(--f-display);font-size:19px;letter-spacing:.02em;text-align:right;}
.parow .patrack{background:var(--bg3);border-radius:6px;height:24px;overflow:hidden;}
.parow .pafill{display:block;height:100%;background:var(--ink-soft);border-radius:6px;}
.parow .paval{font-family:var(--f-num);font-size:15px;color:var(--soft);min-width:96px;}
.parow .paval b{color:var(--ink);font-weight:600;}

/* callout row list */
.facts{margin-top:20px;display:flex;flex-direction:column;gap:0;}
.factrow{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:15px 0;border-top:1px solid var(--line);}
.factrow:first-child{border-top:none;}
.factrow .ftag{font-family:var(--f-display);letter-spacing:.09em;font-size:15px;text-transform:uppercase;padding-top:2px;white-space:nowrap;}
.factrow .ftag.w{color:var(--wins);} .factrow .ftag.p{color:var(--points);} .factrow .ftag.s{color:var(--shame);} .factrow .ftag.n{color:var(--soft);}
.factrow p{margin:0;font-size:16.5px;line-height:1.58;}
.factrow strong{font-weight:700;}
@media(max-width:560px){.factrow{grid-template-columns:1fr;gap:5px;}}

/* svg chart shared — no card padding: the SVG viewBox already carries its own
   whitespace, so a padded card double-pads it. Let the chart stand on its own. */
.chartcard{margin-top:18px;}
svg.scatter{width:100%;height:auto;display:block;}
.grid{stroke:var(--line);stroke-width:1;}
.axis{stroke:var(--line2);stroke-width:1.3;}
.axlab{fill:var(--faint);font-family:var(--f-num);font-size:12px;}
.axtitle{fill:var(--soft);font-family:var(--f-display);letter-spacing:.14em;font-size:13px;text-transform:uppercase;}
.trend{stroke:var(--line2);stroke-width:1.5;stroke-dasharray:2 6;stroke-linecap:round;}
.zone{font-family:var(--f-display);letter-spacing:.14em;font-size:14px;text-transform:uppercase;}
.dname{font-family:var(--f-display);font-size:19px;letter-spacing:.02em;fill:var(--ink);}
.dsub{font-family:var(--f-num);font-size:12px;fill:var(--faint);}
.dot-w{fill:var(--wins);} .dot-p{fill:var(--points);} .dot-n{fill:var(--faint);}
.legend{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:14px;font-size:14px;color:var(--soft);align-items:center;}
.legend span{display:inline-flex;align-items:center;gap:8px;}
.chip{width:12px;height:12px;border-radius:50%;flex:none;}
.chip.w{background:var(--wins)} .chip.p{background:var(--points)} .chip.s{background:var(--shame)} .chip.n{background:var(--faint)}
.chip.l{width:22px;height:0;border-top:2px dashed var(--line2);border-radius:0}

/* ---- managers: roster selector + profile ---- */
.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:22px;}
@media(max-width:720px){.roster{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.roster{grid-template-columns:repeat(2,1fr)}}
.mchip{appearance:none;text-align:left;cursor:pointer;background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:12px 13px;transition:border-color .15s,transform .12s,background .15s;}
.mchip:hover{border-color:var(--line2);transform:translateY(-2px);}
.mchip:focus-visible{outline:2px solid var(--points);outline-offset:2px;}
.mchip .mn{font-family:var(--f-display);font-size:23px;letter-spacing:.02em;color:var(--ink);line-height:1;display:block;}
.mchip .mr{font-family:var(--f-num);font-size:12px;color:var(--faint);margin-top:5px;display:block;}
.mchip[aria-selected="true"]{border-color:var(--wins);background:linear-gradient(180deg,var(--wins-tint),transparent);}
.mchip[aria-selected="true"] .mn{color:var(--wins);}

.profile{margin-top:24px;background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:26px 28px;scroll-margin-top:76px;}
.profile:focus{outline:none;}
@media(max-width:600px){.profile{padding:22px 20px;scroll-margin-top:94px;}}
.pident{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;border-bottom:1px solid var(--line);padding-bottom:16px;}
.pident .pname{font-family:var(--f-display);font-size:clamp(42px,8vw,68px);line-height:.86;letter-spacing:.02em;color:var(--ink);}
.pident .palias{font-family:var(--f-num);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);}
.pident .ptitle{font-style:italic;color:var(--points);font-size:17px;margin-left:auto;}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:20px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;}
@media(max-width:640px){.pstats{grid-template-columns:repeat(2,1fr)}}
.pstat{background:var(--bg2);padding:14px 15px;}
.pstat .psv{font-family:var(--f-display);font-size:30px;line-height:.9;color:var(--ink);}
.pstat.w .psv{color:var(--wins);} .pstat.p .psv{color:var(--points);} .pstat.s .psv{color:var(--shame);}
.psrank{font-family:var(--f-num);font-size:10.5px;font-weight:600;color:var(--faint);vertical-align:super;margin-left:3px;letter-spacing:.01em;line-height:0;}
.psrank.top{color:var(--wins);}
.pstat .psl{font-family:var(--f-num);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-top:6px;}
.psection{margin-top:22px;}
.psection h4{font-family:var(--f-display);letter-spacing:.1em;text-transform:uppercase;font-size:14px;color:var(--soft);margin:0 0 12px;}
.finishstrip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.fcell{background:var(--bg3);border:1px solid var(--line);border-radius:9px;padding:10px 4px;text-align:center;}
.fcell .fy{font-family:var(--f-num);font-size:11px;color:var(--faint);}
.fcell .ff{font-family:var(--f-display);font-size:26px;line-height:.95;margin-top:3px;color:var(--ink);}
.fcell .ft{font-family:var(--f-num);font-size:10px;color:var(--soft);margin-top:2px;display:block;letter-spacing:.03em;}
.fcell.champ{border-color:var(--wins);background:linear-gradient(180deg,var(--wins-tint),transparent);}
.fcell.champ .ff{color:var(--wins);}
.fcell.bot{border-color:var(--shame-dim);}
.fcell.bot .ff{color:var(--shame);}
.teamhist{display:flex;flex-direction:column;gap:0;}
.thr{display:grid;grid-template-columns:44px 56px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line);align-items:start;}
.thr:first-child{border-top:none;}
.thr .thy{font-family:var(--f-num);font-size:13px;color:var(--faint);padding-top:2px;}
.thr .threc{font-family:var(--f-num);font-size:14px;color:var(--soft);padding-top:1px;}
.thteam{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;}
.thteam .thn{font-family:var(--f-body);font-size:16px;color:var(--ink);line-height:1.3;}
.thbadges{display:flex;flex-wrap:wrap;gap:5px;}
.badge{font-family:var(--f-num);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;white-space:nowrap;line-height:1.5;}
.badge.champ{background:var(--wins);color:var(--bg);}
.badge.wins{color:var(--wins);box-shadow:inset 0 0 0 1px var(--wins-dim);}
.badge.points{color:var(--points);box-shadow:inset 0 0 0 1px var(--points-dim);}
.badge.ru{color:var(--soft);box-shadow:inset 0 0 0 1px var(--line2);}
.badge.last,.badge.fewest{color:var(--shame);box-shadow:inset 0 0 0 1px var(--shame-dim);}
.paward{margin-top:22px;border-radius:12px;padding:16px 18px;border:1px solid var(--line);background:var(--wins-tint);}
.paward.shame{background:var(--shame-tint);}
.paward .pat{font-family:var(--f-display);letter-spacing:.05em;text-transform:uppercase;font-size:15px;color:var(--wins);}
.paward.shame .pat{color:var(--shame);}
.paward .par{margin:6px 0 0;font-size:16px;color:var(--ink);line-height:1.55;}

/* footer */
footer{color:var(--faint);font-size:13px;line-height:1.6;border-top:1px solid var(--line);}
footer .wrap{padding:26px 26px 44px;}
footer .num{color:var(--soft);}
footer a{color:var(--soft);text-decoration:underline;text-underline-offset:2px;}

@media(max-width:600px){
  .pad{padding-top:32px;padding-bottom:32px;}
  /* full-bleed charts on mobile: negative margin === the wrap gutter so the chart
     reaches the screen edge exactly, never past it (that was what shoved text to the edges). */
  .chartcard{margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));}
}