/* Torque: its colours, drawings and torque 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;
}

@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;
  }
}

#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; }

/* a torque's field: its size and its sense of rotation (↺, ↻ or none) */
.field .after { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.senses > label > span { font-size: 1.05rem; padding: 2px 10px; }
.field.torque .what .katex { font-size: 1em; }

/* arcade: manim's colours */
#arcade { --f-force: #fc6255; --f-g: #f0ac5f; --f-h: #83c167; --arm: #58c4dd; --com: #c59ee6; --plate: rgba(88, 196, 221, 0.1); --beam: #141414; --gridline: #1c1c1c; }