/* embed.css — standalone iframe card that MIRRORS our live grid mini-card (.market-card/.mc-*).
   Ported from style.css :root tokens (hardcoded hex — embed has no site CSS/vars).
   Dark = the real site card (#1E2428 on #15191D); light variant for light-theme hosts.
   No web-font fetch: Heebo/Inter preferred, fall back to system -> still one request. #229 v4 */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
.em-body{font-family:'Heebo','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:transparent;padding:4px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[data-theme=dark]{color-scheme:dark}
[data-theme=light]{color-scheme:light}

/* ── card shell (= .market-card) ───────────────────────────────────────── */
.market-card{display:flex;flex-direction:column;min-width:0;border-radius:15px;overflow:hidden;
  text-decoration:none;position:relative;transition:transform 150ms ease,border-color 150ms ease,box-shadow 150ms ease}
[data-theme=dark] .market-card{background:#1E2428;border:1px solid #242B32;color:#E5E7EB;box-shadow:0 1px 3px rgba(0,0,0,.3)}
[data-theme=light] .market-card{background:#fff;border:1px solid #E6E9EE;color:#15191D;box-shadow:0 1px 3px rgba(16,24,40,.08)}
a.market-card:hover{transform:translateY(-2px)}
[data-theme=dark] a.market-card:hover{border-color:#2E353D;background:#262C34;box-shadow:0 8px 24px rgba(0,0,0,.45)}
[data-theme=light] a.market-card:hover{border-color:#0093FD;box-shadow:0 6px 18px rgba(0,147,253,.12)}

.mc-content{padding:14px;display:flex;flex-direction:column;flex:1;gap:6px}
.mc-header{display:flex;align-items:start;gap:10px;margin-bottom:auto}
.mc-thumb{width:36px;height:36px;border-radius:4px;object-fit:cover;flex-shrink:0}
.mc-title{font-size:13px;font-weight:500;line-height:1.45;color:inherit;min-width:0;overflow-wrap:anywhere;word-break:break-word}
[data-theme=dark] .mc-title{color:#E5E7EB}
.mc-body{margin-top:0}

/* binary: title fills width, gauge flush at the row end, row vertically centered */
.mc-binary .mc-header{align-items:center}
.mc-binary .mc-header .mc-title{flex:1 1 auto}

/* ── half-circle gauge (= .mc-semi) ────────────────────────────────────── */
.mc-semi{position:relative;flex-shrink:0;width:56px;text-align:center;margin-inline-start:auto;margin-inline-end:0}
.mc-semi-svg{width:56px;height:auto;display:block}
.mc-semi-bg{stroke:#242B32;stroke-width:10}
[data-theme=light] .mc-semi-bg{stroke:#E6E9EE}
.mc-semi-fill{stroke:#3DB468;stroke-width:10;transition:stroke-dashoffset .6s ease}
.mc-semi-pct{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;
  font-family:'Inter','Heebo',sans-serif;color:#3DB468;line-height:1;white-space:nowrap}
.mc-semi-lbl{font-size:8px;color:#5C6370;font-weight:500;margin-top:-2px}

/* ── binary Yes/No chips (= .mc-btns/.mc-btn) ──────────────────────────── */
.mc-btns{display:flex;gap:8px}
.mc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 0;border-radius:7px;font-weight:700}
.mc-btn.yes{background:rgba(61,180,104,.15);color:#3DB468}
.mc-btn.no{background:rgba(203,49,49,.15);color:#CB3131}
.mc-btn-label{font-family:'Heebo',sans-serif;font-size:12px;font-weight:600}

/* ── multi-outcome rows (= .mc-opt) ────────────────────────────────────── */
.mc-opt{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #242B32}
[data-theme=light] .mc-opt{border-bottom-color:#EEF0F3}
.mc-opt:last-of-type{border-bottom:none}
.mc-opt-name{font-size:10.5px;color:inherit;font-weight:500;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-opt-pct{font-weight:700;font-size:12px;flex:none;margin-inline-start:6px;font-variant-numeric:tabular-nums}
.mc-opt-yn{display:inline-flex;gap:5px;flex:none;margin-inline-start:8px}
.mc-yn{font-size:11px;font-weight:700;padding:4px 11px;border-radius:7px}
.mc-yn.y{background:rgba(61,180,104,.15);color:#3DB468}
.mc-yn.n{background:rgba(203,49,49,.15);color:#CB3131}

/* ── head-to-head rows (= .mc-h2h) ─────────────────────────────────────── */
.mc-h2h{display:flex;flex-direction:column}
.mc-h2h-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #242B32}
[data-theme=light] .mc-h2h-row{border-bottom-color:#EEF0F3}
.mc-h2h-row:last-child{border-bottom:none}
.mc-h2h-name{font-size:11px;font-weight:500;color:inherit;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mc-h2h-pct{font-size:12px;font-weight:700;font-family:'Inter','Heebo',sans-serif;color:#0093FD;flex-shrink:0;font-variant-numeric:tabular-nums}

/* ── footer (= .mc-footer): volume start · brand signature end ──────────── */
.mc-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#5C6370;padding-top:8px;margin-top:auto}
.mc-vol{font-family:'Inter','Heebo',sans-serif;font-size:11px}
.em-brand{font-weight:700;color:#7B8996;white-space:nowrap}
[data-theme=light] .em-brand{color:#5C6370}
.em-empty{display:flex;align-items:center;justify-content:center;min-height:90px;font-size:12px;opacity:.6}

/* ── layout variants — genuinely distinct sizes. Were .em-v/.em-h/.em-r, which
   NEVER matched the body's em-vertical/em-horizontal/em-responsive classes, so
   every layout rendered identically (operator: "all sizes seem to be the same").
   vertical = narrow portrait · horizontal = wide landscape · responsive = fluid. */
.em-vertical   .market-card{max-width:300px}
.em-horizontal .market-card{max-width:560px}
.em-responsive .market-card{max-width:none}
.em-horizontal .mc-content{padding:16px 18px}
@media (max-width:360px){.em-horizontal .market-card,.em-responsive .market-card{max-width:300px}}
@media (prefers-reduced-motion:reduce){a.market-card{transition:none}.mc-semi-fill{transition:none}}

/* ── /embed/pillar/ topic scoreboard (legacy em-* classes, kept on-brand) ── */
.em-card{display:block;border-radius:15px;padding:14px;text-decoration:none;min-height:90px}
[data-theme=dark] .em-card{background:#1E2428;border:1px solid #242B32;color:#E5E7EB;box-shadow:0 1px 3px rgba(0,0,0,.3)}
[data-theme=light] .em-card{background:#fff;border:1px solid #E6E9EE;color:#15191D}
.em-card .em-title{display:block;font-size:13px;font-weight:700;line-height:1.4;margin-bottom:10px;color:inherit;text-decoration:none}
[data-theme=dark] .em-card .em-title{color:#fff}
.em-row{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12px;color:inherit;text-decoration:none;border-bottom:1px solid #242B32}
[data-theme=light] .em-row{border-bottom-color:#EEF0F3}
.em-row:last-of-type{border-bottom:none}
.em-row .em-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-row .em-track{flex:0 0 56px;height:6px;border-radius:7px;overflow:hidden;background:#242B32}
[data-theme=light] .em-row .em-track{background:#E6E9EE}
.em-row .em-track span{display:block;height:100%;background:#0093FD;border-radius:7px}
.em-row .em-pct{flex:0 0 34px;text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
.em-foot{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:10px;font-size:10.5px;border-top:1px solid #242B32}
[data-theme=light] .em-foot{border-top-color:#EEF0F3}
.em-dot{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#3DB468}
.em-live{opacity:.66}