/* ===================================================================== Data Sciencing — shared base stylesheet --------------------------------------------------------------------- ONE canonical skeleton for all three sports sites (dspl / dsnwsl / dsnfl). Everything here is identical across sites. Per-sport identity lives ONLY in each site's own styles.css: 1. the :root {} design-token block (accent + ground colours) 2. genuinely sport-specific sections (EPL league table + golden boot, NFL divisions/wildcard, NWSL power rankings, etc.) base.css is loaded FIRST; the site styles.css is loaded AFTER it, so a site can override any base rule at equal specificity. Do NOT fork shared components into a site file — change them here so all three move together. ===================================================================== */ /* ---- reset ---- */ *{box-sizing:border-box;margin:0;min-width:0} body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased} .wrap{max-width:1180px;margin:0 auto;padding:0 26px} a{color:inherit} svg{display:block} /* ---- header — on-background text, accent chrome ---- */ header{border-bottom:4px solid var(--accent)} header .bar{display:flex;align-items:center;gap:16px;padding:16px 26px} .brand{display:flex;align-items:center;gap:11px} .brand .logo{width:34px;height:34px;flex:none} .wordmark{font-size:21px;font-weight:800;line-height:1.1;letter-spacing:-.1px;color:var(--bgink)} .wordmark span{color:var(--accent2)} nav{margin-left:auto;display:flex;gap:20px;font-size:13px;font-weight:600} nav button{cursor:pointer;padding:0 0 2px;color:var(--bgmut);border:none;border-bottom:3px solid transparent;background:none;font:inherit} nav button.on{color:var(--bgink);border-bottom-color:var(--accent)} .newslink{display:inline-flex;align-items:center;gap:5px;position:relative;padding-left:21px;font-size:13px;font-weight:700;color:var(--bgink);text-decoration:none;white-space:normal} .newslink::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:16px;background:var(--bgmut);opacity:.45} .newslink:hover{color:var(--accent2)} .newslink .ext{font-size:12px;font-weight:600} :focus-visible{outline:3px solid var(--accent2);outline-offset:2px;border-radius:6px} main{padding-bottom:44px;min-height:70vh} .loading{padding:80px 0;text-align:center;color:var(--bgmut)} /* prototype badge (sample-data marker) */ .proto{margin-left:10px;padding:3px 9px;border:1px solid var(--bgmut);border-radius:99px;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--bgmut);white-space:nowrap} /* ---- section intros ---- */ .h1{font-size:24px;font-weight:900;color:var(--bgink)} /* visually-hidden heading: gives each tab panel an

for the screen-reader outline without changing the visible design */ .srhead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .sub{font-size:13px;color:var(--bgmut);margin-top:3px;line-height:1.55;max-width:920px} .sub a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px} .sub a:hover{color:var(--accent)} .introrow{padding:20px 0 0;display:flex;align-items:flex-start;gap:14px} .seg{display:inline-flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;font-size:12px;font-weight:700;flex:none} .seg button{padding:5px 14px;background:var(--card);color:var(--mut);cursor:pointer;border:none;font:inherit;font-weight:700} .seg button.on{background:var(--accent);color:#fff} /* ---- compact view-card (scorecard on Games; bracket/race card) ---- */ .scorecard{padding:16px 20px} .scorecard .kicker{margin-bottom:6px;text-transform:none;letter-spacing:0} .scorecard .brd td{padding:6px 6px} .scorecard .racewrap{margin-top:8px} /* inverse scorecard — accent card, light text: graded results, not forecasts */ .panel.inverse{background:var(--accent);border-color:rgba(255,255,255,.14)} .inverse .kicker{color:rgba(255,255,255,.72)} .inverse .brd td{color:#FCFBF6;border-bottom-color:rgba(252,251,246,.14)} .inverse .brd .rk{color:rgba(255,255,255,.72)} .inverse .brd tr.ours{background:rgba(252,251,246,.10)} .inverse .brd .bar>div{background:#FCFBF6} .inverse .boardgm{color:rgba(255,255,255,.72)} .inverse .how{color:rgba(255,255,255,.72)} .inverse .racewrap{margin-top:0} .brd .sbgp{color:rgba(0,0,0,.42);font-size:10px;font-weight:600} .inverse .brd .sbgp{color:rgba(255,255,255,.55)} /* unfurled: wide trend chart + compact board, stacking on narrow */ .sbgrid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;align-items:start} .sbgrid .brd.lead td{padding:7px 4px} .sbgrid .brd.lead .val{width:58px} .sbgrid .racewrap{overflow:visible} /* the Brier chart fits its column — never scroll */ .sbgrid .racewrap svg{min-width:0} @media(max-width:1160px){.sbgrid{grid-template-columns:1fr;gap:16px}} /* "as of" tag when a past matchday is selected */ .sbasof{margin-left:auto;font-size:11px;color:var(--faint);letter-spacing:.3px} .inverse .sbasof{color:rgba(255,255,255,.72)} /* one-line explainer under the scoreboard, bottom-right */ .sbnote{margin-top:12px;text-align:right;font-size:11.5px;line-height:1.45;color:var(--faint)} .sbnote a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px} .sbnote a:hover{color:var(--accent)} .inverse .sbnote{color:rgba(255,255,255,.72)} .inverse .sbnote a{color:#e6eef7} .inverse .sbnote a:hover{color:#FCFBF6} /* a knockout day we never archived game cards for */ .noboard{display:flex;flex-direction:column;gap:5px} .noboard .nbtitle{font-size:13px;font-weight:800;color:var(--ink)} .noboard .nbsub{font-size:12.5px;line-height:1.45;color:var(--mut);max-width:60ch} /* ---- games: date strip — one connected segmented control ---- */ .dates{display:inline-flex;align-items:stretch;max-width:100%;overflow-x:auto;margin-top:13px;border:1.5px solid var(--line);border-radius:11px;background:var(--card);box-shadow:0 1px 3px rgba(19,27,46,.05)} .dates .pill{padding:9px 15px;border:none;border-radius:0;background:var(--card);color:var(--ink);font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;white-space:nowrap;flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.15} .dates .pill+.pill{border-left:1px solid var(--line2)} .dates .pill.on{background:var(--accent);color:#fff} .dates .pill:focus-visible{outline-offset:-3px} /* control clips overflow; keep the ring inside */ /* week pill: label with its start date beneath ("MW5" / "Sep 18") */ .dates .pill .pmon{font-size:10px;font-weight:600;color:var(--mut)} .dates .pill.on .pmon{color:rgba(255,255,255,.75)} /* ---- match card ---- */ .card{background:var(--card);border:1.5px solid var(--line);border-radius:16px;margin:14px 0 0;padding:16px 22px 18px;box-shadow:0 1px 3px rgba(19,27,46,.05)} .mhead{display:flex;align-items:center} .side{display:flex;align-items:center;gap:10px;flex:1} .side.right{justify-content:flex-end} /* club/team crests: square, transparent, no frame */ .flag{width:30px;height:30px;object-fit:contain;flex:none} .tn{font-size:18px;font-weight:800;line-height:1.1} /* team name + record stack (record class differs by site: .rec / .trec) */ .tnwrap{display:flex;flex-direction:column;gap:1px;min-width:0;line-height:1.1} .tnrow{display:flex;align-items:baseline;gap:7px;min-width:0} .side.right .tnrow{justify-content:flex-end} .tnrow .trec{margin-top:0} .tnwrap.r,.side.right .tnwrap{align-items:flex-end} .rec,.trec{font-size:11px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums;letter-spacing:.2px;margin-top:1px} .mid{text-align:center;padding:0 14px;flex:none} .kick{color:var(--accent2);font-weight:800;font-size:13.5px} .ven{color:var(--mut);font-size:11px} /* venue: stadium then city on its own quieter line */ .vencity{display:block;font-size:10px;color:var(--faint);margin-top:1px} /* market line pill (spread/total) under the kickoff time */ .mline{display:inline-block;margin-top:4px;padding:2px 8px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:11px;font-weight:800;letter-spacing:.2px} .finalscore{color:var(--green);font-weight:800;font-size:15px;white-space:nowrap} .finalscore.live{color:var(--accent)} .livedet{color:var(--accent);font-weight:800;display:flex;align-items:center;gap:4px;justify-content:center} .livedot{width:7px;height:7px;border-radius:50%;background:#d33;display:inline-block;animation:livepulse 1.4s ease-in-out infinite} @keyframes livepulse{0%,100%{opacity:1}50%{opacity:.25}} /* 2-column card: bar + movement left, tale-of-the-tape right */ .cardgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;margin-top:10px;align-items:start} .cardgrid.onecol{grid-template-columns:1fr} /* no rail (early knockout days) */ .barbox{position:relative} .mbar{position:relative;display:flex;height:44px;border-radius:10px;overflow:hidden;font-weight:800;font-size:14px} .mbar>div{display:flex;align-items:center;justify-content:center;color:#fff} /* hairline between segments so a pale kit doesn't melt into the draw block */ .mbar>div+div{box-shadow:inset 1px 0 0 rgba(19,27,46,.22)} /* thin black outline tracing the bar so pale team colours hold their edge on the cream card (drawn as an overlay — a per-segment border can't wrap the container's rounded corners). Hollow placeholder bars keep their dashed edge. */ .mbar::after,.fcbar:not(.hollow)::after{content:"";position:absolute;inset:0;border:1px solid #000;border-radius:inherit;pointer-events:none;z-index:2} .tick{position:absolute;top:-5px;bottom:-5px;width:3px;background:var(--accent);border-radius:2px;transform:translateX(-50%);z-index:3;box-shadow:0 0 0 1.5px var(--card)} /* sportsbook variance band: where the books span on the home-win axis */ .mktcell{display:flex;flex-direction:column;gap:3px;min-width:0} .bookband{position:absolute;top:-3px;bottom:-3px;background:rgba(255,255,255,.16);border-left:2px solid rgba(255,255,255,.7);border-right:2px solid rgba(255,255,255,.7);border-radius:1px;z-index:2;pointer-events:none} .bookcap{font-size:10px;font-weight:600;color:var(--faint)} .fchip{position:absolute;top:-22px;transform:translateX(-50%);font-size:10.5px;font-weight:800;border:1px solid var(--line);border-radius:7px;padding:1px 7px;white-space:nowrap;z-index:4;background:var(--card)} .fchip.pos{color:var(--green)}.fchip.neg{color:var(--red)}.fchip.flat{color:var(--mut)} /* forecaster field: every forecaster a labeled row, all bars share the same 1fr column so they start/end at the same x. Market is the first, taller row; the top padding gives its ticks + floating edge chips room. */ .fcbars{margin-top:6px;padding-top:24px;display:flex;flex-direction:column;gap:8px} .fcrow{display:grid;grid-template-columns:82px 1fr;align-items:center;gap:10px} .fclab{font-size:11px;font-weight:700;color:var(--mut);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fcrow.ours .fclab,.fcrow.mkt .fclab{color:var(--ink)} .fcbar{position:relative;display:flex;height:15px;border-radius:5px;overflow:hidden} .fcbar span{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;min-width:0} .fcbar span+span{box-shadow:inset 1px 0 0 rgba(19,27,46,.22)} /* best-price row (bottom of the forecaster stack): a segmented bar in the same grammar as the other rows — home colour / grey draw / away colour, segment length = that side's best (lowest-probability) price across the books. The bar falls short of 100%: the gap is the vig you dodge by shopping. Book names + values sit below the bar, under their segments. */ .fcrow.bestrow{align-items:start} .fcrow.bestrow .fclab{margin-top:2px} .bestcell{display:flex;flex-direction:column;gap:3px;min-width:0} /* home anchors left, away anchors right, the draw floats centred between them — the visible track around the draw is the shopping gap (best prices sum <100) */ .bestbar{position:relative;display:block;height:15px;border-radius:5px;overflow:hidden;background:var(--line2)} .bestbar .bseg{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;min-width:0;white-space:nowrap;overflow:hidden;box-shadow:inset 0 0 0 1px #000} /* per-segment ring: outlining the container would ring the empty track too */ .bestbar .bseg.dark{color:var(--ink)} .bestlabels{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums} .bestlabels .bl{white-space:nowrap;cursor:default;flex:none} .bestlabels .bl.m{text-align:center} .bestlabels .bl.mg{text-align:center;color:var(--faint);font-weight:700} .bestlabels .bl.r{text-align:right} .bestlabels .bl b{font-size:9px;font-weight:800;letter-spacing:.3px;color:var(--mut);margin-right:3px} /* placeholder row: hollow dashed track, muted label — no fabricated number */ .fcbar.hollow{background:transparent} .fcbar.hollow::after{content:"";position:absolute;inset:0;border:1px dashed var(--line);border-radius:inherit;pointer-events:none} .fcrow.empty .fclab{color:var(--faint)} .movewrap{margin-top:16px} .movewrap svg{display:block;width:100%;height:auto} .movecap{font-size:11px;color:var(--mut);margin-top:2px} .movecap.muted{color:var(--faint);font-style:italic} /* movement-plot source tag (e.g. "KALSHI") */ .movsrc{font-size:9px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);border:1px solid var(--line);border-radius:5px;padding:0 4px;vertical-align:1px} /* placeholder sparkline: hollow, honest — no fabricated line */ .sparkph{height:46px;position:relative} .sparkph::after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--line);transform:translateY(-50%)} /* tale of the tape: metric label centered, each team's bar diverging outward from it (home left, away right) on a fixed 0-100 domain. Value columns size to content so a wide value ($1415M) and a compact one (43) both fit. */ .oprow{display:grid;grid-template-columns:minmax(38px,auto) 1fr minmax(38px,auto);align-items:center;gap:7px;margin:8px 0} .opv{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)} .opv.l{text-align:right}.opv.r{text-align:left} .opbars{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;gap:6px} .opbar{height:16px;display:flex;background:var(--line2);border-radius:5px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)} .opbar.l{justify-content:flex-end} .opbar>span{height:100%;border-radius:5px;display:block} .oplab{font-size:11px;font-weight:700;color:var(--ink);text-align:center;white-space:nowrap} .oprow.empty .opv{color:var(--faint)} .oprow.empty .opbar{background:transparent;border:1px dashed var(--line);box-shadow:none} /* starting-pitcher ERA: a bare ERA diverging bar that reuses the tale-of-the-tape row. Longer bar = better (lower) ERA. Reads as one more tape row (MLB/WNBA). */ .pitchbox{margin-top:8px} /* recent-form row: last-10 W/L as color-coded squares (oldest -> newest), home left / away right, reusing the tale-of-the-tape .oprow layout. Sits under ERA. (Emitted by MLB/WNBA; NWSL overrides in its own styles.css with a draw variant.) */ .frun-cell{display:flex;align-items:center} .frun-cell.l{justify-content:flex-end} .frun-cell.r{justify-content:flex-start} .frun{display:inline-flex;gap:3px;vertical-align:middle} .fsq{width:10px;height:10px;border-radius:2px;display:inline-block} .fsq.w{background:var(--green)} .fsq.l{background:var(--red)} /* availability strip under the forecaster bars (dotted separator) */ .nwsflag{display:grid;gap:4px 18px;align-items:baseline;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:11.5px;line-height:1.5} .nwslabel{font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--faint)} .nwscell{color:var(--mut);cursor:default;white-space:nowrap} .nwscell b{color:var(--ink);font-weight:700} .nwscell em{font-style:normal;font-weight:600} .nwscell em.hot{color:var(--red)} .nwscell em.z{color:var(--faint);font-weight:600} .nwsupd{justify-self:end;font-size:10px;color:var(--faint);white-space:nowrap} /* ---- scoreboard / rating tables ---- */ .panel{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:20px 22px;margin:16px 0 0;box-shadow:0 1px 3px rgba(19,27,46,.05)} .kicker{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);margin-bottom:10px} table{border-collapse:collapse;width:100%;font-size:13px} .brd td{padding:9px 6px;border-bottom:1px solid var(--line2)} .brd tr.ours{background:#eef2f7} .brd .rk{color:var(--faint);width:26px;font-weight:800} .brd .nm{font-weight:800;white-space:nowrap} .brd .bar{width:46%} .brd .bar>div{height:12px;border-radius:6px;background:var(--accent)} .brd .val{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;width:64px} .boardgm{text-align:right;font-size:11px;color:var(--faint);margin-top:8px} /* "best games" horizontal bar plot (sharpest-forecast count) */ .winsplot{display:flex;flex-direction:column;gap:10px;margin-top:4px} .wprow{display:grid;grid-template-columns:24px 132px 1fr 34px;align-items:center;gap:12px} .wprk{color:var(--faint);font-weight:800;font-size:12.5px;text-align:right} .wpname{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wptrack{height:16px;background:rgba(0,0,0,.07);border-radius:8px;overflow:hidden} .wpbar{display:block;height:100%;border-radius:8px;min-width:2px} .wpval{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)} .wprow.ours{background:rgba(0,0,0,.06);border-radius:8px;padding:3px 6px;margin:-3px -6px} /* game balls sitting inside the dark scoreboard panel */ .scdiv{height:1px;background:rgba(252,251,246,.16);margin:22px 0 16px} .inverse .wprk{color:rgba(255,255,255,.7)} .inverse .wptrack{background:rgba(255,255,255,.13)} .inverse .wpval{color:#FCFBF6} .inverse .wprow.ours{background:rgba(252,251,246,.10)} /* full-width scorecard: chart on the left, the two tables stacked in tinted blocks on the right so the grade reads as distinct pieces for a screenshot */ .scbody{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:22px;align-items:start;margin-top:4px} .scchart .racewrap{overflow:visible} .scchart .racewrap svg{min-width:0} .sctables{display:flex;flex-direction:column;gap:14px} .sctable{border-radius:13px;padding:13px 15px 14px;border:1px solid rgba(255,255,255,.08)} .sctable.tbl-lead{background:rgba(255,255,255,.05)} .sctable.tbl-balls{background:rgba(227,181,78,.10)} .scsub{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:800;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.82);margin-bottom:10px} .scsublab{font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:none;color:rgba(255,255,255,.5)} .sctable .boardgm{margin-top:6px} .scstories{margin-top:24px} .scstories .pghead{font-size:24px;font-weight:900;letter-spacing:0;text-transform:none;color:var(--bgink);margin:0 0 16px} /* stories: scorecard recaps accumulate on the left; method primers (hero + cards) on the right */ .stgrid{display:grid;grid-template-columns:288px 1fr;gap:26px;align-items:start} .stcol .colhead{margin-bottom:11px} .stscores .railstack{display:flex;flex-direction:column;gap:10px} .stnote{margin-top:12px;font-size:11.5px;line-height:1.45;color:var(--faint)} .stmethod .postgrid.reads{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))} @media(max-width:900px){.scbody{grid-template-columns:1fr}.stgrid{grid-template-columns:1fr}} /* season completion bar (Table page): fill = games played / total */ .seasonbar{margin:2px 0 22px} .panel .seasonbar{margin:16px 2px 2px;padding-top:15px;border-top:1px solid var(--line2)} .sphead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px} .spkick{font-size:9px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--faint)} .spcap{font-size:11.5px;color:var(--mut)} .spcap b{color:var(--ink);font-weight:800} .sptrack{position:relative;height:12px;background:rgba(0,0,0,.10);border-radius:6px;overflow:hidden} .spfill{position:absolute;left:0;top:0;bottom:0;background:var(--accent2);border-radius:6px} .sptick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.5);transform:translateX(-.5px)} .sptick.lm{width:1.5px;background:rgba(255,255,255,.85);transform:translateX(-.75px)} .splabels{position:relative;height:13px;margin-top:3px} .sptlab{position:absolute;top:0;font-size:9px;color:var(--faint);transform:translateX(-50%);white-space:nowrap} .sptlab.lm{font-weight:700;color:var(--mut)} .sptlab.lm.l{transform:none} .sptlab.lm.r{transform:translateX(-100%)} /* shared caption under panels/charts */ .how{font-size:12px;color:var(--faint);font-style:italic;margin-top:10px} /* team map: crest scatter on a two-axis strength grid */ .tmapwrap{width:100%} .tmcap{margin-top:6px;text-align:center;font-size:13px;color:var(--mut);min-height:18px} .tmcap b{color:var(--ink);font-weight:800} /* bracket / race charts */ .bracketwrap{overflow-x:auto} .bracketwrap svg{display:block;width:100%;height:auto;min-width:640px} .futhead{display:flex;align-items:center;gap:12px;margin-bottom:12px} .futhead .kicker{margin-bottom:0} .racewrap{margin-top:12px;overflow-x:auto} /* calibration plots on the Performance tab (forward track record) */ .calib{margin-top:18px} .calrow{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start;margin-top:10px} .calstack{display:flex;flex-direction:column;gap:14px;flex:1 1 300px;min-width:280px} .calcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px;flex:0 1 auto} .calrow > .calcard{flex:1 1 320px;min-width:280px;display:flex;justify-content:center} .calib .sbnote{margin-top:10px;text-align:left;font-size:11.5px;color:var(--mut)} .calib .sbnote b{color:var(--ink);font-weight:700} .racewrap svg{display:block;width:100%;height:auto;min-width:560px} /* ---- shared league/standings table skeleton ---- */ .lgkey{margin-left:auto;font-size:11px;color:var(--faint)} .lgscroll{overflow-x:auto} table.lg{width:100%;border-collapse:collapse;font-size:13.5px} .lg th{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--mut);text-align:center;padding:0 6px 9px;border-bottom:2px solid var(--line)} .lg th.club{text-align:left} .lg td{padding:7.5px 6px;text-align:center;border-bottom:1px solid var(--line2);color:var(--ink)} .lg td.pos{width:26px;color:var(--faint);font-weight:700} .lg td.club{text-align:left;font-weight:700;white-space:nowrap} .lg .crest{width:20px;height:20px;object-fit:contain;margin-right:9px;vertical-align:-5px} .lg td.pts{font-weight:900} .lg td.pct{font-weight:700;color:var(--accent);width:72px} /* ---- matchweek/week day sub-nav (row 2 under the week rail) ---- */ .daychips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .dchip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1.5px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;font-size:12px;font-weight:700;cursor:pointer} .dchip .dn{font-size:10px;font-weight:800;color:var(--mut);background:var(--line2);border-radius:6px;padding:1px 6px} .dchip.played{color:var(--mut)} .dchip.on{background:var(--accent);border-color:var(--accent);color:#fff} .dchip.on .dn{background:rgba(255,255,255,.22);color:#fff} /* consolidated top toolbar: date scroller (left) + "your books" popover (right) */ .toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;margin:2px 0 14px;flex-wrap:wrap} .tbdates{min-width:0;max-width:100%} .tbdates .daychips{margin-top:8px} .bkwrap{position:relative;flex:none;margin-left:auto} .bkbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--card);border-radius:9px;padding:6px 11px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink);cursor:pointer;white-space:nowrap} .bkbtn:hover{border-color:var(--mut)} .bkbtn .bkdot{color:var(--accent);font-weight:800} .bkpop{position:absolute;right:0;top:calc(100% + 6px);z-index:40;background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:11px 12px;box-shadow:0 8px 24px rgba(20,30,50,.12);min-width:230px;max-width:320px} .bkpop[hidden]{display:none} .bkpop .bklab2{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin-bottom:8px} .bkchips{display:flex;flex-wrap:wrap;gap:6px} .bkchip{padding:4px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--mut);font:inherit;font-size:11px;font-weight:700;cursor:pointer;opacity:.5} .bkchip.on{background:var(--accent);border-color:var(--accent);color:#fff;opacity:1} .bkreset{padding:4px 6px;border:0;background:none;color:var(--accent);font:inherit;font-size:11px;font-weight:700;cursor:pointer;text-decoration:underline} .bkhint{font-size:11px;font-weight:700;color:var(--red)} .bkempty{height:15px;display:flex;align-items:center;color:var(--faint);font-size:11px;font-style:italic} /* day sub-header over each cluster of cards */ .dayhead{margin:20px 2px 2px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--bgmut)} .dayhead:first-of-type{margin-top:4px} /* tighten the first date line under the rail (match dspl's compact top) */ /* compact scoreboard teaser at the foot of the games page */ .sbteaser{display:flex;align-items:center;gap:14px;width:100%;margin:18px 0 0;padding:13px 20px;border:1.5px solid var(--line);border-radius:14px;background:var(--accent);color:#fff;font:inherit;font-size:13px;cursor:pointer;text-align:left} .sbteaser .kicker{color:rgba(255,255,255,.72);margin:0;text-transform:none;letter-spacing:0} .sbteaser .go{margin-left:auto;font-weight:800;white-space:nowrap} .sbteaser:hover .go{text-decoration:underline} .noline{height:44px;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12px;font-style:italic;border:1px dashed var(--line);border-radius:10px} /* ---- newsletter: featured card (Games) + post index (Scorecard) ---- */ .gamestop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 20px;margin:0 0 4px;flex-wrap:wrap} .gsleft{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;align-items:flex-start} .gamestop .dates{margin-top:13px;min-width:0;max-width:100%} /* featured "This Week" card: row layout with OPTIONAL thumbnail (shown only when the post has an image); text-only otherwise. Same on all three sites. */ .featpost{display:flex;flex-direction:row;align-items:stretch;gap:14px;flex:1 1 400px;min-width:300px;max-width:470px;margin-left:auto;margin-top:13px;padding:12px 14px;background:var(--card);border:1.5px solid var(--line);border-left:4px solid var(--accent2);border-radius:12px;text-decoration:none;box-shadow:0 1px 3px rgba(19,27,46,.05);transition:box-shadow .12s,transform .12s} .featpost:hover{box-shadow:0 3px 12px rgba(19,27,46,.12);transform:translateY(-1px)} .fpthumb{flex:none;width:120px;border-radius:9px;overflow:hidden;background:var(--line2)} .fpthumb img{width:100%;height:100%;object-fit:cover;display:block} .fpbody{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .fptag{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2)} .fptitle{font-size:16px;font-weight:900;color:var(--ink);line-height:1.15} .fpdek{font-size:12px;line-height:1.4;color:var(--mut)} .fpgo{margin-top:2px;font-size:11.5px;font-weight:800;color:var(--accent2);display:flex;align-items:center;gap:8px} .fpmin{color:var(--faint);font-weight:700} /* scorecard: scoring panels (left) + article sidebar (right); stack on narrow */ .sccols{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start} .sccols .scmain>.panel:first-child{margin-top:16px} @media(max-width:960px){.sccols{grid-template-columns:1fr}} .postgridwrap{margin-top:16px} .pghead{font-size:13px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--bgink);margin:0 2px 10px} .postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .scside .postgrid{grid-template-columns:1fr} /* single column inside the sidebar */ .postcard{display:flex;flex-direction:column;gap:5px;padding:14px 14px 16px;background:var(--card);border:1.5px solid var(--line);border-radius:14px;text-decoration:none;box-shadow:0 1px 3px rgba(19,27,46,.05);transition:box-shadow .12s,transform .12s} .postcard:hover{box-shadow:0 3px 12px rgba(19,27,46,.12);transform:translateY(-1px)} .pctag{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2)} .pctitle{font-size:15.5px;font-weight:900;color:var(--ink);line-height:1.18} .pcdek{font-size:12px;line-height:1.45;color:var(--mut);flex:1} .pcmeta{margin-top:4px;font-size:11px;font-weight:700;color:var(--faint)} /* ---- monetization surfaces: lite scorecard summary + Reads storefront ---- */ /* subscribe call-to-action block (accent card, light text) */ .subcta{display:flex;align-items:center;gap:16px;justify-content:space-between;margin:18px 0 0;padding:16px 22px;background:var(--accent);color:#fff;border-radius:16px;text-decoration:none;box-shadow:0 1px 3px rgba(19,27,46,.05);transition:box-shadow .12s,transform .12s} .subcta:hover{box-shadow:0 3px 12px rgba(19,27,46,.13);transform:translateY(-1px)} .subcta .sc-body{display:flex;flex-direction:column;gap:2px;min-width:0} .subcta .sc-k{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.72)} .subcta .sc-t{font-size:13.5px;font-weight:600;line-height:1.35} .subcta .sc-go{flex:none;font-size:13px;font-weight:800;white-space:nowrap} /* lite scorecard: headline sentence + a compact leaderboard */ .sumhead{font-size:15px;line-height:1.5;color:var(--ink);margin:2px 2px 14px} .sumhead b{font-weight:900} .sumboard{display:flex;flex-direction:column;gap:2px} .sumrow{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;font-size:14px} .sumrow+.sumrow{border-top:1px solid var(--line2)} .sumrow .sr-rk{color:var(--faint);font-weight:800;text-align:right} .sumrow .sr-nm{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sumrow .sr-v{font-weight:800;font-variant-numeric:tabular-nums} .sumrow.ours{background:var(--line2)} .sumrow.ours .sr-v{color:var(--accent2)} /* Reads storefront: postcards with a generated cover + free/subscribers badge */ .postgrid.reads{margin-top:16px} .pcaccess{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:2px 8px;white-space:nowrap} .pcaccess.free{color:var(--mut);background:var(--line2)} .pcaccess.paid{color:#fff;background:var(--accent2)} /* cover art band — a real image when set, otherwise a series-keyed gradient carrying the three-segment forecast-bar motif */ .postcard.read{padding:0;overflow:hidden} .postcard.read .pcart{position:relative;display:block;height:114px;background-size:cover;background-position:center;border-bottom:3px solid var(--accent2)} .postcard.read .pcart.gen{background:linear-gradient(135deg,var(--g1),var(--g2))} /* real cover images are often light — a top scrim keeps the overlaid label + badge legible on any image */ .postcard.read .pcart:not(.gen)::before{content:"";position:absolute;left:0;right:0;top:0;height:58px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none} .postcard.read .pcbar{position:absolute;left:14px;right:14px;bottom:15px;display:flex;height:9px;border-radius:5px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.28)} .postcard.read .pcbar i{display:block;height:100%} .postcard.read .pcbar i:nth-child(1){background:rgba(255,255,255,.92)} .postcard.read .pcbar i:nth-child(2){background:rgba(255,255,255,.5)} .postcard.read .pcbar i:nth-child(3){background:rgba(255,255,255,.28)} .postcard.read .pctag.ov{position:absolute;top:11px;left:13px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)} .postcard.read .pcaccess.ov{position:absolute;top:9px;right:11px;box-shadow:0 1px 3px rgba(0,0,0,.2)} .postcard.read .pcaccess.ov.free{color:#fff;background:rgba(0,0,0,.34)} .postcard.read .pcaccess.ov.paid{color:var(--accent2);background:#fff} .postcard.read .pcbody{display:flex;flex-direction:column;gap:5px;padding:12px 14px 15px} .postcard.read .pcdek{flex:1} /* hero: the newest feature spans the full grid width — one big cover banner with the headline stacked underneath (the brand stripe stays on the bottom edge, so it reads as a single hero, not two side-by-side tiles) */ .postcard.read.hero{grid-column:1 / -1} .postcard.read.hero .pcart{height:300px} .postcard.read.hero .pcbody{padding:18px 24px 20px;gap:7px} .postcard.read.hero .pctitle{font-size:26px;line-height:1.13} .postcard.read.hero .pcdek{flex:none;font-size:14.5px;line-height:1.5;max-width:74ch} .postcard.read.hero .pcmeta{font-size:12px} /* Reads layout: big feature grid on the left, compact previews/scorecards rail on the right */ .readslayout{display:grid;grid-template-columns:1fr 292px;gap:26px;align-items:start;margin-top:16px} .readsmain .postgrid.reads{margin-top:0;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))} .colhead{font-size:12px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--faint);margin-bottom:11px} .readsrail .railstack{display:flex;flex-direction:column;gap:10px} .railcard{display:flex;gap:11px;align-items:center;padding:9px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;text-decoration:none;box-shadow:0 1px 3px rgba(19,27,46,.05);transition:box-shadow .12s,transform .12s} .railcard:hover{box-shadow:0 3px 12px rgba(19,27,46,.12);transform:translateY(-1px)} .railcard .rcart{width:60px;height:48px;flex:none;border-radius:8px;background-size:cover;background-position:center;border:1px solid var(--line2)} .railcard .rcbody{display:flex;flex-direction:column;gap:2px;min-width:0} .railcard .railtag{font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent2)} .railcard .rctitle{font-size:13px;font-weight:800;color:var(--ink);line-height:1.2} .railcard .rcmeta{font-size:10.5px;font-weight:700;color:var(--faint)} /* the CTA stacks vertically in the narrow rail (the default is a wide horizontal split) */ .readsrail .subcta{margin-top:14px;flex-direction:column;align-items:flex-start;gap:9px;padding:15px 17px} .readsrail .subcta .sc-go{white-space:normal} /* =================================================================== Responsive — shared breakpoints =================================================================== */ @media(max-width:820px){.postgrid{grid-template-columns:1fr}.readslayout{grid-template-columns:1fr} .postcard.read.hero .pcart{height:170px} .postcard.read.hero .pctitle{font-size:21px}} @media(max-width:720px){ .cardgrid{grid-template-columns:1fr} /* stack market bar, on-paper, movement */ /* stack the header: wordmark on top, tabs on their own row below */ header .bar{flex-direction:column;align-items:flex-start;gap:10px} nav{margin-left:0;gap:14px 18px;flex-wrap:wrap} .newslink{padding-left:0} .newslink::before{display:none} /* stack the match header vertically: home top-left, kickoff centered, away bottom-right */ .mhead{display:grid;grid-template-columns:1fr;grid-template-areas:"home" "mid" "away";row-gap:7px} .mhead .side{grid-area:home;min-width:0} .mhead .side.right{grid-area:away;justify-content:flex-end} .mhead .mid{grid-area:mid;padding:0} .mhead .flag{width:30px;height:21px} .tn{font-size:16px} .side{gap:9px} /* rating tables: give the name room, keep the games count on one line */ .brd td{padding:8px 4px} .brd .bar{width:26%} .brd .nm{font-size:12.5px;line-height:1.2} .brd .val{width:52px} /* roomier tap targets (~44px) for interactive controls */ nav button{min-height:40px;display:inline-flex;align-items:center} .dates .pill{min-height:40px;justify-content:center;padding:6px 13px} .seg button{min-height:40px;display:inline-flex;align-items:center;padding:8px 16px} .sbgrid{grid-template-columns:1fr} .lg{font-size:12px} .lg td:nth-child(4),.lg td:nth-child(5),.lg td:nth-child(6), .lg th:nth-child(4),.lg th:nth-child(5),.lg th:nth-child(6){display:none} /* W/D/L collapse */ .proto{display:none} } @media(max-width:640px){.featpost{max-width:none;margin-left:0}} /* ---- Data for Thought global header (unification phase 2). Global row ~70px on brand paper; the competition row below is compact contextual navigation: subtle border, plum active tab, sticky. ---- */ .dft-gh{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:14px max(20px,calc((100% - 1060px)/2));background:#E3E8D6;border-bottom:4px solid #5B4B8A;position:relative} .dft-gh-brand img{display:block;height:34px;width:auto} .dft-gh-nav{display:flex;align-items:center;gap:16px;font-size:13.5px;font-weight:600} .dft-gh-nav a{color:#56605B;text-decoration:none;white-space:nowrap} .dft-gh-nav a:hover{color:#1B2420} .dft-gh-nav a.on{color:#1B2420;font-weight:800;border-bottom:2px solid #5B4B8A;padding-bottom:3px} .dft-gh-sep{width:1px;height:14px;background:#B9BFB4} .dft-gh-nav .dft-gh-news{color:#10403C;font-weight:700} .dft-gh-nav .dft-gh-news:hover{color:#116058} .dft-gh-menu{display:none;font:700 13px/1 Inter,system-ui,sans-serif;color:#10403C; background:none;border:1px solid #B9BFB4;border-radius:8px;padding:10px 14px;cursor:pointer} /* competition header: compact, sticky, subtle rule; plum active tab */ header{border-bottom:none;background:var(--bg)} header .bar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px;padding:18px max(20px,calc((100% - 1060px)/2)) 16px} .comph{flex:none} .comph h1{font-family:'Newsreader','Iowan Old Style',Georgia,serif;font-weight:600;font-size:clamp(36px,5vw,48px);line-height:1.08;letter-spacing:-.01em;margin:0;color:var(--bgink);white-space:nowrap} .crumb{font-size:14px;font-weight:800;color:var(--bgink);letter-spacing:-.1px;white-space:nowrap} .crumb a{color:var(--bgmut);text-decoration:none;font-weight:700} .crumb a:hover{color:var(--bgink)} .crumb .csep{margin:0 6px;color:var(--bgmut);font-weight:400;opacity:.6} .crumb-l{display:inline;font:inherit;letter-spacing:inherit;color:inherit;margin:0} header nav{flex:1 1 170px;display:flex;justify-content:center;gap:8px;margin-left:0} header nav button{font:600 12.5px/1 Inter,system-ui,sans-serif;padding:8px 15px;border-radius:999px; border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer;min-height:0} header nav button.on{background:var(--accent2,var(--accent));border-color:var(--accent2,var(--accent));color:#fff} header nav button:not(.on):hover{color:var(--ink)} .ghsep{color:#B9BFB4;font-weight:400;margin:0 2px} /* in-page sub-views inside Forecasts */ .subnav{display:flex;gap:8px;margin:2px 0 16px;flex-wrap:wrap} .subnav button{font:600 12.5px/1 Inter,system-ui,sans-serif;padding:8px 15px;border-radius:999px; border:1px solid var(--line);background:var(--card);color:var(--mut);cursor:pointer} .subnav button.on{background:var(--accent2,var(--accent));border-color:var(--accent2,var(--accent));color:#fff} .subnav button:not(.on):hover{color:var(--ink)} @media (max-width:640px){ .dft-gh{padding:13px 14px} .dft-gh-brand img{height:24px} .dft-gh-menu{display:inline-block} .dft-gh-nav{display:none} .dft-gh.open .dft-gh-nav{display:flex;position:absolute;right:10px;top:58px;z-index:60; flex-direction:column;align-items:stretch;gap:2px;background:#fff;border:1px solid #D6DAD1; border-radius:12px;padding:10px;min-width:170px;box-shadow:0 6px 22px rgba(27,36,32,.14)} .dft-gh.open .dft-gh-nav a{padding:11px 12px;border-radius:8px} .dft-gh.open .dft-gh-nav a.on{border-bottom:none;background:#F1EEF7} .dft-gh-sep{display:none} /* competition title stays visible; tabs hold one scrollable row */ header .bar{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:8px 14px} header nav{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:14px; -webkit-overflow-scrolling:touch;scrollbar-width:none} header nav::-webkit-scrollbar{display:none} } /* ---- Performance page: standings bars + calibration cards + preseason ghost ---- */ .winsplot.stplot .wprow{grid-template-columns:24px 132px 1fr 44px} .panel.calib{margin-top:18px} .calttl{font-size:12.5px;font-weight:800;color:var(--ink);letter-spacing:.2px} .calsub{font-size:10.5px;color:var(--mut);margin:2px 0 8px} .calrow > .calcard{display:block} .calstack .calcard{display:block} .scghost{padding:12px 6px 4px} .ghostnote{margin-top:10px;font-size:12.5px;color:#c6bad9;text-align:center} /* ---- Best Price vig sub-label (3-way) + standings ghost rows ---- */ .fcrow .vigsub{display:block;font-style:normal;font-size:8.5px;font-weight:700;color:var(--mut);margin-top:2px} .wprow.ghost{opacity:.45} .wprow.ghost .wptrack{border-bottom:1px dashed rgba(255,255,255,.35)} /* ---- merged Performance leaderboard (Brier + game balls in one list) ---- */ .winsplot.merged .wprow{grid-template-columns:20px 98px 1fr 44px 34px} .wprow.whead .wptrack{visibility:hidden} .wprow .wpball{font-size:11px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums;opacity:.85;color:var(--ink)} .inverse .wpball{color:#FCFBF6} .inverse .wprow.whead .wpval,.inverse .wprow.whead .wpball{color:#FCFBF6} .wprow.whead{margin-bottom:-4px} .wprow.whead .wpval,.wprow.whead .wpball{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.6} .sctables.one{display:block} /* ---- calibration ghost cards (pre-grading placeholder) ---- */ .calghost{height:120px;border:1px dashed var(--line);border-radius:8px;background:repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(0,0,0,.02) 8px,rgba(0,0,0,.02) 16px)} /* ---- a11y: hidden h1 + skip link · chart-wait note ---- */ .sr-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:8px 14px;border-radius:0 0 8px 0;font-weight:700;z-index:99} .skip-link:focus{left:0} .chartwait{padding:34px 10px;text-align:center;font-size:13px;color:#c6bad9} /* ---- biggest-disagreements strip + compact slate mode ---- */ .edgestrip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px} .eslab{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)} .eschip{font-size:12px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--ink)} .eschip b{margin-right:6px} .eschip:hover{border-color:var(--accent)} .cmpbtn{display:none;margin:0 0 10px;font-size:12.5px;font-weight:700;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px;cursor:pointer} @media(max-width:820px){.cmpbtn{display:inline-block}} .compact .card .rail{display:none} .compact .card .fcrow:not(.mkt):not(.bestrow){display:none} .compact .card .nwsflag{display:none} .compact .card .cardgrid{grid-template-columns:1fr} /* ---- Today's Brief — unfurled story bullets between the rail and the slate. Editorial, not system-notice: the card sits on the page's own surface with a slate accent rule down the left edge (the cool gray tint clashed with the warm cream ground); the mini-scorecard hangs on the right. */ .daybrief{display:flex;align-items:stretch;gap:14px;margin:2px 0 12px; background:rgba(192,138,18,.13);border:1px solid rgba(192,138,18,.42); border-left:3px solid #51749B;border-radius:12px;padding:12px 16px 12px 15px} .daybrief .dbmain{flex:1 1 auto;min-width:0} .daybrief .dbkick{display:block;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#1C3A5E;margin-bottom:6px} .daybrief .dblist{margin:0;padding-left:17px} .daybrief .dblist li{font-size:13.5px;line-height:1.5;color:var(--text-primary);margin:2px 0} .daybrief .dblist li::marker{color:#51749B} .daybrief .dblist li.dbwhen{list-style:none;margin:5px 0 2px -17px;font-size:9.5px;font-weight:800; letter-spacing:.07em;text-transform:uppercase;color:#1C3A5E} .daybrief .dblist li.dbwhen:first-child{margin-top:0} .daybrief .dblist a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px} .daybrief .dblist a:hover{color:#1C3A5E} /* right side: yesterday's Brier + season game balls, a mini-scorecard that clicks through to the full one */ .daybrief .dbside{flex:none;width:258px;display:flex;flex-direction:column;gap:1px; padding:8px 11px 7px;border:1px solid #4A6B8F;border-radius:9px; background:linear-gradient(180deg,#51749B,#466683);cursor:pointer;text-align:left;font-family:inherit} .daybrief .dbthead,.daybrief .dbtrow{display:grid;grid-template-columns:1fr 54px 46px;gap:7px;align-items:baseline} .daybrief .dbthead{margin-bottom:3px} .daybrief .dbthead b{font-family:var(--font-editorial,Georgia,serif);font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:#fff} .daybrief .dbthead i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.75);text-align:right} .daybrief .dbtrow b{font-size:11.5px;font-weight:600;color:#F2F6FA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .daybrief .dbtrow i{font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;color:#F2F6FA;text-align:right} .daybrief .dbtrow.best b{font-weight:800;color:#fff} .daybrief .dbtrow.dim b,.daybrief .dbtrow.dim i{color:rgba(255,255,255,.62)} .daybrief .dbtgo{margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff;opacity:.85;text-align:center} .daybrief .dbside:hover{background:linear-gradient(180deg,#4C6D91,#405C77)} .daybrief .dbside:hover .dbtgo{opacity:1;text-decoration:underline} @media(max-width:600px){ .daybrief{flex-direction:column;gap:10px} .daybrief .dbside{width:100%} } /* full brief card on the Analysis page */ .briefread{background:var(--surface,#FBFBFC);border:1px solid var(--border-subtle,#E3E7D8);border-radius:12px; padding:16px 18px;margin:0 0 18px} .briefread .brhead{display:flex;align-items:baseline;gap:10px;margin-bottom:8px} .briefread .brdate{font-size:12.5px;font-weight:700;color:var(--text-secondary)} .briefread ul{margin:0;padding-left:19px} .briefread li{font-size:14px;line-height:1.55;color:var(--text-primary);margin:3px 0} .briefread .brfeat{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#1C3A5E;text-decoration:none} .briefread .brfeat:hover{text-decoration:underline} /* pundit-name small caps + tiny white glyphs (used on the slate-blue table) */ .daybrief .pn{text-transform:uppercase;font-size:.86em;letter-spacing:.05em;font-weight:700} .daybrief .dbtrow b{text-transform:uppercase;font-size:10.3px;letter-spacing:.05em} .daybrief .dbtrow .pico{display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2.5px;background-size:contain;background-repeat:no-repeat;background-position:center} .daybrief .pico-bandwagon{background-image:url("data:image/svg+xml;utf8,")} .daybrief .pico-cash{background-image:url("data:image/svg+xml;utf8,")} .daybrief .pico-sharp{background-image:url("data:image/svg+xml;utf8,")} .daybrief .pico-streaker{background-image:url("data:image/svg+xml;utf8,")} .daybrief .pico-matchup{background-image:url("data:image/svg+xml;utf8,")} .daybrief .pico-buzz{background-image:url("data:image/svg+xml;utf8,")} .daybrief .pico-pro{background-image:url("data:image/svg+xml;utf8,")} .daybrief .pico-consensus{background-image:url("data:image/svg+xml;utf8,")} /* brief table disclosure: always open on desktop (summary hidden); on mobile a tap target so the table doesn't push the slate below the fold */ .daybrief .dbfold{flex:none;min-width:0} .daybrief .dbsum{display:none;cursor:pointer;list-style:none;font-size:11px;font-weight:800; letter-spacing:.05em;text-transform:uppercase;color:#1C3A5E;padding:7px 10px; border:1px solid rgba(192,138,18,.42);border-radius:8px;background:var(--card,#FBFBFC)} .daybrief .dbsum::-webkit-details-marker{display:none} .daybrief .dbsum::after{content:" \25BE";opacity:.6} .daybrief .dbfold[open] .dbsum::after{content:" \25B4"} @media(max-width:600px){ .daybrief .dbsum{display:block} .daybrief .dbfold[open] .dbsum{margin-bottom:8px} } .daybrief .dbtnote{display:block;margin-top:6px;font-size:10px;line-height:1.45;color:var(--text-secondary,#6b7583);max-width:258px} /* tiny percent label for narrow bar segments (was blank under 14%) */ .fcbar .pctsm,.mbar .pctsm{font-style:normal;font-size:9px;opacity:.85} /* Sliver labels. Under ~6% a segment is ~11px wide and no number fits, so the value rides inside the WIDE neighbour hard against the shared edge, carrying the sliver's own fill so it still reads as that side's number. Before this it was dropped silently and a 3% forecast showed as an empty orange hairline. */ .fcbar>span,.mbar>div{position:relative} .pctghost{position:absolute;top:50%;transform:translateY(-50%);z-index:1; font-style:normal;font-size:8.5px;font-weight:800;line-height:1; padding:2px 3px;border-radius:3px;white-space:nowrap;letter-spacing:-.2px} .pctghost.l{left:2px} .pctghost.r{right:2px} .mbar .pctghost{font-size:10px;padding:3px 5px;border-radius:4px} /* game flags: explained lines at the bottom of the card's right rail — pennants carry the flagged team's color, banners (no side) run grey */ .cflags{display:flex;flex-direction:column;gap:5px;margin-top:14px} .gflag{display:flex;align-items:flex-start;gap:7px;font-size:11.5px;line-height:1.45;color:var(--mut,#4a5462)} .gflag svg{width:16px;height:16px;flex:none;margin-top:-1px} .gflag b{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink,#17191c);margin-right:1px} /* Performance standings legend + waiting group + Pro emphasis */ .sblegend{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:8px;font-size:10.5px;color:rgba(255,255,255,.72)} .sblegend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px} .sblegend .sw.pro{background:#FCFBF6} .sblegend .sw.mkt{background:#A8C3E2} .sblegend .sw.rest{background:#8f8f98} .winsplot .wpsep{height:1px;background:rgba(255,255,255,.22);margin:7px 0 4px} .winsplot .wprow.ghostlab{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);display:block} .winsplot .wprow.ghost .wptrack,.winsplot .wprow.ghost .wpbar{visibility:hidden} /* Pro reads as the house model wherever it sits beside personas */ .fcrow.ours .fclab{font-weight:800;color:#1C3A5E} .fcrow.ours .fcbar{box-shadow:0 0 0 1.5px rgba(36,70,107,.55)} .daybrief .dbtrow.pro b{color:#fff;font-weight:800} /* tale-of-the-tape caption */ .onpaper .opcap{font-size:9px;color:var(--faint,#6b7583);text-align:center;margin-top:4px;letter-spacing:.2px} /* starter line under the team name: name + league ERA percentile */ .tnwrap .tpitch{font-size:10.5px;font-weight:600;color:var(--mut,#4a5462);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px} .tnwrap .tpitch b{font-weight:800;color:var(--ink,#17191c)}