flexdesk 0.2.0 → 0.4.0

package/css/base.css

@@ -1131,6 +1131,13 @@ body.twm-dt-col-resizing {
 .twm-collapsible-content {
     display: none;
 }
+/* C8. The rule `toggleCategory()` has always assumed and no stylesheet has ever
+ * provided. Without it the collapsible primitive is non-functional as shipped:
+ * the toggle adds `.visible` and nothing acts on the class, so a category that
+ * "opens" stays `display: none`. One rule; it was simply missing. */
+.twm-collapsible-content.visible {
+    display: block;
+}
 /* ============================================
    Autocomplete Field Component (legacy-variable style)
    ============================================ */
@@ -2342,1098 +2349,2462 @@ body.twm-window-maximized .twm-resize-handle {
     cursor: default;
 }
 
-/* ── from results_widgets.css ───────────────────────── */
-/* Error State */
-.twm-tile-error {
+/* ═══════════════════════════════════════════════════════════════════════
+   @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
+       matters only when the board is empty, and an empty board that is zero
+       pixels tall is a board you cannot drop the first tile onto. */
+    min-height: 400px;
+    position: relative;
+}
+
+/* ── the built-in toolbar ────────────────────────────────────────────── */
+/* `_buildToolbar()` emits `tile-grid-toolbar tile-grid-toolbar--bottom` and no
+   other variant, so the divider lives on the modifier: a rule that put a
+   `border-bottom` on the base class — as the donor's did, when the toolbar sat
+   above the grid — draws a line along the wrong edge here. A consumer that
+   passes `showToolbar: false` and builds its own toolbar gets none of this. */
+.tile-grid-toolbar {
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    justify-content: center;
-    height: 100%;
     gap: var(--space-md);
-    color: #ff6b6b;
-    font-size: var(--font-size-sm);
+    padding: var(--space-lg) var(--space-xl);
+    background: rgba(255, 255, 255, 0.02);
 }
-/* ===================================================================
-   REUSABLE ACTION DROPDOWN COMPONENT
-   Used by Add Scenario, Add Widget, and other action dropdowns
-   =================================================================== */
 
-.twm-action-dropdown-menu {
-    /* position/top/left set by ActionDropdown.position() via inline style */
-    position: fixed;
-    min-width: 220px;
-    padding: var(--space-md);
-    background: linear-gradient(145deg, rgba(30, 32, 38, 0.98), rgba(24, 26, 32, 0.96));
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    border-radius: 10px;
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
-    z-index: var(--z-toast);
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.16s ease;
-}
-.twm-action-dropdown-menu[hidden] {
-    display: none !important;
+.tile-grid-toolbar--bottom {
+    border-top: 1px solid var(--border-subtle);
 }
-/* Dropdown options */
-.twm-action-dropdown-option {
+
+/* `toolbar-group`, `toolbar-btn`, `btn-text` and `dropdown-arrow` are names
+   generic enough that a consumer almost certainly has its own. They are
+   scoped under the toolbar rather than claimed globally — a library that
+   defines a bare `.toolbar-btn` restyles buttons it has never met. */
+.tile-grid-toolbar .toolbar-group {
     display: flex;
     align-items: center;
-    gap: 10px;
-    width: 100%;
-    padding: 10px 12px;
-    margin-bottom: var(--space-xs);
-    background: rgba(255, 255, 255, 0.03);
-    border: 1px solid transparent;
-    border-radius: var(--radius-md);
-    color: rgba(255, 255, 255, 0.85);
+    gap: var(--space-md);
+}
+
+.tile-grid-toolbar .add-widget-container {
+    position: relative;
+}
+
+.tile-grid-toolbar .toolbar-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-xs) var(--space-lg);
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--border-default);
+    border-radius: var(--radius-sm);
+    color: var(--text-body);
     font-family: inherit;
-    font-size: var(--font-size-md);
+    font-size: var(--font-size-sm);
     cursor: pointer;
-    text-align: left;
-    box-sizing: border-box;
     transition: background var(--transition-normal), border-color var(--transition-normal);
 }
-.twm-action-dropdown-option:last-child {
-    margin-bottom: 0;
-}
-.twm-action-dropdown-option:hover,
-.twm-action-dropdown-option:focus {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.08);
-    outline: none;
-}
-.twm-action-dropdown-option .twm-option-icon {
-    font-size: 20px;
-    color: #78b9ff;
-    flex-shrink: 0;
+
+.tile-grid-toolbar .toolbar-btn:hover {
+    background: var(--state-hover);
+    border-color: var(--border-strong);
 }
-.twm-action-dropdown-option:hover .twm-option-icon,
-.twm-action-dropdown-option:focus .twm-option-icon {
-    color: #9ecfff;
+
+.tile-grid-toolbar .toolbar-btn .material-symbols-outlined {
+    font-size: var(--font-size-xl);
 }
-.twm-action-dropdown-option .twm-option-label {
-    font-weight: 500;
+
+.tile-grid-toolbar .btn-text {
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
-.twm-action-dropdown-option .twm-option-desc {
-    font-size: var(--font-size-xs);
-    color: rgba(255, 255, 255, 0.5);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+
+.tile-grid-toolbar .dropdown-arrow {
+    opacity: 0.6;
 }
 
-/* ── from code.css ───────────────────────── */
-/* Code language tabs */
-.twm-code-tabs-header {
-  display: flex;
-  align-items: center;
-  height: 35px;
-  background: #2a2a2a;
-  border-bottom: 1px solid var(--surface-0);
-  gap: var(--space-xs);
-  flex: 0 0 auto;
+/* `--main` is the ONLY group `_buildToolbar()` emits, and all three buttons
+   sit inside it, so it takes the strip's whole width — `space-between` on the
+   toolbar has nothing to space until a consumer adds a second group. */
+.tile-grid-toolbar .toolbar-group--main {
+    flex: 1;
 }
-.twm-code-tabs {
-  display: flex;
-  gap: var(--space-xxs);
-  height: 35px;
+
+/* Add Widget is the toolbar's one primary verb, so it is the one that carries
+   the accent. */
+.add-widget-btn {
+    background: rgba(0, 122, 204, 0.15);
+    border-color: rgba(0, 122, 204, 0.3);
+    color: var(--text-bright);
 }
-.twm-code-tab {
-  height: 35px;
-  padding: 0 12px;
-  display: flex;
-  align-items: center;
-  background: transparent;
-  color: var(--text-muted);
-  border: none;
-  border-radius: var(--radius-sm) 3px 0 0;
-  cursor: pointer;
-  font-size: var(--font-size-sm);
-  transition: all var(--transition-normal);
-  position: relative;
+
+.add-widget-btn:hover {
+    background: rgba(0, 122, 204, 0.25);
+    border-color: rgba(0, 122, 204, 0.5);
 }
-.twm-code-tab:hover {
-  background: #333;
-  color: #ccc;
+
+/* The other two are secondary — Export is an aside and Reset Layout throws the
+   board away, and neither should read as the thing to press. */
+.export-btn,
+.reset-layout-btn {
+    color: var(--text-muted);
 }
 
-/* ── from global_search.css ───────────────────────── */
-/* Search wrapper - contains icon, input, hint */
-.twm-global-search-wrapper {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-    height: 26px;
-    min-width: 200px;
-    max-width: 320px;
-    width: 100%;
-    padding: 0 10px;
-    background: #2b2b2c;
-    border: 1px solid #3a3a3b;
-    border-radius: 5px;
-    transition: border-color var(--transition-normal), background var(--transition-normal);
+.export-btn:hover,
+.reset-layout-btn:hover {
+    color: var(--text-body);
 }
-.twm-global-search-wrapper:focus-within {
-    border-color: var(--accent-bright);
+
+/* ── the tile ────────────────────────────────────────────────────────── */
+/* Flat, one 1 px border, no radius and no shadow: dense expert-tool chrome,
+   the register of a trading terminal rather than a card wall. The donor also
+   carried `margin: -1px 0 0 -1px` so that adjacent borders collapsed into one
+   line — which is only true at `gap: 0`, and this grid's default gap is 16 px,
+   where the same rule just shifts every tile a pixel up and left. Dropped on
+   purpose; a consumer running gap-0 can add it back in one rule. */
+.tile {
     background: var(--surface-1);
+    border: 1px solid var(--border-default);
+    border-radius: 0;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+    min-height: 0;
+    transition: border-color var(--transition-normal);
 }
-/* Dropdown container */
-.twm-global-search-dropdown {
-    position: absolute;
-    top: calc(100% + 4px);
-    left: 50%;
-    transform: translateX(-50%);
-    width: 320px;
-    max-height: 400px;
-    overflow-y: auto;
-    background: #2b2b2c;
-    border: 1px solid #3a3a3b;
-    border-radius: var(--radius-md);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-    z-index: 3500;
+
+.tile:hover {
+    border-color: var(--border-strong);
+    box-shadow: none;
 }
-/* Scrollbar styling for dropdown */
-.twm-global-search-dropdown::-webkit-scrollbar {
-    width: 6px;
+
+.tile.dragging {
+    opacity: 0.5;
+    z-index: var(--z-dropdown);
+    box-shadow: var(--shadow-lg);
 }
-.twm-global-search-dropdown::-webkit-scrollbar-track {
-    background: transparent;
+
+.tile.resizing {
+    z-index: var(--z-dropdown);
+    border-color: var(--accent-bright);
+    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.3);
 }
-.twm-global-search-dropdown::-webkit-scrollbar-thumb {
-    background: #4a4a4a;
-    border-radius: var(--radius-sm);
+
+/* Selected — set by `_onConfigClick()` while the config dialog is open, and
+   cleared from every sibling by the same handler. #78b9ff is a literal
+   because there is no light-accent token: `--accent-bright` is #007acc, which
+   is a border colour on this background and not a text one. */
+.tile.tile--selected {
+    border-color: #78b9ff;
+    box-shadow: 0 0 0 2px rgba(120, 185, 255, 0.3), var(--shadow-md);
 }
-.twm-global-search-dropdown::-webkit-scrollbar-thumb:hover {
-    background: #5a5a5a;
+
+.tile.tile--selected .tile-header {
+    background: rgba(120, 185, 255, 0.1);
 }
 
-/* ── from zoom_controls.css ───────────────────────── */
-/**
- * Zoom Controls Styles
- *
- * Styles for the canvas zoom control buttons and global zoom indicator.
- * Buttons: positioned in the bottom-right corner of the canvas.
- * Indicator: positioned in the global bottom-right of the application.
- */
+.tile.tile--selected .tile-title {
+    color: #78b9ff;
+}
 
-/* Ensure .twm-left-top is a positioning context for the zoom controls */
-.twm-left-top {
-    position: relative;
+/* Read-only. `_buildChrome()`'s read-only branch emits no drag handle, no
+   cogwheel, no ⋯ menu, no remove button and no resize handle, so there is
+   nothing here to hide — what is left is to stop the tile advertising the
+   affordances it no longer has. */
+.tile--readonly .tile-header {
+    cursor: default;
 }
 
-/* ── from managed_window.css ───────────────────────── */
-/**
- * Managed Window Styles
- * Styles for draggable/resizable window component with taskbar integration.
- */
+.tile--readonly:hover {
+    border-color: var(--border-default);
+}
 
-/* ========== Window Container ========== */
+/* ── the header strip ────────────────────────────────────────────────── */
+.tile-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 0 var(--space-sm);
+    background: var(--surface-0);
+    border-bottom: 1px solid var(--border-default);
+    min-height: 22px;
+    flex-shrink: 0;
+}
 
-.twm-managed-window {
-    position: fixed;
-    background: #1a1a1a;
-    border: 1px solid var(--surface-3);
-    border-radius: 0;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+.tile-drag-handle {
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-width: 200px;
-    min-height: 100px;
-    /* Enable transitions for minimize/maximize animations */
-    transition: transform 0.2s ease-out, opacity 0.2s ease-out, box-shadow var(--transition-normal);
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 18px;
+    color: rgba(255, 255, 255, 0.3);
+    cursor: grab;
+    transition: color var(--transition-normal);
 }
-.twm-managed-window:focus-within {
-    border-color: #505050;
+
+.tile-drag-handle:hover {
+    color: rgba(255, 255, 255, 0.6);
 }
-/* Minimize animation class — targets taskbar item via CSS custom properties */
-.twm-managed-window--minimizing {
-    transform: translate(var(--mw-target-x, 0px), var(--mw-target-y, 100vh)) scale(var(--mw-target-scale, 0.1));
-    opacity: 0;
-    pointer-events: none;
+
+.tile-drag-handle:active {
+    cursor: grabbing;
 }
-/* Restore animation class — animates from taskbar item position */
-.twm-managed-window--restoring {
-    animation: windowRestore 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+
+.tile-drag-handle .material-symbols-outlined {
+    font-size: var(--font-size-lg);
 }
-/* ========== Backdrop (for modal windows) ========== */
 
-.twm-managed-window__backdrop {
-    position: fixed;
-    /* Position between top bar (35px) and bottom bar (20px) */
-    top: 35px;
-    left: 0;
-    right: 0;
-    bottom: 20px;
-    background: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(2px);
+/* `cursor: default`, where the donor said `pointer`. In EcoAgent the title
+   opened the config panel; in this library that moved to the cogwheel alone
+   ("Config opens ONLY via the explicit cogwheel button" — `_buildChrome`), so
+   a pointer cursor here promises a click that does nothing. */
+.tile-title {
+    flex: 1;
+    min-width: 0;
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    color: var(--text-body);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    padding: 0;
+    border-radius: 0;
+    line-height: 1;
 }
-/* Per-modal overrides of the dim/blur above are set as inline styles by
-   ManagedWindow from its `backdropBlur` / `backdropOpacity` options — not
-   via modifier classes here. */
 
-/* ========== Top Bar ========== */
+.tile-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    margin-left: var(--space-md);
+    flex-shrink: 0;
+}
 
-.twm-managed-window__topbar {
-    height: 28px;
-    min-height: 28px;
-    background: var(--surface-1);
-    border-bottom: 1px solid var(--surface-3);
+/* One geometry for every icon button in the strip. They differ only in what
+   they turn when you hover them, which is the next block. */
+.tile-config-btn,
+.tile-menu-btn,
+.tile-expand-btn,
+.tile-remove-btn {
     display: flex;
     align-items: center;
-    padding: 0 8px;
-    cursor: move;
-    user-select: none;
-    gap: var(--space-sm);
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    transition: background var(--transition-normal), color var(--transition-normal);
 }
-/* Non-draggable windows (modals) */
-.twm-managed-window--no-drag .twm-managed-window__topbar {
-    cursor: default;
+
+.tile-config-btn:hover,
+.tile-menu-btn:hover,
+.tile-expand-btn:hover {
+    background: var(--state-hover);
+    color: #78b9ff;
 }
-.twm-managed-window__icon {
-    font-size: var(--font-size-lg);
-    color: var(--text-muted);
+
+.tile-remove-btn:hover {
+    background: var(--state-hover);
+    color: #ff6b6b;
+}
+
+.tile-config-btn .material-symbols-outlined,
+.tile-menu-btn .material-symbols-outlined,
+.tile-expand-btn .material-symbols-outlined,
+.tile-remove-btn .material-symbols-outlined {
+    font-size: var(--font-size-xl);
+}
+
+/* The ⓘ button carries its own inline `style` from `_buildChrome`, and inline
+   style beats any rule in this file — background, border, padding and colour
+   are already decided there and CANNOT be changed from here. So this rule adds
+   only what the inline style leaves open. A hover background written here
+   would be a rule that never applies: exactly the dead rule the header comment
+   warns about, arrived at from the other direction. */
+.tile-info-btn {
+    width: 20px;
+    height: 20px;
+    border-radius: var(--radius-sm);
     flex-shrink: 0;
 }
-.twm-managed-window__title {
-    flex: 1;
-    font-size: var(--font-size-sm);
-    font-weight: 500;
-    color: var(--text-secondary);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+/* ── the ⋯ menu ──────────────────────────────────────────────────────── */
+/* Rendered from `TileBase.menuItems()`; an empty list emits no wrapper at all,
+   so none of this draws for a consumer that overrides the hook to `[]`. */
+.tile-menu-wrapper {
+    position: relative;
 }
-.twm-managed-window__buttons {
-    display: flex;
-    gap: var(--space-xxs);
-    margin-left: auto;
+
+.tile-menu-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    z-index: var(--z-dropdown);
+    min-width: 180px;
+    padding: var(--space-xs) 0;
+    background: var(--surface-2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
 }
-/* Window buttons - white icons on transparent background */
-/* Use button element + class selector to override global "button" styles from main_new.css */
-button.twm-managed-window__btn {
-    width: 24px;
-    height: 20px;
-    border: none;
-    background: none;
-    background-color: transparent;
-    color: var(--text-bright);
-    cursor: pointer;
-    border-radius: 0;
+
+/* `!important`, matching `.twm-action-dropdown-menu[hidden]` below and for the
+   same reason: `hidden` is the JS's only way of closing this menu
+   (`menuDropdown.hidden = !menuDropdown.hidden`), and the UA implements the
+   attribute as the weakest possible rule — any consumer selector that sets a
+   display on the dropdown would leave it open with nothing to close it. */
+.tile-menu-dropdown[hidden] {
+    display: none !important;
+}
+
+.tile-menu-item {
     display: flex;
     align-items: center;
-    justify-content: center;
-    padding: 0;
-    outline: none;
-    box-shadow: none;
-    transition: background-color 0.1s, color 0.1s;
-}
-/* Focus state - no outline */
-button.twm-managed-window__btn:focus,
-button.twm-managed-window__btn:focus-visible {
-    outline: none;
-    box-shadow: none;
+    gap: var(--space-md);
+    width: 100%;
+    padding: var(--space-sm) var(--space-lg);
     background: none;
-    background-color: transparent;
-}
-/* Hover state - dark gray background */
-button.twm-managed-window__btn:hover {
-    background: var(--surface-3);
-    background-color: var(--surface-3);
-    color: var(--text-bright);
-}
-/* Active state */
-button.twm-managed-window__btn:active {
-    background: #4a4a4a;
-    background-color: #4a4a4a;
+    border: none;
+    color: var(--text-secondary);
+    font-family: inherit;
+    font-size: var(--font-size-sm);
+    text-align: left;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background var(--transition-fast);
 }
-/* Close button hover - red */
-button.twm-managed-window__btn--close:hover {
-    background: #c42b1c;
-    background-color: #c42b1c;
+
+.tile-menu-item:hover {
+    background: var(--state-active);
     color: var(--text-bright);
 }
-.twm-managed-window__btn svg {
-    width: 10px;
-    height: 10px;
+
+.tile-menu-item .material-symbols-outlined {
+    font-size: var(--font-size-xl);
+    color: rgba(255, 255, 255, 0.5);
 }
-/* Override global path stroke from main_new.css which sets stroke: #2c3e50 on all paths */
-/* Need high specificity to beat: path:not(.connection-path):not(.connection-hitbox) = (0,2,1) */
-.twm-managed-window .twm-managed-window__btn svg path,
-.twm-managed-window .twm-managed-window__btn svg rect,
-button.twm-managed-window__btn svg path,
-button.twm-managed-window__btn svg rect {
-    stroke: var(--text-bright);
-    stroke-width: 1.5;
+
+.tile-menu-item:hover .material-symbols-outlined {
+    color: #78b9ff;
 }
-/* ========== Content Area ========== */
 
-.twm-managed-window__content {
+/* ── the content area ────────────────────────────────────────────────── */
+/* `min-height: 0` is the load-bearing declaration, not the padding: a flex
+   child's default `min-height: auto` refuses to shrink below its content, so
+   without it a tall table or a chart pushes the tile past its grid rows
+   instead of scrolling inside them. */
+.tile-content {
     flex: 1;
+    padding: var(--space-lg);
     overflow: hidden;
     position: relative;
+    min-height: 0;
     display: flex;
     flex-direction: column;
 }
-/* ========== Resize Handles ========== */
 
-.twm-managed-window__resize {
+/* A chart library that measures its container on draw gets a container with a
+   real size. The `!important` is the only lever there is: Plotly writes width
+   and height INLINE onto `.js-plotly-plot` when it draws, an inline
+   declaration outranks any selector, and `!important` is what outranks it —
+   without which a chart keeps the size it had when the tile was half as wide. */
+.tile-content > [class*="-container"] {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    position: relative;
+}
+
+.tile-content .js-plotly-plot,
+.tile-content .plot-container.plotly,
+.tile-content .svg-container {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+/* ── resize handle and drag ghost ────────────────────────────────────── */
+.tile-resize-handle {
     position: absolute;
+    background: transparent;
     z-index: var(--z-sticky);
 }
-/* ========== Taskbar in Bottom Bar ========== */
 
-.twm-bar-windows {
+.tile-resize-handle.se {
+    bottom: 0;
+    right: 0;
+    width: 24px;
+    height: 24px;
+    cursor: se-resize;
     display: flex;
     align-items: center;
-    gap: var(--space-xs);
-    padding: 0 4px;
-    height: 100%;
-}
-.twm-bar-windows:empty {
-    display: none;
+    justify-content: center;
+    color: rgba(255, 255, 255, 0.2);
+    transition: color var(--transition-normal);
 }
-/* Taskbar dividers */
-.twm-bar-windows__divider {
-    width: 1px;
-    height: 100%;
-    background: var(--surface-3);
+
+.tile-resize-handle.se:hover {
+    color: rgba(255, 255, 255, 0.5);
 }
-.twm-bar-windows__divider--left {
-    margin-right: var(--space-xs);
+
+.tile-resize-handle .material-symbols-outlined {
+    font-size: var(--font-size-xl);
+    transform: rotate(-45deg);
 }
-.twm-bar-windows__divider--right {
-    margin-left: var(--space-xs);
+
+/* The drop preview, positioned by `_updateGhost()` in grid coordinates. */
+.tile-ghost {
+    position: absolute;
+    background: rgba(0, 122, 204, 0.15);
+    border: 2px dashed rgba(0, 122, 204, 0.5);
+    border-radius: var(--radius-sm);
+    pointer-events: none;
+    z-index: 50;
+    transition: transform 0.1s ease;
 }
-.twm-bar-windows__item {
-    height: 100%;
-    padding: 0 6px;
-    background: transparent;
-    border: none;
-    border-radius: 0;
-    font-size: var(--font-size-xs);
-    font-family: inherit;
-    color: var(--text-secondary);
-    cursor: pointer;
-    max-width: 160px;
+
+/* ── the three content states ────────────────────────────────────────── */
+/* `showLoading()`, `showEmpty()` and `showError()` each replace the whole of
+   `.tile-content`, so all three centre themselves in it. */
+.tile-loading {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: var(--space-xs);
-    transition: background-color 0.1s, color 0.1s;
-}
-.twm-bar-windows__item:hover {
-    /* Solarized blue */
-    background: #268bd2;
-    color: var(--text-bright);
-}
-.twm-bar-windows__item:active {
-    background: #1a6aa5;
-}
-.twm-bar-windows__item-icon {
+    justify-content: center;
+    height: 100%;
+    gap: var(--space-md);
+    color: rgba(255, 255, 255, 0.5);
     font-size: var(--font-size-sm);
-    flex-shrink: 0;
 }
-.twm-bar-windows__item-title {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+
+.tile-loading .material-symbols-outlined {
+    font-size: 24px;
 }
-/* ========== Transitions ========== */
 
-.twm-managed-window:not(:hover) {
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+/* Scoped, because `.spinning` on its own is a name a consumer is entitled to
+   use for its own spinner. `spin` is not scopeable — `@keyframes` names are
+   global — and a consumer that defines its own `spin` later in the cascade
+   simply spins this icon its way, which is harmless. */
+.tile-loading .spinning {
+    animation: spin 1s linear infinite;
 }
-/* ========== Expression Modal Content ========== */
 
-.twm-expression-modal__window-content {
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
+
+.tile-empty {
     display: flex;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     height: 100%;
-    overflow: hidden;
+    gap: var(--space-md);
+    color: rgba(255, 255, 255, 0.4);
+    font-size: var(--font-size-sm);
+    text-align: center;
 }
-.twm-expression-modal__window-content .twm-expression-modal__meta {
-    padding: var(--space-md) 12px;
-    font-size: var(--font-size-xs);
-    color: var(--text-muted);
-    border-bottom: 1px solid #333;
-    flex-shrink: 0;
+
+.tile-empty .material-symbols-outlined {
+    font-size: 32px;
+    opacity: 0.5;
 }
-.twm-expression-modal__window-content .twm-expression-modal__editor-container {
-    flex: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    padding: 5px;
-}
-/* ========== Confirm Dialog Content ========== */
 
-.twm-confirm-dialog__content {
+/* THE ERROR STATE IS PREFIXED AND THE OTHER TWO ARE NOT. `showError()` emits
+   `.twm-tile-error` where `showEmpty()` emits `.tile-empty` — an asymmetry
+   that is now a fixed fact of the wire, because this rule shipped before the
+   rest of the block did. The donor's unprefixed `.tile-error` is deliberately
+   NOT ported: it would sit here looking correct and matching nothing. */
+.twm-tile-error {
     display: flex;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     height: 100%;
-    padding: var(--space-xl);
-    box-sizing: border-box;
-}
-.twm-confirm-dialog__body {
-    flex: 1;
-    display: flex;
-    align-items: flex-start;
-    gap: var(--space-lg);
-}
-.twm-confirm-dialog__icon {
-    font-size: 32px;
-    color: var(--text-muted);
-    flex-shrink: 0;
-}
-.twm-confirm-dialog__message {
-    flex: 1;
-    font-size: var(--font-size-md);
-    color: var(--text-secondary);
-    line-height: 1.5;
-    white-space: pre-wrap;
-    padding-top: var(--space-xs);
-}
-.twm-confirm-dialog__actions {
-    display: flex;
-    justify-content: flex-end;
     gap: var(--space-md);
-    margin-top: var(--space-xl);
-    padding-top: var(--space-lg);
-    border-top: 1px solid #333;
-}
-/* Confirm dialog buttons - override global button styles */
-button.twm-confirm-dialog__btn {
-    padding: var(--space-sm) 16px;
-    border: 1px solid #444;
-    border-radius: var(--radius-sm);
+    color: #ff6b6b;
     font-size: var(--font-size-sm);
-    font-family: inherit;
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal);
+    text-align: center;
 }
-button.twm-confirm-dialog__btn--primary {
-    background: var(--accent);
-    border-color: var(--accent);
+
+.twm-tile-error .material-symbols-outlined {
+    font-size: 32px;
 }
-button.twm-confirm-dialog__btn--primary:hover {
-    background: var(--accent-hover);
-    border-color: var(--accent-hover);
+/* ===================================================================
+   REUSABLE ACTION DROPDOWN COMPONENT
+   Used by Add Scenario, Add Widget, and other action dropdowns
+   =================================================================== */
+
+.twm-action-dropdown-menu {
+    /* position/top/left set by ActionDropdown.position() via inline style */
+    position: fixed;
+    min-width: 220px;
+    padding: var(--space-md);
+    background: linear-gradient(145deg, rgba(30, 32, 38, 0.98), rgba(24, 26, 32, 0.96));
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 10px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+    z-index: var(--z-toast);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.16s ease;
 }
-button.twm-confirm-dialog__btn:focus {
-    outline: 2px solid var(--accent-bright);
-    outline-offset: 2px;
+.twm-action-dropdown-menu[hidden] {
+    display: none !important;
 }
-
-/* ── from about_dialog.css ───────────────────────── */
-/**
- * About Dialog Styles
- * Modal dialog showing EcoSim version, license, and third-party credits.
- */
-
-/* ========== Root Container ========== */
-
-.twm-about-dialog__content {
+/* Dropdown options */
+.twm-action-dropdown-option {
     display: flex;
-    flex-direction: column;
-    height: 100%;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 10px 12px;
+    margin-bottom: var(--space-xs);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    color: rgba(255, 255, 255, 0.85);
+    font-family: inherit;
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    text-align: left;
     box-sizing: border-box;
+    transition: background var(--transition-normal), border-color var(--transition-normal);
 }
-/* ========== Header ========== */
-
-.twm-about-dialog__header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--space-xs);
-    padding: 20px 16px 16px;
-    border-bottom: 1px solid #333;
-    flex-shrink: 0;
+.twm-action-dropdown-option:last-child {
+    margin-bottom: 0;
 }
-.twm-about-dialog__logo {
-    font-size: 40px;
-    color: var(--accent-bright);
+.twm-action-dropdown-option:hover,
+.twm-action-dropdown-option:focus {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.08);
+    outline: none;
 }
-.twm-about-dialog__title {
+.twm-action-dropdown-option .twm-option-icon {
     font-size: 20px;
-    font-weight: 600;
-    color: var(--text-secondary);
-    margin: 0;
+    color: #78b9ff;
+    flex-shrink: 0;
 }
-.twm-about-dialog__version {
-    font-size: var(--font-size-sm);
-    color: var(--text-muted);
+.twm-action-dropdown-option:hover .twm-option-icon,
+.twm-action-dropdown-option:focus .twm-option-icon {
+    color: #9ecfff;
 }
-.twm-about-dialog__tagline {
-    font-size: var(--font-size-sm);
-    color: var(--text-muted);
+.twm-action-dropdown-option .twm-option-label {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-/* ========== Scrollable Body ========== */
-
-.twm-about-dialog__body {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--space-lg) 16px;
-    min-height: 0;
+.twm-action-dropdown-option .twm-option-desc {
+    font-size: var(--font-size-xs);
+    color: rgba(255, 255, 255, 0.5);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-/* ========== Sections ========== */
 
-.twm-about-dialog__section {
-    margin-bottom: 14px;
+/* ── from code.css ───────────────────────── */
+/* Code language tabs */
+.twm-code-tabs-header {
+  display: flex;
+  align-items: center;
+  height: 35px;
+  background: #2a2a2a;
+  border-bottom: 1px solid var(--surface-0);
+  gap: var(--space-xs);
+  flex: 0 0 auto;
 }
-.twm-about-dialog__section:last-child {
-    margin-bottom: 0;
+.twm-code-tabs {
+  display: flex;
+  gap: var(--space-xxs);
+  height: 35px;
 }
-.twm-about-dialog__section-title {
-    font-size: var(--font-size-xs);
-    font-weight: 600;
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    margin-bottom: var(--space-md);
+.twm-code-tab {
+  height: 35px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  border-radius: var(--radius-sm) 3px 0 0;
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  transition: all var(--transition-normal);
+  position: relative;
+}
+.twm-code-tab:hover {
+  background: #333;
+  color: #ccc;
 }
-/* ========== Project Links ========== */
 
-.twm-about-dialog__links {
+/* ── from global_search.css ───────────────────────── */
+/* Search wrapper - contains icon, input, hint */
+.twm-global-search-wrapper {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-sm);
-}
-.twm-about-dialog__link {
-    display: inline-flex;
     align-items: center;
     gap: var(--space-sm);
-    font-size: var(--font-size-sm);
-    color: #3794ff;
-    text-decoration: none;
-    cursor: pointer;
+    height: 26px;
+    min-width: 200px;
+    max-width: 320px;
+    width: 100%;
+    padding: 0 10px;
+    background: #2b2b2c;
+    border: 1px solid #3a3a3b;
+    border-radius: 5px;
+    transition: border-color var(--transition-normal), background var(--transition-normal);
 }
-.twm-about-dialog__link:hover {
-    text-decoration: underline;
-    color: #4da6ff;
+.twm-global-search-wrapper:focus-within {
+    border-color: var(--accent-bright);
+    background: var(--surface-1);
 }
-.twm-about-dialog__license-text {
-    font-size: var(--font-size-sm);
-    color: var(--text-muted);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-sm);
+/* Dropdown container */
+.twm-global-search-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 320px;
+    max-height: 400px;
+    overflow-y: auto;
+    background: #2b2b2c;
+    border: 1px solid #3a3a3b;
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    z-index: 3500;
 }
-/* ========== Dependency List ========== */
-
-.twm-about-dialog__dep-list {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-xs);
+/* Scrollbar styling for dropdown */
+.twm-global-search-dropdown::-webkit-scrollbar {
+    width: 6px;
 }
-.twm-about-dialog__dep {
-    display: flex;
-    align-items: baseline;
-    gap: var(--space-md);
-    padding: var(--space-xxs) 0;
+.twm-global-search-dropdown::-webkit-scrollbar-track {
+    background: transparent;
 }
-.twm-about-dialog__dep-name {
-    font-size: var(--font-size-sm);
-    color: #3794ff;
-    text-decoration: none;
-    cursor: pointer;
-    flex-shrink: 0;
+.twm-global-search-dropdown::-webkit-scrollbar-thumb {
+    background: #4a4a4a;
+    border-radius: var(--radius-sm);
 }
-.twm-about-dialog__dep-name:hover {
-    text-decoration: underline;
-    color: #4da6ff;
+.twm-global-search-dropdown::-webkit-scrollbar-thumb:hover {
+    background: #5a5a5a;
 }
-.twm-about-dialog__dep-license {
-    font-size: var(--font-size-xs);
-    color: var(--text-dim);
-    flex-shrink: 0;
+
+/* ── from zoom_controls.css ───────────────────────── */
+/**
+ * Zoom Controls Styles
+ *
+ * Styles for the canvas zoom control buttons and global zoom indicator.
+ * Buttons: positioned in the bottom-right corner of the canvas.
+ * Indicator: positioned in the global bottom-right of the application.
+ */
+
+/* Ensure .twm-left-top is a positioning context for the zoom controls */
+.twm-left-top {
+    position: relative;
 }
-/* ========== Footer ========== */
 
-.twm-about-dialog__footer {
+/* ── from managed_window.css ───────────────────────── */
+/**
+ * Managed Window Styles
+ * Styles for draggable/resizable window component with taskbar integration.
+ */
+
+/* ========== Window Container ========== */
+
+.twm-managed-window {
+    position: fixed;
+    background: #1a1a1a;
+    border: 1px solid var(--surface-3);
+    border-radius: 0;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
     display: flex;
-    justify-content: flex-end;
-    padding: 10px 16px;
-    border-top: 1px solid #333;
-    flex-shrink: 0;
+    flex-direction: column;
+    overflow: hidden;
+    min-width: 200px;
+    min-height: 100px;
+    /* Enable transitions for minimize/maximize animations */
+    transition: transform 0.2s ease-out, opacity 0.2s ease-out, box-shadow var(--transition-normal);
 }
-button.twm-about-dialog__btn {
-    padding: var(--space-sm) 16px;
-    border: 1px solid #444;
-    border-radius: var(--radius-sm);
-    font-size: var(--font-size-sm);
-    font-family: inherit;
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal);
+/* C3. Containment. `--contained` swaps `position: fixed` for `absolute` so the
+ * window is placed relative to its container, which must be a containing block
+ * established with `position: relative`/`absolute` and NOTHING ELSE.
+ *
+ * This is the most dangerous rule in the containment work. `transform`,
+ * `filter`, `contain` and `will-change` on the container ALSO create a
+ * containing block — and they additionally capture `position: fixed`
+ * descendants. DataTable's filter dropdown (`position: fixed; z-index: 10001`)
+ * and the autocomplete dropdown (`z-index: 10000000`) deliberately escape their
+ * tile to the viewport; under a transformed ancestor they become
+ * container-relative and are clipped by the container's `overflow: hidden`.
+ * The symptom is "the filter dropdown is cut in half" and the cause is three
+ * files away. */
+.twm-managed-window--contained {
+    position: absolute;
 }
-button.twm-about-dialog__btn--close {
-    background: var(--accent);
-    border-color: var(--accent);
-    color: var(--text-bright);
+.twm-managed-window__backdrop--contained {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
 }
-button.twm-about-dialog__btn--close:hover {
-    background: var(--accent-hover);
-    border-color: var(--accent-hover);
+/* The layer a contained window is mounted into. `position: relative` and
+ * `overflow: hidden` ONLY — see the warning above. */
+.tbl-window-layer {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
 }
-button.twm-about-dialog__btn--close:focus {
-    outline: 2px solid var(--accent-bright);
-    outline-offset: 2px;
+/* C6. An extra titlebar button (the table cogwheel), sized like the built-ins. */
+.twm-managed-window__btn--custom .material-symbols-outlined {
+    font-size: 13px;
+    line-height: 1;
+}
+.twm-managed-window:focus-within {
+    border-color: #505050;
+}
+/* Minimize animation class — targets taskbar item via CSS custom properties */
+.twm-managed-window--minimizing {
+    transform: translate(var(--mw-target-x, 0px), var(--mw-target-y, 100vh)) scale(var(--mw-target-scale, 0.1));
+    opacity: 0;
+    pointer-events: none;
+}
+/* Restore animation class — animates from taskbar item position */
+.twm-managed-window--restoring {
+    animation: windowRestore 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+/* C27. THE KEYFRAMES THE RULE ABOVE HAS ALWAYS NAMED AND NOTHING EVER DEFINED.
+   `animation: windowRestore ...` referred to an `@keyframes` block that does
+   not exist anywhere in either stylesheet, which CSS treats as no animation at
+   all — so the restore was an instant pop while its mirror image, the minimise,
+   played for 200ms. The fifth instance of this codebase's signature defect: one
+   side names a thing the other side has never heard of, nothing throws, and no
+   check in any of the three consumers can see it. Deliberately the exact
+   inverse of `--minimizing`, from the same three custom properties, so the two
+   halves of the gesture cannot describe different geometry. */
+@keyframes windowRestore {
+    from {
+        transform: translate(var(--mw-target-x, 0px), var(--mw-target-y, 100vh))
+                   scale(var(--mw-target-scale, 0.1));
+        opacity: 0;
+    }
+    to {
+        transform: none;
+        opacity: 1;
+    }
 }
+/* ========== Backdrop (for modal windows) ========== */
 
-/* ── from components/detail_header.css ───────────────────────── */
-/* ═══════════════════════════════════════════════════════════════════════════
-   DetailHeader — shared header bar for detail views across all pages.
-   Used by: Scenario page, ETL page, Data page, Notebook editors.
-   ═══════════════════════════════════════════════════════════════════════════ */
+.twm-managed-window__backdrop {
+    position: fixed;
+    /* Position between top bar (35px) and bottom bar (20px) */
+    top: 35px;
+    left: 0;
+    right: 0;
+    bottom: 20px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(2px);
+}
+/* Per-modal overrides of the dim/blur above are set as inline styles by
+   ManagedWindow from its `backdropBlur` / `backdropOpacity` options — not
+   via modifier classes here. */
 
-.twm-detail-header {
+/* ========== Top Bar ========== */
+
+.twm-managed-window__topbar {
+    height: 28px;
+    min-height: 28px;
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--surface-3);
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    gap: var(--space-xl);
-    padding-bottom: var(--space-lg);
-    flex-wrap: wrap;
+    padding: 0 8px;
+    cursor: move;
+    user-select: none;
+    gap: var(--space-sm);
 }
-.twm-detail-header__title-row {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 0;
+/* Non-draggable windows (modals) */
+.twm-managed-window--no-drag .twm-managed-window__topbar {
+    cursor: default;
 }
-.twm-detail-header__icon {
-    font-size: 20px;
-    color: var(--text-muted, var(--text-muted));
+.twm-managed-window__icon {
+    font-size: var(--font-size-lg);
+    color: var(--text-muted);
     flex-shrink: 0;
 }
-.twm-detail-header__name {
-    font-size: var(--font-size-2xl);
-    font-weight: 600;
-    color: var(--text-primary, #f0f0f0);
-    margin: 0;
-    white-space: nowrap;
+.twm-managed-window__title {
+    flex: 1;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: var(--text-secondary);
     overflow: hidden;
     text-overflow: ellipsis;
-    cursor: default;
+    white-space: nowrap;
 }
-.twm-detail-header__name[data-renameable] {
-    cursor: text;
+.twm-managed-window__buttons {
+    display: flex;
+    gap: var(--space-xxs);
+    margin-left: auto;
 }
-.twm-detail-header__name[data-renameable]:hover {
+/* Window buttons - white icons on transparent background */
+/* Use button element + class selector to override global "button" styles from main_new.css */
+button.twm-managed-window__btn {
+    width: 24px;
+    height: 20px;
+    border: none;
+    background: none;
+    background-color: transparent;
     color: var(--text-bright);
+    cursor: pointer;
+    border-radius: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    outline: none;
+    box-shadow: none;
+    transition: background-color 0.1s, color 0.1s;
 }
-/* Inline rename input (injected by InlineRenamer) */
-.twm-detail-header__name .twm-node-edit-input {
-    font: inherit;
-    font-size: var(--font-size-2xl);
-    font-weight: 600;
-    background: var(--surface-1));
-    border: 1px solid var(--accent);
-    border-radius: var(--radius-sm);
-    color: var(--text-primary, #f0f0f0);
-    padding: 0 4px;
-    margin: -2px 0;
+/* Focus state - no outline */
+button.twm-managed-window__btn:focus,
+button.twm-managed-window__btn:focus-visible {
     outline: none;
-    width: 100%;
-    min-width: 100px;
+    box-shadow: none;
+    background: none;
+    background-color: transparent;
 }
-/* ─── Badges ──────────────────────────────────────────────────────────── */
-
-/* .detail-header__badge* — moved to components/controls.css (Phase 2). */
-
-/* ─── Subtitle ────────────────────────────────────────────────────────── */
-
-.twm-detail-header__subtitle {
-    width: 100%;
-    font-size: var(--font-size-sm);
-    color: var(--text-muted, var(--text-muted));
-    margin-top: -8px;
-    padding-left: 30px;
+/* Hover state - dark gray background */
+button.twm-managed-window__btn:hover {
+    background: var(--surface-3);
+    background-color: var(--surface-3);
+    color: var(--text-bright);
 }
-.twm-detail-header__subtitle strong {
-    color: var(--text-primary, var(--text-primary));
+/* Active state */
+button.twm-managed-window__btn:active {
+    background: #4a4a4a;
+    background-color: #4a4a4a;
 }
-/* ─── Actions ─────────────────────────────────────────────────────────── */
-
-.twm-detail-header__actions {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-    flex-shrink: 0;
+/* Close button hover - red */
+button.twm-managed-window__btn--close:hover {
+    background: #c42b1c;
+    background-color: #c42b1c;
+    color: var(--text-bright);
 }
-
-/* ── from components/attribute_list_editor.css ───────────────────────── */
+.twm-managed-window__btn svg {
+    width: 10px;
+    height: 10px;
+}
+/* Override global path stroke from main_new.css which sets stroke: #2c3e50 on all paths */
+/* Need high specificity to beat: path:not(.connection-path):not(.connection-hitbox) = (0,2,1) */
+.twm-managed-window .twm-managed-window__btn svg path,
+.twm-managed-window .twm-managed-window__btn svg rect,
+button.twm-managed-window__btn svg path,
+button.twm-managed-window__btn svg rect {
+    stroke: var(--text-bright);
+    stroke-width: 1.5;
+}
+/* ========== Content Area ========== */
+
+.twm-managed-window__content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+/* ========== Resize Handles ========== */
+
+.twm-managed-window__resize {
+    position: absolute;
+    z-index: var(--z-sticky);
+}
+/* ========== Taskbar in Bottom Bar ========== */
+
+.twm-bar-windows {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 0 4px;
+    height: 100%;
+}
+.twm-bar-windows:empty {
+    display: none;
+}
+/* Taskbar dividers */
+.twm-bar-windows__divider {
+    width: 1px;
+    height: 100%;
+    background: var(--surface-3);
+}
+.twm-bar-windows__divider--left {
+    margin-right: var(--space-xs);
+}
+.twm-bar-windows__divider--right {
+    margin-left: var(--space-xs);
+}
+.twm-bar-windows__item {
+    height: 100%;
+    padding: 0 6px;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    font-size: var(--font-size-xs);
+    font-family: inherit;
+    color: var(--text-secondary);
+    cursor: pointer;
+    max-width: 160px;
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    transition: background-color 0.1s, color 0.1s;
+}
+.twm-bar-windows__item:hover {
+    /* Solarized blue */
+    background: #268bd2;
+    color: var(--text-bright);
+}
+.twm-bar-windows__item:active {
+    background: #1a6aa5;
+}
+.twm-bar-windows__item-icon {
+    font-size: var(--font-size-sm);
+    flex-shrink: 0;
+}
+.twm-bar-windows__item-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+/* ========== Transitions ========== */
+
+.twm-managed-window:not(:hover) {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+/* ========== Expression Modal Content ========== */
+
+.twm-expression-modal__window-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+.twm-expression-modal__window-content .twm-expression-modal__meta {
+    padding: var(--space-md) 12px;
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    border-bottom: 1px solid #333;
+    flex-shrink: 0;
+}
+.twm-expression-modal__window-content .twm-expression-modal__editor-container {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+}
+/* ========== Confirm Dialog Content ========== */
+
+.twm-confirm-dialog__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: var(--space-xl);
+    box-sizing: border-box;
+}
+.twm-confirm-dialog__body {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-lg);
+}
+.twm-confirm-dialog__icon {
+    font-size: 32px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+.twm-confirm-dialog__message {
+    flex: 1;
+    font-size: var(--font-size-md);
+    color: var(--text-secondary);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    padding-top: var(--space-xs);
+}
+.twm-confirm-dialog__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-md);
+    margin-top: var(--space-xl);
+    padding-top: var(--space-lg);
+    border-top: 1px solid #333;
+}
+/* Confirm dialog buttons - override global button styles */
+button.twm-confirm-dialog__btn {
+    padding: var(--space-sm) 16px;
+    border: 1px solid #444;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color var(--transition-normal), border-color var(--transition-normal);
+}
+button.twm-confirm-dialog__btn--primary {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+button.twm-confirm-dialog__btn--primary:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+button.twm-confirm-dialog__btn:focus {
+    outline: 2px solid var(--accent-bright);
+    outline-offset: 2px;
+}
+
+/* ── from about_dialog.css ───────────────────────── */
+/**
+ * About Dialog Styles
+ * Modal dialog showing EcoSim version, license, and third-party credits.
+ */
+
+/* ========== Root Container ========== */
+
+.twm-about-dialog__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+}
+/* ========== Header ========== */
+
+.twm-about-dialog__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 20px 16px 16px;
+    border-bottom: 1px solid #333;
+    flex-shrink: 0;
+}
+.twm-about-dialog__logo {
+    font-size: 40px;
+    color: var(--accent-bright);
+}
+.twm-about-dialog__title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin: 0;
+}
+.twm-about-dialog__version {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+}
+.twm-about-dialog__tagline {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+}
+/* ========== Scrollable Body ========== */
+
+.twm-about-dialog__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-lg) 16px;
+    min-height: 0;
+}
+/* ========== Sections ========== */
+
+.twm-about-dialog__section {
+    margin-bottom: 14px;
+}
+.twm-about-dialog__section:last-child {
+    margin-bottom: 0;
+}
+.twm-about-dialog__section-title {
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin-bottom: var(--space-md);
+}
+/* ========== Project Links ========== */
+
+.twm-about-dialog__links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+.twm-about-dialog__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: var(--font-size-sm);
+    color: #3794ff;
+    text-decoration: none;
+    cursor: pointer;
+}
+.twm-about-dialog__link:hover {
+    text-decoration: underline;
+    color: #4da6ff;
+}
+.twm-about-dialog__license-text {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+/* ========== Dependency List ========== */
+
+.twm-about-dialog__dep-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+.twm-about-dialog__dep {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-md);
+    padding: var(--space-xxs) 0;
+}
+.twm-about-dialog__dep-name {
+    font-size: var(--font-size-sm);
+    color: #3794ff;
+    text-decoration: none;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+.twm-about-dialog__dep-name:hover {
+    text-decoration: underline;
+    color: #4da6ff;
+}
+.twm-about-dialog__dep-license {
+    font-size: var(--font-size-xs);
+    color: var(--text-dim);
+    flex-shrink: 0;
+}
+/* ========== Footer ========== */
+
+.twm-about-dialog__footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 16px;
+    border-top: 1px solid #333;
+    flex-shrink: 0;
+}
+button.twm-about-dialog__btn {
+    padding: var(--space-sm) 16px;
+    border: 1px solid #444;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color var(--transition-normal), border-color var(--transition-normal);
+}
+button.twm-about-dialog__btn--close {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--text-bright);
+}
+button.twm-about-dialog__btn--close:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+button.twm-about-dialog__btn--close:focus {
+    outline: 2px solid var(--accent-bright);
+    outline-offset: 2px;
+}
+
+/* ── from components/detail_header.css ───────────────────────── */
+/* ═══════════════════════════════════════════════════════════════════════════
+   DetailHeader — shared header bar for detail views across all pages.
+   Used by: Scenario page, ETL page, Data page, Notebook editors.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.twm-detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-xl);
+    padding-bottom: var(--space-lg);
+    flex-wrap: wrap;
+}
+.twm-detail-header__title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+.twm-detail-header__icon {
+    font-size: 20px;
+    color: var(--text-muted, var(--text-muted));
+    flex-shrink: 0;
+}
+.twm-detail-header__name {
+    font-size: var(--font-size-2xl);
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+}
+.twm-detail-header__name[data-renameable] {
+    cursor: text;
+}
+.twm-detail-header__name[data-renameable]:hover {
+    color: var(--text-bright);
+}
+/* Inline rename input (injected by InlineRenamer) */
+.twm-detail-header__name .twm-node-edit-input {
+    font: inherit;
+    font-size: var(--font-size-2xl);
+    font-weight: 600;
+    background: var(--surface-1));
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary, #f0f0f0);
+    padding: 0 4px;
+    margin: -2px 0;
+    outline: none;
+    width: 100%;
+    min-width: 100px;
+}
+/* ─── Badges ──────────────────────────────────────────────────────────── */
+
+/* .detail-header__badge* — moved to components/controls.css (Phase 2). */
+
+/* ─── Subtitle ────────────────────────────────────────────────────────── */
+
+.twm-detail-header__subtitle {
+    width: 100%;
+    font-size: var(--font-size-sm);
+    color: var(--text-muted, var(--text-muted));
+    margin-top: -8px;
+    padding-left: 30px;
+}
+.twm-detail-header__subtitle strong {
+    color: var(--text-primary, var(--text-primary));
+}
+/* ─── Actions ─────────────────────────────────────────────────────────── */
+
+.twm-detail-header__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    flex-shrink: 0;
+}
+
+/* ── from components/attribute_list_editor.css ───────────────────────── */
 /* attribute_list_editor.css — generic AttributeSpec list editor.
  *
- * The component sets `--cols` on the host element based on the
- * `showColumns` spec — header strip and row cells share the same
- * grid template so labels stay aligned with their inputs. Each
- * cell uses the standard dark-theme tokens; the editor never owns
- * row chrome (that's SortableList's job).
+ * The component sets `--cols` on the host element based on the
+ * `showColumns` spec — header strip and row cells share the same
+ * grid template so labels stay aligned with their inputs. Each
+ * cell uses the standard dark-theme tokens; the editor never owns
+ * row chrome (that's SortableList's job).
+ */
+
+.twm-attr-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+    margin-top: 0.25em;
+}
+/* Header strip now sits inside a SortableList row chrome so the
+ * `[handle][content][remove]` flex layout matches each data row
+ * exactly — no more hardcoded `padding: 0 2em` that drifted as soon
+ * as space-md or the icon size changed. The placeholder spans
+ * (`.twm-attr-editor__header-placeholder`) reserve the handle + remove
+ * gutters; the inner `__headers` div is the column-grid that aligns
+ * with each row's `.twm-attr-editor__row` grid. */
+.twm-attr-editor__header-row {
+    background: transparent;
+    border: 1px solid transparent;  /* keep height parity with data rows */
+    cursor: default;
+}
+.twm-attr-editor__header-row:hover {
+    border-color: transparent;
+}
+.twm-attr-editor__header-placeholder {
+    visibility: hidden;
+    pointer-events: none;
+}
+.twm-attr-editor__headers {
+    display: grid;
+    grid-template-columns: var(--cols, 1fr);
+    gap: 0.4em;
+    font-size: 0.75em;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--ea-text-muted, #888);
+}
+.twm-attr-editor__row {
+    display: grid;
+    grid-template-columns: var(--cols, 1fr);
+    gap: 0.4em;
+    align-items: center;
+    /* Overridden rows append `__attention` + `__revert` siblings. We
+     * pull those out of the grid flow (absolute) so the cells keep
+     * their column tracks regardless of override state — otherwise the
+     * grid auto-creates implicit tracks for the extras and shifts every
+     * column. `position: relative` anchors the absolute children. */
+    position: relative;
+}
+.twm-attr-editor__cell {
+    background: var(--ea-input-bg, #1e1e1e);
+    color: var(--ea-text, #ddd);
+    border: 1px solid var(--ea-border, #444);
+    padding: 0.25em 0.4em;
+    font: inherit;
+    box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+}
+/* Native <select> defaults render with light-grey chrome on most
+ * browsers even when the background is set. Force the dark palette
+ * + suppress the OS arrow so the type cell matches the surrounding
+ * dark inputs in both closed AND row-tinted states. */
+.twm-attr-editor select.twm-attr-editor__cell {
+    background-color: var(--ea-input-bg, #1e1e1e);
+    color: var(--ea-text, #ddd);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--ea-text-muted, #888) 50%),
+                      linear-gradient(135deg, var(--ea-text-muted, #888) 50%, transparent 50%);
+    background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
+    background-size: 4px 4px, 4px 4px;
+    background-repeat: no-repeat;
+    padding-right: 1.5em;
+}
+.twm-attr-editor select.twm-attr-editor__cell option {
+    background: var(--ea-input-bg, #1e1e1e);
+    color: var(--ea-text, #ddd);
+}
+.twm-attr-editor select.twm-attr-editor__cell optgroup {
+    background: var(--ea-bg-chrome, #161616);
+    color: var(--ea-text-muted, #888);
+    font-style: normal;
+}
+.twm-attr-editor__cell--readonly {
+    background: transparent;
+    color: var(--ea-text-muted, #888);
+    font-family: monospace;
+    font-size: 0.85em;
+    border: 1px dashed var(--ea-border, #2a2a2a);
+}
+.twm-attr-editor__row input[type="checkbox"].twm-attr-editor__cell {
+    width: auto;
+    justify-self: start;
+}
+/* Layer 8.J1 — inheritance state. Each row gets one of three modifiers:
+ *
+ *   --inherited:  value matches the parent archetype's default. The
+ *                 row gets a light blue tint AND each input cell tinted
+ *                 the same so the signal reads against the dark theme.
+ *   --overridden: value differs from the parent archetype's default.
+ *                 Solarized orange tint + attention dot on the left +
+ *                 revert button on the right.
+ *   --neutral:    no parent archetype defines this attribute. Default
+ *                 styling.
+ *
+ * Tinting the inputs (not just the row container) is what makes the
+ * signal actually visible in the dark theme — a 0.10 alpha background
+ * behind dark inputs is invisible. */
+
+.twm-attr-editor__row {
+    padding: 0.15em 0.25em;
+    border-left: 3px solid transparent;
+    border-radius: 2px;
+    transition: background 120ms, border-color 120ms;
+}
+/* Inherited / matching state — same green as the Public API card's
+ * "matches archetype" rows, so the colour grammar reads consistently
+ * across attributes and methods: green = matches the archetype,
+ * orange = overrides, neutral = no parent involved. */
+.twm-attr-editor__row--inherited {
+    background: rgba(96, 192, 96, 0.15);
+    border-left-color: #60c060;
+}
+.twm-attr-editor__row--inherited input.twm-attr-editor__cell {
+    background: rgba(96, 192, 96, 0.08);
+    border-color: rgba(96, 192, 96, 0.40);
+}
+.twm-attr-editor__row--inherited select.twm-attr-editor__cell {
+    /* Native <select> can't render a semi-transparent background
+     * reliably (the OS popup picks up the literal colour as its
+     * backing). Keep the dark base, signal "inherited" via border
+     * accent only. */
+    background-color: var(--ea-input-bg, #1e1e1e);
+    border-color: rgba(96, 192, 96, 0.60);
+}
+.twm-attr-editor__row--overridden {
+    background: rgba(204, 120, 65, 0.22);
+    border-left-color: #d18138;
+}
+.twm-attr-editor__row--overridden input.twm-attr-editor__cell {
+    background: rgba(204, 120, 65, 0.10);
+    border-color: rgba(209, 129, 56, 0.50);
+    color: #f0c189;
+}
+.twm-attr-editor__row--overridden select.twm-attr-editor__cell {
+    background-color: var(--ea-input-bg, #1e1e1e);
+    border-color: rgba(209, 129, 56, 0.60);
+    color: #f0c189;
+}
+/* R7 — variation-override flag treatments. These additively layer on
+ * top of the inheritance grammar (above), so an `optional` inherited
+ * row keeps its green background AND gets the optional border accent.
+ *
+ *  disabled : the archetype declared the slot but turned it off. The
+ *             row is greyed out to make clear it's not carried into
+ *             descendants.
+ *  forced   : variations can't override this slot. Cells appear
+ *             non-editable; the lock icon (added by JS) signals why.
+ *  optional : the value is a suggestion. Green border, NO fill — so
+ *             it's visually distinct from `inherited` (green fill).
+ *             Variations may override without warning.
  */
+.twm-attr-editor__row--disabled {
+    opacity: 0.55;
+    border-left-color: var(--ea-text-dim, #777);
+}
+.twm-attr-editor__row--forced {
+    border-left-color: #b48be0;        /* soft purple = locked */
+}
+.twm-attr-editor__row--forced input.twm-attr-editor__cell,
+.twm-attr-editor__row--forced select.twm-attr-editor__cell {
+    background-color: rgba(180, 139, 224, 0.08);
+    border-color: rgba(180, 139, 224, 0.40);
+}
+.twm-attr-editor__row--optional {
+    border-left-color: #60c060;        /* same green as inherited, ... */
+    background: transparent;           /* ...but no fill — that's the cue */
+}
+.twm-attr-editor__row--optional input.twm-attr-editor__cell,
+.twm-attr-editor__row--optional select.twm-attr-editor__cell {
+    background-color: var(--ea-input-bg, #1e1e1e);
+    border-color: rgba(96, 192, 96, 0.50);
+}
+.twm-attr-editor__attention {
+    /* Positioned in the row's left gutter so it doesn't push the
+     * cells. The row already has `position: relative`. */
+    position: absolute;
+    left: -14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #d18138;            /* solarized orange */
+    font-size: 0.85em;
+    pointer-events: none;
+}
+.twm-attr-editor__revert {
+    /* Floats over the right edge of the row, outside the column grid.
+     * Sits ABOVE the trailing remove-button gutter that sortable_list
+     * draws, so it stays visible. */
+    position: absolute;
+    right: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: 0;
+    color: var(--ea-text-muted, #888);
+    cursor: pointer;
+    padding: 0.15em 0.35em;
+    font-size: 1.1em;
+    z-index: 1;
+}
+.twm-attr-editor__revert:hover {
+    color: #d18138;
+}
 
-.twm-attr-editor {
+/* ── from notebook.css ───────────────────────── */
+.twm-plot-no-data { padding: var(--space-2xl); text-align: center; color: var(--text-muted); font-size: var(--font-size-md); }
+/* ─── Autocomplete field — notebook variant ──────────────── */
+
+.twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper {
+    border: 1px solid #569cd6;
+    font-size: var(--font-size-sm);
+}
+.twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper:focus-within {
+    border-color: #79b8f8;
+    box-shadow: 0 0 3px rgba(86, 156, 214, 0.3);
+}
+.twm-autocomplete-field--notebook .twm-autocomplete-field__input {
+    font-family: 'Courier New', Courier, monospace;
+    color: var(--text-body);
+    font-size: var(--font-size-sm);
+}
+.twm-autocomplete-field--notebook .twm-autocomplete-field__helper {
+    display: none;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   Tree Item Badge — small status indicator on file tree items
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.twm-tree-item__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: var(--radius-lg);
+    font-size: 9px;
+    font-weight: 600;
+    flex-shrink: 0;
+    margin-left: auto;
+    line-height: 1;
+}
+/* Status dot variant (smaller, no text) */
+.twm-tree-item__status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+/* ── from slide_out_panel.css ───────────────────────── */
+/* ─── SlideOutPanel ─────────────────────────────────────────────────────────
+   Inline slide-out config panel that overlays its host container from
+   the right edge. Host container must have position:relative; overflow:hidden.
+   ──────────────────────────────────────────────────────────────────────────── */
+
+/* Transparent click-catcher behind the panel. Hidden by default
+ * via `visibility: hidden` (not just display) so it's removed
+ * from the accessibility tree + paint pass when the panel is
+ * closed; the `--visible` modifier flips it back on. */
+.twm-slide-out-panel__backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: 999;
+    visibility: hidden;
+    pointer-events: none;
+}
+.twm-slide-out-panel__backdrop--visible {
+    visibility: visible;
+    pointer-events: auto;
+}
+/* Panel container. When closed it sits at translateX(100%) off the
+ * right edge of the host; `visibility: hidden` on the closed state
+ * stops the slid-off panel from intercepting clicks or leaking
+ * paint artifacts at the right edge of the workspace. */
+.twm-slide-out-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    z-index: var(--z-modal);
     display: flex;
     flex-direction: column;
-    gap: 0.25em;
-    margin-top: 0.25em;
+
+    background: #212121;
+    border-left: 1px solid #333;
+    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.35);
+
+    min-width: 400px;
+
+    transform: translateX(100%);
+    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+    visibility: hidden;
 }
-/* Header strip now sits inside a SortableList row chrome so the
- * `[handle][content][remove]` flex layout matches each data row
- * exactly — no more hardcoded `padding: 0 2em` that drifted as soon
- * as space-md or the icon size changed. The placeholder spans
- * (`.twm-attr-editor__header-placeholder`) reserve the handle + remove
- * gutters; the inner `__headers` div is the column-grid that aligns
- * with each row's `.twm-attr-editor__row` grid. */
-.twm-attr-editor__header-row {
-    background: transparent;
-    border: 1px solid transparent;  /* keep height parity with data rows */
-    cursor: default;
+.twm-slide-out-panel--open {
+    transform: translateX(0);
+    visibility: visible;
+    transition: transform 200ms ease-out, visibility 0s linear 0s;
 }
-.twm-attr-editor__header-row:hover {
-    border-color: transparent;
+/* Header bar */
+.twm-slide-out-panel__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) 8px 8px 12px;
+    border-bottom: 1px solid var(--border-strong);
+    flex-shrink: 0;
+    user-select: none;
+}
+.twm-slide-out-panel__title {
+    flex: 1;
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-slide-out-panel__close {
+    flex-shrink: 0;
+    margin-left: auto;
+}
+/* Scrollable body */
+.twm-slide-out-panel__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-md);
+}
+
+/* ── from plot_config.css ───────────────────────── */
+.twm-btn-icon {
+  background: transparent;
+  border: none;
+  color: #8a8f98;
+  cursor: pointer;
+  padding: var(--space-xs);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--transition-normal), background-color var(--transition-normal);
+}
+.twm-btn-icon:hover {
+  color: var(--text-bright);
+  background-color: rgba(255, 255, 255, 0.1);
 }
-.twm-attr-editor__header-placeholder {
-    visibility: hidden;
-    pointer-events: none;
+
+/* ── from tiling/host.css ───────────────────────── */
+@media (max-width: 900px) {
+.twm-top-nav__label { display: none; }
+.twm-top-nav__btn { padding: 0 10px; }
 }
-.twm-attr-editor__headers {
-    display: grid;
-    grid-template-columns: var(--cols, 1fr);
-    gap: 0.4em;
-    font-size: 0.75em;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--ea-text-muted, #888);
+
+
+/* ══ RESTORED MIRROR ═════════════════════════════════════════════════
+ * `css/flexdesk.css` is generated from this file by `scripts/css_extract.py`,
+ * which is not in the repository — so the two are kept in step BY HAND, and
+ * this block is that mirror re-established after the working tree lost its
+ * uncommitted changes. Every rule below was recovered from the built
+ * stylesheet and is already live in `css/flexdesk.css`; they are grouped
+ * here rather than threaded back into their original sections because the
+ * generator, not this file, decides where they end up.
+ * ════════════════════════════════════════════════════════════════════ */
+
+/* Selected rows. `_updateRowSelection()` (src/ui/components/data_table.js:2226)
+   has always toggled `.selected` on the row, and no stylesheet has ever
+   defined it — so `selectable: true`, the component's headline affordance,
+   has selected INVISIBLY in every consumer since the class was written.
+   Painted on `td` rather than `tr` to match the hover rule above: the zebra
+   stripe sits on `tr`, and a `tr` background would fight it at equal
+   specificity instead of covering it.
+
+   AND IT HAS TO OUT-SPECIFY HOVER, not merely follow it. Source order only
+   decides a TIE, and there is none here: the hover rule above is (0,3,2) —
+   `:not()` contributes the specificity of its argument — against (0,2,3) for
+   the plain form. Written that way, pointing at the row you had chosen
+   un-highlights it, which reads as the selection being lost on mouse-over. The
+   first selector below carries the same `:not()` and lands at (0,3,3); the
+   second keeps the readonly tables, which hover never claimed, working. */
+.twm-preview-table:not(.twm-preview-table--readonly) tbody tr.selected td,
+.twm-preview-table tbody tr.selected td {
+    background: var(--state-selected, rgba(0, 122, 204, 0.15));
 }
-.twm-attr-editor__row {
-    display: grid;
-    grid-template-columns: var(--cols, 1fr);
-    gap: 0.4em;
-    align-items: center;
-    /* Overridden rows append `__attention` + `__revert` siblings. We
-     * pull those out of the grid flow (absolute) so the cells keep
-     * their column tracks regardless of override state — otherwise the
-     * grid auto-creates implicit tracks for the extras and shifts every
-     * column. `position: relative` anchors the absolute children. */
-    position: relative;
+
+    padding: 0;
+    /* A BOX, not "whatever the glyph turned out to be". The rule had padding
+     * and no dimensions, so the button's size was the icon's size — and the
+     * icon's size was nobody's decision at all (see below). In a 35px top bar
+     * that produced a ~32px control that visibly outweighed everything beside
+     * it. */
+    width: 22px;
+    height: 22px;
+/* THE GLYPH SIZE CAME ACROSS AS NOTHING.
+ *
+ * EcoAgent sets it — `main_new.css:4700`, `.panel-toggle-btn
+ * .material-symbols-outlined { font-size: var(--font-size-xl) }` — and the
+ * extraction that produced this stylesheet took the button rule and left that
+ * one behind. Material Symbols then falls back to its own default of 24px, so
+ * every consumer of the library has been drawing this control half again as
+ * large as its author intended. Same family as the `--ea-*` variables that
+ * arrived without their definitions, and as `.twm-collapsible-content.visible`:
+ * an extraction that split a rule from the rule it depended on.
+ *
+ * `font-size` IS the glyph size for an icon font. `width`/`height` on the
+ * button does not constrain it — it overflows instead. */
+.twm-panel-toggle-btn .material-symbols-outlined {
+    font-size: var(--font-size-xl);
+    line-height: 1;
 }
-.twm-attr-editor__cell {
-    background: var(--ea-input-bg, #1e1e1e);
-    color: var(--ea-text, #ddd);
-    border: 1px solid var(--ea-border, #444);
-    padding: 0.25em 0.4em;
-    font: inherit;
-    box-sizing: border-box;
-    min-width: 0;
-    width: 100%;
+
+/* `#open()` adds `visible` and `#close()` takes it off again
+   (`ui/components/autocomplete_field.js`), and until now NEITHER stylesheet
+   said what the class meant — while the dropdown above is `display: none`. So
+   the suggestion list has never been shown to anybody, in any consumer, for as
+   long as the component has existed: the provider ran, the items rendered, and
+   the element stayed hidden. This is the same shape as
+   `.twm-action-dropdown-menu.visible`, which is the pattern the component was
+   written against. */
+.twm-autocomplete-field__dropdown.visible {
+    display: block;
 }
-/* Native <select> defaults render with light-grey chrome on most
- * browsers even when the background is set. Force the dark palette
- * + suppress the OS arrow so the type cell matches the surrounding
- * dark inputs in both closed AND row-tinted states. */
-.twm-attr-editor select.twm-attr-editor__cell {
-    background-color: var(--ea-input-bg, #1e1e1e);
-    color: var(--ea-text, #ddd);
-    -webkit-appearance: none;
-    -moz-appearance: none;
+
+/* `#renderDropdown()` marks the keyboard cursor's row `active` and
+   `#moveSelection()` moves it — with no rule to draw it. Arrowing down the list
+   therefore moved something invisible, and Enter picked a row the user had no
+   way to see. `:hover` above is the mouse's answer to the same question; this
+   is the keyboard's, and it is deliberately the stronger of the two so that
+   moving the pointer across the list does not hide where the cursor is. */
+.twm-autocomplete-field__item.active {
+    background-color: var(--state-selected, rgba(0, 122, 204, 0.15));
+    box-shadow: inset 2px 0 0 var(--accent-bright, #007acc);
+}
+
+/* A `<button role="menuitem">`, not a div — that is what makes the menu
+ * operable by keyboard without re-implementing Enter, Space and focus. The
+ * first five declarations are the button reset that buys it: without them the
+ * UA paints its own background, border and centred text over everything below. */
     appearance: none;
-    background-image: linear-gradient(45deg, transparent 50%, var(--ea-text-muted, #888) 50%),
-                      linear-gradient(135deg, var(--ea-text-muted, #888) 50%, transparent 50%);
-    background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
-    background-size: 4px 4px, 4px 4px;
-    background-repeat: no-repeat;
-    padding-right: 1.5em;
+    background: none;
+    border: 0;
+    width: 100%;
+    text-align: left;
+    color: inherit;
+.twm-context-menu-item:hover:not(.disabled),
+.twm-context-menu-item:focus-visible {
+    outline: none;
+/* A DISABLED ITEM MUST LOOK DISABLED.
+ *
+ * `showContextMenu` has always added `.disabled` and bound no click listener to
+ * it — the behaviour was right and there was no rule for the class anywhere, so
+ * a disabled item rendered at full opacity, kept `cursor: pointer`, still
+ * highlighted on hover, and did nothing when clicked. That is the exact shape of
+ * the `.twm-collapsible-content.visible` bug: a class the JS sets, a stylesheet
+ * that has never heard of it, and a feature that looks live and is not. */
+.twm-context-menu-item.disabled {
+    opacity: 0.4;
+    cursor: default;
+    color: var(--text-muted);
 }
-.twm-attr-editor select.twm-attr-editor__cell option {
-    background: var(--ea-input-bg, #1e1e1e);
-    color: var(--ea-text, #ddd);
+
+.twm-context-menu-item.disabled.twm-delete-node { color: var(--text-muted); }
+
+/* THE OPEN STATE. `ActionDropdown.open()` un-hides the menu and then adds
+   `.visible` on the next frame to fade it in (action_dropdown.js:172-180) —
+   and no rule for that class existed, so the menu unhid itself into
+   `opacity: 0; pointer-events: none` and stayed there. Every ActionDropdown in
+   the library, "Add Widget" included, opened invisible and un-clickable.
+   The same defect `.twm-collapsible-content.visible` had, in the same shape:
+   the JS toggles a class the stylesheet never grew. */
+.twm-action-dropdown-menu.visible {
+    opacity: 1;
+    pointer-events: auto;
 }
-.twm-attr-editor select.twm-attr-editor__cell optgroup {
-    background: var(--ea-bg-chrome, #161616);
-    color: var(--ea-text-muted, #888);
-    font-style: normal;
+
+/* The option's text column. `_renderOptions` wraps the label and the
+   description in `<span class="option-text">` (action_dropdown.js:125-128) and
+   both children are inline, so a described option rendered as
+   "Add Widget Put a widget on this desktop" on one run-together line. The
+   description is a SECOND LINE by construction; this is what makes it one.
+   `min-width: 0` so the ellipsis on the two children has something to bite on
+   inside the flex row. */
+.twm-action-dropdown-option .option-text {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
 }
-.twm-attr-editor__cell--readonly {
-    background: transparent;
-    color: var(--ea-text-muted, #888);
-    font-family: monospace;
-    font-size: 0.85em;
-    border: 1px dashed var(--ea-border, #2a2a2a);
+
+/* C11. Aero snap — the preview shown while a drag is over an edge zone.
+ * Absolutely positioned in the SAME coordinate space the window uses, so it is
+ * the container when contained and the page otherwise. Below the window's own
+ * z-index and above everything else in the container, so it reads as a target
+ * behind the thing being dragged. */
+.twm-snap-preview {
+    position: absolute;
+    z-index: 5999;
+    pointer-events: none;
+    background: rgba(23, 119, 179, 0.18);
+    border: 1px solid var(--accent-bright);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+    transition: left 0.09s ease, top 0.09s ease, width 0.09s ease, height 0.09s ease;
 }
-.twm-attr-editor__row input[type="checkbox"].twm-attr-editor__cell {
-    width: auto;
-    justify-self: start;
+
+/* C15. A CONTROLLER'S preview is positioned in VIEWPORT pixels, because its
+ * rectangle came from hit-testing somebody else's DOM (`getBoundingClientRect`)
+ * rather than from `_bounds()`. `position: fixed` is what makes those numbers
+ * mean what they say; leaving it `absolute` under `document.body` would be
+ * right only until the page scrolls. */
+.twm-snap-preview--viewport {
+    position: fixed;
 }
-/* Layer 8.J1 — inheritance state. Each row gets one of three modifiers:
+
+/* A window whose position came from a snap rather than from a drag. Nothing
+ * depends on it visually; it is there so a consumer can tell the two apart. */
+.twm-managed-window--snapped { }
+
+/* R3. HALF TRANSPARENT THE MOMENT THE DRAG LEAVES THE TILE IT CAME FROM.
  *
- *   --inherited:  value matches the parent archetype's default. The
- *                 row gets a light blue tint AND each input cell tinted
- *                 the same so the signal reads against the dark theme.
- *   --overridden: value differs from the parent archetype's default.
- *                 Solarized orange tint + attention dot on the left +
- *                 revert button on the right.
- *   --neutral:    no parent archetype defines this attribute. Default
- *                 styling.
+ * The one signal that separates "I am moving this window around on its own
+ * pane" from "letting go now will put this window into the tree somewhere".
+ * Inside its origin pane the window is fully opaque and nothing is armed; the
+ * moment the pointer crosses out of it the window goes translucent and the drop
+ * preview starts drawing what a release would produce.
  *
- * Tinting the inputs (not just the row container) is what makes the
- * signal actually visible in the dark theme — a 0.10 alpha background
- * behind dark inputs is invisible. */
-
-.twm-attr-editor__row {
-    padding: 0.15em 0.25em;
-    border-left: 3px solid transparent;
-    border-radius: 2px;
-    transition: background 120ms, border-color 120ms;
+ * No transition of its own: `.twm-managed-window` already transitions `opacity`
+ * over 0.2s for the minimize animation, so the fade comes for free — and adding
+ * a second, faster one here would make the same property animate at two speeds
+ * depending on which class won. Translucent, not ghostly: the window is still
+ * the thing being aimed, and at 0.5 the pane underneath reads through it while
+ * its title bar stays legible. */
+.twm-managed-window--detached {
+    opacity: 0.5;
 }
-/* Inherited / matching state — same green as the Public API card's
- * "matches archetype" rows, so the colour grammar reads consistently
- * across attributes and methods: green = matches the archetype,
- * orange = overrides, neutral = no parent involved. */
-.twm-attr-editor__row--inherited {
-    background: rgba(96, 192, 96, 0.15);
-    border-left-color: #60c060;
+
+/* A title-bar button the WM has suppressed for the window's current state — the
+ * minimize button on a maximised window it promoted out of a tile. `!important`
+ * because `button.twm-managed-window__btn` sets `display: flex` and an author
+ * declaration of `display` defeats the `hidden` attribute outright; a class
+ * that loses the specificity tie is a control that stays on screen. */
+.twm-managed-window__btn--suppressed { display: none !important; }
+
+
+/* C6. An extra titlebar button (the table cogwheel), sized like the built-ins.
+ * R7. And the maximize button, when a consumer has given it a glyph instead of
+ * the built-in square — the WM does, because for a window it lifted out of a
+ * tile that button means "back to tile". A Material Symbol renders at its
+ * `font-size` and Google's own sheet says 24px, which is three times the height
+ * of a 20px title-bar button: the rule has to be a DESCENDANT selector like
+ * this one to out-specify it, and a class on the glyph element itself would
+ * quietly lose. */
+.twm-managed-window__btn--custom .material-symbols-outlined,
+.twm-managed-window__btn--maximize .material-symbols-outlined {
+/* The eight handles' geometry. Without these the elements exist, are
+ * `position: absolute`, and have NO width, height or offset — so every window
+ * in every consumer is unresizable and nothing says why. Edges are 6px, corners
+ * 12px and sit above the edges, because a corner that loses to an edge makes
+ * diagonal resize a matter of luck. */
+.twm-managed-window__resize--n,
+.twm-managed-window__resize--s { left: 0; right: 0; height: 6px; cursor: ns-resize; }
+
+.twm-managed-window__resize--n { top: -3px; }
+
+.twm-managed-window__resize--s { bottom: -3px; }
+
+.twm-managed-window__resize--e,
+.twm-managed-window__resize--w { top: 0; bottom: 0; width: 6px; cursor: ew-resize; }
+
+.twm-managed-window__resize--e { right: -3px; }
+
+.twm-managed-window__resize--w { left: -3px; }
+
+.twm-managed-window__resize--ne,
+.twm-managed-window__resize--nw,
+.twm-managed-window__resize--se,
+.twm-managed-window__resize--sw { width: 12px; height: 12px; z-index: calc(var(--z-sticky) + 1); }
+
+.twm-managed-window__resize--ne { top: -3px; right: -3px; cursor: nesw-resize; }
+
+.twm-managed-window__resize--nw { top: -3px; left: -3px; cursor: nwse-resize; }
+
+.twm-managed-window__resize--se { bottom: -3px; right: -3px; cursor: nwse-resize; }
+
+.twm-managed-window__resize--sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
+
+/* A maximised or snapped window is not resized by dragging its edges. */
+.twm-managed-window--maximized .twm-managed-window__resize { display: none; }
+
+
+/* C26. A LEADING GLYPH ON AN ACTION BUTTON — `openModal({actions:[{icon}]})`.
+ *
+ * Material Symbols is a FONT. It renders at `font-size`, which defaults to
+ * 24px, and the button's `min-height` does not constrain it — so without this
+ * the glyph overflows a 22px action button and the row reads as ragged. The
+ * declaration is written TWICE, once as a single class and once compounded
+ * with `.material-symbols-outlined`, because a consumer that loads Google's
+ * hosted stylesheet loads it AFTER this one: `.material-symbols-outlined
+ * {font-size:24px}` is a single class too, so it ties on specificity and wins
+ * on source order. The compound selector is what actually holds. */
+.twm-btn__glyph,
+.twm-btn__glyph.material-symbols-outlined {
+    font-size: var(--font-size-xl, 16px);
+    line-height: 1;
+    flex: 0 0 auto;
 }
-.twm-attr-editor__row--inherited input.twm-attr-editor__cell {
-    background: rgba(96, 192, 96, 0.08);
-    border-color: rgba(96, 192, 96, 0.40);
+
+.twm-btn__label { line-height: 1; }
+
+    /* R1. THE CONTAINING BLOCK A DRAGGED WINDOW ESCAPES INTO. A window promoted
+     * in place is contained to its leaf wrap (C21), which clips it; for the
+     * length of a drag the WM re-parents it here instead, so it can be carried
+     * across tile boundaries. Its `left`/`top` then resolve against this box,
+     * and without a `position` they would resolve against whatever positioned
+     * ancestor the embedder happens to have — usually `.twm-shell__main`, which
+     * is the same rectangle, and occasionally the page, which is not.
+     *
+     * `relative` and nothing else, for the reason `.twm-leaf` gives at length:
+     * `transform`, `filter` and `contain` would also capture the
+     * `position: fixed` dropdowns that deliberately escape their tile. */
+    position: relative;
+    /* C21. THE CONTAINING BLOCK for a window promoted in place. `overflow:
+     * hidden` below is what actually confines it; this is what makes its
+     * coordinates mean the pane rather than the page.
+     *
+     * `position: relative` and NOTHING ELSE — `transform`, `filter`, `contain`
+     * and `will-change` also create a containing block AND capture
+     * `position: fixed` descendants, which would clip the dropdowns DataTable
+     * opens on purpose. */
+    position: relative;
+/* NO `text-transform` HERE, and the absence is the decision. This element used
+ * to be lower-cased, which reads as a house style until you notice whose text
+ * it is: the embedder's. `tile_renderer` puts a content factory's `title` in
+ * here, and in a data application that is a record's display name — typed by a
+ * user who capitalised "Customer Orders" on purpose. A framework may style its
+ * own chrome however it likes; it may not rewrite its embedder's data on the
+ * way to the screen. `.twm-leaf__tab-label` shows the same strings and lost the
+ * same rule for the same reason. */
+/* C19. The tile's own glyph, left of the title, so a pane and the floating
+ * window it promotes into look like the same thing — `.twm-managed-window__icon`
+ * has always drawn one. Sized to the BUTTONS at the other end of the strip
+ * rather than to the title, because those are the other icons in this bar.
+ *
+ * AND THE GLYPH HAS TO BE TOLD, exactly as on `.twm-leaf__btn` below: Material
+ * Symbols is a font and renders at `font-size`, which defaults to 24px. Leaving
+ * this off does not give a slightly large icon — it gives one half again as
+ * tall as the 22px bar it sits in, which pushes the chrome open. */
+/* THE COMPOUND SELECTOR IS THE POINT.
+ *
+ * The element is `<span class="twm-leaf__icon material-symbols-outlined">`, and
+ * Google's own stylesheet — which every consumer loads, AFTER this one — sets
+ * `.material-symbols-outlined { font-size: 24px }`. Two single-class selectors
+ * tie on specificity, so the LAST one wins, and the last one is theirs. A rule
+ * written `.twm-leaf__icon { font-size: 14px }` therefore exists, is valid,
+ * looks correct in review, and does nothing.
+ *
+ * `.twm-leaf__icon.material-symbols-outlined` is two classes and wins outright.
+ * The same tie is why `.twm-panel-toggle-btn .material-symbols-outlined` works
+ * — a descendant selector is also two — and it is the fourth outing of the same
+ * defect family in this codebase: a rule for a class the other side already
+ * claims. */
+.twm-leaf__icon,
+.twm-leaf__icon.material-symbols-outlined {
+    flex: 0 0 auto;
+    font-size: 14px;
+    line-height: 1;
+    color: var(--text-muted);
+    font-variation-settings: 'opsz' 20, 'wght' 400;
 }
-.twm-attr-editor__row--inherited select.twm-attr-editor__cell {
-    /* Native <select> can't render a semi-transparent background
-     * reliably (the OS popup picks up the literal colour as its
-     * backing). Keep the dark base, signal "inherited" via border
-     * accent only. */
-    background-color: var(--ea-input-bg, #1e1e1e);
-    border-color: rgba(96, 192, 96, 0.60);
+
+/* Hidden, not empty, for a kind that has no glyph — the framework's own
+ * `panel:*` tiles are in nobody's taxonomy. The chrome is a flex row with a
+ * gap, and an empty span still takes its gap: the title would sit a glyph's
+ * width off the left margin with nothing in front of it. */
+.twm-leaf__icon[hidden] { display: none; }
+
+.twm-leaf__actions { display: inline-flex; gap: 2px; align-items: center; }
+
+/* C18. The embedder's own buttons, to the LEFT of the structural ones and
+ * separated from them — these act on the CONTENT, those act on the TILE. */
+.twm-leaf__actions--content {
+    margin-left: auto;
+    padding-right: var(--space-sm);
+    margin-right: var(--space-sm);
+    border-right: 1px solid var(--border-subtle);
 }
-.twm-attr-editor__row--overridden {
-    background: rgba(204, 120, 65, 0.22);
-    border-left-color: #d18138;
+
+.twm-leaf__actions--content[hidden] { display: none; }
+
+/* THE GLYPH HAS TO BE TOLD. Material Symbols ships at `font-size: 24px`, and
+ * the button is 18px square — so every icon overflowed its own button, the
+ * strip read as oversized next to a 22px chrome bar, and the buttons visually
+ * collided. `font-size` IS the glyph size for an icon font; `width`/`height` on
+ * the button does not constrain it. */
+.twm-leaf__btn .material-symbols-outlined {
+    font-size: 14px;
+    line-height: 1;
+    /* The variable-font axes the family exposes. At 14px the default optical
+     * size (24) draws strokes too heavy to read as a small control. */
+    font-variation-settings: 'opsz' 20, 'wght' 400;
 }
-.twm-attr-editor__row--overridden input.twm-attr-editor__cell {
-    background: rgba(204, 120, 65, 0.10);
-    border-color: rgba(209, 129, 56, 0.50);
-    color: #f0c189;
+
+.twm-leaf__btn:hover:not(: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. */
+.twm-leaf__btn--disabled,
+.twm-leaf__btn:disabled {
+    opacity: 0.35;
+    cursor: default;
 }
-.twm-attr-editor__row--overridden select.twm-attr-editor__cell {
-    background-color: var(--ea-input-bg, #1e1e1e);
-    border-color: rgba(209, 129, 56, 0.60);
-    color: #f0c189;
+
+/* 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
+ * height. So it is the same rule, with a second selector, rather than a second
+ * block that would drift from this one the first time either was touched.
+ * `.twm-window-tabbar` is always the `--top` variant (a window's chrome is its
+ * title bar, and the tabs go under it), so it appears in that block too. */
+.twm-leaf__tabbar,
+.twm-window-tabbar {
+    /* RESTORED. This block's DECLARATIONS were missing — the selector list
+     * opened a brace and the next rule's selectors were swallowed as its body,
+     * which also took `--hidden` down with it: a CSS parser recovers at the
+     * matching `}`, so BOTH rules were dead. `css/flexdesk.css` (the sheet
+     * `build.mjs` actually ships, mirrored by hand because `css_extract.py` is
+     * not in this repository) still carried them, which is why no consumer
+     * loading `dist/` ever saw it — and why nothing caught it. What a consumer
+     * loading `base.css` got was a tab strip with no height, no background and
+     * `flex-shrink: 1`, and a `--hidden` modifier that hid nothing. */
+    flex: 0 0 auto;
+    display: flex;
+    align-items: stretch;
+    height: 22px;
+    background: var(--surface-1);
+    border-top: 1px solid var(--border-default);
+    padding: 0 4px;
+    overflow: hidden;
+    user-select: none;
+    font-size: var(--font-size-xs);
 }
-/* R7 — variation-override flag treatments. These additively layer on
- * top of the inheritance grammar (above), so an `optional` inherited
- * row keeps its green background AND gets the optional border accent.
+.twm-leaf__tabbar--hidden,
+.twm-window-tabbar--hidden { display: none; }
+
+/* Lower-casing removed here too — a tab label is the same embedder-supplied
+ * title as `.twm-leaf__title`, just in the strip at the bottom of the leaf. */
+
+/* ══ C22. THE TOP TAB LAYOUT ═════════════════════════════════════════
  *
- *  disabled : the archetype declared the slot but turned it off. The
- *             row is greyed out to make clear it's not carried into
- *             descendants.
- *  forced   : variations can't override this slot. Cells appear
- *             non-editable; the lock icon (added by JS) signals why.
- *  optional : the value is a suggestion. Green border, NO fill — so
- *             it's visually distinct from `inherited` (green fill).
- *             Variations may override without warning.
- */
-.twm-attr-editor__row--disabled {
-    opacity: 0.55;
-    border-left-color: var(--ea-text-dim, #777);
-}
-.twm-attr-editor__row--forced {
-    border-left-color: #b48be0;        /* soft purple = locked */
+ * `tabLayout: 'top'` puts the strip BETWEEN the chrome and the body and draws
+ * it with `NotebookTabBar` — the editor's tab bar — instead of the spreadsheet
+ * strip above. The bar element is the same `.twm-leaf__tabbar`, so everything
+ * it already carries (the fixed height, `--hidden`, `flex: 0 0 auto`) still
+ * applies; this modifier only turns the strip the right way up.
+ *
+ * The border moves with it. A strip at the bottom of a tile is separated from
+ * the body above it by a top border; a strip at the top is separated from the
+ * body BELOW it by a bottom one, and keeping the top border as well would draw
+ * a second line a pixel under the chrome's own. */
+.twm-leaf__tabbar--top,
+.twm-window-tabbar {
+    border-top: none;
+    border-bottom: 1px solid var(--border-default);
+    /* The editor tabs are a touch taller than a 22px spreadsheet tab: they
+     * carry a glyph, a label and a close button on one line, and 22px leaves
+     * the close button touching the label's descenders. */
+    height: 26px;
+    padding: 0;
+    /* `overflow: hidden` on the bottom strip clips the horizontal scroll the
+     * tab list wants. The list scrolls itself (below); the BAR must not. */
+    overflow: visible;
 }
-.twm-attr-editor__row--forced input.twm-attr-editor__cell,
-.twm-attr-editor__row--forced select.twm-attr-editor__cell {
-    background-color: rgba(180, 139, 224, 0.08);
-    border-color: rgba(180, 139, 224, 0.40);
+
+/* `NotebookTabBar.mount()` assigns `className = 'tabs notebook-tabs'` to
+ * whatever container it is handed (`notebook_tab_bar.js:61`) — it does not add
+ * to it — which is why the renderer mounts it into a child of the bar rather
+ * than into the bar. The child is that container, and it fills the bar. */
+.twm-leaf__tabbar--top > .notebook-tabs,
+.twm-window-tabbar > .notebook-tabs { flex: 1 1 auto; min-width: 0; }
+
+/* A window's body is what the content mounts into, below the strip. It is
+ * the box `.twm-managed-window__content` used to be for a window with no
+ * tabs, so it carries the same three declarations — without them a grid
+ * inside a floated pane sizes to its rows rather than to the window and the
+ * strip is pushed off the bottom edge. */
+.twm-window-body { flex: 1 1 auto; min-height: 0; min-width: 0; }
+
+
+/* ══ NotebookTabBar ══════════════════════════════════════════════════
+ *
+ * A CLASS ONE SIDE KNOWS AND THE OTHER HAD NEVER HEARD OF — the fifth in this
+ * codebase and the first one found before it shipped. `NotebookTabBar` has
+ * rendered `.tabs` / `.tab` / `.tab-icon` / `.twm-tab-title` / `.tab-dirty` /
+ * `.twm-tab-close` / `.nb-context-menu` since it was extracted, and NOT ONE of
+ * those selectors existed in any FlexDesk stylesheet: the component imports
+ * cleanly, mounts without error, is fully interactive, and draws as a row of
+ * unstyled inline text with a `×` after each label. Nothing throws and no test
+ * can see it, which is the signature of the whole family.
+ *
+ * The visual language is the tile chrome's, not an editor's: `--surface-1` bar,
+ * `--surface-0` active tab so it reads as continuous with the body under it,
+ * square corners, `--font-size-xs`. A tab bar drawn in one house style with the
+ * chrome an inch above it in another is how a pane stops looking like one
+ * object. */
+.tabs.notebook-tabs {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+    min-width: 0;
+    background: var(--surface-1);
+    user-select: none;
+    font-size: var(--font-size-xs);
+    /* SCROLL, DO NOT WRAP OR SHRINK. The tabs keep their width and the strip
+     * scrolls under them — a tab that shrinks to nothing as you open the tenth
+     * one is a tab you cannot read or aim at. The scrollbar itself is hidden:
+     * it is a 26px strip, and a horizontal bar in it would eat a third of the
+     * label. Wheel and drag still scroll it, and DragReorder auto-scrolls the
+     * edges while a tab is being dragged (`drag_reorder.js:_autoScrollEdge`). */
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
 }
-.twm-attr-editor__row--optional {
-    border-left-color: #60c060;        /* same green as inherited, ... */
-    background: transparent;           /* ...but no fill — that's the cue */
+
+.tabs.notebook-tabs::-webkit-scrollbar { display: none; }
+
+.notebook-tabs > .tab {
+    position: relative;
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    max-width: 200px;
+    padding: 0 var(--space-sm);
+    background: var(--surface-1);
+    color: var(--text-muted);
+    border: none;
+    border-right: 1px solid var(--border-subtle);
+    cursor: pointer;
+    line-height: 1;
+    white-space: nowrap;
 }
-.twm-attr-editor__row--optional input.twm-attr-editor__cell,
-.twm-attr-editor__row--optional select.twm-attr-editor__cell {
-    background-color: var(--ea-input-bg, #1e1e1e);
-    border-color: rgba(96, 192, 96, 0.50);
+
+.notebook-tabs > .tab:hover { background: var(--surface-2); color: var(--text-primary); }
+
+/* The active tab is the body's colour and loses the line under it, so the tab
+ * and the pane it shows read as one surface. The accent sits on TOP — the edge
+ * furthest from the body — for the same reason a browser puts it there: it
+ * marks the tab, not the boundary. */
+.notebook-tabs > .tab.active {
+    background: var(--surface-0);
+    color: var(--text-bright);
 }
-.twm-attr-editor__attention {
-    /* Positioned in the row's left gutter so it doesn't push the
-     * cells. The row already has `position: relative`. */
+
+.notebook-tabs > .tab.active::before {
+    content: '';
     position: absolute;
-    left: -14px;
-    top: 50%;
-    transform: translateY(-50%);
-    color: #d18138;            /* solarized orange */
-    font-size: 0.85em;
+    inset: 0 0 auto 0;
+    height: 2px;
     pointer-events: none;
-}
-.twm-attr-editor__revert {
-    /* Floats over the right edge of the row, outside the column grid.
-     * Sits ABOVE the trailing remove-button gutter that sortable_list
-     * draws, so it stays visible. */
-    position: absolute;
-    right: 24px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: transparent;
-    border: 0;
-    color: var(--ea-text-muted, #888);
-    cursor: pointer;
-    padding: 0.15em 0.35em;
-    font-size: 1.1em;
-    z-index: 1;
-}
-.twm-attr-editor__revert:hover {
-    color: #d18138;
+    background: var(--accent-bright, #1683c4);
 }
 
-/* ── from notebook.css ───────────────────────── */
-.twm-plot-no-data { padding: var(--space-2xl); text-align: center; color: var(--text-muted); font-size: var(--font-size-md); }
-/* ─── Autocomplete field — notebook variant ──────────────── */
+/* A PREVIEW tab — opened by a single click and replaced by the next one.
+ * Italic is the convention every editor uses for "this one is not staying". */
+.notebook-tabs > .tab.tab--preview { font-style: italic; }
 
-.twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper {
-    border: 1px solid #569cd6;
-    font-size: var(--font-size-sm);
-}
-.twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper:focus-within {
-    border-color: #79b8f8;
-    box-shadow: 0 0 3px rgba(86, 156, 214, 0.3);
+/* THE GLYPH HAS TO BE TOLD, and it has to be told in TWO selectors.
+ *
+ * `<span class="material-symbols-outlined tab-icon">` carries two classes, and
+ * Google's stylesheet — loaded by every consumer, AFTER this one — sets
+ * `.material-symbols-outlined { font-size: 24px }`. A single-class rule here
+ * ties on specificity and loses to whichever came last, which is theirs. The
+ * compound selector is two classes and wins outright. Fourth outing of this
+ * exact defect; it is why `.twm-leaf__icon` is written the same way. */
+.notebook-tabs .tab-icon,
+.notebook-tabs .tab-icon.material-symbols-outlined {
+    flex: 0 0 auto;
+    font-size: 14px;
+    line-height: 1;
+    font-variation-settings: 'opsz' 20, 'wght' 400;
 }
-.twm-autocomplete-field--notebook .twm-autocomplete-field__input {
-    font-family: 'Courier New', Courier, monospace;
-    color: var(--text-body);
-    font-size: var(--font-size-sm);
+
+.notebook-tabs .tab-icon[hidden] { display: none; }
+
+/* The label. NOT lower-cased and not capitalised: it is the embedder's own
+ * string — a record's display name, typed by a user who capitalised it on
+ * purpose — for the same reason `.twm-leaf__title` lost that rule.
+ *
+ * AND IT NEEDS ITS OWN `line-height`, WHICH IS THE FIX FOR CLIPPED DESCENDERS.
+ * `.tab` sets `line-height: 1` so the row's boxes stack predictably in a 26px
+ * strip; this span sets `overflow: hidden` for the ellipsis, which makes it a
+ * scroll container whose content box is exactly `1 × font-size` tall. Anything
+ * drawn below the baseline — the tail of a `g`, a `y`, a `p` — falls outside
+ * that box and is CLIPPED. It reads as a tab label with its bottom shaved off,
+ * which is precisely how it was reported ("fix the cut-off text in the tabs -
+ * cut off at bottom"), and it is invisible on any label that happens to have no
+ * descender in it.
+ *
+ * 1.45 is the smallest value that clears the descender at every size this strip
+ * is used at; the flex row still centres the span, so the tab's own height and
+ * every other box in it are unchanged. */
+.notebook-tabs .twm-tab-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    letter-spacing: 0.02em;
+    line-height: 1.45;
 }
-.twm-autocomplete-field--notebook .twm-autocomplete-field__helper {
-    display: none;
+
+/* Unsaved work. A dot rather than a `*`, and it takes the close button's slot
+ * rather than adding to the row — in most editors the two swap on hover, but a
+ * dot that MOVES the close button as it appears makes the button a target that
+ * shifts under the pointer. */
+.notebook-tabs .tab-dirty {
+    flex: 0 0 auto;
+    font-size: 9px;
+    line-height: 1;
+    color: var(--accent-bright, #1683c4);
 }
-/* ═══════════════════════════════════════════════════════════════════════════
-   Tree Item Badge — small status indicator on file tree items
-   ═══════════════════════════════════════════════════════════════════════════ */
 
-.twm-tree-item__badge {
+.notebook-tabs .twm-tab-close {
+    flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 16px;
-    height: 16px;
-    padding: 0 4px;
-    border-radius: var(--radius-lg);
-    font-size: 9px;
-    font-weight: 600;
-    flex-shrink: 0;
-    margin-left: auto;
+    width: 14px;
+    height: 14px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: inherit;
+    /* A `×` CHARACTER, not a Material Symbol — the component writes the glyph
+     * itself (`notebook_tab_bar.js:168`), so this one is sized by `font-size`
+     * on the button and there is no icon font to out-specify. */
+    font-size: 13px;
     line-height: 1;
+    opacity: 0.55;
+    cursor: pointer;
 }
-/* Status dot variant (smaller, no text) */
-.twm-tree-item__status-dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    flex-shrink: 0;
-    margin-left: auto;
+
+.notebook-tabs .twm-tab-close:hover {
+    opacity: 1;
+    background: var(--state-hover);
+    color: var(--text-bright);
 }
 
-/* ── from slide_out_panel.css ───────────────────────── */
-/* ─── SlideOutPanel ─────────────────────────────────────────────────────────
-   Inline slide-out config panel that overlays its host container from
-   the right edge. Host container must have position:relative; overflow:hidden.
-   ──────────────────────────────────────────────────────────────────────────── */
+/* ── Reordering ──────────────────────────────────────────────────────
+ * `DragReorder` puts `.dragging` on the tab under the pointer and inserts a
+ * `.twm-tab-drop-indicator` element at the position it would land
+ * (`drag_reorder.js:_start`, `_ensureIndicator`). Neither had a rule, so a
+ * drag looked exactly like a click that did nothing until the tab arrived
+ * somewhere else. */
+.notebook-tabs > .tab.dragging { opacity: 0.4; }
 
-/* Transparent click-catcher behind the panel. Hidden by default
- * via `visibility: hidden` (not just display) so it's removed
- * from the accessibility tree + paint pass when the panel is
- * closed; the `--visible` modifier flips it back on. */
-.twm-slide-out-panel__backdrop {
-    position: absolute;
-    inset: 0;
-    z-index: 999;
-    visibility: hidden;
+.twm-tab-drop-indicator {
+    flex: 0 0 auto;
+    align-self: stretch;
+    width: 2px;
+    background: var(--accent-bright, #1683c4);
     pointer-events: none;
 }
-.twm-slide-out-panel__backdrop--visible {
-    visibility: visible;
-    pointer-events: auto;
+
+/* ── C33. TWO MORE OF THE CLASS-ONE-SIDE-KNOWS FAMILY ────────────────
+ *
+ * Both of these have been set by JavaScript since the day they were
+ * written and defined by NO stylesheet in this repository, so a
+ * cross-pane drop has never drawn anything anywhere:
+ *
+ *   `.notebook-tabs--drop-target`            `notebook_tab_bar.js`,
+ *                                            `#onStripDragOver`
+ *   `.notebook-editor-container--drop-target`  `../editor/editor_pane.js`,
+ *                                            its own `dragover`
+ *
+ * They are fixed here rather than left alone because C33 adds a THIRD
+ * `--drop-target` affordance beside them (`.twm-leaf__tabbar--drop-target`,
+ * in `css/overrides.css` with the other `.twm-leaf*` rules), and shipping a
+ * live one next to two dead ones is how the family keeps growing. Same
+ * declarations as the tile strip's, deliberately: three surfaces that mean
+ * "let go here and this list takes it" should look like one thing.
+ *
+ * Neither direction of this defect is caught by tooling. `tools/css_check.mjs`
+ * in the Tables consumer greps the JS side — a class the JS sets that no sheet
+ * defines — but only for `tbl-`-prefixed names against that repository's own
+ * stylesheet, so nothing here is in its scope at all. */
+.notebook-tabs--drop-target,
+.notebook-editor-container--drop-target {
+    background: color-mix(in srgb, var(--accent-bright, #1683c4) 18%, transparent);
+    box-shadow: inset 0 0 0 1px var(--accent-bright, #1683c4);
 }
-/* Panel container. When closed it sits at translateX(100%) off the
- * right edge of the host; `visibility: hidden` on the closed state
- * stops the slid-off panel from intercepting clicks or leaking
- * paint artifacts at the right edge of the workspace. */
-.twm-slide-out-panel {
-    position: absolute;
-    right: 0;
-    top: 0;
-    height: 100%;
-    z-index: var(--z-modal);
-    display: flex;
-    flex-direction: column;
 
-    background: #212121;
-    border-left: 1px solid #333;
-    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.35);
+/* ── The tab bar's own context menu ──────────────────────────────────
+ * Reached only by a consumer that lets the component open it — the tile
+ * renderer suppresses it in favour of the WM's single tab menu, so these rules
+ * are for `EditorPane` and anyone else mounting a `NotebookTabBar` directly.
+ * Same geometry and the same tokens as `.twm-context-menu`, because two
+ * context menus in one application that disagree about their own padding is
+ * how a UI stops feeling assembled. */
+.nb-context-menu {
+    position: fixed;
+    z-index: 10050;
+    min-width: 180px;
+    padding: var(--space-xxs) 0;
+    background: var(--surface-2);
+    border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
+    font-size: var(--font-size-xs);
+    /* Opened hidden and revealed on the next frame (`#showContextMenu` adds
+     * `.visible` in a rAF) so it can fade rather than snap — the same
+     * open-then-reveal the collapsible primitive uses, and the same reason its
+     * `.visible` rule had to exist before anything worked. */
+    opacity: 0;
+    transition: opacity 90ms ease-out;
+}
 
-    min-width: 400px;
+.nb-context-menu.visible { opacity: 1; }
 
-    transform: translateX(100%);
-    transition: transform 200ms ease-out, visibility 0s linear 200ms;
-    visibility: hidden;
-}
-.twm-slide-out-panel--open {
-    transform: translateX(0);
-    visibility: visible;
-    transition: transform 200ms ease-out, visibility 0s linear 0s;
-}
-/* Header bar */
-.twm-slide-out-panel__header {
+.nb-context-menu__item {
     display: flex;
     align-items: center;
     gap: var(--space-sm);
-    padding: var(--space-md) 8px 8px 12px;
-    border-bottom: 1px solid var(--border-strong);
-    flex-shrink: 0;
-    user-select: none;
-}
-.twm-slide-out-panel__title {
-    flex: 1;
-    font-size: var(--font-size-sm);
-    font-weight: 600;
-    color: var(--text-secondary);
+    width: 100%;
+    padding: var(--space-xs) var(--space-md);
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    text-align: left;
+    cursor: pointer;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
-.twm-slide-out-panel__close {
-    flex-shrink: 0;
-    margin-left: auto;
+
+.nb-context-menu__item:hover { background: var(--state-hover); }
+
+.nb-context-menu__item .material-symbols-outlined {
+    font-size: 14px;
+    line-height: 1;
+    color: var(--text-muted);
+    font-variation-settings: 'opsz' 20, 'wght' 400;
 }
-/* Scrollable body */
-.twm-slide-out-panel__body {
-    flex: 1;
-    overflow-y: auto;
-    padding: var(--space-md);
+
+.nb-context-menu__item--danger { color: var(--color-danger, #c74e4e); }
+
+.nb-context-menu__item--danger .material-symbols-outlined { color: inherit; }
+
+/* DISABLED MEANS DISABLED. `.twm-context-menu-item.disabled` was the third
+ * instance of this family — the JS had always set the class, no rule existed,
+ * and a disabled item rendered at full opacity with a pointer cursor and did
+ * nothing when clicked. `#showContextMenu` binds no listener on a disabled
+ * item, so `pointer-events: none` is belt to that braces. */
+.nb-context-menu__item--disabled {
+    opacity: 0.4;
+    cursor: default;
+    pointer-events: none;
 }
 
-/* ── from plot_config.css ───────────────────────── */
-.twm-btn-icon {
-  background: transparent;
-  border: none;
-  color: #8a8f98;
-  cursor: pointer;
-  padding: var(--space-xs);
-  border-radius: var(--radius-sm);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: color var(--transition-normal), background-color var(--transition-normal);
+.nb-context-menu__shortcut {
+    margin-left: auto;
+    padding-left: var(--space-lg);
+    color: var(--text-dim);
 }
-.twm-btn-icon:hover {
-  color: var(--text-bright);
-  background-color: rgba(255, 255, 255, 0.1);
+
+.nb-context-menu__separator {
+    height: 1px;
+    margin: var(--space-xxs) 0;
+    background: var(--border-subtle);
 }
 
-/* ── from tiling/host.css ───────────────────────── */
-@media (max-width: 900px) {
-.twm-top-nav__label { display: none; }
-.twm-top-nav__btn { padding: 0 10px; }
+/* 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. */
+.twm-root { position: relative; }
+
+/* ── C31. Content zoom ─────────────────────────────────────────────
+   Applied by zoom.js as `--twm-zoom` plus `.twm-zoomed` on the shell
+   ROOT. The class is only set away from 100%, so an unzoomed shell has
+   no `zoom` declaration anywhere: `zoom: 1` is not a no-op, it still
+   establishes a scaled coordinate space.
+
+   CONTENT SURFACES ONLY. A tile's body and a promoted window's content
+   sit below every piece of geometry the window drag, resize and C15
+   snap probe read. The root, a leaf wrap, tile chrome, tab bars and a
+   window frame are deliberately absent: a contained window lives in a
+   leaf wrap and is re-parented to the root while it is dragged, so
+   zooming either would drift every drag by the zoom factor. See zoom.js. */
+.twm-zoomed .twm-leaf__body,
+.twm-zoomed .twm-window-content { zoom: var(--twm-zoom, 1); }
+
+/* The control. Sized against the bar it sits in, not the zoom — it is
+   chrome, and it is the one thing that must stay reachable at 200%. */
+.twm-zoom {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 100%;
+    padding: 0 8px;
+    border-left: 1px solid var(--surface-3);
+    user-select: none;
+}
+.twm-zoom__step {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 15px;
+    height: 15px;
+    padding: 0;
+    border: none;
+    border-radius: 2px;
+    background: none;
+    color: var(--text-muted);
+    font: inherit;
+    font-size: var(--font-size-sm);
+    line-height: 1;
+    cursor: pointer;
+}
+.twm-zoom__step:hover { background: var(--surface-3); color: var(--text-primary); }
+/* A short track on purpose: it sits between two buttons in a thin bar,
+   and the readout — not the thumb position — answers "where am I". */
+.twm-zoom__slider {
+    width: 78px;
+    height: 12px;
+    margin: 0;
+    cursor: pointer;
+    accent-color: var(--accent-bright);
+}
+/* Tabular numerals, so the readout does not jiggle between 95% and 100%
+   while the thumb moves. */
+.twm-zoom__value {
+    min-width: 34px;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    cursor: pointer;
 }
+.twm-zoom__value:hover { color: var(--text-primary); }