/* Lab: seven experiments. Colours come from the shared tokens; --lab (cranberry) is the tool hue. Shared chart and card
   classes live in viz.css and app-tool.css; this file only lays out the experiments and styles the few additions. */

.exp{scroll-margin-top:5.2rem}
.exp-lede{margin:0 0 1rem;max-width:62ch;font-size:1.01rem;line-height:1.55;color:var(--ink-2)}
.exp-grid{display:grid;grid-template-columns:minmax(15.5rem,19rem) minmax(0,1fr);gap:1.2rem;align-items:start}
.exp-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;align-content:start;min-width:0}
.exp-results{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;align-content:start;min-width:0}
.exp-results>*,.exp-controls>*{min-width:0}
.exp-results>.verdict,.exp-results>.kstats{margin:0}
.exp-foot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.2rem;align-items:start;margin-top:1.2rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.exp-foot .guide{align-self:start}
@media (max-width:980px){.exp-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){.exp-foot{grid-template-columns:minmax(0,1fr)}}

.lab-nav{position:sticky;top:4.4rem;z-index:20;display:flex;gap:.45rem;flex-wrap:wrap;padding:.55rem 0;margin-bottom:1.1rem;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lab-nav a{display:inline-flex;align-items:center;gap:.45rem;min-height:2.5rem;padding:0 .8rem 0 .4rem;border:1px solid var(--line-2);border-radius:999px;background:var(--paper);color:var(--ink-2);text-decoration:none;font:600 .86rem/1 var(--f-sans);font-stretch:104%;white-space:nowrap}
.lab-nav a i{display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--bg-2);color:var(--ink-2);font:700 .72rem var(--f-mono);font-style:normal}
.lab-nav a:hover{border-color:var(--lab);color:var(--ink)}
.lab-nav a[aria-current=true]{border-color:var(--lab);color:var(--ink)}
.lab-nav a[aria-current=true] i{background:var(--lab);color:#fff}
.lab-nav a:focus-visible{outline:2px solid var(--asp-blue);outline-offset:2px}
@media (max-width:720px){.lab-nav{top:3.6rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut)}}

.ctl{display:grid;gap:.65rem}
.ctl h3{font-size:.88rem;font-weight:700;font-stretch:104%;color:var(--ink)}
.ctl>.hint{margin:0}
.lab-body .seg button,.exp .seg button{min-height:2.5rem}
.exp .btn-sm{min-height:2.5rem}
.field-row{gap:.7rem}
.fld{display:grid;gap:.35rem;font-size:.82rem;font-weight:620;color:var(--ink-2)}
.fld input{font:600 .95rem/1.4 var(--f-mono)}
.oe-form{display:grid;gap:.75rem}
.oe-form .btn{justify-self:start}
.chk-set{border:0;padding:0;margin:0;display:grid;gap:.55rem;min-width:0}
.chk-set legend{font-size:.82rem;font-weight:620;color:var(--ink-2);margin-bottom:.35rem;padding:0}
.chk-set .chk{min-height:2.4rem}
.note-inline{margin:.7rem 0 0;font-size:.86rem;line-height:1.5;color:var(--ink-3)}
.lab-error{margin:.4rem 0 0;min-height:1.1em;font-size:.88rem;color:var(--bad)}
.lab-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.method-note{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2)}
#oe-note{margin-top:1rem}

.outcome-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.outcome{padding:.8rem .9rem}
.outcome strong{font-size:1.75rem}
.outcome-tp strong{color:var(--ok)} .outcome-fp strong{color:var(--warn)} .outcome-fn strong{color:var(--bad)}
@media (max-width:620px){.outcome-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.chart-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.chart-pair>.chart-card+.chart-card{margin-top:0}
@media (max-width:820px){.chart-pair{grid-template-columns:minmax(0,1fr)}}

.lanes{display:grid;gap:.5rem}
.lane{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:.35rem .8rem;align-items:center}
.lane-h{display:grid;gap:.1rem;min-width:0}
.lane-h b{font-size:.84rem;font-weight:620;color:var(--ink-2);overflow-wrap:anywhere}
.lane-h span{font:500 .72rem/1.3 var(--f-mono);color:var(--ink-3)}
@media (max-width:620px){.lane{grid-template-columns:minmax(0,1fr)}.lane-h{grid-template-columns:auto auto;justify-content:space-between;align-items:baseline}}

.lab-table{width:100%;border-collapse:collapse;font-size:.88rem}
.lab-table th,.lab-table td{padding:.5rem .55rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.lab-table thead th{font-size:.8rem;color:var(--ink-2);font-weight:620}
.lab-table td{font-family:var(--f-mono);text-align:right;white-space:nowrap}
.lab-table tbody th{font-family:var(--f-sans);font-weight:600;color:var(--ink);white-space:normal}

.wf-total{fill:var(--ink-2);opacity:.9}
.wf-loss{fill:var(--bad);opacity:.82}
.wf-gain{fill:var(--ok);opacity:.82}

.maths{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:.65rem .95rem}
.maths summary{cursor:pointer;font-weight:620;font-stretch:104%;color:var(--ink)}
.maths-body{margin-top:.2rem}
.maths-body p{margin:.6rem 0 0;font-size:.9rem;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.maths-body sub,.maths-body sup{font-size:.72em}

.kstats .kstat strong{overflow-wrap:anywhere}
.guide li{font-size:.94rem}