/* ========================================================================== V099 ยท legibility and consistency repairs Companion to v099-features.mjs. Layered above v027..v098; nothing here edits an older file. Every rule below is addressed to something that was measured first, on the live DOM, in both themes, at 1440 / 1024 / 768 / 390px. The measurements are quoted with each block, because the previous four rounds of this project have all lost time to a selector that was written from memory. --------------------------------------------------------------------------- PART 1 - the dark theme, where four surfaces kept the LIGHT palette --------------------------------------------------------------------------- The dark theme is applied by v088 as `html[data-ial-theme="dark"]`, and it repaints the *text* tokens (`--d-ink` and friends) but not every *surface*. Four surfaces still paint their light-mode background, so their headings - which do pick up the dark theme's pale ink - end up pale-on-pale: element fg bg contrast #quickGrid .quick h4 rgb(238,242,249) on #FFFFFF 1.12 FAIL #quickGrid .quick rgb(232,237,246) on #FFFFFF 1.17 FAIL .complexMini b rgb(232,237,246) on #FFFFFF 1.17 FAIL .complexMini span rgb(139,152,171) on #FFFFFF 2.93 FAIL .gpEmpty rgb(168,182,201) on #F8FAFC 1.97 FAIL .v087-trendEmpty rgb(139,152,171) on #F8FAFC 2.80 FAIL Note what is NOT in that list: the body copy inside those same cards (`.quick p`, `.quickHint`, `.gpEmpty b`) measured 4.55-4.76 and passes. Those have their own `color`, written for the light palette, and the dark theme never touched them. So the fix is not "darken the headings"; it is to move the whole surface to the dark palette and re-state every colour on it, or the cards would go from pale-on-pale to dark-on-dark - which is the same defect wearing the other coat. Both halves of each pair are written below, and the test asserts both. The background values are the dark theme's own (#1E293B card, #0E1522 page behind it), so a repaired card sits on the page instead of glaring off it. ========================================================================== */ /* ---------- the four dashboard session cards (Weak Areas and friends) ------- */ html[data-ial-theme="dark"] #quickGrid .quick { background: #1e293b; border-color: #334155; } html[data-ial-theme="dark"] #quickGrid .quick:hover { border-color: #475569; } /* the heading, and the icon well at the top of the card */ html[data-ial-theme="dark"] #quickGrid .quick h4 { color: #f1f5f9; } /* body copy and the "not unlocked yet" line, restated for the dark surface */ html[data-ial-theme="dark"] #quickGrid .quick p { color: #a8b6c9; } html[data-ial-theme="dark"] #quickGrid .quick .quickHint { color: #fbbf24; } /* The icon well was #1C2A4D on white, which still reads on the new card, but its glyph was inheriting the pale ink meant for a dark page. Pin both. */ html[data-ial-theme="dark"] #quickGrid .quick .iconbox { background: #24334d; color: #dbe4f0; } /* ---------- the "nothing here yet" lines ---------- */ /* These two paint their own #F8FAFC. Making them transparent is better than repainting them: the card they sit in (`--d-card`) is already the right colour, so the line simply joins it, and there is one less value to keep in sync when the dark palette moves. Both the line and its are restated - the was the one that passed on the old background and would have failed on the new one. */ html[data-ial-theme="dark"] .gpEmpty, html[data-ial-theme="dark"] .v087-trendEmpty { background: transparent; color: #a8b6c9; } /* Both a higher specificity AND !important, because the rule this replaces is `body.ial-v030 .gpEmpty b { color:#64748b !important }` in v091 - and that one is a LIGHT-theme value with no theme guard on it, so it was winning in the dark theme too (measured: #64748B on #1A2333 is 3.34). Specificity alone cannot outrank !important, and !important alone would still leave it a coin toss against another !important; the pair settles it. `.gpCard` is named rather than `.gpEmpty`'s parent chain so the selector reads as the box it is about. */ html[data-ial-theme="dark"] .gpCard .gpEmpty b { color: #cbd5e1 !important; } /* ---------- "Question of the day" marks ---------- */ html[data-ial-theme="dark"] .complexMini { background: transparent; } html[data-ial-theme="dark"] .complexMini b { color: #f1f5f9; } html[data-ial-theme="dark"] .complexMini span { color: #a8b6c9; } /* ========================================================================== PART 2 - the light theme, one label that missed by 0.04 ========================================================================== `.tag.amber` measured 4.46 against the 4.5 the small-text rule asks for. Only the ink moves; the tinted chip behind it is what makes it read as a difficulty band, and it stays. #7A5600 keeps the same hue and lands at 5.4. The guard is `:not([data-ial-theme="dark"])` rather than a plain selector, and that matters: two earlier files already style this chip (v032:253 `.ial-v030 .tag.amber{color:#946a00}`, and the inline copy in index.html:52), so a rule with two classes loses to them outright. It has to be at least three classes - and once it is, it would also out-specify the dark theme's own value and paint a light-theme brown onto a dark chip. In the dark theme this chip already measures 8.17 and needs nothing. ========================================================================== */ html:not([data-ial-theme="dark"]) body.ial-v030 .tag.amber { color: #7a5600; } /* ========================================================================== PART 3 - the phone bar: eight destinations where the rail keeps six ========================================================================== v085 removed two destinations from the rail on purpose - "My Work and Paper Archive move into Review and Papers" - and its rule is scoped to `body.ial-v030 .nav button[data-tab=...]`, which only ever matched the desktop rail. The phone bar (`.mobileNav`) is a second copy of the same list and was never included, so a phone still showed eight. Measured at 390px, with all eight: each cell was 48px wide and the labels are longer than that - "My Work" wrapped onto two lines, which made the bar 12px taller than the active pill behind it, so the labels and the highlight disagreed about where the row was. Six cells is 64px each, which fits every label on one line. The entries themselves stay in the DOM and stay reachable: both panels are still opened from inside Review and Papers, exactly as on the desktop. */ body.ial-v030 .mobileNav button[data-tab="mywork"], body.ial-v030 .mobileNav button[data-tab="archive"] { display: none !important; } /* `nowrap` plus a touch of negative tracking. The labels are short single words once the two long ones are gone, and at 10.5px "Progress" measures about 48px against a 64px cell - but only if it is allowed to stay on one line. */ body.ial-v030 .mobileNav button { white-space: nowrap; font-size: 10.5px; letter-spacing: -0.2px; padding: 11px 2px; } /* ========================================================================== PART 4 - the Back that undoes nothing ========================================================================== v097-features.mjs:151 builds `#v097PracticeBack` at the top of the practice list, and clicking it goes Home. Measured at 1440px it is a real 73x27 button at y=46 - and it is never the right control there: * the practice list is a top-level destination, with its own entry in the rail and in the phone bar, so a Back that goes Home undoes nothing; * inside the workspace, the one place a Back belongs, the panel it lives in (`#practice`) is hidden - and the workspace has had its own Back since v096 anyway. Hidden rather than removed because v097's observer rebuilds the node whenever its id is missing; leaving the id in the DOM keeps that check satisfied and the observer quiet. Full reasoning in v099-features.mjs, section 2. */ body.ial-v030 #v097PracticeBack { display: none !important; } /* ========================================================================== PART 5 - the phone: filters that cost the whole first screen ========================================================================== v097 decided the practice filters should be visible without asking, and on a desktop that is right. It implemented that with `body.v097 #v092FilterDrawer { max-height: none !important }` - on the element, unconditionally. The side effect is that the drawer can no longer be closed at all: v092's toggle flips its own `.v092-open` class, but v097's `max-height` outranks v092's `max-height: 720px` and keeps the row full height, so the caret folds and the row does not move. Measured at 390px: the drawer is 343px tall, from the "MODULE" label to the "Practice selected" row, and the first question card starts at y=857 - below an 844px viewport. A student opening Practice sees three dropdowns and no questions. So the forced-open state is scoped to the wider layout, and on phones the drawer is gated on the class v092 actually owns, which the toggle can still change. The desktop behaviour is untouched. Four properties, not one. v097's own note on this element records why: collapsing with `max-height` alone leaves the controls focusable and the drawer merely invisible - "a filter you cannot see but can tab into". */ @media (max-width: 700px) { body.ial-v030 #v092FilterDrawer:not(.v092-open) { max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } } /* ========================================================================== PART 6 - the status pill, stretched to the width of the card ========================================================================== `.qstate` is the small pill that holds the answer-state dot (v067.css:93 - "a bare dot floating at the right edge read as a smudge, it needs a home"). Measured, in the same card: 1440px .qright flex-column, align-items: flex-end .qstate 30x24 390px .qright flex-column, align-items: stretch .qstate 332x24 On a phone the column stretches its children, so the pill becomes a 332px empty bar with a 10px ring stranded at the left end. That reads as a broken progress bar, not as a status - the one thing the pill exists to prevent. Only the pill is pinned. The "Open Question" button underneath it is the other child of the same column and should keep filling the width. */ @media (max-width: 700px) { body.ial-v030 #questionList .qcard .qstate { align-self: flex-start; } }