/* Unit 4 page-level styles: plots, fallback sim, games. Uses site tokens when present. */
.u4-plots { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 900px) { .u4-plots { grid-template-columns: 1fr 1fr; } }
.u4-plot { margin: 0; padding: 8px; border: 1px solid var(--line, rgba(128,128,128,.35)); border-radius: 10px; min-width: 0; }
.u4-plot canvas { display: block; width: 100%; }
.u4-plot figcaption { font-size: .95em; }
.u4-note, .u4-plot-extra { font-size: .9em; opacity: .85; }
.u4-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: .85em; margin: 4px 0; }
.u4-legend i { display: inline-block; width: 14px; height: 4px; margin-right: 5px; vertical-align: middle; border-radius: 2px; }
.u4-readout { font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; font-size: .95em; }
.u4-readout b { font-weight: 600; }
.u4-check { font-weight: 600; }

/* fallback sim (only used until common/engine.js is present) */
.u4-sim { border: 1px solid var(--line, rgba(128,128,128,.35)); border-radius: 12px; padding: 12px; }
.u4-sim-title { font-weight: 700; margin-bottom: 6px; }
.u4-scene { display: block; width: 100%; border-radius: 8px; background: var(--panel, rgba(128,128,128,.06)); }
.u4-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; align-items: center; }
.u4-sim button, .u4-game button { min-height: 44px; min-width: 44px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line, rgba(128,128,128,.5)); background: var(--btn, rgba(128,128,128,.12)); color: inherit; font: inherit; cursor: pointer; }
.u4-sim button[aria-pressed="true"] { outline: 2px solid var(--v, #18803f); }
.u4-speeds { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.u4-scrub { display: flex; gap: 8px; align-items: center; }
.u4-scrub input { flex: 1; min-width: 0; }
.u4-params { display: grid; gap: 6px; }
.u4-param { display: grid; grid-template-columns: 1fr 88px; gap: 4px 8px; align-items: center; }
.u4-param label { grid-column: 1 / -1; font-size: .95em; }
.u4-param input[type=range] { width: 100%; min-height: 32px; }
.u4-param input[type=number], .u4-game input[type=number] { width: 100%; min-height: 40px; font: inherit; box-sizing: border-box; }
.u4-predict { border-left: 4px solid var(--a, #c25e00); padding: 6px 10px; margin: 8px 0; }
.u4-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.u4-right { outline: 3px solid #18a050 !important; }
.u4-wrong { outline: 3px solid #d03030 !important; }
.u4-mcq-fb { font-weight: 600; }

/* games */
.u4-game { border: 1px solid var(--line, rgba(128,128,128,.35)); border-radius: 12px; padding: 14px; margin: 18px 0; }
.u4-game canvas { display: block; width: 100%; border-radius: 8px; background: var(--panel, rgba(128,128,128,.06)); }
.u4-hud { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; margin: 6px 0; }
.u4-msg { min-height: 1.6em; font-weight: 600; }
.u4-msg.good { color: #18a050; } .u4-msg.bad { color: #d03030; }
.u4-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; }
.u4-bars { display: flex; align-items: flex-end; gap: 6px; height: 160px; border-bottom: 2px solid currentColor; position: relative; }
.u4-topics { list-style: none; padding: 0; display: grid; gap: 10px; }
.u4-topics li { border: 1px solid var(--line, rgba(128,128,128,.35)); border-radius: 10px; padding: 10px 12px; }

/* inline trap callouts (TRAPS_FRQ_SPEC) */
.callout.trap { background: var(--warnbg); border-left: 5px solid var(--warn); }

/* picture-first idea figures */
.u4-fig { display: block; max-width: 100%; height: auto; margin: 0.5rem auto; }
.u4-fig text { fill: currentColor; font: 14px system-ui, sans-serif; }