/* Doorway Add and Subtract — activity styles.
   1em = 1/50th of activity width (set by doorway.js onResize).
   All sizing in em; no px except borders.

   Phase 2V coordinate reference (800×600 Flash stage → HTML5):
     1em = 800px / 50 = 16px reference width.
     Y-positions: css_top_em = flash_y_px × 0.75 / 16
     (0.75 factor because Flash stage was 4:3 but HTML5 container is 16:9)
*/

/* --- Welcome illustration ---
   Flow-mode welcome layout (header / body / footer chrome) lives in
   shared/doorway.css. Only the activity-specific illustration sizing is
   defined here. The SVG renders the Flash blue number-line panel; sized
   so it reads as an inset illustration rather than dominating the screen.
   `max-width` / `max-height` constraints keep it from blowing up at large
   viewports in flow mode where the parent is no longer letterboxed. */
.welcome_image {
    width: 100%;
    max-width: 28em;
    max-height: 9em;
    margin: var(--dw-space-narrow) auto var(--dw-space-comfy);
}

.welcome_image svg {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 9em;
    object-fit: contain;
}

/* --- Screen layout --- */

/* Flex-column skeleton (display / direction / width / height / box-sizing)
   comes from .dw-activity-screen in shared/doorway.css. This rule keeps
   only what's specific to add-and-subtract. */
.aas-screen {
    /* Aspect-locked; never scrolls. Keeps off-screen animation paths
       (answer bar from below, b2 block flying out top-right) invisible
       while tweens are in flight. */
    overflow: hidden;
    /* Padding-top leaves room for the absolute-positioned title/counter to
       float above the flex column into the nav-row band without overlapping
       the first flex item (the question area). */
    padding: 1.8em var(--dw-space-loose) var(--dw-space-loose);
    gap: var(--dw-space-default);
}

.aas-screen-title {
    font-size: 2em;
    margin: 0 0 var(--dw-space-default) 0;
    text-align: center;
}

/* --- Activity screen layout --- */

/* Flash stage: white #ffffff background.
   The activity layout is a flex column; proportions below follow Flash stage. */
.aas-activity-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: var(--dw-space-tight);
    position: relative;
}

/* --- Activity header ---
   Title and counter both float into the top nav-row band (occupied by the
   gear / fullscreen / audio icons on the left). Removing them from the
   flex-column flow frees ~2em of vertical space — the difference between
   the answer bar covering the block bank and both being visible together.
   Divergence from Flash (which stacked "Add"/"Subtract" as its own row) —
   forced by the 450px HTML5 stage vs Flash's 600px. */

.aas-activity-header {
    /* Centred over the nav band. z-index sits just above the nav's z:10 so
       the title reads over any icon whitespace. */
    position: absolute;
    top: -1.2em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.4em;
    font-weight: normal;
    margin: 0;
    color: var(--dw-color-text-primary);
    z-index: 11;
    pointer-events: none;
}

.aas-question-counter {
    /* Top-right of the nav band, right-aligned to the screen edge. */
    position: absolute;
    top: -1em;
    right: 0;
    font-size: 1.1em;
    text-align: right;
    margin: 0;
    color: #767676;
    z-index: 11;
}

/* --- Question area ---
   Question + info text share a single row, never wrap. The question is
   anchored to align with the left edge of the number-line blue backdrop
   (the panel is fit-content ≈23.36em wide, centred in the 48em screen
   content area, so its left edge sits at (48em − 23.36em)/2 ≈ 12.32em).
   Padding-left 12em places the question just barely left of the panel
   edge — the cap that "as far right as possible without pushing past
   the panel's left edge" gave. Fixed anchor means the question stays
   put across every question; only the info string shifts as its length
   varies.

   Sizing sanity check (natural widths measured in-browser, Jotter
   Primary at 1em=16px):
     widest question ("What is 10 - 10?")                     ≈ 10.31em @ 1.4em
     widest info    ("Start with nothing. Add on nothing.")   ≈ 22.31em @ 1.3em
     column-gap (--dw-space-comfy)                             =  0.60em
     total max combined                                        ≈ 33.22em
     content area after 12em padding                           = 36.00em
     ∴ head-room                                              ≈  2.78em
   Comfortable buffer; `.aas-screen`'s `overflow: hidden` catches any
   future translation that outgrows it without breaking the layout
   below. */
.aas-question-area {
    width: 100%;
    box-sizing: border-box;
    padding-left: 12em;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    column-gap: var(--dw-space-comfy);
}

.aas-question-text {
    font-size: 1.4em;
    font-weight: normal;
    text-align: left;
    margin: 0;
    color: var(--dw-color-text-primary);
}

.aas-info-text {
    font-size: 1.3em;
    text-align: left;
    margin: 0;
    color: var(--dw-color-text-muted);
    min-height: 1em;
}

/* --- Number line --- */

/* Row containing the reference number line plus the next-button to its right.
   The number line stays centred regardless of whether the next button is
   visible; the next button is absolutely positioned so it doesn't shove the
   number line off-centre when it appears. */
.aas-number-line-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aas-number-line-row > .aas-next-btn {
    position: absolute;
    top: 50%;
    /* Number-line backdrop now bleeds edge-to-edge so there's no "right of
       the panel" to sit outside of. Pin the pencil to the far right of the
       row; z-index lifts it above the blue backdrop it overlays. */
    right: 0;
    transform: translateY(-50%);
    z-index: 6;
}

/* Blue backdrop spans the full activity width (matching the answer-bar
   style — both banners bleed edge-to-edge through the `.aas-screen`
   horizontal padding). Square corners on all four sides. The TRACK
   (block-area + labels) inside stays sized to exactly match the rendered
   width of block-10 so cell stride and tick stride coincide, and is
   centred within the wider backdrop via its `margin: 0 auto`. */
.aas-number-line {
    position: relative;
    background: #d9e8ff;
    border: 2px solid #aabfff;
    border-radius: 0;
    padding: 0 1.2em;
    /* Bleed through the .aas-screen 1em horizontal padding so the blue
       backdrop is flush with the stage edges. */
    margin-left: -1em;
    margin-right: -1em;
    flex-shrink: 0;
}

/* Track width = block-10 rendered width.
   Block-N SVG intrinsic dims are (40N + 3.3)px × 43.3px (1.9px border padding
   on each side around 40px-stride cells). At height 2.5em, block-10 renders
   at width 2.5em × 403.3/43.3 = 23.286em. Anchoring the track to this width
   guarantees a block placed at left:0 in the block-area ends exactly at the
   right edge of the track — and so tick N (at N×10% of the track) lines up
   with the right edge of a block-N placed at left:0. The container's content
   width (25.7em) is wider than the track, so the track is centred — that
   leaves ~1.2em of blue panel on either side as breathing room (both "0"
   and "10" centre on their tick and extend their overhanging half into
   that padding without clipping). */
.aas-number-line-track {
    position: relative;
    width: calc(2.25em * 403.3 / 43.3);
    margin: 0 auto;
}

/* Block placement area: transparent, inside the blue .aas-number-line panel.
   placed-block elements inside use position:absolute relative to this element.
   Blocks anchor to the BOTTOM of this area (see .aas-placed-block) so any
   extra height appears as deadspace ABOVE the blocks — in subtract mode this
   is where the split / take-away animations play. */
.aas-block-area {
    position: relative;
    width: 100%;
    height: 2.25em;
}

/* Subtraction mode: extra deadspace ABOVE the blocks for split / take-away
   animations. Toggled by JS (`_renderQuestion` adds `.aas-mode-subtract` to
   `#aasNumberLine` when `activity_mode === "subtract"`). Height stays ~1.8×
   the add-mode block height (2.25em × 1.8 = 4.05em), matching the Flash
   subtract panel which was ~1.8× the height of the add panel. Because
   blocks are bottom-anchored, the extra height appears entirely above them. */
.aas-mode-subtract .aas-block-area {
    height: 4.05em;
}

/* Ruler and tick marks inside the blue panel, below the block area.
   Each label is absolutely positioned at exactly N/10*100% so tick marks align
   with block positions.
   margin-top 0.6em: leaves a visible empty blue buffer above the ruler,
   matching the Flash reference which had ~1.5em of empty blue below the blocks.
   Height 3.2em: regular labels 0.65em+~1.56em=2.21em; active (1.8em font) 2.81em. */
.aas-number-labels {
    position: relative;
    height: 3.2em;
    padding: 0;
    margin-top: var(--dw-space-snug);
}

/* Ruler: full width from position 0 to position 10 */
.aas-number-labels::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--dw-color-text-muted);
}

.aas-number-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 1.3em;
    font-weight: bold;
    color: var(--dw-color-text-strong);
    padding-top: 0.65em;
    white-space: nowrap;
}

/* Each label centred exactly on its number-line position (N/10 × 100%) via
   the default translateX(-50%). Both "0" and "10" extend their overhanging
   half into the panel's 1.2em padding, matching the Flash reference where
   the edge labels straddle their ticks. */
.aas-number-label[data-value="0"]  { left: 0%;   }
.aas-number-label[data-value="1"]  { left: 10%;  }
.aas-number-label[data-value="2"]  { left: 20%;  }
.aas-number-label[data-value="3"]  { left: 30%;  }
.aas-number-label[data-value="4"]  { left: 40%;  }
.aas-number-label[data-value="5"]  { left: 50%;  }
.aas-number-label[data-value="6"]  { left: 60%;  }
.aas-number-label[data-value="7"]  { left: 70%;  }
.aas-number-label[data-value="8"]  { left: 80%;  }
.aas-number-label[data-value="9"]  { left: 90%;  }
.aas-number-label[data-value="10"] { left: 100%; }

/* Tick marks: centre of each label = the tick position */
.aas-number-label::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 0.6em;
    background: var(--dw-color-text-muted);
}

/* Flash: currentTotal highlighted by rendering number at a larger font size.
   Colour stays the default text-strong (black) — enlargement alone carries
   the emphasis; green is reserved for correct-answer feedback elsewhere.
   Suppressed when the number-line panel carries .aas-no-total-emphasis
   (the highlight_current_total option is off — teacher-controlled scaffold). */
.aas-number-label.aas-label-active {
    font-size: 1.8em;
}
.aas-no-total-emphasis .aas-number-label.aas-label-active {
    font-size: 1.3em;
}

/* Faint dashed outline of the original v1 block, anchored at position 0.
   Sits behind the placed blocks; becomes visible as b3 fades/moves so the
   user still sees the original stack's footprint. Flash: newRectangle in
   frame_05.as:261-263. */
.aas-ghost-outline {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2.25em;
    border: 0.15em dashed rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 0;
}

/* Placed blocks on number line.
   JS sets left: N/10*100% which maps pos0–pos10 to 0%–100% of .aas-block-area.
   Height matches the block bank button height; width scales automatically from the
   SVG's intrinsic aspect ratio (N cells wide × 1 cell tall).
   Bottom-anchored so the block sits just above the ruler line — in subtract mode
   the .aas-block-area is taller and the extra space appears above the block.
   `transition: opacity` carries the b3 fade-out animation;
   `transition: transform` carries the b2 fly-away animation. */
.aas-placed-block {
    position: absolute;
    width: auto;
    height: 2.25em;
    bottom: 0;
    transition: opacity 2s ease-out, transform 3s ease-in-out;
}

/* b2 and b3 are real <button>s — strip the browser-default chrome (background,
   border, padding, native font) so they paint identically to the surrounding
   <div> blocks. Pointer applies only to enabled buttons so disabled ones fall
   back to the standard arrow (no misleading click affordance, no harsh
   no-entry glyph). */
button.aas-placed-block {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}

button.aas-placed-block:not(:disabled) {
    cursor: pointer;
}

button.aas-placed-block:focus-visible {
    outline: 0.2em dotted black;
    outline-offset: 0.15em;
}

/* Subtract-mode hover tooltips above the block area (Flash: cutter / subtractArrow
   sprites positioned via _x/_y on rollOver). We render small DOM popups: a text
   label sitting in the deadspace above the block, with a downward-pointing
   arrow that aligns with the click target (split boundary for the "split" tip,
   b2 centre for the "take away" tip). Positioned inside .aas-block-area (which
   spans the same horizontal extent as a block of value 10), so `left: N/10 * 100%`
   matches the corresponding number-line position. The block itself is
   bottom-anchored at height 2.5em, so `bottom: 2.5em` puts the tooltip's
   bottom edge just above the top of the block — the arrow then points down
   onto the block. pointer-events: none so hover/click pass through to the block
   underneath (the tooltip is informational only). */
.aas-block-tooltip {
    /* Flash used pictorial sprites (cutter / subtractArrow) above the number
       line. We render a text label with a downward arrow as the HTML5
       equivalent so the hint is still readable when paired with a screen
       reader. */
    position: absolute;
    bottom: 2.6em;
    left: 0;
    transform: translateX(-50%);
    background: #fff7c2;
    border: 2px solid #b58900;
    border-radius: 0.3em;
    padding: 0.15em 0.7em;
    font-size: var(--dw-font-size-subheading);
    font-weight: bold;
    color: #663c00;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease-out;
    z-index: 6;
    box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.18);
}

.aas-block-tooltip.aas-block-tooltip-visible {
    opacity: 1;
}

/* Downward arrow on the bottom edge — solid triangle with a matching border
   colour. Two pseudo-elements: the larger triangle is the dark border, the
   smaller (offset by 1px) is the yellow fill. Made larger to read as a
   pointer (closer to the Flash cutter/arrow sprite). */
.aas-block-tooltip::before,
.aas-block-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left:  0.55em solid transparent;
    border-right: 0.55em solid transparent;
}

.aas-block-tooltip::before {
    border-top: 0.7em solid #b58900;
}

.aas-block-tooltip::after {
    margin-top: -1px;
    border-top: 0.65em solid #fff7c2;
}

/* Subtraction: short vertical "cut" mark shown at the split boundary
   between b1 (keep) and b2 (take away) when the user clicks b3.
   Positioned in JS via `left: (v3/10)*100%`. Replaces the Flash `splitLine`
   movie-clip with a CSS-only equivalent.
   Bottom-anchored to track the blocks (which are also bottom-anchored) — extends
   slightly below the block area into the ruler tick marks. */
.aas-split-line {
    /* Flash `splitLine.gotoAndPlay(1)` — a vertical "cut" mark that animates
       in once the user clicks b3 to split. Made thicker and more contrasty
       so it reads as a deliberate boundary marker, closer to the Flash
       cutter visual. */
    position: absolute;
    bottom: -0.4em;
    width: 0.3em;
    height: 4em;
    background: #b58900;
    border: 1px solid #663c00;
    border-radius: 0.08em;
    transform: translateX(-50%) scaleY(0);
    transform-origin: center;
    z-index: 4;
    pointer-events: none;
    animation: aas-split-line-appear 0.35s ease-out forwards;
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
}

@keyframes aas-split-line-appear {
    from { transform: translateX(-50%) scaleY(0); opacity: 0; }
    to   { transform: translateX(-50%) scaleY(1); opacity: 1; }
}

/* Subtraction b3 fade-out endpoint. Class is added on click;
   `transition: opacity 1s ease-out` on .aas-placed-block animates 1 → 0.
   pointer-events: none is a secondary safety; the JS _blockPhase guard is primary. */
.aas-block-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Subtraction b2 fly-away endpoint. Flash tween moved b2 to
   x = 420 + (320 - block._width), y = 80 over ~1.5 s easeInOut — a park
   near the top-centre of the 800-px stage. b2 leaves the number line at
   left = v3/10 × ~600 px (~180-420 px absolute stage x depending on v3);
   a translate of (10em, -6em) carries it 160 px further right and 96 px
   up, landing it clearly above the number line and roughly centred-to-
   right of the block area — matching Flash's "above and to the right"
   motion without pushing it to the far right edge. The block stays
   parked at that position (no fade) until the user picks the correct
   answer — matching Flash where b2 remained on stage until the next-
   question transition tore it down. */
.aas-block-flyaway {
    transform: translate(10em, -6em);
    pointer-events: none;
}

/* Addition: incoming block fly-in animation.
   Matches Flash `moveBlock` in frame_05.as:391-392 — Regular.easeInOut
   over 1.6s (X) / 1.5s (Y). CSS collapses these to a single 1.6s
   ease-in-out on the combined transform. JS sets --aas-fly-from-x /
   --aas-fly-from-y as a px offset from the clicked bank button to the
   target slot; fallback 0px / 8em is the generic slide-up used when no
   source element is supplied. */
.aas-block-fly-in {
    animation: aas-block-fly-in 1.6s ease-in-out;
}

@keyframes aas-block-fly-in {
    from {
        transform: translate(var(--aas-fly-from-x, 0px), var(--aas-fly-from-y, 8em));
        opacity: 0.7;
    }
    to {
        transform: translate(0, 0);
        opacity: 1;
    }
}

/* Flash `fadeInAnswerBlock`. On a correct add-mode answer, a
   block of value v3 in the answer number's colour fades in at position 0 over
   the existing v1+v2 stack — so the row visually adopts the answer colour. */
.aas-block-fade-in {
    opacity: 0;
    animation: aas-block-fade-in 1s ease-out forwards;
}

@keyframes aas-block-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.aas-placed-block img {
    height: 100%;
    width: auto;
    display: block;
}

/* --- Block bank --- */

/* Flash: 10 numbered block buttons arranged in two columns of 5.
   Two columns, each cell has a number label + block image.
   grid-auto-flow: column ensures items fill column-first (1–5 in col 1, 6–10 in col 2).
   Columns are max-content so wide blocks (block 10 = ~23em) aren't squished.
   The grid is sized to its content (max-content × 2 cols) and centred horizontally
   via the wrapping flex column's align-items, plus an explicit `justify-self: center`
   to be defensive against the layout context. */
.aas-block-bank {
    display: grid;
    grid-template-rows: repeat(5, 2.25em);
    grid-template-columns: max-content max-content;
    grid-auto-flow: column;
    row-gap: var(--dw-space-tight);
    column-gap: 4.65em;
    padding: 0;
    justify-self: center;
    align-self: center;
    margin: 0 auto;
}

/* Higher specificity so hidden_panel beats `.aas-block-bank { display: grid }` —
   without this, the bank stays visible in subtract mode even though JS adds the
   hidden_panel class. */
.aas-block-bank.hidden_panel {
    display: none;
}

.aas-block-btn {
    background: none;
    border: none;
    padding: 0;
    width: auto;
    height: 2.25em;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Pointer only on enabled buttons — disabled ones fall back to the standard
   arrow (no misleading click affordance, no harsh no-entry glyph). */
.aas-block-btn:not(:disabled):not([aria-disabled="true"]) {
    cursor: pointer;
}

/* Flash: number label to the left of each block (e.g. "1" beside block 1). */
.aas-block-btn::before {
    content: attr(data-block);
    font-size: 1.3em;
    font-weight: bold;
    color: var(--dw-color-text-secondary);
    min-width: 1.5em;
    text-align: right;
    padding-right: var(--dw-space-snug);
    flex-shrink: 0;
}

.aas-block-btn img {
    height: 100%;
    width: auto;
    display: block;
}

@media (hover: hover) {
    .aas-block-btn:hover {
        filter: brightness(1.06);
    }
}
/* Keyboard focus only — matches the standard Doorway dotted-black outline used
   elsewhere in the app (see shared/doorway.css :focus). Gold is reserved for
   scan highlight. */
.aas-block-btn:focus-visible {
    outline: 0.2em dotted black;
    outline-offset: 0.15em;
}

/* Faint opacity is a soft hint for sighted mouse users; the disabled state
   itself is what AT relies on (screen readers, keyboard Tab, switch scanner
   skip). No cursor rule here — the enabled-only pointer rule above leaves
   disabled buttons on the standard arrow. */
.aas-block-btn:disabled,
.aas-block-btn[aria-disabled="true"] {
    opacity: 0.8;
}

/* --- Correct feedback overlay --- */

/* Flash messageCorrect sprite (pictures/messageCorrect.svg, copied verbatim
   from extracted/Add and Subtract/swf_graphics/sprites_svg/messageCorrect.svg).
   The sprite is the full "Correct!" graphic — white rounded panel with the
   text and drop shadow baked in — so the wrapper only needs to position
   and scale it.
   Pop-in (scale + fade) plays when the overlay is revealed. The animation
   is applied via the `.aas-message-correct-shown` class which the JS adds
   when the overlay is unhidden (and removes when it's hidden again, so the
   keyframe re-triggers on the next correct answer). */
.aas-message-correct {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.aas-message-correct img {
    /* Sprite natural size is 217 × 58 px on the 800-px Flash stage
       (~27% of stage width). 1em = 1/50th of activity width, so
       width: 13.5em ≈ 216 px matches the Flash overlay proportions. */
    display: block;
    width: 13.5em;
    height: auto;
}

.aas-message-correct-shown {
    animation: aas-message-correct-pop 0.4s ease-out;
}

@keyframes aas-message-correct-pop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1);   }
}

/* Higher specificity so hidden_panel wins */
.aas-message-correct.hidden_panel {
    display: none;
}

/* --- Answer bar --- */

/* Positioned absolutely so it overlays the bottom of the activity rather than
   pushing the block bank upward — matches Flash where answer box overlaid the stage.
   Slide-in animation when revealed. Flash tween moved answerBar._y from
   y+62 to y over 1 s easeOut. We translate from below the stage to 0.
   The keyframe is applied via the `.aas-answer-bar-shown` class so it re-triggers
   on each question (otherwise the animation would only play on first reveal).
   Styled as a light-blue number-line panel (matching .aas-number-line) with a
   row of adjacent square number buttons inside. */
.aas-answer-bar {
    position: absolute;
    /* .aas-activity-layout sits inside .aas-screen which has 1em horizontal +
       1em bottom padding. Use negative offsets so the bar extends through that
       padding and its bottom edge sits flush with the bottom of the screen. */
    bottom: -1em;
    left: -1em;
    right: -1em;
    background: #d9e8ff;
    border: 2px solid #aabfff;
    border-radius: 0;
    /* Y padding trimmed to a hairline so the bar hugs the question text
       + answer strip — every mm freed pushes the bar down and reveals
       more of the bank. Below the shared --dw-space-tight (0.2em) scale
       on purpose. */
    padding: 0.05em var(--dw-space-comfy);
    box-sizing: border-box;
    z-index: 5;
}

.aas-answer-bar-shown {
    animation: aas-answer-bar-slide-in 1s ease-out;
}

@keyframes aas-answer-bar-slide-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
}

/* Specificity bump so `hidden_panel` beats `.aas-answer-bar { position: absolute }`. */
.aas-answer-bar.hidden_panel {
    display: none;
}

.aas-answer-bar-question {
    /* Sized to match the answer-line digits below. */
    font-size: var(--dw-font-size-heading);
    font-weight: normal;
    text-align: center;
    /* Tight-with-nothing-to-spare so bar hugs the strip below. */
    margin: 0;
    line-height: 1.1;
    color: var(--dw-color-text-strong);
}

/* Row of 11 adjacent square buttons (0–10), centred. Each is exactly square via
   aspect-ratio:1; buttons share equal flex width so the strip spans the full bar.
   No gaps so the buttons read as one continuous block strip. Width capped at
   80% of the bar so each button — and therefore the bar's height — is 20%
   smaller than an edge-to-edge strip would be. */
.aas-answer-lines {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
}

.aas-answer-line {
    flex: 1 1 0;
    min-width: 0;
    /* Sized to match Flash's weighty answer-bar digit without enlarging the
       button squares themselves (aspect-ratio handles the cell sizing). */
    font-size: 1.6em;
    font-weight: bold;
    aspect-ratio: 1 / 1;
    border: 2px solid #6688cc;
    background: #d9e8ff;
    cursor: pointer;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    color: var(--dw-color-text-primary);
    /* Adjacent buttons share borders — collapse seams so the strip reads as one. */
    margin-left: -2px;
    border-radius: 0;
}
.aas-answer-line:first-child { margin-left: 0; }

@media (hover: hover) {
    .aas-answer-line:hover {
        background: #c1d9ff;
        z-index: 1;
    }
}
/* Visible keyboard focus — matches the standard Doorway dotted-black outline
   used elsewhere. Inset so the outline stays inside the flush button strip
   without overlapping neighbours; z-index lifts the focused button above its
   siblings so the outline reads fully. */
.aas-answer-line:focus-visible {
    outline: 0.2em dotted black;
    outline-offset: -0.35em;
    z-index: 2;
}

/* Brief flash on the correct line when revealed. Flash's lineSelected
   sprite was a green tint that played from frame 1 (a short green pulse).
   The persistent green is the meaning carrier; the pulse is decorative
   reinforcement. */
.aas-answer-line.aas-answer-correct {
    background: #c0ffcc;
    border-color: var(--dw-color-feedback-correct);
    color: var(--dw-color-feedback-correct);
    z-index: 1;
    animation: aas-answer-line-pulse 0.6s ease-out;
}

@keyframes aas-answer-line-pulse {
    0%   { background: #d9e8ff; transform: scale(1);    }
    40%  { background: #b0ff80; transform: scale(1.08); }
    100% { background: #c0ffcc; transform: scale(1);    }
}

/* "Try again" message: positioned absolutely above the answer-line row so its
   appearance never shifts the bar contents. Right-aligned with generous right
   padding so it sits clear of the centred question-repeat ("3 + 4 = ") and
   reads as a hint from the right margin. */
.aas-try-again {
    position: absolute;
    top: 0;
    right: 2em;
    margin: 0;
    font-size: var(--dw-font-size-subheading);
    font-weight: bold;
    text-align: right;
    color: var(--dw-color-feedback-wrong);
}

.aas-try-again.hidden_panel {
    display: none;
}

/* --- Results screen ---
   Layout mirrors the Flash original (screenshots/add-and-subtract/05_results_flash.png):
     - Heading "Add and Subtract Results" centred at the top
     - Results table on the left (1–2 columns of Sum / Tries rows, with a
       leading "question number" column showing "1." "2." …)
     - Thumbs-up illustration on the right
     - Total + "Well done!" stacked below the table on the left
     - "repeat" pencil button bottom-right
   No borders or stripes on the results table — Flash uses plain text rows.
*/

.aas-results-body {
    display: grid;
    /* Two columns: tables column (auto) + thumbs column (fills remaining
       space). The thumbs-up sits centred in the right column to match the
       Flash placement (right-of-table, above the repeat button). */
    grid-template-columns: auto 1fr;
    column-gap: 1.5em;
    align-items: start;
    flex: 1 1 auto;
    min-height: 0;
}

/* Flash indents the results block ~10 % from the stage's left edge (row
   number "1." sits at ~7 % and the "Sum" header at ~18 % of the 800-px
   stage). Shift the whole left column — tables and the Total/Well done
   summary — right so the row block matches the Flash placement. 1em is
   1/50th of activity width, so 5em ≈ a tenth of the activity width. */
.aas-results-left {
    padding-left: 5em;
}

.aas-results-columns {
    display: flex;
    gap: 2.2em;
    justify-content: flex-start;
    align-items: flex-start;
}

.aas-results-table {
    border-collapse: collapse;
    font-size: 1.1em;
}

.aas-results-table th,
.aas-results-table td {
    padding: 0.15em var(--dw-space-comfy);
    /* Plain rows — Flash has no borders or row stripes. */
    border: none;
    text-align: left;
    line-height: 1.15;
    white-space: nowrap;
}

.aas-results-table th {
    font-weight: normal; /* Flash heading is plain, not bold */
    padding-bottom: var(--dw-space-narrow);
}

/* Column zero: the "question number" (e.g. "1.", "2.") — narrow, right-aligned
   with a trailing dot, no header label (Flash leaves the cell empty). */
.aas-results-table th.aas-col-num,
.aas-results-table td.aas-col-num {
    text-align: right;
    padding-right: var(--dw-space-comfy);
    padding-left: var(--dw-space-tight);
    color: var(--dw-color-text-primary);
    /* Wide enough to hold "20." without wrap */
    min-width: 1.6em;
}

.aas-results-table.hidden_panel {
    display: none;
}

/* Thumbs-up picture on the right of the table (Flash original uses a static
   thumbs-up illustration centred vertically against the table block). */
.aas-results-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
}

.aas-results-thumb img {
    /* Rendered width matches Flash: the thumb bounding box in the Flash
       results screen is ~120 × 135 of the 800 × 600 stage. 1em = 1/50th of
       the 800 px activity width, so 7.5em ≈ 120 px; height: auto follows
       the SVG's clipped viewBox aspect (~0.9). */
    width: 7.5em;
    height: auto;
}

/* Total / Well done — stacked below the tables. Flash indents "Total:" to
   sit under the "Sum" column header (one column further right than the "1."
   row-numbers), so shift the whole summary stack by ~2em to match. Base
   indent from `.aas-results-left` still keeps the stack under the table
   block. */
.aas-results-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dw-space-snug);
    margin-top: var(--dw-space-narrow);
    padding-left: 2em;
}

.aas-total-text {
    font-size: var(--dw-font-size-subheading);
    margin: 0;
    color: var(--dw-color-text-primary);
}

.aas-well-done {
    font-size: var(--dw-font-size-subheading);
    margin: 0;
    color: var(--dw-color-text-primary);
}

/* Repeat button: bottom-right corner, away from the back pencil top-left.
   margin-top:auto pushes this row to the bottom of the .aas-screen flex
   column; justify-content:flex-end aligns the pencil to the right edge. */
.aas-action-buttons {
    display: flex;
    gap: var(--dw-space-loose);
    justify-content: flex-end;
    margin-top: auto;
    padding-top: var(--dw-space-snug);
}

/* --- Activity options group: two-column CSS grid for the four cells
   (Activity / Number of questions / Colour set / Checkboxes). Base grid comes
   from the shared .dw-options-activity-grid class; only the small activity-
   specific tweaks (extra top margin, legend spacing) live here. */
.aas-activity-grid {
    margin-top: var(--dw-space-narrow);
}

.aas-activity-grid legend {
    margin-bottom: var(--dw-space-tight);
}

/* Stack of (checkbox + label + subtitle) rows in the checkboxes cell. */
.aas-check-stack {
    display: flex;
    flex-direction: column;
    gap: var(--dw-space-default);
}

/* One row = checkbox + label on line 1, subtitle (sibling span) on line 2.
   `display: block` keeps the input + label + span as natural inline flow. */
.aas-check-row {
    display: block;
}

/* --- Scan highlight --- */

/* The answer-line buttons overlap by 2px to share borders (see
   .aas-answer-line margin-left: -2px), so the shared gold box-shadow ring
   would otherwise be painted over on three sides by adjacent siblings.
   Lift the scanned cell so the full ring is visible. */
.aas-answer-line.scan_highlight {
    z-index: 3;
}


/* --- Accessibility --- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --- Colour Set picker on options screen ---
   Replaces the inline radios with a "Choose Block Colours" button + small
   "Colour set N" label, mirroring the Flash modal entry point. */
.aas-colour-set-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dw-space-snug);
}

.aas-choose-colours-btn {
    /* Wrap text on two lines like the Flash button does. */
    white-space: normal;
    text-align: center;
    max-width: 9em;
    line-height: 1.15;
}

/* Small label under the "Choose Block Colours" button echoing the active
   colour-set choice. Live-region attribute on the element itself ensures
   screen readers announce the change when JS re-renders the text. */
.aas-current-colour-label {
    margin: var(--dw-space-tight) 0 0 0;
    font-size: 0.95em;
    color: var(--dw-color-text-secondary);
    text-align: center;
    max-width: 9em;
    line-height: 1.15;
}

/* --- Colour Set modal (overlay over options screen) ---
   Backdrop dims the options form; centred white panel holds the arrow row,
   the staircase preview, and the footer (caption + Done). Fixed-positioned
   so it covers the viewport regardless of whether the options screen is in
   flow mode (scrollable static layout) or letterboxed mode (positioned
   .doorway_aspect_div). */
.aas-colour-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aas-colour-modal.hidden_panel {
    display: none;
}

.aas-colour-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--dw-color-shadow-strong);
}

/* White rounded panel centred on the stage. ~36em wide fits inside the
   50em-wide activity area with breathing room. Heightwise (10 × 2.2em tower
   + arrows + footer ≈ 30em) the panel can slightly exceed the 28em letterbox;
   max-height: 95% lets the browser scroll if the viewport is too short,
   rather than clipping content silently. */
.aas-colour-modal-panel {
    position: relative;
    background: #ffffff;
    border: 2px solid var(--dw-color-border-medium);
    border-radius: 0.6em;
    width: 36em;
    max-width: 92%;
    max-height: 95%;
    padding: 0.8em var(--dw-space-loose) 0.8em;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--dw-space-default);
    box-shadow: 0 0.4em 1.2em var(--dw-color-shadow-modal);
    overflow-y: auto;
}

/* Arrow row: prev triangle | bordered label | next triangle.
   Label is fixed-width so the row layout doesn't reflow when the
   text "Colour set 1/2/3" changes. */
.aas-colour-modal-arrows {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8em;
}

.aas-colour-arrow-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 4em;
    height: 3em;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aas-colour-arrow-btn svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #c8c8c8;
}

@media (hover: hover) {
    .aas-colour-arrow-btn:hover svg { fill: var(--dw-color-border-muted); }
}
.aas-colour-arrow-btn:focus-visible {
    outline: 0.2em dotted black;
    outline-offset: 0.1em;
}

.aas-colour-modal-label {
    border: 1px solid #000;
    border-radius: 0.05em;
    padding: var(--dw-space-tight) var(--dw-space-comfy);
    width: 11em;
    text-align: center;
    font-size: 1.1em;
    font-weight: normal;
    font-family: "Courier New", monospace;
    color: var(--dw-color-text-primary);
    background: #fff;
}

/* Preview staircase: 10 rows (top = block 1, bottom = block 10).
   Bottom row of 10 blocks = 10 × 2.2em = 22em wide, fits inside the
   36em-wide panel with breathing room. Each row is left-aligned so the
   staircase grows diagonally down-right, matching the Flash reference. */
.aas-colour-modal-tower {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 22em;
    margin: 0 auto;
    gap: 0;
}

.aas-colour-modal-row {
    display: flex;
    flex-direction: row;
    /* Row N contains exactly one <img> element whose intrinsic aspect ratio
       is N:1 (N cells wide × 1 tall). Each row gets the same height. */
    height: 2.2em;
}

.aas-colour-modal-block {
    display: block;
    height: 100%;
    width: auto;
}

/* Footer: left-aligned caption + right-aligned Done button. */
.aas-colour-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dw-space-loose);
    margin-top: var(--dw-space-tight);
}

.aas-colour-modal-caption {
    margin: 0;
    font-size: 1em;
    color: var(--dw-color-text-primary);
    text-align: left;
    flex: 1 1 auto;
}

.aas-colour-modal-done {
    flex-shrink: 0;
}

/* --- Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}