Time-skip callout

Time-skip callout

TimeSkipCalloutHandler · .tsc-callout · handlers/time-skip/time-skip-callout.css

Iteration 1. A centred callout overlapping the top of the time-control bar that announces a deliberate large simulation time jump — “N hours have passed” — so the student reads the before/after scene change against the elapsed model time. The card matches the time-control bar's chrome — cream --color-surface, the bar's --widget-bar-border (2 px) and --widget-bar-radius (6 px) corners — and overlaps the bar's top edge (no beak); the quantity is Space Grotesk Bold, the remainder Space Grotesk Medium, beside an outline clock glyph. Live element wired in main.js; driven with the time-skip-show / time-skip-progress / time-skip-clear document events (auto-clears on orchestrator-step-changed). Two lifecycle modes: wall-clock (legacy — auto-dismisses 10 s after showing, the green bar counts the timeout down, and any time-control touch dismisses early) and timeline-driven (the production wiring for wait/time-skip steps — the green bar fills in lockstep with the scrubber, the card dismisses when the cursor reaches the clip end, holds through pause, and revives at the matching fill when the student scrubs back below the end; clicking the card still dismisses). This iteration overlaps the bar's top edge, centred; pinning it to the jump moment is a later iteration.

States

12 hours have passed

9s / 15s
In context — overlapping the top of the time control

12 hours have passed

Default · split label (lead bold, rest regular)

8 hours have passed

Shorter quantity

Overnight

Bare text · qualitative (no bold)