/* Coulomb Force: its colours, drawings and answer fields; the general look is in ui.css (shared by the apps). */
:root {
  --f-force: #c0392b;
  --f-g: #a8650a;
  --f-h: #1d7a3e;
  --arm: #1f5fd6;
  --com: #8a3ab9;
  --plate: #e8edf3;
  --beam: #ece9e1;
  --gridline: #e3e0d8;
  --pos: #d0342c;
  --neg: #2f8f46;
  --k1: #c0392b;
  --k2: #1f5fd6;
  --k3: #a8650a;
  --knet: #7b2fbf;
}

@media (prefers-color-scheme: dark) {
  :root {
    --f-force: #ff8a80;
    --f-g: #f2b45c;
    --f-h: #7fd49a;
    --arm: #74a7ff;
    --com: #d29bff;
    --plate: #2d3540;
    --beam: #2a2d31;
    --gridline: #30343a;
    --pos: #ff7a70;
    --neg: #7fd49a;
    --k1: #ff8a80;
    --k2: #74a7ff;
    --k3: #f2b45c;
    --knet: #d29bff;
  }
}

#prompt p { margin: 6px 0; }

/* drawings, in the manner of the worksheets: fine outlines, tinted bodies, labels with a halo of the
   background so that lines never cut them */
svg text { font-family: var(--serif); font-size: 15px; }
svg .grid { stroke: var(--gridline); stroke-width: 1; fill: none; }
svg .w { stroke: var(--ink); stroke-width: 1.3; fill: none; stroke-linecap: round; }
svg .w.thin { stroke-width: 0.9; }
svg .w.rope { stroke-width: 1.2; }
svg .ground { stroke: var(--ink); stroke-width: 1.5; }
svg .hatch { fill: none; stroke: var(--ink); stroke-width: 0.8; stroke-opacity: 0.55; }
svg .plate { fill: var(--plate); fill-opacity: 0.85; stroke: var(--ink); stroke-width: 1.3; }
svg .beam { fill: var(--beam); stroke: var(--ink); stroke-width: 1.3; }
svg .support { fill: var(--beam); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
svg .load { fill: var(--plate); stroke: var(--ink); stroke-width: 1.3; }
svg .load.unknown { stroke-dasharray: 4 3; }
svg .load.ghost { fill: none; stroke: var(--muted); stroke-dasharray: 4 3; }
svg .hub { fill: var(--card); stroke: var(--ink); stroke-width: 1.3; }
svg .dot { fill: var(--ink); }
svg :is(.ball, .wheel, .drum) { fill: var(--plate); stroke: var(--ink); stroke-width: 1.3; }
svg .crank { stroke: var(--ink); stroke-width: 4; stroke-linecap: round; }
svg .rod { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
svg .ladder { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
svg .muscle { stroke: var(--f-force); stroke-width: 5; stroke-opacity: 0.45; stroke-linecap: round; }
svg .dot.mid { fill: var(--com); }
svg .wire { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
svg .wire.hl { stroke: var(--com); }
svg .lbl { fill: var(--ink); }
svg .lbl.small { font-size: 13px; }
svg .lbl.note { font-size: 12px; fill: var(--muted); }
svg .lbl.mass { font-size: 13px; fill: var(--ink); }
svg .lbl.dimtext { fill: var(--muted); }
svg .lbl.hl, svg .lbl.arm-lbl { fill: var(--arm); font-weight: 600; }
svg .sub { font-size: 72%; }
svg :is(.lbl, .flbl) { paint-order: stroke fill; stroke: var(--card); stroke-width: 3.5px; stroke-linejoin: round; }
svg .force, svg .axis, svg .turn { color: var(--f-force); }
svg .force line, svg .axis line { stroke: currentColor; stroke-width: 1.9; }
svg .force polygon, svg .force circle, svg .axis polygon, svg .turn polygon { fill: currentColor; }
svg .force text, svg .axis text { fill: currentColor; font-size: 15px; }
svg .axis { color: var(--muted); }
svg .axis line { stroke-width: 1.1; }
svg .axis circle { display: none; }
svg .k-g { color: var(--f-g); }
svg .k-s { color: var(--f-force); }
svg .k-h { color: var(--f-h); }
svg .force.hl line { stroke-width: 3; }
svg .force.hl text { font-weight: 700; }
svg .force.dim { opacity: 0.3; }
svg .force.comp line { stroke-dasharray: 5 3; stroke-width: 1.5; }
svg .turn { color: var(--arm); }
svg .turn path { fill: none; stroke: currentColor; stroke-width: 1.8; }
svg .join { stroke: var(--com); stroke-width: 1.2; stroke-dasharray: 5 4; }
svg .join.hl { stroke-width: 2; }
svg .action { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
svg .arm { stroke: var(--arm); stroke-width: 2.4; }
svg .arm.hl { stroke-width: 3.2; }
svg .dimline { fill: none; stroke: var(--muted); stroke-width: 0.9; }
svg .dimline.hl { stroke: var(--arm); stroke-width: 1.4; }
svg .com { color: var(--com); }
svg .com circle { fill: var(--card); stroke: currentColor; stroke-width: 1.6; }
svg .com path { fill: currentColor; }
svg .lbl.com-lbl { fill: var(--com); font-weight: 600; }

/* point charges: ⊕ red, ⊖ green, as on the worksheet */
svg .chg circle { fill: var(--card); stroke-width: 1.6; }
svg .chg path { stroke-width: 1.8; fill: none; }
svg .chg.pos { color: var(--pos); }
svg .chg.neg { color: var(--neg); }
svg .chg.unk { color: var(--muted); }
svg .chg circle, svg .chg path { stroke: currentColor; }
svg .chg text { fill: currentColor; font-size: 13px; font-weight: 700; }
svg .chg.hl circle { stroke-width: 2.2; fill: color-mix(in srgb, currentColor 14%, var(--card)); }
svg .chg.hl circle.ring { fill: none; stroke: var(--ink); stroke-width: 1.6; }
svg .chg.ghost { opacity: 0.35; }
svg .chg.ghost circle { stroke-dasharray: 3 2; }
svg .lbl.qlbl { font-size: 14px; }
svg .lbl.qlbl.pos { fill: var(--pos); }
svg .lbl.qlbl.neg { fill: var(--neg); }
svg .outline { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 5 4; }
svg .w.dashed { stroke-dasharray: 5 4; stroke: var(--muted); }
svg .k-1 { color: var(--k1); }
svg .k-2 { color: var(--k2); }
svg .k-3 { color: var(--k3); }
svg .k-net { color: var(--knet); }
svg .k-net line { stroke-width: 2.6; }
svg .k-move { color: var(--muted); }

/* answers that are no numbers: a direction (arrows), a choice, a ranking */
.field.choice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.field.choice .what { margin-right: 4px; }
.choices.dirs > label > span { font-size: 1.15rem; min-width: 2.2em; text-align: center; }
.choices { flex-wrap: wrap; }
/* the nine directions as a compass rose */
.compass .choices.dirs { display: inline-grid; grid-template-columns: repeat(3, auto); }
.compass .choices.dirs > label > span { border-left: 0; border-top: 1px solid var(--line); }
.compass .choices.dirs > label:nth-child(3n + 2) > span, .compass .choices.dirs > label:nth-child(3n + 3) > span { border-left: 1px solid var(--line); }
.compass .choices.dirs > label:nth-child(-n + 3) > span { border-top: 0; }
.ranks { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.ranks select { font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); }
.field.ok .ranks select { border-color: var(--ok); }
.field.bad .ranks select { border-color: var(--bad); }

/* arcade: manim's colours */
#arcade { --f-force: #fc6255; --pos: #fc6255; --neg: #83c167; --k1: #fc6255; --k2: #58c4dd; --k3: #f0ac5f; --knet: #c59ee6; --plate: rgba(88, 196, 221, 0.1); --beam: #141414; --gridline: #1c1c1c; }

/* a result in the text of a step (in formulas, KaTeX marks it: see ui.css) */
span.result { background: var(--ok-bg); border-radius: 3px; padding: 0.05em 0.25em; }

/* what a worked example shows only later: it keeps its room, so that the drawing stays put */
svg .hidden { visibility: hidden; }