flexdesk 0.17.18 → 0.18.0

package/css/overrides.css

@@ -1,2596 +0,0 @@
-/* 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: var(--accent-bright-hover);
-    border-color: var(--accent-bright-hover);
-}
-/* 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). The content never
- * scrolls itself: the zone above the strip does, so the strip stays whole
- * and in view when the fields outgrow the window. */
-.twm-managed-window--modal .twm-managed-window__content {
-    background: var(--ea-bg-content);
-    padding: 0;
-    overflow: hidden;
-}
-.twm-managed-window--modal .twm-modal__body-host {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-}
-/* Form sits inside the body host as a flex column: the fields take the
- * room left over and scroll, the error banner and the actions row keep
- * their height below them. */
-.twm-managed-window--modal .twm-modal__form {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 auto;
-    min-height: 0;
-    padding: 0;
-    overflow: hidden;
-}
-.twm-managed-window--modal .twm-modal__fields {
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow-y: auto;
-    padding-bottom: 14px;
-}
-.twm-managed-window--modal .twm-modal__form > .twm-modal__error,
-.twm-managed-window--modal .twm-modal__form > .twm-modal__actions {
-    flex: 0 0 auto;
-}
-.twm-managed-window--modal .twm-modal__form > .twm-modal__error {
-    margin-bottom: 8px;
-}
-/* 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__fields > .twm-modal__row,
-.twm-managed-window--modal .twm-modal__fields > .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__fields > .twm-modal__row:first-of-type,
-.twm-managed-window--modal .twm-modal__fields > .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: var(--accent-bright-hover);
-    border-color: var(--accent-bright-hover);
-}
-.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;
-    min-height: 0;
-    overflow-y: auto;
-}
-/* openConfirm's message is text (BUG-0014): `\n` breaks the line, and a long
- * unbroken name wraps instead of widening the dialog. */
-.twm-managed-window--modal .twm-modal__body--text {
-    white-space: pre-line;
-    overflow-wrap: anywhere;
-}
-/* Form-level error banner — left accent stripe, dim red panel. */
-.twm-managed-window--modal .twm-modal__error {
-    margin-top: 8px;
-    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: color-mix(in srgb, var(--accent-hover) 10%, transparent);
-}
-.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);
-}
-.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: color-mix(in srgb, var(--accent-hover) 12%, transparent) !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: color-mix(in srgb, var(--accent-hover) 8%, transparent);
-}
-.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 color-mix(in srgb, var(--accent-bright) 25%, transparent) 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; }
-
-/* ══════════════════════════════════════════════════════════════════════
- * C33. A TAB DRAGGED INTO A TILE
- *
- * Here and not in `css/base.css`, because every `.twm-leaf*` declaration
- * originates in this file (`.twm-leaf` and `.twm-leaf__tabbar` above) and
- * base.css carries none of them. Hand-mirrored into `css/flexdesk.css`,
- * which is the only sheet `build.mjs` copies into `dist/` and whose
- * generator (`scripts/css_extract.py`) is not in this repository.
- *
- * THE ZONE RECTANGLE IS NOT STYLED HERE. It reuses `.twm-snap-preview
- * .twm-snap-preview--viewport` — the window drop's own preview element,
- * already defined in base.css — so a tab drop and a window drop cannot come
- * to disagree about what a drop looks like.
- *
- * AND THERE IS NO `cursor` RULE, which is not an omission. For the length of
- * a native drag the browser draws the pointer from `dataTransfer.dropEffect`
- * (the handlers set `'move'`); a `cursor` on the drop target is ignored
- * throughout and would only mislead the next reader.
- * ══════════════════════════════════════════════════════════════════════ */
-
-/* THE PANE UNDER THE POINTER. The preview rectangle says what a release
- * would PRODUCE; this says which pane is being asked. An inset OUTLINE
- * rather than a border, because a border changes the box and every tile in
- * the row would reflow by a pixel as the pointer crossed between them. */
-.twm-leaf--drop-target {
-    outline: 2px solid var(--accent-bright);
-    outline-offset: -2px;
-}
-
-/* A STRIP ARMED TO RECEIVE — the drop that adds the tab at the end of this
- * tile's list rather than into a zone of its body. */
-.twm-leaf__tabbar--drop-target {
-    background: color-mix(in srgb, var(--accent-bright) 18%, transparent);
-    box-shadow: inset 0 0 0 1px var(--accent-bright);
-}
-
-/* THE TAB BEING CARRIED. `DragReorder` has put `.dragging` on the TOP
- * strip's tab since it was written and base.css dims it; the bottom strip's
- * hand-rolled reorder set no class at all, so a drag there looked exactly
- * like a click that did nothing. One declaration for both strips, so the two
- * layouts cannot drift on what a dragged tab looks like. */
-.twm-leaf__tab.dragging { opacity: 0.4; }
-
-.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);
-    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);
-}
-/* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
-.twm-tile-tabmenu__head-icon,
-.twm-tile-tabmenu__head-icon.material-symbols-outlined { 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);
-    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);
-    border: 1px solid var(--accent-bright);
-    border-radius: 2px;
-    color: var(--text-bright, #fff);
-    font-size: var(--font-size-xs);
-    white-space: nowrap;
-    user-select: none;
-}
-/* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
-.twm-cmdpal__type-chip-icon,
-.twm-cmdpal__type-chip-icon.material-symbols-outlined {
-    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-chip[aria-disabled="true"] {
-    color: var(--text-dim);
-    cursor: not-allowed;
-}
-.twm-chip[aria-disabled="true"]:hover {
-    background: var(--surface-2);
-    color: var(--text-dim);
-}
-.twm-cmdpal__list {
-    max-height: 40vh;
-    overflow: auto;
-}
-.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);
-}
-/* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
-.twm-cmdpal__icon,
-.twm-cmdpal__icon.material-symbols-outlined { 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;
-}
-
-/* ── C39: the grouped layout (`layout: 'grouped'`) ───────────────────────
- * Everything here is under `--grouped`, so the flat palette above draws
- * exactly as it did. Rows are three columns: icon, the label with its
- * context, and a right side that shows the kind — or, on the active row,
- * the keys that act on it. */
-.twm-cmdpal--grouped {
-    width: min(680px, calc(100vw - 32px));
-    max-height: 76vh;
-    border-color: var(--border-strong);
-}
-.twm-cmdpal-overlay--grouped { padding-top: 11vh; }
-.twm-cmdpal--grouped .twm-cmdpal__inputrow {
-    padding: var(--space-md) var(--space-lg);
-    border-bottom-color: var(--border-default);
-}
-.twm-cmdpal__search-icon,
-.twm-cmdpal__search-icon.material-symbols-outlined { color: var(--text-muted); font-size: 20px; }
-.twm-cmdpal--grouped .twm-cmdpal__input { font-size: var(--font-size-xl); color: var(--text-bright); }
-.twm-cmdpal--grouped .twm-cmdpal__input::placeholder { color: var(--text-muted); }
-.twm-cmdpal--grouped .twm-cmdpal__type-chip-label--scope { text-transform: none; letter-spacing: 0; }
-.twm-cmdpal__esc,
-.twm-cmdpal--grouped kbd {
-    display: inline-block;
-    padding: 1px 4px;
-    background: var(--surface-2);
-    border: 1px solid var(--border-default);
-    border-radius: 0;
-    color: var(--text-secondary);
-    font-family: var(--font-family-mono);
-    font-size: 10px;
-    line-height: 1.3;
-}
-.twm-cmdpal--grouped .twm-cmdpal__list {
-    flex: 1 1 auto;
-    max-height: none;
-    min-height: 0;
-    padding: var(--space-xs) 0;
-}
-.twm-cmdpal__group {
-    padding: 10px var(--space-lg) 4px;
-    color: var(--text-muted);
-    font-size: var(--font-size-xs);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-}
-.twm-cmdpal--grouped .twm-cmdpal__item {
-    grid-template-columns: 20px minmax(0, 1fr) auto;
-    gap: 10px;
-    padding: 5px var(--space-lg);
-    font-size: var(--font-size-md);
-}
-/* The flat layout highlights on :hover; here the pointer MOVES the active
- * row instead, so a hover tint would be a second, disagreeing highlight. */
-.twm-cmdpal--grouped .twm-cmdpal__item:hover:not(.twm-cmdpal__item--active) { background: transparent; color: var(--text-secondary); }
-.twm-cmdpal--grouped .twm-cmdpal__item--active {
-    background: var(--state-selected);
-    color: var(--text-bright);
-    box-shadow: inset 2px 0 0 var(--accent-bright);
-}
-.twm-cmdpal--grouped .twm-cmdpal__item--active .twm-cmdpal__icon { color: var(--text-bright); }
-.twm-cmdpal__main {
-    min-width: 0;
-    display: flex;
-    align-items: baseline;
-    gap: var(--space-sm);
-}
-.twm-cmdpal--grouped .twm-cmdpal__label {
-    font-weight: 400;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 0 1 auto;
-    min-width: 0;
-}
-.twm-cmdpal__label mark {
-    background: none;
-    color: var(--twm-cmdpal-match);
-    font-weight: var(--font-weight-semibold);
-}
-.twm-cmdpal__context,
-.twm-cmdpal__cells {
-    color: var(--text-muted);
-    font-size: var(--font-size-xs);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    min-width: 0;
-    flex: 0 10 auto;
-}
-.twm-cmdpal__cells { font-family: var(--font-family-mono); }
-.twm-cmdpal__side {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: var(--text-muted);
-    font-size: var(--font-size-xs);
-    white-space: nowrap;
-}
-.twm-cmdpal__acts { display: none; gap: 10px; }
-.twm-cmdpal__item--active .twm-cmdpal__acts { display: flex; }
-/* A copy verb a single kind refuses: drawn, greyed, with the reason as its title. */
-.twm-cmdpal__act--disabled { opacity: 0.45; }
-.twm-cmdpal__item--active .twm-cmdpal__kind,
-.twm-cmdpal__item--active .twm-cmdpal__shortcut { display: none; }
-.twm-cmdpal__item--more { color: var(--text-muted); font-size: var(--font-size-sm); }
-.twm-cmdpal__empty {
-    padding: 24px var(--space-lg);
-    color: var(--text-muted);
-    text-align: center;
-}
-.twm-cmdpal__empty--quiet { padding: 6px var(--space-lg); text-align: left; font-size: var(--font-size-xs); }
-.twm-cmdpal__tips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px 16px;
-    margin-top: var(--space-xs);
-    padding: 10px var(--space-lg) var(--space-sm);
-    border-top: 1px solid var(--border-subtle);
-    color: var(--text-muted);
-    font-size: var(--font-size-xs);
-}
-.twm-cmdpal--grouped .twm-cmdpal__footer { flex-wrap: wrap; row-gap: 2px; }
-.twm-cmdpal__footnote { margin-left: auto; color: var(--text-muted); }
-@media (max-width: 560px) {
-    .twm-cmdpal__context { display: none; }
-    .twm-cmdpal__acts > span:not(:first-child) { display: none; }
-    .twm-cmdpal__footnote { display: none; }
-}
-
-/* ── 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, menu row (when there is one), 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;
-}
-/* The menu row (STORY-0119) sits between the top bar and the host, in
- * normal flow: a fixed-size strip, so the host's leftover space is less by
- * exactly its height. */
-body.twm-body > .twm-global-menu-bar {
-    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 {
-    /* 0.5.0: the row-geometry tokens (tokens.css), falling back to exactly
-     * the 0.4 compact values. */
-    padding: var(--twm-dt-cell-pad-block, 2px) var(--twm-dt-cell-pad-inline, 6px);
-    line-height: var(--twm-dt-cell-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) !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);
-    border-radius: 50%;
-    animation: data-table__spin 0.7s linear infinite;
-}
-/* The keyframes the rule above names. Without them the name is no animation
-   (CSS reports nothing for it), so the ring was drawn and stood still. A full
-   turn at the rule's own 0.7s linear infinite. `@keyframes` names are global
-   and cannot be scoped (see `spin`); a definition of the same name in an
-   embedder's sheet wins or loses on source order, and either way the ring
-   turns. */
-@keyframes data-table__spin {
-    from { transform: rotate(0deg); }
-    to   { transform: rotate(360deg); }
-}
-.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;
-}
-/* A path of one segment is not drawn (STORY-0124): the tile's title already
- * names it, so the strip and its slot take no room until a second level. */
-.twm-page-shell__breadcrumb .twm-tile-breadcrumb[hidden],
-.twm-page-shell__breadcrumb:has(> .twm-tile-breadcrumb[hidden]) {
-    display: none;
-}
-.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);
-    border-radius: 50%;
-    animation: twm-tile-loading-spin 0.7s linear infinite;
-}
-/* The keyframes the rule above names; see `data-table__spin`. */
-@keyframes twm-tile-loading-spin {
-    from { transform: rotate(0deg); }
-    to   { transform: rotate(360deg); }
-}
-/* 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;
-}
-/* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
-.twm-window-placeholder__icon,
-.twm-window-placeholder__icon.material-symbols-outlined {
-    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);
-}
-/* Compounded for the Material Symbols tie — see `.twm-leaf__icon`. */
-.twm-top-nav__icon,
-.twm-top-nav__icon.material-symbols-outlined {
-    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 */
-}