/* ================================================================
   class7-math-ch4-common.css
   Shared look for the Class 7 Chapter 4 "Expressions using letter-numbers" quiz popups (all tiers).
   The popup shell, answer chips (always one line of 4), picture stage, svg text classes and animations all come from
   class7-math-ch2-common.css (.c72-overlay). The Chapter 4 popups carry BOTH classes (c72-overlay c74-overlay), so this file
   only adds the few things algebra needs on top:
     - letter-numbers in the question line stand out (soft lavender pill, so n + 5 is easy to spot)
     - expression chips and lettered rows read clearly (even spacing, no wrapping, tabular digits)
     - pictures get a little more room on big screens, and stay compact on small Android phones
     - tables, term boxes and fan arrows used by several tiers
   Load order: after class7-math-ch2-common.css. Tier css files (class7-math-ch4-<tier>.css) hold only tier touches.
   ================================================================ */
.c74-overlay {
    --c74-pill: #efe9ff;
    --c74-pill-ink: #5b3fc9;
}

/* letter-numbers and expressions inside the question line.
   Inline (not inline-block) so a long expression wraps onto the next line on a narrow phone, and each wrapped piece keeps its pill. */
.c74-overlay .quiz-question b {
    display: inline;
    padding: .06em .3em;
    border-radius: 8px;
    background: var(--c74-pill);
    color: var(--c74-pill-ink);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    white-space: normal;
    overflow-wrap: anywhere;
}
.c74-overlay .quiz-question { word-spacing: .04em; }

/* expression chips: keep every chip on its one line, readable digits and signs */
.quiz-overlay.c74-overlay .quiz-modal .c72-picker > .c72-opt {
    font-variant-numeric: tabular-nums;
    letter-spacing: .15px;
}

/* pictures: a little more air on desktop, the same compact card on phones */
.c74-overlay .c72-stage { max-width: 560px; }
@media (min-width: 700px) {
    .c74-overlay .c72-stage { padding: 14px 14px 10px; }
    .c74-overlay .c72-hint { font-size: 14px !important; }
}
@media (max-width: 400px) {
    .c74-overlay .c72-hint { font-size: 12px !important; padding: 3px 10px; }
}

/* term boxes / tables / fan: the ghost "?" cells pulse gently until the child answers */
.c74-overlay .c72-svg .c72-ghost { fill: rgba(255, 255, 255, .92); }
.c74-overlay .c72-svg .c72-soft { fill: #7a72b3; }

/* answers revealed after picking: a soft fade, like the other Class 7 popups */
.c74-overlay .c72-stage .c72-after { transition: opacity .5s ease .1s; }

@media (prefers-reduced-motion: reduce) {
    .c74-overlay .c72-svg * { animation: none !important; transition: none !important; }
}