Layout

LAYOUT — the page shell and primitives

Regions (grid areas on .page, 5-column shell): pg-banner (b), pg-header (h), pg-subheader (s), pg-navigation (n), pg-toolbar (t), pg-main-header (mh), pg-main-subheader (ms — a band under the main header: tabs, crumbs, filter strips that belong to main but must not scroll with it), pg-main (m), pg-main-aside (ma — the main-scoped flank, inboard of pg-aside, starting under the main header), pg-main-footer (mf), pg-aside (a), pg-footer (f). Set --bg on any of them to repaint. pg-aside is recessed by default.

Rails are MIN-WIDTH, TYPE-DERIVED, SERVER-DRIVEN. The published knobs are --pg-navigation-w / --pg-toolbar-w (default 8lh, stamped once on .page); rails can GROW for long content and are exact only when collapsed, where the width is the glyph ANATOMY calc (glyph + item padding + rail padding — centered by construction, never by bespoke rules). Collapse is an explicit server-stamped width (the theme pref (sys_pref, key nav_density) → --pg-navigation-w: var(--rail-w-icon)); labels drop out through the container TIER gates (.medium/.large on the label span). The data-ui-density attribute is RETIRED and stays retired — never infer density from attributes, and never infer rail shape from page width (the @container page restyle is retired too).

Asides are CONTENT-SIZED (no declared width, no containment — the auto track hugs the one-off widget the flank carries). Consequence: aside content cannot gate on the aside itself. ONE topology: there are no alternate grids at narrow widths — a region that cannot fit gates itself (.c-desktop on an aside) and its track collapses; narrow reachability of a gated flank is an app decision (dock, drawer), not a shell re-slot.

Flow primitives: .row / .column (flex), .grid (auto-fit with --grid-min), .spread (space-between row), .lcr (left-center-right 3-zone grid — used for headers), .flank, .oneline (nowrap), .stack (overlap).

Responsive gates (revert-layer trick, in the media layer) — TWO FAMILIES, TWO JOBS:

• Viewport gates: .mobile / .tablet / .desktop show an element only at that viewport width. Container equivalents (LAYOUT band family): .c-mobile / .c-tablet / .c-desktop, same breakpoints (576px / 768px) measured on the nearest query container.
• DENSITY TIERS (component scale): .small (< 8rem) / .medium (8rem–20rem) / .large (≥ 20rem). small = the glyph alone; medium = glyph + label; large = the full block. "And-up" is the multi-class idiom (class="medium large"). The 8rem boundary is rail math: it straddles the rail's two declared widths at every type size, so rail content gates on the tiers instead of inferring density from attributes.
• .fine / .coarse gate on pointer type.
• ORIENTATION and HEIGHT gates (gf-608): .c-portrait / .c-landscape (landscape = wider than 3:2) and .c-short / .c-tall (tall = 10em and up). They answer only inside a SIZE container — a .block — never a width-only .container. THE BLOCK (gf-608, Mike: "each block is able to manage itself"): .block is a size query container with ONE child, its body — a flex column in portrait, a row in landscape (the words first, the big thing beside them). It fills the cell a grid track, a .frame or a .stress hands it and never sizes itself (size containment collapses it under an auto-height parent). A block is pure composition: the engine's tiers and gates inside, no per-block CSS; the lab's Compositions page carries the specimen. .stress resizes both axes. Container rule: gate classes go on a dedicated wrapper div, never on a styled leaf component, and the gated element must also carry a layout primitive (revert-layer restores the primitive's display, not a default).

Focus mode (gf-262): a STORED pref like every other display choice — the server stamps data-ui-state="focus" on .page and the chrome collapses so pg-main* fill the viewport. The Theme shelf of the profile dialog posts /settings/focus/mode; the focus fab retired in gf-307 (its engine classes .focus-fab .i-expand .i-collapse wait, undemoed, for the day it returns) and the old hidden #focus-toggle checkbox before it.

THE EDIT CARD (gf-262, view/settings.templ editCard): the ONE shape for a record's form — h3 + pencil top-right (unlocks), the canon fieldsets bound readonly while locked, Cancel bottom-left as a native type="reset" (the fields fall back to their stored values — no seed strings), Save bottom-right posting the form (contentType 'form'). Stored values are judged by the RENDER (aria-invalid + the message in the field's small — canon (4)); a wizard lights the one control to click next with data-ui-state="guide" (a still ring + a slow glow, motion-gated; the set-up walk that first used it retired in gf-313).

Print: @media print (in the media layer) strips every region except pg-main*, drops surfaces to white while keeping borders, forces black ink. The screen is the themed medium; paper is austere.