/* ============================================================================ CALDWELL COUNTY DEVELOPMENT SERVICES — portal.css Loaded AFTER web/foundation.css, never instead of it. foundation.css is byte-identical to every sibling county app and is never edited; everything this product needs that the shared system does not already carry lives here, in the shared system's own token names. WHAT THIS FILE IS FOR, IN ORDER OF IMPORTANCE --------------------------------------------- 1. foundation.css describes a CONSOLE: a fixed-height app frame with a 248px sidebar, `body { overflow: hidden }`, and a single scrolling pane. CCDS is a PUBLIC SERVICE with a top bar, a footer, and a document that scrolls — core.js proves it, because App.enter() calls `window.scrollTo(0, 0)` on every navigation, not `root.scrollTop = 0`. Section 2 below unwinds the frame. Nothing else works until it does. 2. Every component core.js actually renders. The class names here were read out of web/core.js, not invented: statusPill, chip, detail, emptyState, callout, ordinanceRef, the Controls factories, uploader, stepRail, commentThread, historyTimeline and queueTable. If a name does not appear in core.js or shell.html it is called out as a page-author contract where it is defined (there is exactly one such block, the PDF pane in §16). 3. Mobile first. Everything works at 375px. The staff queue table becomes a card list at 700px. The page body NEVER scrolls sideways — anything wide (tables, the PDF frame) scrolls inside its own container. 4. The government accessibility bar, which is above WCAG AA on purpose: · a visible focus ring on every interactive element, in both themes; · a 44px minimum touch target (--tap), not the 24px WCAG 2.5.8 floor; · secondary/tertiary ink held WELL above 4.5:1 — the ratios quoted in the comments below are measured against the DARKEST surface the ink actually lands on, in both themes, and they are held, not merely met. Both themes are styled throughout. The theme toggle stamps data-theme on (see App.applyTheme + theme-boot.js), and because every colour here is a foundation token, an explicit stamp wins over prefers-color-scheme in both directions without this file repeating a single hex value. That is the whole reason to stay on the tokens: there are no per-theme override blocks down here to drift out of step. ============================================================================ */ /* ============================================================================ 1. NEW TOKENS Two, both deliberately theme-INDEPENDENT, which is why they are declared once in :root and not repeated in the three theme blocks. A token that cannot differ between themes cannot drift between them. ============================================================================ */ :root { /* The touch-target floor. WCAG 2.5.8 (AA) asks for 24px and foundation.css sets that globally; this is a county service used by residents on phones, so the floor here is the 2.5.5 (AAA) 44px. Stated once so that raising it is one edit, and so a reviewer can see the number rather than infer it from forty separate min-heights. */ --tap: 44px; /* The shared measure. The header bar, the page body and the footer all line their content up on this, so the three read as one column rather than three independently centred blocks. 1080px is a reading measure, not a console measure — this half of the product is prose, forms and decisions. The staff queue opts out with .wrap.wide (§17). */ --page-max: 1080px; } /* ============================================================================ 2. UNWINDING THE CONSOLE FRAME foundation.css §"app frame" builds a fixed-height flex console. This is a scrolling document with a sticky bar and a footer. Everything in this section exists to undo a specific rule up there; each one says which. ============================================================================ */ /* foundation: `html, body { height: 100% }` + `body { overflow: hidden }`. A hidden overflow on means window.scrollTo() — which core.js calls on every navigation — silently does nothing, and the footer is unreachable. */ html, body { height: auto; min-height: 100%; overflow: visible; } html { /* iOS Safari inflates text in landscape unless told not to. On a form this long that reflows the whole wizard mid-answer. */ -webkit-text-size-adjust: 100%; } body { /* 14px is a console body size. This half of the product is read by residents on phones, often outdoors; 15px is the smallest that is comfortable for continuous prose, and it cascades into every component below. */ font-size: 15px; overflow-x: hidden; /* a belt-and-braces guard: nothing may scroll the page sideways */ } /* foundation: `#app { display: flex; height: 100vh }` — a row, viewport-tall. */ #app { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; /* dvh so the mobile URL bar collapsing does not leave a gap */ } /* foundation: `#view-root { flex: 1; overflow: auto }` — its own scroll pane. */ #view-root { flex: 1 0 auto; overflow: visible; min-width: 0; } /* #view-root carries tabindex="-1" so the skip link and every navigation can move focus into it. It is never keyboard-reachable by tabbing, so a ring around the entire page would only ever appear as noise after a route change — the page heading is what announces the change. */ #view-root:focus { outline: none; } /* `hidden` has to actually hide. core.js sets it as an attribute on .route-progress and on every .field-error, and any display value declared by an author rule beats the UA's `[hidden] { display: none }` regardless of specificity. One rule, once, rather than a :not([hidden]) on each. */ [hidden] { display: none !important; } /* Modal.open() stamps this while a dialog is up. Without it the page behind the overlay scrolls under the user's thumb on a phone. */ body.modal-open { overflow: hidden; } /* ============================================================================ 3. ACCESSIBILITY PRIMITIVES foundation.css defines neither .sr-only nor .skip-link, and core.js and shell.html use both heavily. ============================================================================ */ /* Visually gone, still in the accessibility tree, still focusable. The file input inside the uploader wears this, so it must NOT be display:none — a display:none input cannot be reached by Tab, and the visible