flexdesk 0.16.1 → 0.17.1

package/css/flexdesk.css

@@ -164,6 +164,10 @@
     font-size: var(--font-size-sm);
     line-height: 1.5;
 }
+/* Shown: the service adds `visible` once the tooltip is positioned, and removes it to fade out */
+.twm-latex-tooltip.visible {
+    opacity: 1;
+}
 /* Tooltip header (first line) styling */
 .twm-latex-tooltip strong {
     display: block;
@@ -360,6 +364,46 @@
     background: var(--accent);
     border-color: var(--accent);
 }
+/* NotificationCenter progress toasts: a bar, a status line, a collapse toggle. */
+.twm-notification__collapse {
+    width: 22px;
+    height: 22px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.06);
+    color: #999;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    flex-shrink: 0;
+    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
+}
+.twm-notification__collapse:hover {
+    background: rgba(255, 255, 255, 0.14);
+    color: var(--text-bright);
+}
+.twm-notification--collapsed .twm-notification__collapse {
+    transform: rotate(-90deg);
+}
+.twm-notification__progress {
+    margin-top: var(--space-sm);
+}
+.twm-notification__status {
+    margin-top: var(--space-xs);
+    font-size: var(--font-size-xs);
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-notification--collapsed .twm-notification__body,
+.twm-notification--collapsed .twm-notification__status,
+.twm-notification--collapsed .twm-notification__description,
+.twm-notification--collapsed .twm-notification__actions {
+    display: none;
+}
 /* Notification history (bottom bar bell + popover) */
 .twm-notification-history__trigger {
     display: flex;
@@ -461,6 +505,10 @@
     padding: var(--space-md) 10px;
     font-size: var(--font-size-sm);
 }
+.twm-notification-history__item--success { border-left-color: var(--color-success, #3fb950); }
+.twm-notification-history__item--warn    { border-left-color: var(--color-warning, #ff9800); }
+.twm-notification-history__item--error,
+.twm-notification-history__item--fatal   { border-left-color: var(--color-danger, #c74e4e); }
 .twm-notification-history__item-header {
     display: flex;
     align-items: center;
@@ -634,9 +682,14 @@ body.twm-dt-col-resizing {
     width: auto;
     min-width: 80px;
 }
-/* Alternating row backgrounds */
+/* Alternating row backgrounds. The stripe is the row's `--twm-dt-row-bg`, set
+   at no specificity so a consumer's row class can replace it; a crosstab
+   (STORY-0091) also lays it under its pinned cells. */
+:where(.twm-preview-table tbody tr:nth-child(even)) {
+    --twm-dt-row-bg: rgba(255, 255, 255, 0.02);
+}
 .twm-preview-table tbody tr:nth-child(even) {
-    background: rgba(255, 255, 255, 0.02);
+    background: var(--twm-dt-row-bg);
 }
 /* Hover state (disabled in wizard via modifier) */
 .twm-preview-table:not(.twm-preview-table--readonly) tr:hover td {
@@ -780,6 +833,296 @@ body.twm-dt-col-resizing {
     opacity: 1;
     outline: 1px solid var(--accent-bright, #007acc);
 }
+/* STORY-0003 `selectionMode: 'cells'` — the range is a tint on its cells, the
+ * cursor a ring inside its cell (inset, so it moves no column by a pixel). A
+ * cell being edited gives its padding to the editor; a commit still out is
+ * dimmed, and a refused one carries a red ring and its message as the title. */
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--selected {
+    background: var(--state-selected, rgba(0, 122, 204, 0.15));
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--cursor {
+    box-shadow: inset 0 0 0 2px var(--accent-bright, #007acc);
+}
+.twm-preview-table.twm-dt--cells:focus {
+    outline: none;
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--editing {
+    padding: 0;
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--editing .twm-dt-editor {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 2px 6px;
+    border: 0;
+    outline: 2px solid var(--accent-bright, #007acc);
+    outline-offset: -2px;
+    background: var(--surface-well, #1e1e1e);
+    color: inherit;
+    font: inherit;
+}
+/* STORY-0087 the built-in editors: a checkbox keeps its own size, a text
+ * area grows with what it holds, and the choice box shows no empty helper
+ * line under it. */
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--editing .twm-dt-editor--bool {
+    width: auto;
+    margin: 4px 6px;
+    outline-offset: 1px;
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--editing textarea.twm-dt-editor {
+    resize: vertical;
+    min-height: 3.5em;
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--editing .twm-dt-editor--choice .twm-autocomplete-field__helper:empty {
+    display: none;
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--pending {
+    opacity: 0.6;
+    font-style: italic;
+}
+/* STORY-0088 `staged`: a value typed and not yet committed. */
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--staged {
+    background: color-mix(in srgb, var(--accent-bright, #007acc) 16%, transparent);
+}
+/* STORY-0089 `fillHandle`: a square on the range's corner cell, the cells a
+ * drag covers dashed, and a cell the fill skipped (not editable) hatched. */
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--fill-corner {
+    position: relative;
+}
+.twm-preview-table.twm-dt--cells .twm-dt-fill-handle {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 7px;
+    height: 7px;
+    box-sizing: border-box;
+    background: var(--accent-bright, #007acc);
+    border: 1px solid var(--surface-well, #1e1e1e);
+    cursor: crosshair;
+    z-index: 1;
+    touch-action: none;
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--fill-preview {
+    outline: 1px dashed var(--accent-bright, #007acc);
+    outline-offset: -1px;
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--fill-skipped {
+    background-image: repeating-linear-gradient(45deg,
+        color-mix(in srgb, var(--color-danger, #f14c4c) 22%, transparent) 0 4px, transparent 4px 8px);
+}
+/* STORY-0090. A cell a paste skipped (not editable) carries the same mark. */
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--paste-skipped {
+    background-image: repeating-linear-gradient(45deg,
+        color-mix(in srgb, var(--color-danger, #f14c4c) 22%, transparent) 0 4px, transparent 4px 8px);
+}
+/* While cells are staged, sort, filters and pages are held: the held control
+ * says why on itself (`data-refusal`). */
+.twm-data-table-component.twm-dt--frozen th.sortable[data-refusal] {
+    cursor: not-allowed !important;
+}
+.twm-data-table-component.twm-dt--frozen [data-refusal]:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--error {
+    box-shadow: inset 0 0 0 1px var(--color-danger, #f14c4c);
+}
+.twm-preview-table.twm-dt--cells tbody td.twm-dt-cell--error.twm-dt-cell--cursor {
+    box-shadow: inset 0 0 0 2px var(--color-danger, #f14c4c);
+}
+/* STORY-0086 `reorderable` — the header being dragged is dimmed, and the one
+ * it would land on carries a bar on the side it lands (inset: no column moves
+ * by a pixel while the pointer passes). */
+.twm-preview-table th.twm-dt-col--movable {
+    cursor: grab;
+}
+.twm-preview-table th.twm-dt-col--dragging {
+    opacity: 0.5;
+}
+.twm-preview-table th.twm-dt-col--drop {
+    box-shadow: inset 2px 0 0 0 var(--accent-bright, #007acc);
+}
+.twm-preview-table th.twm-dt-col--drop.twm-dt-col--drop-after {
+    box-shadow: inset -2px 0 0 0 var(--accent-bright, #007acc);
+}
+/* STORY-0066 `columnGroups` — the group row is a table of its own above the
+ * header table (`twm-dt-groups`), its `<col>`s copied from the header's widths;
+ * no first-column floor or cap of the header's applies to it. A crosstab's
+ * spanned header cells (STORY-0091) are the same group cells. A placeholder
+ * column (an empty group's) is drawn muted. The header action buttons are
+ * small icon buttons that keep to the cell. */
+.twm-preview-table.twm-dt-groups th.twm-dt-group,
+.twm-preview-table.twm-dt-crosstab th.twm-dt-group {
+    width: auto;
+    min-width: 0;
+    max-width: none;
+    text-align: center;
+    border-bottom: 1px solid var(--border-subtle, #333);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-preview-table.twm-dt-groups th.twm-dt-group + th.twm-dt-group,
+.twm-preview-table.twm-dt-crosstab th.twm-dt-group + th.twm-dt-group {
+    border-left: 1px solid var(--border-subtle, #333);
+}
+.twm-preview-table.twm-dt-groups th.twm-dt-group--empty .twm-dt-group__label {
+    opacity: 0.7;
+}
+.twm-preview-table .twm-dt-group__actions,
+.twm-preview-table .twm-dt-col-actions {
+    display: inline-flex;
+    gap: 2px;
+    margin-left: 4px;
+    vertical-align: middle;
+}
+.twm-preview-table .twm-dt-group__add,
+.twm-preview-table .twm-dt-group__action,
+.twm-preview-table .twm-dt-col-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 2px;
+    border: 0;
+    border-radius: 3px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.6;
+    font: inherit;
+}
+.twm-preview-table .twm-dt-group__add .material-symbols-outlined,
+.twm-preview-table .twm-dt-group__action .material-symbols-outlined,
+.twm-preview-table .twm-dt-col-action .material-symbols-outlined {
+    font-size: 16px;
+}
+.twm-preview-table .twm-dt-group__add:hover,
+.twm-preview-table .twm-dt-group__action:hover,
+.twm-preview-table .twm-dt-col-action:hover {
+    opacity: 1;
+    background: rgba(255, 255, 255, 0.08);
+}
+.twm-preview-table .twm-dt-group__add:focus-visible,
+.twm-preview-table .twm-dt-group__action:focus-visible,
+.twm-preview-table .twm-dt-col-action:focus-visible {
+    opacity: 1;
+    outline: 1px solid var(--accent-bright, #007acc);
+}
+.twm-preview-table th.twm-dt-col--placeholder,
+.twm-preview-table td.twm-dt-cell--placeholder {
+    background: rgba(255, 255, 255, 0.015);
+}
+.twm-preview-table th .twm-dt-col-rename {
+    width: 100%;
+    box-sizing: border-box;
+    font: inherit;
+}
+/* STORY-0091 `crosstab` — one table in one scroller (`twm-dt-crosstab`).
+ * Every header cell sticks to the top at the `top` crosstab.js measured for its
+ * row; the pinned cells (select, row number and label columns) stick to the
+ * left at the `left` it measured, and the corner — header cells over them — to
+ * both, above everything else. Every crosstab row paints its `--twm-dt-row-bg`,
+ * so a row coloured through it is one colour from the label cells to the last
+ * column.
+ *
+ * A pinned body cell needs an OPAQUE background or the cells scrolling under it
+ * show through, and every state FlexDesk paints on a `td` is translucent. So
+ * the pinned cell's background is one `!important` stack nothing can replace —
+ * not a stronger state rule, not an animation (an important declaration
+ * outranks both) — and the states reach it as LAYERS instead:
+ *   --twm-dt-pin-mark   a mark over everything (the fill's skipped hatch)
+ *   --twm-dt-pin-new    the new-row flash (a registered colour, so it animates)
+ *   --twm-dt-pin-state  the cell's state tint: hover, row and cell selection,
+ *                       staged, placeholder, diff
+ *   --twm-dt-row-bg     the row's background (the stripe or a consumer's colour)
+ *   --surface-0         the opaque surface under all of them.
+ * Each state rule below is the unpinned rule it mirrors, with
+ * `.twm-dt-crosstab` on the table and `.twm-dt-pin` on the cell — the same two
+ * classes on every one, in the same order, so the state a pinned cell shows is
+ * the one its unpinned neighbours show. */
+@property --twm-dt-pin-new {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: transparent;
+}
+.twm-preview-table.twm-dt-crosstab tbody tr {
+    background: var(--twm-dt-row-bg, transparent);
+}
+.twm-preview-table.twm-dt-crosstab thead th {
+    position: sticky;
+    z-index: 3;
+}
+.twm-preview-table.twm-dt-crosstab thead th.twm-dt-pin {
+    z-index: 4;
+}
+.twm-preview-table.twm-dt-crosstab tbody td.twm-dt-pin {
+    position: sticky;
+    z-index: 1;
+    background:
+        var(--twm-dt-pin-mark, none),
+        linear-gradient(var(--twm-dt-pin-new, transparent), var(--twm-dt-pin-new, transparent)),
+        var(--twm-dt-pin-state, none),
+        linear-gradient(var(--twm-dt-row-bg, transparent), var(--twm-dt-row-bg, transparent)) var(--surface-0, #1e1e1e) !important;
+}
+.twm-preview-table.twm-dt-crosstab .twm-dt-pin--last {
+    box-shadow: inset -1px 0 0 var(--border-strong, #3c3c3c);
+}
+.twm-preview-table.twm-dt-crosstab:not(.twm-preview-table--readonly) tr:hover td.twm-dt-pin {
+    --twm-dt-pin-state: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04));
+}
+.twm-preview-table.twm-dt-crosstab:not(.twm-preview-table--readonly) tbody tr.selected td.twm-dt-pin,
+.twm-preview-table.twm-dt-crosstab tbody tr.selected td.twm-dt-pin {
+    --twm-dt-pin-state: linear-gradient(var(--state-selected, rgba(0, 122, 204, 0.15)), var(--state-selected, rgba(0, 122, 204, 0.15)));
+}
+.twm-preview-table.twm-dt-crosstab.twm-dt--clickable tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row):not(.selected):hover td.twm-dt-pin {
+    --twm-dt-pin-state: linear-gradient(var(--state-hover, rgba(255, 255, 255, 0.05)), var(--state-hover, rgba(255, 255, 255, 0.05)));
+}
+.twm-preview-table.twm-dt-crosstab.twm-dt--cells tbody td.twm-dt-pin.twm-dt-cell--selected {
+    --twm-dt-pin-state: linear-gradient(var(--state-selected, rgba(0, 122, 204, 0.15)), var(--state-selected, rgba(0, 122, 204, 0.15)));
+}
+.twm-preview-table.twm-dt-crosstab.twm-dt--cells tbody td.twm-dt-pin.twm-dt-cell--staged {
+    --twm-dt-pin-state: linear-gradient(color-mix(in srgb, var(--accent-bright, #007acc) 16%, transparent), color-mix(in srgb, var(--accent-bright, #007acc) 16%, transparent));
+}
+.twm-preview-table.twm-dt-crosstab.twm-dt--cells tbody td.twm-dt-pin.twm-dt-cell--fill-skipped {
+    --twm-dt-pin-mark: repeating-linear-gradient(45deg,
+        color-mix(in srgb, var(--color-danger, #f14c4c) 22%, transparent) 0 4px, transparent 4px 8px);
+}
+.twm-preview-table.twm-dt-crosstab.twm-dt--cells tbody td.twm-dt-pin.twm-dt-cell--paste-skipped {
+    --twm-dt-pin-mark: repeating-linear-gradient(45deg,
+        color-mix(in srgb, var(--color-danger, #f14c4c) 22%, transparent) 0 4px, transparent 4px 8px);
+}
+.twm-preview-table.twm-dt-crosstab td.twm-dt-pin.twm-dt-cell--placeholder {
+    --twm-dt-pin-state: linear-gradient(rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015));
+}
+.twm-data-table-component .twm-preview-table.twm-dt-crosstab tbody tr.twm-dt-diff--added:not(.selected) > td.twm-dt-pin {
+    --twm-dt-pin-state: linear-gradient(color-mix(in srgb, var(--color-success, #3fb950) 16%, transparent), color-mix(in srgb, var(--color-success, #3fb950) 16%, transparent));
+}
+.twm-data-table-component .twm-preview-table.twm-dt-crosstab tbody tr.twm-dt-diff--removed:not(.selected) > td.twm-dt-pin {
+    --twm-dt-pin-state: linear-gradient(color-mix(in srgb, var(--color-danger, #c74e4e) 18%, transparent), color-mix(in srgb, var(--color-danger, #c74e4e) 18%, transparent));
+}
+.twm-data-table-component .twm-preview-table.twm-dt-crosstab tbody tr.twm-dt-diff:not(.selected) > td.twm-dt-pin.twm-dt-diff__cell--changed {
+    --twm-dt-pin-state: linear-gradient(color-mix(in srgb, var(--color-warning, #ff9800) 22%, transparent), color-mix(in srgb, var(--color-warning, #ff9800) 22%, transparent));
+}
+.twm-data-table-component .twm-preview-table.twm-dt-crosstab tbody tr.twm-dt-diff--gap > td.twm-dt-pin.twm-dt-diff__gap {
+    --twm-dt-pin-state: repeating-linear-gradient(135deg,
+        transparent 0 6px,
+        color-mix(in srgb, var(--text-muted, #888) 14%, transparent) 6px 7px);
+}
+.twm-preview-table.twm-dt-crosstab tr:hover td.twm-dt-pin {
+    --twm-dt-pin-state: linear-gradient(rgba(255,255,255,0.04), rgba(255,255,255,0.04));
+}
+@keyframes twm-dt-pin-new {
+    from { --twm-dt-pin-new: var(--twm-dt-new-bg, rgba(0, 122, 204, 0.22)); }
+    to { --twm-dt-pin-new: transparent; }
+}
+.twm-preview-table.twm-dt-crosstab tbody tr.twm-dt-row--new > td.twm-dt-pin {
+    animation: twm-dt-pin-new 1.6s ease-out;
+}
+.twm-preview-table.twm-dt-crosstab th.twm-dt-crosstab__none {
+    font-style: italic;
+    opacity: 0.7;
+}
 /* In the mode a click ticks: a pointer on every row, and the keyboard's row
  * (the arrows move it, Space ticks it) drawn as an outline. */
 .twm-preview-table.twm-dt--selecting tbody tr:not(.twm-dt-spacer):not(.data-table__empty-row) {
@@ -1107,6 +1450,82 @@ body.twm-dt-col-resizing {
     cursor: grab;
     border: 2px solid var(--surface-0);
 }
+/* ══ SLIDER FIELD COMPANIONS ══ number box, readout, reset, enable toggle (STORY-0045) */
+.twm-slider-field__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    min-width: 0;
+}
+.twm-slider-field__row > .twm-slider-field__input {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.twm-slider-field__toggle {
+    flex: 0 0 auto;
+    margin: 0;
+    cursor: pointer;
+}
+.twm-slider-field__readout {
+    flex: 0 0 auto;
+    min-width: 3em;
+    text-align: right;
+    font-size: var(--font-size-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--text-dim);
+}
+.twm-slider-field__number {
+    flex: 0 0 auto;
+    width: 6em;
+    padding: var(--space-xxs) var(--space-xs);
+    font: inherit;
+    font-size: var(--font-size-sm);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    color: var(--text-body);
+    background: var(--surface-well);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+}
+.twm-slider-field__number:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+.twm-slider-field__reset {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 22px;
+    height: 22px;
+    color: var(--text-dim);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    visibility: hidden;
+}
+.twm-slider-field__reset .material-symbols-outlined {
+    font-size: 16px;
+}
+.twm-slider-field__reset:hover {
+    color: var(--text-bright);
+    background: var(--state-hover);
+}
+.twm-slider-field--modified .twm-slider-field__reset {
+    visibility: visible;
+}
+.twm-slider-field--modified .twm-slider-field__number,
+.twm-slider-field--modified .twm-slider-field__readout {
+    color: var(--accent-bright);
+}
+.twm-slider-field--off .twm-slider-field__input,
+.twm-slider-field--off .twm-slider-field__number,
+.twm-slider-field--off .twm-slider-field__readout {
+    opacity: 0.45;
+}
+/* ══ end SLIDER FIELD COMPANIONS ══ */
 /* ===== Sortable List Component ===== */
 .twm-sortable-list {
     display: flex;
@@ -2955,49 +3374,274 @@ body.twm-window-maximized .twm-resize-handle {
     cursor: default;
 }
 
-/* ═══════════════════════════════════════════════════════════════════════
-   @flexdesk/tiles — THE TILE GRID'S CHROME
-
-   THIS STYLESHEET HAD NEVER EXISTED. `src/tiles/` was extracted from
-   EcoAgent's `ui/js/results/` with its JavaScript and without its CSS, so
-   every consumer of `@flexdesk/tiles` got a `TileGrid` that ran, dragged,
-   resized, saved layouts — and drew a column of unstyled `<div>`s.
-   `TileGrid._init()` sets `--grid-columns`, `--grid-row-height` and
-   `--grid-gap` on the grid element (`src/tiles/tile_grid.js`), and until
-   these rules landed NOTHING IN ANY STYLESHEET READ THEM: no
-   `display: grid`, no `grid-template-columns`, no `grid-auto-rows`. That is
-   the CSS-side half of this repository's signature bug — not a class the JS
-   sets and no rule defines, but the reverse, three custom properties written
-   by the JS into a void.
-
-   THE CLASS NAMES ARE UNPREFIXED, deliberately and unusually. Everything
-   else in this file is `twm-`; these are not, because the names are compiled
-   into the JavaScript that was extracted (`className = 'tile-grid'`,
-   `'tile-header'`, `classList.add('dragging')` …) and renaming them upstream
-   would be a breaking change to every consumer for a cosmetic gain. The one
-   place the prefix DOES appear — `.twm-tile-error`, below — is the exception
-   that proves it: `showError()` emits the prefixed spelling, so the donor's
-   `.tile-error` rule is NOT ported here. Porting it would have written a
-   dead rule directly beside a live class, which is the mistake this comment
-   exists to stop the next reader from repeating.
-
-   Values come from `tokens.css`, so swapping the tokens restyles the tiles
-   with everything else. Two colour literals survive the port and each says at
-   its own rule why: a light accent, for which there is no token (the nearest,
-   `--accent-bright`, is a border colour on this background rather than a text
-   one), and the error red already shipped in `.twm-tile-error`.
-   Ported from EcoAgent `ui/css/results_widgets.css` (the donor still owns its
-   own copy — it does not load this file).
-   ═══════════════════════════════════════════════════════════════════════ */
+/* ─── Progress: ProgressBar, ProgressList, StepProgress ──────────────
+   `src/ui/components/progress.js`. Every width is the fill's inline
+   `style.width`, changed in place; the states are modifier classes. */
 
-/* ── the grid container ──────────────────────────────────────────────── */
-/* The three custom properties are set by `TileGrid._init()` as inline style
-   on this element; the fallbacks are the constructor's defaults, so a grid
-   element built by hand still lays out. */
-.tile-grid {
-    display: grid;
-    grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
-    grid-auto-rows: var(--grid-row-height, 80px);
+.twm-progress {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    min-width: 0;
+}
+.twm-progress__head {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-sm);
+    font-size: var(--font-size-sm);
+    color: var(--text-secondary);
+}
+.twm-progress__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-primary);
+}
+.twm-progress__readout,
+.twm-progress__elapsed {
+    flex: 0 0 auto;
+    font-variant-numeric: tabular-nums;
+}
+.twm-progress__elapsed {
+    color: var(--text-muted);
+}
+.twm-progress__cancel {
+    flex: 0 0 auto;
+    background: transparent;
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font-size: var(--font-size-xs);
+    padding: 0 var(--space-sm);
+    cursor: pointer;
+}
+.twm-progress__cancel:hover:not(:disabled) {
+    border-color: var(--color-danger);
+    color: var(--color-danger);
+}
+.twm-progress__cancel:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+.twm-progress__track,
+.twm-progress-list__track {
+    position: relative;
+    height: 6px;
+    overflow: hidden;
+    background: var(--surface-3);
+    border-radius: var(--radius-pill);
+}
+.twm-progress__fill,
+.twm-progress-list__fill {
+    height: 100%;
+    width: 0;
+    background: var(--accent);
+    border-radius: inherit;
+    transition: width var(--transition-normal);
+}
+.twm-progress--indeterminate .twm-progress__fill {
+    position: absolute;
+    left: 0;
+    width: 30%;
+    animation: twm-progress-sweep 1.2s ease-in-out infinite;
+}
+.twm-progress--done .twm-progress__fill {
+    background: var(--color-success);
+}
+.twm-progress--error .twm-progress__fill {
+    background: var(--color-danger);
+}
+.twm-progress--cancelled .twm-progress__fill {
+    background: var(--text-dim);
+}
+@keyframes twm-progress-sweep {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(340%); }
+}
+
+.twm-progress-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    min-width: 0;
+}
+.twm-progress-list__rows {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+.twm-progress-list__row {
+    display: grid;
+    grid-template-columns: auto minmax(6em, 1fr) minmax(4em, 2fr) auto;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+}
+.twm-progress-list__name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-progress-list__count {
+    color: var(--text-secondary);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+.twm-progress-list__state {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-circle);
+    background: var(--text-dim);
+}
+.twm-progress-list__row--running .twm-progress-list__state {
+    background: var(--accent);
+}
+.twm-progress-list--pulse .twm-progress-list__row--running .twm-progress-list__state {
+    animation: twm-progress-pulse 1.2s ease-in-out infinite;
+}
+.twm-progress-list__row--done .twm-progress-list__state,
+.twm-progress-list__row--done .twm-progress-list__fill {
+    background: var(--color-success);
+}
+.twm-progress-list__row--failed .twm-progress-list__state,
+.twm-progress-list__row--failed .twm-progress-list__fill {
+    background: var(--color-danger);
+}
+.twm-progress-list__row--pending {
+    color: var(--text-muted);
+}
+.twm-progress-list__empty,
+.twm-progress-list__stats {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+}
+@keyframes twm-progress-pulse {
+    0%, 100% { opacity: 1; }
+    50%      { opacity: 0.35; }
+}
+
+.twm-steps {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs) var(--space-lg);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--font-size-sm);
+}
+.twm-steps__step {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    color: var(--text-muted);
+}
+.twm-steps__marker {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-circle);
+    border: 1px solid currentColor;
+}
+.twm-steps__step--done {
+    color: var(--text-secondary);
+}
+.twm-steps__step--done .twm-steps__marker {
+    background: var(--color-success);
+    border-color: var(--color-success);
+}
+.twm-steps__step--active {
+    color: var(--text-primary);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-steps__step--active .twm-steps__marker {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+.twm-steps__step--error {
+    color: var(--color-danger);
+}
+.twm-steps__step--error .twm-steps__marker {
+    background: var(--color-danger);
+    border-color: var(--color-danger);
+}
+.twm-steps__pass {
+    font-weight: var(--font-weight-regular);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+}
+@media (prefers-reduced-motion: reduce) {
+    .twm-progress__fill,
+    .twm-progress-list__fill { transition: none; }
+    .twm-progress--indeterminate .twm-progress__fill,
+    .twm-progress-list--pulse .twm-progress-list__row--running .twm-progress-list__state { animation: none; }
+}
+
+/* The bar and phases inside showRunProgressDialog / showComputingWindow,
+   and the message's final state. */
+.twm-job-progress__steps,
+.twm-job-progress__bar {
+    align-self: stretch;
+    margin: var(--space-xs) 0;
+}
+.twm-run-progress__message.is-ok,
+.twm-computing-status__message.is-ok {
+    color: var(--color-success);
+}
+.twm-run-progress__message.is-err,
+.twm-computing-status__message.is-err {
+    color: var(--color-danger);
+}
+.twm-run-progress__message.is-cancelled,
+.twm-computing-status__message.is-cancelled {
+    color: var(--text-muted);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   @flexdesk/tiles — THE TILE GRID'S CHROME
+
+   THIS STYLESHEET HAD NEVER EXISTED. `src/tiles/` was extracted from
+   EcoAgent's `ui/js/results/` with its JavaScript and without its CSS, so
+   every consumer of `@flexdesk/tiles` got a `TileGrid` that ran, dragged,
+   resized, saved layouts — and drew a column of unstyled `<div>`s.
+   `TileGrid._init()` sets `--grid-columns`, `--grid-row-height` and
+   `--grid-gap` on the grid element (`src/tiles/tile_grid.js`), and until
+   these rules landed NOTHING IN ANY STYLESHEET READ THEM: no
+   `display: grid`, no `grid-template-columns`, no `grid-auto-rows`. That is
+   the CSS-side half of this repository's signature bug — not a class the JS
+   sets and no rule defines, but the reverse, three custom properties written
+   by the JS into a void.
+
+   THE CLASS NAMES ARE UNPREFIXED, deliberately and unusually. Everything
+   else in this file is `twm-`; these are not, because the names are compiled
+   into the JavaScript that was extracted (`className = 'tile-grid'`,
+   `'tile-header'`, `classList.add('dragging')` …) and renaming them upstream
+   would be a breaking change to every consumer for a cosmetic gain. The one
+   place the prefix DOES appear — `.twm-tile-error`, below — is the exception
+   that proves it: `showError()` emits the prefixed spelling, so the donor's
+   `.tile-error` rule is NOT ported here. Porting it would have written a
+   dead rule directly beside a live class, which is the mistake this comment
+   exists to stop the next reader from repeating.
+
+   Values come from `tokens.css`, so swapping the tokens restyles the tiles
+   with everything else. Two colour literals survive the port and each says at
+   its own rule why: a light accent, for which there is no token (the nearest,
+   `--accent-bright`, is a border colour on this background rather than a text
+   one), and the error red already shipped in `.twm-tile-error`.
+   Ported from EcoAgent `ui/css/results_widgets.css` (the donor still owns its
+   own copy — it does not load this file).
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* ── the grid container ──────────────────────────────────────────────── */
+/* The three custom properties are set by `TileGrid._init()` as inline style
+   on this element; the fallbacks are the constructor's defaults, so a grid
+   element built by hand still lays out. */
+.tile-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
+    grid-auto-rows: var(--grid-row-height, 80px);
     gap: var(--grid-gap, 16px);
     padding: var(--grid-gap, 16px) 0 0 0;
     /* A floor rather than a height: the rows are what size the grid. It
@@ -3489,10 +4133,12 @@ body.twm-window-maximized .twm-resize-handle {
     font-size: 32px;
 }
 
-/* ── the chart and KPI tiles (0.13.0, src/tiles/chart_tiles.js) ──────── */
-/* The figure flexes into what `.tile-content`'s column leaves; the note takes
-   its own line BELOW it, so the height chain above is untouched. */
-.fd-chart-tile {
+/* ── the figure, chart and KPI tiles (0.13.0, src/tiles/chart_tiles.js;
+      0.17.0, src/tiles/figure_tile.js) ─────────────────────────────── */
+/* A figure tile's plot (a chart tile's too: it is one) flexes into what
+   `.tile-content`'s column leaves; a chart's note takes its own line BELOW it,
+   so the height chain above is untouched. */
+.fd-figure-tile {
     display: flex;
     flex-direction: column;
     flex: 1 1 auto;
@@ -3504,7 +4150,7 @@ body.twm-window-maximized .twm-resize-handle {
 /* Plotly puts `.js-plotly-plot` on the figure itself, and the rule above makes
    that `height: 100% !important` — which, beside a note, pushes the note out of
    the tile. Here the flex column sizes the figure instead. */
-.tile-content .fd-chart-tile.js-plotly-plot {
+.tile-content .fd-figure-tile.js-plotly-plot {
     height: auto !important;
 }
 
@@ -3718,6 +4364,60 @@ body.twm-window-maximized .twm-resize-handle {
 .fd-scope-picker__btn--on:hover { background: var(--accent); color: #fff; }
 .fd-scope-picker__btn:focus-visible { outline: 1px solid var(--accent-bright); outline-offset: -2px; }
 
+/* ── the tile config form (0.17.0, tile_config_form.js) ──────────────────
+   One row per schema field: the label, the control, the description, the
+   inline error. A hidden row (visibleWhen) is `hidden`, never rebuilt. */
+.fd-tile-config {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    padding: var(--space-sm);
+    font-size: var(--font-size-sm);
+}
+.fd-tile-config__row {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+}
+.fd-tile-config__row[hidden] { display: none; }
+.fd-tile-config__row--checkbox {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-xs);
+}
+.fd-tile-config__row--checkbox .fd-tile-config__help,
+.fd-tile-config__row--checkbox .fd-tile-config__error { flex-basis: 100%; }
+.fd-tile-config__label { color: var(--text-secondary); font-size: var(--font-size-xs); }
+.fd-tile-config__input,
+.fd-tile-config__select {
+    width: 100%;
+    box-sizing: border-box;
+    padding: var(--ea-input-pad, 4px 6px);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    background: var(--ea-input-bg, transparent);
+    color: var(--text-bright);
+    font: inherit;
+}
+.fd-tile-config__input:focus,
+.fd-tile-config__select:focus { outline: none; border-color: var(--accent-bright); }
+.fd-tile-config__input:disabled,
+.fd-tile-config__select:disabled,
+.fd-tile-config__checkbox:disabled,
+.fd-tile-config__color:disabled,
+.fd-tile-config__range:disabled { opacity: 0.6; cursor: default; }
+.fd-tile-config__row--invalid .fd-tile-config__input,
+.fd-tile-config__row--invalid .fd-tile-config__select { border-color: var(--color-danger); }
+.fd-tile-config__range-wrap { display: flex; align-items: center; gap: var(--space-sm); }
+.fd-tile-config__range { flex: 1 1 auto; }
+.fd-tile-config__range-value { min-width: 3ch; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
+.fd-tile-config__color { width: 48px; height: 24px; padding: 0; border: 1px solid var(--border-subtle); background: transparent; }
+.fd-tile-config__help { color: var(--text-muted); font-size: var(--font-size-xs); line-height: 1.4; }
+.fd-tile-config__error { color: var(--color-danger); font-size: var(--font-size-xs); line-height: 1.4; }
+.fd-tile-config__error[hidden] { display: none; }
+
 /* ===================================================================
    REUSABLE ACTION DROPDOWN COMPONENT
    Used by Add Scenario, Add Widget, and other action dropdowns
@@ -3782,6 +4482,14 @@ body.twm-window-maximized .twm-resize-handle {
     box-sizing: border-box;
     transition: background var(--transition-normal), border-color var(--transition-normal);
 }
+/* A `{ separator: true }` entry: a rule between two groups of options. It is
+   not a button, so it takes no focus and the arrow keys pass over it. */
+.twm-action-dropdown-separator {
+    height: 1px;
+    /* the option above already leaves var(--space-xs) below itself */
+    margin: 0 0 var(--space-xs);
+    background: var(--border-subtle);
+}
 .twm-action-dropdown-option:last-child {
     margin-bottom: 0;
 }
@@ -4574,7 +5282,36 @@ button.twm-about-dialog__btn--close:focus {
 }
 /* ─── Badges ──────────────────────────────────────────────────────────── */
 
-/* .detail-header__badge* — moved to components/controls.css (Phase 2). */
+/* A badge beside the title (`createDetailHeader({badges})`, BUG-0015): a
+ * neutral pill from tokens. A caller's own `className` sits on the same
+ * element, after this rule's single class, to recolour it. */
+.twm-detail-header__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 2px var(--space-md);
+    border-radius: var(--radius-pill);
+    border: 1px solid var(--border-subtle);
+    background: var(--surface-2);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-tight);
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+/* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
+.twm-detail-header__badge-icon,
+.twm-detail-header__badge-icon.material-symbols-outlined {
+    font-size: 14px;
+    line-height: 1;
+}
+
+/* ─── Buttons ─────────────────────────────────────────────────────────── */
+
+/* An action is a `.twm-btn` (BUG-0015): the shared button look, with
+ * 'primary' wearing `.twm-btn--primary` and 'danger' `.twm-btn--danger`;
+ * 'secondary' is the plain button. Its icon is a `.twm-btn__glyph`. */
 
 /* ─── Subtitle ────────────────────────────────────────────────────────── */
 
@@ -4862,6 +5599,11 @@ button.twm-about-dialog__btn--close:focus {
     margin-left: auto;
     line-height: 1;
 }
+/* The badge's variants: createTreeItem's badge.variant ('muted' when unset) */
+.twm-tree-item__badge--muted { background: color-mix(in srgb, var(--text-dim) 15%, transparent); color: var(--text-dim); }
+.twm-tree-item__badge--pass  { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
+.twm-tree-item__badge--fail  { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }
+.twm-tree-item__badge--error { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }
 /* Status dot variant (smaller, no text) */
 .twm-tree-item__status-dot {
     width: 7px;
@@ -4869,7 +5611,12 @@ button.twm-about-dialog__btn--close:focus {
     border-radius: 50%;
     flex-shrink: 0;
     margin-left: auto;
+    background: var(--text-dim);
 }
+.twm-tree-item__status-dot--muted { background: var(--text-dim); }
+.twm-tree-item__status-dot--pass  { background: var(--color-success); }
+.twm-tree-item__status-dot--fail  { background: var(--color-danger); }
+.twm-tree-item__status-dot--error { background: var(--color-danger); }
 
 /* ── from slide_out_panel.css ───────────────────────── */
 /* ─── SlideOutPanel ─────────────────────────────────────────────────────────
@@ -5467,37 +6214,179 @@ button.twm-about-dialog__btn--close:focus {
 .twm-managed-window--modal .twm-picker__btn .material-symbols-outlined {
     font-size: 15px;
 }
-/* A row (or named section) hidden by openForm's `setVisible`. `[hidden]`
- * carries only the UA sheet's `display: none`, which the grid and flex rules
- * on `.twm-modal__row` / `.twm-modal__section` beat — so a hidden row stayed
- * on screen. */
-.twm-modal__row[hidden],
-.twm-modal__section[hidden] {
-    display: none !important;
-}
-/* Action strip — true footer band, flush against the modal edges,
- * darker chrome bg, top border + 1px highlight above. Right-aligned
- * buttons, primary stays rightmost. */
-.twm-managed-window--modal .twm-modal__actions {
-    margin-top: auto;
+/* Colour field: swatch (native picker) + hex box + optional preset strip.
+ * The hex box takes the field-well styling of the text inputs above. */
+.twm-color-field {
     display: flex;
-    justify-content: flex-end;
+    flex-wrap: wrap;
     align-items: center;
-    gap: 6px;
-    background: var(--ea-bg-chrome);
-    border-top: 1px solid #4a4a4a;
-    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03) inset;
-    padding: 6px 14px;
-    min-height: 32px;
+    gap: 4px;
+    min-width: 0;
 }
-.twm-managed-window--modal .twm-modal__actions .twm-btn {
+.twm-color-field__swatch {
+    flex: 0 0 auto;
+    width: 28px;
+    height: 22px;
+    padding: 0;
+    border: 1px solid #3a3a3a;
     border-radius: 0;
-    min-height: 22px;
-    padding: 0 14px;
-    font-size: var(--ea-font-body);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-}
+    background: transparent;
+    cursor: pointer;
+}
+.twm-color-field__hex {
+    flex: 1 1 90px;
+    min-width: 0;
+    font-family: 'Consolas', 'Monaco', monospace;
+}
+.twm-color-field--invalid .twm-color-field__hex {
+    border-color: #b03a3a;
+}
+.twm-color-field__presets {
+    flex: 1 0 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+}
+.twm-color-field__preset {
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 2px;
+    cursor: pointer;
+}
+.twm-color-field__preset:hover,
+.twm-color-field__preset:focus-visible {
+    outline: 1px solid var(--ea-accent, #569cd6);
+    outline-offset: 1px;
+}
+/* Colour list: a SortableList whose rows are a colour field + move buttons. */
+.twm-color-list {
+    min-width: 0;
+}
+.twm-color-list__row {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+}
+.twm-color-list__row > .twm-color-field {
+    flex: 1 1 auto;
+}
+.twm-color-list__move {
+    display: flex;
+    align-items: center;
+    padding: 2px;
+    background: transparent;
+    border: none;
+    color: #8c8c8c;
+    cursor: pointer;
+}
+.twm-color-list__move:hover:not(:disabled) {
+    color: var(--ea-accent, #569cd6);
+}
+.twm-color-list__move:disabled {
+    opacity: 0.3;
+    cursor: default;
+}
+.twm-color-list__move .material-symbols-outlined {
+    font-size: 15px;
+}
+/* An option that cannot be chosen, and why — drawn by choice_controls.js
+ * for openForm's select, checklist and radio (and the flow kit's widgets). */
+.twm-choice--disabled { cursor: default; opacity: 0.7; }
+.twm-choice__reason {
+    font-size: var(--font-size-xs);
+    font-style: italic;
+    color: var(--ea-text-dim);
+}
+.twm-flow-togglechip > .twm-choice__reason { margin-left: 4px; }
+/* A group's heading over its chips or radio rows (a select's is its optgroup). */
+.twm-choice__group {
+    flex-basis: 100%;
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--ea-text-dim);
+}
+.twm-choice__group:not(:first-child) { margin-top: 4px; }
+.twm-flow-togglechip > .twm-choice__reason::before { content: '— '; }
+/* A row (or named section) hidden by openForm's `setVisible`. `[hidden]`
+ * carries only the UA sheet's `display: none`, which the grid and flex rules
+ * on `.twm-modal__row` / `.twm-modal__section` beat — so a hidden row stayed
+ * on screen. */
+.twm-modal__row[hidden],
+.twm-modal__section[hidden] {
+    display: none !important;
+}
+/* A `{ row: [...] }` entry of openForm: its fields side by side, each one an
+ * ordinary `.twm-modal__row` with its own label, hint and error. The fields
+ * after the first size their label to its text; the first keeps the form's
+ * label column, so it lines up with the rows above and below, 10px from
+ * each, as any two rows are. A form narrower than 360px stacks them — the
+ * form is the query container, and only a form that has a row is made one,
+ * so no other form's layout moves. */
+.twm-managed-window--modal .twm-modal__form:has(.twm-modal__field-group) {
+    container: twm-form / inline-size;
+}
+.twm-modal__field-group {
+    display: flex;
+    align-items: flex-start;
+    column-gap: 10px;
+}
+.twm-modal__field-group > .twm-modal__row {
+    flex: 1 1 0;
+    min-width: 0;
+}
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__field-group {
+    margin-left: 14px;
+    margin-right: 14px;
+}
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__field-group:first-child {
+    margin-top: 14px;
+}
+/* A field after a leading row is still its label's first-of-type, so the
+ * leading-row margin above would land on it a second time: it keeps the
+ * normal 10px under the row (the row's own bottom margin) instead. */
+.twm-managed-window--modal .twm-modal__fields > .twm-modal__field-group ~ .twm-modal__row:first-of-type {
+    margin-top: 0;
+}
+.twm-managed-window--modal .twm-modal__field-group > .twm-modal__row + .twm-modal__row {
+    grid-template-columns: auto 1fr;
+}
+@container twm-form (max-width: 359px) {
+    .twm-modal__field-group {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .twm-managed-window--modal .twm-modal__field-group > .twm-modal__row + .twm-modal__row {
+        grid-template-columns: 130px 1fr;
+    }
+}
+/* Action strip — true footer band, flush against the modal edges,
+ * darker chrome bg, top border + 1px highlight above. Right-aligned
+ * buttons, primary stays rightmost. */
+.twm-managed-window--modal .twm-modal__actions {
+    margin-top: auto;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 6px;
+    background: var(--ea-bg-chrome);
+    border-top: 1px solid #4a4a4a;
+    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03) inset;
+    padding: 6px 14px;
+    min-height: 32px;
+}
+.twm-managed-window--modal .twm-modal__actions .twm-btn {
+    border-radius: 0;
+    min-height: 22px;
+    padding: 0 14px;
+    font-size: var(--ea-font-body);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
 .twm-managed-window--modal .twm-modal__actions .twm-btn--primary {
     background: var(--ea-accent);
     border-color: var(--ea-accent);
@@ -5526,6 +6415,12 @@ button.twm-about-dialog__btn--close:focus {
     min-height: 0;
     overflow-y: auto;
 }
+/* openConfirm's message is text (BUG-0014): `\n` breaks the line, and a long
+ * unbroken name wraps instead of widening the dialog. */
+.twm-managed-window--modal .twm-modal__body--text {
+    white-space: pre-line;
+    overflow-wrap: anywhere;
+}
 /* Form-level error banner — left accent stripe, dim red panel. */
 .twm-managed-window--modal .twm-modal__error {
     margin-top: 8px;
@@ -6156,7 +7051,7 @@ body.twm-dragging * { user-select: none; }
      * size (24) draws strokes too heavy to read as a small control. */
     font-variation-settings: 'opsz' 20, 'wght' 400;
 }
-.twm-leaf__btn:hover:not(:disabled) { background: var(--state-hover); color: var(--text-primary); }
+.twm-leaf__btn:hover:not(:disabled):not(.twm-leaf__btn--disabled) { background: var(--state-hover); color: var(--text-primary); }
 /* C20. A verb that applies to this kind of pane but not right now — greyed and
  * explained by its tooltip, rather than removed. `:disabled` alone would still
  * take the hover highlight above, which reads as clickable. */
@@ -6165,6 +7060,34 @@ body.twm-dragging * { user-select: none; }
     opacity: 0.35;
     cursor: default;
 }
+
+/* C42. A content action that is a toggle, and on: `aria-pressed="true"`. The
+ * selected tint the rest of the shell uses, so "on" reads the same everywhere. */
+.twm-leaf__btn--pressed {
+    background: var(--state-selected);
+    color: var(--text-primary);
+}
+
+/* C42. A content action with a text label: the 18px square is for a glyph, so
+ * a labelled button grows to its text. */
+.twm-leaf__btn--labelled {
+    width: auto;
+    gap: 2px;
+    padding: 0 4px;
+}
+.twm-leaf__btn-label {
+    font-size: 11px;
+    line-height: 1;
+    white-space: nowrap;
+}
+
+/* C42. `{separator: true}` between groups of content actions. */
+.twm-leaf__sep {
+    align-self: stretch;
+    width: 1px;
+    margin: 3px 2px;
+    background: var(--border-subtle);
+}
 .twm-leaf__body {
     flex: 1 1 auto;
     overflow: auto;
@@ -6709,6 +7632,199 @@ body.twm-dragging * { user-select: none; }
     margin: var(--space-xxs) 0;
     background: var(--border-subtle);
 }
+
+/* ══ EDITOR · PANES, SPLIT AND SEARCH (BUG-0025) ═════════════════════
+ *
+ * The same family as the tab bar above: `SplitPaneContainer`, `EditorPane`
+ * and `NotebookSearchBar` set these classes and no FlexDesk stylesheet had a
+ * rule for any of them, so with only FlexDesk CSS a split stacked its panes,
+ * the divider was a zero-width div nobody could grab, and the search bar was
+ * a row of bare inputs and icon names.
+ *
+ *   `.split-pane-container*`, `.split-pane`, `.split-pane-divider*`
+ *                                     `editor/split_pane_container.js`
+ *   `.editor-pane*`, `.notebook-editor-container`
+ *                                     `editor/editor_pane.js`
+ *   `.nb-search-bar*`                 `editor/notebook_search.js`
+ *
+ * Layout first: the container is a row, each pane a column, and the divider
+ * a fixed-width strip that never shrinks. The pane's flex is also written
+ * inline by `SplitPaneContainer` (the ratio); the rule is the fallback. */
+.split-pane-container {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+.split-pane {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+/* 4px drawn, 10px grabbed: the `::before` widens the hit target 3px each side
+ * without moving either pane. */
+.split-pane-divider {
+    position: relative;
+    z-index: 1;
+    flex: 0 0 4px;
+    width: 4px;
+    background: var(--border-strong);
+    cursor: col-resize;
+    transition: background 0.15s;
+}
+.split-pane-divider::before {
+    content: '';
+    position: absolute;
+    inset: 0 -3px;
+}
+.split-pane-divider:hover,
+.split-pane-divider--active {
+    background: var(--accent-bright, #1683c4);
+}
+/* A pane is its tab bar over its body. The tab bar's own rule says
+ * `height: 100%` (it fills a tile's strip); here it is a fixed 26px row, the
+ * strip's height, and the body takes the rest. */
+.editor-pane {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+}
+.editor-pane > .tabs.notebook-tabs {
+    flex: 0 0 auto;
+    height: 26px;
+}
+/* Which of two panes has focus — only drawn when there ARE two. An inset
+ * shadow rather than a border, so focusing a pane does not move its body.
+ * This and the tab-bar row above need `.editor-pane` to survive
+ * `setPanes()`, which is why `SplitPaneContainer` ADDS `.split-pane` to a
+ * pane instead of replacing its classes with it. */
+.split-pane-container--split .editor-pane--focused > .tabs.notebook-tabs {
+    box-shadow: inset 0 -1px 0 var(--accent-bright, #1683c4);
+}
+/* The body is the positioning anchor; the editor container fills it
+ * absolutely, so its height is the body's whatever its content is and the
+ * scrollbar is its own. */
+.editor-pane__body {
+    position: relative;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
+}
+.notebook-editor-container {
+    position: absolute;
+    inset: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    background: var(--surface-0);
+    outline: none;
+}
+/* The search bar: mounted at the top of the editor container and sticky
+ * there, hidden until `open()` adds `--open`. */
+.nb-search-bar {
+    position: sticky;
+    top: 0;
+    z-index: 50;
+    display: none;
+    flex-direction: column;
+    gap: var(--space-xs);
+    padding: var(--space-sm) var(--space-md);
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-strong);
+    box-shadow: var(--shadow-md);
+    color: var(--text-primary);
+    font-size: var(--font-size-sm);
+}
+.nb-search-bar--open { display: flex; }
+.nb-search-bar__find-row,
+.nb-search-bar__replace-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+}
+/* Lines the replace input up under the find input: the toggle's width. */
+.nb-search-bar__spacer {
+    flex: 0 0 26px;
+    width: 26px;
+}
+.nb-search-bar__input-wrap {
+    flex: 1 1 auto;
+    min-width: 160px;
+    max-width: 320px;
+}
+.nb-search-bar__input {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 3px var(--space-sm);
+    background: var(--surface-3);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    font: inherit;
+    outline: none;
+}
+.nb-search-bar__input:focus { border-color: var(--accent-bright, #1683c4); }
+.nb-search-bar__match-info {
+    min-width: 64px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-align: center;
+    white-space: nowrap;
+    user-select: none;
+}
+.nb-search-bar__match-info--no-results { color: var(--color-danger, #c74e4e); }
+.nb-search-bar__btn {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+}
+.nb-search-bar__btn:hover { background: var(--state-hover); }
+.nb-search-bar__btn:active { background: var(--state-active); }
+/* The case / word / regex toggles reserve the border `--active` colours. */
+.nb-search-bar__btn--toggle { border: 1px solid transparent; }
+.nb-search-bar__btn--active,
+.nb-search-bar__btn--active:hover {
+    background: var(--state-selected);
+    border-color: var(--accent-bright, #1683c4);
+    color: var(--text-bright);
+}
+/* Two classes, for the Material Symbols tie — see `.twm-leaf__icon`. */
+.nb-search-bar__btn .material-symbols-outlined {
+    font-size: 18px;
+    line-height: 1;
+}
+.nb-search-bar__icon-word {
+    font-size: var(--font-size-md);
+    font-weight: 700;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+.nb-search-bar__separator {
+    flex: 0 0 1px;
+    width: 1px;
+    height: 18px;
+    margin: 0 2px;
+    background: var(--border-strong);
+}
+/* ══ end EDITOR · PANES, SPLIT AND SEARCH ══ */
 /* ── Tile tab menu (hamburger pop-out) ────────────────────────────
  * Anchored above the hamburger button. Lists every entity that the
  * tile's home page would show, grouped by source, with search +
@@ -7048,6 +8164,14 @@ body.twm-dragging * { user-select: none; }
     border-color: var(--accent-bright);
     color: var(--text-bright);
 }
+.twm-chip[aria-disabled="true"] {
+    color: var(--text-dim);
+    cursor: not-allowed;
+}
+.twm-chip[aria-disabled="true"]:hover {
+    background: var(--surface-2);
+    color: var(--text-dim);
+}
 .twm-cmdpal__list {
     max-height: 40vh;
     overflow: auto;
@@ -7196,6 +8320,8 @@ body.twm-dragging * { user-select: none; }
 }
 .twm-cmdpal__acts { display: none; gap: 10px; }
 .twm-cmdpal__item--active .twm-cmdpal__acts { display: flex; }
+/* A copy verb a single kind refuses: drawn, greyed, with the reason as its title. */
+.twm-cmdpal__act--disabled { opacity: 0.45; }
 .twm-cmdpal__item--active .twm-cmdpal__kind,
 .twm-cmdpal__item--active .twm-cmdpal__shortcut { display: none; }
 .twm-cmdpal__item--more { color: var(--text-muted); font-size: var(--font-size-sm); }
@@ -8006,17 +9132,125 @@ tr:hover .twm-row-action { opacity: 1; }
  * status line sits at the foot. Only a pane holding the Alerts pane: other
  * panes keep their padding and their own height. */
 .twm-bp-pane:has(> .twm-alerts) { height: 100%; padding: 0; box-sizing: border-box; }
-.twm-alerts .material-symbols-outlined { font-size: 15px; }
-.twm-alerts__spacer { flex: 1 1 auto; }
-.twm-alerts__rules { flex: 0 0 280px; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border-subtle); }
-.twm-alerts__head, .twm-alerts__bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-bottom: 1px solid var(--border-subtle); }
-.twm-alerts__bar { flex-wrap: wrap; }
-.twm-alerts__caps { color: var(--text-muted); font-size: 10.5px; letter-spacing: .08em; }
-.twm-alerts__link { padding: 0; border: 0; background: none; color: var(--accent-bright); font: inherit; cursor: pointer; }
-.twm-alerts__link:hover { text-decoration: underline; }
-.twm-alerts__rulelist { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; }
-.twm-alerts__rulebtn { width: 100%; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border: 0; background: none; color: var(--text-body); font: inherit; cursor: pointer; }
-.twm-alerts__rulebtn:hover { background: var(--state-hover); }
+/* The public tab strip (`createTabs`, STORY-0048). It SCROLLS, never wraps or
+ * shrinks its tabs, and hides the scrollbar; the wheel and the reveal of the
+ * tab in front are `strip_scroll.js`'s. `--compact` is the dense variant. The
+ * bottom panel draws the same component under its own `.twm-bp` block. */
+.twm-tabs {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    background: var(--surface-0);
+    color: var(--text-body);
+}
+.twm-tabs__tabs {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: stretch;
+    height: 30px;
+    min-width: 0;
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-subtle);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    white-space: nowrap;
+    user-select: none;
+}
+.twm-tabs__tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
+.twm-tabs__tab {
+    position: relative;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    max-width: 220px;
+    padding: 0 var(--space-sm);
+    background: transparent;
+    color: var(--text-muted);
+    border: none;
+    border-right: 1px solid var(--border-subtle);
+    font: inherit;
+    font-size: var(--font-size-xs);
+    line-height: 1;
+    cursor: pointer;
+}
+.twm-tabs__tab:hover { background: var(--surface-2); color: var(--text-primary); }
+.twm-tabs__tab:focus-visible { outline: 1px solid var(--accent-bright, #1683c4); outline-offset: -1px; }
+.twm-tabs__tab--on { background: var(--surface-0); color: var(--text-bright); }
+.twm-tabs__tab--on::before {
+    content: '';
+    position: absolute;
+    inset: 0 0 auto 0;
+    height: 2px;
+    pointer-events: none;
+    background: var(--accent-bright, #1683c4);
+}
+.twm-tabs__label { overflow: hidden; text-overflow: ellipsis; }
+/* Two classes: Google's `.material-symbols-outlined { font-size: 24px }` loads
+ * after this sheet and would win a one-class tie. */
+.twm-tabs__icon,
+.twm-tabs__icon.material-symbols-outlined { flex: 0 0 auto; font-size: 14px; line-height: 1; }
+.twm-tabs__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    box-sizing: border-box;
+    border-radius: 8px;
+    background: var(--accent);
+    color: #fff;
+    font-size: 10.5px;
+    line-height: 16px;
+}
+.twm-tabs__badge--info    { background: color-mix(in srgb, var(--color-info) 35%, var(--surface-0)); }
+.twm-tabs__badge--warning { background: color-mix(in srgb, var(--color-warning) 35%, var(--surface-0)); }
+.twm-tabs__badge--alert   { background: color-mix(in srgb, var(--color-danger) 45%, var(--surface-0)); }
+.twm-tabs__indicator {
+    flex: 0 0 auto;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--text-muted);
+}
+.twm-tabs__indicator--info    { background: var(--color-info); }
+.twm-tabs__indicator--warning { background: var(--color-warning); }
+.twm-tabs__indicator--alert   { background: var(--color-danger); }
+.twm-tabs__dirty { font-size: 10px; color: var(--text-primary); }
+.twm-tabs__close {
+    padding: 0 2px;
+    border-radius: var(--radius-sm);
+    opacity: 0.6;
+    font-size: 13px;
+}
+.twm-tabs__close:hover { opacity: 1; background: var(--surface-2); }
+/* A dirty, closable tab shows the dot until hovered, then the close mark.
+   A dirty tab with no close mark keeps its dot. */
+.twm-tabs__tab--dirty:not(:hover) .twm-tabs__close { display: none; }
+.twm-tabs__tab--dirty.twm-tabs__tab--closable:hover .twm-tabs__dirty { display: none; }
+.twm-tabs__badge[hidden],
+.twm-tabs__indicator[hidden] { display: none; }
+.twm-tabs__body { flex: 1 1 auto; min-height: 0; overflow: auto; }
+.twm-tabs-pane { height: 100%; box-sizing: border-box; }
+.twm-tabs-pane[hidden] { display: none; }
+.twm-tabs--compact .twm-tabs__tabs { height: 22px; }
+.twm-tabs--compact .twm-tabs__tab { padding: 0 var(--space-xs); gap: 3px; }
+.twm-tabs--compact .twm-tabs__icon,
+.twm-tabs--compact .twm-tabs__icon.material-symbols-outlined { font-size: 12px; }
+.twm-alerts .material-symbols-outlined { font-size: 15px; }
+.twm-alerts__spacer { flex: 1 1 auto; }
+.twm-alerts__rules { flex: 0 0 280px; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border-subtle); }
+.twm-alerts__head, .twm-alerts__bar { flex: none; display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border-bottom: 1px solid var(--border-subtle); }
+.twm-alerts__bar { flex-wrap: wrap; }
+.twm-alerts__caps { color: var(--text-muted); font-size: 10.5px; letter-spacing: .08em; }
+.twm-alerts__link { padding: 0; border: 0; background: none; color: var(--accent-bright); font: inherit; cursor: pointer; }
+.twm-alerts__link:hover { text-decoration: underline; }
+.twm-alerts__rulelist { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; }
+.twm-alerts__rulebtn { width: 100%; display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; border: 0; background: none; color: var(--text-body); font: inherit; cursor: pointer; }
+.twm-alerts__rulebtn:hover { background: var(--state-hover); }
 .twm-alerts__rulebtn--on { background: var(--state-selected); box-shadow: inset 2px 0 0 var(--accent-bright); }
 .twm-alerts__rulebtn--off { color: var(--text-dim); }
 .twm-alerts__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
@@ -8426,78 +9660,1565 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     outline: 1px solid var(--accent-bright, #007acc);
     outline-offset: -1px;
 }
-.twm-record-list__empty {
-    margin: 0;
-    padding: 12px 6px;
-    color: var(--text-muted, #888);
-    font-size: var(--ea-font-body, 11px);
+.twm-record-list__empty {
+    margin: 0;
+    padding: 12px 6px;
+    color: var(--text-muted, #888);
+    font-size: var(--ea-font-body, 11px);
+}
+
+/* ── the fact sheet ── */
+.twm-facts {
+    width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+    font-size: var(--font-size-sm, 12px);
+}
+.twm-facts thead th {
+    text-align: left;
+    font-size: var(--ea-font-small, 10px);
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--text-dim, #666);
+    white-space: nowrap;
+    border-bottom: 1px solid var(--border-default, #303030);
+    padding: 0 12px 6px 0;
+}
+/* Every value WRAPS and keeps its own line breaks: nothing is cut off. */
+.twm-facts tbody td,
+.twm-facts tbody th {
+    text-align: left;
+    font-weight: normal;
+    border-bottom: 1px solid var(--border-subtle, #2a2a2a);
+    padding: 6px 12px 6px 0;
+    color: var(--text-primary, #e0e0e0);
+    vertical-align: top;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+.twm-facts tbody tr:last-child > td,
+.twm-facts tbody tr:last-child > th { border-bottom: 0; }
+.twm-facts tbody th.twm-facts__label {
+    color: var(--text-muted, #888);
+    white-space: nowrap;
+}
+.twm-facts.twm-facts--wrap-labels tbody th.twm-facts__label { white-space: normal; }
+/* `wrap: 'words'` — a value wraps at spaces only, and a long word stays
+ * whole: the sheet grows wider and a sideways scroller around it scrolls.
+ * `wrap: 'none'` — a value keeps its own line breaks and no others. */
+.twm-facts.twm-facts--wrap-words tbody td,
+.twm-facts.twm-facts--wrap-words tbody th { overflow-wrap: normal; word-break: normal; }
+.twm-facts.twm-facts--wrap-none tbody td,
+.twm-facts.twm-facts--wrap-none tbody th { white-space: pre; overflow-wrap: normal; word-break: normal; }
+.twm-facts.twm-facts--mono tbody td.twm-facts__value,
+.twm-facts tbody td.twm-facts__mono { font-family: var(--font-family-mono, monospace); font-size: 0.95em; }
+.twm-facts .twm-facts__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
+.twm-facts tbody td.twm-facts__null,
+.twm-facts tbody td.twm-facts__missing { color: var(--text-dim, #666); font-style: italic; }
+.twm-facts tbody td.twm-facts__arrow {
+    color: var(--text-dim, #666);
+    white-space: nowrap;
+    width: 1%;
+}
+.twm-facts tbody tr.twm-facts__row--changed > td.twm-facts__before { color: var(--text-muted, #888); }
+.twm-facts tbody tr.twm-facts__row--changed > td.twm-facts__arrow { color: var(--color-warning, #ff9800); }
+.twm-facts tbody tr.twm-facts__row--same > td { color: var(--text-muted, #888); }
+.twm-facts tbody tr.twm-facts__row--added > td.twm-facts__after { color: var(--color-success, #3fb950); }
+.twm-facts tbody tr.twm-facts__row--removed > td.twm-facts__before { color: var(--color-danger, #c74e4e); }
+.twm-facts tbody td.twm-facts__empty {
+    padding: 12px 0;
+    color: var(--text-muted, #888);
+    white-space: normal;
+}
+/* ══ end RECORD LIST & FACT SHEET ══ */
+
+/* ══ HELP MODAL ══════════════════════════════════════════════════════
+ *
+ * `HelpModal` (src/help/help_modal.js): a centred dialog on a dimmed overlay,
+ * a sidebar of categories, a search box and the content pane, which shows the
+ * index, a topic, search results or an error. Its classes are `help-`, not
+ * `twm-`, prefixed — they are older than this sheet, and an embedder styles
+ * them by those names. `.help-article` holds the provider's rendered HTML, so
+ * it styles plain elements. Every class the modal sets has a rule here, and
+ * every class a rule here names is one it sets (tests/help_modal_css.test.mjs). */
+.help-modal-overlay {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(4px);
+    z-index: var(--z-over-windows);
+}
+.help-modal {
+    display: flex;
+    flex-direction: column;
+    width: 90%;
+    max-width: 1000px;
+    height: 80vh;
+    max-height: 700px;
+    background: var(--surface-0);
+    color: var(--text-body);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    user-select: text;
+}
+.help-modal__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-lg) var(--space-xl);
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--surface-3);
+}
+.help-modal__title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-primary);
+}
+.help-modal__title .material-symbols-outlined {
+    font-size: 20px;
+    color: var(--accent-bright);
+}
+.help-modal__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-xs);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.help-modal__close:hover {
+    background: var(--state-active);
+    color: var(--text-primary);
+}
+.help-modal__search {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-md) var(--space-xl);
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--surface-3);
+}
+.help-modal__search .material-symbols-outlined {
+    font-size: 18px;
+    color: var(--text-dim);
+}
+.help-search-input {
+    flex: 1;
+    padding: var(--space-sm) 10px;
+    background: var(--surface-0);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-sm);
+    color: var(--text-body);
+    font-size: var(--font-size-md);
+    outline: none;
+}
+.help-search-input:focus { border-color: var(--accent-bright); }
+.help-search-input::placeholder { color: var(--text-dim); }
+.help-modal__body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+.help-modal__sidebar {
+    flex: 0 0 220px;
+    padding: var(--space-md) 0;
+    background: var(--surface-1);
+    border-right: 1px solid var(--surface-3);
+    overflow-y: auto;
+}
+.help-sidebar__categories {
+    display: flex;
+    flex-direction: column;
+}
+.help-category { margin-bottom: var(--space-xs); }
+.help-category__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-md) var(--space-lg);
+    color: var(--text-muted);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    user-select: none;
+}
+.help-category__header:hover { color: var(--text-secondary); }
+.help-category__header .material-symbols-outlined { font-size: 16px; }
+.help-category__topics {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.help-category.collapsed .help-category__topics { display: none; }
+.help-topic-item {
+    padding: var(--space-sm) var(--space-lg) var(--space-sm) 36px;
+    border-left: 2px solid transparent;
+    color: var(--text-secondary);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+}
+.help-topic-item:hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+.help-topic-item.active {
+    background: var(--state-selected);
+    border-left-color: var(--accent-bright);
+    color: var(--text-bright);
+}
+.help-modal__content {
+    flex: 1;
+    min-width: 0;
+    padding: 20px var(--space-2xl);
+    background: var(--surface-0);
+    overflow-y: auto;
+}
+.help-content__loading,
+.help-content__error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-lg);
+    height: 200px;
+    color: var(--text-muted);
+    font-size: var(--font-size-lg);
+}
+.help-content__error { color: var(--color-danger-hover); }
+.help-content__error .material-symbols-outlined {
+    font-size: 48px;
+    opacity: 0.5;
+}
+.help-content__article { max-width: 860px; }
+.help-content__breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-xl);
+    padding-bottom: var(--space-lg);
+    border-bottom: 1px solid var(--surface-3);
+}
+.help-breadcrumb__home {
+    display: flex;
+    align-items: center;
+    color: var(--text-muted);
+    text-decoration: none;
+}
+.help-breadcrumb__home:hover { color: var(--accent-bright); }
+.help-breadcrumb__home .material-symbols-outlined { font-size: 18px; }
+.help-breadcrumb__separator { color: var(--text-dim); }
+.help-breadcrumb__title {
+    color: var(--text-secondary);
+    font-size: var(--font-size-md);
+}
+/* A topic's table of contents (a `createDocumentOutline`), between the
+ * breadcrumb and the article; drawn only for two headings or more. */
+.help-content__toc {
+    margin-bottom: var(--space-xl);
+    padding: var(--space-md) 0;
+    border-left: 2px solid var(--surface-3);
+    font-size: var(--font-size-md);
+}
+.help-content__toc[hidden] { display: none; }
+.help-index h1 {
+    margin: 0 0 var(--space-md);
+    color: var(--text-primary);
+    font-size: 24px;
+}
+.help-index > p {
+    margin-bottom: var(--space-2xl);
+    color: var(--text-muted);
+}
+.help-index__grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: var(--space-xl);
+}
+.help-index__category {
+    padding: var(--space-lg);
+    background: var(--surface-1);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-md);
+}
+.help-index__category:hover { border-color: var(--accent-bright); }
+.help-index__category-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-md);
+    color: var(--accent-bright);
+    font-weight: var(--font-weight-semibold);
+}
+.help-index__category-header .material-symbols-outlined { font-size: 18px; }
+.help-index__topics {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.help-index__topic,
+.help-index__more {
+    padding: var(--space-xs) 0;
+    color: var(--text-secondary);
+    font-size: var(--font-size-md);
+}
+.help-index__topic { cursor: pointer; }
+.help-index__topic:hover { color: var(--text-primary); }
+.help-index__more {
+    color: var(--text-dim);
+    font-size: var(--font-size-sm);
+    font-style: italic;
+}
+.help-search-results h2 {
+    margin: 0 0 var(--space-md);
+    color: var(--text-primary);
+    font-size: var(--font-size-2xl);
+}
+.help-search-count {
+    margin-bottom: var(--space-xl);
+    color: var(--text-muted);
+    font-size: var(--font-size-md);
+}
+.help-search-empty {
+    color: var(--text-muted);
+    font-style: italic;
+}
+.help-search-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.help-search-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--space-lg);
+    margin-bottom: var(--space-md);
+    padding: 10px var(--space-lg);
+    background: var(--surface-1);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+}
+.help-search-item:hover { border-color: var(--accent-bright); }
+.help-search-item__title {
+    color: var(--text-primary);
+    font-size: var(--font-size-lg);
+}
+.help-search-item__category {
+    color: var(--text-dim);
+    font-size: var(--font-size-sm);
+}
+.help-article {
+    color: var(--text-body);
+    font-size: var(--font-size-lg);
+    line-height: 1.6;
+}
+.help-article h1,
+.help-article h2,
+.help-article h3 { color: var(--text-primary); }
+.help-article h1 {
+    margin: 0 0 var(--space-xl);
+    padding-bottom: var(--space-md);
+    border-bottom: 1px solid var(--surface-3);
+    font-size: 24px;
+}
+.help-article h2 { margin: var(--space-2xl) 0 var(--space-lg); font-size: 20px; }
+.help-article h3 { margin: 20px 0 var(--space-md); font-size: var(--font-size-xl); }
+.help-article h4,
+.help-article h5,
+.help-article h6 {
+    margin: var(--space-xl) 0 var(--space-md);
+    color: var(--text-secondary);
+}
+.help-article p { margin: 0 0 var(--space-lg); }
+.help-article a { color: var(--accent-bright); text-decoration: none; }
+.help-article a:hover { text-decoration: underline; }
+.help-article strong { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
+.help-article em { font-style: italic; }
+.help-article code {
+    padding: 2px 6px;
+    background: var(--surface-2);
+    border-radius: 3px;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-md);
+}
+.help-article pre {
+    margin: 0 0 var(--space-xl);
+    padding: var(--space-lg) var(--space-xl);
+    background: var(--surface-well);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-sm);
+    overflow-x: auto;
+}
+.help-article pre code { padding: 0; background: transparent; }
+.help-article blockquote {
+    margin: 0 0 var(--space-lg);
+    padding: var(--space-md) var(--space-xl);
+    background: var(--state-selected);
+    border-left: 3px solid var(--accent-bright);
+    color: var(--text-secondary);
+}
+.help-article hr {
+    margin: var(--space-2xl) 0;
+    border: none;
+    border-top: 1px solid var(--surface-3);
+}
+.help-article img {
+    max-width: 100%;
+    margin: var(--space-lg) 0;
+    border-radius: var(--radius-sm);
+}
+.help-article table {
+    width: 100%;
+    margin: var(--space-xl) 0;
+    border-collapse: collapse;
+    font-size: var(--font-size-md);
+}
+.help-article th,
+.help-article td {
+    padding: var(--space-md) var(--space-lg);
+    border: 1px solid var(--surface-3);
+    text-align: left;
+}
+.help-article th {
+    background: var(--surface-2);
+    color: var(--text-primary);
+    font-weight: var(--font-weight-semibold);
+}
+.help-article tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); }
+.help-article ul,
+.help-article ol {
+    margin: var(--space-md) 0 var(--space-xl);
+    padding-left: var(--space-2xl);
+}
+.help-article li { margin-bottom: var(--space-xs); line-height: 1.5; }
+.help-article li p { margin: 0; }
+.help-article li > ul,
+.help-article li > ol { margin: var(--space-xs) 0; }
+@media (max-width: 600px) {
+    .help-modal { width: 95%; height: 90vh; }
+    .help-modal__sidebar { display: none; }
+    .help-modal__content { padding: var(--space-xl); }
+}
+/* ══ end HELP MODAL ══ */
+
+/* ══ MENU BAR ════════════════════════════════════════════════════════
+ *
+ * `MenuBar` (src/ui/components/menu_bar.js, STORY-0030): a row of titles,
+ * each opening a menu that may fly out submenus. Not `.twm-menu-bar`, which
+ * is the older strip of 25px icon buttons and keeps its meaning. A menu is
+ * `position: fixed` (the JS places it), so a bar inside a clipped chrome strip
+ * still drops its menus over the page. Same surface, border and shadow as
+ * `.twm-context-menu`: two menus that look different read as two systems.
+ * tests/menu_bar_css.test.mjs holds every class the bar sets to a rule here,
+ * both ways, and base.css to the same text. */
+.twm-menubar {
+    display: flex;
+    align-items: stretch;
+    gap: 1px;
+    min-height: 24px;
+    font-size: var(--font-size-md);
+    color: var(--text-body);
+    user-select: none;
+}
+.twm-menubar__entry {
+    position: relative;
+    display: flex;
+}
+.twm-menubar__title {
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: inherit;
+    font: inherit;
+    padding: var(--space-xxs) var(--space-md);
+    cursor: default;
+}
+.twm-menubar__title:hover,
+.twm-menubar__title:focus-visible,
+.twm-menubar__title[aria-expanded="true"] {
+    background: var(--state-active);
+    color: var(--text-bright);
+    outline: none;
+}
+.twm-menubar__menu {
+    position: fixed;
+    z-index: var(--z-over-windows);
+    display: flex;
+    flex-direction: column;
+    min-width: 200px;
+    max-height: calc(100vh - 8px);
+    overflow-y: auto;
+    padding: var(--space-xs) 0;
+    background: var(--surface-0);
+    color: var(--text-body);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-md);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
+}
+.twm-menubar__cell {
+    display: flex;
+}
+.twm-menubar__item {
+    appearance: none;
+    background: none;
+    border: 0;
+    width: 100%;
+    text-align: left;
+    color: inherit;
+    font: inherit;
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-xs) var(--space-lg) var(--space-xs) var(--space-xs);
+    cursor: default;
+    white-space: nowrap;
+}
+.twm-menubar__item:focus,
+.twm-menubar__item:hover:not(.twm-menubar__item--disabled),
+.twm-menubar__item[aria-expanded="true"] {
+    background: var(--state-selected);
+    outline: none;
+}
+.twm-menubar__item--submenu {
+    padding-right: var(--space-md);
+}
+.twm-menubar__item--disabled {
+    opacity: 0.4;
+    color: var(--text-muted);
+}
+.twm-menubar__check {
+    flex: 0 0 16px;
+    text-align: center;
+}
+.twm-menubar__item--check[aria-checked="true"] .twm-menubar__check::before { content: "\2713"; }
+.twm-menubar__item--radio[aria-checked="true"] .twm-menubar__check::before { content: "\2022"; }
+.twm-menubar__label {
+    flex: 1 1 auto;
+}
+.twm-menubar__shortcut {
+    margin-left: var(--space-2xl);
+    color: var(--text-muted);
+    font-size: var(--font-size-sm);
+}
+.twm-menubar__arrow::before {
+    content: "\25B8";
+    color: var(--text-muted);
+}
+.twm-menubar__separator {
+    height: 1px;
+    margin: var(--space-xs) var(--space-md);
+    background: var(--surface-3);
+}
+/* ══ end MENU BAR ══ */
+
+/* ══ TOGGLE ══════════════════════════════════════════════════════════
+ * ToggleField: a track and a knob drawn over a real checkbox with
+ * role="switch". The input sits on top of the track, transparent, so the
+ * pointer and the keyboard reach a native control. Tokens only: swap
+ * tokens.css and the switch follows.
+ */
+.twm-toggle {
+    --twm-toggle-w: 34px;
+    --twm-toggle-h: 18px;
+    --twm-toggle-pad: 2px;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    color: var(--text-body);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-tight);
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
+}
+.twm-toggle--compact {
+    --twm-toggle-w: 26px;
+    --twm-toggle-h: 14px;
+    gap: var(--space-xs);
+    font-size: var(--font-size-xs);
+}
+.twm-toggle__control {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    width: var(--twm-toggle-w);
+    height: var(--twm-toggle-h);
+}
+.twm-toggle__input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+    z-index: 1;
+}
+.twm-toggle__track {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-pill);
+    background: var(--surface-3);
+    transition: background-color var(--transition-fast), border-color var(--transition-fast);
+}
+.twm-toggle__knob {
+    position: absolute;
+    top: var(--twm-toggle-pad);
+    left: var(--twm-toggle-pad);
+    width: calc(var(--twm-toggle-h) - 2 * var(--twm-toggle-pad) - 2px);
+    height: calc(var(--twm-toggle-h) - 2 * var(--twm-toggle-pad) - 2px);
+    border-radius: var(--radius-circle);
+    background: var(--text-muted);
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--transition-fast), background-color var(--transition-fast);
+}
+.twm-toggle__input:checked + .twm-toggle__track {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+.twm-toggle__input:checked + .twm-toggle__track .twm-toggle__knob {
+    transform: translateX(calc(var(--twm-toggle-w) - var(--twm-toggle-h)));
+    background: var(--text-bright);
+}
+.twm-toggle:hover .twm-toggle__input:not(:disabled) + .twm-toggle__track {
+    border-color: var(--accent-hover);
+}
+.twm-toggle__input:focus-visible + .twm-toggle__track {
+    outline: 2px solid var(--accent-bright);
+    outline-offset: 2px;
+}
+.twm-toggle__state {
+    min-width: 2.5em;
+    color: var(--text-muted);
+}
+.twm-toggle__label {
+    color: var(--text-body);
+}
+.twm-toggle--disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+.twm-modal__toggle {
+    display: flex;
+    align-items: center;
+    min-height: var(--ea-row-h);
+}
+/* ══ end TOGGLE ══ */
+
+/* ══ SETTINGS VIEW (STORY-0050) ══════════════════════════════════════
+ * SettingsView: a sidebar of categories with a filter box, beside the
+ * chosen category's settings in groups. Tokens only.
+ */
+.twm-settings {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+    background: var(--surface-1);
+    color: var(--text-body);
+    font-size: var(--font-size-sm);
+}
+.twm-settings__sidebar {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 220px;
+    min-width: 0;
+    gap: var(--space-sm);
+    padding: var(--space-md);
+    border-right: 1px solid var(--border-subtle);
+    background: var(--surface-0);
+}
+.twm-settings__sidebar-title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    color: var(--text-bright);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-settings__search {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 0 var(--space-sm);
+    min-height: var(--ea-row-h);
+    background: var(--ea-input-bg);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+}
+.twm-settings__search:focus-within { border-color: var(--accent-bright); }
+.twm-settings__search-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text-body);
+    font: inherit;
+}
+.twm-settings__nav {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    gap: var(--space-xxs);
+}
+.twm-settings__cat {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    min-height: var(--ea-row-h);
+    padding: 0 var(--space-sm);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+.twm-settings__cat:hover { background: var(--state-hover); }
+.twm-settings__cat:focus-visible { outline: 1px solid var(--accent-bright); }
+.twm-settings__cat--active {
+    background: var(--state-selected);
+    color: var(--text-bright);
+}
+.twm-settings__cat .material-symbols-outlined,
+.twm-settings__reset-all .material-symbols-outlined,
+.twm-settings__reset-category .material-symbols-outlined {
+    font-size: var(--font-size-lg);
+}
+.twm-settings__cat-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-settings__content {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-y: auto;
+    padding: var(--space-lg) var(--space-xl);
+}
+.twm-settings__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--space-lg);
+    margin-bottom: var(--space-lg);
+}
+.twm-settings__header-info {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.twm-settings__title {
+    margin: 0;
+    color: var(--text-bright);
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-settings__description {
+    margin: var(--space-xs) 0 0;
+    color: var(--text-muted);
+}
+.twm-settings__group { margin-bottom: var(--space-xl); }
+.twm-settings__group-title {
+    margin: 0 0 var(--space-sm);
+    padding-bottom: var(--space-xs);
+    border-bottom: 1px solid var(--border-subtle);
+    color: var(--text-secondary);
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.twm-settings__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-sm) var(--space-sm);
+    border-left: 2px solid transparent;
+    border-radius: var(--radius-sm);
+}
+.twm-settings__row:hover { background: var(--state-hover); }
+.twm-settings__row--modified { border-left-color: var(--accent-bright); }
+.twm-settings__info {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+.twm-settings__label-line {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+.twm-settings__label { color: var(--text-primary); }
+.twm-settings__marker {
+    padding: 0 var(--space-xs);
+    border-radius: var(--radius-pill);
+    background: var(--surface-3);
+    color: var(--accent-bright);
+    font-size: var(--font-size-xs);
+}
+.twm-settings__marker[hidden],
+.twm-settings__reset[hidden] { display: none; }
+.twm-settings__row .twm-settings__description {
+    margin-top: var(--space-xxs);
+    font-size: var(--font-size-xs);
+}
+.twm-settings__path {
+    display: block;
+    margin-top: var(--space-xxs);
+    color: var(--text-dim);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+}
+.twm-settings__control {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    max-width: 50%;
+}
+.twm-settings__select,
+.twm-settings__number,
+.twm-settings__text {
+    min-height: var(--ea-row-h);
+    padding: 0 var(--space-sm);
+    background: var(--ea-input-bg);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+    color: var(--text-body);
+    font: inherit;
+}
+.twm-settings__select:focus,
+.twm-settings__number:focus,
+.twm-settings__text:focus {
+    outline: none;
+    border-color: var(--accent-bright);
+}
+.twm-settings__number { width: 110px; }
+.twm-settings__text { width: 240px; }
+.twm-settings__readonly {
+    color: var(--text-muted);
+    font-family: var(--font-family-mono);
+}
+.twm-settings__reset {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--ea-row-h);
+    height: var(--ea-row-h);
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.twm-settings__reset:hover { background: var(--state-hover); color: var(--text-bright); }
+.twm-settings__reset .material-symbols-outlined { font-size: var(--font-size-lg); }
+.twm-settings__empty {
+    padding: var(--space-xl) 0;
+    color: var(--text-muted);
+}
+/* ══ end SETTINGS VIEW ══ */
+
+/* ══ DOCUMENT OUTLINE (0.17.0) ═══════════════════════════════════════
+ * `createDocumentOutline` (src/ui/components/document_outline.js). No height
+ * of its own: the host that holds it scrolls, if anything does. */
+.twm-doc-outline { display: block; min-width: 0; }
+.twm-doc-outline__items {
+    list-style: none;
+    margin: 0;
+    padding: 2px 0;
+}
+.twm-doc-outline__item { margin: 0; padding: 0; min-width: 0; }
+/* One step of indentation per level below the first, set inline per item as
+ * `--twm-doc-outline-depth` (0 for depth 1). */
+.twm-doc-outline__link {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    width: 100%;
+    min-width: 0;
+    margin: 0;
+    padding: 3px 8px 3px calc(8px + var(--twm-doc-outline-depth, 0) * var(--twm-doc-outline-indent, 12px));
+    border: none;
+    border-left: 2px solid transparent;
+    background: transparent;
+    color: var(--text-secondary, #cccccc);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+.twm-doc-outline__link:hover { background: var(--state-hover, rgba(255, 255, 255, 0.05)); color: var(--text-primary, #e0e0e0); }
+.twm-doc-outline__link:focus-visible { outline: 1px solid var(--accent-bright, #007acc); outline-offset: -1px; }
+.twm-doc-outline__item--level-1 > .twm-doc-outline__link { color: var(--text-primary, #e0e0e0); }
+.twm-doc-outline__number {
+    flex: 0 0 auto;
+    color: var(--text-muted, #888888);
+    font-variant-numeric: tabular-nums;
+}
+.twm-doc-outline__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-doc-outline__item.twm-doc-outline__item--active > .twm-doc-outline__link {
+    border-left-color: var(--accent-bright, #007acc);
+    background: rgba(0, 122, 204, 0.15);
+    color: var(--text-primary, #e0e0e0);
+}
+/* Listed, but nothing in the document answers to it. */
+.twm-doc-outline__item--unresolved > .twm-doc-outline__link { opacity: 0.6; }
+.twm-doc-outline__empty {
+    margin: 0;
+    padding: 8px;
+    color: var(--text-muted, #888888);
+    font-style: italic;
+}
+/* ══ end DOCUMENT OUTLINE ══ */
+
+/* ══ TAG INPUT (0.17.0) ═══════════════════════════════════════════════
+ * `createTagInput` (src/ui/components/tag_input.js): removable chips and a
+ * text box on one wrapping line. No height of its own. */
+.twm-tag-input {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-xs, 4px);
+    min-width: 0;
+    padding: 3px var(--space-xs, 4px);
+    background: var(--surface-3, #3c3c3c);
+    border: 1px solid var(--border-strong, #383838);
+    border-radius: var(--radius-sm, 4px);
+    cursor: text;
+}
+.twm-tag-input:focus-within { border-color: var(--accent-bright, #007acc); }
+.twm-tag-input--readonly {
+    background: transparent;
+    border-color: transparent;
+    padding-left: 0;
+    padding-right: 0;
+    cursor: default;
+}
+.twm-tag-input__chips {
+    display: contents;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.twm-tag-input__chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    max-width: 100%;
+    min-width: 0;
+    padding: 1px var(--space-xs, 4px) 1px var(--space-sm, 6px);
+    background: var(--surface-2, #2d2d2d);
+    border: 1px solid var(--border-strong, #383838);
+    border-radius: var(--radius-pill, 999px);
+    color: var(--text-primary, #e0e0e0);
+    font-size: var(--font-size-sm, 12px);
+    line-height: 18px;
+}
+.twm-tag-input--readonly .twm-tag-input__chip { padding-right: var(--space-sm, 6px); }
+.twm-tag-input__text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-tag-input__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-circle, 50%);
+    background: transparent;
+    color: var(--text-muted, #888);
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+}
+.twm-tag-input__remove:hover,
+.twm-tag-input__remove:focus-visible {
+    background: var(--state-active, rgba(255, 255, 255, 0.08));
+    color: var(--text-bright, #fff);
+}
+.twm-tag-input__input {
+    flex: 1 1 6em;
+    min-width: 4em;
+    padding: 1px 2px;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: var(--text-primary, #e0e0e0);
+    font: inherit;
+    font-size: var(--font-size-sm, 12px);
+}
+/* ══ end TAG INPUT ══ */
+
+/* ══ SERIES TRANSFORMS ═══════════════════════════════════════════════
+ *
+ * `renderSeriesTransformControls` (src/charts/series_transforms.js): per
+ * injected transform, a group with a toggle per output and a number field per
+ * parameter, in a subplot's config. */
+.twm-series-transforms {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+}
+.twm-series-transforms__group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    margin: 0;
+    padding: var(--space-sm) var(--space-md);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+}
+.twm-series-transforms__label {
+    padding: 0 var(--space-xs);
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-muted);
+}
+.twm-series-transforms__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+}
+.twm-series-transforms__param {
+    width: 96px;
+    margin-left: auto;
+    padding: var(--space-xxs) var(--space-xs);
+    background: var(--surface-3);
+    color: var(--text-primary);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+}
+.twm-series-transforms__param:disabled {
+    opacity: 0.5;
+}
+/* ══ end SERIES TRANSFORMS ══ */
+
+/* ══ PLOT GRID ════════════════════════════════════════════════════════
+ *
+ * `renderPlotGrid` (src/charts/plot_grid.js): a CSS grid of one Plotly figure
+ * per subplot. The template columns/rows and each cell's grid-area are inline,
+ * from PLOT_LAYOUTS. */
+.twm-plot-grid {
+    display: grid;
+    gap: 4px;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+}
+.twm-plot-grid__cell {
+    position: relative; /* Anchor for Plotly's positioning */
+    min-width: 0;
+    min-height: 0;
+}
+.twm-plot-grid__cell > .twm-plot-no-data {
+    padding: var(--space-lg);
+    font-size: var(--font-size-xs);
+}
+/* ══ end PLOT GRID ══ */
+
+/* ══ PLOT CONFIG EDITOR ═══════════════════════════════════════════════
+ *
+ * `renderPlotConfigEditor` (src/charts/plot_config_editor.js): a layout
+ * picker, a tab per subplot slot and the fields of the subplot in front. */
+.twm-plot-config {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+    min-width: 0;
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+}
+.twm-plot-config__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+.twm-plot-config__heading {
+    margin: 0;
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-muted);
+}
+.twm-plot-config__layouts {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+}
+.twm-plot-config__layout {
+    min-width: 0;
+}
+.twm-plot-config__layout--on {
+    border-color: var(--accent);
+    color: var(--text-bright);
+}
+.twm-plot-config__tabs[hidden] {
+    display: none;
+}
+.twm-plot-config__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+}
+.twm-plot-config__field {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    min-width: 0;
+}
+.twm-plot-config__label {
+    flex: 0 0 96px;
+    color: var(--text-muted);
+}
+.twm-plot-config__input {
+    box-sizing: border-box;
+    min-width: 0;
+    flex: 1 1 auto;
+    padding: var(--space-xxs) var(--space-xs);
+    font: inherit;
+    background: var(--surface-3);
+    color: var(--text-primary);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+}
+.twm-plot-config__input--number {
+    flex: 0 1 80px;
+    width: 80px;
+}
+.twm-plot-config__input:disabled {
+    opacity: 0.5;
+}
+.twm-plot-config__picker {
+    flex: 1 1 140px;
+    min-width: 0;
+}
+.twm-plot-config__axes,
+.twm-plot-config__list,
+.twm-plot-config__series-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+.twm-plot-config__axis {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+    margin: 0;
+    padding: var(--space-sm) var(--space-md);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-sm);
+    min-width: 0;
+}
+.twm-plot-config__axis--disabled {
+    opacity: 0.5;
+}
+.twm-plot-config__axis-title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 0 var(--space-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-muted);
+}
+.twm-plot-config__axis-fields {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: var(--space-xs) var(--space-md);
+}
+.twm-plot-config__series {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxs);
+    padding: var(--space-xs) 0;
+    border-top: 1px solid var(--border-subtle);
+}
+.twm-plot-config__series-main,
+.twm-plot-config__row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-xs);
+}
+.twm-plot-config__series-main > .twm-plot-config__input:not(.twm-plot-config__input--number):not(.twm-plot-config__input--select),
+.twm-plot-config__row > .twm-plot-config__input:not(.twm-plot-config__input--number):not(.twm-plot-config__input--select) {
+    flex: 1 1 100px;
+}
+.twm-plot-config__series-main > .twm-plot-config__input--select,
+.twm-plot-config__row > .twm-plot-config__input--select {
+    flex: 0 1 auto;
+}
+.twm-plot-config__series-extra:empty {
+    display: none;
+}
+.twm-plot-config__overlay,
+.twm-plot-config__overlay-fields {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxs);
+    padding-left: var(--space-md);
+}
+.twm-plot-config__overlay-source {
+    color: var(--text-muted);
+}
+.twm-plot-config__overlay-source--error {
+    color: var(--color-danger);
+}
+.twm-plot-config__empty {
+    color: var(--text-muted);
+    font-style: italic;
+}
+.twm-plot-config__add {
+    align-self: flex-start;
+}
+.twm-plot-config__remove {
+    flex: 0 0 auto;
+    margin-left: auto;
+}
+.twm-plot-config__remove > .material-symbols-outlined {
+    font-size: 16px;
+}
+/* ══ end PLOT CONFIG EDITOR ══ */
+
+/* ══ WIZARD (STORY-0047) ══════════════════════════════════════════════════
+ * A step indicator, a body slot and a footer. Steps are drawn done / current /
+ * upcoming / error and joined by a connector that fills once the step after it
+ * has been reached. Only a done (or errored) step before the current one is an
+ * enabled button; the rest are disabled and look inert. */
+.twm-wizard {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    color: var(--text-body);
+    font-size: var(--font-size-sm);
+}
+.twm-wizard__steps {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    margin: 0;
+    padding: var(--space-md) var(--space-lg);
+    list-style: none;
+    border-bottom: 1px solid var(--border-subtle);
+}
+.twm-wizard__step {
+    flex: 0 0 auto;
+    min-width: 0;
+}
+.twm-wizard__step-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-xxs) var(--space-xs);
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-muted);
+    font: inherit;
+    cursor: pointer;
+}
+.twm-wizard__step-btn:hover:not(:disabled) {
+    background: var(--state-hover);
+}
+.twm-wizard__step-btn:focus-visible {
+    outline: 1px solid var(--accent);
+    outline-offset: 1px;
+}
+.twm-wizard__step-btn:disabled {
+    cursor: default;
+}
+.twm-wizard__step-marker {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 20px;
+    height: 20px;
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-circle);
+    font-size: var(--font-size-xs);
+    line-height: 1;
+}
+.twm-wizard__step-marker.material-symbols-outlined {
+    font-size: 14px;
+}
+.twm-wizard__step-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-wizard__step--done .twm-wizard__step-btn {
+    color: var(--text-body);
+}
+.twm-wizard__step--done .twm-wizard__step-marker {
+    border-color: var(--color-success);
+    color: var(--color-success);
+}
+.twm-wizard__step--current .twm-wizard__step-btn {
+    color: var(--text-bright);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-wizard__step--current .twm-wizard__step-marker {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: var(--text-bright);
+}
+.twm-wizard__step--upcoming .twm-wizard__step-btn {
+    color: var(--text-dim);
+}
+.twm-wizard__step--error .twm-wizard__step-btn {
+    color: var(--color-danger);
+}
+.twm-wizard__step--error .twm-wizard__step-marker {
+    border-color: var(--color-danger);
+    color: var(--color-danger);
+}
+.twm-wizard__step--active .twm-wizard__step-label {
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+.twm-wizard__connector {
+    flex: 1 1 16px;
+    min-width: 16px;
+    height: 1px;
+    background: var(--border-default);
+}
+.twm-wizard__connector--done {
+    background: var(--color-success);
+}
+.twm-wizard__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: var(--space-lg);
+}
+.twm-wizard__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-sm) var(--space-lg);
+    border-top: 1px solid var(--border-subtle);
+}
+.twm-wizard__message {
+    flex: 1 1 auto;
+    min-width: 0;
+    color: var(--text-muted);
+}
+.twm-wizard__message--hint {
+    color: var(--color-warning);
+}
+.twm-wizard__message--error {
+    color: var(--color-danger);
+}
+.twm-wizard__actions {
+    display: flex;
+    flex: 0 0 auto;
+    gap: var(--space-xs);
+}
+.twm-wizard--busy {
+    cursor: progress;
+}
+.twm-wizard--busy .twm-wizard__body {
+    opacity: 0.6;
+    pointer-events: none;
+}
+/* ══ end WIZARD ══ */
+
+/* ══ SECTION STACK ═══════════════════════════════════════════════════════
+ * `createSectionStack` (ui/components/section_stack.js, STORY-0036): titled
+ * sections in a column, built on the tree's `.twm-collapsible-*` primitive.
+ *
+ * THE STACK IS A COLUMN AS TALL AS ITS CONTAINER. A section is as tall as its
+ * content, except the FILL section, which takes what the others leave
+ * (`flex: 1 1 0`) — and only while it is open, so a closed one is a header.
+ * Its body is the one that scrolls: `min-height: 0` on the box and the body is
+ * what lets a flex child shrink below its content, without which a long
+ * conversation grows the section, and the panel, past the window. If the
+ * fixed sections alone outgrow the stack, the stack itself scrolls; the open
+ * fill box then stops at its header's height (`min-height: 26px`, the header
+ * rule's `height`) so its header never lands on the next section's, and only
+ * its body shrinks away.
+ *
+ * `[hidden]` needs its own rule: the box is `display: flex`, and an author
+ * `display` beats the UA's `[hidden] { display: none }`. */
+.twm-section-stack {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+.twm-section-stack > .twm-section-stack__section {
+    display: flex;
+    flex-direction: column;
+    flex: 0 0 auto;
+    min-height: 0;
+}
+.twm-section-stack > .twm-section-stack__section[hidden] {
+    display: none;
+}
+.twm-section-stack > .twm-section-stack__section--fill.twm-section-stack__section--expanded {
+    flex: 1 1 0;
+    min-height: 26px;
+}
+.twm-section-stack__section--fill > .twm-collapsible-content.visible {
+    flex: 1 1 0;
+    min-height: 0;
+    overflow-y: auto;
+}
+.twm-section-stack__header {
+    gap: var(--space-xxs);
+    height: 26px;
+    padding: 0 var(--space-xs) 0 0;
+    box-sizing: border-box;
+    flex-shrink: 0;
+    color: var(--text-secondary);
+}
+.twm-section-stack__header:hover {
+    background: var(--state-hover);
+}
+/* A real button, so Enter and Space toggle without re-implementing them; the
+ * first declarations are the reset that keeps the UA's own button off it. */
+.twm-section-stack__toggle {
+    appearance: none;
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    text-transform: inherit;
+    text-align: left;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    padding: 0 0 0 var(--space-xs);
+}
+.twm-section-stack__toggle:focus-visible,
+.twm-section-stack__action:focus-visible {
+    outline: 2px solid var(--accent-bright);
+    outline-offset: -2px;
 }
-
-/* ── the fact sheet ── */
-.twm-facts {
-    width: 100%;
-    border-collapse: collapse;
-    table-layout: auto;
-    font-size: var(--font-size-sm, 12px);
+/* The arrow points down while open (`.twm-collapsible-arrow`) and right while
+ * closed — the class `paint()` sets on it. A fixed, clipped box: without the
+ * icon font the glyph is the word `expand_more`, and that word turned on its
+ * side stood taller than the header and made the whole stack scroll. */
+.twm-section-stack .twm-collapsible-arrow {
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+    line-height: 12px;
+    overflow: hidden;
 }
-.twm-facts thead th {
-    text-align: left;
-    font-size: var(--ea-font-small, 10px);
-    font-weight: 600;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    color: var(--text-dim, #666);
-    white-space: nowrap;
-    border-bottom: 1px solid var(--border-default, #303030);
-    padding: 0 12px 6px 0;
+.twm-section-stack .twm-collapsible-arrow.collapsed {
+    transform: rotate(-90deg);
 }
-/* Every value WRAPS and keeps its own line breaks: nothing is cut off. */
-.twm-facts tbody td,
-.twm-facts tbody th {
-    text-align: left;
-    font-weight: normal;
-    border-bottom: 1px solid var(--border-subtle, #2a2a2a);
-    padding: 6px 12px 6px 0;
-    color: var(--text-primary, #e0e0e0);
-    vertical-align: top;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
+.twm-section-stack__icon.material-symbols-outlined {
+    font-size: var(--font-size-md);
+    line-height: 1;
 }
-.twm-facts tbody tr:last-child > td,
-.twm-facts tbody tr:last-child > th { border-bottom: 0; }
-.twm-facts tbody th.twm-facts__label {
-    color: var(--text-muted, #888);
+.twm-section-stack__title {
+    flex: 1 1 auto;
+    min-width: 0;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-.twm-facts.twm-facts--wrap-labels tbody th.twm-facts__label { white-space: normal; }
-/* `wrap: 'words'` — a value wraps at spaces only, and a long word stays
- * whole: the sheet grows wider and a sideways scroller around it scrolls.
- * `wrap: 'none'` — a value keeps its own line breaks and no others. */
-.twm-facts.twm-facts--wrap-words tbody td,
-.twm-facts.twm-facts--wrap-words tbody th { overflow-wrap: normal; word-break: normal; }
-.twm-facts.twm-facts--wrap-none tbody td,
-.twm-facts.twm-facts--wrap-none tbody th { white-space: pre; overflow-wrap: normal; word-break: normal; }
-.twm-facts.twm-facts--mono tbody td.twm-facts__value,
-.twm-facts tbody td.twm-facts__mono { font-family: var(--font-family-mono, monospace); font-size: 0.95em; }
-.twm-facts .twm-facts__num { font-variant-numeric: tabular-nums; white-space: nowrap; }
-.twm-facts tbody td.twm-facts__null,
-.twm-facts tbody td.twm-facts__missing { color: var(--text-dim, #666); font-style: italic; }
-.twm-facts tbody td.twm-facts__arrow {
-    color: var(--text-dim, #666);
-    white-space: nowrap;
-    width: 1%;
+.twm-section-stack__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxs);
+    flex-shrink: 0;
 }
-.twm-facts tbody tr.twm-facts__row--changed > td.twm-facts__before { color: var(--text-muted, #888); }
-.twm-facts tbody tr.twm-facts__row--changed > td.twm-facts__arrow { color: var(--color-warning, #ff9800); }
-.twm-facts tbody tr.twm-facts__row--same > td { color: var(--text-muted, #888); }
-.twm-facts tbody tr.twm-facts__row--added > td.twm-facts__after { color: var(--color-success, #3fb950); }
-.twm-facts tbody tr.twm-facts__row--removed > td.twm-facts__before { color: var(--color-danger, #c74e4e); }
-.twm-facts tbody td.twm-facts__empty {
-    padding: 12px 0;
-    color: var(--text-muted, #888);
-    white-space: normal;
+.twm-section-stack__action {
+    appearance: none;
+    background: none;
+    border: 0;
+    color: var(--text-muted);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border-radius: var(--radius-sm);
 }
-/* ══ end RECORD LIST & FACT SHEET ══ */
+.twm-section-stack__action:hover {
+    color: var(--text-primary);
+    background: var(--state-active);
+}
+.twm-section-stack__action .material-symbols-outlined {
+    font-size: var(--font-size-md);
+    line-height: 1;
+}
+/* ══ end SECTION STACK ══ */
+
+/* ── The conversation view (conversation_view.js, STORY-0057) ─────────────
+ * A transcript of role-tagged messages above a growing composer. The view
+ * fills its host; the transcript scrolls, the composer stays at the foot. */
+.twm-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; font-size: var(--font-size-sm); color: var(--text-body); }
+.twm-chat .material-symbols-outlined { font-size: 18px; line-height: 1; }
+.twm-chat__viewport { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
+.twm-chat__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
+.twm-chat__msg { max-width: 85%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--surface-1); line-height: var(--line-height-relaxed); overflow-wrap: anywhere; }
+.twm-chat__msg--user { align-self: flex-end; background: var(--state-selected); }
+.twm-chat__msg--assistant { align-self: flex-start; }
+.twm-chat__msg--system { align-self: center; background: none; color: var(--text-muted); font-size: var(--font-size-xs); }
+.twm-chat__msg--streaming .twm-chat__body::after { content: '\258D'; margin-left: 1px; color: var(--text-muted); }
+.twm-chat__body--plain { white-space: pre-wrap; }
+.twm-chat__extra:empty { display: none; }
+.twm-chat__extra { margin-top: var(--space-sm); }
+.twm-chat__jump { position: absolute; left: 50%; bottom: var(--space-md); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-body); font: inherit; font-size: var(--font-size-xs); box-shadow: var(--shadow-md); cursor: pointer; }
+.twm-chat__jump:hover { background: var(--state-hover); }
+.twm-chat__jump[hidden] { display: none; }
+.twm-chat__composer { flex: 0 0 auto; display: flex; align-items: flex-end; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-top: 1px solid var(--border-subtle); }
+.twm-chat__input { flex: 1 1 auto; min-height: 30px; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--surface-3); border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text-body); font: inherit; line-height: var(--line-height-normal); resize: none; overflow-y: hidden; }
+.twm-chat__input:focus { outline: none; border-color: var(--accent-bright); }
+.twm-chat__send { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: var(--text-bright); cursor: pointer; }
+.twm-chat__send:hover { background: var(--accent-hover); }
+.twm-chat__send--cancel { background: var(--color-danger); }
+.twm-chat__send--cancel:hover { background: var(--color-danger-hover); }
+.twm-chat--busy .twm-chat__input { border-color: var(--border-default); }
 
 /* ══ FLOW · KIT ═══════════════════════════════════════════════════════ */
 /* The shared flow-editor kit (36 §3, §3.12): the settings panel and its
@@ -8725,10 +11446,6 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     font-size: var(--font-size-xs);
     color: var(--twm-flow-muted);
 }
-.twm-flow-field__kept {
-    font-family: var(--font-family-mono);
-    color: var(--text-secondary);
-}
 .twm-flow-field__refusal {
     margin: 0;
     padding: 6px 8px;
@@ -8961,6 +11678,30 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     outline-offset: 1px;
 }
 
+/* ── a column typed by name, while the columns are not known ─────────── */
+.twm-flow-field__typed {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.twm-flow-typedchips:focus-within {
+    border-color: var(--twm-flow-focus);
+}
+.twm-flow-input.twm-flow-typedchips__input {
+    flex: 1 1 8em;
+    width: auto;
+    min-width: 6em;
+    height: 18px;
+    padding: 0 2px;
+    border: 0;
+    background: transparent;
+    font-size: var(--font-size-xs);
+}
+.twm-flow-input.twm-flow-typedchips__input:focus {
+    outline: none;
+    box-shadow: none;
+}
+
 /* ── choice-cards ───────────────────────────────────────────────────── */
 .twm-flow-choices {
     display: flex;
@@ -9469,6 +12210,21 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     color: var(--twm-flow-blue-fg);
     border-bottom: 1px solid var(--twm-flow-blue-line);
 }
+/* A host policy's offer: its sentence, Accept and Not now, on one line. */
+.twm-flow-graph__offer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px 8px;
+    padding: 4px 10px;
+    font-size: var(--font-size-xs);
+    background: var(--twm-flow-blue-bg);
+    color: var(--twm-flow-blue-fg);
+    border-bottom: 1px solid var(--twm-flow-blue-line);
+}
+.twm-flow-graph__offer-text { margin: 0; flex: 1 1 200px; min-width: 0; line-height: 1.4; }
+.twm-flow-graph__offer-accept,
+.twm-flow-graph__offer-dismiss { flex: 0 0 auto; }
 
 /* Three columns; the CANVAS is the one that flexes — `flex: 1 1 0px` AND
  * `min-width: 0`, or an open settings panel squeezes the palette instead. */
@@ -9540,6 +12296,8 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .twm-flow-graph__canvas { position: relative; flex: 1 1 0px; min-width: 0; min-height: 0; }
 .twm-flow-graph__canvas--drop { outline: 2px dashed var(--twm-flow-focus); outline-offset: -2px; }
+/* Where a dragged line was let go: what the step picker is anchored to. */
+.twm-flow-graph__drop-anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }
 .twm-flow-graph__aside {
     flex: 0 0 300px;
     min-width: 0;
@@ -9671,6 +12429,168 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 .twm-flow-graph__node-run[data-state="skipped"],
 .twm-flow-graph__node-run[data-state="cancelled"],
 .twm-flow-graph__node-run[data-state="not-reached"] { font-style: italic; }
+/* A TYPE'S OWN BODY, below its ports (a catalogue type's `render`). It adds
+ * height under the rows and moves nothing above them, so the lines' arithmetic
+ * stands. A type with `size.h` is exactly that tall: its body takes what is
+ * left and clips (the node itself never does: its port dots stand out of it).
+ * An `accent` is a stripe over the header, drawn on top of the box so it takes
+ * no height. */
+.twm-flow-graph__node-body { box-sizing: border-box; padding: 4px 8px 6px; min-width: 0; }
+.twm-flow-graph__node--sized { display: flex; flex-direction: column; }
+.twm-flow-graph__node--sized > .twm-flow-graph__node-head,
+.twm-flow-graph__node--sized > .twm-flow-graph__node-row { flex: none; }
+.twm-flow-graph__node--sized > .twm-flow-graph__node-body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
+/* EDITED ON THE NODE (`renameInPlace`, a type's `inline`). The title's box
+ * takes the title's place in the header, as tall as the name was; the inline
+ * settings sit under the ports, above a type's own body, and add height there
+ * only, so the lines' arithmetic stands. */
+.twm-flow-graph__node-title-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    box-sizing: border-box;
+    height: 22px;
+    padding: 0 4px;
+    background: var(--surface-1);
+    border: 1px solid var(--twm-flow-focus);
+    border-radius: 2px;
+    color: var(--text-body);
+    font: inherit;
+    cursor: text;
+    user-select: text;
+}
+.twm-flow-graph__node-title-input[aria-invalid="true"] { border-color: var(--twm-flow-error); }
+.twm-flow-graph__node-inline { box-sizing: border-box; display: grid; gap: 4px; padding: 4px 8px 6px; min-width: 0; cursor: default; }
+.twm-flow-graph__node--sized > .twm-flow-graph__node-inline { flex: none; }
+.twm-flow-graph__node[data-accent]::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    border-radius: 3px 3px 0 0;
+    pointer-events: none;
+}
+.twm-flow-graph__node[data-accent="violet"]::before { background: var(--twm-flow-violet-fg); }
+.twm-flow-graph__node[data-accent="teal"]::before { background: var(--twm-flow-teal-fg); }
+.twm-flow-graph__node[data-accent="amber"]::before { background: var(--twm-flow-amber-fg); }
+.twm-flow-graph__node[data-accent="grey"]::before { background: var(--twm-flow-grey-fg); }
+.twm-flow-graph__node[data-accent="blue"]::before { background: var(--twm-flow-blue-fg); }
+.twm-flow-graph__node[data-accent="indigo"]::before { background: var(--twm-flow-indigo-fg); }
+
+/* ── a group and a note (`groups`, `notes`) ─────────────────────────── */
+/* A GROUP IS A FRAME BEHIND ITS NODES (first in the node layer). Its body
+ * takes no pointer, so a press inside it between the nodes is the canvas's
+ * (a marquee, a pan); its title bar is the handle that drags the members. */
+.twm-flow-graph__group {
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px dashed var(--border-strong);
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.03);
+    pointer-events: none;
+}
+.twm-flow-graph__group-head {
+    box-sizing: border-box;
+    height: 26px;
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    border-radius: 6px 6px 0 0;
+    background: var(--twm-flow-grey-bg);
+    color: var(--twm-flow-grey-fg);
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    cursor: move;
+    pointer-events: auto;
+    user-select: none;
+}
+.twm-flow-graph__group-label { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.twm-flow-graph__group-label--untitled { font-style: italic; font-weight: 400; }
+.twm-flow-graph__group-input { flex: 1 1 auto; min-width: 0; font: inherit; }
+.twm-flow-graph__group[data-tone="violet"] { border-color: var(--twm-flow-violet-fg); }
+.twm-flow-graph__group[data-tone="teal"] { border-color: var(--twm-flow-teal-fg); }
+.twm-flow-graph__group[data-tone="amber"] { border-color: var(--twm-flow-amber-fg); }
+.twm-flow-graph__group[data-tone="grey"] { border-color: var(--twm-flow-grey-fg); }
+.twm-flow-graph__group[data-tone="blue"] { border-color: var(--twm-flow-blue-fg); }
+.twm-flow-graph__group[data-tone="indigo"] { border-color: var(--twm-flow-indigo-fg); }
+.twm-flow-graph__group[data-tone="violet"] > .twm-flow-graph__group-head { background: var(--twm-flow-violet-bg); color: var(--twm-flow-violet-fg); }
+.twm-flow-graph__group[data-tone="teal"] > .twm-flow-graph__group-head { background: var(--twm-flow-teal-bg); color: var(--twm-flow-teal-fg); }
+.twm-flow-graph__group[data-tone="amber"] > .twm-flow-graph__group-head { background: var(--twm-flow-amber-bg); color: var(--twm-flow-amber-fg); }
+.twm-flow-graph__group[data-tone="blue"] > .twm-flow-graph__group-head { background: var(--twm-flow-blue-bg); color: var(--twm-flow-blue-fg); }
+.twm-flow-graph__group[data-tone="indigo"] > .twm-flow-graph__group-head { background: var(--twm-flow-indigo-bg); color: var(--twm-flow-indigo-fg); }
+/* A NOTE is free text on the canvas, its height its text's unless it has a size. */
+.twm-flow-graph__note {
+    position: absolute;
+    box-sizing: border-box;
+    padding: 8px 10px;
+    background: var(--twm-flow-amber-bg);
+    border: 1px solid var(--border-strong);
+    border-radius: 4px;
+    color: var(--text-body);
+    font-size: var(--font-size-xs);
+    cursor: move;
+    overflow: hidden;
+    outline: none;
+}
+.twm-flow-graph__note:focus-visible { box-shadow: 0 0 0 2px var(--twm-flow-focus); }
+.twm-flow-graph__note--picked { border-color: var(--twm-flow-focus); box-shadow: 0 0 0 1px var(--twm-flow-focus); }
+.twm-flow-graph__note-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.twm-flow-graph__note-text--empty { color: var(--text-muted); font-style: italic; }
+.twm-flow-graph__note-input {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 4em;
+    resize: vertical;
+    font: inherit;
+    cursor: text;
+}
+/* LIVE VALUES (`setNodeValues`): a value on the header, before the step's id
+ * tag, and one beside a port. Neither element exists until there is a value. */
+.twm-flow-graph__node-badge {
+    flex: none;
+    max-width: 40%;
+    padding: 1px 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    color: var(--text-body);
+    background: rgba(127, 127, 127, 0.18);
+    border-radius: 2px;
+}
+.twm-flow-graph__node-badge[data-tone="violet"] { background: var(--twm-flow-violet-bg); color: var(--twm-flow-violet-fg); }
+.twm-flow-graph__node-badge[data-tone="teal"] { background: var(--twm-flow-teal-bg); color: var(--twm-flow-teal-fg); }
+.twm-flow-graph__node-badge[data-tone="amber"] { background: var(--twm-flow-amber-bg); color: var(--twm-flow-amber-fg); }
+.twm-flow-graph__node-badge[data-tone="grey"] { background: var(--twm-flow-grey-bg); color: var(--twm-flow-grey-fg); }
+.twm-flow-graph__node-badge[data-tone="blue"] { background: var(--twm-flow-blue-bg); color: var(--twm-flow-blue-fg); }
+.twm-flow-graph__node-badge[data-tone="indigo"] { background: var(--twm-flow-indigo-bg); color: var(--twm-flow-indigo-fg); }
+.twm-flow-graph__port-value { color: var(--twm-flow-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* FOLDED TO ITS HEADER (`collapsible`): everything under the header is hidden,
+ * and the lines meet the header's middle. */
+.twm-flow-graph__node-fold {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    background: none;
+    border: 0;
+    border-radius: 3px;
+    color: var(--twm-flow-muted);
+    cursor: pointer;
+}
+.twm-flow-graph__node-fold .material-symbols-outlined { font-size: 16px; }
+.twm-flow-graph__node-fold:hover:not(:disabled) { color: var(--text-body); background: rgba(127, 127, 127, 0.18); }
+.twm-flow-graph__node-fold:focus-visible { outline: 1px solid var(--twm-flow-focus); }
+.twm-flow-graph__node-fold:disabled { cursor: default; opacity: 0.5; }
+.twm-flow-graph__node--collapsed > :not(.twm-flow-graph__node-head) { display: none; }
+.twm-flow-graph__node--collapsed > .twm-flow-graph__node-head { border-bottom: 0; border-radius: 3px; }
 
 /* ── a port ─────────────────────────────────────────────────────────── */
 .twm-flow-graph__port {
@@ -9712,16 +12632,53 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 .twm-flow-graph__port--taken .twm-flow-graph__port-dot { border-color: var(--twm-flow-ok); background: var(--twm-flow-ok); }
 .twm-flow-graph__port--taken .twm-flow-graph__port-count { color: var(--twm-flow-ok); }
 .twm-flow-graph__port--untaken { opacity: 0.5; }
+/* Under `connections` only the inputs the line may end on are lit. */
+.twm-flow-graph--linking.twm-flow-graph--connecting .twm-flow-graph__port--in:not(.twm-flow-graph__port--can-drop) .twm-flow-graph__port-dot {
+    background: transparent;
+    box-shadow: none;
+}
+.twm-flow-graph__port--can-drop .twm-flow-graph__port-dot {
+    background: var(--twm-flow-focus);
+    box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.35);
+}
 
 /* ── a line ─────────────────────────────────────────────────────────── */
-.twm-flow-graph__edge { fill: none; stroke: #8fb4d8; stroke-width: 1.6; }
-.twm-flow-graph__edge--picked { stroke: var(--twm-flow-focus); stroke-width: 2.4; }
+/* A consumer's `edgeStyle` sets a line's tone and width as the two custom
+ * properties below (unset, the line is drawn as it always was); a picked or
+ * highlighted line still wins over them. */
+.twm-flow-graph__edge { fill: none; stroke: var(--twm-canvas-edge-stroke, #8fb4d8); stroke-width: var(--twm-canvas-edge-width, 1.6); }
+.twm-flow-graph__edge--picked { stroke: var(--twm-flow-focus); stroke-width: calc(var(--twm-canvas-edge-width, 1.6) + 0.8); }
 /* A loop's body handing back to the loop: DASHED, and routed under both steps
  * by the kernel's `returnEdge`, so it reads as "round again", not as one more
  * step forward. */
 .twm-flow-graph__edge--back { stroke-dasharray: 6 4; }
 .twm-flow-graph__edge--taken { stroke: var(--twm-flow-ok); }
 .twm-flow-graph__edge--untaken { opacity: 0.35; }
+/* The line a drag is drawing: dashed, and never what the release lands on. */
+.twm-flow-graph__edge--draft { stroke: var(--twm-flow-focus); stroke-dasharray: 4 3; pointer-events: none; }
+/* `edgeStyle`'s dash, and the lines of a hovered step or line (`hoverHighlight`). */
+.twm-flow-graph__edge--dashed { stroke-dasharray: 6 4; }
+.twm-flow-graph__edge--highlighted { stroke: var(--twm-flow-focus); stroke-width: calc(var(--twm-canvas-edge-width, 1.6) + 0.8); }
+/* `edgeStyle`'s marker at the input end: an arrowhead, or the kernel's crow's
+ * foot in the line's own tone. */
+.twm-flow-graph__edge-arrow { fill: var(--twm-canvas-edge-stroke, #8fb4d8); stroke: none; }
+.twm-flow-graph__edge-foot line, .twm-flow-graph__edge-foot circle { stroke: var(--twm-canvas-edge-stroke, #8fb4d8); }
+/* `edgeStyle`'s label, centred on the line's midpoint. Its layer sits in the
+ * node layer and is stacked ABOVE every node, so a step never hides it. */
+.twm-flow-graph__edge-labels { position: absolute; left: 0; top: 0; z-index: 1; }
+.twm-flow-graph__edge-label {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    padding: 1px 6px;
+    border: 1px solid var(--twm-canvas-edge-stroke, #8fb4d8);
+    border-radius: 8px;
+    background: var(--surface-2);
+    color: var(--text-body);
+    font-size: var(--font-size-xs);
+    line-height: 1.4;
+    white-space: nowrap;
+    cursor: pointer;
+}
 /* The 14px target a 1.6px line cannot be. It opts back into the pointer the
  * edge layer turns off. */
 .twm-flow-graph__edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
@@ -9748,6 +12705,26 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
 }
 .twm-flow-graph__ghost .material-symbols-outlined { font-size: 16px; }
 .twm-flow-graph__ghost-label { white-space: nowrap; }
+/* ── the minimap (`minimap: true`) ──────────────────────────────────── */
+/* Over the canvas's lower right corner, a sibling of the kernel's surface, so a
+ * press on it starts no pan and no marquee. The steps are drawn as boxes and
+ * the view as a frame; a click centres the view there. */
+.twm-flow-graph__minimap {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    z-index: 1;
+    line-height: 0;
+    background: var(--surface-1);
+    border: 1px solid var(--border-default);
+    border-radius: 4px;
+    box-shadow: var(--shadow-md);
+    cursor: pointer;
+    opacity: 0.92;
+}
+.twm-flow-graph__minimap-map { display: block; }
+.twm-flow-graph__minimap-node { fill: var(--border-strong); }
+.twm-flow-graph__minimap-view { fill: none; stroke: var(--twm-flow-focus); stroke-width: 1.5px; }
 /* ══ end FLOW · CANVAS ══ */
 
 
@@ -11331,4 +14308,33 @@ button.twm-alerts__ref:hover { text-decoration: underline; }
     font-size: 16px;
     line-height: 1;
 }
+.twm-flow-lanes__menu-item.twm-flow-lanes__menu-item--refused {
+    height: auto;
+    min-height: 28px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+.twm-flow-lanes__menu-words {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.twm-flow-lanes__menu-label {
+    white-space: nowrap;
+}
+.twm-flow-lanes__menu-reason {
+    max-width: 280px;
+    font-size: var(--font-size-xs);
+    white-space: normal;
+}
+.twm-flow-lanes__menu-sep {
+    height: 1px;
+    margin: 4px 6px;
+    background: var(--border-subtle);
+}
+.twm-flow-lanes__notice {
+    margin-left: 8px;
+    color: var(--twm-flow-warning);
+    font-size: var(--font-size-xs);
+}
 /* ══ end FLOW · LANES ══ */