/* ================================================================
decimal-of-quantity.css
----------------------------------------------------------------
Styles for the "Decimal of a Whole Number & Quantity" skill group
on the Class 4 Math page:
- A.1 Tenths of a Set (Grouping) — "What is 0.1 of these 10
apples?" A set of apples split into 10 equal groups; the
first d groups are colored to show 0.d of the set. Same
visual-grouping idea as Fraction of a Set, now read as a
decimal instead of a fraction (new .doq-set-* classes).
- A.2 Real-World Decimal-of-Quantity Problems — a CSS-drawn
ruler shows a reading like "6.5 cm"; the child is asked
for the whole-centimeter part or the leftover (tenths)
part, keeping the focus on what the decimal physically
represents (new .doq-ruler-* classes).
- A.3 Money as the Universal Decimal Model — a row of dime and
penny icons ($1 = 100 cents, so cents are hundredths made
concrete); the child reads the coins as a decimal part of
a dollar or as a plain cent count (new .doq-coin-*
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 "doq-" prefixed classes (including its own
answer-chip wrapper, .doq-picker) 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.:
IMPORTANT — answer chips always sit on a single line. Unlike
.drw-picker (which wraps on narrow screens), .doq-picker below
never wraps: it uses `flex-wrap: nowrap` at every breakpoint and
shrinks gap/padding/font-size with `clamp()` so all 4 chips stay
on one row on phones as narrow as ~300px as well as on desktop.
================================================================ */
/* ---------- shared: answer-chip picker row (forced single line) ---------- */
.doq-picker {
display: flex;
align-items: stretch;
justify-content: center;
flex-wrap: nowrap; /* never drop to a 2nd row */
gap: clamp(5px, 2vw, 10px);
margin: 18px auto 4px;
width: 100%;
max-width: 380px;
}
.doq-opt {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
min-width: 0; /* allow shrinking below content size */
max-width: 160px;
padding: clamp(8px, 2.6vw, 12px) clamp(4px, 1.8vw, 8px);
height: auto !important;
min-height: 46px !important;
max-height: none !important;
box-sizing: border-box !important;
white-space: nowrap !important; /* chip text itself is short */
overflow: hidden;
text-overflow: ellipsis;
font-weight: 800;
font-size: clamp(12.5px, 3.6vw, 17px);
color: var(--secondary);
text-align: center;
line-height: 1.2;
}
.quiz-number-opt.doq-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.doq-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: scene wrap + caption used by all 3 skills ---------- */
.doq-scene-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin: 16px auto 6px;
}
.doq-scene-caption {
font-weight: 700;
font-size: 13px;
color: var(--text);
text-align: center;
max-width: 320px;
}
/* ================================================================
A.1 Tenths of a Set (Grouping)
================================================================ */
.doq-set-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
justify-content: center;
width: 100%;
max-width: 300px;
}
.doq-set-group {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1px;
background: rgba(0,0,0,0.03);
border: 2px solid var(--line);
border-radius: 10px;
padding: 5px 3px;
min-height: 40px;
transition: background .15s ease, border-color .15s ease;
}
.doq-set-group.is-colored {
background: rgba(236,72,153,0.12);
border-color: var(--pink);
}
.doq-set-icon {
font-size: 13px;
line-height: 1;
color: var(--line);
}
.doq-set-group.is-colored .doq-set-icon {
color: var(--pink);
}
.doq-set-legend {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
font-size: 12.5px;
font-weight: 700;
color: var(--text);
}
.doq-set-legend-swatch {
display: inline-block;
width: 13px;
height: 13px;
border-radius: 4px;
border: 2px solid var(--line);
vertical-align: middle;
margin-right: 5px;
}
.doq-set-legend-swatch.is-colored {
background: rgba(236,72,153,0.12);
border-color: var(--pink);
}
/* ================================================================
A.2 Real-World Decimal-of-Quantity Problems (ruler)
================================================================ */
.doq-ruler {
position: relative;
width: 100%;
max-width: 320px;
height: 70px;
background: linear-gradient(180deg, #fff7e6, #ffedc2);
border: 2px solid #e0b559;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}
.doq-ruler-tick {
position: absolute;
bottom: 0;
width: 2px;
height: 14px;
background: #8a6a2a;
}
.doq-ruler-tick.is-major {
height: 26px;
width: 2.5px;
background: #5c4415;
}
.doq-ruler-num {
position: absolute;
bottom: 28px;
transform: translateX(-50%);
font-size: 11px;
font-weight: 700;
color: #5c4415;
}
.doq-ruler-marker {
position: absolute;
top: -12px;
width: 0;
height: 0;
transform: translateX(-50%);
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 14px solid var(--pink);
}
.doq-ruler-marker::after {
content: "";
position: absolute;
top: 14px;
left: -2px;
width: 4px;
height: 56px;
background: var(--pink);
opacity: 0.55;
}
/* ================================================================
A.3 Money as the Universal Decimal Model
================================================================ */
.doq-coin-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
max-width: 320px;
}
.doq-coin {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-weight: 800;
color: #5c4415;
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.15);
}
.doq-coin.is-dime {
width: 40px;
height: 40px;
font-size: 12px;
background: radial-gradient(circle at 35% 30%, #f4e2a8, #d9b74a 70%);
border: 2px solid #b08a2e;
}
.doq-coin.is-penny {
width: 30px;
height: 30px;
font-size: 10px;
background: radial-gradient(circle at 35% 30%, #e9b48a, #c97a45 70%);
border: 2px solid #a4602f;
}
.doq-coin-note {
font-size: 12px;
font-weight: 700;
color: var(--text);
text-align: center;
max-width: 300px;
opacity: 0.85;
}
/* ---------- phone responsiveness ---------- */
@media (max-width: 560px) {
.doq-picker { gap: clamp(4px, 1.6vw, 8px); max-width: 320px; }
.doq-opt { min-height: 42px !important; }
.doq-set-grid { max-width: 240px; gap: 6px; }
.doq-set-group { min-height: 34px; padding: 4px 2px; }
.doq-set-icon { font-size: 11px; }
.doq-ruler { max-width: 260px; height: 60px; }
.doq-ruler-tick { height: 11px; }
.doq-ruler-tick.is-major { height: 20px; }
.doq-ruler-num { bottom: 22px; font-size: 10px; }
.doq-ruler-marker::after { height: 46px; }
.doq-coin.is-dime { width: 34px; height: 34px; font-size: 10.5px; }
.doq-coin.is-penny { width: 26px; height: 26px; font-size: 9px; }
}
@media (max-width: 380px) {
.doq-picker { gap: 4px; max-width: 280px; }
.doq-opt { padding-left: 3px; padding-right: 3px; }
.doq-set-grid { max-width: 210px; }
.doq-ruler { max-width: 230px; height: 54px; }
.doq-coin.is-dime { width: 30px; height: 30px; font-size: 9.5px; }
.doq-coin.is-penny { width: 23px; height: 23px; font-size: 8px; }
}
/* ---------- larger desktop screens ---------- */
@media (min-width: 900px) {
.doq-set-grid { max-width: 320px; }
.doq-ruler { max-width: 360px; height: 76px; }
}