/* * HouseChalk — the desktop shell. * * Spec: docs/superpowers/specs/2026-09-01-desktop-shell-design.md * * CONTAINER QUERIES, NOT MEDIA QUERIES, and layout.css says why: a * `@media (min-width: 1024px)` matches the review page this deck is drawn on, * not the frame the shell sits in — so a 390px phone frame would get the rail. * Everything below is relative to .hc-desk's own inline size. * * THE RIVER IS CAPPED IN BOTH MODES. Without the cap in two-column mode a * 1920 canvas yields a 1144pt line length. Everything after river + subject is * margin on the right; nothing stretches to fill it. * * AND THE RIVER NEVER NARROWS AS THE CANVAS GROWS. This is why the subject * column arrives at 1496 and not at 1440: at 1439 the river is 720, and at * 1440 a 440pt subject would drop it to 680. A reading column that shrinks * when you widen the window is a reflow nobody can explain. * check-desktop-regions.mjs holds this. */ .hc-desk { container-type: inline-size; container-name: desk; position: relative; } :root { --desk-rail: 232px; /* the longest label, "Record something", is 121pt at DM Sans 14/500; the floor is ~208 and this is that plus slack for a longer locale. */ --desk-river-max: 720px; --desk-subject: 440px; --desk-gap: 24px; --desk-pad: 40px; --desk-pad-rail: 32px; /* see below — 40 here narrows the river by 8 */ } /* ---- below 1024: nothing changes. The dock, the fluid column and the centered behavior are what ships, and they stay. -------------------------- */ .hc-desk-rail { display: none; } .hc-desk-body { position: absolute; inset: 0; padding: 0 var(--desk-pad); } .hc-desk-river { max-width: var(--desk-river-max); } .hc-desk-subject { margin-bottom: var(--desk-gap); } /* stacked, above the river */ .hc-desk-commit { display: none; } /* ---- 1024: the rail replaces the dock ------------------------------------ */ @container desk (min-width: 1024px) { /* THE PADDING DROPS TO 32 HERE, and it is not a taste decision. At 1023 the body is 943 and the river caps at 720. At 1024 the rail takes 232, and with 40pt padding the body is 712 — so the river would narrow from 720 to 712 at the exact moment the rail arrives. That is the same defect that moved the subject tier from 1440 to 1496, eight pixels smaller and just as wrong. 32 is on the spacing ladder and gives a 728 body, which the 720 cap then holds. check-desktop-regions.mjs fails if this is put back to 40. */ .hc-desk-body { left: var(--desk-rail); padding-left: var(--desk-pad-rail); padding-right: var(--desk-pad-rail); } .hc-desk-rail { display: flex; flex-direction: column; position: absolute; left: 0; top: 0; bottom: 0; width: var(--desk-rail); border-radius: var(--r-lg) 0 0 var(--r-lg); } .hc-desk-commit { display: flex; align-items: center; justify-content: space-between; position: absolute; left: var(--desk-rail); right: 0; bottom: 0; height: 76px; padding: 0 var(--desk-pad-rail); } } /* ---- 1496: the subject column sits beside the river ---------------------- */ @container desk (min-width: 1496px) { .hc-desk-cols { display: flex; gap: var(--desk-gap); align-items: flex-start; } .hc-desk-subject { flex: 0 0 var(--desk-subject); margin-bottom: 0; order: -1; } .hc-desk-river { flex: 1 1 auto; min-width: 0; max-width: var(--desk-river-max); } } /* ---- the rail's interior ------------------------------------------------- THE COLORS ARE THE DOCK'S. --nav-shell, --nav-strong, --nav-dim and --nav-badge-bg are declared in xnav.css, which is why a page that mounts a rail must load that sheet too — check-deck-stylesheets.mjs holds it. The rail measured 7.68:1 idle and 11.13:1 selected during review because these are the tokens the dock already passed on. */ .hc-desk-rail { background: var(--nav-shell); padding: 24px 16px; gap: 4px; } .xrail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 20px; } .xrail-brand b { font-size: 15px; font-weight: 700; color: var(--nav-strong); letter-spacing: -.2px; } .xrail-mark { width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; background: var(--primary); } .xrail-row { display: flex; align-items: center; gap: 12px; text-decoration: none; padding: 10px 12px; border-radius: 12px; min-height: 44px; box-sizing: border-box; /* G7: the target, not the text */ font-size: var(--text-sm); font-weight: 500; color: var(--nav-dim); } .xrail-ic { width: 18px; height: 18px; flex-shrink: 0; } .xrail-lbl { white-space: nowrap; } /* I4: a label never wraps */ /* I1 wants two simultaneous changes; this makes three, as the dock does. */ .xrail-row.on { background: var(--primary); color: var(--on-primary); font-weight: 600; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-primary) 28%, transparent); } .xrail-group { font-size: var(--text-xs); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--nav-dim); padding: 16px 12px 6px; } /* A dot, never a count — ruling 4. Ringed so it reads against the shell. */ .xrail-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--nav-badge-bg); margin-left: auto; box-shadow: 0 0 0 2px var(--nav-shell); } .xrail-row.on .xrail-dot { background: var(--on-primary); box-shadow: 0 0 0 2px var(--primary); } .xrail-foot { margin-top: auto; } /* ---- the header ---------------------------------------------------------- POSITION:STICKY IS NOT ENOUGH, and building it is what found this. The first version let cards ride up above and through the header: it must be opaque, and it must bleed to the body's full horizontal padding, or the river's cards paint in the gutter beside it. The scroll container contributes no top padding of its own for the same reason. AND IT IS 1024-AND-ABOVE ONLY. Below that the header keeps today's behavior — .deskbar scrolls with the content — because "nothing below 1024 changes" has to survive contact with this file. B2's collapsing title stays a phone behavior: on desktop the rail already answers "where am I", and there is no top bar for a title to collapse into. */ @container desk (min-width: 1024px) { .hc-desk-body { overflow-y: auto; padding-top: 0; padding-bottom: 96px; } .hc-desk-head { position: sticky; top: 0; z-index: 5; background: var(--surface); padding: 22px var(--desk-pad-rail) 14px; /* 24 rather than 8: at 8 the first card sat almost against the title. The header's own 14 of padding is inside the opaque band, so the gap the reader sees is only what this margin adds. */ margin: 0 calc(-1 * var(--desk-pad-rail)) 24px; box-shadow: 0 10px 16px -14px rgba(54, 61, 73, .35); } } /* ---- the commit bar ------------------------------------------------------ RULING 3 DOES NOT CARRY UP. On the phone the dock and the commit bar are both horizontal at bottom:16px, so one has to yield and the dock does. A vertical rail and a horizontal bar do not compete for the same space, so both are present and there is no hide-or-replace state here at all. The consequence sits IN the bar, not above it: A2 asks the commit control to say what committing means, and the deck's 155 solid CTAs currently carry none of it. */ @container desk (min-width: 1024px) { .hc-desk-commit { background: var(--surface-card); box-shadow: inset 0 1px 0 var(--outline), 0 -12px 28px -14px rgba(54, 61, 73, .16); } .hc-desk-what { font-size: var(--text-sm); color: var(--on-surface-variant); } .hc-desk-commit .cta { width: auto; margin: 0; padding: 12px 22px; } } /* ---- the subject -------------------------------------------------------- ONLY THE SUBJECT OF THE RIVER may live here: the room, the document, the record under discussion. Never a second list, a metric, or a summary. That is the line between "a picture of what you are deciding" and the dashboard wall the brand rules out — and a screen with no subject simply omits the element rather than inventing something to fill it. BELOW 1496 IT STACKS ABOVE THE RIVER, which is "stack rather than squeeze" applied literally and is already the deck's answer: 43-deciding-against-the-picture frame 4 pins the picture to the top with the options scrolling under it. A subject screen has two layouts, not three. */ .hc-desk-subject > .micro-label { display: block; margin-bottom: 10px; } .hc-desk-subject .draw { border-radius: var(--r-card); overflow: hidden; } /* ---- the overlay, on a desktop ------------------------------------------- BOTTOM ON A PHONE, SIDE ON A DESKTOP, AND IT IS ONE COMPONENT. The position is a container decision rather than a different component: a bottom sheet on a 1160px canvas is a letterbox, so past the tablet rung it comes in from the right instead and takes the full height. The query hangs off the desk container, so a phone drawn on a desktop page still gets the phone treatment. The package queries the FRAME at 840, which is its tablet rung. This deck has no frame container: the `desk` container is the desktop canvas and it has two tiers, 1024 and 1496, which `check-desktop-regions.mjs` holds it to. A third at 840 would be a tier nothing else uses and no canvas is ever narrower than the first, so the two queries pick out the same set of surfaces — the deck's rung is the one to be on. This rung is DECLARED AND NOT YET DRAWN: no desktop frame in the deck opens an overlay, so nothing renders it and nothing can catch it going wrong. */ @container desk (min-width: 1024px) { .overlay .overlay-panel { margin-top: 0; margin-left: auto; width: min(480px, 86%); max-height: 100%; height: 100%; border-radius: var(--r-card) 0 0 var(--r-card); } }