/* ================================================================
percent-compare.css
----------------------------------------------------------------
Styles for the "Comparing & Ordering Percentages" skill group on
the Class 5 Math page — the direct sibling of Fraction Comparing
& Ordering's .frac-cmp-* /.frac-bench-* /.frac-order-* classes in
fraction-compare.css, adapted so every shape is a plain
percent-fill bar (0-100%) instead of a fraction shape, since a
percentage never needs a denominator picker — it's always "out of
100":
- A.1 Side-by-Side Bars Compare — "Which is more, 30% or 45%?"
Two vertical percent-fill bars sit side by side with a
"vs" divider between them, each carrying its own big "X%"
label underneath and acting as the tappable answer itself
— same one-shot tap-to-grade pattern as Fraction Comparing
& Ordering's Same Denominator Compare. (.pct-cmp-*)
- A.2 Benchmark Percentages (vs 0%, 50%, 100%) — "Is 62% closer
to half or to full?" A single percent-fill bar with its
label sits above three plain pill buttons — 0%, 50%,
100% — reusing the same pill look as the fraction
benchmark activity. (.pct-bench-*)
- A.3 Ordering 3-4 Percentages — "Drag these into order,
smallest to largest." 3 or 4 percent cards (small
percent-fill bar + big label) sit in a row the child can
drag to reorder, then tap "Check My Order" to grade the
whole arrangement at once. (.pct-order-*)
- A.4 Percent vs Fraction vs Decimal Ordering — the same
drag-to-order interaction as A.3, but each card shows one
of three *representations* of a value (a percent, a
fraction, or a decimal) with a small colored tag naming
which it is, and no percent-fill bar — the point of this
skill is converting between forms in your head, not
reading a bar. (.pct-mix-*)
Every answer row on this page (2 bars, 3 pills, or up to 4 drag
cards) is forced to stay on a SINGLE horizontal line at every
supported width — flex-wrap: nowrap everywhere, with flexible
min/max widths (not fixed px) so 2-4 items always divide up the
available row width on common Android phone screens (360px-430px)
as well as desktop, and an overflow-x:auto safety net only ever
kicks in on truly tiny/zoomed viewports.
This file depends on classes already styled elsewhere:
- .bq-* / .quiz-* / .card classes from quiz-popup-theme.css and
quiz-modal-responsive.css, for the modal shell, slot tracker,
progress line, feedback banner, and star-reward summary card
Load AFTER the shared quiz theme files, e.g.:
================================================================ */
/* ================================================================
Shared percent-fill bar (used by A.1, A.2, A.3)
================================================================ */
/* The bar itself is now a self-contained inline SVG (built in
percent-compare.js) that paints its own track, border, and
gradient fill directly with literal colors — nothing here depends
on CSS custom properties resolving correctly. This wrapper is
responsible for RESPONSIVE SIZING ONLY: it's a plain box whose
width/height (overridden per-context and per-breakpoint below)
the SVG fills at width:100%/height:100%. */
.pct-bar-track {
position: relative;
width: 56px;
height: 120px;
box-sizing: border-box;
flex: 0 0 auto;
}
.pct-bar-num {
margin-top: 10px;
font-weight: 800;
font-size: 20px;
color: var(--secondary, #1e3a5f);
text-align: center;
white-space: nowrap;
}
/* ---------- Side-by-Side Bars Compare (A.1) ---------- */
.pct-cmp-pair {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 22px;
margin: 18px auto 6px;
flex-wrap: nowrap;
}
/* Each side of the comparison is its own plain