/* ================================================================
fraction-mul-div.css
----------------------------------------------------------------
Styles for the "Multiplying & Dividing Fractions" skill group on
the Class 3 Math page:
- B.1 Fraction \u00d7 Whole Number (Visual) — "3 groups of 1/4."
The same fraction bar shaded identically, repeated `w`
times side by side with "+" signs between (repeated
addition, the bridge into multiplication) followed by
"=" and a dashed, unshaded result card carrying a "?".
New .fmd-bar-* classes draw the single-color segmented
bar (no dependency on any other file's shape renderer —
self-contained, same philosophy as fraction-add-sub.css).
- B.2 Fraction \u00d7 Fraction (Area Model) — a rectangle grid of
d1 columns by d2 rows. The first n1 columns are shaded
one color, the first n2 rows are shaded a second color
(new .fmd-grid / .fmd-cell-col / .fmd-cell-row classes,
layered with mix-blend-mode so the overlap reads as a
third, naturally-blended color) — the doubly-shaded
squares are the product n1\u00d7n2 out of the whole grid of
d1\u00d7d2 squares.
- B.3 Fraction \u00d7 Fraction (Numeric shortcut) — the same idea
as B.2 with the picture dropped: a plain equation
"a/b \u00d7 c/d = ?" (new .fmd-frac / .fmd-eq-row classes,
not shared with fraction-add-sub.css so this file has no
hidden cross-file dependency), answered already
simplified to lowest terms.
- B.4 Dividing a Fraction by a Whole Number — "1/2 shared
between 2 people." A small bar shows the original unit
fraction; alongside it a long, finely-divided "split"
bar (new .fmd-split-bar-* classes) shows the whole cut
into every one of the smaller pieces, with a thicker
boundary line marking where each original piece used to
be, and one small piece highlighted as "one share."
- B.5 Dividing Whole Number by a Fraction — "How many 1/4s fit
in 3?" Reuses the same single-color .fmd-bar-* bar as
B.1, drawn once per whole number and fully segmented
into unit-fraction pieces, so the child can count them
up. Answer chips here are plain whole numbers, not
fractions (new .fmd-opt-num modifier).
- B.6 Reciprocals & "Keep-Change-Flip" Intro — a light,
pattern-based equation row: "n/d \u00f7 p/q = n/d \u00d7 ?" with
a small "flip it!" arrow (new .fmd-arrow class) pointing
at the second fraction, asking the child to pick its
flipped (reciprocal) form from four chips.
Every skill here shares the same 5-question-per-slot / star-
reward / "practice more?" quiz shell as the rest of the page (via
the .bq- / .quiz- classes from quiz-popup-theme.css and quiz-
modal-responsive.css, loaded elsewhere) and the same green/red
grading vocabulary as fraction-add-sub.css. Load this file after
the shared quiz shell stylesheets, e.g.:
================================================================ */
/* ---------- shared: stacked fraction symbol (.fmd-frac) ---------- */
/* Self-contained stacked numerator/line/denominator symbol used
everywhere in this file — deliberately not reusing the .fas-frac
markup from fraction-add-sub.css so this file has no hidden
dependency on undocumented internals elsewhere. */
.fmd-frac {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1.05;
font-weight: 800;
color: var(--secondary);
}
.fmd-frac-num, .fmd-frac-den {
font-size: 20px;
}
.fmd-frac-line {
width: 100%;
height: 3px;
background: currentColor;
border-radius: 2px;
margin: 2px 0;
}
.fmd-frac.fmd-frac-lg .fmd-frac-num,
.fmd-frac.fmd-frac-lg .fmd-frac-den { font-size: 26px; }
/* Plain text caption under a bar card — a whole number like "1"
(B.5) or a "?" over a dashed result bar (B.1, B.4). Deliberately
not the dashed .fmd-blank box: the bar itself already carries the
dashed "unknown" styling via its .result modifier, so stacking a
second dashed box underneath would be redundant. */
.fmd-bar-caption {
font-weight: 800;
font-size: 20px;
color: var(--secondary);
}
/* Dashed "unknown value" placeholder — the blank result slot in an
equation. */
.fmd-blank {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 4px 10px;
border: 3px dashed var(--line);
border-radius: 12px;
font-weight: 800;
font-size: 22px;
color: var(--secondary);
opacity: 0.6;
}
/* Solid "known whole number" chip — e.g. the divisor in B.4's
"\u00f7 w people" step, where the value is given, not asked for. */
.fmd-whole-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 56px;
padding: 4px 12px;
border: 3px solid var(--sun);
border-radius: 12px;
background: rgba(245, 166, 35, 0.12);
font-weight: 800;
font-size: 22px;
color: var(--secondary);
}
/* ---------- shared: equation row ---------- */
.fmd-eq-row {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
margin: 18px auto 8px;
}
.fmd-op {
flex: 0 0 auto;
font-weight: 800;
font-size: 24px;
color: var(--secondary);
opacity: 0.7;
}
.fmd-eq-sign {
flex: 0 0 auto;
font-weight: 800;
font-size: 24px;
color: var(--secondary);
opacity: 0.7;
}
/* "flip it!" cue used above/beside the fraction being reciprocated
in B.6 — a small curved-arrow glyph plus label, not tied to any
other operator styling in this file. */
.fmd-arrow {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 2px;
font-weight: 800;
font-size: 20px;
color: var(--mint-bright, var(--sky));
opacity: 0.9;
}
.fmd-arrow-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
opacity: 0.85;
}
/* ---------- shared: answer chips ---------- */
/* .quiz-number-opt itself is already styled by quiz-popup-theme.css
site-wide; .fmd-opt only tunes the extra padding this file's
.fmd-frac symbols need to sit comfortably inside it. */
.fmd-opt {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 10px 14px;
}
/* Plain whole-number chips (B.5) — no fraction symbol inside, just
a number, so they read at a slightly larger, simpler size. */
.fmd-opt-num {
font-weight: 800;
font-size: 22px;
color: var(--secondary);
}
.quiz-number-opt.fmd-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.fmd-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);
}
/* ---------- shared: single-color segmented bar (.fmd-bar) ---------- */
/* Used by B.1 (repeated identical bars = repeated addition) and B.5
(one fully-shaded bar per whole number, segmented into units). */
.fmd-vis-wrap {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 12px;
margin: 18px auto 6px;
flex-wrap: wrap;
}
.fmd-vis-wrap .fmd-op,
.fmd-vis-wrap .fmd-eq-sign {
height: 56px;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
.fmd-bar-card {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 148px;
}
.fmd-bar {
display: flex;
width: 100%;
height: 56px;
border-radius: 12px;
overflow: hidden;
border: 3px solid var(--line);
background: #fff;
}
.fmd-bar-seg {
flex: 1 1 0;
border-right: 2px solid var(--line);
background: transparent;
transition: background .2s ease, opacity .2s ease;
}
.fmd-bar-seg:last-child { border-right: none; }
.fmd-bar-seg.is-a { background: var(--sky); }
.fmd-bar-card.result .fmd-bar { border-style: dashed; opacity: 0.85; }
/* ---------- B.4 split-bar (shared with the compact context bar) ---------- */
.fmd-split-bar-card {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 260px;
}
.fmd-split-bar {
display: flex;
width: 100%;
height: 56px;
border-radius: 12px;
overflow: hidden;
border: 3px solid var(--line);
background: #fff;
}
.fmd-split-bar-card.result .fmd-split-bar { border-style: dashed; opacity: 0.9; }
.fmd-split-seg {
flex: 1 1 0;
border-right: 1px solid rgba(30,58,95,0.18);
background: transparent;
}
.fmd-split-seg:last-child { border-right: none; }
.fmd-split-seg.is-boundary { border-left: 3px solid var(--line); }
.fmd-split-seg.is-share { background: var(--sun); }
/* ---------- B.2 area model grid ---------- */
.fmd-area-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin: 16px auto 8px;
}
.fmd-grid {
display: grid;
gap: 2px;
background: var(--line);
border: 2px solid var(--line);
border-radius: 10px;
overflow: hidden;
width: 220px;
height: 220px;
}
.fmd-cell {
position: relative;
background: #fff;
}
.fmd-cell-col,
.fmd-cell-row {
position: absolute;
inset: 0;
}
.fmd-cell-col { background: var(--sky); opacity: 0.55; }
.fmd-cell-row { background: var(--sun); opacity: 0.55; mix-blend-mode: multiply; }
.fmd-legend {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.fmd-legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--secondary);
opacity: 0.8;
}
.fmd-legend-swatch {
position: relative;
width: 16px;
height: 16px;
flex: 0 0 auto;
border-radius: 4px;
border: 1px solid var(--line);
overflow: hidden;
background: #fff;
}
/* ---------- B.5 "how many fit" plain-number answers ---------- */
.fmd-measure-question {
text-align: center;
font-weight: 700;
color: var(--secondary);
opacity: 0.85;
margin: 4px auto 2px;
}
/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
.fmd-eq-row { gap: 8px; margin: 12px auto 6px; }
.fmd-op, .fmd-eq-sign { font-size: 19px; }
.fmd-frac-num, .fmd-frac-den { font-size: 17px; }
.fmd-frac.fmd-frac-lg .fmd-frac-num,
.fmd-frac.fmd-frac-lg .fmd-frac-den { font-size: 21px; }
.fmd-bar-caption { font-size: 17px; }
.fmd-blank { min-width: 32px; min-height: 32px; font-size: 18px; padding: 2px 8px; }
.fmd-whole-chip { min-width: 36px; min-height: 42px; font-size: 18px; }
.fmd-arrow { font-size: 16px; }
.fmd-vis-wrap { gap: 8px; margin: 14px auto 4px; }
.fmd-bar-card { width: 108px; gap: 6px; }
.fmd-bar { height: 42px; border-radius: 10px; }
.fmd-vis-wrap .fmd-op, .fmd-vis-wrap .fmd-eq-sign { height: 42px; }
.fmd-opt { min-width: 52px; padding: 8px 10px; }
.fmd-opt-num { font-size: 19px; }
.fmd-split-bar-card { width: 210px; gap: 6px; }
.fmd-split-bar { height: 42px; }
.fmd-grid { width: 168px; height: 168px; }
.fmd-legend { gap: 10px; }
.fmd-legend-item { font-size: 11px; }
}
@media (max-width: 380px) {
.fmd-eq-row { gap: 6px; }
.fmd-op, .fmd-eq-sign { font-size: 16px; }
.fmd-frac-num, .fmd-frac-den { font-size: 15px; }
.fmd-frac.fmd-frac-lg .fmd-frac-num,
.fmd-frac.fmd-frac-lg .fmd-frac-den { font-size: 18px; }
.fmd-bar-caption { font-size: 15px; }
.fmd-blank { min-width: 28px; min-height: 28px; font-size: 15px; }
.fmd-whole-chip { min-width: 32px; min-height: 36px; font-size: 16px; }
.fmd-bar-card { width: 90px; }
.fmd-bar { height: 36px; }
.fmd-vis-wrap .fmd-op, .fmd-vis-wrap .fmd-eq-sign { height: 36px; }
.fmd-split-bar-card { width: 172px; }
.fmd-split-bar { height: 36px; }
.fmd-grid { width: 140px; height: 140px; }
}