/* work site: the test stage and "who's stronger" */
.lab-sec{padding-bottom:clamp(56px,8vw,110px)}
.lab{display:grid;gap:14px}
/* every control is the same two rows - a label line and a 44px control line - so dropdowns, sliders and icon rows sit on one axis */
.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;gap:18px 24px;align-items:end;padding:20px 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.ctl{display:grid;grid-template-rows:20px 44px;gap:8px;min-width:0}
.ctl > .lbl{height:20px;line-height:20px}
.ctl > .dd,.ctl > .dd .dd-btn{height:44px}
.ctl > input[type=range]{align-self:center;height:44px;margin:0}
.ctl > .seg{justify-self:start;align-self:center;height:44px;align-items:center}
.more-ctl{display:flex;align-items:end}
.adv{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto auto;gap:18px 28px;align-items:end;padding-top:18px;border-top:1px solid var(--line)}
.controls:not(.open) > .adv{display:none}
/* background swatches: the colour itself instead of its name */
.swatches button i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.swatches [data-v=light] i{background:var(--paper)}
.swatches [data-v=dark] i{background:var(--black)}
.swatches [data-v=warm] i{background:var(--red)}
.swatches [data-v=photo] i{background:url(../img/shop.webp) center/cover}
.seg.swatches button[aria-pressed="true"]{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.stage{position:relative;border:2px solid var(--line-2);border-radius:var(--radius);padding:clamp(22px,4vw,48px);min-height:240px;overflow:hidden;transition:background .2s,color .2s}
.stage[data-theme=light]{background:var(--paper);color:var(--black)}
.stage[data-theme=dark]{background:var(--black);color:var(--paper)}
.stage[data-theme=warm]{background:var(--red);color:var(--paper);border-color:var(--red)}
.stage[data-theme=photo]{background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.55)),url(../img/shop.webp) center/cover;color:var(--paper)}
.stage-tools{position:absolute;top:14px;inset-inline-end:14px;z-index:2}
.stage[data-theme=light] .ibtn::after{background:var(--black);color:var(--paper)}
.lab-text{outline:none;overflow-wrap:anywhere;white-space:pre-wrap;min-height:2em;padding-top:44px}
.lab-all{display:grid;gap:6px;padding-top:44px}
.lab-all .row{display:grid;grid-template-columns:92px 1fr;gap:14px;align-items:baseline;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);padding-top:6px}
.lab-all .row small{font:400 13px/1.2 var(--ui);opacity:.7;direction:ltr;text-align:left}
.lab-all .row span{overflow-wrap:anywhere;white-space:pre-wrap}
/* under the stage: who you're looking at and what he costs */
.lab-buy{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:14px;padding:16px 20px;border:2px dashed var(--line-2);border-radius:var(--radius)}
.lab-buy p{margin:0;color:var(--muted)}
.lab-buy b{color:var(--ink);font-weight:900;font-size:20px}

/* compare: the same control card as the stage above */
.compare-tools{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto;margin-bottom:18px}
.cmp-swap{display:flex;align-items:end}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;min-width:0}
.col-name{margin:0 0 12px;color:var(--muted);font-size:14px}
.col-text{outline:none;overflow-wrap:break-word;white-space:pre-wrap;min-height:3em}
.swipe{--x:50%;position:relative;min-height:340px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none}
.swipe:focus-within{outline:3px solid var(--red);outline-offset:3px}
.swipe-layer{position:absolute;inset:0;display:grid;place-items:center;padding:40px;text-align:center;overflow-wrap:anywhere;white-space:pre-wrap;pointer-events:none}
.swipe-layer.is-a{background:var(--card);clip-path:inset(0 0 0 var(--x))}
.swipe-layer:not(.is-a){color:var(--red)}
.swipe-handle{z-index:3;position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}
.swipe-handle .dot{position:absolute;top:50%;left:50%;width:34px;height:34px;margin:-17px 0 0 -17px;box-shadow:0 0 0 6px rgba(255,46,46,.25)}
.swipe-lbl{position:absolute;z-index:2;bottom:14px;font-size:13px}
.swipe-lbl.a{right:16px;color:var(--ink)}.swipe-lbl.b{left:16px;color:var(--red)}
.swipe input[type=range]{position:absolute;inset:auto 0 0 0;opacity:0;pointer-events:none;height:1px}

@media (max-width:1100px){
  #lab-controls{grid-template-columns:repeat(2,minmax(0,1fr)) auto}
  #lab-controls > .ctl:nth-child(2){grid-column:2/4}
  #lab-controls > .ctl:nth-child(3),#lab-controls > .ctl:nth-child(4){grid-row:2}
  #lab-controls > .more-ctl{grid-row:2;grid-column:3}
  .adv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compare-tools{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .compare-tools > .ctl:nth-child(4){grid-column:1}
  .compare-tools > .ctl:nth-child(5){grid-column:2/4}
  .compare-tools > .cmp-mode-ctl{grid-column:1/-1}
}
@media (max-width:900px){.compare{grid-template-columns:1fr}}
@media (max-width:640px){
  .controls{gap:14px 12px;padding:16px}
  .lbl{white-space:nowrap}
  /* phone: the two pickers, then weight across, then size beside the settings button */
  #lab-controls > .ctl:nth-child(3){grid-column:1/-1;grid-row:2}
  #lab-controls > .ctl:nth-child(4){grid-column:1/3;grid-row:3}
  #lab-controls > .more-ctl{grid-row:3}
  .adv{grid-template-columns:1fr 1fr;gap:14px 16px}
  /* the stage stays in view above the controls */
  .lab .stage{order:-1;position:sticky;top:76px;z-index:3;min-height:0;max-height:40vh;overflow:auto}
  .stage-tools{position:static;margin:-6px -6px 12px}
  .lab-text,.lab-all{padding-top:0}
  .compare-tools > .ctl:nth-child(4),.compare-tools > .ctl:nth-child(5){grid-column:1/-1}
}