/* MODULE: css/chassis.css — the shell frame, the header chassis, the mode switch, the transport zone and the day-ribbon strip's placement (PHASE4 §2 and §4). Depends on css/tokens.css, css/type.css, css/base.css and css/materials.css, all of which load before it. Loads nothing itself: no @import, no font, no url() that is not already declared in materials.css. It does NOT own the dial's artwork (css/dial.css), the instrument's own layout (css/modes.css), the Panel's finished design (css/panel.css), the dashboard grid (css/layout.css) or any module (css/mod-*.css). ── WHAT THIS FILE IS FOR ───────────────────────────────────────────── PHASE4 §2 replaces the scrolling dashboard with a single fixed screen: 1 header — brand mark, CLOCK/TIMER/ALARM, two icon controls 2 the dial 3 the digital readout 4 the session label 5 the transport (reset · START · +1 · +5) 6 one thin day-ribbon strip "No page scroll on any device in the default state. If it scrolls, the design has failed." Everything else is in the Panel. ── HOW THE NO-SCROLL GUARANTEE IS BUILT ────────────────────────────── Not with viewport-height arithmetic per element — that breaks the moment a sequence stepper appears or a font falls back. ONE definite height is handed down an unbroken chain, and the dial absorbs whatever is left: .app-shell block-size: 100dvh − the safe areas (definite) ├ .chassis auto the header band ├ .app-stage minmax(0, 1fr) (definite) │ └ .mode-panel flex: 1 1 auto (css/modes.css) │ └ .tt-timer the instrument, sized by css/modes.css: │ the dial is sized on the BLOCK axis and is │ the element that gives way when it is tight └ .day-strip auto ~10px of track and one line of type This file states the heights of rows 1 and 3 and hands row 2 a definite box; css/modes.css does the rest inside it. .app-stage is the one scroll port in the app, which is what lets the ALARM list — a genuinely unbounded list — scroll without the page ever moving. ── REACHING INTO OTHER AGENTS' COMPONENTS ──────────────────────────── Only two rules below touch a mode's element, both in §4, both about the HEIGHT BUDGET rather than about how the instrument is drawn. Each is written one specificity step above the rule it corrects (`.app-stage .tt-timer__readout`, never `.tt-timer__readout`) so load order cannot undo it, and each carries a CONTRACT-GAP note saying what the owning agent could adopt to delete it. ────────────────────────────────────────────────────────────────────── */ /* The Panel fallback in §8 is the one thing here that another agent is expected to replace wholesale. Declaring the layer up front means every unlayered rule in css/panel.css outranks it whatever its specificity, so src/panel.js can take the container over without out-specifying anything or knowing this file exists. Nothing else in this sheet is layered. */ @layer tt-shell-fallback; /* ============================================================== * * 0. LOCAL TOKENS * Composed from css/tokens.css. Nothing here is a new value that * could have come from the design system. * ============================================================== */ :root { /* THE ONE DEFINITE HEIGHT. svh first for engines without dvh; dvh is what PHASE2 §5 requires, because 100vh is wrong in mobile Safari and would push the transport under the browser chrome. Both are measured against the CURRENT viewport, so neither can ever exceed it — the safe-area insets are subtracted because css/base.css spends them as padding on , outside this box. */ --ch-shell-h: calc(100svh - var(--safe-top) - var(--safe-bottom)); /* The header band's inner padding, and the height of its first row — one touch target, so the grille band can be centred on it by maths rather than by eye. */ --ch-chassis-pad: var(--space-2); --ch-chassis-row: var(--tap); /* The day-ribbon strip: PHASE4 §2 asks for ~10px of track and a single line of type. 10 + 8 + 16 = 34px, and 8 and 16 are grid units. */ --ch-strip-track: 10px; /* Icon optical size, composed from the space scale rather than guessed — the same 20px css/layout.css derives for its own furniture, so every glyph in the app is cut to one size. */ --ch-icon: calc(var(--space-4) + var(--space-1)); /* THE READOUT'S CEILING. --fs-display is fluid in the INLINE direction (13vw) because that is the axis a clamp can see. On a wide, short window — 1280×800 is exactly that, and a real browser window at that size is shorter still — 13vw resolves to the 136px ceiling and the numerals eat the dial's height budget: at 1280×800 the disc lands around 270px against 136px of type, which is not the instrument the Time Timer is. Capping the numerals at 13svh (104px there, and no change at all on a phone, where --fs-display is already 56px) hands those pixels back to the disc. It is a PROPORTION, not a type size: the scale token still decides everything until the window gets short enough to argue. svh, not dvh, so the numerals do not resize when mobile Safari's chrome slides away. */ --ch-readout-cap: 13svh; /* The Panel fallback. ~380px per PHASE4 §2. */ --ch-panel-w: 23.75rem; --ch-panel-sheet-h: 72svh; /* An opaque nameplate that occludes the grille flutes beneath it, fading out on its trailing edge so it does not read as a pasted-on box. The 0%-mix is --bg with zero alpha: interpolating to the keyword `transparent` would drag the ramp through transparent BLACK and grey the fade in ceramic. */ --ch-plate-end: color-mix(in oklab, var(--bg) 0%, transparent); /* A recess milled into a metal billet: dark at the top lip, a lit lower lip, no drop shadow at all — a machined pocket is IN the surface, it does not sit on it. Built from the two non-inverting physical inks in css/materials.css so it stays correct in both themes. */ --ch-machined-recess: inset 0 1px 2px var(--m-cast), inset 0 3px 6px color-mix(in oklab, var(--m-cast) 55%, transparent), inset 0 6px 14px color-mix(in oklab, var(--m-cast) 28%, transparent), inset 0 -1px 0 var(--m-lift); } @supports (block-size: 100dvh) { :root { --ch-shell-h: calc(100dvh - var(--safe-top) - var(--safe-bottom)); } } /* ============================================================== * * 1. THE SHELL FRAME * Three rows, one definite height, no page scroll. * ============================================================== */ .app-shell { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-4); block-size: var(--ch-shell-h); /* css/base.css sets min-block-size: 100% for the old scrolling shell. A minimum taller than the definite height would win and reintroduce the scroll this whole file exists to remove. */ min-block-size: 0; } /* No JavaScript: there is no instrument to fit on one screen, only the