@scattered-light/loomiere-mojave 0.24.0 → 0.25.0

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

@@ -6733,7 +6733,7 @@
 }
 
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Loomiere for Base UI: component styles. Brand-free: every value is a --sl- variable from a
    Loomiere theme. Load the theme first:
      @import '<your theme>/tokens.css';
@@ -6743,7 +6743,7 @@
 /* Document defaults, in the reset layer so any unlayered rule wins over them, and so layered
    frameworks (Chakra's recipes, Tailwind's utilities) are not undone by them. */
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* CSS Reset - Mojave Theme */
 
 /* ============================================
@@ -7187,7 +7187,7 @@ hr {
 }
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Accessibility — base rules (no theme color dependencies). Theme-specific focus/invalid: accessibility-theme.css */
 
 /* Remove default focus; keyboard focus styled in accessibility-theme.css */
@@ -7300,7 +7300,7 @@ main:focus {
 
 }
 @layer reset {
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Focus, invalid, contrast — requires theme tokens (after theme-accessibility.css). */
 
 :focus-visible {
@@ -7368,7 +7368,7 @@ button,
 
 }
 /* Component styles */
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Accordion - Mojave Theme
  *
  * No component tokens. Hover, press, chevron, divider and motion are the disclosure
@@ -7489,7 +7489,7 @@ button,
   overflow: hidden;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Alert Dialog - Mojave Theme
  *
  * No component tokens and no rules of its own. An alert dialog looks exactly like a
@@ -7498,7 +7498,7 @@ button,
  * cancel quiet, and a destructive one bold with data-color="error".
  */
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Autocomplete - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css), the clear button is an icon
@@ -7700,7 +7700,7 @@ button,
    (reset-accessibility.css).
    ============================================ */
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Avatar - Mojave Theme
  *
  * A round picture with a ring in the page color, so avatars in a group cut out of each other in
@@ -7808,7 +7808,7 @@ button,
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Button - Mojave Theme
  *
  * Colors are the brand's emphasis levels, sizes are control.*, text is the trigger
@@ -7979,7 +7979,7 @@ button,
   font-size: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox - Mojave Theme
  * Sizes follow the label: the box is the icon size one tier above the label's text
  * tier (like a button's icon) and the check mark one tier below it.
@@ -8136,7 +8136,7 @@ button,
   border-radius: var(--sl-radius-pill);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Checkbox Group - Mojave Theme */
 
 /* Each checkbox row is already a full tap target tall, so the rows sit close. */
@@ -8152,7 +8152,7 @@ button,
   pointer-events: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Collapsible - Mojave Theme
  *
  * No component tokens. Hover, press, chevron and motion are the disclosure concept
@@ -8268,7 +8268,7 @@ button,
   background: var(--sl-surface-raised);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Combobox - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css); the chips box is a field; the
@@ -8753,7 +8753,7 @@ button,
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Context Menu - Mojave Theme
  *
  * No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the
@@ -8922,7 +8922,7 @@ button,
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Dialog and Alert dialog - Mojave Theme
  *
  * Both are centered modals built from the modal concept (tokens/semantic/modal.json):
@@ -9068,7 +9068,7 @@ button,
   margin-top: var(--sl-modal-actions-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Drawer - a panel that slides in from an edge and can be swiped away.
    The surface, scrim, heading and motion are the modal concept's (--sl-modal-*), so a
    drawer reads as a dialog's sibling; only its size and grab bar are its own
@@ -9201,7 +9201,7 @@ button,
   color: var(--sl-modal-description-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Field - Mojave Theme
  *
  * Label, control, description and error. No component tokens: spacing is the field
@@ -9262,7 +9262,7 @@ textarea.FieldControl {
   height: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Fieldset - Mojave Theme
  *
  * No component tokens: a titled group of fields, spaced by the stack gaps, with
@@ -9304,7 +9304,7 @@ textarea.FieldControl {
   color: var(--sl-text-secondary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Form - Mojave Theme
  *
  * No component tokens: fields stack with the large block space, and the action
@@ -9324,7 +9324,7 @@ textarea.FieldControl {
   margin-top: var(--sl-space-block-md);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Input - Mojave Theme
  *
  * No component tokens: the look is the field concept (tokens/semantic/field.json),
@@ -9471,7 +9471,7 @@ textarea.FieldControl {
   padding-inline: var(--sl-control-padding-inline-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Menu - Mojave Theme
  *
  * No component tokens. The trigger is a Button. The popup is the popup concept, rows are item rows at the
@@ -9620,7 +9620,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Menubar - Mojave Theme
  *
  * No component tokens. A row of quiet triggers, each opening a menu. The popup is the popup concept, rows are item rows at the
@@ -9813,7 +9813,7 @@ textarea.FieldControl {
   color: var(--sl-text-tertiary);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Meter - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json). The fill is the solid color of the scope around it:
@@ -9876,7 +9876,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Navigation Menu - Mojave Theme
  *
  * The strip is the bar concept, the panel is the popup concept and each link is an item
@@ -10296,7 +10296,7 @@ textarea.FieldControl {
   width: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Number Field - Mojave Theme
  *
  * No component tokens. The input is Input (Input.css) and the label, description and
@@ -10387,7 +10387,7 @@ textarea.FieldControl {
   user-select: none;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* OTP Field - Mojave Theme
  *
  * One-time code entry: a row of single-character inputs. Each slot is the same control as Input
@@ -10450,7 +10450,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-magnify-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Popover - Mojave Theme */
 
 /* ============================================
@@ -10615,7 +10615,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Preview Card - Mojave Theme
  *
  * The popup concept (surface, arrow, motion) with a title-magnify title and condense
@@ -10732,7 +10732,7 @@ textarea.FieldControl {
   fill: var(--sl-popup-arrow-stroke);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Progress - Mojave Theme
  *
  * A gauge (tokens/semantic/gauge.json), the same bar as Meter. The fill is the solid color of
@@ -10809,7 +10809,7 @@ textarea.FieldControl {
   height: var(--sl-gauge-height-lg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Radio - Mojave Theme
  * Same box as Checkbox, always round. Sizes follow the label the same way, and the
  * dot is a share of the circle (check.dot-scale).
@@ -10961,7 +10961,7 @@ textarea.FieldControl {
   gap: var(--sl-gap-stack-sm);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Scroll Area - Mojave Theme
  *
  * The scrollbar is the content scrollbar (content.scrollbar-*): a track that stays clear until
@@ -11043,7 +11043,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Select - Mojave Theme
  *
  * The trigger is a field (the field pattern, control sizes, the base text style); the
@@ -11334,7 +11334,7 @@ textarea.FieldControl {
   stroke-width: var(--sl-stroke-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Separator - Mojave Theme
  *
  * A hairline in the everyday divider color (border.default), one stroke thick, with a step of
@@ -11362,7 +11362,7 @@ textarea.FieldControl {
   margin-inline: var(--sl-space-4);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Slider - Mojave Theme
  *
  * A slider is a gauge you can drag: the track, fill and label row are gauge.* (the same bar as
@@ -11528,7 +11528,7 @@ textarea.FieldControl {
   transform: translate(-50%, 50%);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Switch - Mojave Theme
  * Switch keeps its track sizes. The thumb, its travel and the ON/OFF text are
  * worked out from them: the thumb fills the track's height inside the padding,
@@ -11694,7 +11694,7 @@ textarea.FieldControl {
   color: var(--sl-text-disabled);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Tabs - Mojave Theme
  *
  * No component tokens. The divider, the selected line and color, hover and the disabled
@@ -11830,7 +11830,7 @@ textarea.FieldControl {
   padding: var(--sl-space-6);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Toast - Mojave Theme
  *
  * A toast is a notice (tokens/semantic/notice.json) on the popup surface. A toast whose type
@@ -12066,7 +12066,7 @@ textarea.FieldControl {
   flex-shrink: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle - Mojave Theme
  * A toggle is a button that stays pressed: the same heights, padding, gap and
  * trigger text style as a button of the same size. Pressed, it takes its emphasis level's
@@ -12178,7 +12178,7 @@ textarea.FieldControl {
   height: var(--sl-icon-size-maximize);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Toggle Group - Mojave Theme
  *
  * No component tokens. The strip is the bar concept (tokens/semantic/bar.json); the
@@ -12240,7 +12240,7 @@ textarea.FieldControl {
   outline-offset: var(--sl-focus-outline-offset-inset);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Toolbar - Mojave Theme
  *
  * The strip is the bar concept (tokens/semantic/bar.json). Buttons, toggles, selects
@@ -12302,7 +12302,7 @@ textarea.FieldControl {
   max-width: var(--sl-toolbar-input-max-width);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Tooltip - Mojave Theme
  *
  * The inverse surface (surface.inverse, text.on-inverse-surface) with condense text, so a tooltip
@@ -12363,7 +12363,7 @@ textarea.FieldControl {
 }
 
 /* Custom components: not Base UI parts. Built from existing concepts and tokens. */
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Badge
  *
  * A status or count label. Not a Base UI part, and not interactive: no hover or focus.
@@ -12468,7 +12468,57 @@ textarea.FieldControl {
   height: var(--sl-badge-dot-base);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* A removable chip (onRemove): the label, then a small close button at the end. The button is
+ * the badge's height so its hit area fills the end of the pill, and the end padding drops so
+ * the glyph sits where the padding was. The badge stays a span; only the button is
+ * interactive, and it carries the focus ring. */
+.Badge[data-removable] {
+  padding-inline-end: 0;
+}
+
+.BadgeRemove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--sl-badge-height-condense);
+  height: 100%;
+  margin: 0;
+  margin-inline-start: calc(var(--sl-badge-gap-condense) * -1);
+  padding: 0;
+  border: 0;
+  border-radius: var(--sl-radius-pill);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+
+.BadgeRemove:hover {
+  background: var(--sl-e-bg-hover);
+}
+
+.BadgeRemove:focus-visible {
+  outline: var(--sl-focus-outline);
+  outline-offset: var(--sl-focus-outline-offset);
+  box-shadow: 0 0 0 var(--sl-focus-halo-spread) var(--sl-focus-halo-color);
+}
+
+.BadgeRemove:disabled {
+  cursor: default;
+  opacity: var(--sl-button-opacity-disabled);
+}
+
+.Badge[data-size='minimize'] .BadgeRemove {
+  width: var(--sl-badge-height-minimize);
+  margin-inline-start: calc(var(--sl-badge-gap-minimize) * -1);
+}
+
+.Badge[data-size='base'] .BadgeRemove {
+  width: var(--sl-badge-height-base);
+  margin-inline-start: calc(var(--sl-badge-gap-base) * -1);
+}
+
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /*
  * DatePicker: a field that opens a calendar for one date or a period.
  * Not a Base UI part. The popup is Popover on a wide viewport and Drawer
@@ -13058,7 +13108,7 @@ textarea.FieldControl {
   flex-basis: 100%;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Money field
  *
  * An amount of money, built on Number field. The value is an integer in minor units
@@ -13403,7 +13453,7 @@ textarea.FieldControl {
   letter-spacing: var(--sl-font-body-base-letter-spacing);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* ListDetail
  *
  * The detail of one item, next to its list. Not a Base UI part. It is a Splitter
@@ -13530,7 +13580,7 @@ textarea.FieldControl {
   background: transparent;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Splitter
  *
  * Two or more panels and a handle between them. Not a Base UI part. It follows the
@@ -13738,7 +13788,7 @@ textarea.FieldControl {
   background: var(--sl-border-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.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.
@@ -13994,7 +14044,265 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* ============================================
+   REPORT LAYOUT
+   ============================================
+ *
+ * A working paper before it has anything on it: a report that has not been run, a schedule
+ * with no lines yet. It sits where the result will appear, left-aligned, never centered.
+ * Top row: a square icon box, the title and one sentence, and the main action at the end of
+ * the row with an optional caption under it (wraps under the text when narrow). Then the
+ * guide: numbered steps and a few terms in two columns split 1.3 : 1 by a hairline, one
+ * column when the block is narrow. Last, a bar-only preview of the result's shape.
+ *
+ * The icon box is square with the control radius and a strong border, not the subtle circle:
+ * the same mark as the report's card, so the glyph is the accent text color. The title steps
+ * up to title-magnify, the size of a page section heading, since it heads the sheet.
+ *
+ * The block is its own inline-size container, so the two columns fold by its width, not the
+ * viewport's: a report sheet beside an open side panel folds as soon as it is narrow.
+ */
+
+.EmptyState[data-layout='report'] {
+  container-type: inline-size;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: var(--sl-space-6);
+  max-width: 61.25rem;
+  margin-block: 0;
+  padding: var(--sl-space-7);
+  text-align: start;
+}
+
+.EmptyStateHeader {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--sl-space-4) var(--sl-space-5);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateMedia:not([data-custom]) {
+  width: var(--sl-space-12);
+  height: var(--sl-space-12);
+  border: var(--sl-stroke-default) solid var(--sl-border-strong);
+  border-radius: var(--sl-radius-control);
+  background: var(--sl-surface-raised);
+  color: var(--sl-text-accent);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateMedia:not([data-custom]) .material-symbols-outlined,
+.EmptyState[data-layout='report'] .EmptyStateMedia:not([data-custom]) svg {
+  width: var(--sl-icon-size-maximize);
+  height: var(--sl-icon-size-maximize);
+  font-size: var(--sl-icon-size-maximize);
+}
+
+/* error and done keep their status tone on the glyph; the box stays plain. */
+.EmptyState[data-layout='report'] .EmptyStateMedia[data-status='error']:not([data-custom]) {
+  color: var(--sl-status-error);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateMedia[data-status='success']:not([data-custom]) {
+  color: var(--sl-status-success);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateText {
+  flex: 1 1 20rem;
+  align-items: flex-start;
+  gap: var(--sl-space-1);
+  max-width: none;
+}
+
+.EmptyState[data-layout='report'] .EmptyStateTitle {
+  font-family: var(--sl-font-title-magnify-font-family);
+  font-size: var(--sl-font-title-magnify-font-size);
+  font-weight: var(--sl-font-title-magnify-font-weight);
+  line-height: var(--sl-font-title-magnify-line-height);
+  letter-spacing: var(--sl-font-title-magnify-letter-spacing);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateDescription {
+  max-width: var(--sl-measure-base);
+}
+
+.EmptyState[data-layout='report'] .EmptyStateActions {
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: flex-start;
+  gap: var(--sl-space-1-5);
+}
+
+.EmptyStateActionRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--sl-empty-actions-gap);
+}
+
+.EmptyStateActionCaption {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+/* The guide: steps and terms, ruled off from the top row. */
+.EmptyStateGuide {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
+  border-top: var(--sl-stroke-default) solid var(--sl-border-strong);
+}
+
+.EmptyStateGuide > * {
+  padding-block-start: var(--sl-space-4);
+}
+
+.EmptyStateGuide > * + * {
+  margin-inline-start: var(--sl-space-6);
+  padding-inline-start: var(--sl-space-6);
+  border-inline-start: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+
+/* One child fills the row. */
+.EmptyStateGuide > :only-child {
+  grid-column: 1 / -1;
+}
+
+.EmptyStateSection {
+  min-width: 0;
+}
+
+.EmptyStateSectionTitle {
+  font-family: var(--sl-font-caps-condense-font-family);
+  font-size: var(--sl-font-caps-condense-font-size);
+  font-weight: var(--sl-font-caps-condense-font-weight);
+  line-height: var(--sl-font-caps-condense-line-height);
+  letter-spacing: var(--sl-font-caps-condense-letter-spacing);
+  text-transform: var(--sl-font-caps-condense-text-transform);
+  margin: 0;
+  color: var(--sl-text-primary);
+}
+
+.EmptyStateSteps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-3);
+  margin: var(--sl-space-2) 0 0;
+  padding: 0;
+  list-style: none;
+}
+
+.EmptyStateStep {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-space-3);
+}
+
+.EmptyStateStep b,
+.EmptyStateStep strong {
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+.EmptyStateStepNumber {
+  font-family: var(--sl-font-figures-condense-font-family);
+  font-size: var(--sl-font-figures-condense-font-size);
+  font-weight: var(--sl-font-figures-condense-font-weight);
+  line-height: var(--sl-font-figures-condense-line-height);
+  letter-spacing: var(--sl-font-figures-condense-letter-spacing);
+  font-variant-numeric: var(--sl-font-figures-condense-font-variant-numeric);
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--sl-space-7);
+  height: var(--sl-space-7);
+  margin-block-start: calc(var(--sl-space-0-5) * -1);
+  border: var(--sl-stroke-default) solid var(--sl-border-strong);
+  border-radius: var(--sl-radius-control);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+.EmptyStateStepText {
+  min-width: 0;
+}
+
+.EmptyStateTerms {
+  display: flex;
+  flex-direction: column;
+  margin: var(--sl-space-2) 0 0;
+}
+
+.EmptyStateTerm {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  display: flex;
+  flex-direction: column;
+  padding-block: var(--sl-space-2);
+  border-bottom: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+
+.EmptyStateTerm dt {
+  font-weight: var(--sl-font-weight-semibold);
+  color: var(--sl-text-primary);
+}
+
+.EmptyStateTerm dd {
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+.EmptyStatePreview {
+  min-width: 0;
+  pointer-events: none;
+  user-select: none;
+}
+
+.EmptyStatePreviewCaption {
+  font-family: var(--sl-font-body-minimize-font-family);
+  font-size: var(--sl-font-body-minimize-font-size);
+  font-weight: var(--sl-font-body-minimize-font-weight);
+  line-height: var(--sl-font-body-minimize-line-height);
+  letter-spacing: var(--sl-font-body-minimize-letter-spacing);
+  margin: var(--sl-space-1-5) 0 0;
+  color: var(--sl-text-secondary);
+}
+
+/* Narrow: one column, the terms under the steps with a hairline between. */
+@container (max-width: 45rem) {
+  .EmptyStateGuide {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .EmptyStateGuide > * + * {
+    margin-inline-start: 0;
+    padding-inline-start: 0;
+    border-inline-start: 0;
+    margin-block-start: var(--sl-space-4);
+    border-top: var(--sl-stroke-default) solid var(--sl-border-subtle);
+  }
+
+  .EmptyState[data-layout='report'] .EmptyStateActions {
+    align-items: flex-start;
+  }
+
+  .EmptyStateActionRow {
+    justify-content: flex-start;
+  }
+}
+
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Table - Mojave Theme
  *
  * Base UI has no table, so this styles the native <table class="Table"> elements with the
@@ -14275,7 +14583,7 @@ textarea.FieldControl {
   color: inherit;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Collection
  *
  * DataTable, DataList, the toolbar and the pagination, in one place so the two views
@@ -14286,7 +14594,7 @@ textarea.FieldControl {
  * the tabs and the search where they are, so selecting rows does not grow the toolbar.
  */
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Collection toolbar
  *
  * The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps
@@ -14498,7 +14806,7 @@ textarea.FieldControl {
   margin-inline-start: auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.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
@@ -14534,6 +14842,10 @@ textarea.FieldControl {
   background: transparent;
   color: inherit;
   font: inherit;
+  /* A button's own text-transform and letter-spacing reset the header's, so a caps header
+   * (headerStyle="caps") showed sortable columns in mixed case. Inherit them like the font. */
+  text-transform: inherit;
+  letter-spacing: inherit;
   text-align: inherit;
   cursor: pointer;
 }
@@ -14698,7 +15010,38 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* Placeholder rows (placeholderRows): the table's shape before there is data. The real column
+ * headers in the tertiary text color, then plain bars where the values will be: border-subtle
+ * bars, border-default on subtotal rows so the section rhythm shows. 8px bars at the cell's
+ * alignment, so a figures column's bars hug the end like its numbers will. No hover, no
+ * pointer: the table is aria-hidden and nothing in it works. */
+.DataTable[data-placeholder] {
+  pointer-events: none;
+  user-select: none;
+}
+
+.DataTable[data-placeholder] thead th {
+  color: var(--sl-text-tertiary);
+}
+
+.DataTable[data-placeholder] td {
+  line-height: 0;
+}
+
+.DataTablePlaceholderBar {
+  display: inline-block;
+  max-inline-size: 100%;
+  block-size: var(--sl-space-2);
+  border-radius: var(--sl-radius-minimal);
+  background: var(--sl-border-subtle);
+  vertical-align: middle;
+}
+
+.DataTable[data-placeholder] [data-placeholder-row='subtotal'] .DataTablePlaceholderBar {
+  background: var(--sl-border-default);
+}
+
+/* @scattered-light/loomiere-base-ui 0.25.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
@@ -14840,7 +15183,7 @@ textarea.FieldControl {
   transition: opacity var(--sl-duration-fast) var(--sl-easing-default);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Collection cards
  *
  * The page of a collection as a grid. Columns fill the width, none narrower than
@@ -14865,7 +15208,7 @@ textarea.FieldControl {
   flex: 1 1 auto;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.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.
@@ -14890,7 +15233,7 @@ textarea.FieldControl {
   margin: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.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
@@ -14989,7 +15332,7 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Sheet
  *
  * A working-paper surface: the raised surface with a heavier rule across its top
@@ -15107,7 +15450,7 @@ textarea.FieldControl {
   border-top: 0;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* StatFigure
  *
  * One large figure with a caps label above and a caption under it. The label is
@@ -15168,7 +15511,7 @@ textarea.FieldControl {
   color: var(--sl-stat-figure-caption-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* StatCard
  *
  * A card for one thing a page lists: a name (the heading), a caption, and a row of StatFigures
@@ -15330,7 +15673,7 @@ textarea.FieldControl {
   white-space: nowrap;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* DescriptionList
  *
  * Label and value pairs in a native dl, one DescriptionItem (a div holding a dt and a dd)
@@ -15408,7 +15751,7 @@ textarea.FieldControl {
   text-align: end;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* FormGrid
  *
  * Fields on a grid. Columns are as wide as the space allows up to --form-grid-columns
@@ -15445,7 +15788,7 @@ textarea.FieldControl {
   align-self: end;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Notice
  *
  * A message in the page: a thick leading edge and a tinted ground. data-status picks the
@@ -15501,7 +15844,271 @@ textarea.FieldControl {
   --notice-ground: var(--sl-surface-tray);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
+/* ChecklistNotice
+ *
+ * A Notice with a list of pass/fail rows. The title is subtitle-condense; each row is a mark
+ * (check or close) and the label in body-condense, with an optional detail line in the
+ * secondary color. Rows are split by a hairline. A passed row's mark is the success color,
+ * a failed one's the error color, so the two differ in lightness as well as hue in every
+ * theme; the visually hidden "Done" / "Not done" carries the state for assistive tech.
+ */
+
+.ChecklistNotice {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-2);
+}
+
+.ChecklistNoticeTitle {
+  font-family: var(--sl-font-subtitle-condense-font-family);
+  font-size: var(--sl-font-subtitle-condense-font-size);
+  font-weight: var(--sl-font-subtitle-condense-font-weight);
+  line-height: var(--sl-font-subtitle-condense-line-height);
+  letter-spacing: var(--sl-font-subtitle-condense-letter-spacing);
+  margin: 0;
+}
+
+.ChecklistNoticeList {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ChecklistNoticeItem {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sl-space-2);
+  padding-block: var(--sl-space-1-5);
+  border-top: var(--sl-stroke-default) solid var(--sl-border-subtle);
+}
+
+.ChecklistNoticeMark {
+  flex-shrink: 0;
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+  line-height: inherit;
+  font-weight: var(--sl-font-weight-semibold);
+  color: var(--sl-status-error-dark);
+}
+
+.ChecklistNoticeItem[data-passed] .ChecklistNoticeMark {
+  color: var(--sl-status-success-dark);
+}
+
+.ChecklistNoticeText {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ChecklistNoticeDetail {
+  color: var(--sl-text-secondary);
+}
+
+.ChecklistNoticeFooter {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-2);
+}
+
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
+/* ParameterBar
+ *
+ * Settings for a result, in one wrapping row on the tray: the app's fields at the start, the
+ * status line, the Run button and any extra actions at the end. Fields align on their controls
+ * (align-items: flex-end), so a field with a description does not push its neighbours' inputs
+ * down. When the bar is narrow the end group wraps onto its own line, at the start.
+ *
+ * data-changed (a setting changed since the last run) turns the status line to the warning
+ * text color. The bar itself does not dim anything; the app dims its own stale result.
+ *
+ * ParameterBarLocked is a fixed setting: the field label over the value as text with a lock,
+ * on no box, at the control's height so it lines up with the inputs beside it.
+ */
+
+.ParameterBar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--sl-space-3) var(--sl-space-4);
+  margin: 0;
+  padding: var(--sl-space-3) var(--sl-space-4);
+  border: var(--sl-stroke-default) solid var(--sl-border-default);
+  background: var(--sl-surface-tray);
+}
+
+.ParameterBarFields {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--sl-space-3) var(--sl-space-4);
+  min-width: 0;
+}
+
+/* A field in the bar keeps its own width; it does not stretch across the row. */
+.ParameterBarFields > .FieldRoot {
+  flex: 0 1 auto;
+}
+
+.ParameterBarEnd {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sl-space-2) var(--sl-space-3);
+  margin-inline-start: auto;
+}
+
+.ParameterBarStatus {
+  font-family: var(--sl-font-body-condense-font-family);
+  font-size: var(--sl-font-body-condense-font-size);
+  font-weight: var(--sl-font-body-condense-font-weight);
+  line-height: var(--sl-font-body-condense-line-height);
+  letter-spacing: var(--sl-font-body-condense-letter-spacing);
+  margin: 0;
+  color: var(--sl-text-secondary);
+}
+
+.ParameterBarStatus:empty {
+  display: none;
+}
+
+.ParameterBar[data-changed] .ParameterBarStatus {
+  color: var(--sl-status-warning-dark);
+}
+
+.ParameterBarLocked {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-field-gap);
+  min-width: 0;
+}
+
+.ParameterBarLockedValue {
+  font-family: var(--sl-font-body-base-font-family);
+  font-size: var(--sl-font-body-base-font-size);
+  font-weight: var(--sl-font-body-base-font-weight);
+  line-height: var(--sl-font-body-base-line-height);
+  letter-spacing: var(--sl-font-body-base-letter-spacing);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sl-space-1-5);
+  height: var(--sl-control-height-md);
+  color: var(--sl-text-primary);
+  white-space: nowrap;
+}
+
+.ParameterBarLockedValue .material-symbols-outlined {
+  width: var(--sl-icon-size-condense);
+  height: var(--sl-icon-size-condense);
+  font-size: var(--sl-icon-size-condense);
+  color: var(--sl-text-secondary);
+}
+
+.ParameterBarLockedText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
+/* LineItemGrid
+ *
+ * Editable lines (a journal entry, an invoice) on the Table styles. Cells hold controls, so
+ * their padding drops to the table's block padding and the controls fill the cell. The
+ * line-number column is narrow and in the tertiary color; the remove column is as narrow as
+ * its button. Footer rows stick to the bottom of the scroll box (maxHeight caps it): the
+ * table clips instead of hiding its overflow, because overflow: hidden would make the table
+ * the scroll container and the footer would never stick.
+ *
+ * A footer row's data-tone colors its figures with the status text colors (the -dark steps,
+ * which pass as text on the tray). The words in the cell carry the state; color only adds.
+ */
+
+.LineItemGrid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sl-space-2);
+  min-width: 0;
+}
+
+.LineItemGridScroll {
+  overflow: auto;
+  max-width: 100%;
+}
+
+.LineItemGridTable {
+  overflow: clip;
+  table-layout: fixed;
+  min-width: 40rem;
+}
+
+.LineItemGrid[data-read-only] .LineItemGridTable {
+  table-layout: auto;
+}
+
+.LineItemGridTable > tbody > tr > td {
+  padding-block: var(--sl-space-1);
+  vertical-align: middle;
+}
+
+/* A control fills its cell. */
+.LineItemGridTable > tbody > tr > td > :is(.Input, .FieldRoot, .ComboboxRoot, .MoneyField, .SelectTrigger) {
+  width: 100%;
+}
+
+.LineItemGridNumberCol {
+  width: var(--sl-space-10);
+}
+
+.LineItemGridRemoveCol {
+  width: var(--sl-space-14);
+}
+
+.LineItemGridNumber {
+  color: var(--sl-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.LineItemGridRemove {
+  text-align: center;
+}
+
+.LineItemGridTable > tfoot > tr > * {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  background: var(--sl-table-header-background);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+/* Stacked footer rows stick one above the other: the last at the bottom, the one before over it. */
+.LineItemGridTable > tfoot > tr:not(:last-child) > * {
+  bottom: var(--sl-table-row-height);
+}
+
+.LineItemGridTable > tfoot > tr[data-tone='success'] > [data-align='end'] {
+  color: var(--sl-status-success-dark);
+}
+
+.LineItemGridTable > tfoot > tr[data-tone='error'] > [data-align='end'] {
+  color: var(--sl-status-error-dark);
+}
+
+.LineItemGridAdd {
+  display: flex;
+}
+
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* Spinner
  *
  * A ring that turns: the track in the subtle border, the moving arc in the accent border.
@@ -15537,7 +16144,7 @@ textarea.FieldControl {
   }
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* AppBar
  *
  * The bar across the top of an app window, one row on a line in the rule color. The line is
@@ -15571,7 +16178,7 @@ textarea.FieldControl {
   background: var(--sl-app-bar-divider-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* PickerButton
  *
  * A trigger with a caps label before the current choice: CLIENT Alpha Services. The field
@@ -15671,7 +16278,7 @@ textarea.FieldControl {
   transform: rotate(180deg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* MultiSelect
  *
  * A PickerButton trigger that opens a popover of checkbox rows (label, count at the end) and a
@@ -15725,7 +16332,7 @@ textarea.FieldControl {
   border-top: 1px solid var(--sl-popup-separator-color);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* PickerSplit
  *
  * A PickerButton whose choice is itself a control: the main part (CLIENT Alpha Services) acts,
@@ -15823,7 +16430,7 @@ textarea.FieldControl {
   transform: rotate(180deg);
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* SplitButton
  *
  * A Button and a square Menu trigger side by side, joined into one outline: the inner corners
@@ -15847,7 +16454,7 @@ textarea.FieldControl {
   margin-inline-start: -1px;
 }
 
-/* @scattered-light/loomiere-base-ui 0.24.0 · styles for @base-ui/react 1.9.0 */
+/* @scattered-light/loomiere-base-ui 0.25.0 · styles for @base-ui/react 1.9.0 */
 /* SideNav
  *
  * The column of links down the side of a workspace. Rows are ruled apart with a hairline; the