@obvi/blueprint 1.1.1 → 1.1.3

package/dist/blueprint.css

@@ -176,14 +176,45 @@
     /* Diagonal hatch — drafting "section lining" for fenced / held /
        out-of-bounds regions. Faint ink lines over whatever fill the host
        element already has, so it reads as texture, not a second color.
-       Theme-aware for free: it composes --bp-ink-faint, which flips in
-       dark. --bp-hatch-gap controls the line pitch. */
+       Dark mode overrides --bp-hatch in [data-obvious-theme="dark"].
+       --bp-hatch-gap controls the line pitch. */
     --bp-hatch-gap: 7px;
     --bp-hatch: repeating-linear-gradient(
       -45deg,
       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. */
@@ -365,7 +424,17 @@
     /* Neutral white-alpha panel fills over the dark paper. */
     --bp-fill-amb: oklch(1 0 0 / 0.04);
     --bp-fill-hi: oklch(1 0 0 / 0.08);
-    --bp-scrim: oklch(1 0 0 / 0.58);
+    /* Scrim stays a black wash in dark mode too: a modal scrim must dim the
+       page behind a floated panel, not brighten it. White-alpha here washed
+       the whole overlay out. */
+    --bp-scrim: oklch(0 0 0 / 0.58);
+    /* Diagonal hatch (dark) — softer than --bp-ink-faint so scrims and
+       rejected-choice fills keep texture without brightening the wash. */
+    --bp-hatch: repeating-linear-gradient(
+      -45deg,
+      var(--bp-edge) 0 var(--bp-stroke),
+      oklch(0 0 0 / 0) var(--bp-stroke) var(--bp-hatch-gap)
+    );
     --bp-paper: var(--bp-gray-950);
     --bp-bg: oklch(0.15 0 0); /* the desk sits darker than the sheet, so the page lifts */
     --bp-edge: oklch(1 0 0 / 0.08);
@@ -374,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);
   }
 }
 
@@ -1468,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,
@@ -1528,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;
@@ -1554,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;
@@ -1592,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;
@@ -1606,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;
@@ -1628,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) --------------------------- */
@@ -1646,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);
@@ -1734,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);
   }
@@ -1789,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;
@@ -1809,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;
   }
@@ -1842,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);
@@ -1868,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);
@@ -1877,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;
@@ -1894,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);
@@ -1939,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;
@@ -1962,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);
@@ -2364,6 +2524,46 @@
     text-transform: uppercase;
     color: var(--bp-text-secondary);
   }
+  :where(.bp-cite-actions) {
+    display: flex;
+    align-items: center;
+    gap: var(--bp-space-2);
+    flex: 0 0 auto;
+  }
+  /* Open-in-pane action. Hidden unless a host advertises a side pane, so the
+     standalone popover (no pane host) never shows a dead control. */
+  :where(.bp-cite-expand) {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin: 0;
+    padding: 0;
+    border: var(--bp-stroke) solid var(--bp-edge);
+    border-radius: var(--bp-radius-2);
+    background: var(--bp-fill-amb);
+    color: var(--bp-text-secondary);
+    cursor: pointer;
+    transition:
+      color var(--bp-duration-fast) var(--bp-ease-out),
+      border-color var(--bp-duration-fast) var(--bp-ease-out),
+      background-color var(--bp-duration-fast) var(--bp-ease-out);
+  }
+  :where(html[data-bp-cite-pane] .bp-cite-expand) {
+    display: inline-flex;
+  }
+  :where(.bp-cite-expand:hover),
+  :where(.bp-cite-expand:focus-visible) {
+    color: var(--bp-ink);
+    border-color: var(--bp-ink-line);
+    background: var(--bp-paper);
+  }
+  :where(.bp-cite-expand svg) {
+    display: block;
+    width: 13px;
+    height: 13px;
+  }
   /* Code block inside the card — base treatment; blueprint-code.css makes
      the highlighted variant sit flush and rounds the lower corners. */
   :where(.bp-cite-pop pre) {
@@ -4008,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
    ===================================================================== */
@@ -4379,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. */
@@ -4968,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;
@@ -4994,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;
@@ -5042,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;
@@ -5177,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;
@@ -5192,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;
@@ -5230,3 +5543,198 @@ body > .site-nav .site-nav__theme:hover {
     display: none;
   }
 }
+
+/* ---------------------------------------------------------------------------
+   Cited-source side pane
+   ---------------------------------------------------------------------------
+   The host surface a <bp-cite> popover promotes its source into (the "open in
+   side pane" action). It is a right COLUMN, not an overlay: opening reflows the
+   sheet left to reclaim a column inside the desk frame, and the pane's
+   full-height left border is the crosshair divider — the same --bp-edge
+   hairline as the frame rules. No scrim; the document stays interactive beside
+   it. Built and toggled by blueprint.js (wireCitePane); reuses the merged
+   detail-pane shell. */
+:root {
+  --bp-cite-pane-w: min(480px, 78vw);
+  --bp-cite-pane-swap-shift: var(--bp-space-3);
+}
+
+/* Reflow the sheet to open the column. The margin transition is supplied by
+   the bp-sidebar-animate rule above (added one frame after paint), so opening
+   animates while first paint never does — the pane is always closed on load. */
+html[data-bp-document]:has(.bp-cite-pane.is-open) main {
+  margin-right: calc(var(--bp-shell-inset-right) + var(--bp-cite-pane-w));
+}
+
+/* Clip port stops at the right frame rule so the parked pane adds no page
+   scroll. Sits above the desk masks but below the frame rules. */
+.bp-cite-pane-port {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: var(--bp-shell-inset-right, var(--bp-space-4));
+  z-index: calc(var(--bp-shell-mask-z, 150) + 10);
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.bp-cite-pane {
+  position: absolute;
+  top: var(--bp-shell-inset-top, var(--bp-space-4));
+  bottom: var(--bp-shell-inset-block, var(--bp-space-4));
+  right: 0;
+  width: var(--bp-cite-pane-w);
+  display: flex;
+  flex-direction: column;
+  background: var(--bp-paper);
+  border-left: var(--bp-stroke) solid var(--bp-edge);
+  /* parked just past the clip so it travels exactly its own width to open */
+  transform: translateX(100%);
+  /* ease-in-out matches the shell push so the divider moves as one boundary */
+  transition: transform var(--bp-duration-slow) var(--bp-ease-in-out);
+  pointer-events: auto;
+}
+.bp-cite-pane.is-open {
+  transform: translateX(0);
+}
+.bp-cite-pane:focus-visible {
+  outline: none;
+}
+
+.bp-cite-pane__head {
+  position: relative;
+  padding:
+    var(--bp-sidebar-chrome-gap)
+    var(--bp-sidebar-chrome-gap)
+    var(--bp-sidebar-chrome-gap)
+    var(--bp-space-4);
+  border-bottom: var(--bp-stroke) solid var(--bp-edge);
+}
+.bp-cite-pane__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bp-space-1);
+  min-width: 0;
+  padding-right: calc(
+    var(--bp-sidebar-toggle-size) + var(--bp-sidebar-chrome-gap)
+  );
+}
+.bp-cite-pane__eyebrow {
+  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);
+}
+/* The locator the source was opened from — scrolls back to the citation. */
+.bp-cite-pane__loc {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: left;
+  font-family: var(--bp-mono);
+  font-size: var(--bp-text-small);
+  line-height: var(--bp-lh-body);
+  color: var(--bp-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: var(--bp-ink-line);
+  text-underline-offset: 0.18em;
+  transition:
+    color var(--bp-duration-fast) var(--bp-ease-out),
+    text-decoration-color var(--bp-duration-fast) var(--bp-ease-out);
+}
+.bp-cite-pane__loc:hover,
+.bp-cite-pane__loc:focus-visible {
+  color: var(--bp-text);
+  text-decoration-color: var(--bp-text);
+}
+.bp-cite-pane__loc[hidden] {
+  display: none;
+}
+.bp-cite-pane__close {
+  position: absolute;
+  top: var(--bp-sidebar-chrome-gap);
+  right: var(--bp-sidebar-chrome-gap);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bp-sidebar-toggle-size);
+  height: var(--bp-sidebar-toggle-size);
+  padding: 0;
+  border: var(--bp-stroke) solid var(--bp-edge);
+  border-radius: var(--bp-radius-pill);
+  background: var(--bp-fill-amb);
+  color: var(--bp-text-secondary);
+  cursor: pointer;
+  transition:
+    border-color var(--bp-duration-fast) var(--bp-ease-out),
+    background-color var(--bp-duration-fast) var(--bp-ease-out),
+    color var(--bp-duration-fast) var(--bp-ease-out);
+}
+.bp-cite-pane__close:hover {
+  border-color: var(--bp-ink-line);
+  background: var(--bp-paper);
+  color: var(--bp-ink);
+}
+.bp-cite-pane__close svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+}
+
+/* The body owns vertical scroll; its content sizes to itself so a short
+   snippet keeps a short card instead of a column-tall empty box. */
+.bp-cite-pane__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding: var(--bp-space-4);
+}
+/* Content swap when promoting another citation while the pane is open: the
+   pane holds, only the source crossfades to the right. */
+.bp-cite-pane__swap {
+  transition:
+    opacity var(--bp-duration-normal) var(--bp-ease-out),
+    transform var(--bp-duration-normal) var(--bp-ease-out);
+}
+.bp-cite-pane__swap.is-leaving {
+  opacity: 0;
+  transform: translateX(var(--bp-cite-pane-swap-shift));
+}
+/* JS mount point for the cloned <pre>. Visual treatment lives in
+   blueprint-code.css (full highlighted-block + accent bar). Margin is cleared
+   here (not :where) so it beats the base-layer :where(pre) rhythm margin and
+   the theme's margin-block — document specimens outside the pane are untouched. */
+.bp-cite-pane__source {
+  min-width: 0;
+}
+.bp-cite-pane__source pre {
+  margin: 0;
+  margin-block: 0;
+}
+
+/* Below the rail's fixed breakpoint the desk frame flattens; let the pane fill
+   the viewport edge-to-edge and drop the reflow (the sheet goes static). */
+@media (max-width: 700px) {
+  html[data-bp-document]:has(.bp-cite-pane.is-open) main {
+    margin-right: 0;
+  }
+  :root {
+    --bp-cite-pane-w: min(420px, 92vw);
+  }
+}
+
+@media print {
+  .bp-cite-pane-port {
+    display: none;
+  }
+}