/* ═══════════════════════════════════════════════════════════════
   Sofire-IT, interactive layer (Oct 2026)
   Triage picker, before/after slider, step carousel, downtime
   calculator, coverage map. Lives in its own file because
   styles.css is served with a one-year immutable cache.
   Every component reads fine with JS off.
   ═══════════════════════════════════════════════════════════════ */

/* white icons on filled buttons (svg.ico defaults to brand red, which
   vanished on red buttons) */
.btn-solid svg.ico,.btn-dark svg.ico{color:#fff;}

/* ── HERO: facts row + triage picker ─────────────────────────── */
.hero-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;
  margin-top:36px;padding-top:22px;border-top:1px solid var(--line);max-width:640px;}
.hero-facts dt{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:2px;}
.hero-facts dd{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink);
  letter-spacing:-0.015em;line-height:1.2;}
.hero-facts dd small{display:block;font-family:var(--body);font-size:13.5px;font-weight:400;
  color:var(--ink-2);letter-spacing:0;margin-top:2px;}

.triage{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(21,23,28,.35);
  align-self:start;}
.triage-q{font-size:clamp(21px,2vw,25px);margin-bottom:6px;}
.triage-sub{font-size:14.5px;color:var(--ink-2);margin-bottom:18px;line-height:1.5;}
.triage-opts{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px;}
.triage-opts button{font:500 14px/1.2 var(--body);color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r);padding:9px 12px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;}
.triage-opts button:hover{border-color:var(--ink);}
.triage-opts button[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff;}
.triage-panel{border-top:1px solid var(--ink);}
.triage-panel[hidden]{display:none;}
.triage-panel.swap{animation:trIn .28s ease;}
@keyframes trIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.triage-panel dl > div{padding:11px 0;border-bottom:1px solid var(--line);}
.triage-panel dt{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:1px;}
.triage-panel dd{font-size:15px;color:var(--ink-2);line-height:1.5;}
.triage-go{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:18px;}
.triage-go .btn{padding:11px 16px;font-size:14.5px;}
.triage-go .btn svg{width:16px;height:16px;}
.triage-more{font-size:14.5px;font-weight:500;color:var(--red);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(194,38,27,.35);}
.triage-more:hover{text-decoration-color:var(--red);}
@media(max-width:1080px){.triage{max-width:640px;}}
@media(max-width:640px){
  .hero-facts{grid-template-columns:1fr 1fr;}
  .hero-facts > div:last-child{grid-column:1/-1;}
}

/* ── BEFORE / AFTER SLIDER ───────────────────────────────────── */
.compare-wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,4vw,64px);align-items:center;}
.compare-head p{font-size:16.5px;color:var(--ink-2);max-width:44ch;margin-top:16px;}
.compare-head .compare-cap{margin-top:22px;}
.compare{--pos:50%;position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-2);background:var(--wash-2);user-select:none;-webkit-user-select:none;
  touch-action:pan-y;}
.compare img{display:block;width:100%;height:auto;pointer-events:none;}
.compare-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);}
.compare-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;
  background:#fff;box-shadow:0 0 0 1px rgba(21,23,28,.25);pointer-events:none;}
.compare-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(21,23,28,.3);transition:transform .15s;}
.compare-knob svg{width:22px;height:22px;}
.compare:hover .compare-knob,.compare.drag .compare-knob{transform:scale(1.08);}
.compare-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;
  -webkit-appearance:none;appearance:none;}
.compare-range:focus-visible + .compare-ring{opacity:1;}
.compare-ring{position:absolute;inset:0;border:2px solid var(--red);border-radius:var(--r-lg);
  opacity:0;pointer-events:none;}
.compare-tag{position:absolute;top:14px;font-size:13px;font-weight:600;padding:5px 10px;
  border-radius:var(--r);pointer-events:none;transition:opacity .2s;}
.compare-tag.l{left:14px;background:var(--card);color:var(--ink);}
.compare-tag.r{right:14px;background:var(--ink);color:#fff;}
.compare[data-at="lo"] .compare-tag.l,.compare[data-at="hi"] .compare-tag.r{opacity:0;}
.compare-cap{font-size:14px;color:var(--ink-3);margin-top:12px;}
.compare.nudge .compare-line,.compare.nudge .compare-before{transition:left .5s cubic-bezier(.45,0,.2,1),clip-path .5s cubic-bezier(.45,0,.2,1);}
@media(max-width:900px){.compare-wrap{grid-template-columns:1fr;gap:24px;}}
@media(max-width:640px){
  /* zoom into the cabinet on phones; both layers get the same crop */
  .compare img{width:170%;max-width:none;margin-left:-35%;}
}

/* ── STEP CAROUSEL ───────────────────────────────────────────── */
.car-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px;}
.car-head h2{max-width:20ch;}
.car-head p{font-size:16.5px;color:var(--ink-2);margin-top:10px;max-width:52ch;}
.car-nav{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.car-nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:var(--card);color:var(--ink);cursor:pointer;display:grid;place-items:center;
  transition:border-color .15s,background .15s,opacity .15s;}
.car-nav button:hover:not(:disabled){border-color:var(--ink);}
.car-nav button:disabled{opacity:.35;cursor:default;}
.car-nav svg{width:18px;height:18px;}
.car-count{font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);
  min-width:44px;text-align:center;font-variant-numeric:tabular-nums;}
.car{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none;
  margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);
  cursor:grab;}
.car::-webkit-scrollbar{display:none;}
.car.dragging{cursor:grabbing;scroll-snap-type:none;}
.car.dragging .car-slide{pointer-events:none;}
.car:focus-visible{outline:2px solid var(--red);outline-offset:-2px;}
.car-track{list-style:none;display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;}
.car-slide{scroll-snap-align:start;width:clamp(272px,31vw,470px);flex-shrink:0;
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;}
.car-art{background:var(--cw,var(--wash));border-bottom:1px solid var(--line);}
.car-art img{display:block;width:100%;height:auto;aspect-ratio:3/2;}
.car-body{padding:22px clamp(20px,2vw,26px) 26px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;}
.car-n{grid-row:span 2;font-family:var(--display);font-size:40px;font-weight:800;line-height:.9;
  color:var(--c,var(--red));letter-spacing:-0.04em;}
.car-body h3{margin-bottom:4px;}
.car-body p{font-size:15.5px;color:var(--ink-2);line-height:1.6;grid-column:2;}
.car-bar{height:3px;background:var(--line);border-radius:2px;margin-top:22px;overflow:hidden;}
.car-bar span{display:block;height:100%;width:25%;background:var(--ink);border-radius:2px;
  transition:transform .3s ease,width .3s ease;}
@media(max-width:640px){
  .car-head{flex-direction:column;align-items:start;}
  .car-slide{width:84vw;}
}

/* ── DOWNTIME CALCULATOR ─────────────────────────────────────── */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;}
.calc-copy > p{font-size:16.5px;color:var(--ink-2);margin:14px 0 30px;max-width:52ch;}
.calc-ctl{padding:18px 0;border-top:1px solid var(--line-2);}
.calc-ctl:last-child{border-bottom:1px solid var(--line-2);}
.calc-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;}
.calc-ctl label span{font-weight:600;color:var(--ink);font-size:15.5px;}
.calc-ctl label small{display:block;font-weight:400;color:var(--ink-3);font-size:13.5px;margin-top:1px;}
.calc-ctl output{font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);
  letter-spacing:-0.02em;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* range input, shared look */
.rng{--fill:50%;-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0;}
.rng:focus{outline:none;}
.rng::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--red) var(--fill),var(--line-2) var(--fill));}
.rng::-moz-range-track{height:6px;border-radius:3px;background:var(--line-2);}
.rng::-moz-range-progress{height:6px;border-radius:3px;background:var(--red);}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;margin-top:-9px;
  background:var(--card);border:2px solid var(--ink);box-shadow:0 2px 6px rgba(21,23,28,.2);transition:transform .12s;}
.rng::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);
  border:2px solid var(--ink);box-shadow:0 2px 6px rgba(21,23,28,.2);}
.rng:active::-webkit-slider-thumb{transform:scale(1.15);}
.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--red-wash),0 0 0 6px var(--red);}
.rng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--red-wash),0 0 0 6px var(--red);}

.calc-out{background:var(--ink-deep);color:#A8AEBB;border-radius:var(--r-lg);padding:clamp(24px,3vw,36px);
  position:sticky;top:120px;}
.calc-office{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin-bottom:26px;min-height:40px;}
.calc-desk{aspect-ratio:1;border-radius:5px;background:#1E2128;border:1px solid #2E323B;
  display:grid;place-items:center;}
.calc-desk svg{width:70%;height:70%;color:#6C737F;}
.calc-desk.new{animation:deskIn .25s ease;}
@keyframes deskIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.calc-desk .wait{transform-origin:12px 9px;animation:wait 1.1s linear infinite;}
@keyframes wait{to{transform:rotate(360deg)}}
.calc-nums{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:22px;border-top:1px solid #2A2E36;}
.calc-nums small{display:block;font-size:13.5px;color:#8D949F;margin-bottom:4px;}
.calc-nums b{font-family:var(--display);font-size:clamp(28px,3.2vw,42px);font-weight:800;color:#fff;
  letter-spacing:-0.03em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;}
.calc-nums div:last-child b{color:#FF8A7A;}
.calc-note{font-size:15px;line-height:1.55;margin-top:20px;color:#A8AEBB;}
.calc-note strong{color:#fff;font-weight:600;}
.calc-out .btns{margin-top:24px;}
@media(max-width:900px){
  /* numbers sit right above the sliders on small screens, so you can
     see them change while you drag */
  .calc{display:flex;flex-direction:column;gap:0;}
  .calc-copy{display:contents;}
  .calc-copy > h2,.calc-copy > p{order:1;}
  .calc-copy > p{margin-bottom:22px;}
  .calc-out{order:2;position:static;margin-bottom:10px;}
  .calc-ctl{order:3;}
}
@media(max-width:640px){
  .calc-office{display:none;}
  .calc-nums{padding-top:0;border-top:0;}
}

/* ── COVERAGE MAP ────────────────────────────────────────────── */
.cover{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;}
.cover-find{display:flex;gap:8px;padding:16px;border-bottom:1px solid var(--line);}
.cover-find input{flex:1;min-width:0;font:400 16px var(--body);color:var(--ink);background:var(--paper);
  border:1px solid var(--line-2);border-radius:var(--r);padding:11px 13px;}
.cover-find input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-wash);}
.cover-find .btn{padding:11px 16px;font-size:14.5px;}
.cover-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.cover-map{display:block;width:100%;height:auto;max-height:520px;color:var(--line-2);background:var(--paper);}
.cover-zone{stroke-width:1.5;stroke-dasharray:4 5;}
.cover-zone.z1{fill:rgba(194,38,27,.05);stroke:rgba(194,38,27,.35);}
.cover-zone.z2{fill:rgba(178,106,0,.06);stroke:rgba(178,106,0,.4);}
.cover-hub{font:700 13px var(--display);fill:var(--ink-3);letter-spacing:-0.01em;}
.cover-key{color:var(--ink-3);fill:var(--ink-3);font:600 11px var(--body);}
.cover-pin{cursor:pointer;outline:none;}
.cover-pin .dot{stroke:var(--card);stroke-width:2;transition:r .15s;}
.cover-pin.t1 .dot{fill:var(--red);}
.cover-pin.t2 .dot{fill:var(--amber);}
.cover-pin .halo{fill:transparent;transition:fill .15s;}
.cover-pin:hover .halo,.cover-pin:focus-visible .halo{fill:rgba(21,23,28,.08);}
.cover-pin.on .dot{r:8;}
.cover-pin.on .halo{fill:rgba(194,38,27,.14);}
.cover-pin.t2.on .halo{fill:rgba(178,106,0,.16);}
.cover-pin:focus-visible .dot{stroke:var(--ink);}
.cover-read{padding:clamp(20px,2.4vw,28px);border-left:1px solid var(--line);display:flex;flex-direction:column;}
.cover-read h3{font-size:clamp(20px,2vw,24px);margin-bottom:8px;}
.cover-read p{font-size:15px;color:var(--ink-2);line-height:1.55;}
.cover-badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--ink);margin-bottom:12px;}
.cover-badge i{width:10px;height:10px;border-radius:50%;background:var(--red);}
.cover-badge.t2 i{background:var(--amber);}
.cover-badge.t0 i{background:var(--ink-3);}
.cover-legend{margin-top:auto;padding-top:20px;display:grid;gap:8px;font-size:13.5px;color:var(--ink-2);}
.cover-legend span{display:flex;align-items:center;gap:9px;}
.cover-legend i{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.coverage-tags{margin-top:26px;}
.coverage-tags span{cursor:default;transition:border-color .15s,transform .15s;}
.coverage-tags span.on{border-color:var(--ink) !important;transform:translateY(-1px);}
@media(max-width:1180px) and (min-width:901px){
  .cover-body{grid-template-columns:1fr;}
  .cover-read{border-left:0;border-top:1px solid var(--line);}
  .cover-map{max-height:420px;}
}
@media(max-width:640px){
  .cover-body{grid-template-columns:1fr;}
  .cover-read{border-left:0;border-top:1px solid var(--line);}
  .cover-map{max-height:440px;}
}

/* ── reduced motion ──────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .triage-panel.swap,.calc-desk.new{animation:none;}
  .calc-desk .wait{animation:none;}
  .compare.nudge .compare-line,.compare.nudge .compare-before{transition:none;}
}
@media print{
  .triage-opts,.car-nav,.cover-find,.calc-out .btns{display:none;}
  .triage-panel[hidden]{display:block;}
}