/* Prompt Lab. Builds on th.css tokens and components only. */

/* ── frame ─────────────────────────────────────────────────────────── */
.lab-facts{align-self:flex-end}
.lab-ws{display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:1.4rem; align-items:start}
.lab-main{min-width:0; display:flex; flex-direction:column}
.lab-panel{min-width:0; padding-bottom:.5rem}
.rail-skel{height:2.7rem; margin:.45rem .5rem}
.head-skel{height:2rem; width:min(18rem,70%)}
.panel-skel{height:22rem}
@media (max-width:60rem){ .lab-ws{grid-template-columns:minmax(0,1fr); gap:.9rem} }

/* ── suites rail ───────────────────────────────────────────────────── */
.lab-rail{position:sticky; top:calc(var(--bar-h) + 1rem); min-width:0}
.rail-desk{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); max-height:calc(100vh - var(--bar-h) - 2rem); overflow:hidden}
.rail-head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.55rem .6rem .55rem .85rem; border-bottom:1px solid var(--line-2); min-height:2.9rem}
.rail-list{overflow:auto; padding:.35rem; display:flex; flex-direction:column; gap:.12rem; min-height:0}
.rail-item{position:relative; display:flex; border-radius:var(--r)}
.rail-btn{all:unset; box-sizing:border-box; flex:1; min-width:0; cursor:pointer; padding:.55rem 2.1rem .55rem .65rem; border-radius:var(--r); display:flex; flex-direction:column; gap:.25rem}
.rail-btn:hover{background:var(--bg-2)}
.rail-btn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.rail-item.on .rail-btn{background:var(--bg-2); box-shadow:inset 2px 0 0 var(--ink)}
.rail-name{font:600 var(--t-sm)/1.25 var(--f-ui); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rail-meta{font:400 var(--t-xs)/1.3 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.rail-run{display:flex; align-items:center; gap:.4rem; font:400 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3)}
.rail-run .pct{font-size:var(--t-2xs); margin-left:auto}
.rail-run-k{font-weight:600; letter-spacing:.005em}
.rail-run.ex .rail-run-k{color:var(--ink); background:var(--hi-wash); border:1px solid var(--hi); border-radius:2px; padding:.05rem .3rem}
.rail-running{margin-top:.1rem}
.rail-more{position:absolute; right:.3rem; top:.4rem; width:1.7rem; height:1.7rem; border:0; padding:0; background:none; color:var(--ink-3); border-radius:var(--r); display:grid; place-items:center; opacity:0; transition:opacity .12s}
.rail-item:hover .rail-more,.rail-item.on .rail-more,.rail-more:focus-visible{opacity:1}
.rail-more:hover{background:var(--panel); color:var(--ink)}
.rail-more svg{width:1rem; height:1rem}
@media (hover:none){ .rail-more{opacity:1} }
.rail-foot{border-top:1px solid var(--line-2); padding:.45rem .5rem .55rem; display:flex; flex-direction:column; align-items:flex-start; gap:.25rem}
.rail-store{font-size:var(--t-xs); padding:0 .35rem}
.rail-mob{display:none}
@media (max-width:60rem){
  .lab-rail{position:static}
  .rail-desk{display:none}
  .rail-mob{display:flex; align-items:center; gap:.45rem; padding:.5rem .55rem .5rem .75rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel)}
  .rail-select{flex:1; min-width:0}
}

/* ── suite head, onboarding, tabs ──────────────────────────────────── */
.lab-head{display:flex; align-items:center; gap:.4rem .8rem; min-height:2.7rem; margin-bottom:.3rem; flex-wrap:wrap}
.suite-name{font:400 clamp(1.35rem,2.3vw,1.7rem)/1.15 var(--f-head); letter-spacing:-.015em; color:var(--ink); background:transparent; border:1px solid transparent; border-radius:var(--r); padding:.15rem .4rem; margin-left:-.4rem; min-width:6ch; flex:0 1 auto; field-sizing:content; max-width:100%}
.suite-name:hover{border-color:var(--line)}
.suite-name:focus{outline:none; border-color:var(--accent); background:var(--field); box-shadow:0 0 0 3px var(--accent-wash)}
.save-state{font:400 var(--t-xs)/1.2 var(--f-ui); letter-spacing:0; color:var(--ink-3); white-space:nowrap}
.save-state.error{color:var(--bad)}
.onb{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; padding:.7rem .85rem .7rem 1rem; margin:.25rem 0 .7rem; border:1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius:var(--r-lg); background:linear-gradient(90deg, var(--accent-wash), transparent 75%), var(--panel)}
.onb-text{flex:1 1 26rem; font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2)}
.onb-text b{font:600 var(--t-sm)/1 var(--f-ui); color:var(--ink)}
.lab-tabs{margin-bottom:1rem; position:sticky; top:var(--bar-h); z-index:6; background:var(--bg)}
.lab-tabs .count[hidden]{display:none}
/* the tab strip scrolls sideways, which clips outside outlines: draw focus inside the tab */
.lab-tabs [role=tab]:focus-visible{outline:2px solid var(--accent); outline-offset:-3px; border-radius:var(--r)}
.t-short{display:none}
@media (max-width:60rem){ .lab-head > .btn.icon{display:none} }
@media (max-width:30rem){
  /* five equal tabs, count under the label, so everything fits at 375 without scrolling */
  .lab-tabs{gap:0}
  .lab-tabs [role=tab]{flex:1 1 0; min-width:0; flex-direction:column; justify-content:flex-start; gap:.25rem; padding:.55rem .15rem .5rem; letter-spacing:0}
  .lab-tabs .count{font-size:.6rem; padding:.1rem .35rem}
  .lab-tabs .run-dot{margin-top:.2rem}
  .t-long{display:none} .t-short{display:inline}
  .save-state{flex-basis:100%}
}
.run-dot{display:none; width:.45rem; height:.45rem; background:var(--hi); transform:rotate(45deg); animation:pulse 1s ease-in-out infinite}
.lab-tabs .is-running .run-dot{display:inline-block}

/* ── prompt tab ────────────────────────────────────────────────────── */
.p-strip{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem}
.p-tools .select{width:auto; max-width:14rem}
.vchips{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center}
.vchip{font:600 var(--t-xs)/1 var(--f-ui); padding:.5rem .7rem; min-height:2.1rem; border:1px solid var(--line); border-radius:var(--r); background:var(--field); color:var(--ink-2); display:inline-flex; gap:.35rem; align-items:center; max-width:14rem}
.vchip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.vchip:hover{border-color:var(--ink); color:var(--ink)}
.vchip.on{background:var(--ink); border-color:var(--ink); color:var(--panel)}
.vchip.add{border-style:dashed; background:transparent; color:var(--accent)}
.vchip.add:hover{border-color:var(--accent); background:var(--accent-wash)}
.vchip svg{width:.85rem; height:.85rem}
.vchip.sm{padding:.42rem .6rem; min-height:1.95rem}
.p-meta{display:grid; grid-template-columns:minmax(0,7rem) minmax(0,1fr) auto auto; gap:.6rem; align-items:end; margin-top:.85rem}
.p-meta label{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.p-when{white-space:nowrap; padding-bottom:.4rem}
@media (max-width:40rem){ .p-meta{grid-template-columns:minmax(0,5.5rem) minmax(0,1fr) auto} .p-when{display:none} }
.p-used{margin-top:.8rem; align-items:center; flex-wrap:wrap}
.p-used > div:first-child,.r-older > div:first-child{flex:1 1 18rem}
.p-editors{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; margin-top:1rem}
@media (max-width:72rem){ .p-editors{grid-template-columns:minmax(0,1fr)} }
.p-editors .textarea{min-height:12rem; max-height:72vh}
.p-tok{font:400 var(--t-2xs)/1 var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; color:var(--ink-3)}
.p-vars{display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center; min-height:1.7rem}
.p-vars .lab{margin-right:.15rem}
.p-var{font-size:var(--t-xs); padding:.22rem .4rem}
.p-diff{margin-top:1rem}
.p-diff:empty{display:none}
.p-diffbody{max-height:24rem}
.d-add{color:var(--good)} .d-del{color:var(--bad)}
ins.diff-ins,del.diff-del{text-decoration-skip-ink:none}

/* ── test cases tab ────────────────────────────────────────────────── */
.c-bar{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-bottom:.8rem}
.c-cols{--gap:.8rem}
.c-empty{margin-top:.4rem}
.c-empty > span{max-width:52ch}
.callout + .c-empty,.callout + .c-wrap{margin-top:.8rem}
.c-table th{z-index:2}
.c-table td{padding:0; border-right:1px solid var(--line-2); vertical-align:top}
.c-table td:last-child{border-right:0}
.c-table td.c-n{padding:.62rem .55rem 0; color:var(--ink-3); font-size:var(--t-xs); font-variant-numeric:tabular-nums; text-align:right; width:2.8rem}
.c-table th.c-n{text-align:right}
.c-table .c-var{min-width:15rem}
.c-table .c-var.short{min-width:7rem; width:9rem}
.c-table .c-expected{min-width:10rem; width:17%}
.c-table .c-note{min-width:9rem; width:15%}
.c-table .c-act{width:4.4rem; padding:.3rem .25rem}
.c-table tbody tr:hover td{background:transparent}
.c-in{display:block; width:100%; border:0; background:transparent; resize:none; font:400 .86rem/1.5 var(--f-ui); color:var(--ink); padding:.55rem .65rem; min-height:2.45rem; max-height:20rem; overflow-y:auto}
.c-in:hover{background:color-mix(in srgb, var(--bg-2) 50%, transparent)}
.c-in:focus{outline:none; background:var(--field); box-shadow:inset 0 0 0 2px var(--accent)}
td.c-expected .c-in{font:400 .8rem/1.55 var(--f-mono)}
td.c-note .c-in{font:400 .9rem/1.45 var(--f-serif); color:var(--ink-2)}
.c-thint{color:var(--ink-3); cursor:help; text-transform:none}
.c-acts{display:flex; gap:.1rem; opacity:.5; transition:opacity .12s}
.c-table tr:hover .c-acts,.c-acts:focus-within{opacity:1}
.c-foot{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:.7rem}
@media (hover:none){ .c-acts{opacity:1} }
@media (max-width:40rem){
  .c-table,.c-table tbody,.c-table tr,.c-table td{display:block; width:100%}
  .c-table thead{display:none}
  .c-table tr{position:relative; border-bottom:1px solid var(--line); padding:.2rem 0 .5rem}
  .c-table tr:last-child{border-bottom:0}
  .c-table td{border-right:0; border-bottom:0; min-width:0 !important; width:100% !important}
  .c-table td[data-label]::before{content:attr(data-label); display:block; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--ink-3); padding:.45rem .65rem 0}
  .c-table td.c-var[data-label]::before{font:500 var(--t-xs)/1.3 var(--f-mono); letter-spacing:0}
  .c-table td.c-n{text-align:left; padding:.55rem .65rem .1rem; font-weight:600; color:var(--ink)}
  .c-table td.c-n::before{display:inline; padding:0; margin-right:.4rem}
  .c-table td.c-act{position:absolute; top:.25rem; right:.25rem; width:auto !important; padding:0}
}

/* import / generate dialogs */
.imp-map{display:flex; flex-direction:column; gap:.4rem}
.imp-cols{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,11rem),1fr)); gap:.5rem}
.imp-col{display:flex; flex-direction:column; gap:.3rem; padding:.5rem; border:1px solid var(--line-2); border-radius:var(--r); background:var(--field); min-width:0}
.imp-src{font-size:var(--t-xs); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.gen-opts{display:grid; grid-template-columns:minmax(0,1fr) 7rem auto; gap:.8rem; align-items:end}
.gen-opts .modelpick{width:100%}
.gen-exp{padding-bottom:.55rem}
@media (max-width:40rem){ .gen-opts{grid-template-columns:minmax(0,1fr) 6rem} .gen-exp{grid-column:1 / -1; padding:0} }
.gen-status:empty{display:none}
.gen-list{display:flex; flex-direction:column; gap:.5rem}
.gen-list:empty{display:none}
.gen-row{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.7rem; padding:.65rem .75rem; border:1px solid var(--line-2); border-radius:var(--r); background:var(--field); cursor:pointer}
.gen-row:hover{border-color:var(--ink-4)}
.gen-row.off{opacity:.5}
.gen-row input{margin-top:.15rem; accent-color:var(--ink); width:1rem; height:1rem}
.gen-body{display:flex; flex-direction:column; gap:.35rem; min-width:0}
.gen-note{font:400 1rem/1.4 var(--f-serif); color:var(--accent)}
.gen-body dd{white-space:pre-wrap; font-size:var(--t-sm)}

/* ── checks tab ────────────────────────────────────────────────────── */
.ck-bar{display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; align-items:flex-start; justify-content:space-between; margin-bottom:.9rem}
.ck-bar > div:first-child{flex:1 1 30rem; max-width:68ch}
.ck-list{display:flex; flex-direction:column; gap:.55rem}
.ck-card{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); padding:.65rem .8rem .75rem; display:flex; flex-direction:column; gap:.55rem}
.ck-card.off{background:transparent; border-style:dashed}
.ck-card.off .ck-desc,.ck-card.off .ck-fields{opacity:.62}
.ck-card.invalid{border-color:color-mix(in srgb, var(--hi) 65%, var(--line))}
.ck-row{display:flex; align-items:center; gap:.5rem .75rem; flex-wrap:wrap}
.ck-type-sel{width:auto; flex:none; min-width:10.5rem}
.ck-desc{font:500 var(--t-sm)/1.35 var(--f-ui); color:var(--ink); flex:1 1 18rem; min-width:0; overflow-wrap:anywhere}
.ck-acts{display:flex; gap:.1rem; margin-left:auto}
.ck-fields{display:flex; flex-wrap:wrap; gap:.6rem .8rem; align-items:flex-end; padding-left:2.85rem}
.ck-f{display:flex; flex-direction:column; gap:.3rem; min-width:9rem; flex:0 1 13rem}
.ck-f.wide{flex:1 1 22rem}
.ck-f.xs{flex:0 0 6.5rem; min-width:5.5rem}
.ck-f.sm{flex:0 0 9.5rem}
.ck-bool{min-height:1.95rem}
.ck-help{font:400 var(--t-sm)/1.4 var(--f-serif); color:var(--ink-3); padding-left:2.85rem; max-width:80ch}
.ck-err{font:500 var(--t-xs)/1.35 var(--f-ui); color:var(--bad); padding-left:2.85rem}
.ck-err:empty{display:none}
.ck-mdesc{display:none; font:500 var(--t-sm)/1.35 var(--f-ui); color:var(--ink); overflow-wrap:anywhere}
@media (max-width:40rem){
  .ck-fields,.ck-help,.ck-err{padding-left:0}
  .ck-row{flex-wrap:nowrap}
  .ck-row .spacer,.ck-desc{display:none}
  .ck-type-sel{flex:1 1 auto; min-width:0}
  .ck-mdesc{display:block}
  .ck-f,.ck-f.wide{flex:1 1 100%}
  .ck-f.xs,.ck-f.sm{flex:1 1 40%}
}
.ck-judge{margin-top:1rem}
.ck-jrow{display:grid; grid-template-columns:minmax(0,18rem) minmax(0,1fr); gap:1rem 1.4rem; align-items:start}
.ck-jrow .modelpick{width:100%}
.ck-jrow .hint p + p,.ck-jrow .hint p + button{margin-top:.4rem}
.ck-warn{color:var(--bad)}
@media (max-width:48rem){ .ck-jrow{grid-template-columns:minmax(0,1fr)} }
.ck-try{margin-top:1rem}
.ck-try .select{width:auto; max-width:min(26rem,100%)}
.try-res{display:flex; flex-direction:column; gap:.5rem}
.try-row{display:grid; grid-template-columns:5.6rem minmax(0,1fr); gap:.6rem; align-items:baseline}
.try-row.off{opacity:.6}
.try-d{display:flex; flex-direction:column; gap:.12rem; font-size:var(--t-sm); min-width:0; overflow-wrap:anywhere}
.try-d small{font:400 .95rem/1.4 var(--f-serif); color:var(--ink-3)}

/* ── run tab ───────────────────────────────────────────────────────── */
.r-gate:empty{display:none}
.r-gate{margin-bottom:.9rem; display:flex; flex-direction:column; gap:.5rem}
.r-gate-ex:empty{display:none}
.r-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) auto; gap:1rem 1.4rem; padding:.95rem; align-items:start}
.r-f{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.r-vers{display:flex; flex-wrap:wrap; gap:.35rem}
.r-models .modelpick{width:100%; min-height:2.35rem}
.r-set{display:grid; grid-template-columns:5.6rem 6.4rem 9.6rem 6.4rem; gap:.6rem}
.r-fh{font:400 var(--t-xs)/1.25 var(--f-ui); color:var(--ink-3)}
@media (max-width:84rem){ .r-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .r-set{grid-column:1 / -1; grid-template-columns:repeat(4, minmax(0,9.6rem))} }
@media (max-width:44rem){ .r-grid{grid-template-columns:minmax(0,1fr)} .r-set{grid-template-columns:repeat(2, minmax(0,1fr))} }
.r-foot{display:flex; flex-wrap:wrap; gap:.9rem 1.4rem; align-items:flex-start; justify-content:space-between; padding:.85rem .95rem; border-top:1px solid var(--line-2); background:var(--bg-2); border-radius:0 0 var(--r-lg) var(--r-lg)}
.r-sum{flex:1 1 28rem; display:flex; flex-direction:column; gap:.5rem; min-width:0}
.r-count{font:400 var(--t-sm)/1.4 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-2)}
.r-count b{color:var(--ink); font-weight:600}
.r-est{font:400 var(--t-sm)/1.45 var(--f-ui); color:var(--ink-2)}
.r-est .tag{vertical-align:1px}
.r-est .hint{display:block; margin-top:.2rem}
.r-block ul,.r-warn ul{display:flex; flex-direction:column; gap:.25rem}
.r-acts{display:flex; gap:.5rem; align-items:center; flex:none}
.r-go .kbds{margin-left:.15rem}
.kbds{display:inline-flex; gap:.2rem; align-items:center}
.btn .kbds kbd{background:transparent; color:inherit; border-color:currentColor; opacity:.75}
@media (max-width:44rem){ .r-acts,.r-acts .btn{width:100%} }
.r-prog{margin-top:1rem; padding:.8rem .95rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); display:flex; flex-direction:column; gap:.55rem}
.r-prog-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.4rem 1rem; align-items:baseline}
.r-prog-label{font:600 var(--t-sm)/1.2 var(--f-ui); font-variant-numeric:tabular-nums}
.c-pass{color:var(--good)} .c-fail{color:var(--bad)} .c-err{color:var(--hi)}
.r-meter{height:.5rem}
.r-results{margin-top:1.3rem}
.r-older{margin-bottom:.9rem; align-items:center; flex-wrap:wrap}
.r-empty .hint{display:inline-flex; gap:.4rem; align-items:center}

/* ── results ───────────────────────────────────────────────────────── */
.res{display:flex; flex-direction:column; gap:1.2rem}
.res-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.6rem 1rem}
.res-title{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.ex-banner b{font-weight:600}
.ex-banner.compact{padding:.5rem .75rem}
.ex-model i{background:var(--hi)}
.band-in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 2.2rem; align-items:center; background:var(--stage); color:var(--stage-ink); border-radius:var(--r-lg); padding:1.15rem 1.3rem 1.2rem}
.band-eyebrow{display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--stage-dim)}
.band-pair{display:inline-flex; align-items:center; gap:.4rem}
.band-head{font:380 clamp(1.5rem,2.9vw,2.15rem)/1.06 var(--f-head); letter-spacing:-.018em; margin-top:.45rem; text-wrap:balance}
.band-sub{font:400 .98rem/1.4 var(--f-serif); color:var(--stage-dim); margin-top:.5rem; max-width:62ch}
.band-stats{display:flex; gap:1.5rem}
.bstat{display:flex; flex-direction:column; gap:.35rem; min-width:3.8rem}
.bstat b{font:340 2.2rem/1 var(--f-head); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.015em}
.bstat span{font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--stage-dim); white-space:nowrap}
.bstat.good b{color:color-mix(in srgb, var(--good) 55%, var(--stage-ink))}
.bstat.bad b{color:color-mix(in srgb, var(--bad) 60%, var(--stage-ink))}
.bstat.big b{font-size:2.6rem}
.band-sel{width:auto; min-height:1.75rem; padding:.2rem 1.7rem .2rem .5rem; background-color:var(--stage-2); color:var(--stage-ink); border-color:var(--stage-line);
  background-image:linear-gradient(45deg,transparent 50%,var(--stage-dim) 50%),linear-gradient(135deg,var(--stage-dim) 50%,transparent 50%)}
.band-sel:hover{border-color:var(--stage-dim)}
.band-empty{display:flex; gap:.6rem; align-items:center; padding:1rem 1.1rem; border:1px dashed var(--line); border-radius:var(--r-lg); color:var(--ink-3); font:400 1rem/1.4 var(--f-serif)}
@media (max-width:52rem){ .band-in{grid-template-columns:minmax(0,1fr)} .band-stats{gap:1.1rem 1.4rem; flex-wrap:wrap} .bstat b{font-size:1.8rem} }
@media (max-width:30rem){ .band-stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr))} .band-in{padding:1rem} }
@media (hover:none){ .r-go .kbds{display:none} }
.res-changes:empty{display:none}
.chg{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,26rem),1fr)); gap:1rem}
.chg-col{display:flex; flex-direction:column; gap:.5rem; min-width:0}
.chg-head{display:flex; align-items:baseline; gap:.3rem .7rem; flex-wrap:wrap}
.chg-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden; max-height:24rem; overflow-y:auto}
.chg-row{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:2.4rem minmax(0,1fr) auto; gap:.3rem .8rem; align-items:center; padding:.6rem .8rem; border-top:1px solid var(--line-2)}
.chg-row:first-child{border-top:0}
.chg-row:hover{background:var(--bg-2)}
.chg-row:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.chg-row.broke{box-shadow:inset 3px 0 0 var(--bad)}
.chg-row.fixed{box-shadow:inset 3px 0 0 var(--good)}
.chg-n{font-size:var(--t-xs); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.chg-text{display:flex; flex-direction:column; gap:.18rem; min-width:0}
.chg-text b{font:500 var(--t-sm)/1.3 var(--f-ui); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chg-why{font:400 .95rem/1.35 var(--f-serif); color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chg-m{font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink-2); margin-right:.5rem}
.chg-m::after{content:" ·"; color:var(--ink-3)}
.chg-flip{display:inline-flex; gap:.4rem; align-items:center; color:var(--ink-3)}
.chg-acts{margin-top:.7rem}
@media (max-width:40rem){ .chg-row{grid-template-columns:2rem minmax(0,1fr)} .chg-flip{grid-column:2} }
.res-sec{display:flex; flex-direction:column; gap:.55rem; min-width:0}
.sec-head{display:flex; align-items:center; gap:.5rem 1rem; flex-wrap:wrap}
.sec-head .h4{margin-right:.2rem}

/* row headers in result tables read as text, not column labels */
.res .table tbody th,.cmp-table tbody th{position:static; font:400 var(--t-sm)/1.35 var(--f-ui); letter-spacing:0; text-transform:none; color:var(--ink); white-space:normal; background:transparent; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; padding:.6rem .75rem}
.res .table tbody tr:last-child th{border-bottom:0}
.sc-table td.sc-cell{min-width:11.5rem; padding:.7rem .8rem}
.sc-v b{font:600 var(--t-sm)/1.2 var(--f-ui)}
.sc-note{display:block; font:400 var(--t-xs)/1.35 var(--f-serif); color:var(--ink-3); max-width:20rem; margin-top:.25rem}
.sc-top{display:flex; align-items:center; gap:.55rem}
.sc-top .pct{font:360 1.55rem/1 var(--f-head); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.01em}
.sc-cell .meter{margin:.45rem 0 .45rem; max-width:13rem}
.sc-meta{display:flex; flex-wrap:wrap; gap:.15rem .75rem; font:400 var(--t-2xs)/1.45 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.sc-err{color:var(--hi)}
.sc-cell.best{background:linear-gradient(var(--good-wash),var(--good-wash))}
.sc-best{padding:.22rem .4rem}
.pc-table .pc-desc{min-width:16rem}
.pc-type{display:block; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--ink-3); margin-bottom:.15rem}
.pc-cell{min-width:4.6rem}
.pc-cell small{display:block; font:400 var(--t-2xs)/1.3 var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink-3); margin-top:.15rem}
.pc-combo{white-space:nowrap}
.pc-combo span{display:block; text-align:right}
.pc-m{color:var(--ink-3); font-size:.6rem; text-transform:none; letter-spacing:.02em; max-width:9rem; overflow:hidden; text-overflow:ellipsis; margin-left:auto}

/* case grid */
.grid-head .seg{flex:none}
.grid-search{width:auto; flex:0 1 15rem; min-width:9rem}
.grid-wrap{max-height:76vh}
.g-table{border-collapse:separate; border-spacing:0}
.g-table thead th{background:var(--panel)}
.g-table.two thead tr:nth-child(2) th{top:2.05rem}
.g-table .gh-v th{height:2.05rem; padding-block:.5rem}
.g-table th.g-case{position:sticky; left:0; z-index:2; background:var(--panel); min-width:14rem; max-width:22rem; border-right:1px solid var(--line-2)}
.g-table thead th.g-case{z-index:4; vertical-align:bottom}
.res .g-table tbody th.g-case{position:sticky; left:0; z-index:1; background:var(--panel)}
.g-vgroup{border-left:1px solid var(--line-2)}
.g-col{min-width:7.2rem; vertical-align:bottom}
.g-colin{display:flex; flex-direction:column; gap:.35rem; text-transform:none; letter-spacing:0}
.g-colin b{font:600 var(--t-xs)/1 var(--f-ui)}
.g-col .mpill{max-width:11rem; font-size:var(--t-2xs)}
.g-td{padding:.28rem .3rem !important; border-bottom:1px solid var(--line-2)}
.g-table tbody tr:hover th.g-case,.g-table tbody tr:hover td{background:color-mix(in srgb, var(--bg-2) 45%, var(--panel))}
.g-n{font-size:var(--t-xs); font-variant-numeric:tabular-nums; color:var(--ink-3); margin-right:.45rem}
.g-snip{font-size:var(--t-sm)}
.g-note{display:block; font:400 var(--t-xs)/1.3 var(--f-serif); color:var(--ink-3); margin-top:.18rem}
tr.is-broke th.g-case{box-shadow:inset 3px 0 0 var(--bad)}
tr.is-fixed th.g-case{box-shadow:inset 3px 0 0 var(--good)}
.rc{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:.22rem; padding:.42rem .5rem; border-radius:var(--r); min-width:6.6rem; width:100%; border:1px solid transparent}
.rc:hover:not(:disabled){border-color:var(--line); background:var(--field)}
.rc:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.rc.fail{background:var(--bad-wash)}
.rc.error{background:var(--hi-wash)}
.rc:disabled{cursor:default}
.rc-sub{font:400 var(--t-xs)/1.2 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); min-height:.8rem; white-space:nowrap}
.rc-pend{font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink-3); padding:.2rem 0}
.rc.pending .rc-pend{animation:pulse 1.2s ease-in-out infinite}
@media (max-width:40rem){
  .g-table th.g-case{min-width:8.5rem; max-width:9.5rem}
  .g-snip{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:var(--t-xs)}
  .g-note{display:none}
  .grid-head .seg{max-width:100%; overflow-x:auto; scrollbar-width:none}
  .grid-search{flex:1 1 100%}
}

/* cell + compare modals */
.cell-modal{display:flex; flex-direction:column; gap:.95rem}
.cm-nav{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; align-items:center}
.cm-others{display:flex; flex-wrap:wrap; gap:.35rem}
.cm-other{display:inline-flex; gap:.45rem; align-items:center; font:500 var(--t-xs)/1 var(--f-ui); padding:.4rem .55rem; border:1px solid var(--line); border-radius:var(--r); background:var(--field); color:var(--ink-2)}
.cm-other span{color:var(--ink-3)}
.cm-other:hover:not(:disabled){border-color:var(--ink)}
.cm-other.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); color:var(--ink)}
.cm-other:disabled{opacity:.5; cursor:default}
.cm-top{display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center}
.cm-split{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:1.1rem}
@media (max-width:48rem){ .cm-split{grid-template-columns:minmax(0,1fr)} }
.cm-out{border:1px solid var(--line-2); background:var(--field); border-radius:var(--r); padding:.75rem .85rem; max-height:26rem; overflow:auto}
.cm-exp{border:1px dashed var(--line); border-radius:var(--r); padding:.55rem .7rem; font-size:.9rem}
.cm-checks{display:flex; flex-direction:column; gap:.6rem}
.cm-check{display:grid; grid-template-columns:4.8rem minmax(0,1fr); gap:.5rem; align-items:baseline}
.cm-cdesc{display:block; font-size:var(--t-sm); color:var(--ink); overflow-wrap:anywhere}
.cm-cnote{display:block; font:400 .95rem/1.4 var(--f-serif); color:var(--ink-3); margin-top:.15rem; overflow-wrap:anywhere}
.cm-prompt{border-top:1px solid var(--line-2); padding-top:.6rem}
.cm-prompt summary{cursor:pointer; font:600 var(--t-sm)/1.4 var(--f-ui); letter-spacing:.005em; color:var(--ink-2); padding:.25rem 0}
.cm-prompt[open]{display:flex; flex-direction:column; gap:.65rem}
.cm-vars dd{font-size:var(--t-sm)}
.cmp-outs{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem}
.cmp-outs:has(.cmp-diff){grid-template-columns:minmax(0,1fr)}
.cmp-diff{border:1px solid var(--line-2); background:var(--field); border-radius:var(--r); padding:.75rem .85rem; max-height:26rem; overflow:auto}
.cmp-table tr.flip th,.cmp-table tr.flip td{background:var(--hi-wash)}
.cmp-table td{min-width:9rem}
.cmp-note{display:block; color:var(--ink-3); font:400 .95rem/1.35 var(--f-serif); margin-top:.25rem}
@media (max-width:48rem){ .cmp-outs{grid-template-columns:minmax(0,1fr)} }

/* ── history tab ───────────────────────────────────────────────────── */
.h-trend{margin-bottom:1rem}
.h-chart{min-height:4rem}
.h-chart-empty{padding:.4rem 0}
.h-svgwrap{position:relative}
.h-svg{display:block; width:100%; height:auto; overflow:visible}
.h-grid{stroke:var(--line-2); stroke-width:1}
.h-ax{fill:var(--ink-3); font:400 10px var(--f-mono); font-variant-numeric:tabular-nums}
.h-line{fill:none; stroke:var(--viz-1); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.h-dot{fill:var(--viz-1); stroke:var(--panel); stroke-width:2; pointer-events:none}
.h-dot.ex{fill:var(--panel); stroke:var(--viz-1)}
.h-hit{fill:transparent; cursor:pointer; outline:none}
.h-hit:focus-visible{stroke:var(--accent); stroke-width:2}
.h-lab{fill:var(--ink-2); font:500 11px var(--f-mono)}
.h-tip{position:absolute; z-index:5; width:150px; display:flex; flex-direction:column; gap:.15rem; padding:.45rem .6rem; background:var(--ink); color:var(--panel); border-radius:var(--r); font:400 var(--t-xs)/1.35 var(--f-ui); font-variant-numeric:tabular-nums; pointer-events:none; box-shadow:var(--shadow-pop)}
.h-tip b{font:380 1.2rem/1 var(--f-head); font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.01em}
.h-table td{vertical-align:middle}
.h-when b{display:block; font-weight:600; white-space:nowrap}
.h-when .hint{display:block}
.h-when .badge{margin-top:.3rem}
.h-vers,.h-models{min-width:6rem}
.h-vers .tag + .tag{margin-left:.25rem}
.h-models{display:table-cell}
.h-models .mpill{display:flex; margin:.15rem 0; max-width:13rem}
.h-chips{display:flex; flex-wrap:wrap; gap:.3rem; min-width:12rem}
.h-chip{display:inline-flex; gap:.45rem; align-items:center; font:500 var(--t-xs)/1 var(--f-ui); padding:.32rem .45rem; border:1px solid var(--line-2); border-radius:var(--r); background:var(--field); color:var(--ink-2)}
.h-chip.best{border-color:color-mix(in srgb, var(--good) 50%, var(--line))}
.h-chip .pct{font-size:var(--t-xs)}
.h-act .btns{flex-wrap:nowrap; justify-content:flex-end}
.h-table tr.is-ex .h-when b{color:var(--ink-2)}
.h-foot{margin-top:.6rem}
@media (max-width:40rem){
  .h-table table,.h-table tbody,.h-table tr,.h-table td{display:block; width:100%}
  .h-table thead{display:none}
  .h-table tr{position:relative; padding:.6rem .75rem .7rem; border-bottom:1px solid var(--line)}
  .h-table tr:last-child{border-bottom:0}
  .h-table td{border:0; padding:.2rem 0; text-align:left !important}
  .h-table td[data-label]:not(.h-when)::before{content:attr(data-label); display:inline-block; min-width:5.5rem; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--ink-3)}
  .h-table td.h-act{position:absolute; top:.5rem; right:.5rem; width:auto; padding:0}
  .h-models .mpill{display:inline-flex; margin:0 .5rem 0 0}
  .h-chips{min-width:0; margin-top:.3rem}
}

/* ── how it works ──────────────────────────────────────────────────── */
.lab-prose h3:first-child{margin-top:0}
.lab-prose .faq{border-top:1px solid var(--line-2); padding:.65rem 0}
.lab-prose .faq + .faq{margin-top:0}
.lab-prose .faq:last-child{border-bottom:1px solid var(--line-2)}
.lab-prose .faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:1rem; font:600 1rem/1.35 var(--f-ui); color:var(--ink)}
.lab-prose .faq summary::-webkit-details-marker{display:none}
.lab-prose .faq summary::after{content:"+"; font-family:var(--f-ui); font-weight:400; color:var(--ink-3)}
.lab-prose .faq[open] summary::after{content:"−"}
.lab-prose .faq p{margin-top:.5rem}

/* Local fix for the shared model picker: its provider groups shrink and clip inside the
   scrolling list (flex items default to flex-shrink:1). Reported for th.css. */
.mp-dialog .mp-group{flex-shrink:0}