@sensiblestats/widget-react 0.26.2 → 0.28.0

package/dist/index.js

@@ -816,8 +816,15 @@ function initials(name) {
 function shortSeason(season) {
   return season.replace(/\d{4}/g, (year) => year.slice(2));
 }
-function Crest({ image }) {
-  return /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-crest", style: { backgroundImage: `url(${image})` }, "aria-hidden": "true" });
+function Crest({ image, label }) {
+  return /* @__PURE__ */ jsx6(
+    "span",
+    {
+      className: "ss-w-ecard-crest",
+      style: { backgroundImage: `url(${image})` },
+      ...label ? { role: "img", title: label, "aria-label": label } : { "aria-hidden": "true" }
+    }
+  );
 }
 function FormBar({ w, d, l }) {
   if (w + d + l === 0) return null;
@@ -827,73 +834,73 @@ function FormBar({ w, d, l }) {
     l > 0 ? /* @__PURE__ */ jsx6("span", { className: "ss-w-form-l", style: { flexGrow: l } }) : null
   ] });
 }
-function StatRows({ stats }) {
-  return /* @__PURE__ */ jsx6("div", { className: "ss-w-ecard-stats", children: stats.map((s) => {
-    const m = RECORD_RE.exec(s.value);
-    return /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-row", children: [
-      /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-rlabel", children: s.label }),
-      m ? /* @__PURE__ */ jsx6(FormBar, { w: Number(m[1]), d: Number(m[2]), l: Number(m[3]) }) : /* @__PURE__ */ jsx6("span", {}),
-      /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-rval", children: s.value })
-    ] }, s.label);
-  }) });
-}
-function CardBody({ c }) {
-  const [active, setActive] = useState(0);
-  if (c.scopes.length === 0) return null;
-  const season = c.season ? /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-season", children: shortSeason(c.season) }) : null;
-  if (c.scopes.length === 1) {
-    const only = c.scopes[0];
-    return /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-body", children: [
-      /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-tabs ss-w-ecard-tabs-static", children: [
-        /* @__PURE__ */ jsxs4("span", { className: "ss-w-ecard-lead", title: only.label, children: [
-          only.image ? /* @__PURE__ */ jsx6(Crest, { image: only.image }) : null,
-          /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-lead-txt", children: only.label })
-        ] }),
-        season
-      ] }),
-      /* @__PURE__ */ jsx6(StatRows, { stats: only.stats })
+function StatCellView({ s }) {
+  const m = RECORD_RE.exec(s.value);
+  if (m) {
+    return /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-cell", children: [
+      /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-cval", children: /* @__PURE__ */ jsx6(FormBar, { w: Number(m[1]), d: Number(m[2]), l: Number(m[3]) }) }),
+      /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-clabel", children: s.value })
     ] });
   }
-  const current = c.scopes[active] ?? c.scopes[0];
-  return /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-body", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-tabs", role: "tablist", children: [
-      c.scopes.map((s, i) => /* @__PURE__ */ jsx6(
-        "button",
-        {
-          type: "button",
-          role: "tab",
-          className: "ss-w-ecard-tab",
-          "aria-selected": i === active,
-          "aria-label": s.label,
-          title: s.label,
-          onClick: () => setActive(i),
-          children: s.image ? /* @__PURE__ */ jsx6(Crest, { image: s.image }) : s.label
-        },
-        String(s.competitionId ?? "all")
-      )),
-      season
+  return /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-cell", children: [
+    /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-cval", children: s.value }),
+    /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-clabel", children: s.label })
+  ] });
+}
+function StatStrip({ stats }) {
+  if (stats.length === 0) return null;
+  const cols = Math.min(stats.length, 4);
+  return /* @__PURE__ */ jsx6("div", { className: "ss-w-ecard-strip", style: { gridTemplateColumns: `repeat(${cols}, 1fr)` }, children: stats.map((s) => /* @__PURE__ */ jsx6(StatCellView, { s }, s.label + s.value)) });
+}
+function CardHeader({ c, showScopeCrest }) {
+  const onlyScope = c.scopes.length === 1 ? c.scopes[0] : null;
+  return /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-hd", children: [
+    /* @__PURE__ */ jsx6(
+      "span",
+      {
+        className: c.kind === "team" ? "ss-w-thumb ss-w-team" : "ss-w-thumb",
+        style: c.image ? { backgroundImage: `url(${c.image})` } : void 0,
+        children: c.image ? "" : initials(c.name)
+      }
+    ),
+    /* @__PURE__ */ jsxs4("span", { className: "ss-w-ecard-idtext", children: [
+      /* @__PURE__ */ jsx6("span", { className: "ss-w-nm", children: c.name }),
+      c.sub ? /* @__PURE__ */ jsx6("span", { className: "ss-w-sub", children: c.sub }) : null
     ] }),
-    /* @__PURE__ */ jsx6(StatRows, { stats: current.stats }, String(current.competitionId ?? "all"))
+    /* @__PURE__ */ jsxs4("span", { className: "ss-w-ecard-meta", children: [
+      showScopeCrest && onlyScope?.image ? /* @__PURE__ */ jsx6(Crest, { image: onlyScope.image, label: onlyScope.label }) : null,
+      c.season ? /* @__PURE__ */ jsx6("span", { className: "ss-w-ecard-season", children: shortSeason(c.season) }) : null
+    ] })
   ] });
 }
+function ScopeTabs({ scopes, active, onSelect }) {
+  return /* @__PURE__ */ jsx6("div", { className: "ss-w-ecard-scopes", role: "tablist", children: scopes.map((s, i) => /* @__PURE__ */ jsx6(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      className: "ss-w-ecard-scope",
+      "aria-selected": i === active,
+      "aria-label": s.label,
+      title: s.label,
+      onClick: () => onSelect(i),
+      children: s.image ? /* @__PURE__ */ jsx6(Crest, { image: s.image }) : s.label
+    },
+    String(s.competitionId ?? "all")
+  )) });
+}
 function EntityCardItem({ c }) {
+  const [active, setActive] = useState(0);
   const hasBody = c.scopes.length > 0;
-  return /* @__PURE__ */ jsxs4("div", { className: hasBody ? "ss-w-ecard" : "ss-w-ecard ss-w-ecard-bare", "data-kind": c.kind, children: [
-    /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard-id", children: [
-      /* @__PURE__ */ jsx6(
-        "span",
-        {
-          className: c.kind === "team" ? "ss-w-thumb ss-w-team" : "ss-w-thumb",
-          style: c.image ? { backgroundImage: `url(${c.image})` } : void 0,
-          children: c.image ? "" : initials(c.name)
-        }
-      ),
-      /* @__PURE__ */ jsxs4("span", { className: "ss-w-ecard-idtext", children: [
-        /* @__PURE__ */ jsx6("span", { className: "ss-w-nm", children: c.name }),
-        c.sub ? /* @__PURE__ */ jsx6("span", { className: "ss-w-sub", children: c.sub }) : null
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx6(CardBody, { c })
+  if (!hasBody) {
+    return /* @__PURE__ */ jsx6("div", { className: "ss-w-ecard ss-w-ecard-bare", "data-kind": c.kind, children: /* @__PURE__ */ jsx6(CardHeader, { c, showScopeCrest: false }) });
+  }
+  const multi = c.scopes.length > 1;
+  const scope = c.scopes[multi ? c.scopes[active] ? active : 0 : 0];
+  return /* @__PURE__ */ jsxs4("div", { className: "ss-w-ecard", "data-kind": c.kind, children: [
+    /* @__PURE__ */ jsx6(CardHeader, { c, showScopeCrest: !multi }),
+    multi ? /* @__PURE__ */ jsx6(ScopeTabs, { scopes: c.scopes, active, onSelect: setActive }) : null,
+    /* @__PURE__ */ jsx6(StatStrip, { stats: scope.stats })
   ] });
 }
 function EntityCardList({ cards, disabled, showLessLabel = "Show less", showMoreLabel = (n) => `Show ${n} more` }) {
@@ -1048,7 +1055,7 @@ function Crest2({ url, name, kind }) {
 
 // src/components/BettingInsightList.tsx
 import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-function StatRows2({ stats }) {
+function StatRows({ stats }) {
   return /* @__PURE__ */ jsx11("div", { className: "ss-w-bi-rows", children: stats.map((s) => /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-row", children: [
     /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-row-lbl", children: s.label }),
     /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-row-num", children: s.value })
@@ -1059,7 +1066,7 @@ function ScopedStats({ scopes }) {
   const current = scopes[active] ?? scopes[0] ?? { key: "", label: "", stats: [] };
   return /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-scoped", children: [
     /* @__PURE__ */ jsx11("div", { className: "ss-w-bi-scopes", role: "group", children: scopes.map((s, i) => /* @__PURE__ */ jsx11("button", { type: "button", className: "ss-w-bi-chip", "aria-pressed": i === active, onClick: () => setActive(i), children: s.label }, s.key)) }),
-    /* @__PURE__ */ jsx11(StatRows2, { stats: current.stats }, current.key)
+    /* @__PURE__ */ jsx11(StatRows, { stats: current.stats }, current.key)
   ] });
 }
 function hasStatsContent(it) {
@@ -1076,7 +1083,7 @@ function ReasonStrip({ it, ui }) {
     /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-chart", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-reason-body", children: [
       hasText ? /* @__PURE__ */ jsx11("p", { className: `ss-w-bi-text${open ? "" : " ss-w-bi-text-clamp"}`, children: it.text }) : null,
-      open && hasStats ? hasScopes ? /* @__PURE__ */ jsx11(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ jsx11(StatRows2, { stats: it.stats }) : null
+      open && hasStats ? hasScopes ? /* @__PURE__ */ jsx11(ScopedStats, { scopes: it.scopes }) : /* @__PURE__ */ jsx11(StatRows, { stats: it.stats }) : null
     ] }),
     expandable ? /* @__PURE__ */ jsx11(
       "button",
@@ -1091,22 +1098,44 @@ function ReasonStrip({ it, ui }) {
     ) : null
   ] });
 }
+function CardFixture({ it }) {
+  if (it.homeTeamName && it.awayTeamName) {
+    return /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx11(Crest2, { kind: "team", url: it.homeCrest, name: it.homeTeamName }),
+      /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-team", children: it.homeTeamName }),
+      /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-vs", "aria-hidden": "true", children: "vs" }),
+      /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-team", children: it.awayTeamName }),
+      /* @__PURE__ */ jsx11(Crest2, { kind: "team", url: it.awayCrest, name: it.awayTeamName })
+    ] });
+  }
+  if (it.fixture) return /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-fixture-txt", children: it.fixture });
+  if (it.competition) {
+    return /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx11(Crest2, { kind: "comp", url: it.competitionCrest, name: it.competition }),
+      /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-comp", children: it.competition })
+    ] });
+  }
+  return null;
+}
 function InsightCard({ it, ui, slip }) {
   const live = it.isLive || it.phase === "live";
   const kickoff = it.kickoffUtc && ui?.bettingKickoff ? ui.bettingKickoff(it.kickoffUtc) : void 0;
   const hasNamedTeams = !!it.homeTeamName && !!it.awayTeamName;
-  const showHeader = !!it.competition || live || !!kickoff;
+  const leftIsFixture = hasNamedTeams || !!it.fixture;
+  const compInMeta = leftIsFixture && !!it.competition;
+  const showHeader = leftIsFixture || !!it.competition || live || !!kickoff;
   return /* @__PURE__ */ jsxs7("div", { className: "ss-w-binsight", children: [
     showHeader ? /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-header", children: [
-      /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-header-left", children: it.competition ? /* @__PURE__ */ jsxs7(Fragment, { children: [
-        /* @__PURE__ */ jsx11(Crest2, { kind: "comp", url: it.competitionCrest, name: it.competition }),
-        /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-comp", children: it.competition })
-      ] }) : null }),
+      /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-header-left", children: /* @__PURE__ */ jsx11(CardFixture, { it }) }),
       /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-header-right", children: [
         live ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-live", children: [
           /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-live-dot", "aria-hidden": "true" }),
           ui?.liveLabel ?? "Live"
         ] }) : null,
+        compInMeta ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-comp-meta", children: [
+          /* @__PURE__ */ jsx11(Crest2, { kind: "comp", url: it.competitionCrest, name: it.competition }),
+          /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-comp", children: it.competition })
+        ] }) : null,
         kickoff ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-kick", children: [
           kickoff.dayLabel,
           " ",
@@ -1114,28 +1143,22 @@ function InsightCard({ it, ui, slip }) {
         ] }) : null
       ] })
     ] }) : null,
-    /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-body", children: [
-      /* @__PURE__ */ jsx11("div", { className: "ss-w-bi-fixture", children: hasNamedTeams ? /* @__PURE__ */ jsxs7(Fragment, { children: [
-        /* @__PURE__ */ jsx11(Crest2, { kind: "team", url: it.homeCrest, name: it.homeTeamName }),
-        /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-team", children: it.homeTeamName }),
-        /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-vs", "aria-hidden": "true", children: "vs" }),
-        /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-team", children: it.awayTeamName }),
-        /* @__PURE__ */ jsx11(Crest2, { kind: "team", url: it.awayCrest, name: it.awayTeamName })
-      ] }) : it.fixture ? /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-fixture-txt", children: it.fixture }) : null }),
-      /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-action", children: [
-        /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-mkt", children: [
-          /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-market", children: it.market }),
-          it.selection ? /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-sel", children: it.selection }) : null
-        ] }),
-        it.isMarketFloor ? /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-floor", children: ui?.marketFloorLabel ?? "Market price \xB7 not a value pick" }) : null,
-        it.odds ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-odds", children: [
-          /* @__PURE__ */ jsx11("b", { children: it.odds }),
-          /* @__PURE__ */ jsx11(OddsMovementBadge, { previous: it.previousOdds, current: it.odds, direction: it.movementDirection, ui }),
-          it.bookmaker ? /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
-        ] }) : null,
-        /* @__PURE__ */ jsx11(AddToSlipButton, { it, slip, ui })
-      ] })
+    /* @__PURE__ */ jsxs7("div", { className: "ss-w-bi-action-row", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-pick", children: [
+        /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-market", children: it.market }),
+        it.selection ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-pick-dot", "aria-hidden": "true", children: "\xB7" }),
+          /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-sel", children: it.selection })
+        ] }) : null
+      ] }),
+      it.odds ? /* @__PURE__ */ jsxs7("span", { className: "ss-w-bi-odds", children: [
+        /* @__PURE__ */ jsx11("b", { children: it.odds }),
+        /* @__PURE__ */ jsx11(OddsMovementBadge, { previous: it.previousOdds, current: it.odds, direction: it.movementDirection, ui }),
+        it.bookmaker ? /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-book", children: it.bookmaker }) : null
+      ] }) : null,
+      /* @__PURE__ */ jsx11(AddToSlipButton, { it, slip, ui })
     ] }),
+    it.isMarketFloor ? /* @__PURE__ */ jsx11("span", { className: "ss-w-bi-floor", children: ui?.marketFloorLabel ?? "Market price \xB7 not a value pick" }) : null,
     /* @__PURE__ */ jsx11(ReasonStrip, { it, ui }),
     it.disclaimer ? /* @__PURE__ */ jsx11("p", { className: "ss-w-bi-disc", children: it.disclaimer }) : null
   ] });
@@ -2051,10 +2074,9 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 /* entity cards */
 .ss-w-cards { display: flex; flex-direction: column; gap: 8px; }
 
-/* Identity Hero: crest-led identity block | tabbed stats panel */
-.ss-w-ecard { display: grid; grid-template-columns: 112px 1fr; align-items: stretch; width: 100%; background: var(--ss-w-panel); border: 1px solid var(--ss-w-line); border-radius: 12px; overflow: hidden; text-align: left; }
+/* Entity card: identity header row over a horizontal stat strip */
+.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; }
 
-.ss-w-ecard-id { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 13px 10px; border-right: 1px solid var(--ss-w-line); background: linear-gradient(158deg, var(--ss-w-bubble), color-mix(in srgb, var(--ss-w-accent) 9%, var(--ss-w-bubble))); }
 .ss-w-ecard-idtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 100%; }
 .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); }
 .ss-w-thumb.ss-w-team { border-radius: 12px; }
@@ -2064,27 +2086,31 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* bare card (no stat scopes): simple avatar + name row */
 .ss-w-ecard-bare { display: flex; align-items: center; }
-.ss-w-ecard-bare .ss-w-ecard-id { flex-direction: row; text-align: left; gap: 11px; background: none; border-right: none; padding: 10px 12px; }
-.ss-w-ecard-bare .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
-.ss-w-ecard-bare .ss-w-thumb.ss-w-team { border-radius: 10px; }
-
-.ss-w-ecard-body { min-width: 0; padding: 9px 12px 12px; display: flex; flex-direction: column; }
-
-/* tab strip seated on the stats panel's top edge; active tab underlined in accent */
-.ss-w-ecard-tabs { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--ss-w-line); margin-bottom: 9px; flex-wrap: wrap; }
-.ss-w-ecard-tab { 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: 5px 8px 8px; margin-bottom: -1px; border-bottom: 2px solid transparent; }
-.ss-w-ecard-tab[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
-.ss-w-ecard-tabs-static { align-items: center; flex-wrap: nowrap; }
-.ss-w-ecard-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 640; color: var(--ss-w-ink); padding: 4px 2px 8px; min-width: 0; flex: 1; }
-.ss-w-ecard-lead-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-ecard-bare .ss-w-ecard-hd { padding: 10px 12px; }
+
+.ss-w-ecard-hd { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
+.ss-w-ecard-hd .ss-w-thumb { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
+.ss-w-ecard-hd .ss-w-thumb.ss-w-team { border-radius: 10px; }
+.ss-w-ecard-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; align-self: flex-start; margin-left: auto; }
+.ss-w-ecard-meta .ss-w-ecard-season { margin: 0; }
+
+/* scope tabs: reuse the underline pattern, relocated above the strip */
+.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; }
+.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; }
+.ss-w-ecard-scope[aria-selected="true"] { color: var(--ss-w-ink); border-bottom-color: var(--ss-w-accent); }
+.ss-w-ecard-scope .ss-w-ecard-crest { width: 14px; height: 14px; }
+.ss-w-ecard-scopes + .ss-w-ecard-strip { border-top: none; }
+
 .ss-w-ecard-crest { width: 15px; height: 15px; flex: none; display: block; border-radius: 4px; background-size: cover; background-position: center; }
 .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; }
-.ss-w-ecard-tabs-static .ss-w-ecard-season { margin-bottom: 4px; }
 
-.ss-w-ecard-stats { display: flex; flex-direction: column; gap: 4px; }
-.ss-w-ecard-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
-.ss-w-ecard-rlabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .045em; color: var(--ss-w-faint); font-weight: 600; }
-.ss-w-ecard-rval { justify-self: end; font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
+/* stat strip: 1px gap over a line-colored ground paints hairlines between cells, wrap-safe */
+.ss-w-ecard-strip { display: grid; gap: 1px; background: var(--ss-w-line); border-top: 1px solid var(--ss-w-line); }
+.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); }
+.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; }
+.ss-w-ecard-cval .ss-w-form { width: 42px; }
+.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; }
+
 .ss-w-form { justify-self: end; display: flex; height: 6px; width: 48px; border-radius: 4px; overflow: hidden; gap: 2px; }
 .ss-w-form span { display: block; border-radius: 2px; }
 .ss-w-form-w { background: var(--ss-w-pos); }
@@ -2101,7 +2127,7 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 
 /* row 1: competition logo + name on the left, live badge + kickoff on the right */
 .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); }
-.ss-w-bi-header-left { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
+.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); }
 .ss-w-bi-header-right { display: inline-flex; align-items: center; gap: 8px; flex: none; }
 .ss-w-bi-comp { font-size: 10.5px; color: var(--ss-w-faint); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .ss-w-bi-kick { font-size: 10.5px; font-weight: 600; color: var(--ss-w-faint); white-space: nowrap; flex: none; }
@@ -2114,23 +2140,26 @@ var WIDGET_CSS = `.ss-w-root { all: revert; }
 .ss-w-bi-crest { width: 24px; height: 24px; flex: none; display: block; border-radius: 50%; object-fit: contain; }
 .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)); }
 
-/* row 2: crest-flanked fixture on the left, boxed action panel on the right */
-.ss-w-bi-body { display: flex; align-items: center; gap: 10px; }
-.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12px; font-weight: 650; color: var(--ss-w-ink); }
+/* header fixture atoms (team hero lives in .ss-w-bi-header-left; comp demotes to the meta) */
 .ss-w-bi-team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ss-w-bi-vs { font-size: 10px; font-weight: 600; color: var(--ss-w-faint); flex: none; }
 .ss-w-bi-fixture-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ss-w-bi-action { margin-left: auto; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
-.ss-w-bi-action .ss-w-slip { width: 100%; }
-.ss-w-bi-action .ss-w-slip > button { flex: 1; width: 100%; text-align: center; border-radius: 8px; }
-/* The action column is narrow; let its toast size to its own text and anchor to the card's right edge instead of being clipped to the button width. */
-.ss-w-bi-action .ss-w-toast { left: auto; right: 0; width: max-content; max-width: 210px; white-space: normal; }
-.ss-w-bi-mkt { display: flex; flex-direction: column; gap: 1px; min-width: 0; align-items: flex-end; text-align: right; }
-.ss-w-bi-market { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ss-w-faint); white-space: nowrap; }
-.ss-w-bi-sel { font-size: 11px; line-height: 1.25; color: var(--ss-w-faint); }
+.ss-w-bi-comp-meta { display: inline-flex; align-items: center; gap: 5px; flex: none; min-width: 0; }
+/* shared crest-flanked team row, still consumed by MarketOddsCardList */
+.ss-w-bi-fixture { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: 12px; font-weight: 650; color: var(--ss-w-ink); }
+
+/* row 2: one action line -- market \xB7 selection (left, market ellipsises first), odds, slip button */
+.ss-w-bi-action-row { display: flex; align-items: center; gap: 9px; }
+.ss-w-bi-pick { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
+.ss-w-bi-market { font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ss-w-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ss-w-bi-pick-dot { flex: none; color: var(--ss-w-faint); font-weight: 700; }
+.ss-w-bi-sel { flex: none; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--ss-w-ink); white-space: nowrap; }
 .ss-w-bi-odds { flex: none; display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; }
-.ss-w-bi-odds b { font-size: 23px; font-family: ui-monospace, monospace; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ss-w-accent); line-height: 1.05; }
+.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; }
 .ss-w-bi-book { font-size: 9.5px; color: var(--ss-w-faint); }
+.ss-w-bi-action-row .ss-w-slip { flex: none; }
+/* let the slip toast size to its own text and anchor to the card's right edge, not the button width */
+.ss-w-bi-action-row .ss-w-toast { left: auto; right: 0; width: max-content; max-width: 210px; white-space: normal; }
 
 /* row 3: bar-chart glyph + reasoning prose + stats-expander chevron, in a subtle strip */
 .ss-w-bi-reason { display: flex; align-items: flex-start; gap: 8px; background: var(--ss-w-bubble); border-radius: 10px; padding: 8px 10px; }