@obvi/blueprint 1.1.2 → 1.1.3

package/dist/blueprint.css

@@ -184,6 +184,37 @@
       var(--bp-ink-faint) 0 var(--bp-stroke),
       oklch(0 0 0 / 0) var(--bp-stroke) var(--bp-hatch-gap)
     );
+    /* Drafting board — a faint dot-grid backdrop that marks INTERACTIVE
+       component surfaces (choice, preflight, choice-record, source, mock,
+       gallery): a second axis distinct from the diagonal --bp-hatch (which
+       means fenced / held / rejected). Dots read as an open working surface,
+       so the two textures never compete. --bp-board-gap is the grid pitch;
+       --bp-board the reusable image. The dot color rides on --bp-ink-faint;
+       light uses a stronger mix (55%) than dark (35%) — see the dark block. */
+    --bp-board-gap: 18px;
+    --bp-board-dot: color-mix(in oklch, var(--bp-ink-faint) 55%, oklch(0 0 0 / 0));
+    --bp-board: radial-gradient(
+      circle at center,
+      var(--bp-board-dot) 0 0.85px,
+      oklch(0 0 0 / 0) 0.85px
+    );
+    /* The board rides on a faintly tinted surface — one elevation step between
+       the desk (--bp-bg) and the sheet (--bp-paper) — so a dotted interactive
+       section reads as its own panel and the paper cards inside it lift off the
+       mat. Derived from the two surface tokens, so it tracks either theme (and
+       any host override of paper / bg) from this single definition. */
+    --bp-board-bg: color-mix(in oklch, var(--bp-paper) 60%, var(--bp-bg));
+    /* Footer strips on the mat (hint + reset): vertical breathing room and a
+       horizontal inset that lines up with the component content above.
+       --bp-board-footer-pad-x defaults to preflight question padding; choice
+       layouts reassign it to match .bp-choice__card inset. */
+    --bp-board-footer-pad-y: var(--bp-space-2);
+    --bp-board-footer-pad-x: var(--bp-space-4);
+    /* Single-surface interactive roots on the mat (tabs choice, preflight):
+       uniform inset + Obvious container radius so the paper card reads as a
+       decision surface on the dotted board. */
+    --bp-board-card-pad: var(--bp-space-4);
+    --bp-board-card-radius: var(--bp-radius-8);
     /* Modal scrim wash — darker than --bp-ink-soft so floated panels (search
        palette, lightbox, expanded mock) read clearly over the page. Always
        pair with --bp-hatch:
@@ -224,6 +255,7 @@
     --bp-text-body: 14px;        --bp-lh-body: 20px;      /* body copy */
     --bp-text-small: 13px;       --bp-lh-small: 18px;     /* small / captions */
     --bp-text-code: 12.5px;      --bp-lh-code: 1.6;       /* mono, harmonized to body */
+    --bp-lh-control: 1.3;        /* tighter than reading text — sans control labels */
 
     /* 3-step monospace-label scale, ONE letter-spacing each */
     --bp-label-sm: 9px;   --bp-label-sm-ls: 0.08em;
@@ -266,6 +298,32 @@
     --bp-radius-pill: 9999px;
     --bp-radius-round: 50%;
 
+    /* Obvious button palette — the interactive-control vocabulary. Buttons are
+       the one chrome surface that carries fill: primary (committed / CTA),
+       secondary (resting control), tertiary (quiet track / ghost fill), ghost
+       (text-only). Fills stay on the neutral scale (no hue) so figures keep the
+       blue monopoly. Each value consumes the live Obvious app variable
+       (--button-*) when a document is embedded in the dashboard, and otherwise
+       falls back to the OKLCH value from the app's colors.css. */
+    --bp-button-primary-bg: var(--button-primary-bg, oklch(0.1344 0 0));
+    --bp-button-primary-bg-hover: var(--button-primary-bg-hover, oklch(0.3012 0 0));
+    --bp-button-primary-bg-press: var(--button-primary-bg-press, oklch(0.36 0 0));
+    --bp-button-primary-fg: var(--button-primary-fg, oklch(1 0 0));
+    --bp-button-secondary-bg: var(--button-secondary-bg, oklch(1 0 0));
+    --bp-button-secondary-bg-hover: var(--button-secondary-bg-hover, oklch(0.9702 0 0));
+    --bp-button-secondary-bg-press: var(--button-secondary-bg-press, oklch(0.9461 0 0));
+    --bp-button-secondary-fg: var(--button-secondary-fg, oklch(0 0 0 / 0.8));
+    --bp-button-secondary-bd: var(--button-secondary-bd, oklch(0 0 0 / 0.08));
+    --bp-button-tertiary-bg: var(--button-tertiary-bg, oklch(0 0 0 / 0.04));
+    --bp-button-tertiary-bg-hover: var(--button-tertiary-bg-hover, oklch(0 0 0 / 0.08));
+    --bp-button-tertiary-fg: var(--button-tertiary-fg, oklch(0 0 0 / 0.64));
+    --bp-button-ghost-fg: var(--button-ghost-fg, oklch(0 0 0 / 0.4));
+    --bp-button-ghost-fg-hover: var(--button-ghost-fg-hover, oklch(0 0 0 / 0.64));
+    --bp-button-ghost-bg-hover: var(--button-ghost-bg-hover, oklch(0 0 0 / 0.04));
+    /* Lifted-border ring carried by a raised (selected) secondary control. */
+    --bp-button-lift: 0 0 2px 0 oklch(0 0 0 / 0.05),
+      0 0 1px 0 oklch(0 0 0 / 0.05), 0 0 0 1px oklch(0 0 0 / 0.08);
+
     /* Section-eyebrow marker — the square that leads the "01 / 02" counter.
        Size is the block edge; gap is the space between it and the number. */
     --bp-marker-size: 10px;
@@ -354,6 +412,7 @@
     --bp-ink: var(--obvious-text-primary, oklch(1 0 0 / 0.92));
     --bp-ink-soft: oklch(1 0 0 / 0.4);
     --bp-ink-faint: oklch(1 0 0 / 0.16);
+    --bp-board-dot: color-mix(in oklch, var(--bp-ink-faint) 35%, oklch(0 0 0 / 0));
     --bp-highlight: oklch(1 0 0 / 0.14);
 
     /* Illustration accent (dark) — brighter blue holds on dark paper. */
@@ -384,6 +443,25 @@
     --bp-text-secondary: oklch(1 0 0 / 0.64);
     --bp-positive: oklch(0.74 0.15 150);
     --bp-positive-faint: oklch(0.34 0.07 150);
+
+    /* Obvious button palette (dark) — see the light block for the contract. */
+    --bp-button-primary-bg: var(--button-primary-bg, oklch(0.4091 0 0));
+    --bp-button-primary-bg-hover: var(--button-primary-bg-hover, oklch(0.4819 0 0));
+    --bp-button-primary-bg-press: var(--button-primary-bg-press, oklch(0.5795 0 0));
+    --bp-button-primary-fg: var(--button-primary-fg, oklch(1 0 0 / 0.92));
+    --bp-button-secondary-bg: var(--button-secondary-bg, oklch(0.3012 0 0));
+    --bp-button-secondary-bg-hover: var(--button-secondary-bg-hover, oklch(0.3407 0 0));
+    --bp-button-secondary-bg-press: var(--button-secondary-bg-press, oklch(0.4091 0 0));
+    --bp-button-secondary-fg: var(--button-secondary-fg, oklch(1 0 0 / 0.8));
+    --bp-button-secondary-bd: var(--button-secondary-bd, oklch(1 0 0 / 0.04));
+    --bp-button-tertiary-bg: var(--button-tertiary-bg, oklch(1 0 0 / 0.04));
+    --bp-button-tertiary-bg-hover: var(--button-tertiary-bg-hover, oklch(1 0 0 / 0.08));
+    --bp-button-tertiary-fg: var(--button-tertiary-fg, oklch(1 0 0 / 0.64));
+    --bp-button-ghost-fg: var(--button-ghost-fg, oklch(1 0 0 / 0.4));
+    --bp-button-ghost-fg-hover: var(--button-ghost-fg-hover, oklch(1 0 0 / 0.64));
+    --bp-button-ghost-bg-hover: var(--button-ghost-bg-hover, oklch(1 0 0 / 0.04));
+    --bp-button-lift: 0 0 2px 0 oklch(1 0 0 / 0.05),
+      0 0 1px 0 oklch(1 0 0 / 0.05), 0 0 0 1px oklch(1 0 0 / 0.08);
   }
 }
 
@@ -1478,7 +1556,7 @@
     padding: var(--bp-space-2) var(--bp-space-3);
     background: var(--bp-ink);
     color: var(--bp-paper);
-    border-radius: var(--bp-radius-0);
+    border-radius: var(--bp-radius-6);
     margin-bottom: var(--bp-space-3);
   }
   :where(.bp-choice:has(.bp-choice__commit:checked)) .bp-choice__verdict,
@@ -1538,10 +1616,9 @@
     border: 0;
     padding: 0;
     cursor: pointer;
-    font-family: var(--bp-mono);
-    font-size: var(--bp-label-md);
-    letter-spacing: var(--bp-label-md-ls);
-    text-transform: uppercase;
+    font-family: var(--bp-sans);
+    font-size: var(--bp-text-small);
+    line-height: var(--bp-lh-control);
     color: var(--bp-text-secondary);
     text-decoration: underline dotted;
     text-underline-offset: 3px;
@@ -1564,37 +1641,50 @@
     color: var(--bp-paper);
     background: var(--bp-ink);
     padding: 2px 8px;
+    border-radius: var(--bp-radius-pill);
   }
   :where(.bp-choice__tag--out) {
     color: var(--bp-ink);
     border: 1px solid var(--bp-ink-faint);
     padding: 1px 7px;
+    border-radius: var(--bp-radius-pill);
   }
 
   /* ---- layout: tabs (preview drafts, then adopt) ------------------- */
+  :where(.bp-choice--tabs) {
+    padding: var(--bp-board-card-pad);
+    border: 1px solid var(--bp-ink-line);
+    border-radius: var(--bp-board-card-radius);
+    overflow: hidden;
+  }
   :where(.bp-choice--tabs) :where(.bp-choice__seg) {
     display: flex;
     flex-wrap: wrap;
-    gap: 0;
-    border: 1px solid var(--bp-ink-line);
-    border-radius: var(--bp-radius-0);
-    overflow: hidden;
+    gap: 2px;
+    padding: 2px;
+    border: 0;
+    border-radius: var(--bp-radius-pill);
+    background: var(--bp-button-tertiary-bg);
+    overflow: visible;
     margin: 0 0 var(--bp-space-3);
     width: fit-content;
   }
   :where(.bp-choice__seg-opt) {
     position: relative;
     cursor: pointer;
-    font-family: var(--bp-mono);
-    font-size: var(--bp-label-md);
-    letter-spacing: var(--bp-label-md-ls);
-    text-transform: uppercase;
-    color: var(--bp-text-secondary);
+    font-family: var(--bp-sans);
+    font-size: var(--bp-text-small);
+    line-height: var(--bp-lh-control);
+    color: var(--bp-button-ghost-fg);
     padding: 6px 14px;
-    border-right: 1px solid var(--bp-ink-line);
+    border-radius: var(--bp-radius-pill);
+    transition: background var(--bp-duration-fast) var(--bp-ease-out),
+      color var(--bp-duration-fast) var(--bp-ease-out),
+      box-shadow var(--bp-duration-fast) var(--bp-ease-out);
   }
-  :where(.bp-choice__seg-opt:last-child) {
-    border-right: 0;
+  :where(.bp-choice__seg-opt:hover) {
+    color: var(--bp-button-ghost-fg-hover);
+    background: var(--bp-button-ghost-bg-hover);
   }
   :where(.bp-choice__seg-opt) :where(input) {
     position: absolute;
@@ -1602,8 +1692,9 @@
     pointer-events: none;
   }
   :where(.bp-choice__seg-opt:has(input:checked)) {
-    background: var(--bp-ink);
-    color: var(--bp-paper);
+    background: var(--bp-button-secondary-bg);
+    color: var(--bp-button-secondary-fg);
+    box-shadow: var(--bp-button-lift);
   }
   :where(.bp-choice--tabs) :where(.bp-choice__panel) {
     display: none;
@@ -1616,18 +1707,19 @@
     align-items: center;
     gap: 8px;
     cursor: pointer;
-    border: 1px solid var(--bp-ink);
-    border-radius: var(--bp-radius-0);
+    border: 1px solid var(--bp-button-secondary-bd);
+    border-radius: var(--bp-radius-pill);
     padding: 6px 14px;
-    font-family: var(--bp-mono);
-    font-size: var(--bp-label-md);
-    letter-spacing: var(--bp-label-md-ls);
-    text-transform: uppercase;
-    color: var(--bp-ink);
-    background: var(--bp-paper);
+    font-family: var(--bp-sans);
+    font-size: var(--bp-text-small);
+    line-height: var(--bp-lh-control);
+    color: var(--bp-button-secondary-fg);
+    background: var(--bp-button-secondary-bg);
+    transition: background var(--bp-duration-fast) var(--bp-ease-out),
+      color var(--bp-duration-fast) var(--bp-ease-out);
   }
   :where(.bp-choice__adopt:hover) {
-    background: var(--bp-fill-hi);
+    background: var(--bp-button-secondary-bg-hover);
   }
   :where(.bp-choice__adopt) :where(input) {
     position: absolute;
@@ -1638,13 +1730,14 @@
     border: 1px solid var(--bp-ink);
     background: var(--bp-fill-amb);
     padding: var(--bp-space-3);
-    margin-left: calc(-1 * var(--bp-space-3));
-    margin-right: calc(-1 * var(--bp-space-3));
-    border-radius: var(--bp-radius-0);
+    margin-left: calc(-1 * var(--bp-board-card-pad));
+    margin-right: calc(-1 * var(--bp-board-card-pad));
+    border-radius: var(--bp-radius-6);
   }
   :where(.bp-choice__panel:has(.bp-choice__commit:checked)) :where(.bp-choice__adopt) {
-    background: var(--bp-ink);
-    color: var(--bp-paper);
+    border-color: var(--bp-button-primary-bg);
+    background: var(--bp-button-primary-bg);
+    color: var(--bp-button-primary-fg);
   }
 
   /* ---- layout: stack (all cards visible) --------------------------- */
@@ -1656,7 +1749,7 @@
     display: block;
     position: relative;
     border: 1px solid var(--bp-edge);
-    border-radius: var(--bp-radius-0);
+    border-radius: var(--bp-radius-6);
     padding: var(--bp-space-3);
     cursor: pointer;
     background: var(--bp-paper);
@@ -1744,7 +1837,7 @@
     position: relative;
     cursor: pointer;
     border: 1px solid var(--bp-edge);
-    border-radius: var(--bp-radius-0);
+    border-radius: var(--bp-radius-6);
     overflow: hidden;
     background: var(--bp-paper);
   }
@@ -1799,18 +1892,32 @@
 
   :where(.bp-choice__compare) {
     margin-top: var(--bp-space-3);
+    /* Override the base <details> inset (0 var(--bp-space-3) padding + a 2px
+       left border) so the summary bar and disclosed body span the full card
+       width — the summary and body carry their own padding. */
+    padding: 0;
     border: 1px solid var(--bp-edge);
-    border-radius: var(--bp-radius-0);
+    border-radius: var(--bp-radius-6);
+    overflow: hidden;
+  }
+  :where(.bp-choice__compare[open]) {
+    padding-bottom: 0;
   }
   :where(.bp-choice__compare > summary) {
     cursor: pointer;
     list-style: none;
-    padding: var(--bp-space-2) var(--bp-space-3);
-    font-family: var(--bp-mono);
-    font-size: var(--bp-label-md);
-    letter-spacing: var(--bp-label-md-ls);
-    text-transform: uppercase;
-    color: var(--bp-text-secondary);
+    padding: var(--bp-space-3);
+    font-family: var(--bp-sans);
+    font-size: var(--bp-text-small);
+    line-height: var(--bp-lh-control);
+    color: var(--bp-button-ghost-fg);
+    background: var(--bp-button-tertiary-bg);
+    transition: background var(--bp-duration-fast) var(--bp-ease-out),
+      color var(--bp-duration-fast) var(--bp-ease-out);
+  }
+  :where(.bp-choice__compare > summary:hover) {
+    background: var(--bp-button-tertiary-bg-hover);
+    color: var(--bp-button-ghost-fg-hover);
   }
   :where(.bp-choice__compare > summary)::-webkit-details-marker {
     display: none;
@@ -1819,11 +1926,17 @@
     padding: var(--bp-space-3);
     border-top: 1px solid var(--bp-edge);
   }
+  /* The slot content is usually a <dl>; drop its document margins so the
+     disclosed body keeps one uniform inset (vertical matches horizontal). */
+  :where(.bp-choice__compare-body) :where(dl) {
+    margin: 0;
+    gap: var(--bp-space-2) var(--bp-space-3);
+  }
 
   /* ---- Pre-flight (decisions before drafting) ---------------------- */
   :where(.bp-preflight) {
     border: 1px solid var(--bp-ink-line);
-    border-radius: var(--bp-radius-0);
+    border-radius: var(--bp-board-card-radius);
     overflow: hidden;
     margin: var(--bp-space-4) 0;
   }
@@ -1852,23 +1965,9 @@
   }
   :where(.bp-preflight__q) {
     counter-increment: bp-preflight-q;
-    padding: var(--bp-space-3) var(--bp-space-3) var(--bp-space-3) calc(var(--bp-space-6) + 4px);
-    position: relative;
+    padding: var(--bp-space-4);
     border-bottom: 1px solid var(--bp-edge);
   }
-  :where(.bp-preflight__q::before) {
-    content: counter(bp-preflight-q, decimal-leading-zero);
-    position: absolute;
-    left: var(--bp-space-3);
-    top: var(--bp-space-3);
-    font-family: var(--bp-mono);
-    font-size: var(--bp-label-lg);
-    letter-spacing: 0.08em;
-    color: var(--bp-ink-soft);
-  }
-  :where(.bp-preflight__q:has(input:checked)::before) {
-    color: var(--bp-ink);
-  }
   :where(.bp-preflight__prompt) {
     font-family: var(--bp-sans);
     font-weight: var(--bp-weight-strong);
@@ -1878,6 +1977,16 @@
     align-items: baseline;
     gap: var(--bp-space-2);
   }
+  :where(.bp-preflight__prompt::before) {
+    content: counter(bp-preflight-q, decimal-leading-zero);
+    font-family: var(--bp-mono);
+    font-size: var(--bp-label-lg);
+    letter-spacing: 0.08em;
+    color: var(--bp-ink-soft);
+  }
+  :where(.bp-preflight__q:has(input:checked)) :where(.bp-preflight__prompt::before) {
+    color: var(--bp-ink);
+  }
   :where(.bp-preflight__kind) {
     font-family: var(--bp-mono);
     font-size: var(--bp-label-sm);
@@ -1887,11 +1996,11 @@
     font-weight: var(--bp-weight-body);
   }
   :where(.bp-preflight__resolved) {
-    display: none;
+    visibility: hidden;
     margin-left: auto;
   }
   :where(.bp-preflight__q:has(input:checked)) :where(.bp-preflight__resolved) {
-    display: inline-flex;
+    visibility: visible;
   }
   :where(.bp-preflight__chips) {
     display: flex;
@@ -1904,23 +2013,31 @@
     align-items: center;
     gap: 7px;
     cursor: pointer;
-    border: 1px solid var(--bp-ink-faint);
-    border-radius: var(--bp-radius-0);
+    border: 1px solid var(--bp-button-secondary-bd);
+    border-radius: var(--bp-radius-pill);
     padding: 5px 12px;
     font-size: var(--bp-text-small);
-    background: var(--bp-paper);
+    color: var(--bp-button-secondary-fg);
+    background: oklch(0 0 0 / 0);
+    transition: background var(--bp-duration-fast) var(--bp-ease-out),
+      color var(--bp-duration-fast) var(--bp-ease-out),
+      border-color var(--bp-duration-fast) var(--bp-ease-out);
   }
   :where(.bp-preflight__chip:hover) {
-    border-color: var(--bp-ink-line);
+    border-color: var(--bp-button-secondary-bd);
+    background: var(--bp-button-tertiary-bg-hover);
   }
   :where(.bp-preflight__chip) :where(input) {
     accent-color: var(--bp-ink);
     margin: 0;
   }
   :where(.bp-preflight__chip:has(input:checked)) {
-    background: var(--bp-ink);
-    color: var(--bp-paper);
-    border-color: var(--bp-ink);
+    background: var(--bp-button-primary-bg);
+    color: var(--bp-button-primary-fg);
+    border-color: var(--bp-button-primary-bg);
+  }
+  :where(.bp-preflight__chip:has(input:checked)) :where(input) {
+    accent-color: var(--bp-button-primary-fg);
   }
   :where(.bp-preflight__gate) {
     margin: var(--bp-space-3);
@@ -1949,17 +2066,22 @@
     display: inline-flex;
     align-items: center;
     gap: 8px;
-    border: 1px solid var(--bp-ink);
-    border-radius: var(--bp-radius-0);
+    border: 1px solid var(--bp-button-primary-bg);
+    border-radius: var(--bp-radius-pill);
     padding: 8px 16px;
-    font-family: var(--bp-mono);
-    font-size: var(--bp-label-md);
-    letter-spacing: var(--bp-label-md-ls);
-    text-transform: uppercase;
-    background: var(--bp-ink);
-    color: var(--bp-paper);
+    font-family: var(--bp-sans);
+    font-size: var(--bp-text-small);
+    line-height: var(--bp-lh-control);
+    background: var(--bp-button-primary-bg);
+    color: var(--bp-button-primary-fg);
     cursor: pointer;
     margin-top: var(--bp-space-2);
+    transition: background var(--bp-duration-fast) var(--bp-ease-out),
+      border-color var(--bp-duration-fast) var(--bp-ease-out);
+  }
+  :where(.bp-preflight__draft:hover) {
+    background: var(--bp-button-primary-bg-hover);
+    border-color: var(--bp-button-primary-bg-hover);
   }
   :where(.bp-preflight__footer) {
     display: flex;
@@ -1972,17 +2094,45 @@
   :where(.bp-choice-record) {
     margin: var(--bp-space-4) 0;
   }
-  :where(.bp-choice-record__row) {
+  /* One Obvious container card per row: the host carries border and paper
+     fill; radius + overflow come from the [data-bp-rendered] mat rule above. */
+  :where(bp-choice-record-row) {
+    display: block;
     border: 1px solid var(--bp-edge);
-    border-radius: var(--bp-radius-0);
+    background-color: var(--bp-paper);
+  }
+  :where(bp-choice-record-row + bp-choice-record-row) {
+    margin-top: var(--bp-space-2);
+  }
+  :where(.bp-choice-record__row) {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    background-color: oklch(0 0 0 / 0);
     padding: var(--bp-space-2) var(--bp-space-3);
     display: grid;
     grid-template-columns: minmax(8rem, 14rem) 1fr auto;
     gap: var(--bp-space-2) var(--bp-space-3);
     align-items: baseline;
   }
-  :where(.bp-choice-record__row + .bp-choice-record__row) {
-    margin-top: var(--bp-space-2);
+  :where(bp-choice-record-row:has(.bp-choice__compare)) :where(.bp-choice-record__row) {
+    border-bottom: 1px solid var(--bp-edge);
+  }
+  /* Compare sits flush in the card: drop the base compare top-margin and the
+     standalone compare card chrome (border / radius) used in gallery layout.
+     Wins over the base :where(.bp-choice__compare) rule by source order — no
+     !important, since the record row no longer carries a JS inline margin. */
+  :where(bp-choice-record-row) :where(.bp-choice__compare) {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+  :where(bp-choice-record-row) :where(.bp-choice__compare > summary) {
+    background-color: var(--bp-fill-amb);
+  }
+  :where(bp-choice-record-row) :where(.bp-choice__compare > summary:hover) {
+    background-color: var(--bp-fill-hi);
   }
   :where(.bp-choice-record__row) :where(dt) {
     font-family: var(--bp-mono);
@@ -4058,6 +4208,119 @@
   }
 }
 
+/* =====================================================================
+   @layer components — drafting board: interactive surfaces sit on a dot
+   mat. Last in the layer so its surface overrides win by source order.
+   ===================================================================== */
+@layer components {
+  /* The interactive component family (choice, preflight, choice-record,
+     source, mock, gallery) gets a dot-grid backdrop + a padding "mat", so a
+     live/interactive block reads as a working surface distinct from settled
+     prose — a second axis beside the Obvious pill vocabulary, one that marks
+     even the non-decision interactive surfaces. The host is the mat (board
+     shows in its padding and any internal gaps); the rendered root inside is
+     the solid card. */
+  :where(bp-choice, bp-preflight, bp-choice-record, bp-source, bp-mock, bp-gallery) {
+    display: block;
+    margin: var(--bp-space-4) 0;
+    padding: var(--bp-space-5);
+    background-color: var(--bp-board-bg);
+    background-image: var(--bp-board);
+    background-size: var(--bp-board-gap) var(--bp-board-gap);
+  }
+  /* Once upgraded, every dotted-mat host rounds to the Obvious container
+     radius. data-bp-rendered is the uniform runtime hook — all interactive
+     hosts set it on connect. bp-rationale also carries the flag but is not
+     a mat host and is excluded from this selector list. */
+  :where(
+    bp-choice,
+    bp-preflight,
+    bp-choice-record,
+    bp-choice-record-row,
+    bp-source,
+    bp-mock,
+    bp-gallery
+  )[data-bp-rendered="1"] {
+    border-radius: var(--bp-radius-8);
+    overflow: hidden;
+  }
+  /* The rendered root owns no outer margin now — the host carries document
+     rhythm — so the mat reads even on all four sides. */
+  :where(.bp-choice, .bp-choice-record, .bp-source, .bp-mock, .bp-gallery),
+  :where(bp-preflight) :where(.bp-preflight) {
+    margin: 0;
+  }
+  /* Expanded mock floats fullscreen (position: fixed): collapse the host so
+     no empty dotted mat is left behind in the document flow. */
+  :where(bp-mock:has(.bp-mock.is-expanded)) {
+    margin: 0;
+    padding: 0;
+  }
+
+  /* Single-surface specimens read as ONE continuous paper card on the mat;
+     give each an opaque paper fill (source inherits a translucent
+     --bp-fill-amb from <details>, which would let the dots bleed through). */
+  :where(.bp-choice--tabs, .bp-preflight, .bp-source, .bp-gallery) {
+    background-color: var(--bp-paper);
+  }
+
+  /* Multi-card layouts (stack / gallery / resolved / record) stay transparent
+     so the host board shows in their gaps; each card carries its own paper.
+     Chosen / resolved cards swap paper for a translucent fill — restore an
+     opaque paper base so the board can't bleed through the card. */
+  :where(.bp-choice__card:has(.bp-choice__pick:checked)),
+  :where(.bp-choice__card[data-resolved]) {
+    background-color: var(--bp-paper);
+    background-image: linear-gradient(var(--bp-fill-amb), var(--bp-fill-amb));
+  }
+  /* Rejected / set-aside cards use opacity, so the whole card (incl. its
+     hatch) goes translucent and the board bleeds through. Keep the set-aside
+     read via hatch + tag, not element opacity. */
+  :where(
+    .bp-choice--stack:has(.bp-choice__pick:checked)
+      .bp-choice__card:not(:has(.bp-choice__pick:checked)),
+    .bp-choice--resolved .bp-choice__card:not([data-resolved])
+  ) {
+    opacity: 1;
+    background-color: var(--bp-paper);
+    background-image: var(--bp-hatch);
+  }
+  :where(
+    .bp-choice--gallery:has(.bp-choice__pick:checked)
+      .bp-choice__mock:not(:has(.bp-choice__pick:checked))
+  ) {
+    opacity: 1;
+  }
+  :where(
+    .bp-choice--gallery:has(.bp-choice__pick:checked)
+      .bp-choice__mock:not(:has(.bp-choice__pick:checked))
+      .bp-choice__mock-frame
+  ) {
+    background-color: var(--bp-paper);
+    background-image: var(--bp-hatch);
+  }
+
+  /* The compare disclosure sits between transparent siblings (gallery /
+     record); make it an opaque paper card so the dots stop at its edge. */
+  :where(.bp-choice__compare) {
+    background-color: var(--bp-paper);
+  }
+
+  /* Action footers (hint + reset): machine-voice mono directly on the dots is
+     hard to read. A paper strip with a top hairline keeps the gap above as
+     board; horizontal padding matches the content inset above. Tabs already
+     sit on their own paper panel, so skip them. */
+  :where(.bp-choice--stack, .bp-choice--gallery, .bp-choice--resolved) :where(.bp-choice__actions),
+  :where(.bp-preflight__footer) {
+    background-color: var(--bp-paper);
+    padding: var(--bp-board-footer-pad-y) var(--bp-board-footer-pad-x);
+    border-top: var(--bp-stroke) solid var(--bp-edge);
+  }
+  :where(.bp-choice--stack, .bp-choice--gallery, .bp-choice--resolved) :where(.bp-choice__actions) {
+    --bp-board-footer-pad-x: var(--bp-space-3);
+  }
+}
+
 /* =====================================================================
    @layer utilities — last-resort single-purpose helpers + responsive
    ===================================================================== */
@@ -4429,7 +4692,7 @@ body > .site-nav .site-nav__theme:hover {
    read as one control family (border, radius, surface + hover/focus states). */
 .sidebar-field {
   border: 1px solid var(--bp-edge);
-  border-radius: var(--bp-radius-6, 6px);
+  border-radius: var(--bp-radius-pill);
   background: var(--bp-paper);
   /* Hover-only color motion — idle fields snap on theme flip so the root
      view-transition crossfade isn't fighting per-field token tweens. */
@@ -5018,7 +5281,7 @@ body > .site-nav .site-nav__theme:hover {
   height: var(--bp-theme-toggle-height);
   padding: 2px;
   border: 1px solid var(--bp-edge);
-  border-radius: var(--bp-radius-6, 6px);
+  border-radius: var(--bp-radius-pill);
   background: var(--bp-fill-amb);
   color: var(--bp-text-secondary);
   cursor: pointer;
@@ -5044,7 +5307,7 @@ body > .site-nav .site-nav__theme:hover {
   width: calc(var(--bp-theme-toggle-height) - 6px);
   height: calc(var(--bp-theme-toggle-height) - 6px);
   border: 1px solid var(--bp-ink-line);
-  border-radius: var(--bp-radius-4, 4px);
+  border-radius: var(--bp-radius-round);
   background: var(--bp-paper);
   box-shadow: 0 1px 2px oklch(0 0 0 / 0.06);
   pointer-events: none;
@@ -5092,7 +5355,7 @@ body > .site-nav .site-nav__theme:hover {
   height: var(--bp-sidebar-toggle-size);
   padding: 0;
   border: 1px solid var(--bp-edge);
-  border-radius: var(--bp-radius-6, 6px);
+  border-radius: var(--bp-radius-pill);
   background: var(--bp-fill-amb);
   color: var(--bp-text-secondary);
   cursor: pointer;
@@ -5227,7 +5490,7 @@ body > .site-nav .site-nav__theme:hover {
 
   /* Fade scrim above the footer: the TOC scrolls out beneath it (z below the
      footer controls), with a solid bottom band backing the footer. */
-  .bp-sidebar::after {
+  #bp-contents-rail::after {
     content: "";
     position: fixed;
     left: 0;
@@ -5242,7 +5505,7 @@ body > .site-nav .site-nav__theme:hover {
   /* Radial scrim around the corner toggle: the TOC dissolves in a circle that
      radiates from the icon as entries scroll up beneath it. The box is large
      enough to hold the gradient's outer radius; transparent beyond it. */
-  .bp-sidebar::before {
+  #bp-contents-rail::before {
     content: "";
     position: fixed;
     top: 0;
@@ -5407,7 +5670,7 @@ html[data-bp-document]:has(.bp-cite-pane.is-open) main {
   height: var(--bp-sidebar-toggle-size);
   padding: 0;
   border: var(--bp-stroke) solid var(--bp-edge);
-  border-radius: var(--bp-radius-6);
+  border-radius: var(--bp-radius-pill);
   background: var(--bp-fill-amb);
   color: var(--bp-text-secondary);
   cursor: pointer;