/* Doorway About Time — activity styles.
   1em = 1/50th of activity width (set by doorway.js onResize).
   Flash stage: 800×600. CSS container: 800×450 (y-scale 0.75).
   Coordinate formulae:
     css_left_em  = flash_x / 16
     css_top_em   = flash_y × 0.75 / 16
     css_width_em = flash_w / 16
*/

/* =========================================================
   Welcome screen — flow mode chrome (shared header + footer)
   ========================================================= */

.at-welcome {
    width: 100%;
}

/* Welcome illustration wraps the alarm clock. In flow mode the parent is
   .dw-welcome-body which centres the trio vertically; the illustration uses
   max-width/max-height to scale down on small viewports without distorting
   the clock's aspect ratio. */
body.dw-screen-welcome .at-welcome .welcome_image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 22em;
    max-height: 60vh;
    margin: var(--dw-space-default) auto;
}

/* Clock container on welcome screen.
   alarmClockBack.png is 387×432 (aspect 0.896:1).
   Sized at 15.3em (= 18em × 0.85) so the clock occupies ~half the stage,
   matching the Flash welcome proportions. */
.at-welcome-clock-wrap {
    position: relative;
    height: 15.3em;
    max-height: 100%;
    width: calc(15.3em * 387 / 432);  /* maintain alarm clock aspect ratio */
    flex-shrink: 0;
}

.at-welcome-clock-img {
    width: 100%;
    height: 100%;
    object-fit: fill;   /* same aspect ratio as image — no distortion */
    display: block;
}

/* clockFrontPage.png (286×284) overlaid on the green circle of alarmClockBack.png.
   Geometry is derived from pixel measurements of both assets so the face's
   pivot dot lands on the green ring's optical centre.

   Source measurements (via PIL on the PNG asset; see notes in the commit
   that introduced this rule):
     alarmClockBack.png (387×432):
       green ring bbox     y=50..427  →  centre at y=238.5 → 55.21% of image height
       green ring bbox x   x=4..381   →  centre at x=192.5 → 49.74% of image width
     clockFrontPage.png (286×284):
       dark ring bbox      y=1..282   →  ring centre at y=141.5 → 49.82% of face height
       blue pivot dot      y=132..147 →  pivot centre at y=139.5 → 49.12% of face height

   Wrap dimensions: height H = 15.3em, width = H × 387/432 (preserves alarm
   aspect so alarmClockBack renders without distortion).

   Face rendering: width:90% of wrap_w; height:auto preserves 284/286 aspect, so
     face_render_h = 90% × wrap_w × 284/286
                   = 90% × H × (387/432) × (284/286)
                   ≈ 80.05% of wrap_h.

   To place the face PIVOT on the green ring centre:
     pivot_y_in_wrap = top + (139.5/284) × face_render_h
                     = top + 0.4912 × 80.05%
                     = top + 39.31%
     target: pivot_y_in_wrap == 55.21%
     therefore top = 55.21% − 39.31% = 15.90%.

   Custom properties expose each measurement so the geometry can be tweaked
   without re-deriving the maths. */
.at-welcome-clock-wrap {
    /* Asset measurements — change these if the source PNGs are re-cropped. */
    --at-ring-centre-x-pct: 49.74;   /* green ring centre x / wrap_w */
    --at-ring-centre-y-pct: 55.21;   /* green ring centre y / wrap_h */
    /* Use the face's dark-ring centre (49.82% of face height) rather than the
       blue pivot dot (49.12%) so the face sits geometrically centred inside
       the green ring. The pivot is ~0.7% below the face's ring centre, so
       anchoring on the pivot pushes the face slightly low; nudging the anchor
       down to the ring centre lifts the face by the same amount. */
    --at-face-pivot-y-pct: 49.82;    /* face ring centre y / face image height */

    /* Face render size as fraction of wrap. width is the input (90%); height
       follows the face image's 284/286 aspect and the wrap's 387/432 aspect:
       face_h/wrap_h = face_w/wrap_w × (284/286) × (wrap_w/wrap_h)
                     = 0.9 × 0.9930 × (387/432)
                     ≈ 0.8005. */
    --at-face-w-pct: 90;
    --at-face-h-pct: 80.05;
}

/* Descendant selector (specificity 0,2,0) beats doorway.css's
   `div.welcome_image img` (specificity 0,1,1) which would otherwise force
   width:100%; height:100% on the face overlay. */
.at-welcome-clock-wrap .at-welcome-face-img {
    position: absolute;
    width: calc(var(--at-face-w-pct) * 1%);
    height: auto;
    /* top = ring_centre_y − pivot_y_in_face × face_h
       (all in % of wrap; pivot_y_in_face is a fraction of face_h) */
    top: calc(
        (var(--at-ring-centre-y-pct) * 1%)
        - (var(--at-face-pivot-y-pct) / 100 * var(--at-face-h-pct) * 1%)
    );
    /* left = ring_centre_x − pivot_x_in_face × face_w. Face pivot x ≈ 49.65%
       of face width (clockFrontPage measurements: pivot x centre = 142/286).
       For the symmetric case 49.65 × 0.9 ≈ 44.69 → left ≈ 49.74 − 44.69 = 5.05%.
       Use simple `5%` since the value is dominated by the chosen face width
       (90%) and is visually indistinguishable. */
    left: 5%;
    transform: none;
    pointer-events: none;
}

/* =========================================================
   Options screen
   ========================================================= */

.at-options {
    width: 100%;
    box-sizing: border-box;
}

/* Legacy aspect-locked layout (un-migrated screens / browsers) keeps the
   internal scroll context so the form fits the 16:9 letterbox. In flow mode
   the page-level <html> handles scroll and the page-level sticky footer
   relies on no intermediate scroll context being created here. */
body.dw-aspect-locked .at-options {
    height: 100%;
    overflow-y: auto;
}

.at-options.hidden_panel {
    display: none;
}

.at-options-inner {
    display: flex;
    flex-direction: column;
    gap: var(--dw-space-narrow);
    padding: var(--dw-space-default) var(--dw-space-loose);
    box-sizing: border-box;
    width: 100%;
}

/* Activity group: 3 thumbnails + buttons in a row that wraps to 2 or 1
   columns when the viewport can't fit all three side-by-side. */
.at-activity-choices {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.8em var(--dw-space-loose);
    justify-content: center;
    margin-bottom: var(--dw-space-snug);
}

.at-activity-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dw-space-snug);
    flex: 0 1 11em;
    min-width: 0;
}

.at-activity-thumb {
    width: 11em;
    height: 6em;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.at-activity-thumb img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Time Passing: scene strip pinned to the TOP of the thumb, analogue
   clock face overlaid roughly centred. The blank strip below the scene
   is left free so the small digital alarm-clock composite (shown when
   the digital option is on) can sit in the bottom-right without covering
   the road/house/school sprites. */
.at-activity-thumb-passing .at-thumb-base {
    position: absolute;
    left: 0;
    right: 0;
    top: 0.2em;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: fill;
}

.at-activity-thumb-passing .at-thumb-passing-clock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 5.6em;
    max-width: none;
    max-height: none;
}

/* Small digital alarm-clock badge in the bottom-right of the Time-Passing
   thumb — mirrors the "digital clock?" checkbox so the thumbnail previews
   which clock kind the activity will use. Sprite is digitalAlarmClock.png
   (383×186); at height 2em the width is 2em × 383/186 ≈ 4.12em. */
.at-activity-thumb-passing .at-thumb-passing-digital {
    position: absolute;
    right: 0.3em;
    bottom: 0.3em;
    width: auto;
    height: 2em;
    max-width: none;
    max-height: none;
    display: none;
    transform: translate(0.25em, -0.40em) scale(0.86);
    transform-origin: bottom right;
}

.at-activity-thumb-passing.at-thumb-passing-digital-on .at-thumb-passing-digital {
    display: block;
}

/* Setting the Clock thumb: two mutually-exclusive variants swapped by
   the .at-thumb-alarm-digital class on the parent .at-activity-thumb-
   alarm. Analogue variant is the composite below (chassis + face +
   hands); digital variant is .at-thumb-alarm-band. Matches the WT
   thumb's variant-swap pattern. */
/* Analogue-variant wrapper: sized by its chassis child (height:100%,
   width auto), centred inside the 11em × 6em thumb box. */
.at-activity-thumb-alarm .at-thumb-alarm-analogue {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    max-width: none;
    max-height: none;
}

.at-activity-thumb-alarm .at-thumb-alarm-chassis {
    height: 100%;
    width: auto;
    display: block;
    max-width: none;
    max-height: none;
}

/* alarmClockBack.png is 387×432 — the clock recess centres at
   (50%, 56%) of the chassis (matches the activity-screen alarm-wrap
   which sizes its face SVG so the centre lands at 56%). Face SVG at
   88.8% of the wrapper width fills the recess. */
.at-activity-thumb-alarm .at-thumb-face {
    position: absolute;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);
    width: 88.8%;
    height: auto;
    max-width: none;
    max-height: none;
    pointer-events: none;
}

/* Hand sizing is derived from the activity-screen values (hour-hand
   26×92 svg at 0.85 scale, chassis 19em × 21.2em):
     hour width  = 1.534em × 0.85 / 19em  ≈ 6.86%
     hour height = 5.427em × 0.85 / 21.2  ≈ 21.76%
     min  width  = 1.239em × 0.85 / 19em  ≈ 5.54%
     min  height = 7.315em × 0.85 / 21.2  ≈ 29.33%
   Pivot at the clock centre (50%, 56%) matches the face position; the
   rotate applies around each hand's bottom-centre so the fixed 10:10
   pose (hour → 10, minute → 2) reads naturally. */
.at-activity-thumb-alarm .at-thumb-hand,
.at-activity-thumb-alarm .at-thumb-centre {
    position: absolute;
    max-width: none;
    max-height: none;
    pointer-events: none;
}

.at-activity-thumb-alarm .at-thumb-hour {
    width:  6.86%;
    height: 21.76%;
    left:   calc(50% - 3.43%);
    top:    calc(56% - 21.76%);
    transform-origin: 50% 100%;
    transform: rotate(-60deg);
}

.at-activity-thumb-alarm .at-thumb-minute {
    width:  5.54%;
    height: 29.33%;
    left:   calc(50% - 2.77%);
    top:    calc(56% - 29.33%);
    transform-origin: 50% 100%;
    transform: rotate(60deg);
}

/* Centre cap width 1.42em / 19em ≈ 7.47% of chassis. */
.at-activity-thumb-alarm .at-thumb-centre {
    width:  7.47%;
    height: 7.47%;
    left:   calc(50% - 3.735%);
    top:    calc(56% - 3.735%);
}

.at-activity-thumb-alarm .at-thumb-alarm-band {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Scale composed with the centring translate so the LCD stays
       centred inside the 11em x 6em thumb box. Parent
       .at-activity-thumb overflow: hidden crops any overspill. */
    transform: translate(-50%, -50%) scale(0.72);
    width: auto;
    height: 100%;
    max-width: none;
    max-height: none;
}

/* Analogue state (default, no .at-thumb-alarm-digital class): show the
   composite green-alarm-with-clock-face; hide the digital LCD. */
.at-activity-thumb-alarm:not(.at-thumb-alarm-digital) .at-thumb-alarm-band {
    display: none;
}
/* Digital state: show the standalone digital alarm clock; hide the
   analogue composite. */
.at-activity-thumb-alarm.at-thumb-alarm-digital .at-thumb-alarm-analogue {
    display: none;
}

/* What time is it?: full bracelet watch shown prominently — let it use
   the full thumb height rather than the tiny crop. Analogue and digital
   variants are mutually exclusive based on the "digital clock?" toggle. */
.at-activity-thumb-watch:not(.at-thumb-watch-digital-on) .at-thumb-watch-digital {
    display: none;
}
.at-activity-thumb-watch.at-thumb-watch-digital-on .at-thumb-watch-analogue {
    display: none;
}

/* Analogue-variant wrapper: sized by its chassis child (height:100%,
   width auto), centred inside the 11em × 6em thumb box. */
.at-activity-thumb-watch .at-thumb-watch-analogue {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;
    display: block;
}

.at-activity-thumb-watch .at-thumb-watch-chassis {
    height: 100%;
    width: auto;
    display: block;
    max-width: none;
    max-height: none;
}

/* Square face overlay — same positioning fractions as the activity-
   screen .at-watch-clock-overlay (watchBack.png bezel centres at
   (48.04%, 49.5%); overlay height 60.5% × aspect 1:1). Percentages
   here resolve against the wrapper, which is chassis-sized. */
.at-activity-thumb-watch .at-thumb-watch-face-overlay {
    position: absolute;
    height: 60.5%;
    aspect-ratio: 1 / 1;
    left: 48.04%;
    top: 49.5%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    pointer-events: none;
}

.at-activity-thumb-watch .at-thumb-face {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    top: 0.35%;
    display: block;
    max-width: none;
    max-height: none;
}

/* Hand sizing at 0.85 scale, percentages against the face-overlay
   square. Static 10:10 pose. */
.at-activity-thumb-watch .at-thumb-hand,
.at-activity-thumb-watch .at-thumb-centre {
    position: absolute;
    max-width: none;
    max-height: none;
}

.at-activity-thumb-watch .at-thumb-hour {
    width:  calc(9.9% * 0.85);
    height: calc(35%  * 0.85);
    left:   calc(50% - 9.9%  * 0.85 / 2);
    top:    calc(50% - 35%   * 0.85);
    transform-origin: 50% 100%;
    transform: rotate(-60deg);
}

.at-activity-thumb-watch .at-thumb-minute {
    width:  calc(7.96% * 0.85);
    height: calc(47%   * 0.85);
    left:   calc(50% - 7.96% * 0.85 / 2);
    top:    calc(50% - 47%   * 0.85);
    transform-origin: 50% 100%;
    transform: rotate(60deg);
}

.at-activity-thumb-watch .at-thumb-centre {
    width:  5%;
    height: 5%;
    left:   calc(50% - 2.5%);
    top:    calc(50% - 2.5%);
}
/* Digital-variant wrapper: chassis img + mint-green cover rect + live
   digit text. Sized by the chassis child; centred + scaled inside the
   thumb. Parent .at-activity-thumb overflow: hidden crops the up-scaled
   composite inside the 11em × 6em box. */
.at-activity-thumb-watch .at-thumb-watch-digital {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    transform: translate(-50%, -50%) scale(1.70);
    display: block;
}

.at-activity-thumb-watch .at-thumb-watch-digital-img {
    height: 100%;
    width: auto;
    display: block;
    max-width: none;
    max-height: none;
}

/* Mint-green cover that hides the baked-in "12:00" on digitalWatch.png.
   The text layer below is positioned independently, so the cover can be
   trimmed to the exact baked-digit region without dragging the visible
   time along with it. */
.at-activity-thumb-watch .at-thumb-watch-lcd-cover {
    position: absolute;
    left:   16.0%;
    top:    43.5%;
    width:  68.0%;
    height: 14.9%;
    border-radius: 0.12em;
    background: #d8fdeb;
    pointer-events: none;
}

/* Live "12:00" text over the cover. No padding — the text container
   hugs the glyphs so its width/height reflect the digit run itself. */
.at-activity-thumb-watch .at-thumb-watch-lcd-text {
    position: absolute;
    left: 11.5%;
    top:  45.4%;
    padding: 0;
    margin: 0;
    font-family: 'LEDFont', 'Digital_SF', monospace;
    font-size: 0.61em;
    font-weight: 300;
    color: #000;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
}

.at-activity-thumb-watch .at-thumb-watch-lcd-text .at-dig-h,
.at-activity-thumb-watch .at-thumb-watch-lcd-text .at-dig-m {
    width: 1.5em;
}

.at-activity-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
}

/* The whole label is the click target — thumbnail + name button stacked.
   Cursor and layout cues hint that the entire region is clickable.
   Padding + transparent border in the unselected state reserve the space
   that the selected state's coloured border occupies, so the card layout
   doesn't shift when selection changes. */
.at-activity-choice .at-activity-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dw-space-snug);
    width: 100%;
    cursor: pointer;
    padding: 0.25em var(--dw-space-snug);
    border: 0.15em solid transparent;
    border-radius: 0.4em;
    box-sizing: border-box;
    background: transparent;
}

.at-activity-choice .at-activity-name {
    width: 100%;
    text-align: center;
    font-size: 0.9em;
    padding: var(--dw-space-snug) var(--dw-space-narrow);
}

/* Selected state — match the odd-and-even sub-activity card convention:
   green background tint + stronger green border on the whole card region,
   plus a brighter "chartreuse" tint on the name button (the same shared
   tint applied by `input:checked + label.user_options_radio` inside
   `div.user_options`, which this form isn't — so we reproduce it locally).
   Together these make it obvious which sub-activity is currently picked. */
.at-activity-choice input[type="radio"]:checked + .at-activity-label {
    background: #b6f0a9;
    border-color: #2a7;
}

.at-activity-choice input[type="radio"]:checked + .at-activity-label .at-activity-name {
    background-color: chartreuse;
}

/* Keyboard focus ring on the label when the (visually hidden) radio is
   focused — mirrors the browser's native focus indicator for the card. */
.at-activity-choice input[type="radio"]:focus-visible + .at-activity-label {
    outline: 0.15em solid #1976d2;
    outline-offset: 0.1em;
}

/* digital clock? checkbox row */
.at-digital-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dw-space-narrow);
    margin-top: var(--dw-space-tight);
    font-size: 1em;
}


/* Strip the default browser border from inner fieldsets inside the about-time
   options form. The shared `form.user_options fieldset.options_group fieldset`
   rule doesn't match because this form is `.at-options`, not `.user_options`.
   Without this, the switches fieldset (sr-only legend, group-only) renders a
   redundant outline inside the .dw-scan-subpanel box. */
form.at-options fieldset.options_group fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Hide the underlying <select> inside the scan-delay spinner — the visible
   control is the +/- buttons + .spinner_display. (Other activities get this
   from shared rule `div.user_options select { display: none }`; about-time's
   form does not carry the `user_options` class so we scope it directly.)
   The voice-picker select is exempted: its parent .dw_voice_picker sits
   inside .at-options and needs the native <select> visible in the middle
   of its [<] select [>] spinner row. The shared unhide rule (scoped to
   div.user_options) doesn't apply here, so the exemption is local. */
.at-options select:not(.dw_voice_select) {
    display: none;
}

/* =========================================================
   Activity screen — shared container
   ========================================================= */

.at-activity-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.at-activity-screen.hidden_panel {
    display: none;
}

/* Mode panels — each fills the full screen area */
.at-mode {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.at-mode.hidden_panel {
    display: none;
}

/* =========================================================
   Shared: clock hands
   ========================================================= */

/* Clock hand base rule. The rotation is applied by JS via inline
   style.transform, so any CSS transform here would be overwritten —
   per-clock scale knob (--analog-hand-scale) is applied via
   width/height/left/top calc()s in the per-clock rules below, not via
   a transform. Default 1 = no change. */
.at-hand {
    position: absolute;
    transform-origin: 50% 100%;
    --analog-hand-scale: 1;
}

/* =========================================================
   Mode 1: Time Passing
   Flash layout (800×600 → 800×450):
     scene:          x=0,   y=0,   w=800, h=272  → 50em × 12.75em base;
                    bumped to 14em so the clock face overlaps further
                    into the scene as in Flash.
     clock face:     x=232, y=196, w=324, h=350  → 14.5em, 9.19em, 20.25em, 16.41em
     left buttons:   x=14,  y=321  → left=0.88em, top adj-col starts 15.05em
     right buttons:  x=600, y=321  → left=37.5em
     bottom bar:     y=554         → top=26em
     digital (top-right): x=637, y=8 → left=39.8em, top=0.38em
   ========================================================= */

/* @property declarations register the scene's CSS custom properties as
   <number> / <percentage>, which lets the browser animate them through
   `transition`. Without this, changing each alpha snaps; with it the
   transition cross-fades between time steps. Used together with the
   `transition` rule on the element below. */
@property --at-dim-alpha {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}
@property --at-night-alpha {
    syntax: '<number>';
    initial-value: 0;
    inherits: true;
}
@property --at-sun-x {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
}
@property --at-sun-y {
    syntax: '<percentage>';
    initial-value: 100%;
    inherits: true;
}
/* Registered so the bus rotation and inner scale interpolate smoothly
   alongside its x/y — unregistered custom properties behave as plain
   tokens and snap instantly. */
@property --at-bus-rot {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --at-bus-scale {
    syntax: '<number>';
    initial-value: 1;
    inherits: false;
}
/* Time-Passing scene — Flash overlay model.
   --at-dim-alpha:   0 = bright day, 1 = full evening dim (grey wash).
   --at-night-alpha: 0 = no night image, 1 = full night silhouette + moon.
   --at-sun-x:       0..100% — sun horizontal position along arc.
   --at-sun-y:       0..100% — sun vertical position (0 = peak, 100 = horizon).
   The scene strip takes the top 14em of the activity area. Below it is a
   neutral white background; the clock and adj buttons sit on that band
   with the clock's top half overlapping into the scene. */
.at-time-passing { background: #ffffff; }

/* Nav-header contrast against the Time Passing day/night scene.
   The shared #dwNavigationHeader pills carry a white border and inline
   grey/black glyphs — low-contrast against the sky at every point of
   the cycle. When Time Passing is the visible mode, force the pill
   contents white and composite via mix-blend-mode: difference so both
   border and glyph track the pixel underneath.
   Scoped by :has() to the Time Passing screen only — the setting-clock
   and what-time-is-it screens sit on plain white where the baseline
   grey glyphs already read cleanly. */
body.at-body:has(#atTimePassing:not(.hidden_panel)) #dwNavigationHeader .teacher_button {
    mix-blend-mode: difference;
}
body.at-body:has(#atTimePassing:not(.hidden_panel)) #dwNavigationHeader .teacher_button img {
    filter: brightness(0) invert(1);
}

/* Nav-header position on About Time screens. Shifted 2.6em right from
   its shared default to clear the alarm-clock wrap; alarm nudges live
   on .at-alarm-wrap's own transform rule below. */
body.at-body #dwNavigationHeader {
    top:  0;
    left: 2.6em;
}

.at-scene {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--at-scene-h, 14.75) * 1em);
    overflow: hidden;
    /* Isolate the scene's stacking context so the internal z-index
       cascade (the Phase-2 bus climbs to z 8) can't leak out and
       cover sibling widgets like the clock face + hands. */
    isolation: isolate;
    background: transparent;
    --at-dim-alpha: 0;
    --at-night-alpha: 0;
    --at-sun-x: 50%;
    --at-sun-y: 100%;
    /* Composite backdrop rectangle. Numbers are in the port's
       800×450 reference frame (1em = 16px at baseline); CSS below
       divides by 16 so `.at-composite` scales with the scene when
       the viewport resizes. Centred horizontally: with w=737 the
       left+right letterbox gaps are each (800-737)/2 = 31.5. */
    --at-composite-x: 31.5;
    --at-composite-y: 0.5;
    --at-composite-w: 737;
    --at-composite-h: 243.5;
    /* Night silhouette overlay — sized independently from the composite.
       Height derives from width via aspect-ratio on .at-night-overlay,
       so the 664×272 PNG stays un-distorted. Shifted with the composite
       so silhouette + moon land at the same relative position. */
    --at-night-x: 28.75;
    --at-night-y: -50.5;
    --at-night-w: 743;
    /* Bus-path affine. Path dx is a percent of scene width; tracked
       left with the composite centring shift so the bus stays over
       the composite road. */
    --at-bus-path-dx: 4.65;
    --at-bus-path-dy: -6.1;
    --at-bus-path-scale-x: 0.8;
    --at-bus-path-scale-y: 1.22;
    /* Pupils-crowd affine. Tracked left with the composite so the
       crowd stays over the school forecourt. */
    --at-pupil-path-dx: -2.95;
    --at-pupil-path-dy: 2.7;
    /* Break/lunch (pupils-MC frame 6) extra crowd nudge. */
    --at-pupils-break-dx: 0.4;
    --at-pupils-break-dy: 3.4;
    /* Football sprite position offsets. Playground .at-football uses
       `right: 21.5% - dx*1%` (positive dx pushes right); after-school
       .at-football-home uses `left: 19% + dx*1%` (positive dx also
       pushes right). Both dx values shifted by -1.25 to track the
       composite centring shift. */
    --at-football-dx: -2.75;
    --at-football-dy: -6.1;
    --at-football-home-dx: 1.75;
    --at-football-home-dy: -4.2;
    /* Sun arc endpoints (start = sunrise 04:30; end = sunset 21:30).
       peak-y is the sun's y at noon; horizon-y is where it dips to. */
    --at-sun-start-x:    -6;
    --at-sun-end-x:     117;
    --at-sun-peak-y:      9;
    --at-sun-horizon-y: 58.5;
    /* Cross-fade alphas so each +1 minute click (or Play tick) is smooth. */
    transition:
        --at-dim-alpha 0.5s linear,
        --at-night-alpha 0.5s linear,
        --at-sun-x 0.5s linear,
        --at-sun-y 0.5s linear;
}

/* Flash `sprite_168` composite, injected inline by
   about-time-composite.js. Sits above `.at-scene-base` (the port's
   sky gradient) and carries the Flash-authored buildings, cars,
   milk, teachers and football sprites at Flash-authored positions. */
.at-composite {
    position: absolute;
    left:   calc(var(--at-composite-x) * 1em / 16);
    top:    calc(var(--at-composite-y) * 1em / 16);
    width:  calc(var(--at-composite-w) * 1em / 16);
    height: calc(var(--at-composite-h) * 1em / 16);
    pointer-events: none;
    z-index: 2;
}
.at-composite > svg {
    display: block;
    width: 100%;
    height: 100%;
}
/* On/off scene rules (milk, teachers, cars, car) toggle this class on the
   composite's `<use id="X">` via setCompositeUseShown. */
.at-composite-hidden {
    visibility: hidden;
}

/* Daytime base — inline SVG sky gradient. Cropped to the composite
   rectangle so the gradient only extends where sprite_168 renders;
   above/beside/below the composite the .at-scene fallback shows. */
.at-scene-base {
    position: absolute;
    inset: auto;
    left:   calc(var(--at-composite-x) * 1em / 16);
    top:    calc(var(--at-composite-y) * 1em / 16);
    width:  calc(var(--at-composite-w) * 1em / 16);
    height: calc(var(--at-composite-h) * 1em / 16);
    display: block;
}

/* Night silhouette + stars share the composite's footprint so their
   silhouette and star sprinkle align with the composite terrain. Sized
   against the same --at-composite-{x,y,w,h} custom properties that
   anchor `.at-composite` itself. */
.at-night-overlay,
.at-stars {
    position: absolute;
    left:   calc(var(--at-composite-x) * 1em / 16);
    top:    calc(var(--at-composite-y) * 1em / 16);
    width:  calc(var(--at-composite-w) * 1em / 16);
    height: calc(var(--at-composite-h) * 1em / 16);
    pointer-events: none;
}

/* Crescent moon + faint silhouettes. Alpha follows Flash nightImage._alpha
   (rises late evening). PNG authored at 664×272 — height is derived from
   width via aspect-ratio so the silhouette + moon stay un-distorted at
   any --at-night-w. */
.at-night-overlay {
    left:   calc(var(--at-night-x, var(--at-composite-x)) * 1em / 16);
    top:    calc(var(--at-night-y, var(--at-composite-y)) * 1em / 16);
    width:  calc(var(--at-night-w, var(--at-composite-w)) * 1em / 16);
    aspect-ratio: 664 / 272;
    height: auto;
    opacity: var(--at-night-alpha);
}

/* Stars — small white dots across the upper 60% of the composite sky
   area. Visible only at deep night (driven by --at-night-alpha). */
.at-stars {
    height: calc(0.6 * var(--at-composite-h) * 1em / 16);
    opacity: var(--at-night-alpha);
}

.at-stars span {
    position: absolute;
    width: 0.15em;
    height: 0.15em;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0.1em rgba(255,255,255,0.6);
}

/* Star positions — fixed sprinkle across the upper sky strip. Spread
   evenly along x with vertical jitter so the constellation reads as
   scattered rather than gridlocked. */
.at-star-1  { left:  8%; top:  8%; }
.at-star-2  { left: 14%; top: 22%; }
.at-star-3  { left: 22%; top: 11%; }
.at-star-4  { left: 31%; top: 28%; }
.at-star-5  { left: 39%; top: 16%; }
.at-star-6  { left: 48%; top: 30%; }
.at-star-7  { left: 55%; top:  9%; }
.at-star-8  { left: 62%; top: 22%; }
.at-star-9  { left: 70%; top: 13%; }
.at-star-10 { left: 77%; top: 30%; }
.at-star-11 { left: 85%; top:  9%; }
.at-star-12 { left: 92%; top: 22%; }
.at-star-13 { left: 43%; top:  5%; }
.at-star-14 { left: 67%; top: 38%; }
.at-star-15 { left: 88%; top: 40%; }

/* Sun clip wrapper. Fills .at-scene (so `.at-sun`'s --at-sun-x/y stay in
   scene-percent coordinates and the existing arc tuning holds), and
   clip-paths to the composite footprint so the sun can't paint into the
   letterbox strips beside/above/below the visible sky rectangle. Insets
   derive from --at-composite-{x,y,w,h} — the same authoritative rect that
   sizes .at-scene-base, .at-composite, .at-night-overlay and .at-stars. */
.at-sun-clip {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    clip-path: inset(
        calc(var(--at-composite-y) * 1em / 16)
        calc(100% - (var(--at-composite-x) + var(--at-composite-w)) * 1em / 16)
        max(0em, var(--at-scene-h, 14.75) * 1em - (var(--at-composite-y) + var(--at-composite-h)) * 1em / 16)
        calc(var(--at-composite-x) * 1em / 16)
    );
}

/* Sun — driven by --at-sun-x / --at-sun-y for arc; fades during dim wash.
   Calibrated at 50×50px in the 800×224 strip = 3.125em × 3.125em.
   Positioned in .at-scene coordinates via the .at-sun-clip wrapper. */
.at-sun {
    position: absolute;
    width: 3.125em;
    height: 3.125em;
    left: var(--at-sun-x);
    top: var(--at-sun-y);
    transform: translate(-50%, -50%);
    opacity: calc(1 - var(--at-dim-alpha));
    pointer-events: none;
}

/* === Building / sprite placements ===
   Overlay sprites that stay in the port DOM sit between the composite
   backdrop and the dim/night overlays so the overlays darken them in
   step with the scene. */
.at-bus,
.at-pupil-child,
.at-pupil-running,
.at-skipping,
.at-football {
    position: absolute;
}

/* Bus base-sprite geometry. `.at-bus` is a 6% × 11.607% rectangle in
   the scene strip — the outer-matrix baseline size Flash's busAnim
   applies to the side-view MC. Perspective variants take their own
   intrinsic aspect at the same visual scale.
   Per-frame position (`--at-bus-x` / `--at-bus-y`), rotation
   (`--at-bus-rot`) and inner scale (`--at-bus-scale`, the busAnim
   frame's local scaleX/scaleY) ride on the transform of the visible
   sprite. All five elements share the position vars so the CSS
   transition runs smoothly across variant swaps. */
.at-bus {
    width: 6%;
    height: 11.607%;
    /* Affine transform of the whole extracted path — offsets and
       non-uniform scales applied to the path samples in CSS rather
       than edited into the JSON. Scales are unitless; dx/dy are
       numeric-percent (× 1% inline). */
    left:   calc(var(--at-bus-x) * var(--at-bus-path-scale-x, 1) + var(--at-bus-path-dx, 0) * 1%);
    bottom: calc(var(--at-bus-y) * var(--at-bus-path-scale-y, 1) + var(--at-bus-path-dy, 0) * 1%);
    transition:
        left 0.5s linear,
        bottom 0.5s linear,
        --at-bus-rot 0.5s linear,
        --at-bus-scale 0.5s linear;
}

.at-bus.at-bus-back,
.at-bus.at-bus-front {
    width: 2.875%;
    height: 11.607%;
}

.at-bus.at-bus-quarter,
.at-bus.at-bus-quarter-back {
    width: 3.125%;
    height: 12.5%;
}

/* Compose rotation × inner scale × optional horizontal flip in a single
   transform. `mirror` (Flash frames 16 and 29) and `home` (livery-2
   travel direction) both apply scaleX(-1). */
.at-bus {
    transform:
        scale(var(--at-bus-scale, 1))
        rotate(var(--at-bus-rot, 0deg));
    transform-origin: center bottom;
    z-index: 6;
}

.at-bus.at-bus-home,
.at-bus.at-bus-mirror {
    transform:
        scale(var(--at-bus-scale, 1))
        rotate(var(--at-bus-rot, 0deg))
        scaleX(-1);
}

/* Rare: raises the bus above the foreground terrain for the front-road
   phases. Reserved; not currently applied by updateBusSprites. */
.at-bus.at-bus-front-layer {
    z-index: 10;
}

/* === Scene z-index cascade ================================================
   Sprite bands (low → high):
     1  sun-clip (contains sun)            — sky arc, fades at dim
     2  composite                          — sprite_168 terrain / buildings /
                                             lit windows swap
     5  pupils / football / skipping /
        pupil-*                            — port overlay sprites
     6  bus (default `.at-bus`)            — over pupils disgorging from it
     7  dim wash overlay                   — multiply-blend darkener
     8  night overlay                      — silhouettes + moon
     9  stars                              — twinkles above the moon
    10  bus with `.at-bus-front-layer`     — Phase 2 above everything
   */
.at-pupil-child,
.at-pupil-running,
.at-skipping,
.at-football,
.at-football-home   { z-index: 5; }
.at-night-overlay   { z-index: 8; }
.at-stars           { z-index: 9; }

/* Football animation shared sizing — 33×16 native sprite frames, sized
   by height so each frame renders at its natural aspect via width:auto.
   Mirrored to match Flash's negative-x-scale placement of the footballGame
   MC in the composite. */
.at-football,
.at-football-home {
    position: absolute;
    height: 6.286%;
    width: auto;
    transform: scaleX(-1);
}

/* Playground football, break/lunch. Position nudges via
   --at-football-dx / -dy declared on .at-scene (unitless, ×1% inline;
   positive dx = right, positive dy = up). */
.at-football {
    right:  calc(21.5% - var(--at-football-dx, 0) * 1%);
    bottom: calc(36%   + var(--at-football-dy, 0) * 1%);
}

/* After-school football at home (16:15–17:15) — on the grass just below
   the tree, between the house and the driveway. Nudges via
   --at-football-home-dx / -dy (same convention as above). */
.at-football-home {
    left:   calc(19% + var(--at-football-home-dx, 0) * 1%);
    bottom: calc(54% + var(--at-football-home-dy, 0) * 1%);
}

/* Individual pupil children from Flash's `pupils` MC (spriteId=256).
   `about-time-pupils-path.js` writes `--at-pupil-x` / `--at-pupil-y`
   from the extracted per-frame timeline; `--at-pupil-scale-y` carries
   the outer-matrix vertical squash on the back-row placements.
   `.at-pupil-mirror` applies scaleX(-1) for the horizontally-flipped
   placements. Global crowd affine (--at-pupil-path-scale /
   --at-pupil-path-dx / --at-pupil-path-dy) offsets and scales the
   whole crowd without editing the JS baked data. */
/* Shared pupils-MC positioning formula. Composes:
   - per-frame extracted position (--at-pupil-x/-y)
   - global crowd affine (--at-pupil-path-scale / -dx / -dy)
   - per-element indiv nudge (--at-pupil-indiv-dx/-dy)
   - frame-scoped nudge (--at-pupils-frame-dx/-dy)
   Applied to .at-pupil-child (individual pupils) and to .at-skipping /
   .at-pupil-running (whose own <img> sits outside the pupils DOM
   container but shares the same coordinate space). */
:is(.at-pupil-child, .at-skipping, .at-pupil-running) {
    left:   calc(var(--at-pupil-x) * var(--at-pupil-path-scale, 1)
                 + (var(--at-pupil-path-dx, 0) + var(--at-pupil-indiv-dx, 0)
                    + var(--at-pupils-frame-dx, 0)) * 1%);
    bottom: calc(var(--at-pupil-y) * var(--at-pupil-path-scale, 1)
                 + (var(--at-pupil-path-dy, 0) + var(--at-pupil-indiv-dy, 0)
                    + var(--at-pupils-frame-dy, 0)) * 1%);
    transform-origin: center bottom;
}
.at-pupil-child { transform: scaleY(var(--at-pupil-scale-y, 1)); }
.at-pupil-child.at-pupil-mirror {
    transform: scaleX(-1) scaleY(var(--at-pupil-scale-y, 1));
}
/* Frame-6-only extra crowd nudge (playground break/lunch scene). Scoped
   via data-pupils-frame written by applyPupilsChildren. */
.at-scene[data-pupils-frame="6"] :is(.at-pupil-child, .at-skipping, .at-pupil-running) {
    --at-pupils-frame-dx: var(--at-pupils-break-dx, 0);
    --at-pupils-frame-dy: var(--at-pupils-break-dy, 0);
}

/* Per-pupil individual nudges. Composed with the global crowd +
   frame offsets in .at-pupil-child / .at-skipping / .at-pupil-running
   via --at-pupil-indiv-dx/-dy. */
#atPupil3       { --at-pupil-indiv-dy: 0.1; }
#atPupil4       { --at-pupil-indiv-dx: 0.1; }
#atPupil7       { --at-pupil-indiv-dx: 0.3; }
#atSkipping     { --at-pupil-indiv-dx: 0.5; --at-pupil-indiv-dy: -0.3; }
#atPupilRunning { --at-pupil-indiv-dx: 1.2; }

/* Per-pupil intrinsic size in the scene. Widths / heights are the
   Flash shape bounds (see extract_pupils_mc.py header) rendered at
   the composite's visual scale (composite spans 92% of scene width,
   so each shape's native px maps to (native_px / 800) × 92% ×
   composite-height-boost to keep pupils legible against the
   building at the port's 236px scene height). */
.at-pupil-1 { width: 0.6%; height: 5.5%; }   /* char 124, shape 123, 4.15×13.55 */
.at-pupil-2 { width: 0.6%; height: 5.1%; }   /* char 126, shape 125, 4.15×12.5 */
.at-pupil-3 { width: 0.6%; height: 5.1%; }   /* char 128, shape 127, 4.15×12.5 */
.at-pupil-4 { width: 0.5%; height: 4.7%; }   /* char 136, shape 135, 3.35×11.4 */
.at-pupil-6 { width: 0.45%; height: 5.1%; }  /* char 130, shape 129, 3.05×12.5 */
.at-pupil-7 { width: 0.45%; height: 5.6%; }  /* char 132, shape 131, 3.05×13.75 */
.at-pupil-8 { width: 0.45%; height: 4.9%; }  /* char 134, shape 133, 3.05×11.95 */

/* Skipping trio + rope (char 255, 8-frame sprite) + running pupil
   (char 252, 87-frame sprite) intrinsic sizes. Positioning inherited
   from the shared `:is(.at-pupil-child, …)` rule above. */
.at-skipping      { width: 3.875%; height: 6.5%; }
.at-pupil-running { width: 4.7%; height: 6.15%; }

.at-wt-face-svg {
    --analog-ring-outer-px: 142;
    --analog-ring-mid-px:   148;
    --analog-ring-inner-px: 126;
}

/* Digital clock composite (top-right of Time Passing screen). Uses the
   shared .at-digital-band structure (digitalAlarmClock.png bezel + white
   LCD inset). Combined selector wins the cascade over the standalone
   .at-digital-band block (defined later in the file) that centres the
   band over the SC clock face. */
.at-digital-band.at-digital-tp {
    position: absolute;
    top:   calc(0.3em  + var(--at-tp-digital-dy, 0) * 1em);
    right: calc(0.65em - var(--at-tp-digital-dx, -1.05) * 1em);
    left: auto;
    transform: none;
    width: 5.5em;
    height: calc(5.5em * 186 / 383);   /* preserve sprite aspect ratio (383×186) */
    z-index: 5;
}

/* Compact LCD text for the TP badge — the shared inset uses font-size:2.8em
   to fill the tutorial-sized SC band. */
.at-digital-band.at-digital-tp .at-digital-band-inset {
    font-size: 1.2em;
    padding: 0.05em var(--dw-space-narrow);
    width: 3.6em;
    height: 1.2em;
    min-width: 0;
}

/* Analogue clock face — Time Passing.
   Inline SVG (viewBox 300×379, face circle at cy=240, r=137) matches the
   Setting-the-Clock / welcome aesthetic. The viewBox keeps a 103px
   transparent strip at the top so existing positioning maths still works:
   at width=20em=320px (scale 1.067), rendered SVG height = 379×1.067 ≈ 404px,
   transparent strip ≈ 110px. Container height = 404-110 = 294px = 18.4em
   clips exactly to the visible face circle. Container top=9em → bottom =
   9+18.4 = 27.4em (≤ 28.1em activity height ✓). SVG positioned at
   top: -6.87em (-110px) so the visible circle top aligns with the
   container top. */
.at-clock-tp {
    position: absolute;
    left: 14.5em;
    top: 6.48em;
    width: 20em;
    height: 18.94em;   /* matches SVG height (19.07em × 284/286) so the face isn't clipped top/bottom */
    overflow: hidden;
    /* Face + hands + centre-cap all wired to scale together via this
       knob. Container box dimensions stay constant; the SVG scales
       around its centre so the visible clock stays centred in the wrap. */
    --analog-face-scale: 0.85;
}

/* Time-as-words label under the clock — anchored at activity centre,
   transform-centred so it tracks the clock regardless of scale. */
.at-tp-time-text {
    position: absolute;
    left: 49%;       /* matches clock-tp visual centre (clock-tp at left:14.5em width:20em → centre 24.5em on a 50em stage ≈ 49%) */
    top: 20em;
    width: 20em;
    transform: translateX(-50%);
    text-align: center;
    font-family: "Jotter Primary", sans-serif;
    font-size: 1.3em;
    line-height: 1.2;
    color: #0e1830;
    z-index: 999;
    /* Read-only label — the 20em × 1.3em-scaled box extends past the
       clock's right edge into the mouth-button hit region, so opt out of
       pointer events so hover/click passes through to the mouth. */
    pointer-events: none;
}

/* New production face SVG (pictures/clock-face.svg, viewBox 0 0 286 284,
   face circle centred at cx=143 cy=142 with no transparent padding). The
   container is 20em × 18.4em; we render the SVG at width:19.07em so the
   visible face diameter (~18.27em) matches the previous inline SVG, then
   position it so the clock centre lands at (50%, 50%) of the container —
   that keeps the existing .at-clock-tp .at-hour-hand / .at-minute-hand
   pivot CSS (50%, 50% transform-origin via top:50%-H, left:50%-W/2,
   transform-origin:50% 100%) unchanged and pixel-correct.

   Maths:
     SVG width  = 19.07em (= 20em × 286/300)
     SVG height = 19.07em × 284/286 = 18.94em
     clock cx in container = 50% × 19.07em + left = 9.535em + left
     clock cy in container = 50% × 18.94em + top  = 9.47em  + top
   To hit container (50%, 50%) = (10em, 9.2em):
     left = 10em   − 9.535em = 0.465em
     top  =  9.2em −  9.47em = −0.27em
*/
.at-clock-tp .at-tp-clock-face {
    position: absolute;
    width: 19.07em;
    height: auto;
    left: 0.465em;     /* container is now SVG-height tall, so no vertical offset needed (top:0). */
    top: 0;
    display: block;
    transform: scale(var(--analog-face-scale, 1));
    transform-origin: 50% 50%;
}

/* Scale: 0.0667em/px; SVG pivot (cx=150, cy=240) maps to (50%, ~50%) of the
   clipped container. width/height/offsets are multiplied by the shared
   --analog-hand-scale knob (default 1 = no change) so the user can shrink
   all three clocks' hands from one place — see shared block above. */
.at-clock-tp .at-hour-hand {
    width:  calc(1.73em * var(--analog-hand-scale));   /* 26px × 0.0667 */
    height: calc(6.13em * var(--analog-hand-scale));   /* 92px × 0.0667 */
    left:   calc(50% - 0.865em * var(--analog-hand-scale));
    top:    calc(50% - 6.13em  * var(--analog-hand-scale));
}

.at-clock-tp .at-minute-hand {
    width:  calc(1.40em * var(--analog-hand-scale));   /* 21px × 0.0667 */
    height: calc(8.27em * var(--analog-hand-scale));   /* 124px × 0.0667 */
    left:   calc(50% - 0.70em * var(--analog-hand-scale));
    top:    calc(50% - 8.27em * var(--analog-hand-scale));
}

/* SVG hand sprites (curved leaf) get a 0.85 correction to match the
   intended visual size, further multiplied by the 0.85 face-scale
   shrink applied on `.at-clock-tp` so the hands scale in lock-step
   with the face. */
.at-clock-tp .at-hand {
    --analog-hand-scale: 0.7225;   /* 0.85 (SVG correction) × 0.85 (face shrink) */
}

/* Centre cap: blue dot stacked on top of the hands to mask where the hand
   bases meet at the pivot. 24-unit SVG × 0.0667em/unit = 1.60em wide.
   Shrunk by the same 0.85 factor applied to the rest of the clock so the
   cap continues to land cleanly over the (now smaller) hand pivots. */
.at-clock-tp .at-tp-centre-cap {
    position: absolute;
    width:  1.36em;          /* 1.60em × 0.85 */
    height: 1.36em;
    left:   calc(50% - 0.68em);
    top:    calc(50% - 0.68em);
    pointer-events: none;
}

/* Adjustment button columns */
.at-adj-col {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: var(--dw-space-snug);
    top: 15em;
}

.at-adj-left  { left: 0.5em; }
.at-adj-right { right: 0.5em; }

.at-adj-btn {
    background: #d0e3fb;
    border: 2px solid #4a8ccf;
    border-radius: 0.45em;
    font-size: 0.95em;
    font-weight: 600;
    padding: 0.5em 0.8em;
    cursor: pointer;
    white-space: nowrap;
    min-width: 7em;
    text-align: center;
    color: #112233;
    box-shadow: 0 1px 0 rgba(0,0,0,0.05);
    transition: opacity 120ms ease-out;
    /* position:relative so the focus-ring / scan-highlight box-shadows paint
       on top of adjacent sibling backgrounds — .at-adj-col is a flex
       container whose children are otherwise siblings in the default
       stacking order. */
    position: relative;
}

/* Shared hover: outline (not fill-swap) across every activity button.
   Answer buttons in Mode 3 carry a correct/incorrect fill after selection,
   so pinning `background` on hover keeps the affordance orthogonal to the
   fill state. Applied uniformly here for cross-mode visual consistency. */
@media (hover: hover) {
    .at-adj-btn:hover,
    .at-bar-btn:hover,
    .at-play-btn:hover,
    .at-check-btn:hover,
    .at-answer-btn:hover {
        background: #d0e3fb;
        outline: 0.2em solid var(--dw-color-focus-ring);
        outline-offset: 0.1em;
    }
    /* `.suppress-hover` is set by `suppressStickyHover` on hybrid
       touch+mouse devices so a just-tapped button doesn't appear
       pre-focused for the next question. Only WT answer buttons receive
       the class today. */
    .at-answer-btn.suppress-hover:hover { outline: none; }
}

/* Keyboard-focus ring — visible against the pale-blue button fill. The
   shared :focus-visible in doorway.css draws a dotted black outline that
   the surrounding blue border can visually swallow at this button size,
   so the local rule replaces it with a solid orange ring and matching
   offset. */
.at-adj-btn:focus-visible {
    outline: 0.2em solid #ff8800;
    outline-offset: 0.15em;
}

/* Switch-scan "you are here" ring. The shared .scan_highlight rule paints
   a 0.5em orange box-shadow, but the +/- buttons' own drop-shadow (defined
   above) composes with it so the visible ring can read as a thin line.
   Override with a solid single-shadow ring and hoist above sibling buttons
   so the ring is unambiguous against both the blue fill and the white
   background. */
.at-adj-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.at-adj-btn.scan_highlight {
    box-shadow: 0 0 0 0.35em #ff8800;
    z-index: 2;
}

/* Bottom bar — Time Passing.
   Three-cell row matching Flash layout: left cluster flush left, lips
   centred, Play flush right. The left/right wrappers are absolute-positioned
   so the lips truly centre on the bar even when the side clusters differ
   in width. */
.at-tp-bar {
    position: absolute;
    bottom: 0.15em;
    left: 0;
    right: 0;
    height: 2.2em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 0 var(--dw-space-default);
    box-sizing: border-box;
}

.at-tp-bar-left {
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: var(--dw-space-default);
}

.at-tp-bar-right {
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    gap: var(--dw-space-default);
}

.at-bar-btn {
    background: #d0e3fb;
    border: 2px solid #4a8ccf;
    border-radius: 0.45em;
    font-size: 0.95em;
    font-weight: 600;
    padding: 0.5em 0.8em;
    cursor: pointer;
    color: #112233;
}

.at-mouth-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.1em;
    display: flex;
    align-items: center;
}

.at-mouth-btn img {
    height: 3em;
    width: auto;
}

/* Time-Passing mouth: absolute-positioned in the gap between the clock's
   right edge (~34.5em) and the Play button's left edge (~43em), sitting
   closer to the clock so it visually associates with the time being read.
   Sizing inherits from `.at-mouth-btn` (3em img, 0.1em padding) so every
   mouth button in the activity is the same size. The y-translate carries a
   -0.4em nudge because the 3em mouth centred on the 2.2em bar midpoint
   would otherwise overflow the activity area's bottom edge. */
.at-tp-mouth {
    position: absolute;
    left: 36.5em;
    top: 50%;
    transform: translate(-50%, calc(-50% - 0.4em));
    margin: 0;
}

.at-play-btn {
    background: #d0e3fb;
    border: 2px solid #4a8ccf;
    border-radius: 0.45em;
    font-size: 0.95em;
    font-weight: 600;
    padding: 0.5em 0.8em;
    cursor: pointer;
    color: #112233;
}

/* =========================================================
   Mode 2: Setting the Clock
   Flash layout:
     alarm clock:   x=135, y=0,   w=530, h=460  → 8.44em, 0, 33.1em, 21.6em
     left buttons:  x=14,  y=163               → left=0.88em, top=7.64em
     right buttons: x=596, y=163               → right=0.5em (x=596→37.25em)
     bottom bar:    y=463                       → top=21.7em
   Flash setting-clock screen is on a plain white background.
   ========================================================= */
.at-setting-clock { background: #ffffff; }

/* Clock face overlaid inside the green alarm-clock body.
   Canonical clock-face.svg (viewBox 286×284, face circle at cx=143 cy=142
   r=137 — face fills 95.8% of viewBox width). The wrap is 19em × 21.2em.
   The alarm body's clock circle centres at (50%, 56%) of the wrap, so the
   visible face is sized at 16.87em (visible diameter 16.16em ≈ 0.958 × 16.87em).

   Centring: left:50% with translateX(-50%) horizontally; top is computed so
   the SVG's centre lands at 56% of wrap height. SVG aspect 286:284, so at
   width 16.87em the rendered height ≈ 16.75em → SVG centre at top + 8.375em;
   wrap centre target = 56% × 21.2em = 11.872em → top = 11.872 − 8.375 = 3.50em. */
.at-alarm-face-svg {
    position: absolute;
    width: 16.87em;
    height: auto;
    left: 50%;
    top: 3.50em;
    /* translateX(-50%) keeps the SVG horizontally centred under its left:50%
       anchor; scale(--analog-face-scale) lets the shared knob enlarge/shrink
       the face. Order matters: scale first (around centre, after translate)
       composes correctly because the scale origin is the SVG's own centre. */
    transform: translateX(-50%) scale(var(--analog-face-scale, 1));
    transform-origin: 50% 50%;
    pointer-events: none;
    display: block;
}

/* Ensure hidden_panel beats the display:block above (about-time.css loads
   after doorway.css; the specificity tie means the LATER rule wins, so we
   need an explicit override scoped to about-time). */
.at-alarm-face-svg.hidden_panel,
.at-sc-centre-cap.hidden_panel {
    display: none;
}

/* Alarm clock — centred with bells at top.
   alarmClockBack.png is 387×432. Setting width=19em, height=21.2em preserves
   the exact aspect ratio (387:432 ≈ 19:21.2 = 0.896), so object-fit:fill = no distortion.
   Sized so the clock body fits within the activity area in the same proportion
   as the Flash reference.
   Scale: 21.2em / 432px = 0.04907em/px; circle centre ≈ (50%, 60.6% of image/container).

   Analogue mode drops the wrap by 2.6em so the clock centres cleanly
   below the nav header and above the target-time bar. Digital mode
   bumps the whole wrap up by scale(1.44) + translateY(-4.1em) so the
   LCD chrome band fills the screen at a tutorial-legible size; the
   scaling is scoped to the :has() rule below so the analogue offset
   doesn't compose with the digital transform. */
.at-alarm-wrap {
    position: absolute;
    left: 50%;
    top: 0.2em;
    transform: translateX(calc(-50% + var(--at-alarm-dx, 0) * 1em))
               translateY(calc(2.6em + var(--at-alarm-dy, 0) * 1em));
    transform-origin: 50% 0;
    width: 19em;
    height: 21.2em;
    overflow: hidden;
}

.at-alarm-wrap:has(#atDigitalBand:not(.hidden_panel)) {
    transform: translateX(calc(-50% + var(--at-alarm-dx, 0) * 1em))
               translateY(calc(-4.1em + var(--at-alarm-dy, 0) * 1em))
               scale(1.44);
}

.at-alarm-img {
    width: 100%;
    height: 100%;
    object-fit: fill;   /* matches image aspect — no visible distortion */
    display: block;
}

/* JS toggles `hidden_panel` to hide the green analogue body in digital mode. */
.at-alarm-img.hidden_panel {
    display: none;
}

/* Scale: 0.05899em/px (matches the face — 16.87em / 286 viewBox units).
   hour-hand.svg 26×92, minute-hand.svg 21×124.
   Pivot at (50%, 56%) of the wrap — see .at-alarm-face-svg note.
   z-index lifts hands above the digital band overlay so they remain visible. */
.at-alarm-wrap .at-sc-hour-hand {
    width:  calc(1.534em * var(--analog-hand-scale));   /* 26px × 0.05899 */
    height: calc(5.427em * var(--analog-hand-scale));   /* 92px × 0.05899 */
    left:   calc(50% - 0.767em * var(--analog-hand-scale));
    top:    calc(56% - 5.427em * var(--analog-hand-scale));
    z-index: 3;
}

.at-alarm-wrap .at-sc-minute-hand {
    width:  calc(1.239em * var(--analog-hand-scale));   /* 21px × 0.05899 */
    height: calc(7.315em * var(--analog-hand-scale));   /* 124px × 0.05899 */
    left:   calc(50% - 0.6195em * var(--analog-hand-scale));
    top:    calc(56% - 7.315em  * var(--analog-hand-scale));
    z-index: 3;
}

/* 0.85 SVG hand-scale correction so SC matches TP. */
.at-alarm-wrap .at-hand {
    --analog-hand-scale: 0.85;
}

/* Setting-the-Clock centre cap — masks the awkward join where the hand
   bases meet at the pivot, matching the Time-Passing pattern. 24-unit SVG
   at the new face scale: 24 × 0.05899 ≈ 1.42em. Centred on (50%, 56%). */
.at-alarm-wrap .at-sc-centre-cap {
    position: absolute;
    width:  1.42em;
    height: 1.42em;
    left:   calc(50% - 0.71em);
    top:    calc(56% - 0.71em);
    z-index: 4;
    pointer-events: none;
}

/* Digital display band overlaid on the centre of the analogue clock face.
   The bezel is the Flash digitalAlarmClock.png sprite (dark-grey alarm-clock
   chrome with a white LCD inset). It ships with a baked-in "12:00" glyph; we
   cover that with our live ".at-digital-band-screen" inset so only our live
   digits show. The sprite is the canonical source of truth — the same file
   drives the options thumbnail (.at-thumb-alarm-band). Centred at (50%, 58%)
   to land on the green ring centre; original sprite aspect ratio is 383×186. */
.at-digital-band {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    width: 13em;
    height: calc(13em * 186 / 383);   /* preserve original sprite aspect ratio */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Sprite chrome: fills the whole band container. */
.at-digital-band-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}

.at-digital-band.hidden_panel {
    display: none;
}

/* Dark-grey LCD bezel — sized/positioned to match the LCD opening cut into
   the digitalAlarmClock.png sprite (visually the screen sits roughly 6% from
   each side, 12% top, 14% bottom inside the 383×186 sprite). The bezel hosts
   a smaller sharp-cornered white inset (.at-digital-band-inset) in which the
   time text is rendered using the project Jotter font — this matches the
   tutorial-style clock face the activity already uses elsewhere. */
.at-digital-band-screen {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 12%;
    bottom: 14%;
    background: #2b2b2b;
    border-radius: 0.15em;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

/* Sharp-cornered white inset inside the dark-grey bezel — the readable LCD
   "screen" itself. Fixed width plus tabular-nums plus right-anchored
   content keeps the colon and minutes at stable positions when the hour
   drops from two digits to one: the empty tens-digit slot appears on
   the left, mirroring how Flash rendered each glyph at a fixed screen
   position. */
.at-digital-band-inset {
    background: #ffffff;
    /* sharp corners — no border-radius */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #000;
    font-family: 'Jotter Primary', sans-serif;
    font-size: 2.8em;
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    /* Slim horizontal padding — digit slots below set their own width
       via flex-basis; padding only keeps the fill "12" off the bezel
       edge. */
    padding: 0.05em 0.15em;
    box-sizing: border-box;
    width: 3.45em;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

/* Shared nudge on the live SC digital LCD digits — applied to the
   inset's direct children (the h/colon/m spans) so the white rect
   stays put and only the text shifts. Scoped to #atDigitalBand so the
   TP-mode band (#atDigitalTP), which reuses .at-digital-band-inset,
   is untouched. */
#atDigitalBand .at-digital-band-inset > * {
    transform: translate(-0.10em, 0.05em);
}

/* Colon lifts by an extra -0.17em on top of the shared translate so its
   dots land between the Jotter digit caps rather than sagging under them. */
#atDigitalBand .at-digital-band-inset > .at-dig-colon {
    transform: translate(-0.10em, -0.12em);
}

/* Setting-the-Clock digital band uses the tutorial Jotter font (not LED
   digits). The shared `.at-dig-h/-m/-colon` rule below sets an LED-style
   family for the Time-Passing overlay and the digital watch; the descendant
   selector here scopes an override to the inset only. */
.at-digital-band-inset .at-dig-h,
.at-digital-band-inset .at-dig-m,
.at-digital-band-inset .at-dig-colon {
    font-family: 'Jotter Primary', sans-serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* Setting the Clock adj columns — vertically centred on clock. Distance
   from the outer edge of the stage (X) is symmetric across the two
   columns; gap is the vertical spacing between stacked +/- buttons in a
   column (overrides the shared .at-adj-col flex gap for SC only). */
.at-sc-adj-left {
    top: 7.3em;
    left: 4.6em;
    right: auto;
    gap: 0.5em;
}

.at-sc-adj-right {
    top: 7.3em;
    right: 4.6em;
    left: auto;
    gap: 0.5em;
}

/* Descendant selector so these only affect +/- adj buttons inside a SC
   column, not any other .at-adj-btn elsewhere. Bumps SC ± into the
   "prominent" tier — bigger text and more generous padding than the base
   `.at-adj-btn`, matching `.at-answer-btn` in Mode 3. Fewer buttons here
   (4 vs TP's 8) and each one is the primary input of the mode, so the
   extra weight is warranted. */
.at-sc-adj-left .at-adj-btn,
.at-sc-adj-right .at-adj-btn {
    font-size: 1.1em;
    padding: 0.75em 1em;
}

/* Bottom bar — Setting the Clock */
.at-sc-bar {
    position: absolute;
    bottom: 0.5em;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--dw-space-default);
    padding: 0 var(--dw-space-loose);
    justify-content: center;
}

.at-set-label {
    font-size: 1em;
    white-space: nowrap;
}

.at-target-text {
    display: inline-block;
    min-width: 9em;
    border: 2px solid #7aa;
    border-radius: 0.3em;
    padding: var(--dw-space-tight) var(--dw-space-default);
    background: #fff;
    font-size: 1em;
    text-align: center;
}

.at-check-btn {
    background: #d0e3fb;
    border: 2px solid #4a8ccf;
    border-radius: 0.45em;
    font-size: 0.95em;
    font-weight: 600;
    padding: 0.5em 0.8em;
    cursor: pointer;
    color: #112233;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    /* Pulled out of the flex flow so the [label, target-text, mouth]
       group stays centred by .at-sc-bar's justify-content: center.
       Positioned relative to the (position: absolute) .at-sc-bar; the
       --at-sc-check-x knob translates from the pinned right anchor. */
    position: absolute;
    right: var(--dw-space-loose);
    top: 50%;
    transform: translateY(-50%) translateX(var(--at-sc-check-x, 0em));
}

.at-check-icon {
    width: 1.8em;
    height: 1.8em;
}

/* =========================================================
   Mode 3: What Time Is It?
   Flash layout:
     left panel:    x=0,   y=0, w=385 → 24em wide
     right panel:   x=385, y=0, w=415 → 25.9em wide
     "What time?" heading: y=100 → top=4.69em
     answer rows: y=190,265,340 → top=8.9,12.4,15.9em
     answer btn: x=62, w=270 → left=3.9em, width=16.9em
     lips: x=360 → left=22.5em
   ========================================================= */

.at-what-time {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.at-what-time.hidden_panel {
    display: none;
}

.at-wt-left {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--dw-space-default) var(--dw-space-loose) var(--dw-space-default) 2em;
    gap: var(--dw-space-loose);
}

.at-wt-heading {
    font-size: 1.6em;
    font-weight: normal;
    margin: 0 0 var(--dw-space-narrow) 0;
    color: #111;
}

.at-answer-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8em;
}

/* WT answer buttons share the "prominent" tier with SC ±: three of them
   stacked in the left column, each carrying the mode's primary choice, so
   font + padding match the SC ± bump. Hover treatment lives with the
   shared button-hover block near `.at-adj-btn`. */
.at-answer-btn {
    flex: 1;
    background: #d0e3fb;
    border: 2px solid #4a8ccf;
    border-radius: 0.45em;
    font-size: 1.1em;
    font-weight: 600;
    padding: 0.75em var(--dw-space-narrow);
    cursor: pointer;
    text-align: center;
    color: #112233;
}

/* Single-signal treatment: fill-only. Base blue border is left intact so
   the picked answer keeps its shape and doesn't shift the row visually.
   Fill lives on `background`; the shared hover outline is orthogonal and
   can coexist without a specificity fight. */
.at-answer-btn.at-correct   { background: #90ee90; }
.at-answer-btn.at-incorrect { background: #f8a0a0; }

.at-wt-right {
    width: 55%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.at-watch-analogue.hidden_panel,
.at-watch-digital.hidden_panel {
    display: none;
}

/* Analogue watch.
   The watch occupies the full vertical extent of the right column. In Flash
   the watch image actually extends slightly past the top/bottom of the stage,
   so we render at 108% height and let .at-wt-right clip with overflow:hidden. */
.at-watch-analogue {
    position: relative;
    height: 108%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.at-watch-back-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Clock face overlaid on the watch.
   Measured from watchBack.png (382×600 — see notes/svg-use-viewport-bug.md
   or rerun the PIL measurement on the asset):
     - vertical bezel circle: y=115..478 → centre 49.5% of image height
     - horizontal bezel circle: case mid x ≈ 183.5/382 → centre 48.04% of
       image width (the case sits slightly LEFT of the image centre because
       watchBack.png includes the right-side crown bump in its bounding box).

   The image renders height-bound (height:100%, width:auto) inside the
   flex-centred .at-watch-analogue container. We size the overlay square
   via height + aspect-ratio:1, and centre it on the bezel — which means
   nudging `left` 1.96% LEFT of the image centre to compensate for the
   off-centre case. (Previously this was left:50%, which left the face
   sitting ~12px right of the case centre — visually slightly off.) */
.at-watch-clock-overlay {
    position: absolute;
    height: 60.5%;
    aspect-ratio: 1 / 1;
    /* 50% - (image_centre_x − case_centre_x) / image_width × 100%
       = 50% - (191 − 183.5)/382 × 100%
       = 50% - 1.96% = 48.04% */
    left: 48.04%;
    top: 49.5%;
    transform: translate(-50%, -50%);
}

.at-watch-clock-overlay { overflow: hidden; }

/* Canonical clock-face.svg for the What-Time watch — same asset as Time
   Passing. viewBox 286×284 (face circle at cx=143 cy=142 r=137); the face
   fills ~95.8% of viewBox width. We render the SVG at 100% of the square
   overlay so the visible face fits flush; the SVG is near-square so the
   tiny height-vs-width difference (284/286) leaves an imperceptible
   horizontal padding. */
.at-wt-face-svg {
    position: absolute;
    width: 100%;
    height: auto;
    left: 0;
    /* top centres the (286×284) image vertically inside the square overlay:
       height = 100% × 284/286 = 99.30%; offset = (100 − 99.30) / 2 = 0.35%. */
    top: 0.35%;
    display: block;
    pointer-events: none;
    transform: scale(var(--analog-face-scale, 1));
    transform-origin: 50% 50%;
}

/* Hands inside the square clock overlay. Vector hour-hand.svg / minute-hand.svg
   (same SVG assets used by Time Passing). Sized in % of the square overlay
   so they scale with the watch. The minute hand reaches 47% of overlay
   height from the centre to the rim.

   IMPORTANT: width must match the SVG's intrinsic aspect ratio
   (hour-hand 26×92 → 0.2826, minute-hand 21×124 → 0.1694). An <img> referencing
   an SVG without `preserveAspectRatio="none"` scales the SVG to fit-with-letterbox
   inside the CSS box. If the CSS aspect is narrower than the SVG, the SVG renders
   smaller than the box and the visible hand falls well short of the bounding rect
   (and the rendered pivot drifts above the transform-origin at 50% 100%). So
   width is locked to `height × SVG aspect`. */
.at-watch-clock-overlay .at-hour-hand {
    width:  calc(9.9% * var(--analog-hand-scale));     /* 35% × 26/92 */
    height: calc(35%  * var(--analog-hand-scale));
    left:   calc(50% - 4.95% * var(--analog-hand-scale));
    top:    calc(50% - 35%   * var(--analog-hand-scale));
}

.at-watch-clock-overlay .at-minute-hand {
    width:  calc(7.96% * var(--analog-hand-scale));    /* 47% × 21/124 */
    height: calc(47%   * var(--analog-hand-scale));
    left:   calc(50% - 3.98% * var(--analog-hand-scale));
    top:    calc(50% - 47%   * var(--analog-hand-scale));
}

/* 0.85 SVG hand-scale correction so What-Time matches Time-Passing. */
.at-watch-clock-overlay .at-hand {
    --analog-hand-scale: 0.85;
}

/* What-Time centre cap — masks the awkward join where the hand bases meet
   at the pivot, matching the Time-Passing pattern. The cap SVG is 24×24;
   sized at 5% of the overlay width so it scales with the watch. */
.at-watch-clock-overlay .at-wt-centre-cap {
    position: absolute;
    width:  5%;
    height: 5%;
    left:   calc(50% - 2.5%);
    top:    calc(50% - 2.5%);
    pointer-events: none;
}

/* Digital watch.
   Match the analogue sizing — fill the column vertically (with significant
   overscan, clipped by .at-wt-right's overflow:hidden) so the watch dominates
   as in Flash, filling the right half of the stage like the Flash reference. */
.at-watch-digital {
    position: relative;
    height: 130%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.at-digital-watch-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Mint-green cover that hides the baked-in "12:00" on digitalWatch.png
   (mint = LCD's own colour, RGB 216,253,235). The text layer below is
   positioned independently so the cover can be trimmed to the baked-
   digit region without dragging the visible time along with it.
   Percentages resolve against the flex column .at-watch-digital, not
   the image (which is height-scaled + auto-width and flex-centred). */
.at-digital-watch-cover {
    position: absolute;
    left:   16.3%;
    top:    42.8%;
    width:  67.9%;
    height: 15.3%;
    border-radius: 0.33em;
    background: #d8fdeb;
    pointer-events: none;
}

/* Live "12:00" text over the cover. No padding — the container hugs the
   glyphs. */
.at-digital-watch-text {
    position: absolute;
    left: 0.9%;
    top:  44%;
    padding: 0;
    margin: 0;
    font-family: 'LEDFont', 'Digital_SF', monospace;
    font-size: 4.20em;
    font-weight: 300;
    color: #000;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}

/* =========================================================
   Digital display shared styles
   ========================================================= */

.at-dig-h, .at-dig-m, .at-dig-colon {
    font-family: 'Digital_SF', 'LEDFont', monospace;
    line-height: 1;
}

/* Fixed-width digit slots. Each of the hours and minutes spans is an
   inline-block sized to hold two digit glyphs of the widest expected
   fill, so variation in the intrinsic glyph widths (Jotter is fully
   proportional; the LED fonts here don't ship a `tnum` OpenType
   feature either) can't leak out and shift the neighbouring colon or
   container edges. Hours right-align inside their slot so a single-
   digit "9" sits where "12"'s "2" sat; minutes left-align inside
   theirs so a single-digit "0" ... well, always 2-digit, but this
   keeps them anchored to the colon side. Per-container width overrides
   below pick a value for the specific font in use. */
.at-dig-h, .at-dig-m {
    display: inline-block;
}

.at-dig-h { text-align: right; }
.at-dig-m { text-align: left; }

.at-digital-band-inset .at-dig-h,
.at-digital-band-inset .at-dig-m {
    /* Jotter Primary is proportional and lacks a tnum feature, so
       hard-freeze the digit slots as flex-items — no shrink, no grow.
       Combined with .at-dig-h text-align:right / .at-dig-m text-align:
       left, the colon sits at a fixed position and only the digits
       drift within their slots. */
    flex: 0 0 1.4em;
    width: 1.4em;
}

.at-digital-watch-text .at-dig-h,
.at-digital-watch-text .at-dig-m {
    width: 1.5em;
}

.at-dig-colon {
    /* Match the digit baseline. The LED-style ':' glyph centres higher than the
       digit cap, so nudge it down slightly so colon dots land between the digits. */
    margin: 0 0.05em;
    display: inline-block;
    vertical-align: baseline;
}

/* =========================================================
   Feedback overlay
   ========================================================= */

/* Horizontally centred on the page and anchored from the bottom so the
   overlay never covers the clock face. In Setting-the-Clock mode a
   bottom bar (.at-sc-bar at bottom: 0.5em) reserves the strip closest to
   the floor, so the overlay sits above it; What-Time-Is-It has no such
   bar and drops the overlay lower via the sibling-scoped override below. */
.at-feedback {
    position: absolute;
    left: 50%;
    bottom: 3em;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.92);
    border: 3px solid #4caf50;
    border-radius: 0.5em;
    padding: var(--dw-space-default) 1.5em;
    font-size: var(--dw-font-size-large);
    z-index: 20;
    white-space: nowrap;
    pointer-events: none;
}

/* WTIT: drop the overlay by ~half its own height (feedback box ≈ 3.75em
   outer including padding). #atFeedback is a sibling of #atWhatTime;
   the general-sibling combinator scopes the shift to the mode that has
   no bottom bar to clear. */
#atWhatTime:not(.hidden_panel) ~ .at-feedback {
    bottom: 1em;
}

.at-feedback.at-feedback-incorrect {
    border-color: #d44;
    color: #d44;
}

/* =========================================================
   Results screen
   ========================================================= */

.at-results-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--dw-space-default);
    box-sizing: border-box;
    overflow-y: auto;
}

.at-results-screen.hidden_panel { display: none; }

/* Paper/notepad styling.
   Width is ~15% narrower than the full paper column so the sheet reads more
   like the Flash reference (screenshots/about-time/06_results_flash.png):
   a compact centred page rather than an activity-wide slab. Kept in em so
   the shrink holds under zoom; horizontal centring comes from the parent
   flex `align-items: center`. */
.at-paper {
    background: #fff;
    border: 1px solid var(--dw-color-text-disabled);
    border-radius: 0.4em;
    padding: var(--dw-space-comfy) var(--dw-space-loose);
    width: 76.5%;
    max-width: 32em;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.15);
    font-size: 0.85em;
    overflow: hidden;
}

.at-paper-top {
    margin-bottom: var(--dw-space-narrow);
}

.at-paper-title {
    font-size: 1.3em;
    text-align: left;
    margin: 0 0 var(--dw-space-snug) 0;
    /* Preserve the literal tab between mode and (variant) in the composed
       title — Flash separates the two dynamic text fields with padding
       rather than a real character; we approximate via a 2-char tab. */
    white-space: pre-wrap;
    tab-size: 2;
}

.at-paper-fields {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--dw-space-narrow);
    flex-wrap: wrap;
}

.at-field-label {
    font-size: 0.95em;
    white-space: nowrap;
}

.at-text-input {
    border: 1px solid var(--dw-color-border-neutral);
    border-radius: 0.2em;
    padding: 0.15em var(--dw-space-snug);
    font-size: 0.95em;
    flex: 1;
    min-width: 8em;
}

.at-date-input {
    flex: 0 0 6em;
    min-width: 4em;
}

.at-score-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.at-score-table th,
.at-score-table td {
    border-bottom: 1px solid var(--dw-color-border-light);
    padding: 0.15em var(--dw-space-narrow);
    text-align: left;
}

.at-score-table th {
    font-weight: normal;
    text-decoration: underline;
}

.at-score-table .at-col-tries {
    text-align: center;
    width: 3em;
}

.at-total-row {
    display: flex;
    flex-direction: row;
    gap: var(--dw-space-default);
    align-items: center;
    margin-top: var(--dw-space-narrow);
    font-size: 0.9em;
    border-top: 1px solid var(--dw-color-border-neutral);
    padding-top: var(--dw-space-snug);
}

/* Print button + hint row — mirrors the paper's rendered width so both
   centre on the same axis. `.at-paper` has `font-size: 0.85em` so its
   `max-width: 32em` renders at ~27.2em in root em; the nav inherits the
   default em, so its max-width is scaled down explicitly to match. */
.at-results-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--dw-space-comfy);
    width: 65%;
    max-width: 27.2em;
    margin-top: var(--dw-space-default);
}

.at-print-hint {
    font-size: 0.75em;
    color: var(--dw-color-text-muted);
    margin: 0;
    flex: 1;
    text-align: center;
}

/* =========================================================
   Print stylesheet — show only the results scoreboard
   ========================================================= */

@media print {
    /* Strip the page chrome so the printed sheet is just the scoreboard.
       The Doorway shell's aspect-ratio wrapper is opt-out via a body class
       so the results panel can flow to the printable area naturally. */
    @page { margin: 1.5cm; }

    body { background: #fff; }

    #dwNavigationHeader,
    .dw-screen-header,
    .dw-app-footer,
    #dwWelcomeScreen,
    #dwUserOptions,
    #dwActivityScreen,
    .at-results-nav {
        display: none !important;
    }

    /* Release the 800x450 aspect-ratio cage so the scoreboard prints
       at a readable size on a portrait A4 sheet. */
    .doorway_application,
    .doorway_fullscreen_div,
    .doorway_aspect_outer_div,
    .doorway_aspect_div,
    main {
        position: static !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #dwResultsScreen.at-results-screen {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        overflow: visible !important;
        font-size: 14pt;
    }

    .at-paper {
        box-shadow: none;
        border: 1px solid var(--dw-color-border-muted);
        width: 100%;
        max-width: none;
        font-size: 1em;
    }

    .at-score-table { font-size: 1em; }
}

/* =========================================================
   Digital fonts — loaded from activity folder
   ========================================================= */

/* Digital displays (Setting the Clock band, What Time Is It? digital watch,
   Time Passing overlay) start with display:none, so the browser fetches
   these ttfs lazily the first time a mode-3-with-digital run makes them
   visible. font-display:swap keeps the digits legible in the monospace
   fallback during that fetch window; without it the LCD renders empty
   through the block period. */
@font-face {
    font-family: 'Digital_SF';
    src: url('Digital_SF.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'LEDFont';
    src: url('LEDFont.ttf') format('truetype');
    font-display: swap;
}