/* Haive — the layout layer: the shell, the rail, the app bar, the * crumbs, the tab row, and the two breakpoints * (T-0201, T-0203; DK-12, DK-15, DK-18, DK-24, DK-24a, DK-29; * Requirements A6, C5, E3, F1, G5, J1, J2, J3, A3). * * This file styles the structure `crates/design-html/src/chrome.rs` * already renders. It does not invent markup and it does not redesign * any of it: every selector here has a call site in `Chrome::render`, * `Sidebar::render`, `Tabs::render`, `Identity::render`, or * `Location::render`. * * **Nothing here is visible yet.** No route calls `Page::render` — * fourteen view files still build their own `` and link * `/web/app.css`, which imports the same six sheets in the same order. * The rules land the moment EPIC-03 moves a view onto the crate. * * Three properties this file holds: * * **No literal values.** Every size, space, colour, radius and * duration is a `var(--…)` from `tokens.css`. The only bare values * are `0`, `auto`, `none`, `inherit`, `100%`, `1fr` and `100dvh` — * and the two breakpoint numbers in the media conditions, which * cannot be tokens (see below). * * **Breakpoints in `rem`, never `px`.** A person at 200% browser zoom * on a 1280px display has a 640px effective viewport. A `px` * breakpoint keeps the 15rem rail there and leaves them 200px of * content — the accessibility case responsive behaviour exists for is * the one `px` breakpoints get wrong. * * **`@media` conditions cannot read a custom property.** CSS Custom * Properties §3 excludes `var()` from media queries, so `48rem` and * `90rem` are written out below. They are the *values* of * `--bp-compact` and `--bp-wide`; those tokens stay the documented * source (`design/tokens.md`), and this file is the one place the * numbers are repeated. Repeating them is not optional and is not a * shortcut — there is no CSS that avoids it without a build step * (PLATFORM.md §2). */ @layer layout { /* ================================================================== * The skip link — the first thing in the document, and invisible * until it is focused (T-0203's own gap, found by the console review) * ================================================================== */ /* Every page began with a full project rail in the tab order: on a rail of a dozen projects that is a dozen links before the thing a person came for, on every page, forever. This is the standard answer and the platform had none. Not `display: none` and not `visibility: hidden`, either of which takes it out of the tab order and makes it unreachable by the one input method it exists for. It is positioned off the top of the viewport and comes back on focus — the same mechanism `hv-visually-hidden` uses, with a focus state added. */ /* **Clipped, not translated off the top.** The first version parked it above the viewport with a transform — which still leaves a 44px-tall absolutely-positioned box in the document's own scrollable overflow, so every page was 39px taller than its content and a conversation page that had just been told not to scroll scrolled anyway. Nothing on the page explained why, because the thing doing it was invisible. The same technique `hv-visually-hidden` uses, which contributes no overflow at all, plus a focus state that puts it back. Not `display: none` and not `visibility: hidden`: either takes it out of the tab order and makes it unreachable by the one input method it exists for. */ .hv-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hv-skip:focus { z-index: 2; width: auto; height: auto; overflow: visible; clip-path: none; padding: var(--space-2) var(--space-4); background: var(--surface-raised); color: var(--fg-default); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); } /* `
` carries `tabindex="-1"` so the jump actually moves focus rather than only scrolling — without it, the next Tab returns to the rail the person just skipped. The outline would then be drawn around the whole page, which is noise: the heading inside it is what the person is looking at. */ .hv-main:focus { outline: none; } /* ================================================================== * The shell — one rail, one header, one optional tab row (DK-24) * ================================================================== */ .hv-shell { display: grid; grid-template-columns: var(--rail-width) 1fr; /* **The row is declared, and that is load-bearing.** With no `grid-template-rows`, the implicit row is `auto` — it sizes to the tallest item and then *grows past its own container*, which the bounded variant below can only clip. The rail's `block-size: 100%` resolved against that grown row, so it never capped; `hv-sidebar__items` was never told to shrink; and the document scrolled by exactly the rail's overflow while the conversation inside it scrolled correctly. `minmax(0, 1fr)` makes the row the container's height and lets items with `min-height: 0` do the shrinking they already ask for. */ grid-template-rows: minmax(0, 1fr); min-height: 100dvh; } /* **A conversation is bounded by the window; every other page is bounded by its content.** `min-height` is right for a document: the shell fills the viewport when the page is short and grows when it is long, and the document scrolls. It is wrong for a chat, and it is why the composer scrolled away — `hv-stream`'s own `overflow-y: auto` below never engaged, because nothing in its ancestor chain had a height for it to overflow. A box that can always grow never scrolls. So the one page whose body scrolls inside itself gets an exact height, and `min-height: 0` on the chain down to the stream, which is what lets a flex item shrink below its content (its automatic minimum is `auto`, and that is the whole of this bug in four words). Selected with `:has()` because the constraint belongs to the ancestor and the page identifies itself at `
`; the same pattern `.hv-main--centered:has(> .sc-view)` in `pages.css` already uses. Where `:has()` is unavailable the rule is dropped and the document scrolls as it did — quieter than correct, never wrong. */ /* **A conversation page is exactly the viewport, and says so at the document.** The shell is already `100dvh` and clipped, and the transcript already scrolls inside it — but the *document* kept a few dozen pixels of scroll anyway, from rounding between `100dvh` and the visual viewport and from boxes the shell clips but the initial containing block still counts. The effect a person sees is the whole chat drifting under a header that was supposed to be fixed, which is the complaint this exists to answer. Declaring it here is not a patch over that arithmetic; it is the statement the layout has been making since T-0902 — on these pages the document does not scroll, one region does. Every other page is untouched, and the column's own `overflow-y` below keeps the composer reachable when a narrow screen cannot fit everything at once. */ html:has(.hv-main--conversation), body:has(.hv-main--conversation) { overflow: hidden; } .hv-shell:has(.hv-main--conversation) { height: 100dvh; min-height: 0; overflow: hidden; } .hv-shell:has(.hv-main--conversation) .hv-pane { min-height: 0; } /* **Not optional.** A grid item's default `min-width: auto` is its min-content width, so one wide `` inside `
` pushes the `1fr` column past its track and the *document* scrolls sideways — the exact failure Requirements J1 forbids. Declared on both the grid item and the flex item inside it, because each is a separate automatic minimum. */ .hv-pane, .hv-main { min-width: 0; } .hv-pane { display: flex; flex-direction: column; background: var(--surface-page); } .hv-main { flex: auto; width: 100%; padding: var(--space-5) var(--space-6); /* `anywhere`, not `break-word`: `anywhere` also reduces the element's min-content width, which is what stops a long run id or URL from widening the grid column in the first place (DK-29). `pre` is unaffected — `white-space: pre` does not wrap and `base.css` already gives it `overflow-x: auto`. */ overflow-wrap: anywhere; } /* `Chrome::SignedOut` and `Chrome::Error`: one centred column, no rail, no app bar. `min()` is DK-15's whole mobile-prose story — `68ch` exceeds a 360px viewport, and `100%` is the other branch. Deliberately not vertically centred: a flex `center` clips the top of anything taller than the viewport, and the two surfaces that render here already own their vertical rhythm (`pages.css`'s `.hv-signin`, `components.css`'s `.hv-error`). */ .hv-main--centered { width: min(var(--measure), 100%); margin-inline: auto; padding: var(--space-6); } /* **The conversation page (T-0901, T-0902).** The interview's
opts into a measure column so the title, status and timestamp on its object header (T-0903) read as one bounded band rather than scattered to opposite edges of a 1280px viewport, and the column becomes a flex column (T-0902) so the stream takes the free space and the composer anchors to the bottom of the pane — the alternative was a composer floating at a third height with an ocean of empty page beneath it. Same width shape as `.hv-main--centered`; not the same width: this one keeps the chrome's `--space-5` / `--space-6` page padding (so the rail's own `hv-pane` continues to own the rhythm between header and body) rather than re-padding. Centred horizontally, in the same way, so the band is the same width on a 1024px viewport and a 1920px one. `min-height: 0` is the flex-item discipline that lets the stream actually shrink — without it, the stream's min-content height (its full message list) makes the whole column grow to fit. */ .hv-main--conversation { width: min(var(--measure), 100%); margin-inline: auto; display: flex; flex-direction: column; min-height: 0; /* The column is exactly the pane's remaining height, and what scrolls is inside it. Without this the column is as tall as its content and the stream has nothing to overflow. */ overflow: hidden; } /* **T-0902's other half, which the ticket described and did not ship.** The declarations that make a stream take the remainder were written onto `.hv-stream--newest-first` — the pipeline log's modifier — and the interview renders a plain `.hv-stream`, so the conversation column stretched to the viewport and its contents stacked at the top: a composer floating at a third height with an ocean of empty page beneath it, which is the exact sentence REDESIGN §2's R9 uses. Two declarations, and neither is `flex: 1` on the stream. The column's children are the header, the stream, the empty state, the *live* agent turn (a sibling of the stream, not a child of it — it is what Datastar patches while an answer streams) and the composer. A growing stream would push that live turn down to sit against the composer, detached from the transcript it belongs to. So the stream only learns to *shrink* — `min-height: 0` undoes a flex item's `auto` minimum, and a long transcript scrolls inside it — and the composer takes the free space as a margin, which is what anchors it to the bottom of the pane whatever is above it. */ /* **The transcript takes the free space, and it is the only thing that scrolls.** It used to only learn to *shrink* (`min-height: 0` alone) while the composer claimed the free space with an automatic margin. That anchors the composer to the bottom of a column that is as tall as its content — which is the bottom of a very long page, not the bottom of the window. `flex: 1` on the stream and a bounded column above put it where a chat's input belongs: on screen, always, with the conversation scrolling behind it. The header above and the composer, notice and live turn below stay `flex: none`, so a long transcript takes space from nothing but itself. */ .hv-main--conversation > .hv-stream { flex: 1; min-height: 0; overflow-y: auto; } /* **A conversation that lives in a panel scrolls inside it too.** The interview renders its transcript as bare children of the column, and the rules above bound it. A conversation's own permalink renders the same transcript inside an `hv-panel` — because the panel carries the title and the drift badge, and because the spec page renders that panel inline beside a document — so the column's direct child is the panel, and none of the rules above reached it. The whole page scrolled: the title, the composer and the rail's worth of chrome all moving while a person read. The panel becomes the column, its body becomes the transcript, and its header and footer stay put — so the thing that scrolls is the messages and nothing else. */ .hv-main--conversation > .hv-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; } .hv-main--conversation > .hv-panel > .hv-panel__header, .hv-main--conversation > .hv-panel > .hv-panel__footer { flex: none; } .hv-main--conversation > .hv-panel > .hv-panel__body { flex: 1; min-height: 0; overflow-y: auto; } .hv-main--conversation > .hv-object-header, .hv-main--conversation > .hv-stream__empty, .hv-main--conversation > .hv-message, .hv-main--conversation > .hv-notice, .hv-main--conversation > .hv-composer { flex: none; } /* ================================================================== * The rail — the object switcher, on its own ramp (DK-12) * ================================================================== */ /* **The rail is a third theme, so it re-points the semantic layer inside its own subtree.** This is DK-11's mechanism ("a theme block re-points the semantic layer and nothing else") applied to a scope rather than to a document, and it is what DK-12's "its own semantic group" means in CSS: a component dropped into the rail resolves the rail's ramp because the *names* resolve differently here, not because every component grows a rail variant. It is also the only mechanism available. `@layer components` sits ABOVE `@layer layout` in the order `tokens.css` declares, so `.hv-sidebar .hv-row--active` written here could never beat `.hv-row--active` written there, at any specificity — layers settle that before specificity is consulted. A custom property is resolved at *use* time from the element's inherited environment, so it reaches where a selector cannot. Concretely, this is what turns `hv-row`'s `background: var(--surface-accent-soft)` (a near-white tint, which would render the rail's active label at 1.02 : 1) into `--rail-bg-active`, and its hover `--surface-sunken` into `--rail-bg-hover`. Every mapping below lands on a pair `design/contrast.md`'s rail section already computes. `--accent` is deliberately NOT re-pointed: the active-item marker is `--accent` on `--rail-bg` at 3.15 : 1, which is the row the table reserves for it. */ .hv-sidebar { --surface-page: var(--rail-bg); --surface-default: var(--rail-bg); --surface-raised: var(--rail-bg-active); --surface-sunken: var(--rail-bg-hover); --accent: var(--rail-accent); --surface-accent-soft: var(--rail-bg-active); --fg-default: var(--rail-fg); --fg-muted: var(--rail-fg-muted); --fg-subtle: var(--rail-fg-subtle); --border-subtle: var(--rail-border); --border-default: var(--rail-border); --border-control: var(--rail-border-control); --border-strong: var(--rail-fg-subtle); display: flex; flex-direction: column; gap: var(--space-3); /* The rail fills its grid track whether the track holds the `