@sensiblestats/widget-react 0.45.0 → 0.47.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +26 -0
  2. package/dist/index.cjs +79 -16
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +79 -16
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +6 -0
  9. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -47,6 +47,6 @@ type StatsWidgetProps = {
47
47
  };
48
48
  declare function StatsWidget(props: StatsWidgetProps): JSX.Element | null;
49
49
 
50
- declare const WIDGET_CSS = ".ss-w-root { all: revert; }\n.ss-w-root, .ss-w-root * { box-sizing: border-box; margin: 0; padding: 0; }\n.ss-w-root {\n --ss-w-accent: #17936a;\n --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;\n --ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;\n --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;\n --ss-w-pos: #1aa563; --ss-w-neg: #e0524b;\n --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;\n --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);\n}\n@media (prefers-color-scheme: dark) {\n .ss-w-root[data-ss-w-theme=\"auto\"] {\n --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;\n --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;\n --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;\n --ss-w-pos: #37c891; --ss-w-neg: #f0655d;\n --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;\n }\n}\n.ss-w-root[data-ss-w-theme=\"dark\"] {\n --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;\n --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;\n --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;\n --ss-w-pos: #37c891; --ss-w-neg: #f0655d;\n --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;\n}\n.ss-w-root[data-ss-w-theme=\"light\"] {\n --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;\n --ss-w-ink: #14181d; --ss-w-faint: #6b7580;\n --ss-w-line: #e4e8ec; --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;\n --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;\n}\n\n/* launcher */\n.ss-w-fab-wrap { position: fixed; bottom: var(--ss-w-offset-y); z-index: 2147483000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }\n.ss-w-root[data-ss-w-pos=\"right\"] .ss-w-fab-wrap { right: var(--ss-w-offset-x); }\n.ss-w-root[data-ss-w-pos=\"left\"] .ss-w-fab-wrap { left: var(--ss-w-offset-x); align-items: flex-start; }\n.ss-w-fab { width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--ss-w-nav); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); }\n.ss-w-fab-mark { width: 30px; height: 30px; display: block; object-fit: contain; }\n.ss-w-greeting { max-width: 240px; display: flex; align-items: flex-start; background: var(--ss-w-panel); color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n.ss-w-greeting-body { position: relative; flex: 1; min-width: 0; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 9px 4px 9px 12px; }\n.ss-w-greeting-x { flex: none; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 7px 9px 0 2px; }\n.ss-w-greeting-text { display: block; }\n/* Typing indicator: overlays the text area so bubble height stays put; hidden at\n rest, revealed only during the one-shot intro (see prefers-reduced-motion block). */\n.ss-w-greeting-dots { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; gap: 4px; opacity: 0; pointer-events: none; }\n.ss-w-greeting-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-faint); display: block; }\n/* One-shot launcher attention intro: FAB nudges, then the greeting types in.\n Gated behind no-preference so reduce-motion users get the greeting shown\n statically (text visible, no nudge, no typing). ChatFab adds .ss-w-intro once\n per page load; every animation runs a single time and settles at rest. */\n@media (prefers-reduced-motion: no-preference) {\n .ss-w-intro .ss-w-fab { animation: ss-w-nudge .8s ease both; }\n .ss-w-intro .ss-w-greeting { animation: ss-w-greet-in .45s cubic-bezier(.2,.8,.3,1.15) .8s both; }\n .ss-w-intro .ss-w-greeting-text { animation: ss-w-greet-textin .4s ease 1.65s both; }\n .ss-w-intro .ss-w-greeting-dots { animation: ss-w-greet-dots .95s ease .85s both; }\n .ss-w-intro .ss-w-greeting-dots i { animation: ss-w-greet-dotbounce .5s ease .85s 2; }\n .ss-w-intro .ss-w-greeting-dots i:nth-child(2) { animation-delay: 1s; }\n .ss-w-intro .ss-w-greeting-dots i:nth-child(3) { animation-delay: 1.15s; }\n}\n@keyframes ss-w-nudge {\n 0%, 100% { transform: none; }\n 22% { transform: translateY(-9px) rotate(-9deg); }\n 44% { transform: translateY(0) rotate(7deg); }\n 64% { transform: translateY(-4px) rotate(-4deg); }\n 82% { transform: rotate(2deg); }\n}\n@keyframes ss-w-greet-in {\n from { opacity: 0; transform: translateY(8px) scale(.92); }\n to { opacity: 1; transform: none; }\n}\n@keyframes ss-w-greet-textin { from { opacity: 0; } to { opacity: 1; } }\n@keyframes ss-w-greet-dots { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }\n@keyframes ss-w-greet-dotbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\n\n/* panel */\n.ss-w-panel { position: fixed; bottom: calc(var(--ss-w-offset-y) + 72px); z-index: 2147483000; display: flex; flex-direction: column; width: min(460px, calc(100vw - 40px)); height: min(640px, calc(100vh - 120px)); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: var(--ss-w-radius); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.24); }\n.ss-w-root[data-ss-w-pos=\"right\"] .ss-w-panel { right: var(--ss-w-offset-x); }\n.ss-w-root[data-ss-w-pos=\"left\"] .ss-w-panel { left: var(--ss-w-offset-x); }\n@media (max-width: 639px) {\n /* Fill via inset with no explicit height (like the site's working panel) so the\n input stays visible when the mobile keyboard/URL-bar shrinks the viewport. The\n position-specific selectors override the right/left offsets set above. */\n .ss-w-root[data-ss-w-pos=\"right\"] .ss-w-panel,\n .ss-w-root[data-ss-w-pos=\"left\"] .ss-w-panel { inset: 0; width: auto; height: auto; border: none; border-radius: 0; }\n}\n.ss-w-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-header-mark { width: 18px; height: 18px; display: block; object-fit: contain; }\n.ss-w-header-title { font-weight: 660; flex: 1; }\n.ss-w-close { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }\n.ss-w-menu-wrap { position: relative; display: grid; place-items: center; }\n.ss-w-kebab { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }\n.ss-w-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 184px; padding: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }\n.ss-w-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: none; border: none; border-radius: 8px; color: var(--ss-w-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }\n.ss-w-menu-item:hover, .ss-w-menu-item:focus-visible { background: var(--ss-w-bubble); }\n.ss-w-menu-item svg { color: var(--ss-w-faint); font-size: 15px; flex: none; }\n\n/* messages */\n/* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --\n same visual rhythm as the chat message list -- but gets its own class so it isn't the same DOM\n landmark as the chat list when both exist in the panel at once (Task 16 fix round, M4). */\n.ss-w-list, .ss-w-mon-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }\n/* Transient bottom spacer: reserves a viewport of room below a new turn so its\n top can be scrolled into view while the reply is still streaming in. Height is\n set imperatively and flex must not shrink it away. */\n.ss-w-turn-spacer { flex: none; }\n.ss-w-msg { display: flex; }\n.ss-w-user { justify-content: flex-end; }\n.ss-w-user .ss-w-bubble { background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 14px; padding: 8px 12px; max-width: 80%; }\n.ss-w-bot { flex-direction: column; gap: 8px; }\n.ss-w-status { font-size: 11px; color: var(--ss-w-faint); font-style: italic; }\n.ss-w-error { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c0392b; }\n.ss-w-retry { background: none; border: 1px solid currentColor; border-radius: 10px; padding: 2px 8px; cursor: pointer; color: inherit; }\n\n/* markdown */\n.ss-w-md { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-md :where(p, ul, ol, table, pre, blockquote, h1, h2, h3, h4) { margin: 0; }\n.ss-w-md > *:first-child { margin-top: 0; }\n.ss-w-md > *:last-child { margin-bottom: 0; }\n.ss-w-md-ul { list-style: disc outside; padding-left: 18px; }\n.ss-w-md-ol { list-style: decimal outside; padding-left: 18px; }\n.ss-w-md-ul li::marker, .ss-w-md-ol li::marker { color: var(--ss-w-accent); }\n.ss-w-md-link { color: var(--ss-w-accent); text-decoration: underline; }\n.ss-w-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }\n.ss-w-md-table { border-collapse: collapse; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }\n.ss-w-md-table td, .ss-w-md-table th { border: 1px solid var(--ss-w-line); padding: 4px 8px; text-align: left; white-space: nowrap; }\n.ss-w-md-table th { background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); font-weight: 700; }\n.ss-w-md-table tbody tr:nth-child(even) { background: var(--ss-w-bubble); }\n.ss-w-md-code { background: var(--ss-w-bubble); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }\n\n/* entity cards */\n.ss-w-cards { display: flex; flex-direction: column; gap: 8px; }\n\n/* Entity card: identity header row over a horizontal stat strip */\n.ss-w-ecard { display: flex; flex-direction: column; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }\n\n.ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }\n.ss-w-thumb { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; box-shadow: 0 1px 3px rgba(0,0,0,.14); }\n.ss-w-thumb.ss-w-team { border-radius: 12px; }\n.ss-w-ecard[data-kind=\"player\"] .ss-w-thumb { background-color: var(--ss-w-accent); }\n.ss-w-nm { font-weight: 680; line-height: 1.15; overflow-wrap: anywhere; }\n.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n\n/* bare card (no stat scopes): simple avatar + name row */\n.ss-w-ecard-bare { display: flex; align-items: center; }\n.ss-w-ecard-bare .ss-w-ecard-hd { padding: 10px 12px; }\n\n.ss-w-ecard-hd { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }\n.ss-w-ecard-hd .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }\n.ss-w-ecard-hd .ss-w-thumb.ss-w-team { border-radius: 10px; }\n.ss-w-ecard-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; align-self: flex-start; margin-left: auto; }\n.ss-w-ecard-meta .ss-w-ecard-season { margin: 0; }\n\n/* scope tabs: reuse the underline pattern, relocated above the strip */\n.ss-w-ecard-scopes { display: flex; align-items: stretch; gap: 2px; padding: 0 11px; border-top: 1px solid var(--ss-w-line); flex-wrap: wrap; }\n.ss-w-ecard-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 7px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }\n.ss-w-ecard-scope[aria-selected=\"true\"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }\n.ss-w-ecard-scope .ss-w-ecard-crest { width: 14px; height: 14px; }\n.ss-w-ecard-scopes + .ss-w-ecard-strip { border-top: none; }\n\n.ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }\n.ss-w-ecard-season { flex: none; margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }\n\n/* stat strip: 1px gap over a line-colored ground paints hairlines between cells, wrap-safe */\n.ss-w-ecard-strip { display: grid; gap: 1px; background: var(--ss-w-line); border-top: 1px solid var(--ss-w-line); }\n.ss-w-ecard-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 11px; background: var(--ss-w-panel); }\n.ss-w-ecard-cval { height: 20px; display: flex; align-items: center; font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n.ss-w-ecard-cval .ss-w-form { width: 42px; }\n.ss-w-ecard-clabel { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-faint); font-weight: 600; font-variant-numeric: tabular-nums; }\n\n.ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }\n.ss-w-form span { display: block; border-radius: 2px; }\n.ss-w-form-w { background: var(--ss-w-pos); }\n.ss-w-form-d { background: var(--ss-w-faint); }\n.ss-w-form-l { background: var(--ss-w-neg); }\n\n.ss-w-cards-more { align-self: flex-start; font-size: 11.5px; font-weight: 560; color: var(--ss-w-accent); background: none; border: none; cursor: pointer; padding: 3px 2px; }\n.ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }\n.ss-w-cards-more:disabled { opacity: .5; cursor: default; }\n\n/* betting insights */\n.ss-w-binsights { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-binsight { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; }\n\n/* header, competition-hero fallback: comp on the left, live badge + kickoff + pin on the right,\n all on one line (used when there is no fixture, and by MarketOddsCardList) */\n.ss-w-bi-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-bi-header-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); }\n.ss-w-bi-header-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }\n/* two-tier header: a quiet meta line (competition + kickoff + match pin) stacked above the\n fixture, so long club names get the whole width to themselves and stop truncating (u350) */\n.ss-w-bi-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-bi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-bi-meta-left { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }\n.ss-w-bi-meta-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }\n.ss-w-bi-fixture-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-bi-kick { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; flex: none; }\n.ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }\n.ss-w-bi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }\n.ss-w-bi-floor { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; align-self: flex-start; flex: none; }\n\n/* crests -- CSS background-image on a span, never <img> (matches .ss-w-ecard-crest precedent) */\n.ss-w-bi-comp-logo { width: 16px; height: 16px; flex: none; display: block; border-radius: 50%; object-fit: contain; }\n.ss-w-bi-crest { width: 24px; height: 24px; flex: none; display: block; border-radius: 50%; object-fit: contain; }\n.ss-w-bi-crest-mono { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }\n\n/* fixture atoms -- crest-flanked team pair; shared by the insight fixture line and MarketOddsCardList */\n.ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-bi-vs { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); flex: none; }\n.ss-w-bi-fixture-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n/* shared crest-flanked team row (MarketOddsCardList); matches .ss-w-bi-fixture-line's hero weight\n so the fixture reads the same on both card types (u350) */\n.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n\n/* row 2, two-tier: the market label owns a full-width line above the pick row (selection grows\n left, odds + slip + pin sit right), so neither the market name nor the fixture clips (u350) */\n.ss-w-bi-action { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-bi-market { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-bi-pick-row { display: flex; align-items: center; gap: 9px; }\n.ss-w-bi-sel { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-bi-odds { flex: none; margin-left: auto; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }\n.ss-w-bi-odds b { font-size: 20px; font-family: ui-monospace, monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.05; }\n.ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }\n.ss-w-bi-pick-row .ss-w-slip { flex: none; }\n\n/* row 3: bar-chart glyph + reasoning prose + stats-expander chevron, in a subtle strip */\n.ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }\n.ss-w-bi-chart { flex: none; width: 13px; height: 12px; margin-top: 2px; opacity: .55;\n background:\n linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) left / 3px 55% no-repeat,\n linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) center / 3px 100% no-repeat,\n linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) right / 3px 75% no-repeat;\n background-position: left bottom, center bottom, right bottom;\n}\n.ss-w-bi-reason-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }\n.ss-w-bi-text { font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); }\n.ss-w-bi-text-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n.ss-w-bi-expand { flex: none; align-self: center; display: grid; place-items: center; width: 22px; height: 22px; margin: -2px -4px -2px 0; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-bi-expand:hover { color: var(--ss-w-ink); }\n.ss-w-bi-arrow { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }\n.ss-w-bi-arrow-open { transform: rotate(135deg); }\n.ss-w-bi-rows { display: flex; flex-direction: column; }\n.ss-w-bi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--ss-w-line); }\n.ss-w-bi-row:first-child { border-top: none; }\n.ss-w-bi-row-lbl { font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-bi-row-num { font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; flex: none; color: var(--ss-w-ink); }\n.ss-w-bi-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }\n.ss-w-bi-scoped { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-bi-scopes { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; align-self: flex-start; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 2px; }\n.ss-w-bi-chip { font-size: 11px; font-weight: 600; border: none; border-radius: 7px; padding: 4px 10px; color: var(--ss-w-faint); background: none; cursor: pointer; }\n.ss-w-bi-chip[aria-pressed=\"true\"] { color: var(--ss-w-ink); background: var(--ss-w-panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); }\n\n/* market odds card */\n.ss-w-mocards { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-mocard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n/* Embedded inside the market accordion, which already provides the card frame + accent rail --\n drop the inner frame so odds rows aren't double-bordered. */\n.ss-w-mocard--bare { border: none; border-radius: 0; padding: 0; background: none; }\n.ss-w-mo-sub { display: flex; flex-direction: column; gap: 5px; min-width: 0; }\n.ss-w-mo-teams { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mo-market-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-mo-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mo-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }\n.ss-w-mo-more:hover { text-decoration: underline; }\n.ss-w-mo-more-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }\n.ss-w-mo-more-chev-up { transform: translateY(1px) rotate(-135deg); }\n.ss-w-mo-rows { display: flex; flex-direction: column; gap: 4px; }\n.ss-w-mo-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--ss-w-line); }\n.ss-w-mo-row:last-child { border-bottom: none; }\n.ss-w-mo-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); flex: 1; min-width: 0; }\n.ss-w-mo-price { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--ss-w-accent); }\n/* Movement: BOTH directions share --ss-w-faint on purpose. Green-good/red-bad would frame a\n shortening price as a discount, which inverts what it actually means for the bettor. */\n.ss-w-move { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }\n.ss-w-move-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }\n.ss-w-move-arrow { font-size: 9px; line-height: 1; }\n/* margin-left:auto is row layout, not badge styling -- it belongs to the market-odds row, which is\n a flex row, and must NOT follow the badge into the insight card's odds column. */\n.ss-w-mo-row .ss-w-move { margin-left: auto; }\n.ss-w-mo-row .ss-w-move + .ss-w-mo-price { margin-left: 0; }\n.ss-w-mo-row .ss-w-slip { margin: 0; flex: none; }\n.ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }\n\n/* odds movement card */\n.ss-w-omcards { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-omcard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-om-head { display: flex; align-items: center; gap: 8px; }\n.ss-w-om-market { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-om-tag { margin-left: auto; flex: none; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 2px 7px; }\n.ss-w-om-fixture { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-om-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-om-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }\n.ss-w-om-chart { display: block; width: 100%; height: auto; }\n/* Single neutral accent in BOTH directions, deliberately. Colouring a shortening price green\n frames it as a discount, which inverts what it means for the bettor -- the same reason\n .ss-w-move keeps both directions on --ss-w-faint. */\n.ss-w-om-line { stroke: var(--ss-w-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }\n.ss-w-om-dot { fill: var(--ss-w-accent); }\n.ss-w-om-grid { stroke: var(--ss-w-line); stroke-width: 1; }\n.ss-w-om-ylab, .ss-w-om-xlab { fill: var(--ss-w-faint); font-size: 9px; font-family: ui-monospace, monospace; }\n.ss-w-om-empty { font-size: 11.5px; color: var(--ss-w-faint); padding: 6px 0; }\n.ss-w-om-foot { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-om-foot b { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ss-w-ink); }\n.ss-w-om-excl { font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-om-susp { font-size: 11px; font-weight: 600; color: #c0392b; }\n.ss-w-om-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }\n\n/* action buttons */\n.ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }\n.ss-w-abtn { font-size: 12px; font-weight: 560; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; padding: 6px 12px; cursor: pointer; }\n.ss-w-abtn:disabled { opacity: .5; cursor: default; }\n.ss-w-abtn-shimmer { width: 140px; height: 30px; border-radius: 16px; background: linear-gradient(90deg, var(--ss-w-bubble), var(--ss-w-line), var(--ss-w-bubble)); background-size: 200% 100%; animation: ss-w-shimmer 1.2s infinite; }\n@keyframes ss-w-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }\n\n/* intent chips */\n.ss-w-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-chip { font-size: 11.5px; font-weight: 550; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 5px 11px; cursor: pointer; }\n\n/* input */\n.ss-w-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-textarea { flex: 1; resize: none; border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 10px; font: inherit; color: inherit; background: var(--ss-w-panel); max-height: 96px; }\n.ss-w-textarea:disabled { opacity: .55; cursor: not-allowed; }\n/* iOS Safari zooms the page when a focused field's font-size is < 16px. Bump it\n on touch devices only, so the desktop 13px design is unchanged. */\n@media (pointer: coarse) {\n .ss-w-textarea { font-size: 16px; }\n}\n.ss-w-send { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: var(--ss-w-accent); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 16px; }\n.ss-w-stop-glyph { width: 11px; height: 11px; background: currentColor; border-radius: 2px; }\n\n/* add to slip */\n.ss-w-slip { position: relative; display: flex; }\n.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: 1px solid var(--ss-w-cta); border-radius: 14px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }\n.ss-w-slip-btn:disabled { opacity: .6; cursor: default; background: var(--ss-w-bubble); color: var(--ss-w-faint); border-color: var(--ss-w-line); }\n/* Anchored to the RIGHT of its (narrow) button wrapper and sized by content, growing leftward\n into the card -- inheriting the wrapper's width squeezes the text to one character per line.\n Every toast site (slip buttons, pin toggles) sits at the right edge of its row. */\n.ss-w-toast { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1; width: max-content; max-width: 210px; font-size: 11px; font-weight: 560; border-radius: 10px; padding: 5px 10px; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n.ss-w-toast-success { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }\n.ss-w-toast-error { color: #c0392b; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }\n\n/* pin affordance */\n.ss-w-pin-wrap { position: relative; display: inline-flex; flex: none; }\n.ss-w-pin { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: none; border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-pin svg { width: 12px; height: 12px; }\n.ss-w-pin:hover { color: var(--ss-w-ink); border-color: var(--ss-w-faint); }\n.ss-w-pin[data-on] { background: var(--ss-w-accent); border-color: var(--ss-w-accent); color: #fff; }\n.ss-w-pin[data-on]:hover { background: var(--ss-w-accent); color: #fff; }\n\n@media (prefers-reduced-motion: reduce) {\n .ss-w-abtn-shimmer { animation: none; }\n}\n\n/* greeting dashboard */\n.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }\n.ss-w-dash-head { display: flex; flex-direction: column; }\n.ss-w-dash-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }\n.ss-w-dash-subtitle { font-size: 13px; color: var(--ss-w-faint); margin-top: 4px; }\n.ss-w-dash-foot { font-size: 11px; color: var(--ss-w-faint); margin-top: 2px; }\n\n.ss-w-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.ss-w-dash-tile--half { grid-column: span 1; }\n.ss-w-dash-tile--full { grid-column: 1 / -1; }\n\n.ss-w-dash-tile {\n display: flex; align-items: center; gap: 10px;\n padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);\n background: var(--ss-w-panel); text-align: left; cursor: pointer; width: 100%;\n color: inherit; font: inherit;\n min-width: 0; /* the panel is min(400px, 100vw - 40px): without this,\n a long Turkish title blows the column out */\n}\n.ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }\n.ss-w-dash-emoji { line-height: 1; }\n.ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }\n.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }\n.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-dash-tile-chevron { flex: none; margin-left: auto; width: 14px; height: 14px; color: var(--ss-w-faint); }\n\n/* Badge + crests share their own row, below the title -- NOT the icon/chevron row. A\n nowrap badge (~70px) sitting beside icon+chevron in a ~180px half-span tile left the\n title column at ~22px wide, wrapping every title character-by-character. Here the row\n gets the body's full width, so a badge this size is comfortably inside it. */\n.ss-w-dash-tile-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }\n.ss-w-dash-tile-badge { flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }\n\n.ss-w-dash-tile-crests { flex: none; display: flex; align-items: center; }\n.ss-w-dash-tile-crest {\n width: 18px; height: 18px; border-radius: 50%;\n background-size: cover; background-position: center; background-color: var(--ss-w-bubble);\n margin-left: -6px; border: 2px solid var(--ss-w-panel); /* overlapping stack, capped at 3 in DashboardTile */\n}\n.ss-w-dash-tile-crest:first-child { margin-left: 0; }\n\n/* Market: default 2-column grid, tiles get the same accent rail as the other card\n families (.ss-w-binsight, .ss-w-mocard, .ss-w-omcard) so a market tile reads as\n part of that visual language rather than a plain unstyled button. */\n.ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }\n\n/* Goal: one column of pill rows. */\n.ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }\n.ss-w-dash--goal .ss-w-dash-tile { border-radius: 999px; padding: 10px 14px; }\n\n/* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets\n the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow\n column was wrapping \"Most interesting angles\" onto three lines. The chevron is dropped (the\n whole card is the tap target) and the badge + crest row is forced onto one line. */\n.ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }\n.ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }\n.ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }\n/* The full-span trends tile has the whole panel width, so its icon and title sit on one row\n (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */\n.ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }\n.ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }\n.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }\n.ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1) { background: #eef8f1; }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: #eef3fb; }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: #fdf6ec; }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: #f5eefb; }\n\n/* club fan pre-match dashboard */\n.ss-w-fandash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }\n.ss-w-fandash-greeting { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); }\n.ss-w-fandash-greeting--lead { font-weight: 400; }\n.ss-w-fandash-cards { display: flex; flex-direction: column; gap: 8px; }\n\n/* Shared card chrome -- a plain <div> for [data] cards, a <button> for [prefill] cards. Both\n share the same box so the two families read as one system, not two ad hoc layouts. */\n.ss-w-fandash-card {\n display: flex; flex-direction: column; gap: 8px;\n padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);\n background: var(--ss-w-panel); text-align: left;\n color: inherit; font: inherit; width: 100%; min-width: 0;\n}\n.ss-w-fandash-card--tap { cursor: pointer; border-left: 3px solid var(--ss-w-accent); }\n.ss-w-fandash-card--tap:hover { background: var(--ss-w-bubble); }\n.ss-w-fandash-card-cta { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); }\n\n/* Shared alignment primitives: a small letterspaced section eyebrow, and a 3-column value/label\n split reused by the fixture head-to-head (and any future stat-row card). */\n.ss-w-fandash-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }\n.ss-w-fandash-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-split-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }\n.ss-w-fandash-split-value { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); line-height: 1; }\n.ss-w-fandash-split-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n\n/* fixture card */\n.ss-w-fandash-fixture-teams { display: flex; align-items: center; gap: 10px; }\n.ss-w-fandash-fixture-team { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }\n.ss-w-fandash-fixture-team--away { justify-content: flex-end; }\n.ss-w-fandash-fixture-team .ss-w-bi-crest { width: 30px; height: 30px; }\n.ss-w-fandash-fixture-team .ss-w-bi-crest-mono { font-size: 12px; }\n.ss-w-fandash-fixture-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }\n.ss-w-fandash-fixture-team--away .ss-w-fandash-fixture-name { text-align: right; }\n.ss-w-fandash-fixture-vs { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }\n/* date + venue as labelled rows, so a long stadium name gets its own line to ellipsis in */\n.ss-w-fandash-fixture-meta { border-top: 1px solid var(--ss-w-line); padding-top: 10px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-fixture-kickoff { font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-fandash-fixture-venue { font-weight: 600; }\n.ss-w-fandash-fact { font-size: 12px; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 8px; }\n/* each head-to-head figure sits on its own shaded tile, so the grid gap separates wins/draws/losses */\n.ss-w-fandash-h2h .ss-w-fandash-split-cell { background: var(--ss-w-bubble); border-radius: 10px; padding: 12px 6px; }\n/* extra breathing room between the tally row and the fact beyond the card's own gap */\n.ss-w-fandash-h2h .ss-w-fandash-fact { margin-top: 4px; }\n\n/* Team form: a two-column result-card grid, left = home team's last 5, right = away team's last 5,\n most-recent first. The head row carries each column's crest + name; the rows grid is filled\n home-cell/away-cell per index so the 2-col grid lays out pairs without extra JS bookkeeping. */\n.ss-w-fandash-teamform-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }\n.ss-w-fandash-teamform-head-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; font-weight: 750; }\n.ss-w-fandash-teamform-head-team .ss-w-bi-crest { width: 18px; height: 18px; }\n.ss-w-fandash-teamform-head-team .ss-w-bi-crest-mono { font-size: 8px; }\n.ss-w-fandash-teamform-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-teamform-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; }\n.ss-w-fandash-teamform-slot { display: block; min-width: 0; }\n.ss-w-fandash-teamform-cell {\n display: flex; align-items: center; gap: 4px; border-radius: 7px; padding: 4px 5px; color: #fff;\n}\n.ss-w-fandash-teamform-cell--win { background: var(--ss-w-pos); }\n.ss-w-fandash-teamform-cell--loss { background: var(--ss-w-neg); }\n.ss-w-fandash-teamform-cell--draw { background: var(--ss-w-faint); }\n.ss-w-fandash-teamform-cell .ss-w-bi-crest { width: 16px; height: 16px; flex: none; background: rgba(255, 255, 255, .22); }\n.ss-w-fandash-teamform-cell .ss-w-bi-crest-mono { font-size: 7px; color: #fff; }\n.ss-w-fandash-teamform-score { flex: 1; text-align: center; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }\n.ss-w-fandash-injuries-more { margin-top: 10px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }\n.ss-w-fandash-injuries-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }\n.ss-w-fandash-form-pill {\n display: inline-grid; place-items: center; width: 16px; height: 16px;\n border-radius: 4px; font-size: 9.5px; font-weight: 700; color: #fff;\n}\n.ss-w-fandash-form-pill--win { background: var(--ss-w-pos); }\n.ss-w-fandash-form-pill--loss { background: var(--ss-w-neg); }\n.ss-w-fandash-form-pill--draw { background: var(--ss-w-faint); }\n\n/* countdown card: a compact top card -- section eyebrow left, colon-separated clock right. Each\n segment stacks its figure over a small unit label (d/h/m/s). The exact kickoff date is not\n repeated here; the fixture card below carries it. */\n.ss-w-fandash-countdown-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-countdown-clock { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ss-w-accent); }\n.ss-w-fandash-countdown-seg { display: inline-flex; flex-direction: column; align-items: center; }\n.ss-w-fandash-countdown-value { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }\n.ss-w-fandash-countdown-unit { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); margin-top: 3px; }\n.ss-w-fandash-countdown-colon { font-size: 22px; font-weight: 750; line-height: 1; color: var(--ss-w-faint); }\n\n/* injuries + transfers: two-column ours/theirs, in/out */\n.ss-w-fandash-transfers-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n/* injuries: a 1px divider column sits between the two team sections, each headed by crest + name */\n.ss-w-fandash-injuries-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 12px; }\n.ss-w-fandash-injuries-divider { background: var(--ss-w-line); }\n.ss-w-fandash-injuries-col, .ss-w-fandash-transfers-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }\n.ss-w-fandash-transfers-col-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }\n.ss-w-fandash-injuries-col-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-fandash-injuries-col-head .ss-w-bi-crest { width: 18px; height: 18px; }\n.ss-w-fandash-injuries-col-head .ss-w-bi-crest-mono { font-size: 9px; }\n.ss-w-fandash-injuries-col-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-injuries-empty, .ss-w-fandash-transfers-empty { font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-injury-list, .ss-w-fandash-transfer-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }\n.ss-w-fandash-injury-row, .ss-w-fandash-transfer-row { display: flex; flex-direction: column; gap: 1px; }\n.ss-w-fandash-injury-name, .ss-w-fandash-transfer-name { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }\n.ss-w-fandash-injury-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-injury-status { font-weight: 700; color: var(--ss-w-neg); }\n.ss-w-fandash-transfer-club { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-transfer-type { align-self: flex-start; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 1px 7px; margin-top: 2px; }\n\n/* reason-to-bet */\n.ss-w-fandash-reason-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-reason-item { font-size: 12.5px; padding-left: 14px; position: relative; }\n.ss-w-fandash-reason-item::before { content: \"\u2022\"; position: absolute; left: 0; color: var(--ss-w-accent); font-weight: 700; }\n\n/* where-to-watch */\n.ss-w-fandash-stations { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-fandash-station-chip { font-size: 11.5px; font-weight: 600; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 999px; padding: 4px 10px; }\n\n/* congested week: a fixed 3-column grid of upcoming fixtures (day / opponent / comp / time) */\n.ss-w-fandash-congested-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-congested-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border-radius: 10px; background: var(--ss-w-bubble); }\n.ss-w-fandash-congested-day { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }\n.ss-w-fandash-congested-opponent { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }\n.ss-w-fandash-congested-comp { font-size: 10px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-fandash-congested-time { font-size: 10.5px; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n\n/* links: 2-column grid of tappable tiles */\n.ss-w-fandash-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-link-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); }\n.ss-w-fandash-link-tile:hover { background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }\n.ss-w-fandash-link-label { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }\n.ss-w-fandash-link-chevron { flex: none; width: 12px; height: 12px; color: var(--ss-w-accent); }\n\n/* post-match result: full-time scoreboard, mirroring the live card's crest + big-score treatment.\n A neutral \"Full time\" pill sits left of a coloured Win/Draw/Loss tag; the 3-column main row\n (home crest+name | score | away crest+name, away reversed) puts the winner's score in full ink\n and the loser's dimmed; a centered meta line sits under a divider. */\n.ss-w-fandash-postmatch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }\n.ss-w-fandash-postmatch-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 6px; padding: 3px 8px; }\n.ss-w-fandash-postmatch-tag { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.ss-w-fandash-postmatch-tag--win { color: var(--ss-w-pos); }\n.ss-w-fandash-postmatch-tag--loss { color: var(--ss-w-neg); }\n.ss-w-fandash-postmatch-tag--draw { color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-fandash-postmatch-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.ss-w-fandash-postmatch-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-fandash-postmatch-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }\n.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--home { background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--away { background: var(--ss-w-away); }\n.ss-w-fandash-postmatch-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }\n.ss-w-fandash-postmatch-score-value--win { color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-score-value--lose { color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }\n.ss-w-fandash-postmatch-meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--ss-w-line); font-size: 12px; color: var(--ss-w-faint); text-align: center; }\n\n/* post-match goals: a football-ball icon per goal (mirrors the live timeline ball, duplicated here\n under the postmatch prefix), text dimmed for opponent goals and picked out in full ink + bold\n for the club's own goals */\n.ss-w-fandash-postmatch-goal-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-postmatch-goal { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-goal-ball { width: 11px; height: 11px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }\n.ss-w-fandash-postmatch-goal--club { color: var(--ss-w-ink); font-weight: 650; }\n\n/* post-match stats: home value / stat label / away value, oriented by venue (u316), each row now\n backed by a home/away split bar -- the big upgrade from plain text -- plus a legend. Mirrors\n LiveStatsCard's split-bar treatment under the postmatch-prefixed classes; the shared\n --ss-w-home/--ss-w-away/--ss-w-track tokens are defined above. */\n.ss-w-fandash-postmatch-stat-rows { display: flex; flex-direction: column; gap: 15px; }\n.ss-w-fandash-postmatch-stat { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-fandash-postmatch-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-fandash-postmatch-stat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-stat-value--home { color: var(--ss-w-home); }\n.ss-w-fandash-postmatch-stat-value--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-fandash-postmatch-stat-label { font-size: 10.5px; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }\n.ss-w-fandash-postmatch-stat-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-fandash-postmatch-stat-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-stat-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n.ss-w-fandash-postmatch-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.ss-w-fandash-postmatch-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }\n.ss-w-fandash-postmatch-legend-swatch--home { background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-legend-swatch--away { background: var(--ss-w-away); }\n\n/* post-match top performer (full mockup treatment): gradient initials avatar + name + a\n prominent rating chip. Avatar gradient reuses the --ss-w-away token, same pairing as the live\n crest fallback; \"?\" renders through the same avatar span when the name is blank. */\n.ss-w-fandash-postmatch-perf-row { display: flex; align-items: center; gap: 12px; }\n.ss-w-fandash-postmatch-perf-avatar {\n flex: none; width: 42px; height: 42px; border-radius: 50%;\n display: grid; place-items: center;\n font-size: 14px; font-weight: 800; color: #fff;\n background: linear-gradient(135deg, var(--ss-w-away), color-mix(in srgb, var(--ss-w-away) 55%, #000));\n}\n.ss-w-fandash-postmatch-perf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }\n.ss-w-fandash-postmatch-perf-rating { margin-left: auto; flex: none; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 11px; }\n\n/* post-match next (v1, modest): whenLabel is already a complete localized phrase (opponent +\n venue + kickoff) composed server-side, so this card renders just that one line -- dressed up\n with an accent rule rather than a duplicated opponent line. The richer opponent-headline/venue-\n chip/crest layout from the mockup needs a server field split and is deferred. */\n.ss-w-fandash-postmatch-next-row { display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--ss-w-accent); padding-left: 10px; }\n.ss-w-fandash-postmatch-next-when { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.3; }\n\n/* resting next: the between-matches fixture teaser -- when-label left, competition badge right */\n.ss-w-fandash-resting-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-resting-next-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }\n.ss-w-fandash-resting-next-competition { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }\n\n/* resting standings: position figure left, W-D-L/points record right */\n.ss-w-fandash-resting-standings-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-resting-standings-position { font-size: 15px; font-weight: 750; color: var(--ss-w-ink); }\n.ss-w-fandash-resting-standings-record { font-size: 11.5px; color: var(--ss-w-faint); text-align: right; }\n\n/* resting season: top scorer / key player / season tally as stacked rows */\n.ss-w-fandash-resting-season-rows { display: flex; flex-direction: column; gap: 4px; }\n.ss-w-fandash-resting-season-row { font-size: 12.5px; color: var(--ss-w-ink); }\n\n/* resting form: reuses the fixture last-five pill classes (ss-w-fandash-form / -form-pill) */\n.ss-w-fandash-resting-form .ss-w-fandash-form { margin-top: 2px; }\n\n/* live score: pulsing Live pill, crests (real image or a coloured initials fallback), a big\n tabular score, and an optional scorers line. Also where the shared home/away venue-colour\n tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats\n cards reuse them. */\n.ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }\n.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ss-w-neg); border-radius: 6px; padding: 3px 8px; }\n.ss-w-fandash-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ss-w-fandash-live-pulse 1.3s ease-in-out infinite; }\n@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }\n@media (prefers-reduced-motion: reduce) {\n .ss-w-fandash-live-dot { animation: none; }\n}\n.ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-live-competition { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-fandash-live-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }\n.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }\n.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }\n.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }\n.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }\n.ss-w-fandash-live-scorers { margin-top: 12px; display: flex; justify-content: flex-end; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }\n\n/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on\n its own side (home left, away right), most-recent 3 shown with a \"See more\" toggle for the\n rest. A 3-column grid (txt | badge | txt) per row; the spine itself is a ::before on the list. */\n.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-live-tl::before { content: \"\"; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; background: var(--ss-w-line); transform: translateX(-1px); }\n.ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }\n.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }\n.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }\n.ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }\n.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }\n.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }\n.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width: 29px; height: 19px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-variant-numeric: tabular-nums; z-index: 1; }\n.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }\n.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }\n.ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }\n.ss-w-fandash-live-tl-ball { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }\n.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }\n.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }\n.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }\n.ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }\n.ss-w-fandash-live-tl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ss-w-faint); }\n.ss-w-fandash-live-tl-more { margin-top: 4px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }\n.ss-w-fandash-live-tl-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n\n/* live stats: club value / stat label / opponent value, each row backed by a home/away split\n bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.\n No side signal reaches this card, so the club is always the home token and the opponent is\n always the away token -- see LiveStatsCard.tsx. */\n.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }\n.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }\n.ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-fandash-live-stat-label { font-size: 10.5px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }\n.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n\n.ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }\n.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }\n.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }\n.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }\n.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }\n.ss-w-fandash-live-mom-base { stroke: var(--ss-w-line); stroke-width: 1; stroke-dasharray: 3 3; }\n.ss-w-fandash-live-mom-plot { position: relative; }\n.ss-w-fandash-live-mom-now {\n position: absolute; width: 7px; height: 7px; border-radius: 50%;\n transform: translate(-50%, -50%);\n background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-ink);\n pointer-events: none;\n}\n.ss-w-mon-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-mon-mom .ss-w-fandash-live-mom { margin-top: 6px; padding-top: 0; border-top: none; }\n\n.ss-w-fandash-live-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-live-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.ss-w-fandash-live-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }\n.ss-w-fandash-live-legend-swatch--home { background: var(--ss-w-home); }\n.ss-w-fandash-live-legend-swatch--away { background: var(--ss-w-away); }\n\n/* live monitor tab bar: underline pattern mirrors .ss-w-ecard-scope; the unread dot uses --ss-w-neg */\n.ss-w-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ss-w-line); overflow-x: auto; scrollbar-width: none; }\n.ss-w-tabs::-webkit-scrollbar { display: none; }\n.ss-w-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; flex: none; white-space: nowrap; }\n.ss-w-tab[data-on] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }\n.ss-w-tab-count { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 999px; padding: 1px 6px; }\n.ss-w-tab[data-on] .ss-w-tab-count { color: var(--ss-w-accent); }\n.ss-w-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }\n\n/* Matches tab match card (MonitorMatchCard): pill row, crest/score main row, per-stat split\n bars (venue-oriented -- home always left/blue, away always right/red, never club-oriented,\n the u316 bug class), a promoted-market strip for the user's pinned stat chips, and a grace\n note once the match has gone full time. Reuses the --ss-w-home/--ss-w-away/--ss-w-track venue\n tokens and .ss-w-fandash-live-pill for the Live pill so all live surfaces share one look. */\n.ss-w-mon { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ss-w-line); border-radius: 12px; background: var(--ss-w-panel); }\n.ss-w-mon-top { display: flex; align-items: center; gap: 8px; }\n.ss-w-mon-pill { display: inline-flex; flex: none; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 3px 8px; }\n.ss-w-mon-min { flex: none; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-mon-comp { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-mon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-w-mon-side--away { flex-direction: row-reverse; text-align: right; }\n/* long club names (Wolverhampton Wanderers) wrap to two lines instead of truncating mid-word */\n.ss-w-mon-name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-mon-vs { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; }\n.ss-w-mon-score { display: flex; align-items: baseline; justify-content: center; font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-mon-score i { font-style: normal; color: var(--ss-w-faint); font-weight: 500; margin: 0 4px; }\n.ss-w-mon-scorers { font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-mon-stats { display: flex; flex-direction: column; gap: 10px; }\n.ss-w-mon-stat { display: flex; flex-direction: column; gap: 5px; }\n.ss-w-mon-pstrip { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ss-w-accent) 8%, transparent); }\n.ss-w-mon-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-mon-stat-v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-mon-stat-v--home { color: var(--ss-w-home); }\n.ss-w-mon-stat-v--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-mon-stat-l { font-size: 10px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }\n.ss-w-mon-bar { position: relative; height: 6px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-mon-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-mon-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n.ss-w-mon-stat-mkt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mon-mkt { background: color-mix(in srgb, var(--ss-w-accent) 10%, transparent); border-radius: 6px; padding: 3px 6px; color: var(--ss-w-ink); }\n.ss-w-mon-stat-mkt-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }\n.ss-w-mon-price { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ss-w-accent); }\n.ss-w-mon-susp { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 2px 6px; }\n.ss-w-mon-asof { display: block; font-size: 10.5px; font-weight: 600; color: var(--ss-w-cta); }\n.ss-w-mon-grace { font-size: 11px; color: var(--ss-w-faint); border-top: 1px solid var(--ss-w-line); padding-top: 8px; }\n\n/* Matches/Odds tab panels (MonitorTabs): the shared per-market-pin context line, the empty\n state shown when the snapshot carries no matches/markets yet, the persistent D5 in-slip badge,\n and the per-market-pin wrapper card (struck price on settlement is a pure CSS hook off its\n [data-settled] attribute -- no separate class on the price element itself). */\n.ss-w-mk-ctx { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ss-w-line); }\n/* the score and the trailing badges/pin never shrink or wrap -- only the fixture name truncates */\n.ss-w-mk-ctx b { flex: none; white-space: nowrap; }\n/* the context line's fixture name stays single-line (the two-line clamp is for the match card) */\n.ss-w-mk-ctx .ss-w-mon-name { display: block; white-space: nowrap; text-overflow: ellipsis; }\n.ss-w-mk-ctx-side { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-mk-ctx-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }\n/* flex:1 keeps the composer pinned to the panel bottom when a tab is empty */\n.ss-w-mon-empty { flex: 1; padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }\n/* Per-pin unavailable state: the pin's context line still rendered above (score, name, unpin), but\n the pin has neither a card nor history (compose-time rescue failed) -- a small inline note beats\n a bare context line with nothing under it. */\n.ss-w-mon-empty-card { padding: 8px 0 2px; font-size: 12px; color: var(--ss-w-faint); }\n.ss-w-mon-inslip { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-pos); }\n/* Odds-tab item is bare: the visible card is the market-odds card itself (no outer wrapper card),\n with an optional slim live strip above it. */\n.ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-mk-live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 2px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mk-live-score { color: var(--ss-w-ink); font-weight: 700; font-variant-numeric: tabular-nums; }\n.ss-w-mon-oddspin[data-settled] .ss-w-mo-price,\n.ss-w-mon-oddspin[data-settled] .ss-w-mon-price { text-decoration: line-through; color: var(--ss-w-faint); }\n\n/* market accordion (Task 9): one collapsed row per available market, expanding into a reused\n MarketOddsCardList ladder (hideHeader -- the row header already carries the market label). */\n/* Pinned-match tile: the match card + its odds accordion, spaced apart. */\n.ss-w-mon-item { display: flex; flex-direction: column; gap: 10px; }\n.ss-w-acc { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-acc-row { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); overflow: hidden; }\n/* Row header: expand toggle (flex:1) + the market PinToggle as a sibling (no nested buttons). */\n.ss-w-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 11px; }\n.ss-w-acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); padding: 5px 0; }\n/* Suspended: the row stays listed (knowing a market is off is useful) but is not tappable --\n its card is unservable, so a pointer cursor would promise something that cannot load. */\n.ss-w-acc-toggle--susp { cursor: default; color: var(--ss-w-faint); }\n.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; flex: none; }\n.ss-w-acc-label { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); flex: none; }\n.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); flex: none; }\n.ss-w-acc-panel { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 8px; }\n.ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }\n.ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }\n\n/* ---- Today tab (u355) ---- */\n.ss-w-sec-head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }\n.ss-w-sec-head::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n.ss-w-sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }\n.ss-w-today-live { display: flex; flex-direction: column; gap: 2px; }\n\n.ss-w-grp { border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; }\n.ss-w-grp-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; background: var(--ss-w-bubble); border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }\n.ss-w-grp-head:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-grp-chev { color: var(--ss-w-faint); font-size: 10px; flex: none; }\n.ss-w-grp-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-grp-count { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }\n.ss-w-grp-body { display: flex; flex-direction: column; padding: 2px 11px 6px; }\n\n.ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-drow:last-child { border-bottom: none; }\n.ss-w-drow-when { font-size: 11px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-drow-when--live { color: var(--ss-w-neg); }\n/* Each side ellipsises independently: a single joined string truncates the away team off the end,\n which is the u350 betting-card truncation one layer down. */\n.ss-w-drow-fx { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-drow-side { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 0; }\n.ss-w-drow-nm { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-drow-dash { flex: none; color: var(--ss-w-faint); font-size: 11px; }\n.ss-w-drow-sc { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-drow-sc--idle { color: var(--ss-w-faint); font-weight: 600; }\n.ss-w-drow--live { background: color-mix(in srgb, var(--ss-w-neg) 5%, transparent); border-radius: 8px; padding: 7px 6px; margin: 0 -6px; border-bottom: none; }\n.ss-w-drow-crest { width: 16px; height: 16px; flex: none; border-radius: 50%; object-fit: contain; background: var(--ss-w-bubble); }\n\n.ss-w-stale { font-size: 11px; font-weight: 600; color: var(--ss-w-cta); background: color-mix(in srgb, var(--ss-w-cta) 12%, var(--ss-w-panel)); border-radius: 8px; padding: 6px 9px; }\n";
50
+ declare const WIDGET_CSS = ".ss-w-root { all: revert; }\n.ss-w-root, .ss-w-root * { box-sizing: border-box; margin: 0; padding: 0; }\n.ss-w-root {\n --ss-w-accent: #17936a;\n --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;\n --ss-w-ink: #14181d; --ss-w-faint: #6b7580; --ss-w-line: #e4e8ec;\n --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;\n --ss-w-pos: #1aa563; --ss-w-neg: #e0524b;\n --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;\n --ss-w-radius: 16px; --ss-w-offset-x: 20px; --ss-w-offset-y: 20px;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n font-size: 13px; line-height: 1.5; color: var(--ss-w-ink);\n}\n@media (prefers-color-scheme: dark) {\n .ss-w-root[data-ss-w-theme=\"auto\"] {\n --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;\n --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;\n --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;\n --ss-w-pos: #37c891; --ss-w-neg: #f0655d;\n --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;\n }\n}\n.ss-w-root[data-ss-w-theme=\"dark\"] {\n --ss-w-accent: #37c891; --ss-w-cta: #ffb638; --ss-w-cta-ink: #1b1300;\n --ss-w-ink: #e8edf2; --ss-w-faint: #8b95a1;\n --ss-w-line: #2a3441; --ss-w-panel: #141b24; --ss-w-bubble: #1e2732; --ss-w-nav: #0a0f16;\n --ss-w-pos: #37c891; --ss-w-neg: #f0655d;\n --ss-w-home: #5b83c8; --ss-w-away: #e8384f; --ss-w-track: #232d3a;\n}\n.ss-w-root[data-ss-w-theme=\"light\"] {\n --ss-w-accent: #17936a; --ss-w-cta: #f5a623; --ss-w-cta-ink: #1b1300;\n --ss-w-ink: #14181d; --ss-w-faint: #6b7580;\n --ss-w-line: #e4e8ec; --ss-w-panel: #ffffff; --ss-w-bubble: #f3f5f7; --ss-w-nav: #0e1622;\n --ss-w-home: #3a63a8; --ss-w-away: #c8102e; --ss-w-track: #e9edf1;\n}\n\n/* launcher */\n.ss-w-fab-wrap { position: fixed; bottom: var(--ss-w-offset-y); z-index: 2147483000; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }\n.ss-w-root[data-ss-w-pos=\"right\"] .ss-w-fab-wrap { right: var(--ss-w-offset-x); }\n.ss-w-root[data-ss-w-pos=\"left\"] .ss-w-fab-wrap { left: var(--ss-w-offset-x); align-items: flex-start; }\n.ss-w-fab { width: 56px; height: 56px; border: none; border-radius: 50%; background: var(--ss-w-nav); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0,0,0,.28); }\n.ss-w-fab-mark { width: 30px; height: 30px; display: block; object-fit: contain; }\n.ss-w-greeting { max-width: 240px; display: flex; align-items: flex-start; background: var(--ss-w-panel); color: var(--ss-w-ink); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n.ss-w-greeting-body { position: relative; flex: 1; min-width: 0; text-align: left; background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 9px 4px 9px 12px; }\n.ss-w-greeting-x { flex: none; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 17px; line-height: 1; padding: 7px 9px 0 2px; }\n.ss-w-greeting-text { display: block; }\n/* Typing indicator: overlays the text area so bubble height stays put; hidden at\n rest, revealed only during the one-shot intro (see prefers-reduced-motion block). */\n.ss-w-greeting-dots { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; gap: 4px; opacity: 0; pointer-events: none; }\n.ss-w-greeting-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-faint); display: block; }\n/* One-shot launcher attention intro: FAB nudges, then the greeting types in.\n Gated behind no-preference so reduce-motion users get the greeting shown\n statically (text visible, no nudge, no typing). ChatFab adds .ss-w-intro once\n per page load; every animation runs a single time and settles at rest. */\n@media (prefers-reduced-motion: no-preference) {\n .ss-w-intro .ss-w-fab { animation: ss-w-nudge .8s ease both; }\n .ss-w-intro .ss-w-greeting { animation: ss-w-greet-in .45s cubic-bezier(.2,.8,.3,1.15) .8s both; }\n .ss-w-intro .ss-w-greeting-text { animation: ss-w-greet-textin .4s ease 1.65s both; }\n .ss-w-intro .ss-w-greeting-dots { animation: ss-w-greet-dots .95s ease .85s both; }\n .ss-w-intro .ss-w-greeting-dots i { animation: ss-w-greet-dotbounce .5s ease .85s 2; }\n .ss-w-intro .ss-w-greeting-dots i:nth-child(2) { animation-delay: 1s; }\n .ss-w-intro .ss-w-greeting-dots i:nth-child(3) { animation-delay: 1.15s; }\n}\n@keyframes ss-w-nudge {\n 0%, 100% { transform: none; }\n 22% { transform: translateY(-9px) rotate(-9deg); }\n 44% { transform: translateY(0) rotate(7deg); }\n 64% { transform: translateY(-4px) rotate(-4deg); }\n 82% { transform: rotate(2deg); }\n}\n@keyframes ss-w-greet-in {\n from { opacity: 0; transform: translateY(8px) scale(.92); }\n to { opacity: 1; transform: none; }\n}\n@keyframes ss-w-greet-textin { from { opacity: 0; } to { opacity: 1; } }\n@keyframes ss-w-greet-dots { 0% { opacity: 0; } 14% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }\n@keyframes ss-w-greet-dotbounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }\n\n/* panel */\n.ss-w-panel { position: fixed; bottom: calc(var(--ss-w-offset-y) + 72px); z-index: 2147483000; display: flex; flex-direction: column; width: min(460px, calc(100vw - 40px)); height: min(640px, calc(100vh - 120px)); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: var(--ss-w-radius); overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.24); }\n.ss-w-root[data-ss-w-pos=\"right\"] .ss-w-panel { right: var(--ss-w-offset-x); }\n.ss-w-root[data-ss-w-pos=\"left\"] .ss-w-panel { left: var(--ss-w-offset-x); }\n@media (max-width: 639px) {\n /* Fill via inset with no explicit height (like the site's working panel) so the\n input stays visible when the mobile keyboard/URL-bar shrinks the viewport. The\n position-specific selectors override the right/left offsets set above. */\n .ss-w-root[data-ss-w-pos=\"right\"] .ss-w-panel,\n .ss-w-root[data-ss-w-pos=\"left\"] .ss-w-panel { inset: 0; width: auto; height: auto; border: none; border-radius: 0; }\n}\n.ss-w-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-header-mark { width: 18px; height: 18px; display: block; object-fit: contain; }\n.ss-w-header-title { font-weight: 660; flex: 1; }\n.ss-w-close { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }\n.ss-w-menu-wrap { position: relative; display: grid; place-items: center; }\n.ss-w-kebab { background: none; border: none; color: var(--ss-w-faint); cursor: pointer; font-size: 16px; display: grid; place-items: center; }\n.ss-w-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 184px; padding: 6px; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }\n.ss-w-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: none; border: none; border-radius: 8px; color: var(--ss-w-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }\n.ss-w-menu-item:hover, .ss-w-menu-item:focus-visible { background: var(--ss-w-bubble); }\n.ss-w-menu-item svg { color: var(--ss-w-faint); font-size: 15px; flex: none; }\n\n/* messages */\n/* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --\n same visual rhythm as the chat message list -- but gets its own class so it isn't the same DOM\n landmark as the chat list when both exist in the panel at once (Task 16 fix round, M4). */\n/* Children of this scrolling column flex container must NOT shrink. The default flex-shrink:1\n compresses every child to fit the panel instead of letting the container scroll, and\n .ss-w-grp's own overflow:hidden then clips the compressed content away entirely \u2014 27\n competition groups rendered as blank bars on a phone. Applies to the pinned cards too. */\n.ss-w-mon-list > * { flex: none; }\n.ss-w-list, .ss-w-mon-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }\n/* Transient bottom spacer: reserves a viewport of room below a new turn so its\n top can be scrolled into view while the reply is still streaming in. Height is\n set imperatively and flex must not shrink it away. */\n.ss-w-turn-spacer { flex: none; }\n.ss-w-msg { display: flex; }\n.ss-w-user { justify-content: flex-end; }\n.ss-w-user .ss-w-bubble { background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); border-radius: 14px; padding: 8px 12px; max-width: 80%; }\n.ss-w-bot { flex-direction: column; gap: 8px; }\n.ss-w-status { font-size: 11px; color: var(--ss-w-faint); font-style: italic; }\n.ss-w-error { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #c0392b; }\n.ss-w-retry { background: none; border: 1px solid currentColor; border-radius: 10px; padding: 2px 8px; cursor: pointer; color: inherit; }\n\n/* markdown */\n.ss-w-md { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-md :where(p, ul, ol, table, pre, blockquote, h1, h2, h3, h4) { margin: 0; }\n.ss-w-md > *:first-child { margin-top: 0; }\n.ss-w-md > *:last-child { margin-bottom: 0; }\n.ss-w-md-ul { list-style: disc outside; padding-left: 18px; }\n.ss-w-md-ol { list-style: decimal outside; padding-left: 18px; }\n.ss-w-md-ul li::marker, .ss-w-md-ol li::marker { color: var(--ss-w-accent); }\n.ss-w-md-link { color: var(--ss-w-accent); text-decoration: underline; }\n.ss-w-table-wrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }\n.ss-w-md-table { border-collapse: collapse; width: max-content; min-width: 100%; font-variant-numeric: tabular-nums; }\n.ss-w-md-table td, .ss-w-md-table th { border: 1px solid var(--ss-w-line); padding: 4px 8px; text-align: left; white-space: nowrap; }\n.ss-w-md-table th { background: color-mix(in srgb, var(--ss-w-accent) 12%, var(--ss-w-panel)); font-weight: 700; }\n.ss-w-md-table tbody tr:nth-child(even) { background: var(--ss-w-bubble); }\n.ss-w-md-code { background: var(--ss-w-bubble); border-radius: 5px; padding: 1px 5px; font-family: ui-monospace, monospace; }\n\n/* entity cards */\n.ss-w-cards { display: flex; flex-direction: column; gap: 8px; }\n\n/* Entity card: identity header row over a horizontal stat strip */\n.ss-w-ecard { display: flex; flex-direction: column; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }\n\n.ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }\n.ss-w-thumb { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; color: #fff; background-color: var(--ss-w-nav); background-size: cover; background-position: center; box-shadow: 0 1px 3px rgba(0,0,0,.14); }\n.ss-w-thumb.ss-w-team { border-radius: 12px; }\n.ss-w-ecard[data-kind=\"player\"] .ss-w-thumb { background-color: var(--ss-w-accent); }\n.ss-w-nm { font-weight: 680; line-height: 1.15; overflow-wrap: anywhere; }\n.ss-w-sub { font-size: 11px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n\n/* bare card (no stat scopes): simple avatar + name row */\n.ss-w-ecard-bare { display: flex; align-items: center; }\n.ss-w-ecard-bare .ss-w-ecard-hd { padding: 10px 12px; }\n\n.ss-w-ecard-hd { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }\n.ss-w-ecard-hd .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }\n.ss-w-ecard-hd .ss-w-thumb.ss-w-team { border-radius: 10px; }\n.ss-w-ecard-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; align-self: flex-start; margin-left: auto; }\n.ss-w-ecard-meta .ss-w-ecard-season { margin: 0; }\n\n/* scope tabs: reuse the underline pattern, relocated above the strip */\n.ss-w-ecard-scopes { display: flex; align-items: stretch; gap: 2px; padding: 0 11px; border-top: 1px solid var(--ss-w-line); flex-wrap: wrap; }\n.ss-w-ecard-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 7px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }\n.ss-w-ecard-scope[aria-selected=\"true\"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }\n.ss-w-ecard-scope .ss-w-ecard-crest { width: 14px; height: 14px; }\n.ss-w-ecard-scopes + .ss-w-ecard-strip { border-top: none; }\n\n.ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }\n.ss-w-ecard-season { flex: none; margin-left: auto; align-self: center; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }\n\n/* stat strip: 1px gap over a line-colored ground paints hairlines between cells, wrap-safe */\n.ss-w-ecard-strip { display: grid; gap: 1px; background: var(--ss-w-line); border-top: 1px solid var(--ss-w-line); }\n.ss-w-ecard-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 10px 4px 11px; background: var(--ss-w-panel); }\n.ss-w-ecard-cval { height: 20px; display: flex; align-items: center; font-size: 17px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }\n.ss-w-ecard-cval .ss-w-form { width: 42px; }\n.ss-w-ecard-clabel { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--ss-w-faint); font-weight: 600; font-variant-numeric: tabular-nums; }\n\n.ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }\n.ss-w-form span { display: block; border-radius: 2px; }\n.ss-w-form-w { background: var(--ss-w-pos); }\n.ss-w-form-d { background: var(--ss-w-faint); }\n.ss-w-form-l { background: var(--ss-w-neg); }\n\n.ss-w-cards-more { align-self: flex-start; font-size: 11.5px; font-weight: 560; color: var(--ss-w-accent); background: none; border: none; cursor: pointer; padding: 3px 2px; }\n.ss-w-cards-more:hover:not(:disabled) { text-decoration: underline; }\n.ss-w-cards-more:disabled { opacity: .5; cursor: default; }\n\n/* betting insights */\n.ss-w-binsights { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-binsight { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; }\n\n/* header, competition-hero fallback: comp on the left, live badge + kickoff + pin on the right,\n all on one line (used when there is no fixture, and by MarketOddsCardList) */\n.ss-w-bi-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-bi-header-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12.5px; font-weight: 650; color: var(--ss-w-ink); }\n.ss-w-bi-header-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }\n/* two-tier header: a quiet meta line (competition + kickoff + match pin) stacked above the\n fixture, so long club names get the whole width to themselves and stop truncating (u350) */\n.ss-w-bi-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-bi-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-bi-meta-left { display: inline-flex; align-items: center; gap: 5px; min-width: 0; flex: 1; }\n.ss-w-bi-meta-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }\n.ss-w-bi-fixture-line { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-bi-kick { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; flex: none; }\n.ss-w-bi-live { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #c0392b; border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; gap: 4px; flex: none; }\n.ss-w-bi-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }\n.ss-w-bi-floor { font-size: 8.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 4px; padding: 1px 5px; display: inline-flex; align-items: center; align-self: flex-start; flex: none; }\n\n/* crests -- CSS background-image on a span, never <img> (matches .ss-w-ecard-crest precedent) */\n.ss-w-bi-comp-logo { width: 16px; height: 16px; flex: none; display: block; border-radius: 50%; object-fit: contain; }\n.ss-w-bi-crest { width: 24px; height: 24px; flex: none; display: block; border-radius: 50%; object-fit: contain; }\n.ss-w-bi-crest-mono { display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }\n\n/* fixture atoms -- crest-flanked team pair; shared by the insight fixture line and MarketOddsCardList */\n.ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-bi-vs { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); flex: none; }\n.ss-w-bi-fixture-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n/* shared crest-flanked team row (MarketOddsCardList); matches .ss-w-bi-fixture-line's hero weight\n so the fixture reads the same on both card types (u350) */\n.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n\n/* row 2, two-tier: the market label owns a full-width line above the pick row (selection grows\n left, odds + slip + pin sit right), so neither the market name nor the fixture clips (u350) */\n.ss-w-bi-action { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-bi-market { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-bi-pick-row { display: flex; align-items: center; gap: 9px; }\n.ss-w-bi-sel { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-bi-odds { flex: none; margin-left: auto; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }\n.ss-w-bi-odds b { font-size: 20px; font-family: ui-monospace, monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.05; }\n.ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }\n.ss-w-bi-pick-row .ss-w-slip { flex: none; }\n\n/* row 3: bar-chart glyph + reasoning prose + stats-expander chevron, in a subtle strip */\n.ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }\n.ss-w-bi-chart { flex: none; width: 13px; height: 12px; margin-top: 2px; opacity: .55;\n background:\n linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) left / 3px 55% no-repeat,\n linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) center / 3px 100% no-repeat,\n linear-gradient(var(--ss-w-accent), var(--ss-w-accent)) right / 3px 75% no-repeat;\n background-position: left bottom, center bottom, right bottom;\n}\n.ss-w-bi-reason-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }\n.ss-w-bi-text { font-size: 12px; line-height: 1.45; color: var(--ss-w-ink); }\n.ss-w-bi-text-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n.ss-w-bi-expand { flex: none; align-self: center; display: grid; place-items: center; width: 22px; height: 22px; margin: -2px -4px -2px 0; background: none; border: none; color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-bi-expand:hover { color: var(--ss-w-ink); }\n.ss-w-bi-arrow { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }\n.ss-w-bi-arrow-open { transform: rotate(135deg); }\n.ss-w-bi-rows { display: flex; flex-direction: column; }\n.ss-w-bi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--ss-w-line); }\n.ss-w-bi-row:first-child { border-top: none; }\n.ss-w-bi-row-lbl { font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-bi-row-num { font-family: ui-monospace, monospace; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; flex: none; color: var(--ss-w-ink); }\n.ss-w-bi-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }\n.ss-w-bi-scoped { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-bi-scopes { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; align-self: flex-start; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 2px; }\n.ss-w-bi-chip { font-size: 11px; font-weight: 600; border: none; border-radius: 7px; padding: 4px 10px; color: var(--ss-w-faint); background: none; cursor: pointer; }\n.ss-w-bi-chip[aria-pressed=\"true\"] { color: var(--ss-w-ink); background: var(--ss-w-panel); box-shadow: 0 1px 2px rgba(0,0,0,.08); }\n\n/* market odds card */\n.ss-w-mocards { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-mocard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n/* Embedded inside the market accordion, which already provides the card frame + accent rail --\n drop the inner frame so odds rows aren't double-bordered. */\n.ss-w-mocard--bare { border: none; border-radius: 0; padding: 0; background: none; }\n.ss-w-mo-sub { display: flex; flex-direction: column; gap: 5px; min-width: 0; }\n.ss-w-mo-teams { font-size: 13px; font-weight: 650; color: var(--ss-w-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mo-market-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }\n.ss-w-mo-market { font-size: 11.5px; font-weight: 600; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mo-more { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--ss-w-accent); font: inherit; font-size: 11.5px; font-weight: 600; padding: 2px 0; cursor: pointer; }\n.ss-w-mo-more:hover { text-decoration: underline; }\n.ss-w-mo-more-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }\n.ss-w-mo-more-chev-up { transform: translateY(1px) rotate(-135deg); }\n.ss-w-mo-rows { display: flex; flex-direction: column; gap: 4px; }\n.ss-w-mo-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--ss-w-line); }\n.ss-w-mo-row:last-child { border-bottom: none; }\n.ss-w-mo-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); flex: 1; min-width: 0; }\n.ss-w-mo-price { margin-left: auto; font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; color: var(--ss-w-accent); }\n/* Movement: BOTH directions share --ss-w-faint on purpose. Green-good/red-bad would frame a\n shortening price as a discount, which inverts what it actually means for the bettor. */\n.ss-w-move { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ss-w-faint); }\n.ss-w-move-prev { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 12px; text-decoration: line-through; }\n.ss-w-move-arrow { font-size: 9px; line-height: 1; }\n/* margin-left:auto is row layout, not badge styling -- it belongs to the market-odds row, which is\n a flex row, and must NOT follow the badge into the insight card's odds column. */\n.ss-w-mo-row .ss-w-move { margin-left: auto; }\n.ss-w-mo-row .ss-w-move + .ss-w-mo-price { margin-left: 0; }\n.ss-w-mo-row .ss-w-slip { margin: 0; flex: none; }\n.ss-w-mo-foot { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--ss-w-faint); }\n\n/* odds movement card */\n.ss-w-omcards { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-omcard { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-om-head { display: flex; align-items: center; gap: 8px; }\n.ss-w-om-market { font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-om-tag { margin-left: auto; flex: none; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); border: 1px solid var(--ss-w-line); border-radius: 8px; padding: 2px 7px; }\n.ss-w-om-fixture { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ss-w-faint); min-width: 0; }\n.ss-w-om-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-om-sel { font-size: 12.5px; font-weight: 600; color: var(--ss-w-ink); }\n.ss-w-om-chart { display: block; width: 100%; height: auto; }\n/* Single neutral accent in BOTH directions, deliberately. Colouring a shortening price green\n frames it as a discount, which inverts what it means for the bettor -- the same reason\n .ss-w-move keeps both directions on --ss-w-faint. */\n.ss-w-om-line { stroke: var(--ss-w-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }\n.ss-w-om-dot { fill: var(--ss-w-accent); }\n.ss-w-om-grid { stroke: var(--ss-w-line); stroke-width: 1; }\n.ss-w-om-ylab, .ss-w-om-xlab { fill: var(--ss-w-faint); font-size: 9px; font-family: ui-monospace, monospace; }\n.ss-w-om-empty { font-size: 11.5px; color: var(--ss-w-faint); padding: 6px 0; }\n.ss-w-om-foot { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-om-foot b { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ss-w-ink); }\n.ss-w-om-excl { font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-om-susp { font-size: 11px; font-weight: 600; color: #c0392b; }\n.ss-w-om-disc { font-size: 10px; font-style: italic; color: var(--ss-w-faint); }\n\n/* action buttons */\n.ss-w-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }\n.ss-w-abtn { font-size: 12px; font-weight: 560; color: var(--ss-w-accent); background: var(--ss-w-panel); border: 1px solid var(--ss-w-accent); border-radius: 16px; padding: 6px 12px; cursor: pointer; }\n.ss-w-abtn:disabled { opacity: .5; cursor: default; }\n.ss-w-abtn-shimmer { width: 140px; height: 30px; border-radius: 16px; background: linear-gradient(90deg, var(--ss-w-bubble), var(--ss-w-line), var(--ss-w-bubble)); background-size: 200% 100%; animation: ss-w-shimmer 1.2s infinite; }\n@keyframes ss-w-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }\n\n/* intent chips */\n.ss-w-chips { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-chip { font-size: 11.5px; font-weight: 550; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 14px; padding: 5px 11px; cursor: pointer; }\n\n/* input */\n.ss-w-input { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-textarea { flex: 1; resize: none; border: 1px solid var(--ss-w-line); border-radius: 12px; padding: 8px 10px; font: inherit; color: inherit; background: var(--ss-w-panel); max-height: 96px; }\n.ss-w-textarea:disabled { opacity: .55; cursor: not-allowed; }\n/* iOS Safari zooms the page when a focused field's font-size is < 16px. Bump it\n on touch devices only, so the desktop 13px design is unchanged. */\n@media (pointer: coarse) {\n .ss-w-textarea { font-size: 16px; }\n}\n.ss-w-send { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: var(--ss-w-accent); color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 16px; }\n.ss-w-stop-glyph { width: 11px; height: 11px; background: currentColor; border-radius: 2px; }\n\n/* add to slip */\n.ss-w-slip { position: relative; display: flex; }\n.ss-w-slip-btn { font-size: 11.5px; font-weight: 620; color: var(--ss-w-cta-ink); background: var(--ss-w-cta); border: 1px solid var(--ss-w-cta); border-radius: 14px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }\n.ss-w-slip-btn:disabled { opacity: .6; cursor: default; background: var(--ss-w-bubble); color: var(--ss-w-faint); border-color: var(--ss-w-line); }\n/* Anchored to the RIGHT of its (narrow) button wrapper and sized by content, growing leftward\n into the card -- inheriting the wrapper's width squeezes the text to one character per line.\n Every toast site (slip buttons, pin toggles) sits at the right edge of its row. */\n.ss-w-toast { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1; width: max-content; max-width: 210px; font-size: 11px; font-weight: 560; border-radius: 10px; padding: 5px 10px; overflow-wrap: anywhere; box-shadow: 0 4px 14px rgba(0,0,0,.14); }\n.ss-w-toast-success { color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border: 1px solid color-mix(in srgb, var(--ss-w-accent) 30%, var(--ss-w-line)); }\n.ss-w-toast-error { color: #c0392b; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); }\n\n/* pin affordance */\n.ss-w-pin-wrap { position: relative; display: inline-flex; flex: none; }\n.ss-w-pin { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; background: none; border: 1px solid var(--ss-w-line); color: var(--ss-w-faint); cursor: pointer; }\n.ss-w-pin svg { width: 12px; height: 12px; }\n.ss-w-pin:hover { color: var(--ss-w-ink); border-color: var(--ss-w-faint); }\n.ss-w-pin[data-on] { background: var(--ss-w-accent); border-color: var(--ss-w-accent); color: #fff; }\n.ss-w-pin[data-on]:hover { background: var(--ss-w-accent); color: #fff; }\n\n@media (prefers-reduced-motion: reduce) {\n .ss-w-abtn-shimmer { animation: none; }\n}\n\n/* greeting dashboard */\n.ss-w-dash { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }\n.ss-w-dash-head { display: flex; flex-direction: column; }\n.ss-w-dash-title { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--ss-w-ink); }\n.ss-w-dash-subtitle { font-size: 13px; color: var(--ss-w-faint); margin-top: 4px; }\n.ss-w-dash-foot { font-size: 11px; color: var(--ss-w-faint); margin-top: 2px; }\n\n.ss-w-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.ss-w-dash-tile--half { grid-column: span 1; }\n.ss-w-dash-tile--full { grid-column: 1 / -1; }\n\n.ss-w-dash-tile {\n display: flex; align-items: center; gap: 10px;\n padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);\n background: var(--ss-w-panel); text-align: left; cursor: pointer; width: 100%;\n color: inherit; font: inherit;\n min-width: 0; /* the panel is min(400px, 100vw - 40px): without this,\n a long Turkish title blows the column out */\n}\n.ss-w-dash-tile-icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 22px; }\n.ss-w-dash-emoji { line-height: 1; }\n.ss-w-dash-tile-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }\n.ss-w-dash-tile-title { min-width: 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }\n.ss-w-dash-tile-subtitle { min-width: 0; font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-dash-tile-chevron { flex: none; margin-left: auto; width: 14px; height: 14px; color: var(--ss-w-faint); }\n\n/* Badge + crests share their own row, below the title -- NOT the icon/chevron row. A\n nowrap badge (~70px) sitting beside icon+chevron in a ~180px half-span tile left the\n title column at ~22px wide, wrapping every title character-by-character. Here the row\n gets the body's full width, so a badge this size is comfortably inside it. */\n.ss-w-dash-tile-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }\n.ss-w-dash-tile-badge { flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }\n\n.ss-w-dash-tile-crests { flex: none; display: flex; align-items: center; }\n.ss-w-dash-tile-crest {\n width: 18px; height: 18px; border-radius: 50%;\n background-size: cover; background-position: center; background-color: var(--ss-w-bubble);\n margin-left: -6px; border: 2px solid var(--ss-w-panel); /* overlapping stack, capped at 3 in DashboardTile */\n}\n.ss-w-dash-tile-crest:first-child { margin-left: 0; }\n\n/* Market: default 2-column grid, tiles get the same accent rail as the other card\n families (.ss-w-binsight, .ss-w-mocard, .ss-w-omcard) so a market tile reads as\n part of that visual language rather than a plain unstyled button. */\n.ss-w-dash--market .ss-w-dash-tile { border-left: 3px solid var(--ss-w-accent); }\n\n/* Goal: one column of pill rows. */\n.ss-w-dash--goal .ss-w-dash-grid { grid-template-columns: 1fr; }\n.ss-w-dash--goal .ss-w-dash-tile { border-radius: 999px; padding: 10px 14px; }\n\n/* Discovery: tinted bento cards. Stacked (icon over text) so a two- or three-word title gets\n the tile's full width instead of the ~100px left of a horizontal icon+chevron -- that narrow\n column was wrapping \"Most interesting angles\" onto three lines. The chevron is dropped (the\n whole card is the tap target) and the badge + crest row is forced onto one line. */\n.ss-w-dash--discovery .ss-w-dash-tile { flex-direction: column; align-items: stretch; gap: 8px; }\n.ss-w-dash--discovery .ss-w-dash-tile-icon { align-self: flex-start; width: 32px; height: 32px; font-size: 26px; }\n.ss-w-dash--discovery .ss-w-dash-tile-chevron { display: none; }\n/* The full-span trends tile has the whole panel width, so its icon and title sit on one row\n (horizontal, centre-aligned) rather than stacking like the narrow half tiles. */\n.ss-w-dash--discovery .ss-w-dash-tile--full { flex-direction: row; align-items: center; }\n.ss-w-dash--discovery .ss-w-dash-tile--full .ss-w-dash-tile-icon { align-self: center; }\n.ss-w-dash--discovery .ss-w-dash-tile-meta { flex-wrap: nowrap; }\n.ss-w-dash--discovery .ss-w-dash-tile-crest { width: 22px; height: 22px; }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(1) { background: #eef8f1; }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(2) { background: #eef3fb; }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(3) { background: #fdf6ec; }\n.ss-w-dash--discovery .ss-w-dash-tile:nth-child(4) { background: #f5eefb; }\n\n/* club fan pre-match dashboard */\n.ss-w-fandash { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }\n.ss-w-fandash-greeting { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ss-w-ink); }\n.ss-w-fandash-greeting--lead { font-weight: 400; }\n.ss-w-fandash-cards { display: flex; flex-direction: column; gap: 8px; }\n\n/* Shared card chrome -- a plain <div> for [data] cards, a <button> for [prefill] cards. Both\n share the same box so the two families read as one system, not two ad hoc layouts. */\n.ss-w-fandash-card {\n display: flex; flex-direction: column; gap: 8px;\n padding: 12px; border-radius: 14px; border: 1px solid var(--ss-w-line);\n background: var(--ss-w-panel); text-align: left;\n color: inherit; font: inherit; width: 100%; min-width: 0;\n}\n.ss-w-fandash-card--tap { cursor: pointer; border-left: 3px solid var(--ss-w-accent); }\n.ss-w-fandash-card--tap:hover { background: var(--ss-w-bubble); }\n.ss-w-fandash-card-cta { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); }\n\n/* Shared alignment primitives: a small letterspaced section eyebrow, and a 3-column value/label\n split reused by the fixture head-to-head (and any future stat-row card). */\n.ss-w-fandash-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); }\n.ss-w-fandash-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-split-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }\n.ss-w-fandash-split-value { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); line-height: 1; }\n.ss-w-fandash-split-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n\n/* fixture card */\n.ss-w-fandash-fixture-teams { display: flex; align-items: center; gap: 10px; }\n.ss-w-fandash-fixture-team { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }\n.ss-w-fandash-fixture-team--away { justify-content: flex-end; }\n.ss-w-fandash-fixture-team .ss-w-bi-crest { width: 30px; height: 30px; }\n.ss-w-fandash-fixture-team .ss-w-bi-crest-mono { font-size: 12px; }\n.ss-w-fandash-fixture-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }\n.ss-w-fandash-fixture-team--away .ss-w-fandash-fixture-name { text-align: right; }\n.ss-w-fandash-fixture-vs { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }\n/* date + venue as labelled rows, so a long stadium name gets its own line to ellipsis in */\n.ss-w-fandash-fixture-meta { border-top: 1px solid var(--ss-w-line); padding-top: 10px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-fixture-kickoff { font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-fandash-fixture-venue { font-weight: 600; }\n.ss-w-fandash-fact { font-size: 12px; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 8px; padding: 6px 8px; }\n/* each head-to-head figure sits on its own shaded tile, so the grid gap separates wins/draws/losses */\n.ss-w-fandash-h2h .ss-w-fandash-split-cell { background: var(--ss-w-bubble); border-radius: 10px; padding: 12px 6px; }\n/* extra breathing room between the tally row and the fact beyond the card's own gap */\n.ss-w-fandash-h2h .ss-w-fandash-fact { margin-top: 4px; }\n\n/* Team form: a two-column result-card grid, left = home team's last 5, right = away team's last 5,\n most-recent first. The head row carries each column's crest + name; the rows grid is filled\n home-cell/away-cell per index so the 2-col grid lays out pairs without extra JS bookkeeping. */\n.ss-w-fandash-teamform-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }\n.ss-w-fandash-teamform-head-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11.5px; font-weight: 750; }\n.ss-w-fandash-teamform-head-team .ss-w-bi-crest { width: 18px; height: 18px; }\n.ss-w-fandash-teamform-head-team .ss-w-bi-crest-mono { font-size: 8px; }\n.ss-w-fandash-teamform-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-teamform-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 6px; }\n.ss-w-fandash-teamform-slot { display: block; min-width: 0; }\n.ss-w-fandash-teamform-cell {\n display: flex; align-items: center; gap: 4px; border-radius: 7px; padding: 4px 5px; color: #fff;\n}\n.ss-w-fandash-teamform-cell--win { background: var(--ss-w-pos); }\n.ss-w-fandash-teamform-cell--loss { background: var(--ss-w-neg); }\n.ss-w-fandash-teamform-cell--draw { background: var(--ss-w-faint); }\n.ss-w-fandash-teamform-cell .ss-w-bi-crest { width: 16px; height: 16px; flex: none; background: rgba(255, 255, 255, .22); }\n.ss-w-fandash-teamform-cell .ss-w-bi-crest-mono { font-size: 7px; color: #fff; }\n.ss-w-fandash-teamform-score { flex: 1; text-align: center; font-size: 12.5px; font-weight: 750; font-variant-numeric: tabular-nums; }\n.ss-w-fandash-injuries-more { margin-top: 10px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }\n.ss-w-fandash-injuries-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n.ss-w-fandash-form { display: inline-flex; gap: 3px; flex: none; }\n.ss-w-fandash-form-pill {\n display: inline-grid; place-items: center; width: 16px; height: 16px;\n border-radius: 4px; font-size: 9.5px; font-weight: 700; color: #fff;\n}\n.ss-w-fandash-form-pill--win { background: var(--ss-w-pos); }\n.ss-w-fandash-form-pill--loss { background: var(--ss-w-neg); }\n.ss-w-fandash-form-pill--draw { background: var(--ss-w-faint); }\n\n/* countdown card: a compact top card -- section eyebrow left, colon-separated clock right. Each\n segment stacks its figure over a small unit label (d/h/m/s). The exact kickoff date is not\n repeated here; the fixture card below carries it. */\n.ss-w-fandash-countdown-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-countdown-clock { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--ss-w-accent); }\n.ss-w-fandash-countdown-seg { display: inline-flex; flex-direction: column; align-items: center; }\n.ss-w-fandash-countdown-value { font-size: 26px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.01em; }\n.ss-w-fandash-countdown-unit { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ss-w-faint); margin-top: 3px; }\n.ss-w-fandash-countdown-colon { font-size: 22px; font-weight: 750; line-height: 1; color: var(--ss-w-faint); }\n\n/* injuries + transfers: two-column ours/theirs, in/out */\n.ss-w-fandash-transfers-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }\n/* injuries: a 1px divider column sits between the two team sections, each headed by crest + name */\n.ss-w-fandash-injuries-cols { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 12px; }\n.ss-w-fandash-injuries-divider { background: var(--ss-w-line); }\n.ss-w-fandash-injuries-col, .ss-w-fandash-transfers-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; }\n.ss-w-fandash-transfers-col-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }\n.ss-w-fandash-injuries-col-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-fandash-injuries-col-head .ss-w-bi-crest { width: 18px; height: 18px; }\n.ss-w-fandash-injuries-col-head .ss-w-bi-crest-mono { font-size: 9px; }\n.ss-w-fandash-injuries-col-head-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-injuries-empty, .ss-w-fandash-transfers-empty { font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-injury-list, .ss-w-fandash-transfer-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }\n.ss-w-fandash-injury-row, .ss-w-fandash-transfer-row { display: flex; flex-direction: column; gap: 1px; }\n.ss-w-fandash-injury-name, .ss-w-fandash-transfer-name { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }\n.ss-w-fandash-injury-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 10.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-injury-status { font-weight: 700; color: var(--ss-w-neg); }\n.ss-w-fandash-transfer-club { font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-transfer-type { align-self: flex-start; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 13%, var(--ss-w-panel)); border-radius: 999px; padding: 1px 7px; margin-top: 2px; }\n\n/* reason-to-bet */\n.ss-w-fandash-reason-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-reason-item { font-size: 12.5px; padding-left: 14px; position: relative; }\n.ss-w-fandash-reason-item::before { content: \"\u2022\"; position: absolute; left: 0; color: var(--ss-w-accent); font-weight: 700; }\n\n/* where-to-watch */\n.ss-w-fandash-stations { display: flex; flex-wrap: wrap; gap: 6px; }\n.ss-w-fandash-station-chip { font-size: 11.5px; font-weight: 600; color: var(--ss-w-ink); background: var(--ss-w-bubble); border-radius: 999px; padding: 4px 10px; }\n\n/* congested week: a fixed 3-column grid of upcoming fixtures (day / opponent / comp / time) */\n.ss-w-fandash-congested-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-congested-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px; border-radius: 10px; background: var(--ss-w-bubble); }\n.ss-w-fandash-congested-day { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ss-w-faint); }\n.ss-w-fandash-congested-opponent { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }\n.ss-w-fandash-congested-comp { font-size: 10px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-fandash-congested-time { font-size: 10.5px; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n\n/* links: 2-column grid of tappable tiles */\n.ss-w-fandash-link-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }\n.ss-w-fandash-link-tile { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: inherit; background: color-mix(in srgb, var(--ss-w-accent) 10%, var(--ss-w-panel)); }\n.ss-w-fandash-link-tile:hover { background: color-mix(in srgb, var(--ss-w-accent) 16%, var(--ss-w-panel)); }\n.ss-w-fandash-link-label { font-size: 12.5px; font-weight: 650; overflow-wrap: anywhere; }\n.ss-w-fandash-link-chevron { flex: none; width: 12px; height: 12px; color: var(--ss-w-accent); }\n\n/* post-match result: full-time scoreboard, mirroring the live card's crest + big-score treatment.\n A neutral \"Full time\" pill sits left of a coloured Win/Draw/Loss tag; the 3-column main row\n (home crest+name | score | away crest+name, away reversed) puts the winner's score in full ink\n and the loser's dimmed; a centered meta line sits under a divider. */\n.ss-w-fandash-postmatch-top { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; }\n.ss-w-fandash-postmatch-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 6px; padding: 3px 8px; }\n.ss-w-fandash-postmatch-tag { margin-left: auto; flex: none; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }\n.ss-w-fandash-postmatch-tag--win { color: var(--ss-w-pos); }\n.ss-w-fandash-postmatch-tag--loss { color: var(--ss-w-neg); }\n.ss-w-fandash-postmatch-tag--draw { color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-fandash-postmatch-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.ss-w-fandash-postmatch-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-fandash-postmatch-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }\n.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--home { background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-crest--fallback.ss-w-fandash-postmatch-crest--away { background: var(--ss-w-away); }\n.ss-w-fandash-postmatch-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }\n.ss-w-fandash-postmatch-score-value--win { color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-score-value--lose { color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }\n.ss-w-fandash-postmatch-meta { margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--ss-w-line); font-size: 12px; color: var(--ss-w-faint); text-align: center; }\n\n/* post-match goals: a football-ball icon per goal (mirrors the live timeline ball, duplicated here\n under the postmatch prefix), text dimmed for opponent goals and picked out in full ink + bold\n for the club's own goals */\n.ss-w-fandash-postmatch-goal-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-postmatch-goal { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-goal-ball { width: 11px; height: 11px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }\n.ss-w-fandash-postmatch-goal--club { color: var(--ss-w-ink); font-weight: 650; }\n\n/* post-match stats: home value / stat label / away value, oriented by venue (u316), each row now\n backed by a home/away split bar -- the big upgrade from plain text -- plus a legend. Mirrors\n LiveStatsCard's split-bar treatment under the postmatch-prefixed classes; the shared\n --ss-w-home/--ss-w-away/--ss-w-track tokens are defined above. */\n.ss-w-fandash-postmatch-stat-rows { display: flex; flex-direction: column; gap: 15px; }\n.ss-w-fandash-postmatch-stat { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-fandash-postmatch-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-fandash-postmatch-stat-value { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-postmatch-stat-value--home { color: var(--ss-w-home); }\n.ss-w-fandash-postmatch-stat-value--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-fandash-postmatch-stat-label { font-size: 10.5px; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }\n.ss-w-fandash-postmatch-stat-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-fandash-postmatch-stat-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-stat-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n.ss-w-fandash-postmatch-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-postmatch-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.ss-w-fandash-postmatch-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }\n.ss-w-fandash-postmatch-legend-swatch--home { background: var(--ss-w-home); }\n.ss-w-fandash-postmatch-legend-swatch--away { background: var(--ss-w-away); }\n\n/* post-match top performer (full mockup treatment): gradient initials avatar + name + a\n prominent rating chip. Avatar gradient reuses the --ss-w-away token, same pairing as the live\n crest fallback; \"?\" renders through the same avatar span when the name is blank. */\n.ss-w-fandash-postmatch-perf-row { display: flex; align-items: center; gap: 12px; }\n.ss-w-fandash-postmatch-perf-avatar {\n flex: none; width: 42px; height: 42px; border-radius: 50%;\n display: grid; place-items: center;\n font-size: 14px; font-weight: 800; color: #fff;\n background: linear-gradient(135deg, var(--ss-w-away), color-mix(in srgb, var(--ss-w-away) 55%, #000));\n}\n.ss-w-fandash-postmatch-perf-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; }\n.ss-w-fandash-postmatch-perf-rating { margin-left: auto; flex: none; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); background: color-mix(in srgb, var(--ss-w-accent) 14%, var(--ss-w-panel)); border-radius: 999px; padding: 3px 11px; }\n\n/* post-match next (v1, modest): whenLabel is already a complete localized phrase (opponent +\n venue + kickoff) composed server-side, so this card renders just that one line -- dressed up\n with an accent rule rather than a duplicated opponent line. The richer opponent-headline/venue-\n chip/crest layout from the mockup needs a server field split and is deferred. */\n.ss-w-fandash-postmatch-next-row { display: flex; align-items: center; gap: 10px; border-left: 3px solid var(--ss-w-accent); padding-left: 10px; }\n.ss-w-fandash-postmatch-next-when { font-size: 13.5px; font-weight: 650; color: var(--ss-w-ink); line-height: 1.3; }\n\n/* resting next: the between-matches fixture teaser -- when-label left, competition badge right */\n.ss-w-fandash-resting-next-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-resting-next-when { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; }\n.ss-w-fandash-resting-next-competition { flex: none; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ss-w-faint); }\n\n/* resting standings: position figure left, W-D-L/points record right */\n.ss-w-fandash-resting-standings-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }\n.ss-w-fandash-resting-standings-position { font-size: 15px; font-weight: 750; color: var(--ss-w-ink); }\n.ss-w-fandash-resting-standings-record { font-size: 11.5px; color: var(--ss-w-faint); text-align: right; }\n\n/* resting season: top scorer / key player / season tally as stacked rows */\n.ss-w-fandash-resting-season-rows { display: flex; flex-direction: column; gap: 4px; }\n.ss-w-fandash-resting-season-row { font-size: 12.5px; color: var(--ss-w-ink); }\n\n/* resting form: reuses the fixture last-five pill classes (ss-w-fandash-form / -form-pill) */\n.ss-w-fandash-resting-form .ss-w-fandash-form { margin-top: 2px; }\n\n/* live score: pulsing Live pill, crests (real image or a coloured initials fallback), a big\n tabular score, and an optional scorers line. Also where the shared home/away venue-colour\n tokens (--ss-w-home / --ss-w-away / --ss-w-track) are defined above -- the timeline and stats\n cards reuse them. */\n.ss-w-fandash-live-top { display: flex; align-items: center; gap: 8px; }\n.ss-w-fandash-live-pill { display: inline-flex; flex: none; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--ss-w-neg); border-radius: 6px; padding: 3px 8px; }\n.ss-w-fandash-live-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: ss-w-fandash-live-pulse 1.3s ease-in-out infinite; }\n@keyframes ss-w-fandash-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }\n@media (prefers-reduced-motion: reduce) {\n .ss-w-fandash-live-dot { animation: none; }\n}\n.ss-w-fandash-live-minute { flex: none; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-live-competition { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-fandash-live-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-fandash-live-side { display: flex; align-items: center; gap: 10px; min-width: 0; }\n.ss-w-fandash-live-side--away { flex-direction: row-reverse; text-align: right; }\n.ss-w-fandash-live-crest { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12.5px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }\n.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--home { background: var(--ss-w-home); }\n.ss-w-fandash-live-crest--fallback.ss-w-fandash-live-crest--away { background: var(--ss-w-away); }\n.ss-w-fandash-live-team-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--ss-w-ink); }\n.ss-w-fandash-live-score-main { display: flex; align-items: baseline; justify-content: center; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-fandash-live-score-sep { color: var(--ss-w-faint); font-weight: 500; margin: 0 5px; }\n.ss-w-fandash-live-scorers { margin-top: 12px; display: flex; justify-content: flex-end; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-fandash-live-scorers-icon { flex: none; color: var(--ss-w-away); }\n\n/* live timeline: a compact two-sided event list down a centre spine -- each club's events sit on\n its own side (home left, away right), most-recent 3 shown with a \"See more\" toggle for the\n rest. A 3-column grid (txt | badge | txt) per row; the spine itself is a ::before on the list. */\n.ss-w-fandash-live-tl { position: relative; display: flex; flex-direction: column; gap: 6px; }\n.ss-w-fandash-live-tl::before { content: \"\"; position: absolute; left: 50%; top: 1px; bottom: 1px; width: 2px; background: var(--ss-w-line); transform: translateX(-1px); }\n.ss-w-fandash-live-tl-ev { display: grid; grid-template-columns: 1fr 32px 1fr; align-items: center; gap: 6px; }\n.ss-w-fandash-live-tl-txt { display: flex; align-items: center; gap: 7px; font-size: 13px; min-width: 0; }\n.ss-w-fandash-live-tl-ev--home .ss-w-fandash-live-tl-txt { grid-column: 1; justify-content: flex-end; }\n.ss-w-fandash-live-tl-ev--away .ss-w-fandash-live-tl-txt { grid-column: 3; justify-content: flex-start; flex-direction: row-reverse; }\n.ss-w-fandash-live-tl-who { font-weight: 650; color: var(--ss-w-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }\n.ss-w-fandash-live-tl-off { font-weight: 500; color: var(--ss-w-faint); }\n.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-who { font-weight: 800; }\n.ss-w-fandash-live-tl-badge { grid-column: 2; justify-self: center; min-width: 29px; height: 19px; padding: 0 4px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--ss-w-ink); background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); font-variant-numeric: tabular-nums; z-index: 1; }\n.ss-w-fandash-live-tl-ev--goal .ss-w-fandash-live-tl-badge { background: var(--ss-w-accent); color: #fff; border-color: transparent; }\n.ss-w-fandash-live-tl-ico { width: 17px; height: 17px; flex: none; display: grid; place-items: center; }\n.ss-w-fandash-live-tl-ico--goal { border-radius: 50%; background: color-mix(in srgb, var(--ss-w-away) 16%, transparent); }\n.ss-w-fandash-live-tl-ball { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #fff 0 34%, transparent 36%), var(--ss-w-ink); border: 1px solid var(--ss-w-ink); }\n.ss-w-fandash-live-tl-card { width: 9px; height: 12px; border-radius: 2px; display: block; }\n.ss-w-fandash-live-tl-card--yellow { background: var(--ss-w-cta); }\n.ss-w-fandash-live-tl-card--red { background: var(--ss-w-away); }\n.ss-w-fandash-live-tl-subarrows { font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: -1px; color: var(--ss-w-accent); }\n.ss-w-fandash-live-tl-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ss-w-faint); }\n.ss-w-fandash-live-tl-more { margin-top: 4px; width: 100%; background: var(--ss-w-bubble); border: 1px solid var(--ss-w-line); border-radius: 9px; padding: 7px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ss-w-accent); cursor: pointer; }\n.ss-w-fandash-live-tl-more:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: 2px; }\n\n/* live stats: club value / stat label / opponent value, each row backed by a home/away split\n bar, plus an optional momentum wave (or its text fallback) and a club/opponent colour legend.\n No side signal reaches this card, so the club is always the home token and the opponent is\n always the away token -- see LiveStatsCard.tsx. */\n.ss-w-fandash-live-stat-rows { display: flex; flex-direction: column; gap: 15px; }\n.ss-w-fandash-live-stat { display: flex; flex-direction: column; gap: 7px; }\n.ss-w-fandash-live-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-fandash-live-stat-value { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-fandash-live-stat-value--home { color: var(--ss-w-home); }\n.ss-w-fandash-live-stat-value--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-fandash-live-stat-label { font-size: 10.5px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .04em; }\n.ss-w-fandash-live-bar { position: relative; height: 8px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-fandash-live-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-fandash-live-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n\n.ss-w-fandash-live-momentum { font-size: 11.5px; font-weight: 650; color: var(--ss-w-accent); }\n.ss-w-fandash-live-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-fandash-live-mom-caption { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-fandash-live-mom-svg { width: 100%; height: 56px; display: block; overflow: visible; }\n.ss-w-fandash-live-mom-home { fill: var(--ss-w-home); fill-opacity: .85; }\n.ss-w-fandash-live-mom-away { fill: var(--ss-w-away); fill-opacity: .85; }\n.ss-w-fandash-live-mom-line { fill: none; stroke: color-mix(in srgb, var(--ss-w-ink) 55%, transparent); stroke-width: 1.5; }\n.ss-w-fandash-live-mom-base { stroke: var(--ss-w-line); stroke-width: 1; stroke-dasharray: 3 3; }\n.ss-w-fandash-live-mom-plot { position: relative; }\n.ss-w-fandash-live-mom-now {\n position: absolute; width: 7px; height: 7px; border-radius: 50%;\n transform: translate(-50%, -50%);\n background: var(--ss-w-panel); border: 1.5px solid var(--ss-w-ink);\n pointer-events: none;\n}\n.ss-w-mon-mom { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); }\n.ss-w-mon-mom .ss-w-fandash-live-mom { margin-top: 6px; padding-top: 0; border-top: none; }\n\n.ss-w-fandash-live-legend { display: flex; gap: 14px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--ss-w-line); font-size: 11px; color: var(--ss-w-faint); }\n.ss-w-fandash-live-legend-item { display: inline-flex; align-items: center; gap: 6px; }\n.ss-w-fandash-live-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }\n.ss-w-fandash-live-legend-swatch--home { background: var(--ss-w-home); }\n.ss-w-fandash-live-legend-swatch--away { background: var(--ss-w-away); }\n\n/* live monitor tab bar: underline pattern mirrors .ss-w-ecard-scope; the unread dot uses --ss-w-neg */\n.ss-w-tabs { display: flex; align-items: stretch; gap: 2px; border-bottom: 1px solid var(--ss-w-line); overflow-x: auto; scrollbar-width: none; }\n.ss-w-tabs::-webkit-scrollbar { display: none; }\n.ss-w-tab { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 620; color: var(--ss-w-faint); background: none; border: none; cursor: pointer; padding: 9px 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; flex: none; white-space: nowrap; }\n.ss-w-tab[data-on] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }\n.ss-w-tab-count { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 999px; padding: 1px 6px; }\n.ss-w-tab[data-on] .ss-w-tab-count { color: var(--ss-w-accent); }\n.ss-w-tab-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }\n\n/* Matches tab match card (MonitorMatchCard): pill row, crest/score main row, per-stat split\n bars (venue-oriented -- home always left/blue, away always right/red, never club-oriented,\n the u316 bug class), a promoted-market strip for the user's pinned stat chips, and a grace\n note once the match has gone full time. Reuses the --ss-w-home/--ss-w-away/--ss-w-track venue\n tokens and .ss-w-fandash-live-pill for the Live pill so all live surfaces share one look. */\n.ss-w-mon { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ss-w-line); border-radius: 12px; background: var(--ss-w-panel); }\n.ss-w-mon-top { display: flex; align-items: center; gap: 8px; }\n.ss-w-mon-pill { display: inline-flex; flex: none; align-items: center; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 3px 8px; }\n.ss-w-mon-min { flex: none; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-mon-comp { margin-left: auto; font-size: 11px; font-weight: 650; color: var(--ss-w-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-mon-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }\n.ss-w-mon-side { display: flex; align-items: center; gap: 8px; min-width: 0; }\n.ss-w-mon-side--away { flex-direction: row-reverse; text-align: right; }\n/* long club names (Wolverhampton Wanderers) wrap to two lines instead of truncating mid-word */\n.ss-w-mon-name { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; font-size: 13px; font-weight: 700; color: var(--ss-w-ink); }\n.ss-w-mon-vs { font-size: 12px; font-weight: 700; color: var(--ss-w-faint); text-transform: uppercase; }\n.ss-w-mon-score { display: flex; align-items: baseline; justify-content: center; font-size: 26px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; color: var(--ss-w-ink); }\n.ss-w-mon-score i { font-style: normal; color: var(--ss-w-faint); font-weight: 500; margin: 0 4px; }\n.ss-w-mon-scorers { font-size: 11.5px; color: var(--ss-w-faint); overflow-wrap: anywhere; }\n.ss-w-mon-stats { display: flex; flex-direction: column; gap: 10px; }\n.ss-w-mon-stat { display: flex; flex-direction: column; gap: 5px; }\n.ss-w-mon-pstrip { padding: 6px 8px; border-radius: 8px; background: color-mix(in srgb, var(--ss-w-accent) 8%, transparent); }\n.ss-w-mon-stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 8px; }\n.ss-w-mon-stat-v { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-mon-stat-v--home { color: var(--ss-w-home); }\n.ss-w-mon-stat-v--away { color: var(--ss-w-away); text-align: right; }\n.ss-w-mon-stat-l { font-size: 10px; font-weight: 700; text-align: center; color: var(--ss-w-faint); text-transform: uppercase; letter-spacing: .03em; }\n.ss-w-mon-bar { position: relative; height: 6px; border-radius: 999px; background: var(--ss-w-track); overflow: hidden; display: flex; }\n.ss-w-mon-bar-home { height: 100%; background: var(--ss-w-home); }\n.ss-w-mon-bar-away { height: 100%; background: var(--ss-w-away); margin-left: auto; }\n.ss-w-mon-stat-mkt { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mon-mkt { background: color-mix(in srgb, var(--ss-w-accent) 10%, transparent); border-radius: 6px; padding: 3px 6px; color: var(--ss-w-ink); }\n.ss-w-mon-stat-mkt-right { display: flex; align-items: center; gap: 6px; margin-left: auto; }\n.ss-w-mon-price { font-family: ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 700; color: var(--ss-w-accent); }\n.ss-w-mon-susp { font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-bubble); border-radius: 6px; padding: 2px 6px; }\n.ss-w-mon-asof { display: block; font-size: 10.5px; font-weight: 600; color: var(--ss-w-cta); }\n.ss-w-mon-grace { font-size: 11px; color: var(--ss-w-faint); border-top: 1px solid var(--ss-w-line); padding-top: 8px; }\n\n/* Matches/Odds tab panels (MonitorTabs): the shared per-market-pin context line, the empty\n state shown when the snapshot carries no matches/markets yet, the persistent D5 in-slip badge,\n and the per-market-pin wrapper card (struck price on settlement is a pure CSS hook off its\n [data-settled] attribute -- no separate class on the price element itself). */\n.ss-w-mk-ctx { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--ss-w-line); }\n/* the score and the trailing badges/pin never shrink or wrap -- only the fixture name truncates */\n.ss-w-mk-ctx b { flex: none; white-space: nowrap; }\n/* the context line's fixture name stays single-line (the two-line clamp is for the match card) */\n.ss-w-mk-ctx .ss-w-mon-name { display: block; white-space: nowrap; text-overflow: ellipsis; }\n.ss-w-mk-ctx-side { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-mk-ctx-right { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }\n/* flex:1 keeps the composer pinned to the panel bottom when a tab is empty */\n.ss-w-mon-empty { flex: 1; padding: 24px 16px; text-align: center; font-size: 12.5px; color: var(--ss-w-faint); }\n/* Per-pin unavailable state: the pin's context line still rendered above (score, name, unpin), but\n the pin has neither a card nor history (compose-time rescue failed) -- a small inline note beats\n a bare context line with nothing under it. */\n.ss-w-mon-empty-card { padding: 8px 0 2px; font-size: 12px; color: var(--ss-w-faint); }\n.ss-w-mon-inslip { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: var(--ss-w-pos); }\n/* Odds-tab item is bare: the visible card is the market-odds card itself (no outer wrapper card),\n with an optional slim live strip above it. */\n.ss-w-mon-oddspin { display: flex; flex-direction: column; gap: 8px; }\n.ss-w-mk-live { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 0 2px; font-size: 11.5px; color: var(--ss-w-faint); }\n.ss-w-mk-live-score { color: var(--ss-w-ink); font-weight: 700; font-variant-numeric: tabular-nums; }\n.ss-w-mon-oddspin[data-settled] .ss-w-mo-price,\n.ss-w-mon-oddspin[data-settled] .ss-w-mon-price { text-decoration: line-through; color: var(--ss-w-faint); }\n\n/* market accordion (Task 9): one collapsed row per available market, expanding into a reused\n MarketOddsCardList ladder (hideHeader -- the row header already carries the market label). */\n/* Pinned-match tile: the match card + its odds accordion, spaced apart. */\n.ss-w-mon-item { display: flex; flex-direction: column; gap: 10px; }\n.ss-w-acc { display: flex; flex-direction: column; gap: 6px; }\n.ss-w-acc-row { background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; border-left: 3px solid var(--ss-w-accent); overflow: hidden; }\n/* Row header: expand toggle (flex:1) + the market PinToggle as a sibling (no nested buttons). */\n.ss-w-acc-head { display: flex; align-items: center; gap: 8px; padding: 6px 9px 6px 11px; }\n.ss-w-acc-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: var(--ss-w-ink); padding: 5px 0; }\n/* Suspended: the row stays listed (knowing a market is off is useful) but is not tappable --\n its card is unservable, so a pointer cursor would promise something that cannot load. */\n.ss-w-acc-toggle--susp { cursor: default; color: var(--ss-w-faint); }\n.ss-w-acc-chevron { color: var(--ss-w-faint); font-size: 11px; flex: none; }\n.ss-w-acc-label { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-acc-badge { font-size: 10.5px; font-weight: 700; color: var(--ss-w-accent); flex: none; }\n.ss-w-acc-susp { margin-left: auto; font-size: 10.5px; color: var(--ss-w-faint); flex: none; }\n.ss-w-acc-panel { padding: 0 11px 10px; display: flex; flex-direction: column; gap: 8px; }\n.ss-w-acc-insight { font-size: 12px; color: var(--ss-w-ink); background: color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-panel)); border-radius: 8px; padding: 7px 9px; }\n.ss-w-acc-retry { font-size: 12px; color: var(--ss-w-neg); cursor: pointer; padding: 6px 0; }\n\n/* ---- Today tab (u355) ---- */\n.ss-w-sec-head { display: flex; align-items: center; gap: 7px; padding: 2px 2px 0; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ss-w-faint); }\n.ss-w-sec-head::after { content: \"\"; flex: 1; height: 1px; background: var(--ss-w-line); }\n.ss-w-sec-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-w-neg); flex: none; }\n.ss-w-today-live { display: flex; flex-direction: column; gap: 2px; }\n\n.ss-w-grp { border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; }\n.ss-w-grp-head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 11px; background: var(--ss-w-bubble); border: none; font: inherit; color: var(--ss-w-ink); cursor: pointer; text-align: left; }\n.ss-w-grp-head:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }\n.ss-w-grp-chev { color: var(--ss-w-faint); font-size: 10px; flex: none; }\n.ss-w-grp-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-grp-country { font-weight: 600; color: var(--ss-w-faint); }\n.ss-w-grp-count { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }\n.ss-w-grp-body { display: flex; flex-direction: column; padding: 2px 11px 6px; }\n\n.ss-w-drow { display: grid; grid-template-columns: 42px minmax(0,1fr) auto 22px; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--ss-w-line); }\n.ss-w-drow:last-child { border-bottom: none; }\n.ss-w-drow-when { font-size: 11px; font-weight: 700; color: var(--ss-w-faint); font-variant-numeric: tabular-nums; }\n.ss-w-drow-when--live { color: var(--ss-w-neg); }\n/* Each side ellipsises independently: a single joined string truncates the away team off the end,\n which is the u350 betting-card truncation one layer down. */\n.ss-w-drow-fx { display: flex; align-items: center; gap: 6px; min-width: 0; }\n.ss-w-drow-side { display: flex; align-items: center; gap: 5px; min-width: 0; flex: 1 1 0; }\n.ss-w-drow-nm { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ss-w-drow-dash { flex: none; color: var(--ss-w-faint); font-size: 11px; }\n.ss-w-drow-sc { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-ink); }\n.ss-w-drow-sc--idle { color: var(--ss-w-faint); font-weight: 600; }\n.ss-w-drow--live { background: color-mix(in srgb, var(--ss-w-neg) 5%, transparent); border-radius: 8px; padding: 7px 6px; margin: 0 -6px; border-bottom: none; }\n.ss-w-drow-crest { width: 16px; height: 16px; flex: none; border-radius: 50%; object-fit: contain; background: var(--ss-w-bubble); }\n\n.ss-w-stale { font-size: 11px; font-weight: 600; color: var(--ss-w-cta); background: color-mix(in srgb, var(--ss-w-cta) 12%, var(--ss-w-panel)); border-radius: 8px; padding: 6px 9px; }\n";
51
51
 
52
52
  export { StatsWidget, type StatsWidgetConfig, type StatsWidgetProps, WIDGET_CSS };
package/dist/index.js CHANGED
@@ -91,6 +91,7 @@ var STRINGS = {
91
91
  accordionSuspended: "Suspended",
92
92
  tabToday: "Today",
93
93
  sectionLive: "Live",
94
+ halfTime: "HT",
94
95
  staleStates: "Live scores can't be updated \u2014 showing the last known state."
95
96
  },
96
97
  tr: {
@@ -168,6 +169,7 @@ var STRINGS = {
168
169
  accordionSuspended: "Ask\u0131da",
169
170
  tabToday: "Bug\xFCn",
170
171
  sectionLive: "Canl\u0131",
172
+ halfTime: "\u0130Y",
171
173
  staleStates: "Canl\u0131 skorlar g\xFCncellenemiyor \u2014 son bilinen durum g\xF6steriliyor."
172
174
  }
173
175
  };
@@ -246,6 +248,7 @@ function normalizeUi(cfg) {
246
248
  tabOdds: strings.tabOdds,
247
249
  tabToday: strings.tabToday,
248
250
  sectionLive: strings.sectionLive,
251
+ halfTime: strings.halfTime,
249
252
  staleStates: strings.staleStates,
250
253
  pinLabel: strings.pinLabel,
251
254
  unpinLabel: strings.unpinLabel,
@@ -1505,8 +1508,40 @@ function dueMatchIds(groups, states, nowMs) {
1505
1508
  return [...due];
1506
1509
  }
1507
1510
 
1511
+ // src/liveClock.ts
1512
+ var STALE_READING_MS = 5 * 6e4;
1513
+ function parseMinute(label) {
1514
+ if (!label) return null;
1515
+ const plus = /^(\d+)\+(\d+)'$/.exec(label);
1516
+ if (plus) return Number(plus[1]) + Number(plus[2]);
1517
+ const plain = /^(\d+)'$/.exec(label);
1518
+ return plain ? Number(plain[1]) : null;
1519
+ }
1520
+ function readingAgeMs(state, nowMs) {
1521
+ if (!state?.stateAsOfUtc) return null;
1522
+ const t = Date.parse(state.stateAsOfUtc);
1523
+ return Number.isNaN(t) ? null : Math.max(0, nowMs - t);
1524
+ }
1525
+ function isReadingStale(state, nowMs) {
1526
+ if (state?.isHalfTime) return false;
1527
+ const age = readingAgeMs(state, nowMs);
1528
+ return age !== null && age > STALE_READING_MS;
1529
+ }
1530
+ function displayMinute(state, nowMs) {
1531
+ if (!state || state.phase !== "live") return null;
1532
+ if (state.isHalfTime) return null;
1533
+ if (isReadingStale(state, nowMs)) return null;
1534
+ const base = parseMinute(state.minuteLabel);
1535
+ if (base === null) return null;
1536
+ const age = readingAgeMs(state, nowMs);
1537
+ if (age === null) return state.minuteLabel ?? null;
1538
+ const advanced = base + Math.floor(age / 6e4);
1539
+ return `${advanced}'`;
1540
+ }
1541
+
1508
1542
  // src/useMatchDiscovery.ts
1509
1543
  var POLL_MS = 6e4;
1544
+ var CLOCK_MS = 1e4;
1510
1545
  var ROLLOVER_CHECK_MS = 6e4;
1511
1546
  var STALE_AFTER_FAILURES = 2;
1512
1547
  function localDateOf(now) {
@@ -1519,6 +1554,7 @@ function useMatchDiscovery(opts) {
1519
1554
  const [groups, setGroups] = useState2([]);
1520
1555
  const [states, setStates] = useState2({});
1521
1556
  const [failures, setFailures] = useState2(0);
1557
+ const [nowMs, setNowMs] = useState2(() => Date.now());
1522
1558
  const [expanded, setExpanded] = useState2({});
1523
1559
  const [touched, setTouched] = useState2({});
1524
1560
  const groupsRef = useRef4(groups);
@@ -1596,16 +1632,21 @@ function useMatchDiscovery(opts) {
1596
1632
  }, POLL_MS);
1597
1633
  return () => clearInterval(id);
1598
1634
  }, [opts.isOpen, tick, groups]);
1635
+ useEffect4(() => {
1636
+ if (!opts.isOpen) return;
1637
+ const id = setInterval(() => setNowMs(Date.now()), CLOCK_MS);
1638
+ return () => clearInterval(id);
1639
+ }, [opts.isOpen]);
1599
1640
  const stale = failures >= STALE_AFTER_FAILURES;
1600
1641
  const liveCount = useMemo2(
1601
- () => stale ? 0 : Object.values(states).filter((s) => s.phase === "live").length,
1602
- [states, stale]
1642
+ () => stale ? 0 : Object.values(states).filter((s) => s.phase === "live" && !isReadingStale(s, nowMs)).length,
1643
+ [states, stale, nowMs]
1603
1644
  );
1604
1645
  const toggleGroup = useCallback3((competitionId) => {
1605
1646
  setTouched((prev) => ({ ...prev, [competitionId]: true }));
1606
1647
  setExpanded((prev) => ({ ...prev, [competitionId]: !prev[competitionId] }));
1607
1648
  }, []);
1608
- return { groups, states, liveCount, stale, expanded, toggleGroup, _tick: tick };
1649
+ return { groups, states, nowMs, liveCount, stale, expanded, toggleGroup, _tick: tick };
1609
1650
  }
1610
1651
 
1611
1652
  // src/eventLogContext.ts
@@ -2963,7 +3004,7 @@ function computeDisplayMinute(minute, clockRunning, receivedAtMs) {
2963
3004
  return minute + Math.min(Math.max(0, elapsedMinutes), MAX_LIVE_TICK_MINUTES);
2964
3005
  }
2965
3006
  function useLiveClock(minute, clockRunning, receivedAtMs) {
2966
- const [displayMinute, setDisplayMinute] = useState15(
3007
+ const [displayMinute2, setDisplayMinute] = useState15(
2967
3008
  () => computeDisplayMinute(minute, clockRunning, receivedAtMs)
2968
3009
  );
2969
3010
  useEffect9(() => {
@@ -2974,7 +3015,7 @@ function useLiveClock(minute, clockRunning, receivedAtMs) {
2974
3015
  }, TICK_MS);
2975
3016
  return () => window.clearInterval(id);
2976
3017
  }, [minute, clockRunning, receivedAtMs]);
2977
- return displayMinute;
3018
+ return displayMinute2;
2978
3019
  }
2979
3020
 
2980
3021
  // src/components/dashboard/LiveScoreCard.tsx
@@ -3006,7 +3047,7 @@ function LiveScoreCard({
3006
3047
  if (!seedRef.current || seedRef.current.key !== seedKey) {
3007
3048
  seedRef.current = { key: seedKey, receivedAtMs: Date.now() };
3008
3049
  }
3009
- const displayMinute = useLiveClock(data.minute, data.clockRunning, seedRef.current.receivedAtMs);
3050
+ const displayMinute2 = useLiveClock(data.minute, data.clockRunning, seedRef.current.receivedAtMs);
3010
3051
  const minuteSuffix = data.minuteLabel.replace(/^\d+/, "");
3011
3052
  const scorers = scorersLine(goalEvents);
3012
3053
  return /* @__PURE__ */ jsxs32("div", { className: "ss-w-fandash-card ss-w-fandash-live-score", children: [
@@ -3016,7 +3057,7 @@ function LiveScoreCard({
3016
3057
  /* @__PURE__ */ jsx36("span", { className: "ss-w-fandash-live-dot", "aria-hidden": "true" }),
3017
3058
  data.statusLabel
3018
3059
  ] }),
3019
- /* @__PURE__ */ jsx36("span", { className: "ss-w-fandash-live-minute", children: `${displayMinute}${minuteSuffix}` }),
3060
+ /* @__PURE__ */ jsx36("span", { className: "ss-w-fandash-live-minute", children: `${displayMinute2}${minuteSuffix}` }),
3020
3061
  data.competition ? /* @__PURE__ */ jsx36("span", { className: "ss-w-fandash-live-competition", children: data.competition }) : null
3021
3062
  ] }),
3022
3063
  /* @__PURE__ */ jsxs32("div", { className: "ss-w-fandash-live-main", children: [
@@ -3698,12 +3739,14 @@ function Side({ name, crest }) {
3698
3739
  /* @__PURE__ */ jsx49("span", { className: "ss-w-drow-nm", children: name })
3699
3740
  ] });
3700
3741
  }
3701
- function FixtureRow({ match, state, stale, ui, monitor }) {
3702
- const isLive = state?.phase === "live" && !stale;
3742
+ function FixtureRow({ match, state, stale, nowMs, ui, monitor }) {
3743
+ const readingStale = isReadingStale(state, nowMs);
3744
+ const isLive = state?.phase === "live" && !stale && !readingStale;
3703
3745
  const hasScore = (state?.phase === "live" || state?.phase === "fullTime") && typeof state.homeScore === "number" && typeof state.awayScore === "number";
3704
- const when = stale && state?.phase === "live" ? "\u2014" : isLive ? state?.minuteLabel ?? "\u2014" : kickoffLabel(match.kickoffUnix);
3705
- return /* @__PURE__ */ jsxs44("div", { className: isLive ? "ss-w-drow ss-w-drow--live" : "ss-w-drow", children: [
3706
- /* @__PURE__ */ jsx49("span", { className: isLive ? "ss-w-drow-when ss-w-drow-when--live" : "ss-w-drow-when", children: when }),
3746
+ const ticked = displayMinute(state, nowMs);
3747
+ const when = state?.isHalfTime && !stale ? ui.halfTime : isLive ? ticked ?? "\u2014" : state?.phase === "live" ? "\u2014" : kickoffLabel(match.kickoffUnix);
3748
+ return /* @__PURE__ */ jsxs44("div", { className: isLive || state?.isHalfTime ? "ss-w-drow ss-w-drow--live" : "ss-w-drow", children: [
3749
+ /* @__PURE__ */ jsx49("span", { className: isLive || state?.isHalfTime ? "ss-w-drow-when ss-w-drow-when--live" : "ss-w-drow-when", children: when }),
3707
3750
  /* @__PURE__ */ jsxs44("span", { className: "ss-w-drow-fx", children: [
3708
3751
  /* @__PURE__ */ jsx49(Side, { name: match.homeTeamName, crest: match.homeTeamImagePath }),
3709
3752
  /* @__PURE__ */ jsx49("span", { className: "ss-w-drow-dash", children: "\u2013" }),
@@ -3716,25 +3759,36 @@ function FixtureRow({ match, state, stale, ui, monitor }) {
3716
3759
 
3717
3760
  // src/components/CompetitionGroup.tsx
3718
3761
  import { jsx as jsx50, jsxs as jsxs45 } from "react/jsx-runtime";
3719
- function CompetitionGroup({ group, open, onToggle, states, stale, ui, monitor }) {
3762
+ function CompetitionGroup({ group, open, onToggle, states, stale, nowMs, ui, monitor, disambiguate = false }) {
3720
3763
  const own = group.matches.filter((m) => states[m.matchId]?.phase !== "live" || stale);
3721
3764
  const hasLive = own.length !== group.matches.length;
3722
3765
  return /* @__PURE__ */ jsxs45("div", { className: "ss-w-grp", children: [
3723
3766
  /* @__PURE__ */ jsxs45("button", { type: "button", className: "ss-w-grp-head", "aria-expanded": open, onClick: onToggle, children: [
3724
3767
  /* @__PURE__ */ jsx50("span", { className: "ss-w-grp-chev", children: open ? "\u25BE" : "\u25B8" }),
3725
3768
  hasLive && /* @__PURE__ */ jsx50("span", { className: "ss-w-sec-dot", "aria-hidden": "true" }),
3726
- /* @__PURE__ */ jsx50("span", { className: "ss-w-grp-name", children: group.competitionName }),
3769
+ /* @__PURE__ */ jsxs45("span", { className: "ss-w-grp-name", children: [
3770
+ group.competitionName,
3771
+ disambiguate && group.competitionCountry ? /* @__PURE__ */ jsxs45("span", { className: "ss-w-grp-country", children: [
3772
+ " (",
3773
+ group.competitionCountry,
3774
+ ")"
3775
+ ] }) : null
3776
+ ] }),
3727
3777
  /* @__PURE__ */ jsx50("span", { className: "ss-w-grp-count", children: own.length })
3728
3778
  ] }),
3729
- open && /* @__PURE__ */ jsx50("div", { className: "ss-w-grp-body", children: own.map((m) => /* @__PURE__ */ jsx50(FixtureRow, { match: m, state: states[m.matchId], stale, ui, monitor }, m.matchId)) })
3779
+ open && /* @__PURE__ */ jsx50("div", { className: "ss-w-grp-body", children: own.map((m) => /* @__PURE__ */ jsx50(FixtureRow, { match: m, state: states[m.matchId], stale, nowMs, ui, monitor }, m.matchId)) })
3730
3780
  ] });
3731
3781
  }
3732
3782
 
3733
3783
  // src/components/TodayPanel.tsx
3734
3784
  import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs46 } from "react/jsx-runtime";
3735
3785
  function TodayPanel({ discovery, ui, monitor }) {
3736
- const { groups, states, stale, expanded, toggleGroup } = discovery;
3786
+ const { groups, states, nowMs, stale, expanded, toggleGroup } = discovery;
3737
3787
  const liveRows = stale ? [] : groups.flatMap((group) => group.matches.filter((m) => states[m.matchId]?.phase === "live").map((match) => ({ match, rank: group.rank }))).sort((a, b) => a.rank - b.rank);
3788
+ const nameCounts = groups.reduce((acc, g) => {
3789
+ acc[g.competitionName] = (acc[g.competitionName] ?? 0) + 1;
3790
+ return acc;
3791
+ }, {});
3738
3792
  return /* @__PURE__ */ jsxs46("div", { className: "ss-w-mon-list", children: [
3739
3793
  stale && /* @__PURE__ */ jsx51("div", { className: "ss-w-stale", children: ui.staleStates }),
3740
3794
  liveRows.length > 0 && /* @__PURE__ */ jsxs46(Fragment7, { children: [
@@ -3748,6 +3802,7 @@ function TodayPanel({ discovery, ui, monitor }) {
3748
3802
  match,
3749
3803
  state: states[match.matchId],
3750
3804
  stale,
3805
+ nowMs,
3751
3806
  ui,
3752
3807
  monitor
3753
3808
  },
@@ -3760,8 +3815,10 @@ function TodayPanel({ discovery, ui, monitor }) {
3760
3815
  group,
3761
3816
  open: expanded[group.competitionId] ?? group.expandedByDefault,
3762
3817
  onToggle: () => toggleGroup(group.competitionId),
3818
+ disambiguate: (nameCounts[group.competitionName] ?? 0) > 1,
3763
3819
  states,
3764
3820
  stale,
3821
+ nowMs,
3765
3822
  ui,
3766
3823
  monitor
3767
3824
  },
@@ -3946,6 +4003,11 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
3946
4003
  /* .ss-w-mon-list (Matches/Odds tab scrollers) shares .ss-w-list's box/scroll rules by design --
3947
4004
  same visual rhythm as the chat message list -- but gets its own class so it isn't the same DOM
3948
4005
  landmark as the chat list when both exist in the panel at once (Task 16 fix round, M4). */
4006
+ /* Children of this scrolling column flex container must NOT shrink. The default flex-shrink:1
4007
+ compresses every child to fit the panel instead of letting the container scroll, and
4008
+ .ss-w-grp's own overflow:hidden then clips the compressed content away entirely \u2014 27
4009
+ competition groups rendered as blank bars on a phone. Applies to the pinned cards too. */
4010
+ .ss-w-mon-list > * { flex: none; }
3949
4011
  .ss-w-list, .ss-w-mon-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-padding-top: 14px; }
3950
4012
  /* Transient bottom spacer: reserves a viewport of room below a new turn so its
3951
4013
  top can be scrolled into view while the reply is still streaming in. Height is
@@ -4677,6 +4739,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
4677
4739
  .ss-w-grp-head:focus-visible { outline: 2px solid var(--ss-w-accent); outline-offset: -2px; }
4678
4740
  .ss-w-grp-chev { color: var(--ss-w-faint); font-size: 10px; flex: none; }
4679
4741
  .ss-w-grp-name { font-size: 12px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
4742
+ .ss-w-grp-country { font-weight: 600; color: var(--ss-w-faint); }
4680
4743
  .ss-w-grp-count { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; color: var(--ss-w-faint); background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
4681
4744
  .ss-w-grp-body { display: flex; flex-direction: column; padding: 2px 11px 6px; }
4682
4745