/* Animowane wyjaśnienia definicji (moduł „cx"). Kolory przebiegów mają
   własne tokeny, żeby obie skórki zachowały kontrast linii na tle wykresu. */
:root {
  --cx-bg:#fbfcfe; --cx-grid:#e8ecf2; --cx-axis:#9aa4b4;
  --cx-total:#2453c9; --cx-ac:#8a95a8; --cx-dc:#d2541c; --cx-env:#7b88a0;
  --cx-peak:#c2410c; --cx-rms:#1d7a55; --cx-heat:#f08a45; --cx-volt:#b3bccb;
  --cx-l1:#2453c9; --cx-l2:#c2410c; --cx-l3:#1d7a55; --cx-earth:#7a6a4f;
  --cx-glow:rgba(49,103,245,.12); --cx-flash:#ffb020;
}
:root[data-theme='dark'] {
  --cx-bg:#121a25; --cx-grid:#212c3c; --cx-axis:#5d6b80;
  --cx-total:#8fb0ff; --cx-ac:#76839a; --cx-dc:#ff9d66; --cx-env:#8995ab;
  --cx-peak:#ffb48a; --cx-rms:#7fd3ae; --cx-heat:#ff9b5e; --cx-volt:#4b576a;
  --cx-l1:#8fb0ff; --cx-l2:#ffa875; --cx-l3:#83cfaf; --cx-earth:#c2ad86;
  --cx-glow:rgba(131,168,255,.14); --cx-flash:#ffc24d;
}

/* ---- Anatomia prądu zwarciowego (wprowadzenie do sekcji) ---- */
.anatomy {position:relative;margin:0 0 64px;padding:34px 38px 30px;background:var(--surface);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.anatomy::before {content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 90% at 85% 0%,var(--cx-glow),transparent 70%)}
.anatomy-head {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 32px;align-items:end}
.anatomy-head h3 {font-size:clamp(1.55rem,2.3vw,2.15rem);letter-spacing:-.04em;max-width:24ch}
.anatomy-head p {color:var(--muted);font-size:.9rem;line-height:1.7;max-width:62ch;margin-top:12px}
.anatomy-figure {margin:26px 0 0;position:relative}
.anatomy-canvas {display:block;width:100%;height:380px;border-radius:20px;background:var(--cx-bg);border:1px solid var(--line-soft);cursor:default;touch-action:pan-y}
.anatomy-foot {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:18px}
.anatomy-chips {display:flex;flex-wrap:wrap;gap:8px}
.anatomy-chip {display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 15px;border:1px solid var(--line-soft);border-radius:999px;background:var(--bg);color:var(--text);font-size:.78rem;font-weight:560;text-decoration:none;cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s}
.anatomy-chip:hover {border-color:var(--accent);transform:translateY(-1px)}
.anatomy-chip.is-lit {border-color:var(--accent);background:var(--hover)}
.anatomy-chip i {font-style:normal;font-weight:650;color:var(--accent-ink)}
.anatomy-chip span {color:var(--muted);font-weight:500}
.anatomy-caption {color:var(--muted);font-size:.7rem;line-height:1.6;max-width:70ch}

/* ---- Przełączniki segmentowe wspólne ---- */
.cx-seg {display:inline-flex;flex-wrap:wrap;gap:2px;padding:4px;border-radius:999px;background:var(--sunken)}
.cx-seg button {min-height:38px;padding:7px 15px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:.76rem;font-weight:560;line-height:1.3}
.cx-seg button:hover {color:var(--text)}
.cx-seg button[aria-pressed='true'] {background:var(--surface);color:var(--accent-ink);box-shadow:0 2px 8px rgba(28,42,67,.06)}

/* ---- Moduł koncepcji w panelu tematu ---- */
.cx {margin-top:6px}
.cx-def {position:relative;padding:20px 24px 20px 26px;border-radius:18px;background:var(--sunken);border-left:3px solid var(--accent)}
.cx-def-tag {display:block;color:var(--accent-ink);font-size:.68rem;font-weight:620;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}
.cx-def p {font-size:1.02rem;line-height:1.65;color:var(--text);max-width:80ch}
.cx-def p + p {margin-top:8px;font-size:.86rem;color:var(--muted)}
.cx-stage {position:relative;margin-top:22px}
.cx-canvas {display:block;width:100%;height:400px;border-radius:20px;background:var(--cx-bg);border:1px solid var(--line-soft);touch-action:pan-y}
.cx-badge {flex:none;display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--sunken);color:var(--muted);font-size:.66rem;font-weight:560;letter-spacing:.02em;white-space:nowrap}
.cx-badge::before {content:'';width:6px;height:6px;border-radius:50%;background:var(--cx-dc)}
.cx-transport {display:flex;align-items:center;gap:10px;margin-top:14px}
.cx-btn {display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border:1px solid var(--line-soft);border-radius:50%;background:var(--surface);color:var(--text);transition:border-color .2s,background-color .2s}
.cx-btn:hover {border-color:var(--accent);background:var(--hover)}
.cx-btn svg {width:16px;height:16px}
.cx-btn.cx-play {width:48px;height:48px;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cx-btn.cx-play:hover {background:var(--accent-hover);border-color:var(--accent-hover)}
.cx-timeline {position:relative;flex:1;min-width:0;height:44px;display:flex;align-items:center}
.cx-timeline input {width:100%;margin:0;accent-color:var(--accent);cursor:pointer;min-height:44px}
.cx-marks {position:absolute;left:8px;right:8px;top:4px;height:8px;pointer-events:none}
.cx-marks span {position:absolute;top:0;width:2px;height:8px;margin-left:-1px;border-radius:2px;background:var(--line)}
.cx-marks span.is-done {background:var(--accent)}
.cx-clock {flex:none;min-width:4.8em;text-align:right;color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums}
.cx-body {display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;margin-top:22px}
.cx-h {color:var(--muted);font-size:.68rem;font-weight:620;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.cx-steps {list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:cx}
.cx-steps li {counter-increment:cx}
.cx-step {display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;width:100%;padding:11px 14px 11px 10px;text-align:left;border:0;border-radius:14px;background:transparent;color:var(--muted);font-size:.84rem;line-height:1.6;transition:background-color .25s,color .25s}
.cx-step::before {content:counter(cx);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);font-size:.7rem;font-weight:620;color:var(--muted);background:var(--surface);transition:all .25s}
.cx-step:hover {background:var(--hover);color:var(--text)}
.cx-step.is-done {color:var(--text)}
.cx-step.is-done::before {border-color:var(--accent);color:var(--accent-ink)}
.cx-step.is-active {background:var(--sunken);color:var(--text)}
.cx-step.is-active::before {background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.cx-side {display:grid;gap:22px;align-content:start;min-width:0}
.cx-params {display:grid;gap:16px}
.cx-param {display:grid;gap:8px;min-width:0}
.cx-param-head {display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.76rem;color:var(--muted)}
.cx-param-head output {color:var(--text);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-param input[type='range'] {width:100%;margin:0;min-height:36px;accent-color:var(--accent);cursor:pointer}
.cx-param .cx-seg {justify-self:start}
.cx-action {justify-self:start;min-height:40px;padding:8px 16px;border:1px dashed var(--accent);border-radius:999px;background:transparent;color:var(--accent-ink);font-size:.76rem;font-weight:580}
.cx-action:hover {background:var(--hover)}
.cx-formula {padding:18px 20px;border-radius:18px;background:var(--sunken);overflow-x:auto}
.cx-eq {font-size:1.08rem;line-height:1.7;color:var(--text);white-space:nowrap;font-family:'Cambria Math','STIX Two Math','Times New Roman',serif}
.cx-eq i {font-style:italic}
.cx-eq sub,.cx-eq sup {font-size:.7em;line-height:0}
.cx-eq .ref {font-family:var(--font-ui);font-style:normal;font-size:.68rem;color:var(--muted);margin-left:8px;vertical-align:middle}
.cx-eq + .cx-eq {margin-top:4px}
.cx-live {margin-top:10px;padding-top:10px;border-top:1px solid var(--line-soft);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:normal;line-height:1.7}
.cx-live b {color:var(--text);font-weight:620}
.cx-readouts {display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px 18px;margin:0}
.cx-readouts div {min-width:0}
.cx-readouts dt {font-size:.68rem;color:var(--muted);line-height:1.45}
.cx-readouts dd {margin:4px 0 0;font-size:1.02rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap}
.cx-readouts dd.is-key {color:var(--accent-ink)}
.cx-note {margin-top:20px;padding-top:16px;border-top:1px solid var(--line-soft);font-size:.74rem;line-height:1.7;color:var(--muted);max-width:100ch}
.cx-note strong {color:var(--text);font-weight:600}
.cx-motion-hint {margin-top:8px;font-size:.7rem;color:var(--muted)}

.cx-more {margin-top:18px;font-size:.74rem;color:var(--muted)}
.cx-more summary {cursor:pointer;padding:6px 0;color:var(--text);font-weight:560}
.cx-more p {padding-top:6px;line-height:1.7;max-width:100ch}
.edu-input {padding-top:8px;max-width:91ch}

/* ---- Panel „Do publikacji" ---- */
.cx-share {margin-top:14px;padding:18px 20px;border-radius:18px;border:1px dashed var(--line);background:var(--bg)}
.cx-share .cx-h {margin-bottom:12px}
.cx-share-row {display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cx-share-row .btn {min-height:42px;padding:9px 16px;font-size:.78rem}
.cx-share-status {margin-top:10px;min-height:1.5em;font-size:.78rem;color:var(--text)}
.cx-share-note {font-size:.72rem;color:var(--muted);line-height:1.6;max-width:90ch}
.cx-share-btn[aria-expanded='true'] {background:var(--hover);border-color:var(--accent)}
.anatomy-actions {display:flex;gap:8px;flex-wrap:wrap}
.anatomy-actions .btn {min-height:42px;padding:9px 18px;font-size:.78rem}
.anatomy .cx-share {margin-top:18px}

/* ---- Lista tematów z ikonami ---- */
.edu-topic {display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 12px;align-items:center}
.edu-topic .edu-ico {grid-row:span 2;width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--bg);color:var(--muted);transition:background-color .25s,color .25s}
.edu-topic .edu-ico svg {width:22px;height:22px;overflow:visible}
.edu-topic .edu-ico path,.edu-topic .edu-ico circle,.edu-topic .edu-ico rect,.edu-topic .edu-ico line,.edu-topic .edu-ico polyline {vector-effect:non-scaling-stroke}
.edu-topic strong {margin-bottom:0!important}
.edu-topic[aria-pressed='true'] .edu-ico {background:var(--accent);color:var(--on-accent)}
.edu-topic:hover .edu-ico {color:var(--accent-ink)}
.edu-topic[aria-pressed='true']:hover .edu-ico {color:var(--on-accent)}
.edu-topic .edu-ico .draw {stroke-dasharray:60;stroke-dashoffset:0}
.edu-topic:hover .edu-ico .draw {animation:cx-draw .9s var(--ease) both}
@keyframes cx-draw {from{stroke-dashoffset:60}to{stroke-dashoffset:0}}

.edu-topic-name {display:block;line-height:1.4}
.edu-concept {margin-top:4px}

/* ---- Podział panelu: pojęcie → przykład z silnika ---- */
.edu-head {display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.edu-head h3 {margin:6px 0 18px!important}
.edu-symbol {display:inline-block;margin-right:.3em;color:var(--accent-ink)}
.edu-data {margin-top:44px;padding-top:36px;border-top:1px solid var(--line-soft)}
.edu-data-head h4 {font-size:1.35rem;letter-spacing:-.03em;line-height:1.25;margin:8px 0 12px;font-weight:580}
.edu-data .edu-controls {margin-top:24px}
.edu-refs {margin-top:56px;padding:26px 30px;border-radius:22px;background:var(--surface);color:var(--muted);font-size:.76rem;line-height:1.7}
.edu-refs h3 {font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text);margin-bottom:12px}
.edu-refs ol {margin:0;padding-left:20px;display:grid;gap:6px}
.edu-refs li::marker {color:var(--accent-ink);font-weight:600}
.edu-refs cite {font-style:italic;color:var(--text)}

@media(max-width:1200px) {
  .cx-body {grid-template-columns:1fr;gap:26px}
  .anatomy {padding:28px 28px 24px}
}
@media(max-width:900px) {
  .edu-topics {display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;margin-inline:-4px;scrollbar-width:thin}
  .edu-topics .edu-topic {flex:0 0 auto;width:auto;min-width:168px;scroll-snap-align:start}
  .edu-topic {grid-template-columns:28px minmax(0,1fr);gap:2px 10px}
  .edu-topic .edu-ico {width:28px;height:28px;border-radius:9px}
  .edu-topic .edu-ico svg {width:18px;height:18px}
  .anatomy-head {grid-template-columns:1fr}
}
@media(max-width:640px) {
  .anatomy {margin-bottom:40px;padding:22px 18px 20px;border-radius:22px}
  .anatomy-canvas {height:300px;border-radius:16px}
  .cx-canvas {border-radius:16px}
  .cx-def {padding:16px 16px 16px 18px}
  .cx-def p {font-size:.94rem}
  .cx-eq {font-size:.98rem}
  .cx-readouts {grid-template-columns:repeat(2,minmax(0,1fr))}
  .edu-refs {padding:22px 18px}
}
@media(max-width:420px) {
  .anatomy-chip {padding:7px 12px;font-size:.74rem}
  .cx-transport {gap:8px}
  .cx-clock,.cx-badge {display:none}
}
@media(prefers-reduced-motion:reduce) {
  .anatomy-chip,.cx-step,.cx-step::before {transition:none}
  .edu-topic:hover .edu-ico .draw {animation:none}
}
@media print {
  .anatomy,.cx-transport,.cx-params,.cx-motion-hint {display:none!important}
  .cx-canvas {border:1px solid #ccc}
  .cx-body {grid-template-columns:1fr}
}