/* Force Systems: its colours and drawings; the general look is in ui.css (shared by the apps). */
:root {
  --f-g: #c0392b;
  --f-n: #1f5fd6;
  --f-r: #a8650a;
  --f-s: #1d7a3e;
  --f-k: #8a3ab9;
  --f-acc: #55606b;
  --slope: #ece9e1;
  --box: #e8edf3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --f-g: #ff8a80;
    --f-n: #74a7ff;
    --f-r: #f2b45c;
    --f-s: #7fd49a;
    --f-k: #d29bff;
    --f-acc: #aab2ba;
    --slope: #2a2d31;
    --box: #2d3540;
  }
}

#prompt p { margin: 6px 0; }

/* drawings */
/* drawings, in the manner of mechanics textbooks: fine outlines, tinted bodies, hatched surfaces,
   slim notched arrowheads, and labels with a halo of the background so that lines never cut them */
svg text { font-family: var(--serif); font-size: 15px; }
svg .w { stroke: var(--ink); stroke-width: 1.3; fill: none; stroke-linecap: round; }
svg .w.thin { stroke-width: 0.9; }
svg .w.dash { stroke: var(--muted); stroke-dasharray: 4 3; stroke-width: 0.9; }
svg .w.rope { stroke-width: 1.2; }
svg .ground { stroke: var(--ink); stroke-width: 1.5; stroke-linecap: butt; }
svg .hatch { fill: none; stroke: var(--ink); stroke-width: 0.8; stroke-opacity: 0.55; }
svg .body { fill: var(--box); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
svg .slope { fill: var(--slope); stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
svg .pulley { fill: var(--box); stroke: var(--ink); stroke-width: 1.3; }
svg .hub { fill: var(--card); stroke: var(--ink); stroke-width: 1; }
svg .dot { fill: var(--ink); }
svg .lbl { fill: var(--ink); }
svg .lbl.small { font-size: 13px; }
svg .lbl.mass { font-size: 12.5px; fill: var(--muted); }
svg .sub { font-size: 72%; }
svg :is(.lbl, .flbl) { paint-order: stroke fill; stroke: var(--card); stroke-width: 3.5px; stroke-linejoin: round; }
svg .lbl.mass { stroke: var(--box); }
svg .force { color: var(--ink); }
svg .force line { stroke: currentColor; stroke-width: 1.9; stroke-linecap: butt; }
svg .force polygon, svg .force circle { fill: currentColor; }
svg .force text { fill: currentColor; font-size: 16px; }
svg .k-g, .k-g { color: var(--f-g); }
svg .k-comp { color: var(--f-g); }
svg .k-comp line { stroke-dasharray: 4 3; stroke-width: 1.3; }
svg .k-comp polygon { fill-opacity: 0.8; }
svg .k-n, .k-n { color: var(--f-n); }
svg .k-r, .k-r { color: var(--f-r); }
svg .k-s, .k-s { color: var(--f-s); }
svg .k-k, .k-k { color: var(--f-k); }
svg .k-acc, .k-acc { color: var(--f-acc); }
svg .k-acc line { stroke-width: 1.2; }
svg .force.hl line { stroke-width: 3; }
svg .force.hl text { font-weight: 700; }
svg .force.dim { opacity: 0.25; }
.note .k-g, .note .k-n, .note .k-r, .note .k-s, .note .k-k, .note .k-acc { font-weight: 600; }

/* arcade: the forces in manim's colours; arrows appear after the bodies */
#arcade {
  --f-g: #fc6255; --f-n: #58c4dd; --f-r: #f0ac5f; --f-s: #83c167; --f-k: #c59ee6; --f-acc: #ffff00;
  --slope: #141414; --box: rgba(88, 196, 221, 0.1);
}
#arcade .animate .fig .force :is(line, polygon, circle) { animation-delay: 0.45s, 0.9s; }

/* the table of forces in practice: a row per kind of force, a column per box */
#answers > h3 { margin: 4px 0 6px; }
#answers > h3 ~ h3 { margin-top: 18px; }
.ftable { border-collapse: collapse; margin: 10px 0 4px; }
.ftable th, .ftable td { padding: 4px 10px; text-align: center; }
.ftable thead th { font-weight: 400; font-size: 0.9rem; border-bottom: 1px solid var(--line); vertical-align: bottom; max-width: 9em; }
.ftable tbody th { font-weight: 600; text-align: left; padding-right: 14px; }
.ftable .cell { position: relative; display: inline-block; width: 30px; height: 30px; cursor: pointer; }
.ftable .cell input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ftable .cell span { position: absolute; inset: 0; border: 1.5px solid var(--line); border-radius: 6px; background: var(--bg); }
.ftable .cell input:checked + span { background: var(--accent); border-color: var(--accent); }
.ftable .cell input:checked + span::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-ink); font-weight: 700; }
.ftable .cell input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ftable td.ok .cell span { border-color: var(--ok); }
.ftable td.bad .cell span { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-bg); }
.ftable td.ok .cell input:checked + span { background: var(--ok); border-color: var(--ok); }
.table-fb { margin: 2px 0 6px; min-height: 1.4em; font-size: 0.9rem; }
.table-fb.ok { color: var(--ok); }
.table-fb.bad { color: var(--bad); }

/* the pictures of the real problems (realpictures.js) */
:root { --pic-car: #d9534f; --pic-car2: #5b8def; --pic-truck: #e8a33d; --pic-glass: #cfe6f5; --pic-wheel: #2d3136; --pic-crate: #c8995f; --pic-container: #2f7fb8;
  --pic-cabin: #eef0f2; --pic-device: #9aa4ad; --pic-crane: #e0a526; --pic-wagon: #7c8b99; --pic-canopy: #e85d75; --pic-rocket: #f4f6f8; --pic-flame: #ffb43d; --pic-weight: #59636d; --pic-skin: #f3d2b3; }
@media (prefers-color-scheme: dark) {
  :root { --pic-glass: #34506a; --pic-cabin: #2a2f35; --pic-rocket: #d9dde2; --pic-skin: #c9a27f; }
}
svg :is(.pic-car, .pic-truck, .pic-crate, .pic-container, .pic-cabin, .pic-device, .pic-wagon, .pic-rocket, .pic-weight, .pic-glass, .pic-canopy, .pic-fin, .pic-shaft) { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
svg .pic-car { fill: var(--pic-car); }
svg .pic-car.alt { fill: var(--pic-car2); }
svg .pic-truck { fill: var(--pic-truck); }
svg .pic-glass { fill: var(--pic-glass); }
svg .pic-wheel { fill: var(--pic-wheel); }
svg .pic-hub { fill: var(--card); }
svg .pic-crate { fill: var(--pic-crate); }
svg .pic-container { fill: var(--pic-container); }
svg .pic-ribs { stroke: rgba(255, 255, 255, 0.45); stroke-width: 2; fill: none; }
svg .pic-cabin { fill: var(--pic-cabin); }
svg .pic-shaft { fill: none; stroke-dasharray: 6 4; stroke: var(--muted); }
svg .pic-device { fill: var(--pic-device); }
svg .pic-crane { fill: none; stroke: var(--pic-crane); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
svg .pic-wagon { fill: var(--pic-wagon); }
svg .pic-coupling { stroke: var(--ink); stroke-width: 3; }
svg .pic-canopy { fill: var(--pic-canopy); }
svg .pic-lines { fill: none; stroke: var(--muted); stroke-width: 1; }
svg .pic-rocket { fill: var(--pic-rocket); }
svg .pic-fin { fill: var(--pic-car); }
svg .pic-flame { fill: var(--pic-flame); stroke: #e8742c; stroke-width: 1.2; }
svg .pic-weight { fill: var(--pic-weight); }
svg .pic-head { fill: var(--pic-skin); stroke: var(--ink); stroke-width: 1.4; }
svg .pic-limbs { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
svg .pic-ski { stroke: var(--pic-car2); stroke-width: 4; stroke-linecap: round; }
svg .pic-runner { fill: none; stroke: var(--ink); stroke-width: 2.5; }
svg .pic-speed { stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.fig-note { flex-basis: 100%; text-align: center; margin: 0; }