.card{background:var(--card);border:1px solid var(--border);border-radius:0;
  box-shadow:var(--shadow);padding:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
#cmhost .cm-editor{min-height:440px}
.stage .preview{--reserve-ar: 960 / 564}   /* load-grace: default example's viewBox — see workspace.css */

/* Board / Quadrant — the shared .segmented control (Swiss 6c) supplies the
   whole visual language; .vtseg survives only as the suites' handle. */
.viewtoggle{margin-bottom:12px}
.method{color:var(--muted);font-size:12.5px}
@media (max-width:900px){ #cmhost .cm-editor{min-height:280px} }

/* every bet row/card is a card-menu target (Edit stake / odds / payoff /
   kill criterion) in edit mode; the row's own hit rect is the last child
   painted BEHIND the stake/odds/payoff/kill sub-targets in the SVG source
   (see render.js), so hovering/tapping those still shows their own affordance */
.preview svg [data-edit="cardmenu"]{cursor:pointer}
.preview svg [data-edit="cardmenu"]:hover rect[data-hit]{fill:var(--accent);fill-opacity:.08}
.preview svg [data-edit="stake"],
.preview svg [data-edit="odds"],
.preview svg [data-edit="payoff"],
.preview svg [data-edit="kill"]{cursor:pointer}
.preview svg [data-edit="stake"]:hover rect,
.preview svg [data-edit="odds"]:hover rect,
.preview svg [data-edit="payoff"]:hover rect,
.preview svg [data-edit="kill"]:hover rect{fill:var(--accent);fill-opacity:.1}