/* auth/shell.css - Nocturne preview. Split out of the former single 67 KB styles.css by MEASURED CONSUMPTION: every rule here is consumed only by pages whose shell loads this sheet. Load order is common -> family -> page, mirroring the application shells. */ .field .err { font-size: var(--t-xs); color: var(--danger); } /* ---- THE AUTH SHELL'S OWN GEOMETRY --------------------------------------- `auth/base.html` renders `div.auth > [aside.auth-aside] > main.auth-main > div.auth-card` for EIGHT pages, and until now this sheet defined NONE of those three boxes. Five pages survived only because each carried a per-view sheet that re-declared the whole layout; the three that did not - `password-setup`, `reset-password-change`, `reset-password-verify` - rendered edge-to-edge with no gutter and no measure at all (MEASURED: .auth-card w=1280 x=0 at 1280px, w=360 x=0 at 360px, text touching both viewport edges). NOTHING OVERFLOWED, so every probe reported those three pages clean. WHY IT WAS MISSING, and the shape of the repair. This sheet once held FIVE conflicting `.auth-card` rules (420 / 860 / 384 / 400 / 440px) in one file, so last-one-wins rendered EVERY auth page at 440px - recorded defect P1. The repair deleted all five, and deleted the shared layout with them. The fix is not to put them back: it is the split CONVENTION.md §4 already records as the deviation on record for `css/auth/` - THE FAMILY SHEET (here) owns the LAYOUT, once. A PER-VIEW SHEET owns only that view's own MEASURE, and only where it DIFFERS. Per-view sheets load after this one, so a view that states its own measure wins cleanly with no specificity trick and no second copy of the layout. THE DEFAULT COLUMN IS SINGLE, not the two-up split: the aside is optional markup (`{% block auth_aside %}`), and a page without it must not inherit a phantom empty track. The split is OPT-IN, through `auth--split` on the stage - see the next block. THE DEFAULT MEASURE IS 400px because that is the recorded canonical exemplar of this pattern, not a new number: ORCH-B-PREVIEW-RULES.md §2A names `forgot-password.html` the canonical auth-card page and prints `.auth-card { width: min(400px, 100%) }` as the pattern's CSS. `min()` keeps the card inside the `--edge` gutter below 400px rather than forcing a scrollbar. THE STAGE FILLS THE SPACE THAT IS ACTUALLY AVAILABLE, AND THAT IS NOT THE VIEWPORT. `min-height: 100vh` stood on `.auth` here, carried across from the preview, where `auth/base.html` IS the whole document and the stage is a direct child of the body with no chrome above or below it. This app nests the same stage inside `public_base.html`, BETWEEN a header and the site footer, so a viewport-height stage is added ON TOP of both. MEASURED at 1440x1200 on every view that extends this shell: `.auth` rendered at exactly 1200 with the header 59 above it and the footer 373.52 below, for a document 1633 tall against the preview's 1200 - 433px of dead space, at every width and independent of content (2134 at 360, where the footer stacks to 875). Nothing overflowed and nothing threw: the page was simply taller than the screen for no reason, and the card it centres sat correspondingly high in the fold. THE CHROME'S HEIGHTS ARE NOT SUBTRACTED, AND MUST NOT BE. `calc(100vh - header - footer)` needs two numbers and neither is honestly available: `--pub-head-h` exists but the bar's real height is that token PLUS its bottom border, and the footer has no token at all and is not ONE height - it measures 373.52 at 1440 and 875 at 360 because its columns stack. Any subtraction is a literal that goes stale the first time the footer reflows. So the shell states the RELATIONSHIP instead: the body is a column, the content row takes the slack, and the stage inherits whatever that turns out to be. SCOPED BY A BODY CLASS, NOT APPLIED TO `body.public-shell`. Every other page of that shell is already taller than the viewport, so the column would change nothing for them - and on a short one it would silently start pinning the footer to the bottom, which is a change to pages this repair was not asked to touch. `auth-shell` is emitted by `auth/base.html` alone and is read only here. */ .auth { display: grid; grid-template-columns: minmax(0, 1fr); } body.auth-shell { min-height: 100vh; display: flex; flex-direction: column; } /* The content row takes the slack; `display: grid` on that row is what makes the stage its ITEM, so `.auth` stretches to the row instead of shrink-wrapping around its card. The header, the flash region and the footer stay auto-sized siblings of that row. */ body.auth-shell > main { flex: 1 1 auto; display: grid; } .auth-main { display: grid; place-items: center; padding: var(--sp-2xl) var(--edge); } .auth-card { width: min(400px, 100%); } /* ---- THE OPT-IN SPLIT, AND IT IS TWO PAGES, NOT SIX ------------------------ `auth/base.html` documents `auth--split` as the handle a view adds when it fills `auth_aside`, so the stage gains its second track. TWO templates emit it - login.html and register.html - and that is the whole list BY THE PREVIEW'S OWN RULE: bundle/css/auth/shell.css:33 states the aside is "filled by `login` and `register` ONLY", and bundle/css/auth/login.css:5 / register.css:6 scope the two-up split to those two pages precisely because they are the ones with a second track to give. FOUR MORE TEMPLATES USED TO EMIT IT - unsubscribe, forgot_password, password_setup and reset_password_change - and all four were app inventions with no counterpart anywhere in the preview: every one of those four bundle pages is a single column. Their asides are removed and their copy re-sited into the column (the preview's own head takes the heading, lead and chips; the rest becomes `stack` blocks below the form), with every translatable string preserved and every per-file extraction total unchanged. The stage handle now has exactly the emitters the preview has. THE VALUES ARE THE PREVIEW'S OWN, not new ones - bundle/css/auth/login.css:9,13 and bundle/css/auth/register.css:8,15 are byte-identical to each other, which is exactly the "repeated byte-identically across pages of this shell" test this sheet already uses to decide what it owns. It is declared ONCE, here, keyed on the handle the two templates emit, and the two page sheets carry no copy of it. BELOW THE SPLIT'S USABLE WIDTH THE ASIDE IS DROPPED and the stage returns to the family default - the preview's own answer, and already the shipped behaviour of login and register. Stacking it instead would put the pitch above the task on a phone, which is the arrangement auth/login.html:15-19 records as RETIRED for exactly that reason. MUST stay after the base rule: same specificity, later wins. */ .auth--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } @media (max-width: 820px) { .auth--split { grid-template-columns: minmax(0, 1fr); } .auth--split .auth-aside { display: none; } } /* --- promoted from page-local