@scattered-light/loomiere-base-ui 0.6.0 → 0.7.0

package/dist/design-system/components/styles.css

@@ -1,5 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0');
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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';
@@ -9,7 +9,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.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -453,7 +453,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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 */
@@ -566,7 +566,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -634,7 +634,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -755,7 +755,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -764,7 +764,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -966,7 +966,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -1074,7 +1074,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -1224,7 +1224,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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.
@@ -1381,7 +1381,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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. */
@@ -1397,7 +1397,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -1513,7 +1513,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -1998,7 +1998,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -2167,7 +2167,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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):
@@ -2313,7 +2313,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -2440,7 +2440,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -2501,7 +2501,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -2543,7 +2543,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -2563,7 +2563,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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),
@@ -2700,7 +2700,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -2849,7 +2849,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -3042,7 +3042,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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:
@@ -3105,7 +3105,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -3525,7 +3525,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -3616,7 +3616,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -3679,7 +3679,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -3844,7 +3844,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -3961,7 +3961,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -4038,7 +4038,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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).
@@ -4190,7 +4190,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -4272,7 +4272,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -4557,7 +4557,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -4585,7 +4585,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -4751,7 +4751,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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,
@@ -4917,152 +4917,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.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
- * table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small
- * hand-built table and a full grid look alike. Rows answer to aria-selected="true" (or
- * data-selected) for selection; cells take data-align="end" for numbers.
- */
-
-.Table {
-  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);
-  box-sizing: border-box;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  background: var(--sl-table-background);
-  color: var(--sl-table-color);
-  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
-  border-radius: var(--sl-table-radius);
-  overflow: hidden;
-  font-variant-numeric: tabular-nums;
-}
-
-.Table caption {
-  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);
-  caption-side: bottom;
-  padding-block: var(--sl-space-2);
-  color: var(--sl-table-subtle-color);
-  text-align: start;
-}
-
-/* Header: the tray band, a little taller than the rows */
-.Table th {
-  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);
-  height: var(--sl-table-header-height);
-  padding-block: 0;
-  padding-inline: var(--sl-table-cell-padding-inline);
-  background: var(--sl-table-header-background);
-  color: var(--sl-table-header-color);
-  text-align: start;
-  vertical-align: middle;
-  border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
-}
-
-/* A header that sorts: aria-sort on the th */
-.Table th[aria-sort] {
-  cursor: pointer;
-  transition: background-color var(--sl-duration-fast) var(--sl-easing-default);
-}
-
-.Table th[aria-sort]:hover {
-  background: var(--sl-table-header-background-hover);
-}
-
-/* Body cells */
-.Table td {
-  height: var(--sl-table-row-height);
-  padding-block: 0;
-  padding-inline: var(--sl-table-cell-padding-inline);
-  vertical-align: middle;
-  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
-}
-
-.Table tbody tr:last-child td,
-.Table tbody:last-child tr:last-child td {
-  border-bottom: none;
-}
-
-/* A row header (th in tbody) reads like a cell, in the header's weight */
-.Table tbody th {
-  background: transparent;
-  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
-}
-
-/* Numbers and amounts: right-aligned so digits line up */
-.Table [data-align='end'] {
-  text-align: end;
-}
-
-.Table [data-align='center'] {
-  text-align: center;
-}
-
-/* Secondary text in a cell */
-.Table [data-subtle] {
-  color: var(--sl-table-subtle-color);
-}
-
-/* Hover and selection: the same tints as list items */
-@media (hover: hover) {
-  .Table tbody tr:hover > * {
-    background: var(--sl-table-row-hover);
-    color: var(--sl-item-color-hover);
-  }
-}
-
-.Table tbody tr:is([aria-selected='true'], [data-selected]) > * {
-  background: var(--sl-table-row-selected);
-  color: var(--sl-item-color-selected);
-}
-
-/* Footer: totals on the tray band */
-.Table tfoot td {
-  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);
-  background: var(--sl-table-header-background);
-  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
-  border-bottom: none;
-}
-
-/* A header that stays put while the body scrolls (the table's wrapper scrolls) */
-.Table[data-sticky-header] thead th {
-  position: sticky;
-  top: 0;
-  z-index: var(--sl-z-index-docked);
-}
-
-/* Empty state: one cell spanning the columns */
-.Table td[data-empty] {
-  height: auto;
-  padding-block: var(--sl-space-10);
-  color: var(--sl-text-tertiary);
-  text-align: center;
-}
-
-.Table tbody tr:has(> td[data-empty]):hover > * {
-  background: transparent;
-  color: var(--sl-text-tertiary);
-}
-
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -5198,7 +5053,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -5434,7 +5289,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -5546,7 +5401,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -5567,7 +5422,7 @@ textarea.FieldControl {
   border-radius: var(--sl-radius-item);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -5629,7 +5484,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.6.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.7.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
@@ -5688,3 +5543,2228 @@ textarea.FieldControl {
     transform: none;
   }
 }
+
+/* Custom components: not Base UI parts. Built from existing concepts and tokens. */
+/* @scattered-light/loomiere-base-ui 0.7.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.
+ * Colors are the emphasis levels (--sl-e-bg, --sl-e-fg, --sl-e-border), so data-emphasis,
+ * data-status and data-color all recolor it. The default level is subtle, from
+ * DEFAULT_LEVELS. The shape is radius.pill. Sizes are badge.* (tokens/component/badge.json).
+ *
+ * Text is the trigger style of the same tier (trigger-minimize, trigger-condense,
+ * trigger-base): medium weight, and those three tiers already exist. subtitle is bold,
+ * which would shout, and label only exists at base. Icons use icon-size of that same
+ * tier (a badge icon is a mark beside the label, not a control that fills the line the
+ * way a Button icon does).
+ *
+ * Min width equals the height on every badge, so a single digit is a circle and a
+ * wider label is unchanged. Padding stays, so "12" does not touch the pill edges.
+ */
+
+.Badge {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-badge-gap-condense);
+  height: var(--sl-badge-height-condense);
+  min-width: var(--sl-badge-height-condense);
+  padding-inline: var(--sl-badge-padding-inline-condense);
+  border: var(--sl-stroke-default) solid var(--sl-e-border);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+  white-space: nowrap;
+}
+
+.Badge[data-size='minimize'] {
+  font-family: var(--sl-font-trigger-minimize-font-family);
+  font-size: var(--sl-font-trigger-minimize-font-size);
+  font-weight: var(--sl-font-trigger-minimize-font-weight);
+  line-height: var(--sl-font-trigger-minimize-line-height);
+  letter-spacing: var(--sl-font-trigger-minimize-letter-spacing);
+  gap: var(--sl-badge-gap-minimize);
+  height: var(--sl-badge-height-minimize);
+  min-width: var(--sl-badge-height-minimize);
+  padding-inline: var(--sl-badge-padding-inline-minimize);
+}
+
+.Badge[data-size='base'] {
+  font-family: var(--sl-font-trigger-base-font-family);
+  font-size: var(--sl-font-trigger-base-font-size);
+  font-weight: var(--sl-font-trigger-base-font-weight);
+  line-height: var(--sl-font-trigger-base-line-height);
+  letter-spacing: var(--sl-font-trigger-base-letter-spacing);
+  gap: var(--sl-badge-gap-base);
+  height: var(--sl-badge-height-base);
+  min-width: var(--sl-badge-height-base);
+  padding-inline: var(--sl-badge-padding-inline-base);
+}
+
+.Badge svg,
+.Badge .material-symbols-outlined {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.Badge[data-size='minimize'] svg,
+.Badge[data-size='minimize'] .material-symbols-outlined {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+  font-size: var(--sl-icon-size-minimize);
+}
+
+.Badge[data-size='base'] svg,
+.Badge[data-size='base'] .material-symbols-outlined {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
+}
+
+/* A status dot, in the label color. */
+.Badge[data-dot]::before {
+  content: '';
+  width: var(--sl-badge-dot-condense);
+  height: var(--sl-badge-dot-condense);
+  border-radius: var(--sl-radius-pill);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+.Badge[data-size='minimize'][data-dot]::before {
+  width: var(--sl-badge-dot-minimize);
+  height: var(--sl-badge-dot-minimize);
+}
+
+.Badge[data-size='base'][data-dot]::before {
+  width: var(--sl-badge-dot-base);
+  height: var(--sl-badge-dot-base);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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
+ * below the md breakpoint. Calendar is the grid on its own; DatePresets is
+ * the quick-selection list. Both are usable without the field.
+ *
+ * Concepts: calendar (day cell, range band, today ring), item (preset rows),
+ * field (the trigger), emphasis bold (the selected day, via the default
+ * emphasis level, so it follows data-color).
+ *
+ * Text styles, one whole style each: day numbers are trigger-condense and
+ * selected days are selected-condense, weekday initials are eyebrow-minimize,
+ * the month title is subtitle-base, a preset label is trigger-condense with
+ * its hint in body-minimize, and the footer summary is body-condense.
+ * The trigger text is text-body-base, the same style as Input.
+ *
+ * How many months are on screen is measured on the panel (40rem two months,
+ * 32rem one, and one month in a drawer or for a coarse pointer under 48rem).
+ * Those lengths are layout, not tokens. CSS only switches the preset row and
+ * the sticky footer, from data-layout and data-compact.
+ *
+ * Keyboard (WAI-ARIA APG date picker dialog): Left/Right one day (they swap
+ * in RTL), Up/Down one week, Home/End the week, PageUp/PageDown one month,
+ * Shift+PageUp/PageDown one year, Enter/Space pick. With two months showing,
+ * paging forward lands the focused day in the last column, so the view shifts
+ * by one month. Delete or Backspace clears the draft. Escape drops a
+ * half-picked range first, then closes. Escape in the month or year chooser
+ * returns to the days. A range is a start click, then an end click; an end
+ * before the start swaps. Hover or focus previews the band until the end is
+ * chosen. Direction is read when the picker opens; a dir change while it is
+ * open is not picked up.
+ *
+ * Day state: data-selected, data-range-start, data-range-end, data-in-range,
+ * data-preview, data-today, data-outside-month, data-disabled, data-focused.
+ * aria-selected is only the real value (the day, or the start and end).
+ */
+
+/* CALENDAR */
+
+.Calendar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-month-gap);
+  min-width: 0;
+}
+
+.DatePickerMonths {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-calendar-month-gap);
+  min-width: 0;
+}
+
+.DatePickerNav {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-calendar-header-gap);
+  flex: 1 0 100%;
+}
+
+.DatePickerNav .DatePickerMonthTitle {
+  flex: 1 1 auto;
+}
+
+.DatePickerMonth {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-header-gap);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.DatePickerMonthBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-calendar-header-gap);
+  min-height: var(--sl-control-height-sm);
+}
+
+.DatePickerMonthSpacer {
+  inline-size: var(--sl-control-height-sm);
+  flex: 0 0 auto;
+}
+
+.DatePickerMonthTitle {
+  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);
+  outline: none;
+  margin: 0;
+  padding: var(--sl-space-1) var(--sl-space-2);
+  border: 0;
+  border-radius: var(--sl-radius-control);
+  background: transparent;
+  color: var(--sl-text-primary);
+  cursor: pointer;
+}
+
+.DatePickerMonthTitle:hover {
+  background: var(--sl-item-background-hover);
+}
+
+.DatePickerMonthTitle: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);
+}
+
+.CalendarGrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-grid-gap);
+}
+
+.Calendar,
+.DatePickerPanel {
+  --sl-calendar-cell: var(--sl-calendar-day-size);
+}
+
+.DatePickerPanel[data-touch] {
+  --sl-calendar-cell: max(var(--sl-calendar-day-size), var(--sl-a11y-min-touch-target));
+}
+
+@media (pointer: coarse) {
+  .Calendar {
+    --sl-calendar-cell: max(var(--sl-calendar-day-size), var(--sl-a11y-min-touch-target));
+  }
+}
+
+.CalendarWeek {
+  display: grid;
+  grid-template-columns: repeat(7, var(--sl-calendar-cell));
+  column-gap: 0;
+  row-gap: var(--sl-calendar-grid-gap);
+}
+
+.CalendarGrid:has(.CalendarWeekNumber) .CalendarWeek {
+  grid-template-columns: auto repeat(7, var(--sl-calendar-cell));
+}
+
+.CalendarWeekday,
+.CalendarWeekNumber {
+  font-family: var(--sl-font-eyebrow-minimize-font-family);
+  font-size: var(--sl-font-eyebrow-minimize-font-size);
+  font-weight: var(--sl-font-eyebrow-minimize-font-weight);
+  line-height: var(--sl-font-eyebrow-minimize-line-height);
+  letter-spacing: var(--sl-font-eyebrow-minimize-letter-spacing);
+  text-transform: var(--sl-font-eyebrow-minimize-text-transform);
+  display: grid;
+  place-items: center;
+  min-block-size: var(--sl-space-6);
+  color: var(--sl-calendar-weekday-color);
+  text-decoration: none;
+}
+
+.CalendarWeekNumber {
+  padding-inline: var(--sl-space-1);
+}
+
+.CalendarDay {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  position: relative;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  inline-size: 100%;
+  aspect-ratio: 1;
+  min-inline-size: 0;
+  min-block-size: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sl-calendar-day-radius);
+  outline: none;
+  background: transparent;
+  color: var(--sl-calendar-day-color);
+  cursor: pointer;
+}
+
+.CalendarDay: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);
+}
+
+.CalendarDay--empty {
+  cursor: default;
+  pointer-events: none;
+}
+
+.CalendarDayNumber {
+  position: relative;
+  z-index: 1;
+}
+
+.CalendarDay:hover:not([data-disabled]):not([data-selected]) {
+  background: var(--sl-calendar-day-background-hover);
+}
+
+.CalendarDay[data-outside-month] {
+  color: var(--sl-calendar-day-color-outside);
+}
+
+.CalendarDay[data-disabled] {
+  color: var(--sl-calendar-day-color-disabled);
+  cursor: default;
+}
+
+.CalendarDay[data-selected] {
+  font-family: var(--sl-font-selected-condense-font-family);
+  font-size: var(--sl-font-selected-condense-font-size);
+  font-weight: var(--sl-font-selected-condense-font-weight);
+  line-height: var(--sl-font-selected-condense-line-height);
+  letter-spacing: var(--sl-font-selected-condense-letter-spacing);
+}
+
+.CalendarDay[data-selected]:not([data-range-start]):not([data-range-end]) {
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.CalendarDay[data-range-start],
+.CalendarDay[data-range-end] {
+  overflow: hidden;
+  background: transparent;
+}
+
+.CalendarDay[data-range-start] .CalendarDayNumber,
+.CalendarDay[data-range-end] .CalendarDayNumber {
+  display: grid;
+  place-items: center;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: var(--sl-calendar-day-radius);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.CalendarDay[data-in-range],
+.CalendarDay[data-preview]:not([data-selected]) {
+  border-radius: 0;
+  background: var(--sl-calendar-range-background);
+  color: var(--sl-calendar-range-color);
+}
+
+.CalendarDay[data-range-start]::before,
+.CalendarDay[data-range-end]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background: linear-gradient(to right, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+.CalendarDay[data-range-end]::before {
+  background: linear-gradient(to left, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+[dir='rtl'] .CalendarDay[data-range-start]::before {
+  background: linear-gradient(to left, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+[dir='rtl'] .CalendarDay[data-range-end]::before {
+  background: linear-gradient(to right, transparent 50%, var(--sl-calendar-range-background) 50%);
+}
+
+.CalendarDay[data-range-start][data-range-end]::before {
+  content: none;
+}
+
+.CalendarDay[data-focused] {
+  z-index: 1;
+}
+
+.CalendarDay[data-today] .CalendarDayNumber {
+  box-shadow: inset 0 0 0 var(--sl-stroke-default) var(--sl-calendar-today-ring);
+  border-radius: var(--sl-calendar-day-radius);
+  padding-inline: var(--sl-space-1);
+}
+
+/* The selected fill is the bold accent, the same hue as the today ring, so the ring switches to the text color. */
+.CalendarDay[data-today][data-selected] .CalendarDayNumber {
+  box-shadow: inset 0 0 0 var(--sl-stroke-default) var(--sl-e-fg);
+}
+
+[data-theme$='high-contrast'] .CalendarDay[data-in-range],
+[data-theme$='high-contrast'] .CalendarDay[data-preview]:not([data-selected]) {
+  box-shadow: inset 0 calc(var(--sl-stroke-default) * -1) 0 var(--sl-border-accent);
+}
+
+.CalendarChooser {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-calendar-header-gap);
+}
+
+.CalendarChooserGrid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--sl-calendar-grid-gap);
+}
+
+.CalendarChoice {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  outline: none;
+  min-block-size: var(--sl-control-height-sm);
+  padding: var(--sl-space-1) var(--sl-space-2);
+  border: 0;
+  border-radius: var(--sl-radius-control);
+  background: transparent;
+  color: var(--sl-text-primary);
+  cursor: pointer;
+}
+
+.CalendarChoice:hover:not([aria-disabled='true']) {
+  background: var(--sl-item-background-hover);
+}
+
+.CalendarChoice: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);
+}
+
+.CalendarChoice[aria-disabled='true'] {
+  color: var(--sl-calendar-day-color-disabled);
+  cursor: default;
+}
+
+/* PRESETS */
+
+.DatePickerPresets {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-1);
+  min-width: 0;
+}
+
+.DatePickerPresets[data-layout='row'] {
+  flex-direction: row;
+  overflow-x: auto;
+}
+
+.DatePickerPreset {
+  font-family: var(--sl-font-trigger-condense-font-family);
+  font-size: var(--sl-font-trigger-condense-font-size);
+  font-weight: var(--sl-font-trigger-condense-font-weight);
+  line-height: var(--sl-font-trigger-condense-line-height);
+  letter-spacing: var(--sl-font-trigger-condense-letter-spacing);
+  outline: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--sl-space-0-5);
+  inline-size: 100%;
+  padding: var(--sl-item-padding-block) var(--sl-item-padding-inline);
+  border: 0;
+  border-radius: var(--sl-item-radius);
+  background: transparent;
+  color: var(--sl-item-color);
+  text-align: start;
+  cursor: pointer;
+}
+
+.DatePickerPresets[data-layout='row'] .DatePickerPreset {
+  flex-direction: row;
+  align-items: baseline;
+  inline-size: auto;
+  white-space: nowrap;
+}
+
+.DatePickerPreset:hover:not([data-disabled]) {
+  background: var(--sl-item-background-hover);
+}
+
+.DatePickerPreset: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);
+}
+
+.DatePickerPreset[data-checked] {
+  background: var(--sl-item-background-selected);
+  color: var(--sl-item-color-selected);
+}
+
+.DatePickerPreset[data-disabled] {
+  color: var(--sl-text-disabled);
+  cursor: default;
+}
+
+.DatePickerPresetHint {
+  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-text-tertiary);
+}
+
+.DatePickerPreset[data-checked] .DatePickerPresetHint {
+  color: var(--sl-item-color-selected);
+}
+
+/* PICKER */
+
+.DatePickerField {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.DatePickerField .DatePickerTrigger {
+  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);
+  outline: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-gap-control);
+  inline-size: 100%;
+  block-size: var(--sl-control-height-md);
+  padding-inline: var(--sl-control-padding-inline);
+  text-align: start;
+  cursor: pointer;
+}
+
+.DatePickerTrigger:disabled {
+  color: var(--sl-text-disabled);
+  cursor: default;
+}
+
+.DatePickerField .DatePickerTrigger: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);
+}
+
+.DatePickerValue[data-placeholder] {
+  color: var(--sl-text-tertiary);
+}
+
+.DatePickerClear {
+  position: absolute;
+  inset-inline-end: var(--sl-space-1);
+  z-index: 1;
+}
+
+.DatePickerTrigger:has(~ .DatePickerClear) {
+  padding-inline-end: var(--sl-control-height-sm);
+}
+
+.DatePickerPopup {
+  /* 52rem fits two months and the preset column; three months ask for 64rem. Layout, not a brand size. */
+  inline-size: min(var(--available-width, 100vw), 52rem);
+  max-inline-size: var(--available-width, 100vw);
+  padding: 0;
+}
+
+.DatePickerPopup[data-months='3'] {
+  inline-size: min(var(--available-width, 100vw), 64rem);
+}
+
+.DatePickerPanel {
+  display: grid;
+  /* 11rem is the preset column. Layout, not a brand size: wide enough for "Year to date" and a hint. */
+  grid-template-columns: 11rem minmax(0, 1fr);
+  align-items: start;
+  gap: var(--sl-calendar-month-gap);
+  padding: var(--sl-calendar-panel-padding);
+  min-width: 0;
+}
+
+.DatePickerPanel .DatePickerPresets {
+  grid-column: 1;
+  grid-row: 1 / span 2;
+  inline-size: auto;
+}
+
+.DatePickerPanel .Calendar {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+}
+
+.DatePickerPanel:not(:has(.DatePickerPresets)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.DatePickerPanel:not(:has(.DatePickerPresets)) .Calendar,
+.DatePickerPanel:not(:has(.DatePickerPresets)) .DatePickerFooter {
+  grid-column: 1;
+}
+
+.DatePickerFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-space-3);
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.DatePickerSummary {
+  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);
+}
+
+.DatePickerActions {
+  display: flex;
+  gap: var(--sl-space-2);
+  margin-inline-start: auto;
+}
+
+/* Presets become a row once the measured panel is under 40rem, or the popup is a drawer. */
+.DatePickerPanel[data-layout='row'],
+.DatePickerPanel[data-layout='row']:not(:has(.DatePickerPresets)) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.DatePickerPanel[data-layout='row'] .DatePickerPresets,
+.DatePickerPanel[data-layout='row'] .Calendar,
+.DatePickerPanel[data-layout='row'] .DatePickerFooter {
+  grid-column: 1;
+  grid-row: auto;
+}
+
+.DatePickerPanel[data-compact] .DatePickerFooter {
+  position: sticky;
+  inset-block-end: 0;
+  flex-wrap: wrap;
+  background: var(--sl-popup-background);
+}
+
+/* The action row shrinks to its buttons, so a percentage width on Apply never
+   resolves. A 100% basis wraps Apply onto its own row of the footer. */
+.DatePickerPanel[data-compact] .DatePickerActions {
+  flex-basis: 100%;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: 0;
+}
+
+.DatePickerPanel[data-compact] .DatePickerApply {
+  flex-basis: 100%;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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
+ * (cents, yen, fils) so 0.1 + 0.2 and 1.005 * 100 cannot drift, and so the number matches
+ * what a payment API sends. Number field counts in major units; Money field converts at
+ * the edge and rounds half away from zero. The default maximum is 10^15 - 1 minor
+ * units, so the major amount stays inside 15 significant digits. Changing currency
+ * keeps the number the person typed and re-rounds it to the new currency's digits
+ * (12.50 USD becomes 13 JPY). There is no exchange rate. When the app
+ * controls both the value and the currency, it decides whether to apply that rounding:
+ * onValueChange still reports the re-rounded minor units.
+ *
+ * Keyboard is Number field's: ArrowUp and ArrowDown step one major unit, Shift steps 100
+ * major units, Alt steps one minor unit, Home and End jump to the minimum and maximum.
+ * The currency symbol is not in the text, so the caret does not fight it. A fixed symbol
+ * is aria-hidden; the currency name is in the input's accessible description. A picker
+ * is its own tab stop, before the input when the locale puts the symbol first and after
+ * it when the locale puts the symbol last.
+ *
+ * State on the root: data-currency (USD), data-affix (start or end), data-affix-kind
+ * (symbol or picker), data-negative (below zero; set data-color on the field to color
+ * it, never on by default), data-align (start or end),
+ * data-size (xs, sm, md, lg), data-readonly, plus data-invalid, data-disabled,
+ * data-focused and data-scrubbing.
+ *
+ * The affix (symbol or picker) is drawn inside the field so it can later be lifted into
+ * a general Input affix for units, https://, or @. Position comes from the locale, with
+ * logical properties so RTL mirrors it. The group, not the input, carries the field
+ * border, hover, focus halo, invalid edge and disabled fill, so the affix reads as part
+ * of the field.
+ */
+
+/* ============================================
+   FIELD
+   ============================================ */
+
+.MoneyField {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--sl-field-gap);
+  width: 100%;
+}
+
+.MoneyFieldGroup {
+  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);
+  display: flex;
+  align-items: stretch;
+  width: 100%;
+  height: var(--sl-control-height-md);
+  padding: 0;
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldGroup {
+  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);
+  height: var(--sl-control-height-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldGroup {
+  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: var(--sl-control-height-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldGroup {
+  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);
+  height: var(--sl-control-height-lg);
+}
+
+.MoneyFieldGroup .MoneyFieldInput,
+.MoneyFieldAffix,
+.MoneyFieldGroup .MoneyFieldCurrencyTrigger {
+  font: inherit;
+}
+
+.MoneyFieldGroup .MoneyFieldInput {
+  flex: 1;
+  min-inline-size: 0;
+  height: auto;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  outline: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.MoneyFieldGroup .MoneyFieldInput:hover,
+.MoneyFieldGroup .MoneyFieldInput:focus,
+.MoneyField[data-invalid] .MoneyFieldInput,
+.MoneyField[data-invalid] .MoneyFieldInput:focus,
+.MoneyField[data-disabled] .MoneyFieldInput {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+/* A symbol brings its own padding. A picker has a divider, so the amount keeps its inset. */
+.MoneyField[data-affix-kind='symbol'][data-affix='start'] .MoneyFieldInput {
+  padding-inline-start: 0;
+}
+
+.MoneyField[data-affix-kind='symbol'][data-affix='end']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: 0;
+}
+
+/* Number field always pads for its steppers. Those buttons are absent unless asked for. */
+.MoneyField:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline);
+}
+
+.MoneyField[data-size='xs']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg']:not([data-steppers]) .MoneyFieldInput {
+  padding-inline-end: var(--sl-control-padding-inline-lg);
+}
+
+.MoneyField[data-align='end'] .MoneyFieldInput {
+  text-align: end;
+}
+
+.MoneyField[data-align='start'] .MoneyFieldInput {
+  text-align: start;
+}
+
+.MoneyFieldGroup:hover:not(:focus-within) {
+  border-color: var(--sl-field-border-color-hover);
+}
+
+.MoneyFieldGroup:focus-within,
+.MoneyField[data-focused] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-focus);
+  box-shadow: var(--sl-field-shadow-focus);
+}
+
+.MoneyField[data-invalid] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-error);
+}
+
+.MoneyField[data-invalid] .MoneyFieldGroup:focus-within,
+.MoneyField[data-invalid][data-focused] .MoneyFieldGroup {
+  border-color: var(--sl-field-border-color-error);
+  box-shadow: var(--sl-field-shadow-focus-error);
+}
+
+.MoneyField[data-disabled] .MoneyFieldGroup {
+  background: var(--sl-field-background-disabled);
+  cursor: not-allowed;
+}
+
+.MoneyField[data-readonly] .MoneyFieldInput {
+  cursor: default;
+}
+
+/* The palette is the one on the field. An ancestor data-color does not recolor a balance. */
+.MoneyField[data-negative][data-color] .MoneyFieldInput {
+  color: var(--sl-scope-fg);
+}
+
+.MoneyField[data-scrubbing] .MoneyFieldInput {
+  cursor: ns-resize;
+}
+
+/* The sign toggle is for coarse pointers: an iOS decimal keypad has no minus key. */
+.MoneyFieldSign {
+  display: none;
+  align-self: center;
+  flex: none;
+}
+
+@media (pointer: coarse) {
+  .MoneyFieldSign {
+    display: inline-flex;
+  }
+}
+
+/* ============================================
+   AFFIX
+   ============================================ */
+
+.MoneyFieldAffix {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding-inline: var(--sl-control-padding-inline);
+  color: var(--sl-field-affix-color);
+  user-select: none;
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldAffix {
+  padding-inline: var(--sl-control-padding-inline-lg);
+}
+
+/* ============================================
+   CURRENCY SELECT
+   ============================================ */
+
+.MoneyFieldCurrency {
+  display: flex;
+  align-self: stretch;
+  flex: none;
+}
+
+.MoneyFieldCurrencyTrigger {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+  flex: none;
+  gap: var(--sl-space-1);
+  height: auto;
+  min-height: 0;
+  padding-inline: var(--sl-control-padding-inline);
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--sl-field-affix-color);
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-xs);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-sm);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldCurrencyTrigger {
+  padding-inline: var(--sl-control-padding-inline-lg);
+}
+
+.MoneyField[data-affix='start'] .MoneyFieldCurrency {
+  border-inline-end: var(--sl-field-border-width) solid var(--sl-field-border-color);
+}
+
+.MoneyField[data-affix='end'] .MoneyFieldCurrency {
+  border-inline-start: var(--sl-field-border-width) solid var(--sl-field-border-color);
+}
+
+.MoneyFieldCurrencyTrigger:hover,
+.MoneyFieldCurrencyTrigger:focus,
+.MoneyFieldCurrencyTrigger[data-popup-open],
+.MoneyFieldCurrencyTrigger[aria-expanded='true'] {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--sl-text-primary);
+}
+
+/* The group halo says the field is focused. This says the picker, not the amount, has the caret. */
+.MoneyFieldCurrencyTrigger:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset-inset);
+}
+
+/* The picker is its own field, so it does not take the amount's label. */
+.MoneyFieldCurrencyField,
+.MoneyFieldGroup .ComboboxRoot {
+  display: contents;
+}
+
+.MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-base);
+  height: var(--sl-icon-size-base);
+  font-size: var(--sl-icon-size-base);
+}
+
+.MoneyField[data-size='xs'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-minimize);
+  height: var(--sl-icon-size-minimize);
+  font-size: var(--sl-icon-size-minimize);
+}
+
+.MoneyField[data-size='sm'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+}
+
+.MoneyField[data-size='lg'] .MoneyFieldCurrencyIcon {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+}
+
+.MoneyFieldCurrencyPopup {
+  min-inline-size: var(--sl-money-field-picker-min-inline-size);
+}
+
+.MoneyFieldCurrencyItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sl-space-4);
+  width: 100%;
+}
+
+.MoneyFieldCurrencySymbol {
+  color: var(--sl-text-secondary);
+}
+
+.MoneyFieldCurrencyPopup .ComboboxInput {
+  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);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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
+ * when this element is at least list-detail.split-min-width wide, measured on the
+ * element itself so it still works inside another panel. Narrower, the detail is
+ * the existing Drawer (the default) or it replaces the list, which stays mounted
+ * and hidden so its scroll position survives Back.
+ *
+ * The list stays in the splitter's first panel whether the detail is open, closed,
+ * or in a drawer, so its scroll survives. The detail is portaled into a node the
+ * component created, and that node moves. The list sits on the page surface. The
+ * detail sits on surface.raised: a pane
+ * beside the list, one step off the page, with the splitter line as the only
+ * divider. A modal surface would make the pane look like a dialog stuck in the
+ * layout. Drawer mode does not restyle that; it uses the Drawer's own modal
+ * surface, title and Close, so it matches every other drawer.
+ *
+ * The header title is text-title-condense. title-amplify is for a dialog or a
+ * drawer, a layer over the page. A pane heading shares the view with the list,
+ * so the condensed title fits the row. Close is a quiet icon-only Button: a
+ * text Close would compete with the title and the actions in a short header.
+ * Page mode puts Back, icon and word, where Close was.
+ *
+ * Focus moves to the heading when the detail opens, and back to the row when it
+ * closes. Changing the title because another row was picked does not move focus.
+ * Escape closes only when it bubbles out of the detail, so an open menu handles
+ * it first. Nothing listens on window. Page changes are announced by that focus
+ * move; there is no live region.
+ *
+ * data-layout is split, drawer or page. data-open is set while the detail is open.
+ */
+
+.ListDetail {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ListDetailHost,
+.ListDetailSlot,
+.ListDetailSplit,
+.ListDetailList,
+.ListDetailDetail {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex: 1;
+}
+
+.ListDetailList {
+  overflow: auto;
+  background: transparent;
+}
+
+.ListDetail[data-layout='split'],
+.ListDetail[data-layout='drawer'],
+.ListDetail[data-layout='page'] {
+  min-width: 0;
+}
+
+.ListDetail[data-open] .ListDetailList {
+  min-height: 0;
+}
+
+.ListDetailDetail[data-layout='split'],
+.ListDetailDetail[data-layout='page'] {
+  background: var(--sl-surface-raised);
+}
+
+.ListDetailDetail[data-layout='drawer'] {
+  background: transparent;
+}
+
+.DrawerPopup .ListDetailHeader,
+.ListDetailDetail[data-layout='drawer'] .ListDetailBody {
+  padding: 0;
+}
+
+.ListDetailHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-list-detail-header-gap);
+  padding: var(--sl-list-detail-header-padding);
+  flex: none;
+}
+
+.ListDetailTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+}
+
+.ListDetailHeader .DrawerTitle {
+  flex: 1;
+  min-width: 0;
+}
+
+.ListDetailActions {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-list-detail-header-gap);
+  flex: none;
+}
+
+.ListDetailBody {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding-inline: var(--sl-list-detail-header-padding);
+  padding-block-end: var(--sl-list-detail-header-padding);
+}
+
+.ListDetail[data-layout='drawer'] .ListDetailDetail {
+  background: transparent;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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
+ * window splitter pattern: the handle is a separator you drag or move with the arrow
+ * keys. Each panel's size is --sl-splitter-panel-size, so a drag can update the line
+ * without rendering the tree again. The parent gives the root its height.
+ *
+ * One panel has no size and fills what the others leave (the last panel, when every
+ * panel has a size). Px and percent mix, so a workstation can pin its sides in pixels
+ * while a list keeps a percent.
+ *
+ * Arrow keys move one key step, 5% of the splitter; Shift uses the larger step.
+ * Home and End jump to that panel's min and max. Enter collapses a collapsible panel
+ * and restores the size it had. Double-click resets to the default size. In RTL,
+ * Left and Right swap. A panel collapsed to nothing is hidden, so its contents leave
+ * the tab order.
+ *
+ * data-orientation is on the root, the panel and the handle. data-dragging is on the
+ * root and the handle while the pointer is down. data-collapsed is on a collapsed
+ * panel and on the handle that resizes it. data-disabled is on the handle. data-grip
+ * draws the grip. data-fill marks the panel that takes the leftover space.
+ *
+ * The line is one stroke. The part you grab sits on the next panel's inline-start,
+ * not centered, so it does not cover the previous panel's scrollbar. A fine pointer
+ * gets a11y.min-target (24px). A coarse pointer gets the 44px touch target. The
+ * focus ring is drawn on that grab area: a ring around the 1px line reads as a
+ * second hairline. Collapse animates with duration.normal. A drag does not animate.
+ * Reduced motion is the shared reset, which finishes every transition at once.
+ */
+
+.Splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.Splitter[data-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+.Splitter[data-orientation='vertical'] {
+  flex-direction: column;
+}
+
+.Splitter[data-dragging] .SplitterPanel {
+  transition: none;
+}
+
+.SplitterPanel {
+  --sl-splitter-panel-size: auto;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  flex: 0 0 var(--sl-splitter-panel-size);
+  transition:
+    flex-basis var(--sl-duration-normal) var(--sl-easing-default),
+    width var(--sl-duration-normal) var(--sl-easing-default),
+    height var(--sl-duration-normal) var(--sl-easing-default);
+}
+
+.SplitterPanel[data-orientation='horizontal'] {
+  width: var(--sl-splitter-panel-size);
+  height: auto;
+}
+
+.SplitterPanel[data-orientation='vertical'] {
+  height: var(--sl-splitter-panel-size);
+  width: auto;
+}
+
+.SplitterPanel[data-orientation='horizontal'][data-fill]:not([data-collapsed]) {
+  flex: 1 1 auto;
+  width: auto;
+}
+
+.SplitterPanel[data-orientation='vertical'][data-fill]:not([data-collapsed]) {
+  flex: 1 1 auto;
+  height: auto;
+}
+
+/* A ScrollArea thumb still stacks above the grab area, for a bar that lives in the
+   next panel, under the part of the hit area that crosses the line. */
+.SplitterPanel .ScrollAreaScrollbar {
+  z-index: 2;
+}
+
+.SplitterHandle {
+  position: relative;
+  flex: none;
+  box-sizing: border-box;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  touch-action: none;
+  color: var(--sl-border-default);
+}
+
+.SplitterHandle[data-orientation='horizontal'] {
+  width: var(--sl-splitter-handle-size);
+  height: auto;
+  align-self: stretch;
+  cursor: col-resize;
+}
+
+.SplitterHandle[data-orientation='vertical'] {
+  height: var(--sl-splitter-handle-size);
+  width: auto;
+  align-self: stretch;
+  cursor: row-resize;
+}
+
+.SplitterHandle::before,
+.SplitterHandle::after {
+  content: '';
+  position: absolute;
+}
+
+.SplitterHandle::before {
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.SplitterHandle[data-orientation='horizontal']::before {
+  width: var(--sl-splitter-handle-size);
+  height: 100%;
+  background: var(--sl-border-default);
+}
+
+.SplitterHandle[data-orientation='vertical']::before {
+  height: var(--sl-splitter-handle-size);
+  width: 100%;
+  background: var(--sl-border-default);
+}
+
+/* The grab area starts on the line and extends into the next panel. The previous
+   panel keeps its scrollbar, which sits on its inline-end, against this line. */
+.SplitterHandle[data-orientation='horizontal']::after {
+  inset-inline-start: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--sl-a11y-min-target);
+  z-index: 1;
+}
+
+.SplitterHandle[data-orientation='vertical']::after {
+  inset-block-start: 0;
+  left: 0;
+  right: 0;
+  height: var(--sl-a11y-min-target);
+  z-index: 1;
+}
+
+@media (pointer: coarse) {
+  .SplitterHandle[data-orientation='horizontal']::after {
+    width: var(--sl-splitter-handle-hit-size);
+  }
+
+  .SplitterHandle[data-orientation='vertical']::after {
+    height: var(--sl-splitter-handle-hit-size);
+  }
+}
+
+.SplitterHandle:hover::before,
+.SplitterHandle[data-dragging]::before,
+.SplitterHandle[data-collapsed]::before {
+  background: var(--sl-border-strong);
+}
+
+/* The dot edge (45% to 50%) is the shape of the grip, not a size token. */
+/* The dots sit on the line, at the start of the grab area, not in its middle. */
+.SplitterHandle[data-orientation='horizontal'][data-grip]::after {
+  background:
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start calc(50% - var(--sl-splitter-grip-size) * 2) / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start center / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) inline-start calc(50% + var(--sl-splitter-grip-size) * 2) / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat;
+}
+
+.SplitterHandle[data-orientation='vertical'][data-grip]::after {
+  background:
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) calc(50% - var(--sl-splitter-grip-size) * 2) block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) center block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat,
+    radial-gradient(circle, var(--sl-border-strong) 45%, transparent 50%) calc(50% + var(--sl-splitter-grip-size) * 2) block-start / var(--sl-splitter-grip-size) var(--sl-splitter-grip-size) no-repeat;
+}
+
+.SplitterHandle:focus {
+  outline: none;
+}
+
+.SplitterHandle:focus-visible::after {
+  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);
+}
+
+.SplitterHandle[data-disabled] {
+  cursor: not-allowed;
+}
+
+.SplitterHandle[data-disabled]::before {
+  background: var(--sl-border-default);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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.
+ * One look for every kind. data-kind only picks the media tone and, in the component,
+ * the default icon and whether the block is announced. Sizes are empty.*
+ * (tokens/semantic/empty.json). No border and no fill: the container provides those.
+ *
+ * The circle uses the subtle emphasis level (--sl-e-bg, --sl-e-fg), the same variables
+ * Badge uses. data-status on the media recolors it. A parent data-color does too:
+ * the subtle chrome pin skips this circle when a color scope is on an ancestor
+ * (Badge keeps the pin). A brand pair re-points fill and text, not that chrome
+ * scope. The circle stays chrome subtle inside a pair, the same as Badge, so a
+ * pair does not get its own selector. High contrast and the vision themes come
+ * with those variables. The title stays
+ * text-primary and the description text-secondary: an error's title is not red,
+ * because a sentence has to stay readable. Neutral kinds use the chrome palette,
+ * which is what subtle resolves to when no status is set.
+ *
+ * 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.
+ * 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.
+ *
+ * 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
+ * centers them in the leftover space; in normal flow that margin is zero, so a
+ * page that isn't a column doesn't grow a hole. There is no data-fill attribute.
+ *
+ * The icon for unselected is left_click: the pane is waiting for a choice in the
+ * list beside it, which an empty inbox would not say.
+ *
+ * A popup's empty slot already pads a plain sentence (popup-empty). When the child
+ * is an EmptyState, that padding drops so the two don't add. Menu.Empty has no
+ * popup-empty padding of its own, so it needs nothing here.
+ */
+
+/* ============================================
+   ROOT
+   ============================================ */
+
+.EmptyState {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-empty-gap-standard);
+  width: 100%;
+  padding-block: var(--sl-empty-padding-block-standard);
+  padding-inline: var(--sl-empty-padding-inline-standard);
+  color: var(--sl-text-primary);
+  text-align: center;
+}
+
+/* ============================================
+   MEDIA
+   ============================================ */
+
+.EmptyStateMedia {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--sl-empty-media-size-standard);
+  height: var(--sl-empty-media-size-standard);
+  border-radius: var(--sl-radius-pill);
+  background: var(--sl-e-bg);
+  color: var(--sl-e-fg);
+}
+
+.EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-magnify);
+  height: var(--sl-icon-size-magnify);
+  font-size: var(--sl-icon-size-magnify);
+  line-height: 1;
+}
+
+/* An illustration the app passed in. No circle and no tint. */
+.EmptyStateMedia[data-custom] {
+  width: auto;
+  height: auto;
+  background: none;
+  color: inherit;
+}
+
+/* ============================================
+   TEXT
+   ============================================ */
+
+.EmptyStateText {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sl-empty-text-gap-standard);
+  min-width: 0;
+  max-width: var(--sl-empty-description-max-width);
+}
+
+.EmptyStateTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+  margin: 0;
+  max-width: 100%;
+  color: var(--sl-text-primary);
+}
+
+.EmptyStateDescription {
+  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;
+  max-width: 100%;
+  color: var(--sl-text-secondary);
+}
+
+/* ============================================
+   ACTIONS
+   ============================================ */
+
+.EmptyStateActions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sl-empty-actions-gap);
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.EmptyState[data-size='compact'] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--sl-empty-gap-compact);
+  padding-block: var(--sl-empty-padding-block-compact);
+  padding-inline: var(--sl-empty-padding-inline-compact);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateText {
+  gap: var(--sl-empty-text-gap-compact);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateTitle {
+  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);
+}
+
+.EmptyState[data-size='compact'] .EmptyStateDescription {
+  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);
+}
+
+/* Icon only. The tone stays on the glyph, so an error is still an error. */
+.EmptyState[data-size='compact'] .EmptyStateMedia {
+  width: auto;
+  height: auto;
+  background: none;
+}
+
+.EmptyState[data-size='compact'] .EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyState[data-size='compact'] .EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+}
+
+.EmptyState[data-size='spacious'] {
+  gap: var(--sl-empty-gap-spacious);
+  padding-block: var(--sl-empty-padding-block-spacious);
+  padding-inline: var(--sl-empty-padding-inline-spacious);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateText {
+  gap: var(--sl-empty-text-gap-spacious);
+}
+
+.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);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateMedia {
+  width: var(--sl-empty-media-size-spacious);
+  height: var(--sl-empty-media-size-spacious);
+}
+
+.EmptyState[data-size='spacious'] .EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyState[data-size='spacious'] .EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-maximize);
+  height: var(--sl-icon-size-maximize);
+  font-size: var(--sl-icon-size-maximize);
+}
+
+/* ============================================
+   PLACES
+   ============================================ */
+
+/* A flex or grid column centers the block in the space left over. */
+.EmptyState:is([data-size='standard'], [data-size='spacious']) {
+  margin-block: auto;
+}
+
+/* The detail pane before a row is picked. Quieter than the list beside it. */
+.EmptyState[data-kind='unselected'] .EmptyStateMedia {
+  width: auto;
+  height: auto;
+  background: none;
+  color: var(--sl-text-tertiary);
+}
+
+.EmptyState[data-kind='unselected'][data-size='compact'] .EmptyStateTitle,
+.EmptyState[data-kind='unselected'][data-size='standard'] .EmptyStateTitle {
+  font-family: var(--sl-font-subtitle-minimize-font-family);
+  font-size: var(--sl-font-subtitle-minimize-font-size);
+  font-weight: var(--sl-font-subtitle-minimize-font-weight);
+  line-height: var(--sl-font-subtitle-minimize-line-height);
+  letter-spacing: var(--sl-font-subtitle-minimize-letter-spacing);
+}
+
+.EmptyState[data-kind='unselected'][data-size='spacious'] .EmptyStateTitle {
+  font-family: var(--sl-font-title-condense-font-family);
+  font-size: var(--sl-font-title-condense-font-size);
+  font-weight: var(--sl-font-title-condense-font-weight);
+  line-height: var(--sl-font-title-condense-line-height);
+  letter-spacing: var(--sl-font-title-condense-letter-spacing);
+}
+
+/* The popup slot pads a plain sentence. An EmptyState brings its own padding. */
+.ComboboxEmpty:has(> .EmptyState),
+.AutocompleteEmpty:has(> .EmptyState) {
+  padding: 0;
+  color: inherit;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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
+ * table concept (tokens/semantic/table.json), the same tokens the AG Grid themes read: a small
+ * hand-built table and a full grid look alike. Rows answer to aria-selected="true",
+ * aria-current="true" (the row whose detail is open) or data-selected; cells take
+ * data-align="end" for numbers.
+ *
+ * An empty body keeps the header and the column widths: one cell spanning the columns,
+ * `<tr><td data-empty colSpan={n}><EmptyState size="compact" … /></td></tr>`. A cell with
+ * only text still uses this rule's padding. A cell whose child is an EmptyState lets the
+ * empty state pad itself. The empty row does not take the row hover.
+ */
+
+.Table {
+  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);
+  box-sizing: border-box;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--sl-table-background);
+  color: var(--sl-table-color);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+  overflow: hidden;
+  font-variant-numeric: tabular-nums;
+}
+
+.Table caption {
+  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);
+  caption-side: bottom;
+  padding-block: var(--sl-space-2);
+  color: var(--sl-table-subtle-color);
+  text-align: start;
+}
+
+/* Header: the tray band, a little taller than the rows */
+.Table th {
+  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);
+  height: var(--sl-table-header-height);
+  padding-block: 0;
+  padding-inline: var(--sl-table-cell-padding-inline);
+  background: var(--sl-table-header-background);
+  color: var(--sl-table-header-color);
+  text-align: start;
+  vertical-align: middle;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-border-color);
+}
+
+/* A header that sorts: aria-sort on the th */
+.Table th[aria-sort] {
+  cursor: pointer;
+  transition: background-color var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.Table th[aria-sort]:hover {
+  background: var(--sl-table-header-background-hover);
+}
+
+/* Body cells */
+.Table td {
+  height: var(--sl-table-row-height);
+  padding-block: 0;
+  padding-inline: var(--sl-table-cell-padding-inline);
+  vertical-align: middle;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.Table tbody tr:last-child td,
+.Table tbody:last-child tr:last-child td {
+  border-bottom: none;
+}
+
+/* A row header (th in tbody) reads like a cell, in the header's weight */
+.Table tbody th {
+  background: transparent;
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+/* Numbers and amounts: right-aligned so digits line up */
+.Table [data-align='end'] {
+  text-align: end;
+}
+
+.Table [data-align='center'] {
+  text-align: center;
+}
+
+/* Secondary text in a cell */
+.Table [data-subtle] {
+  color: var(--sl-table-subtle-color);
+}
+
+/* Hover and selection: the same tints as list items */
+@media (hover: hover) {
+  .Table tbody tr:hover > * {
+    background: var(--sl-table-row-hover);
+    color: var(--sl-item-color-hover);
+  }
+}
+
+.Table tbody tr:is([aria-selected='true'], [data-selected]) > * {
+  background: var(--sl-table-row-selected);
+  color: var(--sl-item-color-selected);
+}
+
+/* The open row keeps a fill, and a bar on the inline start so it is not only a color. */
+.Table tbody tr[aria-current='true'] > * {
+  background: var(--sl-table-row-current);
+  color: var(--sl-table-color);
+  box-shadow: inset var(--sl-stroke-strong) 0 0 0 var(--sl-border-accent);
+}
+
+[dir='rtl'] .Table tbody tr[aria-current='true'] > * {
+  box-shadow: inset calc(var(--sl-stroke-strong) * -1) 0 0 0 var(--sl-border-accent);
+}
+
+/* Footer: totals on the tray band */
+.Table tfoot td {
+  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);
+  background: var(--sl-table-header-background);
+  border-top: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-bottom: none;
+}
+
+/* A header that stays put while the body scrolls (the table's wrapper scrolls) */
+.Table[data-sticky-header] thead th {
+  position: sticky;
+  top: 0;
+  z-index: var(--sl-z-index-docked);
+}
+
+/* Empty state: one cell spanning the columns. Plain text keeps the old padding.
+   An EmptyState brings its own, and its title stays the normal text color on hover. */
+.Table td[data-empty] {
+  height: auto;
+  padding-block: var(--sl-space-10);
+  color: var(--sl-text-tertiary);
+  text-align: center;
+}
+
+.Table td[data-empty]:has(> .EmptyState) {
+  padding: 0;
+  color: inherit;
+}
+
+.Table tbody tr:has(> td[data-empty]):hover > * {
+  background: transparent;
+  color: var(--sl-text-tertiary);
+}
+
+.Table tbody tr:has(> td[data-empty] > .EmptyState):hover > * {
+  color: inherit;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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, clear, 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.7.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
+ * even when the page is wide. Search takes the full width first. Filters wrap under it.
+ * A container query cannot read the width token, so the component also sets data-narrow.
+ */
+
+.CollectionToolbar {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-block-end: var(--sl-collection-toolbar-gap);
+}
+
+.CollectionToolbarMain,
+.CollectionToolbarTrailing,
+.CollectionSelectionBar,
+.CollectionSort {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+}
+
+.CollectionSearch {
+  display: flex;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+  min-width: 0;
+}
+
+.CollectionSearch .Input {
+  min-width: 0;
+}
+
+.CollectionToolbarActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-inline-start: auto;
+}
+
+/* The width token is measured in JS (data-narrow). A container query cannot read a custom property. */
+.CollectionToolbar[data-narrow] .CollectionSearch,
+.CollectionView[data-narrow] .CollectionSearch {
+  flex-basis: 100%;
+}
+
+.CollectionCount {
+  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);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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
+ * the hover it already had. The open row uses table.row-current, distinct from a selected row.
+ * Loading dims the rows in place. Nothing here changes a plain .Table.
+ */
+
+.CollectionScroll {
+  overflow: auto;
+  max-width: 100%;
+}
+
+.DataTable[data-size='sm'] {
+  --sl-table-row-height: var(--sl-collection-row-height-sm);
+  --sl-table-header-height: var(--sl-collection-header-height-sm);
+}
+
+.DataTable[data-size='md'] {
+  --sl-table-row-height: var(--sl-collection-row-height-md);
+  --sl-table-header-height: var(--sl-collection-header-height-md);
+}
+
+.Table th[aria-sort] > .TableSortButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  gap: var(--sl-collection-toolbar-gap);
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.TableSortIcon[data-state='none'] {
+  visibility: hidden;
+}
+
+.Table th[aria-sort]:hover .TableSortIcon[data-state='none'],
+.Table th[aria-sort]:focus-within .TableSortIcon[data-state='none'] {
+  visibility: visible;
+}
+
+.Table[data-sticky-row-header] tbody tr {
+  --sl-row-fill: var(--sl-table-background);
+}
+
+.Table[data-sticky-row-header] tbody tr:hover {
+  --sl-row-fill: var(--sl-table-row-hover);
+}
+
+.Table[data-sticky-row-header] tbody tr:is([aria-selected='true'], [data-selected]) {
+  --sl-row-fill: var(--sl-table-row-selected);
+}
+
+.Table[data-sticky-row-header] tbody tr[aria-current='true'] {
+  --sl-row-fill: var(--sl-table-row-current);
+}
+
+.Table[data-sticky-row-header] tbody th[scope='row'] {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: var(--sl-z-index-docked);
+  background: var(--sl-row-fill);
+}
+
+.TableSortButton:focus-visible,
+.CollectionGroupButton:focus-visible,
+.CollectionRowButton: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);
+}
+
+.Table tr[data-group] th {
+  background: var(--sl-table-group-header-background);
+  color: var(--sl-table-header-color);
+}
+
+.CollectionGroupButton,
+.CollectionRowButton {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+  cursor: pointer;
+}
+
+.DataTable[data-loading] tbody {
+  opacity: var(--sl-item-opacity-disabled);
+  transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+.CollectionSelectColumn {
+  width: var(--sl-collection-selection-column-width);
+}
+
+.Table th[data-width='min'],
+.Table td[data-width='min'] {
+  width: min-content;
+  white-space: nowrap;
+}
+
+.CollectionStatus {
+  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-table-subtle-color);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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
+ * and current states. Not a stack of floating cards: the two views should read as one family.
+ * variant=cards adds the surface radius and a gap when a queue should read as separate items.
+ */
+
+.DataList {
+  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-table-color);
+}
+
+.DataList ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: var(--sl-table-background);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+}
+
+.DataList li {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-collection-list-row-gap);
+  padding-block: var(--sl-collection-list-row-padding-block);
+  padding-inline: var(--sl-table-cell-padding-inline);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+}
+
+.DataList li:last-child {
+  border-bottom: none;
+}
+
+.DataList[data-size='md'] li {
+  padding-block: var(--sl-collection-list-row-padding-block);
+  min-height: var(--sl-collection-row-height-md);
+}
+
+.DataList li[data-selected] {
+  background: var(--sl-table-row-selected);
+  color: var(--sl-table-color);
+}
+
+.DataList li[aria-current='true'] {
+  background: var(--sl-table-row-current);
+  color: var(--sl-table-color);
+  box-shadow: inset var(--sl-stroke-strong) 0 0 0 var(--sl-border-accent);
+}
+
+@media (hover: hover) {
+  .DataList li:hover:not([data-selected], [aria-current='true']) {
+    background: var(--sl-table-row-hover);
+    color: var(--sl-table-color);
+  }
+}
+
+.DataListPrimary {
+  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);
+}
+
+.DataListSecondary,
+.DataListMeta,
+.DataListSummary {
+  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-table-subtle-color);
+}
+
+.DataListBody {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: var(--sl-space-1);
+  min-width: 0;
+}
+
+.DataListMeta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sl-collection-list-row-gap);
+}
+
+.DataListAmount {
+  margin-inline-start: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.DataListGroup {
+  background: var(--sl-table-group-header-background);
+  color: var(--sl-table-header-color);
+}
+
+.DataList[data-variant='cards'] ul {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-collection-list-row-gap);
+  background: transparent;
+  border: 0;
+}
+
+.DataList[data-variant='cards'] li {
+  background: var(--sl-table-background);
+  border: var(--sl-stroke-default) solid var(--sl-table-border-color);
+  border-radius: var(--sl-table-radius);
+}
+
+.DataList[data-loading] ul {
+  opacity: var(--sl-item-opacity-disabled);
+  transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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.
+ * Previous and Next are quiet buttons. The count reads "1–25 of 312".
+ */
+
+.CollectionPagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-collection-toolbar-gap);
+  margin-block-start: var(--sl-collection-toolbar-gap);
+  color: var(--sl-table-subtle-color);
+}
+
+.CollectionPagination p {
+  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;
+}
+
+/* @scattered-light/loomiere-base-ui 0.7.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
+ * field shows its own label, so the lost header association does not matter: the input's
+ * name comes from that label, not from the column header.
+ *
+ * Move up / Move down would be quiet buttons in the last cell, ahead of any future drag handle.
+ */
+
+.EditableList {
+  container-type: inline-size;
+}
+
+.EditableListAdd,
+.EditableListError,
+.EditableListBalance {
+  margin-block-start: var(--sl-collection-toolbar-gap);
+}
+
+.EditableListFieldLabel {
+  display: none;
+}
+
+.EditableListBalance {
+  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: var(--sl-space-2) var(--sl-space-3);
+  border-radius: var(--sl-radius-control);
+}
+
+.EditableListBalance[data-color] {
+  background: var(--sl-scope-soft);
+  color: var(--sl-scope-on-soft);
+}
+
+.EditableListStackedTitle {
+  display: none;
+  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);
+}
+
+.EditableList[data-stacked] .EditableListStackedTitle {
+  display: block;
+}
+
+.EditableListRowLead {
+  width: 0;
+  padding: 0;
+  border: 0;
+}
+
+.EditableList td .Input,
+.EditableList td input,
+.EditableList td select {
+  width: 100%;
+}
+
+/* The width token is measured in JS. data-stacked is that measurement. */
+.EditableList[data-stacked] {
+  .EditableListTable,
+  .EditableListTable thead,
+  .EditableListTable tbody,
+  .EditableListTable tr,
+  .EditableListTable td {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+
+  .EditableListTable thead {
+    position: absolute;
+    width: var(--sl-space-px);
+    height: var(--sl-space-px);
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+  }
+
+  .EditableListTable tr {
+    padding-block: var(--sl-collection-list-row-padding-block);
+    border-bottom: var(--sl-stroke-default) solid var(--sl-table-row-border-color);
+  }
+
+  .EditableListFieldLabel {
+    display: block;
+    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);
+  }
+}