/* Switching RL Circuits: its colours, circuit diagrams (with coils and switches) and tutor marks;
   the general look is in ui.css (shared by the apps). */
:root {
  --cur: #1f5fd6;
  --vol: #c8322b;
  --zone-light: rgba(43, 89, 195, 0.06);
  --zone-light-line: rgba(43, 89, 195, 0.45);
  --zone-strong: rgba(43, 89, 195, 0.16);
  --zone-strong-line: rgba(43, 89, 195, 0.6);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cur: #74a7ff;
    --vol: #ff8a80;
    --zone-light: rgba(122, 162, 255, 0.07);
    --zone-light-line: rgba(122, 162, 255, 0.45);
    --zone-strong: rgba(122, 162, 255, 0.2);
    --zone-strong-line: rgba(122, 162, 255, 0.65);
  }
}

#prompt { margin: 6px 0; }

/* circuit drawing */
svg text { font-family: var(--serif); font-size: 14px; }
svg .w { stroke: var(--ink); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
svg .w.thick { stroke-width: 4.5; stroke-linecap: butt; }
svg .c { stroke: var(--ink); stroke-width: 1.8; fill: var(--card); }
svg .dot { fill: var(--ink); }
svg .lbl { fill: var(--ink); }
svg .small { font-size: 12px; }
svg .cur { stroke: var(--cur); stroke-width: 1.8; fill: none; }
svg .cur-h, svg .cur-t { fill: var(--cur); }
svg .vol { stroke: var(--vol); stroke-width: 1.6; fill: none; }
svg .vol-h, svg .vol-t { fill: var(--vol); }
svg .coil { stroke: var(--ink); stroke-width: 1.8; fill: none; }
svg .coil.hl { stroke: var(--accent); stroke-width: 2.6; }
svg .contact { fill: var(--card); stroke: var(--ink); stroke-width: 1.4; }
svg .lever.hl { stroke: var(--accent); stroke-width: 2.6; }
svg .note { fill: var(--accent); font-size: 13px; font-weight: 600; font-family: system-ui, sans-serif; }
/* parts without current */
svg .dim { opacity: 0.3; }
.c-cur { color: var(--cur); }
.c-vol { color: var(--vol); }

#hint-list ul { margin: 4px 0; padding-left: 1.2em; }
#hint-list ul li { margin: 6px 0; }

/* tutor: the parts a step is about */
svg .zone { stroke-width: 1.2; }
svg .zone.light { fill: var(--zone-light); stroke: var(--zone-light-line); stroke-dasharray: 4 3; }
svg .zone.strong { fill: var(--zone-strong); stroke: var(--zone-strong-line); }
svg .c.hl { fill: var(--zone-strong); stroke: var(--accent); stroke-width: 2.4; }
svg .cap { fill: var(--ink); font-size: 13px; }
svg .use { font-weight: 700; }
svg .new { font-weight: 700; }
svg .mark { fill: var(--mark); }
.k-strong { background: var(--zone-strong); border: 1px solid var(--zone-strong-line); border-radius: 3px; padding: 0 3px; }
.k-light { background: var(--zone-light); border: 1px dashed var(--zone-light-line); border-radius: 3px; padding: 0 3px; }
.k-new { background: var(--mark); border-radius: 3px; padding: 0 3px; font-weight: 600; }
.k-dim { opacity: 0.45; }

/* before, right after and long after switching, side by side */
table.compare { border-collapse: collapse; margin: 10px 0; font-variant-numeric: tabular-nums; }
table.compare th, table.compare td { border-bottom: 1px solid var(--line); padding: 4px 12px; text-align: right; }
table.compare th:first-child { text-align: left; font-weight: 600; }

/* arcade: currents and voltages in manim's colours */
#arcade { --cur: #58c4dd; --vol: #fc6255; --ask: #ffff00; }
/* the quantity the question asks for, in manim's yellow */
#arcade svg text.ask { fill: var(--ask); font-weight: 700; }
#arcade svg .cur.ask, #arcade svg .vol.ask { stroke: var(--ask); stroke-width: 2.4; }
#arcade svg .cur-h.ask, #arcade svg .vol-h.ask { fill: var(--ask); }
#arcade svg .note { fill: #ffff00; }