flexdesk 0.1.0

package/css/base.css

@@ -0,0 +1,3439 @@
+/* twm — the framework's default styling. Loads EARLY: an embedder is entitled to override any of it.
+ *
+ * GENERATED by scripts/css_extract.py — do not edit by hand.
+ */
+
+/* ── from main_new.css ───────────────────────── */
+/* Status popup listing invalid items */
+.twm-status-popup {
+    position: fixed;
+    left: 12px;
+    bottom: 44px; /* above the bottom bar */
+    width: 420px;
+    background: transparent;
+    color: #ddd;
+    z-index: var(--z-modal);
+}
+.twm-status-popup .twm-close-btn {
+    background: transparent;
+    color: #ccc;
+    border: none;
+    cursor: pointer;
+    font-size: var(--font-size-lg);
+}
+.twm-status-popup .twm-tab-group { background: rgba(255,255,255,0.02); border: 1px solid #2a2a2a; border-radius: var(--radius-lg); }
+.twm-status-popup .twm-tab-group-header { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) 10px; border-bottom: 1px solid #2a2a2a; }
+.twm-status-popup .twm-tab-group-header .twm-tab-name { font-weight: 600; color: #d0d0d0; }
+.twm-status-popup .twm-tab-group-header .twm-pill-count { margin-left: auto; background: var(--surface-2); border: 1px solid #444; color: #ddd; padding: 1px 6px; border-radius: var(--radius-pill); font-size: var(--font-size-xs); line-height: 16px; }
+.twm-status-popup .twm-tab-group .twm-issue-list { list-style: none; padding: var(--space-xs) 6px; margin: 0; }
+.twm-status-popup .twm-tab-group .twm-issue-list li { padding: var(--space-sm) 6px; border-radius: var(--radius-md); }
+.twm-status-popup .twm-tab-group .twm-issue-list li:hover { background: rgba(255,255,255,0.06); }
+/* Error-log style list */
+.twm-status-popup .twm-issue-list { list-style: none; padding-left: 0; margin: 0; }
+.twm-status-popup .twm-issue-list li { padding: var(--space-sm) 8px; border-radius: var(--radius-md); }
+.twm-status-popup .twm-issue-list li:hover { background: rgba(255,255,255,0.06); }
+.twm-status-popup .twm-status-row { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: var(--space-md); }
+/* Tab Close Confirmation Popover */
+.twm-tab-close-popover {
+    position: fixed;
+    z-index: 5000;
+    background: var(--surface-2);
+    color: var(--text-primary);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
+    padding: 10px 12px;
+    font-size: var(--font-size-sm);
+    pointer-events: auto;
+    --arrow-left: 16px;
+    width: 240px;
+    max-width: 240px;
+    overflow-wrap: anywhere;
+}
+/* Large Status Details Popover */
+.twm-status-details-popover {
+    position: fixed;
+    z-index: 5000;
+    background: var(--surface-2);
+    color: var(--text-primary);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
+    width: 520px;
+    max-width: min(90vw, 680px);
+    max-height: min(90vh, 680px);
+    padding: 10px 12px;
+    display: flex;
+    flex-direction: column;
+}
+.twm-status-details-popover .twm-details-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-weight: 600;
+    margin-bottom: var(--space-md);
+}
+.twm-status-details-popover .twm-details-header .twm-close-btn {
+    background: transparent;
+    color: #aaa;
+    border: none;
+    font-size: var(--font-size-lg);
+    cursor: pointer;
+}
+.twm-status-details-popover .twm-details-body {
+    overflow: auto;
+    padding: var(--space-xs) 2px 2px 2px;
+}
+.twm-status-details-popover .twm-tab-group { 
+    margin-bottom: 10px; 
+}
+.twm-status-details-popover .twm-tab-group-header {
+    display: flex; 
+    align-items: center; 
+    gap: var(--space-sm);
+    font-size: 12.5px; 
+    color: #ddd; 
+    margin-bottom: var(--space-xs);
+}
+.twm-status-details-popover .twm-tab-group-header .twm-pill-count {
+    background: #444; 
+    color: #ddd; 
+    border-radius: var(--radius-pill); 
+    padding: 0 6px; 
+    font-size: var(--font-size-xs); 
+    margin-left: auto;
+}
+.twm-status-details-popover .twm-issue-list { 
+    list-style: none; 
+    margin: 0; 
+    padding: 0; 
+}
+.twm-status-details-popover .twm-issue-item { 
+    padding: var(--space-sm) 4px; 
+    border-radius: var(--radius-sm); 
+}
+.twm-status-details-popover .twm-issue-item:hover { 
+    background: rgba(255,255,255,0.06); 
+}
+.twm-status-details-popover .twm-node-cell .twm-node-name { 
+    font-weight: 500; 
+}
+.twm-preview-table-wrap { border: 1px solid #2a2a2a; border-radius: var(--radius-sm); }
+.twm-status-popup .twm-pill-count {
+    margin-left: var(--space-xs);
+    background: var(--surface-2);
+    border: 1px solid #444;
+    color: #ddd;
+    padding: 1px 6px;
+    border-radius: var(--radius-pill);
+    font-size: var(--font-size-xs);
+    line-height: 16px;
+}
+.twm-status-popup .twm-node-cell { display: inline-flex; align-items: center; gap: var(--space-sm); color: #cfcfcf; }
+.twm-status-popup .twm-node-cell .twm-node-name { font-weight: 500; }
+.twm-status-popup .twm-msg-cell { display: inline-flex; align-items: center; gap: var(--space-sm); color: #ddd; min-width: 0; }
+/* Styled tooltip for has-tooltip elements - uses JS-driven positioning */
+.twm-has-tooltip { position: relative; }
+/* Hide CSS-based tooltip, use JS tooltip instead for proper stacking */
+.twm-has-tooltip[data-tooltip]::after,
+.twm-has-tooltip[data-tooltip]::before {
+    display: none;
+}
+/* LaTeX-rendered tooltip (JS-driven, positioned dynamically) */
+.twm-latex-tooltip {
+    position: fixed;
+    z-index: var(--z-toast);
+    background: #2b2b2b;
+    color: var(--text-body);
+    border: 1px solid #454545;
+    border-radius: var(--radius-md);
+    padding: 10px 14px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.45), 0 0 1px rgba(255,255,255,0.1);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 120ms ease-out;
+    max-width: 320px;
+    font-size: var(--font-size-sm);
+    line-height: 1.5;
+}
+/* Tooltip header (first line) styling */
+.twm-latex-tooltip strong {
+    display: block;
+    color: var(--text-bright);
+    font-size: var(--font-size-md);
+    font-weight: 600;
+    margin-bottom: var(--space-xs);
+    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
+}
+/* Arrow base (border color) */
+.twm-latex-tooltip::before {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    display: block;
+}
+/* Arrow fill (background color) */
+.twm-latex-tooltip::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    display: block;
+}
+/* Top placement - arrow uses --notch-offset for dynamic positioning */
+.twm-latex-tooltip[data-placement="top"]::before {
+    bottom: -7px;
+    left: calc(50% + var(--notch-offset, 0px));
+    transform: translateX(-50%);
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-top: 7px solid #454545;
+    border-bottom: 0;
+}
+.twm-latex-tooltip[data-placement="top"]::after {
+    bottom: -5px;
+    left: calc(50% + var(--notch-offset, 0px));
+    transform: translateX(-50%);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-top: 6px solid #2b2b2b;
+    border-bottom: 0;
+}
+/* Bottom placement - arrow uses --notch-offset for dynamic positioning */
+.twm-latex-tooltip[data-placement="bottom"]::before {
+    top: -7px;
+    left: calc(50% + var(--notch-offset, 0px));
+    transform: translateX(-50%);
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    border-bottom: 7px solid #454545;
+    border-top: 0;
+}
+.twm-latex-tooltip[data-placement="bottom"]::after {
+    top: -5px;
+    left: calc(50% + var(--notch-offset, 0px));
+    transform: translateX(-50%);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid #2b2b2b;
+    border-top: 0;
+}
+/* Left placement - arrow uses --notch-offset for dynamic positioning */
+.twm-latex-tooltip[data-placement="left"]::before {
+    top: calc(50% + var(--notch-offset, 0px));
+    right: -7px;
+    transform: translateY(-50%);
+    border-top: 7px solid transparent;
+    border-bottom: 7px solid transparent;
+    border-left: 7px solid #454545;
+    border-right: 0;
+}
+.twm-latex-tooltip[data-placement="left"]::after {
+    top: calc(50% + var(--notch-offset, 0px));
+    right: -5px;
+    transform: translateY(-50%);
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 6px solid #2b2b2b;
+    border-right: 0;
+}
+/* Right placement - arrow uses --notch-offset for dynamic positioning */
+.twm-latex-tooltip[data-placement="right"]::before {
+    top: calc(50% + var(--notch-offset, 0px));
+    left: -7px;
+    transform: translateY(-50%);
+    border-top: 7px solid transparent;
+    border-bottom: 7px solid transparent;
+    border-right: 7px solid #454545;
+    border-left: 0;
+}
+.twm-latex-tooltip[data-placement="right"]::after {
+    top: calc(50% + var(--notch-offset, 0px));
+    left: -5px;
+    transform: translateY(-50%);
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-right: 6px solid #2b2b2b;
+    border-left: 0;
+}
+/* Notification center (js_new) */
+.twm-notification-center {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+    pointer-events: none;
+    min-width: 300px;
+    width: 100%;
+}
+.twm-notification-center__list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+}
+.twm-notification__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    margin-bottom: var(--space-sm);
+}
+.twm-notification__title {
+    font-weight: 600;
+    font-size: var(--font-size-md);
+    color: #f5f5f5;
+}
+.twm-notification__timestamp {
+    margin-left: auto;
+    font-size: var(--font-size-xs);
+    color: #8c8c8c;
+}
+.twm-notification__close {
+    width: 22px;
+    height: 22px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: rgba(255, 255, 255, 0.06);
+    color: #999;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    flex-shrink: 0;
+    margin-left: var(--space-xs);
+    transition: background var(--transition-fast), color var(--transition-fast);
+}
+.twm-notification__close:hover {
+    background: rgba(255, 255, 255, 0.14);
+    color: var(--text-bright);
+}
+.twm-notification__body {
+    font-size: var(--font-size-sm);
+    line-height: 1.45;
+}
+.twm-notification__description {
+    margin-top: var(--space-sm);
+    font-size: var(--font-size-xs);
+    color: #bcbcbc;
+}
+.twm-notification__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+    justify-content: flex-end;
+    margin-top: 10px;
+}
+.twm-notification__action-btn {
+    border: 1px solid #3a3a3a;
+    background: #2a2a2c;
+    color: var(--text-primary);
+    border-radius: var(--radius-sm);
+    padding: var(--space-xs) 10px;
+    font-size: var(--font-size-xs);
+    cursor: pointer;
+}
+.twm-notification__action-btn:hover {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+/* Notification history (bottom bar bell + popover) */
+.twm-notification-history__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background: transparent;
+    border: none;
+    color: #b5b5b5;
+    cursor: pointer;
+    height: 20px;
+    padding: 0 6px;
+}
+.twm-notification-history__trigger:hover {
+    color: var(--text-bright);
+    background: rgba(255, 255, 255, 0.08);
+}
+.twm-notification-history__badge {
+    position: absolute;
+    top: -4px;
+    right: -2px;
+    min-width: 14px;
+    height: 14px;
+    border-radius: 7px;
+    background: var(--accent);
+    color: var(--text-bright);
+    font-size: 9px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 3px;
+    line-height: 1;
+}
+.twm-notification-history__panel {
+    position: fixed;
+    z-index: 9999;
+    width: 360px;
+    max-height: 420px;
+    background: #1f1f20;
+    border: 1px solid #2f2f31;
+    border-radius: var(--radius-lg);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    display: flex;
+    flex-direction: column;
+    animation: notification-in 160ms ease-out;
+}
+.twm-notification-history__header {
+    display: flex;
+    align-items: center;
+    padding: 10px 12px;
+    border-bottom: 1px solid #2f2f31;
+    gap: var(--space-md);
+}
+.twm-notification-history__title {
+    font-size: var(--font-size-md);
+    font-weight: 600;
+    color: #f5f5f5;
+    flex: 1;
+}
+.twm-notification-history__clear-btn,
+.twm-notification-history__close-btn {
+    width: 20px;
+    height: 20px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: #b5b5b5;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+.twm-notification-history__clear-btn:hover,
+.twm-notification-history__close-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: var(--text-bright);
+}
+.twm-notification-history__list {
+    overflow-y: auto;
+    flex: 1;
+    padding: var(--space-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+.twm-notification-history__item {
+    background: #252527;
+    border: 1px solid #2f2f31;
+    border-left: 3px solid #4fc1ff;
+    border-radius: var(--radius-md);
+    padding: var(--space-md) 10px;
+    font-size: var(--font-size-sm);
+}
+.twm-notification-history__item-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    margin-bottom: var(--space-xs);
+}
+.twm-notification-history__item-title {
+    font-weight: 600;
+    font-size: var(--font-size-sm);
+    color: var(--text-primary);
+}
+.twm-notification-history__item-time {
+    margin-left: auto;
+    font-size: 10px;
+    color: #8c8c8c;
+}
+.twm-notification-history__item-body {
+    color: #bcbcbc;
+    line-height: 1.4;
+}
+.twm-notification-history__empty {
+    text-align: center;
+    color: #6c6c6c;
+    padding: var(--space-2xl) 12px;
+    font-size: var(--font-size-sm);
+}
+.twm-data-page__search {
+    min-width: 200px;
+    padding: var(--space-md) 10px;
+    border-radius: var(--radius-md);
+    border: 1px solid #323234;
+    background: #141415;
+    color: inherit;
+}
+/* ==========================================================================
+   Preview Table - Unified data table component
+   Used for: series preview, import wizard preview, scenario results
+   ========================================================================== */
+
+.twm-preview-table-wrap {
+    border: 1px solid #2a2a2a;
+    border-radius: var(--radius-sm);
+}
+/* The body wrap's 1px border insets the body table by 1px on the left.
+ * The header table sits in a separate wrap, so give that wrap a matching
+ * 1px (transparent) left/right border or the two tables' columns would
+ * sit 1px apart — a constant header/body offset even at rest. */
+.twm-preview-table-header-wrap {
+    border-left: 1px solid transparent;
+    border-right: 1px solid transparent;
+}
+.twm-preview-table-wrap--wizard {
+    max-height: none;
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+}
+.twm-preview-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-size-sm);
+}
+.twm-preview-table th,
+.twm-preview-table td {
+    border-bottom: 1px solid #2a2a2a;
+    padding: var(--space-sm) 8px;
+    white-space: nowrap;
+    /* Never spill text past the column. Once columns are locked to fixed
+     * widths, over-long content is clipped with an ellipsis; the full
+     * value is available via a hover tooltip the DataTable attaches. */
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* Drag-to-resize: a thin grab handle on the right edge of each header
+ * cell. Square (no radius), highlights on hover / during the drag. */
+.twm-preview-table th.twm-dt-col {
+    position: relative;
+}
+.twm-preview-table th .twm-dt-col-resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+    user-select: none;
+    z-index: 2;
+}
+.twm-preview-table th .twm-dt-col-resizer:hover,
+body.twm-dt-col-resizing .twm-preview-table th .twm-dt-col-resizer {
+    background: rgba(203, 75, 22, 0.35);
+}
+body.twm-dt-col-resizing {
+    cursor: col-resize;
+    user-select: none;
+}
+/* Transient measurement pass (DataTable._syncHeaderWidths): let every
+ * column expand to its natural content width so we can read it, ignoring
+ * the fixed/pinned caps (the 150px first column, the 80px min on the rest)
+ * and the filter-row inputs. Toggled on for a single synchronous reflow,
+ * then removed before paint — never visible. */
+.twm-preview-table.twm-dt-measuring {
+    table-layout: auto !important;
+    width: max-content !important;
+}
+.twm-preview-table.twm-dt-measuring th,
+.twm-preview-table.twm-dt-measuring td {
+    width: auto !important;
+    min-width: 0 !important;
+    max-width: none !important;
+}
+.twm-preview-table.twm-dt-measuring .twm-data-table__filter-row {
+    display: none !important;
+}
+.twm-preview-table th {
+    position: sticky;
+    top: 0;
+    background: #222;
+    color: #aaa;
+    font-weight: 600;
+    text-align: left;
+}
+.twm-preview-table td {
+    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
+    font-variant-numeric: tabular-nums;
+}
+/* Time column (first column) styling */
+.twm-preview-table th:first-child,
+.twm-preview-table td:first-child {
+    width: 120px;
+    min-width: 100px;
+    font-weight: 500;
+    color: #bbb;
+}
+/* Data columns have flexible width */
+.twm-preview-table th:not(:first-child),
+.twm-preview-table td:not(:first-child) {
+    width: auto;
+    min-width: 80px;
+}
+/* Alternating row backgrounds */
+.twm-preview-table tbody tr:nth-child(even) {
+    background: rgba(255, 255, 255, 0.02);
+}
+/* Hover state (disabled in wizard via modifier) */
+.twm-preview-table:not(.twm-preview-table--readonly) tr:hover td {
+    background: rgba(255, 255, 255, 0.04);
+}
+/* Wizard mode: uniform column widths, no selection */
+.twm-preview-table-wrap--wizard .twm-preview-table {
+    table-layout: auto;
+    min-width: 600px;
+}
+.twm-preview-table-wrap--wizard .twm-preview-table th,
+.twm-preview-table-wrap--wizard .twm-preview-table td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* Wizard mode: first column same as others */
+.twm-preview-table-wrap--wizard .twm-preview-table th:first-child,
+.twm-preview-table-wrap--wizard .twm-preview-table td:first-child {
+    width: auto;
+    min-width: auto;
+}
+.twm-expression-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+.twm-expression-field__helper {
+    font-size: var(--font-size-xs);
+    color: #8c8c8c;
+}
+.twm-slider-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    position: relative;
+    z-index: 1;
+}
+.twm-slider-field__input {
+    width: 100%;
+    height: 20px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    margin: 0;
+    position: relative;
+    z-index: 2;
+    touch-action: pan-x; /* Allow horizontal sliding/panning */
+    pointer-events: auto !important;
+}
+.twm-slider-field__input::-webkit-slider-runnable-track {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+}
+.twm-slider-field__input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #569cd6;
+    margin-top: -5px;
+    cursor: grab;
+    border: 2px solid var(--surface-0);
+}
+.twm-slider-field__input::-webkit-slider-thumb:active {
+    cursor: grabbing;
+    background: #6eb3e9;
+}
+.twm-slider-field__input::-moz-range-track {
+    height: 6px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+}
+.twm-slider-field__input::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: #569cd6;
+    cursor: grab;
+    border: 2px solid var(--surface-0);
+}
+/* ===== Sortable List Component ===== */
+.twm-sortable-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+.twm-sortable-list__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+.twm-sortable-list__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-sm) 8px;
+    background: #2a2a2c;
+    border: 1px solid #3a3a3c;
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-normal), background var(--transition-normal);
+}
+.twm-sortable-list__row:hover {
+    border-color: #454547;
+}
+.twm-sortable-list__handle {
+    cursor: grab;
+    color: #6e6e70;
+    display: flex;
+    align-items: center;
+    padding: var(--space-xxs);
+    opacity: 0.6;
+    transition: opacity var(--transition-normal), color var(--transition-normal);
+}
+.twm-sortable-list__handle:hover {
+    opacity: 1;
+    color: #8c8c8c;
+}
+.twm-sortable-list__handle:active {
+    cursor: grabbing;
+}
+.twm-sortable-list__drop {
+    height: 2px;
+    margin: 1px 0;
+    background: #569cd6;
+    pointer-events: none;
+}
+.twm-sortable-list__content {
+    flex: 1;
+    min-width: 0;
+}
+.twm-sortable-list__remove {
+    display: flex;
+    align-items: center;
+    padding: var(--space-xs);
+    background: transparent;
+    border: none;
+    color: #8c8c8c;
+    cursor: pointer;
+    border-radius: var(--radius-sm);
+    transition: color var(--transition-normal), background var(--transition-normal);
+}
+.twm-sortable-list__remove:hover {
+    color: #f14c4c;
+    background: rgba(241, 76, 76, 0.1);
+}
+.twm-sortable-list__remove:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+.twm-sortable-list__remove:disabled:hover {
+    color: #8c8c8c;
+    background: transparent;
+}
+.twm-sortable-list__add {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) 14px;
+    border-radius: var(--radius-md);
+    border: 1px solid #454547;
+    background: #2a2a2c;
+    color: #b0b0b0;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    cursor: pointer;
+    transition: border-color var(--transition-normal), color var(--transition-normal), background var(--transition-normal);
+    margin-top: var(--space-md);
+}
+.twm-sortable-list__add:hover {
+    border-color: #569cd6;
+    color: #569cd6;
+    background: rgba(86, 156, 214, 0.12);
+}
+.twm-sortable-list__add:active {
+    background: rgba(86, 156, 214, 0.2);
+}
+.twm-sortable-list__empty {
+    padding: var(--space-xl);
+    text-align: center;
+    color: #6e6e70;
+    font-size: var(--font-size-sm);
+    font-style: italic;
+    border: 1px dashed #3a3a3c;
+    border-radius: var(--radius-md);
+    background: rgba(42, 42, 44, 0.5);
+}
+.twm-sortable-list__input {
+    flex: 1;
+    min-width: 0;
+    padding: var(--space-xs) 8px;
+    background: var(--surface-0);
+    border: 1px solid #3a3a3c;
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+    font-family: 'Consolas', 'Monaco', monospace;
+}
+.twm-sortable-list__input:focus {
+    outline: none;
+    border-color: #569cd6;
+}
+/* Global Top Bar (fixed at top) */
+.twm-global-top-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 35px;
+    min-height: 35px;  /* Prevent shrinking */
+    max-height: 35px;  /* Prevent growing */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #323233;
+    color: var(--text-body);
+    border-bottom: 1px solid var(--surface-0);
+    padding: 0 0px;
+    width: 100%;
+    box-sizing: border-box;
+    z-index: 7000; /* Above managed windows (6000-6999), backdrop (1500), and content */
+    overflow: visible; /* allow dropdowns to extend below */
+}
+/* Prevent flex wrapping and enable shrink on sections */
+.twm-global-top-bar, .twm-global-top-bar .twm-bar-left, .twm-global-top-bar .twm-bar-center, .twm-global-top-bar .twm-bar-right {
+    min-width: 0; /* allow flex children to shrink */
+}
+.twm-bar-center {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-panel-toggles { flex-wrap: nowrap; }
+.twm-global-bottom-bar {
+    display: flex;
+    justify-content: space-between; 
+    align-items: center;
+    background-color: var(--surface-0);
+    color: var(--text-bright);
+    height: 20px;
+    padding: 0 0px;
+    width: 100%;
+    box-sizing: border-box; 
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: var(--z-modal);
+    border-top: 1px solid var(--surface-3);
+}
+/* Left, Center, and Right Sections */
+.twm-bar-left {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0;
+}
+/* Generic status indicator styles (bottom bar left) */
+.twm-status-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-sm);
+    height: 100%;
+    line-height: 20px; /* match .global-bottom-bar height */
+    padding: 0 10px; /* inner padding for readability */
+    margin: 0;
+    border-radius: 0;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: var(--text-bright);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color 0.2s;
+}
+.twm-bar-center {
+    flex: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.twm-bar-right {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 10px;
+}
+.twm-panel-toggles {
+    display: flex;
+    gap: 5px;
+}
+.twm-panel-toggle-btn {
+    background: transparent;
+    border: none;
+    color: #7f7f7f;
+    padding: var(--space-xs) 6px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease, color 0.2s ease;
+}
+.twm-panel-toggle-btn:hover {
+    background-color: #3f4040;
+}
+.twm-panel-toggle-btn:active {
+    background: #1a1a1a;
+}
+/* Disabled state for panel toggle buttons: darker color and no hover/active effects */
+.twm-panel-toggle-btn:disabled,
+.twm-panel-toggle-btn[aria-disabled="true"] {
+    color: #4d4d4d;
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+.twm-panel-toggle-btn:disabled:hover,
+.twm-panel-toggle-btn[aria-disabled="true"]:hover {
+    background-color: transparent;
+}
+.twm-panel-toggle-btn:disabled:active,
+.twm-panel-toggle-btn[aria-disabled="true"]:active {
+    background: transparent;
+}
+/* Fixed-left vertical icon bar */
+.twm-fl-bar {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--space-sm);
+    height: 100%;
+}
+.twm-fl-item {
+    background: transparent;
+    border: none;
+    border-left: 2px solid transparent; /* space reserved for active indicator */
+    color: #9e9e9e; /* default grey for inactive */
+    width: 100%;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
+}
+.twm-fl-item:hover {
+    color: var(--text-bright); /* hovered icons become pure white */
+    background: transparent;
+}
+.twm-fl-item:focus-visible {
+    outline: 2px solid var(--accent-bright);
+    outline-offset: -2px;
+}
+/* Unified collapsible arrow system */
+.twm-collapsible-arrow {
+    transition: transform 0.2s ease;
+    transform: rotate(0deg); /* Default: pointing down (expanded) */
+    font-size: 10px;
+    display: inline-block;
+    text-align: center;
+    color: var(--text-secondary);
+}
+/* ── Top-bar Breadcrumb ─────────────────────────────────────── */
+
+.twm-topbar-breadcrumb {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 4px;
+    flex: 1;
+    min-width: 0;
+}
+.twm-topbar-breadcrumb__list {
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: var(--space-xxs);
+}
+.twm-topbar-breadcrumb__item {
+    display: flex;
+    align-items: center;
+}
+.twm-topbar-breadcrumb__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 3px 8px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--text-muted, var(--text-muted));
+    font-family: inherit;
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+    white-space: nowrap;
+    transition: color var(--transition-normal), background var(--transition-normal);
+}
+.twm-topbar-breadcrumb__link:hover {
+    color: #64b5f6;
+    background: rgba(100, 181, 246, 0.08);
+}
+/* Brief click-feedback flash applied by tile_breadcrumb.js so users
+ * can tell the click landed even before the page swaps. */
+.twm-tile-breadcrumb__link--flash {
+    background: rgba(100, 181, 246, 0.35) !important;
+    color: #fff !important;
+}
+.twm-topbar-breadcrumb__separator {
+    color: #555;
+    font-size: var(--font-size-lg);
+    margin: 0 1px;
+    user-select: none;
+}
+.twm-topbar-breadcrumb__icon {
+    font-size: var(--font-size-lg);
+}
+.twm-topbar-breadcrumb__item--current {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 3px 0;
+}
+.twm-topbar-breadcrumb__current {
+    color: var(--text-secondary, #aaa);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    white-space: nowrap;
+}
+.twm-topbar-breadcrumb__item--current .twm-topbar-breadcrumb__icon {
+    color: var(--text-muted, var(--text-muted));
+}
+.twm-menu-bar {
+    display: flex;
+    align-items: center;
+    gap: 1px;
+    min-height: 25px;
+}
+.twm-menu-bar button, .twm-arrow-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: inherit;
+    color: #7f7f7f;
+    width: 25px;
+    height: 25px;
+    line-height: 25px;
+    border: none; 
+    border-radius: var(--radius-sm);
+    box-sizing: border-box;
+    margin-right: 5px;
+}
+.twm-menu-bar button:hover, .twm-arrow-toggle:hover {
+    background-color: #3f4040;
+}
+.twm-arrow-toggle {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    margin:3px;
+    padding:0;
+}
+.twm-tab-content {
+    flex-grow: 1;
+    overflow: auto; 
+    padding: 10px;
+    display: none;
+    background-color: var(--surface-0);
+}
+.twm-left-top .twm-tab-content {
+    background-image: radial-gradient(#333333 1px, transparent 1px); 
+    background-size: 20px 20px; 
+    background-repeat: repeat;
+}
+/* Inline tab close confirmation popover */
+.twm-tab-close-popover {
+    position: fixed;
+    z-index: 5000;
+    background: var(--surface-2);
+    color: var(--text-primary);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-sm);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.45);
+    padding: var(--space-md) 10px;
+    font-size: var(--font-size-sm);
+    pointer-events: auto;
+    --arrow-left: 16px;
+}
+/* Arrow pointing UP (popover is BELOW anchor) - default */
+.twm-tab-close-popover[data-placement="bottom"]::before,
+.twm-tab-close-popover::before {
+    content: "";
+    position: absolute;
+    top: -6px;
+    left: calc(var(--arrow-left) - 6px);
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 6px solid var(--surface-3); /* border color */
+}
+.twm-tab-close-popover[data-placement="bottom"]::after,
+.twm-tab-close-popover::after {
+    content: "";
+    position: absolute;
+    top: -5px;
+    left: calc(var(--arrow-left) - 5px);
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 5px solid var(--surface-2); /* background color */
+}
+/* Arrow pointing DOWN (popover is ABOVE anchor) */
+.twm-tab-close-popover[data-placement="top"]::before {
+    top: auto;
+    bottom: -6px;
+    border-bottom: none;
+    border-top: 6px solid var(--surface-3); /* border color */
+}
+.twm-tab-close-popover[data-placement="top"]::after {
+    top: auto;
+    bottom: -5px;
+    border-bottom: none;
+    border-top: 5px solid var(--surface-2); /* background color */
+}
+.twm-left-top {
+    position: relative;
+    background-color: var(--surface-2);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-shrink: 1;
+    min-height: 100px;
+}
+.twm-collapsible-box {
+    border-bottom: 1px solid var(--surface-3);
+    width: 100%;
+    position: relative;
+}
+.twm-collapsible-header {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    font-weight: bold;
+    font-size: 10px;
+    text-transform: uppercase;
+}
+/* Removed: unified collapsible arrow rules above */
+
+.twm-collapsible-content {
+    display: none;
+}
+/* ============================================
+   Autocomplete Field Component (legacy-variable style)
+   ============================================ */
+.twm-autocomplete-field {
+    position: relative;
+    width: 100%;
+}
+.twm-autocomplete-field__input-wrapper {
+    display: flex;
+    align-items: stretch;
+    gap: 0;
+    width: 100%;
+    position: relative;
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-sm);
+    background-color: var(--surface-1);
+    overflow: hidden;
+}
+/* Legacy variable style: magenta border */
+.twm-autocomplete-field--legacy-variable .twm-autocomplete-field__input-wrapper {
+    border: 1px solid var(--var-border, #d33682);
+}
+.twm-autocomplete-field--legacy-variable .twm-autocomplete-field__input-wrapper:focus-within {
+    border-color: var(--var-focus, #e85ba7);
+    box-shadow: 0 0 3px rgba(211, 54, 130, 0.3);
+}
+.twm-autocomplete-field__namespace-select {
+    background-color: var(--surface-2);
+    color: var(--text-body);
+    border: none;
+    border-right: 1px solid var(--surface-3);
+    border-radius: 0;
+    padding: var(--space-sm) 24px 6px 10px;
+    font-size: var(--font-size-sm);
+    font-family: 'Courier New', Courier, monospace;
+    outline: none;
+    cursor: pointer;
+    margin: 0;
+    box-sizing: border-box;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4d4d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 4px center;
+    background-size: 12px;
+    flex: 0 0 auto;
+    min-width: 60px;
+    max-width: 100px;
+}
+.twm-autocomplete-field__namespace-select:hover {
+    background-color: var(--surface-3);
+}
+.twm-autocomplete-field__namespace-select:focus {
+    outline: none;
+    background-color: #363636;
+}
+.twm-autocomplete-field__input-wrapper .twm-autocomplete-field__input {
+    flex: 1 1 auto;
+    background-color: transparent !important;
+    color: var(--text-body);
+    border: none !important;
+    border-radius: 0 !important;
+    padding: var(--space-sm) 10px;
+    font-size: var(--font-size-sm);
+    font-family: 'Courier New', Courier, monospace;
+    outline: none;
+    margin: 0 !important;
+    box-sizing: border-box;
+    min-width: 0;
+    box-shadow: none !important;
+}
+.twm-autocomplete-field__input-wrapper .twm-autocomplete-field__input:focus {
+    outline: none;
+    border: none !important;
+    box-shadow: none !important;
+}
+.twm-autocomplete-field__namespace {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--space-xxs) 8px;
+    font-size: var(--font-size-xs);
+    color: #c7f1ff;
+    background: rgba(0, 122, 204, 0.18);
+    border: 1px solid rgba(0, 122, 204, 0.35);
+    border-radius: var(--radius-pill);
+    white-space: nowrap;
+    text-transform: none;
+    cursor: default;
+    box-shadow: inset 0 0 0 1px rgba(0, 122, 204, 0.15);
+}
+.twm-autocomplete-field__namespace--toggle {
+    cursor: pointer;
+    background: linear-gradient(90deg, rgba(0, 122, 204, 0.24) 0%, rgba(0, 122, 204, 0.12) 100%);
+    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
+    border: 1px solid rgba(0, 122, 204, 0.5);
+    color: #e7f5ff;
+    outline: none;
+}
+.twm-autocomplete-field__namespace--toggle[data-scope="all"] {
+    background: linear-gradient(90deg, rgba(255, 140, 0, 0.35) 0%, rgba(255, 196, 0, 0.18) 100%);
+    border-color: rgba(255, 196, 0, 0.6);
+    color: #fff5dc;
+}
+.twm-autocomplete-field--scope-all .twm-autocomplete-field__input-wrapper {
+    border-color: rgba(255, 196, 0, 0.55);
+    box-shadow: inset 0 0 0 1px rgba(255, 196, 0, 0.25);
+}
+/* Variable autocomplete dropdown - matches legacy .variable-dropdown */
+.twm-autocomplete-field__dropdown {
+    position: fixed;
+    z-index: 10000000;
+    background: #2a2a2a;
+    border: 1px solid #444;
+    border-radius: var(--radius-sm);
+    max-height: 300px;
+    overflow-y: auto;
+    display: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+.twm-autocomplete-field__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    padding: var(--space-md) 12px;
+    cursor: pointer;
+    font-size: var(--font-size-md);
+    color: #ddd;
+    transition: background-color var(--transition-normal);
+}
+.twm-autocomplete-field__item:hover {
+    background-color: #3a3a3a;
+}
+.twm-autocomplete-field__icon {
+    font-size: var(--font-size-2xl);
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+/* Type-specific icon colors */
+.twm-autocomplete-field__item[data-type="constant"] .twm-autocomplete-field__icon { color: #4ec9b0; }
+.twm-autocomplete-field__item[data-type="parameter"] .twm-autocomplete-field__icon,
+.twm-autocomplete-field__item[data-type="param"] .twm-autocomplete-field__icon { color: #ce9178; }
+.twm-autocomplete-field__item[data-type="function"] .twm-autocomplete-field__icon { color: #dcdcaa; }
+.twm-autocomplete-field__item[data-type="stock"] .twm-autocomplete-field__icon { color: #569cd6; }
+.twm-autocomplete-field__item[data-type="flow"] .twm-autocomplete-field__icon { color: #c586c0; }
+.twm-autocomplete-field__item[data-type="operation"] .twm-autocomplete-field__icon { color: #9cdcfe; }
+.twm-autocomplete-field__item[data-type="variable"] .twm-autocomplete-field__icon { color: #4fc1ff; }
+.twm-autocomplete-field__label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-autocomplete-field__namespace-indicator {
+    color: #6a9fb5;
+    font-size: 10px;
+    flex-shrink: 0;
+    padding: 1px 5px;
+    background: rgba(106, 159, 181, 0.15);
+    border-radius: var(--radius-sm);
+    margin-left: var(--space-sm);
+}
+.twm-autocomplete-field__badge {
+    color: var(--text-muted);
+    font-size: var(--font-size-xs);
+    flex-shrink: 0;
+}
+.twm-autocomplete-field__helper {
+    margin-top: var(--space-xs);
+}
+/* Legacy variable variant - simple clean styling */
+.twm-autocomplete-field--legacy-variable .twm-autocomplete-field__input-wrapper {
+    border-color: var(--var-border, #d33682);
+}
+.twm-autocomplete-field--legacy-variable .twm-autocomplete-field__input-wrapper:focus-within {
+    border-color: var(--var-focus, #e85ba7);
+    box-shadow: 0 0 3px rgba(211, 54, 130, 0.3);
+}
+.twm-autocomplete-field--legacy-variable .twm-autocomplete-field__input {
+    font-family: 'Courier New', Courier, monospace;
+    color: var(--text-body);
+}
+.twm-autocomplete-field--disabled .twm-autocomplete-field__input {
+    background-color: #1a1a1c;
+    color: #8c8c8c;
+    cursor: not-allowed;
+    opacity: 0.8;
+}
+/* Config Hint: Small hint text below inputs */
+.twm-config-hint {
+    display: block;
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    font-style: italic;
+    margin-top: var(--space-xs);
+}
+/* Give autocomplete helper text more breathing room to avoid overlapping adjacent inputs */
+.twm-autocomplete-field__helper.twm-config-hint {
+    min-height: 28px;
+    line-height: 1.35;
+    margin-top: var(--space-sm);
+}
+.twm-context-menu {
+    position: absolute;
+    /* Positioned relative to .container; keep absolute but ensure it overlays other content */
+    background: var(--surface-0);
+    color: var(--text-body);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-md);
+    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
+    z-index: 5000; /* Higher than nodes and selection rectangle */
+    display: none;
+    pointer-events: auto;
+    min-width: 180px;
+    padding: var(--space-sm) 0;
+    backdrop-filter: saturate(120%) blur(2px);
+}
+.twm-context-menu-item {
+    padding: var(--space-md) 14px;
+    cursor: pointer;
+    font-family: Segoe UI, Arial, sans-serif;
+    font-size: var(--font-size-md);
+    line-height: 1.2;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.twm-context-menu-item:hover {
+    background: #2a2a2a;
+}
+.twm-context-menu-item.twm-delete-node {
+    color: #ff6b6b;
+}
+/* Reliable bottom spacing for config hints even when margins collapse */
+.twm-config-hint::after {
+    content: "";
+    display: block;
+    height: 6px; /* effective bottom gap */
+}
+/* Window Chrome and Resize Handles */
+.twm-resize-handle {
+    position: fixed;
+    z-index: 9999;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+.twm-resize-handle:hover {
+    opacity: 0.3;
+}
+/* Hide resize handles when maximized */
+body.twm-window-maximized .twm-resize-handle {
+    display: none;
+}
+/* Shared sidebar controls (filter + icon buttons) - used by data, functions, etc. */
+.twm-sidebar-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: var(--space-xs) 8px;
+    border-bottom: 1px solid var(--surface-3);
+    flex-shrink: 0;
+    background: var(--surface-1);
+}
+.twm-sidebar-controls .twm-sidebar-search-icon {
+    font-size: var(--font-size-lg);
+    color: var(--text-muted);
+}
+.twm-sidebar-controls .twm-data-page__search {
+    flex: 1;
+    min-width: 0;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--text-secondary);
+    font-size: var(--font-size-sm);
+    font-family: inherit;
+    padding: var(--space-xxs) 0;
+}
+.twm-sidebar-controls .twm-data-page__search::placeholder {
+    color: var(--text-muted);
+}
+/* NOTE: Native scrollbar is hidden - using overlay scrollbar system instead */
+
+#data-page #data-series-view .twm-preview-table-wrap { 
+    flex: 1; 
+    min-height: 0; 
+    min-width: 0;        /* Allow shrinking below content width for overflow to work */
+    overflow: auto; 
+    max-height: none; 
+}
+/* Hide native scrollbar - overlay scrollbar provides the UI */
+#data-page #data-series-view .twm-preview-table-wrap::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+}
+#data-page #data-series-view .twm-preview-table-wrap {
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+}
+/* Pagination Controls */
+.twm-pagination-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--space-lg);
+    padding: var(--space-md) 0;
+    border-bottom: 1px solid #2a2a2a;
+    font-size: var(--font-size-sm);
+    position: relative;            /* anchor for overlay scrollbar */
+    overflow-x: auto;              /* allow horizontal scroll on narrow viewports */
+    overflow-y: hidden;
+    scrollbar-width: none;         /* Firefox: hide native scrollbar */
+    -ms-overflow-style: none;      /* IE/Edge legacy */
+}
+.twm-pagination-controls::-webkit-scrollbar { 
+    height: 0; /* Chrome/Edge: hide native scrollbar */ 
+}
+.twm-pagination-btn {
+    padding: var(--space-xs) 8px;
+    min-width: 32px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.twm-pagination-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+/* Preview Table Styles - Essential for data view */
+.twm-preview-table-wrap { 
+    overflow: auto; 
+    border: 1px solid #2a2a2a; 
+    border-radius: var(--radius-sm); 
+}
+.twm-preview-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    font-size: var(--font-size-sm);
+}
+.twm-preview-table th, .twm-preview-table td { 
+    border-bottom: 1px solid #2a2a2a; 
+    padding: var(--space-sm) 8px; 
+    white-space: nowrap;
+}
+.twm-preview-table th {
+    position: sticky;
+    top: 0;
+    background: #222;
+    color: #aaa;
+    font-weight: 600;
+    z-index: 3;
+    box-shadow: inset 0 -1px 0 #2a2a2a;
+}
+/* Header icons for simulation result variables */
+.twm-preview-table th .twm-header-icon {
+    font-size: var(--font-size-xl);
+    vertical-align: middle;
+    margin-right: var(--space-xs);
+    opacity: 0.7;
+}
+.twm-preview-table th .twm-header-icon[title="time"] {
+    color: #6c71c4; /* Purple for time */
+}
+.twm-preview-table th .twm-header-icon[title="stock"] {
+    color: #cb4b16; /* Orange for stocks */
+}
+.twm-preview-table th .twm-header-icon[title="flow"] {
+    color: #268bd2; /* Blue for flows */
+}
+.twm-preview-table th .twm-header-icon[title="indicator"] {
+    color: #859900; /* Green for indicators */
+}
+/* DataTable filter row */
+.twm-preview-table .twm-data-table__filter-row th {
+    position: sticky;
+    top: 32px;
+    background: var(--surface-0);
+    padding: var(--space-xs) 4px 6px;
+    box-shadow: inset 0 -1px 0 var(--border-strong);
+    z-index: 2;
+    font-weight: normal;
+    color: #ccc;
+}
+.twm-data-table__filter-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxs);
+}
+.twm-data-table__filter-input {
+    flex: 1;
+    min-width: 0;
+    padding: 3px 6px;
+    background: #2a2a2a;
+    color: #ccc;
+    border: 1px solid #3a3a3a;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xs);
+    font-family: inherit;
+    outline: none;
+    box-sizing: border-box;
+}
+.twm-data-table__filter-input:focus {
+    border-color: #569cd6;
+    background: #252525;
+}
+.twm-data-table__filter-input::placeholder {
+    color: var(--text-dim);
+    font-style: italic;
+}
+.twm-data-table__filter-dropdown-btn,
+.twm-data-table__filter-clear {
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: var(--space-xxs);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 2px;
+    line-height: 1;
+}
+.twm-data-table__filter-dropdown-btn:hover,
+.twm-data-table__filter-clear:hover {
+    color: #ccc;
+    background: rgba(255, 255, 255, 0.08);
+}
+/* Filter dropdown panel */
+.twm-data-table__filter-dropdown {
+    position: fixed;
+    z-index: 10001;
+    background: var(--surface-0);
+    border: 1px solid var(--surface-3);
+    border-radius: var(--radius-md);
+    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
+    padding: var(--space-lg);
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-md);
+}
+.twm-data-table__filter-dropdown-label {
+    display: block;
+    font-size: var(--font-size-xs);
+    color: #aaa;
+    margin-bottom: var(--space-xxs);
+}
+.twm-data-table__filter-dropdown-select,
+.twm-data-table__filter-dropdown-input {
+    width: 100%;
+    padding: 5px 8px;
+    background: #2a2a2a;
+    color: #ccc;
+    border: 1px solid #3a3a3a;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-family: inherit;
+    outline: none;
+    box-sizing: border-box;
+}
+.twm-data-table__filter-dropdown-select:focus,
+.twm-data-table__filter-dropdown-input:focus {
+    border-color: #569cd6;
+}
+.twm-data-table__filter-dropdown-select {
+    appearance: auto;
+    cursor: pointer;
+}
+.twm-data-table__filter-dropdown-between {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+.twm-data-table__filter-dropdown-actions {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--space-md);
+    margin-top: var(--space-xs);
+}
+.twm-data-table__filter-dropdown-btn-action {
+    flex: 1;
+    padding: 5px 12px;
+    border: 1px solid #3a3a3a;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xs);
+    cursor: pointer;
+    text-align: center;
+}
+.twm-data-table__filter-dropdown-btn-action--clear {
+    background: transparent;
+    color: #aaa;
+}
+.twm-data-table__filter-dropdown-btn-action--clear:hover {
+    background: rgba(255, 255, 255, 0.06);
+    color: #ccc;
+}
+.twm-data-table__filter-dropdown-btn-action--apply {
+    background: var(--accent);
+    color: var(--text-bright);
+    border-color: var(--accent);
+}
+.twm-data-table__filter-dropdown-btn-action--apply:hover {
+    background: var(--accent-hover);
+}
+.twm-preview-table tr:hover td {
+    background: rgba(255,255,255,0.04);
+}
+/* Time column (first column) styling */
+.twm-preview-table th:first-child,
+.twm-preview-table td:first-child {
+    width: 150px;
+    min-width: 150px;
+    max-width: 150px;
+    font-weight: 500;
+    color: #bbb;
+}
+/* Data columns have flexible width */
+.twm-preview-table th:not(:first-child),
+.twm-preview-table td:not(:first-child) {
+    width: auto;
+    min-width: 80px;
+}
+.twm-expression-modal__meta {
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    margin-top: var(--space-xs);
+}
+.twm-expression-modal__editor {
+    flex: 1;
+    min-height: 200px;
+    max-height: 400px;
+    resize: vertical;
+    border: none;
+    background: #0d0d0d;
+    color: #f0f0f0;
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: var(--font-size-md);
+    line-height: 1.6;
+    padding: var(--space-lg) 16px;
+    border-radius: 0 0 8px 8px;
+}
+.twm-expression-modal__editor:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--accent);
+}
+/* Expression modal window content (for ManagedWindow) */
+.twm-expression-modal__window-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+}
+.twm-expression-modal__editor-container {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+/* Saved indicator - appears in bottom right after autosave */
+.twm-expression-modal__saved-indicator {
+    position: absolute;
+    bottom: 8px;
+    right: 12px;
+    padding: var(--space-xs) 10px;
+    background: rgba(34, 139, 34, 0.9);
+    color: var(--text-bright);
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    border-radius: var(--radius-sm);
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+    pointer-events: none;
+    z-index: var(--z-sticky);
+}
+.twm-expression-modal__saved-indicator--visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+/* ============================================================================
+   Tree View Component - Reusable hierarchical tree styles
+   Used by: Functions Page, Data Page, and other hierarchical browsers
+   ============================================================================ */
+
+.twm-tree-view {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxs);
+}
+/* Tree Category (top-level collapsible section) */
+.twm-tree-category {
+    user-select: none;
+}
+.twm-tree-category > .twm-collapsible-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 3px 8px;
+    height: 25px;
+    box-sizing: border-box;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    cursor: pointer;
+    color: #ccc;
+}
+.twm-tree-category > .twm-collapsible-header:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+.twm-tree-category__icon {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.twm-tree-category__label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-tree-category__count {
+    font-size: 10px;
+    color: var(--text-dim);
+    font-weight: normal;
+    margin-left: auto;
+}
+.twm-tree-category > .twm-collapsible-content {
+    padding-left: var(--space-md);
+}
+/* Tree Node (expandable container with children) */
+.twm-tree-node {
+    user-select: none;
+}
+.twm-tree-node__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxs);
+    padding: 5px 8px;
+    box-sizing: border-box;
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    color: #ccc;
+    border-left: 2px solid transparent;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    transition: background 0.16s ease, border-color 0.16s ease;
+}
+.twm-tree-node__header:hover {
+    background: rgba(255, 255, 255, 0.04);
+}
+.twm-tree-node__toggle {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.twm-tree-node__icon {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.twm-tree-node__label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-tree-node__count {
+    font-size: 10px;
+    color: var(--text-dim);
+    margin-left: var(--space-xs);
+}
+.twm-tree-node__children {
+    padding-left: var(--space-xl);
+}
+.twm-tree-node__actions {
+    display: none;
+    gap: var(--space-xxs);
+    margin-left: auto;
+}
+.twm-tree-node__header:hover .twm-tree-node__actions {
+    display: flex;
+}
+.twm-tree-node__action-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+}
+.twm-tree-node__action-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ccc;
+}
+/* Tree Item (leaf node) */
+.twm-tree-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 5px 8px 5px 22px;
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    color: #ccc;
+    user-select: none;
+    border-left: 2px solid transparent;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    transition: background 0.16s ease, border-color 0.16s ease;
+}
+.twm-tree-item:last-child {
+    border-bottom: none;
+}
+.twm-tree-item:hover {
+    background: rgba(255, 255, 255, 0.04);
+}
+.twm-tree-item.twm-filter-match {
+    background: rgba(255, 200, 0, 0.1);
+}
+.twm-tree-item__icon {
+    width: 14px;
+    height: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+.twm-tree-item__icon--symbol {
+    font-family: 'Courier New', monospace;
+    font-style: italic;
+    font-weight: 600;
+    font-size: var(--font-size-xs);
+    color: #9a3a12;
+}
+.twm-tree-item__label {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-tree-item__subtitle {
+    font-size: 10px;
+    color: var(--text-dim);
+    margin-left: var(--space-xs);
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   Plot Popout Window
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.twm-plot-window-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #1a1a1a;
+    position: relative;
+}
+.twm-plot-window-container .twm-code-tabs-header {
+    display: flex;
+    align-items: center;
+    height: 35px;
+    background: #2a2a2a;
+    border-bottom: 1px solid var(--surface-0);
+    padding: 0 8px;
+    flex-shrink: 0;
+}
+/* Toolbar: modebar controls + action buttons */
+.twm-plot-window-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxs);
+    flex: 1;
+    min-width: 0;
+    margin-left: var(--space-md);
+}
+.twm-plot-window-toolbar__group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxs);
+    padding: 0 4px;
+}
+.twm-plot-window-toolbar__group + .twm-plot-window-toolbar__group {
+    border-left: 1px solid #444;
+}
+.twm-plot-window-toolbar .twm-btn-icon {
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all var(--transition-normal);
+}
+.twm-plot-window-toolbar .twm-btn-icon:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-bright);
+}
+.twm-plot-window-toolbar .twm-btn-icon.twm-is-active {
+    color: #4A90D9;
+    background: rgba(74, 144, 217, 0.15);
+}
+.twm-plot-window-toolbar .twm-btn-icon.twm-is-active:hover {
+    background: rgba(74, 144, 217, 0.25);
+}
+.twm-plot-window-content {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.twm-plot-tab-content {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+}
+.twm-plot-tab-content[data-tab="plot"] {
+    padding: var(--space-md);
+}
+.twm-plot-tab-content[data-tab="data"] {
+    padding: 0;
+}
+.twm-plot-window-chart {
+    flex: 1;
+    min-height: 0;
+    background: var(--surface-0);
+    border-radius: var(--radius-sm);
+    position: relative; /* Anchor for Plotly's positioning */
+}
+.twm-plot-window-chart svg {
+    width: auto !important;
+    height: auto !important;
+    z-index: auto !important;
+}
+/* Data tab table - use class selectors instead of data-tab */
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table-wrap {
+    flex: 1;
+    min-height: 0;
+    max-height: none !important;
+    overflow: auto;
+    border: none;
+    border-radius: 0;
+    max-height: none;
+}
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--font-size-sm);
+}
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table th,
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table td {
+    padding: var(--space-sm) 10px;
+    text-align: right;
+    border-bottom: 1px solid #2a2a2a;
+    white-space: nowrap;
+}
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table th:first-child,
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table td:first-child {
+    text-align: left;
+}
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table th {
+    background: #252525;
+    color: #ccc;
+    font-weight: 600;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table tbody tr:nth-child(odd) {
+    background: rgba(255, 255, 255, 0.02);
+}
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table tbody tr:hover {
+    background: rgba(74, 144, 217, 0.1);
+}
+.twm-plot-window-container .twm-plot-tab-content .twm-preview-table td {
+    color: #aaa;
+    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
+}
+/* ── Series visibility toggle panel ────────────────────────────────────── */
+
+.twm-plot-series-toggle-panel {
+    position: absolute;
+    z-index: var(--z-dropdown);
+    background: #2a2a2a;
+    border: 1px solid #444;
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    width: 220px;
+    max-height: 320px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.twm-plot-series-toggle-panel__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-md) 10px 6px;
+    border-bottom: 1px solid #3a3a3a;
+    flex-shrink: 0;
+}
+.twm-plot-series-toggle-panel__title {
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    color: #999;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.twm-plot-series-toggle-panel__header-actions {
+    display: flex;
+    gap: var(--space-sm);
+}
+.twm-plot-series-toggle-panel__action {
+    background: none;
+    border: none;
+    color: #6a9fd8;
+    font-size: var(--font-size-xs);
+    cursor: pointer;
+    padding: 0;
+}
+.twm-plot-series-toggle-panel__action:hover {
+    color: #8bb8ea;
+    text-decoration: underline;
+}
+.twm-plot-series-toggle-panel__list {
+    overflow-y: auto;
+    padding: var(--space-sm) 4px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxs);
+}
+.twm-plot-series-toggle-panel__item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-xs) 6px;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    color: #ccc;
+    cursor: pointer;
+}
+.twm-plot-series-toggle-panel__item:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+.twm-plot-series-toggle-panel__item input[type="checkbox"] {
+    accent-color: #268bd2;
+    flex-shrink: 0;
+}
+.twm-plot-series-toggle-panel__line-indicator {
+    width: 28px;
+    height: 14px;
+    flex-shrink: 0;
+    background: #1a1a2e;
+    border-radius: var(--radius-sm);
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
+    overflow: hidden;
+}
+.twm-plot-series-toggle-panel__line-indicator svg {
+    display: block;
+    width: 28px;
+    height: 14px;
+}
+.twm-plot-series-toggle-panel__axis-label {
+    font-size: 10px;
+    font-weight: 600;
+    color: var(--text-dim);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: var(--space-sm) 6px 2px;
+    border-top: 1px solid #3a3a3a;
+}
+.twm-plot-series-toggle-panel__axis-label:first-child {
+    border-top: none;
+    padding-top: var(--space-xxs);
+}
+.twm-plot-series-toggle-panel__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   Data Series Plot Window
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.twm-data-series-plot-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: #1a1a1a;
+}
+.twm-data-series-plot-actions {
+    display: flex;
+    gap: var(--space-xs);
+    padding: var(--space-xs) 8px;
+    border-bottom: 1px solid #2a2a2a;
+    justify-content: flex-end;
+    background: #1a1a1a;
+    flex-shrink: 0;
+}
+.twm-data-series-plot-body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+}
+/* Chart area */
+.twm-data-series-plot-chart {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    background: var(--surface-0);
+    position: relative;
+}
+.twm-data-series-plot-chart svg {
+    width: auto !important;
+    height: auto !important;
+    z-index: auto !important;
+}
+/* Config panel */
+.twm-data-series-plot-config {
+    width: 260px;
+    flex-shrink: 0;
+    border-left: 1px solid #2a2a2a;
+    background: var(--surface-0);
+    overflow-y: auto;
+    padding: var(--space-lg);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-lg);
+}
+.twm-data-series-plot-config__section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+.twm-data-series-plot-config__label {
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    color: #999;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.twm-data-series-plot-config select {
+    width: 100%;
+    padding: var(--space-xs) 6px;
+    background: var(--surface-1);
+    border: 1px solid #3a3a3a;
+    border-radius: var(--radius-sm);
+    color: #ccc;
+    font-size: var(--font-size-sm);
+    outline: none;
+}
+.twm-data-series-plot-config select:focus {
+    border-color: #268bd2;
+}
+.twm-data-series-plot-config__columns {
+    max-height: 200px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxs);
+}
+.twm-data-series-plot-config__column-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: 3px 4px;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    color: #ccc;
+    cursor: pointer;
+}
+.twm-data-series-plot-config__column-item:hover {
+    background: rgba(255, 255, 255, 0.04);
+}
+.twm-data-series-plot-config__color-swatch {
+    width: 16px;
+    height: 16px;
+    border-radius: 2px;
+    border: 1px solid #444;
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+}
+.twm-data-series-plot-config__color-swatch::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+.twm-data-series-plot-config__color-swatch::-webkit-color-swatch {
+    border: none;
+    border-radius: 1px;
+}
+.twm-data-series-plot-config input[type="checkbox"] {
+    accent-color: #268bd2;
+    flex-shrink: 0;
+}
+/* Computing Status Window */
+.twm-computing-status {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-xl);
+    padding: var(--space-2xl);
+    height: 100%;
+}
+.twm-computing-status__spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid #333;
+    border-top-color: #4a90d9;
+    border-radius: 50%;
+    animation: computing-spin 0.8s linear infinite;
+}
+.twm-computing-status__message {
+    font-size: var(--font-size-md);
+    color: #b0b0b0;
+    text-align: center;
+}
+.twm-computing-status__cancel-btn {
+    padding: var(--space-sm) 20px;
+    background: transparent;
+    border: 1px solid var(--text-dim);
+    border-radius: var(--radius-sm);
+    color: #ccc;
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+    transition: background var(--transition-normal), border-color var(--transition-normal);
+}
+.twm-computing-status__cancel-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: #999;
+}
+.twm-computing-status__cancel-btn:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+/* ── from etl_page.css ───────────────────────── */
+#etl-preview-bottom-panel .twm-preview-table-wrap {
+    max-height: none;
+}
+/* ─── Run Progress Dialog ─────────────────────────────────────────── */
+
+.twm-run-progress__body {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xl);
+    padding: var(--space-md) 0;
+}
+.twm-run-progress__spinner {
+    width: 24px;
+    height: 24px;
+    border: 3px solid rgba(255, 255, 255, 0.15);
+    border-top-color: var(--accent-color, var(--accent-bright));
+    border-radius: 50%;
+    flex-shrink: 0;
+    animation: etl-spin 0.8s linear infinite;
+}
+.twm-run-progress__message {
+    font-size: var(--font-size-md);
+    color: var(--text-primary, #ccc);
+    line-height: 1.4;
+}
+.twm-run-progress__stop-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--space-xs);
+}
+.twm-run-progress__stop-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: var(--text-secondary, #aaa);
+    border-radius: var(--radius-sm);
+    padding: var(--space-xs) 12px;
+    font-size: var(--font-size-sm);
+    cursor: pointer;
+    transition: border-color var(--transition-normal), color var(--transition-normal);
+}
+.twm-run-progress__stop-btn:hover:not(:disabled) {
+    border-color: #f44336;
+    color: #f44336;
+}
+.twm-run-progress__stop-btn:disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+/* ── from results_widgets.css ───────────────────────── */
+/* Error State */
+.twm-tile-error {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    gap: var(--space-md);
+    color: #ff6b6b;
+    font-size: var(--font-size-sm);
+}
+/* ===================================================================
+   REUSABLE ACTION DROPDOWN COMPONENT
+   Used by Add Scenario, Add Widget, and other action dropdowns
+   =================================================================== */
+
+.twm-action-dropdown-menu {
+    /* position/top/left set by ActionDropdown.position() via inline style */
+    position: fixed;
+    min-width: 220px;
+    padding: var(--space-md);
+    background: linear-gradient(145deg, rgba(30, 32, 38, 0.98), rgba(24, 26, 32, 0.96));
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 10px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+    z-index: var(--z-toast);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.16s ease;
+}
+.twm-action-dropdown-menu[hidden] {
+    display: none !important;
+}
+/* Dropdown options */
+.twm-action-dropdown-option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 10px 12px;
+    margin-bottom: var(--space-xs);
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    color: rgba(255, 255, 255, 0.85);
+    font-family: inherit;
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    text-align: left;
+    box-sizing: border-box;
+    transition: background var(--transition-normal), border-color var(--transition-normal);
+}
+.twm-action-dropdown-option:last-child {
+    margin-bottom: 0;
+}
+.twm-action-dropdown-option:hover,
+.twm-action-dropdown-option:focus {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.08);
+    outline: none;
+}
+.twm-action-dropdown-option .twm-option-icon {
+    font-size: 20px;
+    color: #78b9ff;
+    flex-shrink: 0;
+}
+.twm-action-dropdown-option:hover .twm-option-icon,
+.twm-action-dropdown-option:focus .twm-option-icon {
+    color: #9ecfff;
+}
+.twm-action-dropdown-option .twm-option-label {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-action-dropdown-option .twm-option-desc {
+    font-size: var(--font-size-xs);
+    color: rgba(255, 255, 255, 0.5);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* ── from code.css ───────────────────────── */
+/* Code language tabs */
+.twm-code-tabs-header {
+  display: flex;
+  align-items: center;
+  height: 35px;
+  background: #2a2a2a;
+  border-bottom: 1px solid var(--surface-0);
+  gap: var(--space-xs);
+  flex: 0 0 auto;
+}
+.twm-code-tabs {
+  display: flex;
+  gap: var(--space-xxs);
+  height: 35px;
+}
+.twm-code-tab {
+  height: 35px;
+  padding: 0 12px;
+  display: flex;
+  align-items: center;
+  background: transparent;
+  color: var(--text-muted);
+  border: none;
+  border-radius: var(--radius-sm) 3px 0 0;
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  transition: all var(--transition-normal);
+  position: relative;
+}
+.twm-code-tab:hover {
+  background: #333;
+  color: #ccc;
+}
+
+/* ── from global_search.css ───────────────────────── */
+/* Search wrapper - contains icon, input, hint */
+.twm-global-search-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    height: 26px;
+    min-width: 200px;
+    max-width: 320px;
+    width: 100%;
+    padding: 0 10px;
+    background: #2b2b2c;
+    border: 1px solid #3a3a3b;
+    border-radius: 5px;
+    transition: border-color var(--transition-normal), background var(--transition-normal);
+}
+.twm-global-search-wrapper:focus-within {
+    border-color: var(--accent-bright);
+    background: var(--surface-1);
+}
+/* Dropdown container */
+.twm-global-search-dropdown {
+    position: absolute;
+    top: calc(100% + 4px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: 320px;
+    max-height: 400px;
+    overflow-y: auto;
+    background: #2b2b2c;
+    border: 1px solid #3a3a3b;
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    z-index: 3500;
+}
+/* Scrollbar styling for dropdown */
+.twm-global-search-dropdown::-webkit-scrollbar {
+    width: 6px;
+}
+.twm-global-search-dropdown::-webkit-scrollbar-track {
+    background: transparent;
+}
+.twm-global-search-dropdown::-webkit-scrollbar-thumb {
+    background: #4a4a4a;
+    border-radius: var(--radius-sm);
+}
+.twm-global-search-dropdown::-webkit-scrollbar-thumb:hover {
+    background: #5a5a5a;
+}
+
+/* ── from zoom_controls.css ───────────────────────── */
+/**
+ * Zoom Controls Styles
+ *
+ * Styles for the canvas zoom control buttons and global zoom indicator.
+ * Buttons: positioned in the bottom-right corner of the canvas.
+ * Indicator: positioned in the global bottom-right of the application.
+ */
+
+/* Ensure .twm-left-top is a positioning context for the zoom controls */
+.twm-left-top {
+    position: relative;
+}
+
+/* ── from managed_window.css ───────────────────────── */
+/**
+ * Managed Window Styles
+ * Styles for draggable/resizable window component with taskbar integration.
+ */
+
+/* ========== Window Container ========== */
+
+.twm-managed-window {
+    position: fixed;
+    background: #1a1a1a;
+    border: 1px solid var(--surface-3);
+    border-radius: 0;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    min-width: 200px;
+    min-height: 100px;
+    /* Enable transitions for minimize/maximize animations */
+    transition: transform 0.2s ease-out, opacity 0.2s ease-out, box-shadow var(--transition-normal);
+}
+.twm-managed-window:focus-within {
+    border-color: #505050;
+}
+/* Minimize animation class — targets taskbar item via CSS custom properties */
+.twm-managed-window--minimizing {
+    transform: translate(var(--mw-target-x, 0px), var(--mw-target-y, 100vh)) scale(var(--mw-target-scale, 0.1));
+    opacity: 0;
+    pointer-events: none;
+}
+/* Restore animation class — animates from taskbar item position */
+.twm-managed-window--restoring {
+    animation: windowRestore 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+/* ========== Backdrop (for modal windows) ========== */
+
+.twm-managed-window__backdrop {
+    position: fixed;
+    /* Position between top bar (35px) and bottom bar (20px) */
+    top: 35px;
+    left: 0;
+    right: 0;
+    bottom: 20px;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(2px);
+}
+/* Per-modal overrides of the dim/blur above are set as inline styles by
+   ManagedWindow from its `backdropBlur` / `backdropOpacity` options — not
+   via modifier classes here. */
+
+/* ========== Top Bar ========== */
+
+.twm-managed-window__topbar {
+    height: 28px;
+    min-height: 28px;
+    background: var(--surface-1);
+    border-bottom: 1px solid var(--surface-3);
+    display: flex;
+    align-items: center;
+    padding: 0 8px;
+    cursor: move;
+    user-select: none;
+    gap: var(--space-sm);
+}
+/* Non-draggable windows (modals) */
+.twm-managed-window--no-drag .twm-managed-window__topbar {
+    cursor: default;
+}
+.twm-managed-window__icon {
+    font-size: var(--font-size-lg);
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+.twm-managed-window__title {
+    flex: 1;
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.twm-managed-window__buttons {
+    display: flex;
+    gap: var(--space-xxs);
+    margin-left: auto;
+}
+/* Window buttons - white icons on transparent background */
+/* Use button element + class selector to override global "button" styles from main_new.css */
+button.twm-managed-window__btn {
+    width: 24px;
+    height: 20px;
+    border: none;
+    background: none;
+    background-color: transparent;
+    color: var(--text-bright);
+    cursor: pointer;
+    border-radius: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    outline: none;
+    box-shadow: none;
+    transition: background-color 0.1s, color 0.1s;
+}
+/* Focus state - no outline */
+button.twm-managed-window__btn:focus,
+button.twm-managed-window__btn:focus-visible {
+    outline: none;
+    box-shadow: none;
+    background: none;
+    background-color: transparent;
+}
+/* Hover state - dark gray background */
+button.twm-managed-window__btn:hover {
+    background: var(--surface-3);
+    background-color: var(--surface-3);
+    color: var(--text-bright);
+}
+/* Active state */
+button.twm-managed-window__btn:active {
+    background: #4a4a4a;
+    background-color: #4a4a4a;
+}
+/* Close button hover - red */
+button.twm-managed-window__btn--close:hover {
+    background: #c42b1c;
+    background-color: #c42b1c;
+    color: var(--text-bright);
+}
+.twm-managed-window__btn svg {
+    width: 10px;
+    height: 10px;
+}
+/* Override global path stroke from main_new.css which sets stroke: #2c3e50 on all paths */
+/* Need high specificity to beat: path:not(.connection-path):not(.connection-hitbox) = (0,2,1) */
+.twm-managed-window .twm-managed-window__btn svg path,
+.twm-managed-window .twm-managed-window__btn svg rect,
+button.twm-managed-window__btn svg path,
+button.twm-managed-window__btn svg rect {
+    stroke: var(--text-bright);
+    stroke-width: 1.5;
+}
+/* ========== Content Area ========== */
+
+.twm-managed-window__content {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+/* ========== Resize Handles ========== */
+
+.twm-managed-window__resize {
+    position: absolute;
+    z-index: var(--z-sticky);
+}
+/* ========== Taskbar in Bottom Bar ========== */
+
+.twm-bar-windows {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 0 4px;
+    height: 100%;
+}
+.twm-bar-windows:empty {
+    display: none;
+}
+/* Taskbar dividers */
+.twm-bar-windows__divider {
+    width: 1px;
+    height: 100%;
+    background: var(--surface-3);
+}
+.twm-bar-windows__divider--left {
+    margin-right: var(--space-xs);
+}
+.twm-bar-windows__divider--right {
+    margin-left: var(--space-xs);
+}
+.twm-bar-windows__item {
+    height: 100%;
+    padding: 0 6px;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    font-size: var(--font-size-xs);
+    font-family: inherit;
+    color: var(--text-secondary);
+    cursor: pointer;
+    max-width: 160px;
+    display: flex;
+    align-items: center;
+    gap: var(--space-xs);
+    transition: background-color 0.1s, color 0.1s;
+}
+.twm-bar-windows__item:hover {
+    /* Solarized blue */
+    background: #268bd2;
+    color: var(--text-bright);
+}
+.twm-bar-windows__item:active {
+    background: #1a6aa5;
+}
+.twm-bar-windows__item-icon {
+    font-size: var(--font-size-sm);
+    flex-shrink: 0;
+}
+.twm-bar-windows__item-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+/* ========== Transitions ========== */
+
+.twm-managed-window:not(:hover) {
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+/* ========== Expression Modal Content ========== */
+
+.twm-expression-modal__window-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+.twm-expression-modal__window-content .twm-expression-modal__meta {
+    padding: var(--space-md) 12px;
+    font-size: var(--font-size-xs);
+    color: var(--text-muted);
+    border-bottom: 1px solid #333;
+    flex-shrink: 0;
+}
+.twm-expression-modal__window-content .twm-expression-modal__editor-container {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+}
+/* ========== Confirm Dialog Content ========== */
+
+.twm-confirm-dialog__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: var(--space-xl);
+    box-sizing: border-box;
+}
+.twm-confirm-dialog__body {
+    flex: 1;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-lg);
+}
+.twm-confirm-dialog__icon {
+    font-size: 32px;
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+.twm-confirm-dialog__message {
+    flex: 1;
+    font-size: var(--font-size-md);
+    color: var(--text-secondary);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    padding-top: var(--space-xs);
+}
+.twm-confirm-dialog__actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-md);
+    margin-top: var(--space-xl);
+    padding-top: var(--space-lg);
+    border-top: 1px solid #333;
+}
+/* Confirm dialog buttons - override global button styles */
+button.twm-confirm-dialog__btn {
+    padding: var(--space-sm) 16px;
+    border: 1px solid #444;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color var(--transition-normal), border-color var(--transition-normal);
+}
+button.twm-confirm-dialog__btn--primary {
+    background: var(--accent);
+    border-color: var(--accent);
+}
+button.twm-confirm-dialog__btn--primary:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+button.twm-confirm-dialog__btn:focus {
+    outline: 2px solid var(--accent-bright);
+    outline-offset: 2px;
+}
+
+/* ── from about_dialog.css ───────────────────────── */
+/**
+ * About Dialog Styles
+ * Modal dialog showing EcoSim version, license, and third-party credits.
+ */
+
+/* ========== Root Container ========== */
+
+.twm-about-dialog__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+}
+/* ========== Header ========== */
+
+.twm-about-dialog__header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xs);
+    padding: 20px 16px 16px;
+    border-bottom: 1px solid #333;
+    flex-shrink: 0;
+}
+.twm-about-dialog__logo {
+    font-size: 40px;
+    color: var(--accent-bright);
+}
+.twm-about-dialog__title {
+    font-size: 20px;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin: 0;
+}
+.twm-about-dialog__version {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+}
+.twm-about-dialog__tagline {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+}
+/* ========== Scrollable Body ========== */
+
+.twm-about-dialog__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-lg) 16px;
+    min-height: 0;
+}
+/* ========== Sections ========== */
+
+.twm-about-dialog__section {
+    margin-bottom: 14px;
+}
+.twm-about-dialog__section:last-child {
+    margin-bottom: 0;
+}
+.twm-about-dialog__section-title {
+    font-size: var(--font-size-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin-bottom: var(--space-md);
+}
+/* ========== Project Links ========== */
+
+.twm-about-dialog__links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+}
+.twm-about-dialog__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+    font-size: var(--font-size-sm);
+    color: #3794ff;
+    text-decoration: none;
+    cursor: pointer;
+}
+.twm-about-dialog__link:hover {
+    text-decoration: underline;
+    color: #4da6ff;
+}
+.twm-about-dialog__license-text {
+    font-size: var(--font-size-sm);
+    color: var(--text-muted);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-sm);
+}
+/* ========== Dependency List ========== */
+
+.twm-about-dialog__dep-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xs);
+}
+.twm-about-dialog__dep {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-md);
+    padding: var(--space-xxs) 0;
+}
+.twm-about-dialog__dep-name {
+    font-size: var(--font-size-sm);
+    color: #3794ff;
+    text-decoration: none;
+    cursor: pointer;
+    flex-shrink: 0;
+}
+.twm-about-dialog__dep-name:hover {
+    text-decoration: underline;
+    color: #4da6ff;
+}
+.twm-about-dialog__dep-license {
+    font-size: var(--font-size-xs);
+    color: var(--text-dim);
+    flex-shrink: 0;
+}
+/* ========== Footer ========== */
+
+.twm-about-dialog__footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 16px;
+    border-top: 1px solid #333;
+    flex-shrink: 0;
+}
+button.twm-about-dialog__btn {
+    padding: var(--space-sm) 16px;
+    border: 1px solid #444;
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+    font-family: inherit;
+    cursor: pointer;
+    transition: background-color var(--transition-normal), border-color var(--transition-normal);
+}
+button.twm-about-dialog__btn--close {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: var(--text-bright);
+}
+button.twm-about-dialog__btn--close:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+button.twm-about-dialog__btn--close:focus {
+    outline: 2px solid var(--accent-bright);
+    outline-offset: 2px;
+}
+
+/* ── from components/detail_header.css ───────────────────────── */
+/* ═══════════════════════════════════════════════════════════════════════════
+   DetailHeader — shared header bar for detail views across all pages.
+   Used by: Scenario page, ETL page, Data page, Notebook editors.
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.twm-detail-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-xl);
+    padding-bottom: var(--space-lg);
+    flex-wrap: wrap;
+}
+.twm-detail-header__title-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+.twm-detail-header__icon {
+    font-size: 20px;
+    color: var(--text-muted, var(--text-muted));
+    flex-shrink: 0;
+}
+.twm-detail-header__name {
+    font-size: var(--font-size-2xl);
+    font-weight: 600;
+    color: var(--text-primary, #f0f0f0);
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+}
+.twm-detail-header__name[data-renameable] {
+    cursor: text;
+}
+.twm-detail-header__name[data-renameable]:hover {
+    color: var(--text-bright);
+}
+/* Inline rename input (injected by InlineRenamer) */
+.twm-detail-header__name .twm-node-edit-input {
+    font: inherit;
+    font-size: var(--font-size-2xl);
+    font-weight: 600;
+    background: var(--surface-1));
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary, #f0f0f0);
+    padding: 0 4px;
+    margin: -2px 0;
+    outline: none;
+    width: 100%;
+    min-width: 100px;
+}
+/* ─── Badges ──────────────────────────────────────────────────────────── */
+
+/* .detail-header__badge* — moved to components/controls.css (Phase 2). */
+
+/* ─── Subtitle ────────────────────────────────────────────────────────── */
+
+.twm-detail-header__subtitle {
+    width: 100%;
+    font-size: var(--font-size-sm);
+    color: var(--text-muted, var(--text-muted));
+    margin-top: -8px;
+    padding-left: 30px;
+}
+.twm-detail-header__subtitle strong {
+    color: var(--text-primary, var(--text-primary));
+}
+/* ─── Actions ─────────────────────────────────────────────────────────── */
+
+.twm-detail-header__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    flex-shrink: 0;
+}
+
+/* ── from components/attribute_list_editor.css ───────────────────────── */
+/* attribute_list_editor.css — generic AttributeSpec list editor.
+ *
+ * The component sets `--cols` on the host element based on the
+ * `showColumns` spec — header strip and row cells share the same
+ * grid template so labels stay aligned with their inputs. Each
+ * cell uses the standard dark-theme tokens; the editor never owns
+ * row chrome (that's SortableList's job).
+ */
+
+.twm-attr-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25em;
+    margin-top: 0.25em;
+}
+/* Header strip now sits inside a SortableList row chrome so the
+ * `[handle][content][remove]` flex layout matches each data row
+ * exactly — no more hardcoded `padding: 0 2em` that drifted as soon
+ * as space-md or the icon size changed. The placeholder spans
+ * (`.twm-attr-editor__header-placeholder`) reserve the handle + remove
+ * gutters; the inner `__headers` div is the column-grid that aligns
+ * with each row's `.twm-attr-editor__row` grid. */
+.twm-attr-editor__header-row {
+    background: transparent;
+    border: 1px solid transparent;  /* keep height parity with data rows */
+    cursor: default;
+}
+.twm-attr-editor__header-row:hover {
+    border-color: transparent;
+}
+.twm-attr-editor__header-placeholder {
+    visibility: hidden;
+    pointer-events: none;
+}
+.twm-attr-editor__headers {
+    display: grid;
+    grid-template-columns: var(--cols, 1fr);
+    gap: 0.4em;
+    font-size: 0.75em;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--ea-text-muted, #888);
+}
+.twm-attr-editor__row {
+    display: grid;
+    grid-template-columns: var(--cols, 1fr);
+    gap: 0.4em;
+    align-items: center;
+    /* Overridden rows append `__attention` + `__revert` siblings. We
+     * pull those out of the grid flow (absolute) so the cells keep
+     * their column tracks regardless of override state — otherwise the
+     * grid auto-creates implicit tracks for the extras and shifts every
+     * column. `position: relative` anchors the absolute children. */
+    position: relative;
+}
+.twm-attr-editor__cell {
+    background: var(--ea-input-bg, #1e1e1e);
+    color: var(--ea-text, #ddd);
+    border: 1px solid var(--ea-border, #444);
+    padding: 0.25em 0.4em;
+    font: inherit;
+    box-sizing: border-box;
+    min-width: 0;
+    width: 100%;
+}
+/* Native <select> defaults render with light-grey chrome on most
+ * browsers even when the background is set. Force the dark palette
+ * + suppress the OS arrow so the type cell matches the surrounding
+ * dark inputs in both closed AND row-tinted states. */
+.twm-attr-editor select.twm-attr-editor__cell {
+    background-color: var(--ea-input-bg, #1e1e1e);
+    color: var(--ea-text, #ddd);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--ea-text-muted, #888) 50%),
+                      linear-gradient(135deg, var(--ea-text-muted, #888) 50%, transparent 50%);
+    background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
+    background-size: 4px 4px, 4px 4px;
+    background-repeat: no-repeat;
+    padding-right: 1.5em;
+}
+.twm-attr-editor select.twm-attr-editor__cell option {
+    background: var(--ea-input-bg, #1e1e1e);
+    color: var(--ea-text, #ddd);
+}
+.twm-attr-editor select.twm-attr-editor__cell optgroup {
+    background: var(--ea-bg-chrome, #161616);
+    color: var(--ea-text-muted, #888);
+    font-style: normal;
+}
+.twm-attr-editor__cell--readonly {
+    background: transparent;
+    color: var(--ea-text-muted, #888);
+    font-family: monospace;
+    font-size: 0.85em;
+    border: 1px dashed var(--ea-border, #2a2a2a);
+}
+.twm-attr-editor__row input[type="checkbox"].twm-attr-editor__cell {
+    width: auto;
+    justify-self: start;
+}
+/* Layer 8.J1 — inheritance state. Each row gets one of three modifiers:
+ *
+ *   --inherited:  value matches the parent archetype's default. The
+ *                 row gets a light blue tint AND each input cell tinted
+ *                 the same so the signal reads against the dark theme.
+ *   --overridden: value differs from the parent archetype's default.
+ *                 Solarized orange tint + attention dot on the left +
+ *                 revert button on the right.
+ *   --neutral:    no parent archetype defines this attribute. Default
+ *                 styling.
+ *
+ * Tinting the inputs (not just the row container) is what makes the
+ * signal actually visible in the dark theme — a 0.10 alpha background
+ * behind dark inputs is invisible. */
+
+.twm-attr-editor__row {
+    padding: 0.15em 0.25em;
+    border-left: 3px solid transparent;
+    border-radius: 2px;
+    transition: background 120ms, border-color 120ms;
+}
+/* Inherited / matching state — same green as the Public API card's
+ * "matches archetype" rows, so the colour grammar reads consistently
+ * across attributes and methods: green = matches the archetype,
+ * orange = overrides, neutral = no parent involved. */
+.twm-attr-editor__row--inherited {
+    background: rgba(96, 192, 96, 0.15);
+    border-left-color: #60c060;
+}
+.twm-attr-editor__row--inherited input.twm-attr-editor__cell {
+    background: rgba(96, 192, 96, 0.08);
+    border-color: rgba(96, 192, 96, 0.40);
+}
+.twm-attr-editor__row--inherited select.twm-attr-editor__cell {
+    /* Native <select> can't render a semi-transparent background
+     * reliably (the OS popup picks up the literal colour as its
+     * backing). Keep the dark base, signal "inherited" via border
+     * accent only. */
+    background-color: var(--ea-input-bg, #1e1e1e);
+    border-color: rgba(96, 192, 96, 0.60);
+}
+.twm-attr-editor__row--overridden {
+    background: rgba(204, 120, 65, 0.22);
+    border-left-color: #d18138;
+}
+.twm-attr-editor__row--overridden input.twm-attr-editor__cell {
+    background: rgba(204, 120, 65, 0.10);
+    border-color: rgba(209, 129, 56, 0.50);
+    color: #f0c189;
+}
+.twm-attr-editor__row--overridden select.twm-attr-editor__cell {
+    background-color: var(--ea-input-bg, #1e1e1e);
+    border-color: rgba(209, 129, 56, 0.60);
+    color: #f0c189;
+}
+/* R7 — variation-override flag treatments. These additively layer on
+ * top of the inheritance grammar (above), so an `optional` inherited
+ * row keeps its green background AND gets the optional border accent.
+ *
+ *  disabled : the archetype declared the slot but turned it off. The
+ *             row is greyed out to make clear it's not carried into
+ *             descendants.
+ *  forced   : variations can't override this slot. Cells appear
+ *             non-editable; the lock icon (added by JS) signals why.
+ *  optional : the value is a suggestion. Green border, NO fill — so
+ *             it's visually distinct from `inherited` (green fill).
+ *             Variations may override without warning.
+ */
+.twm-attr-editor__row--disabled {
+    opacity: 0.55;
+    border-left-color: var(--ea-text-dim, #777);
+}
+.twm-attr-editor__row--forced {
+    border-left-color: #b48be0;        /* soft purple = locked */
+}
+.twm-attr-editor__row--forced input.twm-attr-editor__cell,
+.twm-attr-editor__row--forced select.twm-attr-editor__cell {
+    background-color: rgba(180, 139, 224, 0.08);
+    border-color: rgba(180, 139, 224, 0.40);
+}
+.twm-attr-editor__row--optional {
+    border-left-color: #60c060;        /* same green as inherited, ... */
+    background: transparent;           /* ...but no fill — that's the cue */
+}
+.twm-attr-editor__row--optional input.twm-attr-editor__cell,
+.twm-attr-editor__row--optional select.twm-attr-editor__cell {
+    background-color: var(--ea-input-bg, #1e1e1e);
+    border-color: rgba(96, 192, 96, 0.50);
+}
+.twm-attr-editor__attention {
+    /* Positioned in the row's left gutter so it doesn't push the
+     * cells. The row already has `position: relative`. */
+    position: absolute;
+    left: -14px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #d18138;            /* solarized orange */
+    font-size: 0.85em;
+    pointer-events: none;
+}
+.twm-attr-editor__revert {
+    /* Floats over the right edge of the row, outside the column grid.
+     * Sits ABOVE the trailing remove-button gutter that sortable_list
+     * draws, so it stays visible. */
+    position: absolute;
+    right: 24px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent;
+    border: 0;
+    color: var(--ea-text-muted, #888);
+    cursor: pointer;
+    padding: 0.15em 0.35em;
+    font-size: 1.1em;
+    z-index: 1;
+}
+.twm-attr-editor__revert:hover {
+    color: #d18138;
+}
+
+/* ── from notebook.css ───────────────────────── */
+.twm-plot-no-data { padding: var(--space-2xl); text-align: center; color: var(--text-muted); font-size: var(--font-size-md); }
+/* ─── Autocomplete field — notebook variant ──────────────── */
+
+.twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper {
+    border: 1px solid #569cd6;
+    font-size: var(--font-size-sm);
+}
+.twm-autocomplete-field--notebook .twm-autocomplete-field__input-wrapper:focus-within {
+    border-color: #79b8f8;
+    box-shadow: 0 0 3px rgba(86, 156, 214, 0.3);
+}
+.twm-autocomplete-field--notebook .twm-autocomplete-field__input {
+    font-family: 'Courier New', Courier, monospace;
+    color: var(--text-body);
+    font-size: var(--font-size-sm);
+}
+.twm-autocomplete-field--notebook .twm-autocomplete-field__helper {
+    display: none;
+}
+/* ═══════════════════════════════════════════════════════════════════════════
+   Tree Item Badge — small status indicator on file tree items
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.twm-tree-item__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 16px;
+    height: 16px;
+    padding: 0 4px;
+    border-radius: var(--radius-lg);
+    font-size: 9px;
+    font-weight: 600;
+    flex-shrink: 0;
+    margin-left: auto;
+    line-height: 1;
+}
+/* Status dot variant (smaller, no text) */
+.twm-tree-item__status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    flex-shrink: 0;
+    margin-left: auto;
+}
+
+/* ── from slide_out_panel.css ───────────────────────── */
+/* ─── SlideOutPanel ─────────────────────────────────────────────────────────
+   Inline slide-out config panel that overlays its host container from
+   the right edge. Host container must have position:relative; overflow:hidden.
+   ──────────────────────────────────────────────────────────────────────────── */
+
+/* Transparent click-catcher behind the panel. Hidden by default
+ * via `visibility: hidden` (not just display) so it's removed
+ * from the accessibility tree + paint pass when the panel is
+ * closed; the `--visible` modifier flips it back on. */
+.twm-slide-out-panel__backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: 999;
+    visibility: hidden;
+    pointer-events: none;
+}
+.twm-slide-out-panel__backdrop--visible {
+    visibility: visible;
+    pointer-events: auto;
+}
+/* Panel container. When closed it sits at translateX(100%) off the
+ * right edge of the host; `visibility: hidden` on the closed state
+ * stops the slid-off panel from intercepting clicks or leaking
+ * paint artifacts at the right edge of the workspace. */
+.twm-slide-out-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    z-index: var(--z-modal);
+    display: flex;
+    flex-direction: column;
+
+    background: #212121;
+    border-left: 1px solid #333;
+    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.35);
+
+    min-width: 400px;
+
+    transform: translateX(100%);
+    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+    visibility: hidden;
+}
+.twm-slide-out-panel--open {
+    transform: translateX(0);
+    visibility: visible;
+    transition: transform 200ms ease-out, visibility 0s linear 0s;
+}
+/* Header bar */
+.twm-slide-out-panel__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding: var(--space-md) 8px 8px 12px;
+    border-bottom: 1px solid var(--border-strong);
+    flex-shrink: 0;
+    user-select: none;
+}
+.twm-slide-out-panel__title {
+    flex: 1;
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    color: var(--text-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.twm-slide-out-panel__close {
+    flex-shrink: 0;
+    margin-left: auto;
+}
+/* Scrollable body */
+.twm-slide-out-panel__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--space-md);
+}
+
+/* ── from plot_config.css ───────────────────────── */
+.twm-btn-icon {
+  background: transparent;
+  border: none;
+  color: #8a8f98;
+  cursor: pointer;
+  padding: var(--space-xs);
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--transition-normal), background-color var(--transition-normal);
+}
+.twm-btn-icon:hover {
+  color: var(--text-bright);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* ── from tiling/host.css ───────────────────────── */
+@media (max-width: 900px) {
+.twm-top-nav__label { display: none; }
+.twm-top-nav__btn { padding: 0 10px; }
+}