/* sportsanalysis.info — one stylesheet on top of Tabler. 1. Design tokens 2. Base 3. Top bar, league strip, More sheet, bottom bar 4. Segmented controls and week strip 5. Game tiles (tileParts) 6. Shared widgets (line provenance, game actions, collapsibles, tooltips, newsletter, back to top, footer) */ /* Inter (variable, Latin), self-hosted: the same numerals and widths on every device. The system stack stays as the fallback, so text shows at once and swaps when the font arrives. */ /* Until Inter arrives the text is set in Arial scaled to Inter's metrics, so the swap does not reflow the page. */ @font-face{font-family:"Inter Fallback";src:local("Arial");ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.4%} @font-face{font-family:"Inter Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(/fonts/inter-latin-wght-normal.woff2?v=1) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} :root{--tblr-font-sans-serif:"Inter Variable","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;--tblr-body-font-family:var(--tblr-font-sans-serif)} /* ---- 1. Design tokens ----------------------------------------------------------------------- */ :root { /* Type scale: six sizes only. Numbers that matter use --sa-fs-lg / --sa-fs-xl. */ --sa-fs-2xs: .75rem; /* 12px tiny uppercase labels (the floor on phones) */ --sa-fs-xs: .75rem; /* 12px captions, meta */ --sa-fs-sm: .875rem; /* 14px secondary text, table cells */ --sa-fs-md: 1rem; /* 16px body */ --sa-fs-lg: 1.25rem; /* 20px key numbers */ --sa-fs-xl: 1.75rem; /* 28px hero numbers */ --sa-lh-tight: 1.2; --sa-track-caps: .06em; /* Radii: three sizes plus pill. */ --sa-r-sm: 6px; --sa-r-md: 10px; --sa-r-lg: 14px; --sa-r-pill: 999px; /* Spacing. */ --sa-sp-1: 4px; --sa-sp-2: 8px; --sa-sp-3: 12px; --sa-sp-4: 16px; --sa-sp-5: 24px; /* Elevation. */ --sa-sh-1: 0 1px 3px rgba(15, 23, 42, .06); --sa-sh-2: 0 8px 24px rgba(15, 23, 42, .14); /* Brand. */ --sa-brand: #2f6fd6; --sa-brand-2: #5b9cf0; --sa-navy: #0f1f3d; --sa-bar-bg: #16213b; /* top bar, both themes */ --sa-bar-fg: rgba(255, 255, 255, .78); --sa-bar-fg-strong: #fff; --sa-bar-line: rgba(255, 255, 255, .1); /* Semantic colours: one meaning each, site-wide. */ --sa-ats: var(--tblr-green); /* against the spread */ --sa-over: var(--tblr-azure); /* over */ --sa-under: var(--tblr-purple); /* under */ --sa-model: var(--tblr-indigo); /* model line, projection, edge */ --sa-good: var(--tblr-green); /* positive, proven */ --sa-watch: var(--tblr-orange); /* worth a look: wind, short rest, line moved */ --sa-alert: var(--tblr-red); /* live, injury, backup QB */ --sa-win: #1b7a3e; /* solid W chip: white text 5.4:1 */ --sa-loss: #c62f2f; /* solid L chip: white text 5.5:1 */ --sa-push: #5f6672; /* solid P chip: white text 5.9:1 */ --sa-over-fill: #0a6a7c; /* solid O chip (the Over teal, so it parts from the purple U): white text 6.2:1 */ --sa-under-fill: #7340b8; /* solid U chip: white text 6.7:1 */ /* Secondary text: Tabler's grey is 4.2:1 on the page canvas; this passes 4.5:1 on canvas, cards and light tints. */ --tblr-secondary: #5f6672; --sa-muted: var(--tblr-secondary); /* no data yet, neutral */ --sa-link: #0a58ca; /* blue as text: 6.5:1 on white, 5.4:1 on tints (the brand blue is for fills) */ --sa-tint: 5%; /* strength of colour-mixed backgrounds (calm: a hint of colour, the label carries the meaning) */ --sa-page-bg: #eef1f6; /* canvas: cool grey so white cards separate */ --sa-card-bg: #ffffff; --sa-card-line: #dde3ec; --sa-ink: #0f172a; /* market numbers and scores */ --sa-bnav-h: 58px; /* phone bottom bar */ --sa-topbar-h: 56px; --sa-stick-top: var(--sa-topbar-h); /* offset for anything else that sticks to the top */ } [data-bs-theme=dark] { --tblr-secondary: #a6adb7; --sa-page-bg: #0b1220; --sa-card-bg: #151d2e; --sa-card-line: rgba(255, 255, 255, .09); --sa-ink: #f1f5f9; --sa-sh-1: 0 1px 3px rgba(0, 0, 0, .35); --sa-sh-2: 0 8px 24px rgba(0, 0, 0, .5); --sa-bar-bg: #0f172a; --sa-tint: 9%; --sa-link: #6ea8fe; /* Semantic colours lifted for small text on dark cards (about 4.5:1). */ --sa-model: color-mix(in oklch, var(--tblr-indigo) 62%, #fff); --sa-under: color-mix(in oklch, var(--tblr-purple) 62%, #fff); --sa-over: color-mix(in oklch, var(--tblr-azure) 70%, #fff); --sa-alert: color-mix(in oklch, var(--tblr-red) 72%, #fff); --sa-watch: color-mix(in oklch, var(--tblr-orange) 75%, #fff); } @media (hover:none){.wk-tile:hover,.sp-tile:hover,.ab-tile:hover,.gn-card:hover{transform:none}} /* ---- 2. Base --------------------------------------------------------------------------------- */ body { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; --tblr-body-bg: var(--sa-page-bg); --tblr-bg-surface: var(--sa-card-bg); --tblr-border-color: var(--sa-card-line); background: var(--sa-page-bg); } .card { background: var(--sa-card-bg); border-color: var(--sa-card-line); } /* Numbers: the body font with even-width digits (columns still line up) instead of Tabler's monospace. */ .font-monospace { font-family: inherit !important; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .lb-val { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-variant-numeric: tabular-nums; } .lb-val .badge { min-width: 3.1rem; font-weight: 700; } .sa-caps { font-size: var(--sa-fs-2xs); font-weight: 700; letter-spacing: var(--sa-track-caps); text-transform: uppercase; color: var(--sa-muted); } .card { border-radius: var(--sa-r-md); } .badge { border-radius: var(--sa-r-sm); font-size: var(--sa-fs-2xs); } /* 12px floor: Tabler's badge is 10px */ .badge.rounded-pill, .badge-pill { border-radius: var(--sa-r-pill); } .page-header .page-title { font-size: var(--sa-fs-lg); } @media (min-width: 768px) { .page-header .page-title { font-size: 1.5rem; } } /* Phones: the top bar and league strip already say where you are; the breadcrumb only costs a line. */ @media (max-width: 767.98px) { .page-header .breadcrumb { display: none; } .page-header { padding-top: 0; } .page-header .page-pretitle { margin-top: .25rem; } } /* Public read-only site: hide controls that write data or trigger refreshes. */ .bt-public .bt-private { display: none !important; } /* Sticky table heads and bars sit under the top bar, not behind it. */ .sticky-top { top: var(--sa-stick-top); } @media (min-width: 992px) { .sticky-lg-top { top: var(--sa-stick-top); z-index: 5; } } /* Inside a scroll box (.table-responsive) the head sticks to the box's top; the top-bar offset would push it over the first rows. */ .table-responsive > table > thead.sticky-top { top: 0; } /* Phone: room for the bottom bar. */ @media (max-width: 991.98px) { body { padding-bottom: calc(var(--sa-bnav-h) + 16px + env(safe-area-inset-bottom)); } } /* the footer's last line clears the tab bar */ @media print { .bt-topbar, .bt-bnav, .bt-sheet, .bt-sheet-bd, .bt-top { display: none !important; } } /* ---- 3. Navigation --------------------------------------------------------------------------- */ /* Top bar: brand, league toggle, primary links, More. Dark in both themes. */ .bt-topbar { position: sticky; top: 0; z-index: 1030; min-height: var(--sa-topbar-h); background: var(--sa-bar-bg); color: var(--sa-bar-fg); border-bottom: 1px solid var(--sa-bar-line); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); padding: 0; } .bt-topbar > .container-xl { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sa-sp-2); min-height: var(--sa-topbar-h); padding-top: 0; padding-bottom: 0; } .bt-brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--sa-bar-fg-strong); text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: -.015em; flex-shrink: 0; margin-right: var(--sa-sp-1); } .bt-brand:hover { color: #fff; text-decoration: none; } .bt-brand svg { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); flex-shrink: 0; } .bt-brand b { color: var(--sa-brand-2); font-weight: inherit; } @media (max-width: 359.98px) { .bt-brand-text { display: none; } } /* NFL | NCAAF toggle. */ .bt-lg { display: inline-flex; padding: 3px; border-radius: var(--sa-r-pill); background: rgba(255, 255, 255, .08); border: 1px solid var(--sa-bar-line); flex-shrink: 0; } .bt-lg a { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 .7rem; border-radius: var(--sa-r-pill); color: var(--sa-bar-fg); font-size: var(--sa-fs-sm); font-weight: 700; text-decoration: none; transition: background-color .15s, color .15s; } .bt-lg a:hover { color: #fff; text-decoration: none; } .bt-lg a.active { background: var(--sa-brand); color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); } .bt-lg a .icon { width: 18px; height: 18px; margin-right: .3rem; } /* Icon buttons and text links in the bar. */ .bt-tb-links { display: none; align-items: center; gap: 2px; margin-left: var(--sa-sp-3); } .bt-tb-right { display: flex; align-items: center; gap: var(--sa-sp-1); margin-left: auto; } .bt-tb-a { display: inline-flex; align-items: center; gap: .35rem; height: 36px; padding: 0 .6rem; border-radius: var(--sa-r-md); color: var(--sa-bar-fg); font-size: var(--sa-fs-sm); font-weight: 600; text-decoration: none; position: relative; border: 0; background: none; cursor: pointer; font-family: inherit; } .bt-tb-a:hover, .bt-tb-a:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); text-decoration: none; outline: none; } .bt-tb-a:focus-visible { box-shadow: 0 0 0 2px var(--sa-brand-2); } .bt-tb-a.active { color: #fff; background: var(--sa-brand); } .bt-tb-a .icon { width: 22px; height: 22px; } .bt-tb-a.bt-ico { width: 40px; padding: 0; justify-content: center; } .bt-tb-a.bt-ico .bt-tb-label { display: none; } .bt-tb-n { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--sa-brand); color: #fff; font-size:var(--sa-fs-2xs); font-weight: 700; line-height: 16px; text-align: center; } @media (min-width: 992px) { .bt-tb-links { display: flex; } } @media (max-width: 991.98px) { .bt-tb-a .bt-tb-label { display: none; } .bt-tb-a { width: 40px; padding: 0; justify-content: center; } } /* Account in the top bar: a "Sign in" pill when signed out (every width), the visitor's initial when signed in */ .bt-tb-a.bt-acct, .bt-tb-a.bt-acct.bt-tb-a { width: auto; height: 34px; padding: 0 .85rem 0 .7rem; border-radius: var(--sa-r-pill); background: #fff; color: var(--sa-bar-bg, #0f172a); font-weight: 700; white-space: nowrap; } .bt-tb-a.bt-acct:hover, .bt-tb-a.bt-acct:focus-visible { background: #e8f0ff; color: var(--sa-bar-bg, #0f172a); } .bt-tb-a.bt-acct .icon { width: 18px; height: 18px; } .bt-tb-a.bt-acct.on { width: 40px; height: 36px; padding: 0; background: none; color: var(--sa-bar-fg); } .bt-tb-a.bt-acct.on .icon, .bt-tb-a.bt-acct.on .bt-acct-l { display: none; } .bt-acct-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sa-brand); color: #fff; font-size: var(--sa-fs-sm); font-weight: 800; } .bt-tb-a.bt-acct.on:hover .bt-acct-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); } @media (max-width: 399.98px) { .bt-tb-a.bt-acct .bt-acct-l { display: none; } .bt-tb-a.bt-acct { padding: 0 .6rem; } } /* Phone: the signed-out account button is a quiet outline, not a bright white pill (the "Sign in" pill stays on wide screens). */ @media (max-width: 767.98px) { .bt-tb-a.bt-acct:not(.on) { background: transparent; color: var(--sa-bar-fg-strong); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34); } .bt-tb-a.bt-acct:not(.on):hover, .bt-tb-a.bt-acct:not(.on):focus-visible { background: rgba(255, 255, 255, .1); color: var(--sa-bar-fg-strong); } } /* More sheet: account card at the top */ .bt-sheet-acct { display: flex; align-items: center; gap: var(--sa-sp-3); padding: var(--sa-sp-3); margin-top: var(--sa-sp-2); border-radius: var(--sa-r-md); background: color-mix(in srgb, var(--tblr-primary) 8%, var(--sa-card-bg)); border: 1px solid color-mix(in srgb, var(--tblr-primary) 25%, var(--sa-card-line)); color: inherit; text-decoration: none; } a.bt-sheet-acct:hover { text-decoration: none; color: inherit; background: color-mix(in srgb, var(--tblr-primary) 12%, var(--sa-card-bg)); } .bt-sheet-acct .bt-acct-av { width: 40px; height: 40px; font-size: var(--sa-fs-md); flex: none; } .bt-sheet-acct-btns { display: flex; flex-direction: column; gap: .35rem; flex: none; } .bt-sheet-acct-go { margin-left: auto; font-size: 1.4rem; color: var(--sa-muted); flex: none; }.bt-sheet-acct.on > .min-w-0 { flex: 1; } @media (max-width: 575.98px) { .bt-sheet-acct:not(.on) { flex-wrap: wrap; } .bt-sheet-acct-btns { flex-direction: row; width: 100%; } .bt-sheet-acct-btns .btn { flex: 1; } } /* League strip under the page header: five chips plus a trailing More. */ .bt-sport-tabs { display: flex; flex-wrap: nowrap; gap: var(--sa-sp-1); overflow-x: auto; max-width: 100%; margin: 0 calc(-1 * var(--sa-sp-4)) var(--sa-sp-3); padding: 0 var(--sa-sp-4) 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .bt-sport-tabs::-webkit-scrollbar { display: none; } .bt-sport-tabs .nav-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; height: 36px; padding: 0 .85rem; border-radius: var(--sa-r-pill); border: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); color: var(--tblr-body-color); font-size: var(--sa-fs-sm); font-weight: 600; white-space: nowrap; text-decoration: none; transition: background-color .15s, color .15s, border-color .15s; } .bt-sport-tabs .nav-link .icon { width: 18px; height: 18px; color: var(--sa-muted); } .bt-sport-tabs .nav-link:hover { border-color: var(--tblr-primary); color:var(--sa-link); text-decoration: none; } .bt-sport-tabs .nav-link.active { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; } .bt-sport-tabs .nav-link.active .icon { color: #fff; } .bt-sport-tabs .bt-st-more { padding: 0 .6rem; } @media (min-width: 768px) { .bt-sport-tabs { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } /* More sheet: bottom sheet on phones, panel under the bar on desktop. */ .bt-sheet-bd { position: fixed; inset: 0; z-index: 1045; background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .2s; } .bt-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1046; max-height: min(82vh, 640px); overflow-y: auto; overscroll-behavior: contain; background: var(--tblr-bg-surface); color: var(--tblr-body-color); border-radius: var(--sa-r-lg) var(--sa-r-lg) 0 0; box-shadow: var(--sa-sh-2); padding: var(--sa-sp-2) var(--sa-sp-4) calc(var(--sa-sp-4) + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .25s ease; } .bt-sheet-bd.show { opacity: 1; } .bt-sheet.show { transform: none; } .bt-sheet-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--tblr-border-color-dark, var(--tblr-border-color)); margin: 0 auto var(--sa-sp-3); } .bt-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sa-sp-2); } .bt-sheet-head h2 { font-size: var(--sa-fs-md); margin: 0; } .bt-sheet-sec { margin-top: var(--sa-sp-3); } .bt-sheet-sec .sa-caps { display: block; margin-bottom: var(--sa-sp-1); } .bt-sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sa-sp-1); } .bt-sheet-grid a, .bt-sheet-grid button { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem .6rem; border-radius: var(--sa-r-md); color: var(--tblr-body-color); font-size: var(--sa-fs-sm); font-weight: 500; text-decoration: none; border: 0; background: none; text-align: left; font-family: inherit; cursor: pointer; } .bt-sheet-grid a:hover, .bt-sheet-grid button:hover, .bt-sheet-grid a:focus-visible { background: color-mix(in srgb, var(--tblr-primary) 9%, transparent); color:var(--sa-link); text-decoration: none; } .bt-sheet-grid a.active { background: color-mix(in srgb, var(--tblr-primary) 14%, transparent); color:var(--sa-link); font-weight: 700; } .bt-sheet-grid .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--sa-muted); } .bt-sheet-grid a.active .icon, .bt-sheet-grid a:hover .icon { color: inherit; } .bt-sheet-row { display: flex; flex-wrap: wrap; gap: var(--sa-sp-2); margin-top: var(--sa-sp-3); } @media (min-width: 992px) { .bt-sheet { left: auto; right: max(var(--sa-sp-4), calc((100vw - 1320px) / 2 + var(--sa-sp-4))); bottom: auto; top: calc(var(--sa-topbar-h) + 8px); width: 420px; border-radius: var(--sa-r-lg); transform: translateY(-8px); opacity: 0; transition: transform .2s ease, opacity .2s ease; padding-bottom: var(--sa-sp-4); } .bt-sheet.show { opacity: 1; transform: none; } .bt-sheet-grip { display: none; } .bt-sheet-bd { background: transparent; } } @media (prefers-reduced-motion: reduce) { .bt-sheet, .bt-sheet-bd { transition: none; } } /* Phone bottom bar: Games, Ask, Picks, More. */ .bt-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; display: flex; height: calc(var(--sa-bnav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--sa-bar-bg); border-top: 1px solid var(--sa-bar-line); box-shadow: 0 -4px 16px rgba(15, 23, 42, .22); } .bt-bnav a, .bt-bnav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--sa-fs-2xs); font-weight: 600; color: var(--sa-bar-fg); text-decoration: none; position: relative; border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0; } .bt-bnav .icon { width: 24px; height: 24px; } /* Always dark, like the footer band, in both themes: the bar reads apart from the page. */ .bt-bnav a:focus-visible, .bt-bnav button:focus-visible { outline: 2px solid var(--sa-brand-2); outline-offset: -3px; border-radius: var(--sa-r-md); } .bt-bnav .active { color: #8fb3ff; } .bt-bnav .bt-bnav-n { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--tblr-primary); color: #fff; font-size:var(--sa-fs-2xs); font-weight: 700; line-height: 17px; text-align: center; } .bt-bnav .bt-live-dot { position: absolute; top: 7px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--sa-alert); box-shadow: 0 0 0 2px var(--sa-bar-bg); } @media (prefers-reduced-motion: no-preference) { .bt-bnav .bt-live-dot { animation: saPulse 1.6s ease-in-out infinite; } } @keyframes saPulse { 50% { opacity: .45; } } /* ---- 4. Segmented controls and week strip --------------------------------------------------- */ .nav-segmented { --tblr-nav-active-bg: var(--tblr-primary); --tblr-nav-bg: var(--tblr-bg-surface); --tblr-nav-padding: 3px; --tblr-nav-radius: var(--sa-r-md); border: 1px solid var(--tblr-border-color); box-shadow: var(--sa-sh-1); scrollbar-width: none; } .nav-segmented::-webkit-scrollbar { display: none; } .nav-segmented .nav-link { font-weight: 500; transition: background-color .15s, color .15s, box-shadow .15s; } .nav-segmented .nav-link:hover:not(.active) { color:var(--sa-link); background: color-mix(in oklab, var(--tblr-primary) 9%, transparent); } .nav-segmented .nav-link.active, .nav-segmented .nav-link-input:checked + .nav-link, .nav-segmented .btn-check:checked + .nav-link { color: #fff; background: var(--tblr-primary); border-color: transparent; box-shadow: 0 2px 6px color-mix(in oklab, var(--tblr-primary) 35%, transparent); } .nav-segmented .btn-check:focus-visible + .nav-link { outline: 2px solid var(--tblr-primary); outline-offset: 1px; } /* Week strip: prev/next arrows around scrollable week chips with status dots. */ .bt-week-nav { --tblr-nav-height: 2.5rem; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; min-width: 0; } .bt-week-nav .nav-link { flex: 0 0 auto; gap: .4rem; } .bt-wk-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--tblr-border-color-dark, #adb5bd); } .bt-wk-dot.done { background: var(--sa-good); box-shadow: none; } .bt-wk-dot.now { background: var(--tblr-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--tblr-primary) 25%, transparent); } .nav-link.active .bt-wk-dot { background: #fff; box-shadow: none; } .bt-wk-arrow { height: var(--sa-ctl-h); width: var(--sa-ctl-h); flex-shrink: 0; border-radius: var(--sa-r-md); display: inline-flex; align-items: center; justify-content: center; padding: 0; } .bt-wk-arrow [data-icon], .bt-wk-arrow svg { display: block; width: 18px; height: 18px; margin: 0 !important; } .bt-wk-select { height: 2.5rem; border-radius: var(--sa-r-md); font-weight: 500; } @media (max-width: 575.98px) { .bt-wk-arrow { display: none; } } /* Multi-select week chips on the Cover / Over-Under tabs. */ .bt-week-chips .btn-check:checked + .nav-link::before { content: "\2713"; font-weight: 700; margin-right: .1rem; position: static; inset: auto; } /* static: the touch-target ::before on .nav-link would float the check above the label */ .nav-segmented .nav-link.active .text-secondary, .nav-segmented .nav-link.active .text-muted, .btn-group > .btn.active .text-secondary { color: rgba(255, 255, 255, .92) !important; } .btn-link, .btn-link:hover { color: var(--sa-link); } .nav-link.active .text-secondary, .nav-link.active .text-muted { color: inherit !important; opacity: 1; } .nav-tabs { --tblr-nav-tabs-link-active-bg: color-mix(in oklab, var(--tblr-primary) 14%, var(--tblr-bg-surface)); --tblr-nav-tabs-link-active-color: var(--tblr-primary); } .nav-pills { --tblr-nav-pills-link-active-bg: var(--tblr-primary); --tblr-nav-pills-link-active-color: #fff; } .btn-group > .btn.active { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #fff; } /* Rankings: one toolbar in the table card's header (title, view tabs, conference). Phones: tabs full width, scrolling. */ .rk-head { flex-wrap: wrap; gap: var(--sa-sp-2) var(--sa-sp-3); } .rk-tools { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sa-sp-2); min-width: 0; max-width: 100%; } .rk-tools #rkTabs { max-width: 100%; overflow-x: auto; } .rk-tools .form-select { width: auto; } /* The group pill in the rankings card header sits beside the tab switch as one more light control, the same height, not on a dark rail. */ .rk-tools .wk-pills{--wkp-fg:var(--tblr-body-color);--wkp-edge:var(--sa-card-line);--wkp-fill:var(--sa-card-bg);width:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none} .rk-tools .wk-pills .wk-pill:not(.wk-pop *):hover{border-color:var(--sa-link);color:var(--sa-link)} .rk-tools .wk-pills .wk-pill-c:not(.wk-pop *),.rk-tools .wk-pills .wk-pill:not(.wk-pop *):hover .wk-pill-c{background:var(--sa-ink)} @media (max-width: 767.98px) { .rk-tools, .rk-tools #rkTabs { width: 100%; } .rk-tools #rkTabs .nav-link { flex: 1 0 auto; } } /* ---- 5. Game tiles (public-site/game-pages.js tileParts) ------------------------------------- Colour grammar, site-wide: ink = market numbers and real scores; indigo = anything the model says (always captioned "model"); green ✓ / red ✗ = how a result went; azure Over / purple Under; orange = a line that moved; red = live or injury. Team colours only on the row stripe and the logo. Tile cells carry their market's tint (Spread green, Total azure, model indigo); moderate and strong signals are solid badges, slight ones soft. */ .wk-tmv{font-size:var(--sa-fs-2xs);font-weight:700;color:var(--sa-watch);margin-left:.15rem;white-space:nowrap;font-family:var(--tblr-font-sans-serif)} .wk-tile{transition:transform .15s ease,box-shadow .15s ease}.wk-tile:hover{transform:translateY(-2px);box-shadow:var(--sa-sh-2)}.wk-tile:has(.lp[open]){transform:none} .pc{background:var(--sa-card-bg);font-variant-numeric:tabular-nums;container-type:inline-size;color:var(--tblr-body-color)}.pc-cv2{display:none}@container (max-width:380px){.pc-cv{display:none}.pc-cv2{display:inline}} .pc-solo{display:flex;flex-direction:column;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-lg);overflow:hidden;box-shadow:var(--sa-sh-1)}.pc-solo:has(.lp[open]){overflow:visible} .pc-head{display:flex;align-items:center;gap:.5rem;padding:.45rem .85rem;font-size:var(--sa-fs-xs);color:var(--sa-muted);border-bottom:1px solid var(--sa-card-line);background:color-mix(in srgb,var(--sa-page-bg) 70%,var(--sa-card-bg))} .pc-st{font-weight:700;font-size:var(--sa-fs-2xs);letter-spacing:.05em;text-transform:uppercase;padding:.18rem .55rem;border-radius:var(--sa-r-pill)} .pc-final{background:var(--sa-ink);color:var(--sa-card-bg)}.pc-time{background:var(--sa-card-bg);color:var(--sa-ink);border:1px solid var(--sa-card-line);box-shadow:var(--sa-sh-1)} .pc-head>.pc-kind{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pc.wk-live .pc-head{background:color-mix(in srgb,var(--sa-alert) 10%,var(--sa-card-bg))}.pc-solo.wk-live{border-color:var(--sa-alert)} .pc-teams{padding:.55rem .85rem .35rem}.pc-team{display:flex;align-items:center;gap:.65rem;padding:.3rem 0 .3rem .6rem;border-left:4px solid var(--tc);border-radius:2px}.pc-team+.pc-team{margin-top:.2rem}.pc-nologo{width:28px;height:28px;flex-shrink:0} .pc-name{flex:1 1 auto;min-width:0;line-height:var(--sa-lh-tight)}.pc-name a{font-weight:650;font-size:var(--sa-fs-md);color:var(--tblr-body-color)}.pc-rec{font-size:var(--sa-fs-xs);color:var(--sa-muted);margin-top:.1rem} .pc-score{font-size:var(--sa-fs-xl);font-weight:800;line-height:1;min-width:2.3ch;text-align:right;color:var(--sa-ink)}.pc-lost .pc-score,.pc-lost .pc-name a{color:var(--sa-muted);font-weight:500} .pc-line{font-size:var(--sa-fs-lg);font-weight:600;line-height:1;min-width:3.2ch;text-align:right;color:var(--sa-muted)}.pc-line.pc-fav{font-weight:800;color:var(--sa-ink)} .pc-proj{font-size:var(--sa-fs-lg);font-weight:700;color:var(--sa-model);background:color-mix(in srgb,var(--sa-model) var(--sa-tint),var(--sa-card-bg));padding:.1rem .45rem;border-radius:var(--sa-r-sm)}.pc-caret{font-size:var(--sa-fs-2xs);width:.7rem;color:var(--sa-ink)} .pc-key{margin-left:auto;margin-right:1.1rem;font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--sa-model)} .pc-prob{display:flex;align-items:center;gap:.5rem;padding:0 .85rem .5rem;font-size:var(--sa-fs-xs);color:var(--sa-muted);white-space:nowrap}.pc-prob .pc-fav{color:var(--tblr-body-color);font-weight:700} .pc-bar{flex:1;display:flex;gap:2px;height:6px;border-radius:var(--sa-r-pill);overflow:hidden}.pc-bar>span{display:block;height:100%} .pc-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:.25rem .85rem .6rem;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);overflow:hidden} .pc-chip{padding:.45rem .5rem;text-align:center;min-width:0;background:var(--sa-card-bg);position:relative}.pc-chip+.pc-chip{border-left:1px solid var(--sa-card-line)} .pc-cl{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--sa-muted)} .pc-cm{font-weight:800;font-size:clamp(.85rem,4.4cqw,1rem);color:var(--sa-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem} .pc-cs{font-size:var(--sa-fs-xs);color:var(--sa-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem} .pc-mdl{color:var(--sa-model);font-weight:600} /* Total edge pill: one card per side the model can take, with how many hit and missed. */ .wk-te-sum{margin:.6rem 0 .1rem;font-size:var(--sa-fs-sm);color:var(--sa-muted)}.wk-te-sum b{color:var(--sa-ink);font-weight:800} .wk-te-card{margin-top:.5rem;padding:.4rem;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);background:var(--sa-card-bg)} .wk-te-h{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:.3rem .4rem;border:1px solid transparent;border-radius:var(--sa-r-sm);background:none;color:var(--sa-ink);font:inherit;font-weight:700;cursor:pointer} .wk-te-ht{display:inline-flex;align-items:center;gap:.4rem}.wk-te-hn{font-weight:500;font-size:var(--sa-fs-sm);color:var(--sa-muted)}.wk-te-hn b{color:var(--sa-ink);font-weight:800} .wk-te-r{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.3rem} .wk-te-c{--c:var(--sa-good);display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.4rem .55rem;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);background:var(--sa-card-bg);color:var(--sa-ink);font:inherit;cursor:pointer;text-align:left;line-height:1.2} .wk-te-r3{grid-template-columns:repeat(3,minmax(0,1fr))}.wk-fc-c{--c:var(--tblr-primary)}.wk-fc-c .wk-te-cn small{display:block;margin-top:.05rem}.wk-te-r3 .wk-te-cn b{margin-right:.25rem} .wk-sgl-b{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap}.wk-sgl-b small{font-size:var(--sa-fs-xs);font-weight:600} .wk-te-miss{--c:var(--sa-alert)} /* A week with no finished games has nothing to grade: lead with how many games sit on each side and hide the empty result chips. */ .wk-nores .wk-te-r{display:none}.wk-nores .wk-te-hn b{font-size:var(--sa-fs-lg);font-weight:800}.wk-te-cl{font-size:var(--sa-fs-xs);font-weight:700;color:color-mix(in srgb,var(--c) 70%,var(--sa-ink))}.wk-te-cn b{font-size:var(--sa-fs-lg);font-weight:800;margin-right:.35rem}.wk-te-cn small{font-size:var(--sa-fs-xs);color:var(--sa-muted)} .wk-te-h:hover,.wk-te-c:hover,.wk-te-h:focus-visible,.wk-te-c:focus-visible{border-color:var(--tblr-primary);outline:none}.wk-te-c:hover,.wk-te-c:focus-visible{border-color:var(--c)} .wk-te-h:focus-visible,.wk-te-c:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--tblr-primary) 25%,transparent)} .wk-te-h.active{background:color-mix(in srgb,var(--tblr-primary) 12%,var(--sa-card-bg));border-color:var(--tblr-primary)}.wk-te-c.active{background:color-mix(in srgb,var(--c) 14%,var(--sa-card-bg));border-color:var(--c)} .wk-te-c:disabled{opacity:.45;cursor:not-allowed}.wk-te-c:disabled:hover{border-color:var(--sa-card-line)} .badge.pc-te{background:color-mix(in srgb,var(--sa-model) 14%,var(--sa-card-bg));color:color-mix(in srgb,var(--sa-model) 70%,var(--sa-ink));font-weight:600}.pc-foot .badge.pc-te{--bc:var(--sa-model);color:color-mix(in srgb,var(--sa-model) 70%,var(--sa-ink))!important} .pc-mv{color:var(--sa-watch);font-weight:700} .pc-watch .pc-cm{color:var(--sa-watch)} .pc-model{background:color-mix(in srgb,var(--sa-model) var(--sa-tint),var(--sa-card-bg))}.pc-model .pc-cl{letter-spacing:.03em;white-space:nowrap}.pc-model .pc-i{display:none}.pc-model .pc-cl,.pc-model .pc-cm{color:var(--sa-model)} .pc-model.pc-on{background:color-mix(in srgb,var(--sa-model) 14%,var(--sa-card-bg))}.pc-model.pc-on::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sa-model)} .pc-chip[data-tip]{cursor:pointer}.pc-chip[data-tip]:focus-visible{outline:2px solid var(--tblr-primary);outline-offset:-2px} .pc-i{font-size:max(.8em,var(--sa-fs-2xs));opacity:1;font-weight:400} .pc-green{background:color-mix(in srgb,var(--sa-ats) var(--sa-tint),var(--sa-card-bg))}.pc-azure{background:color-mix(in srgb,var(--sa-over) var(--sa-tint),var(--sa-card-bg))}.pc-purple{background:color-mix(in srgb,var(--sa-model) var(--sa-tint),var(--sa-card-bg))} .pc-foot{display:flex;align-items:center;gap:.4rem;margin-top:auto;padding:.45rem .85rem;border-top:1px solid var(--sa-card-line);background:var(--sa-card-bg)}.pc-foot:not(:has(.badge,.status-dot))>div:first-child{display:none!important} .pc-foot .badge{--bc:var(--sa-muted);border-radius:var(--sa-r-pill);font-weight:600;font-size:var(--sa-fs-xs);padding:.3rem .6rem;border:1px solid transparent;background:color-mix(in srgb,var(--bc) 13%,var(--sa-card-bg))!important;color:var(--bc)!important} .pc-foot .badge.bg-green,.pc-foot .badge.bg-green-lt{--bc:var(--sa-ats)}.pc-foot .badge.bg-azure,.pc-foot .badge.bg-azure-lt{--bc:var(--sa-over)}.pc-foot .badge.bg-purple,.pc-foot .badge.bg-purple-lt{--bc:var(--sa-under)} .pc-foot .badge.bg-teal-lt{--bc:var(--tblr-teal)}.pc-foot .badge.bg-orange-lt{--bc:var(--sa-watch)}.pc-foot .badge.bg-red-lt{--bc:var(--sa-alert)} .pc-foot .badge.bg-green,.pc-foot .badge.bg-azure,.pc-foot .badge.bg-purple{background:var(--bc)!important;color:#fff!important} .pc .wk-sit{margin:.2rem 0 0 .9rem} .wk-sit{margin-top:.35rem;line-height:1.3;white-space:normal;font-weight:400}.wk-sit-dd{font-weight:600}.wk-sit-last{font-size:var(--sa-fs-xs)} .wk-tile.wk-live{border-color:var(--sa-alert);box-shadow:inset 3px 0 0 var(--sa-alert)}.list-group-item.wk-live{box-shadow:inset 3px 0 0 var(--sa-alert)!important}tr.wk-live>td:first-child{box-shadow:inset 3px 0 0 var(--sa-alert)} .wk-star{color:var(--sa-watch)} /* Week in numbers card: tabbed (results & totals / lines to watch / move → cover) */ .wk-ntabs-wrap{padding:.5rem 1rem 0}.wk-ntabs{box-shadow:none}.wk-nt-n{margin-left:.35rem;padding:0 .4rem;border-radius:var(--sa-r-pill);background:var(--sa-page-bg);color:var(--sa-muted);font-size:var(--sa-fs-2xs);font-weight:700} .gt-tab.active .wk-nt-n{background:rgba(255,255,255,.22);color:#fff} .wk-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:.5rem;width:100%} .wk-stat{display:flex;flex-direction:column;gap:.1rem;padding:.55rem .75rem;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);background:var(--sa-card-bg);color:inherit;text-decoration:none;min-width:0} a.wk-stat:hover{border-color:var(--tblr-primary);color:inherit;text-decoration:none} .wk-stat-l{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sa-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wk-stat-v{font-size:1.25rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--sa-ink)}.wk-stat-s{font-size:var(--sa-fs-xs);color:var(--sa-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #wkNumbers .wk-lm-pane{height:auto} .pc-fol{border:0;background:none;padding:0 .3rem;margin-left:.1rem;min-width:2rem;min-height:2rem;font-size:var(--sa-fs-md);line-height:1;color:var(--sa-muted);vertical-align:-1px;cursor:pointer;border-radius:6px;opacity:.75} .pc-fol:hover,.pc-fol:focus-visible{opacity:1;color:var(--sa-watch);background:color-mix(in srgb,var(--sa-watch) 14%,transparent);outline:none} .pc-fol.text-warning{opacity:1;color:var(--sa-watch)!important} /* Tile picks: footer "Pick" button opens a compact spread / total / winner strip inside the tile. */ .gp-act-pick{--gp-c:var(--tblr-primary)}.gp-act.active{background:var(--gp-c);border-color:var(--gp-c);color:#fff} .pc-picks{padding:0 .85rem .6rem;border-top:1px dashed var(--sa-card-line);margin-top:.1rem;padding-top:.55rem} .pc-picks .gb-picks-g{grid-template-columns:1fr;gap:.4rem}.pc-picks .gb-pg{display:flex;align-items:center;gap:.5rem}/* One word never breaks mid-word (it read WINNE / R); a longer label such as 1H spread still wraps at its space. */ .pc-picks .gb-pg .gb-cl{width:4.25rem;flex-shrink:0;margin:0;text-align:left;font-size:var(--sa-fs-2xs);letter-spacing:.04em;overflow-wrap:normal;word-break:normal}.pc-picks .gb-pb{flex:1;display:flex;gap:.35rem} .pc-picks .gb-pk{min-height:38px;font-size:var(--sa-fs-sm)} /* Week page: date groups are headers over a grid of tiles, not cards. The header sticks under the filter bar. */ .wk-day{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;margin-bottom:var(--sa-sp-4)} .wk-day>.card-header.wk-day-h{position:sticky;top:var(--wk-stick,0px);z-index:4;background:var(--sa-page-bg);border:0;padding:.5rem 0 .4rem;margin:0} .wk-day-h .card-title{font-size:var(--sa-fs-xs);font-weight:800;letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--tblr-body-color)} .wk-day-n{font-size:var(--sa-fs-xs);font-weight:600;color:var(--sa-muted);padding:.05rem .45rem;border-radius:var(--sa-r-pill);background:var(--sa-card-bg);border:1px solid var(--sa-card-line)} #wkGroups .wk-day .wk-grid{background:none!important;padding:0!important;gap:var(--sa-sp-3)!important} .wk-bar{background:var(--sa-card-bg)!important;border-color:var(--sa-card-line)!important;box-shadow:var(--sa-sh-1)!important} /* Week page: status filter (All / Live / Upcoming / Final) in the slate line. */ .wk-status{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-pill);background:var(--sa-card-bg);max-width:100%;overflow-x:auto;scrollbar-width:none} .wk-status::-webkit-scrollbar{display:none} .wk-st{display:inline-flex;align-items:center;gap:.35rem;height:30px;padding:0 .75rem;border:0;border-radius:var(--sa-r-pill);background:none;color:var(--sa-muted);font:inherit;font-size:var(--sa-fs-sm);font-weight:600;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s} .wk-st:hover{color:var(--sa-link)}.wk-st.active{background:var(--tblr-primary);color:#fff} .wk-st-n{font-size:var(--sa-fs-2xs);font-weight:700;padding:0 .35rem;border-radius:var(--sa-r-pill);background:var(--sa-page-bg);color:color-mix(in srgb,var(--sa-ink) 72%,transparent);min-width:1.2rem;text-align:center} .wk-st.active .wk-st-n{background:rgba(0,0,0,.22);color:#fff} @media (max-width:575.98px){.wk-slate{gap:var(--sa-sp-2) var(--sa-sp-1)}.wk-status{flex-basis:100%}} /* Week page: slate summary line above the games. */ .wk-slate{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sa-sp-2);font-size:var(--sa-fs-sm);color:var(--sa-muted)} .wk-slate b{color:var(--tblr-body-color);font-weight:700} .wk-slate-chip{display:inline-flex;align-items:center;gap:.3rem;height:30px;padding:0 .7rem;border-radius:var(--sa-r-pill);border:1px solid var(--sa-card-line);background:var(--sa-card-bg);color:var(--tblr-body-color);text-decoration:none;white-space:nowrap;transition:border-color .15s,background-color .15s} a.wk-slate-chip:hover{border-color:var(--tblr-primary);color:var(--sa-link);text-decoration:none} a.wk-slate-chip.border-primary{background:var(--tblr-primary);border-color:var(--tblr-primary);color:#fff}a.wk-slate-chip.border-primary b{color:#fff} .wk-slate-live{border-color:var(--sa-alert);color:var(--sa-alert)} .wk-slate-more{margin-left:auto;font-size:var(--sa-fs-xs);white-space:nowrap} /* ---- 6. Shared widgets ----------------------------------------------------------------------- */ /* Game action buttons (ATS History / Play-by-play / Game card) that open the game side panel. */ .gp-acts{display:inline-flex;align-items:center;gap:.3rem;flex-shrink:0} .gp-act{--gp-c:var(--tblr-blue);display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-width:2.25rem;height:2.25rem;padding:0 .4rem;border-radius:var(--sa-r-sm);color:var(--gp-c);background:color-mix(in srgb,var(--gp-c) 12%,transparent);border:1px solid color-mix(in srgb,var(--gp-c) 35%,transparent);font-size:var(--sa-fs-xs);font-weight:600;line-height:1;text-decoration:none;cursor:pointer;position:relative;z-index:2;transition:background-color .15s,color .15s,box-shadow .15s} .gp-act svg{width:16px;height:16px}.gp-act:hover,.gp-act:focus-visible{background:var(--gp-c);border-color:var(--gp-c);color:#fff;text-decoration:none;box-shadow:0 3px 10px color-mix(in srgb,var(--gp-c) 35%,transparent)} .gp-act-dive{--gp-c:var(--sa-watch)}.gp-act-card{--gp-c:var(--tblr-teal)}.gp-act.gp-lbl{padding:0 .65rem;border-radius:var(--sa-r-pill);height:2.25rem} /* Line provenance (source + update time under a betting line; details opens to open / current / last update). */ .lp{position:relative;display:block;font-size:var(--sa-fs-xs);line-height:1.35;font-family:var(--tblr-font-sans-serif);font-weight:400} .lp>summary{list-style:none;cursor:pointer;color:var(--sa-muted);display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 .3rem;max-width:100%} .lp-center>summary{justify-content:center}.lp-end>summary{justify-content:flex-end} .lp>summary::-webkit-details-marker{display:none}.lp-dot{display:inline-block;width:.45rem;height:.45rem;border-radius:50%;background:var(--sa-good);margin-right:.3rem;vertical-align:.05rem} .lp>summary.lp-stale .lp-dot{background:var(--tblr-yellow)}.lp.lp-close .lp-dot{background:var(--sa-muted)} .lp-center>summary{flex-direction:column;align-items:center}.lp-center .lp-sep{display:none} .lp>summary:hover,.lp[open]>summary{color:var(--tblr-body-color);text-decoration:underline dotted} .lp-body{position:absolute;z-index:1050;top:calc(100% + .3rem);min-width:15rem;padding:.6rem .75rem;border:1px solid var(--tblr-border-color);border-radius:var(--sa-r-sm);font-family:var(--tblr-font-sans-serif);font-weight:400;background:var(--tblr-bg-surface);box-shadow:var(--sa-sh-2);text-align:left;white-space:normal;font-size:var(--sa-fs-xs);color:var(--tblr-body-color)} .lp-body>div+div{margin-top:.15rem}.lp-note{margin-top:.45rem!important;color:var(--sa-muted);font-size:var(--sa-fs-2xs)} .lp-end{text-align:right}.lp-end .lp-body{right:0}.lp-start .lp-body{left:0}.lp-center{text-align:center}.lp-center .lp-body{left:50%;transform:translateX(-50%)} .lp[open]>.lp-body{position:fixed;right:auto;transform:none;max-width:calc(100vw - 16px)} /* Collapsible cards: a chevron in the card header hides the rest of the card. */ .card.bt-collapsed>:not(.card-header){display:none!important}.card.bt-collapsed>.card-header{border-bottom:0} /* A card that starts closed is already closed in the HTML: nav.js adds its button and .bt-collapsed only when it runs, and without these rules the open card is drawn first and jumps shut (a page-wide layout shift). */ .card[data-default-collapsed]:not([data-collapse-ready],[data-no-collapse],.h-100):has(>.card-header .card-title)>:not(.card-header){display:none!important} .card[data-default-collapsed]:not([data-collapse-ready],[data-no-collapse],.h-100):has(>.card-header .card-title)>.card-header{border-bottom:0} @media (max-width:767.98px){.card[data-collapsed-phone]:not([data-collapse-ready],[data-no-collapse],.h-100):has(>.card-header .card-title)>:not(.card-header){display:none!important}.card[data-collapsed-phone]:not([data-collapse-ready],[data-no-collapse],.h-100):has(>.card-header .card-title)>.card-header{border-bottom:0}} #wkNumbers>.card[data-default-collapsed]:not([data-collapse-ready]){display:none} /* The page body is at least a screen tall, so the footer starts below the fold and does not jump when a list or table fills in. */ .page-wrapper>.page-body{min-height:100vh;min-height:100svh} .fp-hold{flex:0 0 auto;width:100%} /* Round robin: in a leg the pick, odds and result controls share one height, and so do the stepper and Set all above them (44px, the tap size already used there). */ #rrApp input.form-control:not(.form-control-sm),#rrApp .card-header .dropdown-toggle{height:44px;min-height:44px} /* The league strip's chips and its More chip are pills of --sa-ctl-h like every other control (phones had them at 40 and 44). */ .bt-sport-tabs .nav-link.nav-link{height:var(--sa-ctl-h);min-height:0} /* Filter chips, jump links and the team search on the article pages are the site's pills (--sa-ctl-h tall, round), not small rectangular buttons. */ .btn.ar-q,.btn[data-lgf],nav[aria-label="On this page"] a.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;height:var(--sa-ctl-h);min-height:0;padding:0 .9rem;border-radius:var(--sa-r-pill);font-size:var(--sa-fs-sm);font-weight:600;line-height:1;white-space:nowrap} .ar-q .badge,button[data-lgf] .badge{margin:0!important} input#arFind{height:var(--sa-ctl-h);min-height:0;padding:0 .9rem;border-radius:var(--sa-r-pill);font-size:var(--sa-fs-sm)} /* The Ask box on the home page: the input and its button are one height. */ #homeAsk,#homeAsk+.btn{height:48px;min-height:48px} /* Switches that sit beside the dark rail (Game flow and the Edge explorer: NFL / College, the question tabs) are as tall as the rail (a pill plus the rail's 4px padding and 1px border each side) and their chips as tall as its pills. */ :is(#rfForm,#rxForm) .nav-segmented:not(.wk-pop *){height:calc(var(--sa-ctl-h) + 10px);padding:4px} :is(#rfForm,#rxForm) .nav-segmented:not(.wk-pop *) .nav-link{height:var(--sa-ctl-h)} /* The Ask suggestions card's header is 4px taller once nav.js adds its collapse button (the header's second item re-wraps); it starts at that height. */ .card:has(>.ask-sugg)>.card-header,.card:has(.ask-sugg)>.card-header{min-height:69px} /* Tiles load on demand: while only the "Loading" card is there the place of the list is held, so the notes below do not drop when the tiles arrive. */ #wkTilesBody:has(>.col-12:only-child>.card>.card-body.text-center){min-height:100vh} /* The league ATS and Totals pages fill their KPI tiles from the API: the tiles' place is held (one row of four, two rows of two on a phone). */ [id$="AnalyticsKpis"]:empty{min-height:108px} @media (max-width:767.98px){[id$="AnalyticsKpis"]:empty{min-height:216px}} /* Before table-sort.js turns a select into its pill, the select already has the pill's size (its default label), so the toolbar does not shift when the pill appears. */ .wk-right .tm-sort:not(.sm-has)>.ts-sortm-l{display:none} .wk-right #wkSortSel:not(.sm-native){width:160px;height:36px} .wk-right #wkGroupSel:not(.sm-native){width:128px;height:36px} select.bt-wk-select:not(.sm-native){width:86px!important;height:36px} /* filter-pills.js adds the Filters and Save search buttons (94 + 8 + 135px); until it has, their place is held so the pills do not jump right. */ @media (min-width:768px){#wkFilters .wk-pills:not(.fp-built)::before{content:"";order:1;flex:0 0 237px;height:36px}#wkFilters .wk-pills:not(.fp-built)>.wk-pills-s>*{order:2}} .card-header.bt-collapsible{cursor:pointer;user-select:none}.card-header.bt-collapsible>:first-child{margin-right:auto;min-width:0}.card-header>.bt-collapse-btn{order:99;margin-left:.5rem;flex-shrink:0} .card-header.bt-collapsible:not(:has(>.card-actions)){flex-wrap:nowrap} /* Shared tooltip ([data-tip]): hover, keyboard focus and tap. */ .bt-tip{position:fixed;z-index:1070;max-width:min(320px,calc(100vw - 16px));padding:.5rem .65rem;border-radius:var(--sa-r-sm);background:var(--tblr-dark,#1d273b);color:#fff;font-size:var(--sa-fs-xs);line-height:1.4;white-space:pre-line;box-shadow:var(--sa-sh-2);pointer-events:none;opacity:0;transition:opacity .12s} .bt-tip.show{opacity:1}[data-tip]{cursor:pointer} [data-bs-theme=dark] .bt-tip{background:var(--sa-ink);color:var(--sa-bar-bg)} /* Newsletter: footer card, /newsletter/ page and the bottom-sheet prompt. */ .bt-nl-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} .bt-nl-pop{position:fixed;right:1rem;bottom:1rem;z-index:1040;width:min(360px,calc(100vw - 2rem));opacity:0;transform:translateY(calc(100% + 2rem));transition:transform .35s ease,opacity .35s ease;border-top:3px solid var(--sa-good)} .bt-nl-pop.show{opacity:1;transform:none}.bt-nl-pop .btn-close{position:absolute;top:.85rem;right:.85rem;z-index:2} .bt-nl-pop .card-body{padding:var(--sa-sp-4)} @media (max-width:991.98px){.bt-nl-pop{left:0;right:0;width:auto;bottom:calc(var(--sa-bnav-h) + env(safe-area-inset-bottom));max-height:calc(100dvh - var(--sa-bnav-h) - 72px);overflow:auto;border-radius:var(--sa-r-lg) var(--sa-r-lg) 0 0;border-top-width:3px}.bt-nl-pop .card-body{padding:var(--sa-sp-3) var(--sa-sp-4)}.bt-nl-pop .bt-nl-pitch{display:none}} @media (prefers-reduced-motion:reduce){.bt-nl-pop{transition:none}} /* Back to top: bottom-right button after a screen and a half of scrolling; the ring shows how far down the page you are. */ .bt-top{position:fixed;right:1.25rem;bottom:1.25rem;z-index:1035;width:46px;height:46px;border-radius:50%;border:1px solid var(--tblr-border-color);background:color-mix(in srgb,var(--tblr-bg-surface) 82%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--tblr-body-color);box-shadow:var(--sa-sh-2);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .25s ease,transform .25s ease,color .15s,box-shadow .15s} .bt-top.show{opacity:1;transform:none;pointer-events:auto}.bt-top:hover{color:var(--sa-link)} .bt-top:focus-visible{outline:2px solid var(--tblr-primary);outline-offset:3px}.bt-top .icon{width:20px;height:20px;position:relative} .bt-top svg.bt-top-ring{position:absolute;inset:-1px;width:46px;height:46px;transform:rotate(-90deg)} .bt-top-ring circle{fill:none;stroke-width:2.5}.bt-top-ring .bg{stroke:transparent}.bt-top-ring .fg{stroke:var(--tblr-primary);stroke-linecap:round;transition:stroke-dashoffset .1s linear} @media (max-width:991.98px){.bt-top{right:.9rem;bottom:calc(var(--sa-bnav-h) + 20px + env(safe-area-inset-bottom));width:42px;height:42px}.bt-top svg.bt-top-ring{width:42px;height:42px}} @media (prefers-reduced-motion:reduce){.bt-top{transition:none}} /* Footer. */ .bt-site-footer{margin-top:var(--sa-sp-5)} /* Footer: an always-dark band in both themes (the top bar's navy). A support strip, four link groups (open on a wide screen, collapsible rows on a phone), then brand, share icons and the legal line. */ .bt-foot-band{--ft-fg:var(--sa-bar-fg);--ft-mu:rgba(255,255,255,.62);--ft-line:var(--sa-bar-line);--ft-edge:rgba(255,255,255,.25);margin-top:var(--sa-sp-5);padding:var(--sa-sp-5) 0;color:var(--ft-fg);border-top:1px solid var(--ft-line); background:radial-gradient(900px 380px at 12% 0,color-mix(in srgb,var(--sa-brand) 22%,transparent),transparent 62%),linear-gradient(180deg,var(--sa-bar-bg),color-mix(in srgb,var(--sa-bar-bg) 40%,#000))} .bt-foot-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--sa-sp-4);flex-wrap:wrap;padding:var(--sa-sp-4);margin-bottom:var(--sa-sp-5);border-radius:var(--sa-r-lg);background:linear-gradient(135deg,color-mix(in srgb,var(--sp-y) 16%,transparent),color-mix(in srgb,var(--sp-y) 4%,transparent));border:1px solid color-mix(in srgb,var(--sp-y) 28%,transparent)} .bt-foot-cta b{display:block;font-size:var(--sa-fs-md);color:var(--sa-bar-fg-strong)}.bt-foot-cta>div>span{display:block;font-size:var(--sa-fs-sm);color:var(--ft-mu);text-wrap:pretty} .bt-foot-btns{display:flex;flex-wrap:wrap;gap:var(--sa-sp-2)} .bt-foot-ytb,.bt-foot-ytb:hover,.bt-foot-ytb:focus{background:transparent;border:1px solid var(--ft-edge);color:var(--sa-bar-fg-strong)}.bt-foot-ytb:hover{border-color:var(--sa-bar-fg-strong)}.bt-foot-ytb svg{color:#ff0033} .bt-foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sa-sp-5)} .bt-foot-acc summary{list-style:none;margin:0 0 var(--sa-sp-3);cursor:default;font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--ft-mu)}.bt-foot-acc summary::-webkit-details-marker{display:none} .bt-foot-acc ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--sa-sp-2)}.bt-foot-acc a{color:var(--ft-fg);text-decoration:none;font-size:var(--sa-fs-sm)}.bt-foot-acc a:hover{color:var(--sa-bar-fg-strong);text-decoration:underline} .bt-foot-band a:focus-visible,.bt-foot-band summary:focus-visible,.bt-foot-band .btn:focus-visible{outline:2px solid var(--sa-brand-2);outline-offset:2px;border-radius:var(--sa-r-sm)} .bt-foot-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sa-sp-4) var(--sa-sp-5);margin-top:var(--sa-sp-5);padding-top:var(--sa-sp-4);border-top:1px solid var(--ft-line)} .bt-foot-id{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sa-sp-3) var(--sa-sp-5)}.bt-foot-band .bt-brand{margin:0} .bt-foot-share{display:flex;align-items:center;gap:var(--sa-sp-2);font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--ft-mu)}.bt-foot-share [data-share-buttons]{display:flex;flex-wrap:wrap;gap:var(--sa-sp-1)} .bt-foot-share .btn{position:relative;width:32px;height:32px;min-width:0;min-height:0;padding:0;display:inline-grid;place-items:center;border-radius:var(--sa-r-pill);background:transparent;border:1px solid var(--ft-edge);color:var(--ft-fg)}.bt-foot-share .btn:hover{border-color:var(--sa-bar-fg-strong);color:var(--sa-bar-fg-strong)}.bt-foot-share .icon{width:16px;height:16px;margin:0} .bt-foot-legal{margin:0;max-width:60ch;font-size:var(--sa-fs-xs);color:var(--ft-mu);text-wrap:pretty} .vid-yt{border-color:#ff0033;color:#ff0033}.vid-yt:hover{background:#ff0033;color:#fff;border-color:#ff0033} /* Touch and phone: 44px rows and buttons; the 36px share icons sit 8px apart with a 4px larger hit area each, so the pitch is 44px. */ @media (pointer:coarse),(max-width:767.98px){.bt-foot-acc li a{display:flex;align-items:center;min-height:44px}.bt-foot-btns .btn{min-height:44px}.bt-foot-share .btn{width:36px;height:36px}.bt-foot-share [data-share-buttons]{gap:var(--sa-sp-2)}.bt-foot-share .btn::after{content:"";position:absolute;inset:-4px}} @media (max-width:767.98px){.bt-foot-grid{grid-template-columns:1fr;gap:0}.bt-foot-acc{border-top:1px solid var(--ft-line)}.bt-foot-acc summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;margin:0;cursor:pointer}.bt-foot-acc summary::after{content:"+";font-size:var(--sa-fs-lg);font-weight:400;color:var(--ft-mu)}.bt-foot-acc[open] summary::after{content:"\2212"} .bt-foot-acc ul{grid-template-columns:1fr 1fr;gap:0 var(--sa-sp-4);padding-bottom:var(--sa-sp-3)}.bt-foot-bar,.bt-foot-share{flex-direction:column;align-items:flex-start}.bt-foot-share{gap:var(--sa-sp-3)}} @media (max-width:991.98px){.bt-foot-band{padding-bottom:calc(var(--sa-bnav-h) + var(--sa-sp-5) + env(safe-area-inset-bottom))}body:has(.bt-foot-band){padding-bottom:0}} /* Site-wide: no rainbow card chrome. Coloured status bars and tinted headers from older renderers become neutral. */ .card>.card-status-top{display:none} .card>.card-header[class*="bg-"]{background:var(--sa-card-bg)!important} .card-header .avatar[class*="bg-"]:not(.sa-ch-ico){background:var(--sa-page-bg)!important;color:var(--tblr-body-color)!important;border:1px solid var(--sa-card-line)} /* Card headers (pages.js accentHeader) and KPI tiles: neutral; the icon sits in a soft grey disc. */ .card-header.sa-ch{background:var(--sa-card-bg);border-bottom:1px solid var(--sa-card-line);padding:.7rem 1rem} .sa-ch .card-title{font-size:var(--sa-fs-md);font-weight:700} .sa-ch-ico{background:var(--sa-page-bg)!important;color:var(--tblr-body-color)!important;border:1px solid var(--sa-card-line)} .sa-ch-ico .icon{width:18px;height:18px} .sa-kpi .subheader{font-size:var(--sa-fs-2xs);letter-spacing:var(--sa-track-caps)}.sa-kpi .h2{font-size:var(--sa-fs-lg);color:var(--sa-ink)} /* Game page tabs: Market, Trends, Matchup, Model. */ .gt-tabs-wrap{padding:.25rem 0 .25rem} .gt-tabs{display:flex;gap:4px;padding:3px;overflow-x:auto;scrollbar-width:none;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);background:var(--sa-card-bg);box-shadow:var(--sa-sh-1)} .gt-tab{flex:1 1 auto;min-width:0;white-space:nowrap;padding:0 .6rem;height:38px;border:0;border-radius:calc(var(--sa-r-md) - 3px);background:none;color:var(--sa-muted);font:inherit;font-size:var(--sa-fs-sm);font-weight:600;cursor:pointer;transition:background-color .15s,color .15s} .gt-tab:hover{color:var(--sa-link)}.gt-tab.active{background:var(--tblr-primary);color:#fff}.gt-tab:focus-visible{outline:2px solid var(--tblr-primary);outline-offset:1px} .gt-panel>.row{margin-top:0} /* Line movement track (game page Market card): Open stop -> coloured connector with the delta -> Now stop. */ .mv{display:flex;align-items:stretch;gap:0;--mv-c:var(--sa-card-line);container-type:inline-size} @container (max-width:330px){.mv-v{font-size:var(--sa-fs-md)!important}.mv-stop{min-width:4rem!important;padding:.3rem .4rem!important}.mv-link{min-width:3.4rem!important}.mv-chip{padding:.1rem .4rem}} .mv-spread{--mv-c:var(--sa-watch)}.mv-up{--mv-c:var(--sa-over)}.mv-down{--mv-c:var(--sa-under)} .mv-stop{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:5.2rem;padding:.4rem .6rem;border-radius:var(--sa-r-md);border:1px dashed var(--sa-card-line);background:var(--sa-card-bg)} .mv-now{border-style:solid;border-color:var(--sa-ink);background:var(--sa-ink);color:var(--sa-card-bg)} .mv-l{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--sa-muted)}.mv-now .mv-l{color:color-mix(in srgb,var(--sa-card-bg) 70%,transparent)} .mv-v{font-size:var(--sa-fs-lg);font-weight:800;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}.mv-open .mv-v{color:var(--sa-muted);font-weight:600} .mv-link{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;min-width:4rem} .mv-link::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:var(--mv-c);border-radius:2px} .mv-link::after{content:"";position:absolute;right:-1px;top:50%;width:0;height:0;border:7px solid transparent;border-left:9px solid var(--mv-c);border-right:0;transform:translateY(-50%)} .mv-none .mv-link::after{display:none} .mv-chip{position:relative;z-index:1;padding:.15rem .55rem;border-radius:var(--sa-r-pill);background:var(--sa-card-bg);border:1.5px solid var(--mv-c);color:var(--mv-c);font-size:var(--sa-fs-xs);font-weight:800;white-space:nowrap} .mv-none .mv-chip{color:var(--sa-muted);border-color:var(--sa-card-line);font-weight:600} @media (max-width:575.98px){.mv-stop{min-width:4.6rem;padding:.35rem .45rem}.mv-v{font-size:var(--sa-fs-md)}.mv-link{min-width:3rem}} /* Books: grouped headers (Spread / Total / Moneyline), one row per sportsbook with the line over the price; the best cell per column is tinted ATS green. Phones pick one market with the segmented control. */ .bk-seg{display:none;gap:.25rem;padding:.5rem 1rem 0} .bk-seg label{flex:1;cursor:pointer}.bk-seg input{position:absolute;opacity:0;pointer-events:none} .bk-seg span{display:block;text-align:center;padding:.35rem .5rem;border-radius:var(--sa-r-pill);border:1px solid var(--sa-card-line);font-size:var(--sa-fs-sm);font-weight:600;color:var(--sa-muted)} .bk-seg input:checked+span{background:var(--sa-ink);color:var(--sa-card-bg);border-color:var(--sa-ink)} .bk-seg input:focus-visible+span{outline:2px solid var(--sa-brand);outline-offset:1px} .bk-table th{white-space:nowrap}.bk-table thead .bk-g{text-align:center;font-size:var(--sa-fs-2xs);letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--sa-muted);border-bottom:0} .bk-th{display:inline-flex;align-items:center;gap:.3rem;vertical-align:middle} .bk-n{font-weight:600;white-space:nowrap;width:1%}.bk-table tbody tr:nth-child(even) td{--tblr-table-bg:color-mix(in srgb,var(--sa-page-bg) 55%,var(--sa-card-bg))} .bk-c{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;line-height:1.15} .bk-l{display:block;font-weight:700}.bk-p{display:block;font-size:var(--sa-fs-xs);color:var(--sa-muted)} .bk-table td.bk-best{--tblr-table-bg:color-mix(in srgb,var(--sa-ats) 14%,var(--sa-card-bg));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sa-ats) 40%,transparent)} .bk-best .bk-p{color:var(--sa-ats);font-weight:700} .bk-key{display:inline-block;padding:0 .35rem;border-radius:var(--sa-r-sm);background:color-mix(in srgb,var(--sa-ats) 12%,transparent);color:var(--sa-ats);font-weight:700} .bk-n .bk-short{display:none} @media (max-width:575.98px){ .bk-n .bk-full{display:none}.bk-n .bk-short{display:inline}.bk-seg{display:flex} .bk-table td,.bk-table th{padding:.4rem .5rem}.bk-table .bk-c .bk-l{font-size:var(--sa-fs-md)}.bk-table .bk-c .bk-p{font-size:var(--sa-fs-sm)} .bk-card:has(.bk-seg input[value="spread"]:checked) .bk-col-total,.bk-card:has(.bk-seg input[value="spread"]:checked) .bk-col-ml, .bk-card:has(.bk-seg input[value="total"]:checked) .bk-col-spread,.bk-card:has(.bk-seg input[value="total"]:checked) .bk-col-ml, .bk-card:has(.bk-seg input[value="ml"]:checked) .bk-col-spread,.bk-card:has(.bk-seg input[value="ml"]:checked) .bk-col-total{display:none} } /* Account pages (public/js/account.js): one centred card; forms use the site's inputs and the solid primary button. */ .page:has(.ac-auth) .page-header{display:none} .ac-auth{max-width:26rem;margin:var(--sa-sp-3) auto var(--sa-sp-5)} .ac-card{border-radius:var(--sa-r-lg)}.ac-form{padding:var(--sa-sp-5) var(--sa-sp-4)} .ac-form h1,.ac-form h3{font-size:var(--sa-fs-lg);font-weight:800;letter-spacing:-.01em;margin:0 0 .25rem}.ac-form .ac-sub{display:block;padding:0;border:0;background:none;text-transform:none;letter-spacing:0;font-weight:400;color:var(--sa-muted);font-size:var(--sa-fs-sm);margin-bottom:var(--sa-sp-4)} /* Segmented control: .sa-seg anywhere (buttons with .active), .ac-seg the account form's full-width one. */ .sa-seg,.ac-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:3px;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);background:var(--sa-page-bg);margin-bottom:var(--sa-sp-4)} .sa-seg{margin:0;display:inline-grid;grid-auto-flow:column;grid-template-columns:none}.sa-seg button{min-width:4.5rem;padding:0 .9rem} .sa-seg button,.ac-seg button{border:0;background:none;border-radius:calc(var(--sa-r-md) - 3px);height:36px;font:inherit;font-size:var(--sa-fs-sm);font-weight:600;color:var(--sa-muted);cursor:pointer;transition:background-color .15s,color .15s} .sa-seg button.active,.ac-seg button.active{background:var(--tblr-primary);color:#fff} .ac-field{position:relative}.ac-field>svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--sa-muted);pointer-events:none} .ac-auth .form-control,#acApp .form-control{height:2.75rem;border-radius:var(--sa-r-md)}.ac-field .form-control{padding-left:2.6rem} .ac-pw .form-control{padding-right:4.5rem}.ac-pw button{position:absolute;right:.35rem;top:50%;transform:translateY(-50%)} .ac-meter{height:4px;border-radius:2px;background:var(--sa-card-line);margin-top:.4rem;overflow:hidden}.ac-meter i{display:block;height:100%;width:0;transition:width .2s,background .2s} .ac-go{height:2.75rem;border-radius:var(--sa-r-md);font-weight:700} .ac-or{display:flex;align-items:center;gap:.75rem;margin:var(--sa-sp-3) 0;color:var(--sa-muted);font-size:var(--sa-fs-xs);text-transform:uppercase;letter-spacing:.06em}.ac-or::before,.ac-or::after{content:"";flex:1;height:1px;background:var(--sa-card-line)} .ac-magic{display:inline-flex;align-items:center;justify-content:center;border-color:var(--sa-card-line)} .ac-tlab{display:inline-block;min-width:2.6rem;font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sa-muted)} .ac-team-b{flex-direction:column;gap:.3rem}.ac-tnext{font-weight:500}.ac-tnext.live-now{color:var(--tblr-red)} .ac-fine{font-size:var(--sa-fs-xs);color:var(--sa-muted);text-align:center;margin:var(--sa-sp-3) 0 0} .ac-perks{list-style:none;margin:var(--sa-sp-4) 0 0;padding:0 var(--sa-sp-2);display:grid;gap:var(--sa-sp-2);font-size:var(--sa-fs-sm);color:var(--sa-muted)} .ac-perks li{display:flex;align-items:center;gap:.6rem}.ac-perks i{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--sa-r-sm);background:var(--sa-card-bg);border:1px solid var(--sa-card-line);color:var(--sa-link)} .ac-card.ac-token{max-width:26rem;margin:var(--sa-sp-3) auto} .ac-sec{scroll-margin-top:calc(var(--sa-stick-top) + 1rem)}.ac-danger{border-color:color-mix(in srgb,var(--sa-alert) 35%,var(--sa-card-line))} /* Account page: identity strip, picks + teams cards, settings rows (details), danger zone */ .ac-id{display:flex;align-items:center;gap:var(--sa-sp-3);padding:var(--sa-sp-2) 0} .ac-ch{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sa-sp-3)}.ac-ch .card-title{margin:0}.ac-ch>.btn{flex:none} .ac-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--sa-card-line)} .ac-kpi{display:flex;flex-direction:column;gap:.1rem;padding:.75rem 1rem;color:inherit;text-decoration:none;min-width:0}.ac-kpi+.ac-kpi{border-left:1px solid var(--sa-card-line)} .ac-kpi:hover{background:color-mix(in srgb,var(--tblr-primary) 5%,transparent);color:inherit;text-decoration:none} .ac-kpi-l{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sa-muted)} .ac-kpi-v{font-size:1.5rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}.ac-kpi.good .ac-kpi-v{color:var(--tblr-green)} .ac-kpi-s{font-size:var(--sa-fs-xs);color:var(--sa-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ac-sub{display:flex;justify-content:space-between;align-items:baseline;padding:.45rem 1rem .3rem;font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sa-muted);background:color-mix(in srgb,var(--sa-page-bg) 70%,var(--sa-card-bg));border-top:1px solid var(--sa-card-line);border-bottom:1px solid var(--sa-card-line)} .ac-sub a{letter-spacing:0;text-transform:none;font-weight:600} .ac-prow{display:grid;grid-template-columns:5.5rem minmax(8rem,13rem) 1fr;gap:.35rem .75rem;align-items:center;padding:.55rem 1rem;color:inherit;text-decoration:none} .ac-prow+.ac-prow{border-top:1px solid var(--sa-card-line)}.ac-prow:hover{background:color-mix(in srgb,var(--tblr-primary) 5%,transparent);color:inherit;text-decoration:none} .ac-when{display:flex;flex-direction:column;line-height:1.15;font-variant-numeric:tabular-nums;font-size:var(--sa-fs-xs)}.ac-when-f{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--sa-muted)}.ac-when-t{font-weight:600} .ac-match{display:flex;align-items:center;gap:.35rem;min-width:0;font-size:var(--sa-fs-sm)}.ac-tm{display:inline-flex;align-items:center;gap:.3rem;padding-left:.35rem;border-left:3px solid var(--tc)}.ac-lg{margin-left:auto;font-size:var(--sa-fs-2xs);font-weight:600;color:var(--sa-muted)} .ac-chips{display:flex;flex-wrap:wrap;gap:.3rem} .ac-chip{display:inline-flex;align-items:center;gap:.3rem;height:28px;padding:0 .55rem;border-radius:8px;border:1px solid var(--pc-b,var(--sa-card-line));background:var(--pc-bg,var(--sa-card-bg));color:var(--pc-t,inherit);font-size:var(--sa-fs-xs);white-space:nowrap;font-variant-numeric:tabular-nums} .ac-chip-k{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.04em;opacity:.7}.ac-chip-r{font-weight:800}.ac-chip-n{opacity:.6} .ac-mv{padding:.05rem .35rem;border-radius:6px;font-size:var(--sa-fs-xs);font-weight:700}.ac-mv.good{background:color-mix(in srgb,var(--tblr-green) 16%,var(--sa-card-bg));color:color-mix(in srgb,var(--tblr-green) 80%,var(--sa-ink))}.ac-mv.bad{background:color-mix(in srgb,var(--tblr-red) 12%,var(--sa-card-bg));color:color-mix(in srgb,var(--tblr-red) 80%,var(--sa-ink))} .ac-open{--pc-b:color-mix(in srgb,var(--tblr-primary) 45%,transparent);--pc-bg:color-mix(in srgb,var(--tblr-primary) 7%,var(--sa-card-bg))}.ac-live{--pc-b:var(--tblr-red)} .ac-won{--pc-b:color-mix(in srgb,var(--tblr-green) 55%,transparent);--pc-bg:color-mix(in srgb,var(--tblr-green) 14%,var(--sa-card-bg));--pc-t:color-mix(in srgb,var(--tblr-green) 75%,var(--sa-ink))} .ac-lost{--pc-b:color-mix(in srgb,var(--tblr-red) 40%,transparent);--pc-bg:color-mix(in srgb,var(--tblr-red) 9%,var(--sa-card-bg));--pc-t:color-mix(in srgb,var(--tblr-red) 70%,var(--sa-ink))} .ac-push{--pc-b:color-mix(in srgb,var(--tblr-yellow) 55%,transparent);--pc-bg:color-mix(in srgb,var(--tblr-yellow) 12%,var(--sa-card-bg))} .ac-teams{display:grid}.ac-team{padding:.7rem 1rem;border-left:3px solid var(--tc)}.ac-team+.ac-team{border-top:1px solid var(--sa-card-line)} .ac-team-h{display:flex;align-items:center;gap:.6rem}.ac-tn{font-weight:700;color:inherit;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ac-tn:hover{color:var(--sa-link)} .ac-tmeta{font-size:var(--sa-fs-xs);color:var(--sa-muted);font-variant-numeric:tabular-nums} .ac-team-b{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin-top:.45rem;padding-left:2.4rem;font-size:var(--sa-fs-sm)} .ac-tnext,.ac-tlast{display:inline-flex;align-items:center;gap:.4rem;color:inherit;text-decoration:none;min-width:0}.ac-tnext:hover,.ac-tlast:hover{color:var(--sa-link)} .ac-tk{font-weight:600;font-variant-numeric:tabular-nums;color:var(--sa-ink)}.ac-tl{font-weight:700;font-variant-numeric:tabular-nums} .ac-res{display:inline-grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:6px;font-size:var(--sa-fs-xs);font-weight:800;color:#fff}.ac-res-w{background:var(--tblr-green)}.ac-res-l{background:var(--tblr-red)}.ac-res-t{background:var(--sa-muted)} .ac-sets{display:grid}.ac-set{border-top:1px solid var(--sa-card-line)}.ac-set:first-child{border-top:0} .ac-set>summary{list-style:none;display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;cursor:pointer;min-height:56px}.ac-set>summary::-webkit-details-marker{display:none} .ac-set>summary:hover{background:color-mix(in srgb,var(--tblr-primary) 5%,transparent)} .ac-set-i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--tblr-primary) 9%,var(--sa-card-bg));color:var(--sa-link);flex:none} .ac-set-t{display:flex;flex-direction:column;min-width:0;font-weight:700}.ac-set-s{font-weight:400;font-size:var(--sa-fs-xs);color:var(--sa-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ac-set-ch{margin-left:auto;position:relative;width:28px;height:28px;border-radius:50%;border:1px solid var(--sa-card-line);background:var(--sa-card-bg);flex:none} .ac-set-ch::before,.ac-set-ch::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:var(--sa-muted);transition:transform .15s} .ac-set-ch::after{transform:rotate(90deg)}.ac-set[open]>summary .ac-set-ch::after{transform:rotate(0)} /* Collapse / expand button: a solid disc with a strong ring and an ink icon, so it reads on the grey canvas and on white cards (WCAG 1.4.11 needs 3:1 for the ring). */ .card-header>.bt-collapse-btn{border:1.5px solid color-mix(in srgb,var(--sa-ink) 55%,transparent);border-radius:50%;width:28px;height:28px;padding:0;color:var(--sa-ink);background:var(--sa-card-bg);box-shadow:0 1px 2px rgba(15,23,42,.14)}.card-header>.bt-collapse-btn .icon{width:18px;height:18px;stroke-width:2.25} .card-header>.bt-collapse-btn:hover,.card-header>.bt-collapse-btn:focus-visible{border-color:var(--tblr-primary);color:var(--sa-link);background:var(--sa-card-bg)}.card-header>.bt-collapse-btn:focus-visible{outline:2px solid var(--tblr-primary);outline-offset:2px} .ac-set-b{padding:.25rem 1rem 1.1rem calc(1rem + 34px + .75rem);max-width:34rem} .ac-dz{text-align:center;padding-bottom:var(--sa-sp-4)}.ac-dz .ac-danger{text-align:left;margin-top:var(--sa-sp-2)} @media (max-width:575.98px){.ac-id .avatar-lg{width:2.75rem;height:2.75rem;font-size:1.1rem}.ac-kpi{padding:.6rem .7rem}.ac-kpi-v{font-size:1.25rem}.ac-prow{grid-template-columns:4.6rem 1fr;padding:.5rem .75rem}.ac-chips{grid-column:1 / -1} .ac-set-b{padding-left:1rem}.ac-team-b{padding-left:0}.ac-team,.ac-sub{padding-left:.75rem;padding-right:.75rem}} .ac-dev{display:flex;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-top:1px solid var(--sa-card-line);font-size:var(--sa-fs-sm)} /* Round Robin calculator (public-site/roundrobin.html + public/js/modules/round-robin.js). */ .rr-step{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--sa-ink);color:var(--sa-card-bg);font-size:var(--sa-fs-xs);font-weight:800} .rr-n{display:inline-grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--sa-page-bg);border:1px solid var(--sa-card-line);font-size:var(--sa-fs-xs);font-weight:700;color:var(--sa-muted)} .rr-pick{padding:.6rem 1rem;border-left:3px solid transparent}.rr-pick.rr-winner{border-left-color:var(--sa-good)}.rr-pick.rr-lost{border-left-color:var(--sa-alert)}.rr-pick.rr-push{border-left-color:var(--sa-muted)} .rr-pick .form-control{height:2.5rem;border-radius:var(--sa-r-sm)}.rr-odds{width:5.5rem;font-weight:700;font-variant-numeric:tabular-nums} .rr-out{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);background:var(--sa-page-bg);width:100%} .rr-ob{flex:1 1 0;min-width:0;height:34px;border:0;border-radius:calc(var(--sa-r-md) - 3px);background:none;color:var(--sa-muted);font:inherit;font-size:var(--sa-fs-sm);font-weight:700;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s} .rr-ob:hover{color:var(--tblr-body-color)}.rr-ob.active{color:#fff;background:var(--sa-muted)}.rr-ob-w.active{background:var(--sa-win)}.rr-ob-l.active{background:var(--sa-loss)}.rr-ob-p.active{background:var(--sa-push)}.rr-ob-open.active{background:var(--tblr-primary)} @media (min-width:768px){.rr-out{width:auto}.rr-ob{min-width:3.4rem;flex:0 0 auto}} .rr-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--sa-sp-2)} .rr-kpi{display:flex;flex-direction:column;gap:.1rem;padding:.8rem 1rem;border-radius:var(--sa-r-md);border:1px solid var(--sa-card-line);background:var(--sa-card-bg);min-width:0} .rr-kpi-l{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--sa-muted)} .rr-kpi-v{font-size:var(--sa-fs-lg);font-weight:800;color:var(--sa-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums} .rr-kpi-s{font-size:var(--sa-fs-xs);color:var(--sa-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rr-kpi-net .rr-kpi-v.text-green{color:var(--sa-good)!important}.rr-kpi-net .rr-kpi-v.text-red{color:var(--sa-alert)!important} #rrTiers .list-group-item{padding:.6rem 1rem}#rrTiers .form-check-input{width:1.15rem;height:1.15rem} @media (min-width:992px){.rr-results{position:sticky;top:calc(var(--sa-stick-top) + 1rem)}} @media (max-width:991.98px){body:has(.rr-dock){padding-bottom:calc(var(--sa-bnav-h) + 64px + env(safe-area-inset-bottom))!important}} .rr-dock{position:fixed;left:0;right:0;bottom:calc(var(--sa-bnav-h) + env(safe-area-inset-bottom));z-index:1029;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem 1rem;background:var(--sa-card-bg);border-top:1px solid var(--sa-card-line);box-shadow:0 -4px 12px rgba(15,23,42,.08);color:inherit;text-decoration:none;transition:transform .2s ease,opacity .2s ease} .rr-dock .subheader{font-size:var(--sa-fs-2xs)}.rr-dock b{font-variant-numeric:tabular-nums} .rr-dock.rr-dock-hide{transform:translateY(120%);opacity:0;pointer-events:none} @media (prefers-reduced-motion:reduce){.rr-dock{transition:none}} #rrApp details>summary{list-style:none;cursor:pointer}#rrApp details>summary::-webkit-details-marker{display:none}#rrApp details>summary::after{content:'\25BE';margin-left:auto;color:var(--sa-muted)}#rrApp details:not([open])>summary{border-bottom:0} #rrApp .card-header .btn-group .btn{min-height:2rem} @media (max-width:575.98px){#rrApp .card-table th,#rrApp .card-table td{padding-left:.5rem;padding-right:.5rem;font-size:var(--sa-fs-sm)}} /* ---- 7. Game page and week page (moved out of public-site/game-pages.js) ------------------------- */ /* gl-mini */ .gl-mini-wrap{position:sticky;top:var(--sa-stick-top,0px);z-index:20;height:0;margin-top:0!important} .gl-mini{position:absolute;left:calc(var(--tblr-gutter-x,1.5rem)*.5);right:calc(var(--tblr-gutter-x,1.5rem)*.5);top:0;background:var(--tblr-bg-surface);border:1px solid var(--tblr-border-color);border-top:0;border-radius:0 0 12px 12px; box-shadow:0 6px 18px rgba(0,0,0,.12);padding:.45rem .8rem;transform:translateY(-110%);opacity:0;transition:transform .2s ease,opacity .2s ease;cursor:pointer;pointer-events:none} .gl-mini.show{transform:none;opacity:1;pointer-events:auto}.gl-mini.gl-live{border-color:var(--tblr-red);box-shadow:inset 3px 0 0 var(--tblr-red),0 6px 18px rgba(0,0,0,.12)} .gl-mini .gl-sit{margin-top:.15rem;font-size:var(--sa-fs-xs)}.gl-mini .gl-sit-last{display:none} .gl-mini-nav a{color:var(--tblr-secondary);text-decoration:none}.gl-mini-nav a:hover{color:var(--sa-link)}[id^="sec-"]{scroll-margin-top:6rem} /* gl-live */ .gl-top.gl-live{border-color:var(--tblr-red);box-shadow:0 0 0 1px var(--tblr-red)}.gl-sit{margin-top:.5rem;font-size:var(--sa-fs-sm);line-height:1.35} .gl-sit-last{font-size:var(--sa-fs-xs);color:var(--tblr-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* rating-trajectory */ .rt-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem .75rem;margin-bottom:.35rem} .rt-teams{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem}.rt-team{display:inline-flex;align-items:center;gap:.4rem;font-variant-numeric:tabular-nums;white-space:nowrap} .rt-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--rc)}.rt-plot{position:relative;height:140px}@media (max-width:575.98px){.rt-plot{height:120px}} .rt-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .rt-s,.rt-dot,.rt-pt{--rc:var(--c)}[data-bs-theme=dark] .rt-s,[data-bs-theme=dark] .rt-dot,[data-bs-theme=dark] .rt-pt{--rc:color-mix(in srgb,var(--c) 60%,#fff)} .rt-s{stroke:var(--rc)}.rt-pt{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--rc);box-shadow:0 0 0 2px var(--tblr-bg-surface);cursor:pointer;transition:transform .12s} .rt-pt::after{content:"";position:absolute;inset:-9px;border-radius:50%}.rt-pt:hover,.rt-pt:focus-visible{transform:scale(1.35);outline:none} .rt-axis{display:flex;justify-content:space-between;font-size:var(--sa-fs-xs);color:var(--tblr-secondary);margin-top:.15rem} /* line-movement (Market card): stepped market line in ink, dashed model reference in indigo */ .lm-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;font-size:var(--sa-fs-sm);margin:.5rem 0 .2rem}.lm-row .sa-caps{margin:0}.lm-now{font-variant-numeric:tabular-nums} .lm-model{color:#92400e;cursor:pointer;white-space:nowrap}[data-bs-theme=dark] .lm-model{color:#fcd34d}.lm-model::before{content:"";display:inline-block;width:.85em;height:.7em;border-radius:3px;border:1.5px dashed currentColor;background:repeating-linear-gradient(135deg,currentColor 0 1.5px,transparent 1.5px 4px);vertical-align:-1px;margin-right:.35em} .lm-tabs{box-shadow:none}.lm-cap{font-weight:600}.lm-row .lm-mgrp{margin-left:auto;display:inline-flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:.15rem .5rem} .lm-eq{padding:.05rem .5rem;border-radius:var(--sa-r-pill);border:1px solid var(--sa-good);background:color-mix(in srgb,var(--sa-good) 12%,var(--sa-card-bg));color:var(--sa-good);font-weight:700;font-size:var(--sa-fs-xs);white-space:nowrap;cursor:pointer} .pc-spark{display:inline-block;width:26px;height:10px;vertical-align:-1px;margin-right:.25rem;stroke:var(--sa-watch)}@container (max-width:380px){.pc-spark{display:none}} /* Line movement chart: a light-blue tinted plot; the line is a solid sky-blue area, the model a striped amber band under a dashed edge with its number written on it. Blue against amber survives every common colour blindness, and stripes + dashes + the label separate them in greyscale too. */ .lm-plot{--lm-line:#0369a1;--lm-model:#d97706;--lm-ink:#92400e;height:110px;border-radius:var(--sa-r-sm);background:color-mix(in srgb,#38bdf8 9%,var(--sa-card-bg))} [data-bs-theme=dark] .lm-plot{--lm-line:#7dd3fc;--lm-model:#f59e0b;--lm-ink:#fcd34d;background:color-mix(in srgb,#38bdf8 10%,var(--sa-card-bg))} @media (max-width:575.98px){.lm-plot{height:96px}} .lm-s{stroke:var(--lm-line)}.lm-g0{stop-color:var(--lm-line);stop-opacity:.5}.lm-g1{stop-color:var(--lm-line);stop-opacity:.06} .lm-mband{position:absolute;bottom:0;border-top:2px dashed var(--lm-model);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--lm-model) 42%,transparent) 0 2px,transparent 2px 8px)} .lm-mtag{position:absolute;transform:translateX(-50%);bottom:100%;margin-bottom:2px;padding:0 .35rem;border-radius:5px;background:var(--sa-card-bg);border:1px solid var(--lm-model);color:var(--lm-ink);font-size:var(--sa-fs-2xs);font-weight:700;line-height:1.35;white-space:nowrap} .lm-mtag-in{bottom:auto;top:0;margin:4px 0 0} .lm-plot .lm-pt{--c:var(--lm-line);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--sa-card-bg);border:2px solid var(--lm-line);box-shadow:none;box-sizing:border-box} .lm-keys{display:inline-flex;align-items:center;gap:.3rem}.lm-sw{display:inline-block;width:.8rem;height:.7rem;border-radius:3px;vertical-align:-1px} .lm-sw-line{background:#0369a1}.lm-sw-model{border:1.5px dashed #d97706;background:repeating-linear-gradient(135deg,rgba(217,119,6,.6) 0 2px,transparent 2px 4px)} [data-bs-theme=dark] .lm-sw-line{background:#7dd3fc}[data-bs-theme=dark] .lm-sw-model{border-color:#f59e0b;background:repeating-linear-gradient(135deg,rgba(245,158,11,.7) 0 2px,transparent 2px 4px)} /* matchup-stats */ .ms-panel{border:1px solid var(--tblr-border-color);border-radius:12px;padding:.75rem;height:100%} .ms-team{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .6rem;border-radius:99px;font-weight:700;background:color-mix(in srgb,var(--c) 14%,var(--tblr-bg-surface));border:1px solid color-mix(in srgb,var(--c) 45%,var(--tblr-bg-surface));white-space:nowrap} .ms-verdict{font-size:var(--sa-fs-xs);font-weight:700;padding:.2rem .55rem;border-radius:99px;white-space:nowrap} .ms-v{font-variant-numeric:tabular-nums;font-weight:600;padding:.08rem .4rem;border-radius:6px}.ms-win{font-weight:800;background:color-mix(in srgb,var(--c) 16%,var(--tblr-bg-surface));box-shadow:inset 3px 0 0 var(--c)} .mk-c1,.mk-c2{min-width:0} @media (min-width:768px){.gt-panel .mk-wide .mk-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1.75rem}.gt-panel .mk-wide .mk-c2{border-left:1px solid var(--sa-card-line);padding-left:1.75rem}.gt-panel .mk-wide .mk-c2>:first-child{margin-top:0!important;padding-top:0!important;border-top:0!important}} .mx-cols{display:grid;gap:1.25rem} @media (min-width:992px){.gt-panel .mx-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1.75rem}.gt-panel .mx-c2{border-left:1px solid var(--sa-card-line);padding-left:1.75rem}} .mx-row{display:grid;grid-template-columns:1fr 7.5rem 1fr;align-items:end;gap:.6rem;padding:.45rem 0}.mx-row+.mx-row{border-top:1px solid var(--tblr-border-color-translucent,rgba(4,32,69,.1))} .mx-head{align-items:center;padding-top:0}.mx-l{text-align:right}.mx-num{font-size:var(--sa-fs-xs);font-variant-numeric:tabular-nums;margin-bottom:.2rem;white-space:nowrap} .mx-track{position:relative;display:flex;height:12px;border-radius:6px;background:var(--tblr-bg-surface-secondary,#eef1f4)}.mx-l .mx-track{justify-content:flex-end} .mx-track::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;border-left:1px dashed var(--tblr-gray-500,#9ba9be)} .mx-bar{height:100%;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}.mx-mid{text-align:center}.mx-lab{font-weight:700;font-size:var(--sa-fs-sm);margin-bottom:.15rem} .mx-tag{display:inline-block;font-size:var(--sa-fs-xs);font-weight:700;padding:.1rem .45rem;border-radius:99px;white-space:nowrap}.mx-even{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)} /* conditions */ .gc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem} .gc-tile{--t:var(--tblr-primary);padding:.7rem .8rem;border-radius:12px;border:1px solid color-mix(in srgb,var(--t) 20%,var(--tblr-border-color));background:color-mix(in srgb,var(--t) 6%,var(--tblr-bg-surface));min-width:0} .gc-span{grid-column:1/-1}.gc-warn{--t:var(--tblr-orange)}.gc-alert{--t:var(--tblr-red)}.gc-muted{--t:var(--tblr-secondary);opacity:.8} .gc-top{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem}.gc-lab{font-size:var(--sa-fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--tblr-secondary)} .gc-ico{display:inline-flex;width:22px;height:22px;border-radius:50%;align-items:center;justify-content:center;color:var(--t);background:color-mix(in srgb,var(--t) 16%,transparent)}.gc-ico svg{width:13px;height:13px} .gc-val{font-size:var(--sa-fs-md);font-weight:700;line-height:1.25;font-variant-numeric:tabular-nums}.gc-dim{font-weight:500;color:var(--tblr-secondary);font-size:var(--sa-fs-sm)} .gc-sub{font-size:var(--sa-fs-xs);color:var(--tblr-secondary);margin-top:.2rem;line-height:1.3} .gc-team{display:inline-flex;align-items:center;gap:.3rem} .gc-rest{display:flex;justify-content:space-between;gap:.5rem;font-size:var(--sa-fs-sm);font-weight:500}.gc-rest.gc-more{font-weight:800} .gc-pill{font-size:var(--sa-fs-2xs);font-weight:700;text-transform:uppercase;padding:.05rem .35rem;border-radius:99px;vertical-align:middle}.gc-pill-warn{background:var(--tblr-orange-lt);color:var(--tblr-orange)}.gc-pill-good{background:var(--tblr-green-lt);color:var(--tblr-green)} .gc-meter{position:relative;height:6px;margin:.45rem 0 .15rem;border-radius:99px;background:linear-gradient(90deg,var(--tblr-azure-lt),var(--tblr-bg-surface-secondary,#eef1f4) 50%,var(--tblr-orange-lt))} .gc-meter::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;border-left:1px dashed var(--tblr-secondary)} .gc-meter span{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--t);box-shadow:0 0 0 2px var(--tblr-bg-surface)} .gc-ends{display:flex;justify-content:space-between;font-size:var(--sa-fs-2xs);color:var(--tblr-secondary)} /* game-banner */ .gb{overflow:hidden;background:var(--sa-card-bg);border-top:4px solid;border-image:linear-gradient(90deg,var(--ca) 0 50%,var(--ch) 50% 100%) 1} .gb:has(.lp[open]){overflow:visible}@media (max-width:575.98px){.gb .lp-center .lp-body{left:0;transform:none}} .gb-head{display:flex;flex-wrap:wrap;justify-content:center;gap:.15rem .6rem;padding:.45rem .75rem;font-size:var(--sa-fs-xs);color:var(--tblr-secondary);border-bottom:1px solid var(--sa-card-line);background:color-mix(in srgb,var(--sa-page-bg) 70%,var(--sa-card-bg))} /* Teams sit near the centre on wide screens (no empty middle); tight vertical padding so the logos clear the strip. */ .gb-body{padding:.9rem 1rem .35rem}.gb-teams{max-width:44rem;margin:0 auto} .gb-chips{margin-bottom:.75rem}.gb-picks{padding-top:.6rem} .gb-logo{padding:.35rem;border-radius:50%;background:var(--tblr-bg-surface);box-shadow:0 2px 8px rgba(0,0,0,.08)} .gb-pts{font-size:2.6rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.gb-pts.gb-lost{color:var(--tblr-secondary);font-weight:600} .gb-pts.gb-proj{font-size:2rem;color:var(--sa-model);background:color-mix(in srgb,var(--sa-model) 10%,var(--sa-card-bg));padding:.15rem .6rem;border-radius:var(--sa-r-md)} .gb-st{display:inline-block;font-weight:700;font-size:var(--sa-fs-xs);letter-spacing:.05em;text-transform:uppercase;padding:.15rem .6rem;border-radius:99px}.gb-final{background:var(--sa-ink);color:var(--sa-card-bg)}.gb-time{background:var(--tblr-bg-surface);border:1px solid var(--tblr-border-color);color:var(--tblr-body-color)} .gb-at{font-size:1.1rem;font-weight:700;color:var(--tblr-secondary);margin-top:.35rem} .gb-teams>[class*=col-]{min-width:0}.gb-teams .gl-sit{overflow-wrap:anywhere}.gb-live-btn{max-width:100%;white-space:normal;line-height:1.2} .gb-prob{display:flex;align-items:center;gap:.6rem;padding:0 1rem .75rem;font-size:var(--sa-fs-xs);color:var(--tblr-secondary);white-space:nowrap}.gb-fav{color:var(--tblr-body-color);font-weight:700} .gb-bar{flex:1;display:flex;gap:2px;height:8px;border-radius:99px;overflow:hidden}.gb-bar>span{display:block} .gb-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 1rem 1rem;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);overflow:hidden}.gb-chip{padding:.55rem .5rem;text-align:center;min-width:0;background:var(--sa-card-bg)}.gb-chip+.gb-chip{border-left:1px solid var(--sa-card-line)} .gb-green{background:color-mix(in srgb,var(--sa-ats) var(--sa-tint),var(--sa-card-bg))}.gb-azure{background:color-mix(in srgb,var(--sa-over) var(--sa-tint),var(--sa-card-bg))}.gb-purple{background:color-mix(in srgb,var(--sa-model) var(--sa-tint),var(--sa-card-bg))}.gb-purple .gb-cl,.gb-purple .gb-cm{color:var(--sa-model)}.gb-cm{color:var(--sa-ink)} .gb-cl{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tblr-secondary)}.gb-cm{font-weight:800;font-size:var(--sa-fs-md);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.gb-cs{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)}.gb-chip .lp{font-size:var(--sa-fs-2xs)} .gb-picks{padding:.75rem 1rem 1rem;border-top:1px dashed var(--tblr-border-color)}.gb-picks-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:.45rem;font-size:var(--sa-fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tblr-secondary)} .gb-picks-link{font-size:var(--sa-fs-xs);text-transform:none;letter-spacing:0}.gb-picks-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}.gb-pg .gb-cl{margin-bottom:.25rem;text-align:center}.gb-pb{display:flex;gap:.35rem} .gb-pk{flex:1 1 0;min-width:0;min-height:40px;padding:.35rem .25rem;border:1px solid var(--tblr-border-color);border-radius:10px;background:var(--tblr-bg-surface);color:var(--tblr-body-color);font-weight:700;font-size:var(--sa-fs-sm);font-variant-numeric:tabular-nums;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,border-color .12s,color .12s} .gb-pk:hover{border-color:var(--tblr-primary)}.gb-pk:focus-visible{outline:2px solid var(--tblr-primary);outline-offset:1px}.gb-pk.active{background:var(--tblr-primary);border-color:var(--tblr-primary);color:#fff}.gb-pk.active::before{content:"\2713 "} .gb-mine{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;padding:.6rem 1rem .9rem;border-top:1px dashed var(--tblr-border-color)} @media (max-width:575.98px){.gb-pts{font-size:2rem}.gb-pts.gb-proj{font-size:1.6rem}.gb-chips{gap:.35rem;padding:0 .6rem .75rem}.gb-cm{font-size:var(--sa-fs-sm)}.gb-cs{font-size:var(--sa-fs-2xs)}.gb-chip{padding:.45rem .3rem} .gb-picks{padding:.6rem .6rem .75rem}.gb-picks-g{grid-template-columns:1fr;gap:.4rem}.gb-pg{display:flex;align-items:center;gap:.5rem}.gb-pg .gb-cl{width:3.4rem;flex-shrink:0;margin:0;text-align:left}.gb-pb{flex:1}.gb-pk{min-height:44px;font-size:var(--sa-fs-sm)}} /* game-nav */ .gn{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:.75rem;align-items:stretch} .gn-card{display:flex;align-items:center;gap:.6rem;min-width:0;padding:.55rem .8rem;border:1px solid var(--tblr-border-color);border-radius:12px;background:var(--tblr-bg-surface);color:inherit;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .12s,box-shadow .12s,border-color .12s} .gn-card:hover,.gn-card:focus-visible{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.1);border-color:var(--tblr-primary);text-decoration:none} .gn-next{justify-content:flex-end;text-align:right;border-color:color-mix(in srgb,var(--tblr-primary) 45%,var(--tblr-border-color));background:color-mix(in srgb,var(--tblr-primary) 8%,var(--tblr-bg-surface))}.gn-next .gn-m{justify-content:flex-end} .gn-body{display:flex;flex-direction:column;min-width:0;line-height:1.2}.gn-k{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tblr-secondary)}.gn-next .gn-k{color:var(--sa-link)} .gn-m{display:flex;align-items:center;gap:.4rem;font-weight:700;min-width:0}.gn-logos{display:inline-flex;flex-shrink:0;gap:4px}.gn-logos img+img{margin-left:0}.gn-s{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)} .gn-arrow{font-size:1.75rem;line-height:1;font-weight:300;color:var(--tblr-secondary)}.gn-next .gn-arrow{color:var(--sa-link)} .gn-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-width:7rem;padding:0 .25rem;color:var(--tblr-secondary);text-decoration:none;font-size:var(--sa-fs-xs)}.gn-mid b{font-size:var(--sa-fs-md);color:var(--tblr-body-color);font-variant-numeric:tabular-nums}.gn-mid:hover{color:var(--sa-link)} .gn-bar{width:100%;height:4px;border-radius:2px;background:var(--tblr-border-color);overflow:hidden}.gn-bar i{display:block;height:100%;background:var(--tblr-primary)} .gn-empty{visibility:hidden}.gn-big{padding:.9rem 1.1rem;justify-content:space-between;text-align:left}.gn-big .gn-m{font-size:1.1rem;justify-content:flex-start}.gn-big .gn-arrow{font-size:2.25rem} @media (max-width:575.98px){.gn{grid-template-columns:1fr 1fr;gap:.5rem}.gn-mid{grid-column:1 / -1;grid-row:2;flex-direction:row;gap:.5rem;min-width:0}.gn-mid .gn-bar{width:5rem}.gn-card{padding:.5rem .6rem}.gn-arrow{font-size:1.4rem}.gn-s{display:none}} /* Slim game switcher under the banner: one row, pill links, progress in the middle. */ /* End-of-page pair: two equal cards, previous | next; stacked on phones. */ .gn-end{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem}.gn-end .gn-card{min-height:4.5rem}.gn-end .gn-prev{justify-content:flex-start;text-align:left}.gn-end .gn-next{justify-content:flex-end;text-align:right}.gn-end .gn-next .gn-m{justify-content:flex-end} @media (max-width:575.98px){.gn-end{grid-template-columns:1fr}.gn-end .gn-empty{display:none}} .gn-slim{align-items:center;gap:.5rem} .gn-slim .gn-card{padding:.3rem .7rem .3rem .5rem;border-radius:var(--sa-r-pill);box-shadow:none;background:var(--sa-card-bg);border-color:var(--sa-card-line);min-height:40px} .gn-slim .gn-next{padding:.3rem .5rem .3rem .7rem;background:color-mix(in srgb,var(--tblr-primary) 8%,var(--sa-card-bg));border-color:color-mix(in srgb,var(--tblr-primary) 40%,var(--sa-card-line))} .gn-slim .gn-k,.gn-slim .gn-s{display:none} .gn-slim .gn-m{font-size:var(--sa-fs-sm)}.gn-slim .gn-logos img{width:20px;height:20px} .gn-slim .gn-arrow{font-size:1.4rem} .gn-slim .gn-mid{min-width:6rem;font-size:var(--sa-fs-2xs)}.gn-slim .gn-mid b{font-size:var(--sa-fs-sm)}.gn-slim .gn-mid>span:first-child{display:none} @media (max-width:575.98px){.gn-slim{grid-template-columns:1fr auto 1fr}.gn-slim .gn-mid{grid-column:auto;grid-row:auto;flex-direction:column;gap:.1rem;min-width:4.5rem}.gn-slim .gn-mid .gn-bar{width:3.5rem}.gn-slim .gn-mid>span:last-child{display:none}.gn-slim .gn-m .text-truncate{max-width:6.5rem}} /* Result chips: W / L / P and O / U as solid fills with a white letter, the same on every page (.sa-res is the chip, -w / -l / -p / -o / -u its colour). */ .sa-res{display:inline-flex;align-items:center;justify-content:center;min-width:1.75rem;height:1.5rem;padding:0 .5rem;border-radius:var(--sa-r-sm);font-size:var(--sa-fs-xs);font-weight:700;line-height:1;letter-spacing:.02em;white-space:nowrap;vertical-align:middle;text-transform:none} .sa-res-w,.sa-res-l,.sa-res-p,.sa-res-o,.sa-res-u{color:#fff;background:var(--sa-res-bg)} .sa-res-w{--sa-res-bg:var(--sa-win)}.sa-res-l{--sa-res-bg:var(--sa-loss)}.sa-res-p{--sa-res-bg:var(--sa-push)}.sa-res-o{--sa-res-bg:var(--sa-over-fill)}.sa-res-u{--sa-res-bg:var(--sa-under-fill)} /* gp-form */ .gp-form{display:flex;gap:2px}.gp-form span{display:inline-flex;align-items:center;justify-content:center;width:1.1rem;height:1.1rem;border-radius:3px;font-size:var(--sa-fs-2xs);font-weight:700;cursor:help} /* week-page */ .wk-help{text-decoration:underline dotted;cursor:help} .wk-tq{flex:1 1 0;min-width:0;padding:.45rem .5rem;border:1px solid var(--tblr-border-color);border-radius:8px;transition:border-color .15s,box-shadow .15s} .wk-tq:hover{border-color:var(--tblr-primary)}.wk-tq.wk-on{border-color:var(--tblr-primary);box-shadow:inset 0 0 0 1px var(--tblr-primary)} .wk-tq-top{display:flex;align-items:center;gap:.5rem;color:inherit;text-decoration:none}.wk-tq-top:hover{text-decoration:none}.wk-tq-top.wk-on .wk-tq-n,.wk-tq-top:hover .wk-tq-n{color:var(--sa-link)} .wk-tq-ic{width:1.75rem;height:1.75rem;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:var(--sa-fs-xs)} .wk-tq-n{font-weight:700;font-size:1.15rem;line-height:1}.wk-tq-s{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)} .wk-tq-bar{display:flex;height:4px;border-radius:2px;overflow:hidden;background:var(--tblr-border-color);margin:.45rem 0} .wk-tq-r{flex:1 1 0;min-width:0;display:block;padding:.2rem .45rem;border-radius:6px;background:var(--tblr-bg-surface-secondary);color:inherit;text-decoration:none;line-height:1.25;white-space:nowrap} .wk-tq-r:hover{text-decoration:none;box-shadow:inset 0 0 0 1px var(--tblr-primary)}.wk-tq-r.wk-on{background:var(--tblr-primary);color:#fff}.wk-tq-r.wk-on .text-secondary{color:rgba(255,255,255,.85)!important} #wkGroups,#wkTable,#wkTiles{font-variant-numeric:tabular-nums} #wkGroups .wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:.75rem;padding:.75rem;background:var(--tblr-bg-surface-secondary,var(--tblr-bg-surface))} #wkGroups .wk-grid>.list-group-item{border:0!important;padding:0!important;margin:0!important;background:none!important;border-radius:0!important;box-shadow:none!important} @media (max-width:575.98px){#wkGroups .wk-grid{grid-template-columns:minmax(0,1fr);padding:.5rem;gap:.5rem}} #wkGroups .wk-kb{outline:none!important}#wkGroups .wk-kb>.pc{outline:2px solid var(--tblr-primary);outline-offset:2px} #wkTable td.wk-tcg{background:color-mix(in srgb,var(--tblr-green) 7%,var(--tblr-bg-surface))}#wkTable td.wk-tca{background:color-mix(in srgb,var(--tblr-azure) 7%,var(--tblr-bg-surface))}#wkTable td.wk-tcp{background:color-mix(in srgb,var(--tblr-purple) 6%,var(--tblr-bg-surface))} #wkTable th.wk-thg{color:var(--tblr-green)}#wkTable th.wk-tha{color:var(--tblr-azure)}#wkTable th.wk-thp{color:var(--tblr-purple)}#wkTable td .small{color:var(--tblr-secondary)} #wkTable td.wk-tst{background:linear-gradient(180deg,color-mix(in srgb,var(--ta) 12%,var(--tblr-bg-surface)),color-mix(in srgb,var(--th) 12%,var(--tblr-bg-surface)));text-align:center;width:6.5rem} #wkTable td.wk-tgame{min-width:16rem}#wkTable td.wk-tgame .pc-team{padding:.12rem 0 .12rem .5rem;gap:.5rem}#wkTable td.wk-tgame .pc-team img{width:22px;height:22px}#wkTable td.wk-tgame .pc-name a{font-size:var(--sa-fs-sm)}#wkTable td.wk-tgame .pc-rec{font-size:var(--sa-fs-2xs)} #wkTable td.wk-tgame .pc-score{font-size:1.2rem}#wkTable td.wk-tgame .pc-proj{font-size:var(--sa-fs-md)}#wkTable td.wk-tgame .pc-prob{padding:.3rem 0 0}#wkTable .pc-st{white-space:nowrap} #wkTable tbody tr>td{border-bottom-color:var(--tblr-border-color)}#wkTable tbody tr.wk-live>td.wk-tst{background:color-mix(in srgb,var(--tblr-red) 14%,var(--tblr-bg-surface))} #wkTable td.wk-tpc{display:none}@media (max-width:767.98px){#wkTable thead{display:none}#wkTable tbody tr>td:not(.wk-tpc):not([colspan]){display:none!important}#wkTable tbody tr>td.wk-tpc{display:block;padding:.4rem .5rem;border:0}#wkTable tbody tr{display:block;border:0}#wkTable tbody tr.wk-kb{outline:none!important}} #wkLiveWrap .btn{background:var(--tblr-bg-surface);color:var(--tblr-red);border-color:var(--tblr-red);box-shadow:none}#wkLiveWrap .btn .badge{background:var(--tblr-red);color:#fff} #wkLive:checked+.btn{background:var(--tblr-red);color:#fff}#wkLive:checked+.btn .badge{background:#fff;color:var(--tblr-red)}#wkLive:checked+.btn .status-dot{background:#fff!important} #wkLive:checked+.btn .wk-lv-off,#wkLive:not(:checked)+.btn .wk-lv-on{display:none}#wkLive:focus-visible+.btn{outline:2px solid var(--tblr-red);outline-offset:2px} @media (hover:hover){#wkLive:not(:checked)+.btn:hover{background:var(--tblr-red-lt)}} @media (max-width:767.98px){#wkList .table-responsive{overflow:visible}} #wkConf{width:100%} .wk-bar{background:color-mix(in srgb,var(--tblr-primary) 6%,var(--tblr-bg-surface));border-color:color-mix(in srgb,var(--tblr-primary) 22%,var(--tblr-border-color));box-shadow:0 4px 14px rgba(32,107,196,.09)} .wk-bar .form-control,.wk-bar .wk-row .btn,.wk-bar .nav-segmented{background-color:var(--tblr-bg-surface)} #wkFilters{position:relative}.wk-search{flex:0 1 17rem;min-width:9rem}.wk-tabs{min-width:0;max-width:100%}@media (min-width:768px) and (max-width:1399.98px){.wk-search{flex-basis:13rem}} #wkActive .wk-chip{border:0;border-radius:99px;padding:.15rem .65rem;font-size:var(--sa-fs-xs);background:color-mix(in srgb,var(--tblr-primary) 14%,var(--tblr-bg-surface));color:var(--sa-link)} #wkActive .wk-chip:hover{background:color-mix(in srgb,var(--tblr-primary) 24%,var(--tblr-bg-surface))} #wkSheet .wk-more-menu label{cursor:pointer} /* Quick filters under the bar: one tap each; phones scroll the row sideways. */ .wk-quick{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sa-sp-2);margin-top:var(--sa-sp-2)} @media (max-width:767.98px){.wk-quick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1*var(--sa-sp-1));padding:0 var(--sa-sp-1) 2px}.wk-quick::-webkit-scrollbar{display:none}} .wk-qchip{flex-shrink:0;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-pill);background:var(--sa-card-bg);color:var(--tblr-body-color);font-size:var(--sa-fs-sm);font-weight:500;line-height:1.2;padding:.35rem .8rem;cursor:pointer;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s} .wk-qchip:hover{border-color:var(--tblr-primary);color:var(--sa-link)} .wk-qchip.active{background:var(--tblr-primary);border-color:var(--tblr-primary);color:#fff} .wk-qchip:focus-visible,.wk-edge-seg .nav-link:focus-visible{outline:2px solid var(--tblr-primary);outline-offset:2px} .wk-q-conf{flex:0 0 auto;width:auto;max-width:12rem;border-radius:var(--sa-r-pill);font-size:var(--sa-fs-sm)} .wk-q-conf.wk-on{border-color:var(--tblr-primary);color:var(--sa-link);font-weight:500} @media (prefers-reduced-motion:reduce){.wk-qchip{transition:none}} /* Filter pills, site-wide (docs/DESIGN.md §2; markup from pages.js filterPill / choicePill, behaviour in public/js/filter-pills.js): one row of dropdown pills; each opens a popover (a bottom sheet on phones). A pill that holds a value turns blue, says what it holds, and gets a ✕ to clear it. */ .wk-row1{display:flex;align-items:center;gap:var(--sa-sp-2)}.wk-row1 .wk-search{flex:0 1 22rem;min-width:0} .wk-row1 .wk-right{margin-left:auto;display:flex;align-items:center;gap:var(--sa-sp-3)} .wk-pills{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sa-sp-2);margin-top:var(--sa-sp-2)} .wk-pill-w{position:relative;flex-shrink:0} .wk-pill{display:inline-flex;align-items:center;gap:.4rem;height:34px;padding:0 .75rem 0 .9rem;border:1px solid color-mix(in srgb,var(--tblr-body-color) 30%,transparent);border-radius:var(--sa-r-pill);background:var(--sa-card-bg);color:var(--tblr-body-color);font:inherit;font-size:var(--sa-fs-sm);font-weight:600;white-space:nowrap;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s} .wk-pill:hover{border-color:var(--tblr-primary);color:var(--sa-link)} .wk-pill.open,.wk-pill.active,.wk-pill:focus-visible{border-color:var(--tblr-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--tblr-primary) 22%,transparent);outline:none} .wk-pill.on{background:var(--tblr-primary);border-color:var(--tblr-primary);color:#fff} .wk-reset{position:relative;display:inline-flex;align-items:center;gap:.4rem;flex-shrink:0;height:34px;padding:0 .95rem 0 .75rem;border:1px solid var(--sa-link);border-radius:var(--sa-r-pill);background:color-mix(in srgb,var(--sa-link) 8%,var(--sa-card-bg));font:inherit;font-size:var(--sa-fs-sm);font-weight:600;color:var(--sa-link);cursor:pointer;white-space:nowrap;text-decoration:none} .wk-reset [data-icon]{display:inline-flex;width:16px;height:16px}.wk-reset [data-icon] svg{width:16px;height:16px} .wk-reset:hover{background:color-mix(in srgb,var(--sa-link) 16%,var(--sa-card-bg));color:var(--sa-link);text-decoration:none}.wk-reset:focus-visible{outline:2px solid var(--sa-link);outline-offset:2px} .wk-reset:disabled{opacity:.45;cursor:not-allowed}.wk-reset[hidden]{display:none!important} /* Reset filters, everywhere one pill: under the filter pills, on its own row at the right edge, with no background behind it (it appears once a filter is set). */ .wk-reset-row{display:flex;justify-content:flex-end}.wk-reset-row .wk-reset{margin-top:var(--sa-sp-2)} .wk-pop-f .wk-reset{height:32px}.pk-active .wk-reset{height:30px} /* Status group (All / Live / Upcoming / Final) stays visible at the start of the pill row; Live is red when on. */ .wk-pills .wk-status{height:34px;padding:2px;flex-shrink:0}.wk-pills .wk-st{height:28px;padding:0 .65rem} .wk-pills .wk-st[data-st="live"].active{background:var(--sa-alert)}.wk-pills .wk-st[data-st="live"].active .status-dot{background:#fff!important} .wk-pill-c{font-size:var(--sa-fs-sm);line-height:1;font-weight:700;opacity:1;color:var(--sa-ink);transition:transform .15s}.wk-pill.open .wk-pill-c{transform:rotate(180deg)}.wk-pill.on .wk-pill-c{display:none} .wk-pill-x{position:absolute;right:.45rem;top:50%;transform:translateY(-50%);border:0;background:none;color:inherit;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-size:var(--sa-fs-2xs);cursor:pointer}.wk-pill-x[hidden]{display:none}.wk-pill.on{padding-right:2rem}.wk-pill-x:hover,.wk-pill-x:focus-visible{background:rgba(255,255,255,.28);outline:none}.wk-pill-x[hidden]{display:none} .wk-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:30;width:21rem;max-width:calc(100vw - 16px);background:var(--sa-card-bg);border:1px solid var(--sa-card-line);border-radius:var(--sa-r-lg);box-shadow:0 12px 32px rgba(15,23,42,.18)} .wk-pop[hidden]{display:none} .wk-pop.wk-pop-fit{display:flex;flex-direction:column;overflow:hidden} /* The popover keeps its footer (Show games) in view and only the body scrolls: always a column, so fitting a short window changes max-height only. */ .wk-pop:has(>.wk-pop-b):not([hidden]){display:flex;flex-direction:column;overflow:hidden}.wk-pop:has(>.wk-pop-b)>.wk-pop-h,.wk-pop:has(>.wk-pop-b)>.wk-pop-f{flex:none}.wk-pop:has(>.wk-pop-b)>.wk-pop-b{flex:1 1 auto;min-height:0;overflow-y:auto}.wk-pop-fit .wk-pop-h,.wk-pop-fit .wk-pop-f{flex:none}.wk-pop-fit .wk-pop-b{flex:1 1 auto;min-height:0;overflow-y:auto} .wk-pop-h{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem .2rem;font-weight:700} .wk-pop-b{padding:.5rem 1rem 1rem}.wk-pop-f{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1rem;border-top:1px solid var(--sa-card-line)} .wk-pop-v{font-size:var(--sa-fs-lg);font-weight:800;color:var(--sa-ink);margin-bottom:.35rem} /* Best picks: past-weeks tables */ .bp-week .card-table td,.bp-week .card-table th{padding-top:.4rem;padding-bottom:.4rem} .wk-pill-week::after{content:'\25be';font-size:var(--sa-fs-sm);font-weight:700;opacity:1;color:var(--sa-ink);margin-left:.4rem}#pkWeekMenu.wk-pop{position:absolute;top:calc(100% + 8px);left:0} /* Round robin: result and stepper buttons are real tap targets on phones. */ [onclick^="RR.setOutcome"],[onclick^="RR.setStakeMode"]{min-height:44px!important}[data-rr-step]{min-height:44px!important;min-width:44px!important} /* Phones: tile action buttons and card collapse buttons are 36px tall at least. */ @media (max-width:767.98px){.pc-foot .gp-act,.gp-act-pick{height:2.25rem!important;min-height:2.25rem}.btn-icon.bt-collapse-btn{width:2rem;height:2rem}} .wk-pop-wide{width:27rem}.wk-pop .bt-week-nav{flex-wrap:wrap;overflow:visible;gap:4px} .wk-opts>.nav-link{display:flex;justify-content:space-between;width:100%;height:40px;padding:0 .75rem;border:0;border-radius:var(--sa-r-md);background:none;color:var(--tblr-body-color);font-weight:500;text-align:left} .wk-opts>.nav-link:hover{background:var(--sa-page-bg);color:var(--tblr-body-color)} .wk-opts>.nav-link.active{background:color-mix(in srgb,var(--tblr-primary) 12%,var(--sa-card-bg));color:var(--sa-link);font-weight:700} .wk-range{accent-color:var(--tblr-primary);cursor:pointer} .wk-ticks{display:flex;justify-content:space-between;font-size:var(--sa-fs-2xs);color:var(--sa-muted);margin-top:-.2rem} .wk-opts{display:flex;flex-direction:column;gap:2px}.wk-opts>*{flex-shrink:0}.wk-opts-scroll{max-height:18rem;overflow:auto} .wk-opts .wk-st{display:flex;justify-content:space-between;width:100%;height:40px;padding:0 .75rem;border-radius:var(--sa-r-md);color:var(--tblr-body-color);font-weight:500} .wk-opts .wk-st:hover{background:var(--sa-page-bg);color:var(--tblr-body-color)} .wk-opts .wk-st.active{background:color-mix(in srgb,var(--tblr-primary) 12%,var(--sa-card-bg));color:color-mix(in srgb,var(--tblr-primary) 62%,var(--sa-ink));font-weight:700} .wk-pop-f .btn-link{color:color-mix(in srgb,var(--tblr-primary) 78%,var(--sa-ink))} .wk-opts .wk-st.active .wk-st-n{background:var(--tblr-primary);color:#fff} [data-mvres].active,[data-seg].active{background:var(--tblr-primary)!important;color:#fff!important} /* Signal pill: "Pointing to" toggles take the market colour (ATS green, Over azure, Under purple) with a tick when on. */ .wk-sgk{display:flex;flex-wrap:wrap;gap:.4rem} .wk-sgk-b{--c:var(--sa-ats);display:inline-flex;align-items:center;gap:.3rem;height:34px;padding:0 .8rem;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-pill);background:var(--sa-card-bg);color:var(--sa-ink);font:inherit;font-size:var(--sa-fs-sm);font-weight:600;cursor:pointer} .wk-sgk-over{--c:var(--sa-over)}.wk-sgk-under{--c:var(--sa-under)} .wk-sgk-b:hover,.wk-sgk-b:focus-visible{border-color:var(--c);outline:none}.wk-sgk-b:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent)} .wk-sgk-b[aria-pressed=true]{border-color:var(--c);background:color-mix(in srgb,var(--c) 16%,var(--sa-card-bg))}.wk-sgk-b[aria-pressed=true]::before{content:'\2713';color:var(--c);font-weight:800} /* Total move pill: a grid of how the total moved (rows) against how the game finished (columns); Over azure, Under purple. */ @media (min-width:768px){#wkPopTot,#wkPopEdge{width:23rem}} .wk-tgrid{display:grid;grid-template-columns:5.4rem minmax(0,1fr) minmax(0,1fr);gap:.4rem}.wk-nores .wk-tgrid{grid-template-columns:1fr 1fr}.wk-nores .wk-tgrid>span[aria-hidden],.wk-nores .wk-tg-h,.wk-nores .wk-tg-c{display:none}.wk-nores .wk-tg-r b{font-size:var(--sa-fs-lg);font-weight:800;color:var(--sa-ink)} .wk-tg-h,.wk-tg-r,.wk-tg-c{--c:var(--tblr-primary);border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);background:var(--sa-card-bg);color:var(--sa-ink);font:inherit;font-size:var(--sa-fs-sm);font-weight:600;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s} .wk-tg-over{--c:var(--sa-over)}.wk-tg-under{--c:var(--sa-under)} .wk-tg-h{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05rem;min-height:2.6rem;padding:.2rem;border-color:transparent;background:none;white-space:nowrap}.wk-tg-hl{display:inline-flex;align-items:center;gap:.35rem} .wk-tg-r{display:flex;align-items:center;justify-content:space-between;gap:.4rem;min-height:3.25rem;padding:0 .65rem}.wk-tg-r span{white-space:nowrap}.wk-tg-r b{color:var(--sa-muted);font-weight:700} .wk-tg-c{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:3.25rem;line-height:1.15}.wk-tg-c b{font-size:var(--sa-fs-lg);font-weight:800}.wk-tg-c small{font-size:var(--sa-fs-xs);font-weight:500;color:var(--sa-muted)} .wk-tg-h:hover,.wk-tg-r:hover,.wk-tg-c:hover,.wk-tg-h:focus-visible,.wk-tg-r:focus-visible,.wk-tg-c:focus-visible{border-color:var(--c);outline:none} .wk-tg-h:focus-visible,.wk-tg-r:focus-visible,.wk-tg-c:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 28%,transparent)} .wk-tg-h b{color:var(--sa-muted);font-weight:700} .wk-tg-h:disabled,.wk-tg-c:disabled,.nav-segmented .nav-link:disabled{opacity:.45;cursor:not-allowed}.wk-tg-h:disabled:hover,.wk-tg-c:disabled:hover{border-color:var(--sa-card-line)}.wk-tg-h:disabled:hover{border-color:transparent} .wk-tg-h.active,.wk-tg-r.active,.wk-tg-c.active{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,var(--sa-card-bg))} .wk-chips-col{display:none!important} @media (max-width:767.98px){ .wk-row1 .wk-search{flex:1 1 auto}.wk-row1 .wk-count,.wk-row1 .wk-group{display:none} .wk-pills{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1*var(--sa-sp-1));padding:2px var(--sa-sp-1) 3px}.wk-pills::-webkit-scrollbar{display:none} .wk-pop{position:fixed;left:8px;right:8px;top:auto;bottom:calc(var(--sa-bnav-h) + env(safe-area-inset-bottom) + 8px);width:auto;max-width:none;max-height:70vh;overflow:auto;z-index:1060;border-radius:16px;box-shadow:0 -8px 40px rgba(15,23,42,.3)}} @media (prefers-reduced-motion:reduce){.wk-pill,.wk-pill-c,.wk-tg-h,.wk-tg-r,.wk-tg-c,.wk-sgk-b,.nav-segmented .nav-link{transition:none}} .wk-qchip-n{margin-left:.35rem;font-size:var(--sa-fs-xs);font-weight:700;color:var(--sa-muted)}.wk-qchip.active .wk-qchip-n{color:rgba(255,255,255,.85)} /* Week summary: one quiet line above the bar; opens Week in numbers. */ .wk-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sa-sp-1) var(--sa-sp-3);font-size:var(--sa-fs-sm);color:var(--sa-muted);text-decoration:none} .wk-sum:hover{text-decoration:none}.wk-sum:hover .wk-sum-go{text-decoration:underline} .wk-sum b{color:var(--tblr-body-color);font-weight:700}.wk-sum-d{margin:0 .45rem;opacity:.6} .wk-sum-t{display:flex;flex-wrap:wrap;align-items:baseline;min-width:0;max-width:100%}.wk-sum-t>span:not(.wk-sum-d){white-space:nowrap} /* The summary line opens Week in numbers; the card itself shows only once opened. */ #wkNumbers>.card.bt-collapsed{display:none} .wk-sum-go{margin-left:auto;font-size:var(--sa-fs-xs);color:var(--sa-link);white-space:nowrap} /* Bar row 1: search, status, layout, group, Filters, count. */ .wk-vmode .nav-link{gap:.35rem}.wk-group{flex:0 0 auto;width:auto;border-radius:var(--sa-r-pill);font-size:var(--sa-fs-sm)} .wk-bar .wk-status{flex-shrink:0} @media (max-width:1199.98px){.wk-vm-l{display:none}} @media (max-width:767.98px){ .wk-row{display:grid!important;grid-template-columns:1fr auto auto;gap:var(--sa-sp-2)!important} .wk-row>.wk-search{grid-column:1;grid-row:1;min-width:0}.wk-row>.wk-tabs{grid-column:2;grid-row:1}.wk-row>.wk-filt-m{grid-column:3;grid-row:1} .wk-row>.wk-status{grid-column:1/-1;grid-row:2;display:flex;width:100%}.wk-row>.wk-status .wk-st{flex:1 1 auto;justify-content:center;padding:0 .45rem;gap:.25rem} .wk-row>.wk-right{display:none!important}.wk-row>#wkFiltBtn{display:none!important} .wk-sum-go{margin-left:0}} .wk-edge{accent-color:var(--tblr-primary);cursor:pointer}.wk-edge-ticks{font-size:var(--sa-fs-2xs);margin-top:-.15rem}.wk-edge-ticks span{width:2rem;text-align:center}.wk-edge-ticks span:first-child{text-align:left}.wk-edge-ticks span:last-child{text-align:right} #moveCover .wk-mvr{text-decoration:underline dotted;text-underline-offset:3px;padding:0 .15rem;border-radius:4px}#moveCover .wk-mvr-C{color:var(--tblr-green)}#moveCover .wk-mvr-N{color:var(--tblr-red)} #moveCover .wk-mvr.wk-on{background:var(--tblr-primary);color:#fff;text-decoration:none}#moveCover tbody tr{cursor:pointer} #moveCover .table>thead th{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.06em;color:var(--tblr-secondary);padding-top:.55rem;padding-bottom:.55rem}#moveCover .table td{padding-top:.6rem;padding-bottom:.6rem} #moveCover :where(.table td:nth-child(2),.table th:nth-child(2)){background:color-mix(in srgb,var(--tblr-orange) 4%,var(--tblr-bg-surface))}#moveCover .table th:nth-child(2){color:var(--tblr-orange)} /* One line per cell: record (bold), % (small pill), games left (muted caption). No bars. */ #moveCover .table td,#moveCover .table th{padding-top:.45rem;padding-bottom:.45rem} #moveCover .wk-mc-tier{font-weight:600;font-size:var(--sa-fs-sm)}#moveCover .wk-mc-cell{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:.45rem;white-space:nowrap} #moveCover .wk-mc-rec{font-size:var(--sa-fs-sm);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em} #moveCover .wk-mc-pct{display:inline-block;min-width:2.9rem;padding:.08rem .4rem;border-radius:99px;text-align:center;font-size:var(--sa-fs-2xs);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.4} #moveCover .wk-mc-pct.wk-mc-up{background:color-mix(in srgb,var(--tblr-green) 15%,var(--tblr-bg-surface));color:var(--tblr-green)} #moveCover .wk-mc-pct.wk-mc-down{background:color-mix(in srgb,var(--tblr-red) 13%,var(--tblr-bg-surface));color:var(--tblr-red)} #moveCover .wk-mc-pct.wk-mc-mid{background:var(--tblr-bg-surface-secondary,#f1f3f5);color:var(--tblr-body-color)} #moveCover .wk-mc-pct.wk-mc-low{border:1px dashed var(--tblr-border-color);color:var(--tblr-secondary);font-weight:600} #moveCover .wk-mc-open{font-size:var(--sa-fs-2xs);color:var(--sa-muted)} #moveCover tr.table-active>td{background:color-mix(in srgb,var(--tblr-orange) 8%,var(--tblr-bg-surface));box-shadow:none}#moveCover tr.table-active>td:first-child{box-shadow:inset 3px 0 0 var(--tblr-orange)}@media (hover:hover){#moveCover tbody tr:not(.table-active):hover>td{background:var(--tblr-bg-surface-secondary,rgba(0,0,0,.02))}} @media (min-width:992px){#moveCover table{table-layout:fixed}#moveCover th:first-child{width:28%}} #moveCover{container-type:inline-size} @container (max-width:760px){#moveCover .table td,#moveCover .table th{padding-left:.35rem;padding-right:.35rem}#moveCover .wk-mc-cell{flex-direction:column;align-items:flex-end;gap:.1rem}#moveCover .wk-mc-pct{min-width:0;padding:.05rem .35rem}#moveCover .wk-mc-open{display:none}} @media (max-width:575.98px){.wk-ntabs .wk-nt-n{display:inline-block;max-width:4.5rem;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}} @media (max-width:575.98px){#moveCover .table-responsive{overflow:visible}#moveCover .table td,#moveCover .table th{padding-left:.3rem;padding-right:.3rem;font-size:var(--sa-fs-xs)}#moveCover .table th{font-size:var(--sa-fs-2xs)}} .wk-lm-pane{display:flex;flex-direction:column;height:100%;min-width:0}.wk-lm-ph{padding:.6rem 1rem;border-bottom:1px solid var(--tblr-border-color)}.wk-lm-ph [title]{cursor:help} .wk-lw-stats{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem;row-gap:.3rem;margin-top:.2rem}.wk-lw-rating,.wk-lw-stat{display:inline-flex;align-items:baseline;gap:.35rem;white-space:nowrap} .wk-lw-label{font-size:var(--sa-fs-2xs);line-height:1;color:var(--tblr-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.035em}.wk-lw-value{font-size:var(--sa-fs-xs);font-weight:600} .wk-lw-stat-gap .wk-lw-value{color:var(--sa-link);font-size:var(--sa-fs-sm);font-weight:700} .wk-lm-foot{margin-top:auto;padding:.5rem 1rem;font-size:var(--sa-fs-xs);color:var(--tblr-secondary);border-top:1px solid var(--tblr-border-color)} .wk-lm-col+.wk-lm-col{border-top:1px solid var(--tblr-border-color)}@media (min-width:992px){.wk-lm-col+.wk-lm-col.col-lg-6{border-top:0;border-left:1px solid var(--tblr-border-color)}} .wk-lm-pills{display:inline-flex;flex-wrap:wrap;gap:.35rem;margin-left:.6rem;vertical-align:middle}.wk-lm-pills .badge{font-weight:500} .wk-lw-more{border-top:1px solid var(--tblr-border-color)!important} #lineMoves.bt-collapsed{border-left:4px solid var(--tblr-orange)}#lineMoves.bt-collapsed>.card-status-top,#lineMoves.bt-collapsed>.card-header .avatar{display:none!important} #lineMoves.bt-collapsed>.card-header{background:var(--tblr-bg-surface)!important;padding-top:.55rem;padding-bottom:.55rem} @media (min-width:768px){#wkFilters .form-control,.wk-row>.btn,#wkLiveWrap .btn{height:2.25rem}#wkView .nav-link{padding-top:.3rem;padding-bottom:.3rem} #wkSheet{position:absolute!important;top:calc(100% + .4rem);right:0;width:23rem;z-index:20;display:none!important;background-color:var(--tblr-bg-surface)!important;border:1px solid var(--tblr-border-color)!important;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.16)} #wkSheet.wk-open{display:block!important}#wkSheet .offcanvas-header{display:flex!important;padding:.7rem 1rem .2rem}#wkSheet .offcanvas-body{display:block!important;padding:.5rem 1rem 1rem!important}} @media (max-width:767.98px){.wk-search{flex:1 1 9rem;order:1}.wk-filt-m{order:2}.wk-right{display:contents!important}#wkLiveWrap{order:3}.wk-tabs{order:4;flex:1 1 100%}.wk-count{order:5;margin-left:auto}} .wk-lbl-s{display:none}@media (min-width:768px) and (max-width:1599.98px){.wk-lbl-l{display:none}.wk-lbl-s{display:inline}} @media (max-width:767.98px){#wkView .nav-link{padding:.3rem .65rem;font-size:var(--sa-fs-sm)} #wkSheet.offcanvas-md{height:auto;max-height:85vh;border-radius:16px 16px 0 0} .wk-snap{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.wk-snap::-webkit-scrollbar{display:none} .wk-snap>[class*=col]{flex:0 0 44%;max-width:44%;scroll-snap-align:start}.wk-snap .card-body{padding:.5rem .7rem}.wk-snap .h2{font-size:1.15rem} .wk-snap .card-body>.d-flex.mt-1,.wk-snap .card-body>.small{display:none!important} #lineMoves>.card-header{padding-top:.5rem;padding-bottom:.5rem}#lineMoves>.card-header .avatar{display:none!important} .wk-lm-pills{display:flex;flex-wrap:nowrap;margin:.3rem 0 0}.wk-lm-pills .badge{white-space:nowrap}} @media (max-width:575.98px){.wk-lw-stats{column-gap:.7rem;row-gap:.35rem}.wk-lw-label{font-size:var(--sa-fs-2xs)}.wk-lw-value{font-size:var(--sa-fs-xs)}} @media (min-width:1680px){.wk-chips-col{display:none}.wk-side-col{display:block!important;flex:0 0 13.5rem;width:13.5rem}.wk-groups-col{flex:1 0 0%;width:auto;min-width:0}} @media (min-width:768px){.wk-snap .card-body{padding:.75rem 1rem}} #wkList.wk-tfit .table-responsive{overflow:visible}#wkList.wk-tfit #wkTable>thead th{position:sticky;top:var(--wk-stick,0px);z-index:3;background:var(--tblr-bg-surface-secondary,var(--tblr-bg-surface))} @media (min-width:768px){#wkTable .wk-sit{white-space:normal;max-width:13rem}#wkTable td.wk-tsig{white-space:normal;min-width:8.5rem;max-width:12rem}#wkTable td.wk-tgame{white-space:normal;min-width:13rem}} @media (max-width:1399.98px){#wkTable .wk-tmove{display:none}}@media (min-width:1400px){#wkTable .wk-mvalt{display:none}} #wkGroups [data-gid],#wkTilesBody .wk-tile,#wkTableBody tr[data-g]{cursor:pointer}[data-gid],#wkTilesBody [data-g],#wkTableBody tr[data-g]{scroll-margin-top:calc(var(--wk-stick,0px) + 3rem);scroll-margin-bottom:5rem} @media (hover:hover){#wkTableBody tr[data-g]:hover>td{background:var(--tblr-bg-surface-secondary,rgba(0,0,0,.02))}} .wk-kb{outline:2px solid var(--tblr-primary)!important;outline-offset:-2px}#wkTilesBody .wk-kb .wk-tile{outline:2px solid var(--tblr-primary);outline-offset:2px} .wk-keys kbd{min-width:1.6rem;text-align:center;display:inline-block} /* ---- Support page (public-site/support.html) ---------------------------------------------------------- */ :root{--sp-y:#ffdd00;--sp-y-deep:#f5b400} .sp-hero{position:relative;overflow:hidden;border:0;background:linear-gradient(135deg,color-mix(in srgb,var(--sp-y) 26%,transparent) 0%,color-mix(in srgb,var(--sp-y) 8%,transparent) 70%),var(--tblr-bg-surface)} .sp-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sp-y) 40%,transparent),transparent 70%);pointer-events:none} .sp-hero .card-body{position:relative;z-index:1;padding:2.5rem 1.5rem} .sp-cup{width:84px;height:84px;border-radius:50%;background:var(--sp-y);color:#000;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(255,190,0,.4)}.sp-cup svg{width:42px;height:42px} .sp-title{font-size:1.9rem;font-weight:700;line-height:1.2} .sp-lead{max-width:560px;margin-inline:auto} .bmc-btn{background:var(--sp-y);border-color:var(--sp-y);color:#000;font-weight:600;padding-inline:1.75rem;box-shadow:0 6px 18px rgba(255,190,0,.35)} .bmc-btn:hover,.bmc-btn:focus{background:#ffe433;border-color:#ffe433;color:#000} .sp-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;background:var(--tblr-bg-surface);border:1px solid color-mix(in srgb,var(--sp-y) 45%,var(--tblr-border-color));font-size:var(--sa-fs-xs);font-weight:500} .sp-chip svg{width:16px;height:16px;color:var(--sp-y-deep)} .sp-section{font-size:var(--sa-fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tblr-secondary)} .sp-tile{height:100%;border-top:3px solid var(--sp-y);background:linear-gradient(180deg,color-mix(in srgb,var(--sp-y) 7%,transparent),transparent 60%),var(--tblr-bg-surface);transition:transform .15s ease,box-shadow .15s ease} .sp-tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08)} .sp-tile .avatar,.sp-share .avatar{background:color-mix(in srgb,var(--sp-y) 22%,transparent);color:color-mix(in srgb,var(--sp-y-deep) 75%,var(--tblr-body-color))} .gb-pgs{display:contents}.hg1{background:rgba(47,179,68,.05)}.hg2{background:rgba(47,179,68,.1)}.hg3{background:rgba(47,179,68,.15)}.hg4{background:rgba(47,179,68,.2)}.hg5{background:rgba(47,179,68,.25)}.hg6{background:rgba(47,179,68,.3)}.hr1{background:rgba(214,57,57,.05)}.hr2{background:rgba(214,57,57,.1)}.hr3{background:rgba(214,57,57,.15)}.hr4{background:rgba(214,57,57,.2)}.hr5{background:rgba(214,57,57,.25)}.hr6{background:rgba(214,57,57,.3)} .sp-share-mark{width:64px;height:64px;border-radius:16px;box-shadow:0 2px 8px rgba(15,31,61,.18)}.sp-share{border-left:3px solid var(--sp-y);scroll-margin-top:calc(var(--sa-stick-top) + 1rem)}#contact{scroll-margin-top:calc(var(--sa-stick-top) + 1rem)} /* ---- 8. My picks (public/js/picks.js) ------------------------------------------------------------ */ .pk-board{overflow:hidden}.pk-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;padding:.85rem 1rem} .pk-stat{display:flex;align-items:baseline;gap:.4rem}.pk-rec{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}.pk-sub{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)} .pk-pill{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)}.pk-pill b{color:var(--tblr-body-color);font-variant-numeric:tabular-nums} .pk-filters{display:flex;flex-wrap:wrap;gap:.5rem;padding:0 1rem .85rem} .pk-day{display:flex;justify-content:space-between;padding:.4rem 1rem;font-size:var(--sa-fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tblr-secondary);background:var(--tblr-bg-surface-secondary);border-top:1px solid var(--tblr-border-color);border-bottom:1px solid var(--tblr-border-color)} .pk-game{display:grid;grid-template-columns:4.5rem minmax(9rem,15rem) 1fr;align-items:center;gap:.4rem .75rem;padding:.55rem 1rem} .pk-game+.pk-game{border-top:1px solid var(--tblr-border-color)}.pk-game.pk-alt{background:color-mix(in srgb,var(--tblr-bg-surface-secondary) 60%,transparent)} .pk-when{display:flex;flex-direction:column;line-height:1.15;font-variant-numeric:tabular-nums}.pk-time{font-weight:600;font-size:var(--sa-fs-sm)}.pk-final{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tblr-secondary)}.pk-score{font-weight:800;font-size:var(--sa-fs-sm)} .pk-when .pk-live{font-size:var(--sa-fs-xs);font-weight:700;color:var(--tblr-red)} .pk-match{display:flex;align-items:center;gap:.35rem;min-width:0;color:inherit;text-decoration:none}.pk-match:hover b{color:var(--sa-link)} .pk-team{display:inline-flex;align-items:center;gap:.3rem;padding-left:.35rem;border-left:3px solid var(--tc)}.pk-team img{flex-shrink:0}.pk-at{color:var(--tblr-secondary);font-size:var(--sa-fs-xs)} .pk-lg{margin-left:auto;font-size:var(--sa-fs-2xs);font-weight:600;color:var(--tblr-secondary)} .pk-chips{display:flex;flex-wrap:wrap;gap:.35rem} .pk-chip{display:inline-flex;align-items:center;gap:.35rem;height:32px;padding:0 .25rem 0 .55rem;border-radius:8px;border:1px solid var(--pc-b);background:var(--pc-bg);color:var(--pc-t);font-size:var(--sa-fs-sm);white-space:nowrap} .pk-mk{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.04em;opacity:.7}.pk-lb{font-weight:700;font-variant-numeric:tabular-nums}.pk-res{font-weight:800} .pk-mv{display:inline-flex;align-items:center;gap:.15rem;padding:.05rem .4rem;border-radius:6px;font-size:var(--sa-fs-xs);font-weight:700;font-variant-numeric:tabular-nums} .pk-mv.good{background:color-mix(in srgb,var(--tblr-green) 16%,var(--tblr-bg-surface));color:color-mix(in srgb,var(--tblr-green) 80%,var(--tblr-body-color))} .pk-mv.bad{background:color-mix(in srgb,var(--tblr-red) 12%,var(--tblr-bg-surface));color:color-mix(in srgb,var(--tblr-red) 80%,var(--tblr-body-color))} .pk-moves{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)}.pk-moves b{color:var(--tblr-body-color)} .pk-x{border:0;background:none;color:inherit;opacity:.45;font-size:var(--sa-fs-md);line-height:1;width:24px;height:24px;border-radius:6px;padding:0}.pk-x:hover,.pk-x:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)} .pk-nb{display:inline-grid;place-items:center;border:0;background:none;color:inherit;opacity:.45;width:24px;height:24px;border-radius:6px;padding:0}.pk-nb:hover,.pk-nb:focus-visible{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)} .pk-notes{grid-column:2 / -1;display:grid;gap:.35rem} .pk-note{display:flex;align-items:baseline;gap:.6rem;width:100%;text-align:left;border:0;padding:.4rem .65rem;border-radius:8px;font-size:var(--sa-fs-sm);line-height:1.45;color:var(--tblr-body-color); background:color-mix(in srgb,var(--pc-b) 9%,transparent);box-shadow:inset 3px 0 0 var(--pc-b);cursor:text;transition:background .15s} .pk-note:hover,.pk-note:focus-visible{background:color-mix(in srgb,var(--pc-b) 16%,transparent);outline:none} .pk-note-k{flex:none;font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.05em;color:var(--tblr-secondary)} .pk-note-t{flex:1;min-width:0;font-style:italic;overflow-wrap:anywhere;color:color-mix(in srgb,var(--tblr-body-color) 88%,var(--tblr-secondary))}.pk-note-t::before{content:"\201C"}.pk-note-t::after{content:"\201D"} .pk-note-e{flex:none;align-self:center;display:inline-grid;color:var(--tblr-secondary);opacity:0;transition:opacity .15s}.pk-note:hover .pk-note-e,.pk-note:focus-visible .pk-note-e{opacity:1} @media (hover:none){.pk-note-e{opacity:.6}} .pk-ned{padding:.6rem .7rem .55rem;border-radius:10px;background:var(--tblr-bg-surface);box-shadow:inset 3px 0 0 var(--pc-b),0 0 0 1px var(--tblr-border-color),0 6px 18px -10px rgba(15,31,61,.35)} .pk-ned-h{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:var(--sa-fs-xs);color:var(--tblr-secondary);margin-bottom:.35rem}.pk-ned-h b{color:var(--tblr-body-color)} .pk-ned-c{font-variant-numeric:tabular-nums;font-size:var(--sa-fs-xs)}.pk-ned-c.near{color:var(--tblr-orange)}.pk-ned-c.max{color:var(--tblr-red);font-weight:700} .pk-ned textarea{resize:none;font-size:var(--sa-fs-sm);line-height:1.45;min-height:3.6rem} .pk-ned-a{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.45rem}.pk-ned-hint{margin-right:auto;font-size:var(--sa-fs-xs);color:var(--tblr-secondary)} .pk-open,.pk-void{--pc-b:color-mix(in srgb,var(--tblr-primary) 45%,transparent);--pc-bg:color-mix(in srgb,var(--tblr-primary) 7%,var(--tblr-bg-surface));--pc-t:var(--tblr-body-color)} .pk-chip.pk-live,.pk-note.pk-live,.pk-ned.pk-live{--pc-b:var(--tblr-red);--pc-bg:var(--tblr-bg-surface);--pc-t:var(--tblr-body-color)} .pk-won{--pc-b:color-mix(in srgb,var(--tblr-green) 55%,transparent);--pc-bg:color-mix(in srgb,var(--tblr-green) 14%,var(--tblr-bg-surface));--pc-t:color-mix(in srgb,var(--tblr-green) 75%,var(--tblr-body-color))} .pk-lost{--pc-b:color-mix(in srgb,var(--tblr-red) 40%,transparent);--pc-bg:color-mix(in srgb,var(--tblr-red) 9%,var(--tblr-bg-surface));--pc-t:color-mix(in srgb,var(--tblr-red) 70%,var(--tblr-body-color))} .pk-push{--pc-b:color-mix(in srgb,var(--tblr-yellow) 55%,transparent);--pc-bg:color-mix(in srgb,var(--tblr-yellow) 12%,var(--tblr-bg-surface));--pc-t:var(--tblr-body-color)} .pk-chip.pk-won,.pk-legend .pk-won{--pc-b:var(--sa-win);--pc-bg:var(--sa-win);--pc-t:#fff} .pk-chip.pk-lost,.pk-legend .pk-lost{--pc-b:var(--sa-loss);--pc-bg:var(--sa-loss);--pc-t:#fff} .pk-chip.pk-push,.pk-legend .pk-push{--pc-b:var(--sa-push);--pc-bg:var(--sa-push);--pc-t:#fff} .pk-legend{display:flex;flex-wrap:wrap;gap:.75rem;font-size:var(--sa-fs-xs);color:var(--tblr-secondary)}.pk-legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.3rem;vertical-align:-1px;border:1px solid var(--pc-b);background:var(--pc-bg)} .pk-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--tblr-border-color)}.pk-kpi{padding:.85rem 1rem}.pk-kpi+.pk-kpi{border-left:1px solid var(--tblr-border-color)} .pk-kpi-l{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tblr-secondary)}.pk-kpi-v{font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}.pk-kpi-s{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)} .pk-perf-sec{padding:.85rem 1rem}.pk-perf-sec+.pk-perf-sec{border-left:1px solid var(--tblr-border-color)}.pk-perf-h{font-size:var(--sa-fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tblr-secondary);margin-bottom:.5rem} .pk-tl{width:100%;height:150px;display:block}.pk-tbl td,.pk-tbl th{font-variant-numeric:tabular-nums}.pk-sep td{padding:0;border-top:2px solid var(--tblr-border-color)} .pk-bar{position:relative;height:8px;border-radius:4px;background:var(--tblr-bg-surface-secondary)}.pk-bar span{display:block;height:100%;border-radius:4px}.pk-bar span.good{background:var(--tblr-green)}.pk-bar span.bad{background:color-mix(in srgb,var(--tblr-red) 70%,transparent)}.pk-bar i{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--tblr-body-color);opacity:.45} .pk-period{width:auto} /* Toolbar: search + filter sheet + sort on one row, status chips under it, active-filter chips when any */ .pk-tools{display:grid;gap:var(--sa-sp-2);padding:0 1rem .85rem;border-bottom:1px solid var(--sa-card-line)} .pk-tools-r{display:flex;gap:var(--sa-sp-2);align-items:stretch} .pk-search{position:relative;flex:1 1 14rem;min-width:0;display:flex;align-items:center} .pk-search>[data-icon]{position:absolute;left:.7rem;width:18px;height:18px;color:var(--sa-muted);pointer-events:none} .pk-search .form-control{height:40px;padding-left:2.3rem;padding-right:2.2rem;border-radius:var(--sa-r-pill);border-color:var(--sa-card-line);background:var(--sa-card-bg)} .pk-search .form-control::-webkit-search-cancel-button{-webkit-appearance:none} .pk-search .pk-x{position:absolute;right:.5rem;opacity:.6} .pk-fbtn{display:inline-flex;align-items:center;gap:.4rem;height:40px;padding:0 .9rem;border-radius:var(--sa-r-pill);border-color:var(--sa-card-line);background:var(--sa-card-bg);font-weight:600;white-space:nowrap} .pk-fbtn [data-icon]{width:18px;height:18px} .pk-fbtn.on{border-color:var(--tblr-primary);color:var(--sa-link);background:color-mix(in srgb,var(--tblr-primary) 8%,var(--sa-card-bg))} .pk-fbtn-n{display:inline-grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:var(--sa-r-pill);background:var(--tblr-primary);color:#fff;font-size:var(--sa-fs-2xs);font-weight:700} .pk-sortw{position:relative;display:flex;align-items:center;flex:0 0 auto} .pk-sortw>[data-icon]{position:absolute;left:.65rem;width:18px;height:18px;color:var(--sa-muted);pointer-events:none} .pk-sort{height:40px;width:auto;padding-left:2.1rem;border-radius:var(--sa-r-pill);border-color:var(--sa-card-line);background-color:var(--sa-card-bg);font-weight:600;font-size:var(--sa-fs-sm)} .pk-tools .wk-status{align-self:flex-start} .pk-active{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;font-size:var(--sa-fs-sm)} .pk-ac{display:inline-flex;align-items:center;gap:.35rem;height:28px;padding:0 .3rem 0 .65rem;border-radius:var(--sa-r-pill);border:1px solid color-mix(in srgb,var(--tblr-primary) 35%,transparent);background:color-mix(in srgb,var(--tblr-primary) 10%,var(--sa-card-bg));color:var(--sa-link);font:inherit;font-size:var(--sa-fs-sm);font-weight:600;cursor:pointer} .pk-ac span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;font-size:var(--sa-fs-md);line-height:1} .pk-ac:hover span{background:color-mix(in srgb,var(--tblr-primary) 18%,transparent)} .pk-reset{margin-left:auto} .pk-pill-b{border:0;background:none;padding:0;font:inherit;font-size:var(--sa-fs-xs);color:var(--tblr-secondary);cursor:pointer;border-radius:6px} .pk-pill-b:hover,.pk-pill-b:focus-visible{color:var(--sa-link);outline:none}.pk-pill-b:hover b{color:var(--sa-link)} .pk-day-flat{padding:0;height:1px;border-bottom:0} /* Filter sheet (reuses the More sheet shell) */ .pk-sec-h{display:flex;align-items:baseline;gap:.5rem;margin-bottom:var(--sa-sp-1)}.pk-sheet .pk-sec-h .sa-caps{margin:0}.pk-any{font-size:var(--sa-fs-xs);color:var(--tblr-secondary)} .pk-sheet .pk-opts{display:flex;flex-wrap:wrap;gap:.35rem} .pk-sheet .wk-st{border:1px solid var(--sa-card-line);height:34px}.pk-sheet .wk-st.active{border-color:var(--tblr-primary)} .pk-sheet-a{display:flex;justify-content:space-between;align-items:center;gap:var(--sa-sp-2);margin-top:var(--sa-sp-4);position:sticky;bottom:0;padding-top:var(--sa-sp-2);background:var(--tblr-bg-surface)} @media (max-width:575.98px){.pk-tools{padding-left:.75rem;padding-right:.75rem}.pk-fbtn-l{display:none}.pk-fbtn{padding:0 .7rem} .pk-sort{width:40px;padding:0;color:transparent;background-image:none;text-indent:-999px}.pk-sortw>[data-icon]{left:.65rem} .pk-tools .wk-status{align-self:stretch}} @media (max-width:991.98px){.pk-perf-sec+.pk-perf-sec{border-left:0;border-top:1px solid var(--tblr-border-color)}} @media (max-width:575.98px){.pk-kpis{grid-template-columns:1fr 1fr}.pk-kpi:nth-child(3){border-left:0}.pk-kpi:nth-child(n+3){border-top:1px solid var(--tblr-border-color)}.pk-kpi-v{font-size:1.25rem}} @media (max-width:767.98px){.pk-game{grid-template-columns:auto 1fr;padding:.6rem .75rem}.pk-chips,.pk-notes{grid-column:1 / -1}.pk-when{flex-direction:row;gap:.35rem;align-items:baseline} .pk-head,.pk-filters{padding-left:.75rem;padding-right:.75rem}.pk-day{padding:.35rem .75rem}.pk-act-l{display:none}.pk-chip{height:36px}.pk-nb,.pk-x{width:28px;height:28px}.pk-ned-hint{flex-basis:100%;order:9}} /* ---- Mobile-first audit (Oct 2026): ergonomics ------------------------------------------------ */ /* iOS zooms into any field under 16px; keep the desktop sizes above the phone breakpoint only. */ @media (max-width:991.98px){.form-control,.form-select,.form-control-sm,.form-select-sm,input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}} /* Long tables scroll inside a box on desktop only; on phones the page scrolls (no scroll traps). */ .sa-scroll{--sa-scroll-h:75vh}.sa-scroll-sm{--sa-scroll-h:34rem} @media (min-width:768px){.sa-scroll{max-height:var(--sa-scroll-h)}} /* Anchors land below the sticky top bar. */ .page [id]{scroll-margin-top:calc(var(--sa-stick-top) + .75rem)} /* 44px hit areas on touch screens (visual size stays; the control grows where it has room). */ @media (pointer:coarse){ .bt-tb-a,.bt-tb-a.bt-acct.bt-tb-a{height:44px}.bt-lg a{height:38px} .bt-lg-strip a,.bt-strip a{min-height:44px} .wk-pill{height:40px}.wk-pills .wk-status{height:40px}.wk-pills .wk-st,.wk-st{height:34px} .wk-pill-x{width:28px;height:28px;margin-right:-.4rem;font-size:var(--sa-fs-sm)} .card-header>.bt-collapse-btn,.btn-icon.bt-collapse-btn{width:36px!important;height:36px!important} .gp-act,.pc-foot .gp-act,.gp-act-pick{height:44px!important;min-height:44px} .pc-picks .gb-pk,.gb-pk{min-height:44px}.pc-fol{min-width:2.5rem;min-height:2.5rem} .bk-seg span{padding:.6rem .5rem} .pk-nb,.pk-x{width:36px;height:36px} .btn-sm,.btn-close{min-height:36px} .nav-segmented .nav-link{min-height:40px}.bt-week-nav .nav-link{min-height:44px}.bt-brand{min-height:44px} [data-follow-compact]{min-width:40px;min-height:40px} .ar-f,a.small,.gb-picks-link,.lp>summary,.bt-tip-badge,.pc-i{position:relative} .ar-f::after,a.small::after,.gb-picks-link::after,.lp>summary::after,.bt-tip-badge::after,.pc-i::after{content:"";position:absolute;left:-6px;right:-6px;top:-10px;bottom:-10px} } .sa-model-tile{box-shadow:inset 3px 0 0 var(--sa-model)} /* Game banner: picks fold behind one row on phones (open on desktop). */ .gb-picks-s{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.4rem .75rem;font-weight:700;color:var(--sa-link)} .gb-picks-s::-webkit-details-marker{display:none}.gb-picks-s::after{content:"\25BE";opacity:.6}.gb-picks-d[open]>.gb-picks-s::after{content:"\25B4"} @media (min-width:768px){.gb-picks-s{display:none}.gb-picks-d>.gb-picks{display:block}} /* Phone fold: open on desktop, one summary row on phones (pages.js fold(); nav.js closes it below 768px). */ .sa-fold-s{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem .9rem;border:1px solid var(--sa-card-line);border-radius:var(--sa-r-md);background:var(--sa-card-bg);font-weight:700} .sa-fold-s::-webkit-details-marker{display:none}.sa-fold-s small{font-weight:400;color:var(--sa-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sa-fold-s::after{content:"\25BE";margin-left:auto;opacity:.6}.sa-fold[open]>.sa-fold-s{margin-bottom:var(--sa-sp-3)}.sa-fold[open]>.sa-fold-s::after{content:"\25B4"} @media (min-width:768px){.sa-fold-s{display:none}} /* Badges and strips that carry a data-tip look tappable. */ .bt-tip-badge,[data-tip][role=button]{cursor:pointer}.bt-tip-badge:focus-visible,[data-tip][role=button]:focus-visible{outline:2px solid var(--tblr-primary);outline-offset:2px} /* My picks: the board first on phones, performance after it. */ #pkApp{display:flex;flex-direction:column}#pkApp>*{width:100%}@media (max-width:767.98px){.pk-perf-wrap{order:2}.pk-board{order:1}} /* ---- Mobile tiles (table-sort.js m-tiles): a table row becomes a card on phones; labels come from the header. */ @media (max-width:767.98px){table.m-tiles,table.m-tiles>tbody{display:block;width:100%}table.m-tiles>thead{display:none}table.m-tiles>tbody>tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem .75rem;padding:.7rem .85rem;margin:.6rem .6rem 0;border:1px solid var(--tblr-border-color);border-left:3px solid var(--m-edge,var(--tblr-border-color));border-radius:10px;background:var(--tblr-bg-surface)}table.m-tiles>tbody>tr:last-child{margin-bottom:.6rem}table.m-tiles>tbody>tr>td{display:block;padding:.1rem .3rem!important;border-radius:6px;border:0!important;text-align:left!important;white-space:normal;min-width:0;box-shadow:none!important;background:none}table.m-tiles>tbody>tr>td[data-label]::before{content:attr(data-label);display:block;font-size:var(--sa-fs-2xs);letter-spacing:.05em;text-transform:uppercase;color:var(--tblr-secondary);font-weight:600;margin-bottom:.1rem}table.m-tiles>tbody>tr>td[data-m-title]{grid-column:1/-1;order:-1;font-size:var(--sa-fs-md);font-weight:600}table.m-tiles>tbody>tr>td[data-m-title]::before{display:none}table.m-tiles>tbody>tr>td[data-m-full],table.m-tiles>tbody>tr>td[data-m-wide]{grid-column:1/-1}table.m-tiles>tbody>tr>td[data-m-full]::before{display:none}table.m-tiles>tbody>tr>td[data-m-actions]{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:.15rem}table.m-tiles>tbody>tr>td[data-m-actions]::before{display:none}table.m-tiles>tbody>tr>td[data-m-hide]{display:none}.card-header{flex-wrap:wrap}.card-header>.card-actions:has(.ts-filter){flex:1 1 100%;margin:.5rem 0 0}.ts-filter,.ts-filter .input-icon{flex:1 1 auto;width:100%!important}} .bt-ts-hide{display:none!important} .ts-sortm{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem 0}.ts-sortm-l{font-size:var(--sa-fs-2xs);font-weight:700;letter-spacing:var(--sa-track-caps);text-transform:uppercase;color:var(--sa-muted)}.ts-sortm .form-select{width:auto;flex:1} /* Sign-up prompt (nav.js signupPrompt): a slide-in card, not a modal; above the phone tab bar, bottom-right on desktop. */ .sa-su{position:fixed;left:auto;right:12px;bottom:calc(var(--sa-bnav-h) + env(safe-area-inset-bottom) + 12px);margin:0;z-index:1045;border:1px solid var(--sa-card-line);padding:0;width:min(24rem,calc(100vw - 24px));border-radius:var(--sa-r-lg);background:var(--sa-card-bg);color:var(--tblr-body-color);box-shadow:var(--sa-sh-2)} @media (min-width:992px){.sa-su{bottom:16px;right:16px}} .sa-su[open]{animation:saSuIn .2s ease-out}@keyframes saSuIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.sa-su[open]{animation:none}} .sa-su-top{position:relative;padding:1rem 1.1rem .9rem;color:#fff;background:var(--sa-bar-bg);border-radius:var(--sa-r-lg) var(--sa-r-lg) 0 0} .sa-su-x{position:absolute;top:.5rem;right:.5rem;width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.2rem;line-height:1} .sa-su-brand{display:flex;align-items:center;gap:.55rem;font-weight:800;letter-spacing:-.02em}.sa-su-brand span span{color:var(--sa-brand-2,#7cc4ff)} .sa-su-saved{display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;padding:.25rem .6rem;border-radius:var(--sa-r-pill);background:color-mix(in srgb,var(--sa-good) 25%,transparent);color:#bbf7d0;font-size:var(--sa-fs-xs)} .sa-su-top h2{color:#fff;font-size:var(--sa-fs-lg);font-weight:800;line-height:1.25;margin:.5rem 0 .2rem}.sa-su-top p{margin:0;color:rgba(255,255,255,.75);font-size:var(--sa-fs-sm)} .sa-su-body{padding:.9rem 1.1rem 1rem}.sa-su-list{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.5rem} .sa-su-list li{display:flex;align-items:center;gap:.6rem;font-size:var(--sa-fs-sm)}.sa-su-list i{flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--sa-r-sm);background:color-mix(in srgb,var(--sa-brand) 12%,transparent);color:var(--sa-brand)} .sa-su-go{display:block;width:100%;min-height:44px;padding:.65rem;border-radius:var(--sa-r-md);text-align:center;font-weight:700;color:#fff!important;text-decoration:none!important;background:var(--sa-brand)} .sa-su-alt{display:flex;justify-content:space-between;align-items:center;margin-top:.6rem;font-size:var(--sa-fs-sm)}.sa-su-alt button{border:0;background:none;padding:.5rem 0;color:var(--sa-muted);min-height:36px} .sa-su-fine{margin:.6rem 0 0;font-size:var(--sa-fs-xs);color:var(--sa-muted);text-align:center} @media (max-width:575.98px){.sa-su-list{display:none}} /* ---- Page styles moved out of inline