/* eCircuitCalc — Voltage, Current & Resistance: diagrams + interactive circuit */

/* --- shared SVG primitives (used by all module figures) --- */
.vcr-wire{fill:none;stroke:var(--wbase,rgba(148,163,184,.5));stroke-width:2.6;stroke-linecap:round}
.vcr-comp{fill:none;stroke:var(--text);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.vcr-thick{stroke-width:5}
.vcr-res{fill:var(--surface2);stroke:var(--text);stroke-width:2}
.vcr-meter{fill:var(--surface2);stroke:var(--text);stroke-width:2}
.vcr-node{fill:var(--accent)}
.vcr-arrow{fill:var(--accent)}
.vcr-lbl{fill:var(--text);font:600 16px var(--mono)}
.vcr-lbl.sm{fill:var(--text2);font-size:12px}
.vcr-lbl.pol{fill:var(--accent);font-size:13px}
.vcr-band{stroke:none}
.vcr-band.b1{fill:#8b5a2b}.vcr-band.b2{fill:#1a1a1a}.vcr-band.b3{fill:#eab308}.vcr-band.bt{fill:#d4af37}

/* L1 — potential arrow */
.l1-arrow{stroke:var(--accent);stroke-width:3;stroke-linecap:round}

/* L2 — electron flow (left) + conventional (right) */
.l2-e{fill:none;stroke:var(--accent2,#6366f1);stroke-width:3;stroke-linecap:round;stroke-dasharray:4 14;animation:vcrL2e 1s linear infinite;opacity:.85}
.l2-c{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
@keyframes vcrL2e{to{stroke-dashoffset:18}}

/* L3 — slow vs fast flow */
.l3-slow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 20;animation:vcrL3 2.4s linear infinite;opacity:.7}
.l3-fast{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 16;animation:vcrL3 .6s linear infinite}
@keyframes vcrL3{to{stroke-dashoffset:-26}}

/* --- Lesson 4: interactive circuit --- */
.vcr-play{border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:1.1rem;margin:1.2rem 0}
.vcr-body{display:grid;grid-template-columns:1.15fr .85fr;gap:1.2rem;align-items:start}
.vcr-stage{border-radius:12px;background:var(--bg2);border:1px solid var(--border);padding:.6rem}
.vcr-stage svg{width:100%;height:auto;display:block}
.vcr-panel{display:grid;gap:1rem}

.vcr-ctl label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.4rem}
.vcr-dual{display:grid;grid-template-columns:1fr 92px;gap:.6rem;align-items:center}
.vcr-dual input[type=range]{width:100%;accent-color:var(--accent)}
.vcr-dual input[type=number]{width:100%;padding:.5rem .6rem;border-radius:10px;border:1px solid var(--border2);background:var(--surface2);color:var(--text);font:inherit;font-family:var(--mono);font-size:.9rem}
.vcr-dual input[type=number]:focus,.vcr-dual input[type=range]:focus{outline:2px solid var(--accent);outline-offset:2px}

.vcr-presets{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.vcr-plbl{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text2);margin-right:.2rem}
.vcr-preset{font-size:.78rem;padding:.4rem .7rem;border-radius:999px;border:1px solid var(--border2);background:var(--surface2);color:var(--text2);cursor:pointer;transition:.2s}
.vcr-preset:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-1px)}

.vcr-read{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.vcr-r{border:1px solid var(--border);border-radius:10px;background:var(--surface2);padding:.6rem .8rem;display:flex;flex-direction:column;gap:.15rem}
.vcr-r span{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text2)}
.vcr-r b{font-family:var(--mono);font-size:1.05rem;color:var(--text)}
.vcr-r.big b{color:var(--accent);font-size:1.2rem}

.vcr-status{border-radius:10px;padding:.7rem 1rem;font-weight:600;font-size:.9rem;border:1px solid var(--border);background:var(--surface2);color:var(--text2)}
.vcr-status.ok{border-color:#4ade80;background:rgba(74,222,128,.12);color:#4ade80}
.vcr-status.caution{border-color:#fbbf24;background:rgba(251,191,36,.12);color:#fbbf24}
.vcr-status.danger{border-color:#f87171;background:rgba(248,113,113,.12);color:#f87171}
.vcr-status.off{border-color:var(--border2);background:var(--surface2);color:var(--text2)}

/* animated circuit SVG parts */
.vcr-vtrack{fill:var(--surface2);stroke:var(--border);stroke-width:1}
.vcr-vfill{fill:var(--accent);transition:y .25s ease,height .25s ease}
.vcr-glow{fill:#f87171;opacity:0;transition:opacity .3s;filter:blur(6px)}
.vcr-flow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 16;animation:vcrFlow 1s linear infinite;filter:drop-shadow(0 0 4px var(--glow))}
@keyframes vcrFlow{to{stroke-dashoffset:-26}}

@media (prefers-reduced-motion:reduce){
  .l2-e,.l3-slow,.l3-fast,.vcr-flow{animation:none}
  .vcr-preset,.vcr-dual input{transition:none}
}
@media (max-width:760px){
  .vcr-body{grid-template-columns:1fr}
  .vcr-read{grid-template-columns:1fr 1fr}
}