/* Explorer: the layers on the left, one card per step on the right. */
/* desktop: one screen, like an app */
.xp-main{max-width:1640px;height:100vh;height:100svh;min-height:620px;display:flex;flex-direction:column;padding-top:86px;padding-bottom:16px}
.xp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 40px;margin-bottom:18px}
.xp-head .eyebrow{margin-bottom:10px}
.xp-head .h2{font-size:clamp(28px,2.7vw,38px)}
.cases{display:flex;gap:10px;flex-wrap:wrap}
.case{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:16px;background:#fff;border:1px solid var(--hair);box-shadow:var(--sh-1);cursor:pointer;text-align:left;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.case:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.case[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink),var(--sh-2)}
.case canvas{width:48px;height:48px;object-fit:contain;image-rendering:pixelated;background:var(--paper);border-radius:10px;padding:3px}
.case b{display:block;font:700 16px/1.2 var(--display);color:var(--ink);letter-spacing:-.01em}
.case span{font:400 12px/1.4 var(--num);color:var(--label)}

.bench{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:22px;align-items:stretch}
.stages{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:1px 4px 1px 1px;align-content:start}
.viewer{position:relative;height:100%;min-height:0;border-radius:var(--r-l);background:radial-gradient(900px 600px at 50% 52%,#fff,rgba(255,255,255,0) 72%),var(--paper-2);border:1px solid var(--hair);box-shadow:var(--sh-2);overflow:hidden}
.xp-visual{position:absolute;inset:0}
.xp-visual .rig{left:46%;top:52%}
.viewbar{position:absolute;left:16px;top:14px;z-index:6}
#view button:disabled{opacity:.38;cursor:not-allowed}
.viewer .score-flat{position:absolute;left:0;right:0;bottom:30px;z-index:5;text-align:center;opacity:0;pointer-events:none}
.viewer .score-flat b{display:block;font:500 clamp(36px,4vw,56px)/1 var(--num);letter-spacing:-.04em}
.viewer .score-flat b.good{color:var(--good)}.viewer .score-flat b.bad{color:var(--bad)}
.viewer .score-flat span{display:block;margin-top:9px;font:400 12.5px/1.4 var(--num);color:var(--mut)}
.viewer .hint-open{display:none}

/* step cards */
.stages{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.stage-card{position:relative;display:grid;grid-template-rows:auto 0fr;background:#fff;border:1px solid var(--hair);border-radius:20px;box-shadow:var(--sh-1);transition:grid-template-rows .55s var(--ease),box-shadow .35s var(--ease),border-color .35s,opacity .35s}
.stage-card.cur{grid-template-rows:auto 1fr;border-color:var(--teal-l);box-shadow:0 0 0 1px var(--teal-l),var(--sh-2)}
.stage-card.todo{opacity:.62}
.stage-card.todo:hover{opacity:.85}
.sc-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;width:100%;padding:14px 18px;border:0;background:none;cursor:pointer;text-align:left;border-radius:20px}
.sc-head i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);font:600 12.5px/1 var(--num);color:var(--mut);transition:background .3s,box-shadow .3s,color .3s}
.stage-card.done .sc-head i{background:var(--teal-xl);box-shadow:inset 0 0 0 1.5px var(--teal-l);color:var(--teal-d)}
.stage-card.cur .sc-head i{background:var(--teal);box-shadow:none;color:#fff}
.sc-t{font:700 17px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.sc-sum{font:500 12.5px/1.2 var(--num);color:var(--mut);white-space:nowrap;text-align:right}
.stage-card.cur .sc-sum{color:var(--teal-d)}
.sc-body{min-height:0;overflow:hidden;padding:0 18px;transition:padding .55s var(--ease)}
.stages{--sc-pb:18px}
.stage-card.cur .sc-body{padding:0 18px var(--sc-pb)}
.sc-lead{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--body)}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.sc-foot .note{font:400 12px/1.4 var(--num);color:var(--label)}
.nb{height:38px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;font:600 14px/1 var(--sans);background:var(--teal);color:#fff;white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s,background .3s}
.nb:hover:not(:disabled){transform:translateX(2px);box-shadow:0 10px 22px -12px rgba(32,127,121,.8)}
.nb:disabled{background:#AFC4C1;cursor:not-allowed}

/* step 1: every past field in one scrolling list. explorer.js builds only the rows in view, at the fixed height --rh; the note row
   (--dh) marks where averaging stops. Desktop: explorer.js sizes the list to the column's free height and it keeps its own scroll
   (contain). Narrow screens: a fixed height, and the page takes the gesture over at either end (auto), so the list never traps it. */
.dcap{margin:0 0 8px;font:400 11px/1.4 var(--num);color:var(--label)}
.dcap b{font-weight:500;color:var(--ink)}
.dwrap{position:relative;border-radius:14px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line)}
.dwrap::before,.dwrap::after{content:"";position:absolute;left:1px;right:12px;z-index:2;pointer-events:none;opacity:0;transition:opacity .2s}
.dwrap::before{top:1px;height:16px;border-radius:13px 0 0 0;background:linear-gradient(var(--paper-2),rgba(251,250,246,0))}
.dwrap::after{bottom:1px;height:36px;border-radius:0 0 0 13px;background:linear-gradient(rgba(251,250,246,0),var(--paper-2) 88%)}
.dwrap.top::before,.dwrap.more::after{opacity:1}
.dwrap:has(.donors-list:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.donors-list{--rh:44px;--dh:28px;position:relative;height:300px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--faint) transparent;border-radius:14px;outline:none}
.donors-list:focus-visible{outline:none}
.dspace{position:relative;min-height:100%}
.drow{position:absolute;left:4px;right:4px;height:var(--rh);display:grid;grid-template-columns:36px minmax(0,1fr) 92px 60px;align-items:center;gap:10px;padding:0 8px 0 4px;border-radius:10px;cursor:pointer;transition:background .15s}
.drow:hover{background:var(--teal-xl)}
.drow[aria-selected="true"]{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.drow canvas.ic{width:36px;height:36px;object-fit:contain;image-rendering:pixelated;border-radius:4px}
.drow .nm{min-width:0}
.drow b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 13px/1.2 var(--num);color:var(--ink)}
.drow small{display:block;font:400 11px/1.3 var(--num);color:var(--label)}
.drow .w{display:flex;align-items:center;gap:6px;font:400 11.5px/1 var(--num);color:var(--mut)}
.drow .w i{display:block;height:5px;border-radius:3px;background:var(--teal);opacity:.75}
.drow .r{font:500 14px/1 var(--num);text-align:right}
.drow.off canvas.ic{opacity:.42}.drow.off b,.drow.off .w{color:var(--mut)}.drow.off .r{opacity:.7}
.dnote{position:absolute;left:12px;right:14px;height:var(--dh);display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--num);letter-spacing:.02em;color:var(--teal-d);white-space:nowrap;pointer-events:none}
.dnote b{font-weight:500}
.dnote i{flex:1;min-width:12px;height:0;border-top:1.5px solid var(--teal);opacity:.5}
.dnote span{color:var(--label)}
.dnote.idle{color:var(--mut)}.dnote.idle i{border-top:1px dashed var(--line-2);opacity:1}
.stage-card[data-s="1"] .sc-foot{margin-top:10px;padding-top:10px}
.xp-visual .plate[data-layer="donors"] .dbar{touch-action:pan-y}
.xp-visual .plate.open[data-layer="donors"] .dbar{cursor:ew-resize}
.pos{color:var(--add)}.neg{color:var(--remove)}

/* step 2: options */
.opt{margin-top:14px}
.opt:first-child{margin-top:4px}
.opt-l{display:block;margin-bottom:9px;font:500 10.5px/1 var(--num);letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.kchips{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.kc{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 8px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease),background .2s}
.kc:hover{border-color:var(--ink);transform:translateY(-1px)}
.kc[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-xl);box-shadow:inset 0 0 0 1px var(--teal)}
.kc b{font:600 14px/1 var(--num);color:var(--ink)}
.kc span{font:500 11px/1 var(--num)}
.keep-row{margin-top:12px}
.keep-row .chip{height:36px}
.stage-card .seg{max-width:100%}

/* step 3: strength */
.lam.big{max-width:none;grid-template-columns:auto 1fr auto}
.lam.big label{font:italic 600 18px/1 Georgia,serif;color:var(--ink);letter-spacing:0;text-transform:none}
.lam.big output{font-size:30px}
.lamticks{display:flex;justify-content:space-between;margin:2px 0 0 26px;padding-right:62px;font:400 11px/1 var(--num);color:var(--label)}

/* step 4: lock and score */
.your{margin:0 0 14px;font:500 14px/1.4 var(--num);color:var(--ink)}
.sc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sc3 div{padding:12px 12px 10px;border-radius:14px;background:var(--paper-2);border:1px solid var(--line)}
.sc3 span{display:block;font:500 10px/1 var(--num);letter-spacing:.1em;text-transform:uppercase;color:var(--label);margin-bottom:8px}
.sc3 b{display:block;font:500 22px/1 var(--num);color:var(--ink);letter-spacing:-.02em}
.sc3 .d.good{background:#E6F3EE;border-color:#BFE3D4}.sc3 .d.good b{color:var(--good)}
.sc3 .d.bad{background:#F8E8E1;border-color:#EDC9BA}.sc3 .d.bad b{color:var(--bad)}
.lock-err{margin:10px 0 0;font:400 12.5px/1.45 var(--num);color:var(--bad)}
.expl{margin:10px 0 0;padding:9px 12px;border-radius:12px;background:var(--warn-bg);color:var(--warn);font:400 12.5px/1.45 var(--num)}
.pol-line,.trace-line{margin:10px 0 0;font:400 12.5px/1.55 var(--num);color:var(--mut);text-wrap:pretty}
.pol-line b,.trace-line b{color:var(--ink);font-weight:500}
.postlock .pill{margin-top:14px}
.xp-foot{margin:10px 0 0}

@media(max-width:1060px){
  .xp-main{height:auto;min-height:0;display:block;padding-bottom:40px}
  .bench{grid-template-columns:minmax(0,1fr);gap:16px;height:auto}
  .stages{height:auto;overflow:visible;padding:0}
  .viewer{position:sticky;top:72px;height:min(62vh,500px);min-height:300px;z-index:20}
  .stage-card{scroll-margin-top:calc(72px + min(62vh,500px) + 14px)}
  .xp-head{grid-template-columns:1fr}
  .donors-list{--rh:48px;height:clamp(192px,38svh,270px);overscroll-behavior:auto}
}
@media(max-width:560px){
  .xp-main{padding-top:92px}
  .xp-head .h2{font-size:30px}
  .viewer{height:max(44vh,320px);min-height:0;border-radius:18px}
  .stage-card{scroll-margin-top:calc(72px + max(44vh,320px) + 12px)}
  .cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .case{flex-direction:column;align-items:flex-start;gap:6px;padding:8px 10px}.case canvas{width:36px;height:36px}.case b{font-size:14px}.case span span{display:none}
  .viewer .hint-open{display:none}
  .drow{grid-template-columns:36px minmax(0,1fr) 60px;gap:8px}
  .drow .w{display:none}
  .dnote{left:8px;right:10px;font-size:10px}.dnote span{display:none}   /* phones: the dimmed rows below say the rest */
  .kc b{font-size:13px}.kc span{font-size:10px}
  .sc3 b{font-size:18px}
  .lamticks{padding-right:58px}
}
.pol-line b.good{color:var(--good)}.pol-line b.bad{color:var(--bad)}
.stage-card,.sc-body{transition-duration:.4s}
.viewer.is-result .xp-visual .plate .face{cursor:default}
.stage-card .sc-sum.good{color:var(--good)}.stage-card .sc-sum.bad{color:var(--bad)}
@media(max-width:1060px) and (max-height:700px){.viewer{height:min(56vh,500px)}}
.stages.more{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent)}
@media(max-width:1060px){.stages.more{-webkit-mask-image:none;mask-image:none}}
.sc-head{padding:11px 18px}
.stages{gap:8px}
/* Presentation motion: the pulled plate leads, the controls settle behind it.
   Depth comes from matte surfaces and slab edges; the data keep their real colours. */
.xp{--xp-arrive:cubic-bezier(.22,1,.36,1)}
.xp .stage-card{transition:grid-template-rows .42s var(--xp-arrive),box-shadow .24s ease,border-color .24s ease,opacity .24s ease}
.xp .sc-body{transition:none}
.xp .stages{overflow-anchor:none}
.xp .plate .face{background:linear-gradient(145deg,#fffdf7 0%,#f7f4eb 58%,#ede8da 100%);box-shadow:inset 0 0 0 2px rgba(49,57,48,.16),inset 0 3px 0 rgba(255,255,255,.92),0 16px 28px -20px rgba(34,47,36,.3);transition:box-shadow .24s ease}
.xp .plate .slab{background:linear-gradient(135deg,#d8d1bf,#b5aa92);box-shadow:inset 0 0 0 2px rgba(68,64,48,.16)}
.xp .plate.hot .face{box-shadow:inset 0 0 0 3px var(--teal),inset 0 3px 0 rgba(255,255,255,.92),0 16px 28px -20px rgba(34,47,36,.3)}
.xp .plate .etch{color:rgba(26,34,48,.76)}
.xp .plate .etch.r{color:rgba(26,34,48,.62)}
.xp .plate[data-layer="donors"] .face,.xp .plate[data-layer="cands"] .face{background:linear-gradient(145deg,#fcfdf8,#edf2e9)}
.xp .viewer{background:radial-gradient(ellipse at 52% 38%,#fcfcf8 0%,#f1eee4 82%)}
.xp .yield-value{margin-top:6px;color:var(--ink);font-variant-numeric:tabular-nums}
.xp .yield-value strong{display:block;font:500 27px/1.05 var(--num);letter-spacing:-.03em}
.xp .yield-value small{display:block;margin-top:4px;font:400 11px/1.2 var(--sans);color:var(--label)}
.xp .viewer .score-flat{bottom:16px}
.xp .viewer .score-flat> b{font-size:40px}
.xp .viewer .score-flat> span{max-width:90%;margin:5px auto 0;font-size:11.5px}
.yield-legend{max-width:260px;width:52%;margin:12px auto 0}
.yield-legend>i{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,#440154,#3b528b,#21918c,#5ec962,#fde725)}
.yield-legend>div{display:flex;justify-content:space-between;margin-top:4px;color:var(--label);font:400 11px/1.2 var(--num)}
.yield-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:4px 0 12px;border-bottom:1px solid var(--line)}
.yield-summary span{display:block;font:500 11px/1.35 var(--sans);color:var(--label)}
.yield-summary b{display:block;margin-top:6px;font:500 28px/1 var(--num);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.yield-summary>div:last-child b{color:var(--teal-d)}
.yield-note,.pixel-hint{margin:8px 0 0;font:400 11px/1.5 var(--sans);color:var(--label)}
.mse-label{margin:18px 0 8px;font:500 11px/1.3 var(--sans);color:var(--label)}
.xp .postlock .sc3 b{font-size:19px}
.xp .viewer.is-result canvas.map{cursor:crosshair}
@media(max-width:560px){
  .xp .yield-value{margin-top:4px}.xp .yield-value strong{font-size:19px}.xp .yield-value small{font-size:11px}
  .xp .fc>span{font-size:11px}.xp .fc>b{font-size:11px;min-height:2.5em}
  .xp .viewer .score-flat{bottom:12px}.xp .viewer .score-flat> b{font-size:26px}
  .xp .viewer .score-flat> span{font-size:11px;margin-top:3px}
  .yield-legend{margin-top:8px;width:60%}.yield-legend>div{font-size:11px}
  .yield-summary b{font-size:25px}
}
/* short desktop screens: tighter headers, so step 1's list keeps a few rows while all four steps stay in view */
@media(min-width:1061px) and (max-height:760px){
  .xp-main{padding-top:80px;padding-bottom:10px}
  .xp-head{margin-bottom:12px}
  .case{padding:6px 14px 6px 6px}.case canvas{width:42px;height:42px}
  .sc-head{padding:7px 18px}
  .stages{gap:6px;--sc-pb:14px}
  .xp-foot{margin-top:6px}
}

/* Use the same anchored layer callouts as the Overview hero, with compact type beside the working stack. */
.xp-visual .co{width:164px;gap:0 7px;align-items:center}
.xp-visual .co i{grid-row:auto;width:22px;height:22px}
.xp-visual .co b{font-size:12px;line-height:1.25}
.xp-visual .co span{display:none}
@media(max-width:900px){.xp-visual .overlay .co{display:grid}.xp-visual .leaders g[data-layer] path,.xp-visual .leaders g[data-layer] circle{display:block}}
@media(max-width:560px){
 .viewer{height:clamp(410px,62vh,520px)}
 .stage-card{scroll-margin-top:calc(72px + clamp(410px,62vh,520px) + 12px)}
 .xp-visual .co{width:150px;gap:0 6px}.xp-visual .co b{font-size:11px}.xp-visual .co i{width:19px;height:19px;font-size:12px}
}

/* Keep multi-line card titles together instead of letting the summary squeeze one word out. */
.sc-t{text-wrap:balance;min-width:0}
@media(max-width:560px){.sc-head{grid-template-columns:auto minmax(0,1fr);gap:6px 10px}.sc-sum{grid-column:2;text-align:left;font-size:11px}.sc-sum:empty{display:none}.sc-t{font-size:16px}}