/* Circuits and logic kit: circuit board and gate builder. Colours from the app tokens; light and dark. */
:root { --cw: #A8673A; --cw-2: #C98A5A; --cflow: #F2B33D; --cglass: #FFF8EC; --cbat: #2F3638; --cbat-band: #E9A93A; --cpad: #EFE6D6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cw: #D29466; --cw-2: #E4AE83; --cflow: #F6CB6E; --cglass: #2B3234; --cbat: #11171A; --cbat-band: #E9B04A; --cpad: #2A3235; } }
:root[data-theme="dark"] { --cw: #D29466; --cw-2: #E4AE83; --cflow: #F6CB6E; --cglass: #2B3234; --cbat: #11171A; --cbat-band: #E9B04A; --cpad: #2A3235; }

.circ, .gat { display: grid; gap: 12px; justify-items: center; width: 100%; }
.cboard, .gboard { width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.cboard svg, .gboard svg { display: block; width: 100%; height: auto; margin: 0 auto; touch-action: none; overflow: visible; }
.cboard svg { max-width: 440px; }
.gboard svg { max-width: 520px; }
.step-vis > .vis.circd { width: min(100%, 300px); max-height: 260px; }
.step-vis > .vis.gatesd { width: min(100%, 440px); max-height: 300px; }
.fb-vis .vis.circd { max-height: 150px; }
.opt .vis.circd { width: 100%; max-width: 220px; max-height: 150px; height: auto; }
.model .vis.circd, .model .vis.gatesd { max-width: 100%; }
.worked .step-vis > .vis.circd { width: min(100%, 340px); }

/* ---------- board ---------- */
.circd .cnode { fill: var(--ink-3); opacity: .55; }
.circd .cguide { stroke: var(--accent-2); stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; fill: none; opacity: .8; }
.circd .cwire, .circd .clead { stroke: var(--cw); stroke-width: 6; stroke-linecap: round; fill: none; }
.circd .clead { stroke-width: 5; }
.circd .cpick { stroke: var(--accent-2); stroke-width: 14; stroke-linecap: round; opacity: .35; fill: none; }
.circd .cflow { stroke: var(--cflow); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 13; fill: none; animation: cflow 1.2s linear infinite; }
.circd .cflow.f1 { animation-duration: 2.2s; } .circd .cflow.f2 { animation-duration: 1.3s; } .circd .cflow.f3 { animation-duration: .8s; } .circd .cflow.f4 { animation-duration: .45s; }
@keyframes cflow { from { stroke-dashoffset: 28; } to { stroke-dashoffset: 0; } }
.circd .bat-body { fill: var(--cbat); stroke: var(--ink-2); stroke-width: 1.5; }
.circd .bat-band { fill: var(--cbat-band); opacity: .9; }
.circd .bat-cap { fill: var(--ink-3); }
.circd .cbat.hot .bat-body { stroke: var(--soft-red); stroke-width: 3.5; }
.circd .cpol { font: 800 15px var(--round); fill: var(--ink-2); }
.circd .glow { fill: var(--sun); }
.circd .bulb-glass { fill: var(--cglass); stroke: var(--ink-2); stroke-width: 2.5; }
.circd .bulb-glass.on { fill: #FBE29A; stroke: #C98A1E; }
.circd .filament { stroke: var(--ink-3); stroke-width: 2; fill: none; stroke-linecap: round; }
.circd .filament.on { stroke: #B5650F; }
.circd .bz-body { fill: var(--surface-3); stroke: var(--ink-2); stroke-width: 2; }
.circd .bz-dot { fill: var(--ink-2); }
.circd .bz-wave { stroke: var(--accent-2); stroke-width: 2.5; fill: none; stroke-linecap: round; opacity: 0; }
.circd .buzz.on .bz-wave { opacity: 1; animation: cbuzz .5s ease-in-out infinite alternate; }
@keyframes cbuzz { from { opacity: .25; } to { opacity: 1; } }
.circd .mot-body { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 2.5; }
.circd .fan-blade { fill: var(--accent-2); }
.circd .mot-hub { fill: var(--ink-2); }
.circd .fan { transform-box: fill-box; transform-origin: center; }
.circd .fan.on { animation: cspin .7s linear infinite; }
@keyframes cspin { to { transform: rotate(360deg); } }
.circd .sw-pad { fill: var(--cpad); stroke: var(--line); stroke-width: 1.5; }
.circd .sw-dot { fill: var(--ink-2); }
.circd .sw-lever { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.circd .csw.closed .sw-lever { stroke: var(--accent); }
.circd .cres { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.circd .amm-body { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.circd .cmark { font: 800 16px var(--round); fill: var(--ink); }
.circd .ctext { font: 700 13px var(--font); fill: var(--ink-2); }
.circd .m-metal { fill: #C9CDD0; stroke: #7E878C; stroke-width: 1.5; }
.circd .m-line { fill: none; stroke: #7E878C; stroke-width: 1.5; }
.circd .m-hole { fill: var(--surface); }
.circd .m-wire { fill: none; stroke: #8E979C; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.circd .m-rubber { fill: #E7A4B2; } .circd .m-rubber2 { fill: #8FB4D8; }
.circd .m-wood { fill: #B98352; stroke: #8A5A3B; stroke-width: 1.5; }
.circd .m-plastic { fill: #9CCB8A; }
.circd .m-paper { fill: #FFFDF5; stroke: #B6AE9F; stroke-width: 1.5; }
.circd .m-cloth { fill: #C9A3D6; }
.circd .m-glass { fill: #CFE7EE; fill-opacity: .8; stroke: #7FA9B6; stroke-width: 1.5; }
.circd .picked .bat-body, .circd .picked .bulb-glass, .circd .picked .cres, .circd .picked .amm-body, .circd .picked .mot-body, .circd .picked .bz-body { stroke: var(--accent-2); stroke-width: 4; }
.circd .cmat.picked { filter: drop-shadow(0 0 4px var(--accent-2)); }
.circd .chit { fill: transparent; cursor: pointer; outline: none; }
.circd .chit:focus-visible { stroke: var(--sun); stroke-width: 3; }
.locked .circd .chit { cursor: default; }
.circ.picking .circd .chit:not(.full) { fill: var(--accent-soft); fill-opacity: .55; }
@media (hover: hover) { .circ.picking .circd .chit:not(.full):hover { fill-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .circd .cflow, .circd .fan.on, .circd .buzz.on .bz-wave { animation: none; } }

.cstatus { min-height: 0; display: flex; justify-content: center; }
.cstatus:empty { display: none; }
.cpill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-size: 15px; font-weight: 650; color: var(--ink); }
.cpill i { width: 9px; height: 9px; border-radius: 50%; background: var(--soft-red); }

/* ---------- tray and actions ---------- */
.ctray, .gpal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 560px; }
.ctool, .gtool { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 72px; min-height: 64px; padding: 6px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); touch-action: none; user-select: none; -webkit-user-select: none; font-size: 13px; font-weight: 650; line-height: 1.1; }
.ctool .cicon { width: 56px; height: 28px; overflow: visible; }
.gtool .gicon { width: 46px; height: 32px; }
.ctool .cn { position: absolute; top: 3px; right: 6px; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ctool .cl { max-width: 84px; text-align: center; }
.ctool.picked, .gtool.picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent) inset; }
.ctool.empty { opacity: .42; }
.locked .ctool, .locked .gtool { opacity: .6; }
.cacts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.cact { min-height: 44px; padding: 0 14px; font-size: 15px; }
.cact.clr { width: 48px; padding: 0; }
.cghost { position: fixed; left: 0; top: 0; width: 80px; height: 44px; display: grid; place-items: center; pointer-events: none; z-index: 60; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); opacity: .92; }
.cghost .cicon { width: 64px; height: 32px; overflow: visible; }
.cghost.g .gicon { width: 56px; height: 40px; }
.cval { display: flex; align-items: center; gap: 10px; font: 750 20px var(--round); }
.cval .numfield { width: 120px; min-height: 48px; font-size: 20px; text-align: center; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }

/* icons in the tray reuse the board drawing classes */
.cicon .cwire, .cicon .clead { stroke: var(--cw); stroke-width: 5; stroke-linecap: round; fill: none; }
.cicon .bat-body { fill: var(--cbat); } .cicon .bat-band { fill: var(--cbat-band); } .cicon .bat-cap { fill: var(--ink-3); }
.cicon .glow { display: none; } .cicon .bulb-glass { fill: var(--cglass); stroke: var(--ink-2); stroke-width: 2.5; } .cicon .filament { stroke: var(--ink-3); stroke-width: 2; fill: none; }
.cicon .sw-pad { fill: none; } .cicon .sw-dot { fill: var(--ink-2); } .cicon .sw-lever { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.cicon .cres, .cicon .amm-body { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; } .cicon .cmark { font: 800 16px var(--round); fill: var(--ink); }
.cicon .bz-body, .cicon .mot-body { fill: var(--surface-3); stroke: var(--ink-2); stroke-width: 2; } .cicon .bz-dot, .cicon .mot-hub { fill: var(--ink-2); } .cicon .bz-wave { display: none; } .cicon .fan-blade { fill: var(--accent-2); }
.cicon .m-metal { fill: #C9CDD0; stroke: #7E878C; stroke-width: 1.5; } .cicon .m-line { fill: none; stroke: #7E878C; stroke-width: 1.5; } .cicon .m-hole { fill: var(--surface); }
.cicon .m-wire { fill: none; stroke: #8E979C; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cicon .m-rubber { fill: #E7A4B2; } .cicon .m-rubber2 { fill: #8FB4D8; } .cicon .m-wood { fill: #B98352; } .cicon .m-plastic { fill: #9CCB8A; } .cicon .m-paper { fill: #FFFDF5; stroke: #B6AE9F; } .cicon .m-cloth { fill: #C9A3D6; } .cicon .m-glass { fill: #CFE7EE; stroke: #7FA9B6; }

/* ---------- gates ---------- */
.gatesd .gslot-bg { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 4 6; }
.gatesd.still .gslot-bg { display: none; }
.gatesd .ghit { fill: transparent; cursor: pointer; outline: none; }
.gatesd .ghit:focus-visible { stroke: var(--sun); stroke-width: 3; }
.gat.picking .gatesd .ghit[data-slot] { fill: var(--accent-soft); fill-opacity: .5; }
.gatesd .gwire { fill: none; stroke-width: 4; stroke-linecap: round; }
.gatesd .gwire.lo { stroke: var(--ink-3); }
.gatesd .gwire.hi { stroke: var(--accent-2); }
.gatesd .gwire.na { stroke: var(--ink-3); stroke-dasharray: 5 6; opacity: .7; }
.gatesd .gwire.temp { stroke: var(--sun); stroke-dasharray: 6 6; }
.gatesd .glead { stroke: var(--ink-2); stroke-width: 3; fill: none; }
.gatesd .gbody { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.gatesd .gate.hi .gbody { fill: var(--accent-soft); }
.gatesd .gate.sel .gbody { stroke: var(--accent); stroke-width: 4; }
.gatesd .gback { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.gatesd .gbub { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.gatesd .glabel { font: 750 11px var(--font); fill: var(--ink-2); letter-spacing: .02em; }
.gatesd .gport { fill: var(--ink-3); }
.gatesd .gport.hi { fill: var(--accent-2); }
.gatesd .gin-pill { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.gatesd .gin.hi .gin-pill { fill: var(--accent-soft); stroke: var(--accent-2); }
.gatesd .gin.sel .gin-pill { stroke: var(--accent); stroke-width: 3.5; }
.gatesd .gin-name { font: 750 13px var(--round); fill: var(--ink); }
.gatesd .gin-val { font: 800 15px var(--round); fill: var(--ink-2); }
.gatesd .gin.hi .gin-val { fill: var(--accent); }
.gatesd.plain .gin-val { display: none; }
.gatesd .gout-lamp { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 2; }
.gatesd .gout.hi .gout-lamp { fill: var(--sun); stroke: #C98A1E; }
.gatesd .gout-name { font: 800 13px var(--round); fill: var(--ink); }
.gtool .gbody { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.gtool .gback { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.gtool .gbub { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.cghost .gbody { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; } .cghost .gback { fill: none; stroke: var(--ink); stroke-width: 2.5; } .cghost .gbub { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }
.gcount { align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.gcount.over { color: var(--soft-red); }
.gtt table { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 15px; }
.gtt th, .gtt td { padding: 3px 10px; text-align: center; }
.gtt th { font-weight: 700; color: var(--ink-2); border-bottom: 1.5px solid var(--line); }
.gtt .gsep { border-left: 1.5px solid var(--line); }
.gtt tr.cur td { background: var(--surface-2); }
.gtt tr.cur td:first-child { border-radius: 8px 0 0 8px; } .gtt tr.cur td:last-child { border-radius: 0 8px 8px 0; }
.gdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.gdot.ok { background: var(--good); } .gdot.no { background: var(--soft-red); }
.gatesd .gin-name.long { font-size: 10px; } .gatesd .gout-name.long { font-size: 9.5px; }