/* The breaker log-in, lifted out of the motion lab (cap-test.html) where it was designed.

   Only the rules that name the log-in's own classes come across; the lab's page chrome stays
   behind. Custom properties are carried only where the shell has no token of that name, so
   this sheet cannot quietly override the theme. Same extraction as tester.css, same reasons.
   16 Oct 2026. */
:root{
  --red-soft:#f08a64;
}

.mcb{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:inline-flex;flex-direction:column;align-items:center;gap:6px;color:var(--soft);font:700 14px var(--display);letter-spacing:.04em}
.mcb svg{display:block}
.mcb .b{fill:#f4f5f2;stroke:#0d100e;stroke-width:2}
.mcb .s{fill:#d8dcd5}
.mcb .l{fill:#15181a;transition:transform .45s var(--spring-ui)}
.mcb.on .l{transform:translateY(-15px)}
.mcb .f{fill:#8b938d;transition:fill .2s}
.mcb.on .f{fill:#2f8a3c}
.mcb.trip .f{fill:#e2553b}
.mcb.trip svg{animation:jolt .32s}
.lamp .g{fill:#2a312d;stroke:#0d100e;stroke-width:2;transition:fill .2s}
.lamp .fl{fill:none;stroke:#6b736e;stroke-width:1.6}
.lamp.lit .g{fill:var(--gold)}
.lamp.lit .fl{stroke:#15181a}
.lamp.lit{filter:drop-shadow(0 0 10px rgba(245,197,24,.8))}
.lstage{height:560px}
.mbar{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(13,16,14,.9)}
.mbar .word{display:grid;line-height:1}
.mbar .word b{font:700 19px var(--display);letter-spacing:.06em}
.mbar .word small{font:600 10px var(--display);letter-spacing:.2em;color:var(--muted);margin-top:3px}
.mbar .sp{flex:1}
.mbar .su{white-space:nowrap;font:700 15px var(--display);letter-spacing:.03em;color:var(--soft);text-decoration:none;padding:8px 12px}
.lhero{padding:40px 28px;max-width:560px}
.lhero h3{font:700 clamp(40px,7vw,76px)/.86 var(--display);text-transform:uppercase;margin:0}
.lhero h3 span:last-child{color:var(--gold)}
.lhero p{color:var(--soft);margin:16px 0 0}
.lveil{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s;pointer-events:none}
.lveil.on{opacity:1;pointer-events:auto}
.lrun{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.cable{fill:none;stroke:#8b938d;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.current{fill:none;stroke:var(--gold);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px var(--gold))}
.clip{fill:#d8dcd5;stroke:#0d100e;stroke-width:1.5}
.lbox{position:absolute;left:50%;width:min(380px,calc(100% - 28px));background:var(--panel);border:1.5px solid rgba(245,197,24,.5);border-radius:16px;padding:24px 22px 18px;transform:translateX(-50%) scale(.88);opacity:0;pointer-events:none;transition:transform .5s var(--spring-ui),opacity .15s}
.lbox.in{transform:translateX(-50%) scale(1);opacity:1;pointer-events:auto}
.lbox .gland{position:absolute;top:-9px;left:50%;width:22px;height:12px;margin-left:-11px;background:var(--panel);border:1.5px solid rgba(245,197,24,.5);border-radius:5px 5px 2px 2px}
.lbox h4{font:700 32px var(--display);text-transform:uppercase;margin:0 0 12px}
.lbox .x{position:absolute;top:12px;right:12px;background:none;border:0;color:var(--muted);text-decoration:underline;cursor:pointer;font:600 14px var(--body);padding:6px}
.field{display:grid;gap:4px;margin-bottom:10px}
.field label{font-size:14px;font-weight:600;color:var(--soft)}
.field input{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 12px;width:100%}
.circ{display:flex;align-items:center;margin-top:6px}
.circ .wire{flex:1;min-width:0;height:40px}
.w0{fill:none;stroke:rgba(255,255,255,.14);stroke-width:4;stroke-linecap:round}
.w1{fill:none;stroke:var(--gold);stroke-width:4;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset .5s cubic-bezier(.5,0,.3,1)}
.circ .w1{transition:none}
.status{min-height:1.5em;margin:10px 0 0;font-size:15px}
.status.ok{color:#7fe08f;font-weight:600}
.status.bad{color:var(--red-soft);font-weight:600}
.hint{font-size:13.5px;color:var(--muted);margin-top:8px}
.mods .w0{stroke-width:5}
.sparks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:4}
.spk polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}
.spk .sg{stroke:#f5c518;opacity:.8;filter:blur(1.5px)}
.spk .sc{stroke:#fffdf0}
.spk{animation:spk .28s steps(3,end) forwards}
.circ{position:relative}
#llamp.boom{animation:boom .6s var(--spring-ui)}
.lbox{border-color:rgba(245,197,24,.35)}
.lbox::before{content:"";position:absolute;inset:-2px;border-radius:17px;padding:2.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0deg 120deg,rgba(245,197,24,.95) 160deg,#fff6c2 175deg,transparent 180deg 300deg,rgba(245,197,24,.95) 340deg,#fff6c2 355deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity .3s}
.lbox.in::before{opacity:1;animation:edgerun 2.2s linear infinite}
.lrun{z-index:3}
.lbox{z-index:2}

@media (max-width:420px){
  .mbar .word small{display:none}
  .mbar{gap:6px;padding:12px}
}

@keyframes jolt{20%{transform:translateX(-4px)}45%{transform:translateX(4px)}70%{transform:translateX(-2px)}}
@keyframes spk{0%{opacity:1}40%{opacity:.4}70%{opacity:1}100%{opacity:0}}
@keyframes boom{0%{transform:scale(1)}25%{transform:scale(1.35);filter:drop-shadow(0 0 26px #fff6c2) brightness(1.6)}100%{transform:scale(1)}}
@keyframes edgerun{to{--ang:360deg}}

/* ── the box is dark in both themes ──────────────────────────────────────────────
   `.lbox` took its background from `var(--panel)`, which flips with the viewer's theme, while
   `body.sales` pins the text light. On a light-mode machine that gave a white box with a
   near-white "LOG IN" heading on it: 1.10:1, invisible. The login page is dark whatever the
   viewer's system says, so everything on it takes fixed light-on-dark values. Same trap as the
   hero and the sidebar, third time it has bitten. 16 Oct 2026. */
.lbox{background:#1d2320;border-color:rgba(245,197,24,.45)}
.lbox h4{color:#f2f5f1}
.lbox .field label{color:#ccd4ce}
.lbox .field input{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  color:#f2f5f1}
.lbox .field input::placeholder{color:#7f8882}
.lbox .field input:focus-visible{outline:2px solid #6cc27a;outline-offset:1px}
.lbox .hint{color:#aab3ad}
.lbox .hint a{color:#f5c518}
.lbox .status{color:#ccd4ce}
.lbox .status.ok{color:#6cc27a}
.lbox .status.trip{color:#f08a64}
.lbox .status .quiet{color:#8b948e;font-size:13.5px}
.lbox .x{color:#aab3ad;text-decoration:none}
.lbox .x:hover,.lbox .x:focus-visible{color:#f2f5f1}