@scattered-light/loomiere-mojave 0.24.1 → 0.41.0

package/dist/exports/design-system/components/bundle.css

@@ -6733,7 +6733,7 @@
 }
 
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -6743,7 +6743,7 @@
 /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
    frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -7187,7 +7187,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -7300,7 +7300,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -7368,7 +7368,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7489,7 +7489,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7498,7 +7498,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7700,7 +7700,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7808,7 +7808,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7979,7 +7979,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox - Mojave Theme
  * Sizes follow the label: the box is the icon size one tier above the label's text
  * tier (like a button's icon) and the check mark one tier below it.
@@ -8136,7 +8136,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -8152,7 +8152,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -8268,7 +8268,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8753,7 +8753,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Context Menu - Mojave Theme
  *
  * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
@@ -8922,7 +8922,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -9068,7 +9068,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -9201,7 +9201,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -9262,7 +9262,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -9304,7 +9304,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -9324,7 +9324,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9471,7 +9471,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9620,7 +9620,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Menubar - Mojave Theme
  *
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -9813,7 +9813,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9876,7 +9876,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -10296,7 +10296,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -10387,7 +10387,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -10450,7 +10450,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -10615,7 +10615,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10732,7 +10732,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10809,7 +10809,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Radio - Mojave Theme
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
  * dot is a share of the circle (check.dot-scale).
@@ -10961,7 +10961,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -11043,7 +11043,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -11334,7 +11334,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -11362,7 +11362,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11528,7 +11528,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Switch - Mojave Theme
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11694,7 +11694,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11830,7 +11830,39 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* variant="sheet" (on the Tabs.List): the tabs of a working paper. The selected tab is a filled
+ * tab in the Sheet tab colors, and the list keeps the sheet's heavy rule under all of them. */
+.TabsList[data-variant='sheet'] {
+  gap: var(--sl-space-1);
+  border-bottom: var(--sl-sheet-rule-width) solid var(--sl-sheet-rule-color);
+}
+
+.TabsList[data-variant='sheet'] .TabsTab {
+  height: var(--sl-sheet-tab-height);
+  padding-block: 0;
+  padding-inline: var(--sl-space-4);
+  gap: var(--sl-space-2);
+  border-bottom-width: 0;
+  border-radius: var(--sl-sheet-tab-radius) var(--sl-sheet-tab-radius) 0 0;
+  font-weight: 600;
+  color: var(--sl-text-primary);
+}
+
+.TabsList[data-variant='sheet'] .TabsTab[data-active],
+.TabsList[data-variant='sheet'] .TabsTab[data-active]:hover:not([data-disabled]) {
+  background: var(--sl-sheet-tab-background);
+  color: var(--sl-sheet-tab-color);
+}
+
+/* A count after the label ("Register 7"), in the figures face. */
+.TabsList[data-variant='sheet'] .TabsTabCount {
+  font-family: var(--sl-font-figures-condense-font-family, var(--sl-font-family-mono, ui-monospace, monospace));
+  font-size: var(--sl-font-size-sm);
+  font-weight: var(--sl-font-weight-normal);
+  opacity: 0.8;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -12066,7 +12098,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -12178,7 +12210,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -12240,7 +12272,7 @@ textarea.FieldControl {
   outline-offset: var(--sl-focus-outline-offset-inset);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -12302,7 +12334,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -12363,7 +12395,7 @@ textarea.FieldControl {
 }
 
 /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Badge
  *
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -12468,7 +12500,70 @@ textarea.FieldControl {
   height: var(--sl-badge-dot-base);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* A removable chip (onRemove): the label, then a small close button at the end. The button is
+ * the badge's height so its hit area fills the end of the pill, and the end padding drops so
+ * the glyph sits where the padding was. The badge stays a span; only the button is
+ * interactive, and it carries the focus ring. */
+.Badge[data-removable] {
+  padding-inline-end: 0;
+}
+
+.BadgeRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-badge-height-condense);
+  height: 100%;
+  margin: 0;
+  margin-inline-start: calc(var(--sl-badge-gap-condense) * -1);
+  padding: 0;
+  border: 0;
+  border-radius: var(--sl-radius-pill);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.BadgeRemove:hover {
+  background: var(--sl-e-bg-hover);
+}
+
+.BadgeRemove:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.BadgeRemove:disabled {
+  cursor: default;
+  opacity: var(--sl-button-opacity-disabled);
+}
+
+.Badge[data-size='minimize'] .BadgeRemove {
+  width: var(--sl-badge-height-minimize);
+  margin-inline-start: calc(var(--sl-badge-gap-minimize) * -1);
+}
+
+.Badge[data-size='base'] .BadgeRemove {
+  width: var(--sl-badge-height-base);
+  margin-inline-start: calc(var(--sl-badge-gap-base) * -1);
+}
+
+/* shape="square": a ruled status tag, not a pill. */
+.Badge[data-shape='square'] {
+  border-radius: var(--sl-radius-base);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 700;
+}
+
+/* A provisional tag: the same badge with a dashed border (DRAFT on a line that is not final). */
+.Badge[data-border='dashed'] {
+  border-style: dashed;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /*
  * DatePicker: a field that opens a calendar for one date or a period.
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -13058,7 +13153,7 @@ textarea.FieldControl {
   flex-basis: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Money field
  *
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -13403,7 +13498,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* ListDetail
  *
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -13530,7 +13625,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Splitter
  *
  * Two or more panels and a handle between them. Not a Base UI part. It follows the
@@ -13738,7 +13833,7 @@ textarea.FieldControl {
   background: var(--sl-border-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* EmptyState
  *
  * The block a page, pane, table, list or popup shows when it has nothing to show.
@@ -13760,12 +13855,14 @@ textarea.FieldControl {
  * Text is a whole style per size, not a font-size on its own. Compact is a table
  * row or a popup, so the title is subtitle-condense (bold, the row's size) and the
  * description is body-condense. Standard is a pane: title-condense, the section
- * heading, with body-base under it. Spacious is a page: title-magnify, the next
- * title up, still body-base so the sentence doesn't grow with the heading.
+ * heading, with body-base under it. Spacious is a page: title-amplify, the page
+ * title size, still body-base so the sentence doesn't grow with the heading. A brand
+ * that raises title-condense (Tulvo sets it to xl) would otherwise get a spacious
+ * title smaller than the standard one.
  * Unselected is the quiet pane beside a list, so it drops the circle, the icon is
  * text-tertiary, and the title steps down one tier: subtitle-minimize where the
  * others use a condense style (there is no title at minimize), and title-condense
- * where the others use title-magnify.
+ * where the others use title-amplify.
  *
  * Compact is a row (icon, text, actions) centered across the cell. Standard and
  * spacious are a column. They take margin-block: auto so a flex or grid column
@@ -13934,11 +14031,11 @@ textarea.FieldControl {
 }
 
 .EmptyState[data-size='spacious'] .EmptyStateTitle {
-  font-family: var(--sl-font-title-magnify-font-family);
-  font-size: var(--sl-font-title-magnify-font-size);
-  font-weight: var(--sl-font-title-magnify-font-weight);
-  line-height: var(--sl-font-title-magnify-line-height);
-  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
+  font-family: var(--sl-font-title-amplify-font-family);
+  font-size: var(--sl-font-title-amplify-font-size);
+  font-weight: var(--sl-font-title-amplify-font-weight);
+  line-height: var(--sl-font-title-amplify-line-height);
+  letter-spacing: var(--sl-font-title-amplify-letter-spacing);
 }
 
 .EmptyState[data-size='spacious'] .EmptyStateMedia {
@@ -13994,7 +14091,265 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* ============================================
+   REPORT LAYOUT
+   ============================================
+ *
+ * A working paper before it has anything on it: a report that has not been run, a schedule
+ * with no lines yet. It sits where the result will appear, left-aligned, never centered.
+ * Top row: a square icon box, the title and one sentence, and the main action at the end of
+ * the row with an optional caption under it (wraps under the text when narrow). Then the
+ * guide: numbered steps and a few terms in two columns split 1.3 : 1 by a hairline, one
+ * column when the block is narrow. Last, a bar-only preview of the result's shape.
+ *
+ * The icon box is square with the control radius and a strong border, not the subtle circle:
+ * the same mark as the report's card, so the glyph is the accent text color. The title steps
+ * up to title-magnify, the size of a page section heading, since it heads the sheet.
+ *
+ * The block is its own inline-size container, so the two columns fold by its width, not the
+ * viewport's: a report sheet beside an open side panel folds as soon as it is narrow.
+ */
+
+.EmptyState[data-layout='report'] {
+  container-type: inline-size;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: var(--sl-space-6);
+  max-width: 61.25rem;
+  margin-block: 0;
+  padding: var(--sl-space-7);
+  text-align: start;
+}
+
+.EmptyStateHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--sl-space-4) var(--sl-space-5);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateMedia:not([data-custom]) {
+  width: var(--sl-space-12);
+  height: var(--sl-space-12);
+  border: var(--sl-stroke-default) solid var(--sl-border-strong);
+  border-radius: var(--sl-radius-control);
+  background: var(--sl-surface-raised);
+  color: var(--sl-text-accent);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyState[data-layout='report'] .EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-maximize);
+  height: var(--sl-icon-size-maximize);
+  font-size: var(--sl-icon-size-maximize);
+}
+
+/* error and done keep their status tone on the glyph; the box stays plain. */
+.EmptyState[data-layout='report'] .EmptyStateMedia[data-status='error']:not([data-custom]) {
+  color: var(--sl-status-error);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateMedia[data-status='success']:not([data-custom]) {
+  color: var(--sl-status-success);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateText {
+  flex: 1 1 20rem;
+  align-items: flex-start;
+  gap: var(--sl-space-1);
+  max-width: none;
+}
+
+.EmptyState[data-layout='report'] .EmptyStateTitle {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateDescription {
+  max-width: var(--sl-measure-base);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateActions {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: var(--sl-space-1-5);
+}
+
+.EmptyStateActionRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--sl-empty-actions-gap);
+}
+
+.EmptyStateActionCaption {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+/* The guide: steps and terms, ruled off from the top row. */
+.EmptyStateGuide {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+  border-top: var(--sl-stroke-default) solid var(--sl-border-strong);
+}
+
+.EmptyStateGuide > * {
+  padding-block-start: var(--sl-space-4);
+}
+
+.EmptyStateGuide > * + * {
+  margin-inline-start: var(--sl-space-6);
+  padding-inline-start: var(--sl-space-6);
+  border-inline-start: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+
+/* One child fills the row. */
+.EmptyStateGuide > :only-child {
+  grid-column: 1 / -1;
+}
+
+.EmptyStateSection {
+  min-width: 0;
+}
+
+.EmptyStateSectionTitle {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  margin: 0;
+  color: var(--sl-text-primary);
+}
+
+.EmptyStateSteps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-3);
+  margin: var(--sl-space-2) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.EmptyStateStep {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-space-3);
+}
+
+.EmptyStateStep b,
+.EmptyStateStep strong {
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+.EmptyStateStepNumber {
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-figures-condense-font-weight);
+  line-height: var(--sl-font-figures-condense-line-height);
+  letter-spacing: var(--sl-font-figures-condense-letter-spacing);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--sl-space-7);
+  height: var(--sl-space-7);
+  margin-block-start: calc(var(--sl-space-0-5) * -1);
+  border: var(--sl-stroke-default) solid var(--sl-border-strong);
+  border-radius: var(--sl-radius-control);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+.EmptyStateStepText {
+  min-width: 0;
+}
+
+.EmptyStateTerms {
+  display: flex;
+  flex-direction: column;
+  margin: var(--sl-space-2) 0 0;
+}
+
+.EmptyStateTerm {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--sl-space-2);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+
+.EmptyStateTerm dt {
+  font-weight: var(--sl-font-weight-semibold);
+  color: var(--sl-text-primary);
+}
+
+.EmptyStateTerm dd {
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+.EmptyStatePreview {
+  min-width: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.EmptyStatePreviewCaption {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  margin: var(--sl-space-1-5) 0 0;
+  color: var(--sl-text-secondary);
+}
+
+/* Narrow: one column, the terms under the steps with a hairline between. */
+@container (max-width: 45rem) {
+  .EmptyStateGuide {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .EmptyStateGuide > * + * {
+    margin-inline-start: 0;
+    padding-inline-start: 0;
+    border-inline-start: 0;
+    margin-block-start: var(--sl-space-4);
+    border-top: var(--sl-stroke-default) solid var(--sl-border-subtle);
+  }
+
+  .EmptyState[data-layout='report'] .EmptyStateActions {
+    align-items: flex-start;
+  }
+
+  .EmptyStateActionRow {
+    justify-content: flex-start;
+  }
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Table - Mojave Theme
  *
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -14275,18 +14630,249 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
-/* Collection
+/* A statement's footer totals (DataTable totalRows) read like its own total rows: the label in the
+ * body face and sentence case, not in the caps of its header, and no tray band. */
+.Table[data-look='statement'] tfoot tr[data-total] > *,
+.Table[data-look='statement'][data-header-style] tfoot tr[data-total] > * {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--sl-text-primary);
+  background: transparent;
+}
+.Table[data-look='statement'] tfoot tr[data-total='grand'] > *,
+.Table[data-look='statement'][data-header-style] tfoot tr[data-total='grand'] > * {
+  font-weight: 700;
+}
+.Table[data-look='statement'][data-density='compact'] tfoot tr[data-total] > * {
+  font-size: 14px;
+}
+.Table[data-look='statement'] tfoot tr[data-total] > [data-align='end'],
+.Table[data-look='statement'][data-header-style] tfoot tr[data-total] > [data-align='end'] {
+  font-family: var(--sl-font-figures-base-font-family);
+}
+
+/* Statement rows: data-look="statement" (DataTable look="statement") draws a financial statement or
+ * schedule as an open table on its sheet, and each row looks by its data-kind. One rule for every
+ * report, so a report never styles its own rows:
  *
- * DataTable, DataList, the toolbar and the pagination, in one place so the two views
- * share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes.
- * Each section is its own file so the design system can name the part. This file brings them in.
+ *   header    No fill. Caps 12px/600 column names, one dark rule under it. A <small> in a header is
+ *             a second line (the Entity under "1040"). data-header="hidden" keeps it for screen
+ *             readers only, as on a statement with one Total column.
+ *   section   Heads the lines under it: caps 13px/700, no fill, no rule, 40px, text on the bottom.
+ *             A link beside the label (.TableSectionLabel) takes the same caps in the accent color.
+ *   group     A shaded band that carries its own figures (an account in Holdings): tray fill, 42px,
+ *             subtle rules above and below, caps 13px/700 label, figures 600. Its lines sit flush.
+ *   line      Rows without a kind, or kind "line": 36px (taller with a second line), 15px body,
+ *             15px figures, a faint rule under each. Indented past a section label (--statement-indent).
+ *   subtotal  Also "total": 40px, 600, label indented 8px, a dark rule over the figure cells only.
+ *   grand     46px, 700, a dark rule across the row and a double rule under each figure.
+ *   note      Explains the total above ("All holdings, before filters"): 14px secondary, no rule.
+ *   heading   A block's head inside a long list (a ledger account): 600.
+ *   provisional  A line that is not final yet (a Draft's provisional unclassified amount): a line with a
+ *             faint diagonal hatch. Put a dashed Badge ("DRAFT") beside its name to say why.
  *
- * The selection bar replaces the trailing controls (filters, sort, actions) and leaves
- * the tabs and the search where they are, so selecting rows does not grow the toolbar.
+ * data-density="compact" (DataTable density="compact") is the small version, for a table inside a
+ * detail panel or a drawer: 30px lines, 14px text and figures, 11px headers, 12px padding.
+ *
+ * Padding: --statement-padding-start (18px) at the row start, --statement-padding-end (12px)
+ * after the last figure, --statement-indent (14px) for lines under a section. Set them on the table.
+ */
+.Table[data-look='statement'] {
+  --statement-padding-start: 18px;
+  --statement-padding-end: 12px;
+  --statement-indent: 14px;
+  --sl-table-cell-padding-inline: var(--statement-padding-start);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.Table[data-look='statement'] tr > :last-child {
+  padding-inline-end: var(--statement-padding-end);
+}
+.Table[data-look='statement'] > thead th {
+  height: 40px;
+  padding-block: 0 8px;
+  background: transparent;
+  border-top: 0;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-text-primary);
+  vertical-align: bottom;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  color: var(--sl-text-primary);
+}
+.Table[data-look='statement'] > thead th small {
+  display: block;
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--sl-text-secondary);
+}
+.Table[data-look='statement'][data-header='hidden'] > thead > tr > th {
+  height: 0;
+  padding: 0;
+  border: 0;
+  font-size: 0;
+  line-height: 0;
+  overflow: hidden;
+}
+.Table[data-look='statement'] > tbody > tr > * {
+  height: 36px;
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--sl-text-primary);
+  background: transparent;
+  border-top: 0;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+.Table[data-look='statement'] > tbody > tr > [data-align='end'] {
+  font-family: var(--sl-font-figures-base-font-family);
+  white-space: nowrap;
+}
+@media (hover: hover) {
+  .Table[data-look='statement'] > tbody > tr:is(:not([data-kind]), [data-kind='line']):hover > * {
+    background: var(--sl-surface-tray);
+  }
+}
+.Table[data-look='statement']:has(tr[data-kind='section']) > tbody > tr:is(:not([data-kind]), [data-kind='line']) > th > * {
+  margin-inline-start: var(--statement-indent);
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='section'] > * {
+  height: 40px;
+  padding-block: 6px 4px;
+  vertical-align: bottom;
+  border-bottom: 0;
+}
+.Table[data-look='statement'] > tbody > tr:is([data-kind='section'], [data-kind='group']) > th {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='group'] > * {
+  height: 42px;
+  font-weight: 600;
+  background: var(--sl-surface-tray);
+  border-top: var(--sl-stroke-default) solid var(--sl-border-default);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-border-default);
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='group'] + tr > * {
+  border-top: 0;
+}
+.Table[data-look='statement'] > tbody > tr:is([data-kind='subtotal'], [data-kind='total']) > * {
+  height: 40px;
+  font-weight: 600;
+  border-top: var(--sl-stroke-default) solid transparent;
+  border-bottom: 0;
+}
+.Table[data-look='statement'] > tbody > tr:is([data-kind='subtotal'], [data-kind='total']) > td[data-align='end'] {
+  border-top-color: var(--sl-text-primary);
+}
+.Table[data-look='statement'] > tbody > tr:is([data-kind='subtotal'], [data-kind='total']) > th > * {
+  margin-inline-start: 8px;
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='grand'] > * {
+  height: 46px;
+  font-weight: 700;
+  border-top: var(--sl-stroke-default) solid var(--sl-text-primary);
+  border-bottom: 0;
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='grand'] > td[data-align='end']:not(:empty) {
+  border-bottom: 3px double var(--sl-text-primary);
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='grand'] + tr[data-kind='section'] > * {
+  height: 48px;
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='note'] > * {
+  height: 40px;
+  border-bottom: 0;
+  font-size: 14px;
+  color: var(--sl-text-secondary);
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='note'] > [data-align='end'] {
+  font-size: 15px;
+}
+.Table[data-look='statement'] > tbody > tr[data-kind='heading'] > * {
+  font-weight: 600;
+}
+/* A section label with a link beside it: "INVESTMENT ACTIVITY  OPEN THE SCHEDULE". */
+.TableSectionLabel {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 12px;
+}
+.TableSectionLabel :is(a, button) {
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: var(--sl-text-accent);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+}
+
+/* Provisional: a line that is not final yet, hatched so it reads as provisional at a glance. */
+.Table[data-look='statement'] > tbody > tr[data-kind='provisional'] > * {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent 0 6px,
+    var(--sl-surface-tray) 6px 12px
+  );
+}
+
+/* Statement rows keep 6px above and below their content, so a row with a second line (a memo, a party
+ * under a description) doesn't touch its rules. A one-line row stays at its kind's height. */
+.Table[data-look='statement'] > :is(tbody, tfoot) > tr > * {
+  padding-block: 6px;
+}
+
+/* Compact density: a small table inside a detail panel or a drawer. */
+.Table[data-density='compact'] {
+  --sl-table-row-height: 30px;
+  --sl-table-header-height: 30px;
+}
+.Table[data-look='statement'][data-density='compact'] {
+  --statement-padding-start: 12px;
+  --statement-padding-end: 12px;
+  --statement-indent: 10px;
+}
+.Table[data-density='compact'] > thead th {
+  height: 30px;
+  padding-block: 0 6px;
+  font-size: 11px;
+}
+.Table[data-density='compact'] > :is(tbody, tfoot) > tr > * {
+  height: 30px;
+  font-size: 14px;
+}
+.Table[data-look='statement'][data-density='compact'] > tbody > tr:is([data-kind='subtotal'], [data-kind='total'], [data-kind='grand'], [data-kind='note'], [data-kind='section']) > * {
+  height: 32px;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* Collection
+ *
+ * DataTable, DataList, the toolbar and the pagination, in one place so the two views
+ * share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes.
+ * Each section is its own file so the design system can name the part. This file brings them in.
+ *
+ * The selection bar replaces the trailing controls (filters, sort, actions) and leaves
+ * the tabs and the search where they are, so selecting rows does not grow the toolbar.
  */
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Collection toolbar
  *
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -14498,7 +15084,7 @@ textarea.FieldControl {
   margin-inline-start: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* DataTable additions on top of .Table.
  *
  * Sort buttons fill the header cell and inherit its hover, so old aria-sort markup keeps
@@ -14702,7 +15288,100 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* Placeholder rows (placeholderRows): the table's shape before there is data. The real column
+ * headers in the tertiary text color, then plain bars where the values will be: border-subtle
+ * bars, border-default on subtotal rows so the section rhythm shows. 8px bars at the cell's
+ * alignment, so a figures column's bars hug the end like its numbers will. No hover, no
+ * pointer: the table is aria-hidden and nothing in it works. */
+.DataTable[data-placeholder] {
+  pointer-events: none;
+  user-select: none;
+}
+
+.DataTable[data-placeholder] thead th {
+  color: var(--sl-text-tertiary);
+}
+
+.DataTable[data-placeholder] td {
+  line-height: 0;
+}
+
+.DataTablePlaceholderBar {
+  display: inline-block;
+  max-inline-size: 100%;
+  block-size: var(--sl-space-2);
+  border-radius: var(--sl-radius-minimal);
+  background: var(--sl-border-subtle);
+  vertical-align: middle;
+}
+
+.DataTable[data-placeholder] [data-placeholder-row='subtotal'] .DataTablePlaceholderBar {
+  background: var(--sl-border-default);
+}
+
+/* On a statement the row name is a button (the row header); it reads as the row's text. */
+.Table[data-look='statement'] .CollectionRowButton {
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+}
+
+/* Expandable rows (getRowDetail): an expand button in a narrow first column, the size of the small
+ * disclosure, and a spacer of the same width on rows without detail. The open row's detail fills a
+ * panel row under it, across every column, on the tray with a quiet rule. */
+.DataTable :is(th, td).DataTableDetailColumn {
+  inline-size: calc(var(--sl-collection-disclosure-size-small) + var(--sl-table-cell-padding-inline));
+  padding-inline-end: 0;
+}
+
+.DataTable .DataTableDetailToggle,
+.DataTable .DataTableDetailSpacer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--sl-collection-disclosure-size-small);
+  block-size: var(--sl-collection-disclosure-size-small);
+  vertical-align: middle;
+  color: var(--sl-collection-disclosure-color);
+}
+
+.DataTable .DataTableDetailToggle > .material-symbols-outlined {
+  font-size: var(--sl-icon-size-base);
+}
+
+.DataTable tr[data-expanded] > * {
+  background: var(--sl-surface-tray);
+  border-bottom-color: transparent;
+}
+
+.DataTable > tbody > tr.DataTableDetailRow > td.DataTableDetail {
+  height: auto;
+  padding: var(--sl-space-2) var(--sl-space-4) var(--sl-space-4) calc(var(--sl-collection-disclosure-size-small) + var(--sl-space-2) + var(--sl-table-cell-padding-inline));
+  background: var(--sl-surface-tray);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-border-default);
+  vertical-align: top;
+  white-space: normal;
+}
+
+@media (hover: hover) {
+  .DataTable > tbody > tr.DataTableDetailRow:hover > * {
+    background: var(--sl-surface-tray);
+  }
+}
+
+/* A total row's note ("Journal entries aren't in these totals"): quiet text beside the figures. */
+.DataTable .DataTableTotalNote {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: 13px;
+  font-weight: 400;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--sl-text-secondary);
+  white-space: normal;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* DataList
  *
  * The same rows as the table, in one container with the table's borders, hover, selected
@@ -14844,7 +15523,7 @@ textarea.FieldControl {
   transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Collection cards
  *
  * The page of a collection as a grid. Columns fill the width, none narrower than
@@ -14869,7 +15548,7 @@ textarea.FieldControl {
   flex: 1 1 auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Pagination
  *
  * Not tied to a collection. Anything with a page, a page count and a total can use it.
@@ -14894,7 +15573,37 @@ textarea.FieldControl {
   margin: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* The summary on the left, the page buttons on the right. */
+.CollectionPagination [data-part='summary'] {
+  margin-inline-end: auto;
+  font-family: var(--sl-font-code-base-font-family, monospace);
+}
+
+/* Page numbers: small square buttons in the figures face; the current page is filled. */
+.CollectionPagination [data-part='pages'] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-space-1);
+}
+
+.CollectionPagination [data-part='page'] {
+  min-width: var(--sl-control-height-sm);
+  height: var(--sl-control-height-sm);
+  padding-inline: var(--sl-space-2);
+  font-family: var(--sl-font-code-base-font-family, monospace);
+}
+
+.CollectionPagination [data-part='gap'] {
+  padding-inline: var(--sl-space-1);
+}
+
+.CollectionPagination [data-part='page'][data-current] {
+  background: var(--sl-text-primary);
+  border-color: var(--sl-text-primary);
+  color: var(--sl-surface-raised);
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* EditableList
  *
  * One table at every width, so a field is not submitted twice. Under the stack width each
@@ -14993,7 +15702,7 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Sheet
  *
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -15111,7 +15820,7 @@ textarea.FieldControl {
   border-top: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* StatFigure
  *
  * One large figure with a caps label above and a caption under it. The label is
@@ -15172,7 +15881,47 @@ textarea.FieldControl {
   color: var(--sl-stat-figure-caption-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* StatBand
+ *
+ * The headline figures of a display page, in a band of their own: equal cells side by side, a 1px
+ * border, the sheet's heavy rule on top (sheet.rule-width), and a StatFigure (size sm) in each cell.
+ * The cells wrap to more rows when the band is narrow; each cell is at least 11rem wide.
+ * A figure wrapped in a link takes the accent color and its own double underline.
+ */
+
+.StatBand {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  margin: 0;
+  border: var(--sl-stroke-default) solid var(--sl-border-default);
+  border-top: var(--sl-sheet-rule-width) solid var(--sl-text-primary);
+  background: var(--sl-surface-raised);
+}
+
+.StatBand > .StatBandCell {
+  display: flex;
+  padding: var(--sl-space-3) var(--sl-space-4);
+  border-inline-end: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+
+.StatBand > .StatBandCell:last-child {
+  border-inline-end: 0;
+}
+
+.StatBand .StatBandCell .StatFigureValue :is(a, button) {
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  color: var(--sl-text-accent);
+  text-decoration: none;
+  border-bottom: 3px double currentColor;
+  cursor: pointer;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* StatCard
  *
  * A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures
@@ -15334,7 +16083,7 @@ textarea.FieldControl {
   white-space: nowrap;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* DescriptionList
  *
  * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
@@ -15412,7 +16161,7 @@ textarea.FieldControl {
   text-align: end;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* FormGrid
  *
  * Fields on a grid. Columns are as wide as the space allows up to --form-grid-columns
@@ -15449,7 +16198,7 @@ textarea.FieldControl {
   align-self: end;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
 /* Notice
  *
  * A message in the page: a thick leading edge and a tinted ground. data-status picks the
@@ -15505,87 +16254,1490 @@ textarea.FieldControl {
   --notice-ground: var(--sl-surface-tray);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
-/* Spinner
- *
- * A ring that turns: the track in the subtle border, the moving arc in the accent border.
- * Sizes are the icon tiers, so a spinner can stand in for an icon. Reduced motion slows it.
- */
+/* The row layout (heading, tag or action): the tag, then the heading over the text, then one action
+ * at the end, centered on the row. The action wraps under the text when the notice is narrow. */
+.Notice[data-layout='row'] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-2) var(--sl-space-3);
+  padding-block: var(--sl-space-3);
+}
 
-.Spinner {
-  --spinner-size: var(--sl-icon-size-maximize);
-  display: inline-block;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  width: var(--spinner-size);
-  height: var(--spinner-size);
-  border: max(2px, calc(var(--spinner-size) / 9)) solid var(--sl-border-subtle);
-  border-top-color: var(--sl-border-accent);
-  border-radius: 50%;
-  animation: spinner-turn 0.9s linear infinite;
+.Notice .NoticeTag {
+  flex: none;
+  align-self: flex-start;
 }
 
-.Spinner[data-size='condense'] { --spinner-size: var(--sl-icon-size-condense); }
-.Spinner[data-size='base'] { --spinner-size: var(--sl-icon-size-base); }
-.Spinner[data-size='magnify'] { --spinner-size: var(--sl-icon-size-magnify); }
+.Notice .NoticeBody {
+  flex: 1 1 20rem;
+  min-width: 0;
+}
 
-@keyframes spinner-turn {
-  to {
-    transform: rotate(360deg);
-  }
+.Notice .NoticeBody > * {
+  margin: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .Spinner {
-    animation-duration: 3s;
-  }
+.Notice .NoticeHeading {
+  font-weight: var(--sl-font-weight-semibold);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
-/* AppBar
+.Notice .NoticeAction {
+  flex: none;
+  margin-inline-start: auto;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* ChecklistNotice
  *
- * The bar across the top of an app window, one row on a line in the rule color. The line is
- * app-bar.border-width while rule.width is 0, and the thicker of the two once a brand turns the
- * rule on, so an ink-rule brand gets the working-paper rule under its app bar.
- * AppBarSpacer pushes what follows it to the end. A vertical Separator inside is a short
- * divider between groups of icon actions. Tokens: app-bar.* (tokens/component/app-bar.json).
+ * A Notice with a list of pass/fail rows. The title is subtitle-condense; each row is a mark
+ * (check or close) and the label in body-condense, with an optional detail line in the
+ * secondary color. Rows are split by a hairline. A passed row's mark is the success color,
+ * a failed one's the error color, so the two differ in lightness as well as hue in every
+ * theme; the visually hidden "Done" / "Not done" carries the state for assistive tech.
+ *
+ * look="sheet" (data-look) is the working-paper version, for a check list in a drawer or panel:
+ * the sheet surface (sheet.background, sheet.border, sheet.rule on top) with no status tint,
+ * the tag and title as a header row over a hairline, 15px rows split by a faint rule, and each
+ * mark a 22px filled circle: success-dark with a check, accent-dark with "!". An item's
+ * content (the form that resolves it) sits under its row in a box with the accent edge on the
+ * tray. The footer is the last row: a dashed info circle and the note in the secondary color.
  */
 
-.AppBar {
-  box-sizing: border-box;
+.ChecklistNotice {
   display: flex;
-  align-items: center;
-  gap: var(--sl-app-bar-gap);
-  min-height: var(--sl-app-bar-height);
-  padding-inline: var(--sl-app-bar-padding-inline);
-  padding-block: var(--sl-space-2);
-  background: var(--sl-app-bar-background);
-  border-bottom: max(var(--sl-app-bar-border-width), var(--sl-rule-width)) solid var(--sl-app-bar-border-color);
-  min-width: 0;
+  flex-direction: column;
+  gap: var(--sl-space-2);
 }
 
-.AppBarSpacer {
-  flex: 1 1 var(--sl-space-4);
-  min-width: 0;
+.ChecklistNoticeTitle {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  margin: 0;
 }
 
-.AppBar .Separator[data-orientation='vertical'] {
-  height: var(--sl-app-bar-divider-height);
+.ChecklistNoticeTitle[data-tagged] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-2);
+}
+
+.ChecklistNoticeList {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ChecklistNoticeItem {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  padding-block: var(--sl-space-1-5);
+  border-top: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+
+.ChecklistNoticeRow {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-space-2);
+}
+
+.ChecklistNoticeContent {
+  margin-block-start: var(--sl-space-2);
+}
+
+.ChecklistNoticeMark {
+  flex-shrink: 0;
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+  line-height: inherit;
+  font-weight: var(--sl-font-weight-semibold);
+  color: var(--sl-status-error-dark);
+}
+
+.ChecklistNoticeItem[data-passed] .ChecklistNoticeMark {
+  color: var(--sl-status-success-dark);
+}
+
+.ChecklistNoticeText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ChecklistNoticeDetail {
+  color: var(--sl-text-secondary);
+}
+
+.ChecklistNoticeFooter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-2);
+}
+
+/* The sheet look: a check list on a working paper, not a tinted notice. */
+.ChecklistNotice[data-look='sheet'] {
+  gap: 0;
+  padding: 0;
+  background: var(--sl-sheet-background);
+  border: var(--sl-sheet-border-width) solid var(--sl-sheet-border-color);
+  border-top: var(--sl-sheet-rule-width) solid var(--sl-sheet-rule-color);
+  border-radius: 0;
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeTitle {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  font-weight: var(--sl-font-weight-semibold);
+  gap: 10px;
+  padding: 10px 14px;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-sheet-border-color);
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeItem {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  padding: 9px 14px;
+  border-top: 0;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeList:last-child > .ChecklistNoticeItem:last-child {
+  border-bottom: 0;
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeRow {
+  gap: 10px;
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeMark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  font-size: 15px;
+  font-weight: 700;
+  background: var(--sl-text-accent);
+  color: var(--sl-sheet-background);
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeItem[data-passed] .ChecklistNoticeMark {
+  background: var(--sl-status-success-dark);
+  color: var(--sl-sheet-background);
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeDetail {
+  font-size: 13px;
+}
+
+/* A failed check's fix: the accent edge on the tray, under its row and in line with the label. */
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-2);
+  margin: 10px 0 3px 0;
+  padding: 12px 14px;
+  border: var(--sl-stroke-default) solid var(--sl-text-accent);
+  background: var(--sl-surface-tray);
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeFooter {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  gap: 10px;
+  padding: 9px 14px;
+  color: var(--sl-text-secondary);
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeFooterMark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border: var(--sl-stroke-default) dashed var(--sl-border-strong);
+  border-radius: 50%;
+  font-size: 15px;
+}
+
+.ChecklistNotice[data-look='sheet'] .ChecklistNoticeFooter > :not(.ChecklistNoticeFooterMark) {
+  margin: 0;
+}
+
+/* A control in the mark's place (a Checkbox the person ticks to pass the check). */
+.ChecklistNoticeControl {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  min-height: 1lh;
+}
+
+.ChecklistNoticeControl + .ChecklistNoticeText label {
+  cursor: pointer;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* ChipPicker
+ *
+ * Removable chips (subtle Badges with a close button) in a wrapping row, then a small round +
+ * button that opens a menu of the groups not chosen yet. Read only, the chips have no close
+ * button and an empty picker shows a dash.
+ */
+
+.ChipPicker {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-1);
+  min-width: 0;
+}
+
+/* A chip: a rounded tag in sentence case on the raised surface, its group named in bold in the
+ * secondary color ("Project Lumen rebrand"). Stated with the ChipPicker so an app's square-tag
+ * Badge rule doesn't turn the chips into status tags. */
+.ChipPicker .ChipPickerChip {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  height: 24px;
+  padding-inline: 8px;
+  gap: 4px;
+  border: var(--sl-stroke-default) solid var(--sl-border-default);
+  border-radius: 12px;
+  background: var(--sl-surface-raised);
+  color: var(--sl-text-primary);
+  font-size: 13px;
+  font-weight: var(--sl-font-weight-normal);
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.ChipPicker .ChipPickerChipGroup {
+  font-weight: var(--sl-font-weight-semibold);
+  color: var(--sl-text-secondary);
+}
+
+.ChipPicker .ChipPickerAdd {
+  min-height: 0;
+  inline-size: 24px;
+  block-size: 24px;
+  padding: 0;
+  border: var(--sl-stroke-default) dashed var(--sl-border-strong);
+  border-radius: 999px;
+  justify-content: center;
+}
+
+.ChipPicker .ChipPickerAdd > .material-symbols-outlined {
+  font-size: var(--sl-icon-size-condense);
+}
+
+.ChipPickerEmpty {
+  color: var(--sl-text-secondary);
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* ParameterBar
+ *
+ * Settings for a result, in one wrapping row on the tray: the app's fields at the start, the
+ * status line, the Run button and any extra actions at the end. Fields align on their controls
+ * (align-items: flex-end), so a field with a description does not push its neighbours' inputs
+ * down. When the bar is narrow the end group wraps onto its own line, at the start.
+ *
+ * data-changed (a setting changed since the last run) turns the status line to the warning
+ * text color. The bar itself does not dim anything; the app dims its own stale result.
+ *
+ * ParameterBarLocked is a fixed setting: the field label over the value as text with a lock,
+ * on no box, at the control's height so it lines up with the inputs beside it.
+ */
+
+.ParameterBar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--sl-space-3) var(--sl-space-4);
+  margin: 0;
+  padding: var(--sl-space-3) var(--sl-space-4);
+  border: var(--sl-stroke-default) solid var(--sl-border-default);
+  background: var(--sl-surface-tray);
+}
+
+.ParameterBarFields {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--sl-space-3) var(--sl-space-4);
+  min-width: 0;
+}
+
+/* A field in the bar keeps its own width; it does not stretch across the row. */
+.ParameterBarFields > .FieldRoot {
+  flex: 0 1 auto;
+}
+
+.ParameterBarEnd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-2) var(--sl-space-3);
+  margin-inline-start: auto;
+}
+
+.ParameterBarStatus {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+.ParameterBarStatus:empty {
+  display: none;
+}
+
+.ParameterBar[data-changed] .ParameterBarStatus {
+  color: var(--sl-status-warning-dark);
+}
+
+.ParameterBarLocked {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-field-gap);
+  min-width: 0;
+}
+
+.ParameterBarLockedValue {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-space-1-5);
+  height: var(--sl-control-height-md);
+  color: var(--sl-text-primary);
+  white-space: nowrap;
+}
+
+.ParameterBarLockedValue .material-symbols-outlined {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+  color: var(--sl-text-secondary);
+}
+
+.ParameterBarLockedText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* LineItemGrid
+ *
+ * Editable lines (a journal entry, an invoice) on the Table styles. Cells hold controls, so
+ * their padding drops to the table's block padding and the controls fill the cell. The
+ * line-number column is narrow and in the tertiary color; the remove column is as narrow as
+ * its button. Footer rows stick to the bottom of the scroll box (maxHeight caps it): the
+ * table clips instead of hiding its overflow, because overflow: hidden would make the table
+ * the scroll container and the footer would never stick.
+ *
+ * A footer row's data-tone colors its figures with the status text colors (the -dark steps,
+ * which pass as text on the tray). The words in the cell carry the state; color only adds.
+ *
+ * look="statement" (data-look) puts the lines on a statement's terms: the Table's statement rows
+ * with caps 11px headers, 6px cell padding, no frame and rows tall enough for their controls.
+ * The footer rows move under the Add button into .LineItemGridSummary: a box on the base surface
+ * with a 1px border and the sheet's heavy rule on top, label left and figure right, a toned row
+ * in its status color, and the grand total over a dark rule with a double rule under its figure.
+ */
+
+.LineItemGrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-2);
+  min-width: 0;
+}
+
+.LineItemGridScroll {
+  overflow: auto;
+  max-width: 100%;
+}
+
+.LineItemGridTable {
+  overflow: clip;
+  table-layout: fixed;
+  min-width: 40rem;
+}
+
+.LineItemGrid[data-read-only] .LineItemGridTable {
+  table-layout: auto;
+}
+
+.LineItemGridTable > tbody > tr > td {
+  padding-block: var(--sl-space-1);
+  vertical-align: middle;
+}
+
+/* A control fills its cell. */
+.LineItemGridTable > tbody > tr > td > :is(.Input, .FieldRoot, .ComboboxRoot, .MoneyField, .SelectTrigger) {
+  width: 100%;
+}
+
+.LineItemGridNumberCol {
+  width: var(--sl-space-10);
+}
+
+.LineItemGridRemoveCol {
+  width: var(--sl-space-14);
+}
+
+.LineItemGridNumber {
+  color: var(--sl-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.LineItemGridRemove {
+  text-align: center;
+}
+
+.LineItemGridTable > tfoot > tr > * {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  background: var(--sl-table-header-background);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+/* Stacked footer rows stick one above the other: the last at the bottom, the one before over it. */
+.LineItemGridTable > tfoot > tr:not(:last-child) > * {
+  bottom: var(--sl-table-row-height);
+}
+
+/* Ruled totals (a footer row's total): no tray band. The rules come from the Table's total rows and
+ * run under the figures only; the row keeps an opaque sheet so it can still stick over the lines.
+ * 'line' is a plain row under a total, such as "Unallocated", with no rule at all. */
+.LineItemGridTable > tfoot > tr[data-total] > * {
+  background: var(--sl-surface-base);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+.LineItemGridTable > tfoot > tr[data-total] > th {
+  font-family: var(--sl-font-body-condense-font-family);
+}
+
+.LineItemGridTable > tfoot > tr[data-total='line'] > :is(th, td, [data-rule]) {
+  border-top-color: transparent;
+  font-weight: var(--sl-font-weight-normal);
+}
+
+/* Only the first total row keeps the footer's line across the row; the ones under it rule their figures only. */
+.LineItemGridTable > tfoot > tr[data-total] + tr[data-total] > [data-rule='none'] {
+  border-top-color: transparent;
+}
+
+.LineItemGridTable > tfoot > tr[data-total] > [data-align='end'] {
+  font-family: var(--sl-font-figures-base-font-family);
+  font-variant-numeric: tabular-nums;
+}
+
+.LineItemGridTable > tfoot > tr[data-tone='success'] > [data-align='end'] {
+  color: var(--sl-status-success-dark);
+}
+
+.LineItemGridTable > tfoot > tr[data-tone='error'] > [data-align='end'] {
+  color: var(--sl-status-error-dark);
+}
+
+.LineItemGridAdd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-2) var(--sl-space-3);
+}
+
+.LineItemGridAddHint {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  font-size: 13px;
+  color: var(--sl-text-secondary);
+}
+
+/* Statement look: open lines with caps headers, as on the boards' allocation tables. */
+.LineItemGridTable[data-look='statement'] {
+  --statement-padding-start: 6px;
+  --statement-padding-end: 6px;
+  min-width: 36rem;
+}
+
+.LineItemGridTable[data-look='statement'] > thead th {
+  height: 34px;
+  padding-block: 0 6px;
+  font-size: 11px;
+  color: var(--sl-text-secondary);
+}
+
+.LineItemGridTable[data-look='statement'] > tbody > tr > td {
+  height: 52px;
+  padding-block: 6px;
+  vertical-align: middle;
+}
+
+.LineItemGrid[data-look='statement'] .LineItemGridAdd {
+  padding-block-start: var(--sl-space-1);
+}
+
+/* The totals under the Add button: Allocated, Unallocated, Transaction total. */
+.LineItemGrid > .Table.LineItemGridSummary {
+  border: var(--sl-stroke-default) solid var(--sl-sheet-border-color);
+  border-top: var(--sl-sheet-rule-width) solid var(--sl-sheet-rule-color);
+  border-radius: 0;
+  background: var(--sl-surface-base);
+}
+
+.LineItemGrid > .Table.LineItemGridSummary > tbody > tr > :is(th, td) {
+  height: auto;
+  padding: 2px 12px;
+  border: 0;
+  background: transparent;
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: 15px;
+  font-weight: var(--sl-font-weight-normal);
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--sl-text-primary);
+}
+
+.LineItemGrid > .Table.LineItemGridSummary > tbody > tr:first-child > * {
+  padding-block-start: 10px;
+}
+
+.LineItemGrid > .Table.LineItemGridSummary > tbody > tr:last-child > * {
+  padding-block-end: 10px;
+}
+
+.LineItemGrid > .Table.LineItemGridSummary > tbody > tr > [data-align='end'] {
+  text-align: end;
+  font-family: var(--sl-font-figures-base-font-family);
+  font-size: 14px;
+}
+
+.LineItemGrid > .Table.LineItemGridSummary > tbody > tr[data-tone] > * {
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+.LineItemGrid > .Table.LineItemGridSummary > tbody > tr[data-tone='error'] > * {
+  color: var(--sl-text-accent);
+}
+
+.LineItemGrid > .Table.LineItemGridSummary > tbody > tr[data-tone='success'] > * {
+  color: var(--sl-status-success-dark);
+}
+
+.LineItemGrid > .Table.LineItemGridSummary > tbody > tr[data-total='grand'] > * {
+  padding-block-start: 4px;
+  border-top: var(--sl-stroke-default) solid var(--sl-text-primary);
+  font-weight: 700;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* FileDropZone
+ *
+ * A dashed, quiet box with one line of text and its buttons. It fills when a file is dragged over it.
+ * Colors are the fill and border roles, so a brand restyles it without a component token.
+ */
+
+.FileDropZone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sl-space-3);
+  padding: var(--sl-space-6) var(--sl-space-4);
+  /* The control border, not the hairline: the zone is something to find and drop on. */
+  border: var(--sl-stroke-default) dashed var(--sl-border-strong);
+  border-radius: var(--sl-radius-base);
+  text-align: center;
+}
+
+.FileDropZone[data-over] {
+  background: var(--sl-fill-subtle);
+  border-color: var(--sl-text-primary);
+}
+
+.FileDropZone[data-disabled] {
+  opacity: 0.6;
+}
+
+.FileDropZoneText {
+  margin: 0;
+}
+
+.FileDropZoneActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--sl-gap-control);
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* Spinner
+ *
+ * A ring that turns: the track in the subtle border, the moving arc in the accent border.
+ * Sizes are the icon tiers, so a spinner can stand in for an icon. Reduced motion slows it.
+ */
+
+.Spinner {
+  --spinner-size: var(--sl-icon-size-maximize);
+  display: inline-block;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: var(--spinner-size);
+  height: var(--spinner-size);
+  border: max(2px, calc(var(--spinner-size) / 9)) solid var(--sl-border-subtle);
+  border-top-color: var(--sl-border-accent);
+  border-radius: 50%;
+  animation: spinner-turn 0.9s linear infinite;
+}
+
+.Spinner[data-size='condense'] { --spinner-size: var(--sl-icon-size-condense); }
+.Spinner[data-size='base'] { --spinner-size: var(--sl-icon-size-base); }
+.Spinner[data-size='magnify'] { --spinner-size: var(--sl-icon-size-magnify); }
+
+@keyframes spinner-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .Spinner {
+    animation-duration: 3s;
+  }
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* RadioCard
+ *
+ * A Radio Group drawn as a grid of cards. Each card is the radio (a span with role radio): a
+ * preview, a bold label and a quiet description, on the raised surface with a 1px default border.
+ * The chosen card's border is 2px in the text color (the padding gives back the extra pixel so
+ * nothing moves) and a round check sits on its top right corner, half outside the card.
+ */
+
+.RadioCardGroup {
+  --radio-card-columns: 3;
+  --radio-card-min: 8rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(max(var(--radio-card-min), calc((100% - (var(--radio-card-columns) - 1) * var(--sl-space-3)) / var(--radio-card-columns))), 1fr));
+  gap: var(--sl-space-3);
+  /* Room for the check marker, which sits half outside the top right corner. */
+  padding: 10px 10px 0 0;
+}
+
+.RadioCard {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--sl-space-2);
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--sl-border-default);
+  border-radius: var(--sl-radius-control);
+  background: var(--sl-surface-raised);
+  color: var(--sl-text-primary);
+  cursor: pointer;
+  text-align: left;
+  outline: none;
+}
+
+.RadioCard:hover:not([data-disabled]):not([data-checked]) {
+  border-color: var(--sl-text-secondary);
+}
+
+.RadioCard[data-checked] {
+  border: 2px solid var(--sl-text-primary);
+  padding: 11px;
+}
+
+.RadioCard:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.RadioCard[data-disabled] {
+  opacity: var(--sl-check-opacity-disabled);
+  cursor: not-allowed;
+}
+
+.RadioCardPreview {
+  display: flex;
+  min-width: 0;
+}
+
+.RadioCardPreview > * {
+  flex: 1;
+  min-width: 0;
+}
+
+.RadioCardLabel {
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
+  min-width: 0;
+}
+
+.RadioCardDescription {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  margin-top: calc(var(--sl-space-2) * -1 + 2px);
+  color: var(--sl-text-secondary);
+}
+
+.RadioCardMark {
+  position: absolute;
+  top: -10px;
+  right: -10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--sl-surface-raised);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-text-primary);
+  color: var(--sl-surface-raised);
+}
+
+.RadioCardMark[data-unchecked] {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  .RadioCard[data-checked] {
+    border-color: Highlight;
+  }
+
+  .RadioCardMark {
+    background: Highlight;
+    color: HighlightText;
+  }
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* Stepper
+ *
+ * Numbered steps in one row: a marker on a line, then the name and a short line under it. Done
+ * markers are filled dark with a check and the line after them is solid; the current marker is
+ * the accent fill; later markers are dashed rings on a quiet line.
+ */
+
+.Stepper {
+  --stepper-marker: 1.75rem;
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.StepperStep {
+  position: relative;
+  min-width: 0;
+}
+
+/* The line from this marker to the next one. */
+.StepperStep:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  top: calc(var(--stepper-marker) / 2);
+  left: calc(var(--stepper-marker) + var(--sl-space-2));
+  right: var(--sl-space-2);
+  border-top: 2px solid var(--sl-border-default);
+}
+
+.StepperStep[data-state='done']:not(:last-child)::after {
+  border-top-color: var(--sl-text-primary);
+}
+
+.StepperButton {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sl-space-3);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+}
+
+button.StepperButton {
+  cursor: pointer;
+}
+
+button.StepperButton:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+button.StepperButton:hover .StepperLabel {
+  text-decoration: underline;
+}
+
+.StepperMarker {
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-figures-condense-font-weight);
+  line-height: var(--sl-font-figures-condense-line-height);
+  letter-spacing: var(--sl-font-figures-condense-letter-spacing);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--stepper-marker);
+  height: var(--stepper-marker);
+  border-radius: 999px;
+  border: 1.5px dashed var(--sl-border-strong);
+  color: var(--sl-text-secondary);
+  background: var(--sl-surface-base);
+}
+
+.StepperStep[data-state='done'] .StepperMarker {
+  border: 1.5px solid var(--sl-text-primary);
+  background: var(--sl-text-primary);
+  color: var(--sl-surface-base);
+}
+
+.StepperStep[data-state='current'] .StepperMarker {
+  border: 1.5px solid var(--sl-interactive-default);
+  background: var(--sl-interactive-default);
+  color: var(--sl-text-on-primary);
+}
+
+.StepperText {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+}
+
+.StepperLabel {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  color: var(--sl-text-primary);
+}
+
+.StepperStep[data-state='upcoming'] .StepperLabel {
+  color: var(--sl-text-secondary);
+}
+
+.StepperDescription {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  color: var(--sl-text-secondary);
+}
+
+.StepperStatus {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 40rem) {
+  .Stepper {
+    grid-auto-flow: row;
+    gap: var(--sl-space-3);
+  }
+  .StepperStep:not(:last-child)::after {
+    display: none;
+  }
+  .StepperButton {
+    flex-direction: row;
+    align-items: center;
+  }
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* SourcePreview
+ *
+ * A file's lines or a worksheet's rows in a ruled frame: the number in a quiet first column, rows
+ * on hairlines, a header line with an accent edge and a tint, skipped lines struck through. Rows
+ * share one grid (subgrid) so cells line up down the columns. Wide content scrolls inside.
+ */
+
+.SourcePreview {
+  border: 1px solid var(--sl-border-default);
+  background: var(--sl-surface-raised);
+  min-width: 0;
+}
+
+.SourcePreviewScroll {
+  overflow-x: auto;
+}
+
+.SourcePreviewGrid {
+  display: grid;
+  grid-template-columns: var(--source-preview-columns);
+  min-width: 100%;
+  width: max-content;
+}
+
+.SourcePreviewRow {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+  align-items: baseline;
+  border-bottom: 1px solid var(--sl-border-subtle);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  color: var(--sl-text-primary);
+}
+
+.SourcePreviewRow:last-child {
+  border-bottom: 0;
+}
+
+.SourcePreviewRow > * {
+  padding: var(--sl-space-2) var(--sl-space-3);
+  min-width: 0;
+}
+
+.SourcePreview[data-mono] .SourcePreviewCell {
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60ch;
+}
+
+.SourcePreviewHead {
+  border-bottom: 1px solid var(--sl-border-strong);
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
+}
+
+.SourcePreviewHead > * {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-space-2);
+}
+
+.SourcePreviewNumber {
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
+  color: var(--sl-text-secondary);
+  text-align: right;
+}
+
+.SourcePreviewHead .SourcePreviewNumber {
+  justify-content: flex-start;
+}
+
+[data-align='end'] {
+  text-align: right;
+  justify-content: flex-end;
+}
+
+.SourcePreviewDot {
+  width: 0.45rem;
+  height: 0.45rem;
+  border-radius: 999px;
+  background: var(--sl-text-primary);
+  flex: none;
+}
+
+.SourcePreviewIgnored {
+  display: inline-flex;
+  color: var(--sl-text-secondary);
+}
+
+.SourcePreviewCell[data-marker='ignored'],
+.SourcePreviewColumn[data-marker='ignored'] {
+  color: var(--sl-text-secondary);
+}
+
+.SourcePreviewRow[data-state='skipped'] .SourcePreviewCell {
+  color: var(--sl-text-secondary);
+  text-decoration: line-through;
+}
+
+.SourcePreviewRow[data-state='header'] {
+  background: color-mix(in srgb, var(--sl-interactive-default) 7%, transparent);
+  box-shadow: inset 3px 0 0 var(--sl-interactive-default);
+}
+
+.SourcePreviewRow[data-state='header'] .SourcePreviewCell {
+  font-weight: 600;
+}
+
+.SourcePreviewTag {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  color: var(--sl-text-accent);
+  text-align: right;
+}
+
+.SourcePreviewRow[role='radio'] {
+  cursor: pointer;
+}
+
+.SourcePreviewRow[role='radio']:hover {
+  background: var(--sl-surface-tray);
+}
+
+.SourcePreviewRow[role='radio']:focus-visible {
+  outline: 2px solid var(--sl-interactive-default);
+  outline-offset: -2px;
+}
+
+.SourcePreviewCell[data-formula] {
+  background: color-mix(in srgb, var(--sl-interactive-default) 7%, transparent);
+  white-space: nowrap;
+}
+
+.SourcePreviewFx {
+  font-family: var(--sl-font-code-condense-font-family);
+  font-size: var(--sl-font-code-condense-font-size);
+  font-weight: var(--sl-font-code-condense-font-weight);
+  line-height: var(--sl-font-code-condense-line-height);
+  letter-spacing: var(--sl-font-code-condense-letter-spacing);
+  display: inline-block;
+  margin-left: var(--sl-space-1);
+  padding: 0 0.2rem;
+  border: 1px dashed var(--sl-text-accent);
+  color: var(--sl-text-accent);
+  font-size: 0.75em;
+  line-height: 1.3;
+}
+
+.SourcePreviewHint {
+  padding: var(--sl-space-2) var(--sl-space-3);
+  border-top: 1px solid var(--sl-border-subtle);
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  color: var(--sl-text-secondary);
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* SummaryStrip
+ *
+ * A framed row of label / value / link items, divided by hairlines. Labels are caps; the link sits
+ * under the value. Items wrap on narrow screens.
+ */
+
+.SummaryStrip {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  border: 1px solid var(--sl-border-default);
+  background: var(--sl-surface-raised);
+}
+
+.SummaryStripItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  min-width: 0;
+  padding: var(--sl-space-3) var(--sl-space-4);
+  border-right: 1px solid var(--sl-border-subtle);
+}
+
+.SummaryStripLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  color: var(--sl-text-secondary);
+}
+
+.SummaryStripValue {
+  margin: 0;
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  color: var(--sl-text-primary);
+}
+
+/* The action is a small link under the value: semibold accent, no underline, so the value leads. */
+.SummaryStripAction {
+  margin: 0;
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+}
+
+.SummaryStripAction .Button {
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.SummaryStripAction .Button {
+  height: auto;
+  padding: 0;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* Text
+ *
+ * A line of body text. md is body-base, sm body-condense, lg body-magnify: whole styles, not a
+ * font-size on its own. secondary is the quiet line under a heading or beside a control. No
+ * margin: the parent's gap spaces it.
+ */
+
+.Text {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  margin: 0;
+  color: var(--sl-text-primary);
+}
+
+.Text[data-size='sm'] {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+}
+
+.Text[data-size='lg'] {
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
+}
+
+.Text[data-tone='secondary'] {
+  color: var(--sl-text-secondary);
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* AppBar
+ *
+ * The bar across the top of an app window, one row on a line in the rule color. The line is
+ * app-bar.border-width while rule.width is 0, and the thicker of the two once a brand turns the
+ * rule on, so an ink-rule brand gets the working-paper rule under its app bar.
+ * AppBarSpacer pushes what follows it to the end. A vertical Separator inside is a short
+ * divider between groups of icon actions. Tokens: app-bar.* (tokens/component/app-bar.json).
+ */
+
+.AppBar {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--sl-app-bar-gap);
+  min-height: var(--sl-app-bar-height);
+  padding-inline: var(--sl-app-bar-padding-inline);
+  padding-block: var(--sl-space-2);
+  background: var(--sl-app-bar-background);
+  border-bottom: max(var(--sl-app-bar-border-width), var(--sl-rule-width)) solid var(--sl-app-bar-border-color);
+  min-width: 0;
+}
+
+.AppBarSpacer {
+  flex: 1 1 var(--sl-space-4);
+  min-width: 0;
+}
+
+.AppBar .Separator[data-orientation='vertical'] {
+  height: var(--sl-app-bar-divider-height);
   margin-inline: var(--sl-space-1);
   background: var(--sl-app-bar-divider-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
-/* PickerButton
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* PickerButton
+ *
+ * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
+ * look and states of a Select trigger; the label is caps-condense in picker-button.label-color,
+ * the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while
+ * its popup is open. Label and choice are centered on the control's height, so a caps label and its choice sit level at any font size;
+ * picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+ */
+
+.PickerButton {
+  box-sizing: border-box;
+  color: var(--sl-field-color);
+  background: var(--sl-field-background);
+  border: var(--sl-field-border-width) solid var(--sl-field-border-color);
+  border-radius: var(--sl-field-radius);
+  transition: var(--sl-field-transition);
+  outline: none;
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  /* A grid, not a flex row: label and choice are centered on the same line, and align-content centers that
+     pair in the button's height. The choice column shrinks so a long choice gets its ellipsis. */
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: max-content minmax(0, max-content);
+  grid-auto-columns: max-content;
+  align-items: center;
+  align-content: center;
+  justify-content: start;
+  gap: var(--sl-gap-control);
+  max-width: var(--sl-picker-button-max-width);
+  min-width: 0;
+  height: var(--sl-control-height-md);
+  margin: 0;
+  padding-block: var(--sl-control-padding-block);
+  padding-inline: var(--sl-control-padding-inline);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.PickerButton:hover:not(:disabled) {
+  border-color: var(--sl-field-border-color-hover);
+  background: var(--sl-fill-subtle);
+}
+
+.PickerButton:focus-visible {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.PickerButton:disabled {
+  background: var(--sl-field-background-disabled);
+  color: var(--sl-field-color-disabled);
+  cursor: not-allowed;
+}
+
+.PickerButtonLabel {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  position: relative;
+  top: var(--sl-picker-button-text-offset);
+  flex: none;
+  color: var(--sl-picker-button-label-color);
+}
+
+.PickerButtonValue {
+  position: relative;
+  top: var(--sl-picker-button-text-offset);
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--sl-field-color);
+}
+
+.PickerButtonValue[data-placeholder] {
+  color: var(--sl-field-placeholder-color);
+}
+
+.PickerButtonIcon {
+  flex: none;
+  align-self: center;
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  color: var(--sl-text-tertiary);
+  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.PickerButton[aria-expanded='true'] .PickerButtonIcon,
+.PickerButton[data-popup-open] .PickerButtonIcon {
+  transform: rotate(180deg);
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* MultiSelect
+ *
+ * A PickerButton trigger that opens a popover of checkbox rows (label, count at the end) and a
+ * footer with "Show all" and "Done". The rows reuse the Checkbox look; the counts are mono so
+ * they line up. The popup is at least as wide as its widest row and never narrower than
+ * popup.min-width.
+ */
+
+.MultiSelectPopup {
+  min-width: var(--sl-popup-min-width);
+  padding: 0;
+}
+
+.MultiSelectList {
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--sl-space-block-xs);
+}
+
+.MultiSelectOption {
+  display: flex;
+  flex-direction: row; /* an app's global label rule may stack children */
+  align-items: center;
+  gap: var(--sl-gap-control);
+  padding-inline: var(--sl-control-padding-inline);
+  cursor: pointer;
+}
+
+.MultiSelectOption:hover {
+  background: var(--sl-fill-subtle);
+}
+
+.MultiSelectOptionLabel {
+  flex: 1;
+  min-width: 0;
+  text-align: start;
+}
+
+.MultiSelectOption[data-disabled] {
+  cursor: not-allowed;
+  color: var(--sl-text-tertiary);
+}
+
+.MultiSelectOption[data-disabled]:hover {
+  background: none;
+}
+
+.MultiSelectOptionHint {
+  flex: none;
+  color: var(--sl-text-tertiary);
+  font-size: var(--sl-font-size-sm);
+}
+
+.MultiSelectOptionCount {
+  flex: none;
+  font-family: var(--sl-font-family-mono, ui-monospace, monospace);
+  font-variant-numeric: tabular-nums;
+  color: var(--sl-text-tertiary);
+}
+
+.MultiSelectFooter {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--sl-gap-control);
+  padding: var(--sl-space-block-xs) var(--sl-control-padding-inline);
+  border-top: 1px solid var(--sl-popup-separator-color);
+}
+
+/* labelPlacement="above": the label over a Select-style trigger, like the fields beside it. */
+.MultiSelectField {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.MultiSelectField .MultiSelectTrigger {
+  min-width: 12rem;
+  max-width: 20rem;
+}
+
+.MultiSelectField[data-disabled] .MultiSelectFieldLabel {
+  color: var(--sl-text-disabled, var(--sl-text-tertiary));
+}
+
+/* Find box and the "6 ENTITIES · 1 SELECTED" line (set `noun`). */
+.MultiSelectFind {
+  box-sizing: border-box;
+  inline-size: calc(100% - 2 * var(--sl-space-2));
+  block-size: var(--sl-control-height-md);
+  margin: var(--sl-space-2);
+  padding-inline: var(--sl-control-padding-inline);
+  border: 1px solid var(--sl-border-default);
+  border-radius: var(--sl-radius-base);
+  font: inherit;
+}
+
+.MultiSelectGroupLabel {
+  padding: var(--sl-space-2) var(--sl-control-padding-inline) 0;
+  font-size: var(--sl-font-size-xs, 12px);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--sl-text-secondary);
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* PickerSplit
  *
- * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
- * look and states of a Select trigger; the label is caps-condense in picker-button.label-color,
- * the choice is cut with an ellipsis at picker-button.max-width and the chevron turns while
- * its popup is open. Label and choice are centered on the control's height, so a caps label and its choice sit level at any font size;
- * picker-button.text-offset nudges both down for a typeface that sits high. Tokens: picker-button.* (tokens/component/picker-button.json) and field.*.
+ * A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
+ * and a square trigger beside it, divided by a hairline, opens the list. The root carries the
+ * field look so a popup anchors to the whole control; each part fills on hover and the border
+ * darkens for the control as a whole. Label, choice and chevron reuse the PickerButton parts and
+ * tokens (picker-button.*), so the two read as one family.
  */
 
-.PickerButton {
+.PickerSplit {
   box-sizing: border-box;
   color: var(--sl-field-color);
   background: var(--sl-field-background);
@@ -15593,14 +17745,40 @@ textarea.FieldControl {
   border-radius: var(--sl-field-radius);
   transition: var(--sl-field-transition);
   outline: none;
+  display: inline-grid;
+  grid-template-columns: minmax(0, 1fr) var(--sl-control-height-md);
+  grid-template-rows: minmax(0, 1fr);
+  box-sizing: border-box;
+  max-width: var(--sl-picker-button-max-width);
+  min-width: 0;
+  height: var(--sl-control-height-md);
+  padding: 0;
+  overflow: hidden;
+}
+
+.PickerSplit:hover:not(:has(:disabled)) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.PickerSplitMain,
+.PickerSplitTrigger {
   font-family: var(--sl-font-body-base-font-family);
   font-size: var(--sl-font-body-base-font-size);
   font-weight: var(--sl-font-body-base-font-weight);
   line-height: var(--sl-font-body-base-line-height);
   letter-spacing: var(--sl-font-body-base-letter-spacing);
-  /* A grid, not a flex row: label and choice are centered on the same line, and align-content centers that
-     pair in the button's height. The choice column shrinks so a long choice gets its ellipsis. */
-  display: inline-grid;
+  box-sizing: border-box;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sl-field-color);
+  cursor: pointer;
+}
+
+.PickerSplitMain {
+  display: grid;
   grid-auto-flow: column;
   grid-template-columns: max-content minmax(0, max-content);
   grid-auto-columns: max-content;
@@ -15608,437 +17786,677 @@ textarea.FieldControl {
   align-content: center;
   justify-content: start;
   gap: var(--sl-gap-control);
-  max-width: var(--sl-picker-button-max-width);
   min-width: 0;
-  height: var(--sl-control-height-md);
-  margin: 0;
-  padding-block: var(--sl-control-padding-block);
+  padding-block: 0;
   padding-inline: var(--sl-control-padding-inline);
+  white-space: nowrap;
+}
+
+.PickerSplitTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-inline-start: var(--sl-stroke-default) solid var(--sl-field-border-color);
+}
+
+@media (hover: hover) {
+  .PickerSplitMain:hover:not(:disabled),
+  .PickerSplitTrigger:hover:not(:disabled) {
+    background: var(--sl-fill-subtle);
+  }
+}
+
+/* The focus ring sits inside each part, since the root clips its edges. */
+.PickerSplitMain:focus-visible,
+.PickerSplitTrigger:focus-visible {
+  outline: var(--sl-stroke-strong) solid var(--sl-field-border-color-focus);
+  outline-offset: calc(var(--sl-stroke-strong) * -1);
+}
+
+.PickerSplitMain:disabled,
+.PickerSplitTrigger:disabled {
+  color: var(--sl-field-color-disabled);
+  cursor: not-allowed;
+}
+
+.PickerSplitTrigger[aria-expanded='true'] .PickerButtonIcon,
+.PickerSplitTrigger[data-popup-open] .PickerButtonIcon {
+  transform: rotate(180deg);
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* SplitButton
+ *
+ * A Button and a square Menu trigger side by side, joined into one outline: the inner corners
+ * are square and the trigger overlaps the main part's border by one stroke.
+ */
+
+.SplitButton {
+  display: inline-flex;
+}
+
+/* The open Menu adds hidden focus-guard spans beside the chevron, so :first-child and :last-child
+   can match a span. Select the buttons by type instead. */
+.SplitButton > button:first-of-type {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.SplitButton > button:last-of-type {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  margin-inline-start: -1px;
+}
+
+/* Items with a description: the label in the body weight over a quiet line, a wider menu. The
+   menu is portalled, so it is matched by its own marker, not as a child of .SplitButton. */
+.MenuPopup[data-described] {
+  min-width: 20rem;
+}
+
+.MenuPopup[data-described] [data-part='item'] {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+  padding-block: 10px;
+}
+
+.MenuPopup[data-described] [data-part='item-label'] {
+  font-weight: 600;
+}
+
+.MenuPopup[data-described] [data-part='item-description'] {
+  color: var(--sl-text-secondary);
+  font-size: 13px;
+}
+
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* SideNav
+ *
+ * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
+ * current row (aria-current="page") sits on the raised surface with a rule under it in the
+ * working-paper ink; counts are figures; group headings are caps labels. SideNavToggle is a
+ * small tab-shaped handle on the column's edge, whose chevron turns with the state. The parent
+ * sets the width and must not clip the toggle (overflow: visible), since it hangs over the edge.
+ * Tokens: side-nav.* (tokens/component/side-nav.json).
+ */
+
+.SideNav {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-width: 0;
+  padding-block: var(--sl-space-4);
+  background: var(--sl-side-nav-background);
+  border-inline-end: var(--sl-stroke-default) solid var(--sl-side-nav-border-color);
+}
+
+.SideNav[data-collapsed] {
+  min-width: var(--sl-side-nav-collapsed-width);
+}
+
+/* Collapsed: only the toggle stays. */
+.SideNav[data-collapsed] > :not(.SideNavToggle) {
+  display: none;
+}
+
+.SideNavItem {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-side-nav-item-gap);
+  min-height: var(--sl-side-nav-item-height);
+  padding-inline: var(--sl-side-nav-item-padding-inline);
+  color: var(--sl-side-nav-item-color);
+  text-decoration: none;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-side-nav-item-divider-color);
   cursor: pointer;
+  transition: background var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.SideNavItemText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.SideNavItemLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.PickerButton:hover:not(:disabled) {
-  border-color: var(--sl-field-border-color-hover);
-  background: var(--sl-fill-subtle);
+.SideNavItemHint {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  color: var(--sl-side-nav-item-color-disabled);
 }
 
-.PickerButton:focus-visible {
-  border-color: var(--sl-field-border-color-focus);
-  box-shadow: var(--sl-field-shadow-focus);
+.SideNavItem:hover:not([data-current]):not([data-disabled]) {
+  background: var(--sl-side-nav-item-background-hover);
+}
+
+.SideNavItem:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+.SideNavItem[data-current] {
+  background: var(--sl-side-nav-item-background-current);
+  font-weight: var(--sl-font-weight-semibold);
+  box-shadow: inset 0 calc(-1 * var(--sl-side-nav-indicator-width)) 0 var(--sl-side-nav-indicator-color);
+}
+
+/* A nested row is indented one step and set in regular weight, even when current. */
+.SideNavItem[data-nested] {
+  padding-inline-start: calc(var(--sl-side-nav-item-padding-inline) + var(--sl-space-4));
+}
+
+.SideNavItem[data-nested]:not([data-current]) {
+  font-weight: var(--sl-font-weight-normal);
+}
+
+.SideNavItem[data-disabled] {
+  color: var(--sl-side-nav-item-color-disabled);
+  cursor: default;
+}
+
+.SideNavItemCount {
+  flex: none;
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-weight-semibold);
+  line-height: var(--sl-font-figures-condense-line-height);
+  color: var(--sl-side-nav-count-color);
 }
 
-.PickerButton:disabled {
-  background: var(--sl-field-background-disabled);
-  color: var(--sl-field-color-disabled);
-  cursor: not-allowed;
+.SideNavItemCount[data-tone='quiet'] {
+  color: var(--sl-side-nav-count-color-quiet);
 }
 
-.PickerButtonLabel {
+.SideNavGroupLabel {
   font-family: var(--sl-font-caps-condense-font-family);
   font-size: var(--sl-font-caps-condense-font-size);
   font-weight: var(--sl-font-caps-condense-font-weight);
   line-height: var(--sl-font-caps-condense-line-height);
   letter-spacing: var(--sl-font-caps-condense-letter-spacing);
   text-transform: var(--sl-font-caps-condense-text-transform);
-  position: relative;
-  top: var(--sl-picker-button-text-offset);
-  flex: none;
-  color: var(--sl-picker-button-label-color);
+  padding-top: var(--sl-side-nav-group-padding-top);
+  padding-bottom: var(--sl-space-1-5);
+  padding-inline: var(--sl-side-nav-item-padding-inline);
+  color: var(--sl-side-nav-group-label-color);
 }
 
-.PickerButtonValue {
-  position: relative;
-  top: var(--sl-picker-button-text-offset);
-  flex: 0 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--sl-field-color);
+/* ============================================
+   COLLAPSE BUTTON
+   ============================================ */
+
+.SideNavToggle {
+  all: unset;
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 1;
+  top: var(--sl-side-nav-toggle-offset);
+  inset-inline-end: calc(-0.5 * var(--sl-side-nav-toggle-width));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--sl-side-nav-toggle-width);
+  height: var(--sl-side-nav-toggle-height);
+  border-radius: var(--sl-side-nav-toggle-radius);
+  background: var(--sl-side-nav-toggle-background);
+  border: var(--sl-stroke-default) solid var(--sl-side-nav-toggle-border-color);
+  color: var(--sl-side-nav-toggle-border-color);
+  cursor: pointer;
+  transition: color var(--sl-duration-fast) var(--sl-easing-default),
+    background var(--sl-duration-fast) var(--sl-easing-default),
+    border-color var(--sl-duration-fast) var(--sl-easing-default);
 }
 
-.PickerButtonValue[data-placeholder] {
-  color: var(--sl-field-placeholder-color);
+.SideNavToggle:hover {
+  color: var(--sl-side-nav-toggle-background);
+  background: var(--sl-side-nav-toggle-border-color);
 }
 
-.PickerButtonIcon {
-  flex: none;
-  align-self: center;
-  width: var(--sl-icon-size-base);
-  height: var(--sl-icon-size-base);
-  color: var(--sl-text-tertiary);
+.SideNavToggle:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+}
+
+.SideNavToggleIcon {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
   transition: transform var(--sl-duration-normal) var(--sl-easing-default);
 }
 
-.PickerButton[aria-expanded='true'] .PickerButtonIcon,
-.PickerButton[data-popup-open] .PickerButtonIcon {
+/* The chevron points the way the column will go: left to collapse, right to expand. */
+.SideNavToggle[aria-expanded='false'] .SideNavToggleIcon {
   transform: rotate(180deg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
-/* MultiSelect
- *
- * A PickerButton trigger that opens a popover of checkbox rows (label, count at the end) and a
- * footer with "Show all" and "Done". The rows reuse the Checkbox look; the counts are mono so
- * they line up. The popup is at least as wide as its widest row and never narrower than
- * popup.min-width.
- */
+[dir='rtl'] .SideNavToggleIcon {
+  transform: scaleX(-1);
+}
 
-.MultiSelectPopup {
-  min-width: var(--sl-popup-min-width);
-  padding: 0;
+[dir='rtl'] .SideNavToggle[aria-expanded='false'] .SideNavToggleIcon {
+  transform: scaleX(-1) rotate(180deg);
 }
 
-.MultiSelectList {
-  display: flex;
-  flex-direction: column;
-  padding-block: var(--sl-space-block-xs);
+@media (prefers-reduced-motion: reduce) {
+  .SideNavToggleIcon,
+  .SideNavItem,
+  .SideNavToggle {
+    transition: none;
+  }
 }
 
-.MultiSelectOption {
-  display: flex;
-  flex-direction: row; /* an app's global label rule may stack children */
+/* @scattered-light/loomiere-base-ui 0.41.0 · styles for @base-ui/react 1.9.0 */
+/* Shortcuts
+ *
+ * Kbd: key caps for a shortcut, in the figures face, each a small raised cap with a heavier bottom
+ * edge. `data-tone="inverse"` draws them on a dark surface (a tooltip, the Go to hint) in the
+ * surrounding text color.
+ * ShortcutSequenceHint: the dark card that lists the next keys after the first key of a sequence.
+ * ShortcutsDialog: the cheat sheet, a find box, one statement-look table per group, and the
+ * single-key switch in its footer.
+ * CommandPalette: a dialog near the top of the screen with a search field, grouped options and a
+ * footer of key hints. The active option is tinted, not outlined, because focus stays in the field.
+ */
+
+.Kbd {
+  display: inline-flex;
   align-items: center;
-  gap: var(--sl-gap-control);
-  padding-inline: var(--sl-control-padding-inline);
-  cursor: pointer;
+  vertical-align: middle;
+  white-space: nowrap;
 }
 
-.MultiSelectOption:hover {
-  background: var(--sl-fill-subtle);
+.KbdKeys {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-space-0-5);
+  /* Caps are a picture of keys: dragging across a list must not paint them with the selection. */
+  user-select: none;
+  -webkit-user-select: none;
 }
 
-.MultiSelectOptionLabel {
-  flex: 1;
-  min-width: 0;
-  text-align: start;
+.KbdKey {
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-figures-condense-font-weight);
+  line-height: var(--sl-font-figures-condense-line-height);
+  letter-spacing: var(--sl-font-figures-condense-letter-spacing);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 1.375rem;
+  height: 1.375rem;
+  padding: 0 var(--sl-space-1);
+  border: 1px solid var(--sl-border-strong);
+  border-bottom-width: 2px;
+  border-radius: var(--sl-radius-control);
+  background: var(--sl-surface-raised);
+  color: var(--sl-text-primary);
+  font-size: 0.75rem;
+  line-height: 1;
 }
 
-.MultiSelectOptionCount {
-  flex: none;
-  font-family: var(--sl-font-family-mono, ui-monospace, monospace);
-  font-variant-numeric: tabular-nums;
-  color: var(--sl-text-tertiary);
+.KbdThen {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  margin: 0 var(--sl-space-1);
+  color: var(--sl-text-secondary);
 }
 
-.MultiSelectFooter {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--sl-gap-control);
-  padding: var(--sl-space-block-xs) var(--sl-control-padding-inline);
-  border-top: 1px solid var(--sl-popup-separator-color);
+.Kbd[data-tone='inverse'] .KbdKey {
+  border-color: color-mix(in srgb, currentColor 55%, transparent);
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
-/* PickerSplit
- *
- * A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
- * and a square trigger beside it, divided by a hairline, opens the list. The root carries the
- * field look so a popup anchors to the whole control; each part fills on hover and the border
- * darkens for the control as a whole. Label, choice and chevron reuse the PickerButton parts and
- * tokens (picker-button.*), so the two read as one family.
- */
+.Kbd[data-tone='inverse'] .KbdThen {
+  color: inherit;
+  opacity: 0.8;
+}
 
-.PickerSplit {
-  box-sizing: border-box;
-  color: var(--sl-field-color);
-  background: var(--sl-field-background);
-  border: var(--sl-field-border-width) solid var(--sl-field-border-color);
-  border-radius: var(--sl-field-radius);
-  transition: var(--sl-field-transition);
-  outline: none;
-  display: inline-grid;
-  grid-template-columns: minmax(0, 1fr) var(--sl-control-height-md);
-  grid-template-rows: minmax(0, 1fr);
-  box-sizing: border-box;
-  max-width: var(--sl-picker-button-max-width);
-  min-width: 0;
-  height: var(--sl-control-height-md);
-  padding: 0;
-  overflow: hidden;
+/* In a button or a menu item the caps sit after the label, a step smaller. */
+.Button .Kbd,
+.MenuItem .Kbd {
+  margin-inline-start: auto;
+  padding-inline-start: var(--sl-space-2);
 }
 
-.PickerSplit:hover:not(:has(:disabled)) {
-  border-color: var(--sl-field-border-color-hover);
+.Button .KbdKey {
+  min-width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.6875rem;
 }
 
-.PickerSplitMain,
-.PickerSplitTrigger {
-  font-family: var(--sl-font-body-base-font-family);
-  font-size: var(--sl-font-body-base-font-size);
-  font-weight: var(--sl-font-body-base-font-weight);
-  line-height: var(--sl-font-body-base-line-height);
-  letter-spacing: var(--sl-font-body-base-letter-spacing);
-  box-sizing: border-box;
-  height: 100%;
-  margin: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--sl-field-color);
-  cursor: pointer;
+.TooltipPopup .Kbd {
+  margin-inline-start: var(--sl-space-2);
 }
 
-.PickerSplitMain {
-  display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: max-content minmax(0, max-content);
-  grid-auto-columns: max-content;
-  align-items: center;
-  align-content: center;
-  justify-content: start;
-  gap: var(--sl-gap-control);
-  min-width: 0;
-  padding-block: 0;
-  padding-inline: var(--sl-control-padding-inline);
-  white-space: nowrap;
+.TooltipPopup .KbdKey {
+  border-color: color-mix(in srgb, currentColor 55%, transparent);
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: inherit;
 }
 
-.PickerSplitTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border-inline-start: var(--sl-stroke-default) solid var(--sl-field-border-color);
+/* Go to hint */
+.ShortcutSequenceHint {
+  position: fixed;
+  left: var(--sl-space-6);
+  bottom: var(--sl-space-6);
+  z-index: var(--sl-popup-z-index);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-2);
+  min-width: 18rem;
+  padding: var(--sl-space-3) var(--sl-space-4) var(--sl-space-4);
+  border-radius: var(--sl-radius-control);
+  background: var(--sl-text-primary);
+  color: var(--sl-surface-raised);
+  box-shadow: 0 12px 28px color-mix(in srgb, var(--sl-text-primary) 25%, transparent);
 }
 
-@media (hover: hover) {
-  .PickerSplitMain:hover:not(:disabled),
-  .PickerSplitTrigger:hover:not(:disabled) {
-    background: var(--sl-fill-subtle);
-  }
+.ShortcutSequenceHintHead {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-space-2);
 }
 
-/* The focus ring sits inside each part, since the root clips its edges. */
-.PickerSplitMain:focus-visible,
-.PickerSplitTrigger:focus-visible {
-  outline: var(--sl-stroke-strong) solid var(--sl-field-border-color-focus);
-  outline-offset: calc(var(--sl-stroke-strong) * -1);
+.ShortcutSequenceHintTitle {
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
+  font-weight: var(--sl-font-weight-semibold);
 }
 
-.PickerSplitMain:disabled,
-.PickerSplitTrigger:disabled {
-  color: var(--sl-field-color-disabled);
-  cursor: not-allowed;
+.ShortcutSequenceHintCancel {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  margin-inline-start: auto;
+  opacity: 0.8;
 }
 
-.PickerSplitTrigger[aria-expanded='true'] .PickerButtonIcon,
-.PickerSplitTrigger[data-popup-open] .PickerButtonIcon {
-  transform: rotate(180deg);
+.ShortcutSequenceHintList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-1-5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
-/* SplitButton
- *
- * A Button and a square Menu trigger side by side, joined into one outline: the inner corners
- * are square and the trigger overlaps the main part's border by one stroke.
- */
-
-.SplitButton {
-  display: inline-flex;
+.ShortcutSequenceHintList li {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  display: grid;
+  grid-template-columns: 2rem 1fr;
+  align-items: center;
+  gap: var(--sl-space-2);
 }
 
-/* The open Menu adds hidden focus-guard spans beside the chevron, so :first-child and :last-child
-   can match a span. Select the buttons by type instead. */
-.SplitButton > button:first-of-type {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
+/* Cheat sheet */
+.ShortcutsDialog.DialogPopup {
+  display: flex;
+  flex-direction: column;
+  width: min(56rem, calc(100vw - 2 * var(--sl-space-6)));
+  max-width: none;
 }
 
-.SplitButton > button:last-of-type {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-  margin-inline-start: -1px;
+.ShortcutsDialogFind {
+  margin-block: var(--sl-space-3) var(--sl-space-2);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.1 · styles for @base-ui/react 1.9.0 */
-/* SideNav
- *
- * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the
- * current row (aria-current="page") sits on the raised surface with a rule under it in the
- * working-paper ink; counts are figures; group headings are caps labels. SideNavToggle is a
- * small tab-shaped handle on the column's edge, whose chevron turns with the state. The parent
- * sets the width and must not clip the toggle (overflow: visible), since it hangs over the edge.
- * Tokens: side-nav.* (tokens/component/side-nav.json).
- */
+.ShortcutsDialogFind .Input {
+  width: 100%;
+}
 
-.SideNav {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  min-width: 0;
-  padding-block: var(--sl-space-4);
-  background: var(--sl-side-nav-background);
-  border-inline-end: var(--sl-stroke-default) solid var(--sl-side-nav-border-color);
+.ShortcutsDialogBody {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
 }
 
-.SideNav[data-collapsed] {
-  min-width: var(--sl-side-nav-collapsed-width);
+.ShortcutsGroup + .ShortcutsGroup {
+  margin-top: var(--sl-space-6);
 }
 
-/* Collapsed: only the toggle stays. */
-.SideNav[data-collapsed] > :not(.SideNavToggle) {
-  display: none;
+.ShortcutsGroupTitle {
+  font-family: var(--sl-font-subtitle-base-font-family);
+  font-size: var(--sl-font-subtitle-base-font-size);
+  font-weight: var(--sl-font-subtitle-base-font-weight);
+  line-height: var(--sl-font-subtitle-base-line-height);
+  letter-spacing: var(--sl-font-subtitle-base-letter-spacing);
+  margin: var(--sl-space-3) 0 var(--sl-space-2);
 }
 
-.SideNavItem {
-  font-family: var(--sl-font-body-base-font-family);
-  font-size: var(--sl-font-body-base-font-size);
-  font-weight: var(--sl-font-body-base-font-weight);
-  line-height: var(--sl-font-body-base-line-height);
-  letter-spacing: var(--sl-font-body-base-letter-spacing);
-  box-sizing: border-box;
+.ShortcutsDialogFooter {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--sl-side-nav-item-gap);
-  min-height: var(--sl-side-nav-item-height);
-  padding-inline: var(--sl-side-nav-item-padding-inline);
-  color: var(--sl-side-nav-item-color);
-  text-decoration: none;
-  border-bottom: var(--sl-stroke-default) solid var(--sl-side-nav-item-divider-color);
-  cursor: pointer;
-  transition: background var(--sl-duration-fast) var(--sl-easing-default);
+  gap: var(--sl-space-3) var(--sl-space-4);
+  margin-top: var(--sl-space-4);
+  padding-top: var(--sl-space-3);
+  border-top: 1px solid var(--sl-border-default);
 }
 
-.SideNavItemText {
+.ShortcutsDialogSwitch {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-space-3);
+  flex: 1 1 22rem;
+}
+
+.ShortcutsDialogSwitchText {
   display: flex;
   flex-direction: column;
-  min-width: 0;
 }
 
-.SideNavItemLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.ShortcutsDialogSwitchLabel {
+  font-family: var(--sl-font-label-base-font-family);
+  font-size: var(--sl-font-label-base-font-size);
+  font-weight: var(--sl-font-label-base-font-weight);
+  line-height: var(--sl-font-label-base-line-height);
+  letter-spacing: var(--sl-font-label-base-letter-spacing);
+  font-weight: var(--sl-font-weight-semibold);
 }
 
-.SideNavItemHint {
+.ShortcutsDialogSwitchNote,
+.ShortcutsDialogFooterNote {
   font-family: var(--sl-font-body-minimize-font-family);
   font-size: var(--sl-font-body-minimize-font-size);
   font-weight: var(--sl-font-body-minimize-font-weight);
   line-height: var(--sl-font-body-minimize-line-height);
   letter-spacing: var(--sl-font-body-minimize-letter-spacing);
-  color: var(--sl-side-nav-item-color-disabled);
+  color: var(--sl-text-secondary);
 }
 
-.SideNavItem:hover:not([data-current]):not([data-disabled]) {
-  background: var(--sl-side-nav-item-background-hover);
+/* Command palette: high on the screen, so the results grow down. */
+.CommandPalette.DialogPopup {
+  display: flex;
+  flex-direction: column;
+  top: 12vh;
+  transform: translateX(-50%);
+  width: min(42rem, calc(100vw - 2 * var(--sl-space-4)));
+  max-width: none;
+  max-height: 76vh;
+  padding: 0;
+  overflow: hidden;
 }
 
-.SideNavItem:focus-visible {
-  outline: var(--sl-focus-outline);
-  outline-offset: var(--sl-focus-outline-offset-inset);
+.CommandPalette.DialogPopup[data-starting-style],
+.CommandPalette.DialogPopup[data-ending-style] {
+  transform: translateX(-50%) translateY(-0.5rem) scale(var(--sl-modal-scale-closed));
 }
 
-.SideNavItem[data-current] {
-  background: var(--sl-side-nav-item-background-current);
-  font-weight: var(--sl-font-weight-semibold);
-  box-shadow: inset 0 calc(-1 * var(--sl-side-nav-indicator-width)) 0 var(--sl-side-nav-indicator-color);
+.CommandPaletteField {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-space-2-5);
+  min-height: 3.5rem;
+  padding: 0 var(--sl-space-3) 0 var(--sl-space-4);
+  border-bottom: 1px solid var(--sl-border-strong);
+  color: var(--sl-text-secondary);
 }
 
-/* A nested row is indented one step and set in regular weight, even when current. */
-.SideNavItem[data-nested] {
-  padding-inline-start: calc(var(--sl-side-nav-item-padding-inline) + var(--sl-space-4));
+/* Focus lives in the box for as long as the palette is open, so a full ring round the field reads
+   as a second frame. Instead the field's bottom rule thickens to the focus color. */
+.CommandPaletteField:focus-within {
+  border-bottom-color: var(--sl-focus-ring);
+  box-shadow: inset 0 calc(-1 * var(--sl-focus-ring-width) + 1px) 0 var(--sl-focus-ring);
 }
 
-.SideNavItem[data-nested]:not([data-current]) {
-  font-weight: var(--sl-font-weight-normal);
+.CommandPaletteInput {
+  font-family: var(--sl-font-body-magnify-font-family);
+  font-size: var(--sl-font-body-magnify-font-size);
+  font-weight: var(--sl-font-body-magnify-font-weight);
+  line-height: var(--sl-font-body-magnify-line-height);
+  letter-spacing: var(--sl-font-body-magnify-letter-spacing);
+  flex: 1;
+  min-width: 0;
+  height: 3.5rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sl-text-primary);
+  outline: none;
 }
 
-.SideNavItem[data-disabled] {
-  color: var(--sl-side-nav-item-color-disabled);
-  cursor: default;
+.CommandPaletteInput:focus,
+.CommandPaletteInput:focus-visible {
+  /* The field draws the focus ring around icon, box and Esc together. */
+  outline: none;
+  box-shadow: none;
 }
 
-.SideNavItemCount {
-  flex: none;
-  font-family: var(--sl-font-figures-condense-font-family);
-  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
-  font-size: var(--sl-font-figures-condense-font-size);
-  font-weight: var(--sl-font-weight-semibold);
-  line-height: var(--sl-font-figures-condense-line-height);
-  color: var(--sl-side-nav-count-color);
+.CommandPaletteInput::placeholder {
+  color: var(--sl-field-placeholder-color);
 }
 
-.SideNavItemCount[data-tone='quiet'] {
-  color: var(--sl-side-nav-count-color-quiet);
+.CommandPaletteList {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--sl-space-1) 0 var(--sl-space-2);
 }
 
-.SideNavGroupLabel {
+.CommandPaletteGroupLabel {
   font-family: var(--sl-font-caps-condense-font-family);
   font-size: var(--sl-font-caps-condense-font-size);
   font-weight: var(--sl-font-caps-condense-font-weight);
   line-height: var(--sl-font-caps-condense-line-height);
   letter-spacing: var(--sl-font-caps-condense-letter-spacing);
   text-transform: var(--sl-font-caps-condense-text-transform);
-  padding-top: var(--sl-side-nav-group-padding-top);
-  padding-bottom: var(--sl-space-1-5);
-  padding-inline: var(--sl-side-nav-item-padding-inline);
-  color: var(--sl-side-nav-group-label-color);
+  padding: var(--sl-space-3) var(--sl-space-4) var(--sl-space-1);
+  color: var(--sl-text-secondary);
 }
 
-/* ============================================
-   COLLAPSE BUTTON
-   ============================================ */
+.CommandPaletteOption {
+  display: grid;
+  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sl-space-3);
+  min-height: 3rem;
+  padding: var(--sl-space-1-5) var(--sl-space-4);
+  color: var(--sl-text-primary);
+  cursor: pointer;
+}
 
-.SideNavToggle {
-  all: unset;
-  box-sizing: border-box;
-  position: absolute;
-  z-index: 1;
-  top: var(--sl-side-nav-toggle-offset);
-  inset-inline-end: calc(-0.5 * var(--sl-side-nav-toggle-width));
-  display: inline-flex;
+.CommandPaletteOption[data-active] {
+  background: var(--sl-item-background-hover);
+}
+
+.CommandPaletteIcon {
+  display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--sl-side-nav-toggle-width);
-  height: var(--sl-side-nav-toggle-height);
-  border-radius: var(--sl-side-nav-toggle-radius);
-  background: var(--sl-side-nav-toggle-background);
-  border: var(--sl-stroke-default) solid var(--sl-side-nav-toggle-border-color);
-  color: var(--sl-side-nav-toggle-border-color);
-  cursor: pointer;
-  transition: color var(--sl-duration-fast) var(--sl-easing-default),
-    background var(--sl-duration-fast) var(--sl-easing-default),
-    border-color var(--sl-duration-fast) var(--sl-easing-default);
+  color: var(--sl-text-secondary);
 }
 
-.SideNavToggle:hover {
-  color: var(--sl-side-nav-toggle-background);
-  background: var(--sl-side-nav-toggle-border-color);
+.CommandPaletteText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
 
-.SideNavToggle:focus-visible {
-  outline: var(--sl-focus-outline);
-  outline-offset: var(--sl-focus-outline-offset);
+.CommandPaletteLabel {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: var(--sl-font-weight-semibold);
 }
 
-.SideNavToggleIcon {
-  width: var(--sl-icon-size-minimize);
-  height: var(--sl-icon-size-minimize);
-  transition: transform var(--sl-duration-normal) var(--sl-easing-default);
+.CommandPaletteMeta {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--sl-text-secondary);
 }
 
-/* The chevron points the way the column will go: left to collapse, right to expand. */
-.SideNavToggle[aria-expanded='false'] .SideNavToggleIcon {
-  transform: rotate(180deg);
+.CommandPaletteMatch {
+  background: color-mix(in srgb, var(--sl-text-accent) 18%, transparent);
+  color: inherit;
 }
 
-[dir='rtl'] .SideNavToggleIcon {
-  transform: scaleX(-1);
+.CommandPaletteList .EmptyState {
+  padding: var(--sl-space-6) var(--sl-space-4);
 }
 
-[dir='rtl'] .SideNavToggle[aria-expanded='false'] .SideNavToggleIcon {
-  transform: scaleX(-1) rotate(180deg);
+.CommandPaletteFooter {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-1-5) var(--sl-space-4);
+  padding: var(--sl-space-2-5) var(--sl-space-4);
+  border-top: 1px solid var(--sl-border-default);
+  background: var(--sl-surface-tray);
+  color: var(--sl-text-secondary);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .SideNavToggleIcon,
-  .SideNavItem,
-  .SideNavToggle {
-    transition: none;
-  }
+.CommandPaletteFooterNote {
+  margin-inline-start: auto;
 }