/* Probability sandbox — shared styles. Layers on the global /style.css.
   Inline SVG + vanilla JS, mounted from elements with data-stat="...". */

:root {
  --yes: #2fbf71;    /* green  — the "B happened" path */
  --tot: #ff8a3d;    /* orange — the total-probability answer */
  --bay: #a06bff;    /* purple — the Bayes answer */
}

.edu-wide { max-width: 820px; }
.crumbs { font-size: 13px; color: var(--muted); margin: -6px 0 18px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .5; margin: 0 7px; }

.st-demo { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px 18px 20px; margin: 18px 0 26px; }
.st-demo h3 { margin: 0 0 4px; font-size: 18px; }
.st-demo .demo-hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

.st-stage { display: flex; justify-content: center; }
svg.st-svg { width: 100%; height: auto; max-width: 560px; display: block; user-select: none; -webkit-user-select: none; }

.st-branch { stroke: var(--ink); stroke-linecap: round; }
.st-plbl { fill: var(--muted); font-size: 12px; font-weight: 700; font-family: inherit; }
.st-node { fill: var(--ink); font-size: 14px; font-weight: 800; font-family: inherit; }
.st-root { fill: var(--ink); }
.st-box { fill: rgba(255,255,255,.04); stroke: var(--border); stroke-width: 1; }
.st-box.hot { stroke: rgba(47,191,113,.55); }
.st-lname { fill: var(--muted); font-size: 10.5px; font-family: inherit; }
.st-lval { fill: var(--ink); font-size: 15px; font-weight: 800; font-family: inherit; }
.st-lsim { fill: var(--tot); font-size: 10.5px; font-weight: 700; font-family: inherit; }

/* readout */
.st-read { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 4px; }
@media (max-width: 620px) { .st-read { grid-template-columns: 1fr; } }
.st-eq { text-align: center; font-size: 17px; line-height: 1.8; padding: 12px 10px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); overflow-x: auto; }
.st-eq .mut { color: var(--muted); font-size: .8em; }
.st-eq .tot { color: var(--tot); font-size: 1.15em; } .st-eq .bay { color: var(--bay); font-size: 1.15em; }
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; line-height: 1.15; margin: 0 .16em; font-size: .8em; }
.frac > .num { padding: 0 .5em .06em; } .frac > .den { padding: .06em .5em 0; border-top: 2px solid currentColor; }

/* scenario picker + controls */
.st-scen { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 6px; align-items: center; }
.st-scen .lbl { width: 100%; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.sbtn { appearance: none; cursor: pointer; border: 1px solid var(--border); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 650; padding: 9px 13px; border-radius: 10px; transition: border-color .12s, background .12s, transform .1s; }
.sbtn:hover { border-color: var(--accent); transform: translateY(-1px); }
.sbtn.on { border-color: var(--accent); background: var(--accent-soft); }
.sbtn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.st-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.st-slider { flex: 1 1 100%; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.st-slider .sl-name { min-width: 120px; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-slider .sl-name b { color: var(--yes); }
.st-slider input[type=range] { flex: 1; min-width: 0; width: 0; accent-color: var(--accent); height: 28px; }
.st-slider .sl-val { min-width: 44px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.formula { background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 10px; padding: 12px 16px; margin: 14px 0; font-size: 17px; line-height: 1.9; overflow-x: auto; }
.formula b { color: var(--accent); }

.usegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0; }
@media (max-width: 540px) { .usegrid { grid-template-columns: 1fr; } }
.usebox { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: rgba(255,255,255,.03); }
.usebox h4 { margin: 0 0 6px; font-size: 15px; }
.usebox.o { border-color: rgba(255,138,61,.4); }
.usebox.p { border-color: rgba(160,107,255,.4); }

/* data & normal curve + regression */
svg.st-svg.nrm, svg.st-svg.reg { touch-action: none; }
svg.st-svg.reg { max-width: 460px; }
.st-axis { stroke: rgba(255,255,255,.3); stroke-width: 1.5; }
.st-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.nrm-band { stroke: none; }
.nrm-band.b1 { fill: rgba(47,191,113,.34); }
.nrm-band.b2 { fill: rgba(47,191,113,.2); }
.nrm-band.b3 { fill: rgba(47,191,113,.1); }
.nrm-curve { fill: none; stroke: var(--yes); stroke-width: 2.5; opacity: .85; }
.nrm-dot { cursor: grab; } .nrm-dot:active { cursor: grabbing; }
.nrm-dot .dot { fill: var(--tot); stroke: var(--bg-bot); stroke-width: 1.5; }
.nrm-mean { fill: var(--tot); }
.nrm-median { stroke: var(--yes); stroke-width: 2; stroke-dasharray: 5 4; }
.nrm-mklbl { font-size: 11px; font-weight: 700; font-family: inherit; }
.nrm-mklbl.md { fill: var(--yes); } .nrm-mklbl.mn { fill: var(--tot); }

.reg-line { stroke: var(--tot); stroke-width: 3; stroke-linecap: round; }
.reg-resid { stroke: var(--bay); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .8; }
.reg-mean { fill: none; stroke: var(--yes); stroke-width: 2; }
.reg-dotg { cursor: grab; } .reg-dotg:active { cursor: grabbing; }
.reg-dot { fill: var(--curve, #3b6fe0); fill: #3b6fe0; stroke: var(--bg-bot); stroke-width: 1.5; }

.st-read.wide { grid-template-columns: 1fr; }
.st-statgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.st-stat { flex: 1 1 90px; text-align: center; padding: 9px 8px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.st-stat .k { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.st-stat b { font-size: 18px; font-weight: 800; }
.st-stat.mn b { color: var(--tot); } .st-stat.md b { color: var(--yes); }