/* ============================================================================
   GENERATED — do not edit. Source of truth: the BD Realty Design System
   (Claude Design project), product/rig.css. Regenerate the bundle there after
   any change. Generated 2026-07-30.
   ============================================================================ */

/* ============================================================================
   BD Realty Design System — RIG  (rig.css)
   The site-wide product shell: rail, band, content menu, stage, drawer.
   Every BDOS page loads into this frame. See RIG.md.
   Requires styles.css (the tokens). Part of the 2026-07 harness overhaul.
   ============================================================================ */

/* ---- SHELL -------------------------------------------------------------- */
.bd-rig { height: 100vh; height: 100dvh; display: flex; overflow: hidden;
  background: var(--canvas); font-family: var(--font); color: var(--text-body); }
.bd-rig__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bd-rig__panes { flex: 1; min-height: 0; display: flex; }
/* THE RAIL DATUM: the rail's first tile lines up with the index's count blocks, not with
   the band — the band belongs to the centre column and the index runs past it to the top.
   AND IT LINES UP WITH THE STAGE HEAD, which is what the datum was always for: the first thing
   in the left column and the first thing in the centre column start on ONE line. That took
   --u-pad, not a flat 24px. The centre head's top inset is var(--u-pad) — a 2.7vw clamp — so a
   constant could only agree with it at one viewport width, and agreed with it at none: measured
   headless at 1025/1200/1367/1600/2000px the count blocks sat 3.7 / 8.4 / 12.9 / 19.2 / 28px
   ABOVE the stage's first tab, the gap widening with the window (Brock, 1 Aug 2026). Both sides
   now read the same token, so they cannot drift apart again.
   NOTE the centre inset really is --u-pad at every width: .tr-head restates padding-top AFTER
   bd-rig.css, so the @container stage (max-width: 760px) switch to --u-pad-s never lands on it. */
:root { --u-rail-datum: calc(var(--u-band) + var(--u-pad)); }

/* ---- 1. RAIL (global nav) — icon squares, no labels ------------------- */
.bd-rail { width: var(--u-rail); flex: none; background: var(--canvas);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 0 0 clamp(12px, 1.4vw, 18px); overflow-y: auto; scrollbar-width: none; }
.bd-rail::-webkit-scrollbar { display: none; }
.bd-rail__brand { height: var(--u-band); flex: none; display: grid; place-items: center; }
/* the first tile's top edge sits ON --u-rail-datum, level with the count blocks */
.bd-rail__items { display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
  margin-top: calc(var(--u-rail-datum) - var(--u-band)); }
.bd-rail > .bd-rail-item { margin-top: var(--space-1); }
.bd-rail__brand img { width: clamp(22px, 1.9vw, 30px); height: auto; }
.bd-rail__spacer { flex: 1; }
.bd-rail-item { width: var(--u-sq); height: var(--u-sq); flex: none; display: grid; place-items: center;
  appearance: none; border: 0; cursor: pointer; font-size: var(--u-fs-icon);
  background: transparent; color: var(--ink-dark-3);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.bd-rail-item:hover { color: var(--ink-dark-1); }
.bd-rail-item.on { background: var(--surface-invert); color: var(--mint-400); }
.bd-rail-item[data-armed="true"] { color: var(--mint-400); }
/* a rail tile that stands for a folder opens a text-only flyout */
.bd-rail-flyout { position: fixed; z-index: 60; min-width: 190px; padding: var(--space-2) 0;
  background: var(--surface-quiet); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
.bd-rail-flyout button { appearance: none; border: 0; background: transparent; cursor: pointer;
  text-align: left; padding: 10px 20px; font-family: var(--font); font-size: var(--u-fs-body);
  font-weight: var(--fw-medium); color: var(--accent); }
.bd-rail-flyout button:hover { background: var(--surface-body); }

/* ---- 2. BAND (top nav) — one header row on the canvas ---------------- */
.bd-band { height: var(--u-band); flex: none; display: flex; align-items: center;
  gap: var(--u-gap); padding: 0 var(--u-pad-s); background: var(--canvas); color: var(--ink-dark-1); }
.bd-band__tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.bd-band__new { width: var(--u-sq-s); height: var(--u-sq-s); display: grid; place-items: center;
  margin-left: 10px; appearance: none; border: 0; cursor: pointer;
  background: var(--mint-400); color: var(--accent); font-size: var(--u-fs-icon); }
.bd-tool { width: var(--u-sq-s); height: var(--u-sq-s); display: grid; place-items: center;
  appearance: none; border: 0; background: transparent; color: var(--ink-dark-3); cursor: pointer;
  font-size: var(--u-fs-icon); transition: background var(--dur-fast) var(--ease-standard),
  color var(--dur-fast) var(--ease-standard); }
.bd-tool:hover { color: var(--ink-dark-1); }
.bd-tool[aria-pressed="true"] { background: var(--surface-invert); color: var(--mint-400); }
.bd-band-nav { display: flex; gap: 0; }
.bd-band-btn { width: var(--u-sq-s); height: var(--u-sq-s); display: grid; place-items: center;
  appearance: none; border: 0; background: transparent; color: var(--ink-dark-3); cursor: pointer;
  font-size: var(--u-fs-icon); transition: color var(--dur-fast) var(--ease-standard); }
.bd-band-btn:hover { color: var(--ink-dark-1); }
/* THE SEARCH GIVES WAY (Brock, 30 Sep 2026: "you fix it and use claude design"). min-width: 0 is
   load-bearing: without it the box's floor was its own input's intrinsic width (~154px), so on a
   390px phone the box measured 199px and pushed Notes, Phone and New off the band's right edge. */
.bd-band__search { flex: 1 1 auto; min-width: 0; max-width: 460px; display: flex; align-items: center;
  gap: var(--space-2); padding-bottom: 6px; border-bottom: 1px solid var(--hair-dark); color: var(--ink-dark-3); }
.bd-band__search input { flex: 1; min-width: 0; color: var(--cream-100); font-size: var(--u-fs-row); }
.bd-band__search input::placeholder { color: var(--ink-dark-3); }
.bd-band__kbd { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); letter-spacing: .04em; }
.bd-band__end { display: flex; align-items: center; gap: var(--space-1); }
.bd-band__avatar { width: var(--u-sq-s); height: var(--u-sq-s); display: grid; place-items: center;
  background: var(--mint-400); color: var(--accent); font-size: var(--u-fs-mini);
  font-weight: var(--fw-semibold); cursor: pointer; }

/* ---- 3. INDEX (left content menu) ----------------------------------- */
.bd-index { width: var(--u-index); flex: none; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface-invert); color: var(--ink-dark-1); }
.bd-index__head { height: var(--u-band); flex: none; display: flex; align-items: center;
  gap: var(--u-gap); padding: 0 var(--u-pad-s); }
.bd-index__title { font-size: var(--u-fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight);
  color: var(--cream-100); }
.bd-index__tools { display: flex; align-items: center; gap: var(--u-gap); margin-left: auto; }
/* the count blocks sit ON --u-rail-datum, derived from it rather than repeating its number: the
   datum and this margin used to be two independent 24s that lined up by coincidence, so moving
   the datum moved the rail and left the blocks behind.
   THE DATUM BELONGS TO WHATEVER IS FIRST IN THE INDEX, and that is not always the count blocks: an
   index that opens with a field above them hands this margin to that field and zeroes this one
   (Today's LIST field does exactly that — see .tin-listzone in packages/todo/inbox.js). So this
   rule is the default, not a law: check the package before assuming the tiles are on the line. */
.bd-index__stats { flex: none; padding: 0 var(--u-pad-s); margin: calc(var(--u-rail-datum) - var(--u-band)) 0 var(--u-gap-lg); }
.bd-index__stats .bd-stats { width: 100%; height: 50px; }
.bd-index__stats .bd-stat { flex: 1; min-width: 0; overflow: hidden; padding: 0 clamp(12px, 1.5vw, 20px) 0 clamp(9px, 1vw, 14px); }
/* THE FIGURE'S INSET IS A ZERO-SUM TRADE WITH THE GAP, and that is why it is written as two
   numbers that must move together. The tile is a fixed 50px column with justify-content:center,
   so the stack is centred: the figure had only 2.26px of air above it while carrying 8px to its
   own caption (a 4px row-gap AND a 4px margin — in flex those add, they do not collapse).
   Brock, 1 Aug 2026: more room above the number, leave the word where it is, take a little out
   of the gap. With the tile height and the centring fixed, every px added above the figure MUST
   come out of the gap or the caption moves. 3px each way: air above 2.26 -> 5.26, gap 8 -> 5,
   caption top 31.24 -> 31.24 (measured in the live app, unchanged to the hundredth).
   So if you retune one of these, retune the other by the same amount. */
.bd-index__stats .bd-stat__fig { font-size: clamp(15px, 1.45vw, 21px); padding-top: 3px; }
.bd-index__stats .bd-stat__cap { margin-top: 1px; font-size: 11px; }
.bd-index__sort { flex: none; display: flex; align-items: center; gap: var(--u-gap);
  padding: 0 var(--u-pad-s) clamp(12px, 1.4vw, 20px); font-size: var(--u-fs-ctl);
  font-weight: var(--fw-medium); color: var(--ink-dark-3); position: relative; }
.bd-index__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 0 var(--space-4); }
.bd-index__section { padding: var(--u-gap-lg) 0 var(--space-2); font-size: var(--u-fs-mini);
  font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dark-3); }
.bd-index-item { width: 100%; display: flex; align-items: baseline; gap: 14px;
  appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: clamp(8px, .85vw, 12px) var(--u-pad-s);
  transition: background var(--dur-fast) var(--ease-standard); }
.bd-index-item__n { flex: none; width: 16px; font-size: 11px; font-weight: 700; color: var(--ink-dark-2); }
.bd-index-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* a task title NEVER wraps — one line, ellipsised */
.bd-index-item__t { font-size: var(--u-fs-row); font-weight: var(--fw-medium); line-height: 1.15;
  color: rgba(255,241,226,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 11px text on hickory takes --ink-dark-2 (5.6:1). --ink-dark-3 measures 4.42:1 —
   under the 4.5 floor, so it is for glyphs and placeholders only, never a text run. */
.bd-index-item__sub { display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden;
  font-size: 11px; line-height: 1.2; color: var(--ink-dark-2); }
/* the label SHRINKS and ellipsises — it is the only part of the row that can give */
/* same as .bd-tabtext: the source tag is a filter BUTTON in real use, so it needs the reset
   or the user agent draws a border on it. */
.bd-index-item__src { appearance: none; border: 0; border-radius: 0; font-family: inherit;
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; padding: 2px 7px 2px 5px; font-weight: var(--fw-medium);
  background: rgba(255,241,226,.12); color: rgba(255,241,226,.62); }
.bd-index-item__due { flex: none; white-space: nowrap; }
.bd-index-item:hover .bd-index-item__t { color: var(--cream-100); }
/* the selected row fills MINT — the one block in the menu */
.bd-index-item[aria-current="true"] { background: var(--mint-400); }
.bd-index-item[aria-current="true"] .bd-index-item__n { color: rgba(56,37,30,.6); }
.bd-index-item[aria-current="true"] .bd-index-item__t { color: var(--accent); }
.bd-index-item[aria-current="true"] .bd-index-item__sub { color: rgba(56,37,30,.6); }
.bd-index-item[aria-current="true"] .bd-index-item__src { background: rgba(56,37,30,.14); color: rgba(56,37,30,.75); }
.bd-index-item[data-done="true"] .bd-index-item__n { color: var(--mint-400); }
.bd-index-item[data-done="true"] .bd-index-item__t { text-decoration: line-through; }
.bd-index-item[aria-current="true"][data-done="true"] .bd-index-item__n { color: rgba(56,37,30,.6); }
/* a plain (unnumbered) menu row, for trees and segment lists */
.bd-index-item--plain { display: grid; grid-template-columns: 1fr auto; align-items: center;
  color: var(--ink-dark-2); font-size: var(--u-fs-row); font-weight: var(--fw-medium);
  padding-block: clamp(9px, 1.1vw, 13px); }
.bd-index-item--plain[aria-current="true"] { color: var(--accent); }
.bd-index-item--child { padding-left: calc(var(--u-pad-s) + var(--space-4)); font-weight: var(--fw-regular); }
.bd-index__scroll > .bd-index__section { padding-inline: var(--u-pad-s); }
.bd-index-item__end { font-size: var(--u-fs-mini); color: var(--ink-dark-3); }
.bd-index-item[aria-current="true"] .bd-index-item__end { color: rgba(56,37,30,.6); }
/* the brand statement that closes the menu */
.bd-index__statement { flex: none; padding: 16px var(--u-pad-s) clamp(16px, 1.9vw, 26px);
  font-size: 12.5px; line-height: 1.5; color: rgba(255,241,226,.55); }

/* the content menu when it describes ONE record: a single scroller, so the record's
   header and body move together instead of the body sliding under a pinned block */
.bd-index__panel { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }

/* ---- 4. STAGE (the page) ------------------------------------------- */
/* the stage is a container: its own layout responds to the width IT is given, so opening
   the drawer reflows the centre instead of covering it */
.bd-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface-body); container-type: inline-size; container-name: stage; }
.bd-stage__head { flex: none; background: var(--surface-raised); padding: var(--u-pad) calc(var(--u-pad) + var(--u-scroll)) clamp(18px, 2.1vw, 34px) var(--u-pad); }
.bd-stage__row { flex: 1; min-height: 0; display: flex; overflow: hidden; }
/* min-height:0 is load-bearing: without it the flex automatic minimum size lets the pane
   grow past the row and the composer falls off the bottom of the window. */
/* PANE ORDER: .bd-context comes FIRST (the left column) and .bd-work second, so the brief
   is read before the feed and the context text hangs on the page title's left margin. */
.bd-work { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface-body); padding: var(--u-pad-s) var(--u-pad) var(--u-pad-s) var(--u-pad-s);
  overflow: hidden; container-type: inline-size; container-name: work; }
.bd-work__scroll { flex: 1; min-height: 0; overflow: auto; }

/* ---- .bd-rowgrid — a record row that sheds columns off the PANE's width -------
   Narrow is the unconditional base, so nothing depends on a measurement arriving
   before paint. The wide-only cells stay in the DOM and are display:none until the
   pane is wide enough to hold them. Never re-introduce a JS width branch here. */
.bd-rowgrid { display: grid; grid-template-columns: 44px minmax(0, 1fr);
  align-items: center; gap: 6px 16px; }
.bd-rowgrid__wide { display: none; }
@container work (min-width: 900px) {
  .bd-rowgrid { grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 1fr) 118px minmax(0, 1.1fr) minmax(0, .9fr); }
  .bd-rowgrid__wide { display: block; min-width: 0; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis; }
  .bd-rowgrid__tags { display: flex; flex-wrap: wrap; gap: 1px; justify-content: flex-end; }
  .bd-rowgrid__narrow { display: none; }
}
.bd-work > .bd-row + .bd-work__scroll { margin-top: var(--u-gap-lg); }
.bd-context { width: var(--u-ctx); flex: none; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface-quiet); padding: var(--u-pad-s) var(--u-pad-s) var(--u-pad-s) var(--u-pad);
  overflow: hidden; }
/* ONE RIGHT EDGE. The pane row reserves --u-scroll for its scrollbar, so the header
   must reserve it too or its actions sit inboard of the content beneath them. The
   context scroller keeps its gutter as MARGIN, not padding, so its blocks end on the
   same line as the work rows rather than 12px short. */
:root { --u-scroll: 10px; }
.bd-context__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.bd-context, .bd-context * { min-width: 0; }
.bd-context [style*="grid-template-columns"] > span { overflow-wrap: anywhere; }
.bd-context > .bd-micro + .bd-context__scroll { margin-top: 16px; }
/* the context column's figure run — a column beside the work, a band above it */
.bd-context__figs { display: flex; flex-direction: column; gap: 0; }
/* the composer: mic · underline field · filled square */
.bd-composer { flex: none; margin-top: var(--u-gap-lg); max-width: 66ch; display: flex;
  flex-direction: column; gap: var(--space-3); }
.bd-composer__row { display: flex; align-items: center; gap: var(--u-gap); }
.bd-composer__actions { display: flex; align-items: center; gap: var(--u-gap); }

/* A branch that needs ONE root element (an sc-if, a template partial) must carry the
   column itself — a bare <div> wrapper is a block box, so .bd-stage__row's flex:1 has no
   flex parent to resolve against, the height cap is lost and the page stops scrolling. */
.bd-stage__page { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* the three header archetypes */
.bd-head--record .bd-head__title { font-size: var(--u-fs-title); max-width: 22ch; }
.bd-head--collection .bd-head__title { font-size: clamp(20px, 1.9vw, 32px); max-width: 26ch;
  margin-top: clamp(10px, 1.2vw, 16px); }
.bd-head--document .bd-head__title { font-size: clamp(20px, 2vw, 34px); font-weight: var(--fw-medium); max-width: 26ch; }

/* ---- 5. DRAWER (right content menu) -------------------------------- */
/* The drawer butts FLUSH against the work pane — no seam, no line, no shadow. Their fills
   differ (cream-200 -> cream-100), which is the whole separation. The grip is invisible at
   rest and shows a short bar only while the pointer is on it. */
.bd-drawer { width: var(--u-drawer); flex: none; min-height: 0; display: flex; flex-direction: column;
  background: var(--surface-quiet); position: relative; }
.bd-drawer__grip { position: absolute; left: 0; top: 0; bottom: 0; width: 8px; cursor: col-resize;
  z-index: 3; display: grid; place-items: center; }
.bd-drawer__grip::after { content: ""; width: 2px; height: 34px; background: transparent;
  transition: background var(--dur-fast) var(--ease-standard); }
.bd-drawer__grip:hover::after { background: var(--hickory-300); }
.bd-drawer__head { height: var(--u-band); flex: none; display: flex; align-items: center;
  gap: var(--u-gap); padding: 0 var(--u-pad-s); }
.bd-drawer__title { font-size: var(--u-fs-row); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.bd-drawer__scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--u-pad-s) var(--u-pad-s); }
.bd-drawer__foot { flex: none; padding: var(--space-3) var(--u-pad-s) var(--u-pad-s); }

/* ---- 6. THE LEVEL STRIP -------------------------------------------- *
   A quiet 6px measure across the bottom — no text. A long hover reveals the level,
   the pathway and the points, so the bar itself never competes with the content.     */
/* The ground is LIGHT so the label reads at 0% progress as well as at 100% — the mint fill
   passes underneath hickory ink, which is legible on both. Never ink-on-its-own-ground. */
.bd-xp { flex: none; position: relative; display: block; width: 100%; height: 6px; padding: 0;
  appearance: none; border: 0; cursor: pointer; background: var(--surface-invert); overflow: visible; }
.bd-xp__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mint-400); }
/* the numbers live in the hover reveal, not on the bar */
.bd-xp__tip { position: absolute; right: var(--u-pad-s); bottom: calc(100% + 6px);
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; text-align: left;
  background: var(--surface-quiet); color: var(--accent); box-shadow: var(--shadow-lg);
  font-size: var(--u-fs-mini); font-weight: var(--fw-medium); white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-standard) 400ms,
  visibility var(--dur-base) 400ms; }
.bd-xp:hover .bd-xp__tip, .bd-xp:focus-visible .bd-xp__tip { opacity: 1; visibility: visible; }
.bd-xp__tip b { font-weight: var(--fw-semibold); }
.bd-xp__tip i { font-style: normal; color: var(--hickory-500); }

/* ---- 8. MOBILE ----------------------------------------------------- *
   base   phone   band + stage; rail becomes a bottom bar; index & drawer slide over
   640            the context column folds under the work pane
   1024           rail + index + stage + drawer, all in flow
   1440           every pane at its full width

   The DRAWER IS NEVER AN OVERLAY on a desktop: it slides in beside the stage and the
   stage reflows (see the @container rules). Only a phone, where there is no room to sit
   beside anything, slides the menus over the top.
   ------------------------------------------------------------------- */
.bd-tabbar { display: none; }
[data-index="closed"] .bd-index { display: none; }
[data-drawer="closed"] .bd-drawer { display: none; }

/* THE CENTRE'S OWN RESPONSIVE DESIGN — driven by the stage's width, not the window's.
   Open the drawer on a laptop and the context column folds under the work pane; nothing
   is ever covered. */
@container stage (max-width: 760px) {
  .bd-stage__row { flex-direction: column; overflow: auto; }
  .bd-work, .bd-context { width: auto; flex: none; min-height: auto; overflow: visible; }
  .bd-work__scroll, .bd-context__scroll { overflow: visible; }
  /* Stacked, the context column stays FIRST — the reading order is the same one the
     side-by-side layout has, so nothing jumps as the stage narrows. To pay for that
     it goes COMPACT: its figure run turns horizontal and its copy is capped, so it
     costs a band rather than a screenful and the work below stays on the fold. */
  .bd-context { padding: var(--space-3) var(--u-pad) var(--u-gap); }
  .bd-context__figs { flex-direction: row; flex-wrap: nowrap; }
  .bd-context__figs > * { flex: 1 1 0; min-width: 0; }
  /* the heading drops only on a COLLECTION, where the column is a run of figures
     that already caption themselves. A record's column keeps its label. */
  .bd-head--collection ~ .bd-stage__row > .bd-context > .bd-micro { display: none; }
  .bd-context__scroll { display: flex; flex-direction: column; gap: var(--u-gap); margin-top: 0; }
  .bd-context__scroll > p { margin: 0; max-width: 66ch; }
  /* a horizontal run that does not fit WRAPS — never a suppressed side-scroll.
     Same ruling as the section tab strip: a permanently clipped row reads as a bug. */
  .bd-work .bd-chip-group { flex-wrap: wrap; row-gap: 1px; }
  .bd-work { padding-top: var(--space-3); }
  .bd-work > .bd-row + .bd-work__scroll { margin-top: 10px; }
  /* the composer is always reachable: pinned by the pane when side by side, stuck to
     the bottom of the stage when the panes stack into one scroller */
  .bd-composer { position: sticky; bottom: 0; z-index: 4;
    background: var(--surface-body); padding-block: var(--space-3);
    margin-bottom: calc(var(--u-pad-s) * -1); }
  /* a stacked band pays for itself twice over: tighter blocks, and no page-header
     meta line — the count is already stated above the records */
  .bd-context__figs .bd-stat { padding-block: 8px; }
  .bd-head--collection .bd-head__meta { display: none; }
  /* the page header carries the same density change — a stacked stage cannot
     afford full-width header padding above a band and a list */
  .bd-stage__head { padding: var(--u-pad-s) calc(var(--u-pad) + var(--u-scroll)) var(--space-4) var(--u-pad); }
  .bd-head--collection .bd-head__title, .bd-head--document .bd-head__title { margin-top: var(--space-2); }
}
@container stage (max-width: 560px) {
  /* the actions keep their right-margin pin at every stage width — only the group
     wraps inside. A full-width end can never share the lead's row. */
  .bd-head__end { align-items: flex-end; margin-left: auto; }
  .bd-head__end .bd-btn-group { flex-wrap: wrap; }
}
@media (max-width: 639.98px) {
  .bd-rail { display: none; }
  /* the phone is the ONLY tier where a menu covers anything, and it never covers the rail */
  [data-index="open"] .bd-index { position: fixed; top: 0; left: 0; bottom: 0; width: 100%;
    z-index: 6; box-shadow: var(--shadow-lg); }
  [data-drawer="open"] .bd-drawer { position: fixed; inset: 0; width: 100%; z-index: 6; }
  .bd-drawer__grip { display: none; }
  .bd-tabbar { display: flex; flex: none; background: var(--canvas); justify-content: space-around;
    padding: var(--space-1) 0 calc(var(--space-1) + env(safe-area-inset-bottom)); }
  .bd-tabbar .bd-rail-item { width: 44px; height: 44px; }
  .bd-stage__head, .bd-work, .bd-context { padding-inline: var(--space-5); }
  /* ⌘K is a keyboard shortcut and a phone has no keyboard to press it on: the room goes to the field */
  .bd-band__kbd { display: none; }
}