` as a single-button wrapper inside other flex rows (.sess__actions, .section-edit__actions, …); flexing it globally would break those rows. ========================================================================== */ @media (max-width: 600px) { .page-head .inline { display: flex; flex-wrap: wrap; gap: var(--sp-2); width: 100%; margin-top: var(--sp-3); /* separate from the title block it wraps under */ } .page-head .inline > .btn, .page-head .inline > form > .btn { flex: 1 1 auto; /* share the row; full-width when alone */ min-height: 44px; /* comfortable tap target even for .btn--sm */ } } /* Tidy alignment: an

inside a row-between carries a 16px bottom margin (h2{margin:0 0 16px} / .section-card h2) which offsets it from the trailing button. Zero it only in this flex context. / .row-between > h2 { margin-bottom: 0; } / ========================================================================== 4. TYPOGRAPHY SCALE (phones) Existing: h1 1.85 (720:2.15, 600:1.62). h2 1.35 (600:1.25). h3 1.18. Reason: base is already sensible. Only nudge the leading tighter on phones so multi-line serif headings feel intentional, not loose. ========================================================================== / @media (max-width: 600px) { h1 { line-height: 1.15; } h2 { line-height: 1.2; } } / ========================================================================== 5. BUTTONS & TAP TARGETS (backbone — other agents defer here) Existing: .btn{padding:10px 18px;font-size:.92rem} → ~40px tall. .btn--sm{padding:6px 12px} → ~30px tall. .icon-btn{width:32px;height:32px}. @media(max-width:380px){.btn{padding:9px 14px}} Problem: none of these hit the 44px minimum touch target on phones. Fix: enforce min-heights on phones. Keep the visual padding, just guarantee the hit area. icon-btn grows to a square 44. .btn--sm stays visually small but becomes reliably tappable. ========================================================================== / @media (max-width: 600px) { .btn { min-height: 44px; } .btn--sm { min-height: 40px; } / still compact, still tappable / .icon-btn { width: 44px; height: 44px; } / was 32×32 / / Segmented attendance control + chips are interactive too — give them room. / .segbtn { padding-top: 10px; padding-bottom: 10px; } / was 7px 12px / .attend-opt span { padding-top: 8px; padding-bottom: 8px; } / was 5px 12px / .chip { padding-top: 8px; padding-bottom: 8px; } .cal-chip { padding-top: 9px; padding-bottom: 9px; } } / Very-narrow safety for the 380 rule already in styles.css: keep the enforced min-height even though padding shrinks (min-height wins, so nothing to do — documented here so the integrator doesn't reintroduce a shrink that beats it). / / ========================================================================== 6. STAT GRID Existing: .stat-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .stat-grid--4/--5 use minmax(150/140). @media(max-width:380px){.statvalue{font-size:1.7rem}} Behaviour: at 360px (≈332px inner) this already yields a tidy 2 columns — the desired "collapse to 1–2 columns". No structural change needed. Only make the big serif value never overflow its cell and keep 2-up gaps calm on phones. ========================================================================== / @media (max-width: 600px) { .stat-grid, .stat-grid--4, .stat-grid--5 { gap: var(--sp-3); } .statvalue { line-height: 1.05; overflow-wrap: anywhere; } } / Ultra-narrow: a single clean column reads better than two cramped ones. / @media (max-width: 340px) { .stat-grid, .stat-grid--4, .stat-grid--5 { grid-template-columns: minmax(0, 1fr); } } / ========================================================================== 7. GRID-2 / GRID-3 (generic content grids) Existing: .grid-2 → 1fr, 2 cols @640. .grid-3 → 1fr, 3 cols @560. Behaviour: both are already single-column on phones (correct). .grid-3 jumps 1→3 at 560px which is fine inside the schedule modal it serves. No override needed; documented so the integrator knows it was reviewed and left as-is. ========================================================================== / / (intentionally no rules — base behaviour is already correct on phones) / / ========================================================================== 8. LIST / LISTROW / LISTMAIN / LISTACTIONS Existing: .listrow{display:flex;...;flex-wrap:wrap} .listmain{flex:1;min-width:0} .listactions{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end} @media(max-width:600px){.listactions{width:100%;justify-content:flex-start;margin-top:6px}} Behaviour: rows already keep name+avatar on line 1 and drop actions to a full line 2 on phones — exactly right. Refinements: (a) give the wrapped actions a little more breathing room, (b) let the action buttons in that full-width row grow so the 44px targets space out evenly instead of hugging the left edge. ========================================================================== / @media (max-width: 600px) { .listactions { gap: var(--sp-2); margin-top: var(--sp-2); } / Text buttons in the wrapped action row share the width evenly; icon-only buttons keep their fixed 44px square (they are not .btn). / .listactions > .btn, .listactions > form > .btn { flex: 1 1 auto; } } / ========================================================================== 9. CARD / SECTION-CARD (padding tuned for phones) Existing: .card{padding:24px}. .section-card{padding:22px}. @media(max-width:600px){.card,.section-card{padding:18px}} Reason: 18px is good at 375px; at <=380px shave to 16px so content width is maximised and nested grids/lists don't feel boxed in. ========================================================================== / @media (max-width: 380px) { .card, .section-card { padding: 16px; } } / ========================================================================== 10. INLINE-FORM (search / filter rows) Existing: .inline-form{display:flex;gap:8px;flex-wrap:wrap} .inline-form input{width:auto;flex:1;min-width:160px} Problem: the 160px min-width can force an overflow on the very narrowest phones before the wrap kicks in. Let the input shrink fully on tiny screens. ========================================================================== / @media (max-width: 420px) { .inline-form input { min-width: 0; } .inline-form .btn { flex: 1 1 auto; } / full-width submit under the input / } / ========================================================================== 11. TABLES (required safety net) Existing: there are currently NO elements in any view, and no overflow wrapper class exists. This block is DEFENSIVE so that the body can never scroll horizontally the moment anyone adds a table. NOTE for other agents: if you introduce a
, wrap it in
…
. The wrapper — not the page — takes the horizontal scroll. ========================================================================== / table { width: 100%; max-width: 100%; border-collapse: collapse; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .table-scroll > table { min-width: 480px; } / let columns keep their width inside the scroller / / ========================================================================== 12. PILL / MISC INLINE TOKENS Existing: .pill{...;white-space:nowrap}. Already safe (won't wrap-break). Reason: only ensure a run of pills/meta separated by "·" wraps as a group rather than pushing width. mini-rowmeta is nowrap by design; allow it to wrap on phones so long "status · facilitator · N students" strings don't force horizontal scroll. Existing: .mini-rowmeta{white-space:nowrap;text-align:right} ========================================================================== / @media (max-width: 600px) { .mini-rowmeta { white-space: normal; } } / ========================================================================== 13. MODAL FOOTERS / ACTION ROWS IN STACKS Existing: .modalfoot{justify-content:flex-end}. .row-end{justify-content:flex-end}. Reason: in a narrow modal a right-aligned Cancel/Save pair can crowd; on phones let them span the row so each is a full, evenly-sized target. Modal chrome itself is owned by another agent — this only touches the shared .row-end / .modalfoot action primitives. ========================================================================== / @media (max-width: 480px) { .row-end, .modalfoot { flex-wrap: wrap; } .modalfoot { gap: var(--sp-2); } .modalfoot > .btn { flex: 1 1 auto; min-height: 44px; } } / ========================= nav.css ========================= / / ===================================================================== MOBILE CHROME POLISH — nav / header / footer / crumbs Scope: views/partials/{header,nav,crumbs,footer}.ejs Target: phones 360–430px first, then tablet (768px). CSS-only — NO JavaScript (the existing bottom tab bar means no hamburger toggle is needed). Reuses the design tokens from styles.css :root. >>> INTEGRATOR: include this file AFTER public/css/styles.css so the media-query overrides below (equal specificity) win the cascade. <<< ===================================================================== / / --------------------------------------------------------------------- 1. TOPBAR — restore the missing horizontal padding + honor notches OVERRIDE of styles.css line 129: .topbarinner{ ... padding:12px var(--sp-5); ... } WHY: `--sp-5` is NOT defined in :root (the scale is sp-1,2,3,4,6,8 — it skips 5). `var(--sp-5)` therefore resolves invalid-at-computed-value and the whole `padding` declaration collapses to its initial 0. Result: the brand and the Sign-out button sit flush against the screen edges on every width. Replace with a real value and add safe-area insets (the header uses viewport-fit=cover, so content can slide under a notch in landscape). --------------------------------------------------------------------- / .topbarinner{ padding:12px 16px; / was 12px var(--sp-5) / padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); } / Sticky bar clears the status-bar / notch when viewport-fit=cover. / .topbar{ padding-top:env(safe-area-inset-top); } / --------------------------------------------------------------------- 2. BRAND — never wrap. On desktop the brand keeps its full width (.topbar .brand{flex:0 0 auto}), so the wordmark is never clipped. Only on phones (≤720px) do we let it ellipsize as a last resort next to Sign out. --------------------------------------------------------------------- / @media(max-width:720px){ .brand{ min-width:0; } .topbar .brand{ flex:1 1 auto; min-width:0; } .topbar .brandword{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } / ===================================================================== 3. PHONES (max-width:720px) — the mobile chrome regime: top brand bar + fixed bottom tab bar (topnav is already hidden here). ===================================================================== / @media(max-width:720px){ / --- Role badge + Sign out ------------------------------------------ OVERRIDE of styles.css line 631: @media(max-width:720px){ .topbaruser{display:none;} } WHY: that rule hides the ENTIRE user block, so the role badge (DIRECTOR / STUDENT / …) disappears on mobile and the top-right loses all hierarchy. Instead we keep a compact role pill and hide only the long name/email (which does not fit next to Sign out on a phone). NOTE: relies on the name being wrapped in `.topbarusername` (structural edit made in views/partials/header.ejs). / .topbaruser{ display:inline-flex; align-items:center; gap:0; } .topbarusername{ display:none; } .role-pill{ font-size:.62rem; padding:3px 9px; } .topbarright{ gap:10px; } / Sign-out: comfortable ≥44px thumb target. OVERRIDE (scoped to the topbar) of styles.css line 71: .btn--sm{ padding:6px 12px; ... } → too short to tap on a phone. / .topbarright .btn--sm{ min-height:44px; display:inline-flex; align-items:center; padding:8px 15px; } / --- Bottom tab bar = the primary mobile nav (CSS-only, no JS) ------- Generous tap targets; labels stay on one line and truncate rather than wrap/overflow when a role has several items (director = 5). / .bottomnavlink{ min-height:52px; justify-content:center; gap:3px; } .bottomnavlink > span:last-child{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bottomnavlink:active{ background:var(--primary-soft); } / press feedback / / A director now has eight links. An equal share of a 390px phone is ~44px, at which every label collapses to an ellipsis and the icons crowd. Give each item a readable floor and let the BAR scroll instead — with few items `flex:1 0 auto` still spreads them across the full width, so nothing changes for a student (3) or a facilitator (2). / .bottomnav{ overflow-x:auto; scrollbar-width:none; } .bottomnav::-webkit-scrollbar{ display:none; } .bottomnavlink{ flex:1 0 auto; min-width:66px; } / --- Breadcrumb: roomier line + taller tap targets ------------------ / .crumbs{ gap:6px 8px; font-size:.82rem; margin-bottom:12px; } .crumbslink{ padding:4px 0; } } / ===================================================================== 4. NARROW PHONES (max-width:420px) — reclaim a little width. ===================================================================== / @media(max-width:420px){ .topbar .brandword{ font-size:1.18rem; } / was 1.35rem @topbar / .topbar .brandmark{ height:32px; } / was 36px / .bottomnavlink{ font-size:.66rem; padding:8px 4px; } .bottomnavicon .ico{ width:22px; height:22px; } / was 23px / } / ===================================================================== 5. TABLET (720–899px) — keep the comfortable mobile chrome. OVERRIDE of styles.css line 287: @media(min-width:720px){ .topnav{display:flex} .bottomnav{display:none} ... } WHY: at 720px the desktop top-nav takes over, but the full text nav (up to 5 role links) + brand + username + Sign out do NOT fit on one row until ~1000px+, causing horizontal overflow on ~768–834px tablets (iPad mini/Air/Pro portrait). Keep the top brand bar + bottom tab bar through 899px; the top-right now has room to show the full username too. >>> See findings: the top text-nav still risks overflow in the 900–1000px band — that is the pre-existing desktop layout, left untouched here. <<< --------------------------------------------------------------------- / @media(min-width:720px) and (max-width:899px){ .topnav{ display:none; } .bottomnav{ display:flex; } .container{ padding-bottom:92px; } / re-clear the fixed bottom bar / } / --------------------------------------------------------------------- 5b. DESKTOP HEADER — the 900–1030px overflow the note above flagged. Measured on /director at 900px: .topbarinner needs 1026px, so `document.documentElement.scrollWidth` = 1026 vs a 900px viewport and .topbarright (with the Sign-out button, 947→1026) sits entirely OFF screen — elementFromPoint over Sign out returns null. Same unreachable Sign-out failure as B3, just in the 900–1030 band (iPad landscape, 1024x768 laptops). Cause: EVERY child of the flex row refuses to shrink — .topbar .brand{flex:0 0 auto} (:130), .topnavlink{flex:0 0 auto} (:133), .topbarright{flex:0 0 auto} (:139) — so the row simply overflows instead of adapting. Fix: make the link row the flexible element (it is the only one that can degrade gracefully) and let it scroll horizontally inside the bar, and drop the long name in the tight band — the role pill stays. Sign out is then always on screen. Nothing changes at >=1040px, where it already fit. --------------------------------------------------------------------- / @media(min-width:900px){ .topnav{ flex:0 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; } .topnav::-webkit-scrollbar{ display:none; } } @media(min-width:900px) and (max-width:1039px){ .topbarusername{ display:none; } / role pill is enough at this width / } / ========================= modals-forms.css ========================= / / ============================================================================= MOBILE POLISH — MODALS & FORM CONTROLS (additive, CSS-only) Scope: .modal* / .confirm-* / .field / inputs / quiz BUILDER (.quiz-,.qb-) / student quiz popup (.sq-). No .ejs edits, no JS. Design system: reuses :root tokens from styles.css (--sp-, --primary, --border, --r-input, --danger, etc). Breakpoints follow the app: 720 / 520 / 420. Load this AFTER styles.css so these rules win on equal specificity. Each block notes the base rule in styles.css it overrides and why. ============================================================================= / / ----------------------------------------------------------------------------- 1. TOUCH-COMFORT BASELINE FOR FORM CONTROLS (applies on phones & tablets) Base: styles.css:77-78 sets inputs to padding:11px 13px (~40px tall) and font:inherit. On touch we want >=44px targets and 16px text so iOS Safari does NOT auto-zoom when a field is focused. --------------------------------------------------------------------------------/ @media (max-width:720px){ .modal input:not([type="radio"]):not([type="checkbox"]), .modal select, .modal textarea, .field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea{ font-size:16px; / prevent iOS focus-zoom (base was font:inherit) / min-height:44px; / comfortable tap target (base was ~40px) / padding-top:12px;padding-bottom:12px; } .field textarea, .modal textarea{ min-height:96px; } / multi-line breathing room / .field select, .modal select{ / keep native chevron reachable; leave room so text never sits under it / padding-right:36px; } / Full-bleed labels stack tightly; give the label a touch more contrast size / .fieldlabel{ font-size:.85rem; } } / ----------------------------------------------------------------------------- 2. MODAL SHELL — never exceed viewport, cap height, body scrolls internally Base: styles.css:276 .modal{width:100%;max-width:480px;max-height:90vh} styles.css:640-651 (max-width:600px) already tightens overlay padding to 12px and max-height:92dvh. We make the width explicit as min(cap,92vw) and centre it, and harden the internal scroll so the head stays put while only the body scrolls. --------------------------------------------------------------------------------/ @media (max-width:520px){ .modal-overlay{ padding:12px; } / reinforce 600px rule at phone tier / .modal{ width:min(480px,92vw); / explicit, centred, no h-scroll / max-width:92vw; max-height:92dvh; margin:0 auto; } .modal--wide{ width:min(640px,92vw); max-width:92vw; } / base 1497: width:min(640px,94vw) / / Head is fixed; body is the only scroll region. Base: styles.css:280 already sets body overflow-y:auto — we make the head non-shrinking so long bodies don't squeeze the title, and add momentum scrolling. / .modalhead{ flex:0 0 auto; padding:14px 16px; } .modalbody{ flex:1 1 auto; padding:16px; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; / trap scroll inside the modal / } .modaltitle{ font-size:1rem; line-height:1.3; } } / ----------------------------------------------------------------------------- 3. MODAL ACTION ROWS — foot buttons stack full-width on phones Base: styles.css:1259 .modalfoot{display:flex;justify-content:flex-end} Also the "submit" rows use the generic .row-end (styles.css:99) inside the modal body (e.g. session Add-homework / Add-quiz). Both must become full-width, comfortably tall, primary-on-top stacks on phones. NOTE: .row-end is a shared class, so we ONLY touch it inside .modal to avoid disturbing other pages owned by other agents. --------------------------------------------------------------------------------/ @media (max-width:520px){ .modalfoot, .modalbody .row-end, .modalbody .row-end.gap{ display:flex; flex-direction:column-reverse; / primary (last in DOM) sits on top / align-items:stretch; gap:10px; margin-top:16px; } .modalfoot > .btn, .modalbody .row-end > .btn{ width:100%; min-height:46px; padding:12px 16px; / base .btn is 9-10px vertical on phone / justify-content:center; } } / ----------------------------------------------------------------------------- 4. CONFIRM DIALOG — comfortable, no cramped side-by-side on tiny screens Base: styles.css:1604 .confirm-modal{max-width:400px;width:min(400px,92vw)} styles.css:1609 actions=flex center; :1610 .btn{min-width:110px} --------------------------------------------------------------------------------/ @media (max-width:520px){ .confirm-modal{ width:min(400px,92vw); padding:24px 20px; } .confirm-modalmsg{ font-size:1rem; } .confirm-modalactions{ gap:10px; } .confirm-modalactions .btn{ flex:1 1 0; min-width:0; / base 110px min could overflow at 320px / min-height:46px; padding:12px 14px; } } @media (max-width:420px){ / At the tight tier, stack so each action is a full-width, unmissable target / .confirm-modalactions{ flex-direction:column-reverse; } .confirm-modalactions .btn{ width:100%; } } / ----------------------------------------------------------------------------- 5. QUIZ BUILDER (staff) — dense card must breathe on a 360px phone Base: styles.css:1499-1507 (.quiz-build/.quiz-q/.quiz-qtype/.qb-choice/ .quiz-qtf/.qb-tf). The header row (type-select + Remove) can crowd, and the fixed 220px select + 24px TF gap waste width on a phone. --------------------------------------------------------------------------------/ @media (max-width:520px){ .quiz-build{ gap:12px; margin:12px 0; } .quiz-q{ padding:14px; gap:10px; } / Header: let the type-select take the row and Remove wrap tidily beside it / .quiz-q > .row-between{ flex-wrap:wrap; gap:8px; } .quiz-qtype{ max-width:none; / base 1501 caps at 220px / flex:1 1 160px; min-width:0; } .quiz-q > .row-between > .btn{ flex:0 0 auto; } / Choice rows: radio + text input; keep radio a solid 44px-tall tap zone while the text field stays flexible and never overflows. / .qb-choice{ gap:10px; align-items:center; } .qb-choiceradio{ width:22px;height:22px; / base 20px — a touch bigger for touch / margin:0; } .qb-choicetext{ flex:1 1 auto; min-width:0; } / min-width:0 stops overflow / .qb-choices-head{ line-height:1.4; } .qb-choices-head .small{ display:inline-block; } / helper text wraps under label cleanly / / True/False: comfortable spacing + big tap labels, wrap if needed / .quiz-qtf{ gap:16px; flex-wrap:wrap; } / base 24px / .qb-tf{ min-height:44px; padding:4px 2px; } / whole label is tappable / } @media (max-width:420px){ .quiz-q{ padding:12px; } .quiz-qtf{ gap:12px; } } / ----------------------------------------------------------------------------- 6. STUDENT QUIZ-TAKING POPUP (.sq-) — centred, generous, full-width choices Base: styles.css:1529-1548. Widths are capped (380/460/520) for desktop; on phones those caps are fine but we want choices to fill the width and be tall enough to tap, and the submit button to be a full-width target. --------------------------------------------------------------------------------/ @media (max-width:520px){ .sq-modal .modalbody{ max-width:100%; } /* base 520px cap → fill phone / .sq-q{ max-width:100%; padding:14px; } / base 460px cap / .sq-choices{ max-width:100%; gap:10px; } / base 380px cap / .sq-choice{ padding:14px 16px; min-height:48px; / big, easy answer target / align-items:center; } .sq-choice input[type="radio"]{ width:22px;height:22px; } .sq-opts{ max-width:100%; } / review list fills width / .sq-q textarea{ min-height:120px; } / short-answer writing room / .sq-formsubmit{ margin-top:14px; } .sq-formsubmit .btn{ width:100%; min-height:48px; } } / ----------------------------------------------------------------------------- 7. TABLET TOUCH-UP (768px) — modals get a sensible cap, not edge-to-edge Base: styles.css:276 max-width:480px / :1497 wide 640px already apply; here we just keep comfortable overlay gutters and internal scroll on tablets. --------------------------------------------------------------------------------/ @media (min-width:521px) and (max-width:768px){ .modal-overlay{ padding:24px; } .modal{ max-height:88dvh; } .modalbody{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } / Foot stays inline on tablet but guarantee a decent tap height / .modalfoot > .btn{ min-height:44px; } .confirm-modalactions .btn{ min-height:44px; } } / ========================= landing-auth.css ========================= / / ========================================================================== MOBILE POLISH — public landing + auth pages Scope: body.landing (landing.ejs) and body.auth (login/signup/forgot/ reset/error). Additive only. Intended to load AFTER public/css/styles.css (append to that file, or it after styles.css) so source-order wins where specificity ties. Follows the existing breakpoint convention: max-width 720 / 520 / 420. The one exception is the hero-centering block at max-width:860px — that is the exact width at which the hero collapses from two columns to one (styles.css line 949 `@media(min-width:860px)`), so centering must begin there, not at 720, to avoid a left-aligned single-column gap on landscape tablets. OVERRIDES OF EXISTING SELECTORS ARE NOTED INLINE (— overrides: …). New classes are namespaced `m-` (none required so far — all fixes reuse existing hooks, so no .ejs structural edits were necessary). ========================================================================== / / ========================================================================== 1) HERO — center + tighten on phones/tablets (single-column range) Problem: in the single-column layout the hero text (eyebrow, title, lead, CTAs, facts) is left-aligned and the CTAs don't stretch, so the most important content reads ragged and the buttons look undersized on a phone. ========================================================================== / @media (max-width:860px){ / Turn the text block into a centered column so every child lines up. / .herotext{ / — no prior text-align rule; additive / text-align:center; display:flex; flex-direction:column; align-items:center; } .herolead{ / — overrides margins + width on styles.css:756 / margin-left:auto; margin-right:auto; max-width:min(44ch,100%); / 44ch overflows a phone; cap to container / } / CTAs: centered and comfortably full-width (capped so they don't sprawl on wide tablets). Pairs with styles.css:966 (.btn--lg{flex:1 1 100%}). / .heroactions{ / — adds width/justify to styles.css:756 / justify-content:center; width:100%; max-width:360px; } / Proof facts: centered row that wraps tidily under the CTAs. / .herofacts{ / — adds justify to styles.css:759 / justify-content:center; text-align:center; } .herofacts li{align-items:center;} } / Large phones: slightly calmer medallion + snug rhythm. / @media (max-width:520px){ .medallion{width:min(272px,68vw);} / — overrides styles.css:964 (300/72vw) / .herofacts{gap:16px 26px;} / — overrides styles.css:967 / } / Small phones (≤420): guarantee the display title never overflows and trim the visual so the value proposition sits higher. / @media (max-width:420px){ .hero{padding:80px 18px 56px;} / — overrides styles.css:961; top clears fixed nav / .herotitle{font-size:clamp(2.35rem,9vw,2.9rem);} / — overrides clamp on styles.css:749 / .herolead{font-size:1rem;margin-bottom:22px;} / — overrides styles.css:755/965 / .medallion{width:min(232px,62vw);} .herofacts b{font-size:1.5rem;} / — overrides styles.css:968 / } / ========================================================================== 2) NAV — keep brand + Sign-in comfortable on narrow phones Problem: at ~360px the serif brand word + logo + button can crowd the bar. ========================================================================== / @media (max-width:420px){ .lp-navinner{padding:12px 16px;gap:12px;} / — overrides styles.css:698 / .lp-nav .brandword{font-size:1.12rem;} / — overrides styles.css:701 / .lp-nav .brandmark{height:34px;} .lp-navcta .btn--sm{padding:8px 14px;} / bump tap target ~34→38px / } / ========================================================================== 3) "WHAT THE PROGRAM COVERS" — icon cards Already stacks to 1 col (phone) / 2 col (tablet) via auto-fit minmax(250). Just calm the icon badge a touch on phones so it doesn't dominate the card. ========================================================================== / @media (max-width:520px){ .cover{padding:26px 22px;} / — overrides styles.css:1349 / .covericon{width:72px;height:72px;margin-bottom:16px;} / — overrides styles.css:1651 / .covericon img{width:42px;height:42px;} / — overrides styles.css:1340 / } / ========================================================================== 4) FOOTER — center for a calm, balanced close on phones Problem: stacked footer (styles.css:979) stays left-aligned and the brand column is capped at 34ch, so it looks lopsided on a narrow screen. ========================================================================== / @media (max-width:520px){ .lp-footerinner{align-items:center;text-align:center;} / — adds to styles.css:979 / .lp-footerbrand{ / — overrides styles.css:933 / align-items:center; max-width:none; } .lp-footerlinks{align-items:center;} / — overrides styles.css:936 / } / ========================================================================== 5) AUTH CARD — login / signup / forgot / reset / error Problems on mobile: - The card is text-align:center (styles.css:115), so form LABELS render centered above left-aligned inputs — reads inconsistent. - The submit button sits a hair under the 44px tap-target minimum. Fix: left-align form internals only (brand, sub-heading and post-form links stay centered), and make the primary submit prominent + ≥48px. ========================================================================== / / Left-align everything inside the ; the brand block, .auth-sub and the footer links live OUTSIDE the form, so they stay centered. / body.auth .auth-card form{text-align:left;} / — counters .auth-card text-align:center (styles.css:115) / body.auth .auth-card .fieldlabel{text-align:left;} body.auth .auth-card .field-error, body.auth .auth-card .field-note{text-align:left;} / Prominent, thumb-friendly submit on every auth screen. / body.auth .auth-card .btn--block{ / — augments .btn base (styles.css:59) / min-height:50px; font-size:1rem; margin-top:6px; } / Comfortable field rhythm + full-width inputs (inputs are already 100%). / @media (max-width:520px){ body.auth .auth-card{padding:22px 20px;} / — overrides .card padding (styles.css:643) for auth only / body.auth .field{margin-bottom:18px;} / — overrides styles.css:75 / } / Very small phones: give the card a little more width. / @media (max-width:420px){ body.auth .auth-wrap{padding:18px 14px;} / — overrides styles.css:111 (24px) / } / ========================= cohort.css ========================= / / ========================================================================== COHORT HUB — MOBILE POLISH (proposal, additive) Scope: views/cohort/.ejs + partials/cohort-tabs.ejs only. Design system: reuses tokens from public/css/styles.css :root. Breakpoints follow the existing app: 720 / 520 / 420 (phones first). Every rule below is either (a) a safe, size-agnostic wrap/overflow fix on a COHORT-ONLY selector, or (b) a phone-scoped layout refinement. Each block notes the existing selector it overrides and why. No base primitive (.container / .stat-grid / .list / .btn / tables) is restyled globally, and nothing inside a modal / form / quiz-builder is touched. ========================================================================== / /* ========================================================================== 1) CONTEXTUAL TAB BAR (.tabs--ctx — cohort-tabs partial, phase.ejs ptabs) ------------------------------------------------------------------------ Base .tabs already does `overflow-x:auto; white-space:nowrap`, so it scrolls — but on a phone it (a) shows a chunky native scrollbar that fights the 1px underline, (b) sits inset inside the container padding so the last tab looks arbitrarily clipped, and (c) has smallish 10px/14px tap padding. Fixes: momentum scroll, hidden scrollbar, edge-to-edge bleed so the strip reads as "swipe me", scroll-snap, and bigger touch targets. NOTE: .tabs--ctx is the shared cohort-hub tab component; student/project.ejs reuses it and gets the identical (beneficial) treatment. ========================================================================== / .tabs--ctx { -webkit-overflow-scrolling: touch; / momentum scroll on iOS / scroll-snap-type: x proximity; scrollbar-width: none; / Firefox: hide scrollbar / / Base .tabs sets gap:4px. With multi-word labels sitting next to each other ("My Project" / "Self-Assessment") 4px reads as one run-on strip — the eye can't tell where one tab stops. Widen it here only, so the tighter gap still applies to any other .tabs bar. / gap: var(--sp-3); } .tabs--ctx::-webkit-scrollbar { display: none; } / WebKit: hide scrollbar / .tabs--ctx .tab { scroll-snap-align: start; } @media (max-width: 520px) { / Edge-to-edge bleed: cancel the container's 14px side padding, then re-pad inside so the first/last tab keep a comfortable inset while the strip runs to both screen edges (standard mobile scroller affordance). The 1px bottom border now spans the full width. / .tabs--ctx { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; scroll-padding-left: 14px; } / Bigger, comfier tap targets (was 10px 14px). / .tabs--ctx .tab { padding: 12px 16px; } } / ========================================================================== 2) OVERVIEW STAT CARDS (.cohort-stats — NEW class added to the overview.ejs .stat-grid; requires the 1-line EJS edit noted in report) ------------------------------------------------------------------------ The shared .stat-grid uses minmax(150px,1fr), so the 3 cohort stats (Students / Phases / Sessions) fall to 2-up on a phone, leaving one card stretched full-width and lopsided. Scoped to .cohort-stats only (NOT the global .stat-grid primitive), lay the three small numbers as a clean, centered 3-across row — premium and balanced. ========================================================================== / @media (max-width: 520px) { .cohort-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .cohort-stats .stat { align-items: center; text-align: center; padding: 14px 8px; / tighter than the base .card 18px so 3 fit calmly / gap: 2px; } .cohort-stats .statvalue { font-size: 1.55rem; } .cohort-stats .stat .muted { font-size: .74rem; } } @media (max-width: 360px) { .cohort-stats { gap: 8px; } .cohort-stats .stat { padding: 12px 6px; } .cohort-stats .statvalue { font-size: 1.35rem; } } / ========================================================================== 3) PHASE DRILL ROWS (.drill-wrap — overview.ejs staff view) ------------------------------------------------------------------------ Each phase is a .drill-card (num + title + → arrow) with an Edit/Delete .row-end tucked underneath. On a narrow screen keep that action pair from crowding: guarantee wrap + a real gap. (The drill-card itself already has a @380 rule in the base sheet; nothing there to change.) ========================================================================== / @media (max-width: 520px) { .drill-wrap .row-end { flex-wrap: wrap; gap: 8px; } / Give the two small buttons a fair share so they read as proper targets. / .drill-wrap .row-end .btn--sm { flex: 1 1 auto; min-width: 96px; } .drill-wrap .row-end form { flex: 1 1 auto; display: flex; } .drill-wrap .row-end form .btn { width: 100%; } } / ========================================================================== 4) HOMEWORK MATERIAL LINK (.hw-material — session.ejs, phase.ejs, homework-detail.ejs) — SIZE-AGNOSTIC OVERFLOW FIX ------------------------------------------------------------------------ .hw-material is display:inline-flex with an icon + a raw filename text node. A long, unbroken filename (e.g. Chapter_3_Reading_Final_v2.pdf) can't break and pushes past the card edge -> content clipped by html{overflow-x:hidden}. Let the label wrap under the icon and break long tokens. Applied at all sizes because the overflow is a correctness bug, not a phone-only nicety. ========================================================================== / .hw-material { max-width: 100%; flex-wrap: wrap; / label can drop below the icon if needed / align-items: center; overflow-wrap: anywhere; / break very long filenames / word-break: break-word; } / ========================================================================== 5) SESSION PAGE SECTIONS (session.ejs — cohort-only selectors) ------------------------------------------------------------------------ Header, objective, and the compact read-only attendance summary. (The take-attendance sheet lives in a modal and is the forms agent's; untouched.) ========================================================================== / @media (max-width: 520px) { / Title chip + text should wrap gracefully and not collide with the date. / .session-head { gap: 10px; } .session-headtitle { gap: 8px; } / Compact attendance summary: a touch larger for legibility on a phone, and let each status line's tag sit cleanly above its wrapped list of names. / .att-compact { font-size: .82rem; line-height: 1.7; } .att-compacttag { margin-right: 4px; } / Section headings sit a little tighter to their meta line. / .session-sectiontitle { font-size: 1.02rem; } } / ========================================================================== 6) HOMEWORK-DETAIL QUESTION CARDS (.q-card — homework-detail.ejs) ------------------------------------------------------------------------ .q-cardhead is a non-wrapping flex row (prompt + type pill). A long prompt squeezes the pill; allow the head to wrap and the title to shrink/wrap. ========================================================================== / @media (max-width: 520px) { .q-cardhead { flex-wrap: wrap; gap: 8px; } .q-cardtitle { min-width: 0; } .q-choice { padding: 10px 12px; } / base is 12px 16px — reclaim width / } / ========================================================================== 7) HOMEWORK-DETAIL HEADER ACTIONS (.hw-actions — homework-detail.ejs) ------------------------------------------------------------------------ Back / Edit / Delete cluster. Base right-aligns it; on a phone it wraps under the title, so left-align it to line up with the title for a tidy edge. ========================================================================== / @media (max-width: 520px) { .hw-actions { justify-content: flex-start; width: 100%; } } / ========================================================================== 8) PHASE — INLINE CHALLENGE MARKING GRID (phase.ejs, view=challenge) ------------------------------------------------------------------------ Each roster row carries a — richtext.js moves it in here, hides it and keeps its value in step; with JS off none of this exists and the textarea is just a textarea. So everything below is decoration on a working form. Note: .rt-u and .rt-c--* (the RENDER classes, used on the pages students read) are defined elsewhere in this file — nothing here touches them. The editor shows its colours off [data-rt-c], which only ever exists inside the editable. -------------------------------------------------------------------------- / .rt{position:relative;display:flex;flex-direction:column;} / Visually hidden, NOT display:none — the browser has to be able to focus it to report a validation failure, and a display:none control can't be. / .rt-input{position:absolute;left:0;bottom:0;width:1px;height:1px;min-height:0; padding:0;margin:0;border:0;opacity:0;overflow:hidden;resize:none;pointer-events:none;} .rt-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2); padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-bottom:0; border-radius:var(--r-input) var(--r-input) 0 0;} .rt-group{display:flex;align-items:center;gap:4px;} .rt-group + .rt-group{padding-left:var(--sp-2);border-left:1px solid var(--border);} .rt-btn{font:inherit;line-height:1;min-width:36px;height:36px;padding:0 8px;cursor:pointer; display:inline-flex;align-items:center;justify-content:center; color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:8px; transition:background var(--dur) var(--ease),color var(--dur),border-color var(--dur);} .rt-btn:hover{background:var(--primary-soft);color:var(--primary);} .rt-btn.is-on{background:var(--primary-soft);color:var(--primary);border-color:var(--primary);} .rt-btn--b{font-weight:800;} .rt-btn--i{font-style:italic;font-family:var(--serif);font-size:1.05rem;} .rt-btn--u{text-decoration:underline;text-underline-offset:2px;} / A swatch is the colour itself; the ring is what says "this one is on". / .rt-swatch{padding:0;} .rt-swatchdot{width:18px;height:18px;border-radius:var(--r-pill); background:var(--rt-sw,transparent);box-shadow:inset 0 0 0 1px rgba(36,53,54,.18);} .rt-swatch.is-on{border-color:var(--primary);box-shadow:0 0 0 2px rgba(6,80,83,.18);} / The palette — the same hexes as COLORS in lib/richtext.js. / .rt-swatch[data-rt-color="teal"]{--rt-sw:#065053;} .rt-swatch[data-rt-color="gold"]{--rt-sw:#9A6510;} .rt-swatch[data-rt-color="red"]{--rt-sw:#A62D3B;} .rt-swatch[data-rt-color="green"]{--rt-sw:#2F6B45;} / "No colour": a struck-through empty circle. / .rt-swatch--none .rt-swatchdot{background:var(--surface);position:relative;overflow:hidden;} .rt-swatch--none .rt-swatch__dot::after{content:"";position:absolute;left:-2px;right:-2px;top:50%; height:1px;background:var(--danger);transform:rotate(-45deg);} / The editable itself wears the app's field styling (see `input,textarea` near the top of this file), minus the top corners the toolbar now owns. white-space:pre-wrap is load-bearing, not cosmetic: it is what makes the line breaks and repeated spaces the writer types survive as typed. / .rt-editable{font:inherit;color:var(--text);background:var(--surface); border:1px solid var(--border);border-radius:0 0 var(--r-input) var(--r-input); padding:11px 13px;min-height:7.5em;max-height:60vh;overflow-y:auto; line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word; transition:border var(--dur),box-shadow var(--dur);} .rt-editable:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(6,80,83,.15);} .rt:focus-within .rt-toolbar{border-color:var(--primary);} .rt-editable.is-empty::before{content:attr(data-rt-placeholder);color:var(--muted);opacity:.75;} / What the four marks look like WHILE writing — deliberately the same as what lib/richtext.js renders on the page afterwards. / .rt-editable b,.rt-editable strong{font-weight:700;} .rt-editable u{text-decoration:underline;text-underline-offset:2px;} .rt-editable [data-rt-c]{font-weight:600;} / as .rt-c does on the page / .rt-editable [data-rt-c="teal"]{color:#065053;} .rt-editable [data-rt-c="gold"]{color:#9A6510;} .rt-editable [data-rt-c="red"]{color:#A62D3B;} .rt-editable [data-rt-c="green"]{color:#2F6B45;} @media (max-width:600px){ / Thumbs, not cursors: full 40px targets, and the toolbar is free to wrap onto a second row rather than squeeze. */ .rt-toolbar{gap:6px;padding:6px;} .rt-btn{min-width:40px;height:40px;} .rt-group + .rt-group{padding-left:6px;} .rt-editable{min-height:8.5em;} } @media (prefers-reduced-motion:reduce){ .rt-btn,.rt-editable{transition:none;} }