/* Force Concepts: its colours, pictures, question formats, the typical-slips overlay and the tutor
   extras; the general look is in ui.css (shared by the apps). */
:root {
  --force: #d24a0f;
  --vel: #1f5fd6;
  --acc: #1d7a3e;
  --net: #8a3ab9;
  --obj: #f1efe9;
  --heavy: #8d939b;
  --solid: #cfcbc1;
  --ice: #eaf2f7;
  --space: #edeef5;
  --glow: #ffc21a;
  --flame: #f08c1a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --force: #ff8a4c;
    --vel: #74a7ff;
    --acc: #7fd49a;
    --net: #d29bff;
    --obj: #2c3035;
    --heavy: #6b7179;
    --solid: #4a4f56;
    --ice: #1b2a33;
    --space: #1a1c2a;
    --glow: #ffd23f;
    --flame: #ffa040;
  }
}

#situation p { margin: 6px 0; }

/* pictures */
.figs { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-end; justify-content: center; margin: 12px 0 16px; }
.fig { margin: 0; max-width: 100%; text-align: center; }
.figs svg.scene { display: block; max-width: 100%; height: auto; }
svg .gline { stroke: var(--ink); stroke-width: 1.6; }
svg .hatch { stroke: var(--muted); stroke-width: 1; }
svg .obj { fill: var(--obj); stroke: var(--ink); stroke-width: 1.6; }
svg .obj.heavy { fill: var(--heavy); }
svg .solid { fill: var(--solid); stroke: none; }
svg .wheel { fill: var(--ink); }
svg .win { fill: var(--space); stroke: var(--ink); stroke-width: 1; }
svg .skin { fill: var(--obj); stroke: var(--ink); stroke-width: 1.6; }
svg .body { stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; fill: none; }
svg .skate { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
svg .flame { fill: var(--flame); }
svg .cable { stroke: var(--ink); stroke-width: 1.6; }
svg .shaft { stroke: var(--line); stroke-width: 2; }
svg .canopy { fill: var(--obj); stroke: var(--ink); stroke-width: 1.6; }
svg .fan { fill: var(--solid); stroke: var(--ink); stroke-width: 1; }
svg .lit { fill: var(--glow); stroke: var(--ink); stroke-width: 1; }
svg .on { fill: var(--flame); opacity: 0.8; }
svg .obj.earth { fill: #9cc3e8; }
svg .mag-n { fill: #c8322b; stroke: var(--ink); stroke-width: 1.4; }
svg .mag-s { fill: #2b59c3; stroke: var(--ink); stroke-width: 1.4; opacity: 0.75; }
svg .ice { fill: var(--ice); }
svg .space { fill: var(--space); }
svg .table-top { fill: var(--obj); }
svg .channel { fill: none; stroke: var(--solid); stroke-width: 20; stroke-linecap: butt; }
svg .channel.thin-ch { stroke-width: 9; }
svg .channel-mid { fill: none; stroke: var(--card); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.8; }
svg .trace { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 4; }
svg .trace.strong { stroke: var(--ink); stroke-dasharray: none; stroke-width: 1.8; }
svg .guide { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
svg .guide.faint { opacity: 0.55; }
svg .ln { stroke: var(--ink); stroke-width: 1.4; }
svg .thin { stroke: var(--ink); stroke-width: 1; fill: none; }
svg .pt { fill: var(--ink); }
svg .pin { fill: var(--ink); }
svg .ghost { opacity: 0.32; }
svg .opt-path { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

svg .arr line { stroke: currentColor; stroke-width: 2.6; stroke-linecap: butt; }
svg .arr polygon { fill: currentColor; }
svg .arr.f { color: var(--force); }
svg .arr.v { color: var(--vel); }
svg .arr.v.alt line { stroke-dasharray: 5 3; }
svg .arr.v.strong line { stroke-width: 3.2; }
svg .arr.a { color: var(--acc); }
svg .arr.net { color: var(--net); }
svg .arr.net line { stroke-dasharray: 6 3; }
svg .arr.f.pair { opacity: 0.9; }
svg .arr.f.pair line { stroke-dasharray: 5 3; }
svg .arr.m { color: var(--muted); }
svg .arr.m line { stroke-width: 1.6; }
svg .arr.ax { color: var(--ink); }
svg .arr.ax line { stroke-width: 1.3; }
svg .arr.dim { color: var(--muted); }
svg .arr.dim line { stroke-width: 1.2; }
svg .arr.opt { color: var(--accent); }

svg .lbl { fill: var(--ink); font: italic 15px var(--serif); }
svg .lbl.small { font-size: 13px; }
svg .lbl.f { fill: var(--force); font-weight: 600; }
svg .lbl.v { fill: var(--vel); font-weight: 600; }
svg .lbl.a { fill: var(--acc); font-weight: 600; }
svg .lbl.net { fill: var(--net); font-weight: 600; }
svg .lbl.faint { fill: var(--muted); }
svg .lbl .sub { font-style: normal; font-size: 0.72em; }
svg .txt { fill: var(--muted); font: 12px system-ui, sans-serif; }

/* questions: one block per question, the options as a list of sentences or as pictures (not the
   numeric fields of ui.css) */
#fields .field { display: block; }
#fields { display: grid; gap: 18px; margin-bottom: 16px; }
.qprompt { margin: 0 0 8px; font-weight: 600; }
.qn {
  display: inline-grid; place-items: center;
  width: 1.5em; height: 1.5em; margin-right: 8px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font-size: 0.8rem; font-weight: 700; vertical-align: 1px;
}
.opts { display: grid; gap: 6px; }
.opts.list { grid-template-columns: minmax(0, 1fr); }
.opts.pics { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.opts label { position: relative; display: block; }
.opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opts > label > span {
  display: flex; align-items: flex-start; gap: 10px;
  height: 100%;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
}
.opts.pics > label > span { flex-direction: column; align-items: center; gap: 2px; padding: 6px; }
.opts.pics > label > span .letter { align-self: flex-start; }
.opts .pic svg { display: block; width: 100%; max-width: 160px; height: auto; }
.letter {
  flex: none; display: inline-grid; place-items: center;
  width: 1.6em; height: 1.6em;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--card); font-size: 0.8rem;
}
.opts label:hover > span { border-color: var(--accent); }
.opts input:checked + span { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--card); }
.opts input:checked + span .letter { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.opts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ok > .opts input:checked + span { background: var(--ok-bg); border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok) inset; }
.ok > .opts input:checked + span .letter { background: var(--ok); border-color: var(--ok); }
.bad > .opts input:checked + span { background: var(--bad-bg); border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad) inset; }
.bad > .opts input:checked + span .letter { background: var(--bad); border-color: var(--bad); }
.fb { margin: 8px 0 0; font-size: 0.93rem; }
.fb:empty { display: none; }
.fb.ok { color: var(--ok); }
.fb.ok::before { content: "✓ "; }
.fb.bad { color: var(--bad); }
.fb.bad::before { content: "✗ "; }
.qprompt.sub { margin: 14px 0 8px; }

/* ranking and matching by drag and drop: cards in a pool, dragged into boxes */
.dnd-note { margin: -4px 0 8px; }
.zone { border: 1.5px dashed var(--line); border-radius: 8px; background: var(--bg); padding: 6px; min-height: 48px; transition: border-color 0.12s, background 0.12s; }
.zone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zone.over, .field.placing .zone:not(.pool):hover { border-color: var(--accent); background: var(--card); }
.field.placing .zone:not(.pool) { border-color: var(--accent); cursor: pointer; }
.zone .drop { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-items: flex-start; }
.zone.pool { border-style: solid; background: transparent; margin-bottom: 10px; }
.zone.pool .drop:empty::after { content: "✓"; color: var(--muted); padding: 6px; }
.chip {
  display: inline-block; max-width: 100%; text-align: left;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; line-height: 1.35;
}
.chip:hover:not(:disabled) { border-color: var(--accent); }
.chip.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.chip.dragging { opacity: 0.35; }
.chip.ghost { position: fixed; z-index: 1000; pointer-events: none; cursor: grabbing; opacity: 0.95; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); margin: 0; }
.chip:disabled { cursor: default; opacity: 1; color: inherit; }
.chip.ok { border-color: var(--ok); background: var(--ok-bg); box-shadow: 0 0 0 1px var(--ok); }
.chip.bad { border-color: var(--bad); background: var(--bad-bg); box-shadow: 0 0 0 1px var(--bad); }
.buckets { display: grid; gap: 6px; }
.end { margin: 4px 0; color: var(--muted); font-size: 0.85rem; }
.targets { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.targets.pics { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.target-head { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 4px; font-weight: 600; }
.target-head .pic svg { display: block; width: 120px; height: auto; }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.zone-label { display: block; color: var(--muted); font-size: 0.85rem; margin-bottom: 4px; }
.item-fb { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 0.93rem; }
.item-fb .fb { display: inline; margin: 0; }
.preview .chip { cursor: default; }

/* true/false, ranking and matching: one row per statement or item */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.row .row-text { flex: 1 1 260px; }
.row .fb { flex-basis: 100%; margin: 2px 0 0; }
.row.ok { border-color: var(--ok); background: var(--ok-bg); }
.row.bad { border-color: var(--bad); background: var(--bad-bg); }
.tf-btns { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.tf-btns label { position: relative; }
.tf-btns input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tf-btns span { display: block; padding: 4px 12px; border-left: 1px solid var(--line); font-size: 0.93rem; }
.tf-btns label:first-child span { border-left: 0; }
.tf-btns input:checked + span { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tf-btns input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: -3px; }
.row.ok .tf-btns input:checked + span { background: var(--ok); color: var(--card); }
.row.bad .tf-btns input:checked + span { background: var(--bad); color: var(--card); }
.row select { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); min-width: 4.5em; }
.rank .row select { order: -1; }
.gallery { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0 12px; }
.gallery .choice { margin: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); padding: 4px; text-align: center; }
.gallery .choice svg { display: block; width: 120px; height: auto; }
.gallery figcaption { text-align: left; }
.preview .field { margin-bottom: 12px; }
.preview .gallery .choice svg { width: 96px; }
.tag {
  display: inline-block; margin-left: 4px; padding: 0 8px;
  border: 1px solid currentColor; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}

#profile-btn { display: inline-flex; align-items: center; gap: 6px; }
.badge { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 5px; border-radius: 999px; background: var(--bad); color: var(--card); font-size: 0.78rem; font-weight: 700; }
.steps h4 { margin: 16px 0 2px; font-size: 1rem; }
.steps p { margin: 8px 0; }
.short { list-style: none; margin: 14px 0 0; padding: 12px 0 0; }
.short li { margin: 4px 0; }

/* the “typical slips” overlay */
#profile {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  margin: auto;
  color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
#profile::backdrop { background: rgba(15, 17, 20, 0.45); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dialog-head h3 { margin-top: 4px; }
button.close { padding: 0 9px; font-size: 1.3rem; line-height: 1.4; color: var(--muted); }
button.close:hover:not(:disabled) { color: var(--ink); }
#profile-list, #profile-types-list { margin: 10px 0 12px; padding-left: 1.2em; }
#profile h4 { margin: 14px 0 0; font-size: 0.95rem; }
#profile-types-list .count { min-width: 0; margin-left: 6px; font-size: 0.9rem; }
#profile-list li, #profile-types-list li { margin: 4px 0; }
#profile-list .count { display: inline-block; min-width: 2.2em; font-variant-numeric: tabular-nums; color: var(--muted); }
#profile-list li { margin: 10px 0; }
#profile-list .fix { display: block; margin: 2px 0 0 2.2em; }
#profile-list .fix b { color: var(--ok); }

/* tutor mode */
.tutor-text .step-rule { color: var(--muted); font-size: 0.9rem; font-weight: 600; margin-bottom: 4px; }
.tutor-text .tq { margin: 8px 0; padding-left: 1.4em; font-weight: 600; }
.tutor-text details { margin: 2px 0 12px 2.1em; }
.tutor-text summary { cursor: pointer; color: var(--accent); font-size: 0.93rem; }
.tutor-text .wrong { margin: 6px 0; padding-left: 1.2em; font-size: 0.93rem; }
.tutor-text .wrong li { margin: 8px 0; }
.k-f { color: var(--force); font-weight: 600; }
.k-v { color: var(--vel); font-weight: 600; }
.k-a { color: var(--acc); font-weight: 600; }
.k-net { color: var(--net); font-weight: 600; }

@media (max-width: 560px) {
  .opts.pics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* arcade: manim's colours for forces, velocities, accelerations and the net force */
#arcade { --force: #fc6255; --vel: #58c4dd; --acc: #83c167; --net: #c55f73; --obj: #1a1a1a; --heavy: #555; --solid: #333; --ice: #10202a; --space: #0d0d1a; }
#arcade .figs svg.scene { width: 420px; }
#arcade .ar-opt { font-size: 1.05rem; text-align: left; padding-left: 30px; }
#arcade .ar-opt .val svg { width: 100%; max-width: 200px; margin: 0 auto; }
#arcade .ar-answers svg { width: 160px; display: block; }