/* ================================================================
fraction-applied-pro.css
----------------------------------------------------------------
Styles for the "Applied & 'Pro' Level" fraction skill group on
the Class 4 Math page:
- A.1 Fraction Word Problems (multi-step) — a short story card
(recipes, allowance/money, measuring) that wraps a
same-family-denominator add/subtract, answered from
fraction chips (new .ap-word-* classes).
- A.2 Simplifying After Operations (mandatory step) — an
equation row (add / subtract / multiply two fractions)
where the *unsimplified-but-numerically-correct* result
is always offered as a trap chip, enforcing "reduce your
answer" as a required last step (new .ap-eq-* classes).
- A.3 Fraction Estimation Warm-Up — a friend's quick guess at a
fraction sum or product is shown; the child judges it as
"Too Low", "About Right", or "Too High" *before* being
told the exact answer (new .ap-guess-* classes, reusing
.ap-picker with 3 chips instead of 4).
- A.4 Spot the Mistake (Fractions) — a worked equation is shown
with a classic error (add-straight-across, multiply-
forgot-a-denominator, "simplify" by subtracting instead
of dividing) clearly flagged wrong; the child picks the
true correct answer (new .ap-wrong-* classes).
- A.5 Fraction Fact-Family / Inverse Check — a true
multiplication-of-a-fraction fact is shown, and the
child completes the matching inverse (division) fact,
or vice-versa (reuses .ap-eq-row).
- A.6 Ratio & Proportion Bridge — a small dot array shows a
two-color ratio (e.g. "3 red : 2 blue"); the child names
what fraction of the whole group one color makes up (new
.ap-ratio-* classes).
Every skill here shares the same 5-question-per-slot / star-
reward / "practice more?" quiz shell as the rest of the site (via
the .bq- / .quiz- classes from quiz-popup-theme.css and quiz-
modal-responsive.css, loaded elsewhere). This file defines its
own self-contained "ap-" prefixed classes (including its own
answer-chip wrapper, .ap-picker, and its own stacked-fraction
renderer, .ap-frac) instead of reusing any other skill file's
markup, so it has no hidden cross-file dependency — same
philosophy as decimal-rwv.css's .drw-* classes. Load this file
after the shared quiz shell stylesheets, e.g.:
================================================================ */
/* ---------- shared: stacked fraction renderer ---------- */
/* Used both inside answer chips (.ap-opt) and inside equation rows
(.ap-eq-row) so a fraction always reads as numerator-over-
denominator with a dividing line, never as flat "3/4" text. */
.ap-frac-chip {
display: inline-flex;
align-items: center;
gap: 3px;
line-height: 1;
}
.ap-frac-whole {
font-weight: 800;
font-size: 1em;
margin-right: 1px;
}
.ap-frac {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.ap-frac-num,
.ap-frac-den {
display: block;
line-height: 1.15;
font-weight: 800;
padding: 0 2px;
}
.ap-frac-num {
border-bottom: 2.5px solid currentColor;
}
/* ---------- shared: answer-chip picker row ---------- */
/* flex-wrap is intentionally "nowrap": whether a question shows 3
chips (Estimation Warm-Up) or 4 chips (every other skill here),
they must always sit in a single row, never wrap to a second
line. Each .ap-opt is a flexible (not fixed-width) item so the
row shrinks to fit the quiz card instead of wrapping. */
.ap-picker {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap;
gap: 10px;
margin: 18px auto 4px;
width: 100%;
max-width: 420px;
}
.ap-opt {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0;
max-width: 170px;
padding: 12px 6px;
height: auto !important;
min-height: 56px !important;
max-height: none !important;
box-sizing: border-box !important;
white-space: normal !important;
overflow: visible;
font-weight: 800;
font-size: 17px;
color: var(--secondary);
text-align: center;
line-height: 1.2;
}
.quiz-number-opt.ap-opt.is-correct {
border-color: #10b981;
background: rgba(16,185,129,0.08);
box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}
.quiz-number-opt.ap-opt.is-wrong {
border-color: #ef4444;
background: rgba(239,68,68,0.08);
box-shadow: 0 0 0 3px rgba(239,68,68,0.18);
}
/* the 3-chip Estimation variant gets slightly wider chips since
there's more room, and text-labelled chips (not fractions) */
.ap-picker.ap-picker-3 .ap-opt {
max-width: 220px;
font-size: 15.5px;
letter-spacing: 0.2px;
}
/* ---------- A.1 Fraction Word Problems ---------- */
.ap-word-card {
display: flex;
align-items: flex-start;
gap: 12px;
background: var(--card, #fff);
border: 1.5px solid var(--line);
border-radius: 14px;
padding: 16px 18px;
margin: 10px auto 6px;
max-width: 440px;
text-align: left;
}
.ap-word-icon {
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--purple);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
}
.ap-word-text {
font-weight: 700;
font-size: 15px;
color: var(--text);
line-height: 1.5;
}
.ap-word-text b { color: var(--secondary); }
/* ---------- A.2 / A.5 equation rows (also reused for A.4) ---------- */
.ap-eq-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: 16px auto 6px;
font-size: 26px;
color: var(--secondary);
max-width: 440px;
}
.ap-eq-sym {
font-weight: 800;
font-size: 24px;
color: var(--text);
}
.ap-eq-qmark {
font-weight: 900;
font-size: 30px;
color: var(--pink);
min-width: 34px;
text-align: center;
}
.ap-eq-row .ap-frac-num,
.ap-eq-row .ap-frac-den { font-size: 22px; }
.ap-mandatory-note {
display: block;
text-align: center;
font-weight: 700;
font-size: 12.5px;
color: var(--purple);
margin: 2px auto 0;
}
/* ---------- A.4 Spot the Mistake ---------- */
.ap-wrong-card {
background: rgba(239,68,68,0.06);
border: 1.5px dashed #ef4444;
border-radius: 14px;
padding: 14px 16px 10px;
margin: 12px auto 4px;
max-width: 440px;
}
.ap-wrong-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 800;
font-size: 12.5px;
color: #ef4444;
background: rgba(239,68,68,0.12);
border-radius: 999px;
padding: 3px 10px;
margin-bottom: 8px;
}
.ap-wrong-eq {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
font-size: 22px;
color: var(--text);
}
.ap-wrong-eq .ap-frac-num,
.ap-wrong-eq .ap-frac-den { font-size: 19px; }
.ap-wrong-explain {
text-align: center;
font-weight: 600;
font-size: 13px;
color: var(--text);
opacity: 0.85;
margin-top: 8px;
}
/* ---------- A.3 Estimation Warm-Up ---------- */
.ap-guess-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 10px auto 4px;
max-width: 420px;
}
.ap-guess-eq {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
font-size: 22px;
color: var(--secondary);
}
.ap-guess-eq .ap-frac-num,
.ap-guess-eq .ap-frac-den { font-size: 19px; }
.ap-guess-bubble {
display: flex;
align-items: center;
gap: 8px;
background: var(--sky);
border-radius: 999px;
padding: 8px 18px;
font-weight: 800;
font-size: 15.5px;
color: #16324a;
}
.ap-guess-bubble i { font-size: 15px; }
/* ---------- A.6 Ratio & Proportion Bridge ---------- */
.ap-ratio-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 10px auto 4px;
}
.ap-ratio-dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 7px;
max-width: 300px;
}
.ap-ratio-dot {
width: 22px;
height: 22px;
border-radius: 50%;
box-shadow: inset 0 -2px 3px rgba(0,0,0,0.15);
}
.ap-ratio-legend {
display: flex;
gap: 16px;
font-weight: 700;
font-size: 13px;
color: var(--text);
}
.ap-ratio-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.ap-ratio-swatch {
width: 13px;
height: 13px;
border-radius: 50%;
display: inline-block;
}
.ap-ratio-caption {
font-weight: 700;
font-size: 14px;
color: var(--text);
text-align: center;
}
/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
.ap-picker { gap: 7px; margin: 14px auto 4px; max-width: 340px; }
.ap-opt { padding: 9px 5px; font-size: 15px; min-height: 50px !important; }
.ap-picker.ap-picker-3 .ap-opt { font-size: 12.5px; padding: 8px 4px; }
.ap-word-card { padding: 13px 14px; gap: 10px; }
.ap-word-icon { width: 32px; height: 32px; font-size: 14px; }
.ap-word-text { font-size: 13.5px; }
.ap-eq-row { font-size: 21px; gap: 7px; }
.ap-eq-sym { font-size: 19px; }
.ap-eq-qmark { font-size: 24px; min-width: 28px; }
.ap-eq-row .ap-frac-num, .ap-eq-row .ap-frac-den { font-size: 17px; }
.ap-wrong-card { padding: 11px 12px 8px; }
.ap-wrong-eq { font-size: 18px; gap: 6px; }
.ap-wrong-eq .ap-frac-num, .ap-wrong-eq .ap-frac-den { font-size: 15px; }
.ap-wrong-explain { font-size: 11.5px; }
.ap-guess-eq { font-size: 18px; gap: 6px; }
.ap-guess-eq .ap-frac-num, .ap-guess-eq .ap-frac-den { font-size: 15px; }
.ap-guess-bubble { font-size: 13.5px; padding: 7px 14px; }
.ap-ratio-dot { width: 18px; height: 18px; }
.ap-ratio-dots { max-width: 240px; gap: 5px; }
.ap-ratio-legend { font-size: 11.5px; gap: 12px; }
.ap-ratio-caption { font-size: 12.5px; }
}
@media (max-width: 380px) {
.ap-picker { gap: 5px; max-width: 300px; }
.ap-opt { padding: 7px 3px; font-size: 13px; min-height: 46px !important; }
.ap-picker.ap-picker-3 .ap-opt { font-size: 11px; padding: 7px 2px; }
.ap-word-text { font-size: 12.5px; }
.ap-eq-row { font-size: 18px; }
.ap-eq-row .ap-frac-num, .ap-eq-row .ap-frac-den { font-size: 15px; }
.ap-wrong-eq { font-size: 15.5px; }
.ap-guess-eq { font-size: 15.5px; }
.ap-guess-bubble { font-size: 12px; padding: 6px 12px; }
.ap-ratio-dot { width: 15px; height: 15px; }
.ap-ratio-dots { max-width: 210px; }
}