/* Idlewild Design — the room shell. * * ADOPTION IS OPT-IN, one room at a time, via `room--shell` on : * * * * ──────────────────────────────────────────────────────────────────────────── * NO TRAPPED CONTENT — Daniel, 2026-09-12. This is a house standard and it * replaces the rule this file was built to enforce. * * The shell used to pin at `height:100dvh; overflow:hidden` and hand the * glass a fixed remainder, so anything longer than the remainder was reachable * only by scrolling inside a box. That is trapped content, and it fails in ways * a screenshot does not show: the page offers no scrollbar to say there is more, * find-in-page scrolls the document and not the box, Page Down and Home do * nothing, and on a phone the inner scroll fights the browser's own gesture. * * Measured on The Kitchen at 375x812 before this change: the board was 131px * tall holding 3,604px of content. Twenty-seven lines of a cook were behind a * gesture with no affordance. * * The standard now: ALL CONTENT LIVES IN THE PAGE, AND THE PAGE SCROLL REACHES * IT. No element holding content may own a scrollbar. The room is still a * place — the set and atmosphere are fixed planes behind the flow, which costs * the reader nothing — but the document is what scrolls. * * `min-height:100dvh` stays so a short room still fills the first screen and * reads as somewhere you walked into. That is a floor, not a ceiling. * ──────────────────────────────────────────────────────────────────────────── * * The Study does NOT take this class. It still runs its own local copy in * writing/css/room.css; that copy is deleted, and the Study switched over, * once PR #147 is merged and the file is free to touch. * * Load after tokens.css and style.css, before stage.css. */ body.room--shell { /* A floor, not a lock. The room fills the first screen; the document grows * past it when the content does. */ min-height: 100dvh; /* House chrome puts the lamp ring in the flow above the room and makes * a flex column to do it. Declaring the column here rather than inheriting it * from chrome.js means the room's layout is the same whether or not the * chrome has booted. */ display: flex; flex-direction: column; } /* Plane 0-1 — set and atmosphere sit behind everything and never scroll. */ body.room--shell > .room-set, body.room--shell > .room-atm { position: fixed; inset: 0; pointer-events: none; z-index: 0; } body.room--shell > .room-set { z-index: -1; } /* The room: nav, mast, glass, in that order and each as tall as it needs to be. * The third row was `minmax(0, 1fr)` — a fixed remainder that forced the glass * to clip or scroll internally. Content sizes it now. */ body.room--shell > main.wrap { position: relative; z-index: 1; /* Fill the space the lamp ring leaves, and grow past it when the content * does. `flex: 1 1 auto` takes the remainder as a minimum rather than as a * cap, which is the whole difference between a floor and a trap. */ flex: 1 1 auto; height: auto; min-height: 0; display: grid; grid-template-rows: auto auto auto; gap: .5rem; padding-block: calc(.9rem + env(safe-area-inset-top, 0px)) 2rem; } /* The room tabs are not always a grid item. House chrome swaps them for the * lamp ring on this Desk, and the shell itself hides them below 40rem — and a * display:none child does not occupy a grid row. Left to auto-placement the * mast would slide into row 1 and the glass into row 2, leaving the 1fr row * empty and the glass free to overflow the viewport, which is the whole thing * the shell exists to prevent. Pin all three by name instead of by count. */ body.room--shell > main.wrap > .nav--site { grid-row: 1; } body.room--shell > main.wrap > .masthead { grid-row: 2; } body.room--shell > main.wrap > :last-child { grid-row: 3; } /* Nav wraps. It used to be one non-wrapping strip with a hidden sideways * scrollbar, capped at 2.4rem so it could not eat the room's height — which * put the last few rooms behind a gesture with no affordance. The room has no * fixed height to protect any more, so the links simply wrap. */ body.room--shell .nav--site { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; } body.room--shell .nav--site a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem; font-family: var(--sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-soft); text-decoration: none; } body.room--shell .nav--site a:hover { color: var(--brass); } body.room--shell .nav--site a.is-current { color: var(--ivory); } body.room--shell .nav--site a:focus-visible { outline: 2px solid var(--room-hue); outline-offset: 2px; } /* Mast: two lines maximum. * * Scoped through `> main.wrap` on purpose. holo.css is injected at runtime by * bootHouse(), so it lands after this file in the cascade, and its * `body.has-lamp-hud .wrap h1` carries the same specificity as a plain * `body.room--shell .masthead h1` — which means it wins, and the mast comes * back at 43px instead of 26px. On a 720px room that is the difference between * the one action being on screen and being clipped by the glass. The extra * step in the selector is what holds the shell's numbers against a sheet that * cannot be reordered. */ body.room--shell > main.wrap .masthead { margin: 0; } body.room--shell > main.wrap .masthead h1 { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.1; color: var(--ivory); } body.room--shell > main.wrap .masthead .eyebrow { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); } /* No trapped content. Nothing holding content owns a scrollbar — not the * glass, not the prime region, not the rail. The page scroll reaches all of it. * `overflow: visible` is stated rather than omitted because style.css and the * room sheets both still set `hidden` on these nodes in places. */ body.room--shell .desk-stage, body.room--shell .desk-stage-hero, body.room--shell .desk-stage-board, body.room--shell .hud-rail { min-height: 0; max-height: none; overflow: visible; } /* The week pack used to be hidden outright, because under the old lock it * pushed prime off the bottom. Nothing is pushed off anything now, so content * that was written to be read is allowed to be read. */ /* Two columns at 50rem, one below. */ body.room--shell .desk-stage-board { display: grid; gap: .85rem; min-height: 0; } @media (min-width: 50rem) { body.room--shell .desk-stage-board { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .75fr); align-items: stretch; } } @media (max-width: 39.99rem) { body.room--shell .nav--site { display: none; } /* lamp ring carries navigation */ body.room--shell > main.wrap { padding-inline: var(--page-pad); } } /* Gibson seat stays clear of controls (overlay only). */ body.room--shell .gibson-safe { position: fixed; top: var(--gibson-safe-gutter, 1rem); left: var(--gibson-safe-gutter, 1rem); width: var(--gibson-safe, 4.5rem); height: var(--gibson-safe-block, 4.5rem); pointer-events: none; z-index: 5; }