/* ========================================================================== Page — the column every screen is written in ========================================================================== THE RULE. The card goes on the item; the name goes on the ground — and the ground is the same width on every screen. ⛔ **WHY THIS EXISTS.** The grammar gave the app one type ladder and four surfaces, and then every screen still chose its own column. Measured at 1280 on 2026-09-05, the content column was **40rem, 42rem, 44rem, 45rem, 46rem or 48rem** depending on the page — and on `/entries/` and `/relationships/` there was no column at all: the page header, the filter row and the section headings ran the full 1200px container while the items inside them stopped at the 44rem the surfaces cap themselves to. That is what Gabriel saw. On People, *Add someone* sat at x=1264 and the rows it belongs to ended at x=960 — a **304px** overhang, so the button and the list it acts on did not share an edge. On Help the overhang was 76px. And because the measures differed, the column also JUMPED sideways as you navigated: its left edge was 256, 370, 412, 420, 436 or 520 depending on where you were. ⭐ **ONE MEASURE, AND EVERYTHING ON THE PAGE SHARES ITS EDGES.** The number is `--measure-page` (52rem), the same measure `.card-stack`, `.list-surface` and `.group` already cap themselves to — so the surfaces' own caps never bind, and the header, the section heading's rule and the items all start and end together. `tests/browser/ test_the_page_is_one_column.py` measures it on every screen. ⚠️ **PADDING IS PART OF THE MEASURE, NOT ADDED TO IT.** The max-width includes the horizontal padding, so the CONTENT box is exactly one measure on every screen. Screens used to differ here too — same cap, different padding, so the same number produced different columns. ⛔ **NOT EVERY SCREEN IS ONE COLUMN, AND THOSE DO NOT COMPOSE THIS.** The readers (an entry, a reflection, a person) put a rail beside the writing, Settings puts a rail beside the panel, Connections is a viewport rather than a document, the Library hub is a grid of doors and the Constellation is a canvas. Each of those is wider ON PURPOSE and its own grid decides where its columns land. Adding `.page` to one would narrow the rail out of existence. 📐 docs/admin/design_system.md "The measure". ========================================================================== */ .page { max-width: calc(var(--measure-page) + 2 * var(--space-md)); margin-inline: auto; padding: var(--space-lg) var(--space-md) var(--space-2xl); } /* ⭐ **"USE THE FULL WIDTH OF THE SCREEN", FOR THE WHOLE APP.** `/settings/#appearance` had this toggle for Explore alone, saved per device in localStorage. Gabriel, 2026-09-06: *"instead of explore … we use for the entire app."* It is `User.wide_layout` now — an account setting that follows her to every device, server-rendered onto `` beside `data-theme` and `text-size-*`, so the page is never painted narrow and then widened. ⛔ **IT RAISES THE MEASURE, IT DOES NOT REMOVE IT.** `max-width: none` on a 2560px monitor is a row 2400px wide with its date at one end and its count at the other, which is not "full width", it is unreadable. 76rem (1216px) is the widest the furniture still reads across. ⚠️ `.prose` keeps its 66ch at every width. This never lengthens her words. */ :root.layout-wide { --measure-page: 76rem; } /* On a phone the measure is the viewport, and the side padding tightens so a 44px row is not squeezed by gutters it does not need. */ @media (max-width: 40rem) { .page { padding: var(--space-md) var(--space-sm) var(--space-2xl); } }