/* =========================================================================== front.css — the member-facing layer. Prefix `tc-`. SCOPE RULE: every rule in this file is scoped under `.tc`, so nothing here can reach the back office. The front never loads shell.css or ixt.css. Breakpoints (front only, all min-width — mobile first): sm 30em / 480 two-up cards md 48em / 768 the grid becomes a matrix; .tc-sheet renders as a .modal lg 62em / 992 the tab bar becomes a top nav; content caps at 970px `md` is 48em on purpose: it is the design system's OWN breakpoint, so our layout change and its coarse-pointer button rule can never disagree by 8px. `max-width: 900px` is DS-owned (the Record page's density switch). Never author a rule at that width. =========================================================================== */ /* --------------------------------------------------------------------------- DEVIATION D5 — front density. The design system sets --base-size:14px for a mouse-driven admin. The front is read one-handed, standing, outdoors. The DS already does exactly this switch on its own Record page (`@media (max-width:900px){.od{--od-fs:16px}}`); this generalises its precedent rather than inventing a rule. Also load-bearing: iOS Safari force-zooms any whose computed font-size is under 16px, which would break every form on the front. --base-size itself is NOT redefined: ds-parity.mjs asserts it. --------------------------------------------------------------------------- */ .tc { --tc-fs: 16px; --tc-fs-sm: 14px; --tc-lh: 24px; --tc-tabbar-h: 56px; --tc-header-h: 56px; --tc-pad: 16px; --tc-max: 970px; /* the DS Record frame width, reused rather than invented */ font-size: var(--tc-fs); line-height: var(--tc-lh); color: var(--foreground); background: var(--surface); } /* DEVIATION D7 — 100svh, not 100vh. Mobile browser chrome makes 100vh taller than the visible viewport, which would park the grid's sticky court header permanently under the URL bar. */ .tc-app { display: flex; flex-direction: column; min-height: 100svh; } @supports not (min-height: 100svh) { .tc-app { min-height: 100vh; } } .tc-main { flex: 1 1 auto; width: 100%; max-width: var(--tc-max); margin: 0 auto; padding: var(--tc-pad) var(--tc-pad) calc(var(--tc-tabbar-h) + env(safe-area-inset-bottom) + 24px); } @media (min-width: 62em) { .tc-main { padding-bottom: 48px; } } /* --------------------------------------------------------------------------- DEVIATION D1 / D1b — touch-target floor. The design system's stated floor is 24px, measured on a desktop admin driven by a mouse. WCAG 2.2 SC 2.5.8 sets 24 CSS px as the MINIMUM; 2.5.5 sets 44 as the target. The front is used in a car park with one thumb. D1b is the sharper point: the DS's own query is `(hover) and (pointer:fine), (min-width:48em)` — fine-pointer OR >= 768px. A TOUCH TABLET at 768-1024px matches the second clause and therefore gets the SMALLEST targets on the LARGEST touch device. That is a genuine bug in the system, not a preference, so this block re-grows them after the DS band rather than fighting it at a narrower width. Only the HIT BOX grows. No token, geometry or type value changes, so the visual system is untouched. --------------------------------------------------------------------------- */ @media (hover: none) and (pointer: coarse) { .tc .btn, .tc .btn-xs, .tc .btn-2xs, .tc .btn-icon, .tc .btn-icon-sm, .tc .btn-icon-xs { min-height: 44px; min-width: 44px; } /* Where the visual size must stay small (a chip's remove button, a link inside a sentence), grow the pointer box instead of the geometry. */ .tc .hit-44 { position: relative; } .tc .hit-44::after { content: ""; position: absolute; inset: -10px; } } /* --------------------------------------------------------------------------- DEVIATION D2 — mobile navigation. §17 ships a 240px sidebar with no collapse, no hamburger and no breakpoint: on a 390px viewport that is 61% of the screen. It is explicitly a BACK-OFFICE shell. The front uses five fixed bottom tabs within thumb reach; at `lg` the same five links become a top nav, in the SAME ORDER, so the mental model survives the breakpoint. Real elements with aria-current="page" — §2's accessibility contract: interactive is a