/* =========================================================================
   Big Odds narrative card — embeddable widget (VOA/Sportingbet pilot).

   Sibling of picks.css: same semantic-token system, so the card reskins per
   brand with zero layout changes. Base theme tokens live here (mirroring
   picks.css); brand palettes override the SAME tokens via [data-brand].
   Default surface for the SportingBet pilot: si-light + brand=sportingbet.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:ital,wght@0,600;0,800;1,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

/* ----- Theme: si-light (pilot default) ----- */
[data-theme="si-light"] {
  --surface: #FFFFFF;
  --surface-2: #FBFAF7;
  --surface-sunken: #F2EFE9;
  --ink: #0B2234;
  --ink-muted: #4A5B68;
  --ink-faint: #5C6E7C;
  --accent: #FE4000;
  --teal: #027496;
  --line: rgba(11, 34, 52, 0.12);
  --line-strong: rgba(11, 34, 52, 0.22);
  --win: #138A4E;
  --loss: #C23B3B;
}
/* ----- Theme: si-dark ----- */
[data-theme="si-dark"] {
  --surface: #0B2234;
  --surface-2: #102C42;
  --surface-sunken: #081A28;
  --ink: #FFFFFF;
  --ink-muted: #9DB0BE;
  --ink-faint: #5C6E7C;
  --accent: #FE4000;
  --teal: #2AA7C9;
  --line: rgba(215, 221, 226, 0.16);
  --line-strong: rgba(215, 221, 226, 0.30);
  --win: #2ED47A;
  --loss: #FF5C5C;
}
/* ----- Brand: SportingBet (blue on white) — mirrors brands.css ----- */
[data-brand="sportingbet"] {
  --accent: #0A5EEA;
  --ink: #061F3F;
  --teal: #0A5EEA;
}

* { box-sizing: border-box; }

#sbot-bigodds-root {
  container-type: inline-size;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--surface-sunken);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
}
#sbot-bigodds-root * { min-width: 0; }
.bo-headline, .bo-story, .bo-ev-claim, .bo-sel-desc,
.bo-inv-list li, .bo-quote-note { overflow-wrap: anywhere; }

/* ---- Card shell ---- */
.bo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

/* ---- Header: archetype eyebrow + fixture + kickoff ---- */
.bo-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.bo-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.bo-fixture {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 22px; line-height: 1.05; margin: 4px 0 2px;
}
.bo-versus { text-transform: none; }
.bo-kickoff { font-size: 12px; color: var(--ink-muted); }

/* ---- Story ---- */
.bo-body { padding: 12px 16px; }
.bo-headline { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 6px; }
.bo-story { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 0; }

/* ---- Evidence ---- */
.bo-evidence { padding: 0 16px 12px; display: flex; flex-direction: column; gap: 8px; }
.bo-ev {
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  padding: 8px 10px; border-radius: 0 8px 8px 0;
}
.bo-ev-claim { font-size: 13px; font-weight: 600; line-height: 1.35; }
.bo-ev-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--ink-faint); margin-top: 3px;
}

/* ---- Selection = CONTEXT for Trading (never a headline price) ---- */
.bo-selection { padding: 12px 16px; border-top: 1px dashed var(--line); }
.bo-sel-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.bo-sel-desc { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.bo-legs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bo-leg {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; font-size: 12px;
}
/* No per-leg odds are rendered — the card carries no price (Trading prices by
   hand; the posture is always "odd sob consulta"). */
.bo-quote {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-sunken); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 10px 12px;
}
.bo-quote-tag {
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  text-transform: uppercase; font-size: 15px; color: var(--ink);
}
.bo-quote-note { font-size: 11.5px; color: var(--ink-muted); }
.bo-scope { font-size: 11px; color: var(--ink-faint); margin-top: 6px; }

/* ---- Invalidators (conditions that void the read) ---- */
.bo-invalidators { padding: 10px 16px; border-top: 1px solid var(--line); }
.bo-inv-title {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.bo-inv-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.bo-inv-list li { font-size: 12px; color: var(--ink-muted); padding-left: 16px; position: relative; }
.bo-inv-list li::before { content: "⚠"; position: absolute; left: 0; color: var(--accent); font-size: 11px; }
.bo-inv-list li.is-partial { color: var(--loss); font-weight: 600; }

/* ---- Coverage banner (partial window) ---- */
.bo-coverage {
  margin: 0 16px 10px; padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--loss) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--loss) 30%, transparent);
  font-size: 12px; color: var(--loss); font-weight: 600;
}

/* ---- Footer: CTA + RG ---- */
.bo-foot { padding: 12px 16px 14px; border-top: 1px solid var(--line); }
.bo-cta {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: var(--accent); color: #fff;
  font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-style: italic;
  text-transform: uppercase; font-size: 16px; letter-spacing: 0.02em;
  padding: 11px 14px; border-radius: 10px;
}
.bo-rg { font-size: 10.5px; color: var(--ink-faint); line-height: 1.4; margin-top: 8px; }

/* ---- States ---- */
.bo-empty, .bo-error { padding: 24px; text-align: center; color: var(--ink-muted); font-size: 14px; }

/* Mobile-first single column by design: the widget embeds at arbitrary widths,
   so cards always stack. A host page that wants a multi-column grid should wrap
   the root and lay the cards out in its own container. */