/* cirKITry v7: signal lab on phones and very short desktop windows.
   Before: phones (≤600px) never pinned the lab and theme.js ignored scroll there, so the bench only moved when a
   stage chip was tapped; desktop windows under 560px tall did not pin either and the section scrolled away before
   "Test"/"Create". Now both pin the lab just under the sticky header (--lab-top is measured by theme.js), fit it to
   the small viewport (100svh, so the iOS URL bar never resizes it) and give it a short scroll runway.
   Reduced motion, data-experience=standard, data-scroll=false and no-JS keep the static, unpinned layout. */

/* ---------- Phones: pinned, compact, centred ---------- */
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
  /* runway 1500px: the five stages use the first 80% (≈240px each, about one stage per short thumb swipe) and the finished,
     powered circuit holds for the last 20% before the section scrolls on */
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .signal-lab{min-height:calc(100svh - var(--lab-top,69px) + 1500px)!important;--lab-dwell:.8}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-sticky{
    /* fills the small viewport under the header (100svh: the iOS URL bar never resizes it); heading at the top,
       controls at the bottom, the bench centred in the space between */
    position:sticky!important;top:var(--lab-top,69px)!important;
    height:calc(100svh - var(--lab-top,69px));min-height:0!important;
    padding-block:clamp(12px,2.4svh,22px) clamp(12px,2.2svh,20px);
    display:flex;flex-direction:column;justify-content:center}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-heading{flex:none}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-heading h2:not(#\#){font-size:clamp(1.6rem,7.4vw,2.2rem);line-height:1}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-heading>p{display:none}
  /* stage sequencer → one row of compact chips (number hidden, the chip order already says it) */
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-sequencer{flex:none;margin-top:clamp(10px,2svh,18px);gap:5px;border:0}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-sequencer::before{bottom:-7px;height:2px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-stage{
    flex:1 1 0;min-height:40px;padding:6px 2px;gap:0;flex-direction:row;justify-content:center;
    border:1px solid var(--line-2,#232a36);border-radius:999px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-stage:first-child{border-left:1px solid var(--line-2,#232a36)}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-stage.is-active{border-color:transparent}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-stage>span,
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-stage>i{display:none}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-stage>strong{flex:none;font-size:.75rem;letter-spacing:-.01em;white-space:nowrap}
  /* bench: full-bleed, cropped to the phone composition (see "phone composition" below) so the board, battery, motor
     and scope all fit. Negative margins (in % of the width, so they track the drawing's scale) trim the empty bands
     above and below; if a very short phone needs the room, the box shrinks and the drawing scales down inside it */
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-workbench{
    flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;margin-top:clamp(8px,1.6svh,16px);padding-top:0;overflow:hidden;width:100%}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .signal-bench{
    flex:0 1 auto;aspect-ratio:1100/580;min-height:120px;max-height:none;height:auto;width:151.1%;max-width:none;
    margin:-8.52% 0 -17.17% -27.47%}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-caption-stack{flex:none;margin-top:0;min-height:22px;font-size:.85rem;padding-inline:18px}
  /* control panel → two columns (rocker | pulse rate) + a slim scope strip */
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-control-panel{
    flex:none;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:6px 14px;padding:10px 14px;margin-top:clamp(6px,1.4svh,14px)}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-power{flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-power .bench-power{min-height:40px;padding:0;gap:9px;white-space:normal;text-align:left;line-height:1.15}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-power .rocker{flex:none}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-readout{max-width:none}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-frequency{border:0;border-left:1px solid var(--line);padding:0 0 0 14px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-frequency input{margin:0;height:44px;touch-action:pan-y}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-scope{grid-column:1/-1;border-top:1px solid var(--line);padding-top:6px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-scope svg{height:22px;margin-top:3px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-bottom{display:none}
}
/* ---------- Phone composition of the bench (all phones, pinned or static) ----------
   Before: phones cropped the drawing to the breadboard and hid the battery, motor and scope, while the stage
   captions still said "...an LED and a motor" / "the motor turns". Now those three parts are drawn at 60% and slid in
   against the board's edges, so the real traces still run into them (battery on the left traces, motor on the
   right trace, scope on the top-right lead). The individual `scale`/`translate` properties compose with the theme's
   assembly `transform` (and survive its reduced-motion `transform:none`). The crop is viewBox x 200-928 (an ~18px margin each side), y 62-455. */
@media(max-width:600px){
  .signal-lab .signal-bench:not(#\#) :is(.bench-part--source,.bench-part--motor,.bench-part--sensor){display:inline}
  /* the battery traces start under the battery's left half; clip the stubs that would poke out past its left edge */
  .signal-lab .signal-bench .bench-board{clip-path:inset(0 0 0 236px) view-box}
  .signal-lab .signal-bench .bench-part--source{scale:.6;translate:130.8px 16.9px;transform:translateY(calc((1 - var(--assembly))*38px))}
  .signal-lab .signal-bench .bench-part--motor{scale:.6;translate:-91px .6px;transform:translateY(calc((1 - var(--assembly))*45px))}
  .signal-lab .signal-bench .bench-part--sensor{scale:.6;translate:316px 42px;transform:translateY(calc((1 - var(--assembly))*-22px))}
  /* callout badges: bigger so the designators stay readable at phone scale; the two inside the 60% parts are scaled
     back up around their own badge centre so every badge reads the same size, and sit above their part instead of
     out to the side (that keeps the crop narrow, so the board stays large). On phones the battery, motor and scope slide in
     vertically only, so the crop never clips them mid-assembly */
  .signal-lab .signal-bench .sb-callout__badge{r:26px}
  .signal-lab .signal-bench .sb-callout text{font-size:23px}
  .signal-lab .signal-bench .bench-part--source .sb-callout{scale:1.6667;transform-origin:56px 206px;translate:56px -20.8px}
  .signal-lab .signal-bench .bench-part--motor .sb-callout{scale:1.6667;transform-origin:1038px 238px;translate:-92.3px -11.7px}
  /* static (reduced-motion / standard) phone layout uses the same crop */
  .signal-lab .signal-bench{width:151.1%;margin-left:-27.47%;margin-top:-8.52%;margin-bottom:-17.17%}
  .signal-lab .lab-caption-stack{margin-top:6px}
}
/* taller phones: room for the intro line */
@media(max-width:600px) and (min-height:780px) and (prefers-reduced-motion:no-preference){
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-heading>p{display:block;margin-top:8px;font-size:.9rem;line-height:1.4}
}
/* touch screens: a tapped chip must not keep the sticky :hover fill */
@media(hover:none){.lab-stage:hover:not(.is-active){background:none}}

/* ---------- Very short desktop / landscape-phone windows (601px+ wide, 340–559px tall): pinned, ultra-compact ---------- */
@media(min-width:601px) and (min-height:340px) and (max-height:559.98px) and (prefers-reduced-motion:no-preference){
  /* runway 900px: stages use the first 80% (144px each, so a 120px mouse-wheel notch never skips one), then the
     powered circuit holds for 180px */
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .signal-lab{min-height:calc(100svh - var(--lab-top,78px) + 900px);--lab-dwell:.8}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-sticky{
    position:sticky;top:var(--lab-top,78px);height:calc(100svh - var(--lab-top,78px));min-height:0;
    padding-block:clamp(8px,2.2svh,16px) clamp(8px,2svh,14px);
    display:flex;flex-direction:column;justify-content:center}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-heading{flex:none}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-heading h2:not(#\#){font-size:clamp(1.35rem,4.6svh,1.9rem);line-height:1}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-heading>p{display:none}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-sequencer{flex:none;margin-top:clamp(6px,1.8svh,12px)}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-stage{padding-block:5px;min-height:34px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-workbench{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-block:clamp(4px,1svh,8px) 0}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .signal-bench{flex:1 1 0;min-height:110px;height:auto;max-height:400px;width:100%}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-caption-stack{flex:none;margin-top:0;min-height:20px;font-size:.85rem}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-control-panel{
    flex:none;grid-template-columns:1fr 1fr 1.2fr;gap:18px;padding:6px 18px;margin-top:clamp(4px,1.2svh,10px)}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-frequency{border-inline:1px solid var(--line);border-top:0;padding:0 18px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-frequency input{margin:2px 0 -4px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-scope{grid-column:auto;border-top:0;padding-top:0}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-scope svg{height:22px;margin-top:3px}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-bottom{display:none}
}
/* the same short window on a touch screen (landscape phone): one stage per ~350px swipe instead of per wheel notch */
@media(min-width:601px) and (min-height:340px) and (max-height:559.98px) and (hover:none) and (pointer:coarse) and (prefers-reduced-motion:no-preference){
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .signal-lab{min-height:calc(100svh - var(--lab-top,69px) + 1500px)}
  body.js-ready:not([data-experience=standard]):not([data-scroll=false]) .lab-frequency input{touch-action:pan-y}
}