/* ===================================================================== controls.css — RESPONSIVE CONTROL SYSTEM (design tokens) --------------------------------------------------------------------- Single source of truth for how every CONTROL is sized across the three device tiers. Loaded LAST (after app.css) in Components/App.razor, so these rules win ties by source order without needing !important. THE ONLY THREE BREAKPOINTS IN THIS APP (mobile-first — base = mobile): Mobile ≤ 600px → the bare :root block below Tablet 601 – 959px → @media (min-width: 601px) Desktop ≥ 960px → @media (min-width: 960px) (960 = the sidebar/bottom-nav switch; 600 = MudGrid's `sm` + input zoom anchor. The only sanctioned extra is @media (max-width:360px) for the tightest phones.) DO NOT introduce other breakpoint values. HOW TO TUNE: change a token value in ONE place here and every control that consumes it updates across the whole app. Never hard-code control sizes in a page. See the "CONTROL SIZING STANDARD" note in app.css. Roll-out note (2026-09-07): the CONSUMED mobile tokens (headings, KPI, chip + segmented touch floors) are tuned to the owner-confirmed 'Moderate' scale — see docs/engineering/responsive-sizing-spec-2026-09-07.md §1. The still-DORMANT tokens (--ctl-h/--seg-h/--sel-h/--tab-h/--input-fs/ --page-gutter/--grid-gap) remain scaffolding at their prior values and get wired to selectors in a later, individually-verified phase (spec §1e/§2/G2). ===================================================================== */ /* ---------- TOKENS: base = MOBILE (≤600) ---------- */ :root { /* Headings — two families: MudBlazor Typo.* titles vs the custom .nb-h1. They are intentionally different sizes today, so they are separate tokens (unifying them would be a visual change, not a Phase-0 change). */ --fs-h3: 22px; /* MudBlazor Typo.h3 */ --fs-page-title: 20px; /* MudBlazor Typo.h4 (most page/section titles) */ --fs-h5: 16.5px; /* MudBlazor Typo.h5 */ --fs-h6: 14.5px; /* MudBlazor Typo.h6 */ --fs-nb-h1: 20px; /* custom .nb-h1 / .nb-pagehead .nb-h1 */ /* Chips (secondary tap target) — 'Moderate' mobile scale (2026-09-07): 28, still clears WCAG 2.5.8 AA (24px). Down from 32 on the 'too big on mobile' report. */ --chip-touch-h: 28px; /* Segmented toggle height on coarse pointers — 'Moderate' mobile scale: 36, a touch tighter than the old 40 while staying a comfortable finger target. */ --seg-h-touch: 36px; /* Icon button (primary tap target) — 'Moderate' mobile scale: 40 (was 44). The live floor is in app.css's coarse block; this token is the forward value once wired. */ --icon-btn-touch: 40px; /* KPI figure (.nb-kpi .val): the big stat number. 'Moderate' mobile scale: 20 (was 22) where the KPI cards are a single column, full size on desktop. */ --kpi-fs: 20px; /* --- Scaffolding: defined now, CONSUMED in later phases (current values) --- */ --ctl-h: 34px; --ctl-fs: 13px; /* .nb-btn / MudButton */ --seg-h: 31px; /* .nb-seg button */ --sel-h: 38px; --sel-fs: 13px; /* .nb-fsel */ --input-fs: 16px; /* text inputs on mobile (iOS zoom guard) */ --tab-h: 40px; /* .mud-tab — CONSUMED by app.css .nb-main-content .mud-tab (Moderate: 40, was 44) */ --page-gutter: 16px; --grid-gap: 16px; } /* ---------- TABLET (601–959) ---------- */ @media (min-width: 601px) { :root { --fs-h3: 28px; --fs-page-title: 26px; --fs-h5: 20px; --fs-h6: 16px; --fs-nb-h1: 22px; --kpi-fs: 22px; } } /* ---------- DESKTOP (≥960) ---------- */ @media (min-width: 960px) { :root { --fs-h3: 48px; /* MudBlazor defaults restored on desktop */ --fs-page-title: 34px; --fs-h5: 24px; --fs-h6: 20px; --fs-nb-h1: 26px; --kpi-fs: 26px; /* full-size stat number on desktop (unchanged) */ --input-fs: 14px; --page-gutter: 24px; } } /* ===================================================================== CONTROL STYLES (consume the tokens above) ===================================================================== */ /* ---- Headings ---- Scoped to .nb-main-content so dialog titles, the app-bar brand and pop-over menus (which portal outside it) keep their own sizing. These selectors are (0,2,0)/(0,3,0) — already stronger than MudBlazor's own (0,1,0) — so no !important is needed. */ .nb-main-content .mud-typography-h3 { font-size: var(--fs-h3); line-height: 1.2; } .nb-main-content .mud-typography-h4 { font-size: var(--fs-page-title); line-height: 1.2; } .nb-main-content .mud-typography-h5 { font-size: var(--fs-h5); line-height: 1.25; } .nb-main-content .mud-typography-h6 { font-size: var(--fs-h6); line-height: 1.3; } .nb-main-content .nb-h1, .nb-main-content .nb-pagehead .nb-h1 { font-size: var(--fs-nb-h1); } /* Pull the page-header's bottom gap in on phones now the title is smaller. */ @media (max-width: 600px) { .nb-main-content .nb-pagehead { margin-bottom: 16px; gap: 10px; } } /* ---- Chips: relaxed touch floor (still clears WCAG 2.5.8 AA 24px) ---- Needs !important because app.css carries `.nb-main-content .mud-chip { min-height: 22px !important }`; matched specificity + source order (this file loads last) make it win. Retired to a cascade layer in a later phase so the !important can go. */ @media (pointer: coarse) { .nb-main-content .mud-chip.mud-chip-size-small { min-height: var(--chip-touch-h) !important; min-width: 24px !important; } /* Segmented toggles: app.css sets a flat 44 min-height on coarse pointers via a grouped rule; this same-specificity rule loads later, so --seg-h-touch (40) wins. Only the target height changes — padding/font are untouched, so the control keeps its shape, just a touch less bulky on phones. */ .nb-seg button { min-height: var(--seg-h-touch); } } /* ---- KPI figure: the big stat number scales with the viewport ---- */ .nb-main-content .nb-kpi .val { font-size: var(--kpi-fs); }