/* MarginMath charts — shared styles. Colors are roles; dark steps chosen for the dark card surface. */
.viz-root{--v-surface:#ffffff;--v-text:#17201c;--v-text2:#4b5550;--v-muted:#6b756f;--v-grid:#e6eae7;--v-axis:#c7d0cb;
  --v-cost:#5f6f86;--v-f1:#eb6834;--v-f2:#2a78d6;--v-f3:#eda100;--v-f4:#6250d6;--v-f5:#e87ba4;--v-profit:#1a8a6a;--v-loss:#d92d20;--v-warn:#c98500;
  --v-profit-wash:rgba(26,138,106,.10);--v-loss-wash:rgba(217,45,32,.08)}
@media (prefers-color-scheme:dark){.viz-panel.viz-root{--v-surface:#18201d;--v-text:#e8eeea;--v-text2:#c3cdc7;--v-muted:#97a39d;--v-grid:#26302c;--v-axis:#3a4741;
  --v-cost:#7f90a8;--v-f1:#d95926;--v-f2:#3987e5;--v-f3:#c98500;--v-f4:#9085e9;--v-f5:#d55181;--v-profit:#3fb58f;--v-loss:#ff8a7a;--v-warn:#e0a526;
  --v-profit-wash:rgba(63,181,143,.12);--v-loss-wash:rgba(255,138,122,.10)}}

/* ---- segmented bar (inside the payout slip, always light) ---- */
.viz-split{margin:16px 0 4px;font-family:var(--sans)}
.viz-split h3,.viz-panel h2{font-family:var(--sans);letter-spacing:-.01em}
.viz-split h3{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--v-text2);margin:0 0 8px}
.viz-bar{display:flex;gap:2px;height:28px;width:100%;position:relative}
.viz-bar .seg{height:100%;border-radius:4px;min-width:3px;position:relative;display:flex;align-items:center;padding:0 6px;
  font:600 .72rem/1 var(--mono);color:#fff;white-space:nowrap;overflow:visible;cursor:default;transition:filter .15s,width .35s cubic-bezier(.2,.7,.2,1)}
.viz-bar .seg.dark-text{color:#17201c}
.viz-bar .seg:hover,.viz-bar .seg:focus-visible{filter:brightness(1.08) saturate(1.05);outline:none}
.viz-bar .seg:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--v-text)}
.viz-legend{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px}
.viz-legend li{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:8px;font-size:.8rem;color:var(--v-text2);line-height:1.35}
.viz-legend .sw{width:10px;height:10px;border-radius:3px}
.viz-legend .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--v-text);font-weight:600}
.viz-legend .shr{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--v-muted);min-width:3.6em;text-align:right}
.viz-legend li.total{border-top:1px dotted #d3d8d4;padding-top:5px;margin-top:2px;font-weight:600;color:var(--v-text)}
.viz-note{margin:8px 0 0;font-size:.8rem;line-height:1.45;color:var(--v-loss);display:flex;gap:6px;align-items:flex-start}
.viz-note svg{flex:none;width:14px;height:14px;margin-top:2px}

/* ---- wide chart panel under the calculator ---- */
.viz-panel{margin:22px 0 0;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:22px 24px 18px;color:var(--v-text)}
.viz-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 24px;margin:0 0 14px}
.viz-panel h2{font-size:1.15rem;font-weight:750;margin:0;line-height:1.25}
.viz-panel .viz-sub{margin:4px 0 0;font-size:.9rem;color:var(--v-muted);max-width:70ch}
.viz-keys{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.82rem;color:var(--v-text2);list-style:none;margin:0;padding:0}
.viz-keys li{display:flex;align-items:center;gap:6px}
.viz-keys i{display:inline-block;width:14px;height:3px;border-radius:2px}
.viz-keys i.dot{width:10px;height:10px;border-radius:50%}
.viz-chart{position:relative;width:100%}
.viz-chart svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--sans)}
.viz-chart .tick{font:500 11px var(--mono);fill:var(--v-muted);font-variant-numeric:tabular-nums}
.viz-chart .axis-title{font:600 11px var(--sans);fill:var(--v-muted);letter-spacing:.02em}
.viz-chart .lbl{font:650 12px var(--sans);fill:var(--v-text)}
.viz-chart .lbl-sub{font:500 11px var(--mono);fill:var(--v-text2)}
.viz-chart .hit{fill:transparent;cursor:crosshair}
.viz-tip{position:absolute;pointer-events:none;background:var(--v-text);color:var(--v-surface);border-radius:8px;padding:8px 10px;font:500 .78rem/1.4 var(--sans);
  white-space:nowrap;transform:translate(-50%,calc(-100% - 12px));opacity:0;transition:opacity .12s;z-index:5;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.viz-tip b{font-family:var(--mono);font-weight:600}
.viz-tip.show{opacity:1}
.viz-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin:10px 0 0;font-size:.82rem;color:var(--v-muted)}
.viz-foot details summary{cursor:pointer;color:var(--green);font-weight:600}
.viz-foot table{font-size:.8rem;margin-top:8px;border-collapse:collapse}
.viz-foot td,.viz-foot th{padding:3px 12px 3px 0;text-align:left;font-variant-numeric:tabular-nums}
.viz-foot td.n,.viz-foot th.n{text-align:right;font-family:var(--mono)}

/* ---- comparison rows ---- */
.viz-rows{display:grid;gap:14px}
.viz-row{display:grid;grid-template-columns:118px 1fr 92px;gap:12px;align-items:center}
.viz-row .name{font-weight:700;font-size:.95rem;display:flex;flex-direction:column;line-height:1.2}
.viz-row .name small{font-weight:500;font-size:.75rem;color:var(--v-muted)}
.viz-row .keep{font:600 .95rem var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.viz-row .keep.neg{color:var(--v-loss)}
.viz-row .track{position:relative}
.viz-row .viz-bar{height:24px}
.viz-badge{display:inline-flex;align-items:center;gap:4px;background:var(--green-wash);color:var(--green);font:700 .68rem var(--sans);text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:999px;margin-top:3px;width:max-content}

/* ---- ACoS scale ---- */
.viz-scale{position:relative;padding:34px 0 30px}
.viz-scale .rail{height:14px;border-radius:999px;display:flex;gap:2px;overflow:hidden}
.viz-scale .zone{height:100%}
.viz-scale .pin{position:absolute;top:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;transition:left .35s cubic-bezier(.2,.7,.2,1)}
.viz-scale .pin .stem{width:2px;height:38px;background:var(--v-text);border-radius:2px}
.viz-scale .pin .tag{position:absolute;top:-24px;background:var(--v-text);color:var(--v-surface);font:600 .75rem var(--mono);padding:3px 7px;border-radius:6px;white-space:nowrap}
.viz-scale .mark{position:absolute;top:30px;transform:translateX(-50%);font:500 .72rem var(--sans);color:var(--v-text2);text-align:center;white-space:nowrap}
.viz-scale .mark::before{content:"";display:block;width:1px;height:22px;background:var(--v-text2);margin:0 auto 4px}
.viz-status{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem}
.viz-status svg{width:16px;height:16px}

@media (max-width:700px){.viz-panel{padding:18px 16px 14px}.viz-row{grid-template-columns:84px 1fr 74px;gap:8px}.viz-row .name{font-size:.85rem}}
@media print{.viz-panel{break-inside:avoid;border:1px solid #ccc}.viz-tip{display:none}}
@media (prefers-reduced-motion:reduce){.viz-bar .seg,.viz-scale .pin{transition:none}}
body.embed .viz-panel{display:none}