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

/* ============================================================================
   BD Realty Design System — BLOCKS  (blocks.css)
   The canonical block for every recurring element. Full-bleed panes told apart
   by FILL, a fluid clamp scale, quiet weights, and no furniture.
   Requires styles.css (the tokens). Part of the 2026-07 harness overhaul.
   ============================================================================ */

/* ---- 0. RESET & PAGE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--u-fs-body); font-weight: var(--fw-regular);
  line-height: var(--lh-body); color: var(--text-body); background: var(--surface-page);
  text-wrap: pretty; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
input { background: none; border: 0; outline: 0; }
input::placeholder { color: var(--hickory-300); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(56,37,30,.18); }
::-webkit-scrollbar-track { background: transparent; }
svg[class*="lucide"] { width: 1em; height: 1em; stroke-width: 1.75; display: block; }

:where(a) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-standard); }
:where(a:hover) { color: var(--hickory-500); }
:where(.on-dark a) { color: var(--ink-dark-1); }
:where(.on-dark a:hover) { color: var(--mint-400); }
/* text boxes are exempt from the ring: the field law's box (1px→2px) IS their focus device,
   and a focused text input always matches :focus-visible, so the ring drew a second box
   around every field (Brock, 29 Aug 2026: "get rid of the second border"). :where keeps the
   specificity at (0,1,0) so per-surface rings still override this one. */
:focus-visible:where(:not(input):not(textarea):not(select):not([contenteditable])) { outline: 2px solid var(--mint-600); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-semibold); line-height: 1.1;
  letter-spacing: var(--ls-tight); }
h1 { font-size: var(--u-fs-title); }
h2 { font-size: clamp(19px, 1.8vw, 30px); }
h3 { font-size: clamp(16px, 1.4vw, 22px); }
p { margin: 0 0 var(--u-gap-lg); max-width: 66ch; line-height: 1.65; }

/* ---- 1. PANES — the only way two areas are told apart -------------------- */
.bd-pane--canvas { background: var(--canvas); color: var(--ink-dark-1); }
.bd-pane--menu   { background: var(--surface-invert); color: var(--ink-dark-1); }
.bd-pane--head   { background: var(--surface-raised); color: var(--text-body); }
.bd-pane--body   { background: var(--surface-body); color: var(--text-body); }
.bd-pane--quiet  { background: var(--surface-quiet); color: var(--text-body); }
.bd-pane--accent { background: var(--surface-accent); color: var(--text-on-accent); }
.on-dark { color: var(--ink-dark-1); }

/* ---- 2. LAYOUT ----------------------------------------------------------- */
.bd-section { padding: var(--u-pad); }
.bd-section--tight { padding: var(--u-pad-s) var(--u-pad); }
.bd-wrap { max-width: 1400px; margin-inline: auto; }
.bd-stack { display: flex; flex-direction: column; gap: var(--u-gap-lg); }
.bd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-gap); }
.bd-grid { display: grid; gap: 0; grid-template-columns: 1fr; }
.bd-grid--2, .bd-grid--3, .bd-grid--4 { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .bd-grid--2, .bd-grid--3, .bd-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bd-grid--3 { grid-template-columns: repeat(3, 1fr); } .bd-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* ---- 3. PAGE HEADER ------------------------------------------------------ *
   One header, three archetypes (see RIG.md). Sits in the cream-50 block, with
   the title on the fluid title clamp and the actions as a flush chip group.   */
.bd-head { background: var(--surface-raised); padding: var(--u-pad) var(--u-pad) clamp(18px, 2.1vw, 34px); }
.bd-head__top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--u-gap-lg) var(--space-6); }
.bd-head__lead { min-width: 0; flex: 1 1 200px; }
.bd-head__end { flex: 0 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.bd-head__title { margin: clamp(14px, 1.7vw, 24px) 0 0; font-size: var(--u-fs-title);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: 1.1;
  color: var(--accent); max-width: 22ch; text-wrap: pretty; }
.bd-head__meta { margin: var(--space-2) 0 0; font-size: var(--u-fs-body); color: var(--hickory-500); }
.bd-head__tabs { margin-top: var(--u-gap-lg); }
.bd-head__end { flex: 0 0 auto; margin-left: auto; }
@container stage (max-width: 440px) { .bd-head__end { align-items: flex-end; margin-left: auto; } }

/* ---- 4. SITE NAV -------------------------------------------------------- */
.bd-nav { position: relative; z-index: 40; display: flex; align-items: center; gap: var(--space-6);
  min-height: var(--u-band); padding: 0 var(--u-pad); background: var(--canvas); color: var(--ink-dark-1); }
.bd-nav__brand { display: flex; align-items: center; gap: var(--space-2); }
.bd-nav__brand img { height: clamp(20px, 1.8vw, 28px); width: auto; }
.bd-nav__links { display: none; align-items: center; gap: clamp(16px, 2vw, 34px); margin-left: auto; }
.bd-nav__link { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 4px 0;
  font-size: var(--u-fs-row); font-weight: var(--fw-medium); color: var(--ink-dark-2);
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--dur-fast) var(--ease-standard),
  box-shadow var(--dur-fast) var(--ease-standard); }
.bd-nav__link:hover, .bd-nav__link[aria-expanded="true"] { color: var(--ink-dark-1); box-shadow: inset 0 -2px 0 var(--mint-400); }
.bd-nav__burger { margin-left: auto; width: var(--u-sq); height: var(--u-sq); display: grid; place-items: center;
  appearance: none; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: var(--u-fs-icon); }
.bd-mega { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--surface-invert);
  color: var(--ink-dark-1); padding: var(--u-pad); }
.bd-mega[data-open="true"] { display: block; }
.bd-mega__grid { display: grid; gap: var(--u-pad-s); grid-template-columns: 1fr; }
.bd-mega__col h4 { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dark-3); margin: 0 0 var(--space-3); }
.bd-mega__item { display: block; padding: 7px 0; font-size: var(--u-fs-row); color: var(--ink-dark-1); text-decoration: none; }
.bd-mega__item:hover { color: var(--mint-400); }
@media (min-width: 1024px) { .bd-nav__links { display: flex; } .bd-nav__burger { display: none; }
  .bd-mega__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- 5. TABS — text with a 2px underline that grows from the left -------- */
/* The strip scrolls, and on a phone it usually MUST — six or seven tabs do not fit 375px. With the
   scrollbar hidden there was nothing to say so: Studio's last tab ("Booking Requests") sat wholly off
   the right edge and simply read as absent. A mask fades the overflowing edge, which is the one
   honest way to show "there is more this way" without drawing a line (law 3) or adding a control.
   Audit 16 Aug 2026.
   The strip pans SIDEWAYS ONLY (Brock, 23 Oct 2026: "on mobile the tabs are a bit broken you shouldnt
   be able to move them up and down"). overflow-x: auto alone computes overflow-y to auto too, and on
   a coarse pointer every tab's 44px hit pad (§EXTEND) hangs past the strip: the job card's strip at
   375px measured 22px tall with a scrollHeight of 33, so a thumb dragged the tabs 11px up and down.
   overflow-y: hidden clips exactly what the scroller already clipped, so nothing on screen moves. */
.bd-tabs { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 26px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.bd-tabs::-webkit-scrollbar { display: none; }
/* `--more-r` / `--more-l` are set by core/tab-overflow.js ONLY while the strip actually overflows in
   that direction, so a strip that fits is never faded. The mask is the one honest way to say "there
   is more this way" without drawing a line (law 3) or a shadow (law 5) or adding a control. */
.bd-tabs.bd-tabs--more { -webkit-mask-image: var(--tabs-mask); mask-image: var(--tabs-mask); }
.bd-tab { appearance: none; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 0 0 5px; font-size: var(--u-fs-row); font-weight: var(--fw-medium); color: var(--hickory-500);
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat;
  background-position: left bottom; background-size: 0 2px;
  transition: background-size var(--dur-base) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
/* hover: the line draws left to right at HALF the active weight */
.bd-tab:hover { color: var(--accent); background-size: 100% 1px; }
.bd-tab.on { color: var(--accent); font-weight: var(--fw-semibold); background-size: 100% 2px; }
.bd-tab.on:hover { background-size: 100% 2px; }
.bd-tabs--on-dark .bd-tab:hover { background-size: 100% 1px; }
.bd-tabs--on-dark .bd-tab.on, .bd-tabs--on-dark .bd-tab.on:hover { background-size: 100% 2px; }
.bd-tabs--on-dark .bd-tab { color: var(--ink-dark-3); background-image: linear-gradient(var(--mint-400), var(--mint-400)); }
.bd-tabs--on-dark .bd-tab:hover, .bd-tabs--on-dark .bd-tab.on { color: var(--ink-dark-1); }

/* ---- 6. SEGMENTED — flush blocks, the selected one fills ----------------- */
.bd-seg { display: inline-flex; gap: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.bd-seg::-webkit-scrollbar { display: none; }
.bd-seg-btn { appearance: none; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--surface-quiet); color: var(--hickory-500);
  font-size: var(--u-fs-ctl); font-weight: var(--fw-medium); padding: 7px 14px;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.bd-seg-btn:hover { color: var(--accent); }
.bd-seg-btn.on { background: var(--accent); color: var(--accent-2); font-weight: var(--fw-semibold); }
.bd-seg--on-dark .bd-seg-btn { background: rgba(255,241,226,.12); color: var(--ink-dark-2); }
.bd-seg--on-dark .bd-seg-btn.on { background: var(--accent-2); color: var(--accent); }

/* ---- 7. BUTTONS — quiet chips, fluid, flush in groups -------------------- */
.bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  appearance: none; border: 0; border-radius: 0; cursor: pointer; text-align: center; text-decoration: none;
  font-family: var(--font); font-size: var(--u-fs-ctl); font-weight: var(--fw-medium);
  padding: clamp(7px, .8vw, 9px) clamp(9px, 1.1vw, 14px);
  background: var(--surface-body); color: var(--accent);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.bd-btn:hover { background: var(--cream-300); }
.bd-btn[disabled] { opacity: .45; pointer-events: none; }
.bd-btn--primary { background: var(--accent); color: var(--accent-2); font-weight: var(--fw-semibold);
  padding-inline: clamp(11px, 1.2vw, 16px); }
.bd-btn--primary:hover { background: var(--hickory-600); }
.bd-btn--accent { background: var(--mint-400); color: var(--accent); font-weight: var(--fw-semibold); }
.bd-btn--accent:hover { background: var(--mint-500); }
.bd-btn--danger { background: var(--danger); color: var(--accent-2); font-weight: var(--fw-semibold); }
.bd-btn--ghost { background: transparent; color: var(--hickory-500); }
.bd-btn--ghost:hover { background: transparent; color: var(--accent); }
.bd-btn--on-dark { background: rgba(255,241,226,.12); color: var(--ink-dark-1); }
.bd-btn--on-dark:hover { background: rgba(255,241,226,.2); }
.bd-btn--block { width: 100%; }
.bd-btn-group { display: inline-flex; gap: 0; }
.bd-btn-icon { display: inline-grid; place-items: center; width: var(--u-sq-s); height: var(--u-sq-s);
  appearance: none; border: 0; background: transparent; color: var(--hickory-400); cursor: pointer;
  font-size: var(--u-fs-icon); transition: color var(--dur-fast) var(--ease-standard); }
.bd-btn-icon:hover { color: var(--accent); }
.bd-btn-icon--filled { background: var(--accent); color: var(--mint-400); }
.bd-btn-icon--filled:hover { background: var(--hickory-600); color: var(--mint-400); }
.bd-btn-icon--on-dark { color: var(--ink-dark-3); }
.bd-btn-icon--on-dark:hover { color: var(--ink-dark-1); }
/* a quiet inline action: text only, no chrome (Pause · Decline · Clear) */
.bd-action { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: var(--u-fs-ctl); font-weight: var(--fw-medium); color: var(--hickory-500);
  transition: color var(--dur-fast) var(--ease-standard); }
.bd-action:hover { color: var(--accent); }
.bd-action--armed { color: var(--accent); }

/* ---- 8. CHIPS · TAGS · PILLS · BADGES ----------------------------------- */
.bd-chip { appearance: none; border: 0; cursor: pointer; background: var(--surface-quiet); color: var(--hickory-500);
  font-size: var(--u-fs-ctl); font-weight: var(--fw-medium); padding: 7px 14px;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.bd-chip:hover { color: var(--accent); }
.bd-chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-2); }
.bd-chip-group { display: inline-flex; flex-wrap: wrap; gap: 1px; }
.bd-tag { display: inline-block; font-size: var(--u-fs-mini); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .08em; padding: 4px 9px;
  background: var(--surface-body); color: var(--hickory-500); }
.bd-tag--mint { background: var(--mint-400); color: var(--accent); }
.bd-tag--hickory { background: var(--accent); color: var(--mint-400); }
.bd-pill { display: inline-block; font-size: var(--u-fs-mini); font-weight: var(--fw-medium);
  padding: 4px 10px; background: var(--surface-body); color: var(--hickory-500); }
.bd-pill--live { background: var(--mint-400); color: var(--accent); }
.bd-pill--risk { background: var(--danger); color: var(--cream-100); }
.bd-pill--processing { background: var(--cream-300); color: var(--hickory-600); }
.bd-badge { display: inline-grid; place-items: center; min-width: 18px; padding: 2px 6px;
  background: var(--mint-400); color: var(--accent); font-size: var(--u-fs-mini); font-weight: var(--fw-semibold); }

/* ---- 9. CARDS (filled blocks) + LISTS ---------------------------------- */
.bd-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--u-pad-s);
  background: var(--surface-quiet); color: var(--text-body); border: 0; border-radius: 0; }
.bd-card--clickable { cursor: pointer; text-align: left; }
.bd-card--clickable:hover { background: var(--cream-200); }
.bd-card--highlight { background: var(--accent); color: var(--accent-2); }
.bd-card--highlight.bd-card--clickable:hover { background: var(--hickory-600); }
.bd-card--accent { background: var(--mint-400); color: var(--accent); }
.bd-card--quiet { background: var(--surface-body); }
.bd-card__big { font-size: clamp(23px, 2.2vw, 38px); font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter); line-height: 1; }
.bd-card__cap { font-size: var(--u-fs-row); font-weight: var(--fw-medium); }
.bd-card__meta { font-size: var(--u-fs-mini); color: var(--hickory-500); }
.bd-card--highlight .bd-card__meta, .bd-card--on-dark .bd-card__meta { color: var(--ink-dark-2); }
.bd-card__media { margin: calc(var(--u-pad-s) * -1) calc(var(--u-pad-s) * -1) var(--space-1);
  width: calc(100% + var(--u-pad-s) * 2); aspect-ratio: 4 / 3; object-fit: cover; }

/* a list is rows of text on ONE pane fill — no dividers, no row fills */
.bd-list { display: flex; flex-direction: column; }
.bd-list__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--u-gap);
  width: 100%; appearance: none; border: 0; background: transparent; text-align: left;
  padding: clamp(9px, 1.1vw, 14px) 0; color: inherit; }
button.bd-list__row { cursor: pointer; }
button.bd-list__row:hover .bd-list__title { color: var(--hickory-500); }
.bd-list__title { font-size: var(--u-fs-row); font-weight: var(--fw-medium); color: var(--accent);
  transition: color var(--dur-fast) var(--ease-standard); }
.bd-list__sub { display: block; font-size: var(--u-fs-mini); color: var(--hickory-500); margin-top: 3px; }
.bd-list__end { display: flex; align-items: center; gap: var(--space-2); font-size: var(--u-fs-mini);
  color: var(--hickory-500); }
.bd-list--on-dark .bd-list__title { color: var(--ink-dark-1); }
.bd-list--on-dark .bd-list__sub, .bd-list--on-dark .bd-list__end { color: var(--ink-dark-3); }
.bd-list--on-dark button.bd-list__row:hover .bd-list__title { color: var(--mint-400); }

/* ---- 10. SECTION HEADS — a micro-label, never a band ------------------- */
.bd-micro { display: block; font-size: var(--u-fs-mini); font-weight: var(--fw-medium);
  letter-spacing: .08em; text-transform: uppercase; color: var(--hickory-500); }
.bd-micro--on-dark { color: var(--ink-dark-3); }
.bd-cat-head { display: flex; align-items: center; gap: var(--space-2); padding: 0 0 var(--space-3); }
.bd-cat-label { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); letter-spacing: .08em;
  text-transform: uppercase; color: var(--hickory-500); }
.bd-cat-count { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); color: var(--hickory-500); }
.bd-cat-head.is-clickable { cursor: pointer; }
.bd-cat-head--on-dark .bd-cat-label { color: var(--ink-dark-3); }
.bd-cat-head--on-dark .bd-cat-count { color: var(--ink-dark-3); }

/* ---- 11. INPUTS & CONTROLS — a bordered box, nothing else --------------- */
.bd-field { display: flex; flex-direction: column; gap: 6px; }
.bd-label { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); letter-spacing: .08em;
  text-transform: uppercase; color: var(--hickory-500); }
.bd-hint { font-size: var(--u-fs-mini); color: var(--hickory-500); }
/* THE FIELD LAW (Brock, 28 Aug 2026): every text box is a BOX YOU CAN SEE — a 1px resting
   border (--field-line) that animates to 2px while the caret is inside. The second pixel is an
   inset ring, not a wider border, so nothing reflows on focus — and it is the border's own
   second pixel, not a shadow (law: no shadows). Never an underline, never a focus tint. The
   underline field is RETIRED. */
.bd-input, textarea.bd-input {
  width: 100%; appearance: none; outline: 0; border-radius: 0; background-color: transparent;
  color: var(--accent); font-family: var(--font); font-size: var(--u-fs-row); font-weight: var(--fw-regular);
  padding: 7px var(--space-3);
  border: 1px solid var(--field-line);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
/* hover swells the box to 2px too (Brock, 29 Aug 2026) — in the RESTING ink, so focus (full
   ink) stays distinct. :not(:focus) keeps it disjoint from the focus rule; settled boxes
   (readonly/disabled) stay quiet. */
.bd-input:hover:not(:focus):not([readonly]):not(:disabled),
textarea.bd-input:hover:not(:focus):not([readonly]):not(:disabled) { box-shadow: inset 0 0 0 1px var(--field-line); }
.bd-input:focus, textarea.bd-input:focus { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* single-line fields stand the small square tall, so a paired button matches them exactly */
input.bd-input { height: var(--u-sq-s); padding-top: 0; padding-bottom: 0; }
.bd-input--line { /* alias — every field is the boxed field now */ }
textarea.bd-input { min-height: 84px; resize: vertical; line-height: 1.6; }
.bd-input--on-dark { color: var(--ink-dark-1); border-color: var(--field-line-dark); }
.bd-input--on-dark:hover:not(:focus):not([readonly]):not(:disabled) { box-shadow: inset 0 0 0 1px var(--field-line-dark); }
.bd-input--on-dark:focus { border-color: var(--mint-400); box-shadow: inset 0 0 0 1px var(--mint-400); }
.bd-input--on-dark::placeholder { color: var(--ink-dark-3); }
/* the search row: glyph · boxed field · optional square. THE PAIRING LAW: a button attached to
   a single-line field butts FLUSH against it (no gap) and stands the same height. */
.bd-search { display: flex; align-items: center; gap: 0; }
.bd-search__glyph { flex: none; font-size: var(--u-fs-icon); color: var(--hickory-300); margin-right: var(--space-2); }
.bd-search .bd-btn-icon { width: var(--u-sq-s); height: var(--u-sq-s); }
.bd-search--on-dark .bd-search__glyph { color: var(--ink-dark-3); }
/* THE POP — the one material for anything that floats over content: a filter
   popover, a menu, a row's action bar. Solid hickory-900, cream ink, mint on the
   armed item, and the warm shadow for depth. The only shadow in the system. */
.bd-pop { background: var(--pop-fill); color: var(--pop-ink); padding: var(--u-pad-s);
  box-shadow: var(--pop-shadow); min-width: 210px; }
.bd-pop .bd-micro { color: var(--pop-ink-2); }
.bd-pop__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; appearance: none; border: 0; background: transparent; cursor: pointer; text-align: left;
  padding: 10px 0; font-size: var(--u-fs-body); font-weight: var(--fw-medium); color: var(--pop-ink); }
.bd-pop__item:hover { color: var(--pop-armed); }
.bd-pop__item.on { color: var(--pop-armed); }
/* chips inside a pop invert with it */
.bd-pop .bd-chip { background: var(--pop-press); color: var(--pop-ink-2); }
.bd-pop .bd-chip[aria-pressed="true"] { background: var(--pop-armed); color: var(--accent); }

.bd-check, .bd-radio { appearance: none; width: 22px; height: 22px; flex: 0 0 22px; margin: 0; cursor: pointer;
  border: 0; border-radius: 0; background: var(--surface-body); position: relative;
  transition: background var(--dur-fast) var(--ease-standard); }
.bd-check:checked, .bd-radio:checked { background: var(--mint-400); }
.bd-check:checked::after, .bd-radio:checked::after { content: ""; position: absolute; left: 7px; top: 4px;
  width: 6px; height: 11px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.bd-control { display: flex; align-items: center; gap: var(--space-3); font-size: var(--u-fs-row);
  font-weight: var(--fw-medium); }
.bd-switch { appearance: none; width: 46px; height: 26px; margin: 0; cursor: pointer; border: 0; position: relative;
  background: var(--surface-body); transition: background var(--dur-fast) var(--ease-standard); }
.bd-switch::before { content: ""; position: absolute; left: 4px; top: 4px; width: 18px; height: 18px;
  background: var(--accent); transition: transform var(--dur-base) var(--ease-standard); }
.bd-switch:checked { background: var(--mint-400); }
.bd-switch:checked::before { transform: translateX(20px); }

/* ---- 12. THE TAB DEVICE + STAT BLOCKS --------------------------------- */
.bd-tabtext { display: inline-block; white-space: nowrap; padding: 5px 26px 5px 13px;
  font-size: var(--u-fs-ctl); font-weight: var(--fw-medium);
  background: var(--surface-quiet); color: var(--accent);
  /* a tab is often a CONTROL (it opens a menu, it filters). Written for a <span> this reset was
     missing, so as a <button> it wore the user agent's bevelled border — a line used as a device,
     which law 3 forbids. Stated here so no caller has to remember it. */
  appearance: none; border: 0; border-radius: 0; font-family: inherit; text-align: left; }
button.bd-tabtext, a.bd-tabtext { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bd-tabtext--mint { background: var(--mint-400); color: var(--accent); }
.bd-tabtext--hickory { background: var(--accent); color: var(--mint-400); }
.bd-tabtext--emph { font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em;
  padding: 5px 18px 5px 9px; }
/* LAW: in a stack the TOP TAB IS ALWAYS SHORTER than the one below it. The stack is a
   single max-content column, and the bottom tab stretches to fill it and carries a wider
   tail — so a short label (a one-word source, a suburb) can never break the law. */
.bd-tabstack { display: inline-grid; grid-template-columns: max-content; justify-items: start; }
.bd-tabstack > .bd-tabtext { grid-column: 1; }
.bd-tabstack > .bd-tabtext:last-child:not(:first-child) { justify-self: stretch; padding-right: 40px; }
.bd-tabstack--right { justify-items: end; }
/* a flush run of figure blocks — counts, scopes, proof numbers */
.bd-stats { display: flex; gap: 0; align-items: stretch; }
.bd-stat { display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: clamp(10px, 1.2vw, 16px) clamp(12px, 1.5vw, 20px) clamp(10px, 1.2vw, 16px) clamp(9px, 1vw, 14px);
  appearance: none; border: 0; text-align: left; background: var(--surface-quiet); color: var(--accent);
  transition: opacity var(--dur-fast) var(--ease-standard); }
button.bd-stat { cursor: pointer; }
.bd-stat[aria-pressed="false"] { opacity: .55; }
.bd-stat--mint { background: var(--mint-400); color: var(--accent); }
.bd-stat--dark { background: var(--canvas); color: var(--cream-100); }
.bd-stat--hickory { background: var(--accent); color: var(--cream-100); }
.bd-stat__fig { font-size: var(--u-fs-num); font-weight: var(--fw-extrabold); line-height: 1; }
.bd-stat__cap { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); }
.bd-stat--dark .bd-stat__cap, .bd-stat--hickory .bd-stat__cap { color: var(--ink-dark-2); }
/* THE DIMMED DARK TILE'S CAPTION IS SOLID INK, not the secondary. An unselected tile is dimmed to
   .55 by the rule above, and on the dark tones the caption ALSO carried --ink-dark-2 (cream at .6
   alpha) — the two multiply. Measured on the Today menu's own Done tile over hickory-700: the 11px
   caption landed at 2.62:1, under the 4.5 floor, while the figure beside it (solid ink, same dim)
   sat at 5.27:1. Solid ink for this one state takes the caption to 5.27:1 as well. The cream tones
   never had the fault — their caption is already solid, and measures 4.92:1 dimmed.
   The SELECTED tile is untouched and keeps --ink-dark-2, at 6.35:1. */
.bd-stat--dark[aria-pressed="false"] .bd-stat__cap,
.bd-stat--hickory[aria-pressed="false"] .bd-stat__cap { color: var(--ink-dark-1); }
/* the big proof band on a marketing page */
.bd-statband { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.bd-statband .bd-stat { padding: var(--u-pad-s) var(--u-pad); }
.bd-statband .bd-stat__fig { font-size: clamp(23px, 2.4vw, 40px); }
@media (min-width: 1024px) { .bd-statband { grid-template-columns: repeat(4, 1fr); } }

/* ---- 13. HERO + BLOCK SYSTEM ----------------------------------------- */
.bd-hero { position: relative; display: grid; min-height: 62dvh; }   /* dvh: on mobile Safari 62vh is measured against the address-bar-hidden viewport */
.bd-hero__media { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; }
.bd-hero__tabs { grid-area: 1 / 1; align-self: center; justify-self: start; }
.bd-blocks { display: grid; gap: 0; grid-template-columns: 1fr; }
.bd-block { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3);
  padding: var(--u-pad); min-height: clamp(200px, 26vw, 320px); }
.bd-block--hickory { background: var(--accent); color: var(--accent-2); }
.bd-block--cream { background: var(--surface-quiet); color: var(--accent); }
.bd-block--body { background: var(--surface-body); color: var(--accent); }
.bd-block--mint { background: var(--mint-400); color: var(--accent); }
.bd-block--media { padding: 0; }
.bd-block--media img { width: 100%; height: 100%; object-fit: cover; }
.bd-block__statement { margin: 0; font-size: clamp(19px, 1.8vw, 30px); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight); line-height: 1.15; max-width: 26ch; }
@media (min-width: 640px) { .bd-blocks { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bd-blocks--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- 14. PROCESS · QUOTES · CTA ------------------------------------- */
.bd-process { display: grid; gap: 0; grid-template-columns: 1fr; }
.bd-step { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--u-pad-s) var(--u-pad); }
.bd-step:nth-child(odd)  { background: var(--surface-quiet); }
.bd-step:nth-child(even) { background: var(--surface-body); }
.bd-step__n { font-size: var(--u-fs-num); font-weight: var(--fw-extrabold); line-height: 1; color: var(--accent); }
.bd-step__t { font-size: clamp(16px, 1.4vw, 22px); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); }
.bd-step__d { font-size: var(--u-fs-body); color: var(--hickory-500); margin: 0; }
@media (min-width: 640px) { .bd-process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bd-process { grid-template-columns: repeat(4, 1fr); } }

.bd-quotes { display: grid; gap: 0; grid-template-columns: 1fr; }
.bd-quote { display: flex; flex-direction: column; gap: var(--u-gap-lg); padding: var(--u-pad-s) var(--u-pad); }
.bd-quote:nth-child(odd)  { background: var(--surface-quiet); }
.bd-quote:nth-child(even) { background: var(--surface-body); }
.bd-quote__body { margin: 0; font-size: clamp(15px, 1.3vw, 20px); font-weight: var(--fw-light); line-height: 1.35; }
.bd-quote__who { margin-top: auto; font-size: var(--u-fs-mini); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .08em; color: var(--hickory-500); }
@media (min-width: 640px)  { .bd-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bd-quotes { grid-template-columns: repeat(3, 1fr); } }

.bd-cta { display: grid; gap: var(--u-gap-lg); padding: var(--u-pad); align-items: end;
  background: var(--accent); color: var(--accent-2); }
.bd-cta__title { margin: 0; font-size: clamp(19px, 1.8vw, 30px); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tight); max-width: 30ch; }
.bd-cta__sub { margin: var(--space-2) 0 0; color: var(--ink-dark-2); }
.bd-cta__actions { display: flex; flex-wrap: wrap; gap: 0; }
@media (min-width: 1024px) { .bd-cta { grid-template-columns: 1fr auto; } }

/* ---- 15. ARTICLES · OFFICES · LISTINGS · FOOTER -------------------- */
.bd-article-card { display: flex; flex-direction: column; gap: var(--space-3); appearance: none; border: 0;
  padding: 0 0 var(--u-pad-s); background: var(--surface-quiet); color: var(--text-body);
  text-align: left; cursor: pointer; }
.bd-article-card:hover { background: var(--surface-body); }
.bd-article-card img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.bd-article-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--u-pad-s); }
.bd-article-card__kicker { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); text-transform: uppercase;
  letter-spacing: .08em; color: var(--hickory-500); }
.bd-article-card__title { font-size: clamp(16px, 1.4vw, 22px); font-weight: var(--fw-medium); letter-spacing: var(--ls-tight); }

.bd-prose { max-width: 66ch; font-size: var(--u-fs-row); line-height: 1.7; }
.bd-prose h2 { margin: clamp(24px, 3vw, 44px) 0 var(--space-3); }
.bd-prose h3 { margin: clamp(20px, 2.4vw, 34px) 0 var(--space-2); }
.bd-prose p { max-width: none; margin: 0 0 var(--u-gap-lg); }
.bd-prose blockquote { margin: clamp(24px, 3vw, 44px) 0; padding: var(--u-pad-s); background: var(--mint-400);
  color: var(--accent); font-size: clamp(16px, 1.4vw, 22px); font-weight: var(--fw-medium); line-height: 1.25; }
.bd-prose img { margin: clamp(24px, 3vw, 44px) 0; width: 100%; }
.bd-prose ul, .bd-prose ol { padding-left: 1.1em; margin: 0 0 var(--u-gap-lg); }
.bd-prose li { margin-bottom: var(--space-2); }

.bd-office { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--u-pad-s) var(--u-pad); }
.bd-office:nth-child(odd)  { background: var(--surface-quiet); }
.bd-office:nth-child(even) { background: var(--surface-body); }
.bd-office__name { font-size: clamp(16px, 1.4vw, 22px); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.bd-office__addr { font-size: var(--u-fs-body); color: var(--hickory-500); font-style: normal; line-height: 1.6; }
.bd-office__links { display: flex; gap: var(--u-gap); margin-top: auto; padding-top: var(--space-3);
  font-size: var(--u-fs-ctl); font-weight: var(--fw-medium); }

.bd-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-gap);
  padding: var(--u-pad-s) var(--u-pad); background: var(--surface-page); }
.bd-listings { display: grid; gap: 0; grid-template-columns: 1fr; }
.bd-listing { display: flex; flex-direction: column; appearance: none; border: 0; padding: 0;
  background: var(--surface-quiet); color: var(--accent); text-align: left; cursor: pointer; }
.bd-listing:hover { background: var(--surface-body); }
.bd-listing__media { position: relative; display: grid; }
.bd-listing__media img { grid-area: 1/1; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.bd-listing__tabs { grid-area: 1/1; align-self: end; justify-self: start; }
.bd-listing__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--u-pad-s); }
.bd-listing__price { font-size: clamp(16px, 1.4vw, 22px); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.bd-listing__addr { font-size: var(--u-fs-body); color: var(--hickory-500); }
.bd-listing__specs { display: flex; flex-wrap: wrap; gap: var(--u-gap); font-size: var(--u-fs-ctl); font-weight: var(--fw-medium); }
@media (min-width: 640px)  { .bd-listings { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bd-listings { grid-template-columns: repeat(3, 1fr); } }

.bd-footer { background: var(--canvas); color: var(--ink-dark-1); padding: var(--u-pad); }
.bd-footer__grid { display: grid; gap: var(--u-pad-s); grid-template-columns: 1fr; }
.bd-footer h4 { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-dark-3); margin: 0 0 var(--space-3); }
.bd-footer__item { display: block; padding: 5px 0; font-size: var(--u-fs-row); color: var(--ink-dark-1); text-decoration: none; }
.bd-footer__item:hover { color: var(--mint-400); }
.bd-footer__base { margin-top: var(--u-pad-s); padding-top: var(--space-5); display: flex; flex-wrap: wrap;
  gap: var(--u-gap); justify-content: space-between; font-size: var(--u-fs-mini); color: var(--ink-dark-3); }
@media (min-width: 640px)  { .bd-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bd-footer__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- THE UNBUILT BLOCK -------------------------------------------------- *
   The system never improvises. When a screen needs something the harness does
   not define, render THIS instead of inventing a look: a placeholder that says
   what is missing and links out to design it properly. Clicking it opens Claude
   Design with the brief already written (see bd-unbuilt.js).                  */
.bd-unbuilt { display: flex; flex-direction: column; gap: var(--space-2); width: 100%;
  padding: var(--u-pad-s); appearance: none; border: 0; border-radius: 0; text-align: left;
  background: var(--surface-body); color: var(--accent); cursor: pointer; font-family: var(--font);
  transition: background var(--dur-fast) var(--ease-standard); }
.bd-unbuilt:hover { background: var(--cream-300); }
.bd-unbuilt__tag { align-self: flex-start; font-size: var(--u-fs-mini); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .08em; padding: 4px 9px;
  background: var(--mint-400); color: var(--accent); }
.bd-unbuilt__what { font-size: var(--u-fs-row); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.bd-unbuilt__why { font-size: var(--u-fs-body); color: var(--hickory-500); margin: 0; max-width: 66ch; }
.bd-unbuilt__go { font-size: var(--u-fs-ctl); font-weight: var(--fw-semibold); }
.bd-unbuilt--on-dark { background: rgba(255,241,226,.08); color: var(--ink-dark-1); }
.bd-unbuilt--on-dark:hover { background: rgba(255,241,226,.14); }
.bd-unbuilt--on-dark .bd-unbuilt__why { color: var(--ink-dark-2); }

/* ---- UTILITIES (the complete permitted set) --------------------------- */
.bd-u-measure { max-width: 66ch; }
.bd-u-muted { color: var(--hickory-500); }
.bd-u-mt-auto { margin-top: auto; }
.bd-u-grow { flex: 1; }
.bd-u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---- THE TOUCH FLOOR — §7 "Touch targets >= 44px on coarse pointers" ----
   This is the checklist line made real. Until 16 Aug 2026 nothing in the canon carried it, so
   EVERY caller inherited a control too small to hit: the shared tab strip measured 20-22px tall
   and was the primary navigation of Relations, Studio, Media, Shoppe, Draughtsman and Copywriter
   (Shoppe's "All" tab measured 17x22px live). Fixing it here fixes all of them at once.

   Two techniques, chosen per component — because law 6 still holds and the visual sizes are the
   design's, not ours to inflate:

     GROW   a filled control (button, segment, chip, icon square) simply gets taller. On a phone
            that reads as correct — it is what a filled control looks like when it is meant to be
            tapped — and nothing around it moves.
     EXTEND a text-in-a-strip device (tab, tab-chip, bare action) keeps its drawn size and gains an
            invisible 44px hit area centred on it, so the strip's proportions and rhythm are
            untouched. Same technique the app already uses on .appr-legnum.

   Only under (pointer: coarse) — a mouse is precise and the desktop composition stays exactly as
   drawn. Nothing here changes a colour, a weight, a radius or a fill. */
@media (pointer: coarse) {
  /* GROW — filled controls */
  .bd-btn, .bd-seg-btn, .bd-chip { min-height: 44px; }
  .bd-btn-icon { min-width: 44px; min-height: 44px; }
  /* the field grows WITH its paired square, or the flush-and-equal pairing law breaks on touch */
  input.bd-input { height: 44px; }

  /* EXTEND — text devices keep their drawn size, gain the hit area.
     .bd-cat-count is here because it is often a BUTTON (tap the count to filter to it) and measures
     ~16x18px; growing it would distort the micro-label section head it belongs to. */
  .bd-tab, .bd-tabtext, .bd-action, button.bd-cat-count { position: relative; }
  .bd-tab::after, .bd-tabtext::after, .bd-action::after, button.bd-cat-count::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; min-width: 44px; transform: translateY(-50%); }
  /* The pad grows from the device's inline-START, so on a device narrower than 44px it overhangs
     the END. At a strip's end that overhang is scrollable overflow: a two-tab "Build · Quote" strip
     at 375px measured scrollWidth − clientWidth = 6px ("Quote" 37px wide, its pad 44px), which let
     the strip wobble 6px under a thumb and made core/tab-overflow.js fade a strip that fits
     (15 Oct 2026). The LAST device in a strip anchors its pad to its inline-END instead, so the
     extra width reaches back toward the tab before it (into the gap: the canon gap is at least 10px,
     and "Quote" overhangs 7px) and never past the strip. tab-overflow.js also measures the devices' own boxes, so a strip ending in anything
     else is not faded by a pad either. */
  .bd-tabs > :is(.bd-tab, .bd-tabtext, .bd-action, button.bd-cat-count):last-child::after { inset-inline-start: auto; }
  /* .bd-check / .bd-radio are DELIBERATELY not here. Their 22px box is the drawn checkbox spec and
     their tick is `:checked::after` — a hit pad on the same pseudo-element fights the tick itself.
     Give those a 44px row instead (the label row is the target), never a pad on the box. */
}

/* ============================================================================
   Photo lab blocks (design_handoff_photo_lab 2 — 3 Sep 2026). Five blocks the lab's redesign
   needed and the harness did not define: the one-row tool head, the docked console, the
   filmstrip with stacks, the desk photo tile, and the placement marker. Values are the
   handoff's own; small internals (2px seams, the 22px check square, the 26px marker) are
   fixed by the design the way .bd-check's 22px box is. Documented in COMPONENTS.md.
   ============================================================================ */

/* .bd-head--tool — the compact record head for tool packages where the work is visual:
   ONE row on the --u-band line — [crumb] · title · small tag · meta · action. The meta is the
   element that gives when narrow (flex 0 6 auto); the title and the tag never wrap. */
.bd-head--tool { height: var(--u-band); min-height: var(--u-band); flex: none; display: flex; align-items: center; gap: 16px;
  padding: 0 var(--u-pad-s); background: var(--surface-raised); min-width: 0; }
.bd-head--tool .bd-head__title { margin: 0; font-size: var(--u-fs-lg); font-weight: var(--fw-semibold); letter-spacing: -.01em; color: var(--hickory-700);
  outline: 0; min-width: 4ch; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-head--tool .bd-head__title:empty::before { content: attr(data-placeholder); color: var(--hickory-500); }
.bd-head--tool .bd-tag { font-size: calc(var(--u-fs-mini) * .82); padding: 2px 6px; letter-spacing: .06em; white-space: nowrap; flex: none; }
.bd-head--tool .bd-head__meta { margin: 0; font-size: var(--u-fs-mini); color: var(--hickory-500); flex: 0 6 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-head--tool .bd-btn, .bd-head--tool .bd-btn-group { flex: none; }

/* .bd-console — the docked settings bar at the stage's foot, on canvas: a WRAPPING run of
   icon + current-value chips (never the setting's name), each opening an in-layout .bd-pop
   above itself; a quiet status; the ONE accent action pinned at the far right. */
.bd-console { min-height: clamp(58px, 5vw, 68px); flex: none; background: var(--canvas); display: flex; align-items: center; gap: 8px; padding: 8px var(--u-pad-s); }
.bd-console--quiet { background: var(--surface-quiet); }
.bd-console__run { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bd-console__slot { position: relative; }
.bd-console__chip { appearance: none; border: 0; border-radius: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; font-size: var(--u-fs-ctl); font-weight: var(--fw-medium); padding: 9px 14px; background: rgba(255,241,226,.12); color: var(--cream-100);
  transition: background var(--dur-fast), color var(--dur-fast); }
.bd-console--quiet .bd-console__chip { background: var(--surface-body); color: var(--hickory-700); }
.bd-console__chip[aria-expanded="true"] { background: var(--hickory-700); color: var(--mint-400); font-weight: var(--fw-semibold); }
.bd-console__chip:disabled { opacity: .55; cursor: default; }
.bd-console__glyph { font-size: var(--u-fs-icon); display: grid; }
.bd-console__glyph svg { width: 1em; height: 1em; }
.bd-console__pop { position: absolute; left: 0; bottom: calc(100% + 12px); width: 260px; max-width: min(260px, 80vw); z-index: 80; animation: bd-console-pop var(--pop-in) ease-out; }
.bd-console__pop .bd-pop__list { display: flex; flex-direction: column; margin-top: 6px; max-height: min(60vh, 420px); overflow: auto; }
.bd-console__pop .bd-pop__item.on { color: var(--mint-400); }
.bd-console__pop .bd-input { margin-top: 8px; }
/* the pop is a hickory-900 slab, so its fields take the on-dark ink (Harley, 30 Sep 2026: Light Lab's
   Notes was hickory text on hickory — "change the text to cream") */
.bd-console__pop .bd-input { color: var(--ink-dark-1); border-color: var(--field-line-dark); }
.bd-console__pop .bd-input:hover:not(:focus):not([readonly]):not(:disabled) { box-shadow: inset 0 0 0 1px var(--field-line-dark); }
.bd-console__pop .bd-input:focus { border-color: var(--mint-400); box-shadow: inset 0 0 0 1px var(--mint-400); }
.bd-console__pop .bd-input::placeholder { color: var(--ink-dark-3); }
.bd-console__status { color: var(--ink-dark-2); font-size: var(--u-fs-mini); margin-left: auto; white-space: nowrap; }
.bd-console--quiet .bd-console__status { color: var(--hickory-500); }
.bd-console__run > .bd-action { flex: none; color: var(--ink-dark-2); }
.bd-console--quiet .bd-console__run > .bd-action { color: var(--hickory-500); }
.bd-console > .bd-btn { flex: none; }
@keyframes bd-console-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (pointer: coarse) { .bd-console__chip { min-height: 44px; } }

/* .bd-strip — the filmstrip: an upload tray of Lightroom-style STACKS between the desk and the
   console. Every tile is 4/3; the first is Add; a stack shows its top (the latest render, else
   the original) and its .bd-badge count expands the stack inline to the right. */
.bd-strip { flex: none; height: clamp(84px, 7.5vw, 108px); background: var(--surface-quiet); display: flex; align-items: stretch; gap: 2px;
  padding: 8px var(--u-pad-s); overflow-x: auto; overflow-y: hidden; }
.bd-strip__add { flex: none; aspect-ratio: 4 / 3; appearance: none; border: 0; border-radius: 0; cursor: pointer; background: var(--surface-body); color: var(--hickory-500);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: inherit; }
.bd-strip__add .bd-console__glyph { color: var(--hickory-500); }
.bd-strip__add > span:last-child { font-size: var(--u-fs-mini); font-weight: var(--fw-medium); }
.bd-strip__stack { display: flex; gap: 2px; flex: none; position: relative; }
.bd-strip__tile { flex: none; height: 100%; aspect-ratio: 4 / 3; }
.bd-strip__tile .bd-tag { padding: 2px 6px; }
.bd-strip__tile .bd-badge { cursor: pointer; }
.bd-strip__tile--open .bd-badge { background: var(--hickory-700); color: var(--mint-400); }
.bd-strip__layer { position: relative; flex: none; height: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface-body); }
.bd-strip__layer .bd-tag { position: absolute; left: 0; bottom: 0; padding: 2px 6px; background: var(--cream-100); color: var(--hickory-700); }
.bd-strip__tool { position: absolute; top: 0; right: 0; width: 24px; height: 24px; appearance: none; border: 0; border-radius: 0; padding: 0; cursor: pointer;
  background: var(--cream-100); color: var(--hickory-700); display: grid; place-items: center; font-family: inherit; font-size: 15px; line-height: 1; opacity: 0; transition: opacity var(--dur-fast); }
.bd-strip__tool--dl { right: 24px; }
.bd-strip__tool svg { width: 14px; height: 14px; }
.bd-strip__stack:hover .bd-strip__tool, .bd-strip__stack:focus-within .bd-strip__tool { opacity: 1; }
@media (pointer: coarse) { .bd-strip__tool { opacity: 1; width: 32px; height: 32px; } .bd-strip__tool--dl { right: 32px; } }

/* .bd-photo-tile — a photo as a block: the picture is a cover span, and the states are overlays —
   selected (mint check square), Staged / Riding (.bd-tag at the foot), Reference (a quiet tag at the
   head), a stack count (.bd-badge). Riding dims the picture to .55. Also the desk grid and its
   room groups, and the loupe (focus pane + thumb column) the tiles open into. */
.bd-photo-tile { position: relative; overflow: hidden; appearance: none; border: 0; border-radius: 0; padding: 0; cursor: pointer;
  background: var(--surface-quiet); text-align: left; font-family: inherit; display: block; min-height: 0; min-width: 0; }
.bd-photo-tile--ratio { aspect-ratio: 4 / 3; }
.bd-photo-tile__img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity var(--dur-fast); }
.bd-photo-tile__img--contain { background-size: contain; }
.bd-photo-tile--riding .bd-photo-tile__img, .bd-photo-tile--dim .bd-photo-tile__img { opacity: .55; }
.bd-photo-tile__check { position: absolute; left: 10px; top: 10px; width: 22px; height: 22px; background: var(--mint-400); display: grid; place-items: center; color: var(--hickory-700); font-size: 15px; }
.bd-photo-tile__check--end { left: auto; right: 10px; }
.bd-photo-tile__check--small { left: 6px; top: 6px; width: 18px; height: 18px; font-size: 12px; }
.bd-photo-tile__check svg { width: 1em; height: 1em; }
.bd-photo-tile > .bd-tag { position: absolute; left: 0; bottom: 0; }
.bd-photo-tile > .bd-tag--top { bottom: auto; top: 0; background: var(--cream-100); color: var(--hickory-700); }
.bd-photo-tile > .bd-badge { position: absolute; right: 0; top: 0; }
.bd-photo-tile > .bd-badge--end { top: auto; bottom: 0; }
.bd-photo-grid { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: var(--surface-body); align-content: start; }
.bd-photo-grid--fill { grid-auto-rows: var(--bd-grid-row, auto); }
.bd-photo-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bd-photo-grid--5 { grid-template-columns: repeat(5, 1fr); }
.bd-photo-groups { flex: 1; min-height: 0; overflow: auto; background: var(--surface-body); padding: 0 0 var(--u-pad-s); }
.bd-photo-group { padding: var(--u-gap) var(--u-pad-s) 0; }
.bd-photo-group__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.bd-photo-group__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.bd-photo-empty { flex: 1; min-height: 0; padding: var(--u-pad-s); background: var(--surface-body); display: flex; }
.bd-photo-empty__ask { flex: 1; appearance: none; border: 0; border-radius: 0; cursor: pointer; background: var(--surface-quiet); color: var(--hickory-700);
  display: flex; align-items: center; justify-content: center; gap: 12px; font-family: inherit; flex-wrap: wrap; padding: var(--u-pad-s); text-align: center; }
.bd-photo-empty__ask .bd-console__glyph { color: var(--hickory-500); }
.bd-photo-empty__ask > b { font-size: var(--u-fs-lg); font-weight: var(--fw-medium); }
.bd-photo-empty__ask > small { font-size: var(--u-fs-body); color: var(--hickory-500); }
.bd-loupe { flex: 1; min-height: 0; display: flex; gap: 2px; background: var(--surface-body); }
.bd-loupe__focus { flex: 1; min-width: 0; min-height: 0; position: relative; overflow: auto; background: var(--surface-quiet); display: flex; flex-direction: column; }
.bd-loupe__thumbs { width: clamp(140px, 12vw, 200px); flex: none; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.bd-loupe__thumbs .bd-photo-tile { width: 100%; }
@container stage (max-width: 760px) {
  .bd-photo-grid, .bd-photo-group__grid { grid-template-columns: repeat(3, 1fr); }
  .bd-photo-grid--fill { grid-auto-rows: auto; }
  .bd-photo-grid .bd-photo-tile { aspect-ratio: 4 / 3; }
  .bd-loupe { flex-direction: column; }
  .bd-loupe__thumbs { display: none; }   /* under 760px the strip below does the thumb column's job */
}
@container stage (max-width: 560px) { .bd-photo-grid, .bd-photo-group__grid { grid-template-columns: repeat(2, 1fr); } }

/* .bd-marker — the numbered placement square (Stage yourself): 26px hickory-700, a mint 800 numeral,
   centred on its point; pressed, it goes. Its legend is a flush run of quiet tags at the picture's foot. */
.bd-marker { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; appearance: none; border: 0; border-radius: 0; padding: 0; cursor: pointer;
  background: var(--hickory-700); color: var(--mint-400); font-size: 11px; font-weight: var(--fw-extrabold); display: grid; place-items: center; font-family: inherit; }
.bd-marker__legend { position: absolute; left: 0; bottom: 0; display: flex; gap: 1px; z-index: 2; }
.bd-marker__legend .bd-tag { background: var(--cream-100); color: var(--hickory-700); }
@media (pointer: coarse) { .bd-marker { width: 32px; height: 32px; } }

/* ============================================================================
   The setting row (docs/Settings-Redesign-v2.md §4.3 and §7.2, 19 Oct 2026). Brock pointed at the
   Grok dashboard's Plugins page for Settings and asked for a clean design like it; the plan's
   working mock (docs/mocks/settings/index.html, its st-item* rules) is the spec, and these are its
   values under the harness's names. One row = an icon square, the body (a name, a line only where
   the label needs one, optional .bd-tag), and the control at the end. The 12/16 padding, the 14px
   cell gap and the 18px glyph are the design's own fixed internals, as the photo lab blocks' are.
   Documented in COMPONENTS.md "The setting row".
   ============================================================================ */

/* .bd-setting-grid — rows butt at 1px, one column; --2 makes two once the work pane is 860px wide
   (a container query on .bd-work, never a measured width) */
.bd-setting-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
@container work (min-width: 860px) { .bd-setting-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* .bd-setting — a cream-100 block on the cream-200 work pane: icon square · body · end */
.bd-setting { display: grid; grid-template-columns: var(--u-sq) minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px; background: var(--surface-quiet); min-width: 0; }
/* --click: the whole row opens something (a page, a workbench); it steps up to cream-50 under the pointer */
.bd-setting--click { cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.bd-setting--click:hover { background: var(--cream-50); }
/* --wide: spans both columns of a --2 grid (a textarea, a table) */
.bd-setting--wide { grid-column: 1 / -1; }
/* --stack: a text field or a textarea sits UNDER the body, the width of the body */
.bd-setting--stack { grid-template-columns: var(--u-sq) minmax(0, 1fr); }
.bd-setting--stack .bd-setting__end { grid-column: 2; justify-self: stretch; margin-top: 4px; }
/* the icon square: cream-200 with a hickory-500 Lucide glyph; --mint and --dark for the one row that
   must be noticed; --person is a person's initials on hickory-700 */
.bd-setting__ic { width: var(--u-sq); height: var(--u-sq); display: grid; place-items: center; background: var(--surface-sunken); color: var(--hickory-500); }
.bd-setting__ic svg { width: 18px; height: 18px; }
.bd-setting__ic--mint { background: var(--mint-400); color: var(--hickory-700); }
.bd-setting__ic--dark { background: var(--hickory-700); color: var(--mint-400); }
.bd-setting__ic--person { background: var(--hickory-700); color: var(--cream-100); font-size: var(--u-fs-mini); font-weight: var(--fw-semibold); letter-spacing: .04em; }
.bd-setting__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* the name, with any .bd-tag riding beside it */
.bd-setting__t { font-size: var(--u-fs-row); font-weight: var(--fw-medium); color: var(--hickory-700); line-height: 1.25;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* the line under the name: ONLY where the label needs one */
.bd-setting__s { font-size: var(--u-fs-body); color: var(--hickory-500); line-height: 1.4; }
.bd-setting__end { display: flex; align-items: center; gap: 8px; justify-self: end; }
.bd-setting__end .bd-btn + .bd-btn { margin-left: 1px; }
/* a trailing chevron (a row that opens a page) is decoration, so hickory-400 */
.bd-setting__end > svg { width: 16px; height: 16px; color: var(--hickory-400); }