/* v4-ladder: owned by the ladder builder.
   The kit ladder (sections/kit-ladder.liquid + snippets/kit-diagram.liquid).
   A blue trace climbs through staggered levels; the node of the level you are
   on lights orange (light = current). Content is fully visible without JS;
   assets/v4-ladder.js only adds .is-current and part <-> marker .is-lit. */

.kit-ladder{--rail:72px;--step:clamp(32px,5vw,80px);--node:20px;--code:clamp(2.4rem,4.2vw,4.25rem);--node-y:calc(var(--code) * .5);--pb:clamp(56px,6vw,88px);position:relative;overflow-x:clip}

/* ---------- Head ---------- */
.kl__head{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:24px clamp(32px,5vw,96px);margin-bottom:clamp(56px,7vw,104px)}
.kl__title{margin:0;max-width:11ch;font-size:clamp(2.75rem,6.4vw,6rem);line-height:.94;letter-spacing:-.045em;font-weight:760;font-variation-settings:"opsz" 96;color:var(--ink);text-wrap:balance}
.kl__intro{margin:0 0 .4em;max-width:34ch;color:var(--ink-2);font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.55;text-wrap:pretty}

/* ---------- Rungs + trace ---------- */
.kl__rungs{list-style:none;margin:0;padding:0}
.kl__rung{position:relative;margin-left:calc(var(--i,0) * var(--step));padding-left:var(--rail);padding-bottom:var(--pb)}
.kl__rung+.kl__rung{margin-top:var(--step)}
.kl__rung::before{content:"";position:absolute;left:calc(var(--rail) / 2 - 1px);top:0;bottom:0;width:2px;background:var(--blue)}
.kl__rung--first::before{top:var(--node-y)}
.kl__rung--last::before{bottom:calc(var(--pb) - 28px)}
/* end of the trace: a terminal pad */
.kl__rung--last::after{content:"";position:absolute;left:calc(var(--rail) / 2 - 7px);bottom:calc(var(--pb) - 35px);width:14px;height:14px;box-sizing:border-box;border:2px solid var(--blue);border-radius:3px;background:var(--bg)}
.kl__jog{position:absolute;left:calc(var(--rail) / 2 - var(--step));top:calc(var(--step) * -1);width:var(--step);height:var(--step);overflow:visible}
.kl__jog path{fill:none;stroke:var(--blue);stroke-width:2}

.kl__node{position:absolute;z-index:1;left:calc(var(--rail) / 2 - var(--node) / 2);top:calc(var(--node-y) - var(--node) / 2);width:var(--node);height:var(--node);box-sizing:border-box;border-radius:50%;background:var(--bg);border:2px solid var(--blue)}
.kl__node::after{content:"";position:absolute;inset:3px;border-radius:50%;background:transparent}
.kl__rung:is(.is-current,:hover,:focus-within) .kl__node{border-color:var(--orange);box-shadow:0 0 24px -6px #ff7a0099,0 0 0 5px color-mix(in oklab,var(--orange) 14%,transparent)}
.kl__rung:is(.is-current,:hover,:focus-within) .kl__node::after{background:var(--orange)}

/* ---------- Body layout ---------- */
.kl__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-areas:"id fig" "sum fig" "bom fig" "foot fig";grid-template-rows:auto auto auto 1fr;column-gap:clamp(32px,4.5vw,80px);align-items:start}
.kl__id{grid-area:id}
.kl__summary{grid-area:sum}
.kl__bom{grid-area:bom}
.kl__foot{grid-area:foot}
.kl__fig{grid-area:fig;margin:0}

/* ---------- Identity ---------- */
.kl__code{margin:0;font-family:var(--font-mono);font-weight:340;font-stretch:87.5%;font-size:var(--code);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.kl__nameline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:clamp(14px,1.6vw,22px)}
.kl__name{margin:0;font-size:clamp(1.55rem,2.3vw,2.25rem);line-height:1.05;letter-spacing:-.035em;font-weight:760;font-variation-settings:"opsz" 96;color:var(--ink)}
.kl__grades{margin:0;padding:5px 10px 4px;border:1px solid var(--line-2);border-radius:6px;font:450 .75rem/1.4 var(--font-mono);letter-spacing:.04em;color:var(--ink-2);white-space:nowrap}
.kl__summary{margin:16px 0 0;max-width:46ch;color:var(--ink-2);font-size:1.05rem;line-height:1.6;text-wrap:pretty}

/* ---------- Bill of materials ---------- */
.kl__bom{margin-top:clamp(26px,2.6vw,36px);max-width:520px}
.kl__label{display:flex;justify-content:space-between;gap:16px;margin:0;padding-bottom:10px;border-bottom:1px solid var(--line-2);font:450 .75rem/1.4 var(--font-mono);letter-spacing:.04em;color:var(--ink-2)}
.kl__label span+span{color:var(--ink-3)}
.kl__parts{list-style:none;margin:0;padding:0}
.kl__part{display:grid;grid-template-columns:24px 6.4em minmax(0,1fr);align-items:center;gap:14px;padding:9px 8px;margin-inline:-8px;border-bottom:1px solid var(--line);border-radius:0}
.kl__num{display:inline-grid;place-items:center;width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:1px solid var(--line-2);font:500 .75rem/1 var(--font-mono);color:var(--ink);background:var(--bg)}
.kl__ref{font:450 .75rem/1.3 var(--font-mono);letter-spacing:.04em;color:var(--ink-2)}
.kl__pname{font-size:.98rem;line-height:1.35;color:var(--ink)}
.kl__part[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:0;border-radius:6px}
.kl__part.is-lit{background:var(--bg-hi)}
.kl__part.is-lit .kl__num{background:var(--orange);border-color:var(--orange);color:var(--on-accent)}

/* ---------- Spec, outcome, link ---------- */
.kl__foot{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:clamp(22px,2.2vw,30px)}
.kl__spec{display:inline-flex;flex-wrap:wrap;margin:0;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;font:450 .75rem/1.3 var(--font-mono);letter-spacing:.04em;color:var(--ink)}
.kl__spec>span:not(.visually-hidden){padding:8px 12px;border-right:1px solid var(--line-2);white-space:nowrap}
.kl__spec>span:last-child{border-right:0}
.kl__spec>span:nth-child(2){background:var(--bg-raised)}
.kl__outcome{margin:0;font-size:1rem;line-height:1.5;color:var(--ink)}
.kl__outcome-label{font:450 .75rem/1 var(--font-mono);letter-spacing:.04em;color:var(--ink-2);margin-right:.35em}
.kl__link{color:var(--blue-text);margin-top:-8px;font-size:.95rem}
.kl__link:hover{color:var(--ink)}

/* ---------- Diagram plate ---------- */
.kl__plate{background:var(--bg-sunk);border:1px solid var(--line);border-radius:10px;padding:clamp(10px,1.4vw,20px)}
.kl__cap{margin-top:12px;font:450 .75rem/1.5 var(--font-mono);letter-spacing:.04em;color:var(--ink-3)}
.kl__cap span:first-child{color:var(--ink-2);margin-right:1.2em}

.kd{display:block;width:100%;height:auto;overflow:visible}
.kd *{vector-effect:non-scaling-stroke}
.kd-griddot{fill:var(--line-2)}
.kd-board rect,.kd-board-fill{fill:var(--bg-raised);stroke:var(--line-2);stroke-width:1.5}
.kd-fold{fill:none;stroke:var(--line-2);stroke-width:1;stroke-dasharray:4 4}
.kd-tape{fill:none;stroke:var(--blue);stroke-width:9;stroke-linejoin:miter}
.kd-body{fill:var(--bg-hi);stroke:var(--ink-3);stroke-width:1.5}
.kd-inner{fill:none;stroke:var(--line-2);stroke-width:1.5}
.kd-glyph{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round}
.kd-leg{fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round}
.kd-led{fill:color-mix(in oklab,var(--orange) 16%,var(--bg));stroke:color-mix(in oklab,var(--orange) 55%,var(--bg));stroke-width:1.5}
.kd-flap{fill:color-mix(in oklab,var(--bg-hi) 70%,transparent);stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:5 4}
.kd-hinge{fill:none;stroke:var(--ink-2);stroke-width:2}
.kd-pad{fill:var(--blue)}
.kd-rail-p{fill:none;stroke:var(--blue);stroke-width:1.5}
.kd-rail-n{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.kd-hole{fill:color-mix(in oklab,var(--ink-3) 45%,var(--bg-raised))}
.kd-channel{fill:var(--bg-sunk)}
.kd-wire{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kd-wire--n,.kd-wire--servo{stroke:var(--ink-3)}
.kd-wire--servo{stroke-width:2.5}
.kd-cap{fill:var(--bg-sunk);stroke:var(--ink-2);stroke-width:1.5}
.kd-cable{fill:none;stroke:var(--ink-3);stroke-width:7;stroke-linecap:round}
.kd-header{fill:var(--bg-sunk);stroke:var(--line-2);stroke-width:1}
.kd-pins{fill:none;stroke:var(--ink-3);stroke-width:4;stroke-linecap:square}
.kd-chip{fill:var(--bg-sunk);stroke:var(--ink-3);stroke-width:1.5}
.kd-chip-pins{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.kd-band{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.kd-spin,.kd-arm{transform-box:view-box}
.kd-spin{transform-origin:438px 156px}
.kd-arm{transform-origin:361px 239px;transform:rotate(-24deg)}

/* callout markers */
.kd-leader{fill:none;stroke:var(--ink-3);stroke-width:1}
.kd-dot{fill:var(--ink-2)}
.kd-badge{fill:var(--bg);stroke:var(--ink-2);stroke-width:1.5}
.kd-mark text{font-family:var(--font-mono);font-size:12px;font-weight:500;text-anchor:middle;fill:var(--ink)}
.kd-mark.is-lit .kd-badge{fill:var(--orange);stroke:var(--orange)}
.kd-mark.is-lit text{fill:var(--on-accent)}
.kd-mark.is-lit .kd-leader{stroke:var(--orange);stroke-width:1.5}
.kd-mark.is-lit .kd-dot{fill:var(--orange)}
.kd-part.is-lit :is(.kd-body,.kd-board-fill,.kd-cap,.kd-chip){stroke:var(--ink)}
.kd-part.is-lit :is(.kd-tape,.kd-wire:not(.kd-wire--n)){stroke:var(--blue-text)}
.kd-part.is-lit :is(.kd-wire--n,.kd-wire--servo,.kd-leg,.kd-cable,.kd-flap){stroke:var(--ink)}
.kd-part.is-lit .kd-pad{fill:var(--blue-text)}

/* live level: LEDs on */
.kl__rung:is(.is-current,:hover,:focus-within) .kd-led{fill:var(--orange);stroke:var(--orange-hi);filter:drop-shadow(0 0 6px #ff7a00b3)}

/* ---------- Motion (opt-in only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .kl__node,.kl__node::after{transition:border-color .2s var(--ease-out),box-shadow .25s var(--ease-out),background-color .2s var(--ease-out)}
  .kl__part,.kl__num,.kd-badge,.kd-mark text,.kd-leader,.kd-dot{transition:background-color .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out),fill .18s var(--ease-out),stroke .18s var(--ease-out)}
  .kd-led{transition:fill .25s var(--ease-out),stroke .25s var(--ease-out),filter .25s var(--ease-out)}
  .kl__rung:is(.is-current,:hover,:focus-within) .kd-spin{animation:kd-spin 1.1s linear infinite}
  .kl__rung:is(.is-current,:hover,:focus-within) .kd-arm{animation:kd-sweep 2.4s var(--ease-out) infinite alternate}
  .kl__rung:is(.is-current,:hover,:focus-within) :is(.kd-led--a,.kd-led--b,.kd-led--c){animation:kd-traffic 4.5s steps(1,end) infinite}
  .kl__rung:is(.is-current,:hover,:focus-within) .kd-led--b{animation-delay:-3s}
  .kl__rung:is(.is-current,:hover,:focus-within) .kd-led--c{animation-delay:-1.5s}
  body.is-motion-paused .kit-ladder *{animation:none!important;transition:none!important}
}
@keyframes kd-spin{to{transform:rotate(360deg)}}
@keyframes kd-sweep{from{transform:rotate(-24deg)}to{transform:rotate(36deg)}}
@keyframes kd-traffic{
  0%{fill:var(--orange);stroke:var(--orange-hi);filter:drop-shadow(0 0 6px #ff7a00b3)}
  33.333%,100%{fill:color-mix(in oklab,var(--orange) 16%,var(--bg));stroke:color-mix(in oklab,var(--orange) 55%,var(--bg));filter:none}
}

/* ---------- Tablet ---------- */
@media (max-width:1099px){
  .kit-ladder{--rail:52px;--step:32px}
  .kl__body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"id id" "sum fig" "bom fig" "foot foot";grid-template-rows:auto auto 1fr auto;column-gap:28px}
  .kl__fig{margin-top:20px}
}

/* ---------- Phone ---------- */
@media (max-width:699px){
  .kit-ladder{--rail:34px;--step:0px;--node:16px}
  .kl__head{grid-template-columns:minmax(0,1fr);gap:18px}
  .kl__title{font-size:clamp(2.6rem,12vw,3.6rem)}
  .kl__jog{display:none}
  .kl__body{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "sum" "fig" "bom" "foot";grid-template-rows:none}
  .kl__fig{margin-top:22px}
  .kl__part{grid-template-columns:24px 5.6em minmax(0,1fr);gap:10px}
  .kl__plate{padding:6px}
  .kd-badge{r:18px}
  .kd-mark text{font-size:16px}
}