/* v5-lessons: interactive lesson toys (sections/lesson-loop-toy.liquid, sections/lesson-switch-toy.liquid).
   Everything is scoped under .lesson-toy. State lives in data-* on [data-lesson-toy]; the visuals
   below are derived from it, so the server-rendered default is a correct static schematic. */

.lesson-toy{--lt-ease:var(--ease-out,cubic-bezier(.16,1,.3,1));--lt-wire:#0A7CFF;padding-bottom:var(--section-space,96px)}
.lesson-toy .editorial-rows+.lesson-toy__wrap,.lesson-toy__wrap+.editorial-rows,.lesson-toy__wrap+.lesson-toy__next{margin-top:0}
.lesson-toy__wrap{max-width:1040px;margin-inline:0;padding:48px 0 56px;border-top:1px solid var(--line)}

/* ---------- head ---------- */
.lesson-toy__head{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,7vw,100px);align-items:start;margin-bottom:28px}
.lesson-toy .lesson-toy__title{margin:0;max-width:360px;font-size:clamp(1.6rem,2.8vw,2.5rem);line-height:1.13;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.lesson-toy__intro{margin:0;max-width:52ch;color:var(--ink-2);font-size:1.025rem;line-height:1.7}

/* ---------- bench ---------- */
.lesson-toy__bench{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:20px;align-items:start}
.lesson-toy__fig{margin:0;min-width:0}
.lesson-toy__plate{position:relative;border:1px solid var(--line);border-radius:10px;background-color:var(--bg-sunk);
  background-image:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);
  background-size:20px 20px;background-position:-1px -1px;padding:clamp(14px,2.4vw,28px) clamp(10px,2vw,24px)}
.lesson-toy__plate::before,.lesson-toy__plate::after{content:"";position:absolute;width:10px;height:10px;border-color:var(--line-2);border-style:solid;pointer-events:none}
.lesson-toy__plate::before{top:8px;left:8px;border-width:1px 0 0 1px}
.lesson-toy__plate::after{bottom:8px;right:8px;border-width:0 1px 1px 0}
.lesson-toy__svg{display:block;width:100%;height:auto;overflow:visible;font-family:var(--font-mono);-webkit-user-select:none;user-select:none}
.lesson-toy__cap{margin-top:12px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;line-height:1.5;color:var(--ink-2)}
.lesson-toy__fignum{color:var(--ink)}
.lesson-toy__fignum::after{content:" —";color:var(--ink-3)}

/* ---------- schematic ---------- */
.lesson-toy .lt-wire{fill:none;stroke:var(--lt-wire);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.lesson-toy .lt-plate{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.lesson-toy .lt-plate--short{stroke-width:7;stroke-linecap:butt}
.lesson-toy .lt-sign{font-size:18px;font-weight:500;fill:var(--ink-2)}
.lesson-toy .lt-code{font-size:16px;font-weight:600;letter-spacing:.06em;fill:var(--ink)}
.lesson-toy .lt-sub{font-size:13px;letter-spacing:.04em;fill:var(--ink-2)}
.lesson-toy .lt-tag--gap{font-size:13px;letter-spacing:.06em;fill:var(--orange)}
.lesson-toy .lt-contact{fill:var(--bg-sunk);stroke:var(--ink);stroke-width:2.2}
.lesson-toy .st-node{fill:var(--lt-wire)}
.lesson-toy .lt-lever{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;transform-box:view-box;transform:rotate(-26deg);transition:transform .26s var(--lt-ease)}
.lesson-toy .lt-break-end{stroke:var(--orange);stroke-width:2;stroke-linecap:round}
.lesson-toy .lt-bulb{fill:var(--bg-sunk);stroke:var(--ink-2);stroke-width:2.5;transition:fill .22s var(--lt-ease),stroke .22s var(--lt-ease)}
.lesson-toy .lt-x{stroke:var(--ink-2);stroke-width:2.2;stroke-linecap:round;transition:stroke .22s var(--lt-ease)}
.lesson-toy .lt-glow{opacity:0;transition:opacity .25s var(--lt-ease)}
.lesson-toy [data-lamp=on] .lt-glow{opacity:1}
.lesson-toy [data-lamp=on] .lt-bulb{fill:#FF7A0033;stroke:var(--orange)}
.lesson-toy [data-lamp=on] .lt-x{stroke:#FFB46B}

/* switch levers: closed = flat across the contacts */
.lesson-toy [data-s1=closed] .lt-switch .lt-lever,
.lesson-toy [data-a=closed] .st-sw-a .lt-lever,
.lesson-toy [data-b=closed] .st-sw-b .lt-lever{transform:none}

/* state-dependent text and parts: hide every variant, then show the one matching the state */
.lesson-toy :is(.lt-when-s1-open,.lt-when-s1-closed,.lt-when-lamp-on,.lt-when-lamp-off,.lt-when-joined-el,.lt-when-broken-el,
  .st-when-a-open,.st-when-a-closed,.st-when-b-open,.st-when-b-closed,.st-when-series,.st-when-parallel){display:none}
.lesson-toy [data-s1=open] .lt-when-s1-open,.lesson-toy [data-s1=closed] .lt-when-s1-closed,
.lesson-toy [data-lamp=on] .lt-when-lamp-on,.lesson-toy [data-lamp=off] .lt-when-lamp-off,
.lesson-toy [data-wire=joined] .lt-when-joined-el,.lesson-toy [data-wire=broken] .lt-when-broken-el,
.lesson-toy [data-a=open] .st-when-a-open,.lesson-toy [data-a=closed] .st-when-a-closed,
.lesson-toy [data-b=open] .st-when-b-open,.lesson-toy [data-b=closed] .st-when-b-closed,
.lesson-toy [data-wiring=series] .st-when-series,.lesson-toy [data-wiring=parallel] .st-when-parallel{display:inline}
.lesson-toy [data-wiring=series] .st-route--parallel,.lesson-toy [data-wiring=parallel] .st-route--series{display:none}

/* current flow: orange dashes on wires that carry current */
.lesson-toy .lt-flow{fill:none;stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 16;opacity:0;transition:opacity .2s var(--lt-ease)}
.lesson-toy [data-lamp=on] :is(.lt-flow--series,.lt-flow--in,.lt-flow--out,.lt-flow--out-ret),
.lesson-toy [data-lesson-toy=loop][data-lamp=on] .lt-flow,
.lesson-toy [data-wiring=parallel][data-a=closed] .lt-flow--a,
.lesson-toy [data-wiring=parallel][data-b=closed] .lt-flow--b{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .lesson-toy .lt-flow{animation:lesson-toy-flow 1.1s linear infinite}
  .lesson-toy [data-lamp=off] .lt-flow,.lesson-toy .is-offscreen .lt-flow,body.is-motion-paused .lesson-toy .lt-flow{animation-play-state:paused}
}
@keyframes lesson-toy-flow{to{stroke-dashoffset:-18}}

/* ---------- panel ---------- */
.lesson-toy__panel{display:flex;flex-direction:column;gap:14px;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--bg-raised);padding:18px}
.lesson-toy__nojs{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.6}
.js .lesson-toy__nojs{display:none}
.no-js .lesson-toy__controls,.no-js .lesson-toy__readout{display:none}
.lesson-toy__controls{display:flex;flex-direction:column;gap:14px}
.lesson-toy__group{padding-bottom:14px;border-bottom:1px solid var(--line)}
.lesson-toy__glabel{margin:0 0 10px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-2)}
.lesson-toy__note{margin:8px 0 0;font-size:.82rem;color:var(--ink-3)}
.lesson-toy__stack,.lesson-toy__seg{display:grid;gap:8px}
.lesson-toy__btn{appearance:none;display:flex;align-items:center;gap:10px;min-height:52px;width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:6px;background:transparent;color:var(--ink-2);font:inherit;font-size:.95rem;font-weight:600;line-height:1.25;text-align:left;cursor:pointer;transition:background-color .18s var(--lt-ease),border-color .18s var(--lt-ease),color .18s var(--lt-ease)}
.lesson-toy__btn:hover{background:var(--bg-hi);color:var(--ink);border-color:var(--ink-3)}
.lesson-toy__btn[aria-pressed=true]{background:var(--bg-hi);color:var(--ink);border-color:#FF7A0080}
.lesson-toy__btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.lesson-toy__btn:active{transform:translateY(1px)}
.lesson-toy__btext{display:flex;flex-direction:column;gap:2px;min-width:0}
.lesson-toy__code{font-family:var(--font-mono);font-size:.75rem;font-weight:400;letter-spacing:.05em;color:var(--ink-3)}
.lesson-toy__btn[aria-pressed=true] .lesson-toy__code{color:var(--ink-2)}
.lesson-toy__sym{flex:none;width:38px;height:18px;overflow:visible}
.lesson-toy__sym circle{fill:var(--bg-raised);stroke:currentColor;stroke-width:1.6}
.lesson-toy__sym-wire{stroke:currentColor;stroke-width:1.6;fill:none}
.lesson-toy__sym-lever{stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none;transform-box:view-box;transform-origin:10px 14px;transform:rotate(-30deg);transition:transform .22s var(--lt-ease)}
.lesson-toy__btn[aria-pressed=true] .lesson-toy__sym-lever{transform:none}
.lesson-toy__sym-cut,.lesson-toy__btn--break[aria-pressed=true] .lesson-toy__sym-joined{display:none}
.lesson-toy__btn--break[aria-pressed=true] .lesson-toy__sym-cut{display:inline;stroke:var(--orange)}
.lesson-toy__state{margin-left:auto;font-family:var(--font-mono);font-size:.75rem;font-weight:400;letter-spacing:.04em;color:var(--ink-3)}
.lesson-toy__btn[aria-pressed=true] .lesson-toy__state{color:var(--orange)}
.lesson-toy__state-on,.lesson-toy__btn[aria-pressed=true] .lesson-toy__state-off{display:none}
.lesson-toy__btn[aria-pressed=true] .lesson-toy__state-on{display:inline}
.lesson-toy__lamp{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line-2);transition:background-color .18s,box-shadow .18s}
.lesson-toy__btn[aria-pressed=true] .lesson-toy__lamp{background:var(--orange);box-shadow:0 0 10px 1px #FF7A0099}

/* ---------- readout ---------- */
.lesson-toy__readout{padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--bg-sunk)}
.lesson-toy__lampline{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--ink-2)}
.lesson-toy__lampline .lesson-toy__code{font-size:.75rem}
.lesson-toy__ind{width:9px;height:9px;border-radius:50%;background:var(--line-2);transition:background-color .2s,box-shadow .2s}
.lesson-toy [data-lamp=on] .lesson-toy__ind{background:var(--orange);box-shadow:0 0 10px 1px #FF7A00aa}
.lesson-toy [data-lamp=on] .lesson-toy__lampline{color:var(--orange)}
.lesson-toy__result{margin:0;font-size:1.05rem;line-height:1.45;font-weight:600;color:var(--ink);text-wrap:pretty}
.lesson-toy__detail{margin:6px 0 0;font-size:.94rem;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.lesson-toy__detail b{color:var(--ink);font-weight:700}
.lesson-toy__logic{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em;color:var(--blue-text);margin-right:4px}
.lesson-toy__hint{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-3)}

/* ---------- truth table ---------- */
.lesson-toy__table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
.lesson-toy__table th{padding:0 10px 8px;text-align:left;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-2)}
.lesson-toy__table th .lesson-toy__code{margin-left:4px}
.lesson-toy__table td{padding:9px 10px;color:var(--ink-2);border-bottom:1px solid var(--line);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.03em}
.lesson-toy__table tr>:first-child{padding-left:10px}
.lesson-toy__table .st-on{color:var(--orange)}
.lesson-toy__table .st-on::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:var(--orange);vertical-align:1px}
.lesson-toy__table .st-off::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;border:1px solid var(--ink-3);box-sizing:border-box;vertical-align:1px}
.lesson-toy__table tbody tr{transition:background-color .18s var(--lt-ease)}
.lesson-toy [data-a=open][data-b=open] tr[data-row=open-open],
.lesson-toy [data-a=open][data-b=closed] tr[data-row=open-closed],
.lesson-toy [data-a=closed][data-b=open] tr[data-row=closed-open],
.lesson-toy [data-a=closed][data-b=closed] tr[data-row=closed-closed]{background:var(--bg-hi);box-shadow:inset 0 0 0 1px var(--ink-3)}
.lesson-toy [data-a=open][data-b=open] tr[data-row=open-open] td,
.lesson-toy [data-a=open][data-b=closed] tr[data-row=open-closed] td,
.lesson-toy [data-a=closed][data-b=open] tr[data-row=closed-open] td,
.lesson-toy [data-a=closed][data-b=closed] tr[data-row=closed-closed] td{color:var(--ink)}
.lesson-toy [data-a=open][data-b=open] tr[data-row=open-open] td:first-child::before,
.lesson-toy [data-a=open][data-b=closed] tr[data-row=open-closed] td:first-child::before,
.lesson-toy [data-a=closed][data-b=open] tr[data-row=closed-open] td:first-child::before,
.lesson-toy [data-a=closed][data-b=closed] tr[data-row=closed-closed] td:first-child::before{content:"▸ ";color:var(--ink)}

.lesson-toy__next{max-width:1040px;margin:-24px 0 0;padding-bottom:8px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .lesson-toy__bench{grid-template-columns:minmax(0,1fr)}
  .lesson-toy--switch .lesson-toy__panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 20px}
  .lesson-toy--switch .lesson-toy__nojs{grid-column:1/-1}
  .lesson-toy--switch .lesson-toy__controls{grid-column:1}
  .lesson-toy--switch .lesson-toy__readout{grid-column:2;grid-row:1/span 2;align-self:start}
  .lesson-toy--switch .lesson-toy__table{grid-column:1/-1}
}
@media (max-width:760px){
  .lesson-toy{padding-bottom:72px}
  .lesson-toy__wrap{padding:33px 0 40px}
  .lesson-toy__head{grid-template-columns:1fr;gap:12px;margin-bottom:20px}
  .lesson-toy .lesson-toy__title{max-width:100%;font-size:1.9rem}
  .lesson-toy__intro{font-size:1rem}
  .lesson-toy--switch .lesson-toy__panel{display:flex}
  .lesson-toy__next{margin-top:-16px}
}
@media (max-width:600px){
  .lesson-toy{padding-bottom:62px}
  .lesson-toy__plate{margin-inline:-6px;padding:12px 4px}
  .lesson-toy .lt-code{font-size:24px}
  .lesson-toy .lt-sub{font-size:20px}
  .lesson-toy .lt-sub--m-hide{display:none}
  .lesson-toy .lt-sign{font-size:22px}
  .lesson-toy .lt-tag--gap{font-size:18px}
  .lesson-toy__panel{padding:14px}
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  .lesson-toy *,.lesson-toy *::before{transition:none!important;animation:none!important}
}
body.is-motion-paused .lesson-toy *{transition-duration:0s!important}
@media (min-width:1001px){.lesson-toy__fig{position:sticky;top:120px}}