/* Reserve the scrollbar gutter permanently. The page container is centred at max-width 1120px, so a
screen WITH a scrollbar and one WITHOUT centre 7-8px apart — every navigation between a long screen
and a short one nudged the whole layout sideways. Reserving the gutter keeps the container fixed.
Unsupported browsers ignore it and simply keep the old behaviour. */
html { scrollbar-gutter: stable; }
/* LOCK THE PAGE BEHIND AN OPEN DIALOG (2026-09-15). The scrim dimmed the page and blocked clicks, but the
wheel still scrolled it -- so the content a teacher was reading slid away underneath a modal she could
not interact with, and on a trackpad it happened by accident.
PURE CSS, via :has(), rather than a JS lock and an unlock. A lock that is applied on open and released on
close needs a counter for stacked dialogs (Class Settings -> Delete confirm) and a dispose hook that fires
at exactly the right moment; :has() asks the DOM instead of tracking it, so stacking, teardown and a
dialog removed by any other means are all correct for free and there is nothing to leave stuck. :has() is
already used elsewhere in this file, so it is not a new dependency.
NO LAYOUT SHIFT, and that is what scrollbar-gutter: stable above buys: overflow: hidden is still a
scrolling overflow value, so the gutter stays reserved and the centred container does not jump sideways
the moment a dialog opens. Without that line this rule would be visibly worse than the bug.
The dialog's own scrolling is untouched -- .rr-modal keeps max-height: 88vh with overflow-y: auto. */
html:has(.rr-modal-back), html:has(.rp-modal-backdrop) { overflow: hidden; }
:root {
--rp-ink: #1f2933;
--rp-head: #1f3864;
--rp-accent: #10788d;
--rp-accent-bright: #1a9fbf;
--rp-accent-soft: #e2eef1;
--rp-warm: #f5871f;
--rp-line: #d9e2ec;
--rp-bg-soft: #f7fafc;
--rp-good: #1e7a34;
--rp-good-bg: #e6f4ea;
/* GOLD, IN TWO VALUES, because the standard asks two different things of it (2026-09-15).
--rp-gold is for BORDERS AND ICONS: the current-level chip on the journey strip, the honours frame
round a distinction certificate. Non-text, so the bar is 1.4.11 at 3:1, and 3.25:1 clears it.
Its old comment claimed "contrast on white" without saying contrast for WHAT, which is how it came to
be used for text as well.
--rp-gold-text is for gold TEXT, and exists because .cert-distinction was wearing the value above. It
renders "★ With Distinction ★" at 16px bold on the certificate -- bold does NOT reach the large-text
bar until 18.7px, so it needed 4.5:1 and had 3.25:1. On the proudest page in the product.
#8a6508 is 5.32:1 and still reads gold rather than brown. #997009 was the lightest gold that looked
right and measures 4.49:1 -- under the bar by one hundredth, which is the whole argument for not
cutting these fine. */
--rp-gold: #b8860b;
--rp-gold-text: #8a6508;
--rp-bad: #b23b3b;
--rp-bad-bg: #fbe9e9;
--rp-hint-bg: #fff7e6;
--rp-hint-line: #f0c36d;
/* SECONDARY TEXT, one value (2026-09-15). Captions, sub-labels, table headers, attributions, "no work
yet" placeholders -- everything quieter than body copy but still meant to be READ.
It replaces FIVE hard-coded greys across 57 rules -- #7b8794 (38), #9aa5b1 (10), #8a94a0, #8a95a0,
#94a3b8 -- every one of which failed WCAG 2.2 AA 1.4.3 at the sizes it was used: 3.66:1 down to
2.50:1 against the 4.5:1 normal text needs, and almost all of it set between .72rem and .9rem.
THE TWO-TIER GREY DID NOT SURVIVE, and that is a real loss honestly taken. There was a darker muted
(#7b8794) and a lighter one (#9aa5b1), and NO lighter value can pass 4.5:1 -- the tier and the
standard are incompatible at these sizes, so the tier went. Where a hierarchy is still wanted it has
to come from weight, size or spacing, not from fading the text further.
#636e7b, not the #68737f that fixed .rr-modal-hint first: 5.19:1 on white and 4.95:1 on --rp-bg-soft,
which muted text sits on often enough to matter. #68737f is 4.61:1 on that panel -- passing, with
almost no room for a later tweak to quietly break it. The same headroom argument that chose 28px over
24px for a button, applied to the thing it was actually about. */
--rp-muted: #636e7b;
/* An INACTIVE control, which 1.4.3 exempts as incidental -- only the locked level chips wear it. Named
rather than left as a literal so the exemption is a decision on the record and not an oversight that
happens to look like one. */
--rp-disabled: #9aa5b1;
/* QUIET NON-TEXT AT THE 3:1 BAR (2026-09-15) — the row chevron, the empty-cell dash, the "off" milestone
marker, and the boundary of a quiet button. They are graphics, so the bar is 1.4.11 Non-text Contrast
at 3:1 rather than 1.4.3's 4.5:1, and this is the lightest blue-grey that clears it with room (3.20:1).
It exists BECAUSE that distinction kept getting lost: each of the three was a separate literal between
1.72:1 and 2.57:1, and the temptation each time was either to leave them alone or to darken them to
--rp-muted and flatten a quiet mark into body text. One token holds the middle position. */
--rp-mark: #86919f;
}
.rp-main { max-width: 1120px; margin: 0 auto; padding: 1.25rem 1.25rem 4rem; color: var(--rp-ink); flex: 1 0 auto; width: 100%; }
/* --- App chrome: navy header + footer bookend the light content (adapted from eLearnster
team.master; footer lifted near-verbatim). Sticky footer via #app flex column. --- */
#app { display: flex; flex-direction: column; min-height: 100vh; }
.rp-appheader { background: #1b3a57; color: #fff; }
.rp-appheader-in { max-width: 1120px; margin: 0 auto; padding: 16px 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rp-brand { display: flex; align-items: center; gap: 14px; }
/* Inline "dropped-A" logotype: the mark IS the letter A at the head of the wordmark. Cropped viewBox tucks
it flush against "pply"; it towers above the caps (star up top) and its base drops to the p's descender. */
.rp-logo-mark { height: 40px; width: auto; display: inline-block; vertical-align: -5px; margin-right: 2px; }
.rp-brand-text { line-height: 1.12; }
.rp-wordmark { font-size: 25px; font-weight: 800; letter-spacing: .2px; }
.rp-wm2 { color: var(--rp-warm); }
.rp-tm { font-size: 11px; vertical-align: super; font-weight: 600; }
/* Subject-area descriptor — "Apply2Mastery Literacy" reads as one product name (brand bold, subject
lighter, a thin divider between). Swap "Literacy" per program (Math, Science, …) in the family. */
.rp-subject { font-weight: 500; color: #aecbe8; margin-left: 10px; letter-spacing: .2px; }
.rp-tagline { font-size: 11px; color: #aecbe8; font-weight: 600; letter-spacing: .3px; margin-top: 9px; }
.rp-levelbadge { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); padding: 7px 15px; border-radius: 999px; }
.lvl-emblem { display: block; flex: 0 0 auto; }
/* Tier-colored medallion (docs/LevelLabels_Plan.md palette). --tier fills the disc, --tier-mark the center;
both unset (no level / Level 0) → transparent disc + accent center = the original neutral placeholder. */
.lvl-emblem-disc { fill: var(--tier, transparent); }
.lvl-emblem-mark { fill: var(--tier-mark, var(--rp-accent-bright)); }
.lvl-tier-1 { --tier: #B0774A; --tier-mark: #fdf3ea; }
.lvl-tier-2 { --tier: #9CA3AB; --tier-mark: #ffffff; }
.lvl-tier-3 { --tier: #D4AF37; --tier-mark: #fffbe9; }
.lvl-tier-4 { --tier: #D8DCE0; --tier-mark: #7c8894; }
.lvl-tier-5 { --tier: #7FD4E8; --tier-mark: #08313b; }
.rp-levelbadge .lvl-emblem { width: 28px; height: 28px; color: #fff; }
/* Level emblem beside the "Your {Level} Progress" heading (navy, on the light dashboard). */
.nd-arc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 .5rem; }
.nd-arc-heading { display: flex; align-items: center; gap: 12px; }
.nd-arc .nd-arc-head h2 { margin: 0; }
.nd-arc-head .lvl-emblem { width: 30px; height: 30px; padding: 6px; box-sizing: border-box; background: var(--rp-accent-soft); color: var(--rp-accent); border-radius: 8px; margin-top: 0; }
/* Growth line (dashboard suggestion #2): a compact tier-color dot ladder + one climb sentence, under the
Reading Progress heading. Dots run start-tier → Diamond; past filled, current lit + ringed, future hollow.
All CSS (no inline SVG). Tier fills reuse docs/LevelLabels_Plan.md. */
.nd-growth { margin: 16px 0 1rem 20px; }
.nd-growth-ladder { display: flex; align-items: flex-start; margin: 0 0 9px; }
.nd-growth-step { display: flex; flex-direction: column; align-items: center; position: relative; }
.nd-growth-step.has-conn { margin-left: 28px; }
.nd-growth-step.has-conn::before { content: ""; position: absolute; top: 8px; left: -28px; width: 28px; height: 2px; background: #d7dce2; border-radius: 2px; }
.nd-growth-step.has-conn.conn-done::before { background: #b7bfc8; }
.nd-growth-dotcell { height: 17px; display: flex; align-items: center; }
.nd-growth-dot { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; }
.nd-growth-dot.cur { width: 17px; height: 17px; box-shadow: 0 0 0 3px var(--nd-gt-ring, rgba(31,58,86,.18)); }
.nd-growth-dot.future { background: transparent; border: 1.5px solid #c7cdd4; }
.nd-growth-line { font-size: 13px; color: #42586a; line-height: 1.5; margin: 0; }
.nd-growth-line strong { font-weight: 600; color: #1f3a56; }
.nd-gt-1 { background: #B0774A; } .nd-gt-1.cur { --nd-gt-ring: rgba(176,119,74,.30); }
.nd-gt-2 { background: #9CA3AB; } .nd-gt-2.cur { --nd-gt-ring: rgba(156,163,171,.34); }
.nd-gt-3 { background: #D4AF37; } .nd-gt-3.cur { --nd-gt-ring: rgba(212,175,55,.32); }
.nd-gt-4 { background: #D8DCE0; } .nd-gt-4.cur { --nd-gt-ring: rgba(150,160,170,.34); }
.nd-gt-5 { background: #7FD4E8; } .nd-gt-5.cur { --nd-gt-ring: rgba(127,212,232,.40); }
.nd-arc-count { font-size: .85rem; color: #52606d; white-space: nowrap; flex: 0 0 auto; }
.rp-badge-text { display: flex; flex-direction: column; line-height: 1.05; gap: 8px; }
.rp-badge-kicker { font-size: 10px; color: #aecbe8; letter-spacing: .2px; }
.rp-badge-name { font-size: 15px; font-weight: 700; }
.rp-appheader-bar { height: 4px; background: var(--rp-accent-bright); }
/* Right side of the header: level badge + Sign Out. */
.rp-header-right { display: flex; align-items: center; gap: 14px; }
/* Account menu — the level badge (.rp-levelbadge) is the trigger; Home projects this in via SectionOutlet. */
.acct { position: relative; }
.acct-trigger { color: #fff; font: inherit; cursor: pointer; min-height: 44px; text-align: left; }
.acct-trigger:hover { background: rgba(255, 255, 255, .18); }
.acct-trigger:focus-visible { outline: 3px solid var(--rp-accent-bright); outline-offset: 2px; }
.acct-caret { flex: 0 0 auto; margin-left: 2px; transition: transform .15s ease; }
.acct-trigger[aria-expanded="true"] .acct-caret { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .acct-caret { transition: none; } }
.acct-menu { background: #fff; color: #22303c; border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .25); padding: 6px; min-width: 380px; z-index: 1000; }
.acct-item { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 8px; font-size: .95rem; color: #22303c; cursor: pointer; }
.acct-item:hover, .acct-item.active { background: #eef2f5; }
/* Divider line between entries (not before the first). */
.acct-item + .acct-item { border-top: 1px solid #e6ebef; }
/* Sign Out is a normal-looking entry — no red text, no red hover (danger styling removed by request). */
.acct-item.danger:hover, .acct-item.danger.active { background: #eef2f5; }
/* One highlight at a time: while the mouse is over an item, drop the keyboard-active tint from every
OTHER item, so hover and roving focus never both show. */
.acct-menu:has(.acct-item:hover) .acct-item.active:not(:hover) { background: transparent; }
/* Passage Reports — a modal picker of completed passages, opened from the account menu. Reuses the
.rp-modal chrome (padding zeroed here); a header + scrolling list + footer, so any number of
passages stays contained. */
/* Selector carries BOTH classes so it beats the later, equal-specificity `.rp-modal` base (which sets
max-width:400px + padding:24px) — otherwise the dialog stays 400px no matter what max-width is set here. */
.rp-modal.acct-preport { max-width: 500px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 80vh; }
.acct-preport-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 18px 20px 14px; border-bottom: 1px solid var(--rp-line); }
.acct-preport .acct-preport-head h2 { margin: 0; font-size: 1.2rem; color: var(--rp-head); }
.acct-preport-close { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #52606d; font-size: 1rem; cursor: pointer; }
.acct-preport-close:hover { background: #eef2f5; }
.acct-preport-close:focus-visible { outline: 3px solid var(--rp-accent-bright); outline-offset: 2px; }
.acct-preport-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.acct-preport-row { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.acct-preport-row:hover { background: #eef2f5; }
.acct-preport-row:focus-visible { outline: 3px solid var(--rp-accent-bright); outline-offset: -2px; }
.acct-preport .acct-preport-foot { margin: 0; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rp-line); color: var(--rp-muted); font-size: .82rem; text-align: center; }
/* Passage row internals: big number · two-line body (title over source type) · band chip. */
.acct-pnum { color: #52606d; font-size: 1.3rem; font-weight: 700; min-width: 1.9rem; text-align: left; flex-shrink: 0; }
.acct-pbody { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; line-height: 1.25; }
.acct-ptitle { font-weight: 600; color: var(--rp-ink); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-pgenre { color: var(--rp-muted); font-weight: 400; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-preport-row .band-pill { flex-shrink: 0; margin-left: .9rem; }
/* Passage List — full-page index of completed passages (account menu → Passage Reports). Rows reuse
the .acct-preport-row look; the page adds a header, card borders, and a Back button. */
.plist-head { margin-bottom: 1rem; }
.plist-head h2 { margin: 0 0 .2rem; color: var(--rp-head); }
.plist-sub { margin: 0; color: var(--rp-muted); font-size: .9rem; }
.plist-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 1.5rem; }
.plist-row { border: 1px solid var(--rp-line); background: #fff; }
.plist-row:hover { background: #f5f8fb; }
.acct-backdrop { display: none; }
/* Desktop: dropdown anchored under the badge, right-aligned to it. */
@media (min-width: 641px) { .acct-menu { position: absolute; top: calc(100% + 8px); right: 0; } }
/* Mobile: bottom sheet + scrim (reuses the modal backdrop tone). */
@media (max-width: 640px) {
.acct-menu { position: fixed; left: 0; right: 0; bottom: 0; min-width: 0; border-radius: 16px 16px 0 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 30px rgba(0, 0, 0, .3); }
.acct-item { min-height: 52px; font-size: 1rem; }
.acct-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 28, 43, .55); z-index: 999; }
}
/* "Are you sure?" confirmation dialog. */
.rp-modal-backdrop { position: fixed; inset: 0; background: rgba(15, 28, 43, .55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.rp-modal { background: #fff; color: #22303c; width: 100%; max-width: 400px; border-radius: 14px; padding: 24px 24px 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.rp-modal h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--rp-head); }
.rp-modal p { margin: 0 0 20px; line-height: 1.5; }
.rp-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.rp-modal-actions button { font-weight: 700; padding: 9px 16px; border-radius: 8px; cursor: pointer; }
/* THE EDGE, not the fill (2026-09-15). This button had no perceivable boundary: a #eef2f5 fill is 1.05:1
against the dialog's white and the #d5dee6 border was 1.36:1, against the 3:1 that 1.4.11 asks of the
visual information identifying a control. It was the safe half of a two-button confirm and the half you
could not see.
NO BLUE-GREY IN THE OLD FAMILY REACHES 3:1 -- #8f9dab is still only 2.77 -- which is why this was logged
as needing a treatment rather than a darker value, and why it waited. --rp-mark is that treatment: the
token already carried exactly this bar for the chevron and the dash, so a control boundary joins them
rather than inventing a fifth grey.
THE FILL IS LEFT ALONE. Once the edge carries the boundary the fill is decoration, and 1.4.11 asks
nothing of it; the label stays #22303c at 11.99:1 on that fill.
Cancel is still visibly the QUIETER of the two -- the confirm beside it is accent-filled -- which is the
point: prominence follows reversibility, and this dialog's action is reversible. */
.rp-modal-cancel { background: #eef2f5; border: 1px solid var(--rp-mark); color: #22303c; }
.rp-modal-cancel:hover { background: #e2e8ee; }
.rp-modal-confirm { background: var(--rp-accent); border: 1px solid var(--rp-accent); color: #fff; }
.rp-modal-confirm:hover { filter: brightness(1.08); }
.rp-modal-actions button:focus-visible { outline: 3px solid var(--rp-accent-bright); outline-offset: 2px; }
.rp-appfooter { flex-shrink: 0; background: #1b3a57; color: #fff; text-align: center; padding: 22px 1.25rem 26px; border-top: 4px solid var(--rp-accent-bright); }
.rp-elogo-img { width: 160px; height: auto; display: inline-block; }
.rp-copy { font-size: 13px; color: #c7d6e6; margin-top: 12px; line-height: 1.6; }
.app-header h1 { font-size: 1.6rem; color: var(--rp-head); margin: .25rem 0 1rem; }
.app-header .subtle { font-size: .95rem; color: var(--rp-muted); font-weight: 400; }
.loading { color: var(--rp-muted); }
.lede { color: #52606d; margin-bottom: 1rem; }
/* ---- story list ---- */
.story-list { display: flex; flex-direction: column; gap: .75rem; max-width: 640px; }
.story-card {
display: flex; align-items: center; justify-content: space-between;
text-align: left; padding: 1rem 1.25rem; border: 1px solid var(--rp-line);
border-radius: 12px; background: #fff; cursor: pointer; transition: all .12s ease;
}
.story-card:hover { border-color: var(--rp-accent); box-shadow: 0 2px 10px rgba(43,108,176,.12); transform: translateY(-1px); }
/* Completed mission row: play card + status (band + on-demand report link) */
.story-row { display: flex; align-items: stretch; gap: .6rem; }
.story-row > .story-card { flex: 1; }
.story-status { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: .25rem; flex: 0 0 auto; }
.btn-link { background: none; border: none; color: var(--rp-accent); cursor: pointer; font-size: .82rem; font-weight: 600; padding: 0; white-space: nowrap; }
.btn-link:hover { text-decoration: underline; }
.story-title { font-size: 1.1rem; font-weight: 600; color: var(--rp-head); }
.story-genre { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; padding: .2rem .55rem; border-radius: 999px; }
.genre-fiction { background: #e8f0fe; color: #1a56b8; }
.genre-nonfiction { background: #e6f4ea; color: #1e7a34; }
/* ---- two-column player ---- */
.passage-col { position: relative; }
@media (min-width: 992px) {
.passage-col > .passage { position: sticky; top: 1rem; }
}
.passage {
background: var(--rp-bg-soft); border: 1px solid var(--rp-line); border-radius: 12px;
/* Left gutter reduced ~40% (1.25rem -> .75rem) for both passage displays (reading + question). */
padding: 1.1rem 1.25rem 1.1rem .75rem; max-height: calc(100vh - 8rem); overflow-y: auto;
}
/* Reading phase: full-width story, natural page flow (no sticky, no inner scroll box) */
.passage-full { position: static; }
.passage-full > .passage { position: static; max-height: none; overflow: visible; }
/* ---- reference tabs (question phase) ----
The passage and the second source share one column as tab panels. Stacking them left the source in
whatever space remained below a viewport-height passage — measured at 1280x800 the poem was 1%
visible at rest, and scrolling to it pushed the question stem off the top. The STACK is what sticks
and scrolls now, so whichever panel is showing gets the column's whole height. */
.ref-stack { display: flex; flex-direction: column; gap: .5rem; }
@media (min-width: 992px) {
.ref-stack { position: sticky; top: 1rem; }
/* the stack owns the sticky behaviour; the inner passage must not also claim it */
.passage-col .ref-stack > .ref-panel > .passage { position: static; }
}
.ref-tabs { display: flex; gap: .3rem; }
.ref-tab {
flex: 1; padding: .45rem .8rem; font-size: .9rem; font-weight: 600; cursor: pointer;
color: #52606d; background: #fff; border: 1px solid var(--rp-line);
border-radius: 8px 8px 0 0; border-bottom-color: transparent;
}
.ref-tab:hover { color: var(--rp-accent); }
.ref-tab.on { color: var(--rp-head); background: var(--rp-bg-soft); border-color: var(--rp-line); border-bottom-color: var(--rp-bg-soft); }
.ref-tab:focus-visible { outline: 3px solid var(--rp-accent); outline-offset: -3px; }
/* One scroll container per panel. The inner .passage keeps its styling but gives up its own
max-height/overflow, or the student gets two nested scrollbars in the same column. */
.ref-panel { max-height: calc(100vh - 10rem); overflow-y: auto; }
.ref-panel > .passage { max-height: none; overflow: visible; }
@media (max-width: 991.98px) {
/* No sticky below the lg breakpoint, so cap the panel shorter — a full-height reference block
would push the question more than a screen down, which is what made the phone unusable. */
.ref-panel { max-height: 45vh; }
}
/* Action row: primary on the left, "Pause and Finish Later" pushed to the far right by its own
margin-left:auto. They are deliberately NOT adjacent — pause ejects the student from the mission,
so it should not sit a few pixels from the button they are repeatedly clicking to advance. */
.reading-actions { margin-top: 1.25rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.reading-actions .btn-next { margin-top: 0; }
.passage-title { font-size: 1.15rem; color: var(--rp-head); margin: 0 0 .6rem; }
/* ---- Reading-phase cover band: navy header with a genre chip, the title, and a source-type motif.
Full-bleed to the .passage card edges via negative margins; motif is a low-opacity watermark. ---- */
.passage-cover > .pcover {
position: relative; overflow: hidden; background: var(--rp-head);
margin: -1.1rem -1.25rem 1.1rem; padding: 1.05rem 1.25rem 1.1rem; border-radius: 11px 11px 0 0;
}
.pcover-body { position: relative; z-index: 1; }
.pcover-chip {
display: inline-block; background: var(--rp-accent-bright); color: #04252e;
font-size: .8rem; font-weight: 600; padding: .18rem .7rem; border-radius: 999px; margin: 0 0 .5rem;
}
.pcover-title { color: #fff; font-size: 1.5rem; line-height: 1.2; margin: 0; }
.pcover-title:focus, .pcover-title:focus-visible { outline: none; }
.pcover-motif { position: absolute; right: -6px; top: -4px; width: 172px; height: auto; opacity: .16; z-index: 0; }
/* Drop cap on the opening paragraph of the reading cover. */
.passage-cover .para-row:first-of-type .para-text::first-letter {
float: left; font-size: 2.9rem; line-height: .74; font-weight: 700;
color: var(--rp-accent); padding: .1rem .55rem 0 0;
}
/* Paragraph numbering — format B: left-margin, baseline, high-contrast (not superscript/color-only) */
.para-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin: 0 0 .55rem; padding: .15rem .4rem; border-radius: 6px; transition: background .15s ease; }
.para-num { flex: 0 0 1.6rem; order: 0; text-align: right; font-weight: 700; color: #52606d; font-variant-numeric: tabular-nums; }
.para-text { flex: 1; order: 2; margin: 0 1.5rem 0 0; line-height: 1.75; }
.para-highlight { background: #fff3cd; }
/* order: 3 keeps the paragraph 🔊 visually on the RIGHT even though it comes
before the text in the DOM (so tab order is: paragraph audio → its vocab word). */
.para-listen { flex: 0 0 auto; order: 3; border: none; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; padding: .15rem .3rem; border-radius: 6px; }
.para-listen:hover { background: #e6effb; }
.para-listen.on { background: var(--rp-accent); color: #fff; }
/* Per-paragraph Spanish (Support ≥ Vocab+Story): "ES" toggle sits by the 🔊, panel wraps below */
.para-es-toggle { flex: 0 0 auto; order: 4; border: 1px solid var(--rp-line); background: #fff; color: var(--rp-accent); cursor: pointer; font-size: .72rem; font-weight: 700; line-height: 1; padding: .2rem .4rem; border-radius: 6px; }
.para-es-toggle:hover { background: #eef4ff; border-color: var(--rp-accent); }
.para-es-toggle.on { background: var(--rp-accent); color: #fff; border-color: var(--rp-accent); }
/* UNIFORM BORDER (Ron, 2026-09-16), the standing rule: same border on all four sides, and louder is a
border COLOUR rather than one side's width. Same shape as .rr-nextstep the same day -- the three quiet
sides were --rp-line at 1.31:1 on white, so the 3px accent left edge WAS the border, and dropping it
alone would have left an almost edgeless panel. The accent moved to all four sides: 5.13:1 against the
page, 4.77:1 against the panel's own fill.
The radius was already uniform here. */
.para-es-panel { flex: 0 0 100%; order: 5; margin: .1rem 0 .2rem 2.2rem; padding: .5rem .8rem; background: #f2f7ff; border: 1px solid var(--rp-accent); border-radius: 8px; }
.para-es-bar { display: flex; align-items: center; gap: .5rem; margin-bottom: .2rem; }
/* Head of a revealed Spanish block: the Spanish 🔊 leads the "Español" label (speaker at the beginning
of the Spanish text). */
.para-es-head { display: flex; align-items: center; gap: .35rem; margin-bottom: .2rem; }
.para-es-listen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; border: none; background: transparent; color: var(--rp-accent); cursor: pointer; font-size: 1rem; line-height: 1; padding: .1rem .35rem; border-radius: 6px; }
.para-es-listen:hover { background: #e2ecfb; }
.para-es-listen.on { background: var(--rp-accent); color: #fff; }
/* the "Español" label rides INSIDE the button, so clicking it plays too; keep it readable while playing */
.para-es-listen.on .para-es-label { color: #fff; }
.para-es-label { font-size: .75rem; font-weight: 700; color: var(--rp-accent); text-transform: uppercase; letter-spacing: .03em; }
.para-es-text { flex: 1; order: 2; margin: 0; line-height: 1.6; color: #3e4c59; font-style: italic; }
/* Reusable actions menu (⋯) — shown when an item has 2+ actions (story paragraphs, vocab words) */
.am { position: relative; order: 3; display: inline-flex; }
.vocab-term .am { margin-left: auto; }
.am-btn { border: 1px solid var(--rp-line); background: #fff; color: var(--rp-accent); cursor: pointer; font-size: 1rem; line-height: 1; padding: .1rem .45rem; border-radius: 6px; }
.am-btn:hover { background: #eef4ff; border-color: var(--rp-accent); }
.am-btn.on { background: var(--rp-accent); color: #fff; border-color: var(--rp-accent); }
.am-menu { position: absolute; top: 100%; right: 0; z-index: 40; min-width: 210px; margin-top: 4px; background: #fff; border: 1px solid var(--rp-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(31, 56, 100, .18); overflow: hidden; outline: none; }
.am-item { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem; cursor: pointer; font-size: .95rem; color: var(--rp-ink); }
.am-item + .am-item { border-top: 1px solid var(--rp-line); }
.am-ico { width: 1.2rem; text-align: center; flex: 0 0 auto; }
.am-item.active { background: #eef4ff; }
.am-item.on { font-weight: 700; color: var(--rp-accent); }
.listen-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.4rem; }
.listen-bar .btn-secondary.on { background: var(--rp-accent); color: #fff; }
/* The parent's "Next" button sits at the RIGHT end of the top control row (no scrolling to reach it). */
.bar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.bar-actions .btn-next { margin-top: 0; }
/* In-passage vocabulary words (bolded; signal "defined term") */
.vocab-mark { font-weight: 700; color: var(--rp-head); }
.vocab-inline { position: relative; }
/* Interactive term (reading phase): Model-B — opens a definition bubble at the word */
.vocab-mark-btn { font: inherit; font-weight: 700; color: var(--rp-accent); background: none; border: 0; padding: 0 1px; margin: 0; cursor: pointer; border-bottom: 2px dotted var(--rp-accent); }
.vocab-mark-btn:hover { background: #eef4ff; }
.vocab-mark-btn:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; border-radius: 2px; }
.vocab-pop { position: absolute; top: 1.7em; left: 0; z-index: 30; display: block; min-width: 220px; max-width: 320px;
background: #fff; border: 1px solid var(--rp-accent); border-radius: 10px; box-shadow: 0 8px 24px rgba(31, 56, 100, .18);
padding: .55rem .7rem; font-weight: 400; line-height: 1.45; color: var(--rp-ink); white-space: normal; }
.vocab-pop-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; }
.vocab-pop-audio { display: inline-flex; }
.vocab-pop-word { font-weight: 700; color: var(--rp-head); }
.vocab-pop-def { display: block; color: #3e4c59; }
/* ===== Spanish home-language support (muted, secondary to the English) ===== */
/* Preview card */
.vocab-es { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 0; color: #52606d; font-style: italic; }
.vocab-es-term { font-weight: 700; font-style: normal; color: var(--rp-accent); }
.vocab-es .listen-btn { font-style: normal; }
.vocab-cognate, .vocab-false { font-size: .9rem; margin: .2rem 0 0; color: #52606d; }
.cognate-badge { display: inline-block; background: var(--rp-good-bg); color: var(--rp-good); font-weight: 700; border-radius: 6px; padding: 0 .35rem; margin-right: .25rem; }
.false-badge { display: inline-block; background: var(--rp-hint-bg); color: #8a6d3b; font-weight: 700; border: 1px solid var(--rp-hint-line); border-radius: 6px; padding: 0 .35rem; margin-right: .25rem; }
/* Inline bubble */
.vocab-pop-es { display: block; margin-top: .35rem; padding-top: .35rem; border-top: 1px dashed var(--rp-line); color: #52606d; font-style: italic; }
.vocab-pop-es-term { font-weight: 700; font-style: normal; color: var(--rp-accent); margin-right: .3rem; }
.vocab-pop-tag { display: inline-block; margin-top: .25rem; font-size: .8rem; font-weight: 700; font-style: normal; border-radius: 6px; padding: 0 .35rem; }
.vocab-pop-tag.is-cognate { background: var(--rp-good-bg); color: var(--rp-good); }
.vocab-pop-tag.is-false { background: var(--rp-hint-bg); color: #8a6d3b; border: 1px solid var(--rp-hint-line); }
.glossary { margin-top: .9rem; border: 1px solid var(--rp-line); border-radius: 10px; background: #fff; padding: .5rem .9rem; }
.glossary summary { font-weight: 600; color: var(--rp-head); cursor: pointer; }
.glossary dl { margin: .5rem 0 0; }
.glossary dt { font-weight: 700; margin-top: .4rem; }
.glossary dd { margin: 0 0 .2rem; color: #52606d; }
/* vocabulary entries (used in both the glossary and the preview) */
.vocab-term { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--rp-head); margin-top: .5rem; }
.vocab-term .listen-btn { margin-left: auto; }
.vocab-def { margin: 0; color: #334155; }
.vocab-sample { margin: 0 0 .4rem; color: #64748b; font-style: italic; font-size: .92rem; }
.vocab-eg { font-style: normal; font-weight: 600; color: var(--rp-muted); }
/* vocabulary preview (pre-teach screen shown before the story) */
.vocab-preview { max-width: 760px; }
.vocab-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.vocab-actions .btn-next { margin-top: 0; } /* else the primary button sits lower than Back (its own stacked-layout margin) */
.vocab-preview h2 { color: var(--rp-head); }
/* Intro is a programmatic focus target (announced on arrival), not a keyboard stop → no focus ring */
.vocab-intro:focus { outline: none; }
.vocab-list { margin: 1rem 0 1.25rem; list-style: none; padding: 0; }
.vocab-entry { padding: .6rem .9rem; border: 1px solid var(--rp-line); border-radius: 10px; background: var(--rp-bg-soft); margin-bottom: .6rem; }
.vocab-entry .vocab-term { margin-top: 0; font-size: 1.08rem; }
/* ---- questions ---- */
.progress-line { font-weight: 600; color: #52606d; margin-bottom: .75rem; display: flex; align-items: center; gap: .75rem; }
.progress-bar-track { flex: 1; height: 6px; background: var(--rp-line); border-radius: 999px; overflow: hidden; }
.progress-bar-fill { display: block; height: 100%; background: var(--rp-accent); transition: width .25s ease; }
.q-stem { display: flex; align-items: flex-start; gap: .6rem; font-size: 1.1rem; font-weight: 600; margin-bottom: .9rem; }
.q-stem > span { flex: 1; }
/* Stem is a programmatic focus target (tabindex=-1, not keyboard-tabbable), so no focus ring. */
.q-stem:focus { outline: none; }
/* Two-part item: "Part A" / "Part B" label above the question */
.q-part-label { font-size: .8rem; font-weight: 700; color: var(--rp-accent); text-transform: uppercase; letter-spacing: .03em; margin: 0 0 .5rem; }
/* reusable listen button (vocab words + questions) */
.listen-btn { flex: 0 0 auto; border: 1px solid var(--rp-line); background: #fff; cursor: pointer; font-size: .85rem; line-height: 1; padding: .2rem .45rem; border-radius: 8px; color: var(--rp-accent); }
.listen-btn:hover { background: #eef4ff; border-color: var(--rp-accent); }
.listen-btn.on { background: var(--rp-accent); color: #fff; border-color: var(--rp-accent); }
.listen-lang { margin-left: .3em; font-size: .68rem; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; }
/* Spanish question support (Support = Spanish+Questions) — reveal on demand; content-pending. */
/* Question controls on their own left row above the stem — the Listen speaker is dressed to match the
passage/poem .btn-secondary sitting next to it (fills navy while playing). */
.q-controls { margin: 0 0 .9rem; }
.q-controls .listen-btn { display: inline-flex; align-items: center; gap: .35rem; border: 1.5px solid var(--rp-accent); background: #fff; color: var(--rp-accent); font-size: .95rem; font-weight: 600; line-height: 1.5; padding: .5rem 1rem; border-radius: 10px; cursor: pointer; }
.q-controls .listen-btn:hover { background: #f0f6ff; }
.q-controls .listen-btn.on { background: var(--rp-accent); color: #fff; }
/* The base .listen-lang is a tiny .68rem "EN/ES" tag; here "Listen" is the button's full label, so
render it at full button size to match the .btn-secondary next to it. */
.q-controls .listen-lang { font-size: .95rem; font-weight: 600; letter-spacing: normal; margin-left: 0; vertical-align: baseline; }
/* Spanish reveal — the WHOLE question repeated below (stem + lettered options) as ONE reference panel,
not co-mingled into the option buttons. Styled like the poem's .para-es-panel; one "🔊 Español" speaker. */
/* UNIFORM BORDER (Ron, 2026-09-16), the standing rule: same border on all four sides, and louder is a
border COLOUR rather than one side's width. Same shape as .rr-nextstep the same day -- the three quiet
sides were --rp-line at 1.31:1 on white, so the 3px accent left edge WAS the border, and dropping it
alone would have left an almost edgeless panel. The accent moved to all four sides: 5.13:1 against the
page, 4.77:1 against the panel's own fill.
THE RADIUS WENT UNIFORM TOO: it was `0 8px 8px 0`, square on the left so the corners sat flush
against the accent bar. With no bar to sit against, square left corners are just an unexplained asymmetry. */
.q-es-panel { margin: 1rem 0 .4rem; padding: .7rem .85rem; background: #f2f7ff; border: 1px solid var(--rp-accent); border-radius: 8px; }
.q-es-panel .listen-btn { display: inline-flex; align-items: center; gap: .3rem; border: none; background: transparent; color: var(--rp-accent); font-weight: 600; cursor: pointer; padding: .1rem .2rem; margin-bottom: .45rem; }
.q-es-panel .listen-btn.on { background: var(--rp-accent); color: #fff; border-radius: 6px; }
.q-es-panel .listen-lang { font-size: .95rem; font-weight: 600; letter-spacing: normal; margin-left: 0; vertical-align: baseline; }
.q-es-stem { margin: 0 0 .5rem; font-weight: 600; font-style: italic; color: #2a3542; }
.q-es-options { display: flex; flex-direction: column; gap: .3rem; }
.q-es-opt { color: #3e4c59; font-style: italic; line-height: 1.5; }
.q-es-letter { font-weight: 700; font-style: normal; color: var(--rp-accent); margin-right: .25rem; }
.q-options { display: flex; flex-direction: column; gap: .55rem; }
.q-option {
display: flex; align-items: flex-start; gap: .6rem; text-align: left;
padding: .7rem .9rem; border: 1.5px solid var(--rp-line); border-radius: 10px;
background: #fff; cursor: pointer; font-size: 1rem; transition: all .1s ease;
}
.q-option:hover:not(:disabled) { border-color: var(--rp-accent); background: #f5f9ff; }
.q-option:disabled { cursor: default; }
.q-letter { font-weight: 700; color: var(--rp-accent); }
.q-option.correct { border-color: var(--rp-good); background: var(--rp-good-bg); }
.q-option.correct .q-letter { color: var(--rp-good); }
.q-option.wrong { border-color: var(--rp-bad); background: var(--rp-bad-bg); opacity: .8; }
.q-option.wrong .q-letter { color: var(--rp-bad); }
/* ✓ / ✗ shape cue (bold + larger) so correct/wrong isn't color-only — WCAG 1.4.1 */
.q-letter.mark-ok, .q-letter.mark-no { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.q-letter.mark-ok { color: var(--rp-good); }
.q-letter.mark-no { color: var(--rp-bad); }
.panel { margin-top: .8rem; padding: .7rem .9rem; border-radius: 10px; line-height: 1.55; }
.panel.hint { background: var(--rp-hint-bg); border: 1px solid var(--rp-hint-line); }
.panel.explain { background: #eef2ff; border: 1px solid #c7d2fe; }
.panel.correct { background: var(--rp-good-bg); border: 1px solid #a7d7b4; color: #14532d; }
/* LINE-HEIGHT IS PINNED (2026-09-15), for the reason the .btn-sm rule below already gives: a button
otherwise inherits `normal`, which varies by font, so the height is an approximation rather than a number
anyone can rely on. This was the one button left unpinned -- and it is the STUDENT's main button, the one
a child presses on every screen, which made it the wrong one to leave as an estimate.
1.25rem = 20px, so the button is 20 + 2 x .6rem = 39.2px. Chosen to sit at or just above what `normal`
gives a 16px system font (~1.15-1.2), so nothing shrinks and no label can clip. In rem, never px: WCAG
1.4.4 Resize Text means the box has to grow with the reader's default font size. */
.btn-next {
margin-top: 1.1rem; padding: .6rem 1.1rem; border: none; border-radius: 10px;
background: var(--rp-accent); color: #fff; font-size: 1rem; line-height: 1.25rem;
font-weight: 600; cursor: pointer;
}
/* THE TEACHER BUTTON SIZE — 32px tall (Ron, 2026-08-22) = 1rem line-height + .5rem padding top and bottom.
Declared ONCE and applied in the markup as `btn-next btn-sm`. It previously lived in four separate scoped
rules that had each converged on the same values independently; changing the size meant four edits, and a
missed one is how a button quietly drops below the accessibility floor.
line-height is PINNED because a button otherwise inherits `normal`, which varies by font — the height
would be approximate rather than a number you can rely on.
Expressed in rem, never a fixed height. The target is WCAG 2.2 AA (docs/Accessibility_Rules.md), which
includes 1.4.4 Resize Text: a px height clips its own label when a low-vision user raises their default
font size, whereas padding grows with the text. 32px also sits well clear of the 24px floor in 2.5.8
Target Size (Minimum).
TEACHER SURFACES ONLY. The student app keeps full-size .btn-next — that is what a child taps.
THE SECOND SELECTOR IS THE SHARED REPORTS (Ron, 2026-09-01). The Certification Report, the Progress Report,
one passage and the certificate are rendered verbatim for BOTH audiences, so they cannot carry `btn-sm` in
their own markup without shrinking the child's buttons. `.tc-drill` wraps them only on the teacher path, so
the host decides the size and the components stay audience-agnostic — the same seam AdultContext uses.
Declared as one selector list rather than a copied block: the sizes were four converged copies once already,
and the whole point of this rule is that changing 32px is one edit. */
THE THIRD SELECTOR IS EVERY DIALOG FOOTER (Ron, 2026-09-14). Dialog buttons had their own rule at 28px
and now share this one. They were sized the same DAY as the 32px above and never compared to it: the
argument recorded on that rule was 24-vs-28 -- whether the WCAG 2.2 AA 2.5.8 floor left enough headroom --
so the dialog button was sized against a LEGAL MINIMUM rather than against this product's own button, and
nobody ever asked 28-vs-32. A teacher clicking Save on the roster page got 32px and Save in a dialog got
28px, for no stated reason. The two rules also differed in exactly ONE value -- vertical padding, .375rem
against .5rem -- with identical font-size, line-height, horizontal padding and radius, which is what made
folding them a rounding rather than a redesign.
32px keeps 8px above the 2.5.8 floor instead of 4, and matches the macOS and Fluent default button. */
.btn-sm,
.tc-drill .btn-next { font-size: .8rem; line-height: 1rem; padding: .5rem .88rem; border-radius: 8px; }
/* Same 32px, reached differently: footer buttons reserve a 1.5px border box so .btn-danger can COLOUR a
border instead of adding one. Without the transparent border the outlined Delete would come out 35px
against a 32px Cancel, and the padding is reduced by exactly the border width so the height is unchanged
for every other button. Declared here rather than on .btn-danger so the two can never disagree. */
.rr-modal-actions .btn-next { font-size: .8rem; line-height: 1rem; border-radius: 8px;
border: 1.5px solid transparent;
padding: calc(.5rem - 1.5px) calc(.88rem - 1.5px); }
/* THE DESTRUCTIVE BUTTON (Ron, 2026-09-15). Delete and Cancel were both the same blue: two identical
buttons side by side, no weight on either, on the one dialog where getting it wrong cannot be undone.
QUIET DANGER, NOT LOUD DANGER -- outlined red on white, not filled red. Filling it would make the
destructive button the most prominent thing in the dialog, which fights the rule that already protects
the safe choice by POSITION ("the right-most control is Cancel"). Colour marks the danger; it does not
invite the click. Cancel keeps its filled blue and stays the visually obvious way out.
#b3261e is the app's existing error red, not a new colour: 6.54:1 as a label on white (1.4.3 wants 4.5)
and 6.54:1 as a border (1.4.11 wants 3). And colour is never the only signal -- the button says "Delete"
(docs/Accessibility_Rules.md).
PROMINENCE FOLLOWS REVERSIBILITY, which is why the student's sign-out confirm looks different and is
still right: signing out is reversible ("your progress is saved"), so its action is the prominent one.
These deletes are not. */
/* A BODY, NOT JUST AN OUTLINE (Ron, 2026-09-15). Both of these were white with a coloured border, and a
white button on a white dialog leans entirely on a 1.5px line — it passes 1.4.11 at 3.20:1 and still does
not read as a button. Ron spotted it on the STUDENT app's Cancel, which has had a grey fill all along and
is the older, better design; the teacher app is the one that drifted.
The tell on .btn-danger was sharper: it already HAD a tint, but only on :hover. A button whose resting
state is white and whose hover invents a body has it backwards — hover should deepen a body, not create
one.
NO NEW COLOURS. The grey is lifted from .rp-modal-cancel; --rp-bad-bg is already in the palette
(.q-option.wrong, .band-beginning).
THE FILLS ARE DECORATION, both ~1.15:1 against white, and the BORDERS still carry the compliance —
#86919f at 3.20:1 and #b3261e at 6.54:1 against the dialog behind them. Body AND boundary, not one
standing in for the other. Labels measured on their own fills: #52606d on grey is 5.74:1, #b3261e on the
red tint 5.58:1, both past 1.4.3's 4.5.
The tier ordering survives: filled accent shouts, grey has weight, red has weight and reads as a warning.
Danger is still not INVITED — its colour names it — it just no longer looks unfinished. */
.rr-modal-actions .btn-danger { background: var(--rp-bad-bg); border-color: #b3261e; color: #b3261e; }
.rr-modal-actions .btn-danger:hover { background: #f7dcda; border-color: #b3261e; color: #b3261e; }
/* THE QUIET BUTTON — the way OUT of a dialog (Ron, 2026-09-15). Cancel and "Back" were filled accent,
identical to Save and Create beside them: two loud buttons giving no visual answer to "what did I come
here to do". It was invisible until .btn-danger made one button mean something, and then the flatness of
the rest was the obvious thing on the screen.
THREE TIERS NOW, and one rule: exactly one FILLED button per footer, the action you opened the dialog for;
.btn-quiet for the way out; .btn-danger for irreversible.
THE EXCEPTION IS DELIBERATE AND IS THE INTERESTING PART: in the two DELETE CONFIRMS, Cancel stays FILLED.
Delete is quiet red and Cancel is the loud one, because prominence follows reversibility -- a destructive
confirm is the one place the SAFE choice should be the prominent one. So the rule reads: the primary is
the action you came for, EXCEPT in an irreversible confirm, where the primary is the way out. That is what
makes those two footers look deliberately different rather than accidentally odd.
Border colour is --rp-mark, the token that already carries control boundaries at 1.4.11's 3:1; the label
is #52606d at 6.46:1. It colours the transparent border the footer rule already reserves, so the height
stays 32px. */
.rr-modal-actions .btn-quiet { background: #eef2f5; border-color: var(--rp-mark); color: #52606d; }
.rr-modal-actions .btn-quiet:hover { background: #e2e8ee; border-color: #52606d; color: var(--rp-head); }
/* THE TWO ADULT SIZES, and the rule that chooses between them (Ron, 2026-09-14). There were THREE in use --
38px, 32px, 28px -- and no rule, which is how the size labelled "THE TEACHER BUTTON SIZE" came to cover 11
of ~43 shipping buttons. Now:
38px (bare .btn-next) -- PAGE-LEVEL PRIMARY actions: Add Class, Print sign-in cards, View Certificate,
a Back that leaves the screen. One or two per page, and the biggest thing on it.
32px (this rule) -- EVERYTHING ELSE adult-facing, dialog footers included.
Before adding a fourth size, say which of these two the control is and use it.
margin-top: 0 clears the base button's 1.1rem, which is meant for stacked page layouts and would add
itself INSIDE the footer's flex row on top of the 24px .rr-modal-actions already sets (flex items do not
collapse margins). Zeroed at the base, so the 24px above the buttons is the whole gap -- it used to be
cleared only on .rr-actions-split, which is why that one dialog was the only one with a deliberate gap. */
.rr-modal-actions .btn-next { margin-top: 0; }
.btn-next:hover { background: #245a94; }
/* ---- score summary ---- */
.score-summary h2 { color: var(--rp-head); }
.score-big { display: flex; align-items: baseline; gap: 1rem; margin: 1rem 0 1.25rem; padding: 1rem 1.25rem; border-radius: 12px; }
.score-pct { font-size: 2.4rem; font-weight: 800; }
.score-band { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.band-achieving { background: var(--rp-good-bg); color: #14532d; }
.band-approaching { background: #e8f0fe; color: #1a56b8; }
.band-emerging { background: var(--rp-hint-bg); color: #92600b; }
.band-beginning { background: var(--rp-bad-bg); color: #8a2b2b; }
.score-table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; }
.score-table th, .score-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rp-line); font-size: .95rem; }
.score-table th { color: #52606d; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
/* Report tables: strand name stays left; Questions/Score/Mastery centered under centered headers */
.story-report .score-table th:not(:first-child), .story-report .score-table td:not(:first-child),
.strand-table th:not(:first-child), .strand-table td:not(:first-child) { text-align: center; }
/* Report grouped by CCSS strand: strand header row + indented skill rows */
.strand-table .strand-head th, .strand-table .strand-head td { background: var(--rp-bg-soft); font-weight: 700; color: var(--rp-head); text-transform: none; font-size: .95rem; border-top: 2px solid var(--rp-line); }
.strand-table .skill-cell { padding-left: 1.4rem; color: #52606d; }
/* Certification Report — inline anchor drill-down: an anchor row expands to its contributing best-of-type
passages (collapsed by default, so the printed certificate stays clean). */
.anchor-toggle { display: inline-flex; align-items: center; gap: .35rem; border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.anchor-toggle:hover { color: var(--rp-accent); }
.anchor-caret { display: inline-block; transition: transform .12s ease; font-size: .7rem; color: var(--rp-accent); }
/* Anchor rows carry BOTH the full skill name and a print short form; the print block swaps them. Screen is
the wide medium and the accessible one, so it shows the full name — the short span is aria-hidden in the
markup, so a screen reader hears the skill named once either way. */
.anchor-short { display: none; }
.anchor-caret.open { transform: rotate(90deg); }
.strand-table .anchor-contrib td { background: #f7fafd; color: #52606d; font-size: .88rem; }
.strand-table .anchor-contrib .contrib-cell { padding-left: 2.6rem; }
.contrib-type { color: var(--rp-muted); font-style: italic; margin-left: .5rem; font-size: .85rem; }
/* brand + level heading */
.app-header .tagline { color: var(--rp-accent); font-style: italic; font-weight: 600; margin: -.35rem 0 1rem; letter-spacing: .02em; }
.level-name { color: var(--rp-head); font-size: 1.3rem; margin: 0 0 .3rem; }
/* ---- simulation ---- */
.section-label { margin: 1.2rem 0 .5rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rp-muted); font-weight: 700; }
.capstone-card { border: 1.5px solid var(--rp-accent); background: linear-gradient(180deg, #f5f9ff, #eef4ff); }
.genre-sim { background: #ece6ff; color: #5b3fb8; }
.sim-brief { background: #eef4ff; border: 1px solid #c7d9f5; border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.sim-role { display: inline-block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #5b3fb8; background: #ece6ff; padding: .2rem .6rem; border-radius: 999px; }
.sim-scenario { margin: .6rem 0 .4rem; line-height: 1.6; }
.sim-question { margin: 0; }
.sim-pt-note { margin: .55rem 0 0; padding-top: .55rem; border-top: 1px dashed #c7d9f5; font-size: .9rem; color: #40506b; }
/* Two-part Performance-Task framing */
.sim-part-banner { display: inline-block; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: #1f6a4d; background: #e3f5ec; border: 1px solid #b6e2cd; padding: .28rem .7rem; border-radius: 999px; margin-bottom: .7rem; }
.sim-part-break { background: #eef4ff; border: 1px solid #c7d9f5; border-radius: 12px; padding: 1.4rem 1.5rem; text-align: center; }
.sim-part-break p { margin: .7rem 0 1.1rem; line-height: 1.6; color: #2a3446; }
.sim-part-tag { display: inline-block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #1f6a4d; background: #d8f0e3; padding: .22rem .7rem; border-radius: 999px; }
.source-packet { display: flex; flex-direction: column; gap: .8rem; max-height: calc(100vh - 6rem); overflow-y: auto; }
.packet-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rp-muted); font-weight: 700; }
.source { border: 1px solid var(--rp-line); border-radius: 10px; padding: .7rem .9rem; background: #fff; }
/* Cover mode (poem/source reading screen): match the passage card + navy cover band EXACTLY. Same padding,
radius, and soft bg as .passage, and the band full-bleeds via negative margins equal to that padding, so
the header is the same width. Reuses .pcover-chip/.pcover-title/.btn-secondary → identical fonts+buttons. */
.source.source-cover { padding: 1.1rem 1.25rem; border-radius: 12px; background: var(--rp-bg-soft); }
.source-cover > .pcover {
position: relative; overflow: hidden; background: var(--rp-head);
margin: -1.1rem -1.25rem 1.1rem; padding: 1.05rem 1.25rem 1.1rem; border-radius: 11px 11px 0 0;
}
.pcover-attrib { display: block; color: #cdd8ea; font-size: .82rem; font-style: italic; margin-top: .35rem; }
.source-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .4rem; border-bottom: 1px solid var(--rp-line); padding-bottom: .35rem; }
.source-type { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: #fff; background: var(--rp-accent); padding: .12rem .5rem; border-radius: 999px; white-space: nowrap; }
.source-title { font-weight: 700; color: var(--rp-head); }
/* Byline / data credit. Quiet, but it must be on screen — RI.9 items depend on it. */
.source-attrib { font-size: .78rem; color: var(--rp-muted); font-style: italic; }
/* UNIFORM BORDER (Ron, 2026-09-16), the standing rule: same border on all four sides, and louder is a
border COLOUR rather than one side’s width. The THIRD of the three Spanish reveal panels, swept with
.para-es-panel and .q-es-panel rather than after them -- same job, same visual family, so a fix that
reached two of three would have left the asymmetry looking deliberate.
This was the sharpest case: it declared NO other border, so the 3px accent left edge was not the loud
side, it was the only side. The accent moved to all four: 5.13:1 against the page (.source is #fff),
4.89:1 against the panel’s own --rp-bg-soft fill.
THE RADIUS WENT UNIFORM TOO: it was `0 6px 6px 0`, square on the left so the corners sat flush against
the accent bar. With no bar to sit against, square left corners are just an unexplained asymmetry. */
.source-es-panel { margin-top: .7rem; padding: .6rem .7rem; background: var(--rp-bg-soft); border: 1px solid var(--rp-accent); border-radius: 6px; }
.chart-es-list { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .9rem; }
.source .para { line-height: 1.6; margin: 0 0 .5rem; }
.tline { margin: .2rem 0; line-height: 1.5; }
/* Poem source: each authored line is its own line. Block display rather than so a screen reader
gets a real boundary between lines, and generous line-height because verse is read slowly. */
/* Second-source step: its own gated screen between the passage and the questions. */
/* LEFT-JUSTIFIED, not centred. The reading phase runs the story flush to the container's left edge, so
a centred source column put the poem on a left margin the story never has — the two screens read as
different layouts. The 760px cap stays (verse and short prose are unreadable at full container
width); only the centring goes. */
.source-step { max-width: 760px; margin: 0; }
/* Same column as .source-step, so the back button starts exactly where the poem starts. Without this
the actions spanned the full container while the source sat in its own narrower box, leaving the
buttons visibly outdented from the text they belong to. */
.source-step-actions {
max-width: 760px; margin: 1.25rem 0 0;
display: flex; align-items: center; gap: .6rem;
}
/* Reading phase actions: a way out and a way on, matching the source step's shape. */
.story-actions { display: flex; align-items: center; gap: .6rem; }
.story-actions .btn-next { margin-top: 0; }
/* .btn-next carries its own top margin for stacked layouts; inside this flex row it would sit lower
than the secondary button beside it. */
.source-step-actions .btn-next { margin-top: 0; }
.source-step-head { font-size: 1.35rem; color: var(--rp-head); margin: 0 0 .2rem; }
.source-step-head:focus-visible { outline: 3px solid var(--rp-accent); outline-offset: 4px; }
.source-step-lede { color: #52606d; font-size: .95rem; margin: 0 0 1rem; }
/* Same source, kept on screen beside the questions so an R.7 item isn't a memory test. */
.source-aside { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rp-line); }
.poem { margin: .3rem 0; padding-left: .4rem; }
.poem-line { display: block; line-height: 1.9; }
.poem-line:empty { height: .9rem; } /* an empty authored line is a stanza break */
.email-meta { font-size: .9rem; color: #52606d; margin-bottom: .4rem; }
.email-body { margin: 0; line-height: 1.6; font-style: italic; }
.post { padding: .35rem 0; border-bottom: 1px dashed var(--rp-line); line-height: 1.5; }
.post:last-child { border-bottom: none; }
.post-handle { font-weight: 700; color: var(--rp-accent); }
.chart { display: flex; flex-direction: column; gap: .35rem; }
.chart-row { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.chart-label { width: 3.5rem; color: #52606d; }
.chart-track { flex: 1; background: #eef2f7; border-radius: 4px; height: 14px; overflow: hidden; }
.chart-bar { display: block; height: 100%; background: var(--rp-accent); }
.chart-val { width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.chart-caption { font-size: .82rem; color: var(--rp-muted); margin: .4rem 0 0; font-style: italic; }
.panel.reflect { background: #f3f0ff; border: 1px solid #d6ccf5; }
.panel.reflect ul { margin: .4rem 0 0 1.1rem; }
/* ---- buttons + report ---- */
.btn-secondary { padding: .5rem 1rem; border: 1.5px solid var(--rp-accent); border-radius: 10px; background: #fff; color: var(--rp-accent); font-size: .95rem; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { background: #f0f6ff; }
.summary-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.1rem; }
.summary-actions .btn-next { margin-top: 0; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.report h2 { color: var(--rp-head); }
.report h3 { color: var(--rp-head); font-size: 1.05rem; margin: 1.3rem 0 .5rem; }
.report-summary { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1rem 0; }
.stat { flex: 1; min-width: 130px; background: var(--rp-bg-soft); border: 1px solid var(--rp-line); border-radius: 12px; padding: .9rem 1rem; }
.stat-num { display: block; font-size: 1.8rem; font-weight: 800; color: var(--rp-head); }
.stat-of { font-size: 1rem; font-weight: 600; color: var(--rp-muted); }
.stat-label { font-size: .82rem; color: #52606d; }
.band-pill { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
/* Low-N safety net: an anchor band resting on fewer than the item floor (4) renders greyed + marked with
an amber asterisk, so a band built on 1-3 questions never looks as confident as one from a real sample. */
.band-provisional { background: var(--rp-line); color: #52606d; }
.prov-mark { color: #9a5c00; font-weight: 700; margin-left: 1px; }
/* Skill-Booster placeholder marker (†) — distinct from the amber provisional * and the ** weighting note. */
.booster-mark { color: var(--rp-head); font-weight: 700; margin-left: 1px; }
/* Single-story "Reading Skills Report" */
/* All report views share one centred width — a step up from the 680px dashboard so tables (esp. the
Progress matrix) don't wrap, but far narrower than the 1120px page the reports used to fill. */
.report { max-width: 800px; margin: 0 auto; }
.story-report { max-width: 800px; margin: 0 auto; }
/* "Your Journey" cross-level summary — a growth record on the Certification Report. */
/* 20px above (Ron, 2026-09-08, tried at 12px first and it still read tight): on screen Journey follows
the report header .dl directly, and with no top margin its heading sat hard against the identity
block. PRINT IS EXEMPTED below -- there Journey is a right-column grid item, not a sibling of the
header, and the sheet fits in 988px of 988px with no headroom to give away. */
.journey { margin: 20px 0 7px; }
/* Title lives in the header band (.sbs-head) like the skills table, so no standalone heading. */
.journey-table td, .journey-table th { text-align: left; }
.journey-table th:nth-child(n+3), .journey-table td:nth-child(n+3) { text-align: center; }
/* margin-TOP is the heading-to-table gap: it collapses against the h3's smaller bottom margin and wins,
so shrinking the heading's margin did nothing and this is the number that matters. */
.journey-table { margin-top: 14px; margin-bottom: .75rem; } /* pull the footnote up — ~40% less than the .score-table default */
/* Indented to the table's TEXT edge, not the table's box edge: .score-table cells carry .6rem of side
padding, so a note at 0 starts left of every value above it and reads as hanging off the section. */
.journey .report-note { padding-left: .6rem; }
.report-title { text-align: center; margin: .5rem 0 1.25rem; }
.report-title-1 { font-size: 1.5rem; font-weight: 700; color: var(--rp-head); }
.report-title-2 { font-size: 1.1rem; color: #52606d; margin-top: .15rem; }
/* TWO STACKS SIDE BY SIDE (2026-09-12), replacing a two-column grid that filled row by row. The columns are
now declared rather than implied by DOM order, so omitting a field -- a home school has no district --
costs its own line and nothing else. See the note on the block in ProgressReport. */
/* THE SUBSTITUTION NOTE. Bordered because it changes what the whole document means: a reader who misses it
reads a Silver report as a Gold one. The heavier left edge is the attention, and it is a BORDER rather than
a fill because browsers do not print background colours -- the thing that decided the band pills too.
It is quiet in colour and loud in position: directly under the header, full width, ahead of everything it
qualifies.
A UNIFORM BORDER, never a heavier edge on one side (Ron, 2026-09-12 -- a standing rule). This carried a 4px
accent down its left for one revision. The box is the attention; a thickened edge is decoration that reads
as a status colour the app does not otherwise use, and it makes one callout shout against every other
bordered block in the file. If this ever needs to be louder, the lever is the border COLOUR or the type,
not the width of one side. */
.report-promoted { margin: 0 0 .9rem; padding: .5rem .8rem; font-size: .95rem; color: var(--rp-ink);
border: 1px solid var(--rp-line); border-radius: 6px; line-height: 1.45; }
.report-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 0 1.5rem;
margin: 0 0 .45rem; padding: .7rem 1rem; background: var(--rp-bg-soft);
border: 1px solid var(--rp-line); border-radius: 10px; }
.report-meta-who, .report-meta-where { display: flex; flex-direction: column; margin: 0; min-width: 0; }
/* The right stack hangs off the right edge, the way .rr-sheet-where does. align-items as well as text-align:
the rows are flex boxes, so the BOX has to move right before the text inside it can. */
.report-meta-where { align-items: flex-end; text-align: right; }
.report-meta-where > div { justify-content: flex-end; }
/* AN UNSET VALUE DRAWS ITS DASH FROM CSS, not from a Dash() helper in three components. It is right where
the labels are visible -- "District —" reads as a fact about the district -- and wrong where they are
hidden, on the teacher's sheets, where it is a mark with nothing to attach to. Presentation, so it lives
with the presentation and .rp-print-doc can turn it off. Set in the content, not a pseudo-element border,
so it is copied and printed like any other text. */
.report-meta dd:empty::after { content: "—"; }
/* baseline, so the label and its value sit on ONE horizontal line — they are different sizes, and the
default `stretch` aligns their BOXES rather than their text, which reads as a half-line step between
them at this size gap. */
.report-meta > dl > div { display: flex; gap: .5rem; padding: .22rem 0; align-items: baseline; }
/* Fixed label column so every VALUE starts at the same x and they line up vertically, even though
the labels differ in length (Level is much shorter than District). Not right-justified. */
/* TWO CHANNELS, NOT THREE (Ron, 2026-09-06). Label and value were separated by size AND weight AND colour
at once, which reads fussy in a block of seven pairs. Size and colour carry it perfectly well; the bold
was the one doing least, because a dark value beside a smaller grey label is already unambiguous.
The size difference stays deliberately: it is what lets the eye land on the VALUE and treat the label as
scaffolding. If it is ever equalised, widen the label column with it.
THE COLUMN IS 6rem AND THE LABEL NEVER WRAPS (2026-09-06). It was 5.25rem = 84px, sized when the longest
label was "District". "Report date" is the first label carrying a SPACE, so it is the first that CAN
break, and at ~78px it sat close enough to the edge to wrap onto a second line — which dropped its value
away from it and is what "label and value are not on the same line" was. nowrap is the guarantee; the
extra width is what stops nowrap turning a wrap into an overflow. */
.report-meta dt { flex: 0 0 6rem; margin: 0; color: #52606d; font-size: .85rem; white-space: nowrap; }
/* min-width:0 lets a long value wrap inside its own cell instead of forcing the row wider. */
.report-meta dd { margin: 0; color: var(--rp-ink); min-width: 0; }
/* Where the student stands on the level, beside its name. Muted and a shade smaller: the LEVEL is the
identity fact this row carries, and the standing qualifies it -- at the same weight the two competed. */
.report-meta .meta-standing { color: #52606d; font-size: .92em; }
/* OPEN LETTERHEAD, NOT A CARD, ON THE TEACHER'S SURFACES (Ron, 2026-09-12). The two class sheets carry their
identity block as plain type with nothing drawn around it; this one carried a filled, bordered, rounded
box, and that -- not the information in it -- was the whole of the difference Ron saw. A teacher reads all
three together, so they should not use two visual systems.
SCOPED TO .rp-print-doc, which is exactly the teacher's two surfaces: the drill-down view of a student's
reports and the class-wide certification sheet. The STUDENT's own copy of the same report keeps the card --
nothing in the student app is being compared to Class Strands, which no student ever sees, and a soft
panel suits a screen a child reads. Context-sensitivity is not new here: this block already takes
different padding, margins and grid placement inside .rp-print-doc.
THE LABELS STAY, and that is the line between consistency and copying. The class sheets go unlabelled
because every name on them is a place the teacher already knows, and a missing value is simply omitted.
This block leads with the STUDENT and is read by a parent, where unlabelled names would leave them
guessing which one is their child -- and it dashes unset values precisely because labels make "District —"
still read as a fact. The two decisions are a matched pair.
THE TYPE IS DELIBERATELY UNTOUCHED. Matching the class sheets' 1.05rem bold values would add height to a
page fought for line by line, and bolding the values would reverse a considered decision above ("two
channels, not three"). Removing the box was the whole of what was needed.
It also GAINS height rather than costing it: .7rem of vertical padding and a border come off.
THE FIRST PASS ONLY TOOK THE BOX OFF and that was not enough -- Ron: "the header was not matched up very
well ... no labels like Student or Teacher and the right side is right justified". Measured against
.rr-sheet-id afterwards, the two blocks differed in FIVE ways, not one: the box, the labels, the
justification, and a type ladder in two parts (a bold dark first line, lighter grey lines beneath) that
this block did not have at all -- every value here was one size and one weight.
WHAT MADE IT CHEAP: this grid fills ROW BY ROW into two columns, so its odd children are column one and
its even children column two. That already yields Student/Teacher/Class/Level at the left and
District/School/Report date at the right -- which IS the class sheets' who-left, where-right split. The
block was never laid out differently, only dressed differently, so nothing is reordered below and the
markup is untouched. That matters: CSS can be scoped to .rp-print-doc and markup cannot, so the student's
own copy keeps the card it is meant to keep.
THE LABELS ARE HIDDEN, NOT DELETED -- .sr-only's own declarations, copied rather than classed because
adding a class would mean editing markup shared with the student app. A sighted reader sees the clean
two-column block the class sheets use; a screen reader still announces "Student: Amara Okafor", which is
the thing a parent-facing record cannot afford to lose. dt leaves the flow entirely, so each value starts
at its column edge with no 6rem gutter in front of it.
THE ONE DIFFERENCE CSS CANNOT CLOSE is the em dash. The class sheets OMIT an unset district or school;
this block renders "—" because a label made that read as a fact, and with the labels hidden a bare dash
would float in the right stack. Changing it means changing Dash() in three components and therefore the
student's copy too, so it is left alone and noted here. */
.rp-print-doc .report-meta { background: transparent; border: 0; border-radius: 0; padding: 0; }
.rp-print-doc .report-meta dt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Line-height carries the rhythm, the way it does in .rr-sheet-who -- so the row padding that spaced a
labelled block comes off, here and in the print override further down. */
.rp-print-doc .report-meta > dl > div { padding: 0; }
.rp-print-doc .report-meta dd { font-size: 1.05rem; line-height: 1.35; font-weight: 600; color: #52606d; }
/* THE FIRST LINE OF EACH STACK takes the weight and the dark ink, exactly as .rr-sheet-who's first span
does; everything beneath steps down. :first-child of a declared stack, not an nth-child count across a
grid -- which is the whole reason the structure changed: the old version would have promoted the wrong
line the moment a field was omitted. */
.rp-print-doc .report-meta > dl > div:first-child dd { font-weight: 700; color: var(--rp-head); }
/* No dash on these sheets: the labels are hidden here, so there is nothing for it to qualify. */
.rp-print-doc .report-meta dd:empty::after { content: none; }
/* Student Mission History — every mission x the four strands. A "Skill Strands" legend defines the
numbered strand codes so the data columns stay one character wide; cells are tinted by band using the
same colours as the band pills. Wide table — this is the report that paginates. */
/* Legend: a quiet one-line code->name key, left-justified, no fill — it recedes behind the report title
and the table's own "Skill Strands" group header. Wraps gracefully on narrow widths. */
.mhr-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; width: fit-content; max-width: 100%; margin: 0 0 1rem; border: 1px solid var(--rp-line); border-radius: 10px; padding: .5rem .9rem; }
.mhr-key { font-size: .82rem; color: var(--rp-ink); white-space: nowrap; }
.mhr-n { font-weight: 700; margin-right: .25rem; color: var(--rp-head); }
.mhr-t { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 1rem; }
.mhr-t th, .mhr-t td { border: 1px solid var(--rp-line); padding: .4rem .5rem; font-size: .85rem; text-align: center; }
.mhr-t th { color: #52606d; font-weight: 700; background: var(--rp-bg-soft); }
.mhr-t .nm { text-align: left; }
/* The "Skill Strands" group header + the vertical separators that frame the four strand columns. */
/* A RULE EVERY SECOND PASSAGE (Ron, 2026-09-12), the treatment the roster and Class Strands already take.
Twenty rows of a fully gridded table is a lot of line; the verticals stay, so the columns still read, and
the passages pair up.
BOTH SIDES OF THE SEAM HAVE TO GO. border-collapse merges the bottom border of one row with the top border
of the next, and with equal width, style and colour there is no defined winner -- clearing only one leaves
the line drawn by the other.
COUNTED FROM THE RIGHT PLACE: this tbody opens with .mhr-all and closes with .mhr-mastery, so the first
PASSAGE is nth-child(2). Pairing on even/odd from there puts the rule under the second passage of each pair
and leaves those two summary rows their own borders, which mark a change of kind. */
.mhr-t tbody tr.mhr-row:nth-child(even) td { border-bottom-color: transparent; }
.mhr-t tbody tr.mhr-row:nth-child(odd) td { border-top-color: transparent; }
.mhr-group { border-bottom: 1px solid var(--rp-line); }
.mhr-t .mhr-group, .mhr-t .mhr-gstart, .mhr-t .mhr-avg, .mhr-t .mhr-avg-h { border-left: 2px solid #b9c6d4; }
.mhr-t .mhr-avg { font-weight: 700; }
/* Average cell = a fixed-width, right-aligned number slot, so the % signs stack straight down the column.
The reserved ✓ slot that used to sit beside it went with the mark on 2026-09-04 (see .mhr-name below): the
average is how a passage was CHOSEN, not a number anything uses, so it holds a number and nothing else. */
.mhr-t .mhr-avg .mhr-avg-num { display: inline-block; width: 2.7em; text-align: right; }
/* THE CHAMPION MARK sits with the TYPE, because the surprising thing about this table is that a lower
Average can be checked while a higher one is not -- the quota is the best three of EACH type, never the
best twelve overall, and only the type cell can say so. A RESERVED SLOT on every row, occupied or not:
the cell is centred, so a mark that took width on champions alone would shift their labels off the
column's axis. inline-block for the width to apply; left-aligned inside so the tick sits against the
label rather than drifting to the far edge of its own box. */
.mhr-t .mhr-type .mhr-champ { display: inline-block; width: 1em; margin-left: .35em; text-align: left; }
/* THE TICKS LINE UP DOWN THE COLUMN, which takes two rules, and the first attempt shipped only one.
THE LABEL NEEDS THE SLOT, not just the mark. The cell is centred and the labels differ in width, so
"Nonfiction 1 ✓" and "Fiction 2 ✓" centre as blocks of different widths and put their ticks at two
different x positions. A reserved slot on the MARK cannot fix that: what varies is what comes before it.
Slotting the label makes every cell's content one width, so it centres identically on every row.
PADDING THE LABELS TO EQUAL LENGTH WITH HARD SPACES DOES NOT WORK, and was tried: the font is
proportional, so "Nonfiction 1" (12 chars) and "Fiction 1" (9) differ by the widths of N, o and n, which
are not an integer number of spaces. Equal character counts give unequal pixel widths -- the ticks land
near-aligned, which reads as carelessness where a plain misalignment reads as a bug.
nowrap IS THE OTHER HALF. The slot alone made the cell content wider than the column, so the mark wrapped
to a second line -- fixing the horizontal problem by creating a vertical one. nowrap forbids that.
IT DOES NOT WIDEN ANYTHING: this comment said nowrap would make the browser give the column the width it
needs "since a colgroup percentage is a hint, not a cap", which is true of an AUTO table and false here --
`table-layout: fixed` means the declared width is exactly what the column gets and the surplus overflows.
The column fits because it is sized to fit (.mhr-c-genre), not because nowrap asked for room.
min-width, not width: it equalises the four labels TypeName returns, and a longer one added later grows
its cell instead of overflowing under the tick. Left-aligned inside the slot so the labels stack too. */
.mhr-t .mhr-type { white-space: nowrap; }
.mhr-t .mhr-type .mhr-typename { display: inline-block; min-width: 6.2em; text-align: left; }
.mhr-t .mhr-all td { font-weight: 700; }
/* Clickable passage rows in the Progress Report → each opens its Passage Report. The "All passages"
aggregate row (.mhr-all) is NOT interactive. Hover uses an inset overlay so the band tints show through. */
.mhr-t tbody tr.mhr-row { cursor: pointer; }
.mhr-t tbody tr.mhr-row:hover td { box-shadow: inset 0 0 0 999px rgba(60, 90, 130, .06); }
.mhr-t tbody tr.mhr-row:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: -2px; }
.mhr-chev { color: var(--rp-accent); font-weight: 700; margin-right: 3px; }
/* Summary rows below the passages: the booster placeholder (per-cell clickable) and the mastery counts. */
.mhr-t tr.mhr-booster td, .mhr-t tr.mhr-mastery td { border-top-width: 1.5px; }
.mhr-t tr.mhr-booster .nm { font-weight: 600; }
.mhr-t tr.mhr-mastery td { color: var(--rp-muted); }
.mhr-t tr.mhr-mastery .nm { font-style: italic; }
.mhr-t td.mhr-dash { color: var(--rp-muted); }
.mhr-t td.mhr-bcell { cursor: pointer; }
.mhr-t td.mhr-bcell:hover { box-shadow: inset 0 0 0 999px rgba(60, 90, 130, .06); }
.mhr-t td.mhr-bcell:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: -2px; }
.mhr-champ { color: var(--rp-good); font-weight: 700; } /* ✓ marking a beat champion the skill scores use */
.mhr-foot-note { font-size: .8rem; color: #52606d; margin: .7rem 0 0; line-height: 1.4; }
/* The footnotes as one block, so they cannot split across a page: see the note at the markup for why
break-inside is the only avoid-rule Chrome's print engine can be relied on for.
NOT called .mhr-foot, which was the name it wanted: that class survived in this file with a margin on it
after the markup that used it was removed, so a wrapper taking the obvious name would have silently
inherited a 1rem bottom margin from a rule for a block that no longer exists. */
.mhr-notes { break-inside: avoid; }
/* Skill boosters — their own keyed-by-skill list below the matrix (a booster tests one weak skill, so it
doesn't belong in the four-column grid). Each row opens that booster's capped report. */
.mhr-boosters { margin-top: 1.25rem; }
.mhr-boosters-h { font-size: .95rem; font-weight: 700; color: var(--rp-head); margin: 0 0 2px; }
.mhr-boosters-sub { font-size: .8rem; color: var(--rp-muted); margin: 0 0 10px; }
.mhr-brow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--rp-line); border-radius: 8px; cursor: pointer; margin-bottom: 8px; }
.mhr-brow:hover { background: var(--rp-bg-soft); }
.mhr-brow:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: -2px; }
.mhr-bskill { flex: 0 0 120px; font-size: .8rem; color: var(--rp-muted); }
.mhr-btitle { flex: 1; min-width: 0; font-size: .85rem; font-weight: 600; color: var(--rp-head); }
/* COLUMN WIDTHS IN REM, NOT PERCENT (Ron, 2026-09-04), and the reason is WCAG 1.4.4 rather than taste.
This table is `table-layout: fixed`, so a column gets exactly the width declared and over-long content
OVERFLOWS the cell instead of widening it -- and every value in the five score columns is a single
unbreakable token ("100%", the header word "Average"), so it cannot wrap out of trouble either.
Under percentages that made text-only enlargement a cliff. The columns were percentages of an 800px
measure, so they did not move when a reader raised their default font: the arithmetic put the score
columns over the edge at about 170% and the Type column, once the ✓ moved into it, at about 108% -- short
of the 200% the guideline requires. (Browser ZOOM was never affected: it scales the measure and the type
together, which is also why 1.4.10 Reflow was fine.)
In rem the columns grow with the reader's font, so the overflow point goes away entirely; past roughly
150% the TABLE outgrows its container instead, and .mhr-scroll turns that into sideways scrolling, which
is what 1.4.10 permits for a data table.
The sizes are content + the 1rem of horizontal cell padding, plus BREATHING ROOM: "100%" is ~1.96rem and
the "Average" header ~3.5rem (it is wider than any value beneath it, so the HEADER sizes that column), and
each score column then carries **2 spaces of air on each side** on top -- .875rem, ~14px (Ron, 2026-09-04).
Sized to the content alone they cleared "100%" by 4px, which is technically enough and looks starved. The
air is bought with WIDTH rather than padding because the cells are centred: extra width lands evenly on
both sides by itself, and under fixed layout width is the only thing that actually moves.
WHAT IT COSTS, stated because it is a real trade and not free: those 14px are spent five times over (four
strands and the Average), so 71px comes out of the passage column, which is unsized and takes whatever is
left. That drops it from ~397px to ~326px against a longest title needing ~329px -- so exactly one title
in the corpus, Gold's 42-character "The Number That Cannot Tell You Everything", wraps to two lines. Three
spaces a side would have cost four titles, and four spaces sixteen.
The passage column is deliberately unsized -- in fixed layout it takes the remainder, ~41% of an 800px
report, up from 28%. That was the request that started this: the score columns were carrying 30-50px of
slack each while a THIRD of all titles wrapped. */
/* WIDER TITLES, PAID FOR BY THE COLUMNS THAT WERE IDLE (Ron, 2026-09-12). Two passage titles wrapped to a
second line, and on a report that spilled its footnotes onto page two every line counts. .mhr-c-name takes
the remainder under table-layout: fixed, so narrowing anything else widens it without a number of its own.
WHERE THE ROOM ACTUALLY WAS, measured rather than eyeballed:
- each skill column held "100%" at most under a heading that is a single DIGIT -- about 2.6rem of content
in 4.1rem. Four columns, and much the largest source.
- Average was 5.7rem for a 4.0rem heading; the word "Average" is what binds it, not the number.
- TYPE had almost nothing, which is the surprise: its white space is the tick slot plus the min-width that
equalises the four labels so the ticks line up (see .mhr-typename). It gives 0.25rem and no more, and
taking more would overflow "Nonfiction 2" under the tick.
Together ~5.5rem, about 89px, so the title column goes from roughly 273px to 362px on a Letter sheet. Each
figure keeps air above its floor -- these are content minimums, not targets. */
.mhr-c-name { /* no width: takes the remainder, so every reduction below lands here */ }
.mhr-c-genre { width: 7.35rem; }
.mhr-c-s { width: 3.1rem; }
.mhr-c-avg { width: 4.4rem; }
/* The table may exceed its container once text is enlarged; the wrapper scrolls rather than the page. */
.mhr-scroll { overflow-x: auto; }
.mhr-ach { background: var(--rp-good-bg); color: #14532d; }
.mhr-app { background: #e8f0fe; color: #1a56b8; }
.mhr-eme { background: var(--rp-hint-bg); color: #92600b; }
.mhr-beg { background: var(--rp-bad-bg); color: #8a2b2b; }
/* .mhr-foot / .mhr-foot-h / .mhr-foot-k / .mhr-blist / .mhr-blist li / .mhr-dot were REMOVED here on
2026-09-04: six rules for a booster footer block whose markup is long gone -- nothing in the app carries
any of those classes. Found because a new footnote wrapper wanted the name .mhr-foot and would have
inherited a margin from a rule for an element that does not exist. */
/* Report sub-section (e.g. "Support used") inside the single-mission Skill Report. */
.report-section { font-size: 1.05rem; color: var(--rp-head); margin: 0 0 .25rem; }
/* Passage Report "Support used" heading — matches the "Reading strand" column header (small, uppercase,
grey, letter-spaced), with extra space above to separate it from the table above. */
.support-h { margin: 1.6rem 0 .4rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #52606d; }
.report-note { font-size: .85rem; color: var(--rp-muted); margin: 0 0 .6rem; }
/* THE FOOTNOTE BLOCK SETS ITSELF APART, THEN CLOSES UP (Ron, 2026-09-06). 12px above the first note so the
small print is visibly a different register from the record it annotates — it was butting straight onto
whatever ended above it. Between the notes, half the usual .6rem: they are a list of short asides read
together, and the default spacing made four one-line notes look like four separate paragraphs.
Scoped to .report-notes, NOT to .report-note globally — the same class carries the "Not offered" line
under the support table, which has its own spacing and is not part of this list.
:last-child kills the trailing margin, which is pure dead space at the very bottom of the page. */
/* A rule divides the record from its small print. Symmetric 12px either side, so the line sits IN the gap
rather than pushed against one edge of it — the 12px asked for above the first note now reads as the
space below the separator. */
/* 19px above, up from 5px (Ron, 2026-09-08). Pulling the support note up to its table on screen took 16px
out of everything below it, the footnote block included -- the note moved where it was wanted and the
footnotes came with it, which was not. This puts the block back where it sat relative to the support
section. ONLY ProgressReport renders .report-notes, and print sets its own margin-top under
.rp-print-doc, so neither another report nor the printed sheet is touched by this number. */
.report-notes { margin-top: 19px; padding-top: 5px; border-top: 1px solid var(--rp-line); }
.report-notes .report-note { margin-bottom: .3rem; }
.report-notes .report-note:last-child { margin-bottom: 0; }
.score-table tfoot .overall-row td { border-top: 2px solid var(--rp-line); border-bottom: none; font-weight: 700; color: var(--rp-head); padding-top: .55rem; }
/* Student dashboard (progress panel atop the missions) */
.dashboard { background: var(--rp-bg-soft); border: 1px solid var(--rp-line); border-radius: 12px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.dash-level-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rp-muted); }
.dash-level { font-size: 1.4rem; font-weight: 700; color: var(--rp-head); }
.dash-recent { font-size: .9rem; color: #52606d; }
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.dash-card { background: #fff; border: 1px solid var(--rp-line); border-radius: 10px; padding: .7rem .8rem; }
.dash-num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--rp-head); }
.dash-of { font-size: 1rem; font-weight: 600; color: var(--rp-muted); }
.dash-label { display: block; font-size: .85rem; color: var(--rp-ink); margin-top: .1rem; }
.dash-sub { display: block; font-size: .72rem; color: var(--rp-muted); }
.dash-next { margin: .9rem 0 0; color: var(--rp-ink); }
.dash-next-label { font-weight: 700; color: var(--rp-accent); }
@media (max-width: 640px) { .dash-cards { grid-template-columns: repeat(2, 1fr); } }
.dash-card-btn { cursor: pointer; text-align: left; font: inherit; }
.dash-card-btn:hover { border-color: var(--rp-accent); background: #f5f9ff; }
/* ===== Student dashboard (the live home base — StudentDashboard.razor) ===== */
.nav-dash { max-width: 800px; }
.nd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 28px; flex-wrap: wrap; }
.nd-name { font-weight: 700; color: var(--rp-head); font-size: 1.3rem; line-height: 1.2; }
/* Support status under the student name — STATUS, not controls (a teacher sets these). Both are
listed even when Off so a student discovers the option and can ask for it. */
/* Two left-aligned rows opposite the name: a mini status table, so On/Off compare at a glance. */
/* Header class block: teacher name over class name (right), sharing the .nd-name type with the student name.
No labels — the student's own name, teacher, and class are self-evident. A small gap separates the two
right-side names so they don't read as one wrapped line. */
.nd-classinfo { text-align: right; }
.nd-name-gap { margin-top: .2rem; }
.nd-support-hint { font-size: .82rem; color: var(--rp-muted); margin: .4rem 0 1rem; }
/* Living level strip (docs/LevelReview_Spec.md): LEFT-justified so a 3–5 pill row keeps a stable left
anchor (no re-centering as levels are added on promotion) and lines up with the cards below. Pills size
to content, not flex:1. Completed + current-in-review pills are