@crisp-ui-kit/crisp 0.57.0 → 0.57.2

package/dist/styles.css

@@ -27,14 +27,16 @@
   font-display: swap;
 }
 :root {
-  --crisp-bg-brand-solid: #266df0;
-  --crisp-bg-brand-solid-pressed: #1f5fd6;
+  --crisp-bg-brand-solid: #0298d9;
+  --crisp-bg-brand-solid-pressed: #0283bb;
+  --crisp-bg-brand-contrast: #0278ac;
+  --crisp-fg-brand-contrast: #0278ac;
   --crisp-fg-on-brand: #ffffff;
   --crisp-fg-on-tone: #101112;
   --crisp-bg-surface: #ffffff;
-  --crisp-bg-raised: #f4f4f5;
+  --crisp-bg-raised: #f7f8f9;
   --crisp-bg-surface-muted: #f6f7f7;
-  --crisp-border-default: #e4e4e7;
+  --crisp-border-default: #dcdee3;
   --crisp-border-subtle: #eeeff1;
   --crisp-border-dropzone: #e6e7ea;
   --crisp-border-divider: #e6e7ea;
@@ -43,7 +45,9 @@
   --crisp-ring-switch: #d9dade;
   --crisp-bg-tile-active: #ffffff;
   --crisp-shadow-tile-active: rgba(0,0,0,0.04);
-  --crisp-bg-scrim: rgba(0,0,0,0.25);
+  --crisp-bg-scrim: rgba(0,0,0,0.45);
+  --crisp-bg-overlay-strong: #00000074;
+  --crisp-stroke-group-divider: #00000010;
   --crisp-fg-alert-description: rgba(0,0,0,0.63);
   --crisp-bg-overlay-frost: #ffffff;
   --crisp-shadow-overlay1: rgba(28,40,64,0.12);
@@ -56,9 +60,9 @@
   --crisp-shadow-popover3: rgba(24,41,75,0.16);
   --crisp-fg-primary: #101112;
   --crisp-fg-muted: #71717a;
-  --crisp-bg-danger: #e5484d;
-  --crisp-bg-danger-solid: #ba2525;
-  --crisp-fg-danger: #eb3b3b;
+  --crisp-bg-danger: #fa342c;
+  --crisp-bg-danger-solid: #ca1d13;
+  --crisp-fg-danger: #fa342c;
   --crisp-stroke-field-focus: #1a1c20;
   --crisp-fg-disabled: #d1d3d8;
   --crisp-bg-neutral-weak: #f3f4f5;
@@ -67,8 +71,9 @@
   --crisp-fg-neutral-subtle: #868b94;
   --crisp-fg-neutral-muted: #555d6d;
   --crisp-stroke-focus-ring: #1e82eb;
-  --crisp-bg-success: #1f9d57;
-  --crisp-bg-warning: #b5730f;
+  --crisp-bg-success: #079171;
+  --crisp-bg-warning: #9b7821;
+  --crisp-bg-warning-solid: #fbdc65;
   --crisp-bg-orange: #f97514;
   --crisp-bg-cyan: #00b9eb;
   --crisp-bg-purple: #9b69ff;
@@ -95,8 +100,10 @@
 }
 
 [data-theme="dark"] {
-  --crisp-bg-brand-solid: #266df0;
-  --crisp-bg-brand-solid-pressed: #1f5fd6;
+  --crisp-bg-brand-solid: #0298d9;
+  --crisp-bg-brand-solid-pressed: #0283bb;
+  --crisp-bg-brand-contrast: #0278ac;
+  --crisp-fg-brand-contrast: #0278ac;
   --crisp-fg-on-brand: #ffffff;
   --crisp-fg-on-tone: #101112;
   --crisp-bg-surface: #0a0a0a;
@@ -112,6 +119,8 @@
   --crisp-bg-tile-active: #101112;
   --crisp-shadow-tile-active: rgba(0,0,0,0);
   --crisp-bg-scrim: rgba(0,0,0,0.55);
+  --crisp-bg-overlay-strong: #00000074;
+  --crisp-stroke-group-divider: #ffffff17;
   --crisp-fg-alert-description: rgba(255,255,255,0.6);
   --crisp-bg-overlay-frost: #1c1d1f;
   --crisp-shadow-overlay1: rgba(0,0,0,0.48);
@@ -137,6 +146,7 @@
   --crisp-stroke-focus-ring: #5e98fe;
   --crisp-bg-success: #2ea968;
   --crisp-bg-warning: #e0982a;
+  --crisp-bg-warning-solid: #e0982a;
   --crisp-bg-orange: #f97514;
   --crisp-bg-cyan: #00b9eb;
   --crisp-bg-purple: #9b69ff;
@@ -175,13 +185,15 @@
   --crisp-space-1-5: 6px;
   --crisp-space-2-5: 10px;
   --crisp-space-3-5: 14px;
-  --crisp-radius-chip: 7px;
+  --crisp-radius-xs: 4px;
+  --crisp-radius-chip: 999px;
   --crisp-radius-sm: 6px;
   --crisp-radius-md: 8px;
   --crisp-radius-lg: 9px;
   --crisp-radius-xl: 12px;
   --crisp-radius-2xl: 16px;
   --crisp-radius-3xl: 20px;
+  --crisp-radius-4xl: 24px;
   --crisp-radius-full: 999px;
   --crisp-size-icon: 16px;
   --crisp-size-chip: 22px;
@@ -205,6 +217,18 @@
   --crisp-weight-semibold: 600;
   --crisp-weight-bold: 700;
   --crisp-font-sans: "VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
+  --crisp-tracking-18: -0.36px;
+  --crisp-tracking-20: -0.4px;
+  --crisp-tracking-24: -0.48px;
+  --crisp-tracking-26: -0.52px;
+  --crisp-tracking-28: -0.56px;
+  --crisp-tracking-32: -0.64px;
+}
+
+.crisp-accentpicker {
+  display: flex; gap: var(--crisp-space-2);
+    & .crisp-accentpicker-swatch { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; margin: 0; border-radius: var(--crisp-radius-full); border: 1px solid transparent; background: none; font-family: inherit; cursor: pointer; }
+    & .crisp-accentpicker-swatch:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 2px; }
 }
 
 .crisp-accordion {
@@ -255,7 +279,7 @@
   background: var(--crisp-bg-raised); color: var(--crisp-fg-neutral-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-default);
 }
 .crisp-avatar--tone_brand {
-  background: var(--crisp-bg-brand-solid); color: #fff;
+  background: var(--crisp-bg-brand-contrast); color: #fff;
 }
 .crisp-avatar--tone_orange {
   background: var(--crisp-bg-orange); color: #fff;
@@ -299,13 +323,13 @@
   background: var(--crisp-bg-purple-soft); color: var(--crisp-fg-purple-soft); box-shadow: inset 0 0 0 1px var(--crisp-ring-purple-soft);
 }
 .crisp-badge--size_small {
-  height: 16px; padding-inline: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; border-radius: var(--crisp-radius-sm);
+  height: 16px; padding-inline: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; border-radius: var(--crisp-radius-xs);
 }
 .crisp-badge--size_medium {
-  height: 20px; padding-inline: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; gap: 3px; border-radius: var(--crisp-radius-sm);
+  height: 20px; padding-inline: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; gap: 3px; border-radius: var(--crisp-radius-xs);
 }
 .crisp-badge--size_large {
-  height: var(--crisp-size-chip); padding-block: var(--crisp-space-px); padding-inline-start: var(--crisp-space-1); padding-inline-end: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); letter-spacing: -0.1px; border-radius: var(--crisp-radius-lg);
+  height: var(--crisp-size-chip); padding-block: var(--crisp-space-px); padding-inline-start: var(--crisp-space-1); padding-inline-end: var(--crisp-space-1-5); font-size: var(--crisp-text-lg); letter-spacing: -0.1px; border-radius: var(--crisp-radius-sm);
 }
 .crisp-badge--variant_soft {
   
@@ -314,13 +338,13 @@
   
 }
 .crisp-badge--compound_0 {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: none;
+  background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); box-shadow: none;
 }
 .crisp-badge--compound_1 {
   background: var(--crisp-bg-success); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
 .crisp-badge--compound_2 {
-  background: var(--crisp-bg-warning); color: var(--crisp-fg-on-tone); box-shadow: none;
+  background: var(--crisp-bg-warning-solid); color: var(--crisp-fg-on-tone); box-shadow: none;
 }
 .crisp-badge--compound_3 {
   background: var(--crisp-bg-danger); color: var(--crisp-fg-on-tone); box-shadow: none;
@@ -353,6 +377,33 @@
   }
 }
 
+.crisp-bottomsheet {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-bottomsheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--crisp-bg-overlay-strong); /* bottom-sheet.yaml:99 backdrop.color = $color.bg.overlay -- a different, darker, theme-constant scrim than the Dialog bgScrim token, see its own comment */ opacity: 1; transition: opacity 300ms cubic-bezier(0,0,.15,1); /* bottom-sheet.yaml:100-102 enterDuration/enterTimingFunction */ @starting-style { opacity: 0; } }
+    & .crisp-bottomsheet-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-end; justify-content: center; }
+    & .crisp-bottomsheet-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; width: 100%; max-width: 480px; /* bottom-sheet.yaml:110 content.maxWidth */ max-height: 85vh; background: var(--crisp-bg-surface); /* bottom-sheet.yaml:109 content.color = $color.bg.layer-floating */ border-radius: var(--crisp-radius-4xl) var(--crisp-radius-4xl) 0 0; /* bottom-sheet.yaml:111 content.topCornerRadius = $radius.r6 (24px), bottom flush with the viewport */ transform: translateY(0); transition: transform 300ms cubic-bezier(.03,.4,.1,1); /* bottom-sheet.yaml:112-113 content.enterDuration/enterTimingFunction (enter-expressive) */ @starting-style { transform: translateY(100%); } }
+    & .crisp-bottomsheet-header { position: relative; display: flex; flex-direction: column; gap: var(--crisp-space-2); /* bottom-sheet.yaml:120 header.gap = $dimension.x2 (8px) */ padding-top: var(--crisp-space-6); padding-bottom: var(--crisp-space-4); /* bottom-sheet.yaml:121-122 header.paddingTop/paddingBottom = $dimension.x6/x4 (24px/16px) */ flex-shrink: 0; }
+    & .crisp-bottomsheet-title { color: var(--crisp-fg-primary); /* bottom-sheet.yaml:130 title.color = $color.fg.neutral */ font-size: 22px; line-height: 30px; font-weight: var(--crisp-weight-bold); /* bottom-sheet.yaml:131-133 title.fontSize/lineHeight/fontWeight = $font-size.t8/$line-height.t8/bold */ padding-inline: var(--crisp-space-4); /* default (headerAlignment=left, no close button): bottom-sheet.yaml:150-152 */ }
+    &[data-header-align="left"][data-has-close] .crisp-bottomsheet-title { padding-inline-start: var(--crisp-space-4); padding-inline-end: 56px; }
+    /* bottom-sheet.yaml:141-144 */
+    &[data-header-align="center"] .crisp-bottomsheet-title { text-align: center; }
+    &[data-header-align="center"][data-has-close] .crisp-bottomsheet-title { padding-inline: 56px; }
+    /* bottom-sheet.yaml:154-157 */
+    & .crisp-bottomsheet-description { color: var(--crisp-fg-muted); /* bottom-sheet.yaml:138 description.color = $color.fg.neutral-muted */ font-size: var(--crisp-text-xl); line-height: 22px; font-weight: var(--crisp-weight-regular); /* bottom-sheet.yaml:139-141 description.fontSize/lineHeight/fontWeight = $font-size.t5/$line-height.t5/regular */ padding-inline: var(--crisp-space-4); /* bottom-sheet.yaml:142 description.paddingX = global-gutter (16px) */ }
+    & .crisp-bottomsheet-close { position: absolute; top: var(--crisp-space-6); inset-inline-end: var(--crisp-space-4); /* bottom-sheet.yaml:145-146 closeButton.fromTop/fromRight = $dimension.x6/x4 (24px/16px) */ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
+    & .crisp-bottomsheet-close:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
+    & .crisp-bottomsheet-body { flex: 1; min-height: 0; overflow-y: auto; padding-inline: var(--crisp-space-4); /* bottom-sheet.yaml:126 body.paddingX = global-gutter (16px) -- no vertical padding in the spec */ }
+    & .crisp-bottomsheet-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--crisp-space-3); flex-shrink: 0; padding-inline: var(--crisp-space-4); padding-top: var(--crisp-space-3); padding-bottom: var(--crisp-space-4); /* bottom-sheet.yaml:127-129 footer.paddingX/paddingTop/paddingBottom = global-gutter/x3/x4 (16px/12px/16px) */ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-bottomsheet, .crisp-bottomsheet * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 .crisp-breadcrumb {
   display: flex; align-items: center; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg);
     & .crisp-breadcrumb-item { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); box-sizing: border-box; height: 24px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-md); color: var(--crisp-fg-muted); text-decoration: none; white-space: nowrap; }
@@ -393,23 +444,24 @@
 .crisp-button {
   display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); font-family: var(--crisp-font-sans); font-weight: var(--crisp-weight-medium); letter-spacing: -0.07px; line-height: 20px; white-space: nowrap; border: none; cursor: pointer; transition: background-color .2s, box-shadow .2s, color .2s;
     &:disabled { opacity: 0.5; cursor: not-allowed; }
+    &:active { transform: scale(0.98); }
 }
 .crisp-button--intent_primary {
-  background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08);
-    &:hover { background: var(--crisp-bg-brand-solid-pressed); }
-    &:active { background: var(--crisp-bg-brand-solid-pressed); }
+  background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); box-shadow: none;
+    &:hover { filter: brightness(0.96); }
+    &:active { filter: brightness(0.92); }
 }
 .crisp-button--intent_neutral {
-  background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
-    &:hover { background: var(--crisp-bg-raised); }
+  background: var(--crisp-bg-neutral-weak); color: var(--crisp-fg-primary); box-shadow: none;
+    &:hover { background: var(--crisp-border-subtle); }
 }
 .crisp-button--intent_danger {
-  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(186,37,37,0.20), 0 3px 6px -2px rgba(186,37,37,0.12);
+  background: var(--crisp-bg-danger-solid); color: var(--crisp-fg-on-brand); box-shadow: none;
     &:hover { filter: brightness(0.96); }
     &:active { filter: brightness(0.92); }
 }
 .crisp-button--intent_ghost {
-  background: transparent; color: var(--crisp-fg-muted); box-shadow: none;
+  background: transparent; color: var(--crisp-fg-primary); box-shadow: none;
     &:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
 }
 .crisp-button--size_sm {
@@ -421,7 +473,7 @@
     &[data-icon-end] { padding-inline-end: var(--crisp-space-1-5); }
 }
 .crisp-button--size_lg {
-  height: 40px; padding-inline: 14px; font-size: var(--crisp-text-lg); border-radius: 10px;
+  height: 40px; padding-inline: 14px; font-size: var(--crisp-text-lg); border-radius: var(--crisp-radius-xl);
 }
 .crisp-button--shape_text {
   
@@ -499,12 +551,16 @@
 }
 
 .crisp-checkbox {
-  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); cursor: pointer; transition: background-color .12s, box-shadow .12s;
-    &:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
-    &:checked, &:indeterminate { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; box-shadow: none; }
+  appearance: none; -webkit-appearance: none; box-sizing: border-box; flex-shrink: 0; margin: 0; width: 16px; height: 16px; border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xs); background: var(--crisp-bg-surface); cursor: pointer; transition: background-color .12s, border-color .12s;
+    &:hover { border-color: color-mix(in srgb, var(--crisp-fg-primary) 30%, transparent); }
+    &:checked, &:indeterminate { background: var(--crisp-bg-brand-solid) center / 10px no-repeat; border-color: transparent; }
     &:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
     &:indeterminate { background-image: linear-gradient(var(--crisp-fg-on-brand), var(--crisp-fg-on-brand)); background-size: 8px 2px; }
     &:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    &:disabled { background: var(--crisp-bg-neutral-weak); border-color: var(--crisp-border-subtle); cursor: not-allowed; }
+    &:checked:disabled, &:indeterminate:disabled { background: var(--crisp-bg-neutral-weak) center / 10px no-repeat; border-color: var(--crisp-border-subtle); }
+    &:checked:disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5 5 9l4.5-5'/%3E%3C/svg%3E"); }
+    &:indeterminate:disabled { background-image: linear-gradient(var(--crisp-fg-on-brand), var(--crisp-fg-on-brand)); background-size: 8px 2px; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -548,34 +604,63 @@
 .crisp-chip--tone_orange {
   background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-bg-orange) 30%, transparent);
 }
+.crisp-chip--appearance_filled {
+  
+}
+.crisp-chip--appearance_outline {
+  background: transparent;
+}
+.crisp-chip--selected_true {
+  background: var(--crisp-bg-neutral-inverted); color: var(--crisp-fg-on-neutral-inverted); box-shadow: none;
+}
+.crisp-chip--selected_false {
+  
+}
+.crisp-chip--compound_0 {
+  box-shadow: inset 0 0 0 1px var(--crisp-border-default);
+}
+
+.crisp-chipgroup {
+  display: flex; flex-wrap: nowrap; align-items: center; gap: var(--crisp-space-1-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
+    &::-webkit-scrollbar { display: none; }
+    & > * { flex-shrink: 0; scroll-snap-align: start; }
+}
 
 .crisp-columncalc {
-  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would shrink the button back to its text. Make the wrapper fill too, so the whole cell stays clickable. */
+  display: flex; align-items: stretch; width: 100%; height: 100%; font-family: var(--crisp-font-sans); /* Menu wraps its trigger in a flex div that sizes to content, which would
+       shrink the button back to its text. Make the wrapper fill too, so the
+       whole cell stays clickable. */
     & .crisp-menu { width: 100%; height: 100%; }
-    /* No radius: the trigger fills the cell, so rounding its own corners leaves the cell's background showing through at the four corners as
+    /* No radius: the trigger fills the cell, so rounding its own corners
+       leaves the cell's background showing through at the four corners as
        soon as the hover tint paints. Everything else that fills a grid cell
        agrees -- recordstable-sum-btn, the same summary trigger, declares no
        radius, and datatable-grip and the embedded pickers zero theirs. An 8px
        radius survived the chip-to-full-cell conversion and shipped rounded
-       until #282, so the spec check now guards it. */
-        /* The hit target is the WHOLE summary cell -- measured 246x36 with
+       until #282, so the spec check now guards it. */ /* The hit target is the WHOLE summary cell -- measured 246x36 with
        padding 0 12px, not a content-sized chip. Clicking anywhere in the cell
        opens the aggregation menu.
        No `min-height` (crisp#834, found reproducing the footer-row-38px-
-       not-36px bug in an isolated browser test, not table.recipe.ts's own border/box-sizing, the hypothesis the issue itself flagged as unconfirmed): the table cell's OWN `height: tableRow` (36px,
+       not-36px bug in an isolated browser test, not table.recipe.ts's own
+       border/box-sizing, the hypothesis the issue itself flagged as
+       unconfirmed): the table cell's OWN `height: tableRow` (36px,
        border-box) leaves 34px of content box once its 2px of top+bottom
        border are counted, and `min-height: tableRow` here demanded 36px
        of CONTENT height regardless -- overflowing the cell by 2px, which
        auto-height table layout resolves by growing the whole row to fit,
        landing at exactly the reported 38. `height: 100%` alone already
-       fills whatever the cell's real content box is (the doc comment above this rule's own stated intent), with nothing left demanding more. */
+       fills whatever the cell's real content box is (the doc comment above
+       this rule's own stated intent), with nothing left demanding more. */
     & .crisp-columncalc-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 100%; margin: 0; padding: 0 var(--crisp-space-3); border: none; background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-columncalc-trigger:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-columncalc-trigger svg { flex-shrink: 0; opacity: 0.7; }
     & .crisp-columncalc-trigger[data-align="right"] { justify-content: flex-end; }
     & .crisp-columncalc-placeholder { overflow: hidden; text-overflow: ellipsis; }
     & .crisp-columncalc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
-    /* crisp#837: re-measured live against Attio's real footer calc label -- 14px (was 13px, `c.text.md`, fixed on the shared trigger rule above) and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this file's own -op label already should have used instead of the flatter
+    /* crisp#837: re-measured live against Attio's real footer calc label --
+       14px (was 13px, `c.text.md`, fixed on the shared trigger rule above)
+       and rgba(0,0,0,.63), the same color-mix(fgPrimary, 63%) figure this
+       file's own -op label already should have used instead of the flatter
        `fgMuted` token (a close but not measured match). */
     & .crisp-columncalc-op { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-columncalc-section { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -667,9 +752,13 @@
 }
 
 .crisp-datatable {
-  display: flex; flex-direction: column; gap: var(--crisp-space-2-5); font-family: var(--crisp-font-sans); /* The toolbar carried no horizontal inset of its own, so its content (search box, sort/filter chips) sat flush at the table's outer edge
-       (x=0) while the header row's own th/td padding (table.recipe.ts, #465) starts every column's text at 12px -- one row down, the SAME
-       grid's own header cell already begins at that inset. c.space["3"] here just matches the row directly below it, measured live against Attio (the sort/filter row's search chip lines up with the first
+  display: flex; flex-direction: column; gap: var(--crisp-space-2-5); font-family: var(--crisp-font-sans); /* The toolbar carried no horizontal inset of its own, so its content
+       (search box, sort/filter chips) sat flush at the table's outer edge
+       (x=0) while the header row's own th/td padding (table.recipe.ts,
+       #465) starts every column's text at 12px -- one row down, the SAME
+       grid's own header cell already begins at that inset. c.space["3"]
+       here just matches the row directly below it, measured live against
+       Attio (the sort/filter row's search chip lines up with the first
        column header's text, not the grid's raw edge). */
     & .crisp-datatable-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); min-height: 49px; border-top: 1px solid var(--crisp-border-subtle); padding: 0 var(--crisp-space-3); }
     & .crisp-datatable-search { position: relative; flex: 1; max-width: 280px; display: inline-flex; align-items: center; }
@@ -679,10 +768,7 @@
     & .crisp-datatable-search input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
     /* announced, never drawn */
-    & .crisp-datatable-live {
-      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-    }
+    & .crisp-datatable-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
     /* crisp/#645: visually-hidden-but-focusable, not visually-hidden-and-
        inert like .crisp-datatable-live above -- same clip-rect shape,
        this one just needs to actually hold DOM focus so a native
@@ -690,7 +776,8 @@
        in datatable.tsx). resize: none keeps a stray native textarea handle
        from ever being drawable, even though it's clipped to 1px anyway. */
     & .crisp-datatable-clipboard-proxy { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; resize: none; }
-    /* single active cell (crisp/#645 follow-up -- this had no styling of its own at all before, a gap against Golden Rule 0: RecordsTable's own
+    /* single active cell (crisp/#645 follow-up -- this had no styling of its
+       own at all before, a gap against Golden Rule 0: RecordsTable's own
        measured value, .crisp-recordstable-td[data-selected], brought
        across unchanged now that a visible anchor actually matters for the
        Shift+Click range below). */
@@ -699,57 +786,85 @@
        tint formula already used twice below (tbody tr[data-selected] td)
        for the same reason a selected group of rows gets one: a selected
        GROUP of cells is the same kind of state, just cell-scoped instead of
-       row-scoped. Not independently re-measured against Attio's own range highlight (out of scope this slice -- flagged on crisp#645). */
+       row-scoped. Not independently re-measured against Attio's own range
+       highlight (out of scope this slice -- flagged on crisp#645). */
     & td[data-in-range] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
-    /* The header cell has no padding of its own -- the button owns the full cell so the whole header is clickable (its own inset is 12px). Mirrors the summary-row fix. `& .crisp-table th`, not bare `& th` (found while re-checking #691's
+    /* The header cell has no padding of its own -- the button owns the
+       full cell so the whole header is clickable (its own inset is 12px).
+       Mirrors the summary-row fix.
+       `& .crisp-table th`, not bare `& th` (found while re-checking #691's
        own fix live): DataTable's root nests `Table`'s own wrapper, whose
        `table.recipe.ts` carries `& th, & td { padding: 0 12px }` at the
        SAME specificity (.crisp-table th vs .crisp-datatable th, both one
        class + one element) -- a bare `& th` here only won by source
-       order, which flipped the moment table.recipe.ts's own CSS file happened to land after datatable's in the build (alphabetical:
+       order, which flipped the moment table.recipe.ts's own CSS file
+       happened to land after datatable's in the build (alphabetical:
        datatable < table), silently reinstating 12px on every header cell
-       in the whole product and making every interactive column's button double it to 24px. Scoping through `.crisp-table` adds a second class to the selector (0,2,1 beats 0,1,1) so this can never lose a specificity tie to source order again. `thead th`, not a bare `th` (crisp#829): #779 made the primary column's BODY cell a real `<th scope="row">` for a11y, and a bare
+       in the whole product and making every interactive column's button
+       double it to 24px. Scoping through `.crisp-table` adds a second
+       class to the selector (0,2,1 beats 0,1,1) so this can never lose a
+       specificity tie to source order again.
+       `thead th`, not a bare `th` (crisp#829): #779 made the primary
+       column's BODY cell a real `<th scope="row">` for a11y, and a bare
        `th` here matches that one too, zeroing an inset nothing else
        supplies -- the primary column's text sat flush left, one column's
        cell no longer matching its own header or any sibling `<td>`. Only
-       the header row's own `<th>` needs zero padding (its sort BUTTON owns the inset); the body row's `<th scope="row">` has no button,
+       the header row's own `<th>` needs zero padding (its sort BUTTON
+       owns the inset); the body row's `<th scope="row">` has no button,
        and needs the SAME base 12px (table.recipe.ts, #465) every other
        cell already gets. */
     & .crisp-table thead th { padding: 0; }
-/* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger): Menu wraps its trigger in a flex div that sizes to its content, so a long header grew past the column instead of filling it -- with nothing left to squeeze, the label's own ellipsis CSS (below) had no properly
-       -sized box to truncate against, and the th's own overflow hard-clipped it with no "...". Fill the wrapper, scoped to th so Menu's default
+    /* Same wrapper trap as AUTHORING.md Lesson 40 (ColumnCalc's summary trigger):
+       Menu wraps its trigger in a flex div that sizes to its content, so a
+       long header grew past the column instead of filling it -- with nothing
+       left to squeeze, the label's own ellipsis CSS (below) had no properly
+       -sized box to truncate against, and the th's own overflow hard-clipped
+       it with no "...". Fill the wrapper, scoped to th so Menu's default
        (correct everywhere else) is untouched. */
     & th .crisp-menu { width: 100%; height: 100%; }
     & .crisp-datatable-th-inner { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; }
     & .crisp-datatable-th-inner > svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* crisp/#605 follow-up: a header with neither a Menu nor a sort button
-       (the primary/entity column's now-inert path, or any column with no columnMenu/sortable at all) renders .crisp-datatable-th-inner as a DIRECT child of th instead of nested inside a button -- and loses the button's own 12px inset, drifting left of the td's 12px base inset. Measured live on Attio's own Companies grid: the header label
-       and the cell's own text land at the exact same x (335px from the viewport, both 40px from the column's left edge) via two different
+       (the primary/entity column's now-inert path, or any column with no
+       columnMenu/sortable at all) renders .crisp-datatable-th-inner as a
+       DIRECT child of th instead of nested inside a button -- and loses
+       the button's own 12px inset, drifting left of the td's 12px base
+       inset. Measured live on Attio's own Companies grid: the header label
+       and the cell's own text land at the exact same x (335px from the
+       viewport, both 40px from the column's left edge) via two different
        padding+icon+gap combinations -- Attio does not leave the inert
        primary header flush left either. The `>` combinator targets only
-       the button-less case: Menu's own wrapper (`.crisp-menu`) and the plain sort `button` both put >=1 more level between `th` and this span, so their own 12px (already on the button) isn't doubled. */
+       the button-less case: Menu's own wrapper (`.crisp-menu`) and the
+       plain sort `button` both put >=1 more level between `th` and this
+       span, so their own 12px (already on the button) isn't doubled. */
     & th > .crisp-datatable-th-inner { box-sizing: border-box; padding: 0 var(--crisp-space-3); }
-/* The summary cell has NO padding of its own -- the calculation trigger
+    /* The summary cell has NO padding of its own -- the calculation trigger
        owns the whole 246x37 area so a click anywhere in the cell opens the
        menu. Zero the cell's inset and let ColumnCalc supply the 12px. */
     & tfoot td { padding: 0; }
-    /* Group heading row -- a view is grouped under a subtle label with the bucket's count beside it. */
-& .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
+    /* Group heading row -- a view is grouped under a subtle label with the
+       bucket's count beside it. */
+    & .crisp-datatable-viewsettings { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-datatable-viewsettings:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-datatable-group-label { padding: var(--crisp-space-1-5) var(--crisp-space-2) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
-        & .crisp-datatable-group { height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-3); background: var(--crisp-bg-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-datatable-group { height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-3); background: var(--crisp-bg-subtle); border-bottom: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-datatable-group-count { margin-inline-start: var(--crisp-space-1-5); color: var(--crisp-fg-muted); font-variant-numeric: tabular-nums; }
     & .crisp-datatable-th-rename { width: 100%; min-width: 0; height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-1); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); outline: none; }
     & .crisp-datatable-th-rename:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-datatable-th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-    /* #465: 12px per the comment above (and Attio's measured header cell padding: 0 12px) -- was still c.space["2"] (8px), drifted from its own documented value. */
+    /* #465: 12px per the comment above (and Attio's measured header cell
+       padding: 0 12px) -- was still c.space["2"] (8px), drifted from its
+       own documented value. */
     & .crisp-datatable-sort { display: flex; align-items: center; gap: var(--crisp-space-1-5); width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0 var(--crisp-space-3); border: none; background: none; font: inherit; letter-spacing: inherit; color: inherit; text-align: start; cursor: pointer; }
     /* A right-aligned column's header keeps its field-icon + label packed at
        the START, matching its own values only in that the VALUES right-align
        -- Attio's own right-aligned header (measured live: "Twitter follower
-       count") keeps the icon+label left and only the trailing column-menu icon sits pinned to the right edge, independent of the label's width
-       (#406, reversing #393's own justify-content: flex-end here). The chevron's own margin-inline-start: auto below already pins IT to the
-       end of a flex-start row with no override needed -- that's what pins the trailing icon on Attio too. */
+       count") keeps the icon+label left and only the trailing column-menu
+       icon sits pinned to the right edge, independent of the label's width
+       (#406, reversing #393's own justify-content: flex-end here). The
+       chevron's own margin-inline-start: auto below already pins IT to the
+       end of a flex-start row with no override needed -- that's what pins
+       the trailing icon on Attio too. */
     & .crisp-datatable-chevron { margin-inline-start: auto; flex-shrink: 0; color: var(--crisp-fg-muted); opacity: 0; transition: opacity .12s; }
     & .crisp-datatable-sort:hover .crisp-datatable-chevron { opacity: 0.6; }
     & .crisp-datatable-sort[data-sorted] .crisp-datatable-chevron { opacity: 1; color: var(--crisp-fg-primary); }
@@ -757,17 +872,23 @@
     & th[data-sticky], & td[data-sticky] { position: sticky; z-index: 1; background: var(--crisp-bg-surface); }
     /* `thead th[data-sticky]`, not a bare `th[data-sticky]` (crisp#848, same
        bare-`th` family as #829/#833/#835): this z-index:3 was written for
-       the HEADER's own sticky corner cell (sticky column x sticky header), meant to win over everything else. Unscoped, it also matched the primary column's BODY cell -- a real `<th scope="row" data-sticky>`
-       since #779 -- giving every scrolled body row's own sticky cell a HIGHER z-index than the sticky FOOTER's (2), so it painted over the
+       the HEADER's own sticky corner cell (sticky column x sticky header),
+       meant to win over everything else. Unscoped, it also matched the
+       primary column's BODY cell -- a real `<th scope="row" data-sticky>`
+       since #779 -- giving every scrolled body row's own sticky cell a
+       HIGHER z-index than the sticky FOOTER's (2), so it painted over the
        footer instead of the footer showing through. Confirmed live on a
-       real bounded-height, 25-row table (GRC's Risk register): scrolled partway, `elementFromPoint` at the footer's own on-screen cell
+       real bounded-height, 25-row table (GRC's Risk register): scrolled
+       partway, `elementFromPoint` at the footer's own on-screen cell
        resolved to a body row's `<th>`, not the footer's `<td>`, and that
        `<th>`'s computed z-index read 3. Scoped to `thead`, a body row's
        own sticky `<th>` now falls back to the base rule above (z-index 1,
-       correct -- the same as a plain sticky `<td>`), and the footer's own explicit z-index below is unaffected either way. */
+       correct -- the same as a plain sticky `<td>`), and the footer's own
+       explicit z-index below is unaffected either way. */
     & thead th[data-sticky] { z-index: 3; }
     /* #554: a footer sticky-column cell sits in the bottom-sticky row (table.recipe.ts's
-       `tfoot td { z-index: 2 }`), which `td[data-sticky]`'s own higher-specificity `z-index: 1` would otherwise undercut -- keep it level with the row it's in. */
+       `tfoot td { z-index: 2 }`), which `td[data-sticky]`'s own higher-specificity
+       `z-index: 1` would otherwise undercut -- keep it level with the row it's in. */
     & tfoot td[data-sticky] { z-index: 2; }
     & tbody tr[data-selected] td[data-sticky] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 10%, var(--crisp-bg-surface)); }
     & tbody tr:hover td[data-sticky] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
@@ -787,7 +908,8 @@
     /* crisp/#758: AI-enriched column marker, ported from RecordsTable's own
        already-measured value -- a full-bleed #9b69ff (bgPurple) wash at 4%,
        composited OVER whatever row-state background the cell already has
-       (hover, selected), which is why it's an ::after overlay and not a plain background. */
+       (hover, selected), which is why it's an ::after overlay and not a
+       plain background. */
     & td[data-enriched]::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: color-mix(in srgb, var(--crisp-bg-purple) 4%, transparent); }
     & .crisp-datatable-edit { width: 100%; height: 28px; margin: 0; padding: 0 var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-sm); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); outline: none; vertical-align: middle; }
     & .crisp-datatable-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
@@ -798,40 +920,56 @@
     & .crisp-datatable-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-datatable-edit-pending { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); color: var(--crisp-fg-muted); vertical-align: middle; }
     /* The rejection's message, beside the cell's own content -- a sibling in
-       the TableCell, never nested inside a column's own render output, so a hover-only wrapper (a Tooltip, say) around a custom render can't hide
+       the TableCell, never nested inside a column's own render output, so a
+       hover-only wrapper (a Tooltip, say) around a custom render can't hide
        it. Block-level: the row grows to fit it rather than floating over
        the row below, so it can never end up clipped by the scroll
-       container's overflow the way a position:fixed escape would need guarding against. */
+       container's overflow the way a position:fixed escape would need
+       guarding against. */
     & .crisp-datatable-edit-error { display: block; padding: var(--crisp-space-0-5) 0 0; font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* editor: "select"/"switch" -- always live, no separate edit mode, so the cell IS the picker: same chromeless-fill treatment as RecordsTable's own --picker cells (measured there already; DataTable
+    /* editor: "select"/"switch" -- always live, no separate edit mode, so
+       the cell IS the picker: same chromeless-fill treatment as
+       RecordsTable's own --picker cells (measured there already; DataTable
        shares RecordsTable's grid, Golden Rule 0). */
     & .crisp-datatable-td--picker { padding: 0; }
     & .crisp-datatable-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
     & .crisp-datatable-edit-picker .crisp-select-trigger { flex: 1; min-width: 0; height: 100%; min-height: 0; border-radius: 0; box-shadow: none; padding: 0; }
     & .crisp-datatable-td--picker .crisp-datatable-edit-error { padding-inline-start: var(--crisp-space-2); }
-    /* reference picker: a leading 16px avatar per option, plus a trailing "Create X" row when the consumer supplies one (#449) -- same measured values as RecordsTable's own .crisp-recordstable-refoption*. */
+    /* reference picker: a leading 16px avatar per option, plus a trailing
+       "Create X" row when the consumer supplies one (#449) -- same measured
+       values as RecordsTable's own .crisp-recordstable-refoption*. */
     & .crisp-datatable-refoption { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-refoption-avatar { flex-shrink: 0; }
     & .crisp-datatable-refoption--create { color: var(--crisp-fg-muted); }
     & .crisp-datatable-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
     /* #826 -- the full-body loading state (a filter/sort re-query, or a
-       fresh page boot), measured live on Attio's Companies grid on both triggers: icon+text centred in the row-body area, 10px gap, 14px/500 weight/20px line-height, both icon and text in the SAME muted rgba(0,0,0,0.63) -- the same color-mix figure this file already uses for other muted text (e.g. -phone-dial). Distinct from the cold in-place row load (blank, no indicator) and the warm-navigation per-cell shimmer (#599) -- neither of those swaps the whole body. */
+       fresh page boot), measured live on Attio's Companies grid on both
+       triggers: icon+text centred in the row-body area, 10px gap, 14px/500
+       weight/20px line-height, both icon and text in the SAME muted
+       rgba(0,0,0,0.63) -- the same color-mix figure this file already uses
+       for other muted text (e.g. -phone-dial). Distinct from the cold
+       in-place row load (blank, no indicator) and the warm-navigation
+       per-cell shimmer (#599) -- neither of those swaps the whole body. */
     & .crisp-datatable-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: var(--crisp-space-8) var(--crisp-space-3); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
     & .crisp-datatable-loading .crisp-spinner { border-top-color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
-    /* #579: click-to-expand overlay for a truncated cell -- a read-only, full-value card, settled live as click (not Attio's usual
-       hover-expand) and measured position: absolute, unlike this file's floating chrome (Menu/Select popovers) which portals and escapes the scroll container. Deliberately NOT the edit-error pattern above (grow the row, block-level, never clipped): a virtualized grid assumes a fixed row height for its scroll math (owned by the grid core, not this cell), so growing a row here would fight it. Anchored to the SAME column width the cell itself renders at (measured: Attio's own overlay came out only slightly wider than the
-       triggering cell's clientWidth -- the overshoot is this padding), wrapping onto as many lines as the value needs; it CAN be clipped by `.crisp-table-scroll`'s own `overflow: auto` if it grows past the
+    /* #579: click-to-expand overlay for a truncated cell -- a read-only,
+       full-value card, settled live as click (not Attio's usual
+       hover-expand) and measured position: absolute, unlike this file's
+       floating chrome (Menu/Select popovers) which portals and escapes the
+       scroll container. Deliberately NOT the edit-error pattern above
+       (grow the row, block-level, never clipped): a virtualized grid
+       assumes a fixed row height for its scroll math (owned by the grid
+       core, not this cell), so growing a row here would fight it. Anchored
+       to the SAME column width the cell itself renders at (measured:
+       Attio's own overlay came out only slightly wider than the
+       triggering cell's clientWidth -- the overshoot is this padding),
+       wrapping onto as many lines as the value needs; it CAN be clipped by
+       `.crisp-table-scroll`'s own `overflow: auto` if it grows past the
        visible viewport, same as the edit-error comment above already
        notes for any position:absolute escape -- unmeasured against Attio
        for this exact case, flagged rather than guessed. */
     & td[data-cell-expanded] { overflow: visible; z-index: 7; }
-    & .crisp-datatable-cell-overlay {
-      position: absolute; inset-inline-start: 0; top: 0; width: 100%; box-sizing: border-box;
-      padding: var(--crisp-space-2) var(--crisp-space-3); background: var(--crisp-bg-surface);
-      border: 1px solid var(--crisp-bg-brand-solid); border-radius: 4px;
-      font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium);
-      color: var(--crisp-fg-primary); white-space: normal; word-break: break-word; cursor: default;
-    }
+    & .crisp-datatable-cell-overlay { position: absolute; inset-inline-start: 0; top: 0; width: 100%; box-sizing: border-box; padding: var(--crisp-space-2) var(--crisp-space-3); background: var(--crisp-bg-surface); border: 1px solid var(--crisp-bg-brand-solid); border-radius: 4px; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); white-space: normal; word-break: break-word; cursor: default; }
     /* fixed layout so column widths (and resize) are exact — like RecordsTable */
     & table { table-layout: fixed; }
     /* read-only/computed column marker (#596) -- sits just inside the
@@ -843,42 +981,70 @@
     & .crisp-datatable-resize { position: absolute; top: 0; inset-inline-end: -3px; width: 9px; height: 100%; cursor: col-resize; z-index: 6; touch-action: none; }
     & .crisp-datatable-resize::after { content: ""; position: absolute; top: 0; inset-inline-start: 3px; width: 2px; height: 100%; background: var(--crisp-bg-brand-solid); opacity: 0; transition: opacity .12s; }
     & .crisp-datatable-resize:hover::after, & .crisp-datatable-resize[data-resizing]::after { opacity: 1; }
-    /* crisp/#731 -- column drag-to-reorder. Measured live against Attio's own grid (the issue's own comment): the dragged header keeps full
+    /* crisp/#731 -- column drag-to-reorder. Measured live against Attio's
+       own grid (the issue's own comment): the dragged header keeps full
        opacity and the plain `pointer` cursor throughout (Attio draws no
        ghost and no "grabbing" cursor of its own), so this adds nothing to
        `[data-dragging]` itself -- the ONLY new paint is the drop-indicator
-       line, a 3px bar in the same measured brand blue the resize handle's own hover state (above) already uses, positioned on whichever edge of the hovered header the pointer is closer to. */
+       line, a 3px bar in the same measured brand blue the resize handle's
+       own hover state (above) already uses, positioned on whichever edge of
+       the hovered header the pointer is closer to. */
     & th[data-dragging] { cursor: pointer; }
     & th[data-drop-before]::before, & th[data-drop-after]::after { content: ""; position: absolute; top: 0; width: 3px; height: 100%; background: var(--crisp-bg-brand-solid); z-index: 6; pointer-events: none; }
     & th[data-drop-before]::before { inset-inline-start: -1.5px; }
     & th[data-drop-after]::after { inset-inline-end: -1.5px; }
     /* typed cells — entity (avatar + name), colour-coded tags, numbers, dates */
     & .crisp-datatable-entity { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; color: var(--crisp-fg-primary); font-weight: var(--crisp-weight-medium); }
-    /* crisp/#601 supersession follow-up -- the same flex-row shape .crisp-datatable-entity gives its own avatar+name+actions, but structural only (no entity-specific colour/weight): lets onOpenComments/onOpenPreview compose alongside ANY column's own
+    /* crisp/#601 supersession follow-up -- the same flex-row shape
+       .crisp-datatable-entity gives its own avatar+name+actions, but
+       structural only (no entity-specific colour/weight): lets
+       onOpenComments/onOpenPreview compose alongside ANY column's own
        content (a custom render, or a non-entity built-in type), not just
        type: "entity"'s own inline rendering. */
     & .crisp-datatable-cell-actions-row { display: flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; width: 100%; }
-    /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text, plain hover vs rest) that Attio's underline is unconditional, not a
+    /* crisp/#601, G-050: measured LIVE (getComputedStyle on the name text,
+       plain hover vs rest) that Attio's underline is unconditional, not a
        hover reveal -- identical at rest and on hover: text-decoration-color
-       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text colour. The previous :hover-gated, full-contrast rule here was itself unmeasured and wrong in two ways at once. */ /* crisp#851 -- Attio's own entity/record names are measured at
-       font-weight 500, distinct from a plain-text primary column's 400 (table.recipe.ts's own `tbody th` default). This was never its own
+       is rgba(0,0,0,0.09), a 9% tint, not the name's own full-contrast text
+       colour. The previous :hover-gated, full-contrast rule here was itself
+       unmeasured and wrong in two ways at once. */ /* crisp#851 -- Attio's own entity/record names are measured at
+       font-weight 500, distinct from a plain-text primary column's 400
+       (table.recipe.ts's own `tbody th` default). This was never its own
        explicit style -- it silently rode on a since-fixed header-rule leak
        (#833/#835/#848) that happened to apply the same 500 to every
        primary-column body cell regardless of type. Made explicit here so
        fixing that leak doesn't also (wrongly) drop entity names to 400. */
     & .crisp-datatable-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--crisp-weight-medium); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--crisp-fg-primary) 9%, transparent); }
-    & button.crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
-    /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary column, revealed on ROW hover (the issue's own title says "row
+    /* #893: shared by the button (onEntityClick, a different record) and
+       the anchor (href, the row's own record) -- was button-only, which
+       silently left a real <a> unstyled the day #893 added one. */
+    & .crisp-datatable-entity-name--link { margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-align: start; cursor: pointer; max-width: 100%; }
+    /* crisp/#601, G-048: two 20px ghost icons, right-aligned in the primary
+       column, revealed on ROW hover (the issue's own title says "row
        hover", and a live check confirmed hovering well past the name --
-       not just the icons' own hit target -- still reveals them) or keyboard focus. Measured live: border-radius 6px, icon colour rgba(0,0,0,0.55) at rest, darkening to the full text colour with a rgba(0,0,0,0.04) background on the icon's OWN hover -- both
+       not just the icons' own hit target -- still reveals them) or
+       keyboard focus. Measured live: border-radius 6px, icon colour
+       rgba(0,0,0,0.55) at rest, darkening to the full text colour with a
+       rgba(0,0,0,0.04) background on the icon's OWN hover -- both
        expressed as color-mix against fgPrimary so they stay correct in
        dark mode instead of a literal black that would invert. */
     & .crisp-datatable-entity-actions { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
     & tr:hover .crisp-datatable-entity-actions, & .crisp-datatable-entity-actions:focus-within { opacity: 1; }
     & .crisp-datatable-entity-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; flex-shrink: 0; }
     & .crisp-datatable-entity-action:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
-    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: var(--crisp-radius-sm); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
-    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); } & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); } & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); } & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); } & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); } & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
+    /* #892: the default shape's radius was a stray literal (radius.sm, 6px)
+       -- Attio's own real company/object avatar measures 30%, which is
+       Avatar's own already-shipped shape="rounded" value, not a new number.
+       shape="circle" reuses Avatar's own shape="circle" value (radius.full)
+       the same way, measured live on a real Attio person avatar. */
+    & .crisp-datatable-avatar { width: var(--crisp-size-icon); height: var(--crisp-size-icon); border-radius: 30%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; line-height: 1; font-weight: var(--crisp-weight-semibold); text-transform: uppercase; color: var(--crisp-fg-on-brand); background: var(--crisp-bg-brand-solid); }
+    & .crisp-datatable-avatar[data-shape="circle"] { border-radius: var(--crisp-radius-full); }
+    & .crisp-datatable-avatar[data-tone="success"] { background: var(--crisp-bg-success); }
+    & .crisp-datatable-avatar[data-tone="warning"] { background: var(--crisp-bg-warning); }
+    & .crisp-datatable-avatar[data-tone="danger"] { background: var(--crisp-bg-danger); }
+    & .crisp-datatable-avatar[data-tone="purple"] { background: var(--crisp-bg-purple); }
+    & .crisp-datatable-avatar[data-tone="cyan"] { background: var(--crisp-bg-cyan); }
+    & .crisp-datatable-avatar[data-tone="orange"] { background: var(--crisp-bg-orange); }
     & .crisp-datatable-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
     & .crisp-datatable-tags { display: flex; align-items: center; gap: var(--crisp-space-1); overflow: hidden; }
     & .crisp-datatable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
@@ -891,13 +1057,19 @@
     & .crisp-datatable-tag[data-tone="orange"] { background: color-mix(in srgb, var(--crisp-bg-orange) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-orange) 82%, var(--crisp-fg-primary)); }
     & .crisp-datatable-num { font-variant-numeric: tabular-nums; }
     & .crisp-datatable-muted { color: var(--crisp-fg-muted); }
-    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as TasksTable's own overdue due-date (crisp#462), plain text colour, no
+    /* crisp#822 -- a date/datetime cell's danger/overdue tone: same token as
+       TasksTable's own overdue due-date (crisp#462), plain text colour, no
        fill/weight change. */
     & .crisp-datatable-danger { color: var(--crisp-fg-danger); }
-    /* url/email cell types (#654) -- same measured values as RecordsTable's own .crisp-recordstable-link, which this mirrors: no underline at rest, underline on hover, own-colour text rather than a browser-blue link. */
+    /* url/email cell types (#654) -- same measured values as RecordsTable's
+       own .crisp-recordstable-link, which this mirrors: no underline at
+       rest, underline on hover, own-colour text rather than a browser-blue
+       link. */
     & .crisp-datatable-link { color: var(--crisp-fg-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-link:hover { text-decoration: underline; }
-    /* phone cell type/editor (#765) -- measured live: the dial-code prefix is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text value already measured elsewhere in this file. */
+    /* phone cell type/editor (#765) -- measured live: the dial-code prefix
+       is a muted rgba(0,0,0,0.63) at 14px, matching every other muted-text
+       value already measured elsewhere in this file. */
     & .crisp-datatable-phone { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
     & .crisp-datatable-phone-dial { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-datatable-phone-editor { display: flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); }
@@ -927,7 +1099,8 @@
        value rows (32px = size.menuRow, 5px 8px padding, 8px gap between
        the grip/value/actions, 16px icons) above one ALWAYS-blank trailing
        DataPhoneEditor-shaped row -- that blank row is the only "add
-       another" affordance, there's no separate button for it. The copy/delete pair reuses .crisp-datatable-entity-action's own
+       another" affordance, there's no separate button for it. The
+       copy/delete pair reuses .crisp-datatable-entity-action's own
        hover-reveal chrome (not independently re-measured as its own hit
        target this pass, only the 16px icon glyphs were). */
     & .crisp-datatable-phone-multi-editor { display: flex; flex-direction: column; }
@@ -935,8 +1108,7 @@
     & .crisp-datatable-phone-multi-row .crisp-datatable-phone-link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-datatable-phone-multi-grip { color: var(--crisp-fg-muted); flex-shrink: 0; cursor: grab; }
     & .crisp-datatable-phone-multi-actions { display: flex; align-items: center; gap: var(--crisp-space-1); margin-inline-start: auto; flex-shrink: 0; opacity: 0; }
-    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions,
-    & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
+    & .crisp-datatable-phone-multi-row:hover .crisp-datatable-phone-multi-actions, & .crisp-datatable-phone-multi-actions:focus-within { opacity: 1; }
     & .crisp-datatable-phone-multi-action { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; flex-shrink: 0; }
     & .crisp-datatable-phone-multi-action:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
     /* datetime cell editor (#762) -- DatePickerField + TimePicker side by side. */
@@ -945,7 +1117,10 @@
        18px pitch (a 2px gap), an empty star at rgba(0,0,0,0.1), a
        committed/filled star at brand600 (--crisp-bg-brand-solid, an exact
        match to the measured #266df0), and a distinct hover-preview colour
-       -- rgb(33,91,196) -- that's close to but NOT brand700/bgBrandSolidPressed (#1f5fd6); kept as its own literal rather than forced onto that token, since the two were measured stable and different. The read-only svg and the editable button's own inner svg both carry the
+       -- rgb(33,91,196) -- that's close to but NOT brand700/bgBrandSolidPressed
+       (#1f5fd6); kept as its own literal rather than forced onto that token,
+       since the two were measured stable and different. The read-only svg
+       and the editable button's own inner svg both carry the
        crisp-datatable-rating-star class on the svg itself (not the
        button), so one set of fill rules covers both -- the button only
        adds its own reset + cursor via a separate -btn class. */
@@ -956,9 +1131,13 @@
     & .crisp-datatable-rating-star[data-hovering] path { fill: #215bc4; }
     & .crisp-datatable-rating-star-btn { display: inline-flex; padding: 0; margin: 0; border: none; background: none; font-family: inherit; cursor: pointer; }
     /* row drag-to-reorder -- a Settings > Objects > Attributes screen measures
-       a leading 20px grip column, a 16px grip icon, and the row's own hairline doubling as the drop indicator (it tints toward the brand colour as the active drop target). The affordance + geometry are measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
+       a leading 20px grip column, a 16px grip icon, and the row's own
+       hairline doubling as the drop indicator (it tints toward the brand
+       colour as the active drop target). The affordance + geometry are
+       measured; the drag MECHANISM is crisp's existing house idiom -- HTML5
        draggable + dataTransfer, the same one column reorder already uses
-       (RecordsTable's reorderColumn) -- not a proprietary pointer-events implementation. */
+       (RecordsTable's reorderColumn) -- not a proprietary
+       pointer-events implementation. */
     & .crisp-datatable-col-grip { width: 20px; padding: 0; text-align: center; }
     & .crisp-datatable-grip { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; border: none; border-radius: 0; background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: grab; }
     & .crisp-datatable-grip:active { cursor: grabbing; }
@@ -992,36 +1171,22 @@
        measurement -- accessibility wins over the seed reference.
        neutralMuted clears it, 6.62:1 light / 14.71:1 dark (dark was
        already fine at 9.43:1). */
-    & .crisp-datepicker-weekday {
-      display: flex; align-items: center; justify-content: center;
-      height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted);
-      font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium);
-    }
-
+    & .crisp-datepicker-weekday { display: flex; align-items: center; justify-content: center; height: var(--crisp-size-calendarCell); color: var(--crisp-fg-neutral-muted); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); }
     & .crisp-datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .crisp-datepicker-months[data-wheel-open] { visibility: hidden; }
     & .crisp-datepicker-month { min-width: 0; }
-    & .crisp-datepicker-month-label {
-      display: flex; align-items: center; height: 24px;
-      color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px;
-      font-weight: var(--crisp-weight-medium);
-    }
-
+    & .crisp-datepicker-month-label { display: flex; align-items: center; height: 24px; color: var(--crisp-fg-primary); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); }
     & .crisp-datepicker-grid { display: grid; min-width: 0; }
     & .crisp-datepicker-week-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
-
-    & .crisp-datepicker-cell {
-      position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell);
-      isolation: isolate;
-    }
+    & .crisp-datepicker-cell { position: relative; min-width: 0; min-height: var(--crisp-size-calendarCell); isolation: isolate; }
     & .crisp-datepicker-empty-cell { min-height: var(--crisp-size-calendarCell); }
-
     /* The bridge joining days inside a completed range.
        The endpoints do NOT carry data-in-range -- only the interior days do --
        so these are three independent rules, not a base plus two modifiers. A
        modifier that sets only inset-inline-start never generates a pseudo
        element on an endpoint, which leaves a half-cell of white between the
-       endpoint's pill and the run of grey beside it. Each rule declares its own content. */
+       endpoint's pill and the run of grey beside it. Each rule declares its
+       own content. */
     & .crisp-datepicker-cell[data-range-complete][data-in-range]::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-cell[data-range-complete][data-range-start]:not([data-range-end])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 50%; inset-inline-end: 0; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
     & .crisp-datepicker-cell[data-range-complete][data-range-end]:not([data-range-start])::before { content: ""; position: absolute; z-index: -1; inset-inline-start: 0; inset-inline-end: 50%; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); height: var(--crisp-size-calendarPill); background: var(--crisp-bg-neutral-weak); }
@@ -1037,33 +1202,19 @@
     & .crisp-datepicker-date:disabled { color: var(--crisp-fg-disabled); cursor: not-allowed; }
     & .crisp-datepicker-date:focus-visible::after { content: ""; position: absolute; top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); left: 50%; width: var(--crisp-size-calendarPill); height: var(--crisp-size-calendarPill); transform: translateX(-50%); border-radius: var(--crisp-radius-md); outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
     & .crisp-datepicker-date-content { position: relative; z-index: 1; display: flex; width: 100%; min-height: var(--crisp-size-calendarCell); min-width: 0; box-sizing: border-box; flex-direction: column; align-items: center; gap: 3px; padding-top: calc((var(--crisp-size-calendarCell) - var(--crisp-size-calendarPill)) / 2); color: inherit; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); font-variant-numeric: tabular-nums; }
-    /* The numeral is its own 42px flex box so it centres on the 42px pill. Without this the content column top-aligns the glyph and the pill reads as offset — the cell is 48px, the pill 42px inset 3px, and only a 42px-tall numeral box shares the pill's centre line. */
-    & .crisp-datepicker-date-content > [data-date-picker-day] {
-      display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0;
-      align-items: center; justify-content: center;
-    }
-
+    /* The numeral is its own 42px flex box so it centres on the 42px pill.
+       Without this the content column top-aligns the glyph and the pill reads
+       as offset — the cell is 48px, the pill 42px inset 3px, and only a
+       42px-tall numeral box shares the pill's centre line. */
+    & .crisp-datepicker-date-content > [data-date-picker-day] { display: flex; min-height: var(--crisp-size-calendarPill); flex-shrink: 0; align-items: center; justify-content: center; }
     /* the year/month wheel, laid over the grid it replaces */
-    & .crisp-datepicker-wheel-container {
-      position: absolute; z-index: 1; inset-inline: 0;
-      top: var(--crisp-size-menuRow); bottom: 0;
-      display: flex; align-items: center; overflow: hidden;
-      background: var(--crisp-bg-surface);
-    }
+    & .crisp-datepicker-wheel-container { position: absolute; z-index: 1; inset-inline: 0; top: var(--crisp-size-menuRow); bottom: 0; display: flex; align-items: center; overflow: hidden; background: var(--crisp-bg-surface); }
     & .crisp-datepicker-wheel { width: 100%; }
-
-    & .crisp-datepicker-continuous-scroll {
-      height: 100%; min-height: 0; overflow-y: auto;
-      overscroll-behavior: contain; scrollbar-width: none;
-    }
+    & .crisp-datepicker-continuous-scroll { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
     & .crisp-datepicker-continuous-scroll::-webkit-scrollbar { display: none; }
     & .crisp-datepicker-continuous-content { display: flex; flex-direction: column; }
-
     /* announced, never drawn */
-    & .crisp-datepicker-live-region {
-      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-    }
+    & .crisp-datepicker-live-region { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 }
 .crisp-datepicker--visibleRange_month {
   
@@ -1097,7 +1248,10 @@
     & .crisp-datepickerfield-box[data-placeholder] .crisp-datepickerfield-trigger { color: var(--crisp-fg-muted); }
     & .crisp-datepickerfield-trigger svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     /* Reuses TableToolbar's measured filter-chip remove button
-       (tabletoolbar.chrome.ts's .crisp-tabletoolbar-fchip-x) -- the same small inline "clear this value" affordance, not a freshly-measured one: no live Attio composition for a DatePickerField-equivalent clear was reachable this round (#394). */
+       (tabletoolbar.chrome.ts's .crisp-tabletoolbar-fchip-x) -- the same
+       small inline "clear this value" affordance, not a freshly-measured
+       one: no live Attio composition for a DatePickerField-equivalent
+       clear was reachable this round (#394). */
     & .crisp-datepickerfield-clear { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-inline-end: var(--crisp-space-1); padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-datepickerfield-clear:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-datepickerfield-panel { padding: var(--crisp-space-2); width: 300px; }
@@ -1111,10 +1265,8 @@
     & .crisp-dialog-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--crisp-bg-scrim); }
     & .crisp-dialog-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-start; justify-content: center; padding: 15vh var(--crisp-space-4) var(--crisp-space-4); }
     & .crisp-dialog-positioner[data-variant="alert"] { align-items: center; padding: var(--crisp-space-4); }
-    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-2xl); background: color-mix(in srgb, var(--crisp-bg-overlay-frost) 60%, transparent); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 8px 28px -6px var(--crisp-shadow-overlay1), 0 18px 88px -4px var(--crisp-shadow-overlay2), 0 0 1px var(--crisp-shadow-overlay3); opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
-    & .crisp-dialog-content[data-variant="alert"] { padding: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
-    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
-    & .crisp-dialog-content[data-variant="alert"] .crisp-dialog-card { border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); }
+    & .crisp-dialog-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; display: flex; flex-direction: column; box-sizing: border-box; width: 90vw; max-height: 74vh; opacity: 1; transform: scale(1); transition: opacity 0.2s ease, transform 0.2s ease; @starting-style { opacity: 0; transform: scale(0.97); } }
+    & .crisp-dialog-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-3xl); background: var(--crisp-bg-surface); overflow: hidden; }
     & .crisp-dialog-header { display: flex; align-items: center; gap: var(--crisp-space-2); flex-shrink: 0; height: 52px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-dialog-header svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-dialog-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); margin: 0; }
@@ -1123,8 +1275,10 @@
     /* The discard-confirm's own stacked title + sentence (crisp#677) — no
        border, no close button, unlike the panel header above: measured
        live, both themes, 18px/24px 600-weight title (no scale token
-       reaches 18px — the scale tops out at text.xl's 16px, so this is raw px per Golden Rule 3's "genuinely intrinsic size" exception, same as
-       this file's own submit-key glyphs) then a 14px/20px 500-weight sentence 4px below it. */
+       reaches 18px — the scale tops out at text.xl's 16px, so this is raw
+       px per Golden Rule 3's "genuinely intrinsic size" exception, same as
+       this file's own submit-key glyphs) then a 14px/20px 500-weight
+       sentence 4px below it. */
     & .crisp-dialog-alert-header { display: flex; flex-direction: column; gap: var(--crisp-space-1); padding: var(--crisp-space-4) var(--crisp-space-4) 0; }
     & .crisp-dialog-alert-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-dialog-alert-description { margin: 0; font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-alert-description); }
@@ -1134,7 +1288,12 @@
     & .crisp-dialog-field { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }
     & .crisp-dialog-field-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
     & .crisp-dialog-more { display: inline-flex; align-items: center; gap: var(--crisp-space-2); margin-inline-end: auto; border: none; background: none; padding: 0; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); cursor: pointer; }
-    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 28px; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker
+       sibling clears 4.5:1+, same fix already applied to Button/Badge/
+       Avatar (#897). Scoped to this one fill only -- Dialog's own frosted-
+       surface identity (#934) is untouched here. */
+    & .crisp-dialog-submit { display: inline-flex; align-items: center; gap: var(--crisp-space-2); height: 28px; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-dialog-submit-key { display: inline-flex; align-items: center; gap: var(--crisp-space-1); }
     & .crisp-dialog-submit-key kbd { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0 3px; border-radius: 4px; background: transparent; color: var(--crisp-fg-on-brand); font-family: inherit; font-style: normal; font-size: 10px; }
 }
@@ -1208,7 +1367,9 @@
     & .crisp-emptystate-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--crisp-space-1); border-radius: var(--crisp-radius-xl); background: color-mix(in srgb, var(--crisp-fg-primary) 5%, transparent); color: var(--crisp-fg-muted); }
     & .crisp-emptystate-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
     & .crisp-emptystate-desc { max-width: 320px; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    /* #603: measured 8px gap between "Import CSV"/"Connect data source" -- inline-flex so one action (the common case) or several lay out the same way, wrapping if the container is narrow. */
+    /* #603: measured 8px gap between "Import CSV"/"Connect data source" --
+       inline-flex so one action (the common case) or several lay out the
+       same way, wrapping if the container is narrow. */
     & .crisp-emptystate-action { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--crisp-space-2); margin-top: var(--crisp-space-2); }
     /* #603: Attio's zero-records "Learn more" card -- a label above a
        clickable icon+title tile. Left/start-aligned, unlike the rest of
@@ -1228,13 +1389,13 @@
 .crisp-emptystate--variant_page {
   gap: var(--crisp-space-2);
     & .crisp-emptystate-icon { width: 45px; height: 45px; margin-bottom: var(--crisp-space-2); border-radius: var(--crisp-radius-full); border: 1px solid var(--crisp-border-subtle); background: none; color: var(--crisp-fg-muted); }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: var(--crisp-tracking-20); }
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
     & .crisp-emptystate-action { margin-top: var(--crisp-space-2); }
 }
 .crisp-emptystate--variant_records {
   & .crisp-emptystate-icon { width: 138px; height: 138px; margin-bottom: var(--crisp-space-2); border-radius: 0; color: color-mix(in srgb, var(--crisp-fg-primary) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--crisp-fg-primary) 12%, transparent) 1.2px, transparent 1.2px) 0 0 / 16px 16px; }
-    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; }
+    & .crisp-emptystate-title { font-size: 20px; line-height: 24px; letter-spacing: var(--crisp-tracking-20); }
     & .crisp-emptystate-desc { max-width: 266px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); line-height: 20px; }
 }
 
@@ -1265,7 +1426,9 @@
     & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
     & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
-    /* out of flow while empty, so the always-mounted live region costs no layout: display:none would take it out of the accessibility tree, which is the one thing it exists to be in */
+    /* out of flow while empty, so the always-mounted live region costs no
+       layout: display:none would take it out of the accessibility tree, which
+       is the one thing it exists to be in */
     & .crisp-fileupload-errors:empty { position: absolute; }
     & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
 }
@@ -1378,13 +1541,22 @@
 }
 
 .crisp-input {
-  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
+  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); border: 1px solid var(--crisp-border-default); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
     &:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
     & .crisp-input-value { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; align-self: stretch; margin: 0; border: none; background: none; outline: none; font: inherit; color: var(--crisp-fg-primary); }
     & .crisp-input-value::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-input-value:disabled { opacity: 0.5; cursor: not-allowed; }
     &:has(.crisp-input-value:disabled) { opacity: 1; }
+    /* crisp#634: measured live on Attio's own Settings > Profile read-only
+       primary-email field -- a tinted field, not just muted text, driven off
+       the native `readOnly` attribute. `ringField` (rgba(0,0,0,.06)) is an
+       exact match for the measured ring; the 2%-fgPrimary tint reuses the
+       same color-mix idiom every other soft crisp surface already uses.
+       `border-color: transparent` neutralises #910's new real rest border
+       so this measured ring isn't drawn twice. */
+    &[data-readonly] { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); border-color: transparent; box-shadow: inset 0 0 0 1px var(--crisp-ring-field); }
+    & .crisp-input-suffix { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); }
 }
 .crisp-input--size_sm {
   height: var(--crisp-size-row); border-radius: var(--crisp-radius-md);
@@ -1395,7 +1567,7 @@
     & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
 }
 .crisp-input--size_large {
-  height: 36px; border-radius: 10px;
+  height: 36px; border-radius: var(--crisp-radius-xl);
     & .crisp-input-value { padding-inline: var(--crisp-space-3); }
 }
 .crisp-input--invalid_true {
@@ -1448,8 +1620,8 @@
       font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       position: fixed; z-index: 70; pointer-events: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: var(--crisp-space-px);
       min-width: 200px; max-height: 360px; overflow-y: auto; padding: var(--crisp-space-1);
-      border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-popover);
-      box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3);
+      border-radius: var(--crisp-radius-3xl); background: var(--crisp-bg-popover);
+      box-shadow: 0 4px 16px var(--crisp-shadow-select);
       transform-origin: top left; opacity: 1; transform: none; transition: opacity .08s ease, transform .08s ease;
     }
     .crisp-menu-content[data-align="end"] { transform-origin: top right; }
@@ -1497,6 +1669,43 @@
   }
 }
 
+.crisp-menusheet {
+  display: contents; font-family: var(--crisp-font-sans);
+    & .crisp-menusheet-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--crisp-bg-overlay-strong); /* menu-sheet.yaml:95 backdrop.color = $color.bg.overlay */ opacity: 1; transition: opacity 100ms cubic-bezier(0,0,.15,1); /* menu-sheet.yaml:96-98 enterDuration/enterTimingFunction = $duration.d2/$timing-function.enter */ @starting-style { opacity: 0; } }
+    & .crisp-menusheet-positioner { position: fixed; inset: 0; z-index: 61; display: flex; align-items: flex-end; justify-content: center; }
+    & .crisp-menusheet-content { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; width: 100%; max-width: 480px; /* menu-sheet.yaml:104 content.maxWidth */ max-height: 85vh; background: var(--crisp-bg-surface); /* menu-sheet.yaml:103 content.color = $color.bg.layer-floating */ padding: var(--crisp-space-6) var(--crisp-space-4) var(--crisp-space-4); /* menu-sheet.yaml:105-107 content.paddingX/paddingTop/paddingBottom = global-gutter/x6/x4 (16px/24px/16px) */ border-radius: var(--crisp-radius-3xl) var(--crisp-radius-3xl) 0 0; /* menu-sheet.yaml:108 content.topCornerRadius = $radius.r5 (20px) */ transform: translateY(0); transition: transform 300ms cubic-bezier(.03,.4,.1,1); /* menu-sheet.yaml:109-110 content.enterDuration/enterTimingFunction (enter-expressive) */ @starting-style { transform: translateY(100%); } }
+    & .crisp-menusheet-header { display: flex; flex-direction: column; gap: var(--crisp-space-1); /* menu-sheet.yaml:115 header.gap = $dimension.x1 (4px) */ padding-bottom: var(--crisp-space-4); /* menu-sheet.yaml:116 header.paddingBottom = $dimension.x4 (16px) */ flex-shrink: 0; }
+    & .crisp-menusheet-title { color: var(--crisp-fg-primary); /* menu-sheet.yaml:121 title.color = $color.fg.neutral */ font-size: 18px; line-height: 24px; font-weight: var(--crisp-weight-bold); /* menu-sheet.yaml:118-120 title.fontSize/lineHeight/fontWeight = $font-size.t6/$line-height.t6/bold */ }
+    & .crisp-menusheet-description { color: var(--crisp-fg-muted); /* menu-sheet.yaml:126 description.color = $color.fg.neutral-muted */ font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-regular); /* menu-sheet.yaml:123-125 description.fontSize/lineHeight/fontWeight = $font-size.t4/$line-height.t4/regular */ }
+    & .crisp-menusheet-list { display: flex; flex-direction: column; gap: var(--crisp-space-2-5); /* menu-sheet.yaml:129 list.gap = $dimension.x2_5 (10px) */ overflow-y: auto; min-height: 0; }
+    & .crisp-menusheet-group { display: flex; flex-direction: column; border-radius: var(--crisp-radius-2xl); overflow: hidden; /* menu-sheet.yaml:131 group.cornerRadius = $radius.r4 (16px) */ }
+    & .crisp-menusheet-group > * + * { border-top: 1px solid var(--crisp-stroke-group-divider); }
+    /* menu-sheet.yaml:132-134 divider.strokeBottomWidth/strokeColor = 1px/$color.stroke.neutral-muted */
+    & .crisp-menusheet-footer { flex-shrink: 0; padding-top: var(--crisp-space-2-5); /* menu-sheet.yaml:136 footer.paddingTop = $dimension.x2_5 (10px) */ }
+    & .crisp-menusheet-item { position: relative; box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 52px; /* menu-sheet-item.yaml:72 root.minHeight */ padding: var(--crisp-space-3-5) var(--crisp-space-4); gap: var(--crisp-space-3-5); /* menu-sheet-item.yaml:73-75 root.paddingX/paddingY/gap = x4/x3_5/x3_5 (16px/14px/14px) */ border: none; margin: 0; cursor: pointer; text-align: start; background: var(--crisp-bg-neutral-weak); /* menu-sheet-item.yaml:71 root.color = $color.bg.neutral-weak */ font-family: inherit; }
+    & .crisp-menusheet-item:hover, & .crisp-menusheet-item:active { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, var(--crisp-bg-neutral-weak)); }
+    /* menu-sheet-item.yaml:90-91 pressed.root.color = $color.bg.neutral-weak-pressed, approximated as a tint over the base fill */
+    & .crisp-menusheet-item:active .crisp-menusheet-item-content { transform: scale(0.98); }
+    /* menu-sheet-item.yaml:92 pressed.root.scaleScope = content */
+    & .crisp-menusheet-item-icon { flex-shrink: 0; display: inline-flex; width: 22px; height: 22px; }
+    /* menu-sheet-item.yaml:77 prefixIcon.size */
+    & .crisp-menusheet-item-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--crisp-space-0-5); /* menu-sheet-item.yaml:79 content.gap = $dimension.x0_5 (2px) */ transition: transform 150ms cubic-bezier(0,0,.15,1); }
+    & .crisp-menusheet-item-label { font-size: var(--crisp-text-xl); line-height: 22px; font-weight: var(--crisp-weight-regular); /* menu-sheet-item.yaml:81-83 label.fontSize/lineHeight/fontWeight = $font-size.t5/$line-height.t5/regular */ }
+    & .crisp-menusheet-item-description { color: var(--crisp-fg-neutral-subtle); /* menu-sheet-item.yaml:88 description.color = $color.fg.neutral-subtle */ font-size: var(--crisp-text-md); line-height: 18px; font-weight: var(--crisp-weight-medium); /* menu-sheet-item.yaml:85-87 description.fontSize/lineHeight/fontWeight = $font-size.t3/$line-height.t3/medium */ }
+    & .crisp-menusheet-item[data-tone="neutral"] .crisp-menusheet-item-icon, & .crisp-menusheet-item[data-tone="neutral"] .crisp-menusheet-item-label { color: var(--crisp-fg-primary); }
+    /* menu-sheet-item.yaml:93-98 tone=neutral */
+    & .crisp-menusheet-item[data-tone="critical"] .crisp-menusheet-item-icon, & .crisp-menusheet-item[data-tone="critical"] .crisp-menusheet-item-label { color: var(--crisp-fg-danger); }
+    /* menu-sheet-item.yaml:99-104 tone=critical */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-menusheet, .crisp-menusheet * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 
     /* pointer-events: auto (#375) -- see Select's matching comment. */
     .crisp-multiselect-listbox {
@@ -1510,13 +1719,19 @@
     }
     .crisp-multiselect-listbox[data-up] { transform-origin: bottom left; }
     .crisp-multiselect-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
-    /* LOCKED geometry (#481, guarded by build/spec-check.mjs): height 36px,
-       gap space["1.5"] (6px), no border-bottom -- an Attio measurement, not
-       part of this seed-parity pass. Only colours below follow Select. */
-    .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); height: 36px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-2)) calc(-1 * var(--crisp-space-2)) var(--crisp-space-2); padding: var(--crisp-space-2) var(--crisp-space-3); color: var(--crisp-fg-neutral-muted); }
+    /* Seed geometry (build/spec-check.mjs guards these four properties
+       directly), superseding #481's old Attio lock -- see this file's
+       header comment and Select's matching .crisp-select-search comment
+       for the full citation. An ordinary flex child of the listbox, so its
+       own 8px gap provides the inset/seam on every side, same as Select. */
+    .crisp-multiselect-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-selectTriggerMd); flex-shrink: 0; padding: 0 var(--crisp-space-3-5); border: 1px solid var(--crisp-stroke-select-trigger); border-radius: var(--crisp-radius-md); color: var(--crisp-fg-neutral-muted); }
     .crisp-multiselect-search svg { flex-shrink: 0; }
-    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-select-neutral); }
+    .crisp-multiselect-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; color: var(--crisp-fg-select-neutral); }
     .crisp-multiselect-search input::placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* Same header/body seam as Select's own .crisp-select-divider -- see
+       that recipe's comment for the seed source (select.yaml's divider
+       slot, stroke.neutral-muted). */
+    .crisp-multiselect-divider { flex-shrink: 0; height: 1px; margin-inline: var(--crisp-space-4); background: var(--crisp-stroke-select-divider); }
     /* Same groupLabel treatment as Select's (13px/regular/neutral-subtle). */
     .crisp-multiselect-label { padding: var(--crisp-space-2) var(--crisp-space-4) 0; font-size: var(--crisp-text-md); line-height: 18px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-neutral-subtle); }
     .crisp-multiselect-option {
@@ -1556,10 +1771,15 @@
     & .crisp-multiselect-trigger[aria-readonly="true"] { background: var(--crisp-bg-select-disabled); cursor: default; }
     & .crisp-multiselect-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); }
     & .crisp-multiselect-placeholder { color: var(--crisp-fg-select-placeholder); }
-    /* closeRotateDuration/openRotateDuration, same asymmetric timing as Select's own chevron (see that recipe's comment). */
+    /* closeRotateDuration/openRotateDuration, same asymmetric timing as
+       Select's own chevron (see that recipe's comment). */
     & .crisp-multiselect-chevron { flex-shrink: 0; color: var(--crisp-fg-neutral-muted); transition: transform .1s cubic-bezier(.35,0,.35,1); }
     & .crisp-multiselect-trigger[data-open] .crisp-multiselect-chevron { transform: rotate(180deg); transition-duration: .15s; }
 }
+.crisp-multiselect--size_small {
+  & .crisp-multiselect-trigger { min-height: var(--crisp-size-menuRow); border-radius: var(--crisp-radius-md); gap: var(--crisp-space-1); padding: var(--crisp-space-0-5) var(--crisp-space-1-5) var(--crisp-space-0-5) var(--crisp-space-2); }
+    & .crisp-multiselect-chevron { width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+}
 .crisp-multiselect--size_medium {
   & .crisp-multiselect-trigger { min-height: var(--crisp-size-selectTriggerMd); border-radius: var(--crisp-radius-md); gap: var(--crisp-space-2); padding: var(--crisp-space-1) var(--crisp-space-3-5); }
     & .crisp-multiselect-chevron { width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
@@ -1618,6 +1838,9 @@
     &[data-segmented] { display: flex; gap: var(--crisp-space-1); background: transparent; overflow: visible; }
     &[data-segmented] .crisp-progress-seg { flex: 1; height: 100%; border-radius: var(--crisp-radius-full); background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); transition: background 0.2s; }
     &[data-segmented] .crisp-progress-seg[data-filled] { background: var(--crisp-bg-brand-solid); }
+    &[data-variant="circular"] { display: inline-flex; height: auto; border-radius: 0; background: transparent; overflow: visible; }
+    & .crisp-progress-circle-track { stroke: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); }
+    & .crisp-progress-circle-fill { stroke: var(--crisp-bg-brand-solid); transition: stroke-dashoffset 0.25s ease; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -1709,13 +1932,15 @@
     & .crisp-resizablepanel-panel[data-floating="false"] { border-radius: 0; box-shadow: none; }
     & .crisp-resizablepanel-panel[data-floating="false"][data-side="left"] { border-inline-end: 1px solid var(--crisp-border-subtle); }
     & .crisp-resizablepanel-panel[data-floating="false"][data-side="right"] { border-inline-start: 1px solid var(--crisp-border-subtle); }
-    /* floating — position: fixed, 8px gutter, r10, the measured floating elevation. Rest is transform: none (Lesson 27); the off-canvas value is the @starting-style enter only. */
+    /* floating — position: fixed, 8px gutter, r10, the measured floating elevation.
+       Rest is transform: none (Lesson 27); the off-canvas value is the @starting-style enter only. */
     & .crisp-resizablepanel-panel[data-floating="true"] { position: fixed; top: var(--crisp-space-2); bottom: var(--crisp-space-2); border-inline-end: none; border-inline-start: none; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: none; transition: transform 0.14s, padding 0.14s; }
     & .crisp-resizablepanel-panel[data-floating="true"][data-side="left"] { padding: var(--crisp-space-2) 0 var(--crisp-space-2) var(--crisp-space-2); @starting-style { transform: translateX(calc(-100% - var(--crisp-space-2))); } }
     & .crisp-resizablepanel-panel[data-floating="true"][data-side="right"] { padding: var(--crisp-space-2) var(--crisp-space-2) var(--crisp-space-2) 0; @starting-style { transform: translateX(calc(100% + var(--crisp-space-2))); } }
     & .crisp-resizablepanel-inner { height: 100%; opacity: 1; }
     & .crisp-resizablepanel-panel[data-floating="true"] .crisp-resizablepanel-inner { opacity: 1; transition: opacity 0.14s; @starting-style { opacity: 0; } }
-    /* handle — variant "panel" (default): a 10px hit target, its ::before the only visible divider (1px rest -> 2px on hover/drag, brand-solid). */
+    /* handle — variant "panel" (default): a 10px hit target, its ::before the
+       only visible divider (1px rest -> 2px on hover/drag, brand-solid). */
     & .crisp-resizablepanel-handle { position: absolute; top: 0; width: 10px; height: 100%; z-index: 2; cursor: col-resize; background: transparent; touch-action: none; }
     & .crisp-resizablepanel-handle[data-side="left"] { right: 0; }
     & .crisp-resizablepanel-handle[data-side="right"] { left: 0; }
@@ -1723,9 +1948,10 @@
     & .crisp-resizablepanel-handle[data-side="left"]::before { right: 0; }
     & .crisp-resizablepanel-handle[data-side="right"]::before { left: 0; }
     & .crisp-resizablepanel-handle:hover::before, & .crisp-resizablepanel-handle[data-dragging="true"]::before { width: 2px; background: var(--crisp-bg-brand-solid); }
-    /* handle — variant "column": a wider 7px hit target straddling a 1px divider (table column edges), with a real 3px inner bar whose opacity comes in on a 100ms DELAY — distinct from the panel variant's instant
-       ::before swap. */
-    /* .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column (both classes) to
+    /* handle — variant "column": a wider 7px hit target straddling a 1px
+       divider (table column edges), with a real 3px inner bar whose opacity
+       comes in on a 100ms DELAY — distinct from the panel variant's instant
+       ::before swap. */ /* .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column (both classes) to
        out-specificity the base [data-side] left/right rules above, which
        otherwise tie-break by source order alone and would win. */
     & .crisp-resizablepanel-handle.crisp-resizablepanel-handle--column { display: flex; align-items: center; justify-content: center; width: 7px; left: -3px; right: -3px; z-index: 1; cursor: col-resize; }
@@ -1776,10 +2002,34 @@
     }
     .crisp-select-listbox[data-up] { transform-origin: bottom left; }
     .crisp-select-listbox { @starting-style { opacity: 0; transform: scale(0.95); } }
-    .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 34px; flex-shrink: 0; margin: calc(-1 * var(--crisp-space-2)) calc(-1 * var(--crisp-space-2)) var(--crisp-space-2); padding: 0 var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-neutral-muted); }
+    /* Composed from @seed-design/rootage's text-input.yaml
+       (variant=outline,size=medium) -- seed's Select has no search field of
+       its own to resolve this from (see the file header), so this reuses
+       the SAME tokens #867 already resolved for the trigger at this size:
+       minHeight x10 (var(--crisp-size-selectTriggerMd)), paddingX x3_5
+       (var(--crisp-space-3-5)), gap x2 (var(--crisp-space-2)), cornerRadius r2
+       (var(--crisp-radius-md)), strokeColor stroke.neutral-weak
+       (var(--crisp-stroke-select-trigger)) -- a real bordered field sitting flush
+       inside the listbox's own 8px padding, replacing the old bare
+       34px/no-border/bleeds-to-the-edge strip (crisp/#904). */
+    .crisp-select-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: var(--crisp-size-selectTriggerMd); flex-shrink: 0; padding: 0 var(--crisp-space-3-5); border: 1px solid var(--crisp-stroke-select-trigger); border-radius: var(--crisp-radius-md); color: var(--crisp-fg-neutral-muted); }
     .crisp-select-search svg { flex-shrink: 0; }
-    .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-select-neutral); }
+    .crisp-select-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; color: var(--crisp-fg-select-neutral); }
     .crisp-select-search input::placeholder { color: var(--crisp-fg-select-placeholder); }
+    /* select.yaml's own divider slot (marginX x4, height 1px, colour
+       stroke.neutral-muted -- described upstream as "the line marking a
+       boundary between semantic units: between sections, between content
+       and an action area, between a header and a body" -- exactly the
+       search-field/option-list boundary crisp#904's review flagged as
+       reading too tight). Not the general-purpose separator #867 declined
+       to build (nothing groups options with one) -- scoped to this one
+       specific header/body seam, which now exists because searchable
+       does. Sits as an ordinary flex child, so the listbox's own 8px gap
+       still applies on both sides of it -- total visual seam is
+       gap+1px+gap (17px), deliberately more than the 8px between two
+       plain option rows, so it reads as a section break, not a wider list
+       gap. */
+    .crisp-select-divider { flex-shrink: 0; height: 1px; margin-inline: var(--crisp-space-4); background: var(--crisp-stroke-select-divider); }
     .crisp-select-empty { padding: var(--crisp-space-3) var(--crisp-space-4); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-neutral-subtle); }
     /* select.yaml's groupLabel -- font-size/line-height/weight are the same
        across sizes, only paddingY differs (medium 8px, large 10px). */
@@ -1809,21 +2059,27 @@
 .crisp-select {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-select-trigger { box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; min-width: 0; margin: 0; border: 1px solid var(--crisp-stroke-select-trigger); background: transparent; cursor: pointer; font-family: inherit; color: var(--crisp-fg-select-neutral); transition: background-color .15s cubic-bezier(.35,0,.35,1), border-color .1s cubic-bezier(.35,0,.35,1), border-width .1s cubic-bezier(.35,0,.35,1); }
-    /* seed defines no hover state for this trigger -- only pressed, invalid, disabled and readonly. The scale-down is scoped to the CONTENT (seed's scaleScope: content), not the button itself, so the border
-       never moves. */
-    /* Only the value scales, not the chevron: the chevron's own transform is its open/close rotation, and a scale would fight it for one shared CSS property when both are true at once (pressing while open). */
+    /* seed defines no hover state for this trigger -- only pressed, invalid,
+       disabled and readonly. The scale-down is scoped to the CONTENT
+       (seed's scaleScope: content), not the button itself, so the border
+       never moves. */ /* Only the value scales, not the chevron: the chevron's own transform is
+       its open/close rotation, and a scale would fight it for one shared
+       CSS property when both are true at once (pressing while open). */
     & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) { background: var(--crisp-bg-select-pressed); }
     & .crisp-select-trigger:active:not(:disabled):not([aria-readonly="true"]) .crisp-select-value { transform: scale(0.98); }
     & .crisp-select-trigger:focus-visible { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; }
     & .crisp-select-trigger:disabled { background: var(--crisp-bg-select-disabled); cursor: not-allowed; }
     & .crisp-select-trigger:disabled .crisp-select-value, & .crisp-select-trigger:disabled .crisp-select-placeholder, & .crisp-select-trigger:disabled .crisp-select-chevron { color: var(--crisp-fg-disabled); }
-    /* readonly: same fill as disabled, but the value/placeholder text stays normal ink -- it reads as "answered and locked", not "answered and
+    /* readonly: same fill as disabled, but the value/placeholder text stays
+       normal ink -- it reads as "answered and locked", not "answered and
        greyed out" (select-trigger.yaml's readonly state only overrides
        root.color; value/placeholder keep their enabled colours). */
     & .crisp-select-trigger[aria-readonly="true"] { background: var(--crisp-bg-select-disabled); cursor: default; }
     & .crisp-select-value { flex: 1; min-width: 0; display: inline-flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; transition: transform .15s cubic-bezier(0,0,.15,1); }
     & .crisp-select-placeholder { color: var(--crisp-fg-select-placeholder); }
-    /* closeRotateDuration/closeRotateTimingFunction: 100ms, seed's "easing" curve. Overridden to 150ms on open (openRotateDuration) below -- same curve both ways, only the duration differs. */
+    /* closeRotateDuration/closeRotateTimingFunction: 100ms, seed's "easing"
+       curve. Overridden to 150ms on open (openRotateDuration) below --
+       same curve both ways, only the duration differs. */
     & .crisp-select-chevron { flex-shrink: 0; color: var(--crisp-fg-neutral-muted); transition: transform .1s cubic-bezier(.35,0,.35,1); }
     & .crisp-select-trigger[data-open] .crisp-select-chevron { transform: rotate(180deg); transition-duration: .15s; }
 }
@@ -1833,6 +2089,16 @@
 .crisp-select--width_auto {
   width: auto;
 }
+.crisp-select--size_small {
+  & .crisp-select-trigger { height: var(--crisp-size-menuRow); border-radius: var(--crisp-radius-md); gap: var(--crisp-space-1-5); padding-inline: var(--crisp-space-2-5); }
+    & .crisp-select-value, & .crisp-select-placeholder { font-size: var(--crisp-text-lg); line-height: 20px; }
+    & .crisp-select-chevron { width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
+    .crisp-select-option { gap: var(--crisp-space-2); }
+    .crisp-select-option-label { font-size: var(--crisp-text-lg); line-height: 19px; }
+    .crisp-select-option-description { font-size: var(--crisp-text-sm); line-height: 16px; }
+    .crisp-select-option-check { width: var(--crisp-space-3); height: var(--crisp-space-3); }
+    .crisp-select-label { padding-top: var(--crisp-space-2); }
+}
 .crisp-select--size_medium {
   & .crisp-select-trigger { height: var(--crisp-size-selectTriggerMd); border-radius: var(--crisp-radius-md); gap: var(--crisp-space-2); padding-inline: var(--crisp-space-3-5); }
     & .crisp-select-value, & .crisp-select-placeholder { font-size: var(--crisp-text-lg); line-height: 19px; }
@@ -1896,42 +2162,21 @@
 }
 
 .crisp-slider {
-  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a thumb's name — read, never drawn */
-    & .crisp-slider-thumblabel {
-      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
-      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
-    }
+  display: flex; flex-direction: column; align-items: stretch; width: 100%; min-width: 0; gap: var(--crisp-space-0-5); font-family: var(--crisp-font-sans); user-select: none; touch-action: none; /* the position words ("minimum"/"maximum") that ARIA concatenates onto a
+       thumb's name — read, never drawn */
+    & .crisp-slider-thumblabel { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
     & .crisp-slider-control { position: relative; height: 26px; display: flex; align-items: center; }
-
-    & .crisp-slider-track {
-      position: relative; flex-grow: 1; height: var(--crisp-space-1);
-      border-radius: var(--crisp-radius-full); background: var(--crisp-bg-neutral-weak);
-      overflow: hidden;
-    }
-
+    & .crisp-slider-track { position: relative; flex-grow: 1; height: var(--crisp-space-1); border-radius: var(--crisp-radius-full); background: var(--crisp-bg-neutral-weak); overflow: hidden; }
     & .crisp-slider-range { position: absolute; height: 100%; background: var(--crisp-bg-brand-solid); }
     & .crisp-slider-range[data-dir="ltr"] { left: var(--range-start); right: var(--range-end); }
     & .crisp-slider-range[data-dir="rtl"] { right: var(--range-start); left: var(--range-end); }
-
-    & .crisp-slider-thumb {
-      position: absolute; top: 50%;
-      width: var(--crisp-space-5); height: var(--crisp-space-5);
-      transform: translate(-50%, -50%);
-      border: none; background: none; padding: 0;
-    }
+    & .crisp-slider-thumb { position: absolute; top: 50%; width: var(--crisp-space-5); height: var(--crisp-space-5); transform: translate(-50%, -50%); border: none; background: none; padding: 0; }
     & .crisp-slider-thumb[data-dir="ltr"] { left: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
     & .crisp-slider-thumb[data-dir="rtl"] { right: calc(var(--thumb-position) * 1% + var(--thumb-offset)); }
-    & .crisp-slider-thumb::after {
-      content: ""; position: absolute; inset: 0;
-      border-radius: var(--crisp-radius-full); background: #fff; box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04);
-      outline: 2px solid transparent; outline-offset: 2px;
-      transition: transform .2s ease, outline-color .2s ease;
-      cursor: grab;
-    }
+    & .crisp-slider-thumb::after { content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-full); background: #fff; box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); outline: 2px solid transparent; outline-offset: 2px; transition: transform .2s ease, outline-color .2s ease; cursor: grab; }
     & .crisp-slider-thumb[data-thumb-dragging]::after { transform: scale(1.2); cursor: grabbing; }
     & .crisp-slider-thumb:focus { outline: none; }
     & .crisp-slider-thumb:focus-visible::after { outline-color: var(--crisp-stroke-focus-ring); }
-
     &[data-disabled] { cursor: not-allowed; }
     &[data-disabled] .crisp-slider-range { background: var(--crisp-fg-disabled); }
     &[data-disabled] .crisp-slider-thumb::after { cursor: not-allowed; }
@@ -1945,6 +2190,31 @@
   }
 }
 
+.crisp-snackbar {
+  & .crisp-snackbar-region { position: fixed; z-index: 80; inset-inline: 0; bottom: 0; display: flex; justify-content: center; padding: var(--crisp-space-2); /* snackbar.yaml:95-96 region.paddingX/paddingY = $dimension.x2 (8px) */ pointer-events: none; }
+    & .crisp-snackbar { pointer-events: auto; box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2-5); /* snackbar.yaml:116 content.gap = $dimension.x2_5 (10px), reused as the icon+message-to-action gap */ min-height: 44px; max-width: 464px; /* snackbar.yaml:102-103 */ width: max-content; padding: var(--crisp-space-2-5); /* snackbar.yaml:104-105 root.paddingX/paddingY = $dimension.x2_5 (10px) */ border-radius: var(--crisp-radius-md); /* snackbar.yaml:101 root.cornerRadius = $radius.r2 (8px) */ background: var(--crisp-bg-neutral-inverted); /* snackbar.yaml:100 root.color = $color.bg.neutral-inverted */ font-family: var(--crisp-font-sans); opacity: 1; transform: scale(1); transition: opacity 150ms cubic-bezier(0,0,.15,1), transform 150ms cubic-bezier(0,0,.15,1); /* snackbar.yaml:108-109 enterDuration/enterTimingFunction = $duration.d3 (150ms) / $timing-function.enter */ @starting-style { opacity: 0; transform: scale(0.8); } /* snackbar.yaml:106-107 enterOpacity/enterScale */ }
+    & .crisp-snackbar-content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
+    /* snackbar.yaml:124 prefixIcon.paddingRight = $dimension.x0_5 (2px), used as the icon-to-message gap */
+    & .crisp-snackbar-icon { flex-shrink: 0; display: inline-flex; }
+    & .crisp-snackbar[data-variant="positive"] .crisp-snackbar-icon { color: var(--crisp-bg-success); }
+    /* snackbar.yaml:138-139 variant=positive prefixIcon.color = $color.fg.positive */
+    & .crisp-snackbar[data-variant="critical"] .crisp-snackbar-icon { color: var(--crisp-bg-danger); }
+    /* snackbar.yaml:142-143 variant=critical prefixIcon.color = $color.fg.critical */
+    & .crisp-snackbar-message { flex: 1 1 auto; min-width: 0; color: var(--crisp-fg-on-neutral-inverted); font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-regular); }
+    /* snackbar.yaml:117-121: message.color = $color.fg.neutral-inverted, fontSize/lineHeight = $font-size.t4/$line-height.t4 (14px/19px), fontWeight = regular */
+    & .crisp-snackbar-action { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--crisp-space-2); margin: -12px calc(-1 * var(--crisp-space-2)); /* snackbar.yaml:126-127 targetPaddingX/targetMinHeight = $dimension.x2 (8px, doubled here as horizontal padding)/44px -- a larger invisible tap target than the pill's own 44px content row, via negative margin so it doesn't grow the pill visually */ border: none; border-radius: var(--crisp-radius-md); background: none; color: var(--crisp-fg-on-neutral-inverted); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 19px; font-weight: var(--crisp-weight-bold); /* fontSize/lineHeight = t4/line-height.t4; fontWeight = bold (snackbar.yaml:129-131); colour deviation documented above */ cursor: pointer; transition: transform 150ms cubic-bezier(0,0,.15,1); }
+    & .crisp-snackbar-action:active { transform: scale(0.98); }
+    /* snackbar.yaml:133-134 pressed.actionButton.scaleScope = self */
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-snackbar, .crisp-snackbar * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 @keyframes crisp-spin { to { transform: rotate(360deg); } }
 .crisp-spinner {
   display: inline-block; box-sizing: border-box; width: 16px; height: 16px; border-radius: var(--crisp-radius-full); border: 2px solid color-mix(in srgb, var(--crisp-fg-primary) 15%, transparent); border-top-color: var(--crisp-fg-muted); animation: crisp-spin 0.6s linear infinite;
@@ -1980,7 +2250,9 @@
     /* caption's own status colour, opt-in via data-tone: not a new measured
        value — the same fg*Soft tokens Badge's tone already uses (and Badge's
        own doc comment records why: a dedicated soft-text token, not the
-       tone's accent colour, is the one that clears AA). No "ok" reading on Badge itself; fgSuccessSoft is Badge's own "success" tone's text colour, reused here under the name a caption's own good-news state
+       tone's accent colour, is the one that clears AA). No "ok" reading on
+       Badge itself; fgSuccessSoft is Badge's own "success" tone's text
+       colour, reused here under the name a caption's own good-news state
        reads as. */
     & .crisp-statcard-caption[data-tone="ok"] { color: var(--crisp-fg-success-soft); }
     & .crisp-statcard-caption[data-tone="warning"] { color: var(--crisp-fg-warning-soft); }
@@ -2020,40 +2292,58 @@
 }
 
 .crisp-table {
-  display: block; box-sizing: border-box; background: var(--crisp-bg-surface); /* #554: both axes -- a consumer bounds the height via `scrollProps` (style/className on this element), and the header/footer below pin inside it exactly the way Attio's own grid does ("Both the header and
+  display: block; box-sizing: border-box; background: var(--crisp-bg-surface); /* #554: both axes -- a consumer bounds the height via `scrollProps`
+       (style/className on this element), and the header/footer below pin
+       inside it exactly the way Attio's own grid does ("Both the header and
        the summary row are sticky, on the scroll container rather than the
        cells" -- docs/study/attio-table.md). Unbounded, `overflow: auto`
        shows no vertical scrollbar and nothing sticks, so this is a no-op
        for every existing consumer that never set a height. */
     & .crisp-table-scroll { overflow: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    /* #465: 12px, not crisp's old 8px -- measured on a live header cell (padding: 0 12px) and independently on a body cell's text inset
+    /* #465: 12px, not crisp's old 8px -- measured on a live header cell
+       (padding: 0 12px) and independently on a body cell's text inset
        (getBoundingClientRect delta from the cell edge). Matches
        ColumnCalc's own already-correct 12px trigger inset. */
     & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     /* #554: sticky on the vertical axis, mirroring RecordsTable's own
        `.crisp-recordstable-th`. z-index 2 sits above a plain body cell (auto)
-       and below a sticky-column corner cell (DataTable's `th[data-sticky]`, z-index 3), so the corner always wins. `thead th`, not a bare `th` (crisp#833/#835): DataTable's primary
+       and below a sticky-column corner cell (DataTable's `th[data-sticky]`,
+       z-index 3), so the corner always wins.
+       `thead th`, not a bare `th` (crisp#833/#835): DataTable's primary
        column renders its BODY cell as a real `<th scope="row">` (#779, for
        a11y), and a bare `th` here matched that one too -- every property in
        this rule leaked onto it: `height: tableHeader` (40px) stretched the
        whole body row to 40px instead of 36 (#833, confirmed live on the
        showcase, every td in the row equalized to the one th); `color:
-       color-mix(...63%...)` muted the primary column's own text below every sibling `<td>`'s full-opacity color (#835, re-measured live against
-       Attio's own header labels -- including a genuinely computed one, "Twitter follower count" -- all fully opaque `rgb(16,17,18)`, no muting at all, so this drops the color-mix entirely rather than narrowing it); `position:sticky; top:0` tried to stick a BODY row to the scroll container's top; the extra `border-top` doubled that
-       row's own grid line. `thead th` simply never matches `tbody th[scope=row]` at all, so none of this reaches it; the base `& th, & td` rule above (36px, one border-bottom, full opacity via `& table`'s own color) applies to it like every other cell. */
+       color-mix(...63%...)` muted the primary column's own text below every
+       sibling `<td>`'s full-opacity color (#835, re-measured live against
+       Attio's own header labels -- including a genuinely computed one,
+       "Twitter follower count" -- all fully opaque `rgb(16,17,18)`, no
+       muting at all, so this drops the color-mix entirely rather than
+       narrowing it); `position:sticky; top:0` tried to stick a BODY row
+       to the scroll container's top; the extra `border-top` doubled that
+       row's own grid line. `thead th` simply never matches
+       `tbody th[scope=row]` at all, so none of this reaches it; the base
+       `& th, & td` rule above (36px, one border-bottom, full opacity via
+       `& table`'s own color) applies to it like every other cell. */
     & thead th { position: sticky; top: 0; z-index: 2; height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-primary); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
-    /* crisp#851 -- a REGRESSION from #833/#835/#848's own fix: scoping the header rule above to `thead th` correctly stopped it leaking onto the primary column's body cell (a real `<th scope="row">` since
-       #779), but that same leaked rule's `font-weight: var(--crisp-weight-medium)` was the ONLY thing overriding the browser's own UA stylesheet default
+    /* crisp#851 -- a REGRESSION from #833/#835/#848's own fix: scoping the
+       header rule above to `thead th` correctly stopped it leaking onto
+       the primary column's body cell (a real `<th scope="row">` since
+       #779), but that same leaked rule's `font-weight: var(--crisp-weight-medium)`
+       was the ONLY thing overriding the browser's own UA stylesheet default
        for `<th>` (`font-weight: bold; text-align: center`) on that cell --
        once the leak stopped, a plain-text primary column fell through to
        bold+centred instead of matching its sibling `<td>`s (`400`/start,
-       Attio's own plain-text primary cell). `text-align` was already safe (the base `& th, & td` rule's own `text-align: start` above is
+       Attio's own plain-text primary cell). `text-align` was already safe
+       (the base `& th, & td` rule's own `text-align: start` above is
        author-origin and always beats the UA stylesheet regardless of
        specificity) but is restated here explicitly, defensively -- cheap,
        and removes any doubt. `type: "entity"` primary columns are a
-       separate case (Attio's own entity/record names are 500, not 400) -- see `.crisp-datatable-entity-name`'s own new explicit weight in
+       separate case (Attio's own entity/record names are 500, not 400) --
+       see `.crisp-datatable-entity-name`'s own new explicit weight in
        datatable.recipe.ts, which wins here by class specificity. */
     & tbody th { font-weight: var(--crisp-weight-regular); text-align: start; }
     & th:last-child, & td:last-child { border-inline-end: none; }
@@ -2097,12 +2387,18 @@
     & .crisp-tabletoolbar-search svg { flex-shrink: 0; }
     & .crisp-tabletoolbar-search input { border: none; outline: none; background: transparent; font-family: inherit; font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); width: 180px; }
     & .crisp-tabletoolbar-search input::placeholder { color: var(--crisp-fg-muted); }
-    /* crisp/#830: every trigger label here (Sort, Filter, View settings, Import/Export -- all compose this one shared .tool rule) read the "md" text size, 13px. Re-measured on Attio's own trigger LEAF node
-       (the button root itself inherits Attio's own 10px rem base and is a red herring, the same trap the original "10px font" layout-audit finding fell into): every label leaf is 14px/500/lh20, the "lg" text size. */
+    /* crisp/#830: every trigger label here (Sort, Filter, View settings,
+       Import/Export -- all compose this one shared .tool rule) read the
+       "md" text size, 13px. Re-measured on Attio's own trigger LEAF node
+       (the button root itself inherits Attio's own 10px rem base and is a
+       red herring, the same trap the original "10px font" layout-audit
+       finding fell into): every label leaf is 14px/500/lh20, the "lg" text
+       size. */
     & .crisp-tabletoolbar-tool { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); margin: 0; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); white-space: nowrap; cursor: pointer; transition: background-color .12s; }
     & .crisp-tabletoolbar-tool:hover { background: var(--crisp-bg-raised); }
     & .crisp-tabletoolbar-tool svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-    /* crisp/#772: re-measured live on Sort with an actual sort applied -- an active trigger's own fill is white (bgSurface), the same as the
+    /* crisp/#772: re-measured live on Sort with an actual sort applied --
+       an active trigger's own fill is white (bgSurface), the same as the
        base .tool rule above now already sets; this override existed to
        distinguish active from a base state that used to be transparent.
        Kept explicit (not just deleted) so a future change to the base
@@ -2113,13 +2409,23 @@
     /* crisp/#772 follow-up, re-measured live 2026-09-25: an EMPTY Sort/Filter
        trigger (no sort/condition set) isn't a solid-ring chip at all -- it's
        a dashed ::before (1px dashed, border-radius: inherit, absolutely
-       positioned inset: 0) over a barely-there fill, confirmed on Attio's own empty Filter chip (its ::before border computes to exactly "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger drops the dashed pseudo and picks up the base tool's own solid ring
+       positioned inset: 0) over a barely-there fill, confirmed on Attio's
+       own empty Filter chip (its ::before border computes to exactly
+       "1px dashed rgba(0, 0, 0, 0.06)"). Once a value IS set, the trigger
+       drops the dashed pseudo and picks up the base tool's own solid ring
        instead (the --active modifier, unchanged) -- confirmed on Sort with
        an actual sort applied. color-mix (not the raw rgba Attio computes
        to) so both the border and the fill flip correctly in dark mode, the
        same reasoning --ghost above already uses. Only wired into
-       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's own Sort/Filter triggers share this same chrome function but are deprecated, not touched here. crisp/#844, correcting #831: the label colour was added here later, muting only the FILTER trigger (via a "--filter" modifier), on the assumption that was a Filter-specific tone distinct from Sort's.
-       Re-measured live and that premise was wrong -- Sort's own resting label ("Sort", no condition set) is the exact SAME muted rgba(0,0,0,.5) as Filter's, not full-strength. (The rgba(0,0,0,.63) that looked like
+       TableToolbar itself (tabletoolbar.tsx) this pass -- RecordsTable's
+       own Sort/Filter triggers share this same chrome function but are
+       deprecated, not touched here.
+       crisp/#844, correcting #831: the label colour was added here later,
+       muting only the FILTER trigger (via a "--filter" modifier), on the
+       assumption that was a Filter-specific tone distinct from Sort's.
+       Re-measured live and that premise was wrong -- Sort's own resting
+       label ("Sort", no condition set) is the exact SAME muted rgba(0,0,0,.5)
+       as Filter's, not full-strength. (The rgba(0,0,0,.63) that looked like
        "Sort's colour" in an earlier pass is a different thing entirely: the
        "Sorted by" PREFIX word inside an ACTIVE sort chip, #788 -- a
        compound-label treatment that only exists once a sort is applied, not
@@ -2206,17 +2512,21 @@
     & .crisp-tabletoolbar-fchip-x:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-tabletoolbar-spacer { flex: 1; }
     & .crisp-tabletoolbar-count { font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-    & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .12s; }
-    & .crisp-tabletoolbar-new:hover { background: var(--crisp-bg-brand-solid-pressed); }
-
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker sibling
+       clears 4.5:1+, same fix already applied to Button/Badge/Avatar (#897).
+       Hover is a brightness filter on the new fill, not bgBrandSolidPressed
+       (that token stays tuned for the lighter accent's own consumers). */
+    & .crisp-tabletoolbar-new { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: var(--crisp-size-row); padding: 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: filter .12s; }
+    & .crisp-tabletoolbar-new:hover { filter: brightness(0.96); }
     & .crisp-tabletoolbar-fcond { display: inline-flex; align-items: center; height: var(--crisp-size-row); font-size: var(--crisp-text-md); color: var(--crisp-fg-primary); white-space: nowrap; }
     & .crisp-tabletoolbar-fcond-seg { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 100%; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: var(--crisp-bg-surface-muted); box-shadow: inset 0 0 0 1px var(--crisp-border-divider); font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; }
     & .crisp-tabletoolbar-fcond-seg svg { flex-shrink: 0; }
-    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field,
-    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--field, & .crisp-tabletoolbar-fcond[data-complete] .crisp-tabletoolbar-fcond-seg--val { background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-fcond-seg--field { border-radius: var(--crisp-radius-md) 0 0 var(--crisp-radius-md); font-weight: var(--crisp-weight-medium); max-width: 200px; }
     & .crisp-tabletoolbar-fcond-seg--field svg { color: var(--crisp-fg-muted); }
-    /* #592: a nested pick's field segment ("Team › Twitter follower count") — measured live: BOTH path segments the same colour (chip
+    /* #592: a nested pick's field segment ("Team › Twitter follower
+       count") — measured live: BOTH path segments the same colour (chip
        context only; the picker's own menu rows keep the parent muted, see
        tabletoolbar.chrome.ts), each independently truncated. Attio's own
        layout gives the leaf segment priority (it stays fully readable
@@ -2242,8 +2552,7 @@
     & .crisp-tabletoolbar-sort-field-picker { position: relative; display: inline-flex; flex: 1; min-width: 0; }
     & .crisp-tabletoolbar-sort-field-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); width: 100%; min-width: 0; margin: 0; padding: 0 var(--crisp-space-1-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; transition: background-color .12s ease, box-shadow .12s ease; }
     & .crisp-tabletoolbar-sort-field-trigger:hover { background: var(--crisp-bg-raised); }
-    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"],
-    & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
+    & .crisp-tabletoolbar-sort-field-trigger[aria-expanded="true"], & .crisp-tabletoolbar-sort-field-trigger:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); background: var(--crisp-bg-surface); }
     & .crisp-tabletoolbar-sort-field-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
     & .crisp-tabletoolbar-sort-field-picker .crisp-tabletoolbar-menu { min-width: 200px; }
     & .crisp-tabletoolbar-menu--val { min-width: 134px; }
@@ -2251,18 +2560,10 @@
     & .crisp-tabletoolbar-datepop-presets { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-2); padding: 0 var(--crisp-space-1); }
     & .crisp-tabletoolbar-datepop-preset { height: var(--crisp-size-chip); padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-chip); background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-sm); cursor: pointer; }
     & .crisp-tabletoolbar-datepop-preset:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); }
-
     & .crisp-tabletoolbar-tool--raised { border: none; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; cursor: pointer; }
-
     & .crisp-tabletoolbar-sorted-prefix { color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
-    & .crisp-tabletoolbar-sorted-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
-      padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent);
-      box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
-
-    & .crisp-tabletoolbar-tool-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box;
-      padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent);
-      box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft);
-      font-variant-numeric: tabular-nums; }
+    & .crisp-tabletoolbar-sorted-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
+    & .crisp-tabletoolbar-tool-count { display: inline-flex; align-items: center; height: 16px; box-sizing: border-box; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); font-variant-numeric: tabular-nums; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
 
@@ -2278,17 +2579,31 @@
   display: flex; flex-direction: column; min-height: 0; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & .crisp-tabs-list { position: relative; display: flex; align-items: center; gap: var(--crisp-space-1); box-sizing: content-box; height: var(--crisp-size-row); padding: 0 var(--crisp-space-3) var(--crisp-space-2); flex-shrink: 0; }
     & .crisp-tabs-list::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--crisp-border-subtle); }
+    /* crisp#908: an alternative to the "+N more" collapse above (crisp#863) --
+       a consumer opts into a single scrolling row instead (Naver/Kakao's own
+       pattern, docs/study/korean/), never both at once. No new visual value:
+       reuses the same list gap/tab geometry, only adds overflow-x + snap. */
+    & .crisp-tabs-list[data-overflow="scroll"] { overflow-x: auto; flex-wrap: nowrap; scroll-snap-type: x mandatory; scrollbar-width: none; }
+    & .crisp-tabs-list[data-overflow="scroll"]::-webkit-scrollbar { display: none; }
+    & .crisp-tabs-list[data-overflow="scroll"] .crisp-tabs-tab { flex-shrink: 0; scroll-snap-align: start; }
     & .crisp-tabs-leading { display: inline-flex; align-items: center; margin-inline-end: var(--crisp-space-1); }
-    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; box-shadow: inset 0 0 0 1px transparent; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-tabs-tab { position: relative; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; margin: 0; padding: 0 var(--crisp-space-2); border: none; background: none; border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: var(--crisp-fg-muted); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease; }
     & .crisp-tabs-tab svg { flex-shrink: 0; opacity: 0.85; }
     & .crisp-tabs-tab:hover:not([data-selected]) { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-primary); }
-    & .crisp-tabs-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
+    & .crisp-tabs-tab[data-selected] { color: var(--crisp-fg-primary); }
     & .crisp-tabs-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
     & .crisp-tabs-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; height: 14px; padding: 0 var(--crisp-space-1); border-radius: 4px; background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: 10px; line-height: 14px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
     & .crisp-tabs-tab[data-selected] .crisp-tabs-tab-badge { color: var(--crisp-fg-primary); }
     & .crisp-tabs-indicator { position: absolute; bottom: 0; left: 0; z-index: 1; height: 1px; background: var(--crisp-fg-primary); border-radius: 2px 2px 0 0; transition: transform .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); pointer-events: none; }
-    /* crisp#863: the "+N more" overflow trigger, measured live -- its computed style is identical to a plain .crisp-tabs-tab (same pill, same 6px icon/label gap the tab class already gives via space["1.5"]), and the dropdown it opens is crisp's own Menu/
-       MenuItem chrome (already matches Attio's popover, nothing new to style there). Only the wrapper needs a rule: an overflowed tab (or the trigger itself, when nothing is hidden) is taken out of the flex row and out of the a11y tree without ever making its own offsetWidth unmeasurable the way display:none would -- that's what
+    /* crisp#863: the "+N more" overflow trigger, measured live -- its
+       computed style is identical to a plain .crisp-tabs-tab (same pill,
+       same 6px icon/label gap the tab class already gives via
+       space["1.5"]), and the dropdown it opens is crisp's own Menu/
+       MenuItem chrome (already matches Attio's popover, nothing new to
+       style there). Only the wrapper needs a rule: an overflowed tab (or
+       the trigger itself, when nothing is hidden) is taken out of the
+       flex row and out of the a11y tree without ever making its own
+       offsetWidth unmeasurable the way display:none would -- that's what
        lets the tabs.tsx effect recompute the cutoff from cached widths on
        every resize with no flash of an unclipped row. */
     & .crisp-tabs-more { display: inline-flex; }
@@ -2321,7 +2636,7 @@
   color: var(--crisp-fg-neutral-muted);
 }
 .crisp-text--tone_brand {
-  color: var(--crisp-bg-brand-solid);
+  color: var(--crisp-fg-brand-contrast);
 }
 .crisp-text--tone_danger {
   color: var(--crisp-fg-danger);
@@ -2329,24 +2644,21 @@
 
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); border: 1px solid var(--crisp-border-default); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after
        overlay that is present-but-transparent at rest, so focusing never
        shifts the box, animating only its colour. */
     & .crisp-textarea-wrap { position: relative; display: block; }
-    & .crisp-textarea-wrap::after {
-      content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-md);
-      border: 2px solid transparent; transition: border-color .1s ease;
-      pointer-events: none;
-    }
+    & .crisp-textarea-wrap::after { content: ""; position: absolute; inset: 0; border-radius: var(--crisp-radius-md); border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
     & .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
     &[data-invalid] .crisp-textarea-wrap::after { border-color: var(--crisp-bg-danger); }
     &[data-invalid] .crisp-textarea-wrap:focus-within::after { border-color: var(--crisp-bg-danger); }
     &[data-counted] .crisp-textarea-field { padding-bottom: var(--crisp-space-5); }
-    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
+    & .crisp-textarea-count { position: absolute; inset-inline-end: 14px; bottom: var(--crisp-space-2-5); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); pointer-events: none; }
     & .crisp-textarea-count[data-over] { color: var(--crisp-bg-danger); }
+    & .crisp-textarea-progress { flex-shrink: 0; }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2362,11 +2674,11 @@
     &:hover { text-decoration: underline; }
 }
 .crisp-textlink--tone_brand {
-  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-bg-brand-solid);
+  font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-brand-contrast);
 }
 .crisp-textlink--tone_muted {
   font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-muted);
-    &:hover { color: var(--crisp-bg-brand-solid); }
+    &:hover { color: var(--crisp-fg-brand-contrast); }
 }
 .crisp-textlink--size_sm {
   font-size: var(--crisp-text-sm);
@@ -2431,14 +2743,16 @@
 .crisp-wheelpicker {
   position: relative; box-sizing: border-box; width: 100%; overflow: hidden; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); /* the band the selected row sits in; behind the items, never hit-tested */
     & .crisp-wheelpicker-indicator { position: absolute; z-index: 0; inset-inline: var(--crisp-space-4); top: 50%; transform: translateY(-50%); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-neutral-weak); pointer-events: none; }
-    /* fades the rows furthest from the centre, so the column reads as a wheel rather than a list. 40% of the viewport, capped, top and bottom. */
+    /* fades the rows furthest from the centre, so the column reads as a wheel
+       rather than a list. 40% of the viewport, capped, top and bottom. */
     & .crisp-wheelpicker-fog { position: relative; z-index: 1; height: 100%; overflow: hidden; mask-image: linear-gradient( to bottom, transparent 0, #000 var(--crisp-wheelpicker-fog), #000 calc(100% - var(--crisp-wheelpicker-fog)), transparent 100% ); }
     & .crisp-wheelpicker-columns { display: flex; width: 100%; height: 100%; justify-content: center; }
     & .crisp-wheelpicker-column { box-sizing: border-box; flex: 0 0 auto; width: max-content; height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; overscroll-behavior-x: none; scroll-snap-type: y mandatory; touch-action: pan-y; scrollbar-width: none; -ms-overflow-style: none; outline: none; padding-block: var(--crisp-wheelpicker-offset); }
     & .crisp-wheelpicker-column::-webkit-scrollbar { display: none; }
     & .crisp-wheelpicker-item { display: flex; align-items: center; justify-content: center; scroll-snap-align: center; user-select: none; white-space: nowrap; padding-inline: var(--crisp-space-4); color: var(--crisp-fg-disabled); background: none; border: none; font: inherit; cursor: pointer; }
     & .crisp-wheelpicker-item[data-selected] { color: var(--crisp-fg-primary); }
-    /* the ring is drawn on the SELECTED row, and only for keyboard focus: a pointer user has just tapped the row they meant and does not need it */
+    /* the ring is drawn on the SELECTED row, and only for keyboard focus:
+       a pointer user has just tapped the row they meant and does not need it */
     & .crisp-wheelpicker-column:focus-visible .crisp-wheelpicker-item[data-selected] { outline: 2px solid var(--crisp-stroke-focus-ring); outline-offset: -2px; border-radius: var(--crisp-radius-md); }
 }
 .crisp-wheelpicker--size_small {
@@ -2492,7 +2806,11 @@
     & .crisp-authshell-progress { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--crisp-border-default); }
     & .crisp-authshell-progress-fill { height: 2px; background: var(--crisp-fg-primary); border-radius: 4px; transition: width .2s; }
     & .crisp-authshell-logo { margin-top: var(--crisp-space-8); min-height: 24px; display: flex; align-items: center; gap: var(--crisp-space-2-5); }
-    & .crisp-authshell-logo-badge { flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: #fff; display: flex; align-items: center; justify-content: center; }
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+       the accent (#0298d9) only clears 3.23:1 with white; the darker
+       sibling clears 4.5:1+, same fix already applied to Button/Badge/
+       Avatar (#897). */
+    & .crisp-authshell-logo-badge { flex-shrink: 0; box-sizing: border-box; width: 32px; height: 32px; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-contrast); color: #fff; display: flex; align-items: center; justify-content: center; }
     & .crisp-authshell-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
     & .crisp-authshell-logo-title { font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-bold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); }
     & .crisp-authshell-logo-subtitle { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
@@ -2508,7 +2826,8 @@
     & .crisp-authshell-form { align-self: stretch; display: flex; flex-direction: column; gap: 28px; }
     & .crisp-authshell-footer { margin-top: var(--crisp-space-6); display: flex; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-sm); line-height: 16px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-authshell-footer a { color: inherit; font-weight: var(--crisp-weight-medium); text-decoration: underline; }
-    /* Auth-surface control treatment: flatter than the in-app chrome — a plain hairline ring instead of elevation.field's soft glow, and a 36px (not
+    /* Auth-surface control treatment: flatter than the in-app chrome — a plain
+       hairline ring instead of elevation.field's soft glow, and a 36px (not
        40px) submit. Scoped to .crisp-authshell-body so a consumer keeps using
        crisp's Input / FormField / Button and gets the auth treatment for free. */
     & .crisp-authshell-body .crisp-formfield-label { font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); padding-inline-start: var(--crisp-space-1); }
@@ -2516,10 +2835,10 @@
     & .crisp-authshell-body .crisp-input { height: 34px; padding-inline: var(--crisp-space-2-5); border-radius: 10px; background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; transition: box-shadow .14s, background-color .14s; }
     & .crisp-authshell-body .crisp-input:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     /* Same three-layer brand shadow as Button's primary intent, but the auth
-       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not the in-app button's rgba(255,255,255,0.07) highlight. */
+       button's inset ring is measured at rgba(0,0,0,0.06) — a hairline, not
+       the in-app button's rgba(255,255,255,0.07) highlight. */
     & .crisp-authshell-body .crisp-button { height: 36px; padding-inline: var(--crisp-space-3); border-radius: 10px; }
     & .crisp-authshell-body .crisp-button--intent_primary { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); }
-
     /* The preview pane drops out in JS on narrow viewports (measured: two
        panes at 1393px, one at 954px), so 1200px is a chosen threshold inside
        that bracket, not a measured value. A CONTAINER query, not a media
@@ -2550,19 +2869,29 @@
     & .crisp-board-density button[data-state="on"] { background: var(--crisp-bg-surface); color: var(--crisp-fg-primary); }
     & .crisp-board-row { display: flex; gap: var(--crisp-space-2); flex: 1; min-height: 0; box-sizing: border-box; padding: var(--crisp-space-3); overflow-x: auto; align-items: flex-start; }
     & .crisp-board-col { display: flex; flex-direction: column; width: 268px; flex-shrink: 0; max-height: 100%; box-sizing: border-box; transition: width 0.15s; }
-    /* #718: a collapsed column is a 52px vertical rail -- header only (dot + count stacked above a vertical-rl title), body/footer hidden entirely. Measured live: 52px width, 8px 0 padding on the header, 14px/600 title text. */
+    /* #718: a collapsed column is a 52px vertical rail -- header only (dot
+       + count stacked above a vertical-rl title), body/footer hidden
+       entirely. Measured live: 52px width, 8px 0 padding on the header,
+       14px/600 title text. */
     & .crisp-board-col[data-density="collapse"] { width: 52px; }
     & .crisp-board-col[data-density="collapse"] .crisp-board-col-header { flex-direction: column; align-items: center; height: auto; padding: var(--crisp-space-2) 0; gap: var(--crisp-space-1); }
-    /* Measured stacking order (top to bottom): dot, count, THEN the vertical title -- reordered visually via `order`, not by changing the JSX/DOM order, which stays dot/title/count (reading order, unaffected by density). */
+    /* Measured stacking order (top to bottom): dot, count, THEN the vertical
+       title -- reordered visually via `order`, not by changing the JSX/DOM
+       order, which stays dot/title/count (reading order, unaffected by
+       density). */
     & .crisp-board-col[data-density="collapse"] .crisp-board-col-title { order: 1; writing-mode: vertical-rl; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); }
     & .crisp-board-col[data-density="collapse"] .crisp-board-col-count { order: 0; }
     & .crisp-board-col[data-density="collapse"] .crisp-board-col-body, & .crisp-board-col[data-density="collapse"] .crisp-board-col-footer { display: none; }
     & .crisp-board-col-header { display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding: 0 var(--crisp-space-1); flex-shrink: 0; }
     & .crisp-board-col-dot { width: 12px; height: 12px; border-radius: var(--crisp-radius-full); flex-shrink: 0; }
     & .crisp-board-col-title { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); }
-    /* crisp#697: HANDOFF's #472 note claimed the count pill's color-mix(fgPrimary, 63%, transparent) reproduced the measured rgb(80,81,85) -- it doesn't; 63% of fgPrimary composited on white
+    /* crisp#697: HANDOFF's #472 note claimed the count pill's
+       color-mix(fgPrimary, 63%, transparent) reproduced the measured
+       rgb(80,81,85) -- it doesn't; 63% of fgPrimary composited on white
        paints rgb(104,105,105), visibly lighter. Text now reads
-       fgNeutralSoft directly (the same rgb(80,81,85) token Badge's neutral tone uses, #696), and the ring the pill was also missing (inset 0 0 0 1px borderSubtle, measured rgb(238,239,241)) is added. */
+       fgNeutralSoft directly (the same rgb(80,81,85) token Badge's neutral
+       tone uses, #696), and the ring the pill was also missing
+       (inset 0 0 0 1px borderSubtle, measured rgb(238,239,241)) is added. */
     & .crisp-board-col-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); font-size: var(--crisp-text-sm); line-height: 16px; font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
     & .crisp-board-col-add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-inline-start: auto; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; color: var(--crisp-fg-muted); font-family: inherit; cursor: pointer; }
     & .crisp-board-col-add:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
@@ -2571,7 +2900,11 @@
     & .crisp-board-newcard { display: flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); height: 32px; flex-shrink: 0; border: none; border-radius: var(--crisp-radius-md); background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); color: var(--crisp-fg-muted); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-board-newcard:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 7%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-board-card { display: flex; flex-direction: column; gap: var(--crisp-space-2); box-sizing: border-box; padding: var(--crisp-space-2-5) var(--crisp-space-3); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); cursor: grab; touch-action: none; }
-    /* #718: a collapsed card is a single 40px row -- measured live and independent of `c.size.tableRow`/`tableHeader` (36/40px) even though it happens to match the latter; a plain literal, not a cross-reference to a token measured for a different surface. `renderCard`'s own second argument is what actually decides what a
+    /* #718: a collapsed card is a single 40px row -- measured live and
+       independent of `c.size.tableRow`/`tableHeader` (36/40px) even
+       though it happens to match the latter; a plain literal, not a
+       cross-reference to a token measured for a different surface.
+       `renderCard`'s own second argument is what actually decides what a
        collapsed card SHOWS (Board never sees inside its opaque output);
        this only supplies the row-shaped box that content sits in. */
     & .crisp-board-card[data-density="collapse"] { flex-direction: row; align-items: center; height: 40px; padding: 0 var(--crisp-space-3); }
@@ -2579,11 +2912,15 @@
     & .crisp-board-card[data-dragging] { opacity: 0.4; }
     & .crisp-board-card:focus { outline: none; }
     & .crisp-board-card:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
-    /* #674: the pointer-events drag's own drag image -- the same card surface above, just pinned to the pointer instead of the flex flow. No shadow lift or scale: neither was measured against Attio, and this is the same card, momentarily somewhere else, not a new look. */
+    /* #674: the pointer-events drag's own drag image -- the same card
+       surface above, just pinned to the pointer instead of the flex flow.
+       No shadow lift or scale: neither was measured against Attio, and this
+       is the same card, momentarily somewhere else, not a new look. */
     & .crisp-board-ghost { position: fixed; z-index: 1; pointer-events: none; cursor: grabbing; }
     /* #604: a per-column calc footer, mirroring the table's own (measured
        live, Deals pipeline). Sits below the scrollable card body, not
-       inside it or pinned to it -- Attio's own is position: static, not sticky, so it's a plain flex-shrink:0 sibling here too. */
+       inside it or pinned to it -- Attio's own is position: static, not
+       sticky, so it's a plain flex-shrink:0 sibling here too. */
     & .crisp-board-col-footer { flex-shrink: 0; padding: var(--crisp-space-1) 0; }
     & .crisp-board-col-calc { display: flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); width: 100%; height: 28px; padding: var(--crisp-space-1) var(--crisp-space-2); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); cursor: pointer; }
     & .crisp-board-col-calc:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
@@ -2592,7 +2929,9 @@
     & .crisp-board-col-calc-value { color: var(--crisp-fg-primary); font-variant-numeric: tabular-nums; }
     /* #718: "Add stage" -- measured live: 52×52px, transparent, a 1px
        dashed border (rgb(230,231,234), exactly `borderDropzone`/`line150`
-       -- the same dashed-border colour ImportDialog's own dropzone already uses, not borderSubtle/line100, a close but different value), radius.xl (16px), a centered 16px "+". */
+       -- the same dashed-border colour ImportDialog's own dropzone already
+       uses, not borderSubtle/line100, a close but different value), radius.xl
+       (16px), a centered 16px "+". */
     & .crisp-board-addstage { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; flex-shrink: 0; border: 1px dashed var(--crisp-border-dropzone); border-radius: var(--crisp-radius-xl); background: none; color: var(--crisp-fg-primary); font-family: inherit; cursor: pointer; }
     & .crisp-board-addstage:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
     /* announced, never drawn */
@@ -2616,28 +2955,32 @@
     & .crisp-command-card { display: flex; flex-direction: column; flex: 1; min-height: 0; box-sizing: border-box; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 8%, transparent); overflow: hidden; }
     & .crisp-command-control { display: flex; align-items: center; gap: var(--crisp-space-2-5); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-4); border-bottom: 1px solid var(--crisp-border-subtle); color: var(--crisp-fg-muted); }
     & .crisp-command-control svg { flex-shrink: 0; }
-    /* The palette's label element. It exists for the assistive tree only: zag's combobox names the input through it and points the listbox's
+    /* The palette's label element. It exists for the assistive tree only: zag's
+     combobox names the input through it and points the listbox's
      aria-labelledby at it, and without it both were unnamed and the reference
      resolved to nothing (#225). Clipped rather than display:none, which would
      take it out of the tree it exists for. */
-  & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
-  & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-xl); color: var(--crisp-fg-primary); }
-  & .crisp-command-input::placeholder { color: var(--crisp-fg-muted); }
-  & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1) var(--crisp-space-2-5); display: flex; flex-direction: column; gap: var(--crisp-space-px); }
-  & .crisp-command-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-  & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding-inline: var(--crisp-space-2-5); border-radius: var(--crisp-radius-xl); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
-  & .crisp-command-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
-  & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
-  & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
-  & .crisp-command-group-label { padding: var(--crisp-space-2) var(--crisp-space-2-5) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
-  & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: var(--crisp-space-1); }
-  & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); }
-  & .crisp-command-footer-nav { display: flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
-  & .crisp-command-footer-action { display: flex; align-items: center; gap: var(--crisp-space-2); height: 28px; max-width: 60%; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
-  & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
-  & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
+    & .crisp-command-srlabel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+    & .crisp-command-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-xl); color: var(--crisp-fg-primary); }
+    & .crisp-command-input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-command-list { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-1) var(--crisp-space-2-5); display: flex; flex-direction: column; gap: var(--crisp-space-px); }
+    & .crisp-command-empty { padding: var(--crisp-space-8) var(--crisp-space-3); text-align: center; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
+    & .crisp-command-item { box-sizing: border-box; display: flex; align-items: center; gap: var(--crisp-space-2); height: 36px; padding-inline: var(--crisp-space-2-5); border-radius: var(--crisp-radius-xl); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); cursor: pointer; }
+    & .crisp-command-item svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
+    & .crisp-command-item[data-highlighted] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, transparent); }
+    & .crisp-command-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-command-item-shortcut { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--crisp-space-0-5); }
+    & .crisp-command-group-label { padding: var(--crisp-space-2) var(--crisp-space-2-5) var(--crisp-space-1); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-command-list > .crisp-command-group-label:first-child { padding-top: var(--crisp-space-1); }
+    & .crisp-command-footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; height: 44px; padding: 0 var(--crisp-space-2-5); border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-command-footer-nav { display: flex; align-items: center; gap: var(--crisp-space-1-5); font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    /* your-moon/crisp#953: bgBrandContrast, not bgBrandSolid --
+     the accent (#0298d9) only clears 3.23:1 with white; the darker sibling
+     clears 4.5:1+, same fix already applied to Button/Badge/Avatar (#897). */
+    & .crisp-command-footer-action { display: flex; align-items: center; gap: var(--crisp-space-2); height: 28px; max-width: 60%; padding: 0 var(--crisp-space-1) 0 var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-brand-contrast); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
+    & .crisp-command-footer-action:disabled { opacity: 0.5; cursor: default; }
+    & .crisp-command-footer-action-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-command-footer-key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: rgba(255,255,255,0.22); font-size: var(--crisp-text-xs); }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2680,7 +3023,7 @@
     [dir="rtl"] .crisp-comments-badge [data-rtl-flip] { transform: scaleX(-1); }
   
 .crisp-comments {
-  display: flex; flex-direction: column; box-sizing: border-box; width: 320px; height: 100%; background: var(--crisp-bg-surface); border-inline-start: 1px solid var(--crisp-border-subtle); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
+  display: flex; flex-direction: column; box-sizing: border-box; height: 100%; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     & * { box-sizing: border-box; }
     & .crisp-comments-head { display: flex; align-items: center; gap: var(--crisp-space-1); flex-shrink: 0; height: 49px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-4); }
     & .crisp-comments-headbtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
@@ -2690,13 +3033,21 @@
     & .crisp-comments-breadcrumb { display: flex; align-items: center; gap: var(--crisp-space-1); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-comments-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 var(--crisp-space-4); display: flex; flex-direction: column; gap: var(--crisp-space-4); }
     & .crisp-comments-body--pad-top { padding-top: var(--crisp-space-3); }
-    /* One comment row -- avatar 16px (Avatar size="sm"), 6px gap to the name/time line, 14px/600 name + 12px/500 63%-muted time, 14px/400 body two lines below. Hover actions fade in flush with the name line. .crisp-comments-row-head's own height: 20px (above) is a single
-       text-line's worth, on the same assumption .crisp-comments-title/ .crisp-comments-breadcrumb already act on higher up in this same recipe -- a name that doesn't fit wraps to two lines with nothing
+    /* One comment row -- avatar 16px (Avatar size="sm"), 6px gap to the
+       name/time line, 14px/600 name + 12px/500 63%-muted time, 14px/400 body
+       two lines below. Hover actions fade in flush with the name line.
+       .crisp-comments-row-head's own height: 20px (above) is a single
+       text-line's worth, on the same assumption .crisp-comments-title/
+       .crisp-comments-breadcrumb already act on higher up in this same
+       recipe -- a name that doesn't fit wraps to two lines with nothing
        reserving room for the second one, overflowing straight into the
-       body text underneath (found live: this app's own dev-bypass author name, an email long enough to wrap, sat on top of the comment's own
+       body text underneath (found live: this app's own dev-bypass author
+       name, an email long enough to wrap, sat on top of the comment's own
        body text). .crisp-comments-author gets the identical nowrap-
        ellipsis treatment those two already have, plus min-width: 0 so a
-       flex item is actually allowed to shrink below its own text's natural width in the first place; .crisp-comments-time gets flex-shrink: 0 so it's the name that gives, never the timestamp -- the same "one
+       flex item is actually allowed to shrink below its own text's natural
+       width in the first place; .crisp-comments-time gets flex-shrink: 0
+       so it's the name that gives, never the timestamp -- the same "one
        side shrinks, the other one doesn't" split PersonChip's own name/
        avatar pair already uses (crisp#668/#671). */
     & .crisp-comments-row { position: relative; display: flex; gap: var(--crisp-space-1-5); }
@@ -2706,16 +3057,13 @@
     & .crisp-comments-time { flex-shrink: 0; font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); white-space: nowrap; }
     & .crisp-comments-resolved-label { display: flex; align-items: center; gap: var(--crisp-space-1); margin-bottom: var(--crisp-space-1); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
     & .crisp-comments-body-text { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-regular); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
-
     /* Hover actions -- measured: 4 buttons, 28x28, radius 8, flush
        side-by-side (0 gap), transparent by default, 16px icon at 55% ink. */
     & .crisp-comments-row-actions { position: absolute; top: 0; inset-inline-end: 0; display: flex; opacity: 0; pointer-events: none; background: var(--crisp-bg-surface); }
-    & .crisp-comments-row:hover .crisp-comments-row-actions,
-    & .crisp-comments-row-actions:focus-within { opacity: 1; pointer-events: auto; }
+    & .crisp-comments-row:hover .crisp-comments-row-actions, & .crisp-comments-row-actions:focus-within { opacity: 1; pointer-events: auto; }
     & .crisp-comments-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s, color .12s; }
     & .crisp-comments-action:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-comments-action[data-active] { color: var(--crisp-bg-brand-solid); }
-
     /* Reactions -- measured: 28px pill, radius 8, subtle 4% ink fill,
        padding 4px 8px 4px 6px, gap 4px between the emoji glyph and count. */
     & .crisp-comments-reactions { display: flex; flex-wrap: wrap; gap: var(--crisp-space-1); margin-top: var(--crisp-space-1-5); }
@@ -2724,12 +3072,9 @@
     & .crisp-comments-reaction-add { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--crisp-radius-md); background: transparent; font-family: inherit; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; opacity: 0; transition: opacity .12s, background-color .12s; }
     & .crisp-comments-row:hover .crisp-comments-reaction-add { opacity: 1; }
     & .crisp-comments-reaction-add:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
-
     /* Reply-in-thread view -- an indented block of replies below the root. */
     & .crisp-comments-replies { display: flex; flex-direction: column; gap: var(--crisp-space-4); margin-top: var(--crisp-space-3); padding-inline-start: var(--crisp-space-4); border-inline-start: 1px solid var(--crisp-border-subtle); }
-
     & .crisp-comments-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--crisp-space-1); padding: var(--crisp-space-6) var(--crisp-space-4); text-align: center; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-size: var(--crisp-text-lg); }
-
     /* Composer -- measured: 14px/20px body text, 16px gap above the
        reply/mention icon row, Comment button 84x32 padding 6px 10px radius
        9 (= radius.lg) brand-solid fill, 14px/500 white label, opacity .4
@@ -2747,21 +3092,28 @@
        box-shadow, so this reuses that literal rather than re-deriving it.
        32px/radius.lg/6px-10px padding has no matching Button `size` yet
        (24/28/40 are the three that exist), so this stays hand-rolled instead
-       of stretching one of those. */
-    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-brand-solid); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-on-brand); cursor: pointer; opacity: 1; transition: opacity .12s, background-color .12s; }
-    & .crisp-comments-post:hover:not(:disabled) { background: var(--crisp-bg-brand-solid-pressed); }
+       of stretching one of those. your-moon/crisp#953:
+       bgBrandContrast, not bgBrandSolid -- the accent (#0298d9) only clears
+       3.23:1 with white; same fix already applied to Button/Badge/Avatar
+       (#897). Hover is a brightness filter on the new fill, matching that
+       PR's own Button primary treatment, not bgBrandSolidPressed. */
+    & .crisp-comments-post { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 6px var(--crisp-space-2-5); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-brand-contrast); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-on-brand); cursor: pointer; opacity: 1; transition: opacity .12s, filter .12s; }
+    & .crisp-comments-post:hover:not(:disabled) { filter: brightness(0.96); }
     & .crisp-comments-post:disabled { opacity: .4; cursor: default; }
-
     /* Filter menu -- measured: 220px, radius 12 (radius.xl), 4px padding,
        elevation.floating -- a plain reuse of crisp's own Menu, so no rules
-       live here; kept as a comment for the record. */
-
-    /* An inserted "@mention" chip in the composer -- same shape as
+       live here; kept as a comment for the record. */ /* An inserted "@mention" chip in the composer -- same shape as
        RichTextEditor's own `.crisp-rte-mention` (crisp#428), reused here
        rather than re-derived since it's the same atomic-chip affordance. */
     & .crisp-comments-mention { display: inline; padding: 0 2px; border-radius: 4px; background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); font-weight: var(--crisp-weight-medium); user-select: none; }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
+.crisp-comments--variant_drawer {
+  width: 320px; border-inline-start: 1px solid var(--crisp-border-subtle);
+}
+.crisp-comments--variant_pane {
+  width: 100%;
+}
 
 @media (prefers-reduced-motion: reduce) {
   .crisp-comments, .crisp-comments * {
@@ -2903,7 +3255,9 @@
     & .crisp-listpage-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); white-space: nowrap; }
     /* #641: trailing (View settings / New) has to reach the toolbar's own
        inline-end edge on its own -- the only thing pushing it there used
-       to be .crisp-listpage-count's margin-inline-start: auto, which a consumer with no count badge (TasksTable, measured live: trailing sat right after leading, nowhere near the row's own right edge)
+       to be .crisp-listpage-count's margin-inline-start: auto, which a
+       consumer with no count badge (TasksTable, measured live: trailing
+       sat right after leading, nowhere near the row's own right edge)
        never renders. A bare margin-inline-start: auto here is safely
        overridden by the more specific rule right below whenever count IS
        present, so the two cases don't fight -- count's own auto margin
@@ -2933,6 +3287,74 @@
   }
 }
 
+.crisp-memberssettings {
+  & .crisp-memberssettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); font-family: var(--crisp-font-sans); }
+    & .crisp-memberssettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
+    & .crisp-memberssettings-title { font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-memberssettings-desc { font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); margin: 0; }
+    /* Segmented Members/Teams switcher -- measured: 28px pills, radius 8,
+       4px gap, 6px icon-label gap, 14/500 label, selected bg bgSubtle +
+       inset borderSubtle ring, unselected transparent + a flat 63%-opacity
+       fgPrimary mix (measured rgba(0,0,0,.63) on the live page, not the
+       solid fgMuted token — same alpha technique this file's table header
+       already uses). */
+    & .crisp-memberssettings-tabpair { display: inline-flex; align-items: center; gap: 4px; }
+    & .crisp-memberssettings-tab { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: none; box-shadow: inset 0 0 0 1px transparent; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-memberssettings-tab svg { flex-shrink: 0; }
+    & .crisp-memberssettings-tab:hover:not([data-selected]) { color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
+    & .crisp-memberssettings-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    /* Toolbar row: search grows, Filter + Invite sit trailing -- measured
+       32px height on all three, search radius 9 with a 6% ink ring,
+       Filter/Invite radius 9 with the button drop-shadow pairing. */
+    & .crisp-memberssettings-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-memberssettings-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--crisp-space-1-5); height: 32px; padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border-radius: 9px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-muted); }
+    & .crisp-memberssettings-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-memberssettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-search input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-memberssettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px transparent, 0 0 2px 0 rgba(28,40,64,.18), 0 1px 3px 0 rgba(0,0,0,.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-filterbtn:hover { background: var(--crisp-bg-raised); }
+    /* your-moon/crisp#979: bgBrandContrast, not bgBrandSolid -- the accent
+       (#0298d9) only clears 3.23:1 with white; the darker sibling clears
+       4.5:1+, same fix already applied to Button/Badge/Avatar (#897) and
+       TableToolbar/Dialog/Command/Comments/AuthShell (#953/#961), which
+       explicitly flagged this button as found-not-fixed. */
+    & .crisp-memberssettings-invitebtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: var(--crisp-bg-brand-contrast); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px color-mix(in srgb, var(--crisp-bg-brand-contrast) 12%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--crisp-bg-brand-contrast) 8%, transparent); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-invitebtn:hover { filter: brightness(0.95); }
+    /* Table wrapper -- measured card: radius 12, 1px borderSubtle, 40px
+       rows, header label 12/500/63%-opacity fgPrimary. */
+    & .crisp-memberssettings-table-wrap { border-radius: 12px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+    & .crisp-memberssettings-table { width: 100%; border-collapse: collapse; font-family: inherit; }
+    & .crisp-memberssettings-table th { height: 32px; padding: 0 var(--crisp-space-4); text-align: start; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); border-bottom: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); }
+    & .crisp-memberssettings-table td { height: 40px; padding: 0 var(--crisp-space-4); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-memberssettings-table tr:last-child td { border-bottom: none; }
+    & .crisp-memberssettings-user { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-memberssettings-avatarimg { width: 24px; height: 24px; border-radius: var(--crisp-radius-full); object-fit: cover; }
+    /* Name + email sit on ONE line, not stacked -- confirmed live: both spans
+       share the same y and the same 14px size, only the email's colour
+       differs (a flat 63%-opacity fgPrimary mix, not a smaller muted font). */
+    & .crisp-memberssettings-usermeta { display: flex; align-items: baseline; gap: var(--crisp-space-2); min-width: 0; }
+    & .crisp-memberssettings-usermeta > span:first-child { flex-shrink: 0; }
+    & .crisp-memberssettings-useremail { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-regular); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-memberssettings-kebab { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-memberssettings-kebab:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-teamspanel { display: flex; align-items: center; justify-content: center; padding: var(--crisp-space-8) 0; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
+    /* Invite dialog fields -- measured 708x386 dialog, radius 16; the
+       "Invite as"/"Add to team" selects are 32/34px with a flat 1px
+       6%-ink border and 9/10px radius respectively (Attio's own two
+       selects don't share one radius). */
+    & .crisp-memberssettings-invitefield { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }
+    & .crisp-memberssettings-invitelabel { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-memberssettings, .crisp-memberssettings * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
 
     .crisp-navitem-shortcut { display: flex; align-items: baseline; justify-content: space-between; gap: var(--crisp-space-3); }
     .crisp-navitem-shortcut-desc { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); line-height: 16px; white-space: nowrap; }
@@ -2956,6 +3378,29 @@
   }
 }
 
+.crisp-notificationssettings {
+  & .crisp-notificationssettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); font-family: var(--crisp-font-sans); }
+    & .crisp-notificationssettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
+    & .crisp-notificationssettings-title { font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-notificationssettings-desc { font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); margin: 0; }
+    & .crisp-notificationssettings-section { display: flex; flex-direction: column; gap: var(--crisp-space-4); }
+    & .crisp-notificationssettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); margin: 0; }
+    /* Daily digest card: one bordered 12px-radius row. */
+    & .crisp-notificationssettings-digestcard { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-6); padding: var(--crisp-space-2) var(--crisp-space-3); border: 1px solid var(--crisp-border-subtle); border-radius: 12px; background: var(--crisp-bg-surface); }
+    & .crisp-notificationssettings-digesttext { display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-notificationssettings-rowtitle { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-notificationssettings-rowdesc { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    /* Collaboration matrix: a bordered card, header row + N body rows. */
+    & .crisp-notificationssettings-matrix { border: 1px solid var(--crisp-border-subtle); border-radius: 12px; overflow: hidden; background: var(--crisp-bg-surface); }
+    & .crisp-notificationssettings-matrixhead { display: flex; align-items: center; gap: var(--crisp-space-3); padding: 0 var(--crisp-space-4); height: 40px; border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-notificationssettings-matrixhead-about { display: flex; align-items: center; gap: var(--crisp-space-1-5); flex: 1; min-width: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-notificationssettings-matrixhead-col { display: flex; align-items: center; justify-content: center; gap: var(--crisp-space-1-5); width: 64px; flex-shrink: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-notificationssettings-matrixrow { display: flex; align-items: center; gap: var(--crisp-space-3); padding: var(--crisp-space-2) var(--crisp-space-4); min-height: 52px; }
+    & .crisp-notificationssettings-matrixrow + .crisp-notificationssettings-matrixrow { border-top: 1px solid var(--crisp-border-subtle); }
+    & .crisp-notificationssettings-matrixrow-about { display: flex; flex-direction: column; gap: var(--crisp-space-1); flex: 1; min-width: 0; }
+    & .crisp-notificationssettings-matrixrow-col { display: flex; align-items: center; justify-content: center; width: 64px; flex-shrink: 0; }
+}
+
 .crisp-objectsettings {
   & .crisp-objectsettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); }
     & .crisp-objectsettings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--crisp-space-4); }
@@ -2970,22 +3415,22 @@
     & .crisp-objectsettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-menuRow); padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
     & .crisp-objectsettings-filterbtn:hover { background: var(--crisp-bg-raised); }
     /* Object / attribute icon tile — Attio's own squircle (measured
-       border-radius: 30%, not a scale token: it's a proportional radius tied to the tile's own size, unlike every other radius crisp uses,
+       border-radius: 30%, not a scale token: it's a proportional radius
+       tied to the tile's own size, unlike every other radius crisp uses,
        which is a fixed px). */
     & .crisp-objectsettings-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 16px; height: 16px; border-radius: 30%; color: var(--crisp-fg-on-brand); }
     & .crisp-objectsettings-icon--lg { width: 48px; height: 48px; border-radius: 16px; }
-
     /* "Standard"/"Custom" type badge and the muted "No records" cell —
        plain text, not a Badge pill (measured: transparent background). */
     & .crisp-objectsettings-typebadge { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-neutral-soft); }
     & .crisp-objectsettings-muted { color: var(--crisp-fg-muted); }
-
     /* Attribute-type option row (icon + label + optional trailing badge),
        composed as a Select option's `label` ReactNode. */
     & .crisp-objectsettings-typeoption { display: flex; align-items: center; gap: var(--crisp-space-2); width: 100%; min-width: 0; }
     & .crisp-objectsettings-typeoption-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-objectsettings-typeoption-badge { flex-shrink: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-brand-soft); }
-    /* Create-attribute dialog's AI-autofill row and the submit button's ⌘↵ hint (measured off the same dialog, same shape as Dialog's own
+    /* Create-attribute dialog's AI-autofill row and the submit button's
+       ⌘↵ hint (measured off the same dialog, same shape as Dialog's own
        .crisp-dialog-submit-key, kept local rather than reaching into
        another component's scoped classes). */
     & .crisp-objectsettings-aiautofill { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }
@@ -3041,6 +3486,21 @@
   display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--crisp-bg-surface); font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--crisp-fg-primary);
     & * { box-sizing: border-box; }
     & .crisp-recordpage-topbar { display: flex; align-items: center; gap: var(--crisp-space-2); height: 44px; flex-shrink: 0; padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); }
+    /* #624: expanding a peek to its full record keeps a hybrid header
+       (Close/Previous/Next/counter) instead of reverting to the plain
+       breadcrumb above -- measured live on a real expanded record: 49px
+       tall (not 44px), 8px/10px padding, same borderSubtle hairline. Same
+       tokens as product/recordpanel's own already-shipped toolbar, not
+       new values -- this is the same row, reused in a second component. */
+    & .crisp-recordpage-topbar[data-peek] { height: 49px; padding: var(--crisp-space-2) var(--crisp-space-2-5); }
+    & .crisp-recordpage-peekbar { display: flex; align-items: center; }
+    & .crisp-recordpage-peek-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
+    & .crisp-recordpage-peek-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-recordpage-peek-pager { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-inline-start: var(--crisp-space-3); }
+    & .crisp-recordpage-peek-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; cursor: pointer; }
+    & .crisp-recordpage-peek-navbtn:hover:not(:disabled) { background: var(--crisp-bg-raised); }
+    & .crisp-recordpage-peek-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+    & .crisp-recordpage-peek-counter { margin-inline-start: var(--crisp-space-3); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpage-crumbs { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
     & .crisp-recordpage-crumb { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0 calc(-1 * var(--crisp-space-1-5)) 0 0; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); cursor: pointer; }
     & .crisp-recordpage-crumb:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
@@ -3058,6 +3518,17 @@
     & .crisp-recordpage-resizer::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -4px; width: 9px; }
     & .crisp-recordpage-resizer::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: -1px; width: 2px; background: transparent; transition: background-color .12s ease; }
     & .crisp-recordpage-resizer:hover::after, & .crisp-recordpage-resizer[data-active]::after { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 55%, transparent); }
+    /* #930: RecordDetails' own standalone resize handle -- same visible
+       hit-slop/line-highlight shape as .crisp-recordpage-resizer just above,
+       just absolutely positioned at the trailing edge instead of a 0-width
+       flex sibling, since RecordDetails always returns a single root (the
+       same internal-strip placement RecordPanel's own resize handle uses,
+       mirrored to the opposite edge -- this column is leading, RecordPanel
+       is trailing). */
+    & .crisp-recordpage-section[data-resizable] { position: relative; }
+    & .crisp-recordpage-detailresize { position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 9px; cursor: col-resize; z-index: 5; touch-action: none; }
+    & .crisp-recordpage-detailresize::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-end: 3px; width: 2px; background: transparent; transition: background-color .12s ease; }
+    & .crisp-recordpage-detailresize:hover::after, & .crisp-recordpage-detailresize[data-active]::after { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 55%, transparent); }
     & .crisp-recordpage-entity { display: flex; align-items: center; gap: var(--crisp-space-2); padding: var(--crisp-space-1) var(--crisp-space-1) var(--crisp-space-2); }
     & .crisp-recordpage-entity-logo { width: 32px; height: 32px; border-radius: 30%; flex-shrink: 0; object-fit: cover; background: var(--crisp-bg-raised); }
     & .crisp-recordpage-entity-name { flex: 0 1 auto; min-width: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -3073,7 +3544,8 @@
     & .crisp-recordpage-quickbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-section { padding-top: var(--crisp-space-2); }
     & .crisp-recordpage-section-title { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); padding: var(--crisp-space-1); }
-    /* main-area section headers (Highlights / Activity / Emails / Notes / Tasks) are 14px; the left column's (Record Details / Lists) stay 12px. */
+    /* main-area section headers (Highlights / Activity / Emails / Notes / Tasks)
+       are 14px; the left column's (Record Details / Lists) stay 12px. */
     & .crisp-recordpage-main .crisp-recordpage-section-title { font-size: var(--crisp-text-lg); }
     & .crisp-recordpage-detailhead { display: flex; align-items: center; gap: var(--crisp-space-0-5); margin-bottom: var(--crisp-space-3); padding-inline-end: var(--crisp-space-0-5); }
     & .crisp-recordpage-collapse { display: inline-flex; align-items: center; gap: 2px; flex: 1; min-width: 0; margin: 0; border: none; background: none; padding: var(--crisp-space-1); border-radius: var(--crisp-radius-md); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); letter-spacing: -0.12px; color: var(--crisp-fg-muted); cursor: pointer; text-align: start; }
@@ -3088,7 +3560,8 @@
     & .crisp-recordpage-noresults { padding: var(--crisp-space-1-5) var(--crisp-space-1); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
     /* A caller-supplied `sections` grouping (#528) is not an Attio-measured
        shape (its own Details column is flat) -- this heading reuses
-       .crisp-recordpage-section-title's own type treatment verbatim, just spaced from the group above it. */
+       .crisp-recordpage-section-title's own type treatment verbatim, just
+       spaced from the group above it. */
     & .crisp-recordpage-fieldsection-title { margin-top: var(--crisp-space-3); }
     & .crisp-recordpage-morevalues { display: inline-flex; align-items: center; padding: 0; margin: 0; border: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); cursor: pointer; }
     & .crisp-recordpage-morevalues:hover { color: var(--crisp-fg-primary); }
@@ -3104,25 +3577,38 @@
     & .crisp-recordpage-field-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-recordpage-field-value { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); padding-top: 2px; line-height: 20px; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-field-value[data-editable] { cursor: pointer; }
-    /* the click-to-edit trigger is a real <button> (keyboard-operable), reset back to plain inline text and made a flex-wrap container of its own -- FieldValue can render several chips (tags), which still need to wrap the way they did before this had a button around them at all. It wraps only FieldValue, never the error slot beside it (see the component's own comment) -- NOT `display: contents`, which
+    /* the click-to-edit trigger is a real <button> (keyboard-operable),
+       reset back to plain inline text and made a flex-wrap container of its
+       own -- FieldValue can render several chips (tags), which still need
+       to wrap the way they did before this had a button around them at
+       all. It wraps only FieldValue, never the error slot beside it (see
+       the component's own comment) -- NOT `display: contents`, which
        drops a button's accessible semantics in some engines. */
     & .crisp-recordpage-edit-trigger { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); margin: 0; padding: 0; border: none; background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; }
     & .crisp-recordpage-empty { color: var(--crisp-fg-muted); }
     /* #431: measured live on app.attio.com's record page Details column --
-       clicking a field's value opens a plain, borderless field exactly filling the value's own box (no border, no background, no
+       clicking a field's value opens a plain, borderless field exactly
+       filling the value's own box (no border, no background, no
        box-shadow), same font as the value it replaces (hence `font:
-       inherit`, not a restated size/weight). A field row's own hover tint above already carries the "this is interactive" affordance; the pending/error treatment isn't Attio-measured -- it reuses the same
-       tokens DataTable's identical states already use (opacity 0.5, `bgDanger`), per #385/#430. */
+       inherit`, not a restated size/weight). A field row's own hover tint
+       above already carries the "this is interactive" affordance; the
+       pending/error treatment isn't Attio-measured -- it reuses the same
+       tokens DataTable's identical states already use (opacity 0.5,
+       `bgDanger`), per #385/#430. */
     & .crisp-recordpage-edit { display: block; width: 100%; margin: 0; padding: 0; border: none; border-radius: var(--crisp-radius-sm); background: none; box-shadow: none; outline: none; font: inherit; color: inherit; }
-    /* not Attio-measured (its own field shows no focus ring either, caret only) -- kept for real keyboard users, the same brand ring every other crisp field already shows on focus (DataTable's identical
+    /* not Attio-measured (its own field shows no focus ring either, caret
+       only) -- kept for real keyboard users, the same brand ring every
+       other crisp field already shows on focus (DataTable's identical
        .crisp-datatable-edit:focus, e.g.). */
     & .crisp-recordpage-edit:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-recordpage-edit:disabled { opacity: 0.5; cursor: not-allowed; }
     & .crisp-recordpage-edit-pending { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpage-edit-error { flex-basis: 100%; margin-top: var(--crisp-space-0-5); font-size: var(--crisp-text-sm); color: var(--crisp-bg-danger); }
-    /* #457: an `editor: "select"` field's at-rest chip -- same shape as RecordsTable's own `.crisp-recordstable-status[-dot]` (already
+    /* #457: an `editor: "select"` field's at-rest chip -- same shape as
+       RecordsTable's own `.crisp-recordstable-status[-dot]` (already
        measured against Attio there), but its own classes: that pair is
-       scoped under `.crisp-recordstable`'s own recipe root, so reusing the classnames verbatim here would resolve to nothing. */
+       scoped under `.crisp-recordstable`'s own recipe root, so reusing the
+       classnames verbatim here would resolve to nothing. */
     & .crisp-recordpage-status { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); min-width: 0; }
     & .crisp-recordpage-status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: var(--crisp-radius-full); }
     & .crisp-recordpage-edit-picker { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; }
@@ -3145,7 +3631,6 @@
     & .crisp-recordpage-hl-label { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); margin-bottom: var(--crisp-space-2-5); padding-inline-end: var(--crisp-space-4); }
     & .crisp-recordpage-hl-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--crisp-space-1); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-hl-value--empty { color: var(--crisp-fg-muted); font-weight: var(--crisp-weight-regular); }
-
     & .crisp-recordpage-feed { display: flex; flex-direction: column; }
     & .crisp-recordpage-feed-item { display: flex; align-items: flex-start; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2) 0; }
     & .crisp-recordpage-feed-dot { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: var(--crisp-radius-full); background: var(--crisp-bg-raised); color: var(--crisp-fg-muted); }
@@ -3154,7 +3639,6 @@
     & .crisp-recordpage-feed-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); margin-top: 2px; }
     & .crisp-recordpage-feed-more { align-self: flex-start; margin-top: var(--crisp-space-1); border: none; background: none; padding: var(--crisp-space-1) 0; color: var(--crisp-bg-brand-solid); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-feed-more:hover { text-decoration: underline; }
-
     & .crisp-recordpage-section-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-1); }
     & .crisp-recordpage-section-head .crisp-recordpage-section-title { padding: 0; }
     & .crisp-recordpage-section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-sm); background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); font-size: var(--crisp-text-xs); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -3162,7 +3646,6 @@
     & .crisp-recordpage-addbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1); height: 26px; padding: 0 var(--crisp-space-1-5); margin: 0; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); cursor: pointer; }
     & .crisp-recordpage-addbtn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-addbtn svg { flex-shrink: 0; }
-
     & .crisp-recordpage-composer { display: flex; flex-direction: column; gap: var(--crisp-space-2); padding: var(--crisp-space-2); border: 1px solid var(--crisp-border-default); border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpage-composer textarea { width: 100%; min-height: 56px; resize: vertical; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-recordpage-composer textarea:focus { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); border-radius: var(--crisp-radius-md); }
@@ -3172,23 +3655,29 @@
     & .crisp-recordpage-btn:hover { background: var(--crisp-bg-raised); }
     & .crisp-recordpage-btn--primary { box-shadow: none; background: var(--crisp-bg-brand-solid); color: var(--crisp-fg-on-brand); }
     & .crisp-recordpage-btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }
-
-    & .crisp-recordpage-note { display: flex; gap: var(--crisp-space-2-5); padding: var(--crisp-space-2-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
-    & .crisp-recordpage-note-body { flex: 1; min-width: 0; }
-    & .crisp-recordpage-note-head { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-bottom: var(--crisp-space-0-5); }
-    & .crisp-recordpage-note-author { font-size: var(--crisp-text-md); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
-    & .crisp-recordpage-note-time { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
-    & .crisp-recordpage-note-text { font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); white-space: pre-wrap; word-break: break-word; }
-
+    /* #871: one bordered card per note (border-radius.xl, borderSubtle),
+       not a flush divider-list row -- measured live on a real populated
+       note: the whole row is flex space-between, avatar+title+body on the
+       left (its own flex, gap.2), the relative time alone on the right.
+       The real DOM nests an inner clickable button (padding 6/8, radius.md)
+       inside an outer card (padding 4px, radius.xl) -- collapsed into this
+       one non-interactive div's own combined padding (2.5/3) since crisp's
+       NotesSection has no click-to-open behaviour to justify the extra
+       layer. The 6px gap between stacked cards is NOT independently
+       measured (this workspace only ever had one real note to check) --
+       a judgement call off the existing space scale, not a live value. */
+    & .crisp-recordpage-note { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-3); padding: var(--crisp-space-2-5) var(--crisp-space-3); border: 1px solid var(--crisp-border-subtle); border-radius: var(--crisp-radius-xl); }
+    & .crisp-recordpage-note + .crisp-recordpage-note { margin-top: var(--crisp-space-1-5); }
+    & .crisp-recordpage-note-left { display: flex; align-items: center; gap: var(--crisp-space-2); min-width: 0; overflow: hidden; }
+    & .crisp-recordpage-note-title { flex-shrink: 0; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-recordpage-note-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+    & .crisp-recordpage-note-time { flex-shrink: 0; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 50%, transparent); }
     & .crisp-recordpage-task { display: flex; align-items: flex-start; gap: var(--crisp-space-2); padding: var(--crisp-space-1-5) 0; border-top: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpage-task-text { flex: 1; min-width: 0; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); padding-top: 1px; }
     & .crisp-recordpage-task[data-done] .crisp-recordpage-task-text { text-decoration: line-through; color: var(--crisp-fg-muted); }
-
     & .crisp-recordpage-emptycard { display: flex; flex-direction: column; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-6) var(--crisp-space-3); border: 1px dashed var(--crisp-border-default); border-radius: var(--crisp-radius-xl); color: var(--crisp-fg-muted); font-size: var(--crisp-text-md); text-align: center; }
     & .crisp-recordpage-emptycard svg { color: var(--crisp-fg-muted); opacity: 0.7; }
-
     & .crisp-recordpage-action[data-active] svg { color: #f5b83d; fill: #f5b83d; }
-
     & .crisp-recordstable-tag { display: inline-flex; align-items: center; height: var(--crisp-size-chip); padding: 0 var(--crisp-space-1); border-radius: var(--crisp-radius-chip); font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-medium); white-space: nowrap; background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: color-mix(in srgb, var(--crisp-fg-primary) 82%, transparent); }
     & .crisp-recordstable-tag[data-tone="brand"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); }
     & .crisp-recordstable-tag[data-tone="success"] { background: color-mix(in srgb, var(--crisp-bg-success) 16%, transparent); color: color-mix(in srgb, var(--crisp-bg-success) 78%, var(--crisp-fg-primary)); }
@@ -3217,11 +3706,14 @@
        beneath (the same borderSubtle every other panel/row edge here
        already uses). Close keeps the existing transparent ghost button;
        Previous/Next/Open record are a distinct field-elevation style
-       (white fill, e.field's own ring+shadow, solid icon) -- measured as genuinely different chrome from Close, not a reuse. */
+       (white fill, e.field's own ring+shadow, solid icon) -- measured as
+       genuinely different chrome from Close, not a reuse. */
     & .crisp-recordpanel-toolbar { display: flex; align-items: center; height: 49px; flex-shrink: 0; padding: var(--crisp-space-2) var(--crisp-space-2-5); border-bottom: 1px solid var(--crisp-border-subtle); }
     & .crisp-recordpanel-toolbar-spacer { flex: 1; }
     & .crisp-recordpanel-pager { display: flex; align-items: center; gap: var(--crisp-space-1-5); margin-inline-start: var(--crisp-space-3); }
-    /* #413: "2 of 37 in All Companies" -- measured live, same toolbar row, right after Prev/Next. 12px/500, the same 63%-of-fgPrimary mix every other muted heading in this panel already uses. */
+    /* #413: "2 of 37 in All Companies" -- measured live, same toolbar row,
+       right after Prev/Next. 12px/500, the same 63%-of-fgPrimary mix every
+       other muted heading in this panel already uses. */
     & .crisp-recordpanel-counter { margin-inline-start: var(--crisp-space-3); font-size: 12px; font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & .crisp-recordpanel-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; padding: 0; border: none; border-radius: var(--crisp-radius-md); background: transparent; color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); font-family: inherit; cursor: pointer; transition: background-color .12s; }
     & .crisp-recordpanel-iconbtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
@@ -3229,26 +3721,36 @@
     & .crisp-recordpanel-navbtn:hover:not(:disabled) { background: var(--crisp-bg-raised); }
     & .crisp-recordpanel-navbtn:disabled { opacity: 0.4; cursor: not-allowed; }
     /* #413: measured live -- a 10px strip at the panel's own left edge,
-       cursor: col-resize (the issue's own repro calls it "ew-resize"; the actual computed value read off the live DOM is col-resize, the same cursor family under a different keyword). Kept fully inside the panel's own box, not extending past inset-inline-start: 0, so the
-       panel's own overflow: hidden (there for its rounded corners) never clips it. touch-action: none stops a touchscreen's own pan gesture
+       cursor: col-resize (the issue's own repro calls it "ew-resize";
+       the actual computed value read off the live DOM is col-resize, the
+       same cursor family under a different keyword). Kept fully inside the
+       panel's own box, not extending past inset-inline-start: 0, so the
+       panel's own overflow: hidden (there for its rounded corners) never
+       clips it. touch-action: none stops a touchscreen's own pan gesture
        from fighting the drag. */
     & .crisp-recordpanel-resize-handle { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 10px; cursor: col-resize; z-index: 1; touch-action: none; }
     & .crisp-recordpanel-resize-handle:hover, & .crisp-recordpanel-resize-handle:active { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); }
-
     & .crisp-recordpanel-header { display: flex; align-items: center; gap: var(--crisp-space-2); height: 52px; flex-shrink: 0; padding: 0 var(--crisp-space-3); }
     & .crisp-recordpanel-fav { width: 22px; height: var(--crisp-size-chip); border-radius: var(--crisp-radius-sm); flex-shrink: 0; object-fit: cover; background: var(--crisp-bg-raised); }
     & .crisp-recordpanel-title { flex: 1; min-width: 0; font-size: var(--crisp-text-xl); font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-
     & .crisp-recordpanel-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--crisp-space-2) var(--crisp-space-3); }
-
-    /* #448: measured live on app.attio.com's peek (hover a Companies row, click "Open preview"). Section label reads identically for both Highlights and Activity: 14px/500, the same 63%-of-fgPrimary mix RecordPage's own field-label already uses (product/recordpage's .crisp-recordpage-field-label) -- one more surface landing on the same measured "muted section heading" colour. */
+    /* #448: measured live on app.attio.com's peek (hover a Companies row,
+       click "Open preview"). Section label reads identically for both
+       Highlights and Activity: 14px/500, the same 63%-of-fgPrimary mix
+       RecordPage's own field-label already uses (product/recordpage's
+       .crisp-recordpage-field-label) -- one more surface landing on the
+       same measured "muted section heading" colour. */
     & .crisp-recordpanel-section { padding: var(--crisp-space-2) var(--crisp-space-1) 0; }
     & .crisp-recordpanel-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-2); height: 20px; margin-bottom: var(--crisp-space-2); }
     & .crisp-recordpanel-section-label { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
-    /* "View all" -- measured 10px/400, a lighter mix than the section label (55%, not 63%) -- its own distinct, honestly-measured value, not a reuse of a nearby one that happened to be close. */
+    /* "View all" -- measured 10px/400, a lighter mix than the section label
+       (55%, not 63%) -- its own distinct, honestly-measured value, not a
+       reuse of a nearby one that happened to be close. */
     & .crisp-recordpanel-section-action { border: none; background: none; padding: 0; font-family: inherit; font-size: 10px; font-weight: var(--crisp-weight-regular); color: color-mix(in srgb, var(--crisp-fg-primary) 55%, transparent); cursor: pointer; }
     & .crisp-recordpanel-section-action:hover { color: var(--crisp-fg-primary); }
-    /* Highlights: a 2-column grid of label+icon+value cards, no card chrome at all (no border/background/radius/shadow -- confirmed on the live DOM: every highlight's computed style is fully transparent).
+    /* Highlights: a 2-column grid of label+icon+value cards, no card
+       chrome at all (no border/background/radius/shadow -- confirmed on
+       the live DOM: every highlight's computed style is fully transparent).
        8px row/column gap; two rows measured "233x86" inside 473px content
        width is exactly (473 - 8) / 2. */
     & .crisp-recordpanel-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: var(--crisp-space-2); }
@@ -3257,27 +3759,33 @@
     & .crisp-recordpanel-highlight-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     & .crisp-recordpanel-highlight-label svg { flex-shrink: 0; color: var(--crisp-fg-muted); }
     & .crisp-recordpanel-highlight-value { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); overflow: hidden; text-overflow: ellipsis; }
-
     /* Activity is a consumer-supplied slot (crisp has no activity-feed
        model of its own to render) -- this only wraps it with the measured
        section heading above. */
     & .crisp-recordpanel-activity { font-size: var(--crisp-text-lg); }
-
     /* #413: collapsed Emails/Notes/Tasks below Activity -- measured live: a
-       473px-wide row (the panel's own content width, 497 minus its 12px/8px side insets), 20px tall, 14px/500 solid fgPrimary label (NOT the 63% mix Highlights/Activity headings use -- this is body text, not a muted heading), a trailing count. padding "0 8px 0 12px" measured on the row itself; reproduced here as the trigger's own padding, since
-       the trigger IS the row (a plain div, not a button, when there's no content to expand into -- matches the empty ("Emails 0") row measured live, which has no expand affordance at all). */
+       473px-wide row (the panel's own content width, 497 minus its 12px/8px
+       side insets), 20px tall, 14px/500 solid fgPrimary label (NOT the 63%
+       mix Highlights/Activity headings use -- this is body text, not a
+       muted heading), a trailing count. padding "0 8px 0 12px" measured on
+       the row itself; reproduced here as the trigger's own padding, since
+       the trigger IS the row (a plain div, not a button, when there's no
+       content to expand into -- matches the empty ("Emails 0") row
+       measured live, which has no expand affordance at all). */
     & .crisp-recordpanel-sections { display: flex; flex-direction: column; padding-top: var(--crisp-space-2); }
     & .crisp-recordpanel-section-trigger { display: flex; align-items: center; gap: var(--crisp-space-1); width: 100%; height: 20px; padding: 0 var(--crisp-space-2) 0 var(--crisp-space-3); border: none; background: none; font-family: inherit; text-align: start; cursor: pointer; }
     & .crisp-recordpanel-section-trigger-inert { cursor: default; }
     & .crisp-recordpanel-section-row-label { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
     /* The count wasn't captured with its own background/pill chrome in the
        live measurement (only its text: 14px, a "tertiary" internal variant
-       name that doesn't map to anything crisp defines) -- muted text next to the label, not an invented badge shape. */
+       name that doesn't map to anything crisp defines) -- muted text next
+       to the label, not an invented badge shape. */
     & .crisp-recordpanel-section-row-count { font-size: var(--crisp-text-lg); color: var(--crisp-fg-muted); }
     & .crisp-recordpanel-section-chevron { margin-inline-start: auto; flex-shrink: 0; color: var(--crisp-fg-muted); transition: transform .15s ease; }
     & .crisp-recordpanel-section-chevron[data-open] { transform: rotate(180deg); }
     & .crisp-recordpanel-section-content { padding: var(--crisp-space-2) var(--crisp-space-2) var(--crisp-space-2) var(--crisp-space-3); }
-    /* #329: an optional slot for record actions (e.g. Edit). Reuses the header's own measured values rather than inventing new ones -- the
+    /* #329: an optional slot for record actions (e.g. Edit). Reuses the
+       header's own measured values rather than inventing new ones -- the
        same horizontal inset (space.3), the same hairline border token
        (borderSubtle, flipped to border-top since this sits at the opposite
        edge), and the header/body gap (space.2) for its own vertical padding
@@ -3305,13 +3813,28 @@
     & .crisp-rte-body h1 { font-size: var(--crisp-text-xl); line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.3px; margin-top: var(--crisp-space-4); }
     & .crisp-rte-body h2 { font-size: 17px; line-height: 24px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.2px; margin-top: var(--crisp-space-3); }
     & .crisp-rte-body h3 { font-size: var(--crisp-text-lg); line-height: 20px; font-weight: var(--crisp-weight-semibold); margin-top: var(--crisp-space-2-5); }
-    /* #575: a consumer's CSS reset (e.g. Tailwind preflight's un-scoped ul, ol { list-style: none }
-    , specificity 0,0,1) was winning every list marker outright -- this rule set padding but never declared list-style-type, so there was no higher-specificity value (this selector is 0,1,1) to beat the reset with. Split into two single-selector rules, each declaring its own marker type, rather than the old single comma-joined rule ( .crisp-rte-body ul, & .crisp-rte-body ol ) the issue flagged as malformed. #611: padding-inline-start re-measured live once CRUD on the measurement workspace was allowed (a "zz-parity" note with a bulleted list, a nested bulleted list, and a numbered list) -- Attio's own <ul>/<ol> measures 36px (getComputedStyle,
+    /* #575: a consumer's CSS reset (e.g. Tailwind preflight's un-scoped
+       ul, ol { list-style: none }, specificity 0,0,1) was winning every
+       list marker outright -- this rule set padding but never declared
+       list-style-type, so there was no higher-specificity value (this
+       selector is 0,1,1) to beat the reset with. Split into two
+       single-selector rules, each declaring its own marker type, rather
+       than the old single comma-joined rule ( .crisp-rte-body ul, &
+       .crisp-rte-body ol ) the issue flagged as malformed.
+       #611: padding-inline-start re-measured live once CRUD on the
+       measurement workspace was allowed (a "zz-parity" note with a
+       bulleted list, a nested bulleted list, and a numbered list) --
+       Attio's own <ul>/<ol> measures 36px (getComputedStyle,
        ~36.1353px), not the 20px placeholder #575 shipped with no real
-       content to check against. 36px isn't in tokens/scale.ts (steps stop at 24px, jump to 32px) and is a single component-intrinsic value, so it stays a raw px per AUTHORING.md's golden rule 4b
+       content to check against. 36px isn't in tokens/scale.ts (steps
+       stop at 24px, jump to 32px) and is a single component-intrinsic
+       value, so it stays a raw px per AUTHORING.md's golden rule 4b
        rather than being rounded to an existing token or added to the
        shared scale. Marker colour (currentColor via the already-measured
-       fgPrimary, confirmed to equal Attio's measured rgb(16,17,18) == #101112 exactly) and the ~4px li-to-li gap (the existing li margin-top rule below) were re-checked at the same time and already matched -- only the padding was wrong. Attio doesn't vary
+       fgPrimary, confirmed to equal Attio's measured rgb(16,17,18) ==
+       #101112 exactly) and the ~4px li-to-li gap (the existing li
+       margin-top rule below) were re-checked at the same time and
+       already matched -- only the padding was wrong. Attio doesn't vary
        marker type for a nested list either (nested <ul> is disc too,
        not circle), which this already doesn't attempt. */
     & .crisp-rte-body ul { list-style-type: disc; padding-inline-start: 36px; }
@@ -3322,10 +3845,13 @@
     & .crisp-rte-body a { color: var(--crisp-bg-brand-solid); text-decoration: underline; text-underline-offset: 2px; }
     & .crisp-rte-body strong { font-weight: var(--crisp-weight-semibold); }
     & .crisp-rte-body img { display: block; max-width: 100%; border-radius: var(--crisp-radius-md); }
-    /* Not measured against Attio (#428) — nothing in a read-only pass over app.attio.com had a live @mention rendered to read computed styles from, and typing one to create one is off-limits there. Reused verbatim from the one measured "brand" tag/chip this repo already has (RecordsTable/MultiSelect's [data-tone="brand"]) rather than
+    /* Not measured against Attio (#428) — nothing in a read-only pass over
+       app.attio.com had a live @mention rendered to read computed styles
+       from, and typing one to create one is off-limits there. Reused
+       verbatim from the one measured "brand" tag/chip this repo already
+       has (RecordsTable/MultiSelect's [data-tone="brand"]) rather than
        inventing a new color or shape. */
     & .crisp-rte-mention { display: inline; border-radius: var(--crisp-radius-chip); padding: 0 var(--crisp-space-1); background: color-mix(in srgb, var(--crisp-bg-brand-solid) 14%, transparent); color: color-mix(in srgb, var(--crisp-bg-brand-solid) 82%, var(--crisp-fg-primary)); font-weight: var(--crisp-weight-medium); cursor: default; }
-
     & .crisp-rte-toolbar { position: fixed; z-index: 70; display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: translate(-50%, -100%); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-toolbar { @starting-style { opacity: 0; } }
     & .crisp-rte-tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--crisp-space-1); min-width: 30px; height: 28px; padding: 0 7px; margin: 0; border: none; border-radius: var(--crisp-radius-md); background: none; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); font-family: inherit; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); cursor: pointer; transition: background-color .1s; }
@@ -3333,13 +3859,11 @@
     & .crisp-rte-tool:hover { background: color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-primary); }
     & .crisp-rte-tool[data-active], & .crisp-rte-tool[aria-expanded="true"] { background: color-mix(in srgb, var(--crisp-bg-brand-solid) 12%, transparent); color: var(--crisp-bg-brand-solid); }
     & .crisp-rte-tool-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--crisp-border-subtle); }
-
     & .crisp-rte-swatchpanel { position: fixed; z-index: 71; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--crisp-space-1); width: 168px; padding: var(--crisp-space-1-5); border-radius: var(--crisp-radius-lg); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); transform: translate(-50%, var(--crisp-space-1-5)); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-swatchpanel { @starting-style { opacity: 0; } }
     & .crisp-rte-swatch { width: 28px; height: 28px; padding: 0; margin: 0; border: none; border-radius: 50%; background: none; font-family: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 10%, transparent); cursor: pointer; }
     & .crisp-rte-swatch--none { background: var(--crisp-bg-surface); position: relative; }
     & .crisp-rte-swatch--none::after { content: ""; position: absolute; inset: 6px; border-top: 1.5px solid color-mix(in srgb, var(--crisp-fg-primary) 40%, transparent); transform: rotate(-45deg); }
-
     & .crisp-rte-blockmenu { position: fixed; z-index: 71; box-sizing: border-box; width: 356px; padding: 0; border-radius: var(--crisp-radius-xl); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-popover), 0 0 0 1px var(--crisp-shadow-popover1), 0 4px 8px -4px var(--crisp-shadow-popover2), 0 4px 12px -2px var(--crisp-shadow-popover3); opacity: 1; transition: opacity 0.1s ease; }
     & .crisp-rte-blockmenu { @starting-style { opacity: 0; } }
     & .crisp-rte-blockmenu-search { display: flex; align-items: center; gap: var(--crisp-space-1-5); padding: var(--crisp-space-2-5) var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
@@ -3439,9 +3963,16 @@
   
 .crisp-savedviews {
   position: relative; display: inline-flex; font-family: var(--crisp-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* crisp/#772 follow-up, re-measured live 2026-09-25 in the trigger's
-       actual position (Attio's real view bar, next to View settings -- fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255) exact) with elevation.field's 3-layer shadow, the same raised
+       actual position (Attio's real view bar, next to View settings --
+       fixed there in #766/#768/#778): white (bgSurface, rgb(255,255,255)
+       exact) with elevation.field's 3-layer shadow, the same raised
        chrome View settings and Import/Export both carry
-       (tabletoolbar.recipe.ts's own --raised, not reused here directly since this is a separate recipe/component, but the identical measured values). Supersedes the original #555 measurement (rgb(246,247,247), reused as bgRaised -- a flat grey fill with no shadow at all), which was wrong: this trigger was never re-checked once it moved into its real view-bar position. */
+       (tabletoolbar.recipe.ts's own --raised, not reused here directly
+       since this is a separate recipe/component, but the identical measured
+       values). Supersedes the original #555 measurement (rgb(246,247,247),
+       reused as bgRaised -- a flat grey fill with no shadow at all), which
+       was wrong: this trigger was never re-checked once it moved into its
+       real view-bar position. */
     & .crisp-savedviews-trigger { box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: var(--crisp-size-row); margin: 0; padding: var(--crisp-space-1) var(--crisp-space-1-5); border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); cursor: pointer; white-space: nowrap; transition: background-color .12s ease; }
     & .crisp-savedviews-trigger:hover, & .crisp-savedviews-trigger[data-open] { background: color-mix(in srgb, var(--crisp-fg-primary) 4%, var(--crisp-bg-surface)); }
     & .crisp-savedviews-trigger-icon { flex-shrink: 0; display: inline-flex; width: var(--crisp-size-icon); height: var(--crisp-size-icon); }
@@ -3474,14 +4005,14 @@
     & .crisp-settingsshell-back svg { color: var(--crisp-fg-muted); }
     & .crisp-settingsshell-back:hover svg { color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-search { display: flex; align-items: center; gap: var(--crisp-space-2); height: 32px; margin-bottom: var(--crisp-space-2); padding: 0 var(--crisp-space-2-5); border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-border-default); color: var(--crisp-fg-muted); }
-    /* The field box owns the ring, so focus has to move it -- the inner input kills its own outline. Measured live: a focused field's
+    /* The field box owns the ring, so focus has to move it -- the inner
+       input kills its own outline. Measured live: a focused field's
        input carries box-shadow: none while its wrapper carries
        inset 0 0 0 1px #266df0. */
     & .crisp-settingsshell-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
     & .crisp-settingsshell-search svg { flex-shrink: 0; }
     & .crisp-settingsshell-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-search input::placeholder { color: var(--crisp-fg-muted); }
-
     & .crisp-settingsshell-groups { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--crisp-space-2-5); }
     & .crisp-settingsshell-group { display: flex; flex-direction: column; gap: 1px; }
     & .crisp-settingsshell-group-label { padding: var(--crisp-space-1) var(--crisp-space-2); font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
@@ -3492,7 +4023,6 @@
     & .crisp-settingsshell-item[data-active] { background: var(--crisp-bg-raised); font-weight: var(--crisp-weight-medium); }
     & .crisp-settingsshell-item[data-active] svg { color: var(--crisp-fg-primary); }
     & .crisp-settingsshell-empty { padding: var(--crisp-space-3) var(--crisp-space-2); font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); }
-
     & .crisp-settingsshell-content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; padding: var(--crisp-space-6) var(--crisp-space-8); }
     [dir="rtl"] & [data-rtl-flip] { transform: scaleX(-1); }
 }
@@ -3600,7 +4130,8 @@
     & [data-swatch="light"] .crisp-themepicker-preview-bar:not(:nth-child(1)), & [data-swatch="system"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #eeeff1; }
     & [data-swatch="light"] .crisp-themepicker-preview-main, & [data-swatch="system"] .crisp-themepicker-preview-main { background: #ffffff; }
     & [data-swatch="light"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar, & [data-swatch="system"] .crisp-themepicker-preview-main .crisp-themepicker-preview-bar { background: #eeeff1; }
-    /* Dark swatch colours -- always for "dark", and for "system" only when the OS itself reports dark. */
+    /* Dark swatch colours -- always for "dark", and for "system" only
+       when the OS itself reports dark. */
     & .crisp-themepicker-preview[data-swatch="dark"] { border: 1px solid #1c1d1f; background: #0e0f10; }
     & [data-swatch="dark"] .crisp-themepicker-preview-bar:not(:nth-child(1)) { background: #1c1d1f; }
     & [data-swatch="dark"] .crisp-themepicker-preview-main { background: #0a0a0a; }
@@ -3645,3 +4176,34 @@
     transition-duration: 0.01ms !important;
   }
 }
+
+.crisp-workspacegeneralsettings {
+  & .crisp-workspacegeneralsettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); font-family: var(--crisp-font-sans); }
+    & .crisp-workspacegeneralsettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
+    & .crisp-workspacegeneralsettings-title { font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-workspacegeneralsettings-desc { font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); margin: 0; }
+    & .crisp-workspacegeneralsettings-section { display: flex; flex-direction: column; gap: var(--crisp-space-4); }
+    & .crisp-workspacegeneralsettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: var(--crisp-weight-semibold); color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-workspacegeneralsettings-sectionhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--crisp-space-4); }
+    & .crisp-workspacegeneralsettings-sectionhead-text { display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    /* Logo row: a tile + helper text + "Upload logo" button. */
+    & .crisp-workspacegeneralsettings-logorow { display: flex; align-items: center; gap: var(--crisp-space-4); }
+    & .crisp-workspacegeneralsettings-logohelp { font-size: var(--crisp-text-sm); color: var(--crisp-fg-muted); }
+    & .crisp-workspacegeneralsettings-logotext { display: flex; flex-direction: column; align-items: flex-start; gap: var(--crisp-space-1); }
+    /* Name + Slug sit side by side, each ~half the content width. */
+    & .crisp-workspacegeneralsettings-fieldrow { display: flex; gap: var(--crisp-space-4); }
+    & .crisp-workspacegeneralsettings-fieldrow > * { flex: 1; min-width: 0; }
+    & .crisp-workspacegeneralsettings-slugfield { display: flex; align-items: center; gap: var(--crisp-space-1-5); }
+    & .crisp-workspacegeneralsettings-slugfield > :first-child { flex: 1; min-width: 0; }
+    & .crisp-workspacegeneralsettings-copybtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: var(--crisp-radius-md); background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-workspacegeneralsettings-copybtn:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    /* Export-data empty state -- measured: 14/500/63%-opacity, centred in a
+       40px row, no border of its own (the Table wrapper already draws it). */
+    & .crisp-workspacegeneralsettings-emptyrow { padding: var(--crisp-space-2-5) var(--crisp-space-4); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); text-align: center; }
+    /* Danger zone: a red-tinted bordered row, distinct from every other
+       card on the page. */
+    & .crisp-workspacegeneralsettings-dangerrow { display: flex; align-items: center; justify-content: space-between; gap: var(--crisp-space-6); padding: var(--crisp-space-3) var(--crisp-space-4); border: 1px solid color-mix(in srgb, var(--crisp-bg-danger) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--crisp-bg-danger) 6%, transparent); }
+    & .crisp-workspacegeneralsettings-dangertext { display: flex; flex-direction: column; gap: var(--crisp-space-1); }
+    & .crisp-workspacegeneralsettings-rowtitle { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-workspacegeneralsettings-dangerwarning { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); }
+}