/* ============================================================================
SKIN — one look across every screen (design pass, 2026-09-19)
Loaded LAST, after css/tokens.css. It overrides the shared building blocks of
the old screens instead of rebuilding them one by one, so the whole pass can
be undone by removing one (plus the font block in css/fonts.css).
No engine, content or progress changes.
Phase 1 — one look everywhere:
1. Fonts: the old Baloo 2 / Nunito names now load Fredoka / Lexend
(done in css/fonts.css — see section 1).
2. Ground: the warm Ochre page background on every screen, with no seam.
3. Width: one 780px content column on every screen.
4. Titles: no 3D text shadow; the Your Quest title style.
5. Cards: 1px sand border + soft shadow, instead of 3px green or 3px
invisible white borders with a hard offset shadow.
============================================================================ */
/* ---- 1. Fonts -------------------------------------------------------------
The re-pointing itself lives in css/fonts.css (the old "Baloo 2" / "Nunito"
names now load fredoka.woff2 / lexend.woff2, with every request of 600 or
heavier capped at 600). It has to live there: a face left in fonts.css whose
weight range contains 800 would beat any face declared here.
This rule makes sure a weight the files do not have is never faked. */
html{ font-synthesis:none; }
/* ---- 2. Page ground -------------------------------------------------------
The Welcome / Your Quest ground, on every screen.
The SEAM: the body background is painted on the canvas but positioned by the
box, and it repeats. On a screen shorter than the window the gradients
ended at the content's height and started again below it. html at least as
tall as the window, and no-repeat, removes it. */
html{ min-height:100%; }
body{
background-color:var(--bg-page);
background-image:
radial-gradient(circle at 12% 8%, rgba(224,160,32,.28) 0, transparent 34%),
radial-gradient(circle at 88% 6%, rgba(168,72,31,.14) 0, transparent 30%),
radial-gradient(circle at 50% 100%, rgba(91,63,168,.10) 0, transparent 42%);
background-repeat:no-repeat;
color:var(--text-primary);
}
/* ---- 3. One column --------------------------------------------------------
Screens asked for 740 / 820 / 900 / 1100px. All now match Your Quest: 820px
with its side padding, which is a 780px column on a laptop.
:not(#_) lifts this above the single-ID width rules in styles.css.
Welcome keeps its approved narrower 640px. */
.app > [id^="screen-"]:not(#_):not(#screen-welcome){
max-width:820px;
padding-left:clamp(4px,2vw,20px);
padding-right:clamp(4px,2vw,20px);
box-sizing:border-box;
}
/* ---- 4. Titles ------------------------------------------------------------
The chunky white-and-violet 3D shadow goes; titles take the Your Quest look. */
/* The line under a title was the old --muted at 2.6:1 on the page ground;
--text-secondary clears 4.5:1 on every surface (tokens.css). */
.sub{ color:var(--text-secondary); font-weight:var(--weight-medium); }
h1{
font-family:var(--font-display);
font-size:var(--text-3xl);
line-height:var(--leading-tight);
letter-spacing:-.5px;
color:var(--action);
text-shadow:none;
}
/* ---- 5. Cards -------------------------------------------------------------
Every section card had a 3px green border, so "available" was shouted on
every row and nothing had hierarchy. Availability is already said by the
"Ready to play" chips. The white cards had a 3px WHITE border (invisible) and
a hard 0 5px 0 shadow — the 3D-button look. Both become one card:
1px sand border, soft shadow.
Vocabulary Builder's own cards (.week .stat .learn-card) are left alone here;
its colours are handled in section 12. Quiz options and
inputs belong to Phase 2. */
.domain-section, .ggroup, .tp-domain,
.domain-section.highlight{
background:var(--bg-surface);
border:1px solid var(--border-subtle);
box-shadow:var(--elev-2);
}
.domain-section:hover, .ggroup:hover, .tp-domain:hover{ box-shadow:var(--elev-3); }
.card, .grade-bar, .glesson, .gq-card, .gresult,
.gtopic-card, .gsub-btn,
.tp-cover, .tp-qcard, .tp-skills, .tp-results-hero,
.tg-domain-card, .tg-sec-btn, .level-card{
border:1px solid var(--border-subtle);
box-shadow:var(--elev-2);
}
.gtopic-card:hover, .gsub-btn:not(.soon):hover, .level-card:hover{
transform:translateY(-2px);
box-shadow:var(--elev-3);
}
/* Progress still shows as a coloured edge — a real status, so it stays, at 2px. */
.gtopic-card.done, .gtopic-card.partial,
.gsub-btn.done, .gsub-btn.partial,
.level-card.done, .level-card.partial{ border-width:2px; }
.level-card.locked, .level-card.locked:hover{ box-shadow:none; }
/* ---- Knock-on fixes from the wider column ---------------------------------
Vocabulary results: the review list is meant to run TWO-up (test-vocab-fixup).
Its 230px minimum fitted two tracks in the old 740px column and three in 780.
260px keeps it at two on a laptop and one on a phone. */
#screen-results #reviewList{ grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
/* ============================================================================
Phase 2 — shared components (2026-09-19)
The old class names are mapped onto the component specs already approved in
css/tokens.css (.btn / .option / .listrow / .status / .notice), so every
screen gets them without a markup change.
============================================================================ */
/* ---- 6. Top bar: back button + year chip, the Your Quest pair -------------
Was a chunky violet 3D button (39px, under the 44px floor) and a violet
year badge in three different styles. */
.back{
font-family:var(--font-display); font-weight:var(--weight-display);
font-size:var(--text-base); line-height:var(--leading-snug);
min-height:var(--tap-min); padding:var(--space-2) var(--space-4);
background:var(--action-soft); color:var(--action-soft-ink);
border:1px solid var(--border-control); border-radius:var(--radius-md);
box-shadow:none; filter:none;
}
.back:hover{ background:var(--bg-raised); transform:translateY(-2px); box-shadow:none; filter:none; }
.back{ white-space:nowrap; }
.back:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; }
.grade-badge, .grade-flag{
display:inline-flex; align-items:center; gap:var(--space-2);
font-family:var(--font-body); font-weight:var(--weight-strong);
font-size:var(--text-sm); line-height:var(--leading-snug); white-space:nowrap;
background:var(--accent-soft); color:var(--accent-ink);
border:1px solid var(--accent-border);
padding:var(--space-2) var(--space-4); border-radius:var(--radius-pill);
box-shadow:none;
}
/* The top-bar PAIR, chosen by the user 2026-09-19 (option C of three).
History: the soft fill above (--accent-soft) is the SAME colour as the page
(--bg-page, both #f6ecd9), so the year chip vanished ("blends with the
background"). A solid gold fill fixed that but was rejected as loud.
Now both ends of the bar are white pills with a soft-gold rim and a soft
shadow: gold as TRIM, not fill. The year is dark ink; Back keeps violet ink
so it still reads as the thing to press. #screen-sections brings Your Quest
into line too. */
.grade-badge, .grade-flag, #screen-sections .grade-flag,
.back, #screen-sections .back{
background:var(--bg-surface);
border:2px solid var(--gold-300);
border-radius:var(--radius-pill);
box-shadow:var(--elev-2);
}
.grade-badge, .grade-flag, #screen-sections .grade-flag{
color:var(--text-primary);
font-size:var(--text-base); font-weight:var(--weight-strong);
}
.back, #screen-sections .back{ color:var(--action-soft-ink); padding:var(--space-2) var(--space-5); }
.back:hover, #screen-sections .back:hover{
background:var(--bg-surface); border-color:var(--gold-500);
transform:translateY(-2px); box-shadow:var(--elev-3);
}
/* On a phone the bar holds Back + a title + the year: both ends go compact so
the title keeps its room (Back had wrapped to two lines, 64px tall). */
@media(max-width:420px){
.back, #screen-sections .back{ padding:var(--space-2) var(--space-3); font-size:var(--text-sm); }
.grade-badge, .grade-flag, #screen-sections .grade-flag{ padding:var(--space-1) var(--space-3); font-size:var(--text-sm); }
}
/* The hub's "change" link inside the chip: small to look at, but its press area
is stretched to 44px tall by an invisible layer. */
.grade-flag button{
position:relative; background:transparent; color:var(--text-primary);
font-family:var(--font-body); font-weight:var(--weight-strong); font-size:var(--text-sm);
text-decoration:underline; text-underline-offset:2px;
padding:0 var(--space-1); margin-left:var(--space-1); border-radius:var(--radius-sm); box-shadow:none;
}
/* 44px tall as a box (the a11y check measures the box, and so do screen
readers' touch exploration), with negative margins so the chip does not grow */
.grade-flag button{ min-height:var(--tap-min); margin-top:-12px; margin-bottom:-12px; }
.grade-flag button:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.learn-title{
font-family:var(--font-display); font-weight:var(--weight-display);
color:var(--action-soft-ink); letter-spacing:-.3px;
}
/* ---- 7. Buttons: ONE primary colour ---------------------------------------
Primary = violet (--action). Secondary = soft violet with a border. The old
set used violet, orange (Next), green (hub links) and blue (Try again, Back
in tests) for the same job, and green is the "correct" colour. */
.gnav-btn, .gset-btn, .gq-check, .na-check, .gq-next,
.tp-nav .tp-next, .tp-again .retry{
font-family:var(--font-display); font-weight:var(--weight-display);
font-size:var(--text-base); line-height:var(--leading-snug);
min-height:var(--tap-min);
background:var(--action); color:var(--text-on-action);
border:1px solid transparent; border-radius:var(--radius-md);
box-shadow:var(--elev-2); filter:none;
}
.gnav-btn:hover, .gset-btn:hover, .gq-check:hover:not(:disabled), .na-check:hover, .gq-next:hover,
.tp-nav .tp-next:hover, .tp-again .retry:hover{
background:var(--action-hover); transform:translateY(-2px); box-shadow:var(--elev-3); filter:none;
}
.gq-check:disabled{ box-shadow:none; }
.gnav-btn.alt, .gset-btn.alt, .tp-nav .tp-prev{
background:var(--action-soft); color:var(--action-soft-ink);
border:1px solid var(--border-control); box-shadow:none;
}
.gnav-btn.alt:hover, .gset-btn.alt:hover, .tp-nav .tp-prev:hover{
background:var(--bg-raised); box-shadow:none;
}
.gnav-btn:focus-visible, .gset-btn:focus-visible, .gq-check:focus-visible, .na-check:focus-visible,
.gq-next:focus-visible, .tp-nav button:focus-visible, .retry:focus-visible{
outline:3px solid var(--focus-ring); outline-offset:3px;
}
/* Quit in a running test: a quiet danger button, now 44px tall. */
.tp-quit-top{
min-height:var(--tap-min); padding:var(--space-2) var(--space-4);
font-family:var(--font-body); font-weight:var(--weight-strong); font-size:var(--text-sm);
background:var(--state-wrong-soft); color:var(--state-wrong-ink);
border:1px solid var(--state-wrong); border-radius:var(--radius-md); box-shadow:none;
}
/* ---- 8. List rows ---------------------------------------------------------
Hub links (.sub-btn, were solid green), Test Practice sets (.tp-setbtn,
pale blue), part lists (.gsub-btn) and Test Guide sections all become one
row: surface, sand border, the label on the left, a soft violet "go" chip on
the right. Progress keeps its status colours. */
.sub-btn, .tp-setbtn, .tg-sec-btn{
font-family:var(--font-body); font-weight:var(--weight-strong);
font-size:var(--text-base); line-height:var(--leading-snug);
min-height:52px; padding:var(--space-3) var(--space-4);
background:var(--bg-surface); color:var(--text-primary);
border:1px solid var(--border-subtle); border-radius:var(--radius-md);
box-shadow:var(--elev-1); filter:none;
}
.gsub-btn{ border-radius:var(--radius-md); font-family:var(--font-body); }
.sub-btn.live{ background:var(--bg-surface); color:var(--text-primary); box-shadow:var(--elev-1); }
.sub-btn.live:hover, .sub-btn.soon:hover, .tp-setbtn:hover, .tg-sec-btn:hover{
background:var(--bg-surface); border-color:var(--border-control);
transform:translateY(-2px); box-shadow:var(--elev-2); filter:none;
}
.sub-btn.soon{ background:var(--bg-sunken); color:var(--text-secondary); box-shadow:none; }
.sub-btn:focus-visible, .tp-setbtn:focus-visible, .tg-sec-btn:focus-visible, .gsub-btn:focus-visible,
.gtopic-card:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; }
.go-tag, .tp-setbtn .tp-go{
flex:none; font-family:var(--font-body); font-weight:var(--weight-strong);
font-size:var(--text-sm); padding:var(--space-1) var(--space-3);
background:var(--action-soft); color:var(--action-soft-ink); border-radius:var(--radius-pill);
}
.tp-setbtn .tp-meta{ color:var(--text-secondary); font-weight:var(--weight-body); }
.tp-setbtn.done{ background:var(--state-correct-soft); color:var(--state-correct-ink); border-color:var(--state-correct); }
.tp-setbtn.done .tp-go{ background:var(--state-correct); color:var(--bg-surface); }
/* Status chips (Start / Keep going / Done). White on the old light green was
2.4:1; these are the approved .status colours. */
.badge-status{ font-family:var(--font-body); font-weight:var(--weight-strong); border:1px solid transparent; }
.badge-status.ns{ background:var(--bg-sunken); color:var(--text-secondary); border-color:var(--border-subtle); }
.badge-status.pt{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-border); }
.badge-status.dn{ background:var(--state-correct-soft); color:var(--state-correct-ink); border-color:var(--state-correct); }
.gsub-btn.done, .gtopic-card.done{ background:var(--state-correct-soft); border-color:var(--state-correct); }
.gsub-btn.partial, .gtopic-card.partial{ background:var(--accent-soft); border-color:var(--accent-border); }
/* Accordion heads on the hub and Test Practice were 38px to press. */
.ds-head, .tpd-head{ min-height:var(--tap-min); }
/* ---- 9. Callouts: one tip, one example box -------------------------------- */
.gtip, .wtip-inline{
background:var(--accent-soft); color:var(--text-primary);
border:1px solid var(--accent-border); border-radius:var(--radius-md);
font-family:var(--font-body); font-weight:var(--weight-medium); line-height:var(--leading-normal);
}
.gexbox, .tg-write-note{
background:var(--bg-raised); color:var(--text-primary);
border:1px solid var(--border-subtle); border-radius:var(--radius-md);
}
.gexlabel{ color:var(--action-soft-ink); }
.tg-write-note{ font-weight:var(--weight-body); }
.fb-ok{ color:var(--state-correct-ink); }
.fb-no{ color:var(--state-wrong-ink); }
/* ---- 10. Quiz answer options: A / B / C / D ------------------------------
Every .gq-opt quiz (numeracy, grammar, punctuation, reading, spelling, test
guide) was a flat pale-blue bar with no marker, and correct/wrong differed
only in fill (white on light green was 2.4:1). Now the approved .option:
a lettered key, a real border, and a tick / cross that replaces the letter
once marked, so the result never rests on colour alone.
The letter comes from a CSS counter, so no engine markup changes. */
.gq-opts{ counter-reset:gqopt; }
.gq-opt{
display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
font-family:var(--font-body); font-weight:var(--weight-medium);
font-size:var(--text-base); line-height:var(--leading-snug);
min-height:52px; padding:var(--space-3);
background:var(--bg-surface); color:var(--text-primary);
border:2px solid var(--border-control); border-radius:var(--radius-md);
filter:none;
}
.gq-opt::before{
counter-increment:gqopt; content:counter(gqopt, upper-alpha);
flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center;
border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent-ink);
font-size:var(--text-sm); font-weight:var(--weight-strong);
}
.gq-opt:hover:not(:disabled){ background:var(--bg-raised); filter:none; transform:none; box-shadow:none; }
.gq-opt.picked{ background:var(--action-soft); border-color:var(--action); color:var(--action-soft-ink); font-weight:var(--weight-strong); }
.gq-opt.picked::before{ background:var(--action); color:var(--text-on-action); }
.gq-opt.correct{ background:var(--state-correct-soft); border-color:var(--state-correct); color:var(--state-correct-ink); }
.gq-opt.correct::before{ content:"\2713"; background:var(--state-correct); color:var(--bg-surface); }
.gq-opt.wrong{ background:var(--state-wrong-soft); border-color:var(--state-wrong); color:var(--state-wrong-ink); }
.gq-opt.wrong::before{ content:"\2717"; background:var(--state-wrong); color:var(--bg-surface); }
.gq-opt:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; }
/* Test Practice options already carry their own letter; same look. */
.tp-opt{
font-family:var(--font-body); font-weight:var(--weight-medium);
background:var(--bg-surface); color:var(--text-primary);
border:2px solid var(--border-control); border-radius:var(--radius-md);
}
.tp-opt .tp-letter{
border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent-ink);
font-family:var(--font-body); font-weight:var(--weight-strong);
}
.tp-opt.sel{ background:var(--action-soft); border-color:var(--action); }
.tp-opt.sel .tp-letter{ background:var(--action); color:var(--text-on-action); }
/* ---- 11. Tap targets ------------------------------------------------------
Every remaining control under 44px. Vocabulary Builder keeps its colours
(2026-08-26 decision); only the height changes. */
.wb-learn, .wb-play, .wb-quiz{ min-height:var(--tap-min); }
#screen-home button:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; }
.ph-chip, .ph-word-btn{ min-height:var(--tap-min); }
.reset button{ min-height:var(--tap-min); padding:var(--space-2) var(--space-3); }
/* ---- 12. Vocabulary Builder colours (option B2, chosen by the user 2026-09-19)
Its white text on bright orange / green / blue and the pink banners failed
reading contrast (2.1-3.9 : 1). B2 keeps its three-colour playfulness but takes
every colour from OUR palette: soft tints with dark words (6.1-8.7 : 1), the
same tints as the Speed Builder's operations.
- Learn = ochre, Play = violet (the action colour), Meaning quiz = sea blue.
Never green: green means "correct" in this app.
- The practice banner is a white card with a plum edge — a soft fill on the
page ground would vanish (the same trap as the old year chip).
(2026-08-26 the user had chosen to keep the old colours; this replaces that.) */
.wb-learn, .wb-play, .wb-quiz{ box-shadow:var(--elev-1); font-family:var(--font-body); font-weight:var(--weight-strong); }
.wb-learn{ background:#fbeedd; color:#8f4506; border:1.5px solid #c0620f; }
.wb-play { background:var(--violet-100); color:var(--violet-700); border:1.5px solid var(--violet-600); }
.wb-quiz { background:#e3f1f6; color:#1a5c77; border:1.5px solid #23789b; }
.wb-learn:hover, .wb-play:hover, .wb-quiz:hover{ box-shadow:var(--elev-2); filter:none; }
.practice-banner{ background:var(--bg-surface); color:var(--text-primary);
border:1px solid var(--border-subtle); border-left:6px solid #8b3f8e; box-shadow:var(--elev-2); }
.practice-banner h2{ color:#6d2f70; }
.practice-banner p{ color:var(--text-secondary); }
.practice-banner button{ background:var(--action); color:var(--text-on-action); box-shadow:var(--elev-2); }
.stat, .stat.s1, .stat.s2, .stat.s3{ background:var(--bg-surface); border:1px solid var(--border-subtle);
border-top:4px solid var(--stat-c); box-shadow:var(--elev-1); }
.stat.s1{ --stat-c:#c0620f; } .stat.s2{ --stat-c:#23789b; } .stat.s3{ --stat-c:var(--gold-500); }
.stat .n{ color:var(--text-primary); }
.stat .l, .week .wk{ color:var(--text-secondary); }
.reset button{ color:var(--text-secondary); } /* the reset link was the old --muted, 2.6 : 1 */
/* The Vocabulary game's own buttons (learn / play / quiz / results screens):
.btn-primary was bright blue with a 3D shadow, .btn-ghost pale blue. Now the
one primary (violet) and the soft secondary used everywhere else. */
.btn-primary{ background:var(--action); color:var(--text-on-action); border:1px solid transparent;
border-radius:var(--radius-md); box-shadow:var(--elev-2); font-family:var(--font-display);
font-weight:var(--weight-display); filter:none; }
.btn-primary:hover{ background:var(--action-hover); transform:translateY(-2px); box-shadow:var(--elev-3); filter:none; }
.btn-primary:active{ transform:none; box-shadow:var(--elev-1); }
.btn-ghost{ background:var(--action-soft); color:var(--action-soft-ink); border:1px solid var(--border-control);
border-radius:var(--radius-md); min-height:var(--tap-min); font-family:var(--font-display); font-weight:var(--weight-display); }
.btn-ghost:hover{ background:var(--bg-raised); }
.btn-primary:focus-visible, .btn-ghost:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; }
.score-sub{ color:var(--text-secondary); }
/* The Vocabulary game's small controls. The music toggle and "Hear it" were
amber with a 3D shadow (4.1 : 1), "Show spelling" pink (2.9 : 1). Now the
top-bar pill (white, gold rim) for the music toggle, and soft secondary
buttons in our tints: Hear it = ochre, Show spelling = plum. All 44px. */
.music-toggle{ background:var(--bg-surface); color:var(--text-primary); border:2px solid var(--gold-300);
border-radius:var(--radius-pill); box-shadow:var(--elev-2); min-width:var(--tap-min); min-height:var(--tap-min); }
.sound-btn{ background:#fbeedd; color:#8f4506; border:1.5px solid #c0620f; box-shadow:var(--elev-1);
min-height:var(--tap-min); font-family:var(--font-body); font-weight:var(--weight-strong); }
.peek-btn{ background:#f4e6f4; color:#6d2f70; border:1.5px solid #8b3f8e; box-shadow:var(--elev-1);
min-height:var(--tap-min); font-family:var(--font-body); font-weight:var(--weight-strong); }
.music-toggle:focus-visible, .sound-btn:focus-visible, .peek-btn:focus-visible,
#screen-game input:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:3px; }
.progress-row{ color:var(--text-secondary); }
/* its banner on Your Quest: ochre through plum to violet (white text 5.1 : 1 at worst) */
.bonus-banner:not(.bonus-maths){ background:linear-gradient(135deg,#a05f13,#8b3f8e 52%,#5b3fa8); }
/* ---- 13. Spelling part names on phones -------------------------------------
The parts list keeps every name on ONE line (the 2026-08-26 rule, names
trimmed to fit the laptop row). On a phone that cut off 76 of 102 names per
year ("Phonemes and gra…"), so there, and only there, a name may wrap onto a
second line. The second line hangs under the words, not under "1.1", and the
status chips stack on the right so the name keeps the width. */
@media (max-width:700px){
#sssub-list .gsub-name{ white-space:normal; overflow:visible; text-overflow:clip;
line-height:var(--leading-snug); padding-left:2.55em; text-indent:-2.55em;
flex:1 1 auto; text-align:left; }
#sssub-list .gsub-num{ display:inline-block; min-width:2.3em; margin-right:0; text-indent:0; }
/* 2.3em fits "11.1"; +0.25em is the space after it, so line 2 starts under the first word */
#sssub-list .gsub-btn{ padding-left:var(--space-4); padding-right:var(--space-3); }
#sssub-list .gsub-meta{ flex-direction:column; align-items:flex-end; gap:var(--space-1); }
#sssub-list .gsub-btn{ align-items:center; }
}
/* ---- 14. Your Quest cards match every other card ---------------------------
The quest-part cards kept their approved 2px green border and green wash
("this part is open"), which made them the one place still using green as
decoration. They now match the cards on every other screen: surface, 1px
sand border, soft shadow. "Ready to play" / "Coming soon" chips still say
what is available. */
#screen-sections .section-card.live{
border:1px solid var(--border-subtle);
background:var(--bg-surface);
}
/* ---- 15. Icons instead of emoji (option A "soft tint", user 2026-09-19) ------
js/20-icons.js swaps emoji in icon slots for Lucide icons. A BOX icon is a
rounded square in a soft tint of its area's colour, the icon in that colour;
an INLINE icon (buttons, chips, titles) takes the text's own colour.
Area colours are the palette's identity colours (same as the Speed Builder
and Vocabulary tints): Language Conventions ochre, Writing plum, Reading
teal, Numeracy sea, Quest / everything else violet. */
.ic-box{ display:inline-grid; place-items:center; flex:0 0 auto; vertical-align:middle;
width:var(--ic-size,40px); height:var(--ic-size,40px); border-radius:30%;
background:var(--ic-soft); color:var(--ic-ink); }
.ic-box svg{ width:56%; height:56%; stroke-width:2; }
.ic-box[data-area="violet"]{ --ic-ink:var(--violet-600); --ic-soft:var(--violet-100); }
.ic-box[data-area="ochre"] { --ic-ink:#c0620f; --ic-soft:#fbeedd; }
.ic-box[data-area="plum"] { --ic-ink:#8b3f8e; --ic-soft:#f4e6f4; }
.ic-box[data-area="teal"] { --ic-ink:#1c7a70; --ic-soft:#e0f2ef; }
.ic-box[data-area="sea"] { --ic-ink:#23789b; --ic-soft:#e3f1f6; }
/* the old emoji holders pulsed a coloured glow and set big font sizes */
.has-ic{ animation:none !important; filter:none !important; text-shadow:none !important;
line-height:0; font-size:0; }
/* a list row that starts with an icon: icon, then the words, "Open" pushed right */
.has-ic-lead{ justify-content:flex-start; gap:var(--space-3); }
.has-ic-lead > .go-tag{ margin-left:auto; }
.ic-inline{ display:inline-flex; align-items:center; margin-right:.4em; vertical-align:-.16em; }
.ic-inline svg{ width:1.1em; height:1.1em; stroke-width:2.25; }
/* the year chip's star: gold, filled (the one touch of gold on every screen) */
.ic-gold svg{ fill:var(--gold-500); stroke:var(--gold-500); stroke-width:1.5; }
/* the tip bulb and the music note sit alone in their holder */
.gtip-i .ic-inline, .music-toggle .ic-inline{ margin-right:0; }
.gtip-i .ic-inline{ color:var(--gold-700); }
/* Vocabulary week buttons: icon BESIDE the word on all three (Learn used to stack) */
.wb-learn, .wb-play, .wb-quiz{ display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }
.wb-learn .ic-inline, .wb-play .ic-inline, .wb-quiz .ic-inline{ margin-right:.3em; }
/* Test Guide section names: a tinted icon box, like every other list row */
.tg-sec-name.has-ic-lead{ display:flex; align-items:center; gap:var(--space-2); }
@media(max-width:420px){ .gt-icon .ic-box{ --ic-size:44px !important; } }
/* ---- 16. The old colour variables point at our palette (2026-09-19) --------
Inside lessons, hundreds of rules in css/styles.css and the engines still
paint with the OLD variables (--purple #8b5cf6, --blue #2f7bff, --amber
#ffc233, --pink #ff5da2 …): table headers, headings, row labels, page dots,
Writing badges, chips. Re-pointing each old name at its nearest palette
colour recolours all of them at once, consistently:
purple → violet blue → sea green → success green orange → ochre
pink → plum red → clay amber → soft gold ink / muted / line → our ink
and sand
⚠ DRAWINGS KEEP THEIR COLOURS. The maths graphics use the same variables
(NA_CAT_COLORS: purple, blue, green, orange, pink, amber for chart
categories), and a question may name a colour ("the pink bar"). So every