@layer exsa.layouts { /* ============================================================ EXSA Layout — the paper model (general) Link AFTER exsa.css + your theme. Element-driven: the markup IS the declaration — no body classes. ── The paper model ── body = the table — full viewport boundary; nothing required here .layout__page = the sheet of paper laid on it. Full width by default; set --layout-page-w to any smaller size (e.g. 80%) and it centers on the table. It carries its own look (surface tokens). .layout__grid = the page's container layer — named zones cut from the sheet, side pieces sized to fill the sheet's width 100% exactly elements/components = what goes inside each piece; they fit the piece (components own their look, the layout only owns the pieces) ── Zones (inside .layout__grid, all optional) ── .layout__topbar = in-page topbar — a strip above the grid, sticky to the viewport edge. Pair it with the .topbar component for its chrome. (Or keep the topbar OUTSIDE the page: use topbar.css's .topbar + body.has-topbar — the sheet then sits below the full-bleed bar. Both placements work at once.) .layout__announce = fixed full-bleed strip above everything (outside the sheet) — pairs with the outside topbar; body padding and sticky offsets account for it automatically .layout__header = full-width band above the pieces .layout__aside-start = side piece at the inline-start edge .layout__content = the main piece (1fr — takes all leftover) .layout__aside-end = side piece at the inline-end edge .layout__footer = full-width band below the pieces ── Mode modifiers (optional, composable) ── .layout__hero = full-width hero band above the pieces .layout__page--auto = sheet sizes to content (sticky footer off) .layout__page--frame = outside topbar + footer adopt the sheet's width (one shared edge). Set --layout-page-w on :root or — the outside chrome is a sibling, so it reads the token there, not from the page element. .layout__page--app = dashboard-style app frame — ships in layouts/dashboard.css (link AFTER general.css): the sheet is exactly the viewport; .layout__aside-start is a fixed full-height rail and .layout__content the scrolling pane. .layout__grid--centered = content piece reads --layout-measure .layout__aside-start--sticky = side piece sticks while scrolling .layout__aside-end--sticky = (clears the topbar automatically) .sidebar--collapsed on a side piece = icon-width track (auto, matching the rail's own width — --sidebar-collapsed-w, 56px) Piece count is structural: content alone = 1 piece; one aside = 2; both asides = 3; header/footer frame them. Any N-way split inside the content piece comes from the utilities grid (ONE grid system: .grid → .grid-cols-1…8). DOM order recommendation: topbar (if in-page), hero, header, aside-start, content, aside-end, footer. ── Space model ── Zones are element-evidenced (:has()): the grid only reserves side tracks for asides that actually exist, a collapsed sidebar (sidebar--collapsed) shrinks its track to icon width, and an absent header/footer band collapses to nothing. Unused space flows into .layout__content. ── Responsiveness ── The sheet is a query container (@container exsa-page). At ≤860px the pieces stack to one column — keyed to the SHEET's width, not the viewport's, so the layout stays correct when embedded (app pane, split view, iframe). A viewport media query mirrors the same rules as the fallback for engines without container queries. ── Tokens (override on the page element or in your theme) ── --layout-page-w sheet width (default 100%; e.g. 80%) --layout-page-min-h sheet height (default 100vh/100dvh — footer pinned to the sheet bottom; set auto to size to content) --layout-page-bg var(--surface-bg) sheet paper color --layout-page-border var(--surface-border) sheet edge --layout-page-radius var(--surface-radius) sheet corners --layout-page-shadow var(--surface-shadow-lg) sheet elevation --layout-page-pad 0 sheet inner padding --layout-aside-start-w clamp(220px, 25%, 300px) start piece --layout-aside-end-w clamp(220px, 25%, 300px) end piece --layout-gap spacing between pieces --layout-hero-min-h 55vh hero band height --layout-measure var(--width-content) centered content width (--grid--centered) --layout-sticky-top sticky offset — auto-syncs to the topbar height when a topbar is present --layout-announce-h 40px announce strip height Semantics:
for .layout__header,