/* ================================================================
   percent-quantity.css
   ----------------------------------------------------------------
   Styling for "Percentage of a Quantity" (Tier 5) — A.1 Percent of
   a Set (Grouping, visual), A.2 Percent of a Number (Numeric), A.3
   Friendly Percent Shortcuts, A.4 The General Method (x/100), and
   A.5 Real-World Percent-of-Quantity Problems — on the Class 5 Math
   page.

   This file is fully self-contained (its own pq- prefixed classes)
   so it does not depend on percent-foundations.css / percent-rwv.css
   / percent-frac-dec-bridge.css / percent-compare.css being loaded
   in any particular order — it only reuses the shared site-wide
   shell classes already loaded on the page (.quiz-modal, .card,
   .quiz-number-opt, .bq-feedback, .slot-dot, --sun/--sky/--line/
   --bg-light CSS variables, etc.) from common.css / computation.css
   / quiz-popup-theme.css / quiz-modal-responsive.css.

   Loaded on class5-math.html as a plain stylesheet link, after the
   other percent-*.css files:

     <link rel="stylesheet" th:href="@{/css/percent-quantity.css}" />

   The matching modal markup lives alongside the other percentage
   modals in partials/percentage-modals.html.
   ================================================================ */

/* ---- Question card (A.2, A.3 concept questions, A.4, A.5) ----
   No visual is needed for these skills' "percent of a number" /
   shortcut / formula / word-problem questions, so the question
   sentence itself gets a bigger, rounded card instead of sitting
   bare above the answer chips — same idea as .pf-question-card. */
.pq-question-card {
    background: var(--bg-light, #f5f7fa);
    border: 3px solid var(--line, #d7dde5);
    border-radius: 18px;
    padding: 20px 22px;
    margin: 10px auto 6px;
    max-width: 560px;
    font-size: clamp(15px, 4vw, 19px);
    font-weight: 700;
    line-height: 1.45;
    color: #1E3A5F;
    text-align: center;
}

/* ---- Formula reminder banner (A.4 The General Method) ----
   A small, always-visible pill reminding the child of the formula
   before every question, so the "grown-up method" stays anchored
   even as the specific numbers change each time. */
.pq-formula-banner {
    display: inline-block;
    margin: 6px auto 2px;
    padding: 8px 18px;
    background: linear-gradient(135deg, #fff6dd, #ffe9b3);
    border: 2px solid #f0c95c;
    border-radius: 999px;
    color: #7a5b00;
    font-weight: 800;
    font-size: clamp(12px, 3.4vw, 15px);
    text-align: center;
    max-width: 90%;
}

/* ---- Percent-of-a-Set groups (A.1 Percent of a Set) ----
   A row of equal-sized "group" boxes, each holding a small cluster
   of dots standing in for real objects (marbles, stickers, etc).
   Shading the leading N groups (sequential fill, same convention as
   the Full/Half/Empty grid) makes "1 shaded group out of 4" read
   clearly as 25% before any arithmetic is needed. */
.pq-groups-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(6px, 2vw, 12px);
    max-width: 560px;
    margin: 10px auto 4px;
}
.pq-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 3px solid var(--line, #d7dde5);
    border-radius: 14px;
    padding: 8px;
    min-width: 46px;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.pq-group.is-shaded {
    background: rgba(46, 155, 245, 0.10);
    border-color: var(--sky, #2e9bf5);
}
.pq-group-dots {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    justify-items: center;
}
.pq-dot {
    width: clamp(9px, 2.6vw, 13px);
    height: clamp(9px, 2.6vw, 13px);
    border-radius: 50%;
    background: #cfd8e3;
}
.pq-group.is-shaded .pq-dot {
    background: var(--sky, #2e9bf5);
}
.pq-group-count {
    font-size: clamp(10px, 2.6vw, 12px);
    font-weight: 700;
    color: #8a94a6;
}
.pq-group.is-shaded .pq-group-count {
    color: #1E3A5F;
}

/* ================================================================
   Answer-chip row — shared by all five skills (A.1-A.5)
   ----------------------------------------------------------------
   Same "forced single line, no matter how narrow the screen" trick
   as percent-foundations.css's .pf-options / .pf-opt, kept here as
   its own pq- prefixed copy so this file has no dependency on that
   one: flex-wrap: nowrap + flex: 1 1 0 on every chip keeps all 4
   options on one row down to small Android phone widths (~320px),
   with text wrapping to a second line *inside* a chip and font size
   shrinking gradually via clamp() rather than any chip getting
   clipped or dropping to its own row.
   ================================================================ */
.pq-picker {
    max-width: none !important;
}
.pq-options.quiz-number-options {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    justify-content: center;
    gap: clamp(6px, 2vw, 14px);
    width: 100%;
    max-width: 560px;
    margin: 16px auto 4px;
    box-sizing: border-box;
}
.pq-opt.quiz-number-opt {
    flex: 1 1 0 !important;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    padding: clamp(8px, 2.4vw, 14px) clamp(4px, 1.8vw, 12px);
    font-size: clamp(11px, 3.1vw, 15px);
    line-height: 1.25;
    border-radius: 14px;
    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;
}
.pq-opt.quiz-number-opt:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--sky, #2e9bf5);
    box-shadow: 0 6px 14px rgba(30, 58, 95, 0.16);
}
.pq-opt.quiz-number-opt:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 3px rgba(30, 58, 95, 0.15);
}
.pq-opt.quiz-number-opt:focus-visible {
    outline: 3px solid var(--sky, #2e9bf5);
    outline-offset: 2px;
}
.pq-opt.quiz-number-opt.is-correct { box-shadow: 0 0 0 4px rgba(34, 192, 141, 0.18); }
.pq-opt.quiz-number-opt.is-wrong { box-shadow: 0 0 0 4px rgba(245, 66, 125, 0.15); }

/* Very small Android phone widths — tighten further so 4 chips
   still fit on one line without any text getting cut off. */
@media (max-width: 380px) {
    .pq-options.quiz-number-options { gap: 5px; margin-top: 12px; }
    .pq-opt.quiz-number-opt {
        font-size: 10.5px;
        min-height: 48px;
        padding: 7px 3px;
        border-radius: 12px;
    }
    .pq-group { min-width: 38px; padding: 6px; }
    .pq-group-dots { grid-template-columns: repeat(2, 1fr); }
}

/* Slightly larger phones / small tablets */
@media (min-width: 480px) {
    .pq-opt.quiz-number-opt { font-size: 15px; min-height: 58px; }
}

/* Tablet and up */
@media (min-width: 700px) {
    .pq-options.quiz-number-options { max-width: 640px; gap: 16px; }
    .pq-opt.quiz-number-opt { font-size: 16px; min-height: 64px; padding: 14px 14px; }
    .pq-group { min-width: 56px; padding: 10px; }
    .pq-dot { width: 14px; height: 14px; }
}

/* Desktop */
@media (min-width: 1024px) {
    .pq-options.quiz-number-options { max-width: 680px; }
    .pq-opt.quiz-number-opt { font-size: 17px; }
}

/* Short windows / landscape phones — keep the Next button reachable
   by trimming vertical spacing rather than shrinking chips below a
   readable size. */
@media (max-height: 700px) {
    .pq-groups-wrap { margin: 6px auto 4px; }
    .frac-parts-stage { margin: 8px auto 4px; }
    .pq-question-card { padding: 14px 18px; margin: 6px auto 4px; }
    .pq-options.quiz-number-options { margin-top: 10px; }
}

/* Belt-and-braces scroll safety net, same pattern used for every
   other skill's overlay on this page: however tall a given
   question's content gets on a short screen, the chips and Next
   button stay reachable by scrolling rather than being clipped. The
   overlay's own centering/positioning is left untouched. */
#pqset-quiz-overlay .quiz-modal,
#pqnum-quiz-overlay .quiz-modal,
#pqshort-quiz-overlay .quiz-modal,
#pqgen-quiz-overlay .quiz-modal,
#pqworld-quiz-overlay .quiz-modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}