) inside that same bar are inline
text elements, not containers, so they still get the glyph as intended. */
.is-balanced:not(tr):not(.journal-balance)::before,
.is-unbalanced:not(tr):not(.journal-balance)::before {
font-family: var(--font-mono);
font-weight: 600;
margin-right: .5ch;
}
.is-balanced:not(tr):not(.journal-balance)::before {
content: "=";
color: var(--owe);
}
.is-unbalanced:not(tr):not(.journal-balance)::before {
content: "\2260"; /* ≠ */
color: var(--danger);
}
.is-unbalanced {
font-weight: 600;
}
/* ---------------------------------------------------------------------------
8. HIGH CONTRAST
---------------------------------------------------------------------------
The palette is deliberately low-contrast and warm — correct for the ledger
metaphor, and comfortable for long study sessions. But `parchment-dim`
(#9B9789) on `ledger` (#14171F) sits around 5.9:1, which passes AA for body
text and fails AAA, and users who have asked their OS for more contrast
have asked for a reason. Honour it rather than overriding their choice. */
@media (prefers-contrast: more) {
:root {
--parchment-dim: #C8C3B4;
--rule: #4A5262;
--rule-soft: #3A4150;
}
.btn {
border-width: 2px;
}
:focus-visible {
outline-width: 3px;
}
}
/* Forced-colors (Windows high contrast) strips author colours entirely.
Without this, the mask-image nav icons vanish, because their visible pixels
come from a background-color that the mode discards. */
@media (forced-colors: active) {
.nav-icon {
background: CanvasText;
}
.btn {
border: 1px solid ButtonText;
}
.spine::before {
background: CanvasText;
}
}
/* ---------------------------------------------------------------------------
9. MOTION
---------------------------------------------------------------------------
base.css already collapses animation and transition durations under
prefers-reduced-motion. It does not stop the two INFINITE animations
introduced above, where a near-zero duration means "spin extremely fast
forever" rather than "stop" — worse for a vestibular user than the original
animation. Both are neutralised explicitly. */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.skeleton::after {
animation: none;
opacity: .5;
}
.btn.is-busy::after {
animation: none;
border-top-color: currentColor;
opacity: .6;
}
.btn:active,
button:not(:disabled):active {
transform: none;
}
}
/* ---------------------------------------------------------------------------
10. PRINT
---------------------------------------------------------------------------
There were no print styles at all, which for THIS product is a genuine gap
rather than a nicety. Financial statements, trial balances and journal
entries are artefacts people print, hand in, and mark. Printing the app as
it stood meant a near-black background across every page: unreadable on
most printers, and a serious waste of toner for a learner in a school
computer lab — a plausible deployment for a Nairobi-built accounting
teaching tool.
Inverted to ink-on-paper, chrome removed, and the ledger structure kept. */
@media print {
@page {
margin: 18mm;
}
html, body {
background: #fff !important;
color: #111 !important;
}
/* Interface chrome carries no meaning on paper. */
.topbar,
.topbar-actions,
.home-jumpnav,
.skip-link,
.btn,
button,
nav,
[data-nav],
.learning-topbar-track {
display: none !important;
}
.app {
max-width: none;
padding: 0;
}
/* Panels become ruled boxes rather than filled ones. */
.card,
.spine,
.statement,
.taccount,
[class*="panel"] {
background: #fff !important;
border: 1px solid #999 !important;
box-shadow: none !important;
color: #111 !important;
}
h1, h2, h3, p, span, td, th, div, b, strong {
color: #111 !important;
}
/* Debit and credit must stay distinguishable in black and white, so they
are re-encoded as weight rather than hue. */
.spine-side.is-owe .spine-tag,
.spine-side.is-entrust .spine-tag {
color: #111 !important;
font-weight: 700;
}
.spine-side.is-owe,
.spine-side.is-entrust {
background: none !important;
}
/* A statement split across a page break is unmarkable. */
.statement,
.taccount,
.journal-entry,
.trial-balance {
break-inside: avoid;
page-break-inside: avoid;
}
h1, h2, h3 {
break-after: avoid;
page-break-after: avoid;
}
/* Printed links are useless without their target. */
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 10pt;
color: #555;
}
.skeleton::after,
.btn.is-busy::after {
display: none !important;
}
}
/* ---------------------------------------------------------------------------
11. SCROLL & OVERSCROLL
--------------------------------------------------------------------------- */
/* Stops a scroll gesture inside a modal or drawer from chaining to the page
behind it once the inner element hits its end — the "scrolling the wrong
thing" feeling, and on iOS the cause of accidental pull-to-refresh. */
.modal,
.drawer,
.sheet,
[role="dialog"] {
overscroll-behavior: contain;
}
/* Anchored sections sit below the sticky jump-nav rather than under it.
base.css sets this for four specific ids; generalised so a new section does
not silently scroll to the wrong place. */
[id^="home-"],
section[id] {
scroll-margin-top: 72px;
}
/* ---------------------------------------------------------------------------
12. SMALL CORRECTIONS
--------------------------------------------------------------------------- */
/* Images should never blow out a narrow layout. */
img, svg, video, canvas {
max-width: 100%;
height: auto;
}
/* Screen-reader-only utility, for text that must be announced but not shown
(see the live region added in index.html). */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* iOS zooms the viewport when a focused input's font-size is below 16px.
Several inputs in the journal practice grid are set smaller for density,
which made every tap on an amount field jerk the page. */
@media (pointer: coarse) {
input, select, textarea {
font-size: max(16px, 1em);
}
}
/* A consistent caret colour; the browser default is stark white against the
warm palette. */
input, textarea {
caret-color: var(--entrust);
}
/* ---------------------------------------------------------------------------
13. SEMANTIC HEADING PROMOTION — visual metrics preserved
---------------------------------------------------------------------------
Eight of ten screens had no , and three began at , so a screen-reader
user navigating by heading got no document anchor. Fixing that meant changing
tag levels — but h1 is set at clamp(42px, 7vw, 76px) against h2 at
clamp(21px, 5.4vw, 32px), so a bare tag swap would have visibly redesigned
the product.
These two classes carry the metrics of the level each element previously
was, so the semantic level changes and the rendering does not.
.screen-title an that must LOOK like the it replaced
.hero-title an that must LOOK like the it replaced
Values are copied from the base h1/h2 rules rather than re-derived, so the
two stay in step if the type scale is ever retuned. */
h1.screen-title {
margin: 9px 0 9px;
font-family: var(--font-display);
font-size: clamp(21px, 5.4vw, 32px);
line-height: 1.18;
letter-spacing: -.01em;
}
h2.hero-title {
margin: 15px 0 5px;
font-family: var(--font-display);
font-size: clamp(1.8rem, 3vw, 2.65rem);
line-height: 1.08;
letter-spacing: -.015em;
}
/* An inline style="font-size:30px" on the promoted onboarding title already
wins over both, so that screen needs nothing further. */
/* ---------------------------------------------------------------------------
13. RESPONSIVE HARDENING
---------------------------------------------------------------------------
Everything below is a fix for a failure that was MEASURED in a real browser
across the 320-1920px matrix, not a preference. Each rule names the
measurement that produced it. Nothing here changes the visual identity, the
information architecture or any screen's layout at a width where that
layout already fitted — these are the widths where it did not.
This block lives in polish.css because polish.css is loaded last (asserted
by tools/qa-ui-dom.js) and several of the rules being corrected are
re-declared UNCONDITIONALLY by later sections of screens.css, which beats an
earlier @media block on cascade order no matter how narrow the viewport is.
That is the actual root cause of the Error Hunter failure below, so a fix
placed anywhere earlier would have lost the same argument.
--------------------------------------------------------------------------- */
/* --- 13.1 The top navigation must never leave a control off-screen ---------
MEASURED: .topbar-actions is a non-wrapping flex row. At 390px it laid out
571px wide inside a 358px container, putting "Academy" at 335-463 and
"Restart" at 471-587 — both entirely outside the viewport. Because
html,body carry overflow-x:hidden (base.css, "UNIVERSAL DEVICE RESILIENCE")
the page did not scroll to reveal them: they were silently clipped, and
document.elementFromPoint at their own centres returned nothing. Two
navigation controls simply did not exist on any phone.
The same row overflowed on learning screens at 768-1180px, where the
learning stage track claims a 320-420px minimum beside it: at 1024px
"Academy" and "Restart" were off-screen on a laptop.
Wrapping is the whole fix. The buttons keep their size, their pill styling
and their order; they flow onto a second row instead of off the edge. */
.topbar-actions{
flex-wrap: wrap;
justify-content: flex-end;
row-gap: var(--sp-2);
min-width: 0;
/* max-width is what actually makes the wrap happen. The row is a flex ITEM
of .topbar with flex:0 0 auto (and flex-shrink:0 on learning screens), so
its used width is its max-content width - 410px inside a 296px topbar at
320px - and children that never run out of room never wrap. Capping it to
the container is the one line that turns "wrap allowed" into "wrap". */
max-width: 100%;
}
/* A flex item's default min-width:auto let these buttons shrink below their
own label and then clip it — measured at 320px as a 100px label inside a
90px button ("Journal" rendered as "Journ"). With the row wrapping they no
longer need to shrink, and this makes that explicit. */
.topbar-actions .btn{
flex: 0 0 auto;
min-width: 0;
}
/* The learning stage track carries min-width:420px (320px below 980px), which
is more than the row can spare anywhere under 1280px. base.css already
drops it onto its own line below 760px; this is that same rule, applied at
the width where the overflow actually begins. Above 1280px nothing changes. */
@media (max-width: 1279px){
.topbar{ flex-wrap: wrap; }
.topbar.is-learning .learning-topbar-track{
order: 3;
flex-basis: 100%;
min-width: 0;
max-width: none;
padding: 2px 0 0;
}
.topbar.is-learning .topbar-actions{ margin-left: auto; }
}
/* --- 13.2 Error Hunter: restore the small-screen collapse ------------------
MEASURED: at 390px .forensics-layout computed to `250px 82px`. The case
archive kept its full desktop column and the main case panel — the brief,
the evidence board and every answer button — was squeezed into 82px, one
word per line, with the verdict panel overlapping it. The answer buttons
themselves laid out at 286-572px against a 390px viewport and were clipped
out of reach. The 200-case module was unusable on a phone.
CAUSE, precisely: screens.css DOES carry @media(max-width:900px) rules that
collapse this grid to one column (line ~1556 and ~1628). Two later sections
of the same file — "Journal Practice fit alignment" and "FINAL DENSITY
POLISH" — then re-declare .forensics-layout unconditionally. Equal
specificity, later wins, media query irrelevant: the mobile collapse was
dead from the moment those blocks were appended.
These rules restate the collapse the file already intended, after those
blocks, with the same values. No new layout is introduced. */
@media (max-width: 1180px){
.forensics-layout{ grid-template-columns: minmax(0, 250px) minmax(0, 1fr); }
.forensics-right{ grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* MEASURED at 1024px: the identity bar's fixed `270px 430px 260px` totals
960px plus gaps inside a 958px shell and was clipped by the shell's own
overflow:hidden. */
.forensics-identity{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; }
}
@media (max-width: 900px){
.forensics-layout{ grid-template-columns: minmax(0, 1fr); }
.forensics-left,
.forensics-right,
/* MEASURED: .forensics-main is itself a grid whose single `1fr` track
resolved to 300px (a 1fr track's automatic minimum is min-content, which
does not shrink) inside an 82px column. minmax(0,1fr) is the standard
correction and changes nothing where the column is already wide enough. */
.forensics-main{ grid-template-columns: minmax(0, 1fr); }
.forensics-right{ grid-column: auto; }
.forensics-identity{ grid-template-columns: minmax(0, 1fr) auto; }
.case-heading{ grid-template-columns: minmax(0, 1fr); }
.forensic-answer-grid{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px){
.forensics-left,
.forensics-right{ grid-template-columns: minmax(0, 1fr); }
.evidence-grid{ grid-template-columns: minmax(0, 1fr); }
.forensics-actions,
.forensics-result-actions{ flex-direction: column; }
.forensics-actions .btn{ width: 100%; }
}
/* --- 13.3 Mentor hero: a fixed 300px portrait in a 254px column ------------
MEASURED at 320px: .teacher-hero-art .teacher-avatar is width:300px, so the
hero grid's single 1fr track resolved to 300px inside a 254px card and the
copy beside it was clipped by the card's overflow:hidden. img{max-width:100%}
in section 12 could not help — the box around the image is what was fixed.
The portrait keeps its aspect ratio and its place in the composition; it
simply stops being wider than the card it sits in. */
@media (max-width: 760px){
.teacher-hero{ grid-template-columns: minmax(0, 1fr); }
.teacher-hero-art .teacher-avatar,
.teacher-hero-art .teacher-avatar-ben{
width: min(100%, 300px);
max-width: 100%;
}
}
@media (max-width: 420px){
.teacher-hero-art .teacher-avatar,
.teacher-hero-art .teacher-avatar-ben{
width: min(100%, 200px);
height: auto;
aspect-ratio: 300 / 360;
}
.teacher-hero-art{ min-height: 0; }
}
/* --- 13.4 Home tab strip: the last tab was unreachable ---------------------
MEASURED at 320px and 360px: the "How ILO FLOW works" tab laid out at
271-414 and 275-418 against viewports of 320 and 360. home-redesign.css
makes the strip scrollable at <=640px, but the tabs still shrink below
their labels first and the last one lands past the edge before the scroll
is usable. Giving each tab a non-shrinking basis makes the strip scroll
properly instead of overflowing silently. */
@media (max-width: 640px){
.home-tabs{
overflow-x: auto;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.home-tabs::-webkit-scrollbar{ display: none; }
.home-tab{
flex: 0 0 auto;
scroll-snap-align: start;
white-space: nowrap;
}
}
/* --- 13.5 Touch targets -----------------------------------------------------
MEASURED: the mentor-voice checkbox rendered 13x13 CSS px on every
coarse-pointer viewport — roughly a quarter of the 24x24 minimum. Only the
hit area grows; the control's drawn size is the browser's own. */
@media (pointer: coarse){
input[type="checkbox"],
input[type="radio"]{
min-width: 24px;
min-height: 24px;
}
}
/* --- 13.6 Long unbroken strings ---------------------------------------------
MEASURED on /contact.html at 320px: the support address laid out at
124-327 against a 320px viewport. A single 28-character token with no break
opportunity cannot wrap without being told it may. */
.site-footer a,
.fin-contact-item a,
a[href^="mailto:"]{
overflow-wrap: anywhere;
word-break: break-word;
}
/* --- 13.7 A link is not a target at 21px -----------------------------------
MEASURED: .video-watch-link renders display:block, full width and 21.5px
tall on every phone viewport - a full-width block link is not an inline
link in a sentence, so the 24px minimum applies to it. Padding only; the
type, colour and underline are unchanged. */
.video-watch-link,
.fin-contact-item a{
padding-block: 3px;
min-height: 24px;
}
/* --- 14.1 Error Hunter stats strip: label+value overflowing their own card -
MEASURED: below 900px, .forensics-stats>div is 140px wide (min-width at
900px, flex-basis at 620px), but its two real children — the label
and the value — sit side by side on one row via grid-template-
columns:auto 1fr auto, sized to their own content ("auto" grid tracks
don't shrink below their content's natural width, and nothing on this
element suppresses that). For the widest card, "FORENSIC RATING" (label)
plus "RISING STAR" (value) need more width than a 140px card minus
padding has to give — the grid overflows its own box sideways, so the
text spills into the neighbour card and its border-right cuts straight
through a word, matching the reference screenshot ("ACC|URACY").
The first card (Investigator Level, with the shield badge) has its own
fix in 14.2 below, since it carries a third element (the XP progress
meter) that this simple label/value stack doesn't account for. For the
plain label/value cards, stacking the value under the label instead of
beside it means each line only ever needs to fit the card's own width,
never the neighbour's: no shrinking, no clipping, nothing hidden. */
@media (max-width: 900px){
.forensics-stats > div:not(:first-child){
grid-template-columns: 1fr;
row-gap: 2px;
}
.forensics-stats > div:not(:first-child) b{
grid-column: 1;
justify-self: start;
}
}
/* --- 14.2 Error Hunter stats strip: Investigator Level squeezed into card 2 -
MEASURED: the same 140px card width applies to card 1 (Investigator
Level), but card 1 carries a THIRD element the others don't — the XP
progress meter — on top of a longer label ("INVESTIGATOR LEVEL 01") than
any other card. Its grid is still `auto 1fr auto` with the label column
sized to `1fr`, which (like `auto`) does not shrink below the label's own
content width unless told to. At 140px that content width is wider than
the card, so the same class of overflow as 14.1 happens here too — except
this card's overflow bleeds sideways into card 2 (Case Streak), which is
why the streak label and the level bar/XP text were reading as tangled
together in the reference screenshot.
Rebuilt as two columns instead of three (badge, then label/meter/XP
stacked in a single column with `minmax(0,1fr)` so it is genuinely
allowed to shrink to the card's own width) and given a little more room
than the plain cards, since it is carrying more content than they are. */
@media (max-width: 900px){
.forensics-stats > div:first-child{
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto auto;
min-width: 172px;
}
.forensics-stats > div:first-child .stat-shield{
grid-row: 1 / -1;
}
.forensics-stats > div:first-child p{
grid-column: 2;
grid-row: 1;
}
.forensics-stats > div:first-child .forensics-meter{
grid-column: 2;
grid-row: 2;
}
.forensics-stats > div:first-child b{
grid-column: 2;
grid-row: 3;
justify-self: start;
}
}
@media (max-width: 620px){
.forensics-stats > div:first-child{
flex: 0 0 172px;
}
}
/* --- 14.3 Error Hunter stats strip: the edge fade paints over live text ----
MEASURED: screens.css's `.forensics-stats::after` (added to signal "more
to scroll") is a 28px-wide gradient from transparent to a fully OPAQUE
`#091019` at the right edge, pinned to the scroll container's own box —
not to the scrolled content. Whichever card's text happens to land under
that 28px strip at a given scroll position gets its trailing characters
painted over completely, not just dimmed, which is what "Accuracy" fading
into nothing was: the fade sat on top of legible, already-visible text
instead of only hinting at content still off-screen.
Narrower and genuinely translucent (fading toward the background colour
at partial opacity, never fully opaque) keeps the same "there's more →"
cue without erasing whatever text happens to sit underneath it. */
@media (max-width: 900px){
.forensics-stats::after{
width: 16px;
background: linear-gradient(90deg, transparent, rgba(9, 16, 25, .55));
}
}
/* --- 14.4 Error Hunter stats strip: Accuracy reads dim next to its siblings -
MEASURED: "0/200" is plain parchment (bright, near-white), "RISING STAR"
is .gold (--f-gold, #d9a441 — warm and saturated), but "100%" only gets
.positive (--f-green, #82c88d) with no other adjustment. #82c88d is a
pale, desaturated green — against the #091019 card background it has
noticeably less contrast than its neighbours, so even once the edge fade
in 14.3 stopped painting over it, it still reads as the "quiet" value in
the row next to a bright white figure and a warm gold one.
Scoped to this one strip only (the shared --f-green token is left alone,
since it's used correctly elsewhere — e.g. the intelligence panel and the
current-case marker — where it isn't sitting directly beside gold and
white siblings). A brighter, more saturated green closes that gap without
turning it into a different colour. */
.forensics-stats .positive{
color: #6fe08e;
}