:root{

--report-before:#b48ead;

--report-after:#4fb3d9;

--bg:#0b0d10;

--bg-raised:#14171c;

--bg-card:#1a1e25;

--bg-hover:#20242c;

--border:#262b34;

--border-strong:#3a4150;

--text:#eef1f5;

--text-dim:#9aa1ac;

--accent:#f2a93c;

--accent-strong:#ffc266;

--on-accent:#1a1206;

--success:#3ecf8e;

--danger:#f0554f;

--info:#5c7cfa;

--radius:10px;

--radius-sm:6px;

--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

}

*{

box-sizing:border-box;

}

body{

margin:0;

background:var(--bg);

background-image:radial-gradient(circle at 15% 0%, rgba(242,169,60,.06), transparent 45%);

color:var(--text);

font-family:var(--font);

-webkit-font-smoothing:antialiased;

}

.container{

max-width:1400px;

margin:auto;

padding:20px 20px 60px;

}

a{

color:var(--accent);

}

.siteHeader{

display:flex;

flex-wrap:wrap;

align-items:center;

justify-content:space-between;

gap:16px;

padding:22px 0 18px;

border-bottom:1px solid var(--border);

margin-bottom:20px;

}

.brandRow{

display:flex;

align-items:center;

gap:14px;

}

/* The SR badge: a ball split baseball (S) / football (R). */
.brandBadge{

width:46px;

height:46px;

flex-shrink:0;

filter:drop-shadow(0 2px 6px rgba(242,169,60,.3));

}

.brandText{display:flex;flex-direction:column;gap:2px;}

.brandText h1{line-height:1.05;}

.brandTag{font-size:12.5px;font-weight:500;color:var(--text-dim);}

h1{

font-size:30px;

font-weight:700;

letter-spacing:-.01em;

margin:0;

}

h1 .brandAccent{

color:var(--accent);

}

h2{

font-size:19px;

font-weight:600;

margin-bottom:12px;

letter-spacing:-.005em;

}

h3{

font-size:16px;

font-weight:600;

margin-bottom:10px;

color:var(--text-dim);

text-transform:none;

letter-spacing:0;

}

.leaderboards{

display:flex;

gap:20px;

width:100%;

overflow:hidden;

align-items:flex-start;

}

.leaderboards>div{

flex:1;

min-width:0;

max-width:50%;

overflow:hidden;

}

.scrollbox{

width:100%;

max-width:100%;

max-height:400px;

overflow-x:scroll;

overflow-y:auto;

background:var(--bg-raised);

border:1px solid var(--border);

padding:4px 10px;

border-radius:var(--radius);

box-sizing:border-box;

}

table{

border-collapse:collapse;

width:max-content;

min-width:100%;

table-layout:auto;

font-variant-numeric:tabular-nums;

}

thead th,
tr:first-child th{

position:sticky;

top:0;

background:var(--bg-raised);

box-shadow:0 1px 0 var(--border-strong);

}

td,
th{

padding:9px 10px;

border-bottom:1px solid var(--border);

font-size:12.5px;

white-space:nowrap;

text-align:left;

}

th{

color:var(--text-dim);

font-weight:600;

text-transform:none;

font-size:12px;

letter-spacing:.03em;

}

tbody tr:hover,
table tr:hover{

background:var(--bg-hover);

}

select,
input,
button{

padding:10px 14px;

margin:5px;

background:var(--bg-raised);

color:var(--text);

border:1px solid var(--border);

border-radius:var(--radius-sm);

font-family:inherit;

font-size:14px;

transition:border-color .15s ease, background .15s ease;

}

select:hover,
input:hover,
button:hover{

border-color:var(--accent);

}

select:focus,
input:focus,
button:focus{

outline:none;

border-color:var(--accent);

box-shadow:0 0 0 3px rgba(242,169,60,.18);

}

.tabGroup{

display:flex;

flex-wrap:wrap;

align-items:center;

gap:8px;

margin:10px 5px;

}

.tabGroupLabel{

opacity:.6;

font-size:13px;

margin:0 2px;

}

.tabGroupLabel:not(:first-child){

margin-left:12px;

}

.tabButton{

background:var(--bg-raised);

color:var(--text-dim);

border:1px solid var(--border);

border-radius:var(--radius-sm);

padding:8px 16px;

font-size:14px;

cursor:pointer;

transition:border-color .15s ease, background .15s ease, color .15s ease;

}

.tabButton:hover{

border-color:var(--accent);

color:var(--text);

}

.tabButton.active{

background:var(--accent);

border-color:var(--accent);

color:var(--on-accent);

font-weight:700;

}

a.tabButton{

text-decoration:none;

display:inline-block;

}

.pageTabs{

margin:0;

}

.pageTabs .tabButton{

font-size:14px;

padding:9px 18px;

}

/* Per-sport sub-header, shown at the top of each MLB page's/NFL's own
content, below the shared siteHeader - the siteHeader's own h1 carries
the site-wide brand, this carries which sport you're in (picks up
--accent, which nfl.html's own :root override already makes green). */
.sportHeader{

display:flex;

align-items:center;

gap:10px;

margin:4px 0 20px;

}

.sportMark{

width:26px;

height:26px;

flex-shrink:0;

}

.sportHeading{

font-size:22px;

font-weight:700;

letter-spacing:-.01em;

margin:0;

}

.sportHeading .brandAccent{

color:var(--accent);

}

hr{

margin:30px 0;

border:none;

border-top:1px solid var(--border);

}

/* One plain sentence under a section heading saying what it is. */
.sectionIntro{

color:var(--text-dim);

font-size:14px;

line-height:1.5;

margin:-4px 0 14px 0;

max-width:680px;

}

/* A one-line status above a section's tiles - e.g. "bet advice is
paused" - so the state is stated, not left to be inferred from blanks. */
.statusNote{

background:var(--bg-raised);

border:1px solid var(--border-strong);

border-left:3px solid var(--accent);

border-radius:var(--radius-sm);

padding:10px 14px;

margin:0 0 16px 0;

font-size:14px;

line-height:1.45;

max-width:760px;

}

/* Supporting detail under a row of tiles - smaller and dimmer than the
tiles, so it reads as context rather than a second headline. */
.secondaryLine{

font-size:13px;

color:var(--text-dim);

margin:-8px 0 18px 0;

}

.streakStats{

display:flex;

gap:20px;

flex-wrap:wrap;

margin-bottom:20px;

}

.streakStat{

background:var(--bg-raised);

border:1px solid var(--border);

border-radius:var(--radius);

padding:16px 22px;

min-width:140px;

text-align:center;

}

.streakStat .value{

font-size:28px;

font-weight:700;

color:var(--accent);

}

.streakStat .label{

font-size:13px;

color:var(--text-dim);

margin-top:4px;

text-transform:none;

letter-spacing:.03em;

}

/* Quant-analytics item #5: the real Wilson CI / significance p-value note
under a stat tile's value - a small font so it reads as supporting detail,
not a second headline number. */
.streakStat .sub{

font-size:11px;

color:var(--text-dim);

margin-top:6px;

}

.todaysPicks{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:10px;

}

.pickCard{

background:var(--bg-raised);

border:1px solid var(--border);

border-radius:var(--radius);

padding:15px;

min-width:200px;

border-left:4px solid var(--text-dim);

}

.pickCard.hit{

border-left-color:var(--success);

}

.pickCard.miss{

border-left-color:var(--danger);

}

.pickCard.pending{

border-left-color:var(--text-dim);

}

.pickCard.no_game{

border-left-color:var(--info);

opacity:.7;

}

.pickCard.no_pick{

border-left-color:var(--text-dim);

opacity:.7;

}

.pickCard.win{

border-left-color:var(--success);

}

.pickCard.loss{

border-left-color:var(--danger);

}

.pickCard.not_played{

border-left-color:var(--info);

opacity:.7;

}

.pickCard.recommended{

box-shadow:0 0 0 1px var(--accent);

}

.pickCard.speculative{

opacity:.8;

}

.pickGrade{

font-size:10px;

font-weight:700;

text-transform:none;

letter-spacing:.04em;

color:var(--text-dim);

margin-top:2px;

}

.pickGrade.recommended{

color:var(--accent);

}

.pickName{

font-size:16px;

font-weight:700;

}

.pickProb{

font-size:12px;

color:var(--text-dim);

margin-top:4px;

}

.pickStatus{

font-size:11px;

font-weight:600;

text-transform:none;

letter-spacing:.03em;

margin-top:6px;

}

.matchup{

display:flex;

gap:40px;

align-items:flex-start;

}

.matchup>div{

flex:1;

}

#pitcherChoicesA,
#pitcherChoicesB{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:10px;

}

.hitterbox{

width:100%;

max-height:500px;

overflow-y:auto;

overflow-x:hidden;

margin-top:10px;

}

.hitterbox table{

width:100%;

table-layout:auto;

}

.hitterbox th,
.hitterbox td{

white-space:normal;

word-break:break-word;

font-size:12px;

padding:6px;

vertical-align:top;

}

.pitcherCards{

display:flex;

gap:10px;

overflow-x:auto;

padding-top:10px;

}

.pitcherCard{

min-width:180px;

padding:10px;

border-radius:var(--radius-sm);

background:var(--bg-card);

border:1px solid var(--border);

color:var(--text);

flex-shrink:0;

}

.pitcherCard table{

width:100%;

}

.removePitcher{

background:var(--danger);

color:white;

border:none;

border-radius:4px;

width:24px;

height:24px;

cursor:pointer;

font-size:14px;

display:flex;

align-items:center;

justify-content:center;

padding:0;

}

.removePitcher:hover{

opacity:.85;

}

button{

margin:4px;

}

button:hover{

opacity:.92;

}

.gameRow{

display:flex;

gap:20px;

align-items:flex-start;

}

.gameCol{

flex:1;

min-width:0;

}

.gameCard{

padding:12px;

border-radius:var(--radius-sm);

background:var(--bg-card);

border:1px solid var(--border);

}

.gameExplain{

margin-top:10px;

}

.infoCard{

background:#f5efe4;

color:#222;

border-radius:14px;

padding:18px;

box-shadow:
0 4px 16px rgba(
0,
0,
0,
.35
);

max-width:500px;

margin-top:10px;

}

.cardHeader{

display:flex;

justify-content:space-between;

align-items:flex-start;

margin-bottom:14px;

}

.cardTitle{

font-size:20px;

font-weight:bold;

}

.cardBadge{

width:28px;

height:28px;

border-radius:6px;

}

.cardStats{

display:grid;

grid-template-columns:
1fr auto;

row-gap:8px;

}

.cardStats div:nth-child(odd){

font-weight:bold;

}

.profileColumns{

display:flex;

flex-wrap:wrap;

gap:20px;

}

.profileColumn{

min-width:180px;

padding-right:12px;

border-right:

2px dotted black;

}

.profileSection{

margin-bottom:18px;

}

.profileHeader{

font-size:18px;

font-weight:bold;

margin-bottom:10px;

}

.profileRows{

display:grid;

grid-template-columns:
1fr auto;

row-gap:8px;

column-gap:16px;

}

#teamResult .infoCard{

flex:1;

min-width:340px;

max-width:480px;

padding:14px;

}

#teamResult{

display:flex;

gap:14px;

align-items:flex-start;

justify-content:center;

overflow-x:auto;

}

.compareUp{

font-size:10px;

color:#228822;

margin-left:4px;

vertical-align:middle;

}

.compareDown{

font-size:10px;

color:#aa3333;

margin-left:4px;

vertical-align:middle;

}

.teamLogo{

width:40px;

height:40px;

object-fit:contain;

flex-shrink:0;

}

.gameCard .teamLogo{

width:50px;

height:50px;

}

.playerHeadshot{

width:92px;

height:92px;

min-width:92px;

min-height:92px;

border-radius:50%;

object-fit:cover;

background:#ddd;

display:block;

}

.smallTeamLogo{

width:18px;

height:18px;

object-fit:contain;

}

/* Compact "summary card" pattern - originally built for the Beat the
Streak Assistant Claude Artifact's chat page (scripts/templates/
bts_assistant_template.html), now also used by the real site's own
Today's Summary landing page (docs/today.html/today.js), so it lives
here as genuinely shared CSS. Class names already avoid the site's own
existing .label/.value/.sub/.recommended/.speculative/.matchup (used by
.pickCard elsewhere in this file) via a bts-prefixed set - kept as-is
rather than renamed again now that it's shared, since the artifact
template already relies on these exact names. */
.wrap{max-width:760px;margin:0 auto;padding:28px 20px 60px;}

.wrap header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px;flex-wrap:wrap;}
.wrap h1{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:0;}
.asof{font-size:13px;color:var(--text-dim);}
.subtitle{color:var(--text-dim);font-size:14px;margin:2px 0 22px;max-width:60ch;line-height:1.5;}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:22px;}
.stat{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
.stat .btsLabel{font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:6px;}
.stat .btsValue{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;}
.stat .btsSub{font-size:12px;color:var(--text-dim);margin-top:5px;}

.panel{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:18px;overflow:hidden;}
.panel-head{padding:12px 16px;border-bottom:1px solid var(--border);font-size:15px;font-weight:700;color:var(--text);}
.picks{display:flex;flex-direction:column;}
.pick{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);}
.pick:last-child{border-bottom:none;}
.pick .rank{font-family:var(--font-mono);font-size:12px;color:var(--text-dim);width:16px;}
.pick .name{font-weight:600;flex:1;min-width:0;}
.pick .prob{font-size:13px;font-variant-numeric:tabular-nums;color:var(--text-dim);}
.grade{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;border:1px solid var(--border-strong);white-space:nowrap;}
.grade.btsRecommended{color:var(--success);border-color:var(--success);}
.grade.btsSpeculative{color:var(--text-dim);}

.panel-head.with-stats{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.panel-head .stat-line{font-size:13px;color:var(--text-dim);text-transform:none;letter-spacing:0;font-weight:400;}
.panel-head .stat-line b{color:var(--text);font-weight:600;}
.game{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--border);}
.game:last-child{border-bottom:none;}
.game .btsMatchup{flex:1;min-width:0;font-size:13px;}
.game .btsMatchup .away{color:var(--text-dim);}
.game .btsMatchup .winner{font-weight:700;color:var(--on-accent);background:var(--accent);padding:1px 7px;border-radius:4px;}
.game .prob{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;white-space:nowrap;}
.game .prob b{color:var(--text);font-weight:600;}
.game .prob .mkt{opacity:.75;}
.game .prob .total{display:block;font-size:12px;opacity:.75;}
.epaTable{width:100%;margin:6px 0 4px;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;}
.epaTable th,.epaTable td{padding:2px 4px 2px 0;text-align:right;border:none;background:none;text-transform:none;letter-spacing:0;font-weight:400;}
.epaTable th:first-child,.epaTable td:first-child{text-align:left;}
.epaTable th{color:var(--text-dim);font-size:11px;}
.epaTable .epaRank{color:var(--text-dim);font-size:11px;}
.unitsTable td,.unitsTable th{text-align:right;font-variant-numeric:tabular-nums;}
.unitsTable td:nth-child(-n+2),.unitsTable th:nth-child(-n+2){text-align:left;}
.unitsTable .unitOpp{color:var(--text-dim);font-size:12px;}
.unitsTable td:first-child,.unitsTable th:first-child{position:sticky;left:0;z-index:1;background:var(--bg-card);}
#nflTeamUnitsTable,#nflUnitByes{padding-left:0;padding-right:0;}
.unitToggles{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px;font-size:14px;}
.unitToggles label{display:flex;align-items:center;gap:6px;cursor:pointer;}
.unitToggles input{accent-color:var(--accent);width:16px;height:16px;}
.matchupCard .epaTable td.unitStrong{color:var(--success);font-weight:600;}
.matchupCard .epaTable td.unitWeak{color:var(--danger);font-weight:600;}
.unitsTable td.unitStrong{color:var(--success);font-weight:600;}
.unitsTable td.unitWeak{color:var(--danger);font-weight:600;}
/* A confidence range or other detail inside a table cell. */
td .dim{color:var(--text-dim);font-size:.9em;}
.bet-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;border:1px solid var(--accent);color:var(--accent);white-space:nowrap;}
.empty-note{padding:14px 16px;color:var(--text-dim);font-size:13px;line-height:1.5;}

/* Phones. Until now the stylesheet had no breakpoints, so a phone got the
desktop layout squeezed: the title and four nav buttons wrapped onto
three lines, the two leaderboards sat side by side at ~170px each, and
stat tiles and pick cards kept desktop padding. */
@media (max-width: 700px){

.container{padding:12px 16px 48px;}

/* One compact header line: smaller title, nav scrolls sideways instead
of wrapping. */
.siteHeader{gap:10px;padding:12px 0 12px;margin-bottom:14px;}
.brandRow{gap:10px;}
.brandBadge{width:36px;height:36px;}
h1{font-size:20px;}
.brandTag{font-size:11.5px;}
.pageTabs{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;gap:6px;-webkit-overflow-scrolling:touch;}
.tabButton{padding:7px 12px;font-size:13px;}
/* Small enough that all four site tabs fit a 390px screen. */
.pageTabs .tabButton{flex:0 0 auto;padding:6px 10px;font-size:12.5px;}

/* Paired tables stack. */
.leaderboards{flex-direction:column;}
.leaderboards>div{max-width:100%;width:100%;}

/* Two tiles per row, tighter. */
.streakStats{gap:10px;}
.streakStat{flex:1 1 calc(50% - 5px);min-width:0;padding:12px 10px;}
.streakStat .value{font-size:22px;}

/* Pick cards full width. */
.todaysPicks{gap:10px;}
.pickCard{flex:1 1 100%;min-width:0;}

/* Denser tables; they still scroll sideways inside their box. */
td,th{padding:7px 8px;font-size:12px;}
.scrollbox{padding:2px 6px;}

.statusNote{font-size:13px;}

/* A game row wraps instead of squeezing "We say ... · Vegas ..." */
.game{flex-wrap:wrap;row-gap:4px;}
.game .btsMatchup{flex-basis:100%;}
.game .prob{white-space:normal;}

}


/* ---- NFL player props: lean chart and cards (docs/prop_cards.js) ----
   Over/under is a diverging pair - blue / orange, checked with the dataviz
   palette validator against --bg-card - with a neutral grey midpoint. Text
   never takes the series colour; every coloured mark has a word beside it. */
:root{
--prop-over:#3987e5;
--prop-under:#d95926;
--prop-mid:#383835;
--prop-other:#5b6270;
}
.propControls{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 14px;font-size:14px;}
.propViewSwitch{display:inline-flex;gap:6px;margin-left:auto;}
.propViewSwitch .tabButton{padding:6px 14px;}

.leanChart{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px 10px;margin:0 0 16px;}
.leanAxis{display:grid;grid-template-columns:minmax(120px,32%) 1fr 92px;gap:10px;font-size:11px;color:var(--text-dim);margin-bottom:4px;}
.leanAxisScale{display:flex;justify-content:space-between;white-space:nowrap;}
.leanRow{display:grid;grid-template-columns:minmax(120px,32%) 1fr 92px;align-items:center;gap:10px;padding:5px 0;color:var(--text);text-decoration:none;border-radius:var(--radius-sm);}
.leanRow:hover,.leanRow:focus-visible{background:var(--bg-hover);outline:none;}
.leanName{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.leanStat{color:var(--text-dim);font-size:12px;}
.leanTrack,.whyMeter{position:relative;height:12px;}
.leanMid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--border-strong);}
.leanBar{position:absolute;top:0;bottom:0;}
.leanOver{background:var(--prop-over);border-radius:0 4px 4px 0;}
.leanUnder{background:var(--prop-under);border-radius:4px 0 0 4px;}
.leanValue{font-size:12px;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

.propCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.propCard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px 12px;scroll-margin-top:16px;}
.propCard:target{border-color:var(--border-strong);box-shadow:0 0 0 2px var(--border-strong);}
.propCardHead{display:flex;align-items:baseline;gap:8px;}
.propRank{color:var(--text-dim);font-size:12px;font-variant-numeric:tabular-nums;}
.propWho{flex:1;min-width:0;font-size:15px;}
.propMeta{display:block;color:var(--text-dim);font-size:12px;font-weight:400;}
.propLean{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text);border:1px solid var(--border-strong);border-radius:999px;padding:2px 10px 2px 8px;white-space:nowrap;}
.propLean i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.propLeanOver i{background:var(--prop-over);}
.propLeanUnder i{background:var(--prop-under);}
.propStat{color:var(--text-dim);font-size:12px;margin-top:8px;}
.propHeadline{margin:2px 0 6px;font-size:14px;line-height:1.4;}
.propHeadline b{font-size:18px;}
.propStrip{display:block;width:100%;height:auto;margin:-4px 0 0;}
.propStrip .stripAverage{stroke:var(--text-dim);stroke-width:1;opacity:.6;}
.propStrip .stripProjection{stroke-width:2;stroke-dasharray:5 4;}
.propStrip .stripProjectionOver{stroke:var(--prop-over);}
.propStrip .stripProjectionUnder{stroke:var(--prop-under);}
.propStrip .dotOver{fill:var(--prop-over);stroke:var(--bg-card);stroke-width:2;}
.propStrip .dotUnder{fill:var(--prop-under);stroke:var(--bg-card);stroke-width:2;}
.propStrip .dotOther{fill:var(--prop-other);stroke:var(--bg-card);stroke-width:2;}
.propStrip .stripDot{cursor:default;outline:none;}
.propStrip .stripDot:hover circle:last-child,.propStrip .stripDot:focus circle:last-child{r:6;}
.propStrip .stripTick{fill:var(--text-dim);font-size:10px;font-family:var(--font);}
.propCleared{margin:2px 0 8px;font-size:13px;color:var(--text-dim);}
.propCleared b{color:var(--text);font-weight:600;}
.propKey{display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-size:11px;}
.propKey i{display:inline-block;width:16px;height:0;margin-left:6px;}
.propKey .keyProjection{border-top:2px dashed;}
.propKey .keyOver{border-color:var(--prop-over);}
.propKey .keyUnder{border-color:var(--prop-under);}
.propKey .keyAverage{border-top:1px solid var(--text-dim);}
.propWhy{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--border);display:grid;gap:6px;}
.propWhy li{display:grid;grid-template-columns:56px 1fr;gap:10px;align-items:center;font-size:12.5px;line-height:1.35;}
.propWhy li > span:only-child{grid-column:2;}
.whyMeter{height:8px;}
@media (max-width:700px){
.leanRow{grid-template-columns:minmax(96px,38%) 1fr 74px;gap:6px;}
.leanAxis{grid-template-columns:minmax(96px,38%) 1fr 74px;gap:6px;}
.leanAxisScale span:nth-child(2){display:none;}
.propViewSwitch{margin-left:0;}
}


/* ---- MLB Picks & stats (docs/mlb_render.js) ----
   Better / worse than average is the same diverging pair as the NFL props
   (blue / orange, validated against --bg-card) with a grey midpoint.
   Pictures sit over a text fallback (initials, team code) that hides once
   the picture loads. */
:root{
--mlb-better:#3987e5;
--mlb-worse:#d95926;
--mlb-mid:#5b6270;
}
.mlbAvatar,.mlbLogo{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle;overflow:hidden;}
.mlbAvatar{border-radius:50%;background:var(--bg-hover);border:1px solid var(--border-strong);color:var(--text-dim);font-weight:700;}
.mlbAvatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.mlbLogo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.mlbAvatar.loaded > span,.mlbLogo.loaded > span{visibility:hidden;}
.mlbLogo > span{font-weight:800;color:var(--text-dim);letter-spacing:-.02em;}
.mlbAvatar-xs{width:24px;height:24px;font-size:9px;}
.mlbAvatar-sm{width:34px;height:34px;font-size:11px;}
.mlbAvatar-md{width:48px;height:48px;font-size:14px;}
.mlbAvatar-lg{width:68px;height:68px;font-size:18px;}
.mlbAvatar-xl{width:104px;height:104px;font-size:26px;}
.mlbLogo-xs{width:16px;height:16px;font-size:6px;}
.mlbLogo-sm{width:22px;height:22px;font-size:8px;}
.mlbLogo-md{width:34px;height:34px;font-size:11px;}
.mlbLogo-lg{width:60px;height:60px;font-size:18px;}

.vizCard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:0 0 16px;}
.vizHead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:12px;font-size:14px;}
.vizSub{font-size:13px;color:var(--text-dim);flex-basis:100%;}
.vizKey{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:12px;color:var(--text-dim);font-weight:400;}
.vizKey i{display:inline-block;margin-left:8px;}
.vizKey .keyBar{width:10px;height:10px;border-radius:2px;background:var(--mlb-better);}
.vizKey .keyReset{width:8px;height:8px;border-radius:50%;background:var(--mlb-worse);}
.vizKey .keyBetter{width:10px;height:10px;border-radius:2px;background:var(--mlb-better);}
.vizKey .keyWorse{width:10px;height:10px;border-radius:2px;background:var(--mlb-worse);}
.vizKey .keyTick{width:2px;height:12px;background:var(--text);}
.vizKey .keyDot{width:9px;height:9px;border-radius:50%;background:var(--mlb-better);}
.vizTip{position:absolute;z-index:50;display:none;max-width:280px;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:6px 10px;font-size:12.5px;line-height:1.4;color:var(--text);pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.4);}
.dim{color:var(--text-dim);}
.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
[data-tip]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* Streak chart: one column per day. */
.streakPlot{position:relative;height:150px;margin:18px 0 0 24px;}
.streakCols{position:absolute;inset:0;display:flex;align-items:stretch;gap:1px;}
.streakCol{position:relative;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;outline-offset:0;}
.streakCol:hover .streakBar{filter:brightness(1.3);}
.streakBar{position:relative;width:100%;background:var(--mlb-better);border-radius:3px 3px 0 0;}
.streakLabel{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:3px;font-size:11px;font-weight:600;color:var(--text);white-space:nowrap;}
.streakCol:last-child .streakLabel{left:auto;right:0;transform:none;}
.streakReset{position:absolute;left:50%;bottom:-9px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--mlb-worse);}
.streakGrid{position:absolute;left:0;right:0;border-top:1px solid var(--border);}
.streakGrid i{position:absolute;left:-24px;top:-8px;width:18px;text-align:right;font-style:normal;font-size:10px;color:var(--text-dim);}
.streakTicks{position:relative;height:16px;margin:14px 0 0 24px;}
.vegasPlot + .streakTicks{margin:6px 34px 0 0;}
.streakTick{position:absolute;top:0;font-size:11px;color:var(--text-dim);}

/* Beat the Streak pick cards and day log. */
.playerPicks{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-bottom:10px;}
.playerPick{display:flex;gap:14px;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;}
.playerPickBody{min-width:0;display:grid;gap:4px;justify-items:start;}
.playerPickName{font-size:17px;font-weight:700;}
.playerPickTeam{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim);}
.playerPickChance{font-size:13px;color:var(--text-dim);}
.playerPickChance b{font-size:20px;color:var(--text);}
.resultChip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;border:1px solid var(--border-strong);border-radius:999px;padding:2px 10px;color:var(--text);}
.resultGood{color:var(--success);}
.resultBad{color:var(--danger);}
.resultNeutral{color:var(--text-dim);}
.logList{display:grid;gap:2px;margin-bottom:8px;}
.logRow{display:grid;grid-template-columns:58px 1fr 92px;align-items:center;gap:10px;padding:6px 10px;border-radius:var(--radius-sm);background:var(--bg-raised);}
.logDate{font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.logPicks{display:flex;flex-wrap:wrap;gap:6px 14px;min-width:0;}
.logPick{display:inline-flex;align-items:center;gap:6px;font-size:13px;min-width:0;}
.logName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.logWeak{font-size:10px;color:var(--text-dim);border:1px solid var(--border-strong);border-radius:999px;padding:0 6px;}
.logEmpty{font-size:13px;color:var(--text-dim);}
.resultIcon{font-weight:700;font-size:14px;}
.logStreak{font-size:12px;text-align:right;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.logStreakReset{color:var(--text);}
.showMore{margin:4px 0 0;}

/* Ranked lists: hit streaks, best chances, leaderboards. */
.rankList{display:grid;gap:2px;}
.rankRow{display:grid;grid-template-columns:20px 34px minmax(0,1fr) minmax(70px,32%) 58px;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--radius-sm);}
.rankRow:nth-child(odd){background:var(--bg-raised);}
.rankRow:hover{background:var(--bg-hover);}
.rankNo{font-size:12px;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums;}
.rankWho{display:grid;min-width:0;}
.rankWho b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rankWho small{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-dim);white-space:nowrap;overflow:hidden;}
.rankValue{font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}
.pips{display:flex;flex-wrap:wrap;gap:3px;}
.pips i{width:8px;height:8px;border-radius:50%;background:var(--success);}
.chanceTrack{position:relative;display:block;height:10px;border-radius:5px;background:var(--bg-hover);}
.chanceFill{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--mlb-better);}
.mlbMeter{position:relative;display:block;height:10px;}
.mlbMeterMid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--border-strong);}
.mlbMeterBar{position:absolute;top:0;bottom:0;border-radius:4px;}

/* Percentile rows (team and player profiles). */
.pctRow{display:grid;grid-template-columns:minmax(110px,38%) minmax(80px,1fr) minmax(64px,auto);align-items:center;gap:12px;padding:5px 0;}
.pctLabel{font-size:13px;}
.pctValue{font-size:13px;color:var(--text-dim);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.pctTrack{position:relative;display:block;height:8px;border-radius:4px;background:var(--bg-hover);margin:0 11px;}
.pctFill{position:absolute;left:0;top:0;bottom:0;border-radius:4px;}
.pctDot{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;background:var(--bg-card);border:2px solid;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;color:var(--text);}
.pctTrackCompare{height:4px;}
.pctMid{position:absolute;left:50%;top:-6px;bottom:-6px;width:1px;background:var(--border-strong);}
.pctMarker{position:absolute;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--bg-raised);border:2px solid var(--border-strong);display:flex;align-items:center;justify-content:center;}
.pctMarker1{border-color:var(--accent);}
.splitTrack{height:2px;background:var(--border-strong);}
.splitAvg{position:absolute;top:-7px;width:2px;height:16px;margin-left:-1px;background:var(--text);}
.splitDot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--bg-card);}
.profileGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:6px 32px;}
.profileGroup{margin-bottom:8px;}
.profileGroupTitle{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);margin:8px 0 4px;padding-bottom:4px;border-bottom:1px solid var(--border);}
.profileGroupTitle .vizKey{text-transform:none;letter-spacing:0;}

/* Player lookup. */
.lookupControls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.lookupControls input{flex:1 1 220px;max-width:360px;}
.playerChoices{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.playerChoice{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;}
.playerChoice small{color:var(--text-dim);}
.playerCardHead{display:flex;gap:18px;align-items:center;margin-bottom:12px;}
.teamHeadName{font-size:22px;font-weight:700;}
.teamHeadMeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--text-dim);margin-top:2px;}
.factChips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.factChip{font-size:12.5px;border:1px solid var(--border-strong);border-radius:999px;padding:3px 10px;color:var(--text-dim);}
.factChip b{color:var(--text);}

/* Starting pitcher duels. */
.duelCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.duelCard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:grid;gap:10px;}
.duelTitle{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;}
.duelTitle span{color:var(--text-dim);font-weight:400;}
.duelSide{display:flex;gap:12px;align-items:center;}
.duelWho{display:grid;gap:2px;min-width:0;flex:1;}
.duelWho small{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-dim);}
.duelStat{display:grid;gap:6px;font-size:12.5px;color:var(--text-dim);margin-top:2px;}
.duelStat b{color:var(--text);}
.duelStat .mlbMeter{width:160px;height:8px;}

/* Game pick cards. */
.gameCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:10px;}
.gameCard2{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:grid;gap:10px;}
.gameCardBet{box-shadow:0 0 0 1px var(--accent);}
.gameTeams{display:flex;align-items:center;gap:8px;}
.gameTeam{display:flex;align-items:center;gap:8px;flex:1;min-width:0;font-size:15px;color:var(--text-dim);}
.gameTeam span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gameHome{justify-content:flex-end;text-align:right;}
.gamePicked{color:var(--text);font-weight:700;}
.gameAt{font-size:12px;color:var(--text-dim);}
.winSplit{position:relative;display:flex;gap:2px;height:26px;margin-top:14px;}
.winSeg{display:flex;align-items:center;padding:0 8px;background:var(--bg-hover);font-size:12px;color:var(--text-dim);overflow:hidden;}
.winSeg:first-child{border-radius:6px 0 0 6px;}
.winSeg:nth-child(2){border-radius:0 6px 6px 0;justify-content:flex-end;}
.winSegPicked{background:var(--accent);color:var(--on-accent);}
.winVegas{position:absolute;top:-6px;bottom:-4px;width:2px;margin-left:-1px;background:var(--text);}
.winVegas i{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;color:var(--text-dim);white-space:nowrap;}
.gameSay{font-size:13px;color:var(--text-dim);}
.gameSay b{color:var(--text);}
.gameFoot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.gameBet{font-size:12px;font-weight:600;color:var(--accent);}
.vizPair{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:0 16px;}
.vegasPlot{position:relative;height:170px;margin-right:34px;}
.vegasPlot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.vegasLine{fill:none;stroke:var(--mlb-better);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;}
.vegasZero{stroke:var(--border-strong);stroke-width:1;vector-effect:non-scaling-stroke;}
.vegasZeroLabel{position:absolute;right:0;transform:translateY(4px);font-size:11px;color:var(--text-dim);}
.vegasEnd{position:absolute;right:-34px;width:30px;transform:translateY(-50%);font-size:12px;font-weight:700;color:var(--text);}
.vegasHit{position:absolute;top:0;bottom:0;}
.vegasDot{position:absolute;display:none;width:10px;height:10px;border-radius:50%;background:var(--mlb-better);border:2px solid var(--bg-card);transform:translate(-50%,-50%);pointer-events:none;}
.bucketRow{display:grid;grid-template-columns:minmax(110px,34%) 1fr 84px;align-items:center;gap:12px;padding:7px 0;}
.bucketLabel{font-size:13px;}
.bucketTrack{height:14px;}
.bucketTick{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--text);}
.bucketValue{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;}
.bucketValue small{color:var(--text-dim);font-weight:400;}
.gameLogRow{grid-template-columns:58px minmax(0,1.4fr) minmax(0,1fr) 24px;}
.logGame{display:flex;align-items:center;gap:5px;font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;}
.logPickTeam{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* Teams. */
.powerCols{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;}
.powerRow{display:grid;grid-template-columns:20px 16px minmax(0,1fr) 38% 46px;align-items:center;gap:8px;width:100%;padding:5px 8px;margin:0;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text);font:inherit;font-size:13px;text-align:left;cursor:pointer;}
.powerRow:hover{background:var(--bg-hover);}
.powerPicked{background:var(--bg-hover);box-shadow:inset 3px 0 0 var(--accent);}
.powerName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.powerValue{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-dim);}
.teamHeads{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:14px;}
.teamHead{display:flex;align-items:center;gap:12px;}
.teamHead + .teamVs + .teamHead .mlbLogo-lg{box-shadow:0 0 0 2px var(--accent);border-radius:50%;}
.teamVs{color:var(--text-dim);font-size:13px;}

@media (max-width:700px){
.powerCols{grid-template-columns:1fr;}
.rankRow{grid-template-columns:18px 34px minmax(0,1fr) 54px 46px;gap:8px;}
.pctRow{grid-template-columns:minmax(96px,40%) 1fr minmax(56px,auto);gap:8px;}
.logRow{grid-template-columns:48px 1fr 70px;gap:8px;padding:6px 8px;}
.gameLogRow{grid-template-columns:48px minmax(0,1fr) 20px;}
.gameLogRow .logPickTeam{grid-column:2;grid-row:2;}
.gameLogRow .resultIcon{grid-row:1 / span 2;grid-column:3;}
.profileGrid{grid-template-columns:1fr;}
.playerCardHead{gap:12px;}
.mlbAvatar-xl{width:80px;height:80px;}
.teamHeadName{font-size:19px;}
.streakPlot{height:120px;}
}
#teamResult{display:block;overflow:visible;}
.pctScaleRow{padding:0 0 2px;}
.pctScaleInner{display:flex;justify-content:space-between;margin:0 11px;font-size:10.5px;color:var(--text-dim);}
.pctPair{display:inline-flex;align-items:center;gap:4px;margin-left:10px;}
.teamCompare .profileGrid{grid-template-columns:repeat(auto-fit,minmax(440px,1fr));}
.teamProfile .vizSub{margin:-4px 0 4px;}
.rankValue{white-space:nowrap;}
.rankRow{grid-template-columns:20px 34px minmax(0,1fr) minmax(70px,32%) minmax(58px,auto);}
@media (max-width:700px){
.teamCompare .profileGrid{grid-template-columns:1fr;}
.rankRow{grid-template-columns:18px 34px minmax(0,1fr) 54px minmax(46px,auto);}
.pctPair{margin-left:6px;}
}
/* Fixed value columns so every row's track lines up with the scale row. */
.pctRow{grid-template-columns:minmax(110px,38%) minmax(80px,1fr) 78px;}
.teamCompare .pctRow{grid-template-columns:minmax(110px,34%) minmax(80px,1fr) 148px;}
@media (max-width:700px){
.pctRow{grid-template-columns:minmax(96px,40%) 1fr 66px;}
.teamCompare .pctRow{grid-template-columns:1fr 132px;row-gap:2px;}
.teamCompare .pctLabel{grid-column:1 / -1;}
.teamCompare .pctScaleRow > span:first-child{display:none;}
.teamVs{display:none;}
}
.profileGrid{grid-template-columns:repeat(auto-fit,minmax(400px,1fr));}
@media (max-width:700px){
.profileGrid{grid-template-columns:1fr;}
}
/* Two teams: caps sit just above and below the track so a tie never hides one. */
.teamCompare .pctRow{padding:9px 0;}
.teamCompare .pctMarker{width:22px;height:22px;}
.teamCompare .pctMarker0{transform:translate(-50%,-85%);}
.teamCompare .pctMarker1{transform:translate(-50%,-15%);}

/* ---- MLB Stats page: hitter table ---- */
.statTableBox{max-height:620px;overflow-x:auto;}
.statTable{width:100%;min-width:640px;}
.statTable thead th{position:sticky;top:0;z-index:1;background:var(--bg-raised);}
.statTable th.num,.statTable td.num{text-align:right;}
.statTable td{vertical-align:middle;font-size:13px;}
.sortHead{all:unset;cursor:pointer;color:var(--text-dim);font-weight:600;font-size:12.5px;white-space:nowrap;}
.sortHead:hover,.sortHead.sorted{color:var(--text);}
.sortHead:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.statWho{display:grid;grid-template-columns:20px 34px minmax(0,1fr);align-items:center;gap:10px;}
.statBar{display:inline-grid;grid-template-columns:72px 40px;align-items:center;gap:8px;}
.statBar b{font-weight:600;text-align:right;}
.statTable td.num b{font-weight:600;}
.adjNote{display:block;font-size:10.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.hitterViewSwitch{margin:0 0 12px;}

/* ---- MLB Stats page: team schedules on a paper sheet ----
   Wins are circled and losses crossed out in pen; the ink deepens with
   the margin. Picking a team crumples the old sheet and unfolds the new
   one panel by panel. */
.schedPicker{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;}
.schedPick{display:inline-flex;flex-direction:column;align-items:center;gap:2px;width:56px;padding:6px 0 4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-raised);color:var(--text-dim);font-size:10px;font-weight:700;cursor:pointer;}
.schedPick:hover{background:var(--bg-hover);}
.schedPicked{border-color:var(--accent);color:var(--text);box-shadow:0 0 0 1px var(--accent);}
.paperStage{perspective:1800px;margin-bottom:24px;}
.paperSheet{position:relative;background:#f4efe2;color:#2b2620;border-radius:4px;padding:18px 18px 14px;box-shadow:0 18px 40px rgba(0,0,0,.45),0 2px 0 rgba(255,255,255,.4) inset;transform-origin:50% 40%;}
.paperSheet::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;opacity:0;
background:
linear-gradient(115deg,transparent 30%,rgba(0,0,0,.18) 31%,transparent 33%),
linear-gradient(35deg,transparent 55%,rgba(0,0,0,.16) 56%,transparent 58%),
linear-gradient(160deg,transparent 18%,rgba(255,255,255,.5) 19%,transparent 21%),
linear-gradient(75deg,transparent 70%,rgba(0,0,0,.14) 71%,transparent 73%),
radial-gradient(circle at 40% 45%,rgba(0,0,0,.18),transparent 60%);}
.paperHead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 20px;padding-bottom:12px;margin-bottom:6px;border-bottom:2px solid #2b2620;}
.paperTeam{display:flex;align-items:center;gap:12px;}
.paperTeam b{display:block;font-size:22px;font-family:Georgia,"Times New Roman",serif;}
.paperTeam small{display:block;font-size:12.5px;color:#5c544a;}
.paperTeam .mlbLogo > span,.paperPanels .mlbLogo > span{color:#5c544a;}
.paperKey{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:11px;color:#5c544a;}
.paperKey span{margin-left:10px;}
.paperKey .schedMark{position:static;width:20px;height:20px;}
.paperPanels{display:grid;grid-template-columns:repeat(4,1fr);}
.paperPanel{padding:4px 10px 0;transform-origin:left center;
background:linear-gradient(90deg,rgba(0,0,0,.06),transparent 8%,transparent 92%,rgba(0,0,0,.04));}
.paperPanel + .paperPanel{border-left:1px dashed rgba(43,38,32,.25);}
.schedSeries{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:6px;padding:4px 0;border-bottom:1px solid rgba(43,38,32,.12);}
.schedDates{font-size:11px;font-variant-numeric:tabular-nums;line-height:1.2;}
.schedDates small{display:block;font-size:9.5px;color:#7a7064;text-transform:uppercase;letter-spacing:.05em;}
.schedGames{display:flex;flex-wrap:wrap;gap:3px;}
.schedGame{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;}
.schedGame:hover,.schedGame:focus-visible{background:rgba(43,38,32,.08);outline:none;}
.schedGame .mlbLogo-md{width:24px;height:24px;font-size:8px;}
.schedMark{position:absolute;inset:0;width:32px;height:32px;fill:none;stroke-width:3.4;stroke-linecap:round;overflow:visible;}
.schedLoss{stroke-width:3.8;}
.paperEmpty{padding:30px;text-align:center;color:#5c544a;}

.unfolding{animation:paperDrop .35s ease-out both;}
.unfolding .paperHead{animation:paperFade .4s ease-out both;}
.unfolding .paperPanel{backface-visibility:hidden;animation:paperUnfold .6s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--panel) * .16s + .12s);}
.crumpling{animation:paperCrumple .65s cubic-bezier(.55,0,.8,.4) forwards;}
.crumpling::after{animation:paperCreases .65s ease-in forwards;}
@keyframes paperDrop{from{transform:translateY(-10px) rotateX(14deg) scale(.97);opacity:0;}to{transform:none;opacity:1;}}
@keyframes paperFade{from{opacity:0;}to{opacity:1;}}
@keyframes paperUnfold{
0%{transform:rotateY(-100deg);opacity:0;filter:brightness(.6);}
35%{opacity:1;}
70%{transform:rotateY(8deg);filter:brightness(1.04);}
100%{transform:none;filter:none;}
}
@keyframes paperCrumple{
0%{transform:none;clip-path:polygon(0 0,50% 0,100% 0,100% 50%,100% 100%,50% 100%,0 100%,0 50%);}
30%{transform:scale(.9) rotate(-2deg);clip-path:polygon(3% 5%,48% 1%,96% 6%,99% 46%,95% 95%,52% 99%,4% 93%,1% 52%);filter:contrast(1.1);}
65%{transform:scale(.5) rotate(10deg);clip-path:polygon(16% 20%,46% 9%,82% 18%,90% 50%,80% 84%,48% 92%,15% 80%,9% 47%);filter:contrast(1.2) brightness(.92);}
100%{transform:translateY(60px) scale(.1) rotate(38deg);opacity:0;clip-path:polygon(32% 34%,50% 26%,68% 32%,74% 52%,66% 70%,48% 76%,30% 68%,25% 50%);}
}
@keyframes paperCreases{to{opacity:1;}}
@keyframes paperUnfoldDown{
0%{transform:rotateX(-100deg);opacity:0;filter:brightness(.6);}
35%{opacity:1;}
100%{transform:none;filter:none;}
}
@media (max-width:1000px){
.paperPanels{grid-template-columns:repeat(2,1fr);}
.paperPanel:nth-child(3){border-left:0;}
}
@media (max-width:640px){
.paperSheet{padding:14px 10px 10px;}
.paperPanels{grid-template-columns:1fr;}
.paperPanel{transform-origin:center top;padding:0 2px;}
.paperPanel + .paperPanel{border-left:0;border-top:1px dashed rgba(43,38,32,.3);}
.unfolding .paperPanel{animation-name:paperUnfoldDown;}
.schedPick{width:48px;}
.statBar{grid-template-columns:44px 38px;}
}
@media (prefers-reduced-motion:reduce){
.unfolding,.unfolding .paperHead,.unfolding .paperPanel,.crumpling,.crumpling::after{animation:none;}
}
.headShort{display:none;}
@media (max-width:640px){
.headLong{display:none;}
.headShort{display:inline;}
.statTable{min-width:0;}
.statTable td,.statTable th{padding:8px 5px;}
.statWho{grid-template-columns:16px minmax(0,1fr);gap:6px;}
.statWho .mlbAvatar{display:none;}
.statTable .chanceTrack{display:none;}
.statBar{grid-template-columns:auto;}
}

/* ---- NFL Stats tab: schedule sheet rows (docs/nfl_stats.js) ---- */
.nflPanels{grid-template-columns:repeat(3,1fr);}
.nflSchedRow{display:grid;grid-template-columns:54px 24px 34px minmax(0,1fr) auto;align-items:center;gap:6px;padding:5px 0;border-bottom:1px solid rgba(43,38,32,.12);}
.nflSchedRow:focus-visible{outline:2px solid #2b2620;outline-offset:1px;}
.nflWeek{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.15;}
.nflWeek small{display:block;font-size:10px;font-weight:400;color:#7a7064;}
.nflWhere{font-size:11px;color:#7a7064;}
.nflOpp{width:34px;height:34px;}
.nflOpp .mlbLogo-md{width:26px;height:26px;}
.nflOpp .schedMark{width:34px;height:34px;}
.nflOppName{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.nflScore{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.nflUpcoming .nflScore{font-weight:400;color:#7a7064;}
.nflUpcoming .nflOppName{color:#5c544a;}
.nflBye{grid-template-columns:54px 1fr;}
.nflByeText{font-size:12px;font-style:italic;color:#7a7064;}
.powerName small{font-weight:400;}
@media (max-width:1000px){
.nflPanels{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
.nflPanels{grid-template-columns:1fr;}
}

/* ---- MLB Age Curves (docs/age_render.js) ----
   His own seasons in the accent, next season's likely range as a band,
   the league average as a hairline, and each similar player's next-season
   step as a faint line - blue if he got better, orange if worse. */
.ageHero .playerCardHead{margin-bottom:6px;}
.ageProjection{border-top:1px solid var(--border);padding-top:12px;margin-top:6px;}
.ageProjLabel{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);}
.ageProjValue{font-size:14px;margin:4px 0 10px;}
.ageProjValue b{font-size:24px;}
.ageProjNote{font-size:13px;color:var(--text-dim);margin-top:26px;}
.ageProjNote b{color:var(--text);}
.ageRange{position:relative;height:14px;max-width:520px;border-radius:7px;background:var(--bg-hover);}
.ageRangeBand{position:absolute;top:0;bottom:0;border-radius:7px;background:rgba(242,169,60,.35);}
.ageRangeMean{position:absolute;top:-4px;bottom:-4px;width:4px;margin-left:-2px;border-radius:2px;}
.ageRangeNow{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--text);border:2px solid var(--bg-card);}
.ageRangeTag{position:absolute;top:18px;transform:translateX(-50%);font-size:11px;color:var(--text-dim);white-space:nowrap;}
.ageRangeTagMean{color:var(--text);font-weight:600;}
.ageChartBox{overflow:hidden;}
.ageChart{display:block;max-width:100%;height:auto;}
.ageChart .ageGrid{stroke:var(--border);stroke-width:1;}
.ageChart .ageTick{fill:var(--text-dim);font-size:11px;font-family:var(--font);}
.ageChart .ageLeague{fill:none;stroke:var(--text-dim);stroke-width:1.2;stroke-dasharray:2 3;}
.ageChart .ageCompUp{stroke:var(--mlb-better);stroke-width:1.4;opacity:.38;}
.ageChart .ageCompDown{stroke:var(--mlb-worse);stroke-width:1.4;opacity:.38;}
.ageChart .ageCompHit{stroke:transparent;stroke-width:10;}
.ageChart .ageComp:hover .ageCompUp,.ageChart .ageComp:hover .ageCompDown{opacity:1;stroke-width:2.4;}
.ageChart .ageOwn{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;}
.ageChart .ageOwnDot{fill:var(--accent);stroke:var(--bg-card);stroke-width:2;}
.ageChart .ageProjDot{fill:var(--bg-card);stroke:var(--accent);stroke-width:2.5;}
.ageChart .ageProjLine{stroke:var(--accent);stroke-width:2;stroke-dasharray:5 4;}
.ageChart .ageBand{fill:rgba(242,169,60,.3);}
.ageChart .ageHitArea{fill:transparent;}
.vizKey .keyOwn{width:12px;height:3px;background:var(--accent);}
.vizKey .keyProj{width:10px;height:12px;border-radius:3px;background:rgba(242,169,60,.45);}
.vizKey .keyLeague{width:14px;height:0;border-top:1.5px dashed var(--text-dim);}
.vizKey .keyUp{width:12px;height:2px;background:var(--mlb-better);}
.vizKey .keyDown{width:12px;height:2px;background:var(--mlb-worse);}
.ageCompRow{grid-template-columns:20px minmax(0,1fr) auto 84px;}
.ageCompValues{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ageMove{font-size:13px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.ageMove.dim{font-weight:400;font-size:12px;}
.ageCompList{max-width:640px;}
#ageMetricTabs{margin:4px 0 14px;}

/* ---- NFL game picks: "What if?" panel (docs/nfl_whatif.js) ---- */
.whatIf{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:18px;}
.whatIfField{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim);margin-bottom:10px;max-width:100%;}
.whatIfField select{margin:0;width:100%;max-width:100%;box-sizing:border-box;}
.whatIfResult{margin:4px 0 14px;}
.whatIfHeadline{font-size:22px;font-weight:700;margin-bottom:6px;font-variant-numeric:tabular-nums;}
.whatIfBreakdown{font-size:13px;color:var(--text-dim);margin-top:6px;}
.whatIfBreakdown b{color:var(--text);}
.whatIfTeams{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.whatIfTeam h4{margin:0 0 8px;}
.whatIfOutLabel{font-size:12px;color:var(--text-dim);margin:4px 0 6px;}
.whatIfGroup{margin-bottom:8px;}
.whatIfGroupName{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-dim);margin-bottom:2px;}
.whatIfPlayer{display:flex;align-items:center;gap:6px;font-size:13px;padding:2px 0;cursor:pointer;}
.whatIfPlayer input{margin:0;padding:0;}
.whatIfPlayer small{color:var(--text-dim);margin-left:auto;font-variant-numeric:tabular-nums;}
@media (max-width:640px){
.whatIfTeams{grid-template-columns:1fr;}
}
.whatIfModes{margin:0 0 10px;}
.whatIfSummary{font-size:13px;color:var(--text-dim);margin:0 0 10px;line-height:1.5;}
.whatIfSummary b{color:var(--text);}
.whatIfAction{margin:0 0 12px;}
.whatIfFinal{font-size:13px;margin:-2px 0 6px;color:var(--text-dim);}
.whatIfMissed{font-size:11px;font-weight:700;color:var(--danger);border:1px solid var(--danger);border-radius:4px;padding:0 4px;margin-left:4px;}
.whatIfUnits{display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:10px;}
.whatIfUnit{display:grid;grid-template-columns:96px auto minmax(0,1fr);align-items:center;gap:6px;font-size:13px;}
.whatIfUnit small{color:var(--text-dim);font-variant-numeric:tabular-nums;}
input.whatIfPct{width:64px;margin:0 2px 0 0;padding:4px 6px;font-size:13px;font-variant-numeric:tabular-nums;}
.whatIfPlayerRow{padding:1px 0;}
.whatIfPlayerUnits{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:2px 0 4px 24px;font-size:12px;color:var(--text-dim);}
.whatIfRecord{margin:0 0 4px 24px;font-size:11px;color:var(--text-dim);}
.whatIfPctWrap{display:inline-flex;align-items:center;white-space:nowrap;}

/* ---- NFL picks: before / after the final injury report ---- */
.pickCard.report-before,.game.report-before{outline:2px solid var(--report-before);outline-offset:-2px;}
.pickCard.report-after,.game.report-after{outline:2px solid var(--report-after);outline-offset:-2px;}
.reportNote{font-size:12px;color:var(--text-dim);margin-top:4px;}
.reportNote b{font-weight:600;}
.report-before .reportNote b{color:var(--report-before);}
.report-after .reportNote b{color:var(--report-after);}
.reportKey{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--text-dim);margin:0 0 10px;}
.reportKey span::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px;}
.reportKey .before::before{border:2px solid var(--report-before);}
.reportKey .after::before{border:2px solid var(--report-after);}

/* ---- MLB Payroll page (docs/payroll_render.js) ----
   Green (value) to red (overspending) through grey - not the other MLB
   pages' blue / orange, which reads as hot and cold here. Chips and grid
   cells carry their value, inked for contrast in payroll_render.js. Lines
   (wins, the price of a win) take the text ink, not the page accent -
   the NFL page's accent is green, which here means value. */
:root{
--pay-good:#47ab4f;
--pay-bad:#a53234;
}
.payControls{align-items:center;}
.payField{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);}
.payField select{margin:0;}
.payTiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:8px 0 6px;}
.payTile{display:flex;gap:10px;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;}
.payTile > div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.payTileLabel{font-size:12px;color:var(--text-dim);}
.payTileValue{font-size:20px;font-weight:700;}
.payTile small{font-size:12px;color:var(--text-dim);}
.payNote{font-size:13px;color:var(--text-dim);margin:6px 0 14px;}
.payNote b{color:var(--text);}
.payChip{display:inline-block;min-width:44px;padding:2px 6px;border-radius:4px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;}
.payTable .payTeamBtn{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;}
.payTable .payTeamBtn:hover b{text-decoration:underline;}
.payTable .payTeamBtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.payTable .rankNo{min-width:18px;}
.payTable tr.paySelected td{background:var(--bg-hover);}
.payChart{display:block;max-width:100%;height:auto;}
.payChart .payGrid{stroke:var(--border);stroke-width:1;}
.payChart .payTick{fill:var(--text-dim);font-size:11px;font-family:var(--font);}
.payChart .payAvgLine{stroke:var(--border-strong);stroke-width:1;stroke-dasharray:3 3;}
.payChart .payCurve{fill:none;stroke:var(--text-dim);stroke-width:1.5;stroke-dasharray:6 4;}
.payChart .payHit{fill:transparent;}
.payChart .payDot circle:not(.payHit){stroke:var(--bg-card);stroke-width:2;}
.payChart .paySelectedDot circle:not(.payHit){stroke:var(--text);stroke-width:2.5;}
.payChart .payDot{cursor:pointer;}
.payChart .payDotLabel{fill:var(--text);font-size:11px;font-weight:700;font-family:var(--font);}
.payChart .payActualLine{fill:none;stroke:var(--text);stroke-width:2;stroke-linejoin:round;}
.payChart .payActualDot{fill:var(--text);stroke:var(--bg-card);stroke-width:1.5;}
.payChart .payExpectedLine{fill:none;stroke:var(--text-dim);stroke-width:2;stroke-dasharray:5 4;}
.payChart .payActualLabel{fill:var(--text);}
.payChart [data-pay-season]{cursor:pointer;}
.vizKey .payKeyGood,.vizKey .payKeyMid,.vizKey .payKeyBad{width:10px;height:10px;border-radius:50%;}
.vizKey .payKeyGood{background:var(--pay-good);}
.vizKey .payKeyMid{background:var(--mlb-mid);}
.vizKey .payKeyBad{background:var(--pay-bad);}
.vizKey .payKeyActual{width:12px;height:3px;background:var(--text);}
.vizKey .payKeyExpected{width:14px;height:0;border-top:2px dashed var(--text-dim);}
.payNeighbors{margin:0 0 20px;}
.payNeighbor{display:inline-flex;align-items:center;gap:5px;margin:0 6px 6px 0;padding:3px 8px;border:1px solid var(--border);border-radius:999px;background:var(--bg-raised);font-size:12px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.payNeighbor b{color:var(--text);}
.payMeasureTabs{margin:6px 0 10px;}
.payGridBox{max-height:640px;overflow:auto;margin-bottom:24px;}
.payGridTable{border-collapse:separate;border-spacing:2px;font-size:11.5px;}
.payGridTable th{font-weight:600;color:var(--text-dim);background:var(--bg-raised);padding:4px 5px;white-space:nowrap;}
.payGridTable thead th span{display:block;}
.payGridTable thead th .mlbLogo{margin:0 auto 2px;display:flex;}
.payGridTable tbody th{position:sticky;left:0;z-index:1;}
.payGridTable .payCell{text-align:center;padding:4px 5px;min-width:34px;border-radius:3px;font-variant-numeric:tabular-nums;}
.payGridTable td:empty{background:transparent;}

/* ---- Installable app (docs/install.js) ----
   The header's "Install app" button, and the Add to Home Screen steps it
   shows on iPhone and iPad. */
.installButton{border-style:dashed;}
.installTip{background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--radius);padding:14px 16px;margin:0 0 16px;max-width:460px;font-size:14px;}
.installTip ol{margin:8px 0 8px 20px;padding:0;}
.installTip li{margin:4px 0;}
.installTip p{color:var(--text-dim);font-size:13px;margin:0 0 10px;}