flexdesk 0.16.1 → 0.17.0

package/css/base.css

@@ -156,6 +156,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;
@@ -336,6 +340,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;
@@ -431,6 +475,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;
@@ -982,6 +1030,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;
@@ -2725,6 +2849,231 @@ body.twm-window-maximized .twm-resize-handle {
     cursor: default;
 }
 
+/* ─── 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. */
+
+.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
 
@@ -3299,6 +3648,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;
 }
@@ -4011,7 +4368,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 ────────────────────────────────────────────────────────── */
 
@@ -4757,7 +5143,7 @@ button.twm-about-dialog__btn--close:focus {
     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
@@ -4768,6 +5154,34 @@ button.twm-about-dialog__btn--close:focus {
     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);
+}
+
 /* R8. THE SAME STRIP, IN A WINDOW. A pane floated into a managed window takes
  * its tabs with it — *"to window includes the tab-strip"* — and the strip in
  * the window is the strip from the pane: same component, same vocabulary, same
@@ -5201,9 +5615,202 @@ button.twm-about-dialog__btn--close:focus {
     background: var(--border-subtle);
 }
 
-/* R1. The containing block an ESCAPED window resolves against — a window
- * dragged out of its pane is re-parented here for the length of the drag.
- * `relative` only, for the reason `.twm-leaf` documents: `transform`, `filter`,
+/* ══ 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 ══ */
+
+/* R1. The containing block an ESCAPED window resolves against — a window
+ * dragged out of its pane is re-parented here for the length of the drag.
+ * `relative` only, for the reason `.twm-leaf` documents: `transform`, `filter`,
  * `contain` and `will-change` each create a containing block AND trap
  * `position: fixed` descendants, which would clip every dropdown the grid opens
  * on purpose. */
@@ -5432,78 +6039,945 @@ button.twm-about-dialog__btn--close:focus {
     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 ══ */
+
+/* ══ 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 ══ */
+
+/* ══ 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 ══ */
 
 /* ══ FLOW · KIT ═══════════════════════════════════════════════════════ */
 /* The shared flow-editor kit (36 §3, §3.12): the settings panel and its
@@ -5731,10 +7205,6 @@ button.twm-about-dialog__btn--close:focus {
     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;
@@ -5967,6 +7437,30 @@ button.twm-about-dialog__btn--close:focus {
     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;
@@ -6475,6 +7969,21 @@ button.twm-about-dialog__btn--close:focus {
     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. */
@@ -6546,6 +8055,8 @@ button.twm-about-dialog__btn--close:focus {
 }
 .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;
@@ -6677,6 +8188,168 @@ button.twm-about-dialog__btn--close:focus {
 .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 {
@@ -6718,16 +8391,53 @@ button.twm-about-dialog__btn--close:focus {
 .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; }
@@ -6754,6 +8464,26 @@ button.twm-about-dialog__btn--close:focus {
 }
 .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 ══ */
 
 
@@ -8337,4 +10067,33 @@ button.twm-about-dialog__btn--close:focus {
     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 ══ */