/* ===================================================================
   DidaPy — Électronique (simulateur de circuits)
   =================================================================== */
:root { --sym: #1b2232; --sym-bg: #ffffff; --grid-dot: #c9d1e0; --cir-bg: #f7f9fc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sym: #dfe6f5; --sym-bg: #161c2a; --grid-dot: #26304a; --cir-bg: #0f1420; } }
:root[data-theme="dark"] { --sym: #dfe6f5; --sym-bg: #161c2a; --grid-dot: #26304a; --cir-bg: #0f1420; }

.cir { display: flex; flex-direction: column; height: calc(100vh - 56px); }
.cir-toolbar { flex-wrap: wrap; }
#cirRun.on { background: var(--amber); border-color: var(--amber); color: #111; }
#cirMemoToggle.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.cir-info { display: flex; align-items: center; gap: 10px; padding: 7px 14px; background: var(--accent-soft); color: var(--text); font-size: 13.5px; border-bottom: 1px solid var(--border); }
.cir-info span { flex: 1; }
.cir-main { flex: 1; display: flex; min-height: 0; }

.cir-palette { width: 184px; flex: none; overflow-y: auto; padding: 8px; border-right: 1px solid var(--border); background: var(--panel); }
.cp-group { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin: 10px 4px 4px; }
.cp-group:first-child { margin-top: 2px; }
.cp-item { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; margin: 2px 0; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--text); font: 500 12.5px Inter, sans-serif; text-align: left; cursor: grab; }
.cp-item:hover { background: var(--panel2); border-color: var(--border); }
.cp-item.active { background: var(--accent-soft); border-color: var(--accent); }
.cp-item .mini { width: 38px; height: 26px; flex: none; }
.cp-item span { line-height: 1.2; }

.cir-wrap { flex: 1; overflow: auto; background: var(--cir-bg); position: relative; }
.cir-wrap.placing { cursor: copy; }
#cirSvg { display: block; user-select: none; touch-action: none; }
.grid-dot { fill: var(--grid-dot); }

/* symboles IEC */
.sym { stroke: var(--sym); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sym .sym-fill { fill: var(--sym-bg); }
.sym .sym-fill.hot { fill: #ff6b3d; filter: drop-shadow(0 0 6px #ff6b3d); }
.sym .sym-thick { stroke-width: 3.5; }
.sym .sym-thin { stroke-width: 1.8; }
.sym .sym-dot { fill: var(--sym); }
.sym text { stroke: none; fill: var(--sym); font-family: Inter, sans-serif; }
.sym .sym-letter { font-size: 17px; font-weight: 700; }
.sym .sym-plus { font-size: 13px; font-weight: 700; fill: var(--red); }
.sym .sym-small { font-size: 10px; font-weight: 700; }
.sym .ch1 { fill: #d4a800; }
.sym .ch2 { fill: #1aa6c8; }
.sym .scope-screen { fill: #0a1410; stroke: var(--sym); stroke-width: 1.2; }
.sym .scope-trace { stroke: #57e389; stroke-width: 1.6; fill: none; }
#cirSvg .cmp { cursor: move; }
#cirSvg .cmp-hit { fill: transparent; stroke: none; }
#cirSvg .cmp:hover .cmp-hit { fill: color-mix(in srgb, var(--accent) 6%, transparent); }
#cirSvg .cmp.sel .cmp-hit { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-dasharray: 4 3; stroke-width: 1.2; }
#cirSvg .cmp.t-switch { cursor: pointer; }
#cirSvg .ghost { opacity: .5; pointer-events: none; }

#cirSvg .wire { fill: none; stroke: var(--sym); stroke-width: 2.2; stroke-linejoin: round; }
#cirSvg .wire.preview { stroke: var(--accent); stroke-dasharray: 6 4; pointer-events: none; }
#cirSvg .wire-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
#cirSvg .wire-g:hover .wire { stroke: var(--accent); }
#cirSvg .wire-g.sel .wire { stroke: var(--accent); stroke-width: 3.2; }
#cirSvg .wire-flow { fill: none; stroke: #ffb020; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 0.1 16; pointer-events: none; opacity: 0; }
#cirSvg .junction { fill: var(--sym); pointer-events: none; }
#cirSvg .term { fill: transparent; stroke: transparent; cursor: crosshair; }
#cirSvg .term:hover, #cirSvg .wend:hover { fill: var(--accent); fill-opacity: .35; stroke: var(--accent); }
#cirSvg .wend { fill: transparent; cursor: crosshair; }
#cirSvg .c-label { font: 600 12px Inter, sans-serif; fill: var(--text); pointer-events: none; }
#cirSvg .c-tag { fill: var(--accent); font-weight: 700; }
#cirSvg .c-read { font: 700 13px "JetBrains Mono", monospace; fill: var(--green); pointer-events: none; }
#cirSvg .c-vals { font: 500 10.5px "JetBrains Mono", monospace; fill: var(--muted); pointer-events: none; }

/* mémo */
.cir-memo { width: 340px; flex: none; overflow-y: auto; border-left: 1px solid var(--border); background: var(--panel); padding: 0 12px 20px; }
.memo-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; padding: 10px 0 8px; background: var(--panel); }
.memo-tabs button { flex: 1; padding: 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel2); color: var(--muted); font: 600 12.5px Inter, sans-serif; cursor: pointer; }
.memo-tabs button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.memo-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--panel); }
.memo-card h4 { margin: 0 0 6px; font-size: 14px; color: var(--accent); }
.formula { font: 600 14px "JetBrains Mono", monospace; background: var(--panel2); border-radius: 7px; padding: 6px 10px; margin: 6px 0 2px; color: var(--text); }
.f-note { font-size: 12.5px; color: var(--muted); margin: 3px 0 6px; line-height: 1.45; }
.f-list { font-size: 12.5px; color: var(--muted); padding-left: 18px; margin: 4px 0; }
.memo-svg { width: 100%; height: auto; }
.memo-svg .m-w { stroke: var(--sym); stroke-width: 2; }
.memo-svg .m-node { fill: var(--sym); }
.memo-svg .m-arrow { fill: none; stroke: var(--red); stroke-width: 2; }
.memo-svg text { fill: var(--red); font: 700 13px Inter, sans-serif; }
.memo-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.memo-tbl th, .memo-tbl td { text-align: left; padding: 3px 4px; border-bottom: 1px solid var(--border); }
.ledc { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid #0003; }
.ledc.sq { border-radius: 2px; width: 14px; }
.sym-grid { display: flex; flex-direction: column; gap: 6px; }
.sym-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.sym-card .mini { width: 64px; height: 40px; flex: none; }
.sym-card b { display: block; font-size: 13px; }
.sym-card span { font-size: 11.5px; color: var(--muted); }
.calc-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 13px; }
.calc-row label { width: 44px; color: var(--muted); font-weight: 600; }
.calc-row input { flex: 1; min-width: 0; font: 13px "JetBrains Mono", monospace; padding: 4px 7px; border: 1px solid var(--border2); border-radius: 6px; background: var(--panel); color: var(--text); }
.calc-row input.wide { width: 100%; }
.calc-row span { width: 18px; color: var(--muted); }
.calc-out { font-size: 13px; margin-top: 6px; padding: 7px 9px; border-radius: 7px; background: var(--green-soft); line-height: 1.55; }

/* dock du bas : propriétés | mesures | oscilloscope (jamais au-dessus du schéma) */
.cir-dock { height: 280px; flex: none; display: flex; border-top: 2px solid var(--accent); background: var(--panel); min-height: 0; }
.cir-props { width: 290px; flex: none; padding: 10px 14px; overflow-y: auto; border-right: 1px solid var(--border); }
.cir-meas { width: 250px; flex: none; padding: 10px 14px; overflow-y: auto; border-right: 1px solid var(--border); }
.dock-title { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.dock-title .t-now { margin-left: auto; font: 600 12px "JetBrains Mono", monospace; color: var(--muted); }
.sym-inline .mini { width: 38px; height: 24px; }
.c-tagb { font-size: 11px; padding: 1px 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.small { font-size: 12.5px; line-height: 1.45; }
.pfield { display: flex; align-items: center; gap: 6px; margin: 5px 0; font-size: 13px; }
.pfield span { flex: 1; color: var(--muted); }
.pfield input { width: 90px; font: 13px "JetBrains Mono", monospace; padding: 4px 7px; border: 1px solid var(--border2); border-radius: 6px; background: var(--panel); color: var(--text); }
.pfield input.bad { border-color: var(--red); background: var(--red-soft); }
.pfield em { width: 22px; font-style: normal; color: var(--muted); font-size: 12px; }
.pfield select { max-width: 150px; }
.live { margin: 8px 0; padding: 7px 10px; border-radius: 8px; background: var(--panel2); font-size: 13px; line-height: 1.55; }
.live:empty { display: none; }
.warn { color: var(--red); font-weight: 600; }
.dock-actions { display: flex; gap: 6px; }
.meas { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; margin: 4px 0; border-radius: 8px; background: var(--panel2); cursor: pointer; border: 1px solid transparent; }
.meas.sel { border-color: var(--accent); }
.m-tag { font: 700 12px Inter, sans-serif; color: var(--accent); min-width: 26px; }
.m-val { font: 700 13px "JetBrains Mono", monospace; color: var(--text); }
.meas.m-voltmeter .m-val, .meas.m-ammeter .m-val, .meas.m-ohmmeter .m-val { color: var(--green); font-size: 16px; }
.cir-scope { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px 10px; gap: 6px; }
.scope-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.scope-head label { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.scope-head .ch1 { color: #c79c00; font-weight: 600; }
.scope-head .ch2 { color: #1aa6c8; font-weight: 600; }
.scope-head input[type=number] { width: 48px; font: 12px "JetBrains Mono", monospace; padding: 2px 4px; border: 1px solid var(--border2); border-radius: 6px; background: var(--panel); color: var(--text); }
#scFreeze.on { background: var(--amber); color: #111; }
.scope-screen-box { flex: 1; min-height: 0; border-radius: 8px; overflow: hidden; border: 3px solid #2a3140; }
.scope-screen-box canvas { display: block; }
.scope-stats { font: 11.5px "JetBrains Mono", monospace; line-height: 1.5; }
.scope-stats .ch1 b { color: #c79c00; }
.scope-stats .ch2 b { color: #1aa6c8; }

@media (max-width: 1100px) {
  .cir-memo { width: 280px; }
  .cir-props { width: 240px; }
  .cir-meas { width: 200px; }
}
@media (max-width: 900px) {
  .cir { height: auto; }
  .cir-main { height: 70vh; }
  .cir-memo { display: none; }
  .cir-palette { width: 116px; }
  .cp-item span { font-size: 11px; }
  .cir-dock { height: auto; flex-wrap: wrap; }
  .cir-props, .cir-meas { width: 50%; border-bottom: 1px solid var(--border); }
  .cir-scope { width: 100%; flex: none; height: 320px; }
}