/* ================================================================
   percent-rwv.css
   ----------------------------------------------------------------
   Styling for "Reading, Writing & Visualizing Percentages" (Tier 2,
   built on top of the "What is a percentage?" foundations tier) —
   A.1 Shade-the-Grid, A.2 Percent <-> Grid Match, A.3 Percent Bar,
   A.4 Percent on a 0-100 Number Line, and A.5 Real-World Percent
   Spotting — on the Class 5 Math page.

   Same conventions as percent-foundations.css / 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, --purple, --line, --bg-light) from
       common.css / computation.css / quiz-popup-theme.css /
       quiz-modal-responsive.css, already loaded on the page
     - ALSO reuses .pf-options / .pf-opt / .pf-picker / .pf-grid100 /
       .pf-question-card from percent-foundations.css (single-line,
       4-chip answer rows and the 10x10 grid component) — this file
       must be linked AFTER percent-foundations.css.
     - only adds the handful of rules unique to these five skills:
       the mini grid used as an answer *choice* itself (A.1), the
       percent bar / fraction-strip-style fill (A.3), the 0-100
       number line with a marker (A.4), and five new real-world
       scenes (A.5) that are visually distinct from the Symbol
       Hunt scenes in percent-foundations.css.

   Loaded on class5-math.html as a plain stylesheet link, right
   after percent-foundations.css:

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

   The matching modal markup lives alongside the foundations modals
   in partials/percentage-modals.html (same fragment,
   "percentageModals"), so no extra th:replace block is needed.
   ================================================================ */

/* ---- Mini grid used AS an answer chip (A.1 Shade-the-Grid) ----
   Reverse of Grid of 100 Intro / Percent <-> Grid Match: instead of
   reading a grid and picking a % label, the child reads a % target
   and picks the grid that correctly shows it shaded. Each of the 4
   answer chips renders one of these small 10x10 grids instead of
   text, so it needs its own compact cell size distinct from the
   full-size .pf-grid100 used elsewhere on this page. */
.prw-minigrid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 1px;
    width: clamp(34px, 15vw, 56px);
    aspect-ratio: 1 / 1;
    padding: 3px;
    background: #fff;
    border: 2px solid var(--line, #d7dde5);
    border-radius: 6px;
    box-sizing: border-box;
    pointer-events: none;
}
.prw-minigrid-cell {
    background: #eef1f5;
    border-radius: 1px;
}
.prw-minigrid-cell.is-shaded {
    background: #7ecbff;
}

/* Grid-choice chips reuse .pf-opt / .quiz-number-opt (single-line,
   nowrap row of 4) but need a taller, padding-light layout so the
   mini grid sits centered with no leftover text baseline space. The
   parent row keeps the same forced single-line behavior as every
   other answer row on this page. */
.prw-grid-options.quiz-number-options {
    align-items: stretch;
}
.prw-grid-opt.quiz-number-opt {
    padding: 6px !important;
    min-height: 58px;
}
.prw-grid-opt.quiz-number-opt.is-correct .prw-minigrid { border-color: #22c08d; }
.prw-grid-opt.quiz-number-opt.is-wrong .prw-minigrid { border-color: #f5427d; }

@media (max-width: 380px) {
    .prw-minigrid { width: clamp(30px, 14vw, 44px); }
    .prw-grid-opt.quiz-number-opt { min-height: 50px; padding: 4px !important; }
}
@media (min-width: 480px) {
    .prw-grid-opt.quiz-number-opt { min-height: 66px; }
}
@media (min-width: 700px) {
    .prw-minigrid { width: clamp(56px, 7vw, 76px); }
    .prw-grid-opt.quiz-number-opt { min-height: 84px; }
}

/* ---- Percent Bar (A.3 — same idea as the Fraction Strip) ----
   A single horizontal bar/track that fills left-to-right to the
   target percent, with light tick marks at the quarter points so
   25/50/75 stay easy visual anchors, same role the quarter ticks
   play on the fraction strip activity. */
.prw-bar-wrap {
    width: 100%;
    max-width: 420px;
    margin: 10px auto 4px;
}
.prw-bar-track {
    position: relative;
    width: 100%;
    height: clamp(30px, 8vw, 40px);
    background: #eef1f5;
    border: 3px solid var(--line, #d7dde5);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}
.prw-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7ecbff, #2e9bf5);
    border-radius: 8px 0 0 8px;
    transition: width 0.2s ease;
}
.prw-bar-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(30, 58, 95, 0.18);
    transform: translateX(-1px);
}
.prw-bar-ticklabels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: clamp(10px, 2.6vw, 12px);
    font-weight: 700;
    color: #8a94a6;
    padding: 0 2px;
}

@media (min-width: 700px) {
    .prw-bar-wrap { max-width: 480px; }
}

/* ---- 0-100 Number Line (A.4 — sibling of the fraction number line) ----
   A single horizontal line with labeled ticks at 0/25/50/75/100 and
   a small triangular marker/pin positioned at the target percent,
   the same "place it, then read where it landed" visual language as
   the fraction number-line activity elsewhere on this page. */
.prw-numline-wrap {
    width: 100%;
    max-width: 420px;
    margin: 26px auto 18px;
    padding: 0 6px;
    box-sizing: border-box;
}
.prw-numline {
    position: relative;
    height: 4px;
    background: var(--line, #d7dde5);
    border-radius: 2px;
    margin-top: 34px;
}
.prw-numline-tick {
    position: absolute;
    top: -5px;
    width: 2px;
    height: 14px;
    background: #1E3A5F;
    transform: translateX(-1px);
}
.prw-numline-label {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 700;
    color: #1E3A5F;
    white-space: nowrap;
}
.prw-numline-marker {
    position: absolute;
    top: -34px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #f5427d;
    font-size: 18px;
    line-height: 1;
}
.prw-numline-marker::after {
    content: "";
    display: block;
    width: 2px;
    height: 22px;
    background: #f5427d;
    margin-top: -2px;
}

@media (min-width: 700px) {
    .prw-numline-wrap { max-width: 500px; margin: 30px auto 20px; }
}

/* ================================================================
   Real-World Percent Spotting scenes (A.5)
   ----------------------------------------------------------------
   Five new CSS-drawn scenes, deliberately different in shape/style
   from the four in percent-foundations.css's Symbol Hunt (sale tag,
   rectangular battery, weather box, marksheet) so the two "spot the
   %" skills still feel like distinct activities: a circular battery
   ring, a starburst discount tag, a phone-style quiz-match badge, a
   download progress bar, and a rain-chance dial. Each renders as the
   single child of the shared .frac-parts-stage wrap, same as the
   Symbol Hunt scenes.
   ================================================================ */

/* Battery ring (circular, instead of Symbol Hunt's rectangle) */
.prw-scene-battery {
    position: relative;
    width: clamp(110px, 30vw, 140px);
    height: clamp(110px, 30vw, 140px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.prw-scene-battery-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.prw-scene-battery-inner {
    position: relative;
    width: 72%;
    height: 72%;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 3px #1E3A5F;
}
.prw-scene-battery-icon { font-size: clamp(18px, 5vw, 22px); }
.prw-scene-battery-pct {
    font-weight: 800;
    color: #1E3A5F;
    font-size: clamp(15px, 4.2vw, 18px);
}

/* Discount starburst tag */
.prw-scene-discount {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(120px, 32vw, 150px);
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #ff6b6b, #f5427d);
    clip-path: polygon(50% 0%, 61% 18%, 82% 10%, 82% 32%, 100% 40%,
        88% 58%, 96% 78%, 76% 78%, 68% 98%, 50% 84%, 32% 98%, 24% 78%,
        4% 78%, 12% 58%, 0% 40%, 18% 32%, 18% 10%, 39% 18%);
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 10px rgba(30, 58, 95, 0.18);
}
.prw-scene-discount-inner { display: flex; flex-direction: column; align-items: center; }
.prw-scene-discount-pct { font-weight: 800; font-size: clamp(18px, 5.2vw, 24px); }
.prw-scene-discount-sub { font-size: 0.5em; font-weight: 700; letter-spacing: 0.04em; }

/* Quiz-app match badge (phone-bubble style) */
.prw-scene-quizmatch {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 3px solid #cfe6ff;
    border-radius: 20px;
    padding: 18px 26px;
    box-shadow: 0 4px 10px rgba(30, 58, 95, 0.1);
}
.prw-scene-quizmatch-icon {
    width: clamp(46px, 12vw, 56px);
    height: clamp(46px, 12vw, 56px);
    border-radius: 50%;
    background: #eef6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 5.5vw, 26px);
}
.prw-scene-quizmatch-pct {
    font-weight: 800;
    color: #1E3A5F;
    font-size: clamp(17px, 4.6vw, 21px);
}
.prw-scene-quizmatch-label {
    font-size: 12px;
    font-weight: 700;
    color: #8a94a6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Download progress bar scene */
.prw-scene-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: clamp(200px, 60vw, 260px);
}
.prw-scene-download-icon { font-size: clamp(22px, 6vw, 28px); color: #1E3A5F; }
.prw-scene-download-track {
    position: relative;
    width: 100%;
    height: clamp(20px, 5.5vw, 26px);
    background: #eef1f5;
    border: 3px solid var(--line, #d7dde5);
    border-radius: 999px;
    overflow: hidden;
    box-sizing: border-box;
}
.prw-scene-download-fill {
    height: 100%;
    background: linear-gradient(90deg, #22c08d, #7ecbff);
}
.prw-scene-download-pct {
    font-weight: 800;
    color: #1E3A5F;
    font-size: clamp(14px, 4vw, 17px);
}

/* Rain-chance dial (semi-circular gauge) */
.prw-scene-raindial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.prw-scene-raindial-arc {
    position: relative;
    width: clamp(120px, 32vw, 150px);
    height: clamp(60px, 16vw, 75px);
    overflow: hidden;
}
.prw-scene-raindial-arc::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 150px 150px 0 0;
    background: conic-gradient(from 270deg at 50% 100%,
        #2e9bf5 calc(var(--rain-pct, 50) * 1%),
        #eef1f5 0);
}
.prw-scene-raindial-arc::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: 0;
    top: 22%;
    background: #fff;
    border-radius: 150px 150px 0 0;
}
.prw-scene-raindial-pct {
    position: relative;
    z-index: 1;
    font-weight: 800;
    color: #1E3A5F;
    font-size: clamp(16px, 4.4vw, 19px);
    margin-top: -22px;
}
.prw-scene-raindial-label {
    font-size: 12px;
    font-weight: 700;
    color: #8a94a6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Short windows / landscape phones — trim vertical spacing so the
   Next button stays reachable, same belt-and-braces pattern as
   percent-foundations.css. */
@media (max-height: 700px) {
    .prw-numline-wrap { margin: 18px auto 12px; }
    .prw-bar-wrap { margin: 6px auto 4px; }
    .frac-parts-stage { margin: 8px auto 4px; }
}

/* Scroll safety net for the five new overlays on this page, same
   pattern used for every skill on the page: however tall a given
   question's content gets on a short screen, the chips and Next
   button stay reachable by scrolling. */
#pctshade-quiz-overlay .quiz-modal,
#pctgridmatch-quiz-overlay .quiz-modal,
#pctbar-quiz-overlay .quiz-modal,
#pctnumline-quiz-overlay .quiz-modal,
#pctrwspot-quiz-overlay .quiz-modal {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}