/* PE engine widget styles. Uses the page's tokens when present (--x --v --a --f, --fg/--text, --bg, --border ...)
   with fallbacks, so it fits light and dark themes (prefers-color-scheme and html[data-theme]). */
.pe, .pe-fbd {
  --pe-x: var(--x, #2563eb);
  --pe-v: var(--v, #16a34a);
  --pe-a: var(--a, #ea580c);
  --pe-f: var(--f, #7c3aed);
  --pe-fg: var(--fg, var(--text, var(--ink, #1b1f24)));
  --pe-muted: var(--muted, #5b6470);
  --pe-bg: var(--card, var(--surface, var(--bg, #ffffff)));
  --pe-panel: var(--panel, #f3f5f8);
  --pe-border: var(--border, var(--line, #d3d8df));
  --pe-grid: rgba(120, 130, 145, .22);
  --pe-accent: var(--accent, #1d4ed8);
  --pe-accent-ink: #ffffff;
  --pe-ground: #d8cfb6;
  --pe-ground-line: #8a7f62;
  --pe-track: #6b7280;
  --pe-building: #9aa5b4;
  --pe-window: #eef2f7;
  --pe-car: #e11d48;
  --pe-car2: #0891b2;
  --pe-car3: #ca8a04;
  --pe-car4: #7c3aed;
  --pe-ball: #e11d48;
  --pe-box: #a47b4b;
  --pe-object: #475569;
  --pe-ok: #15803d;
  --pe-no: #b91c1c;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pe, :root:not([data-theme="light"]) .pe-fbd {
    --pe-x: var(--x, #60a5fa); --pe-v: var(--v, #4ade80); --pe-a: var(--a, #fb923c); --pe-f: var(--f, #c084fc);
    --pe-fg: var(--fg, var(--text, var(--ink, #e8edf3)));
    --pe-muted: var(--muted, #a9b4c2);
    --pe-bg: var(--card, var(--surface, var(--bg, #111827)));
    --pe-panel: var(--panel, #1e293b);
    --pe-border: var(--border, var(--line, #3b4757));
    --pe-grid: rgba(160, 175, 195, .18);
    --pe-accent: var(--accent, #93c5fd); --pe-accent-ink: #0b1120;
    --pe-ground: #5b5240; --pe-ground-line: #a89c7c; --pe-track: #94a3b8;
    --pe-building: #4b5563; --pe-window: #fde68a;
    --pe-car: #fb7185; --pe-car2: #22d3ee; --pe-car3: #facc15; --pe-car4: #c084fc;
    --pe-ball: #fb7185; --pe-box: #c69c6d; --pe-object: #cbd5e1;
    --pe-ok: #4ade80; --pe-no: #f87171;
  }
}
:root[data-theme="dark"] .pe, :root[data-theme="dark"] .pe-fbd {
  --pe-x: var(--x, #60a5fa); --pe-v: var(--v, #4ade80); --pe-a: var(--a, #fb923c); --pe-f: var(--f, #c084fc);
  --pe-fg: var(--fg, var(--text, var(--ink, #e8edf3)));
  --pe-muted: var(--muted, #a9b4c2);
  --pe-bg: var(--card, var(--surface, var(--bg, #111827)));
  --pe-panel: var(--panel, #1e293b);
  --pe-border: var(--border, var(--line, #3b4757));
  --pe-grid: rgba(160, 175, 195, .18);
  --pe-accent: var(--accent, #93c5fd); --pe-accent-ink: #0b1120;
  --pe-ground: #5b5240; --pe-ground-line: #a89c7c; --pe-track: #94a3b8;
  --pe-building: #4b5563; --pe-window: #fde68a;
  --pe-car: #fb7185; --pe-car2: #22d3ee; --pe-car3: #facc15; --pe-car4: #c084fc;
  --pe-ball: #fb7185; --pe-box: #c69c6d; --pe-object: #cbd5e1;
  --pe-ok: #4ade80; --pe-no: #f87171;
}

.pe {
  container-type: inline-size;
  box-sizing: border-box; max-width: 100%; min-width: 0;
  margin: 1rem 0; padding: 12px;
  color: var(--pe-fg); background: var(--pe-bg);
  border: 1px solid var(--pe-border); border-radius: 12px;
  line-height: 1.4;
}
.pe[hidden], .pe [hidden], .pe-fbd [hidden], .pe button[hidden] { display: none !important; }
.pe *, .pe *::before, .pe *::after, .pe-fbd * { box-sizing: border-box; }
.pe:focus-visible { outline: 3px solid var(--pe-accent); outline-offset: 2px; }
.pe :focus-visible { outline: 3px solid var(--pe-accent); outline-offset: 2px; }
.pe-title { margin: 0 0 10px; font-size: 1.1em; }
.pe canvas { display: block; width: 100%; max-width: 100%; }
.pe-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container (min-width: 760px) {
  .pe-main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
}
.pe-stage, .pe-graphs { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pe-scene { border: 1px solid var(--pe-border); border-radius: 8px; background: var(--pe-bg); }
.pe-graph canvas { height: 132px; border: 1px solid var(--pe-border); border-radius: 8px; background: var(--pe-bg); }
.pe-graph + .pe-graph { margin-top: 0; }

.pe-readouts { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-ro {
  --pe-c: var(--pe-fg);
  padding: 4px 10px; border-radius: 8px; background: var(--pe-panel);
  border-left: 5px solid var(--pe-c); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pe-ro b { color: var(--pe-c); font-weight: 700; }
.pe-lab { font-weight: 600; color: var(--pe-muted); margin-right: 2px; }

.pe-btn, .pe-choice {
  min-height: 44px; min-width: 44px; padding: 8px 14px;
  font: inherit; font-size: .92em; font-weight: 600; line-height: 1.2;
  color: var(--pe-fg); background: var(--pe-panel);
  border: 2px solid var(--pe-border); border-radius: 10px; cursor: pointer;
}
.pe-btn:hover, .pe-choice:hover { border-color: var(--pe-accent); }
.pe-btn[aria-pressed="true"] { background: var(--pe-accent); color: var(--pe-accent-ink); border-color: var(--pe-accent); }
.pe-btn.pe-play { background: var(--pe-accent); color: var(--pe-accent-ink); border-color: var(--pe-accent); min-width: 7.2em; }
.pe-btn:disabled, .pe-choice:disabled { cursor: default; opacity: .75; }

.pe-frames, .pe-dist, .pe-transport, .pe-speed, .pe-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pe-controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px;
  padding-top: 10px; border-top: 1px solid var(--pe-border); }
.pe-timeline { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; }
.pe-timeline input[type=range] { flex: 1 1 auto; min-width: 0; }
.pe-time { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: .92em; }
.pe input[type=range] { height: 44px; margin: 0; accent-color: var(--pe-accent); cursor: pointer; }
.pe input[type=number] {
  width: 6.2em; min-height: 44px; padding: 6px 8px; font: inherit;
  color: var(--pe-fg); background: var(--pe-bg); border: 2px solid var(--pe-border); border-radius: 8px;
}
.pe-status { margin: 6px 0 0; min-height: 1.2em; color: var(--pe-muted); font-size: .92em; }
.pe-status:empty { display: none; }

.pe-params { display: grid; gap: 4px 12px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--pe-border); }
.pe-param { display: grid; grid-template-columns: minmax(9em, 15em) minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.pe-param label { font-weight: 600; }
.pe-num { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pe-unit { color: var(--pe-muted); min-width: 2.6em; }
@container (max-width: 560px) {
  .pe-param { grid-template-columns: minmax(0, 1fr) auto; }
  .pe-param label { grid-column: 1 / -1; }
  .pe-controls { gap: 10px; }
  .pe-transport { width: 100%; }
  .pe-transport { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pe-transport .pe-btn { padding: 8px 4px; white-space: nowrap; }
  .pe-transport .pe-play { order: -1; grid-column: 1 / -1; }
  .pe-speed { gap: 6px; }
  .pe-speed .pe-btn { padding: 8px 6px; flex: 1 1 auto; }
  .pe-btn.pe-play { min-width: 0; }
  .pe-timeline { flex-basis: 100%; }
}

.pe-predict { padding: 10px; border: 2px dashed var(--pe-accent); border-radius: 10px; background: var(--pe-panel); }
.pe-predict[hidden] { display: none; }
.pe-q { margin: 0 0 8px; }
.pe-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pe-choice { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 6px; text-align: center; background: var(--pe-bg); }
.pe-choice .pe-thumb { height: 58px; }
.pe-choice[aria-pressed="true"] { border-color: var(--pe-accent); box-shadow: 0 0 0 2px var(--pe-accent) inset; }
.pe-choice.pe-right { border-color: var(--pe-ok); box-shadow: 0 0 0 2px var(--pe-ok) inset; }
.pe-feedback { margin: 8px 0 0; min-height: 1.2em; }
.pe-feedback:empty { display: none; }
.pe-try { margin-top: 8px; }
.pe-feedback.pe-ok { color: var(--pe-ok); font-weight: 600; }
.pe-feedback.pe-no { color: var(--pe-no); font-weight: 600; }

/* free body diagram */
.pe-fbd { color: var(--pe-fg); max-width: 100%; }
.pe-fbd-svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto;
  background: var(--pe-bg); border: 1px solid var(--pe-border); border-radius: 10px; }
.pe-fbd-svg text { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  paint-order: stroke; stroke: var(--pe-bg); stroke-width: 4px; stroke-linejoin: round; }
.pe-fbd-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pe-fbd-list li { --pe-c: var(--pe-fg); padding: 4px 10px; border-radius: 8px; background: var(--pe-panel);
  border-left: 5px solid var(--pe-c); font-variant-numeric: tabular-nums; }
.pe-fbd-list li.pe-fbd-net { font-weight: 700; }