/* WC beta — DARK Glassnode-style dashboard. Uses theme.css dark tokens.
   2-pane: left = Opportunity Discovery + Accas generated, centre = stats + match rows.
   Compact collapsed match rows; scrollable expanded section. */

/* top nav */
.nav{height:56px;background:rgba(19,18,22,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 20px;gap:18px;position:sticky;top:0;z-index:40}
.nav .logo{display:flex;align-items:center;gap:8px;font-family:var(--head);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--ink)}
.nav .logo .mark{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#7C80EE/* stays the dark-nav indigo in BOTH themes: the nav is #131216 even in light mode, so accent-ink would be dark-on-dark */;font-family:var(--head);font-weight:700;font-size:20px;line-height:1}
.nav .src{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);padding-left:14px;border-left:1px solid var(--line)}
.nav .live-count{font-size:11px;color:var(--muted)}
.nav .tabs{display:flex;gap:6px;margin:0 auto}
.nav .tab{padding:8px 14px;border-radius:8px;font-size:13px;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:7px;cursor:pointer}
.nav .tab.on{color:var(--ink);background:var(--purple-08)}
.nav .right{display:flex;align-items:center;gap:14px;font-size:12px}
.nav .plan{border:1px solid var(--line2);border-radius:999px;padding:5px 12px;font-weight:600;color:var(--ink)}
.nav .me{display:flex;align-items:center;gap:9px;color:var(--muted)}
.nav .av{width:30px;height:30px;border-radius:50%;background:var(--accent-fill);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}

/* shell — mobile single column; 2-pane (left + centre) >=1024 */
.shell{display:grid;grid-template-columns:1fr;grid-template-areas:"left" "center";gap:14px;padding:8px 14px 16px;width:100%;margin:0;align-items:start;position:relative}
.side{grid-area:left;display:flex;flex-direction:column;gap:14px;position:relative;z-index:1}
/* Matt R9: Accas Generated gets ~20% more air above it than the default panel gap. */
#panel-accas{margin-top:10px}
.main{grid-area:center;display:flex;flex-direction:column;gap:20px;min-width:0;position:relative;z-index:1}

/* positioning tagline above the board */
.tagline{font-size:14px;line-height:1.5;color:var(--muted);margin:-4px 0 2px;max-width:760px}
.tagline b{color:var(--ink);font-weight:600}

/* section titles — 40% larger */
/* RB9: formal heading hierarchy — section titles (H2) calmer than before (was a flat 28px/700,
   everything super-bold). Page leads → section H2 → muted subhead caption. */
/* Matt B7-review item 10: section headings (Matches, World Cup statistics, Opportunity Discovery,
   Accas Generated) get more breathing room (≈0.4rem more margin above + below), a 1.5x larger font
   (21px→31.5px) and a LIGHTER (non-bold) weight. Spacing is applied on the head containers below so
   the flex rows (.matches-head, .panel-h) stay aligned. */
/* B7-41 item 6: section titles -25% (dial back the round-5 1.5x bump). 31.5->23.6px. */
.sec-title{display:inline-flex;align-items:baseline;gap:9px;font-family:var(--head);font-size:23.6px;line-height:1.1;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.sec-title b{font-weight:400}
.sec-title .n{color:var(--accent-ink);font-weight:400}
.sec-title .info{align-self:center}
/* B7-2: the IPW symbol before each dashboard section title, with a reduced-motion-safe "gyro" 3D spin.
   Theme-aware (white symbol on dark, purple/gradient symbol on light). The spin is triggered by JS
   (once on scroll-into-view, then at random ~20s rests) via the .spin class; angles/speed/direction are
   randomised per trigger through the --g* custom props so no two spins look identical ("varied angles").
   The symbol is 28x16 (1.75:1); sized in em so it tracks the heading. */
/* Matt R7: symbol height = the text's visual (cap) height exactly (~.72em of the heading size; width keeps
   the mark's 1.75:1 ratio -> 1.26em). Spacing-after is IDENTICAL on both heading kinds: .sec-title is flex
   (gap:9px + the .14em margin), .panel-title is NOT flex (no gap), so it gets the same 9px + .14em as an
   explicit margin below - "Opportunity Discovery matches World Cup Statistics". */
.sec-sym{display:inline-block;flex:0 0 auto;align-self:center;vertical-align:middle;width:1.454em;height:.83em;margin-right:.14em;/* Matt R9: +5% again */
  background:url(assets/brand/symbol-white.svg) center/contain no-repeat;
  transform:rotateY(0deg);will-change:transform}
.panel-title .sec-sym{margin-right:calc(9px + .14em)}
html[data-theme="light"] .sec-sym{background-image:url(assets/brand/symbol.svg)}
.sec-sym.spin{animation:secGyro var(--gspd,2.4s) cubic-bezier(.45,.05,.35,.95) both}
/* Matt R24: a free-flowing SWIVEL - it overswings, drifts back, sways past and settles, rather than
   one rigid revolution. Timing spread up to ~5.5s per spin (JS randomises duration + axis). */
@keyframes secGyro{
  0%{transform:perspective(320px) rotate3d(var(--gx,0),var(--gy,1),var(--gz,0),0deg)}
  28%{transform:perspective(320px) rotate3d(var(--gx,0),var(--gy,1),var(--gz,0),calc(var(--gfull,360deg)*0.55))}
  46%{transform:perspective(320px) rotate3d(var(--gx,0),var(--gy,1),var(--gz,0),calc(var(--gfull,360deg)*0.38))}
  70%{transform:perspective(320px) rotate3d(var(--gx,0),var(--gy,1),var(--gz,0),calc(var(--gfull,360deg)*0.85))}
  84%{transform:perspective(320px) rotate3d(var(--gx,0),var(--gy,1),var(--gz,0),calc(var(--gfull,360deg)*1.06))}
  100%{transform:perspective(320px) rotate3d(var(--gx,0),var(--gy,1),var(--gz,0),var(--gfull,360deg))}
}
@media (prefers-reduced-motion:reduce){.sec-sym{animation:none!important}}
/* RB9: stacked section header — title (H2) + muted subhead, properly aligned */
.sec-head{margin-top:26px;display:flex;flex-direction:column;gap:5px}
.sec-head .sec-title{margin:0}
.sec-sub{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted);font-weight:400;max-width:640px}
/* Matches title + LIVE + count, all on one vertically-centred row */
/* item 10: extra breathing room above + below the Matches heading row */
/* Matt R7: heading margins +30% (0.4 -> 0.52rem), mobile included (the old mobile negative-margin
   tighteners below are removed so this applies there too). */
.matches-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0.62rem 0 0.86rem}   /* T-196 padding drop: 0.62->0.86rem below the head = more air above the filter buttons */
.matches-head .sec-title{line-height:1}
/* item 10: extra breathing room around the "World Cup statistics" heading */
#wcStatsSec>.sec-title{display:inline-flex;margin:0.52rem 0}
.matches-head #matchCount{font-size:12px}
/* market colour key (far right of the Matches title) */
.mkey{margin-left:auto;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.mk{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.mk-d{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.mk-d.actnow{background:var(--red);animation:keyflash .9s steps(1,end) infinite}
.mk-d.watch{background:var(--amber);animation:keyflashs 2.3s ease-in-out infinite}
.mk-d.avoid{background:var(--red);opacity:.5}
.mk-d.won{background:var(--green)}
.mk-d.lost{background:var(--red-tx)}
@keyframes keyflash{0%,49%{opacity:1}50%,100%{opacity:.22}}
@keyframes keyflashs{0%,100%{opacity:1}50%{opacity:.4}}
.live-dot{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--red);font-weight:600}
.live-dot::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ============================================================
   COLLAPSIBLE PANEL (left column sections)
   ============================================================ */
.panel{background:var(--glass);border-radius:var(--r-lg);box-shadow:var(--glass-sh),var(--glass-hi);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.panel-h{width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:0;cursor:pointer;padding:16px 16px 12px;font-family:var(--body);text-align:left}
.panel-title{font-family:var(--head);font-size:19px;line-height:1.1;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
/* RB9: panel accent calmed from an animated spectrum-gradient to a solid accent (more formal) */
.panel-title b{color:var(--accent-ink);font-weight:600}
.panel-count{font-size:12px;color:var(--muted)}
.panel-pulse{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:600;color:var(--green-tx);text-transform:uppercase;letter-spacing:.04em}
.panel-pulse::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.4s infinite}
.panel-chev{margin-left:auto;font-size:14px;color:var(--muted);transition:transform .2s}
.panel.collapsed .panel-chev{transform:rotate(-90deg)}
.panel-body{padding:0 16px 16px;display:flex;flex-direction:column;align-items:stretch;gap:10px;max-height:none}
.panel.collapsed .panel-body{display:none}
.panel-body>*{width:100%;box-sizing:border-box}

/* RB (item 2): heading "comes out of the shape" — matches the WC-Statistics / Matches
   treatment where the title sits ABOVE the panel, not inside it. The glass shell now wraps
   only the body (.panel-shell); the header is a bare title bar. Still fully collapsible. */
.panel-openhead{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:0!important;display:flex;flex-direction:column;gap:8px}
/* item 10: Opportunity Discovery + Accas Generated headings — larger (1.5x), lighter, more breathing room */
.panel-openhead .panel-h{padding:0.52rem 2px}/* Matt R7: heading breathing room +30% (0.4 -> 0.52rem) */
/* Matt R8 (screenshot, red line): the Opp Discovery glass body started 12px HIGHER than the WC-stats
   cards next to it — push the open-head panels' shells down to sit on the same line (desktop only;
   the columns stack on mobile so there is nothing to align). Measured delta: 12px. */
@media(min-width:1024px){.panel-openhead .panel-shell{margin-top:12px}}
.panel-openhead .panel-h::before{display:none}
/* B7-41 item 6: Opp Discovery / Accas panel titles -25% (31.5->23.6px), uniform with .sec-title. */
.panel-openhead .panel-title{font-family:var(--head);font-size:23.6px;font-weight:400;letter-spacing:-.01em}
.panel-openhead .panel-title b{font-weight:400}
.panel-openhead .panel-shell{background:var(--glass);border-radius:var(--r-lg);box-shadow:var(--glass-sh),var(--glass-hi),inset 0 0 46px rgba(124,128,238,.035);border:1px solid rgba(124,128,238,.10);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding-top:14px}
.panel-openhead .panel-rg{padding-left:16px;padding-right:16px}
.panel-openhead.collapsed .panel-shell{display:none}
.panel-openhead.collapsed{gap:0}

/* ============================================================
   OPPORTUNITY DISCOVERY — matches with nested suggested markets
   ============================================================ */
/* risk-type filter (top of Opportunity Discovery) */
/* RB24: risk pills colour-coded by tier + bolder so they stand out. NO background — it blends with the
   panel (the solid bar read as a black strip Matt flagged); not sticky (avoids a floating-bar artifact). */
/* RB58: risk filters fill the width evenly (6 equal cells → the last is flush to the margin) + larger */
/* size each risk button to fit its label (e.g. "Super low" no longer clips to "Super l..."), filling the row
   proportionally — content-width basis + equal grow, so wider labels get wider buttons and nothing truncates */
.opp-risk{display:flex;flex-wrap:nowrap;gap:6px;background:transparent;padding:2px 0 9px}
.opp-risk span{flex:1 1 auto;font-size:13px;font-weight:700;color:var(--text-2,var(--ink));border:1px solid var(--line2);border-radius:32px;padding:8px 7px;cursor:pointer;transition:.15s;text-align:center;white-space:nowrap}
.opp-risk span:hover{border-color:var(--line2);color:var(--ink)}
.opp-risk span[data-r="super"]{color:var(--green-tx);border-color:rgba(80,149,108,.45)}
.opp-risk span[data-r="low"]{color:var(--blue-tx);border-color:rgba(77,91,219,.45)}
.opp-risk span[data-r="med"]{color:var(--accent-ink);border-color:var(--purple-12)}
.opp-risk span[data-r="risky"]{color:var(--amber-tx);border-color:rgba(232,184,75,.45)}
.opp-risk span[data-r="high"]{color:var(--red-tx);border-color:rgba(255,90,87,.45)}
.opp-risk span.on{background:var(--purple-08);color:var(--ink);border-color:var(--purple-12)}
.opp-risk span[data-r="super"].on{background:var(--green-bg);color:var(--green-tx);border-color:transparent}
.opp-risk span[data-r="low"].on{background:var(--blue-bg);color:var(--blue-tx);border-color:transparent}
.opp-risk span[data-r="risky"].on{background:var(--amber-bg);color:var(--amber-tx);border-color:transparent}
.opp-risk span[data-r="high"].on{background:var(--red-bg);color:var(--red-tx);border-color:transparent}
/* RB24: "Take to match centre" link under an expanded game */
.opp-tomc{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px;font-size:11px;font-weight:700;color:var(--accent-ink);border-top:1px solid var(--line);text-decoration:none;transition:.15s}
.opp-tomc:hover{background:var(--purple-05);color:var(--ink)}
.opp-tomc .arr{transition:transform .15s}.opp-tomc:hover .arr{transform:translateX(3px)}
.opp-controls{display:flex;gap:8px;margin:2px 0 10px}
.opp-ctl{font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:1px solid var(--line2);border-radius:32px;padding:4px 11px;cursor:pointer;transition:.15s}
.opp-ctl:hover{color:var(--ink);border-color:var(--purple-12);background:var(--purple-05)}
/* FE-2: Opportunity Discovery sort chips (Time / Competition / Predictability). Predictability is the
   WC-Pass premium sort, dashed-gold-locked below WC Pass (routes to pricing, not the register modal). */
.opp-sortctl{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.opp-sortlbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px}
.opp-sopt{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:5px 11px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.opp-sopt:hover{color:var(--ink);border-color:var(--purple-12)}
.opp-sopt.on{background:var(--purple-08);color:var(--ink);border-color:var(--purple-12)}
.opp-sopt.locked{border-style:dashed;border-color:rgba(232,198,106,.5);color:var(--muted)}
.opp-sopt.locked:hover{color:var(--ink)}
.opp-sopt .opp-stag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#c99a35;background:rgba(232,198,106,.22);border-radius:999px;padding:1px 6px}
html[data-theme=light] .opp-sopt .opp-stag{color:#7a5c14}
.opp-sopt .ipw-lk,.opp-sopt svg{width:12px;height:12px;flex:0 0 auto;opacity:.85}
@media(max-width:600px){.opp-sortctl{gap:5px}.opp-sopt{flex:1 1 auto;justify-content:center}}
/* FE-2: dynamic section dividers in Opp Discovery - the headline competition (World Cup while it runs) gets
   emphasis; each divider shows its group count. Built on the shared .feed-divider (rule line + uppercase). */
.opp-div .opp-div-n{flex:0 0 auto;font-size:10px;font-weight:700;color:var(--muted);background:var(--purple-05);border:1px solid var(--line2);border-radius:999px;padding:0 6px;min-width:18px;text-align:center}
/* higher specificity than the base .feed-divider (declared later) so the headline emphasis actually wins */
.feed-divider.opp-div-headline{color:var(--ink);font-weight:800}
.feed-divider.opp-div-headline::after{background:linear-gradient(90deg,var(--purple-12),transparent)}
.feed-divider.opp-div-headline .opp-div-n{color:var(--accent-ink);background:var(--purple-08);border-color:var(--purple-12)}

.opp-match{border-radius:var(--r);background:var(--glass-2);overflow:hidden}
.opp-mh{width:100%;display:flex;align-items:center;gap:9px;padding:12px 14px;border:0;background:transparent;cursor:pointer;font-family:var(--body);text-align:left;transition:background .15s}
.opp-mh:hover{background:rgba(255,255,255,.03)}
.opp-match:not(.collapsed) .opp-mh{border-bottom:1px solid var(--line)}
.opp-mh img{width:22px;height:22px;border-radius:50%;object-fit:contain;background:var(--card);flex:0 0 auto}
.opp-mh .teams{font-size:13px;font-weight:600;color:var(--ink);flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.opp-mh .teams .v{color:var(--muted);font-weight:400}
.opp-mh .st{margin-left:auto;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:3px 7px;border-radius:32px;white-space:nowrap}
.opp-mh .st.live{background:var(--red-bg);color:var(--red-tx)}
.opp-mh .st.up{background:var(--purple-08);color:var(--accent-ink)}
.opp-n{font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap}
.opp-match:not(.collapsed) .opp-n{display:none}
.opp-chev{font-size:11px;color:var(--muted);transition:transform .2s;flex:0 0 auto}
.opp-match:not(.collapsed) .opp-chev{transform:rotate(180deg)}
.opp-match.collapsed .sug-list{display:none}
.sug-list{display:flex;flex-direction:column}
/* risk filter hides non-matching suggestions */
/* risk filter hides only LIVE opp suggestions — never finished-game result rows (.sug.done carry no data-tiers) */
#opps.risk-super .sug:not(.done):not([data-tiers~="super"]),#opps.risk-low .sug:not(.done):not([data-tiers~="low"]),#opps.risk-med .sug:not(.done):not([data-tiers~="med"]),#opps.risk-risky .sug:not(.done):not([data-tiers~="risky"]),#opps.risk-high .sug:not(.done):not([data-tiers~="high"]){display:none}

/* finished games — multiple graded markets per game (✓ landed / ✗ missed) */
/* RB29: finished games read as a distinct "past" section (cool tint + accent) — scores stay readable, not dimmed out */
.opp-match.done{background:rgba(77,91,219,.06);box-shadow:inset 3px 0 0 rgba(77,91,219,.45)}
.feed-divider-fin{color:var(--blue-tx)}
.show-more-fin{display:block;width:100%;margin:5px 0 2px;padding:9px;background:var(--glass-2);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;border-radius:var(--r);transition:.15s}
.show-more-fin:hover{color:var(--ink);border-color:var(--line2)}
.mhm-num .mhm-pct{font-size:.6em;font-style:normal;font-weight:600;opacity:.55;margin-left:.5px}
.opp-mh .sc{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.opp-tally{display:inline-flex;gap:6px;margin-left:auto;font-size:10px;font-weight:700;font-variant-numeric:tabular-nums}
.opp-tally .w{color:var(--green-tx)}.opp-tally .l{color:var(--red-tx)}
.sug.done{cursor:default;padding:7px 12px}
.sug.done:hover{background:transparent}
.sug.done .sug-info{display:flex;align-items:baseline;gap:8px}
.sug.done .sug-mkt{color:var(--muted);font-weight:500}
.sug.done.win .sug-mkt{color:var(--ink)}
.sug.done .sug-meta{font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.sug.done.win .sug-meta{color:var(--green-tx)}
.sug.done.loss .sug-meta{color:var(--red-tx)}
.sug-res{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.sug.done.win .sug-res{background:var(--green-bg);color:var(--green-tx)}
.sug.done.loss .sug-res{background:var(--red-bg);color:var(--red-tx)}

/* ============================================================
   MOTION & POLISH — entrance reveals, flowing accents, hover lift.
   All gated behind prefers-reduced-motion.
   ============================================================ */
@keyframes ipw-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ipw-shimmer{to{background-position:200% center}}
@keyframes ipw-flow{to{background-position:200% 0}}
@keyframes ipw-sheen{0%{transform:translateX(-130%)}55%,100%{transform:translateX(260%)}}
.mrow,.opp-match,.stat-card,.rc,.acca-card,.acca-build{animation:ipw-up .42s cubic-bezier(.2,.8,.2,1) both}
.match-list>*:nth-child(2),.stat-row>*:nth-child(2),#opps .opp-match:nth-child(3){animation-delay:.05s}
.match-list>*:nth-child(3),.stat-row>*:nth-child(3),#opps .opp-match:nth-child(4){animation-delay:.1s}
.match-list>*:nth-child(n+4),.stat-row>*:nth-child(n+4),#opps .opp-match:nth-child(n+5){animation-delay:.15s}
.mrow{transition:transform .18s ease,border-color .18s,box-shadow .18s}
.mrow:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:var(--shadow-lg)}
.acca-card{transition:transform .18s ease,border-color .18s}
.acca-card:hover{transform:translateY(-2px);border-color:var(--line2)}
/* flowing spectrum on gradient text + bars */
.feed-h .t b,.mr-suggest-h .spk{background-size:200% auto;animation:ipw-shimmer 7s linear infinite}
.acca-prog>i,.sug-bar>i{background-size:200% 100%;animation:ipw-flow 2.8s linear infinite}
/* gentle "act now" sheen on the build-acca CTA */
.acca-build{position:relative;overflow:hidden}
.acca-build::after{content:"";position:absolute;top:0;left:0;height:100%;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:ipw-sheen 3.6s ease-in-out infinite;pointer-events:none}
/* safe-to-bet games get a subtle green glass swoop */
.opp-match.safe-glow{border-color:rgba(80,149,108,.4)}
.opp-match.safe-glow .opp-mh{position:relative;overflow:hidden}
.opp-match.safe-glow .opp-mh::after{content:"";position:absolute;top:0;left:0;height:100%;width:40%;background:linear-gradient(100deg,transparent,rgba(177,231,199,.14),transparent);transform:translateX(-140%);animation:ipw-swoop 4.5s ease-in-out infinite;pointer-events:none}
@keyframes ipw-swoop{0%{transform:translateX(-140%)}55%,100%{transform:translateX(320%)}}
/* expanded content fades in */
.mrow.open .mrow-body-inner,.stog.open .sd-grid.on{animation:ipw-up .3s ease both}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
/* suggested market row (selectable for accumulator) */
.sug{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line);background:transparent;cursor:pointer;transition:background .15s}
.sug:first-child{border-top:0}
.sug:hover{background:rgba(255,255,255,.03)}
.sug.sel{background:var(--purple-08)}
.sug-info{flex:1;min-width:0}
.sug-mkt{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sug-meta{font-size:10px;color:var(--muted)}
/* T3: real best-price chip + affiliate CTA on a dashboard pick (gated to Day Pass/WC Pass) */
.sug-odds{display:inline-flex;align-items:center;gap:5px;margin-top:3px;font-size:10px;font-weight:700;color:var(--ink)}
.sug-odds b{font-family:var(--head);font-weight:800;color:var(--green-tx);font-variant-numeric:tabular-nums}
.sug-odds.lk{color:var(--muted);font-weight:600;font-style:italic}
.sug-bet{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:700;color:#fff;background:#5358c8;padding:2px 7px;border-radius:5px;transition:.15s}
.sug-bet:hover{filter:brightness(1.1)}
.sug-bet .ad{font-size:7.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:rgba(255,255,255,.25);padding:0 3px;border-radius:2px}
.sug-lik{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.sug-pct{font-family:var(--head);font-feature-settings:"ss03";font-size:15px;line-height:15px;color:var(--ink)}
.sug-pct.gated{font-size:12px;letter-spacing:1px;color:var(--muted)}
.sug-bar{width:54px;height:4px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.sug-bar>i{display:block;height:100%;border-radius:3px;background:var(--muted)}
.sug.super .sug-bar>i,.sug.low .sug-bar>i{background:var(--green)}.sug.super .sug-meta,.sug.low .sug-meta{color:var(--green-tx)}
.sug.med .sug-bar>i{background:var(--blue)}.sug.med .sug-meta{color:var(--blue-tx)}
.sug.risky .sug-bar>i{background:var(--amber)}.sug.risky .sug-meta{color:var(--amber-tx)}
.sug.high .sug-bar>i{background:var(--red)}.sug.high .sug-meta{color:var(--red-tx)}
.sug-add{width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:14px;flex:0 0 auto;transition:.15s}
.sug.sel .sug-add{background:var(--accent-fill);border-color:var(--accent-ink);color:#fff}
/* RB39: unpriced market (no real last-10 rate) — shown but not addable */
.sug-add.soon{border-style:dashed;color:var(--muted);cursor:default;font-size:13px}.sug-add.soon:hover{background:transparent}

.feed-divider{display:flex;align-items:center;gap:8px;margin:7px 0 3px;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.feed-divider::after{content:"";flex:1;height:1px;background:var(--line)}
/* Matt: click a competition header to collapse/expand its cards (accordion). Button-shaped divider that
   adds a chevron + count chip so the affordance is obvious.
   Matt B7-review #1: the styled header BAND (padding + subtle border + faint glass background + left
   accent rail) is now the BASE treatment on EVERY competition group — club leagues included — so all
   headers look consistent and collapsible. Only the EXTRA animated flourish (gradient-flow name, the
   diagonal sheen sweep, the stronger gradient band) stays WORLD-CUP-ONLY (.comp-toggle.wc below). */
/* Matt B7-review item 9: the competition group header is bigger — the NAME text larger (10px→15px),
   the header bar/shape ~1.5x TALLER (padding 8px→13px vertical), and the count chip scaled to match.
   Collapse/expand + count chip preserved; the WC flourish (below) still applies on top. */
/* Matt R8: the header shape loses its OUTLINE (border removed, soft band kept). */
.comp-toggle{position:relative;overflow:visible;display:flex;align-items:center;width:100%;
  background:transparent;border:0;box-shadow:none;
  color:var(--ink);font:inherit;text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:400;
  cursor:pointer;text-align:left;padding:15px 2px;margin:8px 0}
/* Matt R8: comp name + " · " + real extra info on ONE line that auto-scrolls when it overflows
   (autoMarquee adds .scroll + --mq2, same engine as the acca/market names). */
.comp-toggle .comp-nm{overflow:hidden;white-space:nowrap;min-width:0;flex:1 1 auto}
.comp-toggle .comp-nm .comp-nm-i{display:inline-block;white-space:nowrap}
.comp-toggle .comp-nm.scroll .comp-nm-i{animation:nmscroll2 7s ease-in-out infinite alternate}
.comp-toggle .comp-info{display:none;color:var(--muted-2);font-weight:400;text-transform:none;letter-spacing:0}
.comp-toggle::after{content:none} /* the base band replaces the plain hairline divider */
.comp-toggle .comp-rail{display:none}
.comp-toggle:hover{color:var(--ink)}
.comp-toggle:hover .comp-nm{color:var(--ink)}
.comp-toggle .comp-nm{position:relative;z-index:1;color:var(--ink);transition:color .15s}
.comp-toggle .comp-n{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:18px;padding:0 7px;margin-left:auto;border-radius:32px;background:var(--glass-3);color:var(--muted);font-size:10px;font-weight:400;font-variant-numeric:tabular-nums}
.comp-toggle .comp-chev{position:relative;z-index:1;margin-left:8px;font-size:14px;color:var(--muted);transition:transform .2s}
.comp-group.collapsed .comp-chev{transform:rotate(-90deg)}
.comp-group.collapsed .comp-body{display:none}
.comp-body{display:flex;flex-direction:column;gap:12px}
@media(max-width:1023px){.comp-body{gap:10px}}

/* ---- Matt B7-review #1/#12: the World Cup header keeps the EXTRA "fancy" flourish on top of the
   shared base band — a stronger indigo→gold gradient band, a purple accent rail, a slow diagonal
   sheen sweep, and gradient-flowing gold/white name text. The base band (border, padding, rail slot,
   count chip) now applies to every group; only these flourish extras are WC-only. Reduced-motion safe. */
.comp-toggle.wc{
  background:transparent;
  box-shadow:none;
}
.comp-toggle.wc .wc-rail{display:none}
.comp-toggle.wc .wc-sheen{ /* slow diagonal sheen sweep */
  display:none;
}
.comp-toggle.wc .comp-nm{
  position:relative;z-index:1;background:none;color:var(--ink);animation:none;
}
.comp-toggle.wc:hover .comp-nm{color:var(--ink)}
.comp-toggle.wc .comp-n{position:relative;z-index:1;background:var(--hi-soft);color:var(--hi-strong)}
.comp-toggle.wc .comp-chev{position:relative;z-index:1}
@keyframes wcSheen{0%{transform:translateX(-140%)}55%,100%{transform:translateX(360%)}}
@keyframes wcFlow{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
@media (prefers-reduced-motion:reduce){
  .comp-toggle.wc .wc-sheen{animation:none;opacity:0}
  .comp-toggle.wc .comp-nm{animation:none;background-position:0 0}
}
/* graded historical calls (greyed, win/loss) */
.op{display:block;border-radius:var(--r);padding:10px 12px;background:transparent;opacity:.6;transition:opacity .2s}
.op:hover{opacity:.9}
.op-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.op-teams{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;min-width:0;color:var(--muted)}
.op-teams img{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:0 0 auto;filter:grayscale(1)}
.op-teams .op-noflag{width:16px;height:16px;border-radius:50%;background:var(--card);flex:0 0 auto}
.op-teams b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-teams .op-v{color:var(--muted);font-weight:400}
.op-grade{font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.op-grade.g{color:var(--green-tx);background:var(--green-bg)}.op-grade.r{color:var(--red-tx);background:var(--red-bg)}
.op-mkt{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.op-sel{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-track{height:4px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;margin-top:7px}
.op-track>i{display:block;height:100%;border-radius:3px;background:var(--line2)}
.op-win .op-track>i{background:var(--green)}.op-loss .op-track>i{background:var(--red)}

/* ============================================================
   ACCAS GENERATED panel — user + IPW-generated accumulators, progress
   ============================================================ */
/* structured like the opportunity cards: header / body / footer sections, full width */
.acca-card{border-radius:var(--r);background:var(--glass-2);overflow:hidden;display:flex;flex-direction:column}
.acca-card.ipw{border-color:var(--purple-12)}
.acca-h{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.acca-h.acca-toggle{cursor:pointer;user-select:none}
.acca-h.acca-toggle:hover{background:rgba(255,255,255,.03)}
.acca-sum{margin-left:auto;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.acca-sum .prof{color:var(--green-tx);margin-left:5px}
.acca-hst{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:32px}
.acca-chev{flex:0 0 auto;font-size:11px;color:var(--muted);transition:transform .2s}
.acca-card:not(.collapsed) .acca-chev{transform:rotate(180deg)}
.acca-card.collapsed .acca-body{display:none}
.acca-card.collapsed .acca-h{border-bottom:0}
.acca-nm{font-size:13px;font-weight:600;color:var(--ink);flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
.acca-nm-i{display:inline-block;white-space:nowrap}
.acca-nm.scroll .acca-nm-i{animation:nmscroll2 6s ease-in-out infinite alternate}
.acca-hr{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* T-197 (the pills Matt circled: SCANNING / WATCHING / NEW). Two faults at once — 8px is below any
   readable floor, and pale-lavender text on a 13% tint disappears completely in light mode, where
   the tint is nearly white. Now 9.5px with a themed ink/tint pair that holds in both themes. */
.acca-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:32px;background:var(--purple-12);color:#c9cbf7;white-space:nowrap}
html[data-theme=light] .acca-tag{background:rgba(16,98,126,.14);color:#0d5570}
.acca-odds{margin-left:auto;font-family:var(--head);font-feature-settings:"ss03";font-size:18px;color:var(--ink)}
.acca-legs{display:flex;flex-direction:column;padding:2px 14px}
.acca-leg{display:flex;align-items:center;gap:9px;font-size:12px;padding:7px 0;border-top:1px solid var(--line)}
.acca-leg:first-child{border-top:0}
.acca-leg .ic{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex:0 0 auto}
.acca-leg .ic.open{border:1.5px solid var(--line2);background:transparent}
.acca-leg .ic.win{background:var(--green-bg);color:var(--green-tx)}
.acca-leg .ic.loss{background:var(--red-bg);color:var(--red-tx)}
.acca-leg .lg-sel{flex:1;min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acca-leg.loss .lg-sel{color:var(--muted);text-decoration:line-through}
/* FE-2 unbettable audit: a settled/closed leg in the "Your selection" card greys out with its outcome */
.acca-leg.settled{opacity:.6}
.acca-leg.settled .lg-sel{color:var(--muted)}
.acca-leg .lg-out{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--muted)}
.acca-leg .lg-out svg{width:12px;height:12px}
.acca-leg .lg-out.won{color:var(--green-tx)}.acca-leg .lg-out.lost{color:var(--red-tx)}
.sel-stale{margin-top:9px;font-size:10.5px;font-weight:600;color:var(--amber-tx);background:var(--amber-bg);border:1px solid rgba(232,184,75,.3);border-radius:8px;padding:7px 9px;line-height:1.4}
/* Matt R9: live shot-sequence squares (green on-target / red off-target, chronological) */
.shotsq{display:inline-block;width:9px;height:9px;margin:0 2px 0 0;border-radius:1px}
.shotsq.on{background:var(--green)}
.shotsq.off{background:var(--red)}
.exh-col.exh-shots .hv,.exh-col.exh-shots .av{justify-content:flex-start;flex-wrap:wrap;padding:6px 10px;font-size:12px}
.sq-key{display:inline-block;width:7px;height:7px;margin:0 3px 0 6px;border-radius:1px}
.sq-key.on{background:var(--green)}
.sq-key.off{background:var(--red)}

/* B7-35: VOID legs (postponed/cancelled match, dropped from the slip) — neutral + struck, never ✓/✗. */
.acca-leg .ic.void{border:1.5px solid var(--line2);background:transparent;color:var(--muted-2);font-size:11px}
.acca-leg.void .lg-sel{color:var(--muted-2);text-decoration:line-through}
.acca-leg .lg-void{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line2);padding:1.5px 6px;margin-left:6px;white-space:nowrap}
/* B7-35: slip-level badges — a WON slip that carried a voided leg settled at reduced odds; a slip whose
   settlement was corrected by the 48h diary re-audit is stamped "corrected". */
.acca-voidlegs{font-size:10px;font-weight:600;color:var(--amber-tx);border:1px solid rgba(232,184,75,.4);background:var(--amber-bg,rgba(232,184,75,.1));padding:2px 8px;margin-left:8px;white-space:nowrap;cursor:help}
.acca-amend{font-size:10px;font-weight:600;color:var(--blue-tx,#7cb7e8);border:1px solid rgba(124,183,232,.4);padding:2px 8px;margin-left:8px;white-space:nowrap;cursor:help}
.acca-leg .lg-odds{color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.acca-prog{height:5px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;margin:0 14px 2px}
.acca-prog>i{display:block;height:100%;border-radius:3px;background:var(--spectrum)}
.acca-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:var(--muted);padding:9px 14px;border-top:1px solid var(--line)}
.acca-foot .st{font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.acca-foot .st.live{color:var(--green-tx)}
.acca-meta{color:var(--muted)}
.acca-meta .w{color:var(--green-tx);font-weight:700}.acca-meta .l{color:var(--red-tx);font-weight:700}
.acca-empty{font-size:11px;color:var(--muted);text-align:center;padding:14px;border:1px dashed var(--line2);border-radius:var(--r)}
.acca-build{display:block;padding:0 0 12px;border:1px solid var(--purple-12);border-radius:var(--r);background:var(--purple-08)}
.acca-build .t{font-size:12px;font-weight:600;color:var(--ink)}
.acca-build .t small{display:block;font-weight:400;color:var(--muted);font-size:12.5px;line-height:1.45}

/* ============================================================
   WORLD CUP STATISTICS — horizontal scroll on mobile, grid on desktop
   ============================================================ */
.stat-row{display:flex;align-items:stretch;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scroll-snap-type:x proximity}
/* Matt: lift the World Cup statistics (statcard) strip up ~20% (MOBILE only — desktop wants more gap under the strip) */
/* Matt R7: mobile no longer tightens the WC-stats heading (was margin-top:-6px / strip -8px) — the +30%
   heading breathing room applies on mobile too. */
.stat-card{flex:0 0 286px;width:286px;max-width:286px;scroll-snap-align:start;background:var(--glass);box-shadow:var(--glass-sh),var(--glass-hi);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:13px;overflow:hidden;position:relative;transition:transform .15s,box-shadow .15s}
.stat-card>*{min-width:0;max-width:100%}
/* upcoming = striking (brighter border); past = greyed, reveals on hover */
.stat-card.upcoming{background:rgba(124,128,238,.08);box-shadow:var(--glass-sh),inset 0 1px 0 rgba(255,255,255,.08)}
.stat-card.live{box-shadow:var(--glass-sh),var(--glass-hi)}
/* RB: finished stat cards sit darkened + details muted/blurred so they can't be read at a glance;
   full legibility returns on hover AND keyboard focus (a11y). Upcoming/live cards unchanged.
   Matt B7-review item 18: the overlay was too black (.88) — lighten it (→.60 in dark). In LIGHT mode
   use a WHITE overlay so finished cards dim to white-ish (not black), still revealing on hover. */
.stat-card.past{background:rgba(10,10,16,.5)}
.stat-card.past::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(12,12,20,.6);pointer-events:none;transition:opacity .28s;z-index:2}
html[data-theme="light"] .stat-card.past{background:rgba(248,249,255,.55)}
html[data-theme="light"] .stat-card.past::after{background:rgba(252,252,255,.72)}
.stat-card.past .hd,.stat-card.past .sub,.stat-card.past .grid{filter:blur(2.5px);opacity:.42;transition:filter .28s,opacity .28s}
.stat-card.past:hover,.stat-card.past:focus,.stat-card.past:focus-within{background:var(--glass)}
.stat-card.past:hover::after,.stat-card.past:focus::after,.stat-card.past:focus-within::after{opacity:0}
.stat-card.past:hover .hd,.stat-card.past:hover .sub,.stat-card.past:hover .grid,
.stat-card.past:focus .hd,.stat-card.past:focus .sub,.stat-card.past:focus .grid,
.stat-card.past:focus-within .hd,.stat-card.past:focus-within .sub,.stat-card.past:focus-within .grid{filter:none;opacity:1}
/* auto-scroll names that overflow the margin (set --mq via JS on hover) */
.nm.mq,.tn.mq{cursor:default}
.nm.mq:hover,.tn.mq:hover{text-overflow:clip;animation:nmscroll 3.2s linear infinite alternate}
@keyframes nmscroll{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--mq,0))}}
.stat-card:hover{border-color:var(--line2);transform:translateY(-1px)}
.stat-card .hd{display:flex;align-items:center;gap:8px;font-weight:600;font-size:16px;line-height:1.2;color:var(--ink)}
.stat-card .hd img{flex:0 0 auto;width:30px;height:30px;border-radius:7px;object-fit:contain;background:var(--card-2);padding:3px;overflow:hidden}
.stat-card .nm{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stat-card .nm.r{text-align:right}
.stat-card .hd .sc{flex:0 0 auto;font-family:var(--head);font-feature-settings:"ss03";font-size:16px;font-weight:600;color:var(--ink);background:var(--card-2);border-radius:6px;padding:2px 9px;font-variant-numeric:tabular-nums}
.stat-card .hd .sc.live{color:var(--green-tx)}
.stat-card .hd .vsep{flex:0 0 auto;color:var(--muted);font-size:13px;padding:0 2px}
.stat-card .sub{color:var(--muted);font-size:11px;display:flex;align-items:center;padding-bottom:11px;border-bottom:1px solid var(--line)}
.stat-card .sub .lv{color:var(--green-tx);font-weight:600}
.stat-card .sub .res{color:var(--green-tx);font-weight:600}
.stat-card .grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:11px 8px;align-items:center}
.stat-card .grid .k{text-align:center;color:var(--muted);font-size:11px;white-space:nowrap}
.stat-card .grid .k .info{margin-left:3px}
.stat-card .grid .hcell{text-align:right;font-size:13px;min-width:0;overflow:hidden}
.stat-card .grid .acell{text-align:left;font-size:13px;min-width:0;overflow:hidden}

/* Prediction dial stat strip - signed-off DIAL card ported from statcard-lab.html */
.stat-row .rc{scroll-snap-align:start}
.rc{flex:0 0 auto;width:214px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:5px;padding:12px 13px 9px;
  background-color:var(--glass);background-image:linear-gradient(158deg,rgba(255,255,255,.11),rgba(255,255,255,.025) 42%,transparent 64%);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  box-shadow:0 30px 62px -24px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 56px rgba(124,128,238,.06),inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter:blur(26px) saturate(155%);-webkit-backdrop-filter:blur(26px) saturate(155%)}
.rc::before{content:"";position:absolute;left:50%;top:72%;width:150px;height:150px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(124,128,238,.24),rgba(47,184,198,.07) 44%,transparent 66%);pointer-events:none;z-index:0}
.rc-live-glow::before{background:radial-gradient(circle,rgba(255,90,87,.2),transparent 64%)}
.rc>*{position:relative;z-index:1}
.rc-gauge{position:relative;width:100%;margin:2px auto 0;cursor:pointer;line-height:0}
.rc-gauge svg{width:100%;height:auto;display:block;overflow:visible}
.rc-gauge .seg{stroke:none}
.rc-gauge .seg.off{fill:var(--line2);opacity:.4}
.rc-gauge .seg.outer{fill:#8f93f2;filter:drop-shadow(0 0 1.4px rgba(124,128,238,.6))}
.rc-gauge .seg.inner{fill:#41c6d4;filter:drop-shadow(0 0 1.4px rgba(47,184,198,.55))}
.rc-center{position:absolute;left:0;right:0;bottom:7px;display:flex;flex-direction:column;align-items:center;pointer-events:none;text-align:center}
.rc.rc-half{width:252px;height:196px;padding:11px 12px 0;gap:4px;justify-content:space-between;border-radius:0}
.rc-half .rc-gauge{margin-top:0;flex:0 0 auto}
.rc-board{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.rc-team{display:flex;align-items:center;gap:5px;min-width:0}
.rc-team.away{flex-direction:row-reverse}
.rc-team .tn{font-family:var(--head);font-weight:500;font-size:10px;color:var(--ink);white-space:nowrap;overflow:hidden}
.rc-team .tn-i{display:inline-block;white-space:nowrap}
.rc-team.away .tn{text-align:right}
.rc-team .tn.scroll .tn-i{animation:tnScroll var(--mqdur,7s) linear infinite}
@keyframes tnScroll{0%,12%{transform:translateX(0)}50%,62%{transform:translateX(var(--mq2,0))}100%{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.rc-team .tn.scroll .tn-i{animation:none}}
.rc-crest{flex:0 0 auto;width:17px;height:17px;border-radius:4px;display:grid;place-items:center;font-family:var(--head);font-weight:500;font-size:7px;color:#fff;object-fit:contain;background:var(--card-2)}
.rc-crest.h{background:linear-gradient(135deg,#5358c8,#7C80EE)}
.rc-crest.a{background:linear-gradient(135deg,#2a7d68,#41c6d4)}
.team-fallback{display:inline-grid;place-items:center;flex:0 0 auto;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(135deg,hsl(var(--tf-h,250deg) 62% 24%),hsl(calc(var(--tf-h,250deg) + 52deg) 66% 29%));color:#fff;font-family:var(--head);font-weight:800;font-size:.8em;line-height:1;text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.rc-crest.team-fallback{border-radius:4px;font-size:7px}
.rc-mid{flex:0 0 auto;text-align:center;line-height:1.05}
.rc-mid .rc-sc{font-family:var(--head);font-weight:500;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.rc-mid .rc-ko{font-family:var(--head);font-weight:500;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.rc-mid .rc-ft{font-family:var(--head);font-weight:500;font-size:8.5px;color:var(--muted);letter-spacing:.03em;margin-top:1px}
.rc-mid .rc-lmin{display:inline-flex;align-items:center;gap:4px;color:var(--red);font-family:var(--head);font-weight:500;font-size:8.5px;margin-top:1px}
.rc-mid .rc-lmin::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
@media(prefers-reduced-motion:reduce){.rc-mid .rc-lmin::before{animation:none}}
.rc-half .rc-center{bottom:14%;gap:2px}
.rc-half .rc-center .big{font-size:37px;text-shadow:0 0 24px rgba(124,128,238,.34)}
.rc-half .rc-center .lab{font-size:10px}
.rc-refresh{position:absolute;left:0;right:0;bottom:5%;text-align:center;font-family:var(--body);font-size:7px;font-weight:400;color:var(--muted);opacity:.85;z-index:1}
.rc-center .big{font-family:var(--head);font-weight:500;font-size:29px;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(124,128,238,.28)}
.rc-center .big.na{color:var(--muted)}
.rc-center .lab{font-size:8px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:4px;line-height:1.1;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rc-tip{position:absolute;left:50%;bottom:30px;transform:translateX(-50%) translateY(4px);min-width:158px;background:#2A2930;border:1px solid var(--line2);border-radius:8px;padding:8px 10px;box-shadow:0 12px 26px -8px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:5}
.rc-gauge:hover ~ .rc-tip,.rc.tipshow .rc-tip{opacity:1;transform:translateX(-50%) translateY(0)}
.rc-tip .tr{display:flex;align-items:center;gap:8px;font-family:var(--body);font-size:10.5px;color:var(--muted)}
.rc-tip .tr+.tr{margin-top:5px}
.rc-tip .tr .tdot{width:7px;height:7px;border-radius:2px;flex:0 0 auto}
.rc-tip .tr .tdot.outer{background:#7C80EE}.rc-tip .tr .tdot.inner{background:#2fb8c6}
.rc-tip .tr .tnm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-tip .tr b{font-family:var(--head);font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
html[data-theme=light] .rc-tip{background:#fff;border-color:rgba(22,24,45,.12);box-shadow:0 14px 32px -10px rgba(70,78,150,.32)}
html[data-theme=light] .rc-tip .tr b{color:#12141f}
.rc-gauge .hit{cursor:pointer}
.rc-gauge:hover .seg.outer{filter:drop-shadow(0 0 2px rgba(124,128,238,.8))}
.rc-gauge:hover .seg.inner{filter:drop-shadow(0 0 2px rgba(47,184,198,.75))}
.rc-gauge.spot-outer .seg.outer{fill:#b3b8ff;filter:drop-shadow(0 0 4px rgba(124,128,238,1))}
.rc-gauge.spot-inner .seg.inner{fill:#6ee4ef;filter:drop-shadow(0 0 4px rgba(47,184,198,.95))}
.rc:hover::before{background:radial-gradient(circle,rgba(124,128,238,.28),rgba(47,184,198,.09) 45%,transparent 68%)}
.rc-live-glow:hover::before{background:radial-gradient(circle,rgba(255,90,87,.24),transparent 66%)}

/* better-than-opponent value cell */
.vs{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.vs.win{color:var(--green-tx)}
.vs.lose{color:var(--muted);font-weight:500}
.vs-ar{font-style:normal;font-size:.82em;margin-left:1px}

/* filter tabs */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding-top:4px}   /* T-196: a touch more room around the buttons themselves */
.ftab{border:1px solid var(--line2);border-radius:999px;padding:7px 13px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}
.ftab.on{background:var(--purple-08);color:var(--ink);border-color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--purple-12);font-weight:600}
.ftab.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-fill);flex:0 0 auto}
.ftab-reset{border-style:dashed;color:var(--accent-ink)}
.ftab-reset:hover{color:var(--ink);border-color:var(--accent-ink)}
.filt-active{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);padding:4px 10px;border:1px dashed var(--purple-12);border-radius:999px}
.filt-active .fa-x{cursor:pointer;font-weight:700;opacity:.75}
.filt-active .fa-x:hover{opacity:1}

/* Matt R8: the ● LIVE dot next to Matches is gone — the LIVE FILTER TAB is the live indicator now.
   When a game is genuinely in play (class set from real is_live in renderList) the tab's text AND its
   pill outline flash together. Reduced-motion = steady red, no flash. */
.ftab.live-flash{color:var(--red-tx);border-color:rgba(255,90,87,.55);animation:ftabLive 1.6s ease-in-out infinite}
@keyframes ftabLive{0%,100%{color:var(--red-tx);border-color:rgba(255,90,87,.35);box-shadow:0 0 0 0 rgba(255,90,87,0)}
  50%{color:var(--red);border-color:var(--red);box-shadow:0 0 10px 0 rgba(255,90,87,.35)}}
@media (prefers-reduced-motion:reduce){.ftab.live-flash{animation:none}}
/* RB (item 4): match sort control — sits at the right of the status filter tabs */
.sortctl{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sortctl-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-right:2px}
/* ── T-196: the "aurora" control ─────────────────────────────────────────────
   Matt picked the button style off vulk.dev and sent the DevTools panel for it. The recipe there:
   a radial-gradient body lit from above, a 1px inset white highlight on the top edge, an inner
   bottom shadow for depth, a soft drop shadow, and transform+box-shadow transitions on
   cubic-bezier(.2,.8,.2,1) so it lifts on hover. Rebuilt here in OUR palette (his green-black
   becomes our indigo/ink) rather than copying their colours, and exposed as tokens so one change
   restyles every control that opts in. Used by the pattern chips first; the same class is what the
   platform-wide pass will apply to the rest.
   Readability first: text is 12.5px/600 (was 12px muted grey, which he flagged as too small), and
   the light theme gets its own gradient + ink so it never becomes pale-on-pale. */
:root{
  --aurora-bg:radial-gradient(125% 145% at 50% -25%,#2b2f6b 0,#191a33 52%,#111121 100%);
  --aurora-ink:#eaeaf7;
  --aurora-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 -10px 20px rgba(0,0,0,.38),0 1px 1px rgba(0,0,0,.30),0 8px 20px -12px rgba(0,0,0,.45);
  --aurora-shadow-hi:inset 0 1px rgba(255,255,255,.18),inset 0 -10px 20px rgba(0,0,0,.30),0 2px 3px rgba(0,0,0,.26),0 14px 28px -12px rgba(0,0,0,.5);
  --aurora-ease:cubic-bezier(.2,.8,.2,1);
}
html[data-theme=light]{
  --aurora-bg:radial-gradient(125% 145% at 50% -25%,#ffffff 0,#eef3f8 52%,#e2eaf2 100%);
  --aurora-ink:#12141f;
  --aurora-shadow:inset 0 1px rgba(255,255,255,.9),inset 0 -8px 16px rgba(70,78,150,.07),0 1px 1px rgba(70,78,150,.10),0 8px 20px -12px rgba(70,78,150,.28);
  --aurora-shadow-hi:inset 0 1px rgba(255,255,255,1),inset 0 -8px 16px rgba(70,78,150,.05),0 2px 3px rgba(70,78,150,.12),0 14px 28px -12px rgba(70,78,150,.34);
}
.sortopt{position:relative;isolation:isolate;border:1px solid var(--line2);border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--aurora-ink);background:var(--aurora-bg);box-shadow:var(--aurora-shadow);display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;transition:transform .25s var(--aurora-ease),box-shadow .25s var(--aurora-ease),border-color .15s}
.sortopt:hover{color:var(--aurora-ink);border-color:var(--accent-ink);transform:translateY(-1px);box-shadow:var(--aurora-shadow-hi)}
.sortopt:active{transform:translateY(0)}
.sortopt.on{color:var(--aurora-ink);border-color:var(--accent-ink);box-shadow:var(--aurora-shadow-hi),0 0 0 2px var(--purple-12)}
.sortopt.premium.locked{color:var(--muted);border-style:dashed;border-color:rgba(124,128,238,.35)}
.sortopt.premium.locked:hover{color:var(--ink)}
.sortopt .sort-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-ink);background:var(--purple-08);border-radius:999px;padding:1px 6px}
.sortopt .ipw-lk,.sortopt svg{flex:0 0 auto;width:13px;height:13px;opacity:.85}
/* FE-2: the Predictability premium sort STANDS OUT - a warm gold accent + soft glow so it reads as the
   flagship WC Pass sort, visually distinct from the purple IPW-diff premium option. Theme-safe (rgba). */
.sortopt.premium-star{border-color:rgba(232,198,106,.5);color:var(--ink);
  background:linear-gradient(180deg,rgba(232,198,106,.14),rgba(124,128,238,.05));
  box-shadow:0 0 0 1px rgba(232,198,106,.14),0 4px 14px -6px rgba(232,198,106,.55)}
.sortopt.premium-star:hover{border-color:rgba(232,198,106,.8);color:var(--ink)}
.sortopt.premium-star.on{background:linear-gradient(180deg,rgba(232,198,106,.24),rgba(124,128,238,.12));border-color:rgba(232,198,106,.72)}
.sortopt.premium-star .sort-tag{color:#8a6410;background:rgba(232,198,106,.34)}
html[data-theme=light] .sortopt.premium-star .sort-tag{color:#7a5c14}
.sortopt.premium-star.locked{color:var(--muted);border-style:dashed;border-color:rgba(232,198,106,.5)}
.sortopt.premium-star.locked:hover{color:var(--ink)}
#patternChips{margin-left:0;width:100%;gap:8px}
#patternChips .sortopt.on{box-shadow:0 0 0 2px var(--purple-12)}
#patternChips .sortopt[data-strength="high"]{border-color:rgba(232,198,106,.85);background:linear-gradient(180deg,rgba(232,198,106,.16),rgba(124,128,238,.06))}
#patternChips .sortopt[data-strength="high"] .sort-tag{background:rgba(232,198,106,.3)}
#patternChips .sortopt[data-strength="mid"]{border-color:rgba(232,198,106,.6)}
@keyframes chipPulse{0%,100%{box-shadow:0 0 0 0 rgba(232,198,106,0)}50%{box-shadow:0 0 0 4px rgba(232,198,106,.22)}}
#patternChips .sortopt[data-strength="high"]{animation:chipPulse 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#patternChips .sortopt[data-strength="high"]{animation:none}}
/* T-196 — cold vs normal, made properly distinct. It WAS `border-style:dashed`, which reads as
   "broken/disabled" rather than "different kind of pattern" (and it is the thin outline Matt
   flagged). A cold streak is a run of NOT doing something (failed to score, winless) — information,
   not a warning — so it is marked by a cool cast and a leading ● glyph, never amber/red. */
#patternChips .sortopt[data-dir="cold"]{border-color:rgba(122,167,217,.55);background:radial-gradient(125% 145% at 50% -25%,#20304a 0,#16203a 52%,#101827 100%)}
#patternChips .sortopt[data-dir="cold"]::before{content:"●";font-size:8px;line-height:1;color:#7aa7d9;margin-right:1px}
#patternChips .sortopt[data-dir="cold"]:hover{border-color:#7aa7d9}
#patternChips .sortopt[data-dir="cold"] .sort-tag{color:#cfe2f5;background:rgba(122,167,217,.28)}
html[data-theme=light] #patternChips .sortopt[data-dir="cold"]{border-color:rgba(47,101,151,.45);background:radial-gradient(125% 145% at 50% -25%,#ffffff 0,#eaf1f8 52%,#dce7f2 100%)}
html[data-theme=light] #patternChips .sortopt[data-dir="cold"]::before{color:#2f6597}
html[data-theme=light] #patternChips .sortopt[data-dir="cold"] .sort-tag{color:#1d4a70;background:rgba(47,101,151,.16)}
@media(max-width:600px){#patternChips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}#patternChips::-webkit-scrollbar{display:none}#patternChips .sortopt{flex:0 0 auto}}
@media(max-width:600px){.sortctl{margin-left:0;width:100%}.sortopt{flex:1 1 auto;justify-content:center}}

/* ============================================================
   COMPACT MATCH ROW — collapsed header + expandable scroll body
   ============================================================ */
.match-list{display:flex;flex-direction:column;gap:10px}
.mrow{background:var(--glass);border-radius:var(--r-lg);box-shadow:var(--glass-sh),var(--glass-hi);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;cursor:pointer;position:relative}
.mrow.spectrum{isolation:isolate}
/* collapsed header (clickable) */
.mrow-head{width:100%;min-height:120px;display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;background:transparent;border:0;cursor:pointer;font-family:var(--body);text-align:left;padding:13px 16px 12px}
/* teams/score/counter/chevron stay vertically centred; only the market sections fill full height */
.mrow-head>.mh-team{align-items:center}
.mh-vs,.mh-chev,.mh-count{align-self:center}
@media(min-width:880px){.mrow-head{flex-wrap:nowrap}}
/* teams (compact, shifted left): crest + name + illustrated InPlayWise-Points orb */
.mh-team{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.mh-team img{width:37px;height:37px;border-radius:50%;object-fit:contain;background:var(--card-2);padding:4px;flex:0 0 auto}
.mh-team.away{flex-direction:row-reverse}
/* RB36/RB37: team name on ONE line, fully readable with a clean ellipsis — no varying-speed marquee */
.mh-team .tn{max-width:118px;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.mh-team.away .tn{text-align:right}
.mh-team .tn-i{display:inline}
.mh-team .tn.scroll .tn-i{animation:none}
.ipw-orb{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  background:linear-gradient(var(--card),var(--card)) padding-box,var(--spectrum) border-box;border:2px solid transparent}
.ipw-orb b{font-family:var(--head);font-feature-settings:"ss03";font-size:15px;font-weight:600;color:var(--ink)}
.ipw-orb i{font-style:normal;font-size:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.ipw-orb.lead{background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#50956C,#B1E7C7) border-box}
.ipw-orb.lead b{color:var(--green-tx)}
.mh-vs{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:42px;color:var(--ink);background:var(--card-2);border-radius:7px;padding:4px 10px}
.mh-vs b{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.mh-vs i{font-style:normal;font-size:8px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--red-tx)}

/* market action sections — big value + label, faded vertical separators, hover highlight, state flash */
.mh-markets{flex:1 1 auto;min-width:0;margin-left:3%;margin-bottom:-9px;display:flex;align-self:stretch;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:transparent transparent}
.mh-markets:hover{scrollbar-color:var(--sb-thumb-hi) transparent}
.mh-markets::-webkit-scrollbar{height:6px}
.mh-markets::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px}
.mh-markets:hover::-webkit-scrollbar-thumb{background:var(--sb-thumb)}
.mhm{position:relative;flex:0 0 auto;width:146px;min-height:104px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 4px 14px;border-radius:8px;transition:background .15s;scroll-snap-align:start}
.mhm:hover{background:rgba(255,255,255,.05)}
.mhm + .mhm::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 14%,rgba(255,255,255,.16) 86%,transparent)}
.mhm-num{font-family:var(--head);font-feature-settings:"ss03";font-size:28px;font-weight:600;line-height:1;color:var(--ink)}
.mhm-nm{display:block;max-width:86px;overflow:hidden;white-space:nowrap}
.mhm-nm-i{display:inline-block;white-space:nowrap;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.mhm-nm.scroll .mhm-nm-i{animation:nmscroll2 5s ease-in-out infinite alternate}
@keyframes nmscroll2{0%,16%{transform:translateX(0)}84%,100%{transform:translateX(var(--mq2,0))}}
.mhm-min{position:absolute;bottom:3px;font-size:10.4px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.mhm-r{position:absolute;top:5px;right:7px;width:13px;height:13px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;font-style:normal}
.mhm-r.won{background:var(--green);color:#fff}.mhm-r.lost{background:var(--red);color:#fff}
.mhm.won{background:var(--green-bg)}.mhm.won .mhm-num{color:#fff}.mhm.won .mhm-nm-i{color:var(--green-tx)}
.mhm.lost{background:var(--red-bg)}.mhm.lost .mhm-num,.mhm.lost .mhm-nm-i{color:var(--red-tx)}
.mhm.action .mhm-num{color:var(--red-tx)}.mhm.action{animation:flash-fast .9s steps(1,end) infinite}
.mhm.watch .mhm-num{color:var(--amber-tx)}.mhm.watch{animation:flash-slow 2.3s ease-in-out infinite}
.mhm.avoid .mhm-num{color:var(--red-tx);opacity:.78}
/* RB18: live "winning" — on track but not settled (not dimmed; gently pulses to read as live) */
.mhm-r.winning{background:transparent;color:var(--green-tx);width:auto;height:auto;font-size:10px;line-height:1;animation:win-pulse 1.4s ease-in-out infinite}
.mhm.winning .mhm-num,.mhm.winning .mhm-nm-i{color:var(--green-tx)}
@keyframes win-pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* dim the colour-state indicators on the cells (won/lost/act-now/watch/avoid) by 35% */
.mhm.won,.mhm.lost,.mhm.action,.mhm.watch,.mhm.avoid{opacity:.65}
/* RB39: a market with no real last-10 rate reads as a muted "—" (coming), never a fake number */
.mhm.coming{opacity:.5}.mhm.coming .mhm-num{color:var(--muted);font-size:22px}.mhm.coming .mhm-nm-i{color:var(--muted)}
@keyframes flash-fast{0%,49%{background:var(--red-bg)}50%,100%{background:transparent}}
@keyframes flash-slow{0%,100%{background:transparent}50%{background:var(--amber-bg)}}

/* win / loss / pending counter (far right) */
.mh-count{flex:0 0 auto;display:inline-flex;gap:5px;align-items:center;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;cursor:help;padding-left:4px}
.mh-count i{font-style:normal}
.mh-count .w{color:var(--green-tx)}.mh-count .l{color:var(--red-tx)}.mh-count .p{color:var(--muted)}

.mh-chev{font-size:14px;color:var(--muted);transition:transform .2s,background .15s,color .15s;flex:0 0 auto;cursor:pointer;padding:6px 8px;border-radius:8px}
.mh-chev:hover{background:rgba(255,255,255,.07);color:var(--ink)}
/* DEV/PREVIEW tier switcher — always-visible floating pill (bottom-left) */
#tierSwitch{position:fixed;left:14px;bottom:14px;z-index:55;display:flex;align-items:center;gap:4px;padding:5px 7px;
  background:rgba(16,17,28,.82);border:1px solid rgba(124,128,238,.28);border-radius:999px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 30px -12px rgba(0,0,0,.7);font-family:var(--body)}
#tierSwitch .ts-lbl{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 4px}
#tierSwitch button{border:0;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:var(--muted);
  background:transparent;padding:5px 9px;border-radius:999px;transition:.15s}
#tierSwitch button:hover{color:#fff;background:rgba(124,128,238,.14)}
#tierSwitch button.on{color:#fff;background:var(--accent-fill)}
@media(max-width:600px){#tierSwitch{left:8px;bottom:8px;padding:4px 5px}#tierSwitch .ts-lbl{display:none}#tierSwitch button{padding:5px 7px;font-size:10px}}

/* finished (ended) match card — dim/transparent but still click-through to the match page; lifts on hover */
/* !important beats the .mrow ipw-up entry animation (fill-mode both holds opacity:1) */
.mrow.is-fin{opacity:.55!important;transition:opacity .18s,transform .18s,border-color .18s,box-shadow .18s}
.mrow.is-fin:hover{opacity:1!important}
.mrow.is-fin .mrow-head{filter:saturate(.8)}
.mrow.is-fin .mh-vs i{color:var(--muted)}
.mrow.is-fin .ipw-orb.lead{box-shadow:none}
/* three instantly-distinguishable match-row states (mirror the stat-card states) */
.mrow[data-status=upcoming]{background:rgba(124,128,238,.07)}
/* live = a calm green pulsing dot on the SCORE (no minute number in the rectangle) */
/* Matt (#7): "remove the time indicator from the rectangular live/score area" — the exact minute is already
   surfaced in the match-page timeline; here we free the space for team names. Keep <i data-live-min> in the DOM
   (patchLive still writes to it), just hide its text. Pulsing green dot moves to the score itself so a live
   game still reads at a glance. Finished-state <i>FT · Xd ago</i> is unaffected (it has no data-live-min attr). */
.mrow.is-live .mh-vs i[data-live-min]{font-size:0;padding:0;line-height:0;height:0;width:0}
/* Matt 2026-07-30 round 2 ("remove the green strip in the live games please i told you about this
   before"): the pulsing green dot on the score is gone — it is the accent-strip pattern the
   standing no-Claude-formatting rule bans. A live game reads as live from its minute alone. */
.mrow.is-live .mh-vs b{position:relative;padding-left:0}
.mrow.is-live .mh-vs{min-width:auto}
@keyframes ipw-livepulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(95,207,148,.5)}50%{opacity:.45;box-shadow:0 0 0 4px rgba(95,207,148,0)}}
.mrow.open .mh-chev{transform:rotate(180deg)}

/* hover aurora glow inside the match card (adapted from diagonal-border-animation,
   animated outline dropped). Pure CSS — no canvas/JS; only animates while hovered. */
.mrow-glow{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .45s ease}
.mrow-glow i{position:absolute;display:block;width:55%;height:200%;top:-50%;border-radius:50%;filter:blur(34px);will-change:transform;animation-play-state:paused}
.mrow-glow i:nth-child(1){left:-4%;background:radial-gradient(circle,rgba(96,64,140,.32),transparent 62%);animation:glowA 16s ease-in-out infinite}
.mrow-glow i:nth-child(2){left:34%;background:radial-gradient(circle,rgba(80,40,92,.34),transparent 62%);animation:glowB 22s ease-in-out infinite}
.mrow-glow i:nth-child(3){right:-4%;background:radial-gradient(circle,rgba(54,54,78,.6),transparent 62%);animation:glowC 28s linear infinite}
.mrow:hover .mrow-glow{opacity:1}
.mrow:hover .mrow-glow i{animation-play-state:running}
/* Light mode: the dark purple/magenta blobs read as a clashing pink on a light card (Matt). Swap to a
   subtle multi-hue spectrum (violet → blue → teal) at low opacity so the hover wash works quietly. */
html[data-theme="light"] .mrow-glow i:nth-child(1){background:radial-gradient(circle,rgba(124,92,224,.16),transparent 62%)}
html[data-theme="light"] .mrow-glow i:nth-child(2){background:radial-gradient(circle,rgba(70,132,232,.14),transparent 62%)}
html[data-theme="light"] .mrow-glow i:nth-child(3){background:radial-gradient(circle,rgba(52,196,176,.13),transparent 62%)}
/* keep all card content above the glow */
.mrow-head,.mrow-body{position:relative;z-index:1}
@keyframes glowA{0%,100%{transform:translate(-8%,0) scale(1)}50%{transform:translate(22%,8%) scale(1.18)}}
@keyframes glowB{0%,100%{transform:translate(8%,4%) scale(1.1)}50%{transform:translate(-14%,-6%) scale(.95)}}
@keyframes glowC{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(-10%,6%) rotate(180deg)}100%{transform:translate(0,0) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mrow-glow i{animation:none!important}}

/* expandable body — fixed-height scroll region (no blank space) */
.mrow-body{max-height:0;overflow:hidden;transition:max-height .35s ease}
.mrow.open .mrow-body{max-height:1400px}
.mrow-body-inner{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line)}

/* Opportunity Discovery — matches collapse to clean header rows (expand for picks) */

/* ============================================================
   THIN GLASS SCROLLBARS — subtle, reveal on hover only
   ============================================================ */
/* T-197 (Matt 2026-07-30): "scroll bar on the left panel needs to be designed in line with the
   other scroll bars we have on platform not windows default". Two causes: the thumb was
   transparent until hover (so at rest it read as the OS default), and its colour was hard-coded
   rgba(255,255,255,...) — invisible on a light background. Now every scroll container shares one
   theme-aware token, faintly visible at rest and stronger on hover. */
:root{--sb-thumb:rgba(255,255,255,.16);--sb-thumb-hi:rgba(255,255,255,.30)}
html[data-theme=light]{--sb-thumb:rgba(22,24,45,.20);--sb-thumb-hi:rgba(22,24,45,.34)}
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hi)}
::-webkit-scrollbar-corner{background:transparent}
.stat-row,#opps,.mrow-body-inner,.mc-strip,.wpg-stack,.slipdock-panel,.acct-pop,.cx-tabs,.ex-scroll,.cx-panel,.mh-markets,.ex-head .mh-markets{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
.stat-row:hover,#opps:hover,.mrow-body-inner:hover,.mc-strip:hover,.wpg-stack:hover,.slipdock-panel:hover,.acct-pop:hover,.cx-tabs:hover,.ex-scroll:hover,.cx-panel:hover,.mh-markets:hover,.ex-head .mh-markets:hover{scrollbar-color:var(--sb-thumb-hi) transparent}
.stat-row::-webkit-scrollbar,#opps::-webkit-scrollbar,.mrow-body-inner::-webkit-scrollbar,.mc-strip::-webkit-scrollbar,.wpg-stack::-webkit-scrollbar,.slipdock-panel::-webkit-scrollbar,.acct-pop::-webkit-scrollbar,.cx-tabs::-webkit-scrollbar,.ex-scroll::-webkit-scrollbar,.cx-panel::-webkit-scrollbar,.mh-markets::-webkit-scrollbar,.ex-head .mh-markets::-webkit-scrollbar{width:8px;height:8px}
.stat-row::-webkit-scrollbar-track,#opps::-webkit-scrollbar-track,.mrow-body-inner::-webkit-scrollbar-track,.mc-strip::-webkit-scrollbar-track,.wpg-stack::-webkit-scrollbar-track,.slipdock-panel::-webkit-scrollbar-track,.acct-pop::-webkit-scrollbar-track,.cx-tabs::-webkit-scrollbar-track,.ex-scroll::-webkit-scrollbar-track,.cx-panel::-webkit-scrollbar-track,.mh-markets::-webkit-scrollbar-track,.ex-head .mh-markets::-webkit-scrollbar-track{background:transparent}
.stat-row::-webkit-scrollbar-thumb,#opps::-webkit-scrollbar-thumb,.mrow-body-inner::-webkit-scrollbar-thumb,.mc-strip::-webkit-scrollbar-thumb,.wpg-stack::-webkit-scrollbar-thumb,.slipdock-panel::-webkit-scrollbar-thumb,.acct-pop::-webkit-scrollbar-thumb,.cx-tabs::-webkit-scrollbar-thumb,.ex-scroll::-webkit-scrollbar-thumb,.cx-panel::-webkit-scrollbar-thumb,.mh-markets::-webkit-scrollbar-thumb,.ex-head .mh-markets::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px;border:2px solid transparent;background-clip:content-box}
.stat-row:hover::-webkit-scrollbar-thumb,#opps:hover::-webkit-scrollbar-thumb,.mrow-body-inner:hover::-webkit-scrollbar-thumb,.mc-strip:hover::-webkit-scrollbar-thumb,.wpg-stack:hover::-webkit-scrollbar-thumb,.slipdock-panel:hover::-webkit-scrollbar-thumb,.acct-pop:hover::-webkit-scrollbar-thumb,.cx-tabs:hover::-webkit-scrollbar-thumb,.ex-scroll:hover::-webkit-scrollbar-thumb,.cx-panel:hover::-webkit-scrollbar-thumb,.mh-markets:hover::-webkit-scrollbar-thumb,.ex-head .mh-markets:hover::-webkit-scrollbar-thumb{background:var(--sb-thumb);background-clip:content-box}
.stat-row::-webkit-scrollbar-thumb:hover,#opps::-webkit-scrollbar-thumb:hover,.slipdock-panel::-webkit-scrollbar-thumb:hover,.acct-pop::-webkit-scrollbar-thumb:hover,.cx-tabs::-webkit-scrollbar-thumb:hover,.ex-scroll::-webkit-scrollbar-thumb:hover,.cx-panel::-webkit-scrollbar-thumb:hover,.mh-markets::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hi);background-clip:content-box}

/* live momentum block (updates ~30s while live) */
.live-blk{border:1px solid var(--line);border-radius:8px;background:var(--card-2);padding:12px;margin-top:12px}
.live-blk-h{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;color:var(--ink);margin-bottom:10px}
.live-blk-h .dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
.live-blk-h .tick{margin-left:auto;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:6px;overflow:hidden}
.live-cell{background:var(--card);padding:9px 6px;text-align:center}
.live-cell .lk{font-size:8px;text-transform:uppercase;color:var(--muted);letter-spacing:.03em}
.live-cell .lv{font-family:var(--head);font-feature-settings:"ss03";font-size:16px;color:var(--ink);margin-top:3px;transition:color .3s}
.live-cell .lv.bump{color:var(--green-tx)}

/* market-call strip (expanded) — which markets to bet vs avoid */
.mr-stats{min-width:0}
.mc-strip{display:flex;align-items:stretch;border-radius:8px;background:var(--glass-2);overflow-x:auto}
.mc-card{flex:1 0 auto;min-width:114px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 8px;text-align:center;transition:background .15s}
.mc-mkt{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;line-height:13px;color:var(--ink);max-width:108px}
.mc-mkt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-mkt .mkt-side{flex:0 0 auto}
.mc-verdict{font-family:var(--head);font-size:16px;font-weight:600;letter-spacing:.05em;color:var(--ink)}
.mc-state{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
/* strong state covering */
.mc-card.won{background:rgba(80,149,108,.24)}.mc-card.won .mc-verdict{color:#fff}.mc-card.won .mc-state{color:var(--green-tx)}
.mc-card.lost{background:rgba(255,104,101,.16)}.mc-card.lost .mc-verdict,.mc-card.lost .mc-state{color:var(--red-tx)}
.mc-card.action{animation:flash-fast .9s steps(1,end) infinite}.mc-card.action .mc-verdict,.mc-card.action .mc-state{color:var(--red-tx)}
.mc-card.watch{animation:flash-slow 2.3s ease-in-out infinite}.mc-card.watch .mc-verdict{color:var(--amber-tx)}
.mc-card.avoid .mc-verdict{color:var(--red-tx)}
.mc-card.pending .mc-verdict{color:var(--muted)}
.mc-card.pre.bet .mc-verdict{color:var(--green-tx)}
.mc-card.pre.watch .mc-verdict{color:var(--amber-tx)}
.mc-card.pre.no .mc-verdict{color:var(--muted)}
.mc-top{display:flex;flex-direction:column;align-items:center;gap:4px}
.mc-logos{display:flex;align-items:center}
.mc-logos img{width:22px;height:22px;border-radius:50%;object-fit:contain;background:var(--card)}
.mc-logos img.ov{margin-left:-9px;box-shadow:0 0 0 2px var(--card-2);border-radius:50%}
.mc-noimg{width:22px;height:22px;border-radius:50%;background:var(--card)}
.mc-nm{font-size:10px;line-height:12px;color:var(--ink);max-width:72px}
.mc-val{font-family:var(--head);font-feature-settings:"ss03";font-size:22px;line-height:26px;color:var(--ink)}
.mc-val.g{color:var(--green-tx)}
.mc-val.dim{color:var(--dim)}
.mc-lab{font-size:10px;line-height:12px;color:var(--muted)}
.mc-lab span{display:block}
.mc-div{width:1px;align-self:stretch;background:var(--line);flex:0 0 auto}

/* Live / History dropdown bar (expanded) */
.mr-bar{display:flex;gap:6px;flex-wrap:wrap}
.cstat{flex:1 1 200px;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line2);background:var(--card-2);border-radius:8px;padding:9px 14px;cursor:pointer;font-family:var(--body);text-align:left}
.cstat.active{background:var(--purple-08);border-color:var(--purple-12)}
.cstat-t{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.cstat.active .cstat-t{color:var(--ink)}
.cstat-filters{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin-left:auto}
.cf{font-size:8px;text-transform:uppercase;color:var(--muted);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.cf.cal{border-left:1px solid var(--line2);padding:2px 10px}
.cf.togl{border-left:1px solid var(--line2);padding:2px 10px;gap:6px}
.cf.togl b{font-weight:600;color:var(--muted)}.cf.togl b.on{color:var(--ink)}
.cf.togl i{width:22px;height:13px;border-radius:32px;background:var(--line2);position:relative;flex:0 0 auto}
.cf.togl i::after{content:"";position:absolute;top:1.5px;left:1.5px;width:10px;height:10px;border-radius:50%;background:#fff}
.cf.btn{border:1px solid var(--line2);border-radius:32px;padding:4px 10px;font-size:10px;text-transform:none;color:var(--ink);font-weight:500;cursor:pointer}
.cf.btn:hover{background:rgba(255,255,255,.05)}
.cstat-chev{font-size:11px;color:var(--muted);transition:transform .2s;flex:0 0 auto}
.cstat-chev.open{transform:rotate(180deg)}
.mr-expand{max-height:0;overflow:hidden;transition:max-height .3s ease}
.mr-expand.open{max-height:420px;padding-top:8px}
.mr-tiles{border:1px solid var(--line);border-radius:8px;overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line)}
.mr-open{display:block;color:var(--accent-ink);font-size:12px;font-weight:600;text-align:right;padding-top:4px}
.mr-open:hover{text-decoration:underline}

/* ===== per-game page (match.html) ===== */
.page{width:100%;margin:0;padding:18px 24px}
.g-head{background:var(--glass);border-radius:var(--r-lg);box-shadow:var(--glass-sh),var(--glass-hi);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:22px;margin-bottom:16px}
.g-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.g-top .comp{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.g-top .comp img{width:18px;height:18px;border-radius:50%;object-fit:cover}
.g-top .live{font-size:11px;font-weight:600;color:var(--red)}
.g-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.g-team{display:flex;align-items:center;gap:12px}
.g-team.r{flex-direction:row-reverse}
.g-team img.logo{width:48px;height:48px;border-radius:10px;object-fit:contain;background:var(--card-2);padding:4px}
.g-team .nm{font-weight:600;font-size:18px;color:var(--ink)}
.g-team .fl{width:24px;height:24px;border-radius:50%;object-fit:cover}
.g-sc{font-family:var(--head);font-size:28px;font-weight:400;text-align:center;color:var(--ink)}
.g-sc .ko{font-size:13px;color:var(--muted);font-weight:400}
/* legacy flip-clock countdown (paired with .cd-b blocks). Scoped away from the Variant-E
   time pill (.e-tag.cd), whose bare `.cd` class was inheriting this 18px/6px margin and
   inflating the collapsed card's tag row to two lines. */
.cd:not(.e-tag){display:flex;justify-content:center;gap:8px;margin:18px 0 6px}
.cd-b{min-width:58px;text-align:center;background:var(--card-2);border-radius:var(--r-sm);padding:9px 6px}
.cd-b .n{font-family:var(--head);font-size:22px;color:var(--ink)}.cd-b .l{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cd-live{text-align:center;color:var(--green-tx);font-weight:600;font-size:15px;margin:8px 0}
.tz{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 16px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.tz span{font-size:11px;color:var(--muted)}.tz b{color:var(--ink);font-weight:600}

/* Wise Pro gauge strip (match.html) */
.wpg{background:var(--glass);border-radius:var(--r-lg);box-shadow:var(--glass-sh),var(--glass-hi);overflow:hidden}
.wpg-title{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line)}
.wpg-stack{display:flex;align-items:stretch;overflow-x:auto}
.wpg-col{display:flex;flex-direction:column;align-items:center;flex:1 0 auto;border-right:1px solid var(--line)}
.wpg-col:last-child{border-right:0}
.wpg-h{width:100%;height:18px;display:flex;align-items:center;justify-content:center;background:var(--card-2);font-size:8px;font-weight:500;text-transform:uppercase;color:var(--muted);letter-spacing:.04em;cursor:help}
.wpg-body{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 4px}
.cg{position:relative;width:184px;height:160px;margin:0 auto}
.cg-el{position:absolute;display:block;overflow:visible}
.cg-cl{position:absolute;top:67px;transform:translateX(-50%);font-size:8px;line-height:10px;text-align:center;color:var(--ink);pointer-events:none}
.cg-cl b{display:block;font-weight:600}.cg-cl span{display:block;color:var(--muted)}
.cg-lab{position:absolute;left:0;width:34px;text-align:right;font-size:8px;font-weight:500;line-height:10px;font-variant-numeric:tabular-nums}
.cg-lab.g{color:var(--green-tx)}.cg-lab.b{color:var(--blue-tx)}
.sd{position:relative;width:184px;height:160px}
.sd-ctr{position:absolute;left:92px;top:82px;transform:translate(-50%,-50%);text-align:center;font-family:var(--head);font-size:13px;line-height:14px;color:var(--ink)}
.sd-ctr b{display:block;font-weight:400}.sd-ctr i{display:block;width:18px;height:1px;background:var(--line2);margin:2px auto}.sd-ctr span{display:block;color:var(--muted);font-size:11px}
.sd-tag{position:absolute;font-size:8px;font-weight:600;text-transform:uppercase;padding:1px 6px;border-radius:6px;color:#131216}
.sd-tag.g{background:var(--green-soft);top:8px;right:8px}
.sd-tag.b{background:var(--blue-soft);bottom:8px;left:8px}
.sd-ptr{position:absolute;font-size:8px;color:var(--muted)}
.sd-ptr.tl{left:4px;top:2px}.sd-ptr.br{right:4px;bottom:2px}
.sc-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;min-width:78px;align-self:stretch}
.sc-cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px;text-align:center}
.sc-cell .v{font-family:var(--head);font-size:14px;color:var(--ink)}
.sc-cell .l{font-size:8px;color:var(--muted);text-transform:uppercase;margin-top:3px}
.sc-div{width:56px;height:1px;background:var(--line)}

/* timeline (match.html only) */
.tl{padding:6px 2px}
.tl-row{position:relative;height:18px;margin:6px 0}
.tl-track{position:absolute;top:50%;left:0;right:0;height:4px;transform:translateY(-50%);background:rgba(255,255,255,.08);border-radius:3px}
.tl-mark{position:absolute;top:50%;transform:translate(-50%,-50%);cursor:help}
.tl-ev{display:block;width:9px;height:9px;font-size:9px;line-height:9px;text-align:center}
.tl-ev.goal{color:var(--green-tx);font-size:10px}
.tl-ev.yc{width:7px;height:10px;border-radius:1.5px;background:linear-gradient(to top,#ffd569,#fff);border:.5px solid var(--line2)}
.tl-ev.rc{width:7px;height:10px;border-radius:1.5px;background:linear-gradient(to top,var(--red),#fff);border:.5px solid var(--line2)}
.tl-ev.sub{color:var(--accent-ink);font-size:9px}
.tl-pill{position:absolute;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center}
.tl-pill i{position:absolute;top:-12px;width:1px;height:14px;background:currentColor;opacity:.4}
.tl-pill b{font-size:8px;font-weight:600;color:#131216;border-radius:32px;padding:1px 5px;line-height:12px}
.tl-pill.g{color:var(--green-tx)}.tl-pill.g b{background:var(--green-soft)}
.tl-pill.o{color:var(--orange)}.tl-pill.o b{background:var(--orange);color:#fff}
.tl-pill.r{color:var(--red)}.tl-pill.r b{background:var(--red);color:#fff}
.tl-axis{display:flex;justify-content:space-between;margin-top:4px;color:var(--muted);font-size:8px;font-weight:500;text-transform:uppercase}

/* range slider (match.html) */
.rs{padding:2px 0}
.rs-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.rs-lab{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.rs-val{font-size:11px;font-weight:600;color:var(--accent-ink)}
.rs-input{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--purple) var(--p,50%),rgba(255,255,255,.08) var(--p,50%));outline:none;cursor:pointer}
.rs-input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--purple);box-shadow:var(--shadow);cursor:pointer}
.rs-input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--purple);cursor:pointer}

/* technical stat strip (match.html) */
.ts{position:relative;display:flex;align-items:stretch;background:var(--glass-2);border-radius:var(--r);overflow:hidden}
.ts-card{flex:1 0 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 6px;text-align:center}
.ts-name{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink);font-size:10px;line-height:12px}
.ts-name span{color:var(--ink);max-width:74px}
.ts-logo{width:24px;height:24px;border-radius:4px;object-fit:contain;background:var(--card-2)}
.ts-abbr{width:28px;height:28px;border-radius:50%;background:var(--purple-08);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}
.ts-val{font-family:var(--head);font-feature-settings:"ss03";font-size:24px;line-height:28px;color:var(--ink)}
.ts-val.good{color:var(--green-tx)}.ts-val.dim{color:var(--dim)}
.ts-l{font-size:10px;line-height:12px;color:var(--muted)}
.ts-div{width:1px;align-self:stretch;background:var(--line)}
.ts-locked .ts-val{filter:blur(6px)}
.ts-fade{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(19,18,22,.45)}
/* This pill keeps a hard-coded near-black body in BOTH themes, so it is the one place the accent
   must stay light — --accent-ink is dark in light mode and measured ~2.48:1 here (dark-on-dark).
   The nav logo mark has the same shape of exception. Found by the Codex pass; the carve-out I made
   for the nav was not sufficient. */
.ts-fade span{background:rgba(29,28,33,.92);border:1px solid var(--line2);box-shadow:var(--shadow);border-radius:999px;padding:7px 14px;font-size:11px;font-weight:600;color:#a9acf5}

.wp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(520px,1fr));gap:16px;margin-bottom:16px}
.sec-sub{display:flex;align-items:center;gap:6px;font-family:var(--head);font-size:16px;font-weight:400;margin:0 0 10px;color:var(--ink)}
.cmp{background:var(--glass);border-radius:var(--r-lg);box-shadow:var(--glass-sh),var(--glass-hi);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:20px;margin-bottom:16px}
.cmp-names{display:grid;grid-template-columns:1fr auto 1fr;font-weight:600;font-size:13px;margin-bottom:10px;color:var(--ink)}
.cmp-names span:last-child{text-align:right}
.cmp-line{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);cursor:help}
.cmp-line:last-child{border-bottom:0}
.cmp-mid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px}
.cmp-mid .ck{text-align:center;font-size:11px;color:var(--muted);white-space:nowrap}
.cmp-bar{height:7px;border-radius:4px;background:rgba(255,255,255,.08)}.cmp-bar>i{display:block;height:100%;border-radius:4px}
.cmp-h>i{background:linear-gradient(90deg,transparent,var(--purple));margin-left:auto}.cmp-a>i{background:linear-gradient(90deg,#5a5fb0,transparent)}
.cmp-v{font-weight:600;font-size:13px;color:var(--ink)}.cmp-line .cmp-v:last-child{text-align:right}

/* statToggle (match.html) */
.stog{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;margin-top:10px}
.stog-h{width:100%;display:flex;align-items:center;gap:10px;background:var(--card-2);border:0;cursor:pointer;padding:11px 14px;font-family:var(--body);text-align:left}
.stog-tabs{display:flex;gap:6px;flex-wrap:wrap}
.stog-tab{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:999px}
.stog-tab.on{color:var(--ink);background:var(--purple-08)}
.stog-win{margin-left:auto;font-size:11px;color:var(--muted);white-space:nowrap}
.stog-chev{font-size:12px;color:var(--muted);transition:transform .2s}
.stog.open .stog-chev{transform:rotate(180deg)}
.stog-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
.stog.open .stog-body{max-height:520px}
.sd-grid{display:none;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);padding:1px}
.sd-grid.on{display:grid}
.sd-tile{background:var(--card);padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
.sd-tk{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.sd-tv{display:flex;align-items:center;gap:6px;font-size:13px;flex:0 0 auto}
.sd-tv i{font-style:normal;color:var(--muted);font-size:10px}
.sd-empty{grid-column:1/-1;background:var(--card);padding:14px;text-align:center;color:var(--muted);font-size:11px}

/* spectrum animated border */
@property --ipw-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes ipw-spin{to{--ipw-ang:360deg}}
.spectrum{position:relative;isolation:isolate}
.spectrum::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ipw-ang),#4D5BDB,#50956C,#7C80EE,#EB6847,#4D5BDB);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:ipw-spin 6s linear infinite;pointer-events:none;z-index:2;opacity:.8}
@media(prefers-reduced-motion:reduce){.spectrum::before{animation:none}}

/* brand watermark */
.wm{position:absolute;z-index:0;pointer-events:none;user-select:none;inset:0;overflow:hidden}
.wm-mark{position:absolute;top:40px;left:50%;transform:translateX(-30%);font-family:var(--head);font-weight:700;font-size:min(52vw,720px);line-height:.8;color:#fff;opacity:.016;letter-spacing:-.04em}

/* compact insights (match.html) */
.ins-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ins{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:16px;color:var(--ink)}
.ins-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;margin-top:5px;background:var(--accent-fill)}
.ins.g .ins-dot{background:var(--green)}.ins.r .ins-dot{background:var(--red)}
.ins-lab{font-weight:600}.ins.g .ins-lab{color:var(--green-tx)}.ins.r .ins-lab{color:var(--red-tx)}
.ins-txt{color:var(--muted)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
.nav{flex-wrap:wrap;height:auto;min-height:52px;padding:8px 14px;gap:10px 14px}
.nav .src,.nav .live-count{display:none}
.nav .tabs{order:3;width:100%;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
.nav .tab{white-space:nowrap}
.nav .right{margin-left:auto}
@media(min-width:768px){
  .nav{flex-wrap:nowrap;height:56px;padding:0 20px}
  .nav .src,.nav .live-count{display:flex}
  .nav .tabs{order:0;width:auto;margin:0 auto;overflow:visible}
  .sd-grid,.sd-grid.on{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}
@media(min-width:1024px){
  /* Matt: strip hugs the nav's bottom line (small top pad) + an extra 25% margin UNDER the strip (16px gap → 20px) */
  .shell{grid-template-columns:425px minmax(0,1fr);grid-template-areas:"left center";padding:6px 24px 24px;gap:16px}
  #trackStrip{margin-bottom:4px}
  /* Matt 2026-07-29: "we need a scroll for the LHS panel". It was sticky with no height
     bound and no overflow, so once its content exceeded the viewport — which the revived
     multi-day accas made routine — the bottom of the panel was simply unreachable: sticky
     pins the box and the overflow ran off-screen with nothing to scroll it. Bounded to the
     visible area and given its own scroller. Safe to clip because tooltips and the account
     popover are appended to document.body (components.js:4594), not nested in here.
     overscroll-behavior stops the page lurching when the panel reaches its end. */
  .side{position:sticky;top:88px;max-height:calc(100vh - 104px);overflow-y:auto;
    overscroll-behavior:contain;scrollbar-width:thin;padding-right:4px}
  .side::-webkit-scrollbar{width:8px}
  .side::-webkit-scrollbar-track{background:transparent}
  .side::-webkit-scrollbar-thumb{background:var(--glass-3);border:1px solid var(--border);border-radius:6px}
  .side::-webkit-scrollbar-thumb:hover{background:var(--hi-soft);border-color:var(--border-hi)}
}
@media(min-width:1280px){.wp-grid{grid-template-columns:repeat(auto-fit,minmax(520px,1fr))}}
@media(max-width:1279px){.wp-grid{grid-template-columns:1fr}}

/* ============================================================
   RB57 — top platform track-record banner: a thin-line GRID of big REAL numbers, no background,
   full width up to the nav line (TENNIS-STATS style). + mobile/tablet section reorder.
   ============================================================ */
/* minimal "control panel of results": flex row, gradient dividers (like the match cards), extra-thin
   numbers, no truncation — auto-scrolls horizontally when it can't all fit. */
/* big REAL numbers, evenly distributed, gradient divider between EVERY stat; user-grabbable auto-scroll (no top line) */
.track-strip{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;max-width:100%;box-sizing:border-box;
  background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;box-shadow:none;overflow:hidden;gap:0}
.track-strip.tk-scrolling{overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;-ms-overflow-style:none}
.track-strip.tk-scrolling::-webkit-scrollbar{height:0;width:0;display:none}
.track-strip.tk-grabbing{cursor:grabbing}
.tk-run{display:flex;align-items:stretch;flex:0 0 auto;user-select:none;-webkit-user-select:none}
/* HERO — the accuracy thesis (the one bold element) — +25% */
.tk-hero{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px 32px 16px 6px}
.tk-hero-top{display:flex;align-items:center;gap:11px}
.tk-hero-num{font-family:var(--head);font-weight:200;font-size:78px;line-height:.85;letter-spacing:-.035em;color:var(--ink);font-feature-settings:"ss03";font-variant-numeric:tabular-nums;white-space:nowrap;display:inline-flex;align-items:flex-start}
.tk-hero-num i{font-style:normal;font-size:30px;font-weight:300;color:#9a9fee;margin:8px 0 0 3px}
.tk-hero-sub{font-size:13.5px;font-weight:400;color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.tk-hero-sub b{color:var(--ink);font-weight:600}
/* GROUPS: section label + row of EVEN-WIDTH cells; a gradient divider before each group AND between every cell */
.tk-grp{flex:0 0 auto;position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 0 16px 24px;justify-content:center}
.tk-grp::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;background:linear-gradient(180deg,transparent,var(--line2) 18%,var(--line2) 82%,transparent)}
.tk-grp-lab{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--accent-ink);padding-left:22px}
.tk-grp.live .tk-grp-lab{color:var(--green-tx)}
.tk-grp-row{display:flex;gap:0}
/* even distribution — every cell takes the WIDEST cell's width (--tkcw set by JS); gradient divider between cells */
.tk-cell{position:relative;flex:0 0 auto;width:var(--tkcw,auto);box-sizing:border-box;padding:0 22px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.tk-cell:not(:first-child)::before{content:"";position:absolute;left:0;top:8%;bottom:8%;width:1px;background:linear-gradient(180deg,transparent,var(--line) 22%,var(--line2) 50%,var(--line) 78%,transparent)}
.tk-big{display:flex;align-items:baseline;gap:5px;font-family:var(--head);font-weight:200;font-size:38px;line-height:1;color:var(--ink);font-feature-settings:"ss03";font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.tk-big i{font-style:normal;font-size:20px;font-weight:300;color:var(--muted)}
.tk-big.up{color:var(--green-tx)}
.tk-lab{font-size:12px;font-weight:300;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
/* per-stat info tooltip icon (what it means + how it's calculated) */
.tk-lab .tk-i{margin-left:6px;width:14px;height:14px;font-size:9px;line-height:1;opacity:.5;vertical-align:1px;transition:opacity .15s,color .15s,border-color .15s;cursor:help}
.tk-cell:hover .tk-i,.tk-i:focus{opacity:1;color:var(--accent-ink);border-color:var(--accent-ink);outline:none}
/* ambient glow: a random stat brightens + glows in its own colour, then fades; JS drives which one */
.tk-cell{transition:opacity .5s ease}
.tk-big{transition:filter .55s ease,text-shadow .55s ease}
.tk-cell.tk-glow .tk-big{filter:brightness(1.32);text-shadow:0 0 15px currentColor,0 0 5px currentColor}
/* hover focus: spotlight the hovered stat, dim the rest (pauses the ambient glow while hovering) */
#trackStrip:hover .tk-cell{opacity:.34}
#trackStrip .tk-cell:hover{opacity:1}
#trackStrip .tk-cell:hover .tk-big{filter:brightness(1.36);text-shadow:0 0 16px currentColor,0 0 6px currentColor}
@media (prefers-reduced-motion:reduce){.tk-cell.tk-glow .tk-big,#trackStrip .tk-cell:hover .tk-big{text-shadow:none;filter:none}}
.tk-dot{width:7px;height:7px;border-radius:50%;background:var(--green-tx);box-shadow:0 0 8px var(--green-tx);animation:tkDot 1.3s ease-in-out infinite}
@keyframes tkDot{0%,100%{opacity:1}50%{opacity:.35}}
@media(max-width:600px){.tk-hero-num{font-size:60px}.tk-hero-num i{font-size:26px}.tk-big{font-size:32px}.tk-big i{font-size:17px}.tk-hero{padding:12px 22px 12px 4px}.tk-grp{padding:12px 0 12px 18px}.tk-cell{padding:0 16px}.tk-lab{font-size:11px}.tk-grp-lab{font-size:10px;padding-left:16px}}

/* sections are transparent on desktop (no layout change); become orderable items on mobile */
#wcStatsSec,#matchesSec{display:contents}
@media(min-width:1024px){.shell{grid-template-areas:"strip strip" "left center"}#trackStrip{grid-area:strip}}
@media(max-width:1023px){
  /* prevent iOS auto-zoom on tap: Safari zooms whenever a focused input's font-size < 16px. Bumping ALL
     text-input fields (input/select/textarea) to 16px on mobile stops the zoom WITHOUT disabling
     accessibility pinch-zoom. Checkboxes/radios excluded — they don't trigger the behaviour. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select, textarea { font-size:16px !important; }
  .shell{display:flex;flex-direction:column;gap:16px;min-width:0}
  .side,.main{display:contents}
  #wcStatsSec,#matchesSec{display:flex;flex-direction:column;gap:14px}
  /* flex items must not grow to their (horizontal-scroll) content width → no doc overflow (RB10) */
  #trackStrip,#wcStatsSec,#matchesSec,#panel-opps,#panel-accas,#globalHead,#globalList{min-width:0;max-width:100%}
  /* Matt mobile-polish #1: COLLAPSED global cards rendered NARROWER than WC cards at 390/375. Root cause:
     #matchList lives inside #matchesSec (a flex-column SECTION that stretches full width), so it inherits
     full width; but #globalList is a direct flex ITEM of the shell (its .main parent is display:contents),
     so with only max-width:100% it sized to its cards' max-content (~270px) instead of stretching. Force it
     (and the WC list, harmless there) to the full shell width so WC + global collapsed cards match exactly.
     .glob-wrap (guest/day-pass wrapper) is block-level and already fills its parent, so this covers it too. */
  #globalList,#matchList{width:100%}
  #globalList .glob-wrap{width:100%}
  /* Matt (#1): stop mobile panels shrinking when they collapse. Width was content-driven so hiding the
     body reduced the panel's natural size; forcing width:100% locks each panel to the shell width
     regardless of open/closed state. */
  .panel{width:100%;box-sizing:border-box}
  /* Matt (#2): on mobile, place Accumulators Generated directly under Opportunity Discovery (currently
     matchesSec sits between them). Use flex `order` — desktop unaffected because .shell is grid there.
     Order: statStrip(1) · wcStats(2) · opps(3) · ACCAS(4) · matches(5) · global(6). */
  #trackStrip{order:1}
  #wcStatsSec{order:2}
  #panel-opps{order:3}
  #panel-accas{order:4}
  #matchesSec{order:5}
  #globalHead{order:6}
  #globalList{order:7}
}


/* remove the rotating outline animation entirely */
.spectrum::before{content:none!important}

/* expanded card: head-to-head ACTUALS, last-game context, Wise Pro CTA */
.h2h{margin-top:2px}
.h2h-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.h2h-title b{color:var(--ink)}
.h2h-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:7px 0;border-top:1px solid rgba(255,255,255,.05);cursor:help}
.h2h-row:first-of-type{border-top:0}
.h2h-h{text-align:right;font-size:13px}.h2h-a{text-align:left;font-size:13px}
.h2h-k{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap;text-align:center}
/* head-to-head team header (clear per-team column identification) */
.h2h-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.h2h-th{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink);min-width:0}
.h2h-th.h{justify-content:flex-end}.h2h-th.a{justify-content:flex-start}
.h2h-th>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h2h-fl{width:20px;height:20px;border-radius:50%;object-fit:contain;background:var(--card-2);padding:2px;flex:0 0 auto}
.h2h-fl.noimg{background:var(--elev)}
.h2h-th-mid{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h2h-h.rec,.h2h-a.rec{font-size:12px;letter-spacing:.01em}
.rw{color:var(--green-tx);font-weight:700}.rd{color:var(--muted);font-weight:700}.rl{color:var(--red-tx);font-weight:700}
.h2h-edge{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);text-align:center;line-height:1.5}
.h2h-edge b{color:var(--ink);font-weight:600}
/* full-breakdown banner — premium, full-bleed to both card edges, no rounded corners */
.mr-fullbar{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;
  margin:-14px -16px 2px;padding:14px 16px;border:0;border-radius:0;overflow:hidden;
  background:#000;
  color:#e7e8ff;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  cursor:pointer;transition:filter .18s}
.mr-fullbar::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--spectrum);opacity:.85}
.mr-fullbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--purple-12),transparent)}
.mr-fullbar .mr-sheen{position:absolute;top:0;left:-45%;height:100%;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);animation:ipw-sheen 4.2s ease-in-out infinite;pointer-events:none}
.mr-fullbar:hover{filter:brightness(1.22)}
.mr-fullbar-arr{font-size:15px;line-height:1;opacity:.9}
.mr-ctx{margin-top:4px}
.ctx-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.ctx-team{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;background:var(--glass-2);margin-bottom:6px;cursor:help}
.ctx-nm{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-ago{font-size:10px;color:var(--muted);white-space:nowrap}
.ctx-test{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.ctx-test.up{color:var(--red-tx)}.ctx-test.down{color:var(--green-tx)}
.wp-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:6px;padding:12px;border-radius:8px;background:var(--purple-08);color:var(--ink);font-size:13px;font-weight:600;transition:background .15s}
.wp-cta b{background:var(--spectrum);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.wp-cta span{color:var(--accent-ink)}
.wp-cta:hover{background:var(--purple-12)}


/* expanded: section headings + horizontal ACTUALS strip + last-game + blurred figures */
.mr-h{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:600;color:var(--ink);margin:6px 0 8px}
.mr-h span{font-size:12.5px;line-height:1.45;font-weight:400;color:var(--muted);text-transform:none;letter-spacing:0}
.acts{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px;background:var(--glass-2);scrollbar-width:thin;scrollbar-color:transparent transparent}
.acts:hover{scrollbar-color:var(--sb-thumb-hi) transparent}
.acts::-webkit-scrollbar{height:6px}.acts::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px}.acts:hover::-webkit-scrollbar-thumb{background:var(--sb-thumb)}
.act{position:relative;flex:0 0 auto;min-width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 10px;text-align:center}
.act + .act::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.14) 30%,rgba(255,255,255,.14) 70%,transparent)}
.act-k{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.act-v{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.act-v i{font-style:normal;color:var(--muted);font-size:10px}
.act-v.sm{font-size:11px;font-weight:500;color:var(--ink)}
.act-last{min-width:138px}
.act-cmp{font-size:11px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;filter:blur(5px);cursor:pointer;user-select:none}
.act-cmp:hover{filter:blur(4px)}
/* wider tiles for last-10 + edge; record colours; team key above the strip */
.act-wide{min-width:172px}
.act-v .rec{font-size:11px;letter-spacing:.01em;white-space:nowrap}
.act-v .ed{color:var(--ink);font-weight:700}
.acts-key{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 7px;font-size:10px;font-weight:600;color:var(--muted)}
.acts-key .ak{display:flex;align-items:center;gap:6px;color:var(--ink);min-width:0}
.acts-key .ak>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acts-key .ak img{width:16px;height:16px;border-radius:50%;object-fit:contain;background:var(--card-2);padding:1px;flex:0 0 auto}
.acts-key .ak-mid{font-size:8px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);flex:0 0 auto}


/* team vs both-team market indicator */
.mkt-side{display:inline-flex;align-items:center}
.mkt-side img,.mkt-side .noimg{width:14px;height:14px;border-radius:50%;object-fit:cover;background:var(--card-2);display:block}
.mkt-side.both img:last-child,.mkt-side.both .noimg:last-child{margin-left:-6px;box-shadow:0 0 0 1.5px var(--card-2)}
.mhm .mkt-side{position:absolute;top:7px;left:8px}
.mhm .mkt-side img,.mhm .mkt-side .noimg{width:13px;height:13px}
/* RB14: Opportunity-Discovery signal icons +15% (14→16px) + the 2nd (away) crest nudged right */
.sug .mkt-side img,.sug .mkt-side .noimg{width:16px;height:16px}
.sug .mkt-side.both img:last-child,.sug .mkt-side.both .noimg:last-child{margin-left:-3px}
.mhm{padding-top:16px}


/* ===== risk-tier acca system ===== */
.acca-divider{display:flex;align-items:center;gap:8px;margin:8px 0 2px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.acca-divider::after{content:"";flex:1;height:1px;background:var(--line)}
/* return-led headline */
.acca-ret{padding:0 14px 8px;font-size:13px;line-height:1.4;color:var(--ink)}
.acca-ret b{font-family:var(--head);font-feature-settings:"ss03";font-size:15px;font-weight:600}
.acca-ret .prof{color:var(--green-tx);font-weight:600}
.acca-ret .chance{color:var(--muted);font-size:11px;white-space:nowrap}
.acca-leg .lg-sel small{display:block;color:var(--muted);font-weight:400;font-size:10px}
/* conversion gate */
.acca-lock{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:10px 14px;border-top:1px dashed var(--line2);cursor:pointer}
.acca-lock .lk-n{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.acca-lock .lk-cta{font-size:11px;font-weight:600;color:var(--accent-ink)}
.acca-lock:hover .lk-cta{text-decoration:underline}
/* acca status */
.acca-foot .st.won{color:var(--green-tx)}.acca-foot .st.lost{color:var(--red-tx)}.acca-foot .st.running{color:var(--amber-tx)}
/* tier tags */
.acca-tag.tier-super{background:var(--green-bg);color:var(--green-tx)}
.acca-tag.tier-low{background:rgba(80,149,108,.16);color:var(--green-tx)}
.acca-tag.tier-med{background:var(--blue-bg);color:var(--blue-tx)}
.acca-tag.tier-risky{background:var(--amber-bg);color:var(--amber-tx)}
.acca-tag.tier-high{background:var(--red-bg);color:var(--red-tx)}
/* ---- Today's accas browser (pending + settled, tier-gated, WC/Live/Mix filters) ---- */
.acca-sublbl{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted);font-size:10.5px;margin-left:2px}
.acca-sub{margin:12px 2px 5px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);opacity:.86}
.ascope{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.ascope-chip{font-size:13px;font-weight:600;color:var(--muted);border:1px solid var(--line2);background:rgba(255,255,255,.04);padding:5px 12px;border-radius:32px;cursor:pointer;transition:.14s;white-space:nowrap}
.ascope-chip:hover{color:var(--ink);border-color:var(--purple-12)}
.ascope-chip.on{background:var(--purple-12);color:var(--ink);border-color:var(--accent-ink)}
.ascope-chip.locked{cursor:pointer;border-style:dashed;color:var(--muted);background:transparent}
.ascope-chip.locked:hover{color:var(--accent-ink);border-color:var(--purple-12)}
.ascope-lock{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted);border:1px dashed var(--line2);border-radius:32px;padding:5px 12px;margin:2px 0 8px;cursor:pointer}
.ascope-lock:hover{color:var(--accent-ink);border-color:var(--purple-12)}
/* pre-match / in-play tag on an acca header */
.acca-live{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:32px;white-space:nowrap;margin-left:2px}
.acca-live.pre{background:var(--glass-3);color:var(--muted);border:1px solid var(--line2)}
.acca-live.in{background:var(--red-bg);color:var(--red-tx)}
.acca-live.won{background:var(--green-bg);color:var(--green-tx)}
.acca-live.lost{background:var(--red-bg);color:var(--red-tx)}
.acca-live.part{background:var(--amber-bg);color:var(--amber-tx);cursor:help}
.acca-leg.live .lg-sel{color:var(--ink)}
.lg-live{display:inline-block;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--red-tx);background:var(--red-bg);padding:1px 5px;border-radius:20px;margin-left:4px;vertical-align:middle}
/* T-23: a pending leg whose match has ended but hasn't settled yet - distinct from live + from settled */
.lg-settling{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.02em;color:var(--amber-tx);background:var(--amber-bg);padding:1px 6px;border-radius:20px;margin-left:4px;vertical-align:middle;cursor:help}
/* add-to-slip button on a pending acca */
.acca-add{display:block;width:calc(100% - 28px);margin:2px 14px 12px;padding:9px 12px;border:1px solid var(--purple);background:var(--purple-12);color:var(--ink);font-family:var(--body);font-size:12.5px;font-weight:700;border-radius:11px;cursor:pointer;transition:.15s}
.acca-add:hover{background:var(--accent-fill);color:#fff}
.acca-addnote{padding:0 14px 12px;font-size:11px;color:var(--muted);line-height:1.4}
/* locked "+N more" upgrade bar + honest empty state */
.acca-morelock{display:flex;align-items:center;gap:7px;margin:6px 0 2px;padding:11px 14px;border:1px dashed var(--line2);border-radius:14px;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s}
.acca-morelock:hover{color:var(--accent-ink);border-color:var(--purple-12)}
.acca-empty{margin:4px 0 2px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;font-size:12px;line-height:1.5;color:var(--muted);background:var(--glass-3)}
.acca-empty b{color:var(--ink);font-weight:700}
/* 5-per-page pager (prev / next) */
.acca-pager{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 4px}
.acca-pg{border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--ink);font-family:var(--body);font-size:13px;font-weight:600;padding:7px 13px;border-radius:10px;cursor:pointer;transition:.14s}
.acca-pg:hover:not(:disabled){border-color:var(--accent-ink);background:var(--purple-12)}
.acca-pg:disabled{opacity:.4;cursor:default}
.acca-pgn{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* builder controls — formalised: larger aligned labels, themed inputs, glowing sliders */
.bld-h{font-size:15px;font-weight:700;color:var(--ink);padding:14px 14px 0;letter-spacing:-.01em}
.bld-h span{display:block;font-size:12.5px;line-height:1.5;font-weight:400;color:var(--muted);margin-top:3px}
.bld-row{padding:13px 14px 0}
.bld-lab{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted);margin-bottom:8px}
.bld-lab b{color:var(--ink);font-weight:800}
.acca-build .acca-card.builder{margin:10px 12px 0;background:var(--glass-3);box-shadow:none}
.bld-seg{display:flex;gap:5px;flex-wrap:wrap}
.bld-segb{flex:1 1 auto;min-width:34px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;font-family:var(--body);font-size:12.5px;font-weight:600;padding:8px 8px;border-radius:11px;transition:.15s;text-align:center}
.bld-segb:hover{color:var(--ink);border-color:var(--purple-12)}
.bld-segb.on{background:var(--purple-12);color:var(--ink);border-color:var(--accent-ink)}
.bld-segb.locked{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--hi-strong);border-color:rgba(232,198,106,.42);background:rgba(232,198,106,.08)}
.bld-segb.locked .ipw-lk{width:13px;height:13px}
.bld-note{font-weight:400;font-style:normal;color:var(--amber-tx);text-transform:none;letter-spacing:0;font-size:12px}
.bld-stakebox{display:flex;align-items:center;border:1px solid var(--line2);border-radius:11px;background:rgba(255,255,255,.05);overflow:hidden;max-width:150px}
.bld-stakebox>span{padding:0 2px 0 12px;color:var(--muted);font-weight:800;font-size:14px}
.bld-stakebox input{flex:1;width:100%;background:transparent;border:0;padding:10px 12px 10px 3px;color:var(--ink);font-family:var(--body);font-size:14px;font-weight:700;outline:none}
/* sliders — tier-filled track + glowing / pulsing thumb */
.bld-range,.bw-s{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--tierc,var(--purple)) var(--fill,50%),var(--purple-12) var(--fill,50%))}
.bld-range::-webkit-slider-thumb,.bw-s::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--tierc,var(--purple));border:2px solid #fff;cursor:pointer;transition:box-shadow .15s;
  box-shadow:0 0 0 3px rgba(124,128,238,.15),0 0 9px rgba(124,128,238,.45),0 1px 4px rgba(0,0,0,.35)}
.bld-range::-webkit-slider-thumb:hover,.bw-s::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px rgba(124,128,238,.22),0 0 15px rgba(124,128,238,.65)}
.bld-range:active::-webkit-slider-thumb,.bw-s:active::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(124,128,238,.28),0 0 20px rgba(124,128,238,.8)}
.bld-range::-moz-range-thumb,.bw-s::-moz-range-thumb{width:18px;height:18px;border:2px solid #fff;border-radius:50%;background:var(--tierc,var(--purple));cursor:pointer;box-shadow:0 0 9px rgba(124,128,238,.45)}
.bld-weights{display:flex;flex-direction:column;gap:12px}
.bw-row{display:flex;align-items:center;gap:11px}
.bw-n{flex:0 0 74px;font-size:12.5px;font-weight:700;color:var(--ink)}
.bw-row.tier-super .bw-n,.bw-row.tier-low .bw-n{color:var(--green-tx)}
.bw-row.tier-med .bw-n{color:var(--blue-tx)}.bw-row.tier-risky .bw-n{color:var(--amber-tx)}.bw-row.tier-high .bw-n{color:var(--red-tx)}
.bw-row.tier-super .bw-s{--tierc:#57b07a}.bw-row.tier-low .bw-s{--tierc:#4d5bdb}.bw-row.tier-med .bw-s{--tierc:#7C80EE}.bw-row.tier-risky .bw-s{--tierc:#e8b84b}.bw-row.tier-high .bw-s{--tierc:#ff5a57}
.bw-s{flex:1;min-width:0}
.bw-p{flex:0 0 48px;text-align:right;font-family:var(--mono,ui-monospace,monospace);font-size:16px;font-weight:800;color:var(--ink)}
.bw-p.bump{animation:bwPulse .34s ease}
@keyframes bwPulse{0%{transform:scale(1)}40%{transform:scale(1.32);color:var(--accent-ink)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bw-p.bump{animation:none}}
.bld-gen{width:calc(100% - 28px);margin:6px 14px 0;padding:13px;border:0;border-radius:12px;background:var(--accent-fill);color:#fff;font-family:var(--body);font-weight:700;font-size:14px;letter-spacing:.01em;cursor:pointer;transition:filter .15s;box-shadow:0 6px 18px -8px rgba(124,128,238,.7)}
.bld-gen:hover{filter:brightness(1.1)}
.bld-add{width:calc(100% - 28px);margin:9px 14px 2px;padding:11px;border:1px solid var(--purple);border-radius:12px;background:transparent;color:var(--accent-ink);font-family:var(--body);font-weight:700;font-size:13.5px;cursor:pointer}
.bld-add:hover{background:var(--purple-08)}
.bld-prompt,.bld-empty{margin:11px 14px 0;padding:12px 13px;border-radius:12px;font-size:13px;line-height:1.55}
.bld-prompt{background:rgba(255,255,255,.04);color:var(--muted)}
.bld-empty{background:var(--amber-bg);color:var(--amber-tx);border:1px solid rgba(235,104,71,.22)}
.bld-genmeta{margin:9px 14px 0;font-size:12px;color:var(--muted)}

/* ===== Opportunity Discovery picks — linked to the match-card calls ===== */
.sug.won{background:rgba(80,149,108,.07)}
.sug.lost{opacity:.6}
.sug.lost .sug-mkt{text-decoration:line-through;text-decoration-color:var(--red-tx);color:var(--muted)}
.sug.pending .sug-pct{color:var(--ink)}
.sug-st{flex:0 0 auto;display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:4px 8px;border-radius:32px;white-space:nowrap}
.sug-st.won{background:var(--green-bg);color:var(--green-tx)}
.sug.winning{background:rgba(80,149,108,.10)}
.sug-st.winning{background:var(--green-bg);color:var(--green-tx);animation:win-pulse 1.4s ease-in-out infinite}
.sug-st.lost{background:var(--red-bg);color:var(--red-tx)}
.opp-mh .st.fin{background:rgba(255,255,255,.08);color:var(--muted)}
/* "Your selection" — the acca hand-built from the feed */
.acca-card.sel-card{border:1px solid var(--purple-12);background:var(--purple-08)}
.acca-card.sel-card.empty{background:transparent;border:1px dashed var(--line2)}
.acca-card.sel-card .acca-h{display:flex;align-items:center;padding:12px 14px 0}
.sel-empty{padding:16px 14px;font-size:11px;color:var(--muted);text-align:center;line-height:1.5}
.sel-empty b{color:var(--accent-ink);font-weight:700}
.sel-clear{margin-left:auto;font-size:10px;font-weight:600;color:var(--muted);cursor:pointer;text-transform:uppercase;letter-spacing:.03em}
.sel-clear:hover{color:var(--red-tx)}

/* ============================================================
   ACCESS-TIER GATING (build-spec F) — inert shells, blur, teasers, switcher.
   Locked content carries NO gated numbers in the DOM; shells are skeletons.
   ============================================================ */
/* soft blur gate (guest IPW Points — visual presence, value obscured per doc 20) */
.gated-blur{filter:blur(5px);-webkit-filter:blur(5px);user-select:none;cursor:pointer;transition:filter .2s}
.gated-blur:hover{filter:blur(3px);-webkit-filter:blur(3px)}

/* locked acca shell — skeleton, no odds/returns/legs bytes */
.acca-card.ipw.locked{cursor:pointer;border-color:var(--line2);position:relative}
.acca-card.ipw.locked:hover{border-color:var(--purple-12)}
.acca-card.ipw.locked .acca-odds{font-size:13px}
.acca-ret.skel{padding:8px 14px}
.sk-bar{display:inline-block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--glass-2),var(--glass-3),var(--glass-2));background-size:200% 100%;animation:ipw-shimmer 1.8s linear infinite;width:90px}
.sk-bar.wide{width:70%;height:14px}
.sk-od{display:inline-block;height:11px;width:34px;border-radius:6px;background:var(--glass-2)}
.acca-leg.skel{display:flex;align-items:center;justify-content:space-between;padding:7px 0;opacity:.6}
/* inline icons — scale with font-size, inherit currentColor (replace emojis) */
.ipw-lk,.ipw-gem,.ipw-cal{width:1em;height:1em;flex:0 0 auto;vertical-align:-.14em}
.acca-odds .ipw-lk{width:16px;height:16px;color:var(--muted)}
.bld-lock .ipw-lk,.opp-locked .ipw-lk,.ts-fade .ipw-lk{vertical-align:-.16em}
.acca-tag.tier-value .ipw-gem{width:11px;height:11px;vertical-align:-.2em;margin-right:1px}
.acca-divider .ipw-gem{width:12px;height:12px;vertical-align:-.16em}
.stog-win .ipw-cal{vertical-align:-.16em;opacity:.85}
@keyframes ipw-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Value tier accents */
.acca-tag.tier-value{background:linear-gradient(90deg,var(--purple-12),var(--blue-bg));color:#d9dbff}
.acca-card.ipw.value{border-color:var(--accent-ink)}

/* DW5/DW6 — real Value picks list (from WC_BETTING.value_bets) */
.val-list{display:flex;flex-direction:column}
.val-leg{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--line)}
.val-leg:first-child{border-top:0}
.val-sel{flex:1;min-width:0;font-size:12px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;gap:1px}
.val-sel small{font-size:10px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.val-nums{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto}
.val-edge{font-family:var(--head);font-feature-settings:"ss03";font-size:13px;font-weight:600;color:var(--green-tx)}
.val-pp{font-size:9.5px;color:var(--muted);white-space:nowrap}
.val-pp i{font-style:normal;opacity:.7}
.val-od{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--blue-tx);min-width:46px;text-align:right}
.val-note{padding:9px 14px 12px;font-size:10.5px;line-height:1.45;color:var(--muted);border-top:1px solid var(--line)}
.val-note b{color:#b9bbf2}

/* DW6 — track-record (real settled P&L) */
.tr-card{padding:0;border-color:var(--purple-12)}
/* Matt: title "Track record · accumulators" on ONE line, "XXX settled…" underneath; all sizes ~1.5x */
.tr-h{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:15px 18px 9px}
.tr-nm{font-family:var(--head);font-size:20px;font-weight:600;color:var(--ink);white-space:nowrap}
.tr-sub{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--green-tx)}
.tr-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tr-cell{background:var(--glass-2);padding:13px 18px;display:flex;flex-direction:column;gap:2px}
.tr-cell b{font-family:var(--head);font-feature-settings:"ss03";font-size:21px;font-weight:600;color:var(--ink)}
.tr-cell span{font-size:14px;color:var(--muted)}
.tr-cell.up b{color:var(--green-tx)}
.tr-cell.down b{color:var(--red-tx)}
/* RB68: daily-accas per-bucket breakdown line (WC / Live / Mix) */
.tr-buckets{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 18px 4px}
.tr-bk{font-size:15px;color:var(--muted);white-space:nowrap}
.tr-bk b{font-family:var(--head);font-feature-settings:"ss03";font-weight:600;color:var(--ink);font-size:16px}
.tr-bk i{font-style:normal;font-weight:600;color:var(--green-tx)}
.tr-bkdot{color:var(--dim)}
/* per-market settled record + the terse "with Over 0.5 goals" contrast */
.tr-pad{margin:10px 18px 0;padding:11px 14px;font-size:16px;line-height:1.4;color:var(--muted);background:var(--glass);border:1px solid var(--line);border-radius:var(--r)}
.tr-pad b{color:var(--ink);font-weight:700;font-family:var(--head);font-feature-settings:"ss03"}
.tr-pad .info{margin-left:3px}
.tr-mkt-h{padding:14px 18px 5px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#9a9fee}
.tr-mkt-list{padding:0 18px 5px;display:flex;flex-direction:column;gap:2px}
.tr-mkt{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.tr-mkt:first-child{border-top:0}
.tr-mkt-l{font-size:16px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-mkt-v{font-size:15px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.tr-mkt-v b{font-family:var(--head);font-feature-settings:"ss03";font-weight:600;color:var(--ink);font-size:17px;margin-right:3px}
.tr-foot{padding:10px 18px 14px;font-size:13px;line-height:1.45;color:var(--muted)}
/* Matt B7-review item 17: the "Track record · accumulators" card text is too big — reduce it to 0.7x
   (70%) across the whole card. Each font-size above is scaled to 0.7x here (20→14, 13→9, 21→14.7, 14→9.8,
   15→10.5, 16→11.2, 17→11.9). Layout/padding unchanged so the card stays compact but proportionate. */
.tr-nm{font-size:14px}
.tr-sub{font-size:9px}
.tr-cell b{font-size:14.7px}
.tr-cell span{font-size:9.8px}
.tr-bk{font-size:10.5px}
.tr-bk b{font-size:11.2px}
.tr-pad{font-size:11.2px}
.tr-mkt-h{font-size:9px}
.tr-mkt-l{font-size:11.2px}
.tr-mkt-v{font-size:10.5px}
.tr-mkt-v b{font-size:11.9px}
.tr-foot{font-size:9px}

/* DW6 — settled graded accas */
.acca-card.ipw.graded.won{border-color:var(--green-bg)}
.acca-card.ipw.graded.lost{border-color:var(--red-bg);opacity:.92}
.acca-ret .prof.up{color:var(--green-tx)}
.acca-ret .prof.down{color:var(--red-tx)}

/* locked opportunity pick (>68% guest gate) */
.sug-add.locked{color:var(--muted);cursor:pointer}
.sug-add.locked .ipw-lk{width:13px;height:13px}
.sug.locked .sug-pct.gated{color:var(--muted);letter-spacing:.06em}

/* build-your-own — view-only / locked overlay */
.acca-build.view-only{opacity:.96}
.bld-lock{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 12px 0;padding:11px 12px;border:1px dashed var(--purple-12);border-radius:var(--r);background:var(--purple-05);cursor:pointer}
.bld-lock>span:first-child{font-size:11px;color:var(--ink);font-weight:600}
.bld-lock .lk-cta{font-size:11px;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.bld-lock:hover .lk-cta{text-decoration:underline}

/* hidden-games teaser (Opportunity Discovery + match list) */
.opp-locked{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 4px;padding:13px 12px;border:1px dashed var(--purple-12);border-radius:var(--r);background:var(--purple-05);color:var(--accent-ink);font-weight:600;font-size:11.5px;cursor:pointer;text-align:center}
.opp-locked:hover{background:var(--purple-08);text-decoration:underline}

/* tier switcher (DEV/PREVIEW) — the nav plan pill becomes a menu */
.nav .plan.tier-pill{cursor:pointer;user-select:none}
.nav .plan.tier-pill::after{content:"▾";margin-left:5px;font-size:9px;opacity:.7}
.nav .plan.tier-guest{color:var(--muted)}
.nav .plan.tier-registered{color:var(--blue-tx);border-color:var(--blue-bg)}
.nav .plan.tier-subscriber{color:var(--green-tx);border-color:var(--green-bg)}
.nav .plan.tier-wcpass{color:#d9dbff;border-color:var(--purple-12)}
.tier-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:148px;padding:5px;border-radius:var(--r);background:var(--card-2);border:1px solid var(--line2);box-shadow:var(--shadow-lg)}
.tier-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:12px;font-weight:500;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.tier-menu button:hover{background:var(--glass-2)}
.tier-menu button.on{background:var(--purple-08);color:var(--accent-ink);font-weight:600}
.tier-menu button.on::after{content:"✓";float:right}

/* locked market states — neutral shell, no call/prob/colour revealed */
.mhm.locked{cursor:pointer}
.mhm.locked .mhm-num{font-size:18px;letter-spacing:2px;color:var(--muted)}
.mhm.locked .mhm-nm-i{color:var(--muted)}
.mhm.locked:hover{background:var(--purple-05)}
.mh-count.locked{color:var(--muted);letter-spacing:2px;cursor:pointer}
.mc-card.pre.locked{cursor:pointer}
.mc-card.pre.locked .mc-verdict{color:var(--muted);letter-spacing:2px}
.mc-card.pre.locked .mc-state{color:var(--muted)}
.mc-card.pre.locked:hover{background:var(--purple-05)}

/* ============================================================
   RESPONSIBLE-GAMBLING + LEGAL (build-spec I) — on every surface.
   18+ · information only, not a bookmaker · BeGambleAware.
   ============================================================ */
/* nav 18+ chip */
.nav .rg18{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.02em;color:var(--amber-tx);border:1px solid var(--amber-bg);background:rgba(232,184,75,.10);border-radius:999px;padding:3px 8px;cursor:help}
/* per-panel micro-disclaimer (under Opportunity Discovery / Accas headers) */
.panel-rg{font-size:12.5px;line-height:1.45;font-weight:500;letter-spacing:.02em;color:var(--muted);padding:0 14px 8px;border-bottom:1px solid var(--line);margin-bottom:8px;cursor:help}
.panel.collapsed .panel-rg{display:none}
/* inline note above the match board */
.rg-inline{font-size:12.5px;color:var(--muted);line-height:1.45;padding:2px 0;cursor:help}
.rg-inline a{color:var(--muted);text-decoration:underline}
.rg-inline a:hover{color:var(--accent-ink)}
/* persistent footer bar — always visible (every surface) */
body{padding-bottom:46px}
/* RB: plain monochrome compliance bar — all one weight, greyscale only (no amber/blue/bold
   emphasis). Every piece of RG/legal text + links kept; this is styling only. */
.rg-bar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:8px 18px;background:rgba(19,18,22,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line);font-size:10px;line-height:1.5;font-weight:400;color:rgba(255,255,255,.5)}
.rg-bar .rg-badge{flex:0 0 auto;font-weight:400;color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.22);background:transparent;border-radius:999px;padding:2px 8px}
.rg-bar .rg-text{flex:1 1 420px;min-width:240px;font-weight:400;color:rgba(255,255,255,.5)}
.rg-bar .rg-text b{color:inherit;font-weight:400}
.rg-bar .rg-links{flex:0 0 auto;display:flex;gap:14px;margin-left:auto}
.rg-bar .rg-links a,.rg-bar .rg-text a{color:rgba(255,255,255,.62);font-weight:400;white-space:nowrap;text-decoration:underline;text-underline-offset:2px}
.rg-bar .rg-links a:hover,.rg-bar .rg-text a:hover{color:#fff}
@media(max-width:767px){
  body{padding-bottom:0}
  .rg-bar{position:static;flex-direction:row;align-items:center;gap:6px;padding:4px 10px calc(4px + env(safe-area-inset-bottom));font-size:8.5px;line-height:1.2;background:rgba(19,18,22,.72)}
  .rg-bar .rg-text{display:none}
  .rg-bar .rg-badge{display:none}
  .rg-bar .rg-links{margin-left:0;gap:7px;flex-wrap:wrap}
  .rg-bar .rg-links a{font-size:8.5px}
  /* T8: mobile match/statistics cards fill the screen — was a cramped fixed 286px (~73% of a 390px viewport) */
  .stat-card{flex:0 0 min(90vw,380px);width:min(90vw,380px);max-width:min(90vw,380px)}
}

/* ============================================================
   PRICING · AD SLOTS · GLOBAL BLUR · ALERTS (pricing-blur-ads brief). additive.
   ============================================================ */

/* in-app flashing alert chip — FREE on every tier (mock indicator) */
.alert-flash{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--red-tx);background:var(--red-bg);border:1px solid rgba(255,90,87,.3);border-radius:999px;padding:3px 10px;letter-spacing:.02em;cursor:default;animation:alertflash 1.25s ease-in-out infinite}
@keyframes alertflash{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(255,90,87,.35)}50%{opacity:.5;box-shadow:0 0 0 4px rgba(255,90,87,0)}}
@media(max-width:767px){.alert-flash{display:none}}

/* placeholder ad slot — real ad network swaps in via [data-ad-slot]; WC Pass is ad-free */
.ad-slot{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;padding:16px;margin:2px 0;border:1px dashed var(--line2);border-radius:var(--r-lg);background:repeating-linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 10px,transparent 10px,transparent 20px);min-height:64px}
.ad-slot .ad-k{font-size:9px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--dim)}
.ad-slot .ad-t{font-size:13px;font-weight:600;color:var(--muted)}
.ad-slot .ad-x{font-size:10px;color:var(--accent-ink);font-weight:600}

/* global (non-WC) card wrapper + upgrade CTA (stats stay visible; predictions blurred) */
.glob-wrap{position:relative}
.glob-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin:6px 0 2px;padding:11px 14px;border:1px solid var(--purple-12);border-radius:var(--r);background:var(--purple-08);color:var(--accent-ink);font-size:12px;font-weight:600;cursor:pointer;text-align:center}
.glob-cta:hover{background:var(--purple-12)}
.glob-cta .ipw-lk{width:14px;height:14px}

/* register digest opt-in */
.optin{display:flex;align-items:flex-start;gap:8px;text-align:left;font-size:11.5px;color:var(--muted);line-height:1.45;margin:2px 0 8px}
.optin input{margin-top:2px;accent-color:var(--accent-ink);flex:0 0 auto}
.optin b{color:var(--ink)}

/* wide modal for the pricing matrix */
.modal-wide{max-width:1080px;width:96vw;text-align:left;max-height:92vh;overflow:auto}

/* pricing table (4-column matrix; existing card styling) */
.pricing-lead{font-size:14px;color:var(--ink);text-align:center;max-width:680px;margin:6px auto 20px;line-height:1.5}
.pricing-lead b{color:var(--accent-ink)}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.plan-col{position:relative;background:var(--card-2);border:1px solid var(--line2);border-radius:var(--r-lg);padding:18px 16px;display:flex;flex-direction:column;gap:12px}
.plan-col.feature{border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--purple),0 18px 40px -24px rgba(124,128,238,.7)}
.plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent-fill);color:#fff;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:3px 10px;border-radius:999px;white-space:nowrap;font-size:10px}
.plan-hd{min-height:80px}
.plan-nm{font-family:var(--head);font-size:16px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.plan-here{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--green-tx);background:var(--green-bg);padding:2px 7px;border-radius:999px}
.plan-pr{margin-top:6px;display:flex;align-items:baseline;gap:6px}
.plan-pr b{font-family:var(--head);font-feature-settings:"ss03";font-size:26px;font-weight:700;color:var(--ink)}
.plan-pr span{font-size:11px;color:var(--muted)}
.plan-trial{margin-top:4px;font-size:11px;color:var(--accent-ink);font-weight:600}
.plan-cta{width:100%}
.plan-cta.is-current{opacity:.55;cursor:default;pointer-events:none;background:transparent;color:var(--muted);border-color:var(--line2)}
.pf-list{display:flex;flex-direction:column;border-top:1px solid var(--line);padding-top:2px}
.pf-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:11.5px}
.pf-row:first-child{border-top:0}
.pf-l{color:var(--muted);line-height:1.35}
.pf-yes{color:var(--green-tx);font-weight:800;font-size:13px}
.pf-no{color:var(--muted);font-weight:700}
.pf-val{color:var(--ink);font-weight:600;text-align:right;font-size:11px;max-width:128px}
.pf-val.muted{color:var(--muted)}
.pf-soon{color:var(--amber-tx);font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.pricing-rg{margin-top:16px;font-size:10.5px;color:var(--muted);line-height:1.5;text-align:center}
.pricing-rg a{color:var(--accent-ink)}
@media(max-width:860px){.plan-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.plan-grid{grid-template-columns:1fr}}

/* ============================================================
   VARIANT E MATCH CARD — ported from WC-Frontend/layout-lab/lab.css
   (signed-off Variant E). Reuses the dashboard's existing .mhm /
   .mh-team / .mh-vs / .ipw-orb / .mrow-glow primitives; only the
   E-specific chrome is added here. Real data or "—" only.
   ============================================================ */

/* ---- shared primitives (tags, rank badge, square button, crest, score chip) ---- */
/* one aligned row: the time pill + opportunities pill (+ LIVE/min when live) stay on a single
   baseline (they were wrapping onto two lines) — nowrap keeps them level; min-width:0 lets the
   whole row shrink rather than push the predchip/chevron off. */
.e-tagrow{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;min-width:0}
.e-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:var(--r);
  background:var(--glass-2);border:1px solid var(--line);
  font:600 10px/1.5 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.e-tag .dot{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block}
.e-tag.live{border-color:rgba(255,90,87,.35);background:var(--red-bg)}
.e-tag.min{background:var(--orange-bg);border-color:rgba(235,104,71,.35)}
.e-tag.cd{font-family:var(--mono);text-transform:none;letter-spacing:0;font-size:9px;color:var(--text-2)}
.e-tag.ft{font-family:var(--mono);text-transform:none;letter-spacing:0;font-size:9px;color:var(--text-2);background:var(--glass)}
.e-tag.opps{color:var(--hi)}
/* live pill flashing-red pulse (only rendered when genuinely live) */
.e-tag.live-pulse{animation:eLivePulse 1.6s ease-in-out infinite}
@keyframes eLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,90,87,.45)}50%{box-shadow:0 0 0 6px rgba(255,90,87,0)}}
@media (prefers-reduced-motion:reduce){.e-tag.live-pulse{animation:none}}
.e-rankb{display:inline-block;padding:2px 5px;border-radius:var(--r);background:var(--elev);border:1px solid var(--line);
  font:600 8px/1.3 var(--mono);letter-spacing:.04em;color:var(--text-2);min-width:14px;text-align:center}
.e-crest{border-radius:50%;background:var(--card-2);object-fit:contain}
.e-crest.c18{width:18px;height:18px;padding:2px}.e-crest.c20{width:20px;height:20px;padding:2px}.e-crest.c30{width:30px;height:30px;padding:3px}
.e-crest.team-fallback{padding:0}
.sqbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--glass);color:var(--muted);flex:0 0 auto}
.sqbtn:hover{border-color:var(--border-hi);color:var(--text)}
.e-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
.scorechip{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:4px 8px;border-radius:var(--r);
  background:var(--inset);border:1px solid var(--line);font:600 12px/1.3 var(--mono);color:var(--ink);letter-spacing:.02em;white-space:nowrap}

/* ---- comp header + LIVE pill (E section chrome; the WC board keeps its own .comp-group accordion) ---- */
.e-livepill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r);
  background:var(--glass-2);border:1px solid var(--line2);
  font:600 9px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.e-livepill .dot{width:5px;height:5px;border-radius:50%;background:var(--red)}
.e-livepill.none .dot{background:var(--muted-2)}

/* ---- the E card shell (collapsed + expanded), state tints ---- */
.dx-stack{display:flex;flex-direction:column;gap:10px}
/* glass recipe: the signed-off Variant E card carries a `glass-card` class whose
   base border / radius / shadow / blur lives in the lab's global .glass-card rule
   (lab.css:63). That rule was NOT ported, so the card rendered borderless + shadowless.
   Re-apply it scoped to the E card here (faithful values from the reference). */
.ex-card.glass-card{background:var(--glass);border:1px solid rgba(124,128,238,.10);border-radius:var(--r);
  box-shadow:var(--glass-sh),var(--glass-hi),inset 0 0 46px rgba(124,128,238,.035);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ex-card{position:relative;overflow:hidden;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,opacity .25s ease,filter .25s ease}
.ex-card:hover{transform:translateY(-2px);border-color:rgba(124,128,238,.28);box-shadow:var(--glass-sh),var(--glass-hi),0 0 22px rgba(124,128,238,.12)}
.ex-card::after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(170,176,244,.05) 46%,transparent 60%);
  transform:translateX(-130%);transition:transform 1s ease}
.ex-card:hover::after{transform:translateX(130%)}
@media (prefers-reduced-motion:reduce){.ex-card,.ex-card::after{transition:none}.ex-card:hover{transform:none}.ex-card:hover::after{transform:translateX(-130%)}}
/* THREE distinct card states, driven by the real fixture status (eStateCls):
   UPCOMING = indigo tint · LIVE = TEAL/EMERALD tint (background only) · ENDED/FT = faint, dimmed.
   Matt B7-review #5 (CRITICAL — "washed out"): the state tint was a semi-transparent BACKGROUND on
   the card element, which — combined with the coloured border, the pulsing ring box-shadow and the
   backdrop blur — read as a wash sitting OVER the content. Fix: the tint is now a dedicated
   ::before UNDERLAY at z-index:0, strictly BEHIND every content element (all direct children are
   z-index:1). The card element itself keeps ONLY the neutral glass background, so info tiles, panel
   headings, collapsed signal tiles, team names, crest logos, dividers and the won-tint all render
   fully opaque ABOVE the tint. Matt B7-review #2: the LIVE state carries NO coloured outline/border
   and NO ring-pulse glow — just the subtle teal background underlay. */
.ex-card::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:transparent}
.ex-card.st-up::before{background:rgba(124,128,238,.11)}
/* Matt R15: the live tint is a gradient MIST - strongest top-left, fading out. */
.ex-card.st-live::before{background:linear-gradient(160deg,rgba(45,212,191,.14),rgba(45,212,191,.04) 42%,rgba(45,212,191,0) 72%)}
.ex-card.st-fin::before{background:rgba(255,255,255,.025)}
/* live: keep the neutral glass border (no coloured outline), no pulse ring — the LIVE pill signals state */
.ex-card.st-live{animation:none}
/* per-state card tints (Matt) — upcoming / live / ended each distinct, settable per theme */
.ex-card.st-up.glass-card{background:var(--card-up)}
.ex-card.st-live.glass-card{background:var(--card-live)}
.ex-card.st-fin.glass-card{background:var(--card-fin)}
/* finished (full-time) cards greyed out — the game's done; hover restores for inspection (Matt) */
.ex-card.st-fin{border-color:rgba(255,255,255,.08);opacity:.58;filter:saturate(.5)}
.ex-card.st-fin:hover{opacity:1;filter:none}
/* every content element sits ABOVE the tint underlay + the hover glow (both z-index:0).
   The ::before tint is a pseudo-element (not a real child) so `> *` never targets it. */
.ex-card > *:not(.mrow-glow){position:relative;z-index:1}
/* the E card's own hover glow (the dashboard's .mrow-glow markup is reused inside .ex-card) */
.ex-card:hover .mrow-glow{opacity:1}
.ex-card:hover .mrow-glow i{animation-play-state:running}
.e-ftnote{font:400 8px var(--body);color:var(--muted-2);white-space:nowrap;letter-spacing:.02em}
.ex-card.dx-closed .e-mobx{display:none}
.ex-card:not(.dx-closed) .e-mobrows{display:none}

/* ---- top tags row + predictability chip ---- */
.cx-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px 0}
.cx-top .rt{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.predchip{position:relative;display:inline-flex;align-items:center;gap:5px;padding:3px 6px;
  border:1px solid var(--border);background:var(--glass);border-radius:var(--r);font:600 10px var(--mono);color:var(--hi)}
.predchip svg{width:10px;height:12px;fill:var(--hi);transition:filter .3s}
.predchip.off{color:var(--dim)}.predchip.off svg{fill:var(--dim)}
/* Matt R7: tooltip sizing +30% globally (this chip's private CSS tooltip included: 9.5->12.5px, 196->255px). */
.predchip::after{content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;z-index:80;width:255px;
  padding:8px 12px;font:500 12.5px/1.45 var(--body);letter-spacing:0;text-transform:none;text-align:left;
  color:var(--text);background:var(--card);border:1px solid var(--line2);box-shadow:var(--glass-sh);display:none;white-space:normal}
.predchip:hover::after,.predchip.tipped::after{display:block}
/* Matt B7-review item 12: predictability indicator SLOW-flashes a colour by its score — green when
   good/really good (high), amber when average (mid), red when low. A slow, subtle flash on the chip
   text + bolt fill + border. Reduced-motion → static coloured (no flash). Replaces the old indigo-tier
   pulse. High/mid/low are set by ePredChip's pk-hi / pk-mid / pk-lo classes. */
.predchip.pk-hi{color:var(--green-tx);border-color:rgba(80,149,108,.55);animation:predFlashHi 3.2s ease-in-out infinite}
.predchip.pk-hi svg{fill:var(--green-tx)}
.predchip.pk-mid{color:var(--amber-tx);border-color:rgba(232,184,75,.5);animation:predFlashMid 3.4s ease-in-out infinite}
.predchip.pk-mid svg{fill:var(--amber-tx)}
.predchip.pk-lo{color:var(--red-tx);border-color:rgba(255,90,87,.5);animation:predFlashLo 3.6s ease-in-out infinite}
.predchip.pk-lo svg{fill:var(--red-tx)}
@keyframes predFlashHi{0%,100%{opacity:.72;box-shadow:0 0 0 0 rgba(80,149,108,0)}50%{opacity:1;box-shadow:0 0 8px 0 rgba(80,149,108,.4)}}
@keyframes predFlashMid{0%,100%{opacity:.72;box-shadow:0 0 0 0 rgba(232,184,75,0)}50%{opacity:1;box-shadow:0 0 8px 0 rgba(232,184,75,.4)}}
@keyframes predFlashLo{0%,100%{opacity:.72;box-shadow:0 0 0 0 rgba(255,90,87,0)}50%{opacity:1;box-shadow:0 0 8px 0 rgba(255,90,87,.4)}}
@media (prefers-reduced-motion:reduce){.predchip.pk-hi,.predchip.pk-mid,.predchip.pk-lo{animation:none;opacity:1}}

/* ---- desktop head: teams + score-only centre + ported signal strip ---- */
.ex-head{display:flex;align-items:center;gap:10px;padding:2px 12px 2px;flex-wrap:wrap;min-height:96px}
.ex-head .mh-vs{padding:6px 10px}
.ex-head .mh-markets{flex:1 1 260px;min-width:0;display:flex;gap:8px;align-self:stretch;margin:0 0 0 2%;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:transparent transparent}
.ex-head .mh-markets:hover{scrollbar-color:var(--sb-thumb-hi) transparent}
.ex-head .mh-markets::-webkit-scrollbar{height:6px}
.ex-head .mh-markets::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:8px}
.ex-head .mh-markets:hover::-webkit-scrollbar-thumb{background:var(--sb-thumb)}
.e-tncol{display:flex;flex-direction:column;gap:2px;min-width:0}
/* rating-trend sparkline under the team name (B9-orb) */
.tn-spark{display:inline-flex;align-items:center;margin-top:2px;height:14px;cursor:help}
.ipw-spark{display:block;overflow:visible}
@media(max-width:767px){.tn-spark{display:none}}   /* tight mobile rows: keep just the orb number */
/* Matt B7-review item 5: the "Last game N days ago" subtext was tiny (8.5px) — ~2x it (→17px),
   clearly bigger while staying a single line (white-space:nowrap kept). */
/* B7-41 item 2: the round-5 2x (17px) overshot — dial back ~0.65x (17->11px) so it reads without dominating. */
.e-tncol .meta{font:400 11px var(--body);color:var(--muted);white-space:nowrap}
.mh-team.away .e-tncol{align-items:flex-end;text-align:right}

/* ---- tab row (single horizontal row) ---- */
.cx-tabs{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
/* Matt R7: the PREDICTABILITY chip leads the tabs row — NOT selectable (default cursor, no text select),
   sized to sit flush with the tab pills; keeps its pk-hi/mid/lo colour flash + hover tooltip. */
/* Matt R8: chip +30% (font 10->13px, bolt scaled to match). */
.cx-tabs .predchip.predtab{flex:0 0 auto;cursor:default;user-select:none;-webkit-user-select:none;padding:7px 11px;white-space:nowrap;font-size:13px}
.cx-tabs .predchip.predtab svg{width:13px;height:15.5px}
.cx-tabs .predchip.predtab::after{display:none!important;content:none!important}
.cx-tabs::-webkit-scrollbar{display:none}
.cx-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r);border:1px solid transparent;
  font:600 10px var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:none}
.cx-tab.on{border-color:var(--border-hi);background:var(--glass-2);color:var(--ink);box-shadow:var(--glass-hi)}
/* T-180 search box — sits in the existing filter bar and borrows .ftab's shape so it
   reads as one control group rather than a bolted-on input. */
.ftab-search{flex:0 0 auto;min-width:150px;padding:6px 10px;border-radius:var(--r);
  border:1px solid var(--border);background:var(--glass-2);color:var(--ink);
  font:500 11px var(--body);outline:none}
.ftab-search::placeholder{color:var(--muted)}
.ftab-search:focus{border-color:var(--border-hi);background:var(--glass-3)}
.ftab-search::-webkit-search-cancel-button{cursor:pointer}
/* Matt 2026-07-29: Insights and Cold insights were both a bare outline in the tab
   strip and read as the same control. Insights keeps its gold but is now FILLED
   rather than outline-only; Cold insights takes a cold indigo so the pair is
   distinguishable at a glance. Both keep .on's stronger treatment for the selected
   state, so "which panel am I looking at" still wins over "which panel is which". */
.cx-tab[data-epanel="insights"]{border-color:var(--amber);background:var(--amber-bg);color:var(--amber-tx)}
.cx-tab[data-epanel="insights"]:hover{background:color-mix(in srgb,var(--amber) 32%,transparent)}
.cx-tab[data-epanel="insights"].on{border-color:var(--amber);background:color-mix(in srgb,var(--amber) 38%,transparent);color:var(--ink);box-shadow:var(--glass-hi)}
.cx-tab[data-epanel="coldins"]{border-color:#5B62E0;background:rgba(91,98,224,.22);color:#C2C7F7}
.cx-tab[data-epanel="coldins"]:hover{background:rgba(91,98,224,.32)}
.cx-tab[data-epanel="coldins"].on{border-color:#5B62E0;background:rgba(91,98,224,.40);color:var(--ink);box-shadow:var(--glass-hi)}
html[data-theme="light"] .cx-tab[data-epanel="coldins"]{border-color:#4338CA;background:rgba(67,56,202,.14);color:#3730A3}
html[data-theme="light"] .cx-tab[data-epanel="coldins"]:hover{background:rgba(67,56,202,.22)}
html[data-theme="light"] .cx-tab[data-epanel="coldins"].on{background:rgba(67,56,202,.30);color:#1E1B4B}

/* ---- expanded body: content-height panels, horizontal scroll only ---- */
.ex-body{margin:0 8px 8px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.cx-panel{display:none;height:auto;min-height:0;align-items:flex-start;gap:0;overflow-x:auto;overflow-y:hidden;padding:8px;scrollbar-width:thin;touch-action:pan-x pan-y}
.cx-panel.on{display:flex}
.cx-panel::-webkit-scrollbar{height:8px}
.cx-panel::-webkit-scrollbar-track{background:transparent}
.cx-panel::-webkit-scrollbar-thumb{background:var(--glass-3);border:1px solid var(--border)}
.cx-panel::-webkit-scrollbar-thumb:hover{background:var(--hi-soft);border-color:var(--border-hi)}
.ex-body .cx-sigctl,.ex-body .cx-bkctl{align-self:stretch}
.cx-empty{align-self:center;margin:0 auto;text-align:center;color:var(--muted);font:400 11px var(--body);max-width:340px;padding:0 16px}
.cx-empty b{display:block;font:600 11px var(--head);color:var(--text-2);margin-bottom:4px}
.ex-scroll{display:flex;overflow-x:auto;overflow-y:hidden;min-width:0;max-width:100%;scrollbar-width:thin}
/* collapse: hide the expanded parts when closed */
.ex-card.dx-closed .cx-tabs,.ex-card.dx-closed .ex-body,.ex-card.dx-closed .collapsebar,.ex-card.dx-closed .e-mc{display:none}
.ex-card .sqbtn .e-chev{transition:transform .2s}
.ex-card:not(.dx-closed) .sqbtn .e-chev{transform:rotate(180deg)}
.collapsebar{width:auto;margin:0 8px 6px;display:flex;align-items:center;justify-content:center;padding:5px 0;
  border:1px solid var(--line2);background:var(--glass);color:var(--muted);border-radius:var(--r)}
.collapsebar:hover{border-color:var(--border-hi);color:var(--text)}

/* ---- Signals panel controls (pre/live toggle) ---- */
.cx-sigctl{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;padding-right:10px;border-right:1px solid var(--line);margin-right:10px;justify-content:center}
.cx-chip{padding:5px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--glass);
  font:600 9px var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cx-chip.on{background:var(--glass-2);border-color:var(--border-hi);color:var(--ink)}

/* ---- Matt B7-review items 1 & 14: COMPACT stat table (Live stats + Info), styled like Historical ----
   Category filter chips over a dense key/value table. The default is a vertical stack (Live stats); the
   .horiz variant lays the rows out as a horizontal scrolling strip (Info keeps its intentional delta). */
.estab-chips{display:flex;flex-wrap:wrap;gap:6px}
.estab-chips .cx-chip{cursor:pointer}
.estab{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--glass)}
.estab-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 12px;border-top:1px solid var(--line);min-height:30px}
.estab-row:first-child{border-top:0}
.estab-k{flex:0 0 auto;font:500 12px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.estab-v{flex:1 1 auto;text-align:right;font:400 15px var(--body);color:var(--text-2);min-width:0}
.estab-v b{font:600 17.5px/1.2 var(--head);font-feature-settings:"ss03";color:var(--text)}
.estab-v small{display:inline-block;margin-left:6px;font:400 12.5px var(--body);color:var(--muted)}
.estab-v b.pair{display:inline-flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:12px;font-weight:400;color:var(--muted)}
.estab-v b.pair span{font:600 13px var(--head);font-feature-settings:"ss03";color:var(--text);margin-left:6px}
/* horizontal strip variant (Info) — the intentional delta, kept compact + dense */
.estab.horiz{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border:0;background:transparent;gap:8px;scrollbar-width:thin}
.estab.horiz .estab-row{flex:0 0 auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;padding:9px 12px;border:1px solid var(--line);background:var(--glass);min-width:120px;min-height:auto}
.estab.horiz .estab-v{text-align:left;width:100%}
.estab.horiz .estab-v b.pair{align-items:flex-start}
.estab.horiz .estab-v b.pair span{margin-left:0}
.estab.horiz::-webkit-scrollbar,.estab-chips::-webkit-scrollbar{height:8px}
.estab.horiz{scrollbar-color:var(--glass-3) transparent}

/* ---- Bookmakers panel ---- */
.cx-bkctl{display:flex;flex-direction:column;gap:6px;flex:0 0 auto;padding-right:10px;border-right:1px solid var(--line);margin-right:10px;justify-content:center}
/* Matt B7-review #7: the Bookmakers figures + labels were too small — size them up ~1.5x so odds
   read comfortably (group title 8.5→13, book name 9→13.5, price rows 9.5→14). Columns/padding
   scaled to match so the grid stays tidy. */
.bk-group{display:flex;flex-direction:column;flex:0 0 auto;margin-right:14px}
.bk-group .gt{font:600 12.5px var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:3px 2px 8px}
.bk-cols{display:flex;align-items:stretch}
.bk-col{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;min-width:118px;padding:11px 14px;border:1px solid var(--line);background:var(--glass);margin-right:6px}
.bk-col .bn{font:600 13.5px/1.2 var(--body);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;padding-bottom:5px;border-bottom:1px solid var(--line);margin-bottom:5px}
.bk-col .r{display:flex;justify-content:space-between;gap:10px;font:500 14px var(--mono)}
.bk-col .r .l{color:var(--muted)}.bk-col .r .o{color:var(--ink)}
.bk-col.best .bn{color:var(--hi)}
/* Matt B7-review item 4: bookmaker attribution under each O/U best price (which book gives it) */
.bk-col .r.ou-r{align-items:flex-start}
.bk-col .r.ou-r .o{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.bk-col .bk-src{font:500 9.5px var(--body);color:var(--muted);letter-spacing:0;max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

/* ---- Opportunities panel ---- */
.tag.opps,.e-tag.opps{cursor:default}
.ex-card .e-tag.opps{cursor:pointer}
.e-tag.opps.op-gold{color:#e8c66a;border-color:rgba(232,184,75,.45);background:var(--amber-bg)}
.e-tag.opps.op-red{color:var(--red-tx);border-color:rgba(255,90,87,.5);background:var(--red-bg)}
.e-tag.opps.op-green{color:var(--green-tx);border-color:rgba(80,149,108,.55);background:var(--green-bg)}
.eop{display:flex;flex-direction:column;min-width:300px;border:1px solid var(--line);background:var(--glass)}
.eop-hd{padding:7px 12px;font:600 10.5px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eop-row{display:flex;align-items:center;gap:12px;padding:6px 10px;border-top:1px solid var(--line)}
.eop-st{flex:0 0 78px;font:700 10.5px var(--head);letter-spacing:.07em;text-transform:uppercase}
.eop-st.pend{color:#e8c66a}.eop-st.won{color:var(--green-tx)}.eop-st.lost{color:var(--red-tx)}
.eop-nm{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:6px;font:500 14px var(--body);color:var(--text-2)}
.eop-nm .e-crest{flex:0 0 auto;align-self:center}
.eop-tx{min-width:0}

.eop-p{font:600 16px var(--head);font-feature-settings:"ss03";color:var(--ink)}
.eop-p.gated{color:var(--muted);letter-spacing:.06em}
.eop-o{font:500 12px var(--mono);color:var(--hi);width:54px;text-align:right}
@keyframes eopBest{0%,100%{opacity:1}50%{opacity:.55}}
.eop-best .eop-st{animation:eopBest 2.4s ease-in-out infinite}
.eop-best .eop-p{font-weight:700}
@media(prefers-reduced-motion:reduce){.eop-best .eop-st{animation:none}}
@media(max-width:600px){.eop-row{gap:5px;padding:8px 8px;align-items:flex-start}
.eop-st{flex:0 0 auto;min-width:42px}
.eop-o{display:none}
.eop-p{flex:0 0 auto;font-size:13px}
.eop-nm{gap:4px;font-size:12.5px}
.eop-nm .e-crest{width:15px;height:15px;font-size:8px}}


/* ---- Historical panel: filters, comparison table, recent lists ---- */
.exh-filters{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 8px}
.exh-fgroup{display:flex;align-items:center;gap:6px}
.exh-fgroup .glbl{font:600 8px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
/* Matt B7-review #8: on mobile the View/Window/Focus groups wrapped onto several lines.
   Put them on ONE line as a single horizontal-scroll row (nowrap + overflow-x auto). */
@media(max-width:767px){
  .exh-filters{flex-wrap:nowrap;overflow-x:auto;gap:10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:2px}
  .exh-filters .exh-fgroup{flex:0 0 auto}
}
.exh-seg{display:inline-flex;border:1px solid var(--border)}
.exh-seg button{padding:5px 11px;border:none;border-left:1px solid var(--border);background:transparent;font:600 9.5px var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.exh-seg button:first-child{border-left:none}
.exh-seg button.on{background:var(--glass-2);color:var(--ink)}
.exh-seg button:disabled{color:var(--muted-2);opacity:.5;cursor:not-allowed}
.exh-nocorner{font:400 8.5px var(--body);color:var(--muted-2);align-self:center}
/* Matt B7-review #9: the disabled Corners button lives in a data-tip wrapper (disabled buttons
   don't fire hover for the tooltip). The wrapper joins seamlessly into the segment control and
   shows help-cursor to signal the tooltip. */
.exh-corner-wrap{display:inline-flex;cursor:help}
.exh-corner-wrap button{border-left:1px solid var(--border)}
.exh-body{overflow:hidden}
.exh{display:flex;align-items:stretch}
.exh-teams{flex:0 0 auto;display:flex;flex-direction:column;border:1px solid var(--line);background:var(--glass);margin-right:6px}
.exh-teams .h{height:22px}
.exh-teams .t{flex:1;display:flex;align-items:center;gap:6px;padding:0 10px;font:600 13.75px var(--body);color:var(--text-2);border-top:1px solid var(--line);white-space:nowrap}
.exh-teams .t .nm{display:inline-block;max-width:112px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.exh-col{flex:0 0 auto;display:flex;flex-direction:column;min-width:92px;border:1px solid var(--line);border-left:none;background:var(--glass)}
.exh-col .k{height:26px;display:flex;align-items:center;justify-content:center;padding:0 10px;font:500 11.5px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);white-space:nowrap}
.exh-col .hv,.exh-col .av{flex:1;display:flex;align-items:center;justify-content:center;padding:6px 12px;border-top:1px solid var(--line);font:600 21px/1.15 var(--head);font-feature-settings:"ss03";color:var(--text-2)}
.exh-col .best{color:var(--green-tx);background:var(--green-bg)}
.exh.tight .exh-teams .h,.exh.tight .exh-col .k{height:24px}
.exh.tight .exh-teams .t{padding:0 8px;font-size:13px}
.exh.tight .exh-col{min-width:82px}
.exh.tight .exh-col .k{padding:0 8px;font-size:10.5px}
.exh.tight .exh-col .hv,.exh.tight .exh-col .av{padding:3px 10px;font-size:18px}
.wdlrow-e{display:flex;gap:3px}
.wdlrow-e .wdl{width:13px;height:13px;background:var(--elev);border:1px solid var(--line);position:relative;flex:0 0 auto}
.wdlrow-e .wdl[data-r="W"],.wdlrow-e .wdl[data-r="CW"]{background:var(--good);border-color:var(--good)}
.wdlrow-e .wdl[data-r="L"]{background:var(--loss);border-color:var(--loss)}
.wdlrow-e .wdl[data-r="D"],.wdlrow-e .wdl[data-r="CD"]{background:var(--muted);border-color:var(--muted)}
.wdlrow-e .wdl[data-r="CW"]::after,.wdlrow-e .wdl[data-r="CD"]::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.exr-list{display:flex;gap:8px;align-items:flex-start;width:100%}
.exr-team{flex:1 1 0;min-width:0;border:1px solid var(--line);background:var(--glass);display:flex;flex-direction:column}
.exr-team .hd{display:flex;align-items:center;gap:6px;padding:6px 10px;font:600 9.5px var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.exr-teamhd{flex:0 0 auto}
.exr-scroll{overflow-y:auto;overflow-x:hidden;height:150px}
.exr-row{display:flex;align-items:center;gap:8px;padding:5px 10px;border-top:1px solid var(--line)}
.exr-row .dt{font:500 9.5px var(--mono);color:var(--muted);flex:0 0 auto}
.exr-row .ha{font:600 8.5px var(--mono);color:var(--muted-2);width:12px;text-align:center;flex:0 0 auto}
.exr-row .op{font:500 11px var(--body);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 auto}
.exr-row .sc{font:600 12.5px var(--mono);color:var(--ink);flex:0 0 auto}
/* visible on-brand vertical scrollbar (the user must see there's more) */
.ipw-vscroll{scrollbar-width:thin;scrollbar-color:var(--hi-soft) var(--inset)}
.ipw-vscroll::-webkit-scrollbar{width:9px}
.ipw-vscroll::-webkit-scrollbar-track{background:var(--inset);border-left:1px solid var(--line)}
.ipw-vscroll::-webkit-scrollbar-thumb{background:var(--glass-3);border:1px solid var(--border-hi)}
.ipw-vscroll::-webkit-scrollbar-thumb:hover{background:var(--hi-soft)}

/* ---- Top-signals card shell (Signals / Insights / Players / Info) ----
   Matt mobile-polish #3+4+5: STRICT uniform grid — every tile the SAME fixed width AND fixed height
   (a hard height, not a min-height that varies with content, so no tile is taller than its siblings),
   then scaled up ~25% across width/height and the numerals/labels. Uniform sizing is enforced on the
   base shell so all panels (Signals / Insights / Players / Info / Live stats) match. --st-w / --st-h /
   --st-big are the single knobs; overrides (einfo-grid, mobile) re-point them so proportions stay locked. */
/* B9-12: collapsed-card insight strip — the expanded Insights language (meter + Extreme flag)
   adapted to head space. Same gradient/flag tokens as .stcard, compact geometry. */
/* B9-12c: insights render AS the RHS market tiles (.mhm .ins) — identical tile to the market strip
   Matt pointed at. Differences per Matt: the label is CENTRED and wraps to at most TWO lines (a
   vertical auto-scroll kicks in via .ins-scroll if it still overflows), and EXTREME facts are
   intensified (gold ring + glowing, pulsing number) so they clearly stand out. */
/* .mhm.ins (2 classes) must beat the unrelated pre-existing .ins list rule (align-items:flex-start,
   line 926) — without this the number + label render LEFT-aligned. */
.mhm.ins{padding:16px 6px 12px;align-items:center;justify-content:center;gap:5px;text-align:center}
/* metallic (brushed-steel) number — smooth gradient clipped to the glyphs (Matt) */
.mhm.ins .mhm-num{color:var(--ink);background:linear-gradient(160deg,#f3f6fc 0%,#aab2c6 34%,#7c8598 50%,#c2c9d8 64%,#8b93a8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.35)}
/* insight team icon +40% (13 → 18px), Matt */
.mhm.ins .mkt-side img,.mhm.ins .mkt-side .noimg{width:18px;height:18px}
.mhm.ins .mkt-side{top:6px;left:6px}
/* hover: the tile RISES up out of the card (Matt) rather than zooming in place */
.ex-card .mh-markets .mhm.ins{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease}
.ex-card .mh-markets .mhm.ins:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 12px 22px -6px rgba(0,0,0,.45);z-index:5}
@media (prefers-reduced-motion:reduce){.ex-card .mh-markets .mhm.ins:hover{transform:none}}
.mhm.ins .mhm-nm{max-width:126px;white-space:normal;text-align:center;line-height:1.15;
  overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.35em}
.mhm.ins .mhm-nm-i{display:inline;white-space:normal;text-align:center;animation:none;font-weight:500;font-size:13.5px}
/* horizontal auto-scroll for the rare label that won't fit in two lines (JS adds .ins-scroll):
   drop to one line and marquee LEFT-RIGHT, a bit faster (Matt) */
.mhm.ins .mhm-nm.ins-scroll{display:block;-webkit-line-clamp:none;max-height:1.4em;white-space:nowrap;overflow:hidden}
.mhm.ins .mhm-nm.ins-scroll .mhm-nm-i{display:inline-block;white-space:nowrap;animation:insHScroll 3.4s ease-in-out infinite alternate}
@keyframes insHScroll{0%,14%{transform:translateX(0)}86%,100%{transform:translateX(var(--insx,0))}}
/* EXTREME — intensified + ~0.75x bigger number that still fits the 104px tile (no card growth) */
.ex-card .mhm.ins.xtreme{background:linear-gradient(180deg,rgba(232,184,75,.05),rgba(232,184,75,.24) 24%,rgba(232,184,75,.24) 76%,rgba(232,184,75,.05));box-shadow:inset 0 0 0 1px rgba(232,184,75,.55);border-radius:8px;overflow:hidden}
.ex-card .mhm.ins.xtreme .mhm-num{font-size:47px;line-height:.88;letter-spacing:-1.5px;color:#f0cf74;background:linear-gradient(160deg,#fdeeb8 0%,#e8c66b 34%,#b98f28 50%,#f2d982 64%,#c99a2a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.ex-card .mhm.ins.xtreme .mhm-num .mhm-pct{font-size:.42em}
.ex-card .mhm.ins.xtreme .mhm-nm{max-height:2.25em;line-height:1.06}
.ex-card .mhm.ins.xtreme .mhm-nm-i{color:#f0d38a;font-weight:500;font-size:12px}
.mhm.ins .mhm-r.xt{background:transparent;color:#f0cf74;width:auto;height:auto;font-size:12px;top:6px;right:7px}
.mhm.ins:not(.xtreme) .mhm-r.xt{display:none}
/* guest paywall — locked tiles (••• value, label visible as the tease) across all match states */
.ex-card .mhm.ins.locked{cursor:pointer}
.ex-card .mhm.ins.locked .mhm-num,.ex-card .mhm.ins.locked.xtreme .mhm-num{font-size:20px;letter-spacing:3px;color:var(--muted);-webkit-text-fill-color:var(--muted);background:none;text-shadow:none;animation:none}
.mhm.ins-more{justify-content:center}
.mhm.ins-more .mhm-num{font-size:20px;letter-spacing:0;color:var(--muted)}
html[data-theme="light"] .ex-card .mhm.ins.xtreme{background:linear-gradient(180deg,rgba(199,154,42,.07),rgba(199,154,42,.2) 24%,rgba(199,154,42,.2) 76%,rgba(199,154,42,.07));box-shadow:inset 0 0 0 1px rgba(199,154,42,.6)}
/* light mode (Matt): the dark-mode metallic gradients washed out on the near-white cards, so light drops
   the gradient for one flat VERY DARK GOLD tone on BOTH the number and its label — dark mode keeps the
   metallic sheen (these rules are light-scoped). :not(.locked) so paywalled ••• tiles stay muted. */
html[data-theme="light"] .mhm.ins:not(.locked) .mhm-num,html[data-theme="light"] .ex-card .mhm.ins.xtreme:not(.locked) .mhm-num{background:none;color:#4f3e0e;-webkit-text-fill-color:#4f3e0e;text-shadow:none}
html[data-theme="light"] .mhm.ins:not(.locked) .mhm-nm-i,html[data-theme="light"] .ex-card .mhm.ins.xtreme:not(.locked) .mhm-nm-i{color:#4f3e0e}
@media (prefers-reduced-motion:reduce){.ex-card .mhm.ins.xtreme .mhm-num{animation:none}.mhm.ins .mhm-nm.ins-scroll .mhm-nm-i{animation:none}}
.e-mobins{width:100%}
@media(min-width:768px){.e-mobins{display:none}}
/* B9-15: mobile insight strip = a COMPACT auto-scrolling sneak-preview (Matt) — shrink the tiles so the
   card keeps its original mobile shape; JS (IPW.eMobInsScroll) gently ping-pong-scrolls it. .e-mobins is
   mobile-only so these bite only on the mobile face; scroll-snap off so the drift is smooth. */
.e-mobins .mh-markets{scroll-snap-type:none;margin:0;gap:6px;padding:2px 0 4px}
.e-mobins .mhm,.e-mobins .mhm.ins{width:118px;min-height:60px;padding:9px 6px 9px}
.e-mobins .mhm.ins .mhm-num{font-size:21px}
.ex-card .e-mobins .mhm.ins.xtreme:not(.locked) .mhm-num{font-size:23px;line-height:1;letter-spacing:-.5px}
.e-mobins .mhm.ins .mhm-nm-i{font-size:10.5px}
.e-mobins .mhm.ins .mhm-nm{max-height:2.2em;line-height:1.08}
.e-mobins .mhm.ins .mkt-side img,.e-mobins .mhm.ins .mkt-side .noimg{width:13px;height:13px}
.e-mobins .mhm.ins .mkt-side{top:5px;left:5px}
.e-mobins .mhm.ins .mhm-r.xt{font-size:10px;top:4px;right:6px}
.e-mobins .mhm.ins:hover{transform:none;box-shadow:none}
/* soft right-edge fade hints there's more to scroll */
.e-mobins .mh-markets{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
/* B9-15b: on the COLLAPSED mobile card the insight strip sits to the RIGHT of the compact team rows
   (Matt — mirrors the desktop head) instead of stacking beneath them. Expanded keeps the stacked layout. */
.ex-card.va-card.dx-closed .e-mobtop{display:flex;align-items:center;gap:8px}
.ex-card.va-card.dx-closed .e-mobtop .e-mobrows{flex:0 0 45%;max-width:45%;min-width:0}
.ex-card.va-card.dx-closed .e-mobtop .e-mobins{flex:1 1 0;min-width:0;width:auto}
.ex-card.va-card.dx-closed .e-mobtop .va-teams{padding:12px 4px 12px 10px;gap:10px}
.ex-card.va-card:not(.dx-closed) .e-mobtop{display:block}
/* B9-4-adjacent (Matt): folded corner triangle on the card — GREEN with a fast-moving gradient when a
   direct match link exists (clickable), PURPLE (static) when it doesn't. 20px (halved), no glow. */
.ex-card > .bk-slot.bk-cornerslot{position:absolute;top:0;right:0;width:20px;height:20px;z-index:6;pointer-events:none}
.bk-tri{position:absolute;inset:0;clip-path:polygon(100% 0,0 0,100% 100%);pointer-events:auto;text-decoration:none}
.bk-tri .bk-tri-i{display:none}   /* too small for a glyph at 20px — colour carries the meaning, tooltip the detail */
.bk-tri-go{cursor:pointer;background:linear-gradient(120deg,#2fa968,#5fcf94,#8ff0bd,#3ec08a,#2fa968);background-size:300% 300%;animation:bkTriMove 1s linear infinite}
.bk-tri-no{cursor:help;background:linear-gradient(225deg,var(--purple,#7c1fd6),rgba(124,31,214,.55))}
@keyframes bkTriMove{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media (prefers-reduced-motion:reduce){.bk-tri-go{animation:none;background:linear-gradient(225deg,#5fcf94,#2fa968)}}
.stcard{--st-w:258px;--st-h:214px;--st-big:53px;
  position:relative;overflow:hidden;flex:0 0 auto;width:var(--st-w);height:var(--st-h);box-sizing:border-box;
  margin-right:10px;padding:18px;border:1px solid var(--border);
  background:linear-gradient(150deg,rgba(124,128,238,.10),rgba(124,128,238,.03));display:flex;flex-direction:column}
.stcard .rankw{position:absolute;top:-24px;right:-5px;font:800 110px/1 var(--head);font-feature-settings:"ss03";color:rgba(150,154,240,.07);pointer-events:none}
.stcard .srk{font:800 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
/* B7-41 item 12a: which team the signal is for — a small labelled chip under the rank. */
.stcard .stteam{display:flex;align-items:center;gap:5px;margin-top:6px;font:600 10.5px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stcard .stteam img{width:14px;height:14px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.stcard .stteam .stteam-both img:nth-child(2){margin-left:-5px}
.stcard .stteam .stteam-both{display:inline-flex;flex:0 0 auto}
.stcard .big{font:800 var(--st-big)/1 var(--head);font-feature-settings:"ss03";color:var(--hi);margin-top:7px;letter-spacing:-1.5px}
.stcard .big .u{font-size:19px;color:var(--muted);font-weight:600;margin-left:7px;letter-spacing:0}
.stcard .slab{font:600 14px/1.3 var(--body);color:var(--text-2);margin-top:9px;min-height:34px}
.stcard .ssub{font:400 12px/1.35 var(--body);color:var(--muted);margin-top:4px}
.cx-panel[data-epanel="insights"] .stcard,.cx-panel[data-epanel="coldins"] .stcard{--st-w:310px;--st-h:214px}
.cx-panel[data-epanel="insights"] .stcard .slab,.cx-panel[data-epanel="coldins"] .stcard .slab{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.cx-panel[data-epanel="insights"] .stcard .ssub,.cx-panel[data-epanel="coldins"] .stcard .ssub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stcard .meter{position:relative;height:9px;background:var(--inset);border:1px solid var(--border);margin-top:11px;overflow:hidden}
.stcard .meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#5a60d2,#aab0f4);box-shadow:0 0 12px rgba(150,154,240,.5);transition:width 1s cubic-bezier(.2,.8,.2,1)}
.stcard .meter .shine{position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:meterShine 3.4s ease-in-out infinite}
.stcard .xflag{position:absolute;top:16px;right:16px;font:800 11px var(--body);letter-spacing:.04em;text-transform:uppercase;color:#161a26;background:var(--hi);padding:3px 8px;z-index:2}
.stcard.xtreme{border-color:rgba(232,184,75,.55);background:linear-gradient(150deg,rgba(232,184,75,.15),rgba(232,184,75,.03))}
.stcard.xtreme .big{color:#e8c66b;animation:pulseGlow 2.6s ease-in-out infinite}
.stcard.xtreme .xflag{background:#e8b84b;color:#3a2c0a}
/* Matt B7-review #15: a WON signal tile must be GREEN THROUGHOUT and a LOST tile RED THROUGHOUT — no
   faint/washed element. Recolour every part: the big numeral, the tile outline + a faint tinted fill,
   the WON/LOST badge (.xflag), the seeker gauge/meter fill, and the big top-right watermark number
   (.rankw). Uses the platform --good / --loss. Overrides the neutral xtreme styling when also won/lost. */
.stcard.won{border-color:var(--good);background:linear-gradient(150deg,rgba(95,207,148,.14),rgba(95,207,148,.03))}
.stcard.won .big{color:var(--good)}
.stcard.won .srk,.stcard.won .slab{color:var(--good)}
.stcard.won .xflag{background:var(--good);color:#0b1f14}
.stcard.won .meter i{background:linear-gradient(90deg,#3ea877,var(--good));box-shadow:0 0 12px rgba(95,207,148,.5)}
.stcard.won .rankw{color:rgba(95,207,148,.16)}
.stcard.lost{border-color:var(--loss);background:linear-gradient(150deg,rgba(224,106,106,.13),rgba(224,106,106,.03))}
.stcard.lost .big{color:var(--loss)}
.stcard.lost .srk,.stcard.lost .slab{color:var(--loss)}
.stcard.lost .xflag{background:var(--loss);color:#2a0c0c}
.stcard.lost .meter i{background:linear-gradient(90deg,#b84f4f,var(--loss));box-shadow:0 0 12px rgba(224,106,106,.45)}
.stcard.lost .rankw{color:rgba(224,106,106,.15)}
.stcard .headrow{display:flex;align-items:center;gap:9px}
.stcard .headrow img{width:27px;height:27px;border-radius:50%;background:var(--card-2);object-fit:cover}
@keyframes meterShine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(360%)}}
@keyframes pulseGlow{0%,100%{opacity:1}50%{opacity:.72}}
@media (prefers-reduced-motion:reduce){.stcard .meter .shine{animation:none;opacity:0}.stcard.xtreme .big{animation:none}}
.stcard.player .face{width:42px;height:42px;border-radius:50%;background:var(--card-2);object-fit:cover;margin-bottom:8px}
.stcard.player .pnm{font:600 15px/1.25 var(--body);color:var(--text-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stcard.player .pcl{font:400 12px/1.2 var(--body);color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:3px}
/* Matt mobile-polish #7: Info tiles were hard to read (label on --muted-2 was too dim above the tint,
   value on --text-2 was washed). Style them consistently with the SIGNALS tiles + firm the contrast so
   they read clearly in BOTH dark and light: label → --text-2 (like a signal .srk but stronger), value →
   --text / --ink (the tile's headline, matching how a signal's numeral is the strongest element). The
   .info shell already restores the square brand corner + full opacity above; this only firms text. */
.stcard.info .ik{font:800 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--text-2)}
.stcard.info .iv{font:700 25px/1.15 var(--head);font-feature-settings:"ss03";color:var(--text);margin-top:10px}
.stcard.info .iv.pair{font-size:18px;line-height:1.4;color:var(--ink)}
.stcard.info .iv .l{color:var(--muted);font-size:12px;font-weight:600;margin-left:7px}
/* Matt B7-review #3: the Info-panel tiles carry the class "stcard info", and the global
   theme.css .info (the round tooltip 'i' affordance) sets border-radius:50%. Since .stcard
   sets no radius, the 50% wins and the 196x116 tiles render as ELLIPSES. Restore the square
   IPW-brand corner with a higher-specificity override (0,2,0 beats theme.css .info at 0,1,0).
   Do NOT touch theme.css .info — it is the shared site-wide tooltip affordance.
   B7-review (opacity): the same .info collision also dims the whole tile to opacity:.6
   (theme.css:274). The radius half was fixed here; restore full opacity too so the Info
   and Live-stats stcard.info tiles are legible above the tint. Specificity 0,2,0 wins. */
.stcard.info{border-radius:var(--r);opacity:1}
.dxp-group{display:flex;flex-direction:column;flex:0 0 auto;margin-right:14px;justify-content:center;gap:6px}
.dxp-hd{display:flex;align-items:center;gap:6px;font:600 9.5px var(--head);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dxp-row{display:flex;align-items:stretch}
.dxa-note{font:400 10.5px var(--body);line-height:1.45;color:var(--muted)}   /* T-200: 8.5px @2.94:1 - this is 18+/information-only copy and must be legible */

/* ---- Info panel — HORIZONTAL scroll strip (Matt B7-34: "info was showing vertically
   rather than horizontally"). INTENTIONAL delta from the lab E reference — do NOT revert
   to the wrapping grid on a future "match the lab" pass. ---- */
.einfo-grid{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;align-items:stretch;scrollbar-width:thin}
/* Matt mobile-polish #3+4+5 + #7: Info / Live-stats tiles are the compact label+value variant of the
   shell (no meter). Keep them STRICTLY uniform among themselves — one fixed width AND one fixed height,
   scaled +25% (196→245w). The fixed height (no min-height) means the "Score" pair tile can no longer be
   taller than the single-value tiles. align-items:stretch on the row is irrelevant now the height is hard. */
.einfo-grid .stcard{--st-w:245px;--st-h:150px;flex:0 0 var(--st-w);width:var(--st-w);height:var(--st-h);margin-right:0}
/* Matt B7-review #6: the Info + Historical scrollbars must match the SIGNALS panel scrollbar
   (the shared .cx-panel glass thumb). Apply the SAME webkit track/thumb/hover treatment here. */
.einfo-grid::-webkit-scrollbar,.ex-scroll::-webkit-scrollbar{height:8px}
.einfo-grid::-webkit-scrollbar-track,.ex-scroll::-webkit-scrollbar-track{background:transparent}
.einfo-grid::-webkit-scrollbar-thumb,.ex-scroll::-webkit-scrollbar-thumb{background:var(--glass-3);border:1px solid var(--border)}
.einfo-grid::-webkit-scrollbar-thumb:hover,.ex-scroll::-webkit-scrollbar-thumb:hover{background:var(--hi-soft);border-color:var(--border-hi)}
.einfo-grid,.ex-scroll,.cx-panel{scrollbar-color:var(--glass-3) transparent}

/* ---- Matt B7-review #11: collapsed-card SIGNAL tile (.mhm) state tints must FADE to
   transparency at the top AND bottom (vertical gradient, no hard edge) — matches the
   signed-off lab E (lab.css 1033-1047). Scoped to the E card's .mhm tiles so the shared
   global flash-fast/flash-slow keyframes (also used by .mc-card in the Match Centre) are
   untouched; the E card uses its own eflash-* keyframes. Reduced-motion safe. ---- */
.ex-card .mhm.won{background:linear-gradient(180deg,rgba(80,149,108,0),var(--green-bg) 26%,var(--green-bg) 74%,rgba(80,149,108,0))}
.ex-card .mhm.lost{background:linear-gradient(180deg,rgba(255,90,87,0),var(--red-bg) 26%,var(--red-bg) 74%,rgba(255,90,87,0))}
/* Matt B7-review #13: in ENDED matches the collapsed-view signal numbers were faint (won=#fff on a
   pale tint, lost=pale pink at .65 opacity). Make them READABLE — won a strong platform green, lost a
   strong red — at full opacity. Scoped to the E card's .mhm tiles. Uses the platform --good/--loss. */
.ex-card .mhm.won,.ex-card .mhm.lost{opacity:1}
.ex-card .mhm.won .mhm-num{color:var(--good)}
.ex-card .mhm.won .mhm-nm-i{color:var(--good)}
.ex-card .mhm.lost .mhm-num,.ex-card .mhm.lost .mhm-nm-i{color:var(--loss)}
.ex-card .mhm.won .mhm-r.won{background:var(--good)}
.ex-card .mhm.lost .mhm-r.lost{background:var(--loss)}
.ex-card .mhm.action{animation:eflash-fast .9s steps(1,end) infinite}
.ex-card .mhm.watch{animation:eflash-slow 2.3s ease-in-out infinite}
@keyframes eflash-fast{
  0%,49%{background:linear-gradient(180deg,rgba(255,90,87,0),var(--red-bg) 26%,var(--red-bg) 74%,rgba(255,90,87,0))}
  50%,100%{background:transparent}
}
@keyframes eflash-slow{
  0%,100%{background:transparent}
  50%{background:linear-gradient(180deg,rgba(232,184,75,0),var(--amber-bg) 26%,var(--amber-bg) 74%,rgba(232,184,75,0))}
}
@media (prefers-reduced-motion:reduce){
  .ex-card .mhm.action{animation:none;background:linear-gradient(180deg,rgba(255,90,87,0),var(--red-bg) 26%,var(--red-bg) 74%,rgba(255,90,87,0))}
  .ex-card .mhm.watch{animation:none;background:linear-gradient(180deg,rgba(232,184,75,0),var(--amber-bg) 26%,var(--amber-bg) 74%,rgba(232,184,75,0))}
}

/* ---- "Open Match Centre" — STRIKING filled gradient button (Matt B7-34: "open match
   centre not striking enough"). INTENTIONAL delta from the lab E reference — do NOT revert
   to the quiet bordered link on a future "match the lab" pass. ---- */
.e-mc{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 8px 8px;padding:12px 0;
  border:0;border-radius:var(--r);
  font:700 12px var(--head);letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:linear-gradient(90deg,#5358c8,#7c3aed 55%,#9333ea);
  box-shadow:0 4px 18px rgba(124,58,237,.35);cursor:pointer;
  transition:filter .15s,box-shadow .15s}
.e-mc:hover{filter:brightness(1.08);box-shadow:0 6px 22px rgba(124,58,237,.5)}
.e-mc .arr{font-size:15px;line-height:1}

/* ---- mobile head swap + C2 compact density ---- */
/* B7-41 item 4: +20% collapsed-card height on mobile (Matt's phone) — the mobile card is .cx-top + this
   .va-teams block (not the desktop .ex-head), so add the breathing room here too. 8/8 -> 14/11. */
.va-teams{padding:16px 10px;display:flex;flex-direction:column;gap:12px}
.va-trow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.va-trow .lft{display:flex;align-items:center;gap:6px;min-width:0}
.va-trow .nm{font:500 12px/1.2 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.va-trow .gl{font:600 12px var(--mono);color:var(--ink);flex:0 0 auto}
.e-mobx{display:flex;align-items:center;justify-content:space-between;gap:8px}
.e-mobx .nm{display:inline-block;max-width:118px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* Matt B7-review item 5: mobile "Last game" subtext ~2x bigger (8px→16px). */
/* B7-41 item 2: dial back the round-5 2x (~0.65x, 16->10.5px). */
.e-mobx .meta{font:400 10.5px var(--body);color:var(--muted)}
.ex-card.cx-c2 .cx-top{padding:7px 10px 0;position:relative;z-index:2}
/* Matt B7-review #14 + divergence fix: restore the signed-off lab-E 96px face-off band
   (the port had collapsed it with min-height:0), AND pull the head UP so its top line sits
   inline with the .cx-top tags row (reduces expanded card height, "ex-head up"). The negative
   top margin overlaps the short tags row; .cx-top keeps a higher z-index so its chips stay on
   top. Left side (teams) rises into the empty left of the tags row — nothing overlaps. */
/* B7-41 item 4: +20% collapsed-card height for breathing room (96->115px). */
.ex-card.cx-c2 .ex-head{min-height:115px;padding:2px 12px;margin-top:-26px}
.ex-card.cx-c2 .mh-team{gap:6px}
/* C2 compact sizing — ported 1:1 from the signed-off lab E so the collapsed card is
   dense (crest 26 / orb 32 / team-name 12.5 / vs 12.5). These were dropped in the port,
   which is why the real cards rendered oversized vs the lab. */
/* Matt: team logos too small on ALL card types incl. upcoming — bump 26→34 and size the fallback
   initials badge too (the .e-crest span was unsized → tiny on logo-less upcoming/club teams). */
.ex-card.cx-c2 .mh-team img,.ex-card.cx-c2 .mh-team .e-crest{width:34px;height:34px;padding:3px}
.ex-card.cx-c2 .mh-team .e-crest.team-fallback{padding:0;font-size:13px}
.ex-card.cx-c2 .mh-team .tn{font-size:12.5px;max-width:104px}
/* Matt B7-review #4: 12.5px reads fine on mobile but is too small on desktop. Bump the
   E-card team name on desktop to a clearly-readable size (responsive via clamp), widen the
   max-width, and keep it single-line with ellipsis. Mobile (<768px) keeps the compact 12.5px. */
@media(min-width:768px){
  .ex-card.cx-c2 .mh-team .tn{font-size:clamp(15px,1.05vw,16.5px);max-width:170px}
}
.ex-card.cx-c2 .ipw-orb{width:36px;height:36px}
/* Matt B7-review #16: orb shows the NUMBER only (no "IPW" label) — bigger, centred. */
.ex-card.cx-c2 .ipw-orb.orb-num b{font-size:14px;line-height:1}
.ex-card .ipw-orb.orb-num{display:inline-flex;align-items:center;justify-content:center;cursor:help}
.ex-card .ipw-orb.orb-num i{display:none}
.ex-card.cx-c2 .ipw-orb i{font-size:5.5px}
/* orb finish — the signed-off lab E orb is a FLAT glass circle (thin border, mono number)
   with a solid green ring + soft glow on the leader, NOT the dashboard's gradient/spectrum
   ring primitive. Re-skin scoped to the E card only so the shared global .ipw-orb (used by
   other match rows) is untouched. Values are 1:1 from lab.css:419-427. */
.ex-card .ipw-orb{background:var(--glass-2);border:1px solid var(--line2)}
.ex-card .ipw-orb b{font-family:var(--mono);font-weight:700;font-feature-settings:normal;color:var(--text-2)}
.ex-card .ipw-orb i{text-transform:none;margin-top:0}
.ex-card .ipw-orb.lead{background:var(--glass-2);border-color:var(--green);box-shadow:0 0 14px rgba(80,149,108,.25)}
.ex-card .ipw-orb.lead b{color:var(--green-tx)}
.ex-card.cx-c2 .mh-vs{padding:5px 9px}
.ex-card.cx-c2 .mh-vs b{font-size:12.5px}
/* the E score/"v" chip is MONOSPACE in the sign-off (lab.css:432); the shared global
   .mh-vs b inherits body/Inter, so scope mono to the E card only. */
.ex-card .mh-vs b{font-family:var(--mono)}
/* Matt R8: the old compact top-row predchip override is gone — the chip lives in .cx-tabs (13px, +30%). */
.ex-card.cx-c2 .sqbtn{width:26px;height:26px}
/* Matt R8: ALL card tags (FT / live / minute / opportunities / countdown) are ONE consistent size —
   the .cd countdown tag's 11px / 4x8 (they had drifted apart across rounds). */
.ex-card.cx-c2 .e-tag{font-size:11px;padding:4px 8px}
/* Matt B7-review item 2: the previous round scaled LIVE / minute / OPPORTUNITIES pills ~1.5x, which
   overshot. Reduce to ~0.5x that (≈uniform small pills), fold FT (.ft) into the SAME size as the
   opportunities pill (.opps.op-green) so every pill in the collapsed .cx-top row is small + uniform.
   Row stays nowrap + align-items:center so they keep aligned. 11px→5.5px, 5/10→2.5px/6px. */
/* Matt R8: the per-variant pill sizes are gone — every tag inherits the uniform 11px/4x8 above. */
.ex-card.cx-c2 .e-tag.live .dot{width:6.5px;height:6.5px}

/* ---- marquee for long team/market/info names ---- */
@keyframes eNmScroll{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(var(--mq,0))}}
.mh-team .tn.mq .tn-i,.exh-teams .t .nm.mq,.e-mobx .nm.mq{animation:eNmScroll 3.2s linear infinite alternate}
@media (prefers-reduced-motion:reduce){.mh-team .tn.mq .tn-i,.exh-teams .t .nm.mq,.e-mobx .nm.mq{animation:none}}

/* light-mode: signal-strip won/lost numerals need dark text on the tint (dashboard already handles .mhm) */
html[data-theme="light"] .stcard .big{color:var(--hi-strong)}
/* Matt mobile-polish #8: the signal-tile state badges (EXTREME / WATCH / BET, and WON/LOST/TOP/LOCKED)
   had poor-contrast dark text on their coloured/gold badge in LIGHT mode. Force the badge TEXT white so it
   reads on the saturated fill (--hi indigo for BET/WATCH, gold for EXTREME, green/red for WON/LOST). Dark
   mode is unchanged (this rule is scoped to html[data-theme=light]). */
html[data-theme="light"] .stcard .xflag{color:#fff}

/* ---- LIGHT MODE reconciliation for the Variant-E card (Matt: fix the clashes) ----
   The E chrome hardcoded the dark-mode light-gold (#e8c66a/#e8c66b) which is unreadable on
   light surfaces. Re-tone every gold accent to the darker light-mode gold (--amber-tx = #a9811f,
   matching the signed-off lab nav chip), and firm up the three card states + hairlines so every
   card/nav/panel/signal stays readable on white. */
html[data-theme="light"] .e-tag.opps.op-gold{color:var(--amber-tx);border-color:rgba(169,129,31,.5);background:rgba(232,184,75,.16)}
html[data-theme="light"] .eop-st.pend{color:var(--amber-tx)}
html[data-theme="light"] .stcard.xtreme .big{color:var(--amber-tx)}
html[data-theme="light"] .stcard.xtreme{border-color:rgba(169,129,31,.5);background:linear-gradient(150deg,rgba(232,184,75,.18),rgba(232,184,75,.05))}
html[data-theme="light"] .stcard.xtreme .xflag{background:#c79a2a;color:#fff}
/* the predictability bolt: keep the indigo, but its glow needs a darker fill in light */
html[data-theme="light"] .predchip{color:var(--hi-strong)}
html[data-theme="light"] .predchip svg{fill:var(--hi-strong)}
/* Matt B7-review item 12: keep the green/amber/red predictability scheme in LIGHT mode too — the generic
   light-mode .predchip rule above (indigo) would otherwise override the tier colours. Match specificity. */
html[data-theme="light"] .predchip.pk-hi{color:var(--green-tx)}
html[data-theme="light"] .predchip.pk-hi svg{fill:var(--green-tx)}
html[data-theme="light"] .predchip.pk-mid{color:var(--amber-tx)}
html[data-theme="light"] .predchip.pk-mid svg{fill:var(--amber-tx)}
html[data-theme="light"] .predchip.pk-lo{color:var(--red-tx)}
html[data-theme="light"] .predchip.pk-lo svg{fill:var(--red-tx)}
/* three states re-toned for light: UPCOMING indigo · LIVE teal (background underlay, no outline) · FT faint grey.
   Matt B7-review #5/#2: tint lives on ::before behind content; LIVE carries no coloured border. */
html[data-theme="light"] .ex-card.st-up::before{background:rgba(124,128,238,.10)}
html[data-theme="light"] .ex-card.st-live::before{background:linear-gradient(160deg,rgba(13,148,136,.13),rgba(13,148,136,.04) 42%,rgba(13,148,136,0) 72%)}
html[data-theme="light"] .ex-card.st-fin::before{background:rgba(22,24,45,.03)}
html[data-theme="light"] .ex-card.st-fin{border-color:rgba(22,24,45,.10)}
/* LIVE / minute pills read on light too */
html[data-theme="light"] .e-tag.live{color:var(--red-tx);border-color:rgba(214,69,69,.4);background:rgba(214,69,69,.12)}
html[data-theme="light"] .e-tag.min{color:var(--orange-tx);border-color:rgba(200,80,31,.4);background:rgba(235,104,71,.12)}
/* the big rank watermark on stcards is near-invisible white on light — darken to indigo */
html[data-theme="light"] .stcard .rankw{color:rgba(83,88,200,.10)}

@media(max-width:767px){
  .ex-head{min-height:0}
  .exr-list{flex-direction:column}
  /* keep the strict-uniform, +25% tiles proportional on mobile: re-point the width/height vars (base
     width/height read from them) so every panel's tiles stay the same size as each other on small screens.
     Height is sized to fit the tallest panel's content (Insights, whose team-name/slab wrap onto more lines
     at the narrower mobile width) so nothing clips — every tile still shares the one fixed height. */
  .stcard{--st-w:186px;--st-h:228px;--st-big:50px}
  .cx-panel[data-epanel="insights"] .stcard,.cx-panel[data-epanel="coldins"] .stcard{--st-w:252px;--st-h:228px}
  .einfo-grid .stcard{--st-w:210px;--st-h:146px}
}

/* Matt R9: auto-gen accas period chips (Today live · future = premium teaser) + record-defs note + value/surebet bits */
.acca-period{display:flex;gap:6px;margin:2px 0 4px}
.ap-chip{font:600 13px var(--body);padding:5px 11px;border:1px solid var(--line2);color:var(--muted);cursor:default}
.ap-chip.on{color:var(--ink);border-color:var(--purple-12);background:var(--purple-08)}
.ap-chip.lk{cursor:pointer;opacity:.8}
.ap-chip.soon{color:var(--text-2);border-color:var(--line2);background:var(--glass-2)}
.acca-defs{font:400 10.5px/1.5 var(--body);color:var(--muted);margin:0 0 6px}
.acca-defs b{color:var(--text-2)}
.tk-since{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0;margin-left:6px}
.val-bk{display:block;font-size:9px;color:var(--muted);max-width:86px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-leg{display:inline-block;margin-right:8px;color:var(--muted)}
.sb-leg b{color:var(--text-2)}
.sb-leg small{color:var(--muted-2)}
.sb-lock{color:var(--green-tx);font-weight:700}
.val-leg.sv-won .sv-w{color:var(--green-tx)}
.val-leg.sv-lost .sv-l{color:var(--red-tx)}

/* Matt R10: receipts + stake-maths + coming-soon bits */
.rcpt-row{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.rcpt-badge{font:600 10.5px var(--body);color:var(--green-tx);border:1px solid rgba(80,149,108,.5);background:var(--green-bg);padding:3px 9px;cursor:help;white-space:nowrap}
.rcpt-badge.bad{color:var(--amber-tx);border-color:rgba(232,184,75,.5);background:var(--amber-bg,rgba(232,184,75,.12))}
.rcpt-open{margin-left:auto;font:600 13px var(--body);color:var(--accent-ink);background:transparent;border:1px solid var(--purple-12);padding:5px 11px;cursor:pointer}
.rcpt-open:hover{background:var(--purple-08)}
.rcpt-modal{max-height:82vh;overflow-y:auto;text-align:left}
.rcpt-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}
.rcpt-sub{font:400 11px var(--body);color:var(--muted)}
.rcpt-singles{font:400 11.5px/1.5 var(--body);color:var(--muted);border:1px solid var(--line);background:var(--glass);padding:8px 12px;margin-bottom:10px}
.rcpt-singles b{color:var(--text-2)}
.rcpt-list{display:flex;flex-direction:column;gap:10px}
.rcpt-list .acca-card{margin:0}
.lg-ev{font:600 10.5px var(--mono);color:var(--text-2);white-space:nowrap;cursor:help}
.val-stake{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:2px 0 8px;padding:7px 10px;border:1px solid var(--line);background:var(--glass)}
.val-stake .vs-lbl{font:600 10.5px var(--body);color:var(--muted);white-space:nowrap}
.val-stake input[type=range]{flex:1 1 90px;min-width:70px;accent-color:var(--accent-ink)}
.val-stake .vs-amt{font:700 12px var(--mono);color:var(--text)}
.val-stake .vs-note{flex:1 1 100%;font:400 9.5px var(--body);color:var(--muted-2)}
.sb-stakeamt{font:600 10px var(--mono);color:var(--green-tx);font-style:normal;margin-left:2px}
.sb-ret{display:block;font:600 9.5px var(--mono);color:var(--green-tx)}
.val-ev{display:block;font-weight:600;color:var(--green-tx)}
.e-mc{font:inherit;cursor:pointer}

/* B7-12g: acca type filter chips */
.acca-tierf{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}
.acca-tierf .ap-chip{cursor:pointer}

/* B7-16: real-time acca arrival + settle animations (reduced-motion safe) */
.acca-arrived{animation:accaArrive .7s cubic-bezier(.2,.8,.2,1)}
@keyframes accaArrive{0%{opacity:0;transform:translateY(-10px);box-shadow:0 0 0 0 rgba(124,128,238,0)}55%{box-shadow:0 0 22px 2px rgba(124,128,238,.45)}100%{opacity:1;transform:none;box-shadow:0 0 0 0 rgba(124,128,238,0)}}
.acca-newb{font:800 8.5px var(--body);letter-spacing:.08em;color:#fff;background:var(--accent-fill);padding:2px 6px;margin-right:7px;animation:accaNewFade 6s ease forwards}
@keyframes accaNewFade{0%,70%{opacity:1}100%{opacity:0}}
.acca-flip-won{animation:accaFlipW 1.6s ease}
.acca-flip-lost{animation:accaFlipL 1.6s ease}
@keyframes accaFlipW{0%{box-shadow:0 0 0 0 rgba(80,149,108,0)}30%{box-shadow:0 0 26px 3px rgba(80,149,108,.55)}100%{box-shadow:0 0 0 0 rgba(80,149,108,0)}}
@keyframes accaFlipL{0%{box-shadow:0 0 0 0 rgba(255,90,87,0)}30%{box-shadow:0 0 26px 3px rgba(255,90,87,.5)}100%{box-shadow:0 0 0 0 rgba(255,90,87,0)}}
.acca-legmove{animation:accaLeg .9s ease}
@keyframes accaLeg{0%{box-shadow:0 0 0 0 rgba(124,128,238,0)}40%{box-shadow:0 0 14px 1px rgba(124,128,238,.35)}100%{box-shadow:0 0 0 0 rgba(124,128,238,0)}}
@media (prefers-reduced-motion:reduce){.acca-arrived,.acca-flip-won,.acca-flip-lost,.acca-legmove{animation:none}.acca-newb{animation:none}}
/* B7-8: club divider in Opportunity Discovery */
.feed-divider-club{color:var(--muted);margin-top:10px}
/* BE15: wallet chip */
.ap-wallet{margin-left:auto;font:700 10.5px var(--mono);color:var(--green-tx);border:1px solid rgba(80,149,108,.45);background:var(--green-bg);padding:5px 10px;cursor:help}

/* Matt R15: LHS rhythm - equal vertical margins on the section building blocks */
.acca-divider{margin:14px 0 10px}
.opp-controls,.opp-risk{margin-bottom:10px}
.acca-period,.acca-tierf,.rcpt-row{margin-bottom:10px}
/* Matt R15: live minute pill phase colours (early->end) */
.e-tag.min.tm-early{color:var(--green-tx);border-color:rgba(80,149,108,.5);background:var(--green-bg)}
.e-tag.min.tm-mid{color:var(--amber-tx);border-color:rgba(232,184,75,.5);background:var(--amber-bg,rgba(232,184,75,.12))}
.e-tag.min.tm-late{color:var(--orange-tx,#e8926a);border-color:rgba(235,104,71,.5);background:rgba(235,104,71,.12)}
.e-tag.min.tm-end{color:var(--red-tx);border-color:rgba(255,90,87,.55);background:var(--red-bg)}
/* Matt R15: club-feed loading row */
.club-loading{display:flex;align-items:center;gap:9px;padding:13px 16px;border:1px dashed var(--line2);color:var(--muted);font:500 12px var(--body)}
.club-loading-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.4s infinite}
/* Matt R18: the REAL slip bar - full-width water-wave (Geekboots rotating-square technique, signed off
   in slip-lab). Two huge rounded-squares spin slowly; their curved edges make a continuously rolling
   waterline. The bar slides up smoothly from below the screen edge - the bottom never detaches. */
.slip-pill{position:fixed;left:0;right:0;bottom:0;z-index:70;transform:translateY(103%);
  display:flex;align-items:flex-end;justify-content:center;gap:12px;cursor:pointer;border:0;
  padding:0 20px calc(14px + env(safe-area-inset-bottom));width:100%;height:86px;
  background:transparent;color:#fff;font:800 14px var(--body);overflow:hidden;
  transition:transform .8s cubic-bezier(.22,.85,.3,1)}
.slip-pill.has{transform:translateY(0)}
.slip-pill .wv{position:absolute;left:50%;top:22px;width:170vw;height:170vw;margin-left:-85vw;
  border-radius:49.2%;background:linear-gradient(125deg,#1c0836,#3b1178 38%,#4c1d95 62%,#241a63);
  animation:wvSpin 11s linear infinite;box-shadow:0 -8px 34px -6px rgba(76,29,149,.55)}
.slip-pill .wv2{top:16px;border-radius:49.55%;opacity:.5;background:linear-gradient(125deg,#31106b,#5b21b6 50%,#312e81);
  animation-duration:17s;animation-direction:reverse;box-shadow:none}
@keyframes wvSpin{to{transform:rotate(360deg)}}
.slip-pill>*:not(.wv):not(.wv2){position:relative;z-index:2}
.slip-pill .sb-txt{display:inline-flex;align-items:center;gap:7px}
.slip-pill .hd-cnt{position:static;display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;border-radius:999px;background:rgba(255,255,255,.22);color:#fff;font:800 12px var(--mono);padding:0 6px}
.slip-pill .sb-view{font-weight:600;color:rgba(255,255,255,.78)}
.slip-pill.flash .wv{animation:wvSpin 11s linear infinite, wvSurge .9s ease}
@keyframes wvSurge{0%,100%{top:22px}45%{top:8px}}
@media (prefers-reduced-motion:reduce){.slip-pill .wv,.slip-pill .wv2{animation:none}.slip-pill{transition:none}}
/* the sheet: full-width, 60vh, glassy - slides up; scrim behind (driven by the panel state via :has) */
.slipdock-panel{max-height:60vh;height:60vh;width:100%;border-radius:0;border:0;border-top:1px solid rgba(124,128,238,.35);
  margin:0 auto;
  background:rgba(20,21,34,.72);backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2);
  box-shadow:0 -30px 80px -20px rgba(0,0,0,.85);animation:sheetUp .42s cubic-bezier(.2,.9,.25,1)}
@keyframes sheetUp{from{transform:translateY(24%);opacity:.6}to{transform:none;opacity:1}}
.sd-grab{width:44px;height:4px;border-radius:4px;background:rgba(255,255,255,.25);margin:2px auto 10px}
.slip-scrim{position:fixed;inset:0;z-index:71;background:rgba(5,6,10,.55);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
body:has(#slipPanel:not(.hidden)) .slip-scrim{opacity:1;pointer-events:auto}
/* LIGHT MODE: the sheet flips to light glass (the water bar stays the dark brand accent) */
html[data-theme="light"] .slipdock-panel{background:rgba(250,250,255,.82);border-top-color:rgba(83,88,200,.35);box-shadow:0 -30px 80px -24px rgba(70,78,150,.45)}
html[data-theme="light"] .sd-grab{background:rgba(22,24,45,.28)}
html[data-theme="light"] .slip-scrim{background:rgba(40,44,70,.35)}
/* Matt R19: DESKTOP sheet is compact - a centred column, not full-bleed */
@media(min-width:900px){
  .slipdock-panel{max-width:460px;border:1px solid rgba(124,128,238,.35);border-bottom:0}
}
@media (prefers-reduced-motion:reduce){.slipdock-panel{animation:none}.slip-scrim{transition:none}}

/* Matt R16: board hold skeleton + one-by-one reveal */
.card-skel{border:1px solid var(--line);background:var(--glass);padding:22px 16px;margin-bottom:12px;position:relative;overflow:hidden}
.card-skel span{display:block;height:12px;background:rgba(255,255,255,.06);margin-bottom:10px;max-width:70%}
.card-skel span.w60{max-width:44%;margin-bottom:0}
.card-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(100deg,transparent 30%,rgba(170,176,244,.08) 50%,transparent 70%);animation:skelSweep 1.3s infinite}
@keyframes skelSweep{to{transform:translateX(100%)}}
.board-reveal .ex-card,.board-reveal .comp-toggle{opacity:0;animation:cardIn .5s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--ri,0ms)}
@keyframes cardIn{0%{opacity:0;transform:translateY(26px) scale(.985)}55%{opacity:1;transform:translateY(-8px) scale(1.006)}78%{transform:translateY(3px) scale(.998)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.board-reveal .ex-card,.board-reveal .comp-toggle{animation:none;opacity:1}.card-skel::after{animation:none}}

/* Matt R17 additions */
/* graded result tints on collapsed dropdowns (opp discovery + settled acca cards) */
.opp-match.done.net-win>.opp-mh{background:linear-gradient(100deg,rgba(80,149,108,.16),rgba(80,149,108,.04))}
.opp-match.done.net-loss>.opp-mh{background:linear-gradient(100deg,rgba(255,90,87,.14),rgba(255,90,87,.04))}
.acca-card.graded.won>.acca-h{background:linear-gradient(100deg,rgba(80,149,108,.16),rgba(80,149,108,.03))}
.acca-card.graded.lost>.acca-h{background:linear-gradient(100deg,rgba(255,90,87,.14),rgba(255,90,87,.03))}
/* settled slip dropdown: the model-chance line readable + aligned */
.acca-card.graded .acca-ret{display:flex;align-items:center;justify-content:flex-start;padding:4px 0}
.acca-card.graded .acca-ret .chance{font:600 13px var(--body);color:var(--text-2)}
/* type chips: selected colour = the tier's traditional colour */
.acca-tierf [data-tf="banker"].on{background:var(--green-bg);color:var(--green-tx);border-color:rgba(80,149,108,.55)}
.acca-tierf [data-tf="balanced"].on{background:var(--blue-bg,rgba(77,91,219,.14));color:var(--blue-tx);border-color:rgba(77,91,219,.5)}
.acca-tierf [data-tf="strong"].on{background:var(--purple-08);color:#cfc9ff;border-color:var(--purple-12)}
.acca-tierf [data-tf="bold"].on{background:var(--amber-bg,rgba(232,184,75,.14));color:var(--amber-tx);border-color:rgba(232,184,75,.5)}
.acca-tierf [data-tf="long-shot"].on{background:var(--red-bg);color:var(--red-tx);border-color:rgba(255,90,87,.5)}
/* WINNING rows keep an add button */
.sug-winrow{display:inline-flex;align-items:center;gap:7px}
/* navigate-to-card flash */
.mc-flash{animation:mcFlash 1.5s ease}
@keyframes mcFlash{0%{box-shadow:0 0 0 0 rgba(124,128,238,0)}30%{box-shadow:0 0 26px 4px rgba(124,128,238,.55)}100%{box-shadow:0 0 0 0 rgba(124,128,238,0)}}
/* mobile heading rhythm + alignment (Matt R17): Matches margins +30%; all four section headings share
   one left edge (the panels' headings carry 2px pad - give the centre-column headings the same). */
@media(max-width:767px){
  .matches-head{margin:0.82rem 0}
  #wcStatsSec>.sec-title,.matches-head{padding-left:2px}
  #panel-opps.panel-openhead .panel-h{padding-bottom:0.74rem}
  .panel-openhead .panel-h{padding-bottom:0.62rem}   /* +20% air under Accas Generated */
  .comp-toggle{padding:16px 2px;margin:9px 0;font-size:14.5px;line-height:1.25}
  .comp-toggle .comp-nm{white-space:normal;overflow:visible}
  .comp-toggle .comp-nm .comp-nm-i{white-space:normal}
  .comp-toggle .comp-info{display:block;margin-top:3px}
}
/* mobile historical stats: frozen identity column - crest only (names went off-screen when scrolling) */
@media(max-width:767px){
  .exh-teams{position:sticky;left:0;z-index:2;background:var(--card)}
  .exh-teams .t .nm{display:none}
  .exh-teams .t{padding:0 6px}
}
@media (prefers-reduced-motion:reduce){.mc-flash{animation:none}}

/* B7-11: profile chip = avatar + ring only (crown + balance off the chip; name stays in the drawer) */
.ipw-nav > .ipw-acct .ipw-acct-bal,.ipw-nav > .ipw-acct .ipw-lux,.ipw-nav > .ipw-acct .ipw-acct-name{display:none}
.ipw-nav > .ipw-acct{padding:4px;border-radius:999px}
.ipw-nav > .ipw-acct .ipw-av{box-shadow:0 0 0 2px var(--purple),0 0 12px rgba(124,128,238,.45)}
.ipw-nav > .ipw-acct .ipw-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ipw-nav > .ipw-acct.guest-login{padding:7px 13px;border-radius:999px}
.ipw-nav > .ipw-acct.guest-login .ipw-acct-name{display:inline}
.ipw-nav > .ipw-acct.guest-login .ipw-av,.ipw-nav > .ipw-acct.guest-login .ipw-acct-bal,.ipw-nav > .ipw-acct.guest-login .ipw-lux{display:none}
/* the hover panel */
.acct-pop{position:fixed;z-index:3000;width:min(360px,calc(100vw - 20px));max-height:70vh;overflow-y:auto;
  background:linear-gradient(155deg,rgba(25,27,42,.92),rgba(14,15,24,.84));backdrop-filter:blur(26px) saturate(155%);-webkit-backdrop-filter:blur(26px) saturate(155%);
  border:0;box-shadow:0 26px 80px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
  padding:14px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s,transform .18s}
.acct-pop.on{opacity:1;pointer-events:auto;transform:none}
.ipw-nav > .acct-pop{top:58px;right:18px}
/* hover-reveal only on true hover devices — on touch the tap must reach the profile button's click (B9-11) */
@media (hover:hover) and (pointer:fine){
.ipw-nav > .ipw-acct:hover + .acct-pop,
.ipw-nav > .ipw-acct:hover ~ .acct-pop,
.ipw-nav > .ipw-acct:focus-visible + .acct-pop,
.ipw-nav > .ipw-acct:focus-visible ~ .acct-pop,
.ipw-nav:has(> .ipw-acct:hover) > .acct-pop,
.ipw-nav:has(> .ipw-acct:focus-visible) > .acct-pop,
.ipw-nav > .acct-pop:hover,
.ipw-nav > .acct-pop:focus-within{opacity:1;pointer-events:auto;transform:none}
}
.ap2-bal{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ap2-bal span{font:500 11px var(--body);color:var(--muted)}
.ap2-bal b{font:700 17px var(--head);color:var(--text)}
.ap2-bal small{font:500 10.5px var(--body);color:var(--amber-tx)}
.ap2-h{font:700 10.5px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:11px 0 6px}
.ap2-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;border-top:1px solid var(--line);
  padding:9px 2px;cursor:pointer;color:inherit;font:inherit}
.ap2-row:hover{background:var(--purple-08)}
.ap2-nm{flex:1 1 auto;min-width:0;font:600 12.5px var(--body);color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap2-nm small{display:block;font:400 10.5px var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap2-num{font:600 11px var(--mono);color:var(--muted);white-space:nowrap}
.ap2-num i{font-style:normal;color:var(--muted-2)}
.ap2-st{font:700 9px var(--body);letter-spacing:.05em;padding:2.5px 7px;flex:0 0 auto}
.ap2-st.open{color:var(--amber-tx);border:1px solid rgba(232,184,75,.45)}
.ap2-st.won{color:var(--green-tx);border:1px solid rgba(80,149,108,.5)}
.ap2-st.lost{color:var(--red-tx);border:1px solid rgba(255,90,87,.5)}
.ap2-live{display:inline-flex;align-items:center;gap:5px;font:600 10.5px var(--mono);color:var(--red-tx);white-space:nowrap}
.ap2-live .dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
.ap2-ft{font:600 10.5px var(--mono);color:var(--muted)}
.ap2-empty{font:400 11.5px var(--body);color:var(--muted);padding:10px 2px}
/* slip detail modal bits */
.apd-meta{font:400 11px var(--body);color:var(--muted);margin-bottom:10px}
.apd-leg{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:9px 0;font:500 12.5px var(--body)}
.apd-leg span:first-child{flex:1 1 auto;min-width:0}
.apd-leg small{display:block;color:var(--muted);font-size:10.5px}
.apd-od{font:600 11.5px var(--mono);color:var(--hi)}
.apd-w{color:var(--green-tx)}.apd-l{color:var(--red-tx)}.apd-o{color:var(--amber-tx)}
.apd-foot{display:flex;justify-content:space-between;font:700 13px var(--body);border-top:1px solid var(--line2);padding-top:10px;margin-top:4px}
html[data-theme="light"] .acct-pop{background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(247,248,255,.88));box-shadow:0 26px 70px -22px rgba(70,78,150,.42),inset 0 1px 0 rgba(255,255,255,.9)}
@media(max-width:760px){
  .acct-pop{right:10px!important;max-height:62vh}
  .ap2-row{grid-template-columns:minmax(0,1fr);align-items:start;gap:4px;padding:10px 2px}
  .ap2-nm,.ap2-nm small,.ap2-num{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .ap2-st{justify-self:start}
}
@media (prefers-reduced-motion:reduce){.acct-pop{transition:none}.ap2-live .dot{animation:none}}

/* Matt R21 batch */
/* live-stats table: uniform column width sized to the longest heading; no spill */
.cx-panel[data-epanel="livestats"] .exh-col{flex:0 0 132px;min-width:132px;max-width:132px}
.cx-panel[data-epanel="livestats"] .exh-col .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;justify-content:center}
.cx-panel[data-epanel="livestats"] .exh-col.exh-shots{flex:0 0 auto;min-width:150px;max-width:none}
/* identity column: LOGO ONLY everywhere (not just mobile) + 25% bigger crests */
.exh-teams .t .nm{display:none}
.exh-teams .t img.c18,.exh-teams .t .e-crest{width:23px;height:23px}
.exh-teams .t{padding:0 8px;justify-content:center}
/* corner squares — dark blue for clear visibility (Matt) */
.shotsq.cn{background:#1e40af}
.sq-key.cn{background:#1e40af}
/* seamless one-piece horizontal scroll on touch (heading + rows move together, no nested traps) */
.ex-scroll{-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.cx-panel{overscroll-behavior-x:contain}
@media(max-width:767px){
  .ex-body{overflow:visible}
  /* B9-8: contain only the x axis and let vertical drags chain to the page — a blanket contain +
     pan-x/pan-y on an element that cannot scroll vertically traps the touch and kills page scroll */
  .cx-panel{overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}
  .ex-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:auto}
  .exh-body{overflow:visible}
  .cx-panel[data-epanel="livestats"]{padding-bottom:12px}
  .mh-team .tn,.e-mobx .nm,.mhm-nm{overflow:hidden;contain:paint;max-width:100%}
  .bk-slot{flex-shrink:1;min-width:0}
  .bk-link{max-width:min(180px,46vw)}
}
/* R23: both premium sorts use FE-2's .premium-star look (the R21 override removed - it clashed). */

/* R22: per-slip timing detail */
.ap2-when{display:block;font:400 10px var(--body);color:var(--muted-2);margin-top:1px}
.apd-meta b{color:var(--text-2);font-weight:600}
.apd-meta i{color:var(--muted-2);font-style:normal}

/* R23b: late-arriving cards animate in */
.ex-card.card-late{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.ex-card.card-late{animation:none}}

/* Matt sign-off R25: Value picks v2 on the dashboard (WC Pass only). No left colour strips. */
.vp2-intro{font:400 12.5px/1.55 var(--body);color:var(--text-2);margin:2px 0 12px;text-align:left;padding:0 0 0 13px}
.vp2-intro b{color:var(--text)}
.vp2-match{border:1px solid var(--line2);margin-bottom:10px;background:rgba(18,19,32,.45)}
.vp2-mh{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 12px;background:linear-gradient(100deg,rgba(124,128,238,.12),rgba(124,128,238,.02));border:0;color:inherit;font:inherit;cursor:pointer;text-align:left}
.vp2-mh b{font:600 13.5px var(--head)}
.vp2-mh span{font:600 10.5px var(--body);color:var(--muted);white-space:nowrap}
.vp2-chev{font-style:normal;display:inline-block;transition:transform .2s}
.vp2-match:not(.collapsed) .vp2-chev{transform:rotate(180deg)}
.vp2-match.collapsed .vp2-body,.vp2-match.collapsed .vp2-warn{display:none}
.vp2-warn{font-size:11px;color:var(--amber-tx);padding:6px 12px;border-top:1px solid var(--line)}
.vp2-pick{border-top:1px solid var(--line);padding:11px 12px}
.vp2-pick.star{background:linear-gradient(100deg,rgba(124,128,238,.09),transparent 60%)}
.vp2-p1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vp2-p1 b{font:600 13.5px var(--body)}
.vp2-odds{font:700 13.5px var(--mono);white-space:nowrap;flex:0 0 auto;cursor:help;border-bottom:1px dotted rgba(124,128,238,.45);padding-bottom:1px}
.vp2-starline{margin-top:5px}
.vp2-star{display:inline-block;font:700 9px var(--body);letter-spacing:.05em;text-transform:uppercase;color:#cfc9ff;border:1px solid var(--purple);padding:2.5px 7px;box-shadow:0 0 8px rgba(124,128,238,.35)}
.vp2-bar{display:flex;align-items:center;gap:7px;margin-top:6px}
.vp2-bar .l{flex:0 0 46px;font:600 10.5px var(--body);color:var(--muted)}
.vp2-bar .t{flex:1;height:8px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.vp2-bar .t i{position:absolute;left:0;top:0;bottom:0}
.vp2-bar.model .t i{background:linear-gradient(90deg,#5a60d2,#8b8fee)}
.vp2-bar.market .t i{background:rgba(255,255,255,.22)}
.vp2-bar .p{flex:0 0 36px;font:700 12px var(--mono);text-align:right}
.vp2-bar.model .p{color:#aab0f4}
.vp2-p3{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.vp2-edge{font:700 12px var(--mono);color:#cfc9ff}
.vp2-edge small{font:500 10px var(--body);color:var(--muted)}
.vp2-vol{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--body);cursor:help}
.vp2-vol i{width:7px;height:7px;border-radius:50%}
.vp2-vol.lo{color:var(--green-tx)}.vp2-vol.lo i{background:var(--green)}
.vp2-vol.md{color:var(--amber-tx)}.vp2-vol.md i{background:var(--amber,#e8c66a)}
.vp2-vol.hi{color:var(--red-tx)}.vp2-vol.hi i{background:var(--red)}
.vp2-ev{font:600 11px var(--body);color:var(--muted);cursor:help}
.vp2-ev b{color:var(--green-tx);font:700 12px var(--mono)}
.vp2-why{background:none;border:0;color:var(--accent-ink);font:600 11.5px var(--body);cursor:pointer;padding:0}
.vp2-whybody{display:none;margin-top:8px;font-size:12px;line-height:1.6;color:var(--text-2)}
.vp2-whybody b{color:var(--text)}
.vp2-pick.open .vp2-whybody{display:block}
html[data-theme="light"] .vp2-match{background:rgba(255,255,255,.6)}
html[data-theme="light"] .vp2-bar .t{background:rgba(22,24,45,.08)}
html[data-theme="light"] .vp2-bar.market .t i{background:rgba(22,24,45,.28)}

/* R27: AET/pens on the FT pill */
.e-tag.ft .ft-pens{font-size:9px;color:var(--muted);margin-left:4px}

/* R28: bookmaker name before the price */
.vp2-odds .vp2-bk{color:var(--muted);font-weight:500}

/* ============================================================
   MOM - In-Play Momentum. Square dark-glass surfaces; win=green, loss=red.
   Locked confidence renders as a byte-free ... shell (.lk) exactly like signals.
   ============================================================ */
.mom-rec{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mom-recn{font:600 11px var(--body);color:var(--text-2)}
.rcpt-badge{display:inline-flex;align-items:center;gap:5px;font:600 10px var(--body);color:var(--green-tx);background:var(--green-bg);padding:3px 9px;border-radius:999px;white-space:nowrap}
.rcpt-badge.bad{color:var(--red-tx);background:var(--red-bg)}
.mom-h{font:700 10px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:10px 0 5px}
.mom-h:first-child{margin-top:0}
/* watch card */
.mom-watch{background:var(--glass-2);border:1px solid var(--line);padding:9px 10px;margin-bottom:6px;border-radius:var(--r)}
.mw-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mw-nm{font:600 12.5px var(--head);color:var(--text-1,var(--text-2))}
.mw-conf{font:800 13px var(--head);color:var(--green-tx);font-variant-numeric:tabular-nums;white-space:nowrap}
.mw-conf.lk{color:var(--muted);font-weight:600;font-style:italic;cursor:pointer;letter-spacing:.06em}
.mw-mid{font:400 11px var(--body);color:var(--muted);margin-top:2px}
.mw-mid small{color:var(--muted-2)}
.mw-bar{position:relative;height:5px;background:var(--glass-3);margin-top:7px;overflow:hidden;border-radius:var(--r)}
.mw-bar>i{display:block;height:100%;background:var(--green)}
.mw-thr{position:absolute;top:-2px;width:2px;height:9px;background:var(--text-2);transform:translateX(-1px)}
.mw-near{font:600 9.5px var(--body);color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
/* fired timeline row */
.mom-fire{display:flex;align-items:flex-start;gap:9px;padding:7px 2px;border-bottom:1px solid var(--line2)}
.mf-dot{flex:none;width:8px;height:8px;margin-top:4px;background:var(--muted);border-radius:50%}
.mom-fire.won .mf-dot{background:var(--green)}.mom-fire.lost .mf-dot{background:var(--red)}.mom-fire.pend .mf-dot{background:var(--hi-strong,var(--muted));animation:pulse 1.4s infinite}
.mf-body{flex:1;min-width:0;font:400 11.5px var(--body);color:var(--text-2)}
.mf-body b{font-weight:600}
.mf-body small{display:block;font-size:10px;color:var(--muted-2);margin-top:1px}
.mf-st{flex:none;font:700 9px var(--body);text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;color:var(--muted);background:var(--glass-3);white-space:nowrap}
.mf-st.won{color:var(--green-tx);background:var(--green-bg)}.mf-st.lost{color:var(--red-tx);background:var(--red-bg)}
/* settled receipt row */
.mom-set{display:flex;align-items:flex-start;gap:9px;padding:7px 2px;border-bottom:1px solid var(--line2)}
.ms-ic{flex:none;display:inline-flex;width:16px;height:16px;margin-top:2px;color:var(--green-tx)}
.ms-ic.lost{color:var(--red-tx)}
.ms-body{flex:1;min-width:0;font:400 11.5px var(--body);color:var(--text-2)}
.ms-body b{font-weight:600}.ms-body small{display:block;font-size:10px;color:var(--muted-2);margin-top:1px}
.ms-ev{color:var(--text-2);font-weight:600}
.ms-st{flex:none;font:700 10px var(--body);text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;white-space:nowrap}
.ms-st.won{color:var(--green-tx);background:var(--green-bg)}.ms-st.lost{color:var(--red-tx);background:var(--red-bg)}
/* evolution before-vs-now (match card tab) */
.mev{display:flex;gap:8px}
.mev-col{flex:1;min-width:0;background:var(--glass-2);border:1px solid var(--line);padding:8px}
.mev-lbl{display:block;font:700 9.5px var(--body);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:5px}
.mev-p{display:flex;align-items:center;justify-content:space-between;gap:8px;font:400 11px var(--body);color:var(--text-2);padding:2px 0}
.mev-p b{font:800 12px var(--head);color:var(--green-tx);font-variant-numeric:tabular-nums}
.mev-p b.lk{color:var(--muted);font-weight:600;font-style:italic;cursor:pointer;letter-spacing:.06em}
.mev-p.muted{color:var(--muted-2)}
.mev-changes{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.mev-chip{font:600 10px var(--body);color:var(--text-2);background:var(--glass-3);padding:3px 9px;border-radius:999px}
/* correct-score heat strip */
.cs-strip{display:flex;gap:6px}
.cs-cell{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 7px;background:var(--glass-2);border:1px solid var(--line);overflow:hidden}
.cs-cell::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--h,0%);background:var(--green);opacity:.16}
.cs-cell.lead{border-color:var(--green)}
.cs-cell.lead::before{opacity:.24}
.cs-cell b{position:relative;font:800 13px var(--head);color:var(--text-1,var(--text-2));font-variant-numeric:tabular-nums}
.cs-cell i{position:relative;font:600 10px var(--body);font-style:normal;color:var(--green-tx);font-variant-numeric:tabular-nums}
.cs-cell i.lk{color:var(--muted);font-style:italic;cursor:pointer;letter-spacing:.08em}

/* BK3 bookmaker game-link slot */
.bkc-wrap{display:flex;flex-direction:column;gap:7px;padding:2px 2px 4px}
.bkc-wrap .gt{font:600 12.5px var(--head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bkc-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bkc-row .bk-link{max-width:220px}
.bk-slot{display:inline-flex;align-items:center;gap:5px;min-height:22px;max-width:100%;min-width:0;vertical-align:middle;flex-shrink:1}
.bk-link{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;height:22px;padding:0 8px;border:1px solid var(--line);border-radius:7px;color:var(--text-2);background:var(--glass-2);font:700 10.5px var(--body);white-space:nowrap;text-decoration:none}
.bk-link span:not(.bk-dot):not(.ad){overflow:hidden;text-overflow:ellipsis}
.bk-link.priced{border-color:rgba(16,185,129,.34);color:var(--green-tx);background:var(--green-bg)}
.bk-link.maybe{border-color:rgba(245,158,11,.35);color:var(--amber-tx,#b7791f);background:rgba(245,158,11,.10)}
.bk-link.none,.bk-link.pending{color:var(--muted);background:var(--glass)}   /* was var(--glass-1) — never defined anywhere */
.bk-dot{font-size:10px;line-height:1}
.bk-note{font:600 10px var(--body);color:var(--muted-2);white-space:nowrap}
.cx-top>.bk-slot{margin-left:auto}
.mrow-head>.bk-slot{flex:0 1 auto}
.sug-info>.bk-slot{margin-top:5px}
@media (max-width:760px){.bk-note{display:none}.bk-link{max-width:160px}}

/* B8-13 credits UI */
.bld-wallet{display:flex;align-items:center;gap:6px;padding:8px 12px;margin:2px 0 6px;border:1px solid var(--line2);border-radius:10px;color:var(--muted);font:500 12px var(--body);cursor:pointer}
.bld-wallet b{color:var(--text)}
.bld-wallet .bld-wallet-buy{color:var(--hi);font-weight:700;white-space:nowrap}
.bld-cr{font-size:10px;opacity:.9;margin-left:3px;letter-spacing:.02em}
.pack-grid{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pack-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border:1px solid var(--line2);border-radius:10px;background:none;color:var(--text);font:600 13px var(--body);cursor:pointer;text-align:left}
.pack-row:hover{border-color:var(--purple,#7C80EE)}
.pack-row span{color:var(--muted);font-weight:700}

/* B8b: orb with no rating (dataless upcoming game) — muted "—", not a fabricated number */
.ipw-orb.orb-empty{opacity:.5}
.ipw-orb.orb-empty b{font-weight:600}

/* spec-72 record BAND on an insight tile — the measured record, inside the tile, as a
   full-bleed strip on the card's own accent (Matt: keep it in, make it strike). It sits in
   the tile's existing dead space via margin-top:auto, so the tile grows by the band only. */
/* height:auto + min-height so the band can NEVER sit on top of the tile content: the
   flex row stretches every tile to the tallest, so they stay uniform and nothing clips
   regardless of how long a phrase wraps (a fixed height overlapped the sub-label and
   meter on the extreme card — Matt 2026-07-26). */
.cx-panel[data-epanel="insights"] .stcard{height:auto;min-height:226px;align-self:stretch}
.cx-panel[data-epanel="insights"]{align-items:stretch}
.stcard .rec-band{margin:auto -18px -18px;display:flex;align-items:center;gap:10px;
  padding:9px 18px;background:linear-gradient(90deg,rgba(90,96,210,.34),rgba(90,96,210,.10));
  border-top:1px solid rgba(150,154,240,.30);cursor:default}
.stcard .rec-band .rb-pct{font:800 21px/1 var(--head);font-feature-settings:"ss03";
  color:#cfd2fb;letter-spacing:-.5px;flex:0 0 auto}
.stcard .rec-band .rb-txt{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.stcard .rec-band .rb-lab{font:700 9.5px/1.15 var(--body);letter-spacing:.11em;
  text-transform:uppercase;color:#aab0f4}
.stcard .rec-band .rb-sub{font:400 10.5px/1.25 var(--body);color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stcard .rec-band .rb-deepmark{font-size:9px;color:#aab0f4;flex:0 0 auto;opacity:.9}
.stcard .rec-band[data-pricing-open]{cursor:pointer}
@media (max-width:767px){/* narrow tiles: the baseline rides the tooltip instead of ellipsising */
  .stcard .rec-band .rb-base{display:none}
}

/* T-48a Strategy Desk — the acca strategies posting what they actually did. Deliberately low
   density and no accent strip: it reuses the panel shell, the match-key dots (won/lost) and the
   existing muted caption colour, so it reads as part of the board rather than a new surface.
   `[data-src]` keeps strategy rows and (T-48b) member rows visually distinct without a redesign. */
.sf-today{display:flex;flex-wrap:wrap;gap:4px 14px;padding:0 0 8px;border-bottom:1px solid var(--line)}
.sf-day{font-size:11px;color:var(--muted);white-space:nowrap}
.sf-list{display:flex;flex-direction:column}
.sf-row{display:flex;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.sf-row:last-child{border-bottom:0}
.sf-t{flex:0 0 34px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}
.sf-b{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:6px;line-height:1.35}
.sf-lock{display:inline-flex;align-items:center;gap:3px;color:var(--muted);font-size:11px}
.sf-legs{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:4px 10px;padding-top:2px}
.sf-leg{font-size:11px;color:var(--muted)}
.sf-leg em{font-style:normal;opacity:.75;padding-left:4px}
.sf-row[data-src="member"] .sf-t{color:var(--accent-ink)}   /* was var(--accent) — never defined anywhere */
.sf-row[data-src="member"]{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent)}

/* T-48b Talk — per-match replies. Same restraint as the Strategy Desk: the panel shell, the muted
   caption colour, one hairline per row. No avatars, no bubbles, no accent strip. */
.tk-wrap{padding:10px 16px 12px}
.tk-list{display:flex;flex-direction:column;margin-bottom:8px}
.tk-row{display:flex;flex-wrap:wrap;gap:4px 8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.tk-row:last-child{border-bottom:0}
.tk-who{font-weight:600}
.tk-body{flex:1 1 60%;line-height:1.4;word-break:break-word}
.tk-meta{flex:0 0 auto;color:var(--muted);font-size:11px;display:flex;align-items:center;gap:6px}
.tk-report{background:none;border:0;color:var(--muted);font:inherit;font-size:11px;cursor:pointer;padding:0;text-decoration:underline}
.tk-report[disabled]{cursor:default;text-decoration:none;opacity:.6}
.tk-note{color:var(--muted);font-size:12px;padding:6px 0}
.tk-compose{display:flex;flex-direction:column;gap:6px}
.tk-in{width:100%;resize:vertical;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;font-size:12px}
.tk-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.tk-msg{color:var(--muted);font-size:11px}
.tk-send{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 14px;font:inherit;font-size:12px;cursor:pointer}

/* ===== 2026-07-30 launch batch (T-194 / T-21 / T-22 / T-196 / T-79 / T-25) ============== */
/* T-196: the board search moved into the matches header where the colour legend sat */
.matches-head .head-search{margin-left:auto;appearance:none;-webkit-appearance:none;background:var(--glass-2);border:1px solid var(--line);border-radius:18px;color:var(--ink);font-family:var(--body);font-size:12.5px;padding:7px 14px;min-width:220px;outline:none;transition:border-color .15s,box-shadow .15s}
.matches-head .head-search::placeholder{color:var(--muted)}
.matches-head .head-search:focus{border-color:var(--accent-ink);box-shadow:0 0 0 3px var(--purple-12)}
html[data-theme=light] .matches-head .head-search{background:#fff;border-color:rgba(22,24,45,.18);color:#12141f}
html[data-theme=light] .matches-head .head-search::placeholder{color:rgba(22,24,45,.45)}
@media(max-width:760px){.matches-head .head-search{min-width:0;flex:1 1 140px}}

/* T-196: more air above the Patterns row (Matt: bring the block down ~20%) */
#patternChips{margin-top:18px;padding-top:6px}   /* T-196: 14->18px above Patterns (+29%), plus inner padding so the label is not tight to the row above */

/* T-194: revealed cards fade in with their stagger; the explicit Show more control */
.ex-card.card-late{animation-delay:var(--ri,0ms)}
.board-more{margin-top:10px}

/* T-21: live rows in Opportunity Discovery tint green like the matches list, softened */
.opp-match.o-live{background:linear-gradient(180deg,rgba(95,207,148,.10),rgba(95,207,148,.045));box-shadow:inset 3px 0 0 rgba(95,207,148,.45)}
.opp-match.o-live .opp-mh:hover{background:rgba(95,207,148,.06)}
html[data-theme=light] .opp-match.o-live{background:linear-gradient(180deg,rgba(46,160,101,.10),rgba(46,160,101,.04));box-shadow:inset 3px 0 0 rgba(46,160,101,.5)}

/* T-21: the context line that opens every expanded opportunity */
/* Matt 2026-07-30 round 2: the context line was 10.5px --muted grey and unreadable, yet it carries
   the two things he calls focal — the competition and Predictability. Bigger, ink-coloured
   competition; Predictability promoted to a bordered chip with a tabular number. */
.opp-ctx{font-size:12px;font-weight:600;color:var(--muted);padding:9px 14px 4px;letter-spacing:.01em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.opp-ctx .d{opacity:.45}
.opp-comp{color:var(--ink);font-weight:700;font-size:12.5px}
.opp-psc{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border:1px solid var(--line2);border-radius:20px;background:var(--glass-2);color:var(--ink);font-size:11.5px;font-weight:600;cursor:help}
.opp-psc b{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent-ink)}
/* recorded/settled rows: two lines, the scoreline central, ONE time reference (no repeated clock) */
.ms-line2{display:flex;align-items:center;gap:8px;margin-top:2px}
.ms-score{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);font-size:11.5px}
.ms-min{color:var(--muted);font-size:10.5px;font-weight:600}
/* exact-score rows: readable, clickable through to the board */
.cs-legend{font-size:11px;color:var(--muted);padding:0 14px 6px;line-height:1.45}
.cs-list{gap:5px;padding:0 14px 4px}
.cs-opp{padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--glass-2);transition:.15s}
.cs-opp[role=button]{cursor:pointer}
.cs-opp[role=button]:hover{border-color:var(--accent-ink);background:var(--purple-08)}
.cs-line1{display:flex;align-items:center;gap:6px}
.cs-teams{font-size:12.5px;font-weight:700;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-go{margin-left:auto;color:var(--accent-ink);font-weight:800}
.cs-line2{display:flex;align-items:center;gap:8px;margin-top:5px}
.cs-scores{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:.02em}
.cs-sc{font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
.cs-min{font-size:10.5px;font-weight:600;color:var(--muted)}
.cs-od{margin-left:auto;font-size:12px;color:var(--ink);white-space:nowrap}
.cs-od small{color:var(--muted);font-size:10.5px;font-weight:600}
.cs-more{margin-left:14px;margin-right:14px;width:auto}
/* acca legs: live score + minute (or countdown) on its own line, and the whole leg links to the board */
.lg-when{display:flex;align-items:center;gap:6px;margin-top:2px}
.lg-sc{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);font-size:11.5px}
.lg-min{color:var(--muted);font-size:10.5px;font-weight:600}
.acca-leg[data-goto]{cursor:pointer}
.acca-leg[data-goto]:hover{background:var(--purple-08)}
.lg-go{margin-left:auto;color:var(--accent-ink);font-weight:800;padding-left:6px}
/* the located card flashes once so a click from a left panel is obviously answered */
.card-locate{outline:2px solid var(--purple);outline-offset:2px;animation:ipw-locate 2.2s ease-out 1}
@keyframes ipw-locate{0%{outline-color:var(--accent-ink)}70%{outline-color:var(--accent-ink)}100%{outline-color:transparent}}

/* T-21: "Rated now" header aligns with the team name (logo 22px + 9px gap) and sits tighter */
/* Matt 2026-07-30 round 2: was indented 31px (aligning to the pick text, past the side icon), so
   it sat out of line with the competition/Predictability line directly above. Both are 14px now. */
.sug-list .mom-h{margin:6px 0 3px;padding:2px 14px}

/* T-21: numbered pager */
.opp-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 2px 2px}
/* Matt 2026-07-30 round 2: "buttons different sizes very sloppy" — they sized to their label, so
   "26" was wider than "1" and the arrows wider still. Every control is now the SAME 32x32 square
   (grid-centred, tabular numerals so digits do not shift width), and the text is readable ink
   rather than --muted grey. The "…" is a plain span occupying the same square. */
.opp-pg{width:32px;height:32px;min-width:32px;padding:0;display:inline-grid;place-items:center;box-sizing:border-box;border-radius:9px;border:1px solid var(--line2);background:var(--glass-2);color:var(--ink);font-family:var(--body);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1;cursor:pointer;transition:.15s}
.opp-pg:hover:not(:disabled){border-color:var(--accent-ink);background:var(--purple-08)}
.opp-pg.on{color:#fff;background:var(--accent-fill);border-color:var(--accent-ink)}
.opp-pg.nav{font-size:15px}
.opp-pg:disabled{opacity:.3;cursor:default}
.opp-pg-gap{width:32px;height:32px;display:inline-grid;place-items:center;color:var(--muted);font-size:13px;font-weight:600}
.opp-pg-sum{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.opp-div-cont{opacity:.75}

/* T-21/T-22: section-grade headers inside the accas column */
.acca-divider.acca-sec-h{font-size:13.5px;font-weight:700;letter-spacing:.02em;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}

/* T-79: floating help button — desktop only (the footer link still covers mobile) */
/* Matt 2026-07-30: "I also want the chat support function they have which is a button on the bottom
   right" — vulk.dev's is a round dark button, fixed bottom-6/right-6, that scales up and deepens its
   shadow on hover over 300ms. Same behaviour here, on the aurora body so it belongs to our system. */
.ipw-help-fab{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border-radius:50%;border:1px solid var(--line2);background:var(--aurora-bg);color:var(--aurora-ink);font-size:20px;font-weight:700;font-family:var(--body);cursor:pointer;z-index:1200;box-shadow:var(--aurora-shadow);transition:transform .3s var(--aurora-ease),box-shadow .3s var(--aurora-ease)}
.ipw-help-fab:hover{transform:scale(1.1);box-shadow:var(--aurora-shadow-hi)}
@media(prefers-reduced-motion:reduce){.ipw-help-fab{transition:none}.ipw-help-fab:hover{transform:none}}
html[data-theme=light] .ipw-help-fab{box-shadow:0 8px 24px -10px rgba(70,78,150,.4)}
@media(max-width:760px){.ipw-help-fab{display:none}}

/* ── T-200 Style Lab findings (2026-07-30) ──────────────────────────────────────
   The lab renders every component in both themes and scores each text element against WCAG with
   its REAL composited backdrop. These rules close the failures it found that the component rules
   above could not: in light mode the state washes (--green-bg/--red-bg/--blue-bg/--amber-bg) are
   defined once for dark and composite to ~#cededc / #f1d2d8 on the light page, where the matching
   -tx ink lands at 3.1:1 against a 4.5 bar. Deepening the ink (not the wash) fixes it without
   touching the dark theme, where those pairs already pass. */
html[data-theme=light]{
  --green-bg:rgba(31,138,84,.16); --red-bg:rgba(214,69,69,.16);
  --blue-bg:rgba(47,91,208,.16);  --amber-bg:rgba(174,123,31,.18);
  --orange-bg:rgba(200,80,31,.16);
  --green-tx:#12653c; --red-tx:#a52f2f; --blue-tx:#23479f; --amber-tx:#7d5714; --orange-tx:#9c3d17;
}
/* The plain .btn takes the accent as a fill, so it must use the fill role, not the tint. */
.btn{background:var(--accent-fill)}
html[data-theme=light] .btn{color:#fff}
/* Style Lab round 2: the accent as a BUTTON FILL under white text measured 3.40:1 in dark (needs
   4.5 at 13px), and the chip count badge sat at 4.18:1 on the aurora body. Both are the accent
   being asked to work as a fill, so the fill role gets its own deeper value in dark too, and the
   badge takes a lighter ink on dark rather than the mid-tone accent. */
:root{--accent-fill:#5257c8}
.sortopt .sort-tag{color:#b9bcf7}
html[data-theme=light] .sortopt .sort-tag{color:var(--accent-ink)}
.info{font-size:10px}
/* Last lab failure: the exact-score chevron at 4.47:1 on the darkest card — 0.03 under the bar.
   It uses --hi (the lighter accent) rather than the mid-tone, which clears it without a new token. */
.cs-go{color:var(--hi)}
html[data-theme=light] .bld-wallet .bld-wallet-buy{color:var(--accent-ink)}

/* ── T-200 · keyboard focus (Codex design audit) ────────────────────────────────
   Measured across both stylesheets: 178 :hover rules, THREE :focus-visible references, and not one
   of them draws anything. Several controls also set outline:none without replacing it. So a
   keyboard user had no idea where they were on the page — on a product whose whole argument is
   trust, that is not a detail. :where() keeps specificity at zero so any component style still
   wins, and focus-visible means mouse users never see a ring. */
:where(a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:3px}
html[data-theme=light] :where(a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline-color:var(--accent-ink)}
/* the search inputs deliberately drop the native ring — give them the shared one back */
.ftab-search:focus-visible,.matches-head .head-search:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}