` had it, so
this is written against the headings rather than against the Slack panel. */
/* ๐ด `.bdlgsub` JOINS THIS LIST [her report 2026-08-29: *"The question mark tooltip text for the
slack webhook is broken, it just shows on the popup permanently rather than being in popup text on
hover."*] and it is the SAME bug her 2026-08-23 note above describes, in a place it was moved to.
Moving the Slack panel into a dialog put its `?` inside a ``. A `
` is not
positioned and `dialog .qtip` is forced static, so the containing block fell through to the
`` and `top:calc(100% + 6px)` meant "below the whole popup". Measured: on hover the bubble
rendered at y=71 while the dialog sat at y=400, entirely outside it -- which from the front looks
like a block of text stuck near the popup rather than a tooltip that answers to the pointer.
โ THE RULE IS WRITTEN AGAINST THE CLASS, not against the Slack popup, for the same reason the
heading rule was: any `.qtip` in a subtitle line of any of these dialogs had it. */
dialog h2, dialog h3, .bdlg .bdlgsub { position:relative; }
/* ๐ด THE LOOK IS NOT SCOPED TO A CONTAINER ANY MORE [2026-08-27]. It was `dialog .dlg-close`, widened
once before from a whitelist of dialog size-classes after two buttons fell through it -- and it
still missed the board's FILTER popover, which is not a at all, so that โ rendered as the
browser's raw button: her *"the board filters box has an unstyled x to close."*
Every earlier fix widened the selector by one more container instead of asking what the class means.
A `.dlg-close` is a close button wherever it lives, so its appearance belongs on the bare class and
anything given that class from here on looks right by default. */
.dlg-close {
cursor:pointer; background:var(--panel);
border:1px solid var(--line-hi); color:var(--dim); border-radius:50%;
width:30px; height:30px; font-size:15px; padding:0; line-height:1;
}
.dlg-close:hover, .dlg-close:focus-visible { color:var(--text); border-color:var(--dim); }
/* Only the POSITIONING is about being inside a dialog: sticky+float is what keeps it in the corner of
a panel that scrolls. A popover sets position:static (see .fpopx) and keeps the circle. */
dialog .dlg-close { position:sticky; top:0; float:right; z-index:10; }
/* Pacing rows */
.pacerow {
display:flex; justify-content:space-between; align-items:center; gap:12px;
padding:9px 4px; border-top:1px solid var(--line); text-decoration:none; color:var(--text);
}
.pacerow:first-of-type { border-top:0; }
a.pacerow:hover .l1 { color:var(--brand); }
.pacerow .l1 { font-weight:700; font-size:14.5px; }
/* Student dashboard task rows */
.taskrow {
display:flex; justify-content:space-between; align-items:center; gap:10px;
padding:9px 4px; border-top:1px solid var(--line); font-size:14px;
}
.taskrow:first-of-type { border-top:0; }
.taskrow .t { font-weight:700; }
.taskrow .w { color:var(--dimmer); font-size:12px; font-family:var(--mono); }
/* Clickable prow */
a.prow { text-decoration:none; color:var(--text); }
a.prow:hover .l1 { color:var(--brand); }
/* ============ Step 7 additions ============ */
.stat.railalarm b { color:var(--red); font-size:15px; letter-spacing:1.5px; font-family:var(--mono); }
.stat.railalarm span { color:var(--dim); }
/* Estimate badges on cards. border-COLOR only โ the 1px transparent border now lives on `.age`/`.tag`
themselves so a bordered variant is the same box height as an unbordered one in the same row.
--dimmer -> --dim on .age-est for the same reason .tag-sub moved: 10px mono text gets no large-text
allowance, and this badge shares a row with `.assg`, which is already --dim. */
.age.age-est { background:transparent; border-color:var(--line-hi); color:var(--dim); }
.tag.tag-attempt { background:color-mix(in srgb, var(--amber) 12%, var(--bg-deep)); color:var(--amber);
border-color:color-mix(in srgb, var(--amber) 35%, transparent); }
/* Deliverable status pills */
.dpill { display:inline-block; font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:1px;
border-radius:4px; padding:3px 8px; border:1px solid transparent; }
.d-not { color:var(--dimmer); border-color:var(--line-hi); }
.d-started { color:#60a5fa; background:color-mix(in srgb, #60a5fa 12%, transparent); }
.d-prog { color:#a78bfa; background:color-mix(in srgb, #a78bfa 12%, transparent); }
.d-ready { color:#f472b6; background:color-mix(in srgb, #f472b6 14%, transparent); }
.d-done { color:var(--green); background:var(--green-soft); }
/* Mini status strip on pacing rows */
.dstrip { display:inline-flex; gap:3px; }
.dstrip i { width:10px; height:10px; border-radius:2px; display:inline-block; background:var(--line-hi); }
.dstrip i.d-started { background:#60a5fa; }
.dstrip i.d-prog { background:#a78bfa; }
.dstrip i.d-ready { background:#f472b6; }
.dstrip i.d-done { background:var(--green); }
/* Deliverable rows (student dashboard + teacher pages) */
.delrow { display:flex; justify-content:space-between; align-items:center; gap:10px;
padding:9px 4px; border-top:1px solid var(--line); font-size:14px; flex-wrap:wrap; }
.delrow:first-of-type { border-top:0; }
.delrow .t { font-weight:700; }
.delrow form { display:flex; gap:8px; align-items:center; margin:0; }
.delrow select { width:auto; padding:5px 24px 5px 10px; font-size:12.5px; }
.sendback { background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);
border-radius:var(--r-sm); padding:6px 10px; font-size:12.5px; margin-top:6px; width:100%; }
/* ============ Step 8 ============ */
/* ๐ด NOTE 7 ยท PANEL HEADINGS WERE TOO SMALL AGAINST BODY TEXT, AND TOO CLOSE TO WHAT THEY LABEL
[her ruling 2026-08-22]: *"I'm not sure that any of the headers are meeting the ui/ux standards for
header sizes in relation to page text. They all seem really small. There's also not good spacing
after any of the headers, especially in the teams section where the boxes are way too close to that
header text."*
MEASURED: `body` is 15.5px and this was 18.5px โ a ratio of 1.19, where a section heading is
normally 1.3-1.5x its body copy. 21px puts it at 1.35. The gap under it was `margin:0 0 4px` from
`.panel h2, h3.ph` above, which is what puts the Teams tiles hard against the word "Teams";
14px is the same rhythm `.panel .hint` already uses beneath a heading (12px). */
.panel h2 { font-size:21px; margin-bottom:14px; }
.sprintrail h2 { font-size:22px; }
.rail-compact h2 { font-size:17px; }
.appdialog .dlgmsg { font-size:16px; margin:4px 0 2px; line-height:1.55; padding:14px 16px;
background:var(--bg-deep); border:1px solid var(--line-hi); border-radius:var(--r-md);
/* โ ITS OWN COLOUR, not `dialog`'s by inheritance [2026-08-27]. This is refusal text: if anything
re-colours the dialog around it -- a reading extension, a user stylesheet, an OS forced mode --
inherited text goes with it and the student is left with two buttons and no sentence, which is
exactly the report this came from. An explicit rule on the element itself survives most of that.
Ruled out first, by measurement: all 15 themes and all three tiers are legible (worst 6.75:1,
tests/ui/t_alert_themes.py), and an unknown theme falls back readable. */
color:var(--text); }
/* Windows High Contrast and friends: the OS repaints backgrounds and borders but honours `forced-
color-adjust`, so a plate built from color-mix() can end up a system colour while the text keeps
one the theme chose. Pinning both to the system pair keeps the sentence readable there, and this
mode is invisible to the in-app theme picker -- which fits "he switched themes and nothing
changed". */
@media (forced-colors: active) {
.appdialog .dlgmsg { background:Canvas; color:CanvasText; border-color:CanvasText; }
}
.appdialog .dlgtier-warn { background:color-mix(in srgb, var(--amber) 9%, var(--bg-deep));
border-color:color-mix(in srgb, var(--amber) 45%, transparent); }
.appdialog .dlgtier-warn { background:var(--amber-soft); border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);
border-radius:var(--r-sm); padding:10px 12px; }
/* ๐ด THE GREEN TIER [added 2026-08-22 for "Ready to complete this task?"]. Her ruling was that the
completion prompt is a CELEBRATION that happens to prevent an accidental drag, explicitly not a
warning: *"not even like a 'this can't be undone'"*. Amber would have contradicted that in colour
while the words said otherwise. Built the same way `.dlgtier-warn` is โ the hue mixed into --bg-deep
rather than a soft token โ for the contrast reason the note directly below spells out: these plates
sit on --panel-hi inside a dialog, and a soft alpha token composited over that fails AA. */
.appdialog .dlgtier-good { background:color-mix(in srgb, var(--green) 9%, var(--bg-deep));
border-color:color-mix(in srgb, var(--green) 45%, transparent); }
/* The confirm button turns green with it, so the safe/positive answer is the one that reads as the
action. Scoped to the dialog so it cannot leak into the board's other .btn instances. */
/* ๐ด UNSCOPED FROM `.appdialog` [2026-08-29]. The completion question left the shared confirm dialog
and became #donedlg, and her ruling is that the green belongs on its YES and nowhere else in that
popup: *"The green 'yes' button carries the green there, we don't need it elsewhere."* Scoped to
`.appdialog` the class was inert there, so the button came out in the brand colour like any other
primary. Nothing else in the app uses `btn-green`, so widening it changes only the two places that
ask for it. */
.btn.btn-green { background:var(--green); color:var(--bg-deep); border-color:var(--green); }
.btn.btn-green:hover { filter:brightness(1.08); }
/* The plate is amber mixed into --bg-deep rather than --amber-soft. These notices live inside a
, whose surface is --panel-hi, and a .14-alpha soft token composited over that lifted the
plate far enough to fail AA: 4.28:1 in bubblegum. Mixed into --bg-deep it is 6.43:1-8.98:1 in all 16
themes and reads identically on the pages where the surface is already dark. */
.estlock { background:color-mix(in srgb, var(--amber) 14%, var(--bg-deep));
border:1px solid color-mix(in srgb, var(--amber) 35%, transparent);
border-radius:var(--r-sm); padding:8px 10px; font-size:13px; font-weight:600; color:var(--amber); margin-top:6px; }
/* ๐ด `.esterr` HAD NO RULE ANYWHERE IN THIS FILE [added 2026-08-08, Board audit]. `git log -S` aside,
the class appears exactly twice in the app โ board.php's #esterr (estimate dialog) and #asgerr
(assign-and-move dialog) โ and public/assets/style.css is the only stylesheet the app loads, so
both of those validation messages were rendering as plain --text body copy inside the dialog: no
red, no plate, nothing to distinguish "that estimate is longer than the sprint has left" from the
instructions directly above it. Built as .estlock's red sibling on purpose โ same box, same plate
construction, warning hue instead of caution. 5.29:1-7.26:1 across the 16 themes. */
.esterr { background:color-mix(in srgb, var(--red) 12%, var(--bg-deep));
border:1px solid color-mix(in srgb, var(--red) 40%, transparent);
border-radius:var(--r-sm); padding:8px 10px; font-size:13px; font-weight:600; color:var(--red); margin-top:6px; }
/* bigger, hover-friendly status strips */
.dstrip { gap:5px; }
.dstrip i { width:17px; height:17px; border-radius:4px; cursor:help; }
/* permanent accomplished green (theme-proof) */
.dpill.d-done { color:var(--green) !important; background:color-mix(in srgb, var(--green) 14%, transparent) !important; border-color:color-mix(in srgb, var(--green) 35%, transparent) !important; }
.dstrip i.d-done { background:var(--green) !important; }
/* pace tags */
.pacetag { font-family:var(--mono); font-size:10.5px; font-weight:800; letter-spacing:1px;
border-radius:4px; padding:4px 9px; }
.pace-ok { color:var(--green); background:color-mix(in srgb, var(--green) 13%, transparent); }
.pace-warn { color:var(--amber); background:var(--amber-soft); }
.pace-red { color:var(--red); background:var(--red-soft); }
.needstag { background:var(--red); color:#fff; font-family:var(--mono); font-size:9.5px; font-weight:800;
letter-spacing:1px; border-radius:4px; padding:3px 7px; margin-left:6px; }
/* pace gauge (student dashboard) */
.pacegauge { text-align:center; min-width:190px; padding:14px; border-left:1px solid var(--line); }
.pacegauge .big { font-family:var(--mono); font-weight:800; font-size:17px; letter-spacing:1px; }
.pacegauge .sub { color:var(--dim); font-size:12.5px; margin-top:6px; }
/* Right now slim tiles */
.tiles-slim { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tiles-slim .tile { padding:10px 8px; }
.tiles-slim .tile b { font-size:22px; }
/* color swatch pickers */
.swatches { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.swatch { width:30px; height:30px; border-radius:8px; cursor:pointer; border:2px solid transparent; position:relative; }
.swatch.on { border-color:#fff; box-shadow:0 0 0 2px var(--bg-deep); }
.swatch.taken { opacity:.28; cursor:not-allowed; }
.swatch.taken::after { content:'โ'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:13px; }
/* avatar more tile + pending */
/* `background:transparent` and the two inherits are LOAD-BEARING, not tidiness [2026-08-16]: this
became a real in the magnifier sweep, and a button inherits neither font-family nor
line-height from the UA stylesheet and arrives with a grey UA background. Same reset, and the same
reason, as `.fchip, .teamchip` above โ see that rule's note, where dropping line-height was
measured to shrink every chip by 4.6px. */
.avmore { display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--dim);
border:1px dashed var(--line-hi); border-radius:10px; cursor:pointer;
background:transparent; font-family:inherit; line-height:inherit; padding:0; }
.avpend { position:relative; }
.avpend::after { content:'PENDING'; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
background:var(--amber); color:#000; font-size:8px; font-weight:800; padding:1px 5px; border-radius:3px; }
.avx { position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--red);
color:#fff; border:0; font-size:11px; cursor:pointer; display:none; line-height:1; }
.avwrap { position:relative; display:inline-block; }
.avwrap:hover .avx { display:block; }
/* team logo spots */
.teamlogo { width:44px; height:44px; border-radius:10px; object-fit:cover; vertical-align:middle; margin-right:10px; }
/* deliverables page fills width */
.delrow .t { font-size:15px; }
.trashbtn { font-size:18px; padding:6px 10px; }
/* ============ Step 9 ============ */
/* dialogs: reading width, wrapped, buttons pinned */
dialog { max-width:440px; }
dialog.dlg-lg { max-width:560px; }
dialog.dlg-xl { max-width:min(980px, 94vw); width:min(980px, 94vw); max-height:88vh; overflow-y:auto; padding:26px 30px; }
/* Edit Forms: pin the header, form picker and Copy-from; scroll ONLY the question list.
Whole-dialog scrolling took the form selector off-screen at 20 questions, which is exactly the
control you need while working through a long list. Same pinned-top / scroll-middle pattern the
Course Plan quarter boxes use. */
/* ---- Themed scrollbars, global. There was NO scrollbar styling in the app before this, which
is why dark themes showed stark white rectangles. Blessed in the settings design pass: 8px,
transparent track, rounded thumb tinted from --brand and brightening on hover, with a 2px
transparent border + background-clip so it reads as a floating pill. Both engines. ---- */
* { scrollbar-width:thin;
scrollbar-color:color-mix(in srgb, var(--brand) 30%, var(--line-hi)) transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--brand) 30%, var(--line-hi));
border-radius:8px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:color-mix(in srgb, var(--brand) 55%, var(--line-hi));
background-clip:content-box; }
::-webkit-scrollbar-corner { background:transparent; }
dialog.dlg-xl.formsdlg[open] { display:flex; flex-direction:column; overflow:hidden; }
/* ๐ด THE HEADER STRIP IS BORROWED FROM `.ci-top`, NOT JOINED TO `.bdlg` [2026-09-06, chat 11],
and the reason is MEASURED here rather than reasoned from the file.
WHY NOT `class="dlg-xl formsdlg bdlg"`: chat 10 hit this on the 600px Generate Reports dialog and
wrote the arithmetic down, but THE ARITHMETIC DOES NOT TRANSFER, and copying its conclusion would
have put a confidently wrong comment on a working dialog. `dialog.bdlg` (style.css:2385) and
`dialog.dlg-xl` (:3234) are BOTH (0,1,1) -- neither outranks anything, so SOURCE ORDER decides,
and `.dlg-xl` is the later of the two. Measured in Chromium on three throwaway dialogs carrying
only these classes (so that this file's own `.formsdlg` rules at (0,2,1) could not mask the
contest being measured), the damage is the OPPOSITE of `.repdlg`'s: width survives, padding dies.
class="dlg-xl" width 980px padding 26px 30px strip inset from the dialog edge: 31px
class="bdlg" width 440px padding 0 strip inset: 1px <- correct
class="dlg-xl bdlg" width 980px padding 26px 30px strip inset: 31px <- the swap
So the 980 would have SURVIVED and the `padding:0` the strip needs would not: a header strip
floating 30px inside a dialog it is supposed to span edge to edge. That is a subtler failure than
chat 10's crushed 520 -- it still looks like a header, just a wrong one -- and `.bdlg > h3`
(padding-left:22px) and `.bdlg form > label` (display:block, 10.5px, uppercase) come with it.
โ AND ONE THING TO HAND ON RATHER THAN FIX HERE: `dialog.bdlg` DECLARES `width:min(520px,94vw)`
and computes 440px. `.bdlg` never overrides the base `dialog { max-width:440px }` (:3232), and a
width loses to a smaller max-width -- which is the trap the note at the bottom of this file
already records for `.dlg-xl`, where BOTH are set together for exactly this reason. Measured on
the real `#addsprintdlg`, not only on the synthetic one: `width 440px, maxWidth 440px, rect 440`.
Every `.bdlg` dialog in the app is 440 wide, not 520. Out of scope for chat 11 (this dialog is
not joining the family) but it is chat 12's whole subject, so it is written down here rather
than re-derived there.
SO THE RULES ARE COPIED AND SCOPED. `dialog.dlg-xl.formsdlg` is (0,2,1) and beats `dialog.dlg-xl`
(0,1,1) outright in either source order, which is what a `padding:0` on a family whose own rule
says `padding:26px 30px` actually needs.
WHAT IS NOT COPIED: `.ci-top .dlg-close`, `.ci-icon` and `.colchip.addwhere` are already unscoped
in this file, so the strip's โ and its caption need nothing added here.
โ 22px, NOT `.ci-top`'s OWN 14, AND THAT IS THE ONE NUMBER NOT TO TIDY. The caption is
`.colchip.addwhere`, which carries its own 8px of left padding, so 22 + 8 lands the class name
on 30 -- `.dlg-xl`'s body inset, and the left edge `.fscroll` keeps below it. The `.bdlg` family
uses 14 + 8 = 22 because 22 is ITS body inset; copying the 14 would have hung the caption 8px
left of everything under it, which is the misalignment tests/ui/t_dialog_chrome.py exists to
catch. */
dialog.dlg-xl.formsdlg { padding:0; }
dialog.dlg-xl.formsdlg > .ci-top { background:var(--bg-deep); border-bottom:1px solid var(--line);
padding:11px 60px 11px 22px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
flex:none; position:relative; border-radius:var(--r-lg) var(--r-lg) 0 0; }
/* โ THE โ IS PINNED TO THE STRIP, NOT CARRIED BY THE ROW, and that is the narrow-width half of the
`flex-wrap` rule below. Left in the flow it is the LAST item in a wrapping row, so the moment the
row takes a second line the close button drops to the bottom LEFT of the header -- measured at
400px CSS: a 254px-tall strip with the โ on its own final line. Her B2 complaint was exactly this
shape of thing (*"the 'x' for manage add-ons popup is not in the upper right corner"*), so it is
taken out of flow and pinned instead of being left to wrap.
โ THE MARKUP IS UNCHANGED BY THIS. The button stays inside `.ci-topright` where the house format
puts it (and where t_dialog_chrome.py's HOUSE check looks for it); an absolutely positioned
element resolves against its nearest POSITIONED ancestor, and `.ci-topright` is static, so
`position:relative` on the strip is what catches it. `padding-right:60px` reserves its lane so
the Copy-from group never runs underneath it -- 22 + 30 (the button) + 8 lands the group's right
edge on 60, which is within a pixel of where it sat when the button was still in the row.
โ SPECIFICITY, because there is an existing rule pulling the other way: `.ci-top .dlg-close`
(:2219) is (0,2,0) and sets `position:static` for the whole house. The selector below is
(0,4,1), so it wins on specificity rather than on source order. */
dialog.dlg-xl.formsdlg .ci-top .dlg-close { position:absolute; top:11px; right:22px; }
dialog.dlg-xl.formsdlg > .ci-top > .ci-topright { margin-left:auto; display:flex;
align-items:center; gap:8px; }
.formsdlg .fpicklab { font-size:12.5px; color:var(--dim); }
.formsdlg .fcopyrow { display:flex; align-items:center; gap:8px; margin:0; flex:0 1 auto;
min-width:0; white-space:nowrap; }
/* The dialog's own 26px/30px padding is gone -- the strip has to reach both edges -- so `.fscroll`
carries the body inset instead. The right side is `margin 26 + padding 8` rather than a flat 34 so
the SCROLLBAR sits 26px in and the text clears it by 8: the same sum the old
`padding-right:8px; margin-right:-4px` made against a 30px dialog padding. It is a MARGIN now
rather than that negative one, because -4px against `padding:0` would hang the bar 4px off the
dialog's own edge. 18px on top is the margin the control row used to carry below itself; 26px at
the bottom is the dialog padding that used to close the box. */
dialog.dlg-xl.formsdlg > .fscroll { flex:1 1 auto; min-height:0; overflow-y:auto;
margin:0 26px 0 30px; padding:18px 8px 26px 0; }
/* โ NOTHING IN THE STRIP MAY CLIP, and this rule is here because the โ MOVED INTO THE ROW. The
old body row did not carry it -- it floated in a zero-height sticky div above -- so the row is
~38px longer than the one it replaces, inside a box only 16px wider (11px/22px here against the
dialog's own 26px/30px before). At 980px that is slack either way. At phone width neither version
fits, and `dialog.dlg-xl.formsdlg[open]` is `overflow:hidden`, so anything past the edge is not
scrollable-to, it is GONE -- COPY first. Measured at 320 CSS px, which is WCAG 1.4.10's own test
width and the one that caught chat 8a's Class Days column.
`min-width:0` is the half that is easy to miss: a flex item defaults to `min-width:auto` = its
intrinsic width, so `max-width` alone cannot shrink a whose widest option is
"Self-Evaluation (Performance Review Survey)". Same mechanism tests/ui/t_dialogs_narrow.py's
docstring records for the Additional Avatars file input.
โ D9's CAP IS KEPT, NOT REPLACED: `min(220px, 100%)`, so the Copy-from select is still the 220px
her ruling widened it to wherever there is room for 220. `.formsdlg .fcopysrc` is (0,2,0) and
`.fcopysrc` is (0,1,0), so this wins on specificity rather than on source order. */
/* โ WRAP, NOT SHRINK, and these four rules are that one sentence. Four controls share this strip
and the widest option in the Form picker is "Self-Evaluation (Performance Review Survey)", which
is what sizes it. At 980px they fit on one line with room to spare; narrower than that the strip
takes a second row rather than squeezing the Copy-from select back under the 150px D9 widened it
OFF. `.ci-topright`'s own `margin-left:auto` still holds its half to the right on the second row,
and the โ is not in this flow at all -- see the pin above. */
dialog.dlg-xl.formsdlg > .ci-top > .styledsel { max-width:100%; min-width:0; }
dialog.dlg-xl.formsdlg > .ci-top > .ci-topright { flex-wrap:wrap; min-width:0; }
dialog.dlg-xl.formsdlg .fcopyrow { flex-wrap:wrap; }
dialog.dlg-xl.formsdlg .fcopysrc { max-width:min(220px, 100%); min-width:0; }
/* D9 [Snapshot Review Group D, her note]: the Copy-from select next to it, matched to .btn-sm's own
29px height (padding 4px 12px there; a select needs its chevron gutter kept, so 4px/28px/4px/10px)
and widened so a full class title fits instead of eliding into the sitewide select's 150px max. */
.fcopysrc { width:auto; max-width:220px; height:29px; padding:4px 28px 4px 10px; font-size:12.5px; }
.addcirc, .remcirc { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
cursor:pointer; background:transparent; font-size:15px; line-height:1; padding:0; flex:none; }
.addcirc { border:1px solid color-mix(in srgb, var(--green) 60%, transparent); color:var(--green); }
.addcirc:hover { background:color-mix(in srgb, var(--green) 12%, transparent); }
.remcirc { border:1px solid color-mix(in srgb, var(--red) 55%, transparent); color:var(--red); }
.addcirc.big { width:34px; height:34px; font-size:22px; }
.b-member { color:color-mix(in srgb, var(--accent-2) 55%, var(--red) 45%);
border-color:color-mix(in srgb, color-mix(in srgb, var(--accent-2) 55%, var(--red) 45%) 40%, transparent);
background:color-mix(in srgb, color-mix(in srgb, var(--accent-2) 55%, var(--red) 45%) 12%, transparent); }
.acc.dragging { opacity:.45; }
.remcirc:hover { background:color-mix(in srgb, var(--red) 12%, transparent); }
dialog .dlgmsg, dialog p, dialog li, dialog label, dialog input, dialog textarea, dialog select { overflow-wrap:anywhere; word-break:break-word; }
/* NEEDS ATTENTION: soft red badge style (both uses) */
.needstag { background:var(--red-soft); color:var(--red); }
/* number-first countdown */
.cdown { display:flex; align-items:baseline; gap:8px; }
.cdown b { font-family:var(--mono); font-size:36px; font-weight:800; line-height:1; }
.cdown span { font-size:13px; font-weight:700; letter-spacing:.5px; color:var(--dim); text-transform:uppercase; }
.rail-compact .cdown b { font-size:22px; }
/* color rings replace squares */
.pchip { border:2px solid var(--pc, var(--line-hi)); border-radius:999px; padding:2px 9px;
font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; }
.fchip.person { border:2px solid var(--pc, var(--line-hi)); border-radius:999px; }
/* ๐ด THE โ INSIDE AN ASSIGNEE CHIP [her ruling 2026-08-19, Snapshot Review note 13 โ it replaced the
two-select swap control]. Lives INSIDE .pchip, so the ring is the hit target's own outline and the
glyph never floats loose beside a name.
โ 24ร24 MINIMUM, NOT the 11.5px the glyph reads at: WCAG 2.5.8 (Target Size, Minimum) wants 24px,
and this sits in a row of chips where the next control is inches away โ the padding is the target,
the โ is just what it looks like. --dim (not --dimmer) for the same AA reason `.assg` beside it
already carries, going --red only on hover/focus so a destructive control announces itself at the
moment of aiming rather than sitting permanently red in a row of names (README ยง5 reserves red for
warning semantics; an idle remove button is not a warning). */
/* ๐ด THE MOVE CONTROL INSIDE CARD INFO [her ruling 2026-08-22]. A chip naming the column the card is
in now, and an inline panel it opens in the SAME window โ her words: *"it's just a drop down like
the filter dropdown from there within the same window."* Not a second : two modals at once
is the thing the old Move menu was written to avoid, and nesting one inside an open dialog is worse. */
/* ๐ด THE MEMBER AVATAR ROW [her ruling 2026-08-22, I3/I4]. Overlapped faces beside the Filter button,
your own first and ringed in brand so it is findable at a glance โ it is the only one that opens a
colour picker. Replaces the lone colour dot, which read as a filter because it sat among filters. */
/* โ .mbubrow, NOT .bubrow: that name was already taken by the FLOATING help/message bubbles
(app/ui.php, .bubrow at :2311 here) which are position:fixed at z-index 900 โ reusing it turned the
avatar row into a fixed overlay pinned bottom-right that swallowed every click on the board. Same
class of collision as the .ghost one; check before naming. */
.mbubrow { position:relative; display:inline-flex; align-items:center; }
.mbub { border:0; padding:0; background:none; cursor:pointer; margin-left:-8px; border-radius:50%;
line-height:0; transition:transform .12s ease; }
.mbub:first-child { margin-left:0; }
.mbub .avatar { border:2px solid var(--bg-deep); box-sizing:content-box; }
.mbub-me .avatar { border-color:var(--brand); }
.mbub:hover, .mbub:focus-visible { transform:translateY(-3px); z-index:2; position:relative; outline:none; }
.mbub:focus-visible .avatar { border-color:var(--accent-2); }
/* The popup is anchored in JS to the face that opened it (her note: its top-left should sit near the
bubble, not park at a fixed offset). */
.mempop { position:absolute; top:calc(100% + 9px); left:0; z-index:40; width:min(280px, calc(100vw - 40px));
background:var(--panel); border:1px solid var(--line-hi); border-radius:12px;
box-shadow:0 16px 40px rgba(0,0,0,.55); overflow:hidden; }
.mempop[hidden] { display:none; }
.memcap { display:flex; align-items:center; gap:13px; padding:14px 15px; }
/* The header takes the member's own card colour, so the popup IS the colour it is talking about. Text
on it is the deep ground rather than --text: these are saturated PALETTE20 values, and light text on
them fails AA in several. */
.memcap .memav { line-height:0; }
.memcap .memav .avatar { border:2px solid rgba(10,16,28,.35); box-sizing:content-box; }
.memwho { display:flex; flex-direction:column; min-width:0; }
.memnm { font-family:var(--disp); font-weight:700; font-size:17px; color:var(--bg-deep); line-height:1.2; }
.memrl { font-family:var(--mono); font-size:10.5px; letter-spacing:1px; color:rgba(10,16,28,.75); margin-top:4px; }
.meminner { padding:13px 15px 15px; }
.memmeta { display:flex; align-items:baseline; gap:10px; }
.memk { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:1.6px; color:var(--dimmer); margin:0; }
.memv { font-size:13.5px; color:var(--text); }
/* ๐ด THE DRAG GHOST [her ruling 2026-08-22, Snapshot Review I6] โ "an opaque angled version of the
card". Parked far off-screen because setDragImage() snapshots a RENDERED element: display:none or
visibility:hidden would snapshot as nothing, and leaving it on-screen would flash. The tilt and the
shadow are the whole point; opacity stays at 1 so it reads as solid rather than as the browser's
own washed-out default. */
.dragghost { position:absolute; top:-9999px; left:-9999px; pointer-events:none;
transform:rotate(4deg); box-shadow:0 16px 34px rgba(0,0,0,.5); opacity:1; }
/* ๐ด THE FILTER POPOVER [her ruling 2026-08-22, Snapshot Review I1]. Replaces a bar of up to seven
controls with one button. The COUNT BADGE is the price of hiding them: a bar announced itself by
being loud, so a popover has to say how many filters are on or an active filter becomes invisible. */
.fpopwrap { position:relative; display:inline-flex; }
.fglyph { display:inline-flex; align-items:center; gap:9px; background:var(--panel);
border:1px solid var(--line-hi); color:var(--text); border-radius:9px; padding:8px 14px;
font-family:var(--sans); font-size:13.5px; font-weight:700; cursor:pointer; }
.fglyph:hover { border-color:var(--brand); }
.fglyph.on, .fglyph[aria-expanded="true"] { border-color:var(--brand); }
.fbars { display:inline-flex; flex-direction:column; gap:2.5px; }
.fbars i { display:block; height:2px; border-radius:2px; background:currentColor; }
.fbars i:nth-child(1) { width:13px; } .fbars i:nth-child(2) { width:9px; } .fbars i:nth-child(3) { width:5px; }
.fcount { font-family:var(--mono); font-size:10.5px; font-weight:700; background:var(--brand);
color:#fff; border-radius:999px; padding:1px 7px; }
.fcount[hidden] { display:none; }
.fpop { position:absolute; top:calc(100% + 8px); left:0; z-index:40; width:min(340px, calc(100vw - 40px));
background:var(--panel); border:1px solid var(--line-hi); border-radius:12px;
box-shadow:0 18px 44px rgba(0,0,0,.55); overflow:hidden; }
.fpop[hidden] { display:none; }
.fpophead { display:flex; justify-content:space-between; align-items:center; padding:12px 14px;
border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; font-weight:700;
letter-spacing:1.5px; color:var(--dim); }
.fpopx { position:static; }
.fpopbody { padding:13px 14px 14px; max-height:min(62vh, 520px); overflow-y:auto; }
.fpopfoot { padding:10px 14px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; }
.fsec { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:1.6px;
color:var(--dimmer); margin:0 0 8px; }
.fsec-tch { color:var(--accent-3); }
.frule { border:0; border-top:1px solid var(--line); margin:14px 0 12px; }
/* Her spacing note: the search box sat too far from KEYWORD and too close to the section under it.
The label hugs the field and the gap moves below. */
.fsearch { width:100%; background:var(--bg-deep); border:1px solid var(--line-hi); color:var(--text);
border-radius:8px; padding:9px 12px; font-family:var(--sans); font-size:13.5px; margin:-2px 0 2px; }
.fsearch:focus { outline:2px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2); }
.fopt { display:flex; align-items:center; gap:10px; padding:6px; border-radius:7px; cursor:pointer;
font-size:13.5px; color:var(--text); margin:0; font-weight:400; }
.fopt:hover { background:var(--panel-hi); }
.fopt input[type=checkbox] { appearance:none; width:16px; height:16px; flex:0 0 16px; border-radius:4px;
border:1.5px solid var(--line-hi); background:var(--bg-deep); cursor:pointer; position:relative; }
.fopt input[type=checkbox]:checked { background:var(--brand); border-color:var(--brand); }
.fopt input[type=checkbox]:checked::after { content:'โ'; position:absolute; inset:0; display:flex;
align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; }
.fopt input[type=checkbox]:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
/* Overdue keeps its red [her ruling 2026-08-22, reversing note 2] โ see the markup's own note. */
.fopt-od .odtext { color:var(--red); }
.swdot { width:14px; height:14px; border-radius:4px; flex:0 0 14px; }
/* multi-selects: one control per level, "click 1 to all", the same shape at all three so it is
learned once. A checkbox per person does not survive a class of thirty. */
.msrow { display:flex; align-items:center; gap:10px; margin:0 0 7px; }
.mslab { font-size:12.5px; color:var(--dim); flex:0 0 62px; }
.ms { position:relative; flex:1; min-width:0; }
.msbtn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
background:var(--bg-deep); border:1px solid var(--line-hi); color:var(--text); border-radius:8px;
padding:8px 11px; font-family:var(--sans); font-size:13px; cursor:pointer; text-align:left; }
.msbtn:hover { border-color:var(--brand); }
.msbtn:focus-visible { outline:2px solid var(--accent-2); outline-offset:1px; }
.ms.on .msbtn { border-color:var(--brand); }
.mssum { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mscar { color:var(--dim); font-size:11px; flex:0 0 auto; }
.mslist { position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:50; background:var(--panel-hi);
border:1px solid var(--line-hi); border-radius:9px; box-shadow:0 12px 30px rgba(0,0,0,.5);
padding:5px; max-height:210px; overflow-y:auto; }
.mslist[hidden] { display:none; }
.msempty { font-size:12px; color:var(--dimmer); padding:8px 7px; }
/* I9: an assignee chip is a filter toggle now. It must LOOK unchanged (no on-state ring, her call),
so this only strips the button chrome and restores the cursor. */
.pchip-btn { background:none; font-family:var(--sans); cursor:pointer; }
.pchip-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* ๐ด THE CARD DESCRIPTION [her ruling 2026-08-22]. Two lines on the face.
-webkit-line-clamp is the only cross-browser way to clamp by LINE rather than height, and it is
supported everywhere this app runs; the height is not hard-capped, so a one-line description takes
one line rather than always reserving two.
โ THE HOVER IS GONE [her ruling 2026-08-29] and `.carddesc-wrap` / `.carddesc-full` with it -- see
the markup's note. The margin those rules carried moves onto `.carddesc`, which is now the
element itself rather than the thing inside the tooltip wrapper. */
.carddesc { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
margin:5px 0 0; font-size:12.5px; line-height:1.45; color:var(--dim); }
#cimovewrap { position:relative; margin:2px 0 4px; }
.colchip { display:inline-flex; align-items:center; gap:7px; background:var(--panel-hi);
border:1px solid var(--line-hi); color:var(--text); border-radius:7px; padding:6px 12px;
font-family:var(--sans); font-size:12.5px; cursor:pointer; }
.colchip:hover { border-color:var(--brand); }
.colchip::after { content:'โ'; color:var(--dim); font-size:11px; line-height:1; }
.colchip[aria-expanded="true"] { border-color:var(--brand); }
.movepanel { position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:250px;
background:var(--panel-hi); border:1px solid var(--line-hi); border-radius:10px;
padding:13px 14px; box-shadow:0 12px 30px rgba(0,0,0,.5); }
.movepanel[hidden] { display:none; }
.movepanel .mvh { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:1.6px;
color:var(--dimmer); margin:0 0 10px; }
.movepanel label { margin-top:8px; }
.movepanel label:first-of-type { margin-top:0; }
.movepanel select { width:100%; }
.assgx { background:none; border:0; cursor:pointer; color:var(--dim); font-size:11px; line-height:1;
margin:-4px -6px -4px 5px; padding:6px; min-width:24px; min-height:24px;
display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.assgx:hover, .assgx:focus-visible { color:var(--red); background:color-mix(in srgb, var(--red) 14%, transparent); }
/* circle-plus: visible ring, confident glyph */
.circleplus { border:2px solid var(--line-hi); color:var(--dim); font-weight:800; font-size:13px;
width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; }
.circleplus:hover { border-color:var(--brand); color:var(--brand); }
/* svg trash + pencil sizing */
.icobtn { background:none; border:0; cursor:pointer; padding:4px; color:var(--dim); display:inline-flex; }
.icobtn:hover { color:var(--red); }
.icobtn svg { width:17px; height:17px; }
/* avatar grids: nameless, current-first */
.avgrid { display:flex; flex-wrap:wrap; gap:10px; }
.avgrid .avopt span:last-child { display:none; } /* kill names */
/* ๐ด THE BOX IS THE CONTROL, NOT A RADIO SITTING ON IT [her ask 2026-08-27, mid-jam]:
*"I just want to select the avatar box (the box around the avatar) and have it show that as
highlighted/selected with no radio button."*
`.avpick` (line ~1470) already hid its radios and painted the selection onto `.avopt`. The DIALOG
grids never got either rule: join.php's "Additional Avatars" (#javmore) and settings.php's picker
dialog carry `.avgrid` WITHOUT `.avpick`, so a live radio sat on top of each tile and choosing one
changed nothing visible. Scoped to `.avgrid` so both dialogs are fixed by one rule rather than each
growing its own; the selected look is copied from `.avpick` deliberately, so selection means the
same thing on every avatar surface in the app.
โ opacity:0, NOT display:none. The input has to stay focusable and reachable by keyboard and by
screen reader -- display:none would drop it out of the tab order and make the grid mouse-only. The
:focus-visible rule below is what makes that focus visible, and it is not optional decoration.
The already wraps the whole tile, so clicking the box was always what selected it; only
the radio's visibility and the missing selected state ever needed changing. */
.avgrid input[type="radio"] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.avgrid input[type="radio"]:checked + .avopt { border-color:var(--brand); background:var(--brand-soft); }
.avgrid input[type="radio"]:focus-visible + .avopt { outline:2px solid var(--brand); outline-offset:3px; }
/* The "More" tile on join.php became a real when it became keyboard-reachable, so it needs
the browser's button chrome stripped back to what the sibling tiles look like. `.on` is the
same selected state the radios get above -- the tile wears it when the chosen avatar is one of the
uploads that live behind the dialog. */
.avpick button.avmorebox { font:inherit; color:inherit; background:transparent; }
.avpick button.avmorebox.on { border-color:var(--brand); background:var(--brand-soft); }
.avopt.on { outline:2px solid var(--brand); border-radius:12px; }
.avdlg-scroll { max-height:300px; overflow-y:auto; }
.avdlg-up { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
/* ๐ด THE UPLOAD ROW, WHICH WAS THE ONLY DIALOG IN THE APP TO OVERFLOW AT 360px [2026-08-28,
MOBILE:1047; 91 dialogs measured and this was the one]. It used to be three inline styles, and the
Close button painted 104px past the dialog's right edge -- off screen on a phone, with the popup
scrolling sideways instead.
โ `min-width:0` IS THE WHOLE FIX AND IT IS NOT COSMETIC. A flex item's default `min-width:auto`
resolves to its intrinsic width, and for `
for accessibility (commit ef47607) and NO CSS was ever added for it, so all three bubbles โ help
queue, messages and the tracker โ rendered the browser's DEFAULT button chrome: an opaque pale box
with a border and padding, sitting on top of the dark circle. Her description was exact: "a symbol
on a white square background on a dark circle looking like pasted in pictures."
This resets the button back to invisible chrome so the SVG once again inherits .bubble's
color:var(--brand), sits centred, and picks up the glow from the rule below. */
.bubble-trigger { background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
cursor:pointer; display:flex; align-items:center; justify-content:center;
width:100%; height:100%; -webkit-appearance:none; appearance:none; }
.bubble-trigger:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:50%; }
.bubble svg { width:26px; height:26px; filter:drop-shadow(0 0 5px color-mix(in srgb, var(--brand) 65%, transparent)); }
.bubnum { position:absolute; top:-5px; right:-5px; min-width:20px; height:20px; padding:0 5px; border-radius:10px;
background:var(--navdot-bg); color:#fff; font-family:var(--mono); font-size:11px; font-weight:800;
display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--bg-deep); }
.bubrow .bubble { position:relative; }
.bubpanel { width:415px; max-height:70vh; padding:16px; font-size:14.5px;
border:1.5px solid color-mix(in srgb, var(--brand) 45%, var(--line-hi));
box-shadow:0 0 26px color-mix(in srgb, var(--brand) 22%, transparent), 0 -8px 34px rgba(0,0,0,.5); }
.bubpanel .bubcard { font-size:14.5px; padding:12px 14px; }
/* Bigger + bolder [her call 2026-08-02] โ these panel titles were reading too quietly now that the
panels themselves are stripped back and there is little else in them. 12 -> 14px, 600 -> 700.
โ APPROVE OR ADJUST: she asked for "bigger/bolder" without numbers, so the exact values are mine.
Kept the mono face and the letter-spacing, which are the app's established section-label voice. */
.bubhead { font-family:var(--mono); font-size:14px; letter-spacing:2.5px; color:var(--brand); font-weight:700;
text-align:center; padding:2px 0 12px; }
.bubbig { width:100%; margin-top:12px; }
.bubqueue { max-height:38vh; overflow-y:auto; }
.bubrcpt { position:relative; padding-right:34px; }
/* Measured 21x19px in Chromium on the Teacher Dashboard's alert rows, under WCAG 2.5.8's 24x24
minimum [fixed 2026-08-07]. The glyph size is untouched โ `min-width`/`min-height` grow only the hit
box, and the flex centring keeps the โ where it already was. The phone override further down was
already comfortable; this is the desktop half that never got the same treatment. */
.bubx { position:absolute; top:8px; right:8px; background:none; border:0; color:var(--dim); cursor:pointer;
font-size:13px; padding:2px 5px; border-radius:var(--r-sm);
min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center; }
.bubx:hover { color:var(--text); background:var(--panel-hi); }
/* `.bubpanel-trk`, `.trk-third`, `.trk-solo`, `.trkwide`, `.trkhead` and `.trksub` were deleted here
2026-08-02 with the tracker bubble โ nothing else ever used them. `.trkgrid` / `.trkname` /
`.trkblk` / `.trk2*` STAY: teacher/classes.php's Track Submissions, teacher/meetings.php's chips
and the student Meetings card all still render them. */
.trkgrid { display:grid; grid-template-columns:1fr max-content; gap:8px 16px; align-items:center;
justify-content:start; padding:8px 2px 12px; }
.trkname { font-size:14px; font-weight:600; white-space:nowrap; }
.trk2 { width:15px; height:15px; border-radius:50%; display:inline-block; }
.trk2-g { background:var(--green); box-shadow:0 0 10px color-mix(in srgb, var(--green) 75%, transparent); }
.trk2-r { background:var(--bad); box-shadow:0 0 10px color-mix(in srgb, var(--bad) 70%, transparent); }
.trk2-y { background:var(--amber); box-shadow:0 0 9px color-mix(in srgb, var(--amber) 65%, transparent); }
.trk2-grey { background:var(--dim); opacity:.55; }
/* Centered-header dialogs (Get Help / Send a Message / Report an absence / Mark Ready ...) */
.dlgc { text-align:center; font-size:20px !important; padding-bottom:6px; }
.dlg-cn { min-width:400px; }
.dlgbig { font-size:14px; color:var(--text); }
.dlg-cn input[type=radio] { transform:scale(1.15); margin-right:4px; }
/* ---- REMOVAL OPTIONS: the roster's two-step remove/move/merge dialog [2026-08-03] ----
Blessed mockup: HTMLSnapshots/PROPOSAL-remove-student-three-options.html. Four new pieces; the
rest of the dialog reuses what already exists (.dlg-cn, .dlgc, .dialog-actions, .btn/.btn-ghost/
.btn-sm/.btn-red, and the sitewide bare `select` rule at line 546 which already strips the native
appearance and draws the chevron).
โ EVERY COLOUR IS AN EXISTING THEME VARIABLE, nothing hard-coded, so this inherits all 15 themes
with no per-theme work. The mockup inlines an approximation of these ONLY because it is a
standalone file; its :root block is deliberately not copied.
โ SCOPED UNDER .rmdlg, deliberately. The design names these .x / .opt / .rows / .row / .mk, and
those are kept, but as bare globals in a 2000-line stylesheet `.row` and `.x` are landmines for
whatever gets written next. Scoping matches what this file already does with equally generic names
(.idblock .who, .impbig .k, .sprintrail h2 .dot) and changes nothing visually. */
.rmdlg { position:relative; width:min(520px, 92vw); }
/* ๐ด `.rmdlg .x` AND `.rmdlg .who` WERE DELETED HERE [2026-09-07, chat 12], not lost.
The bespoke circled โ ("no Cancel competes with the primary button") is now the strip's own
`.ci-icon.dlg-close`, and the centred " ยท " line -- which every one of the four
steps carried its own identical copy of -- is now the strip caption, said once above all of
them. Both selectors matched nothing after that, and this file's own rule over
`.rep-crow[hidden]` is that a live-looking rule which cannot fire is what the next reader
wastes a session on.
โ `.rmdlg` KEEPS `position:relative` above. It is not left over from the absolute โ: the
`.opt` cards hide their real radios with `position:absolute`, so the containing block is
still needed. Checked before deleting, because "the โ is gone so the relative can go too"
is exactly the plausible next tidy-up. */
/* an option card. .sel is the chosen one; .danger.sel swaps brand for red */
.rmdlg .opt {
display:flex; gap:11px; align-items:flex-start; border:1px solid var(--line); border-radius:8px;
padding:12px 13px; margin:0 0 9px; cursor:pointer; background:color-mix(in srgb, var(--text) 1.5%, transparent);
}
.rmdlg .opt:hover { border-color:var(--line-hi); }
.rmdlg .opt.sel { border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.rmdlg .opt.danger.sel { border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.rmdlg .opt.off { opacity:.45; cursor:not-allowed; }
.rmdlg .opt input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.rmdlg .dot { width:15px; height:15px; border-radius:50%; border:2px solid var(--line-hi); margin-top:2px; flex:0 0 auto; }
.rmdlg .opt.sel .dot { border-color:var(--brand); background:radial-gradient(circle, var(--brand) 0 45%, transparent 46%); }
.rmdlg .opt.danger.sel .dot { border-color:var(--red); background:radial-gradient(circle, var(--red) 0 45%, transparent 46%); }
.rmdlg .lab { font-weight:700; font-size:14px; }
/* ๐ด COMPUTED [2026-08-17, Teacher Teams audit]. `.rmdlg .opt` fills itself with a 1.5% `--text` wash
to lift the option card off the dialog, which lightens the background just enough to eat `--dim`'s
margin: measured 4.37 in summersorbet and 4.48 in sunsettide against 4.5:1. This is the option
DESCRIPTION in a three-way destructive chooser, so it is real text that has to be readable.
96% is the largest `--dim` share that clears 4.5:1 in all 15 themes; worst after is 4.53. The card
itself is not touched, so the wash she approved still paints.
โ WORTH KNOWING, NOT FIXED HERE: plain `--dim` on `--panel-hi` is 4.55 at worst app-wide, i.e.
every `dialog label`, `.bdlgsub` and `.rmdlg .fl` in the app sits 0.05 above AA. That is a
token-level question, not a Teams-page one. */
.rmdlg .desc { color:color-mix(in srgb, var(--dim) 96%, var(--text)); font-size:12.7px; margin-top:2px; }
.rmdlg .fl {
display:block; font-size:12px; color:var(--dim); margin:0 0 5px;
letter-spacing:.03em; text-transform:uppercase;
}
/* the consequence list: a fixed marker column and a flexible text column, one sentence per row */
.rmdlg .rows { margin:16px 0 0; border-top:1px solid var(--line); }
.rmdlg .row {
display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line);
font-size:13.3px; align-items:flex-start;
}
.rmdlg .mk { flex:0 0 auto; width:17px; text-align:center; font-weight:800; line-height:1.5; }
.rmdlg .mk.k { color:var(--green); } /* keeps */
/* COMPUTED, same house method as `.circbtn-red` directly above [2026-08-17]: the โ is 13.3px at
weight 800 โ normal text for WCAG โ and raw `--red` on `--panel-hi` measured 4.12 in bubblegum.
87% is the largest share clearing 4.5:1 in all 15 themes; worst after is 4.53. `.mk.a` (--amber,
worst 5.53) and `.mk.k` (--green, worst 5.61) were measured and need no change. */
.rmdlg .mk.l { color:color-mix(in srgb, var(--red) 87%, var(--text)); } /* loses */
.rmdlg .mk.s { color:var(--dim); } /* stays behind */
.rmdlg .mk.a { color:var(--amber); } /* heads up */
.rmdlg .rv { flex:1; }
.rmdlg .rv b { color:var(--text); }
/* BACK bottom-left, CONFIRM bottom-right */
.rmdlg .rmacts { justify-content:space-between; }
/* ---- Single-click deck launcher host [2026-08-02] ----
The container that gets put into fullscreen BEFORE the deck is fetched into it (see
app/ui.php's launchDeck). It must paint the deck background itself: between requestFullscreen()
resolving and the fetch landing there is a real, visible moment with nothing in it, and a
transparent fullscreen element shows as a white flash on most browsers.
`:fullscreen` rather than a fixed size โ outside fullscreen it is display:none anyway, and this
way it inherits whatever the browser gives it instead of fighting it. */
.deckhost { background:var(--bg-deep); }
.deckhost:fullscreen { width:100%; height:100%; overflow:hidden; background:var(--bg-deep); }
/* "Like it came out of the button and then folds back into it" [her words, 2026-08-02]. The OPEN
half is the browser's own fullscreen transition, which we cannot restyle; this is the CLOSE half,
a short fold-and-fade so the deck recedes instead of vanishing. Kept to 160ms โ the teardown
empties the host at 180ms, so the animation must finish first. */
.deckhost-closing { animation:deckfold .16s ease-in forwards; }
@keyframes deckfold { to { opacity:0; transform:scale(.96); } }
@media (prefers-reduced-motion: reduce) { .deckhost-closing { animation:none; opacity:0; } }
/* The injected deck/cover are position:fixed; inside a fullscreen element that resolves against the
fullscreen box, which is what we want โ but the host must not also scroll behind them. */
body.deckhosted { overflow:hidden; }
/* ---- Step 14: retrospective presentation deck ---- */
.deck { position:fixed; inset:0; z-index:1000; background:var(--bg-deep); display:flex; flex-direction:column;
background-image:radial-gradient(ellipse 70% 55% at 50% -10%, color-mix(in srgb, var(--brand) 9%, transparent), transparent); }
.deckbar { display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--line); }
.decklogo { font-family:var(--mono); font-size:12.5px; letter-spacing:2px; color:var(--dim); font-weight:600; }
.decklogo .dot { color:var(--brand); }
.decktimer { font-family:var(--mono); font-size:15px; font-weight:700; color:var(--dim); letter-spacing:1px; }
.decktimer.meetover { color:var(--red); }
.deckbtn { background:var(--panel); border:1px solid var(--line-hi); color:var(--dim); border-radius:var(--r-sm);
width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
font-size:15px; text-decoration:none; }
.deckbtn:hover { color:var(--text); border-color:var(--brand); }
/* ๐ด scrollbar-gutter:stable โ HER "a bar flashes down the right edge on every Next click"
[reported 2026-08-25, mechanism measured the same night]. This is the ONLY scrolling element in
the deck, and whether it scrolls depends on how tall the CURRENT slide is: measured on the retro
fixture at a 380px-tall viewport, slides 6 and 7 overflowed (438/317 and 356/317) while 1-5 and 8
did not. So the scrollbar appears on one slide and is gone on the next, which is exactly a bar
flashing on every advance. Her class has more teams and more goals per slide than the one-team
fixture, so it happens at ordinary heights for her and not at 900px here.
โ Worse than a flicker on Windows: headless Chromium uses OVERLAY scrollbars, so the measured
gutter stayed 0 and the content did not move. Her Chrome uses classic scrollbars, which take
~15px out of the content box โ so the slide also SHIFTS sideways as the bar comes and goes.
โ SHE IS RIGHT THAT THIS IS THE SYMPTOM, NOT THE CAUSE [2026-08-25]: *"it's kind of weird to
have a scrollbar at all on a full screen presentation. The content should scale to fit."* A
scale-to-fit was built and REVERTED the same night, and the reason is recorded in BUILD_PLAN so
the next attempt does not rediscover it: #meetform holds a 71px timer ABOVE a `flex:1` slide, so
its scrollHeight reads 1088 before the flex resolves and 1017 after, and a fit that measures the
wrong one shrinks slides that fit perfectly well. Reserving the gutter is the safe half. */
.deckbody { flex:1; overflow-y:auto; scrollbar-gutter:stable; display:flex; align-items:stretch; }
.slide { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:40px 60px 90px; max-width:1080px; margin:0 auto; width:100%; text-align:center; }
.slide-on { animation:slidein .28s ease-out; }
@keyframes slidein { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
/* ๐ด WAS `color:var(--brand)` [fixed 2026-08-15, Teacher Meetings audit]. Measured against each
theme's own `--bg-deep` (the deck's background), plain `--brand` failed WCAG AA in 3 of 16:
catalystcats 3.84 โ the DEFAULT theme โ ultraviolet 3.62, pumpkinspice 3.65. It is 13px at
weight 600, so 4.5:1 applies (large-text 3.0 needs 18.66px bold or 24px). This one matters more
than most: the deck renders FULL SCREEN ON A PROJECTOR, where the kicker is the only thing naming
which slide the room is on.
Fixed the same way `.b-info`, `.b-pink` and `.b-aday`/`.b-bday` were โ lighten toward the theme's
own `--text` rather than move the token, which keeps the hue reading as that theme's brand.
**83% is COMPUTED, not chosen:** the largest `--brand` share where all 16 themes clear 4.5:1
(84% left pumpkinspice at 4.49). Worst case is now 4.57. */
.slidekicker { font-family:var(--mono); font-size:13px; letter-spacing:3.5px;
color:color-mix(in srgb, var(--brand) 83%, var(--text)); font-weight:600; }
.slidetitle { font-family:var(--disp); font-size:44px; font-weight:800; letter-spacing:-.02em; margin:14px 0 6px; line-height:1.1; }
.slidetitle-xl { font-size:64px; }
.slidesub { font-size:17px; color:var(--dim); max-width:640px; margin:6px auto 0; }
.slide-prompt .slidesub { font-size:19px; }
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
NOMINATION FLIP CARDS โ THE MVP WALL, SIZED FOR A PROJECTOR AND NOT FOR A LAPTOP
๐ด REBUILT 2026-09-08, her report after running MVPs in front of a class: *"the cards were too
small and the text was too small. I want them bigger and louder and way easier to read spread
across the screen."*
WHAT WAS ACTUALLY WRONG, measured against the old values rather than guessed:
ยท `.nomcard` was a FIXED 230x170 and `.nomquote` was **13px**. 13px is a comfortable caption on
a laptop 60cm away and it is unreadable from the back of a classroom โ the quotes are the
whole point of the slide, and they were the smallest text on it.
ยท `.slide` caps content at **1080px**. On a 1920px projector that leaves 44% of the screen
empty, which is the "spread across the screen" half of her sentence: three nominees sat in a
huddle in the middle with a third of the wall unused on either side.
ยท A flex row of fixed-width cards cannot use the space it is given. The cards now come from a
GRID whose columns divide the real width (`1fr`), so a wall of three fills the screen with
three big cards and a wall of twelve fills it with twelve smaller ones โ the count decides,
which is what `$nomtier9` in public/meeting.php picks the tier for.
โ EVERY SIZE IS clamp(min, vw, max) โ NOT a fixed px, and not a bare `vw`. Bare `vw` on a 4K
projector would be comic and on a 1280x720 hall display would be too small; the floor is what
the old design measured plus a margin, and the ceiling is where a name stops being a name and
becomes a banner. `vw` and not `vh`, because a slide's width is what varies between the four
screens this runs on (a laptop lid, a 1080p projector, a 4K TV, an iPad mirrored).
โ THE CARD STAYS A FLIP CARD. `.nomface` is `position:absolute; inset:0`, so the card's own box
is what gives it height โ hence `min-height` on `.nomcard` rather than height on the faces, and
hence the aspect-ratio floor: an absolutely-positioned face cannot push its parent taller, so a
long quote in a short card would clip. That is why `min-height` grows with the tier too.
โ AND IT STILL FITS: deckFit() (public/meeting.php) scales any slide that would overflow, which
is what makes a deliberately big default safe for a 25-nominee company wall. Without it, this
change would trade her too-small complaint for a scrollbar, which she ruled against on
2026-08-25 (*"Powerpoints don't have scroll bars"*).
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
/* ๐ด THE COLUMN COUNT COMES FROM PHP (`--nomcols`, set by $nomwall9 in public/meeting.php), NOT
FROM auto-fit. The first draft was `repeat(auto-fit, minmax(...))` and it put THREE nominees in
two columns with an orphan underneath at 1920px โ 3 x 560 + 2 gaps = 1740 against a 1723px
content box, seventeen pixels. The server already knows how many cards there are, so the layout
is told rather than guessed; see that helper's note for the per-count choices (4 is 2x2).
`minmax(0, 1fr)` and not `1fr`: a long unbroken quote would otherwise blow a track out past its
share, because `1fr` means `minmax(auto, 1fr)` and `auto` floors at the content's min size. */
.nomgrid { display:grid; grid-template-columns:repeat(var(--nomcols, 3), minmax(0, 1fr));
justify-items:center; align-items:stretch;
gap:clamp(16px, 1.6vw, 30px); margin-top:clamp(22px, 2.4vh, 40px); width:100%; }
.nomcard { display:grid; width:100%; max-width:clamp(300px, 26vw, 520px);
min-height:clamp(190px, 15vw, 260px); perspective:1200px; cursor:pointer; }
/* A CAP ON THE CARD, not just on the row [the same trick `.cpgrid` documents for My Classes]: one
or two nominees divide the whole wall between them, and without this a single card would render
as a 1700px letterbox with a name floating in the middle of it. Capped and centred in its own
track instead, so a wall of two reads as two cards rather than as two panels. */
.nomgrid-lg .nomcard { max-width:clamp(320px, 30vw, 580px); }
.nomgrid-xl .nomcard { max-width:clamp(340px, 34vw, 660px); }
.nomgrid-lg .nomcard { min-height:clamp(210px, 17vw, 300px); }
.nomgrid-xl .nomcard { min-height:clamp(230px, 19vw, 340px); }
.nomaward { min-height:clamp(230px, 18vw, 320px); }
.nomgrid-lg .nomaward, .nomgrid-xl .nomaward { min-height:clamp(260px, 21vw, 380px); }
/* 13+ CARDS: A WHOLE COMPANY ON ONE WALL. Denser by design โ see $nomwall9's note for the
measurement that forced it (16 cards wanted 1485px of a 1017px screen and pinned deckFit() to its
floor). Everything here is still bigger than the design this replaces. */
.nomgrid-sm .nomcard { max-width:clamp(230px, 20vw, 380px); min-height:clamp(150px, 11vw, 210px); }
/* ONE ROW โ TAKE THE HEIGHT NOBODY ELSE IS USING [see $nomwall9's note: measured 340px of an 887px
content box, centred, with ~270px dead above and below]. `vh` here and not `vw`, deliberately โ
this is the one measurement on the wall that is about the space left over vertically.
โ IT MUST COME AFTER THE TIER HEIGHTS ABOVE. `.nomgrid-1row .nomcard` and `.nomgrid-xl .nomcard`
are both (0,2,0), so source order is the whole tiebreak โ written above them, this rule loses
and the boost silently does nothing. Measured exactly that way first: 340px with the class on
the element and applying to nothing. */
.nomgrid-1row .nomcard, .nomgrid-1row .nomaward { min-height:clamp(240px, 42vh, 520px); }
/* ๐ด THE TWO FACES ARE GRID-STACKED, NOT ABSOLUTELY POSITIONED [changed 2026-09-08, and it fixes a
defect that predates the resize]. They were `position:absolute; inset:0`, which means neither face
can make the card taller โ so a quote longer than `min-height` PAINTED STRAIGHT THROUGH the card's
own rounded border and, being scrollable overflow, quietly added height to the SLIDE. Measured on
a 13-card wall: 1017px before the cards were flipped and 1033px after, i.e. flipping the last card
put a scrollbar on a slide that had just been fitted.
`grid-area:1/1` puts both faces in the SAME grid cell, in flow: the taller of the two sizes the
card, the shorter stretches to match, and the flip is unchanged because it only ever needed
`backface-visibility` and a `transform`. This is the modern flip-card idiom for exactly this
reason. `min-height` on `.nomcard` is now a FLOOR rather than the card's whole height. */
.nomface { grid-area:1/1; backface-visibility:hidden; border-radius:var(--r-lg);
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:clamp(8px, .9vw, 16px); padding:clamp(18px, 1.8vw, 34px);
transition:transform .55s cubic-bezier(.2,.7,.25,1); }
/* LOUDER: 2px of border and a wider glow, so the card reads as an object from the back of the room
rather than as a slightly lighter rectangle. Both faces gain it โ the back is the one on screen
while the room is guessing, and it was the quieter of the two. */
.nomback { background:var(--panel); border:2px solid color-mix(in srgb, var(--brand) 55%, var(--line-hi));
box-shadow:0 0 30px color-mix(in srgb, var(--brand) 26%, transparent); }
.nomback span { font-family:var(--disp); font-weight:800; color:var(--brand);
font-size:clamp(56px, 6vw, 110px); line-height:1;
text-shadow:0 0 30px color-mix(in srgb, var(--brand) 60%, transparent); }
.nomfront { background:var(--panel); border:2px solid var(--line-hi); transform:rotateY(180deg); }
.nomcard.flipped .nomback { transform:rotateY(180deg); }
.nomcard.flipped .nomfront { transform:rotateY(360deg); }
.nomcard.flipped { cursor:default; }
.nomaward .nomfront { border-color:color-mix(in srgb, var(--amber) 62%, transparent);
box-shadow:0 0 38px rgba(242,185,92,.34); }
/* `overflow-wrap:anywhere` is the guard the old 22px name never needed: at 67px a long single-token
name ("Konstantinopoulos") is wider than its own card, and a flip card cannot scroll โ the face is
`position:absolute`, so anything past the edge is simply gone. It breaks rather than disappears. */
.nomname { font-family:var(--disp); font-weight:800; line-height:1.1; letter-spacing:-.01em;
font-size:clamp(28px, 2.5vw, 52px); max-width:100%; overflow-wrap:anywhere; text-wrap:balance; }
.nomgrid-xl .nomname { font-size:clamp(32px, 3.1vw, 62px); }
/* ๐ด THE QUOTE IS THE SLIDE, so it gets read-from-the-back size and a colour ABOVE `--dim`
[her "louder"]. `--dim` is this app's caption grey; mixed 55% toward `--text` it keeps the
quieter-than-the-name relationship the design has always had while clearing the projector, and
the direction is safe in all 16 themes by construction โ `--text` IS each theme's readable
foreground on `--panel`, so mixing toward it can only raise contrast.
The italic stays: it is what marks these as somebody's words rather than the app's. */
.nomquote { font-size:clamp(17px, 1.45vw, 30px); line-height:1.45; font-style:italic;
color:color-mix(in srgb, var(--dim) 45%, var(--text)); max-width:34ch; text-wrap:balance; }
.nomgrid-xl .nomquote { font-size:clamp(19px, 1.7vw, 34px); }
/* The single-row wall's type, sized to FILL the taller card rather than float in the middle of it โ
the two go together and changing one without the other is what left the first capture looking
like a big empty card. This is the state her own classes hit most often (a team nominates two or
three), so it is the one worth tuning by eye. */
.nomgrid-1row .nomname { font-size:clamp(34px, 3.5vw, 74px); }
.nomgrid-1row .nomquote { font-size:clamp(21px, 1.95vw, 40px); max-width:30ch; }
/* The dense wall's own type. The quote floor here is the tier's whole reason for existing and it is
still 60% up on the 13px it replaces; below about 20px a projected quote stops being readable from
the back and the wall would be decoration. */
.nomgrid-sm .nomname { font-size:clamp(22px, 1.85vw, 38px); }
.nomgrid-sm .nomquote { font-size:clamp(15px, 1.15vw, 23px); line-height:1.4; max-width:28ch; }
.nomtrophy { font-size:clamp(46px, 4.4vw, 92px); line-height:1; }
/* ๐ด THE CARD WALL IS THE ONE SLIDE THAT IS NOT CAPPED AT 1080px, and the cap is otherwise right:
`.slide`'s max-width is a READING measure (a 44px title and a 17px subtitle need a line length,
not a screen), which is why this is a per-slide class from PHP and not a change to `.slide`.
96vw rather than 100% so the wall still has a margin on either side and does not read as bleeding
off the edges of the projection; 2200px is the ceiling where a 4K TV would otherwise stretch four
cards to half a metre each. */
.slide-wall { max-width:min(2200px, 96vw); }
/* Scoreboard */
.scoreboard { display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:30px; }
.score { background:var(--panel); border:1px solid var(--line-hi); border-radius:var(--r-lg);
padding:24px 32px 20px; min-width:170px; }
.score b { display:block; font-family:var(--disp); font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.score b i { font-style:normal; font-size:26px; color:var(--dim); }
.score span { display:block; font-size:13px; color:var(--dim); font-weight:700; margin-top:8px; }
.score.big-ok b { color:var(--green); text-shadow:0 0 18px color-mix(in srgb, var(--green) 40%, transparent); }
.score.big-warn b { color:var(--amber); text-shadow:0 0 18px rgba(242,185,92,.4); }
.score.big-bad b { color:var(--bad); text-shadow:0 0 18px color-mix(in srgb, var(--bad) 40%, transparent); }
/* Big pacing gauge */
.pacegaugebig { margin:30px auto 0; max-width:560px; width:100%; }
.pacegaugebig .pgtag { font-family:var(--mono); font-size:16px; font-weight:800; letter-spacing:1.5px; margin-bottom:12px; }
.pacegaugebig.sev-ok .pgtag { color:var(--green); }
.pacegaugebig.sev-warn .pgtag { color:var(--amber); }
.pacegaugebig.sev-bad .pgtag { color:var(--bad); }
.pgbar { position:relative; height:12px; background:var(--panel); border:1px solid var(--line-hi); border-radius:7px; }
.pgbar em { position:absolute; left:50%; top:-5px; bottom:-5px; width:2px; background:var(--dim); opacity:.6; }
.pgbar i { position:absolute; top:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%;
background:var(--text); box-shadow:0 0 12px rgba(255,255,255,.35); }
.sev-ok .pgbar i { background:var(--green); box-shadow:0 0 14px color-mix(in srgb, var(--green) 70%, transparent); }
.sev-warn .pgbar i { background:var(--amber); box-shadow:0 0 14px rgba(242,185,92,.7); }
.sev-bad .pgbar i { background:var(--bad); box-shadow:0 0 14px color-mix(in srgb, var(--bad) 70%, transparent); }
.pgsub { font-size:13px; color:var(--dim); margin-top:12px; }
.shoutout { margin-top:30px; font-size:19px; background:var(--panel); border:1px solid var(--line-hi);
border-radius:var(--r-lg); padding:16px 26px; display:inline-block; }
/* Met-goal celebration wall */
.metwall { background:color-mix(in srgb, var(--green) 7%, var(--panel)); border:1.5px solid color-mix(in srgb, var(--green) 45%, transparent);
border-radius:var(--r-lg); padding:22px 28px; margin:24px auto 8px; max-width:720px; width:100%;
box-shadow:0 0 26px color-mix(in srgb, var(--green) 16%, transparent); }
.metkicker { font-family:var(--mono); font-size:11.5px; letter-spacing:2.5px; color:var(--green); font-weight:700; }
.metgoal { font-family:var(--disp); font-size:24px; font-weight:800; color:var(--green); margin-top:10px;
text-shadow:0 0 16px color-mix(in srgb, var(--green) 50%, transparent); }
.metnote { font-size:13px; color:var(--dim); margin-top:12px; }
/* Goal decision cards */
.goalcard { background:var(--panel); border:1px solid var(--line-hi); border-radius:var(--r-md);
padding:16px 20px; margin:14px auto 0; max-width:720px; width:100%; text-align:left; }
.goalcard-red { border-left:3px solid var(--red); }
.gctitle { font-size:16px; font-weight:700; }
.gcacts { display:flex; flex-wrap:wrap; gap:8px 20px; margin:10px 0 8px; }
.gcacts label { font-weight:400; font-size:13px; margin:0; white-space:nowrap; }
.goalcard input[type=text] { width:100%; }
.newgoals { margin:26px auto 0; max-width:720px; width:100%; text-align:left; }
.ngkicker { font-family:var(--mono); font-size:11.5px; letter-spacing:2px; color:var(--dim); font-weight:700; margin-bottom:8px; }
.newgoals [data-ngrows] input { width:100%; margin-top:8px; }
/* ๐ด THE JAM POST-MORTEM'S ONE DISCUSSION SLIDE [her ruling 2026-08-26]. Three prompts that used to
be three full-screen slides now share one, so each needs to read as its own block rather than as a
run of paragraphs. Same surface tokens as `.goalcard` above โ `--panel` on `--line-hi` at
`--r-md`, left-aligned inside a centred slide โ because that combination is already proven on this
deck in all 16 themes and inventing a second card look for one slide would be a second thing to
keep in sync. Slightly wider (760 vs 720) and slightly tighter vertically, because there are three
of them on a projector at once and the deck's own fit-to-screen has no headroom to give.
`--dim` on `--panel` is the pairing the board's own card sub-text uses; the size stays at 16px,
which is below the large-text threshold either way, so the 4.5:1 the token already meets applies
unchanged. */
.pmprompt { background:var(--panel); border:1px solid var(--line-hi); border-radius:var(--r-md);
padding:14px 20px; margin:14px auto 0; max-width:760px; width:100%; text-align:left; }
.pmprompt-t { font-family:var(--disp); font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.2; }
.pmprompt-s { font-size:16px; color:var(--dim); margin-top:5px; }
@media (max-width:720px) {
.pmprompt { padding:12px 15px; }
.pmprompt-t { font-size:18px; }
.pmprompt-s { font-size:14.5px; }
}
/* Deck navigation */
.decknav { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); z-index:1002;
display:flex; align-items:center; gap:14px; }
.decknavbtn { width:42px; height:42px; font-size:16px; }
/* Confetti */
.confetti { position:fixed; z-index:1005; width:9px; height:13px; border-radius:2px; pointer-events:none;
animation:confall 1.7s cubic-bezier(.2,.6,.4,1) forwards; opacity:0; }
@keyframes confall {
0% { opacity:1; transform:translate(0,0) rotate(0); }
35% { opacity:1; transform:translate(calc(var(--dx) * .6), var(--dy)) rotate(calc(var(--rot) * .5)); }
100% { opacity:0; transform:translate(var(--dx), 360px) rotate(var(--rot)); }
}
/* ---- Step 14: Meetings page ---- */
.secthead { font-family:var(--mono); font-size:12.5px; letter-spacing:2px; color:var(--dim); font-weight:700;
text-transform:uppercase; margin:20px 0 10px; }
h2 + .secthead { margin-top:12px; }
.meetcard { background:var(--bg-deep); border:1px solid var(--line); border-radius:var(--r-md);
padding:14px 18px; margin-bottom:10px; }
.mchead { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mcname { font-family:var(--disp); font-size:18px; font-weight:800; }
.mcchips { display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:8px; }
.mcchip { display:inline-flex; align-items:center; gap:6px; }
.mcchair { font-size:13px; color:var(--dim); margin-top:8px; display:flex; align-items:center; gap:8px; }
.mcchair b { color:var(--text); }
.mcmvp { font-size:13px; color:var(--text); margin-top:8px; font-weight:600; }
.mcunsub { margin-top:6px; }
/* `min-height` measured, not guessed [2026-08-15, Teacher Meetings audit]: with `padding:0` the
button's box is just the 11px dot plus a 13px `.dim small` label, which rendered **117 x 20.1px**
in Chromium on class 600's in-progress retro โ under WCAG 2.2 SC 2.5.8's 24x24 (AA). Same fix and
same reasoning as `.bubx` and `.card-edit` above: the glyph and the label are untouched, only the
hit box grows, and `.mcchip`'s own `align-items:center` keeps the contents where they already were. */
.attdot { background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; min-height:24px; }
.attdot:hover .trk2 { outline:2px solid var(--line); outline-offset:1px; }
.attdlg { max-width:380px; }
.attdlg h3 { margin:0 0 12px; }
.attrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); }
.attrow:last-of-type { border-bottom:0; }
.nomrow { display:flex; align-items:center; gap:14px; padding:8px 4px; border-top:1px solid var(--line); }
.nomrow:first-of-type { border-top:0; }
.nomrow .t { flex:0 0 auto; min-width:220px; }
.nomreason { flex:1; }
.nomrow-ok { opacity:.55; }
/* ---- Step 14: teacher Messages / Help Queue ---- */
.fchip { background:var(--panel); appearance:none; -webkit-appearance:none; }
/* DEAD RULES REMOVED 2026-08-14 (Phase 2 audit of teacher/messages.php + teacher/helpqueue.php).
Each was checked against every .php/.js/.html in the repo INCLUDING HTMLSnapshots/ markup, not
just these two pages, and appears in zero class attributes anywhere:
.me-accent / .mr-glow โ the "Me" highlight on the old `Sent to` column, deleted with that
column in ยง4a-i. docs/COMMUNICATION-PAGE-DESIGN-SPEC.md:1584 already asserts `me-accent`
is ABSENT from the body, so the rule outliving the markup was the stale half.
.hqclass / .hqclass:first-of-type โ the per-class grouping header the Help Queue lost when
migration 60 made a block the teacher's and the queue block-scoped.
`.dlgdivider` was checked the same way and KEPT: it is live markup in the blessed
HTMLSnapshots/Meetings-Page-Scenarios/*.html dialogs, so it is a design source, not dead. */
.hqrow { display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.02); border:1px solid var(--line);
border-radius:9px; margin-bottom:7px; padding:10px 14px; }
.hqrow .t { flex:1; min-width:0; }
.hqbadge { flex:0 0 150px; display:flex; justify-content:flex-start; }
.hqacts { flex:0 0 168px; display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.dlgdivider { text-align:center; color:var(--dimmer); letter-spacing:8px; margin:12px 0 4px; font-size:13px; }
/* .hqbadge holds EITHER a `.dcount` class-day counter or the `archived` badge, one per row, in a
fixed 150px slot. Both were sized to their own text (measured live: "Today" 45px, "2 Class Days"
108px, "archived" ~70px), so the column read ragged. One shared min-width, per her standing rule
that badges in one column are all one width and the width comes from min-width. 118px covers the
widest label the counter can produce ("14 Class Days" measures 117px) and still clears the 150px
slot. */
.hqbadge > * { min-width:118px; }
.hqbadge .badge { text-align:center; }
/* ============ Step 14: phone shell (โค640px) ============ */
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
THE THREE-TIER VISIBILITY CONTRACT [MOBILE_BUILD_PLAN ยง1, built 2026-08-25]
The foundational item ยง1 asks for, because "hide a panel that does not fit" and "remove a
feature because you are on a phone" were being made by the SAME 640px block and they are not
the same decision.
TIER 1 ยท SLIMMING, <=640px โ a wide panel that simply does not fit narrow.
`.ph-hide`, `.desk-only-dash`, `.phonehero`, `.phone-only`, `.teachdesk`.
A split-screen desktop user losing the sprint rail is CORRECT.
TIER 2 ยท FEATURE REMOVAL, <=520px โ the feature is gone because this is a phone.
`.desk-only` (hidden on a phone) and `.truephone-only` (only on a phone), below.
Bound to the SAME query as the wall, deliberately: a desktop user in a 600px window
must keep every feature.
TIER 3 ยท THE WALL, <=520px โ unchanged.
๐ด THE DECISION ยง1 ASKS FOR, MADE AND RECORDED: `.phone-only` STAYS ON 640, and tier 2 gets a
NEW `.truephone-only` rather than `.phone-only` being moved down to 520.
Moving it was the tidier-looking option and it is WRONG, checked rather than assumed: its only
real use is dashboard.php's `.phonehero` Manage Leave button, and the desk fallback for that
button (dashboard.php, the `Our Tasks Right Now` panel) is `.desk-only-dash`, which hides at
640. So moving `.phone-only` to 520 would hide BOTH between 521 and 640 and leave Manage Leave
โ a primary phone surface โ completely unreachable in exactly the dead-end band ยง1 warns about.
โ Anyone tempted to unify these two names later: re-read this paragraph first.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.phone-only { display:none !important; }
.truephone-only { display:none !important; }
/* The slim phone bar, its menu button and the drawer scrim exist only below 640 โ see the drawer
block in the 640 media query. Hidden by default so they cost a desktop nothing. */
.phonebar, .phonebar-btn, .navscrim { display:none; }
.phonewall { display:none; }
/* The wall blocks non-phone pages only at true phone widths โ a narrow desktop window
(side-by-side testing, split screens) gets the compact layout, not a locked door.
๐ด AND `pointer:coarse` IS NOW PART OF THAT TEST [2026-08-16, accessibility build 4]. Width alone
could not tell a phone apart from a ZOOMED DESKTOP, and those need opposite answers.
THE BUG IT FIXES, measured rather than assumed: browser zoom shrinks the CSS viewport, so 400%
zoom on a 1280px screen leaves an effective 320px โ under this 520px threshold. A low-vision
student zooming in to read was therefore shown "This page works best on a computer" and LOCKED OUT
of the Board, the Meetings deck and everything else, while sitting at a laptop. That is the exact
opposite of what she needs, and it is a self-inflicted wall rather than a layout limitation.
(Note this never fired for the Windows Magnifier itself, which magnifies after layout and does not
change the CSS viewport at all โ see BUILD_PLAN's research note. This is the browser-zoom path.)
`pointer:coarse` is true when the PRIMARY input is a finger โ a real phone or tablet โ and false
for a mouse-driven desktop no matter how far it is zoomed. A touchscreen laptop with a mouse still
reports `fine`, so it keeps the full site too, which is correct.
โ THIS IS THE ONE ITEM IN THE ACCESSIBILITY PASS THAT CHANGES WHAT SOMEBODY ELSE SEES, so it is
the one with its own test (tests/ui/t_a11y_tips.py ยง3): a real phone viewport must still get
the wall, a zoomed desktop must not, and the nav behind it must stay tappable.
Everything else in that pass is purely additive. */
@media (max-width:520px) and (pointer:coarse) {
/* ๐ด BELOW THE NAV, NOT ABOVE IT [her report 2026-08-29: *"even if and when we get the 'view this
on a browser', the nav should still be accessible to change pages and it isn't."*]. At 1200 the
wall covered the drawer (900), its scrim (880) and the menu button (930), so a walled page was a
dead end: the one thing a student needs there is a way to somewhere else.
โ THE `inert` SCRIPT WAS NEVER THE PROBLEM and is unchanged -- it only touches `main`'s own
children, and the nav is a sibling ``. The nav was reachable the whole time and simply
had a fixed overlay painted on top of it.
โ 780 IS BELOW EVERY LAYER OF THE NAV, counted rather than guessed: the phone bar and its
wordmark (790, and that wordmark is itself a link home), the drawer scrim (880), the drawer
(900) and the menu button (930). Landing between them would leave the button floating alone
over a blank field with its own bar painted out behind it.
โ BELOW THE SCRIM MATTERS TOO: opening the drawer now dims the wall exactly as it dims a page,
so the drawer still reads as being on top of something rather than replacing it.
โ EVERY OTHER LAYER ABOVE 780 WAS CHECKED BEFORE MOVING THIS, because lowering a full-viewport
overlay lets everything in between float on top of it. In this range there are only three
groups and none of them can appear on a walled phone: the bubbles (900/901) are
`display:none` a few rules down in THIS SAME media query, the retro deck and its confetti
(1000-1005) live on meetings.php which is allowlisted and never walled, and the toast rail
(1400) was already above the old 1200. Anything NEW landing between 780 and 1400 has to be
thought about again. */
.phonewall { display:flex; position:fixed; inset:0; z-index:780; background:var(--bg-deep);
align-items:center; justify-content:center; padding:26px; }
/* ---- TIER 2 ยท FEATURE REMOVAL [MOBILE_BUILD_PLAN ยง1] ----
๐ด `and (pointer:coarse)` IS LOAD-BEARING HERE, not copied by habit. Tier 2 means "this feature
is gone BECAUSE you are on a phone", so it must key on actually being a phone โ the same test
the wall makes. Bound to a bare `(max-width:520px)` it would also strip features from a
MOUSE-driven desktop at 400% browser zoom (1280px zoomed = 320px CSS), which is a WCAG 1.4.10
content-loss failure and the precise mistake ยง1 says getting the tier wrong produces.
A touchscreen laptop with a mouse reports `fine` and correctly keeps everything. */
.desk-only { display:none !important; }
.truephone-only { display:block !important; }
/* ---- ยง8 ยท THE BUBBLES ARE REMOVED ON A PHONE [ruled; built 2026-08-25] ----
Her reasoning and ยง8's are the same one: the bubbles are a floating shortcut to Messages and
the help queue, which are exactly the two things the nav now reaches directly AND exactly the
two things a phone renders in reduced form. Keeping them would put a bottom-right control that
opens a FULL-featured panel next to a nav item that opens a stripped one. They also sat on top
of the content โ visible in the 2026-08-24 phone screenshots, where both bubbles overlapped the
Performance Reviews tab.
โ THE NAV BADGES ARE NOT AFFECTED, and ยง8 flags this as the thing not to miss: `bub_help_data()`
and `notif_badge()` feed the sidebar dot as well as the bubbles, and that dot is now the only
surviving signal on a phone. This is CSS-only and touches neither.
โ Tier 2 on purpose: a split-screen desktop keeps its bubbles, because for that user they are
still a genuine shortcut to full-featured panels. */
.bubrow, .bubpanel { display:none !important; }
}
@media (max-width:640px) {
/* global overflow guard */
dialog { max-width:calc(100vw - 20px) !important; min-width:0 !important; width:calc(100vw - 20px); }
.authcard, .authwide { width:auto; max-width:none; margin:0 10px; }
.dlg-lg, .dlg-xl, .dlg-cn { min-width:0 !important; }
html, body { overflow-x:hidden; }
/* ๐ด THE INBOX TABLE WAS BEING CLIPPED, NOT SCROLLED โ REAL CONTENT LOSS [2026-08-16, reflow pass].
`overflow-x:hidden` above is what makes the rest of the page behave at narrow widths, but a
`` sizes to its own content and will not shrink below it. Measured at a 320px viewport
(= 1280px at 400% browser zoom, WCAG 1.4.10's own target): #msgtable rendered 869px wide,
`document.scrollWidth` stayed at 320, `window.scrollTo(500,0)` left scrollX at 0, and the last
data cell sat at right=704 with `visible=false`. So ~550px of the student's own inbox โ the
message body, status, flag and date columns โ was not merely awkward to reach, it was
UNREACHABLE. That is a 1.4.10 failure of the worst kind ("without loss of content"), and it is
worse than the two-directional scrolling 1.4.10 exists to prevent.
Giving the table its own horizontally-scrollable region is the fix W3C explicitly allows: data
tables are named in the two-dimensional-layout exception, and the requirement there is that the
content stays REACHABLE, not that a table become one column. Scoped to this breakpoint, so the
desktop layout everyone else uses is untouched. */
#inboxform { overflow-x:auto; }
/* ๐ด THE HELP-QUEUE ROW RELEASES ITS FIXED FLEX BASES HERE [2026-08-25, the 400%-zoom reflow pass].
`.hqrow` is a nowrap flex row whose children carry HARD bases โ `.qright` is `flex:0 0 232px`,
`.qtime` `flex:0 0 84px`, `.hqbadge` 150px, `.hqacts` 168px. Those cannot shrink, so at a 320px
viewport (1280px at 400% zoom) the row measured 250px wide while `.qright` alone started at
x=322 and ran to 554 โ entirely outside the viewport, and CLIPPED rather than scrolled because
of the `overflow-x:hidden` above, so the claim/resolve buttons were unreachable.
Letting the row wrap and the bases go auto is the whole fix. Scoped to this breakpoint, so the
desktop queue keeps its aligned columns exactly as designed. */
.hqrow { flex-wrap:wrap; }
.hqrow .qright, .hqrow .qtime, .hqbadge, .hqacts { flex:0 1 auto; }
.hqrow .qright { justify-content:flex-start; }
.main, .main-wide { padding:14px 12px 120px; }
/* ๐ด THE SIDEBAR IS NO LONGER A TOP BAR [2026-08-25]. It used to become a sticky horizontal
strip here โ `flex-direction:row`, nav hidden โ and the drawer rules further down now make it
an off-canvas column instead. What survives from that layout is only the two lines below: the
app stops being a two-column grid, and the wordmark shrinks. `.devmode` stays hidden because a
DEV banner is desk furniture. `.nav` and `.spacer` are switched back ON by the drawer block. */
.app { display:block; }
.sidebar .logo { font-size:15px; margin:0; }
.sidebar .devmode { display:none; }
.phone-only { display:block !important; }
/* ---- THE SLIM BAR: a menu button and the wordmark, nothing else ----
Everything that used to crowd this row โ the account block, the switch/settings/logout circles
โ now lives at the BOTTOM OF THE DRAWER, which is where her Slack reference puts it. */
/* ๐ด ABOVE THE DRAWER [her ruling 2026-08-29]. 790 was fine while the menu button floated over the
bar on its own; now the button is INSIDE the bar, and a bar underneath the drawer would take its
own control down with it the moment the drawer opened. 940 clears the drawer (900), its scrim
(880) and the old fixed button (930), so the header stays put and the drawer slides beneath it.
โ THE PHONE WALL IS AT 780 AND STAYS BELOW ALL OF THIS -- see its own note. Raising the bar does
not change that relationship; it only moves the bar past the drawer. */
.phonebar { display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:940;
/* โ 12px ALL ROUND NOW, not 56 on the left. That 56 was a hole reserved for a button that was
`position:fixed` OVER this bar; the button is a flex item in the row since 2026-08-29, so the
reservation would just push it 56px inboard of its own edge. */
padding:10px 12px; background:var(--bg-deep);
border-bottom:1px solid var(--line); min-height:52px; }
/* Mirrors `.logo`'s type deliberately rather than reusing the class โ see the note in ui.php:
`.logo` must stay unique to the sidebar, because selectors app-wide assume it is. */
.pblogo { font-family:var(--disp); font-weight:800; font-size:15px; letter-spacing:1.5px;
color:color-mix(in srgb, var(--brand) 80%, var(--text));
text-decoration:none; white-space:nowrap; display:inline-flex; align-items:baseline;
position:relative; }
/* 44px OF THUMB WITHOUT A TALLER BAR [2026-08-28, the 44px sweep]. The wordmark is a real link to
`/` and measured 148x23 -- a finger's worth of width, half a finger of height. Growing the text
box would push the bar from 52px to 65px and eat that back off every phone screen, so the
target grows and the bar does not: a transparent 44px overlay centred on the link, the same
answer `.qtip-trigger` already uses for a control whose drawn size is the design.
โ Nothing to swallow: the only other thing in this bar is the menu button, which is FIXED at
z-index 930 against the bar's 790 and therefore stays on top of the overlay regardless. */
.pblogo::after { content:''; position:absolute; left:0; right:0; top:50%;
transform:translateY(-50%); height:44px; }
/* โ NO LONGER `position:fixed` [2026-08-29]. It is a flex item in the bar now, and the bar is what
is pinned -- see the note there. It keeps its 44x44 and its own focus ring; what it loses is a
second, independent way of being stuck to the corner. */
.phonebar-btn { display:flex; align-items:center; justify-content:center; flex:none;
/* 44x44, not the 40 it shipped with [2026-08-28]: this is the ONE control that reaches the nav
on a phone, so it is the last one that should be under the floor. It still clears both
neighbours -- 8+44=52 against the drawer's 56px top padding and the bar's 56px left padding,
measured rather than assumed. */
width:44px; height:44px; padding:0; border-radius:10px;
background:var(--panel); border:1px solid var(--line-hi); color:var(--text); cursor:pointer; }
.phonebar-btn:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* The scrim: dims the page so the drawer reads as on top of it, and guarantees a tap target for
"close by tapping the page". `hidden` is toggled in JS, so it costs nothing while closed. */
.navscrim { position:fixed; inset:0; z-index:880; background:rgba(0,0,0,.5); border:0; }
.navscrim[hidden] { display:none; }
/* Stops the PAGE scrolling under an open drawer, which otherwise reads as the drawer slipping. */
body.navlock { overflow:hidden; }
/* ---- THE PHONE NAV [2026-08-24] ----------------------------------------------------------
๐ด THE LINKS WERE ALWAYS HERE. `display:none` on `.nav` above is what made every destination
except Settings and Log out unreachable from a phone โ measured at 360 and 390, all seven
student links present in the DOM and every one of them 0px tall. This reveals the SAME list
rather than rendering a second one, so it lists every desktop item by construction and cannot
drift when an item is added.
`flex-wrap` + `flex-basis:100%` is what drops it BELOW the bar: `.sidebar` is already a flex
ROW at this width, so the nav becomes a full-width third line instead of a fourth item squeezed
between the wordmark and the account circle. No absolute positioning, so it pushes the page
down instead of covering the first thing the student came to read. */
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
THE DRAWER [rebuilt 2026-08-25 to her Slack reference]
Her spec: the PAGE owns the screen; a small icon top-left opens the nav; the nav slides in
OVER the page covering most but not all of the width, so the page still shows at the right
edge and reads as underneath; the account block sits at the BOTTOM of the drawer.
๐ด WHAT THIS REPLACED, AND WHY IT WAS WRONG. The first build made the sidebar a ~200px-tall
top bar (wordmark + account block + three circles) and dropped the nav in UNDERNEATH it as a
wrapped third row. That is not a drawer: it spent a third of a phone screen before any
content, it pushed the page down instead of covering it, and nothing about it implied there
was a page behind. `flex-wrap` and an `order:99` hack were holding it together; both are gone.
The drawer is just the DESKTOP sidebar again โ same column, same order, same account block at
the bottom โ only fixed and translated off-canvas. That is why `.nav` and `.spacer` are simply
switched back on here rather than restyled: reusing the desktop shape is what keeps the drawer
from drifting from it.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.sidebar {
position:fixed; top:0; left:0; bottom:0; z-index:900;
/* min(86vw, 340px): "most of the way, not all" โ the remaining sliver of page is the whole
point of her note, and the 340px cap stops it becoming a full-screen sheet on a big handset. */
width:min(86vw, 340px); height:100dvh; min-height:0; max-height:none;
flex-direction:column; align-items:stretch; gap:0;
/* 56px of top padding, not 16: the menu button is fixed at top:8 left:8 and sits ABOVE the
drawer (z 930 vs 900) so it can also close it โ without this the first nav row renders
underneath it and "Dashboard" is half-covered by the icon. Measured, not guessed. */
padding:56px 0 12px; border-right:1px solid var(--line-hi); border-bottom:0;
background:var(--panel); box-shadow:6px 0 28px -6px rgba(0,0,0,.6);
transform:translateX(-101%); /* -101% so no seam shows at fractional widths */
transition:transform .22s ease;
overflow-y:auto; overscroll-behavior:contain;
}
.sidebar.phonenav-open { transform:translateX(0); }
/* The two things the old top-bar layout switched off, switched back on: the nav IS the drawer,
and the spacer is what pins the account block to the bottom the way it does on desktop. */
.sidebar .nav { display:block; }
.sidebar .spacer { display:block; flex:1 1 auto; }
/* The wordmark lives in the slim bar now, so the drawer's own logo row would be a duplicate. */
.sidebar .logorow { display:none; }
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐ด MY STUDIO'S ROSTER, STACKED [her report 2026-08-29]: *"the new my team page overflows and
looks bad on a mobile device. We need a mobile version of this."*
Four columns of name, track, role and actions cannot fit 390px, and nothing was telling them to
try: `.mtbl` had no phone rules at all, so the Role column simply ran off the right edge and the
longest role ("Lead Programmer") was cut in half.
THE FIX IS THE STANDARD TABLE-TO-CARDS ONE, and it is a TIER 1 layout change: keyed on width
alone, per this stylesheet's own tier rules, because a narrow window needs it for exactly the
same reason a phone does and nothing is being taken away.
โ THE SORT HEADERS GO. They are buttons whose whole purpose is to reorder COLUMNS that no longer
exist as columns, and a stacked list has nothing to sort against visually. A team is one
screenful of people, which is why this costs nothing here and would not be acceptable on a
long table.
โ `display:block` ON A , NOT `display:grid` or a rewrite of the markup. The same rows,
the same cells and the same server-rendered content, so roster.php and team_settings.php both
get this without either of them knowing about it.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
table.mtbl, table.mtbl tbody, table.mtbl tr, table.mtbl td { display:block; width:100%; }
table.mtbl thead { display:none; }
table.mtbl tr { position:relative; padding:12px 0; border-bottom:1px solid var(--line); }
/* ๐ด ROOM FOR THE ACTIONS ONLY WHEN THERE ARE ACTIONS. A flat reservation cost 84px on EVERY row,
including a student's own view where that cell renders empty -- and 84px was exactly enough to
push Track and Role onto separate lines, adding 62px of height to every person on the list to
make room for nothing. Measured: content width 236px against 240px of chips.
`:has()` is already this stylesheet's idiom for the same kind of question (see `.colempty`). */
table.mtbl tr:has(.mtbl-acts > *) { padding-right:76px; }
table.mtbl tr:last-child { border-bottom:0; }
table.mtbl td { padding:4px 0; border:0; }
/* The identity cell keeps its own row shape; the two chips below it line up under the name rather
than under the avatar, so the block reads as one person. */
table.mtbl td:first-child { padding-top:0; }
.mtbl-id { align-items:center; }
/* Track and Role sit side by side on one line, which is what stops a two-person team taking four
screens. `.mtbl-trk` and `.mtbl-role` are inline already, so only their cells need the change. */
table.mtbl td:nth-child(2), table.mtbl td:nth-child(3) { display:inline-block; width:auto;
margin-right:10px; }
table.mtbl td.mtbl-acts {
position:absolute; top:10px; right:0; width:auto; display:flex; align-items:center; gap:2px;
padding:0;
}
/* The dash for "no track" is a column-alignment device; stacked, it is a stray character. */
table.mtbl .mtbl-dash { display:none; }
@media (prefers-reduced-motion:reduce) { .sidebar { transition:none; } }
/* "Ruled": one hairline between rows, none above the first or below the last, so the list reads
as a group rather than as boxes. */
.sidebar.phonenav-open .nav a { display:flex; align-items:center; gap:12px;
padding:13px 18px; margin:0; border-radius:0; border-bottom:1px solid var(--line);
min-height:48px; box-sizing:border-box; }
.sidebar.phonenav-open .nav a:last-child { border-bottom:0; }
/* The desktop rail hides its labels with opacity when collapsed (never display:none, so the link
keeps its accessible name). On a phone the label IS the row, so force it back to full opacity
in case a collapsed preference was saved on this device at a wider width. */
.sidebar.phonenav-open .nav a .lbl { opacity:1; position:static; display:inline;
background:none; border:0; box-shadow:none; padding:0; font-size:15px; white-space:normal; }
.sidebar.phonenav-open .nav a.active { background:var(--panel-hi); }
/* The toggle is the menu button here, so it gets a real 44px thumb target rather than the 30px
glyph the desktop rail can afford with a mouse. */
.sidebar .sbtoggle { min-width:44px; min-height:44px; }
/* Switch / Settings / Log out, at the bottom of the drawer [2026-08-28, the 44px sweep]. 40px on
the desktop rail is a mouse target and stays one; inside the drawer these are three of the
account block's four controls and a thumb has to hit them. Three 44s plus two 10px gaps = 152px
inside a drawer that is min(86vw, 340px) wide, so nothing wraps at 360px either. */
.navcirc { width:44px; height:44px; }
/* ---- THE CHECK-IN CONTROL [2026-08-24] ----
Measured 158x38 at 390px. It is the one control a student taps to check in to a retro from a
phone, and it was under the 44px minimum. Phone-width only: the desktop button is unchanged. */
.attbtn { min-height:44px; padding-top:11px; padding-bottom:11px; }
/* The dialog's own actions, same reason. */
#verifydlg .dialog-actions .btn { min-height:44px; }
#verifydlg input[name=code] { min-height:48px; font-size:17px; letter-spacing:.06em; }
/* the laptop wall. `.pwico` now holds an inline SVG instead of the ๐ป it used to size [2026-08-02,
her call] โ brand-coloured with the same glow the bubbles and the active nav icon get, so it
reads as part of the theme rather than a pasted-in picture. */
.pwcard { text-align:center; max-width:340px; }
.pwico { color:var(--brand); margin-bottom:14px; }
.pwico svg { width:46px; height:46px; display:block; margin:0 auto;
filter:drop-shadow(0 0 7px color-mix(in srgb, var(--brand) 55%, transparent)); }
.pwcard h2 { font-size:22px; justify-content:center; }
.pwcard p { font-size:14.5px; margin:10px 0 20px; }
/* dashboard: hero + slimming */
.phonehero { width:100%; height:52px; font-size:16px; margin:14px 0 4px; }
.ph-hide { display:none !important; }
.grid { grid-template-columns:1fr; gap:12px; }
.span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11,
.span12, .span2h, .span9h { grid-column:1 / -1; }
.railwrap { order:1; }
.railrow { flex-direction:column; }
.pagehead h1 { font-size:24px; }
/* bubbles: full-width panels, big taps. The `.bubrow-trk { display:none }` phone override that
used to head this block is gone 2026-08-02 โ the tracker bubble it hid no longer exists. */
.bubrow { right:12px; bottom:14px; gap:10px; }
.bubpanel { position:fixed; left:10px; right:10px; bottom:calc(14px + var(--bub-size) + 26px); width:auto !important;
max-height:72vh; overflow-y:auto; font-size:15px; }
.bubpanel .bubcard { padding:14px 16px; font-size:15px; }
.bubbig { height:50px; font-size:15.5px; }
.bubpanel .btn-sm { min-height:40px; }
.bubx { font-size:16px; padding:6px 9px; }
/* dialogs: comfortable inputs */
dialog input[type=text], dialog textarea, dialog select { font-size:16px; min-height:44px; }
dialog .btn, dialog .btn-sm { min-height:44px; }
.dialog-actions { flex-wrap:wrap; gap:8px; }
/* deck (walled anyway, belt & suspenders) */
.slidetitle { font-size:30px; }
.slidetitle-xl { font-size:40px; }
.slide { padding:24px 18px 90px; }
}
/* ---- Step 14: goal box header + equal heights + history rows ---- */
.goalbox .label { font-size:12.5px; font-weight:800; letter-spacing:2.2px; }
.goalbox { gap:8px; }
.railrow { align-items:stretch; }
.railrow .goalbox { align-self:stretch; }
.ghrow { display:flex; align-items:flex-start; gap:12px; padding:8px 2px; border-top:1px solid var(--line); }
.ghrow:first-child { border-top:0; }
.ghpill { flex:0 0 130px; display:flex; }
.ghtext { flex:1; font-size:14px; }
/* Rail final-day fix: height-match without crushing the rail's internals.
The old `.railwrap > *` forced every child into a centered flex column, which
collapsed the rail when the alarm state swapped the stats region. Scope the
height-matching to the wrapper itself and let the rail keep its own layout. */
/* ---- Step 14: quiet-absence alert family (both surfaces) ---- */
.wipwarn.quietabs { background:var(--info-soft); border-color:color-mix(in srgb, var(--info) 35%, transparent);
color:var(--text); }
.wipwarn.quietabs span:last-child { color:var(--dim); }
/* ---- Step 14: teacher dashboard pacing alignment ---- */
.pacecols { display:grid; grid-template-columns:150px 150px 170px; gap:12px; align-items:center;
justify-items:end; margin-left:auto; }
.pacecols .dstrip { justify-content:flex-end; display:inline-flex; flex-wrap:wrap; }
.pacecols .ckpill { display:inline-flex; justify-content:flex-end; }
.pacecols .pacetag { justify-self:end; text-align:right; }
.pacerow + .pacegroup, .pacegroup { margin-top:16px; }
/* ๐ด SAME COLUMN, SAME WIDTH [her standing rule; applied 2026-08-07, Teacher Dashboard audit].
Measured in Chromium before this rule, the three `.pacetag` pills stacked in this one column came
out 158px / 151px / 144px wide ("13 CLASS DAYS BEHIND" / "2 CLASS DAYS BEHIND" / "1 CLASS DAY
BEHIND") โ three different-width filled pills directly above one another. `min-width` rather than
`width`, per the rule, and `100%` resolves against the FIXED grid track above, so every pill in a
column is exactly that column's width and the pair can never be sized by its own text again.
The `.ckpill` column measured equal only by luck: 1/4, 4/4 and 0/4 happen to be the same glyph
count, and a two-digit total would have split it the same way. */
.pacecols .ckpill, .pacecols .pacetag { min-width:100%; text-align:center; justify-content:center; }
/* ๐ด THE THREE FIXED TRACKS ABOVE OVERFLOWED THE PANEL, AND THE PAGE WITH IT [fixed 2026-08-07].
150+150+170 plus two 12px gaps is 494px of fixed px inside `#delivpanel`, which is a `.span6` โ
about a third of the viewport. README ยง6.7 exactly: the window says there is room and the PANEL
does not. Measured in Chromium at class 600 with real pace rows:
1920px window -> panel fits, 9px to spare
1440px window -> .pacecols spills 26-35px past the panel border
1366px window -> spills 63-72px, and the DOCUMENT gains 16px of horizontal scroll
1280px window -> spills 106-115px, document gains 59px of horizontal scroll
1366x768 and 1440x900 are ordinary school-laptop sizes, so this was the common case, not an edge.
A container query, not a media query, for the reason ยง6.7 gives โ and it wraps the row rather than
shrinking the tracks, because shrinking them would just move the overflow inside the pills and
clip her copy instead of the panel. 620px is the measured threshold plus room for a long team
name (the row needs ~566px of content box before the name has to start wrapping). */
#delivpanel { container-type:inline-size; }
@container (max-width:620px) {
.pacerow { flex-wrap:wrap; }
.pacerow .l1 { flex:1 1 100%; }
/* The two badge tracks keep their fixed widths so the same-width rule above still holds in the
wrapped state; only the swatch strip gives up space (it is `flex-wrap:wrap` and can take a
second line). */
.pacecols { margin-left:0; width:100%; grid-template-columns:1fr 150px 170px; }
}
/* ---- Step 14: deliverables rows pin left ---- */
.delrow .t { text-align:left; justify-content:flex-start; }
.delrow-ord .t { text-align:left; }
/* ---- Step 14: swatch grid hardening (join-page oval bug) ---- */
.swatch { width:30px; height:30px; flex:0 0 30px; box-sizing:border-box; display:inline-block; }
.swatch input { position:absolute; opacity:0; width:0; height:0; margin:0; pointer-events:none; }
.swatches { display:flex; flex-wrap:wrap; gap:8px; }
/* ---- Step 14: join customize + theme cards pinned ---- */
.themepick .tswatch { width:100%; height:64px; box-sizing:border-box; overflow:hidden; }
.themepick label { flex:1 1 150px; max-width:210px; min-width:138px; }
.avpick { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; }
.avpick .avopt, .avmorebox { width:72px; box-sizing:border-box; text-align:center; cursor:pointer; }
.avpick .avopt .avatar { margin:0 auto; }
.avpick input { position:absolute; opacity:0; width:0; height:0; }
/* ---- Step 14: final-day red alert tier (halfway nudge stays yellow) ---- */
.wipwarn.wipred { background:var(--red-soft, rgba(255,70,85,.10));
border-color:color-mix(in srgb, var(--red) 55%, transparent); color:var(--red); }
.wipwarn.wipred span:first-child { color:var(--red); }
/* ---- The Dashboard Alerts box is the ONE home for alerts now [2026-08-04, Communication dissolved].
It holds the whole ledger, so it scrolls โ one scrollbar on the list, never a second one on the
panel. `.wipread` is the greyed "already cleared" state brought across from the Notifications
tab's own `.ab-read`, so a cleared alert still reads as cleared in its new home. ---- */
.alertscroll { max-height:340px; overflow-y:auto; overflow-x:hidden; }
/* ---- ๐ด GROUP L, NOTES 6 + 8 + 9: THE ALERT ROW IS THE BANNER NOW [her ruling 2026-08-22] ----
Her note 9, which is the design direction for the whole box: she does NOT like the red/yellow
plates and DOES like the theme-coloured banners that used to sit outside it (*"I like that those
are short, I like the formatting and the colors and I like that the links stand out as a different
color and clickable. I think we should format the dashboard alerts like these but these should be
in the alerts box"*). Note 6 is the same complaint from the other end: the one row that did show up
was *"a red alert with yellow text and it's all underline and its a really long alert too"*.
So `.alertrow` takes the OLD `.flash` banner treatment โ accent-3 tint, a quiet border, ordinary
`--text` body copy โ and the alarm styling is now opt-in via `.wipred`.
โ
RED IS NOT RETIRED, ruled explicitly: theme-coloured by DEFAULT, red KEPT for real urgency. That
narrows what earns red rather than removing it, which is consistent with README ยง5.
โ THE ROWS NO LONGER USE `.wipwarn`, so the amber plate and its `span:first-child` amber glyph rule
no longer reach them. `.wipwarn` itself is untouched and still paints the STUDENT dashboard's rows
and the absences strip โ this is a dashboard-alerts change, not an app-wide one. */
.alertrow {
display:flex; gap:10px; align-items:flex-start;
background:var(--accent-3-soft);
border:1px solid color-mix(in srgb, var(--accent-3) 35%, transparent);
border-radius:var(--r-md); padding:11px 16px; margin:8px 0 0;
color:var(--text); font-size:13.5px; line-height:1.5;
}
/* THE LINK IS THE POINT OF THE ROW โ she named it twice. Brand-mixed rather than raw `--brand` for
the same measured reason `.wipwarn a` carries: raw brand on a tinted row falls under 4.5:1 in six
of fifteen themes. The underline stays, because WCAG 1.4.1 wants a link in a block of text told
apart by something other than colour. */
.alertrow a { color:color-mix(in srgb, var(--brand) 55%, var(--text)); font-weight:600; }
/* ๐ด SEVERITY IS THE GLYPH ONLY [her ruling 2026-08-23, and it is the second pass on this]. The first
pass kept a red PLATE for urgent rows โ red tint, red border โ and she came back with the reason it
still felt wrong: *"we have a dedicated alerts box (already a designated space to look for alerts)
and then ALSO have them colored red, yellow, etc.. and all stacked on top of each other... from a
ui/ux design viewpoint, we have a dedicated alerts box it feels a little weird to have the alerts
screaming inside there."*
She is right, and the box is the reason: a panel headed "Alerts" has already told the reader what
these are, so painting each row in alarm colours is the same information a second time, and when
every row does it the loud ones stop standing out at all.
So EVERY row now wears the same quiet banner above, and urgency is carried by the โ alone โ her own
suggestion (*"maybe only the 'symbol' is red"*), which is also the smallest thing that can still be
spotted at a glance down a column. `app/../index.php` renders that glyph ONLY on a red row, so the
presence of the symbol and its colour say the same thing twice, which is the redundancy WCAG 1.4.1
wants when meaning would otherwise be carried by colour alone. */
.alertrow.wipred span:first-child { color:var(--red); font-weight:700; font-size:15px; line-height:1.2; }
.alertrow.wipread {
background:transparent; border-color:var(--line); color:var(--dim);
}
.alertrow.wipread a { color:var(--dim); }
/* The schedule reminders have no dismiss button, so nothing reserves space on their right. */
.alertrow.schedrow { justify-content:flex-start; }
.wipwarn.wipread { background:transparent; border-color:var(--line); color:var(--dim); }
.wipwarn.wipread span:first-child { color:var(--dimmer); }
.wipwarn.wipread a { color:var(--dim); }
/* ---- ALERT-TABLE S12: the leadership survey's pinned row. Never red โ it is an invitation, not a
warning, so it must stand out without implying anyone did anything wrong (her ruling, and the
reason amber/orange/red stay reserved for warning semantics).
๐ด REVERSED 2026-08-09: was brand-highlighted, now --info โ her list of what belongs on the
per-theme --info token explicitly named "leadership survey" alongside absences/on-call/
halfway, so this moves with the rest of that family rather than staying brand-only. ---- */
.wipwarn.lvpin { background:var(--info-soft);
border-color:color-mix(in srgb, var(--info) 55%, transparent); color:var(--text); }
.wipwarn.lvpin span:first-child { color:var(--info); }
/* ---- Step 14: roster absence pills in a fixed rail column ---- */
.rosterid { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rostertable td:first-child, .roster td:first-child { white-space:nowrap; }
.rosterabs { display:inline-flex; min-width:86px; justify-content:flex-start; margin-left:12px; vertical-align:middle; }
/* ---- Step 14: theme picker subtext ---- */
.tswatch .tsub { display:block; font-style:normal; font-size:10px; color:var(--dimmer); letter-spacing:.3px; margin-top:1px; }
.themepick .tswatch { height:auto; min-height:64px; }
/* ---- Step 14 audit: due-date line on survey cards ---- */
.duedate { color:var(--red); font-weight:700; font-size:13px; margin:3px 0 2px; }
/* ---- Step 14 audit: tracker block labels (dim, small โ studio name leads) ---- */
/* `.trkblk` (the block-name suffix on a tracker row) was deleted here 2026-08-02 with the tracker
bubble โ it was the only thing that ever rendered it. */
/* ---- Step 14 audit: circle buttons + question rows ---- */
.circbtn { width:28px; height:28px; border-radius:50%; border:1.5px solid var(--line-hi); background:var(--panel-hi);
color:var(--text); font-size:17px; font-weight:800; line-height:1; cursor:pointer; display:inline-flex;
align-items:center; justify-content:center; padding:0; flex:0 0 28px; }
/* ๐ด THE GLYPH IS COMPUTED, NOT CHOSEN [2026-08-17, Teacher Teams audit] โ same house method as
`.fielderr` (85%), `.b-red` (70%) and `.b-info` (85%). The "โ" is 17px at weight 800, which is
NORMAL text for WCAG (large-scale needs 18.66px bold), so 4.5:1 applies, and raw `--red` on this
button's own `--red 10% over --panel` fill failed in three themes: bubblegum 4.03, pumpkinspice
4.50, sunsettide 4.50. 84% is the largest `--red` share that clears 4.5:1 in all 15 registered
themes; worst case after is bubblegum 4.52, best arcade 7.76. `--red` itself is untouched.
`.circbtn-add` was measured too and passes on `--green` as-is (worst bubblegum 5.38). */
.circbtn-red { color:color-mix(in srgb, var(--red) 84%, var(--text)); border-color:color-mix(in srgb, var(--red) 55%, transparent);
background:color-mix(in srgb, var(--red) 10%, var(--panel)); }
.circbtn-add { color:var(--green); border-color:color-mix(in srgb, var(--green) 55%, transparent); /* add = green, every theme */
background:color-mix(in srgb, var(--brand) 10%, var(--panel)); }
.circbtn:hover { transform:scale(1.08); }
.rqrow { display:flex; align-items:flex-start; gap:12px; padding:10px 2px; border-top:1px solid var(--line); }
.rqrow:first-of-type { border-top:0; }
.rqrow .t { flex:1; text-align:left; }
/* Company Settings teams list (1j): same raised treatment as .stucard, one box per row. */
/* A caption that LOOKS like a form label but has no control to point at [2026-08-17, Teacher Teams
audit]: the heading over Company Settings' boxed team list, and Team Settings' "Leadership Role"
when every role is taken and the field collapses to a sentence plus a hidden input. Both were bare
``s, which a screen reader announces as an empty label pointing nowhere. Same type treatment
as `label` above, deliberately โ this is only ever an element correction, never a visual one. */
.fieldcap { display:block; margin:var(--sp-4) 0 var(--sp-1); color:var(--dim); font-size:12.5px; font-weight:700; }
.cobox { background:var(--bg-deep); border:1px solid var(--line); border-radius:var(--r-md);
padding:10px 14px; margin-bottom:8px; box-shadow:0 2px 8px -2px rgba(0,0,0,.3); }
.cobox:last-child { margin-bottom:0; }
/* ---- Step 14 audit: leadership wizard option cards ---- */
.lsopts { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.lsopt { display:flex; gap:12px; align-items:flex-start; background:var(--bg-deep); border:1px solid var(--line);
border-radius:var(--r-md); padding:12px 14px; cursor:pointer; font-size:13.5px; line-height:1.5;
font-weight:400; text-transform:none; letter-spacing:0; color:var(--dim); }
.lsopt input { margin-top:3px; flex:0 0 auto; }
.lsopt:hover { border-color:var(--line-hi); }
.lsopt:has(input:checked) { border-color:color-mix(in srgb, var(--brand) 55%, transparent);
background:color-mix(in srgb, var(--brand) 6%, var(--bg-deep)); color:var(--text); }
.lsopt b { color:var(--text); }
/* ---- Step 14 audit: roster action grid (item 50) ---- */
.rosterabs-td { white-space:nowrap; width:96px; }
.rosteracts-td { text-align:right; }
.rosteracts { display:inline-flex; justify-content:flex-end; align-items:center; gap:8px; white-space:nowrap; }
.rosteracts form { margin:0; }
/* ---- Step 14 audit: eight-stat review grid, 4 across, big and even ---- */
.rvstats8 { grid-template-columns:repeat(4, 1fr); }
.rvstats8 .rvstat b { font-size:32px; }
.rvstats8 .rvstat { padding:16px 14px; }
@media (max-width:820px) { .rvstats8 { grid-template-columns:repeat(2, 1fr); } }
/* ---- Step 14 audit: deck timer as a big in-card rectangle (item 56) ---- */
.decktimer-big { position:absolute; top:18px; right:22px; z-index:5;
font-family:var(--mono); font-size:34px; font-weight:800; letter-spacing:2px;
background:var(--panel); border:1.5px solid var(--line-hi); border-radius:var(--r-md);
padding:8px 18px; box-shadow:0 6px 22px rgba(0,0,0,.4); }
.decktimer-big.meetover { color:var(--red); border-color:color-mix(in srgb, var(--red) 60%, transparent);
box-shadow:0 0 18px color-mix(in srgb, var(--red) 30%, transparent); }
.deckbody { position:relative; }
/* ---- Step 14 audit: goal ceremony (item 58) ---- */
.goalcard-metdone { border-color:color-mix(in srgb, var(--green) 60%, transparent);
background:color-mix(in srgb, var(--green) 7%, var(--panel)); }
.goalcard-metdone .gctitle { color:var(--green);
text-shadow:0 0 8px color-mix(in srgb, var(--green) 70%, transparent); }
.goalcard-metnow { border-color:color-mix(in srgb, var(--green) 60%, transparent);
background:color-mix(in srgb, var(--green) 7%, var(--panel)); }
.goalcard-metnow .gctitle, .goalcard-metnow .grevedit { color:var(--green); }
.gbtns { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.gbtn { background:var(--bg-deep); border:1.5px solid var(--line-hi); color:var(--dim);
border-radius:99px; padding:6px 16px; font-size:13px; font-weight:700; cursor:pointer; }
.gbtn:hover { color:var(--text); border-color:var(--dim); }
/* ๐ด `color:var(--brand)` ON A 10% TINT OF ITSELF [fixed 2026-08-15, Teacher Meetings audit] โ the
same colour-on-its-own-tint pattern `.b-info` and `.b-pink` were corrected for. Failed AA in 3 of
16: catalystcats 3.57 (the DEFAULT), ultraviolet 3.39, pumpkinspice 3.31, at 13px/700.
This is the deck's SELECTED state โ the only thing telling the chair which call they just made on
a goal, on a projector โ so an unreadable "on" is a functional failure, not a cosmetic one.
The `.gbtn-met.gbtn-on` twin below already passes in all 16 (it is on `--green`, which is locked).
**76% is COMPUTED, not chosen:** 77% is the literal largest share that clears, but it lands
pumpkinspice on 4.504 โ inside rounding of the bar itself โ so this takes the next step down.
Worst case is now 4.56 (pumpkinspice). */
.gbtn-on { color:color-mix(in srgb, var(--brand) 76%, var(--text));
border-color:color-mix(in srgb, var(--brand) 60%, transparent);
background:color-mix(in srgb, var(--brand) 10%, var(--bg-deep)); }
.gbtn-met.gbtn-on { color:var(--green); border-color:color-mix(in srgb, var(--green) 60%, transparent);
background:color-mix(in srgb, var(--green) 10%, var(--bg-deep)); }
.grevedit, .grevlive { width:100%; margin-top:8px; font-size:15px; }
.goalcard .grevlive { margin-top:0; }
/* ---- Step 14 audit: phone dashboard slims to hero + alerts + bubbles (item 62) ---- */
@media (max-width:640px) {
.desk-only-dash { display:none !important; }
}
/* ---- Teacher settings theme picker: bigger cards, even rows, full width ---- */
.themepick-lg { display:grid; grid-template-columns:repeat(auto-fit, minmax(205px, 1fr)); gap:10px; }
.themepick-lg label { max-width:none; min-width:0; flex:none; }
.themepick-lg .tswatch { height:auto; min-height:72px; padding:12px 14px; }
/* ---- Bug F: uniform rail stacking regardless of block filter ---- */
.railstack { display:flex; flex-direction:column; gap:10px; }
.railstack [data-rail] .sprintrail { margin-top:0; }
/* ---- Bug H: Livewire's colorblind signal remap must WIN the cascade. The universal
signal blocks above pin --green/--red identically across themes; Livewire's entire
purpose is remapping those signals (doctrine exception, ruled 2026-07-17), so its
remap is re-declared here, after everything, at higher specificity. Amber stays
universal โ yellow is colorblind-legible. ---- */
html[data-theme="livewire"] {
/* ยง23 (ruled 2026-07-24): good was #58b0ff, a THIRD blue alongside --brand #43b5ff and
--info #8ad3ff, so "good"/"branded"/"informational" were indistinguishable for everyone.
Now Wong's bluish-green. Chosen over the brighter #00d6a0 because it also separates from
--info on LUMINANCE (greyscale gap 47 vs 13), so it survives deuteranopia, protanopia,
tritanopia AND a projector. Danger stays Wong vermilion; amber stays universal. */
--green:#00b083; --green-soft:rgba(0,176,131,.13); /* good = Wong bluish-green */
--red:#ff5714; --red-soft:rgba(255,87,20,.13); /* bad = hot vermilion (Wong) */
--bad:#ff5714; --bad-soft:rgba(255,87,20,.13);
--navdot-bg:#ff5714;
}
/* ---- Phase 2: RED alert tier (can't-do-this / truly destructive) ---- */
.appdialog .dlgtier-red { background:color-mix(in srgb, var(--red) 10%, var(--bg-deep));
border-color:color-mix(in srgb, var(--red) 50%, transparent); }
.dlgtier-red { background:var(--red-soft); border:1px solid color-mix(in srgb, var(--red) 40%, transparent);
border-radius:var(--r-sm); padding:10px 12px; }
/* ---- Deck pass 2: new-goal cards, glowy add, next-meeting cards ---- */
/* ๐ด `color:var(--ink)` WAS A TOKEN THAT DOES NOT EXIST [fixed 2026-08-15, Teacher Meetings audit].
`grep -rn -- '--ink\s*:'` over the whole repo returns nothing; the app's near-black button ink is
`--brand-ink`, which is a different thing. An unresolvable `var()` makes the declaration invalid
at computed-value time, so `color` fell back to `inherit` โ which on a `.goalcard` inside `.deck`
happens to resolve to `--text` anyway. Measured in Chromium: `var(--ink)` and `var(--text)` both
computed to rgb(233,238,248) on catalystcats, so naming the real token is byte-identical output
and removes a declaration that silently did nothing (and would have kept doing nothing if anyone
ever tried to change it). */
.ngtext { width:100%; background:transparent; border:none; outline:none; font-size:17px;
color:var(--text); padding:2px 0; }
/* ๐ด THE ONE FOCUS INDICATOR THAT WAS GENUINELY MISSING [2026-08-16, accessibility build 5]. Audited
every `outline:none` in this file: the form-field rule, `.styledsel` and `.joincode-input` all
replace the ring with a brand border plus a 3px halo, which is a legitimate custom indicator. This
one replaced it with NOTHING โ `border:none; outline:none` โ so a focused new-goal field on the
retrospective deck was indistinguishable from an unfocused one. WCAG 2.4.7, and worse than usual
here because the deck is where the chair types, and the magnifier follows the caret to a field she
then cannot confirm she is in. Restored on `:focus-visible` only, so the mouse path is unchanged
and the deck's clean typing surface is kept for everyone else. */
.ngtext:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:3px; }
/* Was hardcoded #fff border/text/glow instead of a theme token [2026-08-15 Meetings design pass].
Reuses `.nav a.active`'s own already-verified 55%-toward-`--text` mix (re-checked directly here
against all 15 registered themes, both `--panel` and `--bg-deep`, comfortable margin in every one)
rather than a fresh, unverified number โ same colour the sidebar's own active icon glows, so this
reads as "the app's accent", not a new one-off. */
.ngaddbtn { margin-top:12px; padding:11px 26px; font-family:var(--disp); font-weight:700;
letter-spacing:1.5px; font-size:14px; color:color-mix(in srgb, var(--brand) 55%, var(--text)); background:transparent; cursor:pointer;
border:1.5px solid color-mix(in srgb, var(--brand) 55%, var(--text)); border-radius:var(--r-md);
box-shadow:0 0 16px color-mix(in srgb, var(--brand) 35%, transparent); }
.nextcards { display:flex; gap:14px; justify-content:center; margin-top:22px; flex-wrap:wrap; }
.nextcard { border:1.5px solid var(--line-hi); border-radius:16px; padding:14px 26px; min-width:200px;
background:color-mix(in srgb, var(--brand) 6%, var(--bg-deep)); }
.nclabel { font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--dim); }
.ncval { font-size:21px; font-weight:700; margin-top:4px; }
/* ---- MVP nominations queue + meetings dormant texts ---- */
.nomqueue { width:100%; margin-top:6px; }
.nomqueue th { text-align:left; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--dim); padding:6px 8px; }
/* ๐ด `middle`, WAS `top` [chat 7a, 2026-09-05]. The name cell is now a two-line block (avatar, name,
studio underneath) through person_line_html(), so top-aligning the other three cells hung the
nominee and the reason off the FIRST line of it and left the verdict buttons floating above
centre. Every cell in the row is now centred against the tallest thing in it, which is the
avatar. Padding went 8px -> 10px 8px with it: the avatar is 30px and 8px made the rows touch. */
.nomqueue td { padding:10px 8px; border-top:1px solid var(--line); vertical-align:middle; }
.nomqueue .mtbl-id { gap:9px; }
.nomnom { font-weight:700; }
.nomacts { text-align:right; white-space:nowrap; }
/* ๐ด ROW, WAS COLUMN [chat 7a]. Her design puts the two verdicts SIDE BY SIDE; stacked, they made
every row two buttons tall, which is the opposite of the "tightened" this queue was asked for. */
.nomacts form { display:flex; flex-direction:row; gap:8px; align-items:center; justify-content:flex-end; }
.mtdate { color:var(--brand); font-size:1.08em; }
/* ---- MVP nominations: REAL TABS, JOINED TO THE PANEL [chat 7a, 2026-09-05] ----
Her approved design, HTMLSnapshots/PROPOSAL-mvp-nomination-text.html: the BAR carries the
dividing line and the ACTIVE tab overlaps it by 1px painting the body colour, so the tab and the
list below read as one surface descending into the list, not a control sitting on a box.
โ A SECOND NAVIGATION PATTERN, AND THAT IS DELIBERATE. The Live Queue / Follow-Ups sub-nav, the
Help Queue filters and the Retrospectives / MVP / Reviews row directly above this very panel
are all `.fchip` pills. She has seen that and chose tabs for THIS surface. Do not convert the
others to match, and do not convert these to pills for consistency.
โ THE APP'S TOKENS, NEVER THE MOCKUP'S HEX. That file approximates the dark theme on purpose, so
the DESIGN was what got judged; eyedropping it would hard-code one theme into a 16-theme app. */
.nomtabs { display:flex; gap:3px; align-items:flex-end; flex-wrap:wrap;
margin:14px -22px 0; padding:11px 22px 0; background:var(--panel-hi);
border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.nomtab { font-family:inherit; font-weight:600; font-size:13.5px; line-height:1.4; color:var(--dim);
background:transparent; cursor:pointer; border:1px solid transparent; border-bottom:0;
border-radius:var(--r-sm) var(--r-sm) 0 0; padding:9px 16px; margin-bottom:-1px; }
.nomtab:hover { color:var(--text); }
/* THE 1px OVERLAP. `margin-bottom:-1px` pulls the tab down over the bar's own border-bottom and
`background:var(--panel)` paints the panel colour across it, so the seam vanishes under the
active tab and only under it. Both halves are required: without the negative margin there is
nothing to paint over, without the matching background the tab paints a stripe of the wrong
colour. `--panel` because that is what the tab body below sits on. */
.nomtab.on { color:var(--brand); background:var(--panel); border-color:var(--line); padding-bottom:10px; }
/* A COUNT, NOT AN ALARM [her explicit note]: brand-coloured, and deliberately NEVER the red the
notification dots use (--navdot-bg). Noticeable without reading as a problem. */
.nomtab-n { display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px;
margin-left:8px; border-radius:999px; background:var(--brand-soft); color:var(--brand);
border:1px solid color-mix(in srgb, var(--brand) 38%, transparent);
font-family:var(--mono); font-weight:600; font-size:11.5px; font-variant-numeric:tabular-nums; }
/* The tab body sits flush under the bar; the panel's own padding is cancelled and re-applied above
so the bar bleeds edge to edge while the list keeps its normal gutters. */
.nomtabbody { padding-top:4px; }
/* ---- THE VERDICT PAIR: a big green check and a red cross, side by side [chat 7a] ----
--green / --red are the app's LOCKED good/bad signal tokens (see the :root,[data-theme] block
that pins them across every theme, and Livewire's deliberate colourblind remap of both). Using
--brand for the approve would have made "good" mean "themed" and broken exactly that. */
.nomv { display:inline-flex; align-items:center; justify-content:center;
width:40px; height:34px; margin:0; padding:0; cursor:pointer;
font-family:inherit; font-size:17px; line-height:1; border:1.5px solid transparent;
border-radius:var(--r-sm); background:transparent; }
.nomv-y { color:var(--green); border-color:color-mix(in srgb, var(--green) 45%, transparent); }
.nomv-y:hover { background:var(--green-soft); border-color:var(--green); }
.nomv-n { color:var(--red); border-color:color-mix(in srgb, var(--red) 45%, transparent); }
.nomv-n:hover { background:var(--red-soft); border-color:var(--red); }
/* โโ MVP ยท THE NOMINATION TEXT TRACKER AND ITS WIZARD [chat 7b, 2026-09-05] โโโโโโโโโโโโโโโโโโโโโ
Her approved design, HTMLSnapshots/PROPOSAL-mvp-nomination-text.html.
โ THE APP'S TOKENS, NEVER THE MOCKUP'S HEX โ that file approximates one dark theme deliberately so
the DESIGN was what got judged, and eyedropping it would hard-code a single theme into a
16-theme app. Two substitutions in particular are not cosmetic: the mockup's `--brand` IS green,
so everywhere it means "good" this uses `--green`, the app's LOCKED good/bad signal token (see
the `:root,[data-theme]` block that pins --green/--red across every theme and Livewire's
colourblind remap of both). Using --brand would make "approved" mean "themed" and turn the
approved chip pink on the default theme. Same reasoning as the verdict pair directly above. */
/* THE THIRD BUTTON STATE. `.btn-ghost` is the app's existing quiet outline and it paints its label
`--dim` -- which is exactly the grey she rejected: her note on the mockup is that grey read as
DISABLED, and all three tracker states are live actions. This is `.btn-ghost`'s geometry with a
`--text` label, which is what the mockup's own `.btn-neutral` is. Named generally because it is a
general answer (an outline button that is not quiet), but introduced by this design.
โ IT ALSO HAD TO BE ADDED TO THE PER-THEME EXCLUSION LIST beside `.btn` (search
`data-theme="catalystcats"` above). `[data-theme="โฆ"] .btn` is specificity (0,2,0) and this is
(0,1,0), so without that line catalystcats painted this button brand-orange under a `--text`
label. That block's own comment already records the same thing happening to `.btn-ghost`, twice.
A FIFTH transparent variant will need the same, and will look fine on 14 of 15 themes. */
.btn-neutral { background:transparent; color:var(--text); border-color:var(--line-hi); }
.btn-neutral:hover { border-color:var(--dim); background:var(--panel-hi); }
.mvptrk { margin-top:6px; }
/* ๐ด THE ACTION COLUMN IS A FIXED TRACK, AND THAT IS THE WHOLE REASON THIS IS A GRID. With `auto` it
shrinks to fit a shorter label ("Resume Finalizing" vs "Finalize Nominations" vs a Finalized
pill), which lets the first two columns grow and knocks the stat chips out of line row to row.
The chips are the thing that must align, so the button gets a fixed track and its label length
stops mattering. */
.mvprow { display:grid; grid-template-columns:minmax(170px,1fr) max-content 186px; gap:20px;
align-items:center; padding:14px 8px; border-top:1px solid var(--line); }
.mvprow:first-child { border-top:0; }
/* โ `!important`, AND IT IS REQUIRED. `display:grid` above beats the UA's own `[hidden]{display:none}`
on specificity, so a finalized row would render even while hidden. The mockup file carries this
exact warning about its own `.row`; it is not a stylistic flourish. */
.mvprow[hidden] { display:none !important; }
/* A FINALIZED ROW KEEPS ITS CHIPS, DIMMED [ยง13 item 3's recorded default]. Dimming the row rather
than rebuilding it is what lets the columns still line up with the live rows above. */
.mvprow-done { opacity:.62; }
.mvpwho { display:flex; align-items:center; min-width:0; }
.mvpname { font-weight:600; font-size:15px; line-height:1.25; }
.mvpmeta { font-family:var(--mono); font-size:11.5px; color:var(--dimmer); }
/* ๐ด THREE FIXED SLOTS, PACKED LEFT โ SHE ASKED FOR THIS SPECIFICALLY. Every chip is exactly one
slot wide, so the first chip on every row starts at the same x, the second at the same x and the
third at the same x, even when slot 2 holds "pending" on one row and "missing" on the next.
`repeat(3, 108px)` rather than auto-fit: a row with one chip must still leave slots 2 and 3 empty
at their own x positions, or a complete team's single green figure would slide under the next
row's amber one. Zero counts render no element at all [her "zeros hidden" decision], which is what
makes a finished team read as one number. */
.mvpstats { display:grid; grid-template-columns:repeat(3,108px); gap:9px; align-items:center; }
.mvpstat { width:100%; align-items:baseline; gap:6px; padding:5px 10px; border-radius:var(--r-sm);
border:1px solid var(--line-hi); background:var(--panel-hi); cursor:default; }
.mvpstat b { font-family:var(--mono); font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; }
.mvpstat > span:not(.htiptext) { font-size:12px; color:var(--dim); }
.mvpstat-ok { border-color:color-mix(in srgb, var(--green) 42%, transparent); background:var(--green-soft); }
.mvpstat-ok b { color:var(--green); }
.mvpstat-pend { border-color:color-mix(in srgb, var(--amber) 42%, transparent); background:var(--amber-soft); }
.mvpstat-pend b { color:var(--amber); }
.mvpstat-miss { border-color:color-mix(in srgb, var(--red) 42%, transparent); background:var(--red-soft); }
/* `--red` mixed 70% toward `--text`, the same lift `.b-red` uses and for the same measured reason:
raw --red on --red-soft misses AA in several themes. The border and plate keep the raw token. */
.mvpstat-miss b { color:color-mix(in srgb, var(--red) 70%, var(--text)); }
.mvpact { display:flex; justify-content:flex-end; }
.mvpact .btn { margin-top:0; white-space:nowrap; }
.mvpdone { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
color:var(--dimmer); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }
.mvpreveal { margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.mvpreveal .btn { margin-top:0; }
/* ---- the wizard ---- */
.mvpwiz { width:min(920px, calc(100vw - 32px)); max-width:none; padding:0; overflow:hidden;
border:1px solid var(--line-hi); border-radius:var(--r-lg); background:var(--panel); color:var(--text); }
/* Same `[hidden]` trap as `.mvprow` above: `.btn` is `display:inline-flex`, so the footer's
Next / Save and Finish Later / Finalize would all stay visible on every screen without this. */
.mvpwiz [hidden] { display:none !important; }
.mvpwiz-top { display:flex; align-items:center; gap:14px; padding:14px 20px; background:var(--panel-hi);
border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mvpwiz-ttl { font-weight:600; font-size:15px; }
.mvpwiz-saved { font-family:var(--mono); font-size:11px; color:var(--green); letter-spacing:.07em; }
.mvpwiz-saved:not(:empty)::before { content:"\25CF"; margin-right:5px; font-size:8px; vertical-align:middle; }
.mvpwiz-steps { display:flex; gap:5px; margin-left:auto; align-items:center; }
.mvpwiz-step { width:26px; height:4px; border-radius:2px; background:var(--line-hi); }
.mvpwiz-step.on { background:var(--green); }
.mvpwiz-step.did { background:color-mix(in srgb, var(--green) 46%, transparent); }
.mvpwiz-n { font-family:var(--mono); font-size:11.5px; color:var(--dimmer); }
.mvpwiz-x { background:transparent; border:1px solid var(--line-hi); color:var(--dim);
border-radius:var(--r-sm); width:26px; height:26px; cursor:pointer; font-size:12px; line-height:1;
display:grid; place-items:center; font-family:inherit; }
.mvpwiz-x:hover { color:var(--text); border-color:var(--dim); }
.mvpwiz-body { display:grid; grid-template-columns:1fr 1fr; }
.mvpwiz-pane { padding:18px 20px; min-width:0; }
.mvpwiz-pane + .mvpwiz-pane { border-left:1px solid var(--line); }
.mvpwiz-pane h3 { margin:0 0 13px; font-size:12px; font-family:var(--mono); letter-spacing:.13em;
text-transform:uppercase; color:var(--dimmer); font-weight:500; }
.mvpwiz-nominee { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.mvpwiz-nm { font-weight:600; font-size:16px; line-height:1.2; }
.mvpwiz-sub { font-family:var(--mono); font-size:11.5px; color:var(--dimmer); }
.mvpwiz-box { width:100%; min-height:186px; resize:vertical; background:var(--bg); color:var(--text);
border:1px solid var(--line-hi); border-radius:var(--r-md); padding:12px;
font-family:var(--sans); font-size:14px; line-height:1.6; }
/* Capped with a scroll, per her design: a nominee with eight quotes must not push the compose box
off the screen, and the box is the half she is working in. */
.mvpwiz-quotes { display:flex; flex-direction:column; gap:9px; max-height:250px; overflow-y:auto;
padding-right:4px; }
.mvpwiz-quote { background:var(--panel-hi); border:1px solid var(--line); border-radius:var(--r-md);
padding:10px 12px; display:flex; gap:10px; align-items:flex-start; }
.mvpwiz-quote p { margin:0; font-size:13.5px; line-height:1.5; }
.mvpwiz-copy { flex:0 0 auto; background:transparent; border:1px solid var(--line-hi); color:var(--dim);
border-radius:var(--r-sm); width:26px; height:26px; cursor:pointer; font-size:12px; line-height:1;
display:grid; place-items:center; font-family:inherit; }
.mvpwiz-copy:hover { color:var(--text); border-color:var(--dim); }
.mvpwiz-foot { display:flex; align-items:center; gap:9px; padding:13px 20px; border-top:1px solid var(--line);
background:var(--panel-hi); flex-wrap:wrap; }
.mvpwiz-foot .btn, .mvpwiz-foot form { margin-top:0; }
@media (max-width:820px) {
.mvprow { grid-template-columns:1fr; gap:12px; }
.mvpstats { grid-template-columns:repeat(auto-fill,108px); }
.mvpact { justify-content:flex-start; }
.mvpwiz-body { grid-template-columns:1fr; }
.mvpwiz-pane + .mvpwiz-pane { border-left:0; border-top:1px solid var(--line); }
}
/* ---- Help queue block controls + notes header ---- */
/* REMOVED 2026-08-14 (Phase 2 audit), all four verified unused across every .php/.js/.html in the
repo including HTMLSnapshots/ markup:
.hqcontrol โ superseded by `.hqctl` (below) when the Class -> Block two-step went with
migration 60. Nothing has carried this class since.
.hqpill { font-size:13px; padding:5px 12px; letter-spacing:1px } โ a DUPLICATE, dead by
cascade, not by markup: the `.hqpill` rule further down re-declares font-size and padding
with !important and letter-spacing later-wins, so all three of these declarations lost.
Editing this one was a silent no-op, which is the trap worth removing.
.notehead / .appdialog .dlgmsg .notehead โ the Follow-Ups notes-dialog header, superseded by
`.popbody h3` when notes became the `.pop` popup (ยง2c).
.dlghr โ the notes-dialog rule, superseded with it. */
/* ---- Phase 3 polish ---- */
.btn[disabled], .btn-red[disabled] { opacity:.38; filter:grayscale(.7); cursor:not-allowed;
box-shadow:none; }
/* schedule filter pills: breathe above, tuck below (was reversed) */
.boardtool.pillrow-lg { margin-top:22px !important; margin-bottom:4px; }
/* ๐ด THE ROSTER'S PENCIL GUTTER AND COLUMN MIN-WIDTHS ARE GONE [2026-08-28], with the flex row they
propped up. Both were table behaviour hand-built out of flex items:
ยท O12 [her note 1, 2026-08-23, her strongest complaint on that surface]: *"still have the same
problem I had before with the edit pencil being way too far to the left and so much padding
around itโฆ Or maybe the edit pencil needs to live 'off-grid' like to the left of the left edge
of content."* The pencil was taken out of the flow into the row's left gutter so it stopped
acting as a first column.
ยท O13 [her note 6]: *"I like things to line up, like names, usernames, tracks, roles."* Measured
then: names aligned to the pixel, usernames spread 27px, role badges 5px and track chips
130px, because every piece was a flex item starting wherever the last one ended. Each
min-width was the widest measured value plus air.
Both complaints are answered by the roster being an actual table now, and Edit name has moved off
the pencil into the row's โฎ menu. Kept as the record of what those numbers were for, so nobody
re-derives them. `.pencil` itself is untouched and still styled above; it is on three other
surfaces. */
/* theme cards: equal width in every row (student + join) */
.themepick { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); }
.themepick label { width:auto; }
.themepick .tswatch { width:100%; box-sizing:border-box; }
/* theme card labels center even when wrapped (Livewire two-liner) */
.tswatch { text-align:center; }
/* roster actions: fixed columns โ buttons hold their lane whether or not neighbors render */
.rosteracts-cols { display:grid; grid-template-columns:110px 130px 150px; gap:8px; align-items:center; justify-content:end; }
.ract { display:flex; justify-content:flex-start; }
.ract-reset { justify-content:flex-end; }
@media (max-width: 900px) { .rosteracts-cols { grid-template-columns:1fr; justify-items:end; } }
/* tracker chips: one right-aligned rail regardless of name length. Still live โ teacher/classes.php's
Track Submissions uses .trkgrid. The `.trkpanel, .trackerpanel { max-width:520px }` rule that sat
here went 2026-08-02 with the tracker bubble; neither class was ever rendered by any page. */
.trkgrid > :nth-child(even) { justify-self:end; }
/* teacher tier-2 phone dashboard.
โ `.phonedash` / `.pdcard` / `.pdnum` / `.pdlbl` ARE RETIRED [her ruling 2026-08-29]: the four
counter cards are gone and the Alerts box is the phone view. Rules removed rather than left
behind, because a stylesheet full of classes nothing renders is how the last person ends up
styling a card that will never appear. */
@media (max-width: 640px) {
/* ๐ด THE ALERTS BOX IS THE TEACHER'S PHONE DASHBOARD [her ruling 2026-08-29]. `.teachdesk` used to
be hidden whole and four counter cards stood in for it; the cards are gone and this lets exactly
one panel through instead.
โ `:has()` RATHER THAN NTH-CHILD, so the row holding Alerts is found by what it CONTAINS. A
positional rule would silently start hiding the alerts and showing something else the first
time anything on this page is reordered, and it would look like the alerts had stopped working.
โ THREE RULES, IN ORDER: show the wrapper, hide every child of it that does not contain the
panel, then hide the panel's siblings inside the row that does. */
.teachdesk { display:block; }
.teachdesk > *:not(:has(.talerts)) { display:none; }
.teachdesk .grid > *:not(.talerts) { display:none; }
.teachdesk .talerts { grid-column:1 / -1; }
}
/* class wizard: clear question groups โ titles lead, fields hug, groups breathe */
.wizgroup { margin-top:22px; }
.wizgroup:first-child { margin-top:14px; }
.wizq { font-size:15.5px; font-weight:700; display:block; margin-bottom:6px; }
.wizgroup input[type="text"], .wizgroup input[type="date"] { margin-top:2px; }
.lsopts { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.lsopt { padding:9px 11px; }
.wizaside { font-style:italic; font-size:12.5px; color:var(--dimmer); margin:12px 0 0; font-weight:400; }
/* ---- SCREEN 0 of the New Class wizard: two choices, centred, and nothing else ----
[her rulings 2026-08-16, in order: the explanatory copy came out first โ *"the buttons are pretty
clear... We don't need the extra explanation"* โ then *"The buttons should just be centered
vertically and horizontally in the wizard box as well. Decent size as well."*]
โ SCOPED TO THIS SCREEN, deliberately. `.lsopt` is the app's shared option-row (Add Sprints, the
leadership roles, the sub-class delete tiers) and those are LISTS you read down โ left-aligned,
compact, each with a description. This screen is a fork with two answers and no prose, so it gets
its own treatment rather than the shared one growing a variant that leaks everywhere.
THE min-height IS MEASURED, NOT PICKED: the four real steps render at 251 / 215 / 582 / 368px
(Chromium, 560px dialog). At its natural 87px this screen was less than half of the shortest real
step, so the dialog snapped noticeably taller on the first NEXT. 250px puts the PANEL level with
steps 1 and 2. โ Note the DIALOG is still shorter here (377 vs 456 on step 1) because screen 0
also hides the 1-2-3-4 chip row โ measured, not assumed, and left that way: this wizard already
ranges 419-786px across its four steps, so chasing an exact match would mean padding this screen
out with height it has no content for.
BOTH OPTIONS ARE ONE WIDTH, never sized to their own text โ same rule as the badges sharing a
table column. "Start from scratch" is much shorter than "Start from another class", and two
choice buttons of different widths read as different WEIGHTS of choice, which these are not.
โ THE WIDTH LIVES ON THE WRAPPER, NOT ON `.lsopt`. First attempt put `width:min(320px,100%)` on
the options themselves and measured 257px โ because their flex parent is itself a centred flex
ITEM, so it shrink-wraps to its content and `100%` resolved against 257, not against the dialog.
Sizing the wrapper and letting the options fill it is what makes the number mean what it says. */
.acstep0 { display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:12px; min-height:250px; }
.acstep0 .lsopts { width:min(320px, 100%); }
.acstep0 .lsopt { width:100%; box-sizing:border-box; justify-content:center;
align-items:center; gap:10px; padding:18px 20px; font-size:15px; }
.acstep0 .lsopt input { margin-top:0; }
.acstep0 .lsopt b { font-size:15.5px; }
/* The class picker only appears under the second option, and matches its width so the pair and the
thing they reveal read as one stack rather than three different measures. */
.acstep0 .acsrcpick { width:min(320px, 100%); }
.acstep0 .acsrcpick label { margin-top:2px; }
/* Create New Class wizard (#addclass): step strip + Step 3's amber warning + grading-period/block rows */
.wstep { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px;
font-size:12.5px; font-weight:700; border:1px solid var(--line); color:var(--dim); background:var(--panel); }
.wstep.on { border-color:var(--brand); color:color-mix(in srgb, var(--brand) 55%, var(--text)); background:var(--brand-soft); }
.wstep.done { border-color:color-mix(in srgb, var(--green) 55%, transparent); color:var(--green); }
.notice-amber { background:color-mix(in srgb,var(--amber) 12%,transparent); border:1px solid color-mix(in srgb,var(--amber) 40%,transparent);
border-radius:9px; padding:11px 14px; font-size:13.5px; line-height:1.55; color:var(--text); margin:14px 0 4px; }
.gprow { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:nowrap; }
/* ๐ด 150px, NOT 128px [her report 2026-08-27]. At 128 the content box is 128 โ 12 โ 12 โ 2 = 102px,
and `mm/dd/yyyy` at 14.5px (~85px in Chrome) plus the 16px calendar picker indicator needs ~101 --
so the text and the icon collided by design, not by rendering quirk. 150 leaves 124px.
โ A CEILING, not a floor: a .gprow in a narrower container still shrinks to fit, so raising this
cannot overflow a layout that was already tight. */
.gprow input[type=date] { max-width:150px; }
/* The wizard's grading-period row is flex-wrap:nowrap and also carries a label, the word "to" and a
remove button, so widening the inputs inside a 560px dialog would just move the squeeze onto the
label. #addclass gets the room instead.
โ SCOPED TO THE WIZARD ON PURPOSE. Seven dialogs share .dlg-lg (#checkindlg, #holdlg,
#leadertracksdlg, #resubse, #rselfdlg among them) and widening the class would resize all of them.
Worth knowing while reading this: .dlg-lg declares width:min(1080px,94vw) earlier in this file and
is then capped at 560px lower down, so a "large" dialog has always been narrower than its own
declared width. That oddity is deliberately left alone here rather than fixed blind. */
#addclass.dlg-lg { max-width:min(760px, 94vw); }
.gplabel { font-weight:700; font-size:14px; min-width:82px; }
.blkrow { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:nowrap; }
.blkrow input[type=text] { max-width:200px; }
/* ๐ด `.rolesplus` WAS REMOVED HERE 2026-08-24, with the button it styled. O9 deleted the roster's
circle-plus on her ruling (*"the + is removed"*, verified first that the pencil opens the same
dialog), and nothing has rendered the class since โ the rule and its WCAG note outlived their
markup by a day and read as though the control were still on the page. The tap-target assertion
that pointed at it moved to `.member-row .pencil`, and moved again on 2026-08-28 when that
row became a table row
(tests/ui/t_pulse_taptarget.py). */
.badge.b-track { background:transparent; border:1px solid; }
/* GROUP J's drift chip [2026-08-22 copy ruling]. `.badge` is uppercase with 1px letter-spacing by
house convention (POST-MORTEM, PER TRACK, NOT SET); her drift copy is a sentence-case phrase
("No longer an A day"), so this returns just those two properties and changes nothing else โ the
colour, geometry and border all stay `b-amber`'s. The wrapper keeps the chip off the date it
annotates without disturbing `.abpair`'s own min-width alignment. */
/* ๐ด ONE WIDTH FOR BOTH, her standing rule: badges sharing a table column get a min-width and are
never sized to their own text. These two sit in the same Performance Reviews / Due cell, and the
only difference between the two strings is the article ("an A day" / "a B day") โ a 7px gap that is
easy to miss by eye, which is why tests/ui/shot_daytype.py MEASURES them and prints them.
THREE strings can appear here, not two: her 2026-08-23 ruling added the school-day case for a
one-track class (and for any date that stops being a school day at all), and a split class can show
a letter tag beside a school-day tag. Re-measured after the same day's copy revision shortened all
three ("No longer an X" โ "โ Not an X"): "โ Not an A day" 102px, "โ Not a B day" 95px,
"โ Not a school day" 121px. **126px** clears the widest with a little air; the previous 146px was
sized for the older, longer wording and left 25px of dead space once the copy shrank.
`* { box-sizing:border-box }` above means this min-width is the whole tag including its padding.
inline-flex + center is what makes the shorter string sit centred in the shared width rather than
left-aligned with a ragged right edge. */
/* โ `var(--sans)` EXPLICITLY, NOT `inherit`. `inherit` was the first version and it makes the chip's
width depend on whichever cell it lands in: the grading-period dates sit in `td.mono` (monospace)
and the Deliverables list does not, so the same string measured two different widths in the two
places it appears โ which defeats the shared min-width below and made measuring it unreliable.
An explicit family also keeps the chip off the mono look `.badge` has by default. */
/* ๐ด A DRIFT FLAG IS NOT A STATUS BADGE, AND MUST NOT BE ONE IN THE DOM EITHER. The first version of
this reused `.badge b-amber` for style economy, and that was a real mistake: it made a warning
indistinguishable from a STATUS badge to every consumer that reasons about badges in these tables.
Three separate things broke on the gate, none of them cosmetic โ `#gptable .badge` began resolving
to three elements and ABORTED t_classes_schedule on a strict-mode violation; t_classes_fixtures
started counting a drift chip as a PER TRACK badge; and the same suite's "only the current period
wears a CURRENT badge" count went 1 โ 3.
So it gets its own class and restates the geometry it had been borrowing. That is a few more lines
than inheriting `.badge`, and it is the correct trade: the alternative was editing four assertions
in two suites to teach them to ignore it, which would have left the next badge-counting selector to
discover the same collision on its own. Colours are `.b-amber`'s exact values, so it still reads as
the app's amber warning and its contrast is unchanged (t_axe covers it). */
.driftchip {
display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:126px;
font-family:var(--sans); font-size:11px; font-weight:600;
padding:2.5px 8px 2.5px 9px; border-radius:20px; border:1px solid;
color:var(--amber); border-color:color-mix(in srgb, var(--amber) 40%, transparent);
background:var(--amber-soft);
}
.driftwrap { margin-left:8px; }
/* The chip's tip opens DOWNWARD. `.htip .htiptext` defaults to opening upward, which is right for the
controls it was drawn for but wrong here: the first row of the Grading Periods table sits directly
under the table head, so an upward tip was clipped along its top edge (measured on the capture, not
guessed). This is the same collision `dialog .qtiptext` already solves by opening down, so it reuses
that answer rather than adding another JS placer like Group B's qtipPlace(). Both surfaces this chip
appears on (the periods table and the Deliverables list) have room below every row. */
/* โ `.htip.driftwrap`, NOT `.driftwrap`: the base `.htip .htiptext` rule lives ~420 lines BELOW this
one and carries the same specificity (0,2,0), so a plain `.driftwrap .htiptext` loses every property
they both set โ measured, not assumed: `top` appeared to work only because the base rule sets
`bottom` and CSS resolves top-wins when height is auto, while `max-width:220px` and
`white-space:normal` silently kept overriding and the tip went on wrapping onto the row below.
0,3,0 wins wherever the rule happens to sit. */
.htip.driftwrap .htiptext {
bottom:auto; top:calc(100% + 8px);
white-space:nowrap; width:max-content; max-width:none;
}
/* Toasts: bottom-left of the viewport, to the right of the sidebar; hold then fade */
/* ๐ด THE INSTALL OFFER [her ruling 2026-08-29] -- see app/ui.php for how Chrome decides to show it.
Bottom of the screen and out of the way: it is an offer, not an interruption, and the thing it sits
over is a page the student came here to read.
โ It is `hidden` until `beforeinstallprompt` fires, and it has its own `[hidden]` rule because a
class `display` outranks the UA sheet's -- the same trap that had `.reqflag` and `.ci-menu` on
screen when they thought they were hidden. */
.pwabar { position:fixed; left:10px; right:10px; bottom:10px; z-index:1300;
display:flex; align-items:center; gap:12px; padding:12px 14px;
background:var(--panel); border:1px solid var(--line-hi); border-radius:var(--r-lg);
box-shadow:0 8px 30px rgba(0,0,0,.45); font-size:13px; }
.pwabar[hidden] { display:none; }
.pwabar-ico { flex:none; display:flex; }
.pwabar-ico img { border-radius:9px; }
.pwabar-txt { flex:1 1 auto; min-width:0; line-height:1.4; }
.pwabar-txt .dim { font-size:12px; }
.pwabar-acts { flex:none; display:flex; gap:8px; align-items:center; }
.pwabar-acts .btn { margin:0; }
/* Above 640 there is no home screen to add to, so the offer is phone-only. Chrome on a desktop can
install a PWA too, but she asked about phones and a bar across a teacher's laptop is noise. */
@media (min-width:641px) { .pwabar { display:none !important; } }
@media (max-width:400px) {
.pwabar { flex-wrap:wrap; }
.pwabar-acts { width:100%; justify-content:flex-end; }
}
#toastrail { position:fixed; left:calc(224px + 22px); bottom:22px; z-index:1400;
display:flex; flex-direction:column; gap:10px; pointer-events:none; }
.toast { background:var(--panel-hi); border:1px solid var(--line-hi); border-left:3px solid var(--brand);
border-radius:var(--r-md); padding:12px 18px; font-size:14.5px; color:var(--text);
box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(8px);
transition:opacity .25s ease, transform .25s ease; max-width:420px; }
.toast.on { opacity:1; transform:none; }
.toast.fade { transition:opacity 3s ease; opacity:0; }
/* The dismiss control [2026-08-16, accessibility build 2 โ see app/ui.php's toast() for the why].
`pointer-events:auto` on the BUTTON only: #toastrail stays none, so a plain confirmation still
never intercepts a click behind it (a live ruling), while the one thing that has to be clickable
is. Sized to the 24x24 AA tap target the Board audit settled on. */
.toast { display:flex; align-items:flex-start; gap:12px; }
.toastx {
pointer-events:auto; cursor:pointer; flex:none; margin:-2px -6px 0 0;
min-width:24px; min-height:24px; line-height:1;
background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
color:var(--dim); font-size:13px;
}
.toastx:hover { color:var(--text); border-color:var(--line-hi); }
/* #toastrail is pointer-events:none so plain confirmation toasts never intercept clicks behind
them; the help-queue toast carries real buttons, so it opts back in. */
.qtoast { pointer-events:auto; border-left-color:var(--amber); }
@media (max-width:900px) { #toastrail { left:14px; right:14px; } .toast { max-width:none; } }
/* Manage Leave dialog */
.leavesec { border-top:1px solid var(--line); padding:12px 0 10px; }
.leavesec:first-of-type { border-top:0; padding-top:2px; }
.leaveh { margin:0 0 8px; font-family:var(--mono); font-size:12px; letter-spacing:1.5px; color:var(--brand); }
.leaverow { display:flex; gap:10px; align-items:end; flex-wrap:wrap; margin:0; }
.leaveitem { justify-content:space-between; align-items:center; padding:4px 0; }
/* ๐ด THE ATTENDANCE SELECT KEEPS ITS COMPACT SIZE, IN ITS NEW HOME [2026-08-28]. It lives inside the
roster row's โฎ menu now rather than at the end of a flex row, so the `.m-right { flex-wrap:nowrap }`
half of this fix is gone with the row it was fixing. Her original complaint stands and is why the
rest stays: *"Present and Accounted For is really long and makes that box way too long. That drop
down also isn't stylized."* The long option is still "On Time" (HER RULING, O-COPY 2026-08-23) and
`.styledsel` is still what gives it a pill and a chevron -- the sitewide select rule strips the
native caret, so a bare here would have no affordance at all. */
.astatus { padding:6px 8px; font-size:13px; margin:0; }
.astatus.styledsel { padding:6px 34px 6px 12px; font-size:13px; }
/* Step 15: leadership vote report (print-first) */
.lvreport { max-width:900px; }
.lvteam { margin-top:16px; break-inside:avoid; }
.lvq { margin:12px 0 0; }
.lvqt { font-weight:600; margin-bottom:6px; }
.lvbars { display:flex; flex-direction:column; gap:5px; }
.lvbar { display:grid; grid-template-columns:170px 1fr 30px; align-items:center; gap:10px; position:relative; }
.lvname { font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lvfill { height:14px; border-radius:4px; background:color-mix(in srgb, var(--brand) 45%, transparent); min-width:3px; }
.lvtop .lvfill { background:var(--brand); }
.lvtop .lvname { font-weight:700; }
.lvn { font-family:var(--mono); font-size:12.5px; text-align:right; }
.lvtie { font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--amber);
border:1px solid var(--amber); border-radius:4px; padding:1px 5px; margin-left:6px; }
@media print {
.lvreport .panel { border:1px solid #999; box-shadow:none; }
.lvfill { background:#888 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.lvtop .lvfill { background:#333 !important; }
body { background:#fff !important; color:#111; }
}
/* Class switcher rows in the account popup */
.swrow { display:block; width:100%; text-align:left; padding:7px 9px; margin:3px 0 0; font-size:13px;
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--text); cursor:pointer; }
.swrow:hover { border-color:var(--brand); }
.swrow-on { border-color:var(--brand); color:var(--brand); font-weight:700; cursor:default; }
/* The merge search list's CSS (.msearch/.mlist/.mrow/.mrow-name/.mrow-user/.mnone) lived here and was
DELETED 2026-08-03 with the Removal Options rebuild โ the dialog it styled is gone and the merge
step is a plain sitewide `select` now. Nothing else in the app referenced any of those six classes.
(It was also the only user of --accent-dim / --accent / --fg, three variables no theme block in this
file defines, so those rules had already been rendering with invalid values.) */
/* โ `.colorpop` / `.colordot-btn` REMOVED 2026-08-22. They styled the board header's standalone
card-colour dot and its popover, which her I3 note retired: a lone coloured circle sitting in a row
of filters could only be read as a filter. The picker lives inside your own face in the member
avatar row now (`.mempop` / `#memmine`), and the swatch styles it reuses (`.swatches`, `.swatch`)
are shared with Settings and are still very much live โ only these two board-only rules went. */
/* ---------- Manage Leave (redesign): menu -> screen flow ---------- */
.lvscreen { display:none; }
.lvscreen.on { display:block; }
/* The Request Leave From/To pair. These values are exactly what used to sit inline on the div, so
the desktop row is unchanged; the class exists only so the phone rule below can win without
`!important` (an inline style outranks any selector). */
.lvdaterow { display:flex; gap:12px; }
/* ๐ด STACKED ON A PHONE [2026-08-24, MOBILE_BUILD_PLAN ยง5]. Measured before: From and To shared one
row at 150px each (both top:360, at left:39 and left:201). A native date control has to hold
yyyy-mm-dd plus a picker glyph, and 150px is not enough for that on a phone.
โ MEASURING THIS CORRECTLY REQUIRES FILTERING `offsetParent === null`. The Manage Leave dialog
holds a THIRD date input โ `name="day"`, on the sick-call-in screen โ and `.lvscreen` hides the
inactive screens with `display:none`. A check that collects every `input[type=date]` in the
dialog compares From against that hidden one, finds different offsets, and reports the row as
already stacked when it is not. That has happened; the audit for this now asserts exactly two
VISIBLE date inputs before it compares anything. */
@media (max-width:640px) {
.lvdaterow { flex-direction:column; gap:10px; }
}
.lvopt { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left;
background:var(--bg-deep); border:1px solid var(--line-hi); border-radius:var(--r-md);
padding:17px 18px; margin-top:10px; cursor:pointer;
font-family:var(--sans); font-size:16px; font-weight:700; color:var(--text); transition:all .12s; }
.lvopt:hover { border-color:var(--brand); background:var(--brand-soft); color:color-mix(in srgb, var(--brand) 55%, var(--text)); }
.lvchev { color:var(--dim); font-size:22px; line-height:1; }
.lvscreen h4.lvhd { font-family:var(--disp); font-size:18px; font-weight:800; margin:0 0 14px; }
.lvitem { display:flex; align-items:center; justify-content:space-between;
background:var(--bg-deep); border:1px solid var(--line-hi); border-radius:var(--r-md);
padding:13px 16px; margin-top:9px; }
.lvitem .d { font-weight:700; }
/* Approved MVP nominations shown greyed in the Show-approved view.
๐ด WAS `opacity:.55` [fixed 2026-08-15, Teacher Meetings audit]. The Reason cell is ALREADY
`` (teacher/meetings.php:711), so the row multiplied a dimmed colour by a second
dimming factor โ and measured against every theme's own `--panel`, `--dim @55%` came out at
2.54-3.34:1, failing WCAG AA in **16 of 16 themes**. `--text @55%` failed in 4 more (bubblegum
4.10 worst). This is not a value that can be tuned: the search for the largest alpha where all 16
clear 4.5:1 returns 100% โ i.e. any opacity below 1 fails somewhere in this palette, so opacity is
simply the wrong device for de-emphasising text here.
`--dimmer` is the app's existing "quieter than --dim" token and clears AA in all 16 (4.50 worst,
sunsettide). It also lands on EVERY cell in the row, including the `.dim` Reason one, so the row
de-emphasises uniformly instead of compounding โ which is what the opacity was reaching for. */
tr.nomgrey td { color:var(--dimmer); }
/* ๐ด THE AVATAR DIMS WITH THE ROW [chat 7a, 2026-09-05]. The rule above reaches every cell's TEXT,
which is what makes the row de-emphasise uniformly instead of compounding โ but the approved rows
now carry person_line_html(), and its avatar is a coloured bubble rather than text, so it kept
full strength and became the BRIGHTEST thing in a row that is supposed to read as already dealt
with. Caught in the design capture, not by a test.
โ OPACITY IS RIGHT HERE AND WRONG ON THE TEXT, which is not a contradiction of the note above:
that note rejected opacity because dimmed TEXT has to keep clearing 4.5:1 in all 16 themes and
no alpha below 1 does. An avatar carries no such requirement โ the name beside it is the label,
and the bubble is decoration โ so lowering it costs no information. */
tr.nomgrey .avatar { opacity:.5; }
/* ---------- Attendance check-in slide (deck) ---------- */
.codebox { margin:28px auto 0; display:inline-flex; align-items:center;
font-family:var(--mono); font-size:52px; font-weight:700; letter-spacing:6px;
color:color-mix(in srgb, var(--brand) 55%, var(--text)); background:var(--brand-soft);
border:2px solid color-mix(in srgb, var(--brand) 55%, transparent);
border-radius:var(--r-lg); padding:20px 40px; box-shadow:var(--shadow-2); }
.codehint { font-family:var(--mono); font-size:12px; letter-spacing:2px; color:var(--dimmer);
text-transform:uppercase; margin-top:16px; }
@media (max-width:820px) { .codebox { font-size:38px; letter-spacing:4px; padding:16px 26px; } }
/* ---------- Meetings page: state pills, glow buttons, retro card, review rows ---------- */
.statepill { font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:7px 16px; border-radius:20px; border:1px solid; }
/* ๐ด SAME-WIDTH RULE APPLIED TO THE RETRO STATUS COLUMN [her standing rule of 2026-08-02, extended
here 2026-08-15 during the Teacher Meetings audit]. Every `` in the retro list ends with
one of these four pills at the same right edge, so they ARE a column in her sense โ and measured
in Chromium they were ragged by 36px: Complete 106, Skipped 97, In Progress 133, Not Started 133,
with `min-width` computing to `auto`. The width is the LONGEST label in the set (11 characters,
IN PROGRESS / NOT STARTED = 133px), same derivation as `.rrow .badge, .revstat`'s own 104px, and
`min-width` rather than `width` so a longer label would still grow rather than overflow.
`display:inline-block` is load-bearing, not decoration: `min-width` does not apply to a
non-replaced inline element, and `.statepill` is a bare ``.
โ SCOPED TO THIS LIST ON PURPOSE, not put on `.statepill` itself. The student Meetings page
(public/meetings.php:313/439/448/486-490) also stacks statepills down one edge and has the same
raggedness, but its label set includes longer strings, so one shared number cannot be derived
from this page's four. Same reasoning as `.card-edit` being scoped rather than `.pencil`. That
page's own set is flagged for its own audit rather than guessed at from here. */
.mtscroll-retro .statepill { min-width:133px; text-align:center; display:inline-block; }
/* THE STUDENT SIDE'S OWN VERSION, flagged above as needing its own number [built 2026-08-15]. This
page's three pill sites (MVP nomination, retro attendance, self-eval) don't share a single parent
the way the teacher list's rows do (two live under `#tab-retro`, one under `#tab-reviews`), so a
marker class on each `` โ same idea as `.sp-*` doing the same job for colour โ rather than a
scoped-ancestor selector. Longest of its 11 possible labels, measured in Chromium exactly like the
teacher column was: "NOT SUBMITTED" at 148.75px. 152px gives it the same few pixels of margin the
teacher column's 133px carries over its own 131.09px measured longest. */
.mtg-statepill { min-width:152px; text-align:center; display:inline-block; }
.sp-red { color:var(--red); border-color:color-mix(in srgb, var(--red) 45%, transparent); background:var(--red-soft); }
.sp-yellow { color:var(--amber); border-color:color-mix(in srgb, var(--amber) 45%, transparent); background:var(--amber-soft); }
/* ๐ด `.sp-green` MOVED OFF `--accent-3` ONTO THE LOCKED `--green` [her ruling 2026-08-15: *"If it's
supposed to be green then make it green (or whatever it is in the color blind one)."*].
`--accent-3` is a DECORATIVE per-theme token, so the "Complete" pill was not green in most themes:
catalystcats (the default) resolves it to #d9925c, burnt orange; overclock to #f5a800. Measured in
OKLab against `--amber` โ the "In Progress" pill sitting in the SAME 133px column โ `--accent-3`
fell below the app's own dE >= 0.20 "must not be confusable" bar in 11 of 16 themes: overclock
0.050, summersorbet 0.079, pumpkinspice 0.101, catalystcats 0.110 (which is also 0.108 from
`--red`). So the done pill, the warning pill and the danger pill were near-indistinguishable in the
shipped default, and an orange "Complete" also read against the reserved-palette rule.
`--green` is the LOCKED semantic token (`:root, [data-theme]` further up), which is why this also
answers the colourblind half of her ruling for free: livewire overrides `--green` to Wong bluish-
green #00b083, so the pill follows that theme's own accessible palette with no second rule here.
`.b-green` was already re-pointed this way; `.sp-green` was simply missed at the time. */
.sp-green { color:var(--green); border-color:color-mix(in srgb, var(--green) 45%, transparent); background:var(--green-soft); }
.sp-dim { color:var(--dim); border-color:var(--line-hi); background:rgba(255,255,255,.03); }
.glowbtn { box-shadow:0 0 0 3px var(--brand-soft), 0 2px 14px color-mix(in srgb, var(--brand) 45%, transparent); }
.bignext { font-family:var(--disp); font-size:15px; line-height:1.6; }
.bignext .date { color:var(--brand); font-weight:700; font-size:17px; }
/* THE CEREMONY DUE / CLOSES LINE โ variant B [placement chosen 2026-08-02, colours FINAL 2026-08-02,
built 2026-08-03]. Markup shape comes from HTMLSnapshots/PROPOSAL-close-date-placement.html
(variant B) and the reviews twin PROPOSAL-reviews-close-date.html; the COLOURS come from her later
prose ruling, which the mockups predate. Where the two disagree, prose wins on behaviour/colour and
the snapshot wins on structure, per AI-INSTRUCTIONS.
`Closes` IS RED FROM THE START and never changes โ her call: *"closes needs to be red from the start
to scream at you as the final date to not pass ... Both starting neutral feels too neutral."* The
close date is a fixed fact that never becomes less important, and while the ceremony is on time it is
the ONLY coloured thing on the line, so the "an always-on alarm says nothing" concern does not apply
(that is about a whole lit-up line, not one anchor element).
`Due` IS NEUTRAL, TURNING AMBER ONCE LATE โ one boolean (`today > due`) drives it, and that is the
escalation the earlier all-neutral draft was reaching for: when a ceremony goes late the line visibly
worsens instead of looking the same as an on-time one.
๐ด NEUTRAL HERE MEANS --text, NOT --brand, so these deliberately override .bignext .date above. A
brand-coloured Due date was requested ("something fun") and ruled out for a MEANING collision, not
an aesthetic one: across the 16 themes' --brand, three are green (reads as done/all-good next to a
red cliff), one is yellow (indistinguishable from amber) and one is literally red (Due and Closes
would render identically and the whole distinction disappears). --amber/--red are the right vars
because they are per-theme AND carry the colourblind-safe Wong remap, so they adapt while holding one
constant meaning โ exactly the split the design system states.
Same specificity as .bignext .date (two classes), so ORDER is what makes these win. Keep them after. */
.bignext .cddue { color:var(--text); }
.bignext .cddue.late { color:var(--amber); }
.bignext .cdclose { color:var(--red); }
/* The "this one shut early for its own reason" line on the MVP / Self-Evaluation cards. Deliberately
quiet: the statepill above it already shouts CLOSED / LOCKED, and this only says why. Her copy
ruling 2026-08-03 cut the redundant "Closed โ" / "Locked โ" prefix, which removed an em dash too. */
.cdclosed { font-size:13px; color:var(--dimmer); font-style:italic; }
.stucard { background:var(--bg-deep); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; margin-bottom:12px; }
.stuname { font-family:var(--disp); font-size:22px; font-weight:800; }
/* The review overview rows. Bumped 2026-08-02 โ her words: *"that whole review overview table is
small, text-wise."* 15 -> 16px with a little more air, and the status column widened from 130 to
150 so a pill is never the thing being squeezed.
โ APPROVE OR ADJUST: she asked for "bigger", modestly, without numbers โ the exact sizes here and
in the two rules below are mine. */
.rrow { display:grid; grid-template-columns:minmax(150px,1fr) 200px 150px; align-items:center; gap:12px; padding:15px 0; border-top:1px solid var(--line); font-size:16px; }
.rrow:first-child { border-top:0; }
/* THE SINGLE-ROW CASE [her note: *"I hope it's bigger for a student that only has one thing there
and not the whole tracker"*]. A plain member sees exactly ONE row โ their own โ and inheriting a
density chosen for a producer's five-row list left it looking like a stray line rather than the
panel's actual content. `:first-of-type:last-of-type` is the honest test: every div inside this
panel IS an .rrow, so matching both ends means there is genuinely only one. */
.rrow:first-of-type:last-of-type { font-size:17px; padding:6px 0 4px; }
.rrow:first-of-type:last-of-type .badge { font-size:12px; padding:5px 11px 5px 12px; }
/* And the pills inside a multi-row table, which are what she actually pointed at: 10px was reading
as fine print next to the 13px .statepill on the retro card directly above it. */
.rrow .badge { font-size:11px; padding:4px 10px 4px 11px; }
/* ๐ด SAME-WIDTH STATUS PILLS [her rule, 2026-08-02]: *"I always want multi badges in the same table
to be the same width, so fixed width. And if you size the badge to the text, they may not all stay
this way. Only important to ones with multiple in a table/row."* A badge sized to its own text
makes a COLUMN of them ragged โ NOT STARTED, COMPLETE and EXCUSED all different widths down one
edge โ which is the thing being objected to. min-width plus centred text fixes it without
hardcoding a width that a longer label would overflow: the pill grows if it ever has to.
The width is set from the LONGEST label in each set (NOT STARTED / IN PROGRESS, 11 characters).
`.revstat` (the teacher Meetings review rows) already solved this on its own and is folded in here
rather than kept as a second copy of the same three declarations. */
.rrow .badge, .revstat { min-width:104px; text-align:center; display:inline-block; }
/* ๐ด GROUP N, N11: the MVP Nominations CLOSED pill. *"slightly bigger, with more space off the
header"* โ 12px against `.badge`'s default 10px, and 12px of air after the heading text it follows.
Colour comes from `b-red` on the element; only size and spacing are here, so it still reads as the
app's red badge rather than becoming a one-off. Deliberately NOT given the 104px min-width above:
that rule exists so the review-row status badges share a column, and this one stands alone next to
a heading, where a fixed width would just add a gap. */
.badge.mvpclosed { font-size:12px; margin-left:12px; vertical-align:2px; }
/* ๐ด GROUP N, N1 ยท the Meetings Block picker row: label BESIDE the control [her ruling 2026-08-23].
`label { display:block; margin:16px 0 4px }` (the caption-above-input default) was stacking it, and
the inline `margin-right` it carried could not act on a block element. `margin:0` on the label is
what cancels the caption margins; `align-items:center` is what puts the two on one centre line. */
.mtblkrow { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
.mtblkrow label { display:inline-block; margin:0; }
.rrow:first-of-type:last-of-type .badge { min-width:114px; } /* 12px text needs the extra 10px */
.revbtn { min-width:100px; }
/* ---------- N9 ยท the merged Performance Review list [her redesign, built 2026-08-23] ----------
One list per team accordion: her reviewees, a rule, then the other students. Replaces a flat list
sitting above an `hr` with a second `` for everyone else. The row itself is the same flex
shape the old markup carried inline; it moves here because there is now ONE renderer producing it
instead of two copies. */
.rvrow { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.rvname { flex:1; display:flex; flex-direction:column; gap:2px; }
/* Her per-row note: *"Reviewer: You" highlighted for theirs, "Reviewer: Bob" for the rest.* Under
the name rather than beside it, so the name stays the thing you scan down the column and the
note never pushes the status pill out of its shared right edge. */
.rvrev { font-size:12px; color:var(--dimmer); }
.rvrev-you { color:var(--brand); font-weight:600; }
/* Her rule between the two groups. Deliberately not `` like every other block filter in the app, and this markup has no
remaining user. Checked before deleting: zero `fdd` references in any `.php` or `.js` outside the
replacement's own explanatory comment. (The blessed Meetings snapshots still contain `.fdd`
markup, but each snapshot inlines its own CSS, so removing it here cannot affect them โ the same
reasoning that kept `.dlgdivider` alive in the 2026-08-14 sweep applies in reverse.) */
/* ๐ด N6 ยท `overflow:hidden` IS GONE, AND IT WAS THE CAUSE OF BOTH N5's AND N6's SYMPTOM
[her notes, fixed 2026-08-23]. She reported *"an invisible hover on the reviewee names"* clipped
inside the top of the accordion, and separately that N5's disabled-Review tooltip was cut off by
the accordion's right edge. One rule did both: `.htip .htiptext` renders at
`bottom:calc(100% + 8px)`, i.e. ABOVE its trigger, so a tooltip on anything in a summary row is
drawn above the top edge of the very box that was clipping it. Her call was *"remove it; if it
stays, it has to render outside the box"* โ this makes every tooltip in every accordion render
outside the box, app-wide, rather than fixing the two she happened to land on.
WHAT THE CLIPPING WAS FOR: `border-radius` on a box whose children could paint into the corners.
Nothing here does โ `.acc` carries the only background, `summary` and `.accbody` are transparent โ
so the radius holds on its own. `.acc>summary` takes the matching top radius anyway, so a future
hover or drag background cannot square off the corner and reintroduce the reason for the clip.
โ If something ever DOES need clipping here, clip that child, not the accordion. */
.acc{background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:10px}
.acc>summary{border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0}
.acc:not([open])>summary{border-radius:calc(var(--r-md) - 1px)}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::before{content:"\25B8";color:var(--dim);font-size:18px;line-height:1;transition:transform .15s;display:inline-block;flex-shrink:0}
.acc[open]>summary::before{transform:rotate(90deg)}
.accbody{padding:2px 18px 16px 44px}
.amberbtn{background:var(--amber)!important;border-color:var(--amber)!important;color:#241a05!important}
.pillbtn{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 15px;border-radius:20px;border:1px solid var(--brand);background:var(--brand);color:var(--brand-ink);cursor:pointer;transition:filter .15s}
.pillbtn:hover{filter:brightness(1.1)}
/* `.revstat`'s own standalone rule lived here; it is now part of the shared same-width-badges rule
in the Meetings block above [2026-08-02]. Kept as a pointer rather than a second copy. */
/* ===== Communication hub (P3) โ blessed design 2026-07-22 ===== */
.commsec h2{font-size:22px !important;margin:0 0 12px !important}
.styledsel{appearance:none;-webkit-appearance:none;width:auto;font:600 13px var(--sans);color:var(--text);
background:var(--panel);border:1px solid var(--brand);border-radius:20px;padding:7px 38px 7px 15px;cursor:pointer;
box-shadow:0 0 0 3px var(--brand-soft),0 0 11px -2px color-mix(in srgb,var(--brand) 45%,transparent);
/* ๐ด N2 / O18 ยท THE FILTER PILLS HAD THE SMALLER, CRUDER ARROW OF THE TWO, and these are the
dropdowns she looks at most (the Block pickers on Dashboard, Meetings and Teams). Three things
were wrong with it and only one was size:
ยท 12px against the base select's 13, so the MORE prominent control had the SMALLER glyph;
ยท a second hardcoded grey, `#bbb`, where the base select uses `#b8bdc9` โ the same glyph in two
colours depending on which rule won;
ยท no `stroke-linecap`/`stroke-linejoin`, so its ends were square while every other icon in the
app is round. That is most of why it read as cruder rather than merely smaller.
Now 16px, the same `#b8bdc9`, the same round stroke language, and `stroke-width` 2.5 to match.
Measured on `--panel` in all 15 themes: 5.87:1 worst case (bubblegum), past the 3:1 floor. */
background-image:url("data:image/svg+xml;utf8,` nested inside the `.qtip`
circle (`.qtip` is the wrapper span, not the trigger itself), so with no rule of its own it fell
back to the bare UA button: light grey fill, a 2px black OUTSET (3D-bevel) border, square corners,
Arial, black text โ rendered live and measured, not assumed: 23x21px poking out of its own 20x20
circular parent. Same failure shape as `.esterr`/`.tag.tie` โ an unstyled class silently degrading
to a browser default โ except this one sits on **29 sites app-wide**, every "?" tooltip trigger the
app has, not one page. Reset explicitly (matching this file's own convention elsewhere, e.g.
`.addbtn`) rather than `all:unset`, which has no precedent here; sized to fill the parent circle
exactly, everything else inherited from `.qtip` so the two stay visually one component. */
/* ๐ด 24x24 POINTER TARGET WITHOUT RESIZING THE CIRCLE [2026-08-18, Classes design audit]. Measured in
Chromium: the "?" button renders **18x18** (its 20x20 parent less the 1px border each side), which
fails WCAG 2.2 SC 2.5.8 (AA, 24x24) on every page that carries one โ 29 sites app-wide, not just
this one. The repo's earlier answer for `.pencil`/`.card-edit`/`#msgtable .icobtn` was `min-width`/
`min-height`, but those are square icon buttons with no fixed visual diameter; `.qtip` is a drawn
circle whose SIZE is the design, so growing it is a visible app-wide restyle and hers to call, not
an audit's. The transparent overlay below is the other standard answer to 2.5.8: it makes the real
target 24x24 while the painted circle stays 20x20.
โ Safe against swallowing neighbours: the overlay extends 3px past each side, and the tightest
neighbour gap on this page is `.sechead { gap:10px }`. */
.qtip-trigger{background:transparent;border:none;padding:0;margin:0;width:100%;height:100%;
border-radius:50%;font:inherit;color:inherit;cursor:inherit;display:flex;align-items:center;justify-content:center;
position:relative}
.qtip-trigger::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:24px;height:24px;border-radius:50%}
.qtiptext{display:none;position:absolute;top:27px;right:0;z-index:60;width:228px;max-width:min(228px,calc(100vw - 24px));background:var(--panel);
border:1px solid var(--line-hi);border-radius:9px;padding:11px 13px;font:400 12.5px var(--sans);color:var(--text);
line-height:1.5;letter-spacing:0;text-transform:none;box-shadow:0 10px 30px -8px rgba(0,0,0,.65);overflow-wrap:anywhere;word-break:break-word}
.qtip:hover .qtiptext{display:block}
/* ๐ด KEYBOARD PARITY, matching what `.htip` already had [2026-08-16, accessibility build 3]. The "?"
mark is a real on all 29 of these app-wide, so it can take focus โ
but `:hover` was the only trigger, which meant the explanation existed for a mouse and did not
exist for a keyboard. That also made it invisible to a screen-magnifier user, who navigates by
focus and cannot hover precisely at high zoom. `:focus-within` catches the focusable child. */
.qtip:focus-within .qtiptext{display:block}
/* Global tooltip bugs (1w/1y), first hit on the Teams page: white-space is inherited, so
.qtiptext went unreadable-wide inside anything with white-space:nowrap (e.g. th.sortable). */
.qtiptext{white-space:normal}
/* .qtiptext anchors right:0 so it opens leftward; a header cell can clip it entirely unless the
cell itself allows overflow. Table-specific, not global โ clipping elsewhere is intentional. */
#allcos th, #allteams th{overflow:visible}
/* Inside a dialog the mark can sit on either side of its label, so anchoring to the mark itself
always risks running off one edge or the other. Anchor to the label instead โ it spans the
dialog's own content width, so the bubble can't overflow past it in either direction. */
dialog label{position:relative}
dialog .qtip{position:static}
/* .htip โ the site-styled hover popup for elements that are NOT a dedicated "?" trigger (colored
status dots/swatches, disabled-button reasons): same box chrome as .qtiptext, but wraps whatever
content is already there instead of imposing the qtip circle, and anchors centered above it
rather than qtip's below-right (these sit inline in rows/tables, where anchoring below risks
clipping under the next row). ยง2473: replaces native title= everywhere a native browser tooltip
was standing in for real UI (Windows-default hover box), never used alongside one. */
.htip{position:relative;display:inline-flex;vertical-align:middle}
.htip .htiptext{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
z-index:60;width:max-content;max-width:min(220px,calc(100vw - 24px));background:var(--panel);
border:1px solid var(--line-hi);border-radius:9px;padding:9px 11px;font:400 12.5px var(--sans);color:var(--text);
line-height:1.4;letter-spacing:0;text-transform:none;text-align:left;white-space:normal;
box-shadow:0 10px 30px -8px rgba(0,0,0,.65);overflow-wrap:anywhere;word-break:break-word}
.htip:hover .htiptext{display:block}
/* KEYBOARD PARITY [added 2026-08-07, Teacher Dashboard audit]. `:hover` was the only trigger, so every
`.htip` that IS focusable (the disabled-button reasons this component was also written for) showed
its popup to a mouse and nothing to a keyboard. `:focus-within` covers a focusable child, so both
shapes are handled. Note this does NOT rescue the Deliverables Overview swatch strip, which is a
non-focusable โ that one carries `role="img"` + `aria-label` on the swatch itself instead
(teacher/index.php), because making 4-16 decorative squares per row into tab stops would be worse
than the problem. */
.htip:focus-visible .htiptext,.htip:focus-within .htiptext{display:block}
/* ๐ด DISMISSABLE WITH ESCAPE โ WCAG 1.4.13 [2026-08-16, accessibility build 3]. Content shown on
hover or focus must be dismissable WITHOUT moving the pointer or focus away, and neither tooltip
family could be. It matters most at high magnification, where a 228px bubble can cover the very
thing underneath it that she was reading, and where moving the mouse away to clear it means losing
her place. The handler that adds `.tipoff` lives in app/ui.php โ one delegated listener, the same
shared seam the attendance radiogroup keys off, rather than a script per page.
Cleared again on mouseleave/focusout, so a dismissed tip is dismissed for that visit only and the
control still works the next time it is reached. */
.qtip.tipoff .qtiptext,.htip.tipoff .htiptext{display:none !important}
dialog .qtiptext{left:0;right:auto;top:calc(100% + 6px);width:100%;box-sizing:border-box}
/* Flip-on-collision (Snapshot Review Group B3, app/ui.php's qtipPlace()): a row near the bottom of
a dialog's rendered bounds opens its tooltip UPWARD instead, so it never runs off the box. */
dialog .qtiptext.tipflip{top:auto;bottom:calc(100% + 6px)}
/* blessed note 1: bigger, spaced hub tabs (shared with Meetings by design) */
.boardtool.pillrow-lg{margin-top:20px !important;margin-bottom:24px !important;gap:14px}
.pillrow-lg .fchip{font-size:15.5px;padding:11px 26px;border-width:2px}
.msgbox{max-width:520px;border:1px solid var(--line-hi);border-radius:14px;background:var(--panel);
box-shadow:0 24px 70px -14px rgba(0,0,0,.75);padding:22px}
.msgbox h3{margin:0 0 12px;font-size:18px}
.msgbox .rd{font-size:15px;line-height:1.55;color:var(--text);background:var(--bg-deep);border-radius:9px;padding:14px}
/* ---- ยง23 part two: signal glyphs, LIVEWIRE ONLY. Colour alone cannot make a pill
self-describing, and glyphs cannot reach the small coloured dots (.trk2-*, .navdot, .dot) โ
each covers the other's gap. Plain lowercase "i" for info: the circled โ was rejected. ---- */
html[data-theme="livewire"] .badge.b-green::before { content:"\2713\00a0"; } /* check */
html[data-theme="livewire"] .badge.b-red::before { content:"\2715\00a0"; } /* cross */
html[data-theme="livewire"] .badge.b-amber::before { content:"\26a0\00a0"; } /* warning */
html[data-theme="livewire"] .badge.b-info::before { content:"i\00a0"; } /* info */
/* ---- Meetings list scrolling (ยง24 / teacher ruling 2026-07-25) -------------------------------
RETRO LIST: capped, because the MVP Nominations panel sits directly below it in the same tab โ
with 20 teams the approval panel gets pushed off-screen at exactly the moment it is needed, and
its position would move with class size. Companies already collapse 20 teams into a handful of
groups, so the cap is generous.
MVP NOMINATIONS: also capped, overriding the general "do not cap a trailing list" rule. The
teacher's argument wins on scale โ an unattended review day can bring 60 nominations, and at that
length the page itself is the problem, not reachability.
REVIEWS LIST: NOT capped โ it is the only content in its tab and is bounded by class size, so a
sticky header (below) solves scanning without nesting a second scrollbar. ---- */
.mtscroll { overflow-y:auto; padding-right:8px; }
.mtscroll-retro { max-height:min(62vh, 620px); }
.mtscroll-noms { max-height:min(46vh, 460px); }
/* A team that finished DROPS OFF the day after [RULED 2026-07-29]: hidden by default, revealed by
the "Show N completed" checkbox toggling .showdropped onto .mtscroll-retro โ same show/hide-by-
class technique as the Schedule tab's past-sprints/past-grading-periods checkboxes. */
.mtscroll-retro details.acc.mtdropped { display:none; }
.mtscroll-retro.showdropped details.acc.mtdropped { display:block; }
/* Performance Reviews' own drop-off [item 417]: same rule, same technique, but NOT .mtscroll โ this
list is deliberately uncapped (see the comment above), so .revscroll carries no overflow/max-
height, only the show/hide-by-class scoping. */
.revscroll details.acc.mtdropped { display:none; }
.revscroll.showdropped details.acc.mtdropped { display:block; }
/* ๐ด THE BLOCK FILTER'S OWN HIDE CLASS [2026-08-15, her "Meetings should filter by block" ruling].
Deliberately a THIRD independent class rather than a `style.display` write from JS: `.mtdropped`
and `.showdropped` above already share control of these same rows, and a JS inline style would
outrank both and republish completed retros whenever a block was picked. That exact collision
(two filters, one `style.display`) is the Help Queue bug found 2026-08-14. `!important` so it
still wins over `.showdropped`'s `display:block` โ a row the teacher filtered out must stay out
even with "Show N completed" ticked, since the block choice is the narrower intent. */
.mtscroll-retro details.acc.mt-blkhide,
.revscroll details.acc.mt-blkhide { display:none !important; }
/* ๐ด AND THE MVP PANE'S ROWS, WHICH ARE NOT ACCORDIONS [her report 2026-09-08: *"none of the MVP
Nominations are filtering by block"*]. The two rules above are why the filter looked broken on
exactly one of the three panes: they name `details.acc`, and the MVP pane holds a `` of
nominations and a grid of tracker rows. Same class, same `!important`, same reasoning โ the hide
must outrank `.mvprow[hidden]`'s own `!important` in the one case a row is both finalized and
filtered out, and it must not be an inline style that could fight it.
โ `.mvprow` is `display:grid`, so its `!important` is load-bearing here for the same reason its
own `[hidden]` rule documents: without it, `display:grid` wins on specificity. */
.nomqueue tr.mt-blkhide { display:none !important; }
.mvprow.mt-blkhide { display:none !important; }
/* sticky header for the capped nomination table and the (uncapped) reviews table. Same
geometry-preserving technique as the blessed settings header: a transparent border keeps the box
height and the rule is painted as a background gradient, so it cannot double-line or shift 1px. */
.mtscroll-noms table th, .rvtable th {
position:sticky; top:0; z-index:3;
border-bottom:1px solid transparent !important;
background:linear-gradient(to top, color-mix(in srgb, var(--brand) 35%, var(--line-hi)) 1px,
var(--panel) 1px);
}
/* ============================================================================
COMMUNICATION REBUILD โ lifted VERBATIM from blessed/communication-teacher.html's
own override block (2026-07-25), per README-DESIGN-RULINGS Appendix A: "CSS is
verbatim... Do not re-derive values. Several encode a workaround for a specific
browser behaviour, and the comment above each says why."
Two deliberate deviations from a blind paste:
1. The global themed-scrollbar block was REMOVED from this paste โ it is already
merged higher up in this file (BLESSED-VS-LIVE-settings.md ยง3 lists it as
"already merged and must not be duplicated").
2. A few selectors appear TWICE below (.qsechead h3, #ldtable th). That is not a
mistake to tidy: the blessed snapshot carries the same duplicates, later-wins,
and those later values ARE the blessed ones (ยง7k's 20px brand subheader, ยง7j's
13px header padding). Collapsing them by hand risks picking the earlier value.
NOTE on .hqrow.mine: the doc's ยง7a prose says .hqrow "carries only border-top".
That is stale โ it carries a full border here AND in the snapshot. The outline rule
below is still correct: it is appended AFTER the original .hqrow.mine (~line 1864),
which is exactly the cascade the blessed snapshot was approved with. Verified by
diffing the snapshot's own inlined .hqrow against this file's.
============================================================================ */
/* ---- Communication changes, 2026-07-25 ----------------------------------- */
/* Aligned columns. Tag and time hold their slot even when a row has no track, so
the eye can read straight down. */
.qtagcol{flex:0 0 152px;display:flex;justify-content:flex-start}
/* ๐ด THE FIXED COLUMN WAS NOT FIXED [measured live 2026-08-14 on the seed's own rows, not assumed].
`flex:0 0 152px` sets the BASIS; a flex item still defaults to `min-width:auto`, so a row whose
tag column holds more than one thing pushes past the basis and steals the width back from
`.qinfo`. Real numbers off the seeded queue: rows with one tag measured 152px, the row carrying
"Programming" + "1 lead passed" measured 158.2px โ so the `.qtime` column started 6px further
right on that one row and the "eye can read straight down" this column exists for was already
broken by the app's own data.
`min-width:0` is what actually pins the basis; `flex-wrap` is what the content then does instead
of overflowing (stack inside the column, row grows in height); the gap replaces the two tags
previously touching. */
.qtagcol{min-width:0;flex-wrap:wrap;gap:5px;align-content:center}
/* Same column, same width, from min-width โ her standing badge rule. The passed-count badge is the
only badge here whose text length varies with data, and it went singular -> plural at two:
measured max-content: "1 lead passed" 110px, "N leads passed" 117px, "12 leads passed" 124px.
It also must not SHRINK: in the un-wrapped column it was being squeezed to 61px and wrapping its
own text inside the pill, which is how a "fixed" column ended up 158.2px wide. min-width and
flex-shrink:0 hold both ends of that. */
.qtagcol .badge{min-width:124px;text-align:center;flex-shrink:0}
.hqrow .qtime{flex:0 0 84px;text-align:center}
.qwait{flex:0 0 116px;text-align:right}
.hqrow .qright{flex:0 0 232px;display:flex;align-items:center;gap:8px;justify-content:flex-end}
/* Section headers inside the Help Queue panel. These were not reading as headers. */
.qsechead{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.qsechead h3{font-size:19px;margin:0;line-height:1.3}
.qsechead .cnt{font-family:var(--mono);font-size:12px;color:var(--dim)}
.qsechead .qtip{width:19px;height:19px;font-size:11.5px}
.qsechead .qtiptext{left:0;right:auto}
.qsec{margin-top:0;padding-top:24px;border-top:1px solid var(--line)}
/* FIX: `.hqrow` only carries border-top, so setting border-color on .mine left the
box open at the bottom. Give the highlighted row a full border and radius, and
pull the extra pixel back so no row shifts. */
/* The frame is an OUTLINE, not a border. A border on .hqrow (which only carries
border-top) left the box open at the bottom, and compensating with padding shifted
every cell in the row by a pixel, which knocked the claimed pills out of column.
An outline follows border-radius and occupies no layout space at all. */
.hqrow.mine, .hqrow.urgentrow{
border-radius:11px;border-top-color:transparent;
outline:1px solid color-mix(in srgb,var(--red) 55%,transparent);outline-offset:-1px;
box-shadow:0 0 16px -3px color-mix(in srgb,var(--red) 55%,transparent);
position:relative;z-index:1}
/* ACTIVE pill: dark green. b-green maps to --accent-3, which is a soft orange in
CatalystCats, which is why it read as an amber border. */
.hqpill.qactive{color:var(--green) !important;
border-color:color-mix(in srgb,var(--green) 55%,transparent) !important;
background:color-mix(in srgb,var(--green) 20%,transparent) !important}
/* The INACTIVE pill is NOT in the teacher snapshot's own override block, because that snapshot
was rendered with a live queue so the state never appeared. Taken from Appendix A4 #3, which
ships it alongside .qactive, and Appendix G lists it as CSS to add. Without this the closed-
queue empty state (ยง13) renders its INACTIVE pill unstyled. */
/* ๐ด CONTRAST FIX 2026-08-14, measured in a browser across all 16 palettes, not eyeballed.
`--red-soft` is a TRANSLUCENT wash, so this pill's real background was whatever panel sat behind
it โ and on the three themes with a light panel that put `--red` text on a light ground:
bubblegum 3.83:1, pumpkinspice 4.27:1, sunsettide 4.28:1, all under WCAG AA 4.5:1 for 14px text.
The sibling `.qactive` never had the problem because it is already a color-mix that pulls its own
ground. Mixing this one into `--bg-deep` instead of into `transparent` makes the pill carry its
own background rather than inheriting the panel's, keeps the red tint at roughly the strength it
had, and lifts the worst theme to 4.90:1 with every theme passing (max 8.17:1). Verified after
the change on all 16. */
.hqpill.qinactive{color:var(--red) !important;
border-color:color-mix(in srgb,var(--red) 55%,transparent) !important;
background:color-mix(in srgb,var(--red) 16%,var(--bg-deep)) !important}
/* Claimed pill in Being Helped */
/* ๐ด THIS ONE WAS MISSED BY THE 2026-08-14 MESSAGES + HELP QUEUE PAGE AUDIT ITSELF โ found only by
the app-wide sweep afterward, not by that page's own contrast pass. `.cpill` is the base rule (not
a hover/selected state), so it was failing AA on EVERY "Claimed by X" row in Being Helped, in the 7
affected themes, the whole time that page was being reviewed. Same fix as the rest of this sweep. */
.cpill{display:inline-flex;align-items:center;justify-content:center;
min-width:146px;box-sizing:border-box;font-family:var(--mono);font-size:10px;
letter-spacing:1px;text-transform:uppercase;font-weight:600;padding:3px 10px;border-radius:20px;
border:1px solid color-mix(in srgb,var(--accent-2) 40%,transparent);
color:color-mix(in srgb, var(--accent-2) 55%, var(--text));background:var(--accent-2-soft);white-space:nowrap}
.cpill.urgent{color:var(--red);border-color:color-mix(in srgb,var(--red) 65%,transparent);
box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 65%,transparent);
background:var(--red-soft)}
/* `min-width:146px` held the FLOOR but nothing held the ceiling, and the pill is `white-space:nowrap`
inside a 152px column. Display names are capped at 30 characters (the account dialog's own
maxlength), so "Claimed by " + a 30-character name is roughly 300px of mono uppercase โ it blew
the tag column and pushed the whole row wider than its list. Measured on a long name live: one
`.cpill` at 596px in a 152px slot. The ceiling belongs on the pill, and the ellipsis needs a real
element to happen on because text-overflow does not apply to a flex container's anonymous text โ
hence the `.cpname` span in helpqueue.php rather than clipping mid-letter. */
.cpill{max-width:100%}
.cpname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Track tag */
.ttag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.2px;
text-transform:uppercase;font-weight:700;padding:2.5px 8px;border-radius:20px;border:1px solid;
white-space:nowrap}
/* Follow-Ups class-day counter, in the .hqbadge slot */
.dcount{font:700 15px var(--mono)}
.dc-y{color:var(--amber)}.dc-o{color:var(--orange)}.dc-r{color:var(--red)}
/* 3 ยท leadership table spacing. From and To were crowding Message. */
#ldtable th:nth-child(2), #ldtable td:nth-child(2){padding-right:20px;white-space:nowrap}
#ldtable th:nth-child(3), #ldtable td:nth-child(3){padding-right:26px;white-space:nowrap;width:1%}
#ldtable th:nth-child(4), #ldtable td:nth-child(4){padding-left:6px}
#ldtable th:nth-child(5), #ldtable td:nth-child(5){padding-left:18px;white-space:nowrap}
#ldtable th:nth-child(6), #ldtable td:nth-child(6){padding-left:14px;white-space:nowrap}
#ldtable td:last-child{padding-left:16px;padding-right:12px}
/* 4 ยท a table row cannot take a border directly, so the red frame is painted on the
cells: top and bottom on every cell, sides and radius on the first and last. */
/* The leadership table mirrors the inbox. */
#ldtable{width:100%;border-collapse:collapse}
#ldtable th{text-align:left;padding:0 10px 9px;font-family:var(--mono);font-size:10px;
letter-spacing:1.4px;text-transform:uppercase;color:var(--dim);font-weight:700;
white-space:nowrap;position:sticky;top:0;z-index:3;
border-bottom:1px solid transparent;
background:linear-gradient(to top, var(--line) 1px, var(--panel) 1px)}
#ldtable td{padding:10px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
#ldtable tr:last-child td{border-bottom:none}
/* Waiting and Being Helped each cap and scroll independently, so a long queue cannot
push Being Helped and Follow-Ups off the screen. */
.qcap{max-height:250px;overflow-y:auto;overflow-x:hidden;padding-right:6px;padding-bottom:2px}
/* Do NOT strip the last row's padding to make a box sit flush against a divider. It
removes the row's own bottom space and the row reads as cut off. Flush spacing belongs
on the CONTAINER (.qsec has no top margin), never on the row. */
/* Every leadership message is listed, so the list is capped and scrolls. */
.ldcap{max-height:340px;overflow-y:auto;overflow-x:hidden;padding-right:8px}
/* A highlighted row needs breathing room on the right, or the button touches the border. */
/* My Inbox caps and scrolls so Leadership Inboxes below it is never pushed off screen.
Roughly eight rows, matching the leadership cap. */
.mcap{max-height:392px;overflow-y:auto;overflow-x:hidden;padding-right:8px}
#msgtable th{position:sticky;top:0;z-index:3;border-bottom:1px solid transparent;
background:linear-gradient(to top, var(--line) 1px, var(--panel) 1px);padding-bottom:11px}
/* Being Helped collapses. The summary carries everything needed at a glance: the count,
and a red flag only when a claim has passed 15 minutes. Static, no pulse. */
.bhacc{background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r-md);
margin:0;overflow:visible}
.bhacc>summary{padding:13px 16px}
.bhacc>summary h3{font-size:20px;color:var(--brand);margin:0;letter-spacing:.2px}
.bhacc>summary .cnt{font-family:var(--mono);font-size:12px;color:var(--dim)}
.bhacc>summary .qtip{margin-left:auto}
.bhacc .accbody{padding:0 14px 12px}
.bhflag{font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;
font-weight:700;padding:3px 9px;border-radius:20px;color:var(--red);
border:1px solid color-mix(in srgb,var(--red) 55%,transparent);background:var(--red-soft);
white-space:nowrap}
/* Follow-up rows carry a status word plus two buttons, which does not fit the stock
168px .hqacts. Widened for this row type only. */
.furow .hqacts{flex:0 0 340px;white-space:nowrap}
/* ๐ด TWO INDEPENDENT FILTERS WERE FIGHTING OVER ONE `style.display` [found + reproduced live
2026-08-14]. Show Archived (fuArch) and the block filter (fblk) both wrote `r.style.display`
directly, and the archived rows started hidden by an INLINE `display:none` in the markup โ so
touching the block filter at all republished every archived follow-up with the checkbox still
unchecked. Reproduced in the browser: `.furow.archived` went `none` -> `''` on choosing "All",
`#showarch` still false.
The root cause is two rules writing one property, so the fix is to stop writing the property:
each filter owns its own class, CSS ORs them, and neither can undo the other. */
.furow.fu-archhide, .furow.fu-blkhide { display:none }
/* The leadership table's Sent column reuses `.qtime` for its severity colours only, and was
fighting the rest of the class off with `style="font-size:13.5px;min-width:0"` in the markup.
`min-width:0` was overriding `.qtime{min-width:74px}` on an element computed `display:inline`,
where min-width does not apply at all (CSS 2.1 ยง10.4) โ verified live, so it was a no-op that
read like a live constraint. Only the size override is real, and it belongs in one named place
rather than on 1..N inline attributes. */
.qtime.qtdate{font-size:13.5px}
/* KEYBOARD PARITY FOR THE CLICK-ONLY CONTROLS IN THESE TWO TABLES (WCAG 2.1.1 / 2.4.7).
`.sorth` (9 sortable headers), `.msgclip` (open the full message) and `.openrep` (open the
reply) were `onclick` handlers on non-interactive elements: reachable by mouse only, with no
focus indicator anywhere. messages.php now makes them focusable and Enter/Space activatable;
this is the ring that makes the focus visible. `:focus-visible` only, so the mouse path is
unchanged โ same convention as `.styledsel` above. */
.openrep{cursor:pointer}
.sorth:focus-visible, .msgclip:focus-visible, .openrep:focus-visible{
outline:2px solid var(--text);outline-offset:-2px;border-radius:4px}
/* The flag toggle is a text glyph and the trash beside it is a 17px svg, so in one row the two
icon buttons rendered 20x23 and 25x25 โ different hit areas for the same control class. Scoped
to this table rather than fixing `.icobtn` globally: six other pages share that class and are
another agent's surface today. */
#msgtable .icobtn{min-width:25px;min-height:25px;align-items:center;justify-content:center}
/* popup shell, matching the app's .msgbox treatment */
dialog.pop{border:none;background:transparent;padding:0;max-width:560px;width:calc(100vw - 32px)}
dialog.pop::backdrop{background:rgba(4,7,13,.72)}
.popbody{border:1px solid var(--line-hi);border-radius:14px;background:var(--panel);
box-shadow:0 24px 70px -14px rgba(0,0,0,.75);padding:24px 26px}
.popbody h3{margin:0 0 10px;font-size:19px}
.popbody .popnote{margin:0 0 12px;font-size:13px;color:var(--dim);line-height:1.5}
.popbody textarea{width:100%;box-sizing:border-box;background:var(--bg-deep);color:var(--text);
border:1px solid var(--line-hi);border-radius:9px;padding:11px 13px;
font:14px/1.6 var(--sans);min-height:120px;resize:vertical}
.popacts{display:flex;justify-content:flex-end;gap:12px;margin-top:18px;flex-wrap:wrap}
.popacts .btn{margin:0}
/* 3 ยท Waiting and Being Helped need to read as subheaders, not as body text. */
.qsechead h3{font-size:20px !important;color:var(--brand);letter-spacing:.2px}
/* 4 ยท the overdue frame was clipping under the sticky header. Push the first data row
clear of the header rule so its own top border is visible. */
#ldtable th{padding-bottom:13px}
/* two-option dialog for Remove */
.optbtn{display:block;width:100%;text-align:left;background:var(--panel-hi);
border:1px solid var(--line-hi);border-radius:11px;padding:14px 16px;margin-bottom:10px;
cursor:pointer;color:var(--text);font:inherit}
.optbtn:hover{border-color:var(--brand)}
.optbtn b{display:block;font-size:14.5px;margin-bottom:3px}
.optbtn span{display:block;font-size:12.5px;color:var(--dim);line-height:1.5}
/* Receipt model, ruled 2026-07-25: a REPLIED row is done and needs nothing further, so it greys
out and reads as removable. This is the app's existing vocabulary for "resolved" (cleared alerts
grey and sink to the bottom, archived follow-ups drop to .7 opacity), not an imported email
bold/grey idiom โ which would not fit a list that shows the message body inline. Chosen over an
unread-emphasis treatment because marking-read-on-render can never display as new: the stamp
lands on the same render that would show it. */
tr.msgdone td { opacity:.62 }
tr.msgdone:hover td { opacity:1 }
.mact { display:flex; align-items:center; gap:8px; justify-content:flex-end; white-space:nowrap }
/* "On it right now" strip, lifted verbatim from blessed/communication-student-lead.html.
ยง1c ruled the CONTENT (one dim non-actionable line, capped at three then "and N more",
contributing nothing to any badge). ยง15f proposed this pill-pair FORM and the blessed
snapshot carries it, so the form is approved too. */
.onit{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.onit .onitlbl{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
color:var(--dim);font-weight:700;margin-bottom:9px}
.onitrow{display:flex;flex-wrap:wrap;gap:8px}
.onitpair{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:5px 11px;
border-radius:20px;border:1px solid color-mix(in srgb,var(--accent-2) 32%,transparent);
background:var(--accent-2-soft);white-space:nowrap}
.onitpair b{color:var(--accent-3);font-weight:700}
/* `.onitpair .arrow` held a `→` glyph until 2026-08-02 and now holds the word "helping" (see
messages.php for why). A word needs the OPPOSITE weight to a glyph: an arrow had to be bold and
coloured to read at all, but a bold coloured verb between two names makes three competing emphases
in one small pill. Dropped to normal weight and the dim colour so it reads as connective tissue
and the two NAMES stay the things the eye lands on. */
.onitpair .arrow{color:var(--dim);font-weight:400;font-size:11.5px}
.onitmore{display:inline-flex;align-items:center;font-size:12.5px;padding:5px 11px;border-radius:20px;
border:1px dashed var(--line-hi);color:var(--dim);white-space:nowrap}
/* ๐ด WIDENED 2026-08-24 [her ruling: *"The switch class popup is way too squished, should be much
bigger to show all content on a regular screen without scrolling. It's tiny right now."*] Measured
before: 420px wide, 139px tall, with its class list in a 260px panel that scrolled at 519px of
content โ so eleven classes were a scroll inside a box a third the height of the screen.
โ THE GLOBAL `dialog { max-width:440px }` (Step 9) IS WHY A BIGGER NUMBER HERE DID NOTHING ON ITS
OWN: `width` loses to a smaller `max-width`. Both are set together, the way `.dlg-xl` already does
it โ see the note on `dialog.dlg-lg`, which is still clamped and is hers to rule on. */
.switchdlg { width:min(640px, 94vw); max-width:min(640px, 94vw); }
/* `.hint` is scoped to `.panel` globally, so a dialog has to restyle it (same as #absdlg does). */
.switchdlg .hint { color:var(--dimmer); font-size:12.5px; margin:2px 0 0; }
.teamsel { position:relative; }
.teamsel-trigger { width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
background:var(--bg-deep); border:1px solid var(--line-hi); border-radius:var(--r-md); color:var(--text);
padding:12px 14px; font-family:var(--sans); font-size:14.5px; cursor:pointer; text-align:left; }
.teamsel-trigger:hover { border-color:var(--brand); }
.teamsel-trigger .car { color:var(--dim); font-size:11px; transition:transform .15s; flex:none; }
.teamsel-trigger.open .car { transform:rotate(180deg); }
.teamsel-panel { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40;
background:var(--panel); border:1px solid var(--line-hi); border-radius:var(--r-md);
box-shadow:0 20px 50px -10px rgba(0,0,0,.6); max-height:260px; overflow-y:auto; padding:6px; }
/* ๐ด INSIDE THE SWITCH POPUP THE LIST IS INLINE, NOT AN OVERLAY [2026-08-24, her ruling: *"should be
much bigger to show all content on a regular screen without scrolling"*].
โ RAISING THE OVERLAY'S max-height WAS MY FIRST ATTEMPT AND IT WAS WRONG โ measured: the scroll went
away (519px of rows in a 519px box) but the panel then ended at y=1022 on a 900px-tall screen, so the
bottom of the list was off the screen instead of behind a scrollbar. Strictly worse, and only a
measurement caught it.
โ THE CAUSE was that the panel is absolutely positioned below the trigger, so it hangs OUTSIDE the
dialog and the dialog's own centring never accounts for it: a 139px-tall dialog was centred while
500px of list hung off its bottom edge. Static positioning puts the list back inside, so the dialog
grows with it and `` re-centres the whole thing โ which is what makes "all of it on screen,
no scrolling" actually true rather than nominally true.
โ `max-height` on the dialog is the backstop for a teacher with far more classes than fit any
screen: then, and only then, the dialog itself scrolls.
โ Applies to BOTH switch popups on purpose. app/ui.php builds the teacher's Switch Class and the
student's Switch Teams from the same `.switchdlg`/`.teamsel` markup precisely "so the two bubbles are
the same control"; scoping this to one of them would break that on the first screenshot. */
.switchdlg { max-height:88vh; overflow-y:auto; }
.switchdlg .teamsel-panel { position:static; max-height:none; overflow:visible;
box-shadow:none; margin-top:6px; }
/* Re-asserts what the `hidden` attribute already means. Needed only because this panel is absolutely
positioned, and it is the one display rule in this block โ never put `display` on the
itself without `[open]` (README ยง6.1: every dialog on the page then renders at once). */
.teamsel-panel[hidden] { display:none; }
.teamsel-row { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
background:transparent; border:0; border-radius:var(--r-sm); color:var(--text); text-align:left;
padding:10px 12px; font-family:var(--sans); font-size:14px; cursor:pointer; }
.teamsel-row:hover { background:var(--panel-hi); }
/* The CURRENT row is inert (a div, not a button) โ switching to the persona you are already on would
post and redirect for nothing. So it must not advertise itself as clickable. */
.teamsel-cur, .teamsel-cur:hover { cursor:default; background:transparent; }
.teamsel-row .nm, .teamsel-trigger .nm { font-weight:700; min-width:0; overflow-wrap:anywhere; }
.teamsel-row .nm i, .teamsel-trigger .nm i { font-style:italic; font-weight:400; color:var(--dim); margin-left:5px; }
.teamsel-row .badge { flex:none; }
.teamsel-join { display:block; width:100%; text-align:center; background:transparent;
border:1px dashed var(--line-hi); border-radius:var(--r-sm); color:var(--brand); padding:10px 12px;
font-family:var(--sans); font-size:13.5px; font-weight:700; cursor:pointer; margin-top:6px; }
/* the base rule's text stays plain --brand (on transparent, which passes); this override only
applies once :hover swaps the background to --brand-soft, which is the failing combination */
.teamsel-join:hover { background:var(--brand-soft); border-color:var(--brand); color:color-mix(in srgb, var(--brand) 55%, var(--text)); }
/* Join-code entry, inline in the same dialog's second view. */
.joincode-input { width:100%; background:var(--bg-deep); color:var(--text); border:1px solid var(--line);
border-radius:var(--r-sm); padding:10px 12px; font-family:var(--mono); font-size:15px; letter-spacing:1.5px;
text-transform:uppercase; margin-top:10px; }
.joincode-input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.joincode-input.err { border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.joinerr { display:flex; gap:7px; align-items:flex-start; color:var(--red); font-size:12.5px; margin-top:8px; }
.joinerr[hidden] { display:none; }
/* ---------- A PANEL WHOSE FEATURE IS PAUSED BY A RUNNING SUB-CLASS ----------
Her call 2026-08-04, choosing between her own two rules (the jam spec said "remove pacing, ready for
check off sections"; the standing rule says a section must never silently vanish): *"I think you can
keep the panels, as long as they're entirely greyed out with over text that says 'Paused during
{subclass name}' or something like that that makes it very obvious there's nothing to pay attention
to there."* So the panel keeps its place in the grid and its heading, and reads as switched off.
`.pausedpanel > *` greys and de-interacts everything the panel already contained; the note is a
sibling overlay so it stays full-strength and legible over the top. Deliberately `--dim` and NOT
amber: amber/orange/red are reserved for warning semantics, and a paused panel is information, not a
warning. No animation, per the sensory-friendly rule.
๐ด BUG FOUND AND FIXED 2026-08-14, unrelated to whatever else this session was building: this
comment used to END right here, with no comment-opener starting the paragraph below it โ so
everything from "RESHAPED 2026-08-07" down to that paragraph's own comment-closer was raw text
sitting outside any comment, which CSS's error recovery reads as one giant invalid selector and
silently drops the whole rule it was attached to. That rule was the very next one, `.pausedpanel`
(position:relative) โ so EVERY "Paused during {jam}" overlay on EVERY dashboard has been
positioning itself against the viewport instead of its own panel (`.pausednote`'s own
absolute/inset:0 falling through to the initial containing block), covering the entire page
center-to-edge and blocking clicks on everything under it, sidebar included. Caught by chance
testing something else entirely on a page with a paused sub-class; confirmed via
`document.styleSheets` that the rule was never being applied at all. Merging the two comments
back into one is the whole fix โ the rule itself was always correct, only unreachable.
โ IF YOU ARE EDITING THIS COMMENT: do not spell out the two-character comment-close sequence
literally anywhere in this paragraph, even quoted โ CSS comments do not nest and do not respect
quoting, so typing it re-triggers the exact bug this paragraph describes. Ask past-me how it was
found the hard way.
โ RESHAPED 2026-08-07 TO HER DESCRIPTION: *"centered (vertically and horizontally) over the box
with the rest of the text behind being dimmed down a lot. So it's like a big white word overlay
over a dimmed box in the center."* Three changes from the first build: the word is now BIG (was
13px, lost against the panel it sits on), it is `--text` rather than `--dim` so it reads as white,
and the content behind drops from .22 to .12 so the overlay owns the box.
This also settles the audit finding that the overlay struck through the panel heading: the heading
is deliberately part of what dims, which is her answer to it โ not an exclusion.
`--text`, not a literal #fff: all 16 themes are dark, so `--text` IS the near-white in each, and a
hardcoded white would drift the moment a light theme is added. `z-index` because the greyed
siblings carry `filter`, which makes its own stacking context and would otherwise paint over an
absolutely-positioned sibling. */
/* ๐ด THE FIVE `.pausedpanel` / `.pausednote` RULES ARE DELETED [Group L note 3, 2026-08-23]. Her
2026-08-22 note reverses the 2026-08-04 ruling this whole block was built to: the Ready for
Check-Off and Deliverables Overview panels are no longer greyed out during a jam, they are not
rendered at all (*"I don't want to see ready for check off or deliverables at all during a jam on
the dashboard. It's just not helpful."*). Those two panels were the only markup in the app that
ever carried these classes, so the rules had no remaining subject.
โ THE PARAGRAPHS ABOVE ARE KEPT ON PURPOSE, because one of them is not about this component at all:
the 2026-08-14 note records a CSS comment that was accidentally left unopened, which CSS error
recovery swallowed as one giant invalid selector and silently dropped the rule that followed it.
That lesson, and its warning about never typing the comment-terminator sequence inside a comment,
applies to every rule in this file and outlives the component it was found on. */
/* ---------- GROUP L, NOTE 10a: the ENDED-CLASS collapse [her ruling 2026-08-22] ----------
*"huge and obvious, like centered and very large"*, and on its own โ everything else on the teacher
dashboard stops rendering for an ended class, so this block is the whole page body.
`--dim` and mono for the headline rather than red: a finished class is a STATE, not a warning, and
README ยง5 reserves red for warnings. It is size and centring that carry "obvious" here, which is
exactly what she asked for. Same reasoning `.pausednote` used before it was removed. */
.endedwrap {
display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:14px; padding:12vh 20px; min-height:46vh;
}
.endedbig {
font-family:var(--mono); font-size:clamp(38px, 7vw, 74px); font-weight:800;
letter-spacing:.14em; text-transform:uppercase; color:var(--text); line-height:1.05;
}
.endedsub { margin:0; font-size:16px; color:var(--dim); max-width:52ch; }
/* ---------- ADD-ONS: the one-line row, and the app's FIRST toggle switch ----------
Lifted verbatim from the approved mockup (HTMLSnapshots/PROPOSAL-addon-scoping.html), where the
switch was drawn as snapshot-only CSS and then chosen [2026-08-05].
`.thinrow` is the Help Queue box in Teacher Settings; `.tiprow` is one add-on line inside the
class's Manage Add-Ons dialog. Both put the DESCRIPTION on the app's existing `.qtip` circle
rather than inline, and that is load-bearing rather than cosmetic: the real descriptions run
152-292 characters and inline they made the panel ~500px tall. On hover, five rows is ~150px.
โ GREEN ON / RED OFF is a KNOWING EXCEPTION to the rule at the top of this file that amber, orange
and red are reserved for warning semantics. A red OFF is a state, not a problem. She was told and
chose it. Written against the --green/--red TOKENS, never literal hex, so Livewire's colourblind
remap (bluish-green / vermilion) applies automatically โ and the state is spelled out ON/OFF in
the mono face besides, so it never depends on colour alone.
No blinking, no pulsing, no bounce: .15s linear-ish transitions only. */
.thinrow { display:flex; align-items:center; gap:10px; }
.thinrow .lbl { font-weight:700; font-size:14px; }
.thinrow .sp { flex:1; }
.swtoggle { position:relative; width:66px; height:24px; border-radius:12px; cursor:pointer;
flex:0 0 auto; margin-left:14px; font:700 10px var(--mono); letter-spacing:.12em;
background:color-mix(in srgb, var(--red) 30%, transparent);
border:1px solid color-mix(in srgb, var(--red) 60%, transparent);
transition:background .15s ease, border-color .15s ease; }
.swtoggle i { position:absolute; top:0; line-height:22px; font-style:normal; color:var(--text); }
.swtoggle .offtx { right:11px; }
.swtoggle .ontx { left:13px; display:none; }
.swtoggle::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
border-radius:50%; background:var(--red); transition:transform .15s ease, background .15s ease; }
.swtoggle.on { background:color-mix(in srgb, var(--green) 30%, transparent);
border-color:color-mix(in srgb, var(--green) 60%, transparent); }
.swtoggle.on .ontx { display:block; }
.swtoggle.on .offtx { display:none; }
.swtoggle.on::after { transform:translateX(42px); background:var(--green); }
.swtoggle:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* One add-on line in the Manage Add-Ons dialog: checkbox, label, and the ? circle. */
.tiplist { margin-top:12px; display:flex; flex-direction:column; }
.tiprow { display:flex; align-items:center; gap:10px; padding:7px 0; font-weight:400;
border-bottom:1px solid var(--line); }
.tiprow:last-child { border-bottom:0; }
.tiprow input { width:auto; margin:0; }
.tiprow .tl { font-weight:700; font-size:14px; }
.tiprow .sp { flex:1; }
.addsave { display:flex; justify-content:flex-end; margin-top:6px; }
/* ---------- The join screen's secondary route [her note 2026-08-23] ----------
The returning-student instructions used to be a full panel ABOVE the join-code box. Her objection
was who that served: *"it's just a lot of text blocking a new user which is who will normally be on
this screen."* It is a `` now โ one line until asked for โ so the common case reads as one
short form and the returning student still has a visible door. Styled as a quiet link-ish row
rather than a button, because it is deliberately the secondary path. */
.joinalt { margin-top:14px; }
.joinalt > summary {
cursor:pointer; font-weight:600; font-size:13.5px;
color:color-mix(in srgb, var(--brand) 55%, var(--text));
list-style:none; display:inline-flex; align-items:center; gap:7px; padding:4px 0;
}
.joinalt > summary::-webkit-details-marker { display:none; }
/* The caret is drawn rather than left to the UA marker, so it matches the app's other disclosures
and rotates on open. */
.joinalt > summary::before {
content:"\25B8"; display:inline-block; transition:transform .15s; font-size:12px;
}
.joinalt[open] > summary::before { transform:rotate(90deg); }
.joinalt > summary:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }
/* ๐ด THE ONE PLACE THE COUNTER LANDED BESIDE THE FIELD INSTEAD OF UNDER IT [her ruling 2026-08-23].
The shared listener inserts `.charcount` as the field's next sibling, which is exactly right in a
normal stacked form โ but `.wiztrackrow` is a FLEX row (input, then a remove button), so a block
sibling became a third flex ITEM and sat on the same line, squeezing the row. Audited every
`[data-counter]` field on Settings, Teams and Class Settings: 11 of 13 were already correct and
these two track-name rows were the only offenders, which matches what she spotted.
ยท `flex-wrap` lets the counter take a line of its own.
ยท `order:99` sends it after the remove button, so the BUTTON stays up on the field's line and
only the counter drops. Without it the button would be pushed to a third line.
ยท `max-width` matches the input's own 300px cap so the count right-aligns under the BOX's right
edge rather than the row's, which is what her references show. */
.wiztrackrow { flex-wrap:wrap; }
.wiztrackrow .charcount { order:99; flex-basis:100%; max-width:300px; margin-top:2px; }
/* ---------- Settings โธ Blocks: cap the list, then scroll ----------
๐ด **234px WAS WRONG AND THE COMMENT SAID WHY WITHOUT NOTICING** [corrected 2026-08-24]. It claimed
"six rows: 6 ร 34px + 5 ร 6px gap" โ but the rows are **25px**, not 34px, so 234px showed **seven**
full rows. Her words on seeing it: *"It's still showing too many blocks. I said to cap scroll to
show 4 - 5. It's showing almost 8 right now."* Almost 8 was accurate. 34px was assumed, never
measured, which is the whole failure here โ the arithmetic was fine and its input was invented.
โ **118px = 4 rows, MEASURED: 4 ร 25px + 3 ร 6px gap.** Four rather than five because her reason
was a layout one โ *"Really I just want all three columns the same height, can you just cap a max
height to match the other columns?"* โ and the measurements say exact equality is not reachable:
Account Info wants 372px, Avatar 323px, and School Calendar is already 310px BEFORE the block list,
so matching exactly would leave the list 62px (two rows) and contradict "4 - 5". Four rows is the
closest point inside her range: it takes the panel from 544px to 428px and the row shrinks with it.
โ Still a max-HEIGHT rather than a row count, for the original reason: these rows are one line each
and a height keeps the cut-off in a consistent place whether or not a row carries an "A day" suffix.
`padding-right` reserves the scrollbar's width so the pencil and trash buttons do not shift left the
moment one more block is added. */
/* ๐ด THE LIST TAKES THE ROOM THE PANEL ACTUALLY HAS [her report 2026-08-29]: *"blocks has a scroll
wheel even though there's tons of extra space under it which is not great."*
THE 118px CAP WAS RIGHT WHEN IT WAS WRITTEN and wrong by the time she saw it. Her 2026-08-23 ruling
was *"a cap on the number of blocks shown before a scroll (like 5 - 6 then scroll)"* -- written to
stop eight periods pushing Manage Holidays off the panel. But Settings' panels STRETCH to a shared
row height, which she likes (*"The top row is a consistent height which I love"*), so this panel is
routinely taller than its contents: the cap then produced a scrollbar with empty space underneath
it, which is the worst of both.
the FLOOR AND THE CEILING ARE BOTH HERS. `min-height` keeps her six-row cap when the row is short;
`flex:1` spends whatever the stretch gave; `max-height` stops the list dominating the page when
this panel is the one SETTING the row height, which is the case her original ruling was about.
Between them, it scrolls only when it genuinely has more blocks than room.
the FLEX CHAIN IS WHY `.calpanel` AND `.blkwrap` EXIST. A flex child can only take leftover height
if every ancestor up to the panel is a column with `min-height:0`; without that the list simply
grows and pushes Manage Holidays off again, which is the bug the cap was added for. */
.calpanel { display:flex; flex-direction:column; }
.calpanel .blkwrap { display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.blkscroll { flex:1 1 auto; min-height:118px; max-height:340px;
overflow-y:auto; overflow-x:hidden; padding-right:6px; }
/* ---------- Settings โธ Teachers: cap the list, then scroll [2026-08-24] ----------
Her instruction was *"height capped to match the Teacher Invite Code box, scrolling inside"*, and
the number below is MEASURED, not reasoned about โ which is the entire lesson of the .blkscroll
note directly above, where a confidently-stated piece of arithmetic showed eight rows because its
row height had been invented rather than read off the page.
THE MEASUREMENTS, read off the live page with Playwright, never assumed:
ยท Teacher Invite Code panel at its natural height: 185px.
ยท Teachers panel chrome above the list: 20px padding-top, h2 33px + 4px margin, .hint 19px +
12px margin, 20px padding-bottom = 108px.
ยท So matching the invite box exactly leaves 185 - 108 = 77px for the list.
ยท Measured row height: 56px plain, 59px with an OWNER badge. Sticky header: 34px.
โ 77px IS THE HEADER AND ONE TEACHER, so a literal reading of "match the invite box" produces a
list that cannot list. That is the SAME failure as the blocks cap showing eight rows, arrived at
from the other end: a number followed past the point where it still served her.
โ HOW BOTH HALVES OF HER INSTRUCTION ARE KEPT ANYWAY: the two panels share one grid row, and CSS
grid stretches row items to equal height by default. So whichever is taller sets both, and they
MATCH โ measured at 548 x 382 each โ regardless of which one drove the number. The invite box has
room to spare either way: at full width it was 1112px wide holding 450px of content.
โ 272px = the sticky header (34px) + FOUR rows at their worst case (4 x 59px), + 2px because
these boxes are border-box and the border is inside the max-height (measured: max-height 253
gave clientHeight 251). Four is also the figure she settled on for the blocks list one panel
over, for the same "cap it, don't cramp it" reason.
๐ SHE MAY WANT THIS TALLER OR SHORTER. It is one number, on this line; nothing else depends on
it, and a taller pair only makes the invite box beside it emptier. Logged in docs/BUILD_PLAN.md. */
.teachcap { max-height:272px; overflow-y:auto; overflow-x:hidden; border:1px solid var(--line);
border-radius:var(--r-md); }
/* "Never signed in" is the commonest value in this column on a fresh install and wrapped onto two
lines at this panel width, which made those rows taller than the rest for no reason. */
table.subtable td.teachwhen { white-space:nowrap; }
/* ---------- ...and its two columns that must NOT be sized by their own content ----------
๐ด MEASURED, AFTER THE FIRST VERSION VISIBLY BROKE [2026-08-24]. Letting the table size itself
meant ONE row going pending โ which adds a second button, "Reset again" โ widened the action
column from 133px to 247px, i.e. half the 500px table, and every OTHER row paid for it: teacher
names wrapped onto two lines, the OWNER badge dropped below its own name, and rows grew tall
enough to push the fourth one out of the cap. A transient state on one row silently relaid out the
whole panel.
โ SAME PRINCIPLE AS THE BADGE RULE: things sharing a table column get ONE width, never a width
sized to whichever cell happens to hold the most today. Fixed here, so the panel looks identical
whether nobody is mid-reset or everybody is.
โ 140px = the widest single button measured ("Reset password", 119.4px) plus the cell's own 20px
of padding. The two-button pending cell holds 211px of buttons, which does not fit on one line at
that width BY DESIGN โ they stack, which is the whole reason the column can stay narrow. That one
row is taller while a reset is pending; nothing else moves.
โ 120px on Last login is "Never signed in" at its nowrap width, which is the longest value this
column ever holds and also the commonest one on a fresh install.
That leaves 240px for the teacher's name and username, measured as enough for the longest real
case (a display name plus the OWNER badge on one line). */
table.subtable th.teachact, table.subtable td.teachact { width:140px; text-align:right; }
table.subtable th.teachwhen, table.subtable td.teachwhen { width:120px; }
table.subtable td.teachact form { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
table.subtable td.teachact .btn { margin:0; }
/* ๐ด N13 ยท the โ that takes a new goal back off [her note 13, built 2026-08-23]. Her words: *"you can
add up to 4, but you can't remove if you accidentally clicked too many. You should be able to click
an x in the upper right corner of a goal box to delete it."* Upper right, as asked.
`position:relative` goes on the row card only (`.ngcard`), not on `.goalcard` at large -- the same
class dresses the CARRIED-goal cards on the previous slide, which have their own absolutely
positioned furniture and must not gain a new containing block.
28px square: past WCAG 2.5.8's 24px floor, the same reasoning that sized `.pencil`. */
.ngcard { position:relative; }
.ngcard .ngtext { padding-right:38px; } /* the text never runs under the button */
.ngdel {
position:absolute; top:8px; right:8px;
width:28px; height:28px; padding:0; line-height:1;
display:inline-flex; align-items:center; justify-content:center;
background:transparent; border:1px solid var(--line-hi); border-radius:50%;
color:var(--dim); font-size:13px; cursor:pointer; transition:color .12s, border-color .12s;
}
.ngdel:hover { color:var(--red); border-color:var(--red); }
.ngdel:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.ngdel[hidden] { display:none; } /* at the floor it is GONE, not greyed: a disabled
control still reads as "maybe", and here it is "no" */
/* ================= MY CLASSES picker [her design 2026-08-27] =================
Lifted from the approved mockup (HTMLSnapshots/LIVE-DESIGN/class-profiles-mockup.html) rather than
re-invented, so what shipped is what she signed off. Every value below was through
tests/ui/audit_class_picker_a11y.py before the build: axe-core clean, reflow clean at 320px and
640px, every target >= 24x24.
๐ด THREE OF THESE RULES ARE FIXES THE AUDIT FORCED, and they must not be "tidied" back:
ยท .cpactive mixes the brand TOWARD the text colour. Brand-on-brand-tint failed contrast at 6
nodes -- the same failure class her 2026-08-16 ruling already cleaned up once.
ยท the second control in .cpacts has a 24px minimum. It was a 13px checkbox in a 19px row, which
is a hard target for the magnifier student this app is built around. That checkbox is gone
(see .cppastbtn below) but the floor it forced is why the button that replaced it is a .btn-sm
and not a link.
ยท finished rows are NOT dimmed by opacity anywhere. Stacking opacity on already-dim text was the
third contrast failure, and a finished sprint's dates are exactly what a student scrolls back
to read. ============================================================================= */
dialog.cpdlg { max-width:min(860px, 94vw); width:min(860px, 94vw); }
/* padding-right clears the dialog's own circle-X, which is absolutely positioned in this corner.
Without it the X sits ON TOP of the Add New Class button -- caught in the first live render, not
visible in the mockup because the mockup has no dialog chrome around it. */
.cphead { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
/* 26px, up from 18px [her ask 2026-08-27]: the heading sat too close to the first card. */
margin:0 0 26px; padding-right:44px; }
.cphead h3 { margin:0; font-size:22px; }
.cpacts { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none; }
/* 230px min fits "Game Development" and "Night Owl Games" unbroken -- the first pass was 178px and
truncated both, which she rejected. */
/* ๐ด auto-FIT AND CENTRED, NOT auto-fill [her ask 2026-08-27]: *"when there is only one class,
there's extra space on the right which doesn't look good... how about the class cards are CENTERED
in the popup."* auto-fill RESERVES the empty columns, which is exactly what parked a lone card hard
left with a gap beside it; auto-fit collapses them, and centring then puts the surviving card in
the middle of the dialog. Two centre as a pair; three or more fill the row exactly as before, so
the counts that already looked right are untouched.
โ The 230px minimum stays -- it is derived from "Game Development" and "Night Owl Games" fitting
unbroken, and she rejected a narrower one. Centring moves the tracks; it must not stretch them. */
/* ๐ด TWO ROWS, THEN IT SCROLLS [her ruling 2026-08-28: *"maybe scroll after 2 rows. I think it should
show 2 rows cleanly, can fit on a laptop, and scroll after that (if needed)"*].
โ THE GRID SCROLLS, NOT THE DIALOG, and that is the whole point of putting it here. Measured
before this rule: `.cpgrid` had `max-height:none` and `overflow-y:visible`, so nothing capped it at
all -- the only thing saving a teacher with twelve classes (four rows, measured live) was the
browser's own `dialog:modal` max-height, which scrolls the WHOLE dialog and carries the "My
Classes" heading and the + Add New Class button off the top with it. Capping the grid keeps the
heading and the action where they are and moves only the cards. Same pattern as `.avdlg-scroll`,
`.alertscroll` and `.teamsel-panel`.
THE NUMBER IS ARITHMETIC, NOT A GUESS: a card measures 114px and the row gap is 14px, so two rows
is 114 + 14 + 114 = 242. A third row is then cut cleanly at the container edge rather than half a
card being shown.
โ `padding` and the NEGATIVE margin that cancels it exist so the active card's glow is not clipped
by the scroll box. `.cpcard.active` paints an 18px box-shadow; without room either side, scrolling
would shave it. The negative margin keeps the grid's own alignment identical to before.
โ It is a MAX-height, so one or two classes still size to their content and nothing empty is
reserved -- the state she cares most about (a student with one class) is untouched. */
.cpgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px;
justify-content:center;
max-height:242px; overflow-y:auto; overscroll-behavior:contain;
padding:4px 6px; margin:-4px -6px; }
/* ๐ด THE `hidden` ATTRIBUTE NEEDS SAYING OUT LOUD HERE, and it is not boilerplate: the UA stylesheet
gives [hidden] `display:none`, but ANY explicit display rule outranks it, so `display:grid` above
quietly wins and a hidden grid stays on screen. Caught by tests/ui/t_class_picker.py the first time
Past Classes was clicked -- the table appeared and the cards never left. Same fix and same reason
as .mempop[hidden], .fpop[hidden] and .teamsel-panel[hidden] elsewhere in this file. */
.cpgrid[hidden] { display:none; }
/* ๐ด THE CAP IS ON THE CARD, NOT ON THE TRACK, and that is the whole trick [2026-08-28].
auto-fit collapses the empty tracks, but the one that survives is `1fr` and takes the entire row,
so a single class rendered as one ~800px card -- stretched, not centred, and justify-content has
nothing to distribute once the tracks already fill the container.
โ DO NOT "FIX" THIS BY CAPPING THE TRACK (minmax(230px, 300px)). auto-fit takes its repetition
count from the max sizing function whenever that max is definite, so a track cap silently drops an
860px dialog from three columns to two -- changing the multi-class layout she said looked right in
order to fix the single-class one. `1fr` is indefinite, so the count keeps coming from the 230px
minimum at every card count.
.cpdone-wrap is GONE from this selector [2026-08-28]: finished classes left the grid entirely for
the Past Classes table, so the grid's only child is a live .cpcard. */
.cpgrid > .cpcard { max-width:300px; margin-inline:auto; width:100%; }
.cpcard { background:var(--bg-deep); border:1px solid var(--line); border-radius:12px; padding:14px;
display:flex; flex-direction:column; gap:10px; }
.cptop { display:flex; align-items:center; gap:10px; }
.cplogo { width:40px; height:40px; border-radius:10px; flex:0 0 40px; display:grid; place-items:center;
font-family:var(--disp); font-weight:800; font-size:15px; color:#0b0f14; }
/* min-width:0 lets a long class name shrink inside the flex row instead of pushing through the
card's border. */
.cptext { min-width:0; }
.cpname { display:block; font-weight:700; font-size:14.5px; line-height:1.25; }
.cpmeta { display:block; color:var(--dim); font-size:12px; margin-top:3px; line-height:1.3; }
/* Buttons pinned to the bottom so a card with a longer meta line does not leave its neighbour's
button floating halfway up the row. */
.cpcard .btn, .cpcard form { margin-top:auto; }
.cpcard .btn { width:100%; justify-content:center; }
.cpcard form .btn { width:100%; }
.cpcard.active { border-color:var(--brand);
box-shadow:0 0 0 1px var(--brand), 0 0 18px -2px color-mix(in srgb, var(--brand) 55%, transparent); }
.cpactive { margin-top:auto; text-align:center; font-family:var(--disp); font-size:11.5px;
letter-spacing:.10em; text-transform:uppercase; font-weight:800;
color:color-mix(in srgb, var(--brand) 42%, var(--text));
background:color-mix(in srgb, var(--brand) 14%, transparent);
border:1px solid color-mix(in srgb, var(--brand) 45%, transparent);
border-radius:var(--r-sm); padding:7px 8px; }
.cpempty { text-align:center; padding:26px 10px 8px; }
.cpempty p { color:var(--dim); font-size:13.5px; margin:0 0 16px; }
/* ---------- PAST CLASSES, the picker's second view [her design 2026-08-28] ----------------------
*"it changes the view from the 'cards' to a scrollable table that has the logo, class name, start
date and end date (all clickable headers to sort by) and a 'view' button in the row at the end."*
โ IT SCROLLS AT THE SAME 242px THE GRID DOES, on purpose: the two views swap inside one dialog,
and a table that sized to its own content would make the dialog jump a few hundred pixels every
time the button is pressed. Same cap, same feel, and the dialog stays put.
โ THE HEAD IS STICKY, which the card grid has no equivalent of and needs one here: scrolling six
years of classes past an unlabelled column is the failure this avoids. It needs an opaque
background of its own or the rows show through it, and --panel-hi is the dialog's own ground.
โ NO SORT ARROWS [her note]. `[aria-sort]` gets an underline and full-strength text instead, so
the active column is visible without a glyph and audible without either. */
.cppast { max-height:242px; overflow-y:auto; overscroll-behavior:contain; }
table.cptbl { width:100%; border-collapse:collapse; }
table.cptbl th { text-align:left; padding:0; border-bottom:1px solid var(--line);
position:sticky; top:0; background:var(--panel-hi); z-index:1; }
/* The header is a real , so it is tab-reachable and Enter/Space sort it for free. Stripped
back to text: this is a column label that happens to be pressable, not a control in a row of them. */
.cptbl-h { display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
font:inherit; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
font-weight:700; color:var(--dim); padding:8px 12px 10px; }
.cptbl-h:hover { color:var(--text); }
.cptbl-h:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; border-radius:6px; }
table.cptbl th[aria-sort] .cptbl-h { color:var(--text); }
/* ๐ด THE CARET SLOT IS RESERVED WHETHER IT IS FILLED OR NOT [her ruling 2026-08-28: *"Do the caret
exactly like it is on the teacher teams page where it only shows up when you click on the header
rows and are sorting."*]. `th.sortable .arrow` above (line ~2131) is the rule she is pointing at
and this is the same 12px, for the same reason: an inline-block of fixed width holds the space, so
filling it on sort does not shove the heading sideways. Drop the width and every header jumps the
first time you click it.
โ THE UNDERLINE CAME OFF BOTH TABLES with this change. It was standing in for a glyph she had said
she did not want; now there IS a glyph on the sorted column, so an underline as well would be
two marks saying one thing. `aria-sort` still carries it for a screen reader. */
.cptbl-h .arrow, .mtbl-h .arrow { display:inline-block; width:12px; color:var(--brand); }
table.cptbl td { padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.cptbl tr:last-child td { border-bottom:0; }
/* 30px, not the card's 40px: the plate is an identifier in a dense row here rather than the subject
of a card, and a 40px mark would set the row height on its own. */
.cptbl-mk { width:30px; padding-right:0; }
.cptbl-mk .cplogo { width:30px; height:30px; flex:0 0 30px; border-radius:8px; font-size:12px; }
.cptbl-nm { font-weight:700; font-size:14px; }
.cptbl-d { color:var(--dim); font-size:12.5px; white-space:nowrap; }
.cptbl-dash { color:var(--dimmer); }
.cptbl-go { width:1%; text-align:right; white-space:nowrap; }
.cptbl-go form { margin:0; }
/* Matches .cpactive's colour so "Active" means one thing in both views, at the weight a table row
can carry -- the card's full uppercase plate would shout in here. */
.cptbl-now { font-family:var(--disp); font-size:10.5px; letter-spacing:.10em; text-transform:uppercase;
font-weight:800; color:color-mix(in srgb, var(--brand) 42%, var(--text)); }
@media (max-width:640px) { .cpgrid { grid-template-columns:1fr; } }
/* On a narrow screen the table keeps every column and scrolls sideways inside its own box rather
than reflowing: the span is the reason to be on this screen at all, so dropping the dates to make
it fit would leave a list of names that the cards already give. */
@media (max-width:640px) {
.cppast { overflow-x:auto; }
table.cptbl { min-width:430px; }
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
๐ด 44px TAP TARGETS WHEREVER THE POINTER IS A FINGER
[2026-08-28 ยท POST-DEPLOY ยง4.1 "44px tap-target sweep across the phone surfaces" ยท MOBILE:766]
MEASURED FIRST, NOT LISTED FIRST. `tests/ui/probe_taptargets.py` walked the phonewall's own
allowlist at 390x844 with touch on, opening every closed on the way, because half the
suspects live in one and a dialog's buttons are exactly what a thumb has to hit. What it found is
what this block fixes: page-level `.btn-sm` at 29px tall, `.btn` at 38, `.dlg-close` at 30,
`.bubx` at 31, `.icobtn` at 25, `.pencil` at 24.
โ `(pointer:coarse)`, NOT A WIDTH, and it is the same reasoning the 16px input floor above is
bound to: a phone in LANDSCAPE is 844px wide and still has fingers, an iPad is 1024 and still has
fingers, and a mouse-driven desktop at 400% browser zoom reports 320px and does NOT. Width cannot
tell those apart; the pointer can. A touchscreen laptop with a mouse reports `fine` and correctly
keeps the compact desktop controls.
โ IT GROWS THE BOX, IT DOES NOT OVERLAY IT -- deliberately the opposite choice from
`.qtip-trigger`, and MOBILE:766's own instruction ("fix by phone-only padding"). A transparent
overlay reaches 44px without moving anything, which is why it is right for a control whose drawn
size IS the design -- but it also floats over whatever sits next to it, and an overlay wide enough
to matter is wide enough to eat a neighbour's taps. `min-height`/`min-width` reflows instead:
the row gets taller and nothing is ever covered. On a phone a taller row is the correct answer
anyway.
THREE DELIBERATE EXCEPTIONS, each measured rather than skipped:
ยท `.qtip-trigger` keeps its 24px overlay. Its 20px circle is DRAWN, so reaching 44 means either
resizing that circle app-wide across 29 sites -- her call, not a sweep's, and already recorded
as such where the overlay was added -- or a 44px overlay extending 13px past each side, against
a tightest neighbour gap of 10px (`.sechead`). It clears WCAG 2.2 AA (24x24) as it stands.
ยท `.card-edit` keeps its 24px. The card reserves EXACTLY 30px of right gutter for it -- the
measurement is in that rule's own note, which was written to add the control "without changing
the card's text width or height by a single pixel". A 44px box eats 14px back off the title it
sits beside. The Board is behind the phonewall so no phone reaches this at all; it is the
tablet Board pass's to settle, with the card's own padding, not this sweep's to force.
ยท `.ab-x` is NOT here. Swept for it before writing the rule: it exists in style.css and in the
blessed HTMLSnapshots and in NO live PHP, so it is a design-source class with no live control
to grow. Left alone for the same reason `.dlgdivider` was kept. โ `.card-move` (:1800) is the
same shape and is genuinely a corpse -- her 2026-08-22 ruling took the move button off the card
face and Card Info carries it now -- so it is named here for the ยง3.5 style.css sweep rather
than being given a rule that would render for nobody.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
/* ๐ด DECLARED BEFORE THE COARSE BLOCK, NOT AFTER IT, AND THE ORDER IS THE WHOLE RULE. Both
selectors are `.rememberme` โ (0,1,0) each โ so a media query adds no specificity and SOURCE ORDER
decides. Written after the block, this 24 silently beat the 44 inside it and the login checkbox
measured 246x24 on a phone with the touch rule apparently applied. Caught by re-running
probe_auth_phone.py rather than by reading the file, which is the only way this kind of tie shows
itself.
Unconditional for the reason the 2.5.8 block near the top of this file gives: 2.5.8 applies at
every viewport, and a control that is hard to hit at 400% browser zoom is hard to hit with a
trackpad too. 24 is the floor everywhere; 44 is the touch figure, in the block below. */
.rememberme { min-height:24px; }
@media (pointer:coarse) {
/* `.btn` declares `height:38px` and `.btn-sm` `height:29px`; min-height beats a fixed height in
the used-value stage, so neither base rule needs touching. `dialog .btn` already reached 44 in
the โค640 block -- this is the same figure for the buttons that are NOT in a dialog, and for
every touch width rather than only phone ones. */
.btn, .btn-sm { min-height:44px; }
/* `.bubpanel .btn-sm` is (0,2,0) and pins 40px further up this file; it would win on specificity
no matter where this block sits, so it is named. The bubbles are hidden below 520 anyway --
this is the 521-to-tablet band where they still render and are still tapped. */
.bubpanel .btn-sm { min-height:44px; }
/* `#msgtable .icobtn` is (1,1,0) and pins 25px near the end of this file. Messages is a phone
route and the flag and the delete on every row ARE those buttons, so the ID selector has to be
matched here or the one page this most affects would keep the 25px control. */
.icobtn, #msgtable .icobtn { min-width:44px; min-height:44px;
align-items:center; justify-content:center; }
/* Both dimensions are explicit on the base rule (30x30) rather than min-*, so both are restated.
This is also the popover โ (`.fpopx` sets position:static and keeps the circle). */
.dlg-close { width:44px; height:44px; font-size:17px; }
.bubx { min-width:44px; min-height:44px; }
.pencil { min-width:44px; min-height:44px; }
/* The Board's card pencil, held at the 24px AA floor its own rule sets -- see the gutter
arithmetic in this block's header. It carries `.pencil`, so without this the rule above would
grow it. */
.card-edit { min-width:24px; min-height:24px; }
/* A PENCIL PINNED ONTO A GRAPHIC is the one shape that cannot grow: at 44x44 the roster's
team-logo pencil covers most of the 56px logo it is meant to annotate, and the class colour
pencil covers the swatch whose colour it exists to change. These get the overlay instead, and
they are safe to overlay for the reason the general case is not -- what they extend over is an
logo and a colour box, neither of which is a control. Both are already
position:absolute, so `::after` anchors to the button itself. */
.pencil-pin { min-width:24px; min-height:24px; }
.pencil-pin::after { content:''; position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%); width:44px; height:44px; }
/* ๐ด `.tstool` REACHED A PHONE ROUTE ON 2026-09-04 and its base rule is `min-height:40px`, four
pixels under. It was written for the Team Settings popup, which lives on `teacher/teams.php` --
not on the phonewall's allowlist, so nothing here had ever measured it. My Team's Upcoming leave
button is the same component on `/roster.php`, which IS a phone route, so it now goes through
t_taptargets.py like every other control a thumb has to hit.
โ NOT AN EXEMPTION, WHICH IS THE POINT. The exception list at the top of that suite says a new
small control does not get to join it by being added -- it goes red until somebody decides.
This is that decision, and it is the ordinary one: the button has room to grow and nothing
around it to crowd. Team Settings' three tools get the same four pixels on a tablet, which is
an improvement there too. */
.tstool { min-height:44px; }
/* join.php's "Already have a SCRUM Dojo login?" disclosure, measured at 241x29. It is a real
standalone control on the page a student meets FIRST during a jam, and the one thing standing
between a returning student and a duplicate account. `padding:4px 0` is what makes it 29; the
min-height grows the row without touching the type or the caret. */
.joinalt > summary { min-height:44px; }
/* ๐ด A TYPED FIELD IS A TAP TARGET TOO, AND EVERY ONE OF THEM WAS 43px [2026-08-28, measured at
360x740 by probe_auth_phone.py]. One pixel under, everywhere, because the base rule is
`padding:10px 12px` plus the 16px this same media query already sets for iOS: 16 * 1.15 line
box + 20 + 2 borders lands at 43. It is the smallest possible fix and it applies to the join
code, the password, and every box in the app a thumb has to land in.
โ THE 16px RULE ABOVE DELIBERATELY DID NOT DO THIS, and said so: "FONT SIZE ONLY. The 44px
target sweep is a separate item and needs measuring page by page; a min-height here would
silently reshape rows all over the app." That measurement is now done -- this is that sweep, and
the reshape it warned about turns out to be a single pixel.
โ CHECKBOXES AND RADIOS ARE EXCLUDED, the same exclusion the font rule makes. They are square
controls whose painted size IS their design, so a min-height would stretch them into ovals
without widening the thing being aimed at. `.rememberme` below is how the one that matters gets
its target instead. */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select, textarea { min-height:44px; }
/* "Keep me signed in on this device" -- the login form's only checkbox, and the control that
decides whether a student re-types a password on a phone keyboard several times a week. The
input paints 13x13 and the LABEL is the real target (2.5.8 scores the label of a label-wrapped
control), but the label was only as tall as its own text: 19px. Growing the label rather than
the box keeps the checkbox looking like every other checkbox in the app. */
.rememberme { min-height:44px; }
}
/* โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
MY TEAM โ the member table [her ruling 2026-08-28, option C of four mockups]
Mockups: HTMLSnapshots/LIVE-DESIGN/myteam-c-*.png, source myteam-c-mockup.html.
Her words: *"it just needs to be a real table with sorting properties."* What this replaced put
the leader badge, the LEAD-track badge, the track chip AND the Mark absent button in one cell.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
table.mtbl { width:100%; border-collapse:collapse; }
/* ๐ด THE PADDING MOVED FROM THE TO THE BUTTON INSIDE IT [2026-08-28, when the headers became
sort controls]. A button with the cell's padding around it is a target the size of the word only;
with the padding on the button it fills the header cell, so the whole column heading is what you
press. Same reasoning as .cptbl-h on the Past Classes table, which is deliberately its twin. */
table.mtbl th { text-align:left; padding:0; border-bottom:1px solid var(--line); }
.mtbl-h { display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
font:inherit; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
color:var(--dim); font-weight:700; padding:0 12px 10px; }
.mtbl-h:hover { color:var(--text); }
.mtbl-h:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; border-radius:6px; }
/* No arrow glyph [her note]. aria-sort is the state, and this is what paints it. */
table.mtbl th[aria-sort] .mtbl-h { color:var(--text); }
table.mtbl td { padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.mtbl tr:last-child td { border-bottom:0; }
.mtbl-acts { width:52px; text-align:right; }
.mtbl-dash { color:var(--dimmer); }
/* The identity cell. `min-width:0` on the text column so a long display name ellipsises inside the
cell rather than pushing the table wider. */
.mtbl-id { display:flex; align-items:center; gap:11px; min-width:0; }
.mtbl-who { display:flex; flex-direction:column; min-width:0; }
.mtbl-name { font-weight:700; font-size:14.5px; line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mtbl-user { font-family:var(--mono); color:var(--dimmer); font-size:11.5px; line-height:1.3; }
.mtbl-you { font-weight:400; color:var(--dim); }
/* ๐ด THE TRACK PILL, REPROPORTIONED [her note: *"they're way too long and skinny"*]. Her standing
rule holds โ badges in one column share ONE width via min-width, so it cannot shrink for a short
track name โ and what was wrong was the OTHER axis. 124x24 is 5:1, a stretched lozenge; 12.5px
type with 10px of vertical padding and a 9px radius is nearer 2.6:1.
โ `box-sizing` is border-box globally here, so this min-width INCLUDES the padding. The mockup's
first pass used 96px against 22px of padding and "Programming" spilled out of its own background. */
.mtbl-trk { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
font-size:12.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
border-radius:9px; padding:10px 16px; min-width:118px; border:1px solid transparent; }
/* ๐ด THE ROLE RAMP. Dot AND text take one colour per tier [her ruling], and ALL TRACK LEADS SHARE
ONE COLOUR whatever their track โ deliberately not track_color_css(), which answers "which track",
the question the Track column already answers.
โ EVERY VALUE IS MEASURED, NOT PICKED: tests/ui/probe_role_contrast.py scores all three against
--panel in all 15 themes. That probe exists because this stylesheet already records the track
palette being chosen by eye and failing AA as text in four of them.
โ HER LITERAL REQUEST DID NOT SURVIVE THE MEASUREMENT. "A dimmer version of brand" for track leads
fails AA in pumpkinspice (4.12:1 at 42% into --dim, 4.43 at 30%) because that theme's brand is too
dark to go below the producer value. The fix is this file's own lift-only-as-far-as-needed trick,
the same shape track_color_css() uses: mix the dimmer brand, then lift toward --text by the
LARGEST share that still clears 4.5 everywhere. 85% is that share; pumpkinspice lands at 4.77.
Worst cases: producer 5.45, track lead 4.77, member 4.99. All AA, all 15 themes.
โ SENIORITY READS THROUGH HUE AND WEIGHT, NOT BRIGHTNESS, and that is forced rather than chosen โ
across 15 themes the ratios cannot be ordered consistently (pumpkinspice: producer 5.45, member
4.99; catalystcats: 6.51 against 6.97). Being brand-tinted at all versus grey is the signal. */
.mtbl-role { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; }
.mtbl-role i { width:8px; height:8px; border-radius:50%; flex:none; background:currentColor; }
.mtbl-role.role-top { color:color-mix(in srgb, var(--brand) 55%, var(--text)); font-weight:700; }
.mtbl-role.role-lead { color:color-mix(in srgb, color-mix(in srgb, var(--brand) 45%, var(--dim)) 85%, var(--text)); }
.mtbl-role.role-mem { color:var(--dim); font-weight:500; }
/* The โฎ and its menu. 44px on a touch device comes from the sweep's `.btn`/`.icobtn` rules; this is
its own control, so it carries the floor itself. */
.mtbl-menu { position:relative; display:inline-block; }
.mtbl-kebab { width:32px; height:32px; min-width:32px; border-radius:8px; border:1px solid transparent;
background:none; color:var(--dim); cursor:pointer; font-size:16px; line-height:1; }
.mtbl-kebab:hover, .mtbl-kebab[aria-expanded="true"] {
border-color:var(--line-hi); background:var(--panel-hi); color:var(--text); }
.mtbl-pop { position:absolute; right:0; top:38px; z-index:40; background:var(--panel-hi);
border:1px solid var(--line-hi); border-radius:10px; padding:6px; min-width:196px;
box-shadow:0 14px 34px -10px rgba(0,0,0,.6); text-align:left; }
.mtbl-pop[hidden] { display:none; }
/* Opens upward instead, when mtblMenu() has measured that downward would run off the bottom. The
38px mirrors the downward offset so the gap between button and menu is the same either way. */
.mtbl-pop.flipup { top:auto; bottom:38px; }
.mtbl-item { display:block; width:100%; background:none; border:0; color:var(--text);
font:600 13px var(--sans); padding:9px 10px; border-radius:7px; cursor:pointer; text-align:left; }
.mtbl-item:hover { background:var(--panel); }
.mtbl-item.mtbl-amber { color:var(--amber); }
.mtbl-item.mtbl-ok { color:var(--green); }
/* ๐ด `.mtbl-red`, `.mtbl-pop-wide`, `.mtbl-lbl` and `.mtbl-pop .astatus` ALL WENT ON 2026-08-28.
They existed for a teacher menu that held a labelled five-option attendance select and a red
"Remove from team" item. Her ruling replaced the select with the same two toggles the leads get
and moved the wizard out to its own button, so the teacher's menu is now the SAME SHAPE as the
student's and needs no extra width, no section label and no red item. Removed rather than left
behind: a rule with no markup reads to the next person as though the control still exists, which
is the exact trap `.rolesplus` set on 2026-08-24. */
/* ---------- the TEACHER's roster, which is .mtbl plus two controls ----------
Everything else about the table -- widths, the identity cell, the kebab -- is inherited, which is
the point: the two pages must not drift into two tables. */
.tstbl .tssel { width:100%; max-width:190px; margin:0; padding:6px 30px 6px 11px; font-size:13px; }
/* ๐ด THE WIZARD BUTTON IS AMBER, NOT RED, AND THAT IS A MEANING RATHER THAN A PREFERENCE
[her call 2026-08-28: *"It could go yellow/amber on hover though if we wanted."*].
`appConfirm()` (app/ui.php) already runs three tiers and names them: **red = truly destructive,
amber = proceed-with-awareness, green = a good thing is about to happen.** This button opens
Change Team / Merge with Duplicate Username / Remove From Class, which is proceed-with-awareness
almost by definition. So this is the app's existing vocabulary used correctly, not a new colour.
โ IT HAS TO OVERRIDE, NOT EDIT, `.icobtn:hover`. That rule paints red and is UNSCOPED, because
until now every `.icobtn` on this surface was a trash can โ changing it would silently repaint
every one of them on the Teams page. Scoped here instead.
โ The 44x44 floor comes from `.icobtn` in the (pointer:coarse) block at the end of this file, so
the finger target is already handled and must not be re-specified here. */
.tsmove:hover, .tsmove:focus-visible { color:var(--amber); }
/* Enough gap that the โฎ and the person are two controls rather than one smudge, and the action cell
widens to hold both. */
.tstbl .mtbl-acts { width:92px; }
.tsmove { margin-right:2px; vertical-align:middle; }
/* A control in a cell must not set the row height on its own; the identity cell's 34px avatar does. */
.tstbl td { padding-top:7px; padding-bottom:7px; }
@media (pointer:coarse) { .tstbl .tssel { min-height:44px; } }
/* ๐ด A COLUMN HEADING IS A TAP TARGET NOW [caught by tests/ui/t_taptargets.py the run after the
headers became buttons: `mtbl-h 160x27`, three of them on /roster.php at 390x844]. Wide enough and
27px tall, which is over the 24px AA floor and well under the 44px figure this app holds itself to
wherever the pointer is a finger. The padding-bottom that gives the header its gap under the label
is what makes `min-height` the right lever: it grows the box, not the text's position. */
@media (pointer:coarse) {
.mtbl-kebab { min-width:44px; min-height:44px; }
.mtbl-item { min-height:44px; }
.mtbl-h, .cptbl-h { min-height:44px; }
}
/* ============================================================================================
HELP QUEUE CARDS [2026-09-02, her redesign]. Replaces the single-line `.hqrow` flex row --
*"right now it's just one giant long line of text... I want it taller"* -- with a card that
carries the person block, the question at reading size, and a left rail holding queue position
and wait time.
APPENDED, NOT EDITED IN PLACE. The old `.hqrow` rules (~3961, ~5311-5590) still style the
Follow-Ups rows, which keep the one-line shape. `.hqcard` re-declares only what it must and
wins on source order. Every `.hqcard` also carries `.hqrow` so the block filter's
`.hqrow[data-blk]` selector keeps working.
============================================================================================ */
.hqcard {
display:grid; grid-template-columns:64px 1fr; gap:0 16px;
align-items:start; flex-wrap:nowrap; /* override .hqrow's flex row */
background:var(--panel); border:1px solid var(--line); border-radius:10px;
padding:14px 16px 14px 0; position:relative; overflow:hidden;
}
/* Severity reads DOWN A RAIL rather than as a glow around the whole row -- faster to scan in a
list of six, and it does not fight the route badges for attention. */
.hqcard::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--line-hi); }
.hqcard.esc::before { background:var(--red); }
.hqcard.esc { border-color:color-mix(in srgb, var(--red) 42%, var(--line)); }
.hqcard.held::before { background:var(--accent-3); }
.hqcard.held { background:color-mix(in srgb, var(--panel) 82%, var(--bg-deep)); }
.hqcard.urgentrow::before { background:var(--red); }
/* your own claim: the one card allowed to glow, and it sits above the filter anyway */
.hqcard.mine { border-color:color-mix(in srgb, var(--brand) 46%, var(--line));
box-shadow:0 0 22px -6px color-mix(in srgb, var(--brand) 46%, transparent); }
.hqcard.mine::before { background:var(--brand); }
.hqrail { grid-row:1 / 4; display:flex; flex-direction:column; align-items:center;
gap:7px; padding:2px 0 0 3px; align-self:stretch; border-right:1px solid var(--line); }
.hqpos { font:700 15px var(--mono); color:var(--dimmer); font-variant-numeric:tabular-nums; }
/* .qtime rides along for the JS clock + its colour bands; this re-sizes it for the rail and
undoes the fixed 74/84px widths that rule sets for the old row. */
.hqcard .hqwait { font:700 20px/1 var(--mono); font-variant-numeric:tabular-nums;
min-width:0; flex:0 0 auto; text-align:center; }
.hqcard .hqwait .u { display:block; font:500 9.5px var(--mono); letter-spacing:.13em;
text-transform:uppercase; color:var(--dimmer); margin-top:4px; }
.hqhead { grid-column:2; display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; min-width:0; }
.hqchips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-left:auto; }
.tt-loc { color:var(--dim); border-color:var(--line-hi); background:transparent; }
.tt-held { color:var(--accent-3); border-color:color-mix(in srgb, var(--accent-3) 34%, transparent);
background:color-mix(in srgb, var(--accent-3) 12%, transparent); }
/* the question, given room to actually be read */
.hqq { grid-column:2; margin-top:12px; background:var(--panel-hi);
border:1px solid var(--line); border-left:2px solid var(--line-hi);
border-radius:7px; padding:13px 16px; display:flex; flex-direction:column; gap:6px; }
.hqcard.esc .hqq { border-left-color:color-mix(in srgb, var(--red) 55%, var(--line-hi)); }
.hqkind { font:10.5px var(--mono); letter-spacing:.11em; text-transform:uppercase; color:var(--dimmer); }
.hqtext { margin:0; font-size:15.5px; line-height:1.55; color:var(--text); max-width:72ch;
overflow-wrap:anywhere; }
.hqfoot { grid-column:2; display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.hqcard .qwait { flex:0 1 auto; margin-right:auto; text-align:left; white-space:normal;
font-family:var(--mono); font-size:12.5px; }
/* "you" is the whole point of the line, so it takes the theme's brightest token; a claimer who is
NOT you takes a different one, so colour alone answers "is this mine?" */
.hl-you { color:var(--brand); font-weight:700; }
.hl-who { color:var(--accent-3); font-weight:700; }
/* Claim on a non-escalated row and Done are primary-but-calm: brand, not the red used for
escalated claims. `.btn-redfill` already exists; this is its quiet twin. */
.btn-brandfill { background:var(--brand); border-color:var(--brand); color:var(--brand-ink); }
.btn-brandfill:hover { background:color-mix(in srgb, var(--brand) 84%, #000); border-color:var(--brand); }
.qcap-mine { margin-bottom:18px; }
.hqfilter { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:16px 0 12px; }
.hqfilter .n { opacity:.7; margin-left:5px; font-variant-numeric:tabular-nums; }
@media (max-width:640px) {
.hqcard { grid-template-columns:54px 1fr; padding-right:12px; }
.hqchips { margin-left:0; }
.hqcard .qwait { flex:1 1 100%; margin-right:0; }
}
/* ---- HELP QUEUE ON A PHONE [2026-09-02, her ruling] --------------------------------------
The teacher works the queue while circulating, and student leads work it from their own
phones. Both reverse MOBILE_BUILD_PLAN ยง7's "no queue monitoring on a phone for anyone";
see her 2026-09-02 note there and in public/helpqueue.php.
KEYED TO THE SAME TEST THE PHONE WALL MAKES (<=520px AND a coarse pointer), not to width
alone -- a low-vision teacher at 400% browser zoom on a laptop is not on a phone and must
keep the full desktop layout. `.desk-only` is exactly this pair, and these rules have to
agree with it or the two disagree about what "phone" means.
------------------------------------------------------------------------------------------ */
@media (max-width:520px) and (pointer:coarse) {
/* The rail stops being a column and becomes a header strip: 64px of vertical gutter is a lot
on a 390px screen, and position + time read fine side by side. */
.hqcard { grid-template-columns:1fr; gap:0; padding:12px 13px; }
.hqrail { grid-row:auto; grid-column:1; flex-direction:row; align-items:baseline;
gap:10px; border-right:0; border-bottom:1px solid var(--line);
padding:0 0 9px; margin-bottom:10px; }
.hqcard .hqwait { font-size:17px; margin-left:auto; }
.hqcard .hqwait .u { display:inline; margin:0 0 0 4px; font-size:9px; }
.hqhead, .hqq, .hqfoot { grid-column:1; }
.hqq { padding:11px 12px; }
.hqtext { font-size:14.5px; }
.hqchips { margin-left:0; }
.hqcard .qwait { flex:1 1 100%; margin:0 0 4px; }
/* 44px targets: operated one-handed, standing up, mid-classroom. `.btn-sm` is a desk size. */
.hqfoot .btn, .helping .btn, .lqwrap .btn {
min-height:44px; min-width:96px; flex:1 1 auto; font-size:14px; padding:0 14px;
}
.hqfoot { gap:8px; }
/* The lead's ON IT box is a row of three controls on desktop; stack it so each is tappable. */
.helping > div:last-child { flex-wrap:wrap; }
.helping .qright { display:flex; gap:8px; flex-wrap:wrap; width:100%; }
/* Filter pills wrap rather than scrolling off the edge. */
.hqfilter { gap:6px; margin:12px 0 10px; }
.hqfilter .fchip { min-height:38px; }
}
/* ---- UPCOMING LEAVE STRIP [2026-09-02] -----------------------------------------------------
One row per real CLASS DAY for this team, not a month grid. See upcoming_leave_html()'s
docblock for why: on an A/B schedule half a month's cells are days the team never meets, so a
blank square would mean "no class" and "nobody out" at the same time.
SPARSE IS THE POINT. Clear days are deliberately thin and low-contrast; a day carrying someone
gets the panel fill, the accent rail and the full-weight date. Scanning it should be "where are
the heavy rows", not "read fourteen dates".
-------------------------------------------------------------------------------------------- */
.ulv { display:flex; flex-direction:column; gap:4px; max-height:52vh; overflow-y:auto; }
.ulv-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:7px;
border:1px solid transparent; min-height:34px; }
/* a clear day: no fill, no border, just a quiet line of text */
.ulv-row .ulv-d { font-family:var(--mono); font-size:12.5px; color:var(--dimmer);
min-width:82px; font-variant-numeric:tabular-nums; }
.ulv-none { font-size:12.5px; color:var(--dimmer); opacity:.6; }
/* a day someone is out: this is what you are scanning for */
.ulv-row.has { background:var(--panel); border-color:var(--line);
border-left:2px solid var(--accent-2); padding-left:12px; }
.ulv-row.has .ulv-d { color:var(--text); font-weight:600; }
.ulv-row.today { border-color:color-mix(in srgb, var(--brand) 42%, var(--line));
background:color-mix(in srgb, var(--brand) 7%, transparent); }
.ulv-row.today.has { border-left-color:var(--brand); }
.ulv-tag { font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
color:var(--brand); border:1px solid color-mix(in srgb, var(--brand) 40%, transparent);
border-radius:99px; padding:2px 7px; white-space:nowrap; }
.ulv-who { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto;
justify-content:flex-end; }
.ulv-p { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text); }
.ulv-p .avatar { flex-shrink:0; }
@media (max-width:520px) and (pointer:coarse) {
.ulv-row { flex-wrap:wrap; }
.ulv-who { margin-left:0; justify-content:flex-start; width:100%; }
.ulv-row.has { padding-top:9px; padding-bottom:9px; }
}