/* ================================================================
   percent-foundations.css
   ----------------------------------------------------------------
   Styling for "What is a percentage? (Foundations, built on 'out of
   100')" — A.1 Grid of 100 Intro, A.2 "Percent" Means "Per 100",
   A.3 The % Symbol Hunt, and A.4 Full, Half, Empty Grid — on the
   Class 5 Math page. Same conventions as fraction-rwv.css /
   decimal-rwv.css:
     - reuses the shared .quiz-modal / .card / .quiz-number-opt /
       .bq-feedback / .slot-dot classes (and CSS variables like
       --sun, --sky, --pink, --line, --bg-light) from
       common.css / computation.css / quiz-popup-theme.css /
       quiz-modal-responsive.css, already loaded on the page
     - only adds the handful of rules unique to these four skills:
       the 10x10 grid (A.1 + A.4), the plain question card (A.2),
       the four real-world scenes (A.3), and a full-width, always-
       single-line answer-chip row used by all four (.pf-options /
       .pf-opt) since their answers are short phrases and numbers
       rather than the small fixed-circle digits other skills use.
   Loaded on class5-math.html as a plain stylesheet link, after
   fraction-rwv.css / decimal-rwv.css (and after common.css /
   computation.css / quiz-popup-theme.css / quiz-modal-responsive.css):

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

   The matching modal markup lives in partials/percentage-modal.html
   (fragment "percentageModals"), included near the other
   th:replace="~{partials/...-modals :: ...}" blocks.
   ================================================================ */

/* ---- 10x10 Grid of 100 (A.1 Grid of 100 Intro, A.4 Full/Half/Empty) ----
   One shared grid component: 100 small cells in a 10x10 layout.
   A.1 scatters the shaded cells randomly across the grid ("shade
   some squares"); A.4 fills full rows from the top so 50% clearly
   reads as "the top half" and 100%/0% read as fully/not-at-all
   shaded — same visual language as the fraction/decimal bars
   elsewhere on this page (#7ecbff shading). */
.pf-grid100 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 2px;
    width: clamp(220px, 72vw, 320px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    padding: 6px;
    background: #fff;
    border: 3px solid var(--line, #d7dde5);
    border-radius: 14px;
    box-sizing: border-box;
}
.pf-grid100-cell {
    background: #eef1f5;
    border-radius: 2px;
    transition: background 0.15s ease;
}
.pf-grid100-cell.is-shaded {
    background: #7ecbff;
}

/* ---- Plain question card (A.2 "Percent" Means "Per 100") ----
   No visual is needed for this skill's word-origin / "out of 100"
   questions, so the question sentence itself gets a bigger, rounded
   card (same look-and-feel as .frac-target-fraction elsewhere on
   this page) instead of sitting bare above the answer chips. */
.pf-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: 520px;
    font-size: clamp(15px, 4vw, 19px);
    font-weight: 700;
    line-height: 1.45;
    color: #1E3A5F;
    text-align: center;
}

/* ---- Real-world scenes (A.3 The % Symbol Hunt) ----
   Four small CSS-drawn scenes: a sale tag, a battery icon, a
   weather-app reading, and an exam marksheet — each displaying a
   percentage the child has to read and match. Each renders as the
   single child of the shared .frac-parts-stage wrap (from
   fraction.css), which already centers it with its own vertical
   margin — no extra wrapper needed here. */

/* Sale tag */
.pf-scene-tag {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #f5427d, #ff6b6b);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 20px 30px;
    border-radius: 16px;
    box-shadow: 0 4px 10px rgba(30, 58, 95, 0.18);
    font-size: clamp(18px, 5.5vw, 24px);
    text-align: center;
}
.pf-scene-tag-sub {
    display: block;
    font-size: 0.6em;
    font-weight: 700;
    opacity: 0.95;
}

/* Battery icon */
.pf-scene-battery {
    position: relative;
    width: clamp(130px, 34vw, 160px);
    height: clamp(58px, 15vw, 70px);
    border: 4px solid #1E3A5F;
    border-radius: 10px;
    background: #fff;
    padding: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
}
.pf-scene-battery::after {
    content: "";
    position: absolute;
    right: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 24px;
    background: #1E3A5F;
    border-radius: 0 3px 3px 0;
}
.pf-scene-battery-fill {
    height: 100%;
    background: #22c08d;
    border-radius: 5px;
    transition: width 0.2s ease;
}
.pf-scene-battery-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #1E3A5F;
    font-size: clamp(15px, 4.4vw, 18px);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Weather app reading */
.pf-scene-weather {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #eef6ff;
    border: 3px solid #cfe6ff;
    border-radius: 16px;
    padding: 18px 26px;
}
.pf-scene-weather-icon {
    font-size: clamp(38px, 10vw, 50px);
    line-height: 1;
}
.pf-scene-weather-text {
    font-weight: 800;
    color: #1E3A5F;
    font-size: clamp(15px, 4vw, 18px);
    text-align: center;
}

/* Exam marksheet */
.pf-scene-marksheet {
    background: #fff;
    border: 3px dashed #8a94a6;
    border-radius: 12px;
    padding: 16px 26px;
    text-align: center;
    min-width: 160px;
}
.pf-scene-marksheet-title {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #8a94a6;
    font-weight: 700;
    margin-bottom: 4px;
}
.pf-scene-marksheet-score {
    font-size: clamp(24px, 7vw, 32px);
    font-weight: 800;
    color: #1E3A5F;
}

/* ================================================================
   Answer-chip row — shared by all four skills (A.1-A.4)
   ----------------------------------------------------------------
   Every answer here is a short phrase or a percent value rather
   than a single digit, so these chips read as full-width text
   pills instead of the small fixed circle other skills use
   elsewhere on this page. `flex-wrap: nowrap` + `flex: 1 1 0` on
   every chip is what forces all 4 options onto a single row no
   matter how narrow the screen is (down to small Android phone
   widths, ~320px) — text is allowed to wrap to a second line
   *inside* a chip instead, and font size shrinks gradually via
   clamp() so labels stay readable rather than getting clipped.
   ================================================================ */
.pf-picker {
    /* .frac-friendly-picker (fraction.css) caps its own width at
       max-width: 420px — fine for Fraction Match's short fraction
       chips, but too tight for our longer phrase/percent chips on
       larger screens. Freed here; .pf-options below sets the actual
       responsive width instead. */
    max-width: none !important;
}
.pf-options.quiz-number-options {
    /* Confirmed in fraction.css: .frac-friendly-picker .quiz-number-
       -options sets `flex-wrap: wrap`, which is exactly the "chips
       drop to a second line on narrow screens" behavior we don't
       want here — `!important` below is a deliberate, minimal
       override of just that one property (plus flex-basis on each
       chip); everything else is left to cascade normally. */
    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;
}
.pf-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;
}
.pf-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);
}
.pf-opt.quiz-number-opt:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 3px rgba(30, 58, 95, 0.15);
}
.pf-opt.quiz-number-opt:focus-visible {
    outline: 3px solid var(--sky, #2e9bf5);
    outline-offset: 2px;
}
.pf-opt.quiz-number-opt.is-correct { box-shadow: 0 0 0 4px rgba(34, 192, 141, 0.18); }
.pf-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) {
    .pf-options.quiz-number-options { gap: 5px; margin-top: 12px; }
    .pf-opt.quiz-number-opt {
        font-size: 10.5px;
        min-height: 48px;
        padding: 7px 3px;
        border-radius: 12px;
    }
}

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

/* Tablet and up */
@media (min-width: 700px) {
    .pf-options.quiz-number-options { max-width: 640px; gap: 16px; }
    .pf-opt.quiz-number-opt { font-size: 16px; min-height: 64px; padding: 14px 14px; }
    .pf-grid100 { width: clamp(260px, 34vw, 340px); }
}

/* Desktop */
@media (min-width: 1024px) {
    .pf-options.quiz-number-options { max-width: 680px; }
    .pf-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) {
    .pf-grid100 { width: clamp(180px, 46vw, 240px); }
    .frac-parts-stage { margin: 8px auto 4px; }
    .pf-question-card { padding: 14px 18px; margin: 6px auto 4px; }
    .pf-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. */
#pctintro-quiz-overlay .quiz-modal,
#pctmeaning-quiz-overlay .quiz-modal,
#pctspot-quiz-overlay .quiz-modal,
#pctfhe-quiz-overlay .quiz-modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}