/* ================================================================
   fraction-rwv.css
   ----------------------------------------------------------------
   Styling for the "Reading, Writing & Visualizing Fractions" skill
   quizzes (A.1 Fraction Match: Picture <-> Symbol, A.2 Build the
   Fraction) on the Class 3 Math page. Both skills reuse fraction.css
   almost entirely as-is:
     - the frac-parts-stage / frac-parts-circle-svg / frac-parts-bar /
       frac-parts-square-grid classes for the shape itself (shading,
       locking, and the green/red correctness ring all come free)
     - the frac-friendly-symbol-num/bar/den classes for the stacked
       "N over M" fraction symbol
     - the frac-friendly-picker row layout for Fraction Match's four
       answer chips (wrapped in that same container in the markup so
       it gets the same sizing without duplicating any rules here)
     - the shared quiz-number-opt button, including its .is-correct/
       .is-wrong grading states
   This file only adds the handful of rules unique to these two
   skills: the larger standalone "target fraction" card shown above
   Build the Fraction's blank shape, and its shaded-count caption/
   Check button. Loaded as a plain stylesheet link, after
   fraction.css.
   ================================================================ */

/* ---- Build the Fraction (A.2) target-fraction display ----
   A bigger, standalone rendering of the same stacked numerator/bar/
   denominator symbol used for Halves, Thirds & Quarters' chip row,
   shown above the blank shape so the child always has the target
   fraction in view while shading. */
.frac-build-target-wrap {
    display: flex;
    justify-content: center;
    margin: 14px auto 4px;
}
.frac-target-fraction {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 26px;
    border-radius: 18px;
    background: var(--bg-light);
    border: 3px solid var(--line);
}
.frac-target-fraction .frac-friendly-symbol-num,
.frac-target-fraction .frac-friendly-symbol-den {
    font-size: 30px;
}
.frac-target-fraction .frac-friendly-symbol-bar {
    width: 32px;
    height: 4px;
}

#fracBuildCountText {
    text-align: center;
    font-weight: 700;
    color: #4a5568;
    margin: 4px 0 2px;
}
#fracBuildCheckBtn {
    display: block;
    margin: 14px auto 4px;
}
#fracBuildCheckBtn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* ---- Fraction Match (A.1) answer-chip row ----
   The four fraction-symbol chips sit inside a bare .frac-friendly-
   picker wrapper in the markup (no label paragraph, since Fraction
   Match only ever shows one row) purely to inherit that class's
   sizing for a stacked "N over M" chip instead of the shared
   quiz-number-opt's small fixed circle. Nothing extra needed here —
   this comment just documents why that wrapper class shows up on an
   element with no visible label. */

/* ---- Fraction Strips / Bars (A.3) drag-to-shade slider ----
   A single bar of M equal segments (frac-strip-segment, styled like
   Parts of a Whole's frac-parts-bar-segment) sits in an
   overflow:hidden "fill" layer so the shaded color never spills past
   the track's rounded corners, while the draggable handle
   (frac-strip-handle, styled like Fair Shares Intro's
   fair-knife-handle) lives in the outer, overflow:visible track so it
   can stick out past the bar's top/bottom edge and stay easy to grab.
   The .frac-parts-stage wrapper around .frac-strip-track is reused
   as-is for the green/red correctness ring (fraction.css already
   handles the ">*" outline; this file only adds the 16px
   border-radius override the ring needs on a bar shape, same as
   Parts of a Whole's own frac-parts-bar/frac-parts-square-grid
   overrides). The stacked "Now Showing" fraction symbol below the
   bar reuses .frac-target-fraction as-is and is simply re-rendered on
   every pointermove — that re-render is what makes the fraction
   visibly update live while dragging. */
.frac-strip-track {
    position: relative;
    width: clamp(260px, 78vw, 460px);
    height: clamp(64px, 16vw, 84px);
    margin: 16px auto 10px;
    touch-action: none;
}
.frac-strip-track-fill {
    position: absolute;
    inset: 0;
    display: flex;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 0 rgba(0,0,0,0.08);
}
.frac-strip-segment {
    flex: 1 1 0;
    background: #f3f4f6;
    border-right: 3px solid #fff;
    transition: background-color 0.1s ease;
}
.frac-strip-segment:last-child { border-right: none; }
.frac-strip-segment.is-shaded { background: #7ecbff; }
.frac-strip-track-fill.is-locked { cursor: default; }

.frac-strip-handle {
    position: absolute;
    top: 50%;
    left: 0;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
    border: 3px solid #4a3323;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4a3323;
    font-size: 0.9rem;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 2px 0 rgba(0,0,0,0.15);
    z-index: 4;
    transition: left 0.05s linear;
}
.frac-strip-handle:active { cursor: grabbing; }
.frac-strip-handle.is-locked { pointer-events: none; }

.frac-parts-stage.is-correct .frac-strip-track,
.frac-parts-stage.is-wrong .frac-strip-track { border-radius: 16px; }

#fracStripCheckBtn {
    display: block;
    margin: 16px auto 4px;
}
#fracStripCheckBtn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* Fraction Strips / Bars — mobile responsiveness (tablets / large phones) */
@media (max-width: 560px) {
    .frac-strip-handle { width: 28px; height: 28px; margin-left: -14px; }
}

/* ---- Fractions on a Number Line, Intro (A.4) drag-to-place marker ----
   A plain horizontal line (frac-line-bar) with a tick mark
   (frac-line-tick) at every equal step for the question's
   denominator, "0"/"1" endpoint labels sitting below it, and a round
   draggable marker (frac-line-marker, same drag-a-handle feel as
   Fair Shares Intro's knife handle and Fraction Strips' slider
   handle) the child drags along the line to the tick they think
   matches the target fraction. .frac-parts-stage is still used as
   the outer wrapper for consistency with every other skill, but its
   usual outline ring is suppressed here (a thin 4px-tall line isn't
   a sensible shape to outline) — instead the marker itself picks up
   green/red fill on grading, same immediate right-or-wrong read as
   Fair Shares Intro's knife-handle coloring. */
.frac-line-track {
    position: relative;
    width: clamp(260px, 78vw, 460px);
    height: 4px;
    margin: 40px auto 34px;
    touch-action: none;
}
.frac-line-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--line);
    border-radius: 2px;
}
.frac-line-tick {
    position: absolute;
    top: 50%;
    width: 3px;
    height: 18px;
    background: #8a94a6;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}
.frac-line-endpoint-label {
    position: absolute;
    top: 22px;
    transform: translateX(-50%);
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: var(--secondary);
}
.frac-line-marker {
    position: absolute;
    top: 50%;
    left: 0;
    width: 30px;
    height: 30px;
    margin-left: -15px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--sky);
    border: 3px solid #fff;
    box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 0 0 2px var(--sky);
    cursor: grab;
    touch-action: none;
    z-index: 4;
    transition: left 0.05s linear, background-color 0.15s ease, box-shadow 0.15s ease;
}
.frac-line-marker:active { cursor: grabbing; }
.frac-line-marker.is-locked { pointer-events: none; }
.frac-line-marker.is-correct { background: #10b981; box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 0 0 2px #10b981; }
.frac-line-marker.is-wrong { background: #ef4444; box-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 0 0 2px #ef4444; }

.frac-parts-stage.is-correct .frac-line-track,
.frac-parts-stage.is-wrong .frac-line-track { outline: none; border-radius: 0; }

#fracLineCheckBtn {
    display: block;
    margin: 16px auto 4px;
}
#fracLineCheckBtn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* Number Line, Intro — mobile responsiveness (tablets / large phones) */
@media (max-width: 560px) {
    .frac-line-marker { width: 26px; height: 26px; margin-left: -13px; }
}

/* ---- Fraction of a Group / Discrete Objects (A.5) tap-to-color grid ----
   A flex-wrapped grid of emoji "objects" (stars, apples, balloons,
   flowers, teddy bears, circles — one icon set per question, cycling
   for variety) the child taps to color/select exactly N of, same
   tap-to-toggle interaction and up-to-3-attempts Check flow as Build
   the Fraction (A.2), just swapping "equal parts of one shape" for
   "equal-sized shares of a countable set". The whole grid sits inside
   the same .frac-parts-stage wrapper as every other skill so it picks
   up the shared green/red correctness ring for free; this file only
   adds the item layout and its selected/locked states. */
.frac-group-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 420px;
    margin: 4px auto;
    padding: 6px;
}
.frac-group-item {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    line-height: 1;
    border-radius: 12px;
    border: 3px solid var(--line);
    background: var(--bg-light);
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.frac-group-item:hover { transform: translateY(-2px); }
.frac-group-item.is-selected {
    background: #fff3cf;
    border-color: var(--sun);
    transform: scale(1.06);
}
.frac-group-item.is-locked { pointer-events: none; cursor: default; }
.frac-group-item.is-locked:hover { transform: none; }

#fracGroupCountText {
    text-align: center;
    font-weight: 700;
    color: #4a5568;
    margin: 4px 0 2px;
}
#fracGroupCheckBtn {
    display: block;
    margin: 14px auto 4px;
}
#fracGroupCheckBtn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
    transform: none;
}

/* Fraction of a Group — mobile responsiveness (tablets / large phones) */
@media (max-width: 560px) {
    .frac-group-grid { max-width: 92vw; gap: 8px; }
    .frac-group-item { width: 42px; height: 42px; font-size: 22px; border-radius: 10px; }
}

/* ---- Real-World Fraction Spotting (A.6) tap-to-choose scenes ----
   Six hand-drawn SVG "scenes" (sandwich, pizza, analog clock, water
   bottle, chocolate bar, glass of juice), cycled by question the same
   way Fraction Match cycles its circle/bar/square renderer, each one
   picturing a fraction in a real-world container instead of a plain
   abstract shape. Every scene's root <svg> is still a direct child of
   the shared .frac-parts-stage wrapper, so it inherits the exact same
   green/red correctness ring fraction.css already provides for
   frac-parts-circle-svg/bar/square-grid — nothing extra needed here
   for the ring itself. The answer chips below reuse Fraction Match's
   own .frac-friendly-picker / .quiz-number-opt markup and its
   buildFracMatchOptions() distractor logic as-is (a "which fraction
   matches the picture" quiz is the same underlying mechanic
   regardless of whether the picture is an abstract wedge or a
   sandwich), so this file only styles the scene artwork itself. */
.frac-scene-svg {
    display: block;
    margin: 6px auto;
    width: 100%;
}
.frac-scene-sandwich, .frac-scene-chocolate { max-width: 260px; }
.frac-scene-pizza, .frac-scene-clock { max-width: 210px; }
.frac-scene-bottle, .frac-scene-glass { max-width: 150px; }

/* Sandwich */
.frac-scene-bread-outer { fill: #f3cd8f; stroke: #c9963f; stroke-width: 3; }
.frac-scene-sandwich-filling { fill: #8bc34a; }
.frac-scene-sandwich-piece { fill: transparent; }
.frac-scene-sandwich-piece.is-eaten { fill: rgba(255,255,255,0.7); stroke: #b0b8c4; stroke-width: 2; stroke-dasharray: 4 3; }
.frac-scene-divider { stroke: #ffffff; stroke-width: 3; }

/* Pizza */
.frac-scene-pizza-crust { fill: #e0a458; stroke: #b97b2e; stroke-width: 4; }
.frac-scene-pizza-wedge { fill: #ffe082; stroke: #ffffff; stroke-width: 2; }
.frac-scene-pizza-wedge.is-topped { fill: #ffb74d; }
.frac-scene-pepperoni { fill: #c1440e; }

/* Clock */
.frac-scene-clock-face { fill: #ffffff; stroke: var(--line); stroke-width: 4; }
.frac-scene-clock-wedge { fill: rgba(46,155,245,0.22); }
.frac-scene-clock-tick { stroke: #8a94a6; stroke-width: 3; }
.frac-scene-clock-hourhand { stroke: #1E3A5F; stroke-width: 6; stroke-linecap: round; }
.frac-scene-clock-minutehand { stroke: #2E9BF5; stroke-width: 4; stroke-linecap: round; }
.frac-scene-clock-center { fill: #1E3A5F; }

/* Bottle / Glass fill scenes */
.frac-scene-bottle-outline, .frac-scene-glass-outline {
    fill: rgba(184, 224, 245, 0.25);
    stroke: #4a90c2;
    stroke-width: 4;
}
.frac-scene-liquid-water { fill: #4fc3f7; }
.frac-scene-liquid-juice { fill: #ffb74d; }
.frac-scene-liquid-surface { opacity: 0.9; }

/* Chocolate bar */
.frac-scene-choc-outer { fill: #7a4f2e; stroke: #5b3a20; stroke-width: 3; }
.frac-scene-choc-square { fill: #6f4a2e; stroke: #5b3a20; stroke-width: 2; }
.frac-scene-choc-square.is-eaten { fill: #e4d2ba; }

/* Real-World Fraction Spotting — mobile responsiveness (tablets / large phones) */
@media (max-width: 560px) {
    .frac-scene-sandwich, .frac-scene-chocolate { max-width: 220px; }
    .frac-scene-pizza, .frac-scene-clock { max-width: 175px; }
    .frac-scene-bottle, .frac-scene-glass { max-width: 125px; }
}

/* ---- Equivalent Fractions Visual Match (B.1) two-shape + overlay proof ----
   Two independently-shaded shapes (reusing renderStaticFracShape's own
   circle/bar/square renderers and frac-parts-stage ring exactly as
   Fraction Match does) sit side by side with no fraction numbers
   printed near either one, since judging the shaded AMOUNT rather
   than the piece count is the whole point of this skill. This file
   only adds the narrower side-by-side layout for that pair, the
   Yes/No answer row (reusing quiz-number-opt's own button/grading
   look), and the post-answer "proof" panel: two full-width bars
   stacked directly on top of each other with a single vertical
   guideline drawn at the first fraction's shaded boundary, so a
   genuine match visibly lines up with the second bar's shaded edge
   and a mismatch visibly doesn't. */
.frac-eq-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 10px auto 4px;
    flex-wrap: wrap;
}
.frac-eq-pair-item { flex: 0 0 auto; width: 150px; }
.frac-eq-pair-item .frac-parts-stage { width: 100%; }
/* Defensive, per-shape overrides: forces whichever child
   fraction.css's stage renderers append (svg / bar / square-grid) to
   fit this narrower side-by-side slot instead of the wider
   single-shape size they use everywhere else on this page. Split out
   by class rather than a blanket "> *" rule, since the bar and
   square-grid are plain divs with no intrinsic aspect ratio the way
   the circle's <svg viewBox> has — a blanket height:auto collapses
   them to 0 height instead of shrinking them proportionally. */
.frac-eq-pair-item .frac-parts-circle-svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
}
.frac-eq-pair-item .frac-parts-bar {
    width: 100% !important;
    max-width: 100% !important;
    height: 56px !important;
}
.frac-eq-pair-item .frac-parts-square-grid {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    height: auto !important;
}
.frac-eq-vs {
    font-weight: 800;
    font-size: 22px;
    color: var(--secondary);
    opacity: 0.55;
}

.frac-eq-yesno {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 16px auto 4px;
}
.frac-eq-yesno .eq-yesno-btn {
    min-width: 110px;
    padding: 14px 22px;
    font-size: 16px;
    font-weight: 800;
}
.frac-eq-yesno .eq-yesno-btn i { margin-right: 6px; }

.frac-eq-proof {
    margin-top: 14px;
    padding: 14px 16px 10px;
    border-radius: 14px;
    background: var(--bg-light);
    border: 2px solid var(--line);
    position: relative;
}
.frac-eq-proof-row { margin-bottom: 14px; }
.frac-eq-proof-row:last-of-type { margin-bottom: 6px; }
.frac-eq-proof-label {
    display: block;
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 4px;
    font-size: 14px;
}
.frac-eq-proof-bar {
    display: flex;
    width: 100%;
    height: 26px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--line);
}
.frac-eq-proof-bar-segment { flex: 1 1 0; background: #eef1f5; border-right: 2px solid #fff; }
.frac-eq-proof-bar-segment:last-child { border-right: none; }
.frac-eq-proof-bar-segment.is-shaded { background: #7ecbff; }
.frac-eq-proof-guideline {
    position: absolute;
    top: 34px;
    bottom: 24px;
    width: 0;
    border-left: 3px dashed var(--secondary);
    opacity: 0.5;
}
.frac-eq-proof-guideline.is-match { border-color: #10b981; opacity: 0.9; }
.frac-eq-proof-guideline.is-mismatch { border-color: #ef4444; opacity: 0.9; }
.frac-eq-proof-result {
    text-align: center;
    font-weight: 800;
    margin-top: 2px;
    font-size: 15px;
}
.frac-eq-proof-result.is-match { color: #0E8C6F; }
.frac-eq-proof-result.is-mismatch { color: #ef4444; }

/* Equivalent Fractions Visual Match — mobile responsiveness (tablets / large phones) */
@media (max-width: 560px) {
    .frac-eq-pair { gap: 10px; }
    .frac-eq-pair-item { width: 118px; }
    .frac-eq-pair-item .frac-parts-bar { height: 44px !important; }
    .frac-eq-yesno .eq-yesno-btn { min-width: 92px; padding: 12px 16px; font-size: 15px; }
}

/* ---- Fraction Wall / Ladder (B.2) stacked rows + halfway guideline ----
   A "Whole" reference row on top (undivided, un-clickable — it just
   anchors the halfway guideline at a true 1/2) sits above one row per
   fraction (Halves/Thirds/Quarters/Sixths/Eighths, reshuffled every
   question), each split into its own row's number of equal segments
   via plain divs (frac-wall-segment), same look as
   frac-eq-proof-bar-segment but unshaded — this skill is about where
   the DIVIDING LINES fall, not about shading. Every row shares an
   identical label-column width so all bars line up under each other
   at the same x-offset, which is what lets a single absolutely-
   positioned dashed line (frac-wall-guideline) run straight down the
   whole stack at the 50% mark of the bar area. The whole stack
   (.frac-wall) is the sole direct child of the shared .frac-parts-
   stage wrapper, so it inherits the exact same green/red correctness
   ring fraction.css provides everywhere else (this file only adds
   the border-radius override that ring needs, same pattern as
   Fraction Strips' and Equivalent Fractions Visual Match's own
   overrides). Tapping a row toggles it (frac-group-item's own
   select/lock look, just applied to a full row instead of a single
   grid item), and "Check" grades the full set — up to 3 attempts
   before the correct rows are revealed, same forgiving pattern as
   Build the Fraction and Fraction of a Group. */
.frac-wall {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 460px;
    margin: 10px auto 4px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--bg-light);
    border: 2px solid var(--line);
}
.frac-wall-row {
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.12s ease, transform 0.12s ease;
}
.frac-wall-row:hover { transform: translateX(2px); }
.frac-wall-row-whole { cursor: default; opacity: 0.85; }
.frac-wall-row-whole:hover { transform: none; }
.frac-wall-row-label {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 13.5px;
    color: var(--secondary);
    text-align: right;
}
.frac-wall-bar {
    display: flex;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--line);
    background: #fff;
}
.frac-wall-segment {
    flex: 1 1 0;
    border-right: 2px solid var(--line);
    background: rgba(30,58,95,0.06);
}
.frac-wall-segment:last-child { border-right: none; }
.frac-wall-row-whole .frac-wall-segment { background: #fff; }

/* One tint per row so the wall reads like a rainbow ladder, matching
   this app's existing category-color palette. */
.frac-wall-row-halves .frac-wall-segment { background: rgba(46,155,245,0.16); }
.frac-wall-row-thirds .frac-wall-segment { background: rgba(245,66,125,0.14); }
.frac-wall-row-quarters .frac-wall-segment { background: rgba(123,79,224,0.14); }
.frac-wall-row-sixths .frac-wall-segment { background: rgba(14,140,111,0.14); }
.frac-wall-row-eighths .frac-wall-segment { background: rgba(245,166,35,0.16); }

.frac-wall-row.is-selected { background: #fff3cf; }
.frac-wall-row.is-selected .frac-wall-row-label { color: var(--sun); }
.frac-wall-row.is-selected .frac-wall-bar { box-shadow: 0 0 0 3px var(--sun); }
.frac-wall-row.is-locked { pointer-events: none; cursor: default; }
.frac-wall-row.is-locked:hover { transform: none; }

/* left = (wall's own left padding + label column width + row gap)
   fixed pixels, plus half of whatever's left of the row width (i.e.
   the bar column) — lands the line exactly on the bar area's 50%
   mark regardless of viewport width, since percentages for an
   absolutely-positioned child resolve against .frac-wall's padding
   box (same reference frame used here). Recomputed to match the
   mobile column widths below the 560px breakpoint. */
.frac-wall-guideline {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: calc(44px + 50%);
    width: 0;
    border-left: 3px dashed var(--secondary);
    opacity: 0.55;
    pointer-events: none;
}

#fracWallCountText {
    text-align: center;
    font-weight: 700;
    color: #4a5568;
    margin: 4px 0 2px;
}
#fracWallCheckBtn {
    display: block;
    margin: 14px auto 4px;
}
#fracWallCheckBtn:disabled {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
    transform: none;
}

.frac-parts-stage.is-correct .frac-wall,
.frac-parts-stage.is-wrong .frac-wall { border-radius: 16px; }

/* Fraction Wall / Ladder — mobile responsiveness (tablets / large phones) */
@media (max-width: 560px) {
    .frac-wall { max-width: 92vw; padding: 10px; gap: 6px; }
    .frac-wall-row { grid-template-columns: 58px 1fr; gap: 6px; }
    .frac-wall-row-label { font-size: 12px; }
    .frac-wall-bar { height: 26px; }
    .frac-wall-guideline { top: 10px; bottom: 10px; left: calc(32px + 50%); }
}

/* ---- Multiply-Up to Find Equivalents (B.3) equation + doubled shapes ----
   The equation row reuses .frac-target-fraction as-is (already styled
   by fraction.css for Build the Fraction's own target display) for
   both sides of "a/b = ?/d"; the blank side still goes through
   renderFracSymbolInto exactly like the known side, passing the
   literal string "?" in place of whichever number is hidden, so no
   new number-display markup was ever needed on the JS side.

   Below that, both fractions are rendered as full, unhidden shapes via
   the shared renderStaticFracShape(shapeType, m, shadedCount) helper —
   the first always a/b, the second always the TRUE doubled fraction.
   On narrow screens they stack one above the other (squeezing two
   full circle/bar/square shapes into half-width columns is what
   caused them to overflow and overlap on phone-width screens
   originally); past 900px there's enough room to sit them side by
   side instead. A "×2" badge sits between them standing in for the
   arrow a teacher would draw by hand, and "Start"/"After ×2" captions
   are added as pure CSS ::before content above each shape — no HTML/
   JS change, just generated text — so a child doesn't have to guess
   which shape is which.

   Everything here sits directly on the quiz's own blue/green
   background, same as every other skill's popup — no extra white
   card wrapping it (an earlier version added one; it made the popup
   both cluttered-looking and taller than it needed to be, which is
   also what was pushing the answer options below the visible screen).

   The divider lines inside the shapes themselves come from fraction.css
   (frac-parts-bar-segment's border / frac-parts-circle-svg path's
   stroke / frac-parts-square-cell's border), which normally read very
   faint against the light shaded fill; --line is locally darkened here
   and every divider's width/stroke is bumped so the parts are easy to
   tell apart even on a small screen.

   Reuses frac-target-fraction and the bare .quiz-number-opt button for
   answers (no frac-friendly-symbol-btn subclass, since these buttons
   hold a single plain number, not a full fraction) — just enlarged and
   given clearer interactive states below. Correctness itself is shown
   via the small ring around the now-filled "?" box and the feedback
   line, not a big colored panel border, since there's no panel box
   left to put one on.

   Note on the "?": it's static text written once by renderFracSymbolInto
   when the question is built. handleFracUpChoice (in fraction-rwv.js)
   now re-renders that same element with the real n/d once the child
   answers, so the "?" is actually replaced with the resolved number —
   this file just styles the "before" (dashed halo) and "after" (solid
   ring) states of that swap. */

.frac-up-panel {
    --line: #7c8ba3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 460px;
    box-sizing: border-box;
    margin: 6px auto 4px;
    padding: 0 6px;
}

.frac-up-equation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 3vw, 16px);
    width: 100%;
}
.frac-up-equation .frac-target-fraction {
    flex: 0 1 auto;
}
.frac-up-equals {
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 5vw, 26px);
    color: var(--secondary);
    flex: 0 0 auto;
}

/* The "?" itself: set apart with a soft dashed halo so it visibly
   reads as "tap an answer to fill this in", without recoloring the
   known number sitting right next to it (that number can't be
   targeted alone in pure CSS, so it's left in its normal color instead
   of risking the two looking equally "blank"). */
.frac-up-blank-side {
    position: relative;
}
.frac-up-blank-side::before {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2.5px dashed var(--sun);
    border-radius: 16px;
    opacity: 0.55;
    pointer-events: none;
}

/* Once answered, the "?" is replaced with the real number (see
   handleFracUpChoice in fraction-rwv.js) and swaps the dashed
   "fill me in" halo for a solid ring matching the correct/wrong
   verdict, so the box visibly reads as "resolved" either way. */
.frac-up-solved-side {
    position: relative;
}
.frac-up-solved-side::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    pointer-events: none;
    border: 2.5px solid transparent;
    transition: border-color 0.15s ease;
}
.frac-up-correct .frac-up-solved-side::before { border-color: var(--mint-bright, #22c08d); }
.frac-up-wrong .frac-up-solved-side::before { border-color: var(--pink, #f5427d); }

.frac-up-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
}
.frac-up-shape-wrap {
    width: 100%;
    max-width: min(360px, 84vw);
    box-sizing: border-box;
    margin: 0 auto;
}
.frac-up-shape-wrap::before {
    display: block;
    text-align: center;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #45577a;
    margin-bottom: 6px;
}
.frac-up-shape-wrap:first-of-type::before { content: "Start"; }
.frac-up-shape-wrap:last-of-type::before { content: "After ×2"; }

/* Defensive full-width overrides so whichever shape renderStaticFracShape
   picked (bar / circle / square) always fits its column instead of
   forcing it — and the page — wider than the viewport. Bar height in
   particular is set generously here: a fraction bar is only readable
   for a young child if it's tall enough to actually see and count the
   dividing lines, not a thin sliver. */
.frac-up-shape-wrap .frac-parts-bar,
.frac-up-shape-wrap .frac-parts-circle-svg,
.frac-up-shape-wrap .frac-parts-square-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}
/* The bar container itself was already full-width, but its individual
   segments render at a small fixed size by default and don't grow to
   fill it — so the visible colored bar ended up tiny and centered
   inside a much bigger, invisible (transparent-background) box,
   which is what read as "wasted empty space" around it. Forcing each
   segment to flex-grow equally, and to fill the bar's full height,
   makes the actual visible shape use the whole box instead of just a
   sliver of it — matching how the circle already fills its box via
   SVG scaling. */
.frac-up-shape-wrap .frac-parts-bar {
    display: flex !important;
    align-items: stretch !important;
}
.frac-up-shape-wrap .frac-parts-bar-segment {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 100% !important;
}
.frac-up-shape-wrap .frac-parts-bar { height: 88px !important; }
.frac-up-shape-wrap .frac-parts-circle-svg { height: auto !important; display: block; }

/* Darker, thicker dividers — the light default border/stroke this
   inherits from fraction.css is what made the parts hard to tell
   apart in the first place. */
.frac-up-shape-wrap .frac-parts-bar-segment,
.frac-up-shape-wrap .frac-parts-square-cell {
    border-width: 3px !important;
}
.frac-up-shape-wrap .frac-parts-circle-svg path {
    stroke: var(--line) !important;
    stroke-width: 3px !important;
}

.frac-up-arrow {
    position: relative;
    flex: 0 0 auto;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    background: var(--secondary);
    border-radius: 999px;
    padding: 7px 14px;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(30, 58, 95, 0.25);
    z-index: 1;
}
.frac-up-arrow::after {
    content: "▾";
    display: block;
    text-align: center;
    color: var(--secondary);
    font-size: 18px;
    line-height: 0.6;
    margin-top: 2px;
}

/* Answer buttons — bigger tap targets, clearer hover/active/focus
   states, and a second breakpoint that scales them up further for
   tablet and desktop pointers, scoped to this quiz only so the shared
   .quiz-number-opt class other skills use elsewhere is untouched. */
#fracUpOptions.quiz-number-options {
    gap: clamp(14px, 4vw, 22px);
    margin-top: 2px;
}
#fracUpOptions .quiz-number-opt {
    width: 72px;
    height: 72px;
    font-size: 28px;
    border-width: 3px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.08);
    transition: transform 0.12s ease, border-color 0.12s ease,
        background 0.12s ease, box-shadow 0.12s ease;
}
#fracUpOptions .quiz-number-opt:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.06);
    border-color: var(--sky);
    box-shadow: 0 6px 14px rgba(30, 58, 95, 0.18);
}
#fracUpOptions .quiz-number-opt:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 3px rgba(30, 58, 95, 0.15);
}
#fracUpOptions .quiz-number-opt:focus-visible {
    outline: 3px solid var(--sky);
    outline-offset: 3px;
}
#fracUpOptions .quiz-number-opt.is-correct { box-shadow: 0 0 0 4px rgba(34, 192, 141, 0.18); }
#fracUpOptions .quiz-number-opt.is-wrong { box-shadow: 0 0 0 4px rgba(245, 66, 125, 0.15); }

/* Feedback line stands in for the "completed equation" — made bold
   and legible so it's a clear, unmissable payoff of answering. */
#fracUpFeedback.bq-feedback {
    font-size: 16px;
    line-height: 1.4;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Multiply-Up to Find Equivalents — responsive, 360px to desktop ----
   Belt-and-braces scroll safety net: applied to both the overlay and
   the modal (whichever one actually owns the fixed viewport height in
   the shared quiz-popup-theme.css/quiz-modal-responsive.css this page
   also loads), so however tall this quiz's content gets on a given
   screen, the answer options and Next button stay reachable by
   scrolling rather than clipping. Neither the modal's width nor its
   position is touched — it still fills the screen exactly like every
   other skill's popup.

   With scrolling now reliable, shape size below is chosen for what a
   Class 2/3 child actually needs — big enough to see and count each
   part — rather than shrunk down purely to dodge scrolling; a little
   scroll on a short window is a normal, expected trade-off, tiny
   uncountable shapes are not. */
#fracup-quiz-overlay,
#fracup-quiz-overlay .quiz-modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Desktop-only fix: overflow-y:auto above is necessary but wasn't
   sufficient on its own, because .quiz-modal's own height was purely
   content-driven — on a short/normal desktop window the two-circles-
   side-by-side layout below made it taller than the viewport, and
   nothing was capping it, so the overflow-y:auto never actually had
   anything bounded to scroll within. Capping max-height at the
   viewport here (independent of however the shared overlay centers
   the modal — that positioning is intentionally left untouched, so
   the modal keeps filling the page exactly as before) is what makes
   the existing overflow-y:auto kick in and let the answer options +
   Next button scroll into view instead of being pushed off silently.
   Phones never needed this because .frac-up-visual stays a single
   narrow column there, short enough to fit; only the >=900px row
   layout (two shapes side by side) gets tall enough to trigger it. */
@media (min-width: 900px) {
    #fracup-quiz-overlay .quiz-modal {
        max-height: 100vh !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 480px) {
    .frac-up-shape-wrap { max-width: min(400px, 82vw); }
    .frac-up-shape-wrap .frac-parts-bar { height: 96px !important; }
}

@media (min-width: 640px) {
    #fracUpOptions .quiz-number-opt { width: 88px; height: 88px; font-size: 32px; }
}

@media (min-width: 700px) {
    .frac-up-panel { max-width: 680px; }
}

/* >=900px also switches .frac-up-visual to a row (two shapes side by
   side, below). Circle and bar now share one target size per
   breakpoint (the `--frac-shape` variable) instead of being sized
   independently: previously the circle scaled to fill its whole
   column (via SVG width:100%) while the bar's visible size was
   capped separately and much smaller, so bar questions looked tiny
   with huge unused space on either side, while circle questions grew
   large enough to push the Next button off-screen. Tying both to the
   same value fixes both symptoms in one place — turn this one number
   down and circles shrink to leave room for the Next button; turn it
   up and bars get bigger and easier to read, together. Capped by
   viewport height (the `vh` term) too, so an unusually short window
   scales everything down together rather than any shape getting
   cropped. */
@media (min-width: 900px) {
    .frac-up-panel { max-width: 860px; gap: 16px; }
    .frac-up-equation { gap: 20px; }
    .frac-up-equals { font-size: 28px; }

    .frac-up-visual {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 24px;
        --frac-shape: min(230px, 30vh);
    }
    .frac-up-shape-wrap { max-width: var(--frac-shape); flex: 1 1 var(--frac-shape); }
    .frac-up-shape-wrap::before { font-size: 13.5px; }
    .frac-up-shape-wrap .frac-parts-bar { height: calc(var(--frac-shape) * 0.55) !important; }

    .frac-up-arrow { flex: 0 0 auto; }
    .frac-up-arrow::after {
        content: "▸";
        display: inline;
        margin-top: 0;
        margin-left: 4px;
        font-size: 16px;
        line-height: 1;
    }

    #fracUpOptions.quiz-number-options { gap: 16px; }
    #fracUpOptions .quiz-number-opt { width: 84px; height: 84px; font-size: 33px; }
}

@media (min-width: 1200px) {
    .frac-up-panel { max-width: 1000px; }
    .frac-up-visual { --frac-shape: min(270px, 32vh); }
    .frac-up-shape-wrap { flex-basis: var(--frac-shape); }
    #fracUpOptions .quiz-number-opt { width: 90px; height: 90px; font-size: 34px; }
}

/* Short/laptop-height windows only: trim spacing and the shared shape
   size a little further, on top of the vh cap above — this is the
   fallback for genuinely short windows, not the everyday case. */
@media (max-height: 700px) {
    .frac-up-panel { gap: 8px; }
    .frac-up-visual { gap: 4px; --frac-shape: min(180px, 24vh) !important; }
    #fracUpOptions .quiz-number-opt { width: 68px !important; height: 68px !important; font-size: 26px !important; }
}

@media (max-width: 380px) {
    .frac-up-panel { gap: 12px; padding: 0 4px; }
    .frac-up-equation { gap: 8px; }
    #fracUpOptions .quiz-number-opt { width: 66px; height: 66px; font-size: 25px; }
}

/* ================================================================
   Simplify to Lowest Terms (B.4)
   ----------------------------------------------------------------
   The mirror image of B.3: one shape only (no "before/after" pair,
   since there's nothing to compare side by side here — the same
   picture simplifies itself in place). Reuses B.3's own
   .frac-up-equation / .frac-up-equals / .frac-up-blank-side /
   .frac-up-solved-side rules outright for the "a/b = ?" row above the
   shape, and Fraction Match's shared .frac-friendly-picker /
   .frac-friendly-symbol-btn chip row for the answer options below it
   — nothing new needed for either. This file only adds sizing for
   the standalone shape, and the "un-cutting" merge animation that
   plays once the question is answered.
   ================================================================ */

.frac-simplify-panel {
    --line: #7c8ba3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    margin: 6px auto 4px;
    padding: 0 6px;
}

.frac-simplify-shape-wrap {
    width: 100%;
    max-width: min(360px, 84vw);
    box-sizing: border-box;
    margin: 0 auto;
}

/* Defensive full-width overrides, same reasoning as B.3's own
   .frac-up-shape-wrap: whichever shape renderStaticFracShape picked
   always fits its column instead of forcing the popup wider than the
   viewport, and the bar is tall enough for a young child to actually
   see and count the dividing lines. */
.frac-simplify-shape-wrap .frac-parts-bar,
.frac-simplify-shape-wrap .frac-parts-circle-svg,
.frac-simplify-shape-wrap .frac-parts-square-grid {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}
/* Same fix as B.3's frac-up-shape-wrap: segments don't grow to fill
   the bar container on their own, so force them to. */
.frac-simplify-shape-wrap .frac-parts-bar {
    display: flex !important;
    align-items: stretch !important;
}
.frac-simplify-shape-wrap .frac-parts-bar-segment {
    flex: 1 1 0 !important;
    width: auto !important;
    height: 100% !important;
}
.frac-simplify-shape-wrap .frac-parts-bar { height: 96px !important; }
.frac-simplify-shape-wrap .frac-parts-circle-svg { height: auto !important; display: block; }

.frac-simplify-shape-wrap .frac-parts-bar-segment,
.frac-simplify-shape-wrap .frac-parts-square-cell {
    border-width: 3px !important;
    transition: border-color 0.6s ease, background-color 0.6s ease;
}
.frac-simplify-shape-wrap .frac-parts-circle-svg path {
    stroke: var(--line) !important;
    stroke-width: 3px !important;
    transition: stroke-opacity 0.6s ease;
}

/* ---- The "un-cutting" animation itself ----
   Phase 1 (frac-simplify-uncutting, added right when the question is
   graded): every dividing line already on screen fades toward
   transparent over ~0.6s — for the bar/square that's each segment's
   own border-color, for the circle it's every wedge's stroke-opacity
   — plus a gentle scale pulse on the whole shape so the fade reads as
   the parts actively pressing together rather than just vanishing.
   Phase 2 (frac-simplify-settled, added right after
   renderStaticFracShape redraws the same container at the merged
   c/d part count): a quick scale/opacity settle-in so the newly
   simplified shape visibly "arrives" instead of just popping in. */
.frac-simplify-uncutting {
    animation: fracSimplifyPulse 0.6s ease;
}
.frac-simplify-uncutting .frac-parts-bar-segment,
.frac-simplify-uncutting .frac-parts-square-cell {
    border-color: transparent !important;
}
.frac-simplify-uncutting .frac-parts-circle-svg path {
    stroke-opacity: 0 !important;
}

.frac-simplify-settled {
    animation: fracSimplifySettle 0.7s ease;
}

@keyframes fracSimplifyPulse {
    0% { transform: scale(1); }
    45% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes fracSimplifySettle {
    0% { transform: scale(0.86); opacity: 0.35; }
    60% { transform: scale(1.03); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.frac-parts-stage.frac-simplify-correct .frac-simplify-shape-wrap { border-radius: 16px; }
.frac-parts-stage.frac-simplify-wrong .frac-simplify-shape-wrap { border-radius: 16px; }

/* ---- Simplify to Lowest Terms — responsive, 360px to desktop ----
   Same belt-and-braces scroll safety net every other skill popup on
   this page uses, so however tall this quiz's content gets on a
   given screen, the answer chips and Next button stay reachable by
   scrolling rather than clipping. */
#fracsimplify-quiz-overlay,
#fracsimplify-quiz-overlay .quiz-modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Same desktop max-height fix as the Multiply-Up quiz above — see
   the comment on #fracup-quiz-overlay .quiz-modal for why this is
   needed alongside plain overflow-y:auto, and why it deliberately
   doesn't touch how the modal is centered/sized otherwise. */
@media (min-width: 900px) {
    #fracsimplify-quiz-overlay .quiz-modal {
        max-height: 100vh !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 480px) {
    .frac-simplify-shape-wrap { max-width: min(400px, 82vw); }
    .frac-simplify-shape-wrap .frac-parts-bar { height: calc(min(400px, 82vw) * 0.5) !important; }
}

@media (min-width: 700px) {
    .frac-simplify-panel { max-width: 620px; }
}

@media (min-width: 900px) {
    .frac-simplify-panel { max-width: 680px; gap: 14px; }
    .frac-simplify-shape-wrap { max-width: min(300px, 34vh); }
    .frac-simplify-shape-wrap .frac-parts-bar { height: calc(min(300px, 34vh) * 0.55) !important; }
}

@media (min-width: 1200px) {
    .frac-simplify-panel { max-width: 760px; }
    .frac-simplify-shape-wrap { max-width: min(340px, 36vh); }
    .frac-simplify-shape-wrap .frac-parts-bar { height: calc(min(340px, 36vh) * 0.55) !important; }
}

@media (max-height: 700px) {
    .frac-simplify-panel { gap: 8px; }
    .frac-simplify-shape-wrap { max-width: min(220px, 26vh) !important; }
    .frac-simplify-shape-wrap .frac-parts-bar { height: calc(min(220px, 26vh) * 0.55) !important; }
}

@media (max-width: 380px) {
    .frac-simplify-panel { gap: 12px; padding: 0 4px; }
}