flexdesk 0.1.0

package/css/overrides.css

@@ -0,0 +1,2349 @@
+/* twm — framework rules that must WIN. Loads LAST: these deliberately beat a vendor or embedder rule they tie with on specificity.
+ *
+ * GENERATED by scripts/css_extract.py — do not edit by hand.
+ */
+
+/* ── from ecoagent_extra_modes.css ───────────────────────── */
+/* SortableList — EcoAgent tiling shell skin. Narrower row padding,
+ * darker recessed bg, square corners. Scoped to .twm-page-shell so the
+ * notebook test editor and other contexts keep their original look. */
+.twm-page-shell .twm-sortable-list { gap: 4px; }
+.twm-page-shell .twm-sortable-list__items { gap: 0; }
+.twm-page-shell .twm-sortable-list__row {
+    background: var(--ea-bg-content, #212121);
+    border: 1px solid var(--ea-border, #333);
+    border-radius: 0;
+    border-bottom-width: 0;
+    padding: 3px 6px;
+    gap: 6px;
+}
+.twm-page-shell .twm-sortable-list__row:last-child {
+    border-bottom-width: 1px;
+}
+.twm-page-shell .twm-sortable-list__row:hover { border-color: var(--ea-border, #555); }
+.twm-page-shell .twm-sortable-list__handle { padding: 0; opacity: 0.5; }
+.twm-page-shell .twm-sortable-list__remove { padding: 2px; border-radius: 0; }
+.twm-page-shell .twm-sortable-list__add {
+    margin-top: 4px;
+    border-radius: 0;
+    border-color: var(--ea-border, #333);
+    background: var(--ea-bg-content, #212121);
+    padding: 4px 8px;
+    font-size: 11px;
+}
+.twm-page-shell .twm-sortable-list__empty {
+    border-radius: 0;
+    border-color: var(--ea-border, #333);
+    background: transparent;
+    padding: 8px;
+    font-size: 11px;
+}
+.twm-page-shell .twm-sortable-list__input {
+    border-radius: 0;
+    background: var(--ea-bg-well, #0d0d0d);
+    border-color: var(--ea-border, #333);
+    padding: 3px 6px;
+}
+.twm-entity-header__spacer { flex: 1; }
+/* Inline field in the detail header (sector tab's country picker,
+ * agent tab's role badges, etc.). Density-pass v3: aligned to the
+ * shared `--ea-row-h` height so every control in every tab header
+ * is exactly the same vertical size — no per-page drift between
+ * sector / agent / market / scenario headers. */
+.twm-entity-header__field {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ea-pad-tight);
+    font-size: 10.5px;
+    color: var(--ea-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-left: var(--ea-pad-snug);
+}
+.twm-entity-header__field span { line-height: 1; }
+.twm-entity-header__select {
+    background: var(--ea-bg-well);
+    color: var(--ea-text);
+    border: 1px solid var(--ea-border);
+    border-radius: 2px;
+    padding: 0 var(--ea-pad-snug);
+    height: var(--ea-row-h);
+    font-size: var(--ea-font-body);
+    text-transform: none;
+    letter-spacing: 0;
+    min-width: 110px;
+    line-height: 1;
+}
+.twm-entity-header__select:focus {
+    outline: none;
+    border-color: var(--ea-accent);
+}
+.twm-entity-header__currency {
+    color: var(--ea-text-muted);
+    font-size: var(--ea-font-body);
+    margin-left: var(--ea-pad-snug);
+    font-variant-numeric: tabular-nums;
+}
+/* ─── Buttons ──────────────────────────────────────────────────────
+ * One canonical button across the app:
+ *   - Single height (--ea-row-h, 18 px) so toolbars line up with
+ *     table rows and chrome strips.
+ *   - 2 px radius — squared off, "tool" feel rather than "website".
+ *   - Variants change colour, not size: --primary, --danger, --icon.
+ *   - --small only nudges font/padding; height stays the row token.
+ */
+.twm-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ea-pad-tight);
+    background: #2e2e2e;
+    color: var(--ea-text);
+    border: 1px solid var(--ea-border);
+    padding: 0 var(--ea-pad-snug);
+    border-radius: 2px;
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--ea-font-body);
+    line-height: 1;
+    min-height: var(--ea-row-h);
+    white-space: nowrap;
+    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+.twm-btn:hover:not(:disabled) {
+    background: #3a3a3a;
+    border-color: #444;
+}
+.twm-btn:active:not(:disabled) { background: #262626; }
+.twm-btn:focus-visible {
+    outline: none;
+    border-color: var(--ea-accent);
+    box-shadow: 0 0 0 1px var(--ea-accent);
+}
+.twm-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.twm-btn--primary {
+    background: var(--ea-accent);
+    border-color: var(--ea-accent);
+    color: var(--text-bright);
+}
+.twm-btn--primary:hover:not(:disabled) {
+    background: #1486cf;
+    border-color: #1486cf;
+}
+/* Context menu separator (matches Ecosim's .twm-context-menu look). */
+.twm-context-menu__separator {
+    height: 1px;
+    background: var(--surface-3);
+    margin: var(--space-xs) 0;
+}
+/* Project sidebar — the sidebar only carries a single "Files"
+ * section, and the redundant collapsible header above the tree was
+ * pure chrome with no information. Hide it so the tree starts at
+ * the top of the panel. The section box still wraps the tree (so
+ * `.sidebar-body--accordion`'s flex layout keeps working) — only
+ * its header is hidden.
+ *
+ * NOTE: `buildBrowserPanel` renders the section box with class
+ * `tree-category dynamic-sheet-section` (not `collapsible-box`); an
+ * earlier attempt used the wrong parent class and didn't take. */
+[data-panel-content="project"] .twm-tree-category > .twm-collapsible-header {
+    display: none !important;
+}
+[data-panel-content="project"] .twm-tree-category > .twm-collapsible-content {
+    /* Force-visible since the toggle header is gone — would
+     * otherwise stay collapsed if persisted state said so. */
+    display: block !important;
+    visibility: visible !important;
+}
+[data-panel-content="project"] .twm-tree-category {
+    border: none;
+    margin: 0;
+}
+/* Danger / icon-only variants */
+.twm-btn--danger {
+    background: #4a2424;
+    border-color: #6a2e2e;
+    color: #e8b0b0;
+}
+.twm-btn--danger:hover:not(:disabled) {
+    background: #6a2e2e;
+    color: var(--text-bright);
+}
+/* ════════════════════════════════════════════════════════════════════
+ * ManagedWindow modal — TUI / console input-mask aesthetic.
+ *
+ * Reads as three deliberate horizontal zones:
+ *   ┌─ title strip (chrome bg, marker + uppercase title, 26 px) ────┐
+ *   │  body (content bg, fielded form: label : input grid)          │
+ *   └─ action strip (chrome bg, buttons right-aligned, 32 px) ──────┘
+ *
+ * Outer frame: 1 px hairline + 1 px inner accent line via box-shadow
+ * inset, giving it a Borland-drawn-box feel without literal 2px borders.
+ * ════════════════════════════════════════════════════════════════════ */
+
+.twm-managed-window.twm-managed-window--modal {
+    background: var(--ea-bg-content);
+    border: 1px solid #4a4a4a;
+    border-radius: 0;
+    box-shadow:
+        0 1px 0 rgba(255, 255, 255, 0.04) inset,
+        0 0 0 1px rgba(0, 0, 0, 0.6),
+        0 18px 48px rgba(0, 0, 0, 0.55),
+        0 4px 16px rgba(0, 0, 0, 0.45);
+    overflow: hidden;
+    color: var(--ea-text);
+}
+/* Title strip — like the title bar of a Borland Turbo Vision dialog:
+ * solid dark band, title in bold uppercase with a small accent marker
+ * (▸) so it reads as "active". The strip is taller than the body's
+ * usual 18 px row to feel like a band, not a line. */
+.twm-managed-window--modal .twm-managed-window__topbar {
+    background:
+        linear-gradient(180deg,
+            rgba(255, 255, 255, 0.025) 0%,
+            rgba(0, 0, 0, 0)            70%),
+        var(--ea-bg-chrome);
+    border-bottom: 1px solid #4a4a4a;
+    border-radius: 0;
+    min-height: 26px;
+    padding: 0 var(--ea-pad-loose) 0 calc(var(--ea-pad-loose) - 4px);
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
+}
+.twm-managed-window--modal .twm-managed-window__icon {
+    color: var(--ea-accent);
+    font-size: 14px;
+    margin-right: 6px;
+}
+.twm-managed-window--modal .twm-managed-window__title {
+    color: var(--ea-text);
+    font-size: var(--ea-font-body);
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+.twm-managed-window--modal .twm-managed-window__title::before {
+    content: '▸ ';
+    color: var(--ea-accent);
+    margin-right: 2px;
+}
+.twm-managed-window--modal .twm-managed-window__btn--close {
+    width: 22px;
+    height: 22px;
+    color: var(--ea-text-muted);
+    background: transparent;
+    border-radius: 0;
+}
+.twm-managed-window--modal .twm-managed-window__btn--close:hover {
+    background: #b03a3a;
+    color: #fff;
+}
+/* Content area — drop the host padding so the body host controls its
+ * own zones (form rows + flush-bottom action strip). */
+.twm-managed-window--modal .twm-managed-window__content {
+    background: var(--ea-bg-content);
+    padding: 0;
+    overflow: auto;
+}
+.twm-managed-window--modal .twm-modal__body-host {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+}
+/* Form sits inside the body host as a flex column so the actions row
+ * gets pushed to the bottom via margin-top:auto. */
+.twm-managed-window--modal .twm-modal__form {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    padding: 0;
+}
+/* Field rows get inset margins so the action strip can run edge-to-edge
+ * as a true bottom band. */
+.twm-managed-window--modal .twm-modal__form > .twm-modal__row,
+.twm-managed-window--modal .twm-modal__form > .twm-modal__section,
+.twm-managed-window--modal .twm-modal__form > .twm-modal__error,
+.twm-managed-window--modal .twm-modal__body {
+    margin-left: 14px;
+    margin-right: 14px;
+}
+.twm-managed-window--modal .twm-modal__form > .twm-modal__row:first-of-type,
+.twm-managed-window--modal .twm-modal__form > .twm-modal__section:first-child,
+.twm-managed-window--modal .twm-modal__body:first-child {
+    margin-top: 14px;
+}
+/* Rich-content body (openModal). Fills the available height between
+ * the title strip and the action footer; the caller's content sits
+ * inside and inherits the scroll. */
+.twm-managed-window--modal .twm-modal__body--rich {
+    margin: 0 14px 0;
+    padding: 0;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+.twm-managed-window--modal .twm-modal__body--rich > * {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+/* Fielded input mask: label right-aligned with a colon suffix, input
+ * occupying the remaining width. Mirrors how curses/dialog renders a
+ * form — labels read down the left edge, values down the right. */
+.twm-managed-window--modal .twm-modal__row {
+    display: grid;
+    grid-template-columns: 130px 1fr;
+    align-items: center;
+    column-gap: 10px;
+    row-gap: 0;
+    margin-bottom: 10px;
+}
+.twm-managed-window--modal .twm-modal__row--multiline {
+    align-items: start;
+}
+.twm-managed-window--modal .twm-modal__row > span:first-child {
+    color: var(--ea-text-dim);
+    font-size: var(--ea-font-body);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    text-align: right;
+    justify-self: end;
+    line-height: var(--ea-row-h);
+}
+/* Add the trailing colon via CSS so callers don't have to. Suppress on
+ * checkbox rows (their left cell is intentionally empty). */
+.twm-managed-window--modal .twm-modal__row > span:first-child:not(:empty)::after {
+    content: ' :';
+    color: var(--ea-text-muted);
+    margin-left: 1px;
+}
+.twm-managed-window--modal .twm-modal__row.twm-is-invalid > span:first-child {
+    color: #f0a8a8;
+}
+/* Input wells — deeper than the body so the field reads as "the place
+ * you type" against the panel. Sharp 1 px border with a 1 px inner
+ * shadow that simulates being inset. */
+.twm-managed-window--modal .twm-modal__row input[type="text"],
+.twm-managed-window--modal .twm-modal__row input[type="number"],
+.twm-managed-window--modal .twm-modal__row input[type="password"],
+.twm-managed-window--modal .twm-modal__row input[type="search"],
+.twm-managed-window--modal .twm-modal__row input[type="email"],
+.twm-managed-window--modal .twm-modal__row select,
+.twm-managed-window--modal .twm-modal__row textarea {
+    background: #0a0a0a;
+    color: var(--ea-text);
+    border: 1px solid #3a3a3a;
+    border-radius: 0;
+    /* Shared input padding (same token as `.ea-tin`). Was `0 8px` with a
+     * line-height fudge for vertical centering — real padding instead. */
+    padding: var(--ea-input-pad);
+    min-height: 22px;
+    line-height: normal;
+    font: inherit;
+    font-size: var(--ea-font-body);
+    width: 100%;
+    box-sizing: border-box;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) inset;
+}
+.twm-managed-window--modal .twm-modal__row textarea {
+    line-height: 1.45;
+    padding: 6px 8px;
+    min-height: calc(var(--ea-row-h) * 4);
+    resize: vertical;
+}
+.twm-managed-window--modal .twm-modal__row input:focus,
+.twm-managed-window--modal .twm-modal__row select:focus,
+.twm-managed-window--modal .twm-modal__row textarea:focus {
+    outline: none;
+    border-color: var(--ea-accent);
+    box-shadow:
+        0 1px 0 rgba(0, 0, 0, 0.4) inset,
+        0 0 0 1px var(--ea-accent);
+}
+.twm-managed-window--modal .twm-modal__row.twm-is-invalid input,
+.twm-managed-window--modal .twm-modal__row.twm-is-invalid select,
+.twm-managed-window--modal .twm-modal__row.twm-is-invalid textarea {
+    border-color: #b03a3a;
+}
+/* Hint + per-field error — small dim line that sits *under* the input,
+ * spanning only the input column so it aligns with the field above. */
+.twm-managed-window--modal .twm-modal__hint--field {
+    grid-column: 2;
+    color: var(--ea-text-muted);
+    font-size: 10.5px;
+    margin-top: 3px;
+    line-height: 1.4;
+    font-style: italic;
+}
+.twm-managed-window--modal .twm-modal__field-error {
+    grid-column: 2;
+    color: #f0a8a8;
+    font-size: 10.5px;
+    margin-top: 3px;
+    line-height: 1.4;
+}
+/* Section divider — small uppercase heading with a long em-dash style
+ * underline that runs to the right edge of the field column. Reads
+ * like the section breaks in a dialog/ncurses form. */
+.twm-managed-window--modal .twm-modal__section {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 14px 0 8px;
+    padding: 0;
+    font-size: 10.5px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--ea-accent);
+}
+.twm-managed-window--modal .twm-modal__section::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: #3a3a3a;
+}
+/* Inline checkbox row — left cell empty (kept for grid alignment), the
+ * checkbox + its own label live in column 2. */
+.twm-managed-window--modal .twm-modal__check {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--ea-text);
+}
+.twm-managed-window--modal .twm-modal__check input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    margin: 0;
+    accent-color: var(--ea-accent);
+}
+/* Combobox = input + datalist + a small "↳ will create X" hint. The
+ * hint sits below the input, dim accent color. */
+.twm-managed-window--modal .twm-combobox {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+.twm-managed-window--modal .twm-combobox__hint {
+    font-size: 10.5px;
+    color: var(--ea-accent);
+    font-style: italic;
+}
+/* Action strip — true footer band, flush against the modal edges,
+ * darker chrome bg, top border + 1px highlight above. Right-aligned
+ * buttons, primary stays rightmost. */
+.twm-managed-window--modal .twm-modal__actions {
+    margin-top: auto;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 6px;
+    background: var(--ea-bg-chrome);
+    border-top: 1px solid #4a4a4a;
+    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.03) inset;
+    padding: 6px 14px;
+    min-height: 32px;
+}
+.twm-managed-window--modal .twm-modal__actions .twm-btn {
+    border-radius: 0;
+    min-height: 22px;
+    padding: 0 14px;
+    font-size: var(--ea-font-body);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.twm-managed-window--modal .twm-modal__actions .twm-btn--primary {
+    background: var(--ea-accent);
+    border-color: var(--ea-accent);
+    color: #fff;
+    font-weight: 600;
+}
+.twm-managed-window--modal .twm-modal__actions .twm-btn--primary:hover:not(:disabled) {
+    background: #1683c4;
+    border-color: #1683c4;
+}
+.twm-managed-window--modal .twm-modal__actions .twm-btn--danger {
+    background: #8b2a2a;
+    border-color: #8b2a2a;
+    color: #fff;
+}
+.twm-managed-window--modal .twm-modal__actions .twm-btn--danger:hover:not(:disabled) {
+    background: #a13434;
+    border-color: #a13434;
+}
+/* openConfirm uses .twm-modal__body for the message paragraph. */
+.twm-managed-window--modal .twm-modal__body {
+    padding: 0;
+    line-height: 1.5;
+    color: var(--ea-text);
+    flex: 1 1 auto;
+}
+/* Form-level error banner — left accent stripe, dim red panel. */
+.twm-managed-window--modal .twm-modal__error {
+    margin-top: 8px;
+    padding: 6px 10px;
+    background: rgba(176, 58, 58, 0.12);
+    color: #f0a8a8;
+    border: 1px solid #6a2828;
+    border-left: 3px solid #b03a3a;
+    font-size: 10.5px;
+    line-height: 1.4;
+}
+.twm-modal__form,
+.twm-modal__body {
+    padding: var(--ea-pad-loose);
+    overflow: auto;
+}
+.twm-modal__row {
+    display: grid;
+    grid-template-columns: minmax(120px, 32%) 1fr;
+    align-items: center;
+    gap: var(--ea-pad-loose);
+    margin-bottom: var(--ea-pad-snug);
+    font-size: var(--ea-font-body);
+    color: var(--ea-text);
+}
+.twm-modal__row--multiline {
+    align-items: start;
+}
+.twm-modal__row > span {
+    color: var(--ea-text-dim);
+    font-size: var(--ea-font-body);
+    padding-top: 1px;
+}
+.twm-modal__row input[type="text"],
+.twm-modal__row input[type="number"],
+.twm-modal__row input[type="password"],
+.twm-modal__row input[type="search"],
+.twm-modal__row input[type="email"],
+.twm-modal__row select,
+.twm-modal__row textarea {
+    background: var(--ea-bg-well);
+    color: var(--ea-text);
+    border: 1px solid var(--ea-border);
+    padding: 0 var(--ea-pad-snug);
+    border-radius: 0;
+    font: inherit;
+    font-size: var(--ea-font-body);
+    width: 100%;
+    box-sizing: border-box;
+}
+.twm-modal__row textarea {
+    padding: var(--ea-pad-snug);
+    min-height: calc(var(--ea-row-h) * 3);
+    line-height: 1.45;
+    resize: vertical;
+    font-family: inherit;
+}
+.twm-modal__row input:focus,
+.twm-modal__row select:focus,
+.twm-modal__row textarea:focus {
+    outline: none;
+    border-color: var(--ea-accent);
+    box-shadow: 0 0 0 1px var(--ea-accent);
+}
+.twm-modal__row.twm-is-invalid input,
+.twm-modal__row.twm-is-invalid select,
+.twm-modal__row.twm-is-invalid textarea {
+    border-color: #b03a3a;
+}
+/* Per-field help text — small dim line that sits under the row,
+ * spanning only the input column so it aligns with the field. */
+.twm-modal__hint--field {
+    grid-column: 2;
+    color: var(--ea-text-dim);
+    font-size: var(--ea-font-small, 11px);
+    margin-top: 2px;
+    margin-bottom: var(--ea-pad-snug);
+    line-height: 1.4;
+}
+.twm-modal__field-error {
+    grid-column: 2;
+    color: #f0a8a8;
+    font-size: var(--ea-font-small, 11px);
+    margin-top: 2px;
+    margin-bottom: var(--ea-pad-snug);
+    line-height: 1.4;
+}
+/* Section divider — small uppercase label with a thin top border, used
+ * to group fields inside a longer form. */
+.twm-modal__section {
+    grid-column: 1 / -1;
+    margin: var(--ea-pad-loose) 0 var(--ea-pad-snug);
+    padding-top: var(--ea-pad-snug);
+    border-top: 1px solid var(--ea-border);
+    font-size: var(--ea-font-small, 11px);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--ea-text-muted);
+}
+.twm-modal__section:first-child {
+    margin-top: 0;
+    padding-top: 0;
+    border-top: none;
+}
+/* Inline checkbox — label sits on the right of the box so the row
+ * reads naturally. The empty <span> in column 1 keeps grid alignment
+ * with text-input rows. */
+.twm-modal__check {
+    display: flex;
+    align-items: center;
+    gap: var(--ea-pad-snug);
+    color: var(--ea-text);
+}
+.twm-modal__check input[type="checkbox"] {
+    width: 14px;
+    height: 14px;
+    margin: 0;
+    accent-color: var(--ea-accent);
+}
+/* Dependent-property pick-or-create — a type-ahead combobox. The user
+   picks an existing option or types a new value (created on submit).
+   With no options it's just a text field — the "nothing defined yet"
+   case needs no special handling. */
+.twm-combobox {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+.twm-combobox input { width: 100%; box-sizing: border-box; }
+.twm-combobox__hint {
+    font-size: var(--ea-font-small, 11px);
+    color: var(--ea-accent);
+}
+.twm-modal__actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--ea-pad-snug);
+    background: var(--ea-bg-chrome);
+}
+.twm-modal__actions .twm-btn {
+    border-radius: 0;
+    min-height: calc(var(--ea-row-h) + 4px);
+    padding: 0 var(--ea-pad-loose);
+}
+.twm-modal__error {
+    margin: 0 var(--ea-pad-loose) var(--ea-pad-snug);
+    padding: var(--ea-pad-snug) var(--ea-pad-loose);
+    border-radius: 0;
+    background: #3a1f1f;
+    color: #f0a8a8;
+    border: 1px solid #5a2a2a;
+    font-size: var(--ea-font-body);
+}
+.twm-modal__body {
+    padding: var(--ea-pad-loose);
+}
+.twm-slide-out-panel__body .twm-autocomplete-field input,
+.twm-slide-out-panel__body .twm-autocomplete-field select,
+.twm-slide-out-panel__body .twm-autocomplete-field button {
+    height: var(--ea-row-h);
+    min-height: var(--ea-row-h);
+    font-size: var(--ea-font-body);
+    padding: 0 var(--ea-pad-snug);
+    background: var(--ea-bg-well);
+    color: var(--ea-text);
+    border: 1px solid var(--ea-border);
+    border-radius: 2px;
+    line-height: 1;
+}
+/* ══════════════════════════════════════════════════════════════════════
+ * SFC mode overview — dense two-table layout (Sectors + Flows always
+ * visible). Header strip on top with summary stats; two stacked
+ * DataTable panes below, each independently scrollable. Both tables
+ * are keyboard-navigable; rows are click-to-open.
+ *
+ * No cards, no pills, no rounded boxes — matches the dense aesthetic
+ * of sector / market / agent tabs (.twm-entity-header + .ea-table).
+ * ══════════════════════════════════════════════════════════════════════ */
+.twm-landing {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;          /* keep the actions strip anchored at the bottom */
+    background: var(--ea-bg-chrome);
+    color: var(--ea-text);
+    font-size: var(--ea-font-body);
+}
+.twm-landing__split {
+    flex: 1 1 0;               /* shrink-fit so footer always shows */
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.twm-landing__pane {
+    flex: 1 1 50%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    border-top: 1px solid var(--ea-border);
+}
+.twm-landing__pane:first-child { border-top: none; }
+/* Single-pane landings (Assets / Markets / Archetypes / Agents /
+ * Scenarios / KPIs / …) — the lone pane should fill 100% of the
+ * available vertical space inside the split. Without this the
+ * `flex: 1 1 50%` default leaves the pane sized to its content. */
+.twm-landing__split--single > .twm-landing__pane {
+    flex: 1 1 auto;
+}
+.twm-landing__split--single > .twm-landing__pane
+    > .twm-landing__table {
+    flex: 1 1 0;
+    min-height: 0;
+}
+.twm-landing__pane-head {
+    display: flex;
+    align-items: center;
+    gap: var(--ea-pad-snug);
+    padding: 0 var(--ea-pad-snug);
+    height: 22px;
+    min-height: 22px;
+    background: var(--ea-bg-chrome);
+    border-bottom: 1px solid var(--ea-border-soft);
+    flex-shrink: 0;
+}
+.twm-landing__pane-title {
+    font-size: 10.5px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-weight: 600;
+    color: var(--ea-text);
+}
+.twm-landing__pane-hint {
+    margin-left: auto;
+    color: var(--ea-text-dim);
+    font-size: 10px;
+}
+.twm-landing__pane--focused .twm-landing__pane-head {
+    background: rgba(17, 119, 179, 0.10);
+}
+.twm-landing__pane--focused .twm-landing__pane-title {
+    color: var(--ea-accent);
+}
+.twm-landing__table {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    background: var(--ea-bg-content);
+}
+/* Kind-filter dropdown in the Archetypes landing header. Same dark
+ * styling as the rest of the inputs — the bare browser default reads
+ * as light grey. */
+.twm-entity-header__field select {
+    background-color: var(--ea-input-bg, #1e1e1e);
+    color: var(--ea-text, #ddd);
+    border: 1px solid var(--ea-border, #444);
+    padding: 0.2em 1.6em 0.2em 0.5em;
+    font: inherit;
+    font-size: 0.85em;
+    -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% - 12px) 50%, calc(100% - 8px) 50%;
+    background-size: 4px 4px, 4px 4px;
+    background-repeat: no-repeat;
+    cursor: pointer;
+}
+.twm-entity-header__field select:focus {
+    outline: none;
+    border-color: var(--ea-accent, #5aa3e8);
+}
+.twm-entity-header__field select option { background: var(--ea-input-bg, #1e1e1e); color: var(--ea-text, #ddd); }
+.twm-landing__table table {
+    width: 100%;
+}
+.twm-landing__table thead th {
+    position: sticky;
+    top: 0;
+    background: var(--ea-bg-chrome);
+    z-index: 1;
+}
+.twm-landing__table tbody tr:hover {
+    background: rgba(255, 255, 255, 0.04);
+}
+/* Keyboard cursor highlight — shared between every overview's DataTable
+   so the same arrow-key affordance reads identically across modes. */
+.twm-row-cursor {
+    box-shadow: inset 2px 0 0 var(--ea-accent);
+    background: rgba(17, 119, 179, 0.12) !important;
+}
+/* Quick-action strip — horizontal bar below the tables. Same chrome
+   tone as `.twm-entity-header` so the page reads as a single stack:
+   header / two tables / actions. Buttons are flat (no border-radius
+   beyond 2px), icon + short label, keyboard-shortcut hint on the right.
+   Reused across every mode overview that wants a quick-action row. */
+.twm-landing__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--ea-pad-snug);
+    height: 30px;
+    min-height: 30px;
+    padding: 0 var(--ea-pad-snug);
+    background: var(--ea-bg-well);
+    border-top: 1px solid var(--ea-border);
+    flex: 0 0 30px;
+    position: relative;
+    z-index: 2;
+}
+.twm-landing__actions-spacer { flex: 1; }
+.twm-landing__actions-hint {
+    color: var(--ea-text-dim);
+    font-size: 10px;
+}
+.twm-action-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    height: 20px;
+    padding: 0 var(--ea-pad-snug);
+    background: transparent;
+    border: 1px solid var(--ea-border-soft);
+    border-radius: 2px;
+    color: var(--ea-text);
+    font-size: var(--ea-font-body);
+    cursor: pointer;
+}
+.twm-action-btn:hover {
+    border-color: var(--ea-accent);
+    background: rgba(17, 119, 179, 0.08);
+}
+.twm-action-btn:disabled,
+.twm-action-btn[aria-disabled="true"] {
+    color: var(--ea-text-dim);
+    cursor: not-allowed;
+}
+/* Inline keyboard-shortcut chip rendered inside an .twm-action-btn —
+ * the visible "[N]" that tells the user which letter fires the action.
+ * mountLandingActions appends it after the label and `landing_table.js`
+ * keeps the keydown handler in sync, so the chip and the hotkey can
+ * never drift apart. */
+.twm-action-btn__kbd {
+    margin-left: 4px;
+    padding: 0 4px;
+    font-family: var(--ea-mono, monospace);
+    font-size: 10px;
+    line-height: 14px;
+    color: var(--ea-text-dim);
+    border: 1px solid var(--ea-border-soft);
+    border-radius: 2px;
+    background: var(--ea-bg-strip, transparent);
+}
+.twm-action-btn:hover .twm-action-btn__kbd {
+    color: var(--ea-text);
+    border-color: var(--ea-accent);
+}
+/* ── Starter-gallery picker (G1.3) ─────────────────────────────────
+ * Card grid used by every "New X" modal to choose a starter shape.
+ * Replaces the legacy template <select> dropdowns. Cards stack
+ * naturally into rows of 2–3 depending on modal width; selecting a
+ * card simply toggles `.is-selected`. */
+.twm-gallery-picker {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 8px;
+    align-content: start;
+    max-height: 320px;
+    overflow-y: auto;
+    padding: 4px;
+    border: 1px solid var(--ea-border, #2a2a2a);
+    background: var(--ea-input-bg, #1e1e1e);
+}
+.twm-gallery-picker__empty {
+    grid-column: 1 / -1;
+    padding: 16px;
+    color: var(--ea-text-dim, #777);
+    font-style: italic;
+    text-align: center;
+}
+.twm-gallery-card {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    align-items: flex-start;
+    text-align: left;
+    padding: 10px 12px;
+    background: var(--ea-bg-content, #181818);
+    border: 1px solid var(--ea-border, #2a2a2a);
+    color: var(--ea-text, #ddd);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 13px;
+    transition: background-color 0.08s ease,
+                border-color 0.08s ease;
+}
+.twm-gallery-card:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: var(--ea-border-soft, #3a3a3a);
+}
+.twm-gallery-card__label {
+    font-weight: 600;
+    line-height: 1.2;
+}
+.twm-gallery-card__desc {
+    margin: 0;
+    color: var(--ea-text-muted, #999);
+    font-size: 11.5px;
+    line-height: 1.35;
+}
+/* Resource-kind picker — verdict-driven dropdown row tinting + the
+ * Requirements panel below the picker. Same colour family as the
+ * signature panel (match=green, override/partial=amber, missing=red)
+ * so the two views read consistently. */
+.twm-autocomplete-field__item[data-type="ok"]      { /* default */ }
+.twm-autocomplete-field__item[data-type="partial"] {
+    background: rgba(204, 120, 65, 0.08);
+}
+.twm-autocomplete-field__item[data-type="missing"] {
+    background: rgba(220, 80, 80, 0.10);
+    color: var(--ea-text-dim, rgba(255, 255, 255, 0.55));
+}
+.twm-autocomplete-field__item[data-type="ok"]      .twm-autocomplete-field__badge { color: #69f0ae; }
+.twm-autocomplete-field__item[data-type="partial"] .twm-autocomplete-field__badge { color: #ffd180; }
+.twm-autocomplete-field__item[data-type="missing"] .twm-autocomplete-field__badge { color: #f48fb1; }
+
+/* ── from tiling/tile.css ───────────────────────── */
+/* tile.css — WM containers, leaves, chrome, splitters. */
+
+.twm-shell__main {
+    overflow: hidden;
+    position: relative;
+}
+.twm-root {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    background: var(--surface-app);
+}
+.twm-empty {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+/* Split + slot — flex containers along one axis. */
+.twm-split {
+    display: flex;
+    flex: 1 1 auto;
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
+}
+.twm-split--h { flex-direction: row; }
+.twm-split--v { flex-direction: column; }
+.twm-slot {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
+}
+.twm-slot > .twm-leaf,
+.twm-slot > .twm-split { flex: 1 1 auto; min-width: 0; min-height: 0; }
+/* Splitter handle between siblings. */
+.twm-splitter {
+    flex: 0 0 4px;
+    background: transparent;
+    position: relative;
+    z-index: 1;
+}
+.twm-splitter:hover,
+body.twm-dragging .twm-splitter { background: var(--accent-bright); opacity: 0.5; }
+.twm-splitter--h { cursor: ew-resize; }
+.twm-splitter--v { cursor: ns-resize; height: 4px; flex: 0 0 4px; }
+body.twm-dragging * { user-select: none; }
+/* Leaf — chrome + body. */
+.twm-leaf {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    background: var(--surface-0);
+    border: 1px solid var(--border-subtle);
+    border-radius: 0;
+    margin: 0;
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
+    outline: none;
+}
+.twm-leaf--focused {
+    border-color: var(--accent-bright);
+    box-shadow: 0 0 0 1px rgba(0, 122, 204, 0.25) inset;
+}
+.twm-leaf__chrome {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-md);
+    padding: 0 var(--space-sm);
+    height: 22px;
+    /* Pin the chrome like its sibling .twm-leaf__tabbar. Without
+     * flex-shrink:0 the chrome inherits the default `0 1 auto` and is the
+     * only fixed-height bar the flex column may shrink: a tab whose content
+     * has a tall max-content height (e.g. Watch — rows min-height:60px +
+     * Monaco editor + hits + help aside) inflates .twm-leaf__body's
+     * flex-basis:auto, and the negative free space gets distributed onto
+     * the chrome too, visibly changing its height. The body (overflow:auto)
+     * is what should absorb the overflow, never the chrome. */
+    flex: 0 0 auto;
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-subtle);
+    user-select: none;
+    font-size: var(--font-size-xs);
+}
+.twm-leaf--focused .twm-leaf__chrome {
+    background: var(--surface-2);
+    color: var(--text-primary);
+}
+.twm-leaf__title {
+    color: var(--text-secondary);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-transform: lowercase;
+    letter-spacing: 0.02em;
+}
+.twm-leaf__actions { display: inline-flex; gap: 2px; }
+.twm-leaf__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-radius: 0;
+}
+.twm-leaf__btn:hover { background: var(--state-hover); color: var(--text-primary); }
+.twm-leaf__body {
+    flex: 1 1 auto;
+    overflow: auto;
+    min-height: 0;
+    background: var(--surface-0);
+}
+/* Bottom tab strip — appears only when the leaf carries >1 tab.
+ * Trapezoidal/spreadsheet-style tabs (slanted top corners) sit on a
+ * thin bar at the bottom of the tile, sharing the visual language of
+ * the bottom panel's chrome (surface-1, square corners, 11 px label).
+ *
+ * The hamburger button on the left opens the per-tile "browse this
+ * page's content" menu (`wm.ctx.onTileTabMenu`). */
+.twm-leaf__tabbar {
+    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);
+}
+.twm-leaf__tabbar--hidden { display: none; }
+.twm-leaf__tab-hamburger {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    margin-right: 4px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    border-radius: 0;
+}
+.twm-leaf__tab-hamburger:hover {
+    color: var(--text-primary);
+    background: var(--state-hover);
+}
+.twm-leaf__tabs {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: stretch;
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+}
+.twm-leaf__tabs::-webkit-scrollbar { display: none; }
+.twm-leaf__tab {
+    /* Spreadsheet-style PARALLELOGRAM: both left and right edges
+     * slanted by ~8 px in the same direction (top-right / bottom-left
+     * pulled inward), giving each tab a uniform slant. Reads as the
+     * old Excel/Lotus sheet-tab look without the trapezoid's bottom
+     * flare. */
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 14px 2px 14px;
+    /* Tabs sit flush against each other — no spacing between them.
+     * The parallelogram clip-path provides the visual separation on
+     * its own (each tab's left edge starts at 8 px in, the previous
+     * tab's right edge ends 8 px in; they interlock without overlap). */
+    margin-right: 0;
+    background: var(--surface-2);
+    color: var(--text-muted);
+    border: none;
+    cursor: pointer;
+    line-height: 1;
+    white-space: nowrap;
+    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
+}
+.twm-leaf__tab:hover {
+    background: var(--surface-3);
+    color: var(--text-primary);
+}
+.twm-leaf__tab--on {
+    background: var(--surface-0);   /* matches the body — looks lifted */
+    color: var(--text-bright);
+    /* Active tab gets a subtle border on the slanted edge so it
+     * separates from the surface-1 bar. Done via a layered ::before
+     * because clip-path drops the actual border. */
+}
+.twm-leaf__tab--on::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    border-top: 1px solid var(--accent-bright, #1683c4);
+    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
+}
+.twm-leaf__tab-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 160px;
+    text-transform: lowercase;
+    letter-spacing: 0.02em;
+}
+.twm-leaf__tab-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    margin-left: 2px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: inherit;
+    opacity: 0.6;
+    cursor: pointer;
+    border-radius: 0;
+}
+.twm-leaf__tab-close:hover {
+    opacity: 1;
+    color: var(--text-bright);
+}
+/* ── Tile tab menu (hamburger pop-out) ────────────────────────────
+ * Anchored above the hamburger button. Lists every entity that the
+ * tile's home page would show, grouped by source, with search +
+ * pagination. Click a row → opens in a new tab on the originating
+ * tile (see install._tileTabMenu). */
+.twm-tile-tabmenu-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    pointer-events: none;
+}
+.twm-tile-tabmenu {
+    pointer-events: auto;
+    width: 360px;
+    max-height: 480px;
+    display: flex;
+    flex-direction: column;
+    background: var(--surface-1);
+    border: 1px solid var(--border-default);
+    box-shadow: var(--shadow-lg);
+}
+.twm-tile-tabmenu__head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+    background: var(--surface-2);
+    border-bottom: 1px solid var(--border-subtle);
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-secondary);
+}
+.twm-tile-tabmenu__head-icon { font-size: 14px; }
+.twm-tile-tabmenu__head-label { flex: 1 1 auto; }
+.twm-tile-tabmenu__close {
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0 4px;
+    font-size: 14px;
+}
+.twm-tile-tabmenu__close:hover { color: var(--text-primary); }
+.twm-tile-tabmenu__search {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--surface-1);
+}
+.twm-tile-tabmenu__search input {
+    flex: 1 1 auto;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text-primary);
+    font-size: var(--font-size-sm);
+}
+.twm-tile-tabmenu__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    padding: 4px 0;
+}
+.twm-tile-tabmenu__loading {
+    padding: var(--space-md);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    text-align: center;
+}
+.twm-tile-tabmenu__section {
+    padding: 0 0 4px;
+    border-bottom: 1px solid var(--border-subtle);
+}
+.twm-tile-tabmenu__section:last-child { border-bottom: none; }
+.twm-tile-tabmenu__section-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 4px 8px;
+    color: var(--text-muted);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+.twm-tile-tabmenu__section-label { flex: 1 1 auto; }
+.twm-tile-tabmenu__section-count {
+    color: var(--text-muted);
+    background: var(--surface-2);
+    padding: 0 4px;
+    font-size: 9px;
+}
+.twm-tile-tabmenu__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.twm-tile-tabmenu__item {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: 3px 12px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+}
+.twm-tile-tabmenu__item:hover,
+.twm-tile-tabmenu__item--cursor {
+    background: var(--state-selected);
+    color: var(--text-bright);
+}
+.twm-tile-tabmenu__item--cursor {
+    /* Keyboard cursor reads slightly heavier than hover so a
+     * mouse-cursor-on-a-different-row state is still legible. */
+    outline: 1px solid var(--accent-bright, #1683c4);
+    outline-offset: -1px;
+}
+.twm-tile-tabmenu__item-hint {
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-tile-tabmenu__empty {
+    padding: 6px 12px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-tile-tabmenu__pager {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-md);
+    padding: 4px 8px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-tile-tabmenu__pager button {
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    color: inherit;
+    padding: 1px 6px;
+    cursor: pointer;
+    border-radius: 0;
+}
+.twm-tile-tabmenu__pager button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+/* ── from tiling/command_palette.css ───────────────────────── */
+/* command_palette.css — Ctrl+K popup. */
+
+.twm-cmdpal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    background: rgba(0, 0, 0, 0.55);
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 12vh;
+}
+.twm-cmdpal {
+    width: min(640px, 90vw);
+    background: var(--surface-1);
+    border: 1px solid var(--border-default);
+    border-radius: 0;
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+/* Input row hosts the optional type-filter chip + the actual text
+ * input. The chip sits to the left of the caret; typing `<prefix>:`
+ * promotes the prefix into the chip and strips it from the input
+ * (see command_palette.js `tryConsumePrefix`). */
+.twm-cmdpal__inputrow {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) var(--space-lg);
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-subtle);
+}
+.twm-cmdpal__type-chip-slot:empty {
+    /* Empty slot collapses entirely so the input flushes against the
+     * row's left padding when no filter is set. */
+    display: none;
+}
+.twm-cmdpal__type-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 2px 4px 2px 8px;
+    background: var(--state-selected, rgba(17, 119, 179, 0.18));
+    border: 1px solid var(--accent-bright, #1683c4);
+    border-radius: 2px;
+    color: var(--text-bright, #fff);
+    font-size: var(--font-size-xs);
+    white-space: nowrap;
+    user-select: none;
+}
+.twm-cmdpal__type-chip-icon {
+    font-size: 14px;
+}
+.twm-cmdpal__type-chip-label {
+    text-transform: lowercase;
+    letter-spacing: 0.02em;
+}
+.twm-cmdpal__type-chip-x {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    margin-left: 2px;
+    background: transparent;
+    border: none;
+    color: inherit;
+    font-size: 14px;
+    line-height: 1;
+    cursor: pointer;
+    border-radius: 0;
+}
+.twm-cmdpal__type-chip-x:hover {
+    background: rgba(255, 255, 255, 0.12);
+}
+.twm-cmdpal__input {
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    font-size: var(--font-size-lg);
+    outline: none;
+}
+.twm-cmdpal__chips,
+.twm-cmdpal__toggles {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs);
+    padding: var(--space-sm) var(--space-md);
+    border-bottom: 1px solid var(--border-subtle);
+}
+.twm-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-xs) var(--space-sm);
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: 0;
+    color: var(--text-secondary);
+    font-size: var(--font-size-xs);
+    cursor: pointer;
+}
+.twm-chip:hover {
+    background: var(--surface-3);
+    color: var(--text-primary);
+}
+.twm-chip--on {
+    background: var(--state-selected);
+    border-color: var(--accent-bright);
+    color: var(--text-bright);
+}
+.twm-cmdpal__list {
+    max-height: 40vh;
+    overflow: auto;
+}
+.twm-cmdpal__item {
+    display: grid;
+    grid-template-columns: 20px 1fr auto auto;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-xs) var(--space-md);
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+}
+.twm-cmdpal__item:hover,
+.twm-cmdpal__item--active {
+    background: var(--state-selected);
+    color: var(--text-bright);
+}
+.twm-cmdpal__icon { color: var(--text-muted); font-size: 16px; }
+.twm-cmdpal__label { font-weight: var(--font-weight-medium); }
+.twm-cmdpal__kind,
+.twm-cmdpal__hint {
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-cmdpal__footer {
+    display: flex;
+    gap: var(--space-md);
+    padding: var(--space-xs) var(--space-md);
+    background: var(--surface-0);
+    border-top: 1px solid var(--border-subtle);
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-cmdpal__footer kbd {
+    display: inline-block;
+    padding: 1px 4px;
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: 0;
+    font-family: var(--font-family-mono);
+    font-size: 10px;
+    margin: 0 1px;
+}
+
+/* ── from tiling/nav.css ───────────────────────── */
+/* nav.css — left-nav panel-tile (project / files / git). */
+
+.twm-nav {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--surface-0);
+    overflow: hidden;
+}
+.twm-nav__modes {
+    display: flex;
+    gap: 0;
+    padding: 0;
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-subtle);
+}
+.twm-nav__mode {
+    flex: 1 1 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 6px 8px;
+    background: transparent;
+    border: none;
+    border-right: 1px solid var(--border-subtle);
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
+    color: var(--text-secondary);
+    font-size: var(--font-size-xs);
+    cursor: pointer;
+}
+.twm-nav__mode:last-child { border-right: none; }
+.twm-nav__mode:hover { background: var(--state-hover); }
+.twm-nav__mode--on {
+    background: var(--surface-0);
+    color: var(--text-bright);
+    border-bottom-color: var(--accent-bright);
+}
+/* Filter strip — inherits look from sidebar.css's .twm-sidebar-controls
+ * primitive. Just tweak the bottom border to match our pane chrome. */
+.twm-nav .twm-sidebar-controls.twm-nav__filter {
+    border-bottom: 1px solid var(--border-subtle);
+}
+.twm-nav__body {
+    flex: 1 1 auto;
+    overflow: hidden;
+    display: flex;
+    min-height: 0;
+}
+/* Each mode pane fills the body when visible. Inline style.display
+ * flips between 'flex' and 'none'. */
+.twm-nav__pane {
+    flex: 1 1 auto;
+    width: 100%;
+    min-width: 0;
+    min-height: 0;
+    flex-direction: column;
+    overflow: hidden;
+}
+.twm-nav__table {
+    flex: 1 1 auto;
+    width: 100%;
+    overflow: auto;
+    min-height: 0;
+}
+/* Force the file-tree section's content to be expanded since there is
+ * no longer a header to toggle it. */
+.twm-nav__pane--files .twm-collapsible-content {
+    display: block !important;
+}
+/* Action row above the file list — hosts the single "New file" button. */
+.twm-nav__files-actions {
+    display: flex;
+    gap: 4px;
+    padding: 6px 6px 4px;
+    border-bottom: 1px solid var(--border-subtle);
+    flex: 0 0 auto;
+}
+.twm-nav__files-mount {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+/* Reset <ul.twm-tree-view> browser defaults so list items render at the
+ * left edge of the body instead of with the 40px UA padding. */
+.twm-nav__pane ul.twm-tree-view {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+.twm-nav__pane .twm-tree-item {
+    /* keep the .tree-item padding from main_new.css for nested chevron */
+}
+.twm-nav__icon {
+    font-size: 14px;
+    color: var(--text-muted);
+    vertical-align: middle;
+}
+.twm-nav__error {
+    padding: 12px;
+    color: var(--color-danger);
+    font-size: var(--font-size-xs);
+}
+
+/* ── from tiling/host.css ───────────────────────── */
+/* host.css — body layout for the tiling shell.
+ *
+ * The Ecosim bootstrap builds .twm-global-top-bar + .container + .twm-global-bottom-bar.
+ * Our installer removes .container and inserts .twm-host between the
+ * top and bottom bars; this stylesheet makes the body a flex column so
+ * the WM host fills the remaining space.
+ */
+
+/* Body is a flex column: top bar, WM host (fill), bottom bar. We
+ * override the legacy `position: fixed` on both bars so they become
+ * deterministic flex items and the host's height is exactly the
+ * leftover space — no math, no overlap, no off-by-N pixels. Their
+ * `z-index` stays put for dropdown stacking. */
+body.twm-body {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+body.twm-body > .twm-global-top-bar,
+body.twm-body > .twm-global-bottom-bar {
+    position: relative !important;
+    inset: auto !important;
+    flex: 0 0 auto;
+}
+body.twm-body > .twm-host {
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+    display: flex;
+    overflow: hidden;
+    background: var(--surface-app);
+}
+/* Sim controls relocated into .twm-global-top-bar .twm-bar-right — they came
+ * from .workspace-top-bar where the layout was different. Strip the
+ * extra padding so they sit next to the panel-toggles cleanly. */
+.twm-global-top-bar .twm-sim-controls {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-right: 8px;
+    padding: 0;
+}
+.twm-global-top-bar .twm-sim-controls .twm-menu-bar {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    padding: 0;
+    background: transparent;
+    border: none;
+}
+.twm-global-top-bar .twm-sim-controls button {
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 0;
+    color: var(--text-secondary);
+}
+.twm-global-top-bar .twm-sim-controls button:hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+/* Desktop bar (mounted in global-bottom-bar .twm-bar-right). */
+.twm-desktops {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    margin: 0 8px;
+}
+.twm-desk__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 22px;
+    height: 18px;
+    padding: 0 6px;
+    background: transparent;
+    border: 1px solid var(--border-subtle);
+    border-radius: 0;
+    color: var(--text-secondary);
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+    cursor: pointer;
+}
+.twm-desk__btn:hover { background: var(--state-hover); }
+.twm-desk__btn--on {
+    background: var(--state-selected);
+    color: var(--text-bright);
+    border-color: var(--accent-bright);
+}
+.twm-desk__btn--add { color: var(--text-muted); }
+.twm-panel-toggle-btn--on {
+    background: var(--state-selected) !important;
+    color: var(--text-bright) !important;
+}
+/* Hamburger button — left of the EcoAgent brand. Collapses File/Edit/
+ * Help into a single popup so the top bar reads as one row of icons
+ * instead of three text dropdowns competing with the page shortcuts. */
+.twm-hamburger-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 35px;
+    height: 35px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    color: var(--text-secondary);
+    cursor: pointer;
+}
+.twm-hamburger-btn:hover {
+    background: var(--state-hover);
+    color: var(--text-primary);
+}
+/* Hide the original File/Edit/Help dropdowns — they live inside the
+ * hamburger menu now. Their `.menu-entry` buttons stay in the DOM so
+ * the hamburger can trigger them via .click(). */
+.twm-global-top-bar .twm-menu-item.twm-hidden-menu-item {
+    display: none !important;
+}
+/* The agent + flow tabs each shipped their own "Pop out" button into a
+ * floating slide-out panel — superseded by the WM's Alt+F / promote-
+ * to-window. Hide them so the chrome doesn't carry two parallel
+ * affordances for the same action. */
+/* Catch-all: any pop-out trigger inside any page tile is hidden. The
+ * tiling shell handles "pop a tile out into a floating window" via
+ * Alt+F / the chrome promote button, so per-page pop-out buttons are
+ * always redundant. */
+.twm-page-shell [data-action="popout"],
+.twm-page-shell #ea-archetype-popout,
+.twm-page-shell #ea-sector-popout {
+    display: none !important;
+}
+/* Inline row-action buttons (edit / delete) on navigation tables. */
+.twm-row-action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    height: 22px;
+    padding: 0;
+    margin: 0 1px;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: 0;
+    color: var(--text-muted);
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 80ms ease, color 80ms ease, background 80ms ease;
+}
+tr:hover .twm-row-action { opacity: 1; }
+.twm-row-action:hover {
+    color: var(--text-primary);
+    background: var(--state-hover);
+}
+.twm-row-action--danger:hover {
+    color: var(--text-bright);
+    background: var(--color-danger);
+}
+.twm-row-actions-cell { white-space: nowrap; text-align: right; }
+/* Hierarchical landing rows (Markets, Agents) — archetype rows carry
+ * a chevron + entity icon; instance rows are indented underneath. */
+.twm-market-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    width: 100%;
+}
+.twm-market-row__icon {
+    font-size: 14px;
+    color: var(--text-muted);
+}
+.twm-market-row--archetype .twm-market-row__icon {
+    color: var(--text-primary);
+}
+.twm-market-row__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-market-chevron {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.twm-market-chevron:hover { color: var(--text-primary); }
+.twm-market-row--instance .twm-market-row__indent {
+    display: inline-block;
+    width: 22px;
+    flex: 0 0 22px;
+}
+.twm-market-row--instance .twm-market-row__label {
+    color: var(--text-secondary);
+}
+.twm-market-row__count {
+    display: inline-block;
+    margin-left: 6px;
+    padding: 0 5px;
+    color: var(--text-muted);
+    font-size: 11px;
+    border: 1px solid var(--border-subtle);
+    line-height: 1.5;
+}
+.twm-market-chevron:disabled {
+    opacity: 0.25;
+    cursor: default;
+}
+/* DataTable filter strip stickiness — the legacy rule for this lived
+ * only inside `.twm-preview-table-wrap--wizard`; generalize it so every
+ * DataTable (landings, instance lists, …) keeps its filter row + column
+ * headers visible when the body scrolls. Both rows need opaque
+ * backgrounds + z-index above the data cells so rows can't bleed
+ * through. */
+/* Structural split: thead lives in its own non-scrolling header wrap
+ * above the scrollable body wrap. The header gets opaque chrome so it
+ * reads as a single bar with the body; no `position: sticky` is
+ * needed anymore since the header literally doesn't scroll. */
+.twm-data-table-component .twm-preview-table-header-wrap {
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-strong);
+}
+.twm-data-table-component .twm-preview-table-header-wrap .twm-preview-table thead th {
+    background: var(--surface-1);
+}
+.twm-data-table-component .twm-preview-table-header-wrap .twm-preview-table .twm-data-table__filter-row th {
+    background: var(--surface-0);
+}
+/* Compact mode (P2) — used by the bottom-panel Registries tab.
+ * Tighter padding + smaller font matches the surrounding bottom-panel
+ * chrome (run console, bus, query) and gets ~30% more rows visible
+ * in the same vertical space. Opt-in via `mode: 'compact'`. */
+.twm-data-table-component--compact {
+    font-size: 11px;
+}
+.twm-data-table-component--compact .twm-preview-table th,
+.twm-data-table-component--compact .twm-preview-table td {
+    padding: 2px 6px;
+    line-height: 1.35;
+}
+.twm-data-table-component--compact .twm-pagination-controls {
+    padding: 1px 6px !important;
+    font-size: 10px !important;
+    /* Tighter gap so pager reads as one strip, like the category /
+     * schema filter bar above the table — not as a spaced toolbar. */
+    gap: 4px !important;
+    background: #181818;
+    border-top:    1px solid var(--ea-border, #2a2a2a);
+    border-bottom: 1px solid var(--ea-border, #2a2a2a);
+}
+.twm-data-table-component--compact .twm-data-table__filter-input {
+    font-size: 10px;
+    padding: 1px 4px;
+}
+/* Match the narrow chrome of the filter strip (.ea-bp-browser__cat):
+ * 20px height, border-no-radius, transparent background, uppercase
+ * typography. So the pager reads as a sibling of the category /
+ * schema bar instead of a heavier toolbar.
+ *
+ * `!important` is used liberally below because DataTable.js still
+ * sets per-button / per-input chrome via inline `style.cssText` —
+ * inline beats CSS without `!important`. Once those inline styles
+ * migrate to CSS classes we can drop the `!important`s. */
+.twm-data-table-component--compact .twm-pagination-controls .twm-pagination-btn {
+    min-width: 22px !important;
+    height: 20px !important;
+    padding: 0 6px !important;
+    background: transparent !important;
+    border: 1px solid var(--ea-border, #2a2a2a) !important;
+    border-radius: 0 !important;
+    color: var(--ea-text-dim, #aaa) !important;
+    font-size: 10px !important;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+.twm-data-table-component--compact .twm-pagination-controls .twm-pagination-btn:hover:not(:disabled) {
+    color: var(--ea-text, #ddd) !important;
+    border-color: var(--ea-accent, #1177b3) !important;
+}
+/* Text labels inside the pager — the "Rows X–Y of Z" and "Page X of
+ * Y" spans don't have classes (just inline style), so target every
+ * direct-span child of the controls to neutralise their inline color
+ * + font-size + add the uppercase look from the filter strip. */
+/* Loading spinner — `setLoading(true)` (or returning a Promise from
+ * onPageChange/onSort) overlays a translucent layer + a CSS spinner
+ * over the whole table. Wrapper gets `position: relative` set
+ * inline by the JS so the absolute overlay anchors correctly. */
+.twm-data-table__loading {
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* Translucent so the user still sees the stale rows underneath
+     * and can recognise the table — the spinner says "fresh data
+     * coming", not "blank". */
+    background: rgba(20, 20, 20, 0.45);
+    backdrop-filter: blur(1px);
+    pointer-events: all;  /* swallow clicks while in-flight */
+    cursor: progress;
+}
+.twm-data-table__spinner {
+    width: 28px;
+    height: 28px;
+    border: 2px solid rgba(255, 255, 255, 0.18);
+    border-top-color: var(--ea-accent, #1177b3);
+    border-radius: 50%;
+    animation: data-table__spin 0.7s linear infinite;
+}
+.twm-data-table-component--compact .twm-pagination-controls > span {
+    color: var(--ea-text-dim, #aaa) !important;
+    font-size: 9.5px !important;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+/* Sticky-cell rules removed — header now lives in its own non-
+ * scrolling container after the structural split. */
+
+/* The legacy `.twm-landing__table` host has its own `overflow:auto`,
+ * which fights with DataTable's inner `.twm-preview-table-wrap` scroll
+ * container. When the outer scroll wins, the sticky filter row is
+ * computed against the wrong ancestor and stops sticking — rows
+ * scroll past the filter strip visually. Defer all scrolling to the
+ * inner wrap. Same fix for the navigator's table host. */
+.twm-landing__table,
+.twm-nav__table {
+    overflow: hidden !important;
+}
+.twm-landing__table > .twm-data-table-component,
+.twm-nav__table > .twm-data-table-component {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+/* main_new.css caps every `.twm-preview-table-wrap` at 300px so the legacy
+ * pre-tiling pages stayed compact. Inside the tiling shell, the wrap is
+ * the SOLE scrolling surface for the landing table — capping it at
+ * 300px clips the list to ~8 rows. Force the wrap to fill its flex
+ * parent and rely on its own `overflow: auto` (set inline by DataTable)
+ * for scrolling. */
+.twm-landing__table .twm-preview-table-wrap,
+.twm-nav__table .twm-preview-table-wrap {
+    max-height: none !important;
+    height: auto;
+    flex: 1 1 0;
+    min-height: 0;
+}
+/* Filter-row sticky rule removed — the row lives inside the non-
+ * scrolling header wrap after the structural split, so no sticky
+ * positioning is needed and the `top: 32px` magic-offset (which
+ * broke in compact mode) is gone. */
+
+/* Navigation-table density — tighten row padding for landings + the
+ * navigator. The default DataTable padding of `var(--space-sm) 8px` is
+ * comfortable for data-viewing tables; nav tables benefit from being
+ * denser so more items fit. */
+.twm-landing .twm-data-table-component .twm-preview-table td,
+.twm-landing .twm-data-table-component .twm-preview-table th,
+.twm-nav__table .twm-data-table-component .twm-preview-table td,
+.twm-nav__table .twm-data-table-component .twm-preview-table th {
+    padding: 2px 8px;
+}
+.twm-landing .twm-data-table-component .twm-preview-table .twm-data-table__filter-row th,
+.twm-nav__table .twm-data-table-component .twm-preview-table .twm-data-table__filter-row th {
+    padding: 3px 4px;
+    /* Column header in these tables is ~22 px tall (font + 2×2 padding
+     * + 1 px border). The default filter-row `top: 32px` left a ~10 px
+     * gap rows scrolled through. Snap the filter row right up against
+     * the shorter header. */
+    top: 22px;
+}
+/* Breadcrumb strip — vertically center content. */
+.twm-page-shell__breadcrumb {
+    display: flex;
+    align-items: center;
+}
+.twm-page-shell__breadcrumb .twm-tile-breadcrumb {
+    flex: 1 1 auto;
+    min-width: 0;
+    line-height: 1;
+}
+.twm-page-shell__breadcrumb .twm-topbar-breadcrumb__list {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    gap: 4px;
+}
+.twm-page-shell__breadcrumb .twm-topbar-breadcrumb__item,
+.twm-page-shell__breadcrumb .twm-topbar-breadcrumb__link {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+}
+/* Modal dialog styling lives in ecoagent_extra_modes.css under
+ * `.twm-managed-window--modal`. Removed legacy in-host block — was a
+ * competing `display: flex; flex-direction: column` that stacked
+ * labels above fields and fought the canonical grid layout. */
+
+/* The Object Explorer's host expects `.panel.right .right-panel-body`
+ * — we recreate that shell inside the panel:right tile so the existing
+ * module mounts unchanged. The legacy `.panel.right` layout rules
+ * (fixed width, position, etc.) would fight the tile sizing, so we
+ * reset to a plain stretchy column. */
+.twm-leaf__body .twm-panel-right {
+    position: static;
+    width: 100%;
+    height: 100%;
+    flex: 1 1 auto;
+    min-width: 0;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    background: transparent;
+    box-shadow: none;
+    overflow: hidden;
+}
+/* Page-shell: every content tile gets a breadcrumb strip on top and a
+ * scrollable content area below. */
+.twm-page-shell {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+/* Lock the breadcrumb strip to a constant height across every page
+ * so the chrome doesn't visibly shift when switching between kinds
+ * with different segment counts. */
+.twm-page-shell__breadcrumb {
+    flex: 0 0 26px;
+    min-height: 26px;
+    max-height: 26px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--surface-1);
+    overflow: hidden;
+}
+.twm-page-shell__breadcrumb .twm-tile-breadcrumb {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 8px;
+    line-height: 22px;
+}
+.twm-page-shell__content {
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+    /* No `overflow: auto` here — each mounted page owns its own
+     * scroll region (e.g. .ea-agent-editor's `.nb-structured-editor__content`).
+     * Allowing the wrapper to scroll on top of that produced double
+     * scrollbars + a shimmy on sub-tab switches inside agent / market
+     * pages (Settings vs code). */
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    /* Children that need to layer over the content slot (the loading
+     * overlay) anchor against this. */
+    position: relative;
+}
+/* Loading overlay — shown while a page's async mount() is in flight.
+ * `--pending` is the pre-show state set for the first 80ms so cache
+ * hits / instant renders never strobe a spinner. After that the
+ * overlay becomes visible until the mount promise resolves. */
+.twm-tile-loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--ea-bg-content, #1a1a1a);
+    z-index: 5;
+    opacity: 1;
+    transition: opacity 120ms ease-out;
+}
+.twm-tile-loading--pending {
+    opacity: 0;
+    pointer-events: none;
+}
+.twm-tile-loading__spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid var(--ea-border, #333);
+    border-top-color: var(--accent, #4a90e2);
+    border-radius: 50%;
+    animation: twm-tile-loading-spin 0.7s linear infinite;
+}
+/* Merged home page — detail header row, then the project-setup body
+ * fills the rest of the tile. */
+.twm-home-page {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+.twm-home-page__header {
+    flex: 0 0 auto;
+}
+.twm-home-page__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+/* Detail header — uniform height + padding across every tab. */
+.twm-page-shell__content .twm-entity-header {
+    min-height: 32px;
+    padding: 4px 12px !important;
+    margin: 0 !important;
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--border-subtle);
+}
+/* Bottom panel mounted as a tile — reset the legacy fixed/absolute
+ * layout `.left-bottom` carries from main_new.css so it stretches to
+ * fill the tile body. */
+.twm-leaf__body .twm-panel-bottom {
+    position: static;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.twm-leaf__body .twm-panel-bottom #bottom-tabs-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+}
+.twm-bp-loading {
+    padding: 14px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-bp-loading--err { color: var(--color-danger); }
+/* Self-contained bottom panel — sole owner of the panel:bottom tile.
+ * Tab strip on top, body below; both painted synchronously by the
+ * tiling shell so the panel can never end up visually empty. */
+.twm-bp {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: var(--surface-0);
+    color: var(--text-body);
+}
+/* Tab strip matches the legacy `.bottom-tabs-header` look: light row
+ * with no per-tab background, uppercase labels spaced by left margin,
+ * white underline on the active tab. No boxy buttons. */
+.twm-bp__tabs {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 0;
+    padding: 0 0 0 4px;
+    background: var(--surface-0);
+    border-bottom: 1px solid #292929;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    white-space: nowrap;
+}
+.twm-bp__tabs::-webkit-scrollbar { width: 0; height: 0; display: none; }
+.twm-bp__tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0;
+    height: 30px;
+    line-height: 30px;
+    margin-left: 10px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid transparent;
+    color: inherit;
+    text-transform: uppercase;
+    font-size: var(--font-size-xs);
+    cursor: pointer;
+    user-select: none;
+}
+.twm-bp__tab:hover { background: transparent; color: var(--text-bright); }
+.twm-bp__tab--on {
+    color: var(--text-bright);
+    border-bottom-color: #fff;
+}
+.twm-bp__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+}
+.twm-bp-pane {
+    padding: 6px 10px;
+}
+.twm-bp-pane__placeholder {
+    padding: 12px;
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+}
+.twm-bp-log {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-xs);
+}
+.twm-bp-log thead th {
+    text-align: left;
+    color: var(--text-muted);
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--border-subtle);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    font-size: 10px;
+    font-weight: 600;
+}
+.twm-bp-log td {
+    padding: 2px 8px;
+    border-bottom: 1px solid var(--border-subtle);
+    vertical-align: top;
+}
+.twm-bp-log__tick { color: var(--text-muted); white-space: nowrap; }
+.twm-bp-log__level {
+    color: var(--text-secondary);
+    text-transform: lowercase;
+    white-space: nowrap;
+}
+.twm-bp-log__row--warn  .twm-bp-log__level,
+.twm-bp-log__row--warn  .twm-bp-log__msg { color: var(--color-warning); }
+.twm-bp-log__row--error .twm-bp-log__level,
+.twm-bp-log__row--error .twm-bp-log__msg { color: var(--color-danger); }
+.twm-bp-log__msg { color: var(--text-body); white-space: pre-wrap; word-break: break-word; }
+/* Context menu — override main_new.css's .twm-context-menu to the tighter,
+ * grid-style look (icon | label) with a flat surface-1 background and
+ * square corners. All callers (sidebars, tile chrome, desktop bar, …)
+ * inherit this look — one implementation, one style. */
+.twm-context-menu {
+    background: var(--surface-1);
+    border: 1px solid var(--border-default);
+    border-radius: 0;
+    box-shadow: var(--shadow-md);
+    padding: 4px 0;
+    min-width: 200px;
+    backdrop-filter: none;
+}
+.twm-context-menu-item {
+    display: grid;
+    grid-template-columns: 22px 1fr;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 10px;
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+}
+.twm-context-menu-item.twm-delete-node {
+    color: var(--color-danger);
+}
+.twm-context-menu__separator {
+    height: 1px;
+    margin: 4px 0;
+    background: var(--border-subtle);
+}
+/* Window-placeholder body — shown in the leaf while its content is in
+ * a managed window. */
+.twm-window-placeholder {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 24px;
+    color: var(--text-muted);
+    text-align: center;
+}
+.twm-window-placeholder__icon {
+    font-size: 32px;
+    opacity: 0.5;
+}
+.twm-window-placeholder__title {
+    color: var(--text-primary);
+    font-weight: var(--font-weight-semibold);
+}
+.twm-window-placeholder__hint {
+    font-size: var(--font-size-xs);
+}
+.twm-window-placeholder__btn {
+    margin-top: 8px;
+    padding: 4px 12px;
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: 0;
+    color: var(--text-primary);
+    cursor: pointer;
+}
+.twm-window-placeholder__btn:hover {
+    background: var(--state-selected);
+    color: var(--text-bright);
+    border-color: var(--accent-bright);
+}
+/* Anchor bar-center next to bar-left (instead of centred). bar-right
+ * gets pushed against the right edge with margin-left:auto so the
+ * existing justify-content: space-between still reads correctly. */
+.twm-global-top-bar .twm-bar-left   { flex: 0 0 auto; }
+.twm-global-top-bar .twm-bar-right  { flex: 0 0 auto; margin-left: auto; }
+/* Top-nav buttons in .twm-bar-center — archaic console look: full-height,
+ * monospace label, square, dark active-bg with white text. Each
+ * button is only as wide as its content; the strip takes only as
+ * much horizontal space as required. */
+.twm-global-top-bar .twm-bar-center.twm-top-nav {
+    display: flex;
+    align-items: stretch;
+    align-self: stretch;
+    gap: 0;
+    padding: 0;
+    flex: 0 0 auto;
+    height: 100%;
+    min-width: 0;
+}
+.twm-top-nav__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    flex: 0 0 auto;
+    min-width: 0;
+    height: 100%;
+    padding: 0 14px;
+    background: transparent;
+    border: none;
+    border-right: 1px solid var(--surface-0);
+    border-radius: 0;
+    color: var(--text-muted);
+    font-family: var(--font-family-mono);
+    font-size: 11px;
+    font-weight: var(--font-weight-medium);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    cursor: pointer;
+    transition: color 80ms ease, background 80ms ease;
+}
+.twm-top-nav__btn:last-child { border-right: none; }
+.twm-top-nav__btn:hover {
+    background: rgba(255, 255, 255, 0.04);
+    color: var(--text-primary);
+}
+.twm-top-nav__btn--on {
+    color: var(--text-bright);
+    background: var(--surface-well);
+}
+.twm-top-nav__btn--on:hover {
+    background: #000;
+    color: var(--text-bright);
+}
+.twm-top-nav__icon {
+    font-size: 16px;
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+.twm-top-nav__label {
+    /* hidden on narrow viewports; icon alone is enough */
+}