/* Resistor Circuit Trainer: its colours, circuit diagrams 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); }
.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; }

/* 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); }