Upload app.py

app.py

@@ -382,6 +382,9 @@ _ICON_PATHS = {
              '<path d="M15 8l2.5 5a2.5 2.5 0 0 0 5 0L20 8"/><path d="M9 20h6"/>',
     "list": '<path d="M8 6h12M8 12h12M8 18h12"/><path d="M4 6h.01M4 12h.01M4 18h.01"/>',
     "bars": '<path d="M4 20V10M10 20V4M16 20v-7M4 20h16"/>',
+    "alert": '<path d="M10.3 3.86 1.8 18a1 1 0 0 0 .9 1.5h18.6a1 1 0 0 0 .9-1.5L13.7 3.86a1 1 0 0 0-1.72 0Z"/>'
+             '<path d="M12 9v4"/><path d="M12 16.3h.01"/>',
+    "check-circle": '<circle cx="12" cy="12" r="9"/><path d="M8.5 12.5l2.5 2.5 5-5"/>',
 }
 
 def icon_svg(name, size=18):
@@ -393,16 +396,16 @@ def section_header(icon, text, level=3):
     return f'<h{level} class="hort-heading">{icon_svg(icon)}<span>{text}</span></h{level}>'
 
 def build_metric_html(df_stats, logs_df):
-    """Live summary strip: recomputed after every simulation run instead of
+    """Live KPI row: recomputed after every simulation run instead of
     showing fixed placeholder copy."""
     if df_stats is None or df_stats.empty:
         trains_n, conflicts_n, avg_delay, on_time_pct = "-", "-", "-", "-"
         flag_conflicts = False
     else:
         trains_n = str(len(df_stats))
-        avg_delay = f"{df_stats['Total Delay'].mean():.1f} min"
+        avg_delay = f"{df_stats['Total Delay'].mean():.1f}"
         on_time = int((df_stats['Type'] == 'On Time').sum())
-        on_time_pct = f"{round(on_time / len(df_stats) * 100)}%"
+        on_time_pct = str(round(on_time / len(df_stats) * 100))
         if logs_df is not None and not logs_df.empty:
             conflicts = sum(1 for v in logs_df.iloc[:, 0] if isinstance(v, str) and v.startswith("Iter"))
         else:
@@ -410,15 +413,28 @@ def build_metric_html(df_stats, logs_df):
         conflicts_n = str(conflicts)
         flag_conflicts = conflicts > 0
 
-    conflict_class = "metric-value is-flagged" if flag_conflicts else "metric-value"
-    def label(text):
-        return f'<div class="metric-label"><span class="br">[</span> {text} <span class="br">]</span></div>'
+    conflict_icon_cls = "kpi-icon is-flagged" if flag_conflicts else "kpi-icon"
+    conflict_val_cls = "kpi-value is-flagged" if flag_conflicts else "kpi-value"
+
+    def card(icon, icon_cls, label_text, value_cls, value_html, caption):
+        return f'''
+        <div class="kpi-card">
+            <div class="kpi-head">
+                <div class="{icon_cls}">{icon_svg(icon, 15)}</div>
+                <span class="kpi-label">{label_text}</span>
+            </div>
+            <div>
+                <div class="{value_cls}">{value_html}</div>
+                <div class="kpi-caption">{caption}</div>
+            </div>
+        </div>'''
+
     return f'''
-    <div class="metric-strip">
-        <div class="metric-item">{label("TRAINS SIMULATED")}<div class="metric-value">{trains_n}</div></div>
-        <div class="metric-item">{label("CONFLICTS RESOLVED")}<div class="{conflict_class}">{conflicts_n}</div></div>
-        <div class="metric-item">{label("AVG TOTAL DELAY")}<div class="metric-value">{avg_delay}</div></div>
-        <div class="metric-item">{label("ON-TIME TRAINS")}<div class="metric-value">{on_time_pct}</div></div>
+    <div class="kpi-grid">
+        {card("train", "kpi-icon", "Trains simulated", "kpi-value", trains_n, "from Train Requests")}
+        {card("alert", conflict_icon_cls, "Conflicts resolved", conflict_val_cls, conflicts_n, "auto-resolved")}
+        {card("clock", "kpi-icon is-neutral", "Avg total delay", "kpi-value", f'{avg_delay}<span class="unit"> min</span>', "across all trains")}
+        {card("check-circle", "kpi-icon", "On-time trains", "kpi-value", f'{on_time_pct}<span class="unit">%</span>', "within buffer cap")}
     </div>
     '''
 
@@ -1158,24 +1174,16 @@ html, body, gradio-app {
     overflow: visible !important;
     position: relative;
 }
-/* Barely-there scanline texture plus a faint ambient phosphor glow pooling
-   near the top of the page - thematic depth (CRT console), not decoration.
-   Fixed + pointer-events:none so it never repaints on scroll. */
+/* Faint ambient glow pooling behind the top bar - depth without the CRT
+   scanline texture, which read more "novelty terminal" than commercial
+   product chrome. Fixed + pointer-events:none so it never repaints on scroll. */
 .gradio-container::before {
     content: "";
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: none;
-    background:
-        radial-gradient(ellipse 900px 420px at 50% -8%, rgba(61,220,132,0.05), transparent 70%),
-        repeating-linear-gradient(
-            180deg,
-            rgba(231,236,231,0.014) 0px,
-            rgba(231,236,231,0.014) 1px,
-            transparent 1px,
-            transparent 3px
-        );
+    background: radial-gradient(ellipse 900px 420px at 50% -8%, rgba(61,220,132,0.04), transparent 70%);
 }
 
 .gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4,
@@ -1185,6 +1193,17 @@ html, body, gradio-app {
     color: var(--hort-text) !important;
     font-family: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', monospace !important;
 }
+/* The Soft theme renders every field label as a solid primary-hue chip
+   (a Gradio default, not something we set) - strip it back to plain
+   small muted text so labels read as UI copy, not colored badges. */
+.gradio-container [data-testid="block-info"] {
+    background: transparent !important;
+    color: var(--hort-muted) !important;
+    padding: 0 !important;
+    font-size: 12.5px !important;
+    font-weight: 500 !important;
+    box-shadow: none !important;
+}
 /* Prose (paragraph copy) reads better in a humanist sans than all-mono -
    headings, labels, data and buttons stay mono for the technical voice. */
 .gradio-container .prose p, .gradio-container .markdown p, .gradio-container .gr-markdown p {
@@ -1195,141 +1214,132 @@ html, body, gradio-app {
 }
 
 /* ---------------------------------------------------------------------
-   Hero: a terminal window - titlebar with a live-status dot, prompt-style
-   eyebrow, bracket tags. Sharp corners throughout (radius 4px max), the
-   one shape rule this build holds to everywhere.
+   App shell: a slim brand strip + the tab nav directly beneath it, both
+   on the same surface, standing in for a real product top bar. Soft
+   14px cards below it instead of last build's sharp terminal edges -
+   the corner-radius scale for THIS build is: bar/sidebar flush (0),
+   inputs/buttons 8px, cards 14px. Held everywhere, no mixing.
 --------------------------------------------------------------------- */
-.hero-card {
-    margin: 26px 0 22px 0;
-    border: 1px solid var(--hort-border);
-    border-radius: 4px;
-    background: var(--hort-bg-1);
-    overflow: hidden;
-    /* Faint top bezel highlight - the one piece of real depth this theme
-       allows itself, echoing a physical console panel catching light. */
-    box-shadow: inset 0 1px 0 rgba(231,236,231,0.05);
-}
-.term-titlebar {
+.brand-strip {
     display: flex;
     align-items: center;
-    gap: 8px;
-    padding: 9px 14px;
+    gap: 14px;
+    padding: 13px 6px;
+    background: var(--hort-bg-1);
     border-bottom: 1px solid var(--hort-border);
-    background: rgba(255,255,255,0.015);
 }
-.term-dot {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
+.brand-mark {
+    width: 24px;
+    height: 24px;
+    border-radius: 7px;
     background: var(--hort-cyan);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex: 0 0 auto;
-    box-shadow: 0 0 6px rgba(61,220,132,0.8);
-    animation: term-pulse 2.6s ease-in-out infinite;
-}
-@keyframes term-pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: .45; }
-}
-@media (prefers-reduced-motion: reduce) {
-    .term-dot { animation: none; }
-}
-.term-path {
-    font-size: 12px;
-    color: var(--hort-muted) !important;
-    letter-spacing: .02em;
+    box-shadow: 0 0 14px rgba(61,220,132,0.35);
 }
-.hero-body { padding: 30px 32px 32px; }
-.hero-kicker {
-    font-size: 12px;
-    letter-spacing: .08em;
-    color: var(--hort-cyan) !important;
-    font-weight: 500;
-}
-.hero-title {
-    font-size: clamp(30px, 4vw, 46px);
-    line-height: 1.1;
-    margin: 14px 0 16px;
-    color: var(--hort-text) !important;
-    font-weight: 700;
+.brand-mark svg { color: #0A0C0A; }
+.brand-name {
+    font-family: 'JetBrains Mono', monospace;
+    font-weight: 600;
+    font-size: 14px;
     letter-spacing: -0.01em;
-    text-shadow: 0 0 28px rgba(61,220,132,0.18);
-}
-.hero-subtitle {
-    max-width: 700px;
-    font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
-    font-size: 15px;
-    line-height: 1.75;
-    color: var(--hort-muted) !important;
-}
-.hero-chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-top: 24px;
+    color: var(--hort-text) !important;
 }
-.hero-chip {
+.brand-spacer { flex: 1 1 auto; }
+.status-pill {
     display: inline-flex;
     align-items: center;
-    padding: 6px 10px;
-    border-radius: 4px;
-    background: transparent;
-    border: 1px solid var(--hort-border);
-    color: var(--hort-muted) !important;
-    font-size: 11px;
-    font-weight: 500;
-    letter-spacing: .03em;
-    transition: border-color .18s ease, color .18s ease;
+    gap: 6px;
+    background: var(--hort-cyan-bg);
+    border-radius: 999px;
+    padding: 5px 10px 5px 8px;
 }
-.hero-chip:hover {
-    border-color: rgba(61,220,132,0.4);
-    color: var(--hort-text) !important;
+.status-dot {
+    width: 6px; height: 6px;
+    border-radius: 50%;
+    background: var(--hort-cyan);
+    box-shadow: 0 0 5px rgba(61,220,132,0.8);
+}
+.status-pill span.label { font-size: 11px; font-weight: 600; color: var(--hort-cyan); }
+.avatar-chip {
+    width: 28px; height: 28px;
+    border-radius: 50%;
+    background: var(--hort-bg-3);
+    border: 1px solid var(--hort-border);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 10.5px;
+    color: var(--hort-muted);
 }
-.hero-chip .br { color: var(--hort-cyan); }
 
-/* Console readout: flat hairline stat row, bracketed labels, phosphor
-   numbers. Grid (not flex-wrap) so the column count snaps cleanly. */
-.metric-strip {
+/* KPI row: real stat cards (icon + label, big number, context line)
+   instead of the previous bracket-hairline readout. */
+.kpi-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
-    border: 1px solid var(--hort-border);
-    border-radius: 4px;
-    background: var(--hort-bg-1);
-    box-shadow: inset 0 1px 0 rgba(231,236,231,0.04);
-    margin: 4px 0 30px 0;
-}
-.metric-item {
-    padding: 16px 22px;
-    border-right: 1px solid var(--hort-border);
+    gap: 16px;
+    margin: 0 0 22px 0;
 }
-.metric-item:last-child { border-right: none; }
-.metric-label {
-    color: var(--hort-muted) !important;
-    font-size: 11px;
-    letter-spacing: .06em;
+.kpi-card {
+    background: var(--hort-bg-1);
+    border: 1px solid var(--hort-border);
+    border-radius: 14px;
+    padding: 18px 20px;
+    box-shadow: 0 20px 40px -28px rgba(0,0,0,0.6), inset 0 1px 0 rgba(231,236,231,0.03);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.kpi-head { display: flex; align-items: center; gap: 10px; }
+.kpi-icon {
+    width: 30px; height: 30px;
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    flex: 0 0 auto;
+    background: var(--hort-cyan-bg);
+}
+.kpi-icon.is-flagged { background: var(--hort-amber-bg); }
+.kpi-icon.is-neutral { background: rgba(231,236,231,0.06); }
+.kpi-icon svg { color: var(--hort-cyan); }
+.kpi-icon.is-flagged svg { color: var(--hort-amber); }
+.kpi-icon.is-neutral svg { color: var(--hort-muted); }
+.kpi-label { font-size: 12.5px; color: var(--hort-muted); }
+.kpi-value {
+    font-family: 'JetBrains Mono', monospace;
+    color: var(--hort-text) !important;
+    font-size: 26px;
+    font-weight: 600;
 }
-.metric-label .br { color: var(--hort-muted); opacity: .5; }
-.metric-value {
-    color: var(--hort-cyan) !important;
-    font-size: 24px;
-    line-height: 1.3;
-    font-weight: 700;
-    margin-top: 6px;
-    text-shadow: 0 0 14px rgba(61,220,132,0.20);
+.kpi-value.is-flagged { color: var(--hort-amber) !important; }
+.kpi-value .unit { font-size: 14px; font-weight: 500; color: var(--hort-muted); }
+.kpi-caption { font-size: 11.5px; color: var(--hort-muted); margin-top: 2px; }
+@media (max-width: 900px) {
+    .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
-.metric-value.is-flagged {
-    color: var(--hort-amber) !important;
-    text-shadow: 0 0 14px rgba(255,177,0,0.24);
+@media (max-width: 480px) {
+    .kpi-grid { grid-template-columns: 1fr; }
 }
-@media (max-width: 860px) {
-    .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-    .metric-item:nth-child(even) { border-right: none; }
-    .metric-item:nth-child(-n+2) { border-bottom: 1px solid var(--hort-border); }
+
+/* Sidebar (run configuration) + main content columns. */
+.app-sidebar {
+    background: var(--hort-bg-1);
+    border-right: 1px solid var(--hort-border);
+    padding: 22px 20px !important;
+    display: flex !important;
+    flex-direction: column !important;
 }
-@media (max-width: 460px) {
-    .metric-strip { grid-template-columns: 1fr; }
-    .metric-item { border-right: none !important; border-bottom: 1px solid var(--hort-border); }
-    .metric-item:last-child { border-bottom: none; }
+.app-sidebar .side-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--hort-muted) !important;
+    text-transform: uppercase;
+    letter-spacing: .04em;
+    margin: 4px 0 2px;
 }
+.sidebar-spacer { flex: 1 1 auto; min-height: 12px; }
+.app-main { padding: 24px 28px !important; }
+.data-row-card { min-height: 0; }
 
 /* Section-header icon + label, replacing emoji glyphs. Bolder stroke reads
    closer to a Phosphor "Bold" weight than a generic thin-line icon set. */
@@ -1357,7 +1367,7 @@ html, body, gradio-app {
     overflow: visible !important;
     background: var(--hort-bg-1) !important;
     border: 1px solid var(--hort-border) !important;
-    border-radius: 4px !important;
+    border-radius: 14px !important;
     padding: 24px !important;
     box-shadow: inset 0 1px 0 rgba(231,236,231,0.04) !important;
     backdrop-filter: none !important;
@@ -1400,7 +1410,7 @@ html, body, gradio-app {
 .gradio-container textarea,
 .gradio-container select,
 .gradio-container button {
-    border-radius: 4px !important;
+    border-radius: 8px !important;
     font-family: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', monospace !important;
 }
 .gradio-container input,
@@ -1422,7 +1432,7 @@ html, body, gradio-app {
    Keep dropdowns native. Do not style Gradio's internal combobox/listbox/menu/button
    elements; doing so can make the menu jump, flicker, or open in the wrong place. */
 .hort-listbox {
-    border-radius: 4px !important;
+    border-radius: 8px !important;
 }
 .hort-listbox label,
 .hort-listbox .label-wrap {
@@ -1455,7 +1465,7 @@ html, body, gradio-app {
 .gradio-container fieldset {
     background: transparent !important;
     border: 1px solid var(--hort-border) !important;
-    border-radius: 4px !important;
+    border-radius: 8px !important;
 }
 .hort-radio fieldset {
     padding: 6px !important;
@@ -1468,7 +1478,7 @@ html, body, gradio-app {
     gap: 8px;
     margin: 0 !important;
     padding: 10px 14px !important;
-    border-radius: 3px !important;
+    border-radius: 6px !important;
     background: transparent !important;
     border: 1px solid transparent !important;
     color: var(--hort-muted) !important;
@@ -1483,7 +1493,7 @@ html, body, gradio-app {
 .hort-radio .selected {
     background: var(--hort-cyan-bg) !important;
     border: 1px solid rgba(61,220,132,0.35) !important;
-    border-radius: 3px !important;
+    border-radius: 6px !important;
     box-shadow: 0 0 12px rgba(61,220,132,0.08) !important;
     color: var(--hort-cyan) !important;
     font-weight: 700 !important;
@@ -1574,7 +1584,7 @@ html, body, gradio-app {
     overflow: hidden !important;
     border: 1px solid var(--hort-border) !important;
     border-style: solid !important;
-    border-radius: 3px !important;
+    border-radius: 6px !important;
     background: var(--hort-bg-3) !important;
     color: var(--hort-text) !important;
     box-shadow: none !important;
@@ -1619,7 +1629,7 @@ html, body, gradio-app {
     align-items: center !important;
     overflow: hidden !important;
     border: 1px solid var(--hort-border) !important;
-    border-radius: 3px !important;
+    border-radius: 6px !important;
     background: var(--hort-bg-3) !important;
     color: var(--hort-text) !important;
     box-shadow: none !important;
@@ -1678,7 +1688,7 @@ html, body, gradio-app {
     border: 1px solid var(--hort-border) !important;
     box-shadow: none !important;
     background: var(--hort-bg-1) !important;
-    border-radius: 4px !important;
+    border-radius: 10px !important;
     overflow: auto !important;
 }
 /* Do not clip uploaded CSV matrices. Gradio virtualizes dataframe rows inside
@@ -1702,16 +1712,14 @@ html, body, gradio-app {
 
 .gradio-container button {
     font-weight: 600 !important;
-    font-family: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', monospace !important;
-    text-transform: uppercase;
-    letter-spacing: .04em;
-    font-size: 13px !important;
+    font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
+    font-size: 14px !important;
 }
 .gradio-container button.primary {
     color: #0A0C0A !important;
     background: var(--hort-cyan) !important;
     border: 1px solid var(--hort-cyan) !important;
-    border-radius: 4px !important;
+    border-radius: 8px !important;
     box-shadow: 0 0 0 rgba(61,220,132,0) !important;
     transition: background-color .15s ease, transform .1s ease, box-shadow .2s ease !important;
 }
@@ -1724,14 +1732,15 @@ html, body, gradio-app {
     transform: scale(0.98);
 }
 
-/* Underline tabs, terminal-caps labels - not pill buttons. */
+/* Underline tabs - the second tier of the top bar, directly under the
+   brand strip (same background, hairline bottom border). */
 .gradio-container .tab-nav {
-    background: transparent !important;
+    background: var(--hort-bg-1) !important;
     border: none !important;
     border-bottom: 1px solid var(--hort-border) !important;
     border-radius: 0 !important;
     padding: 0 !important;
-    gap: 4px;
+    gap: 22px;
 }
 .gradio-container .tab-nav button {
     border-radius: 0 !important;
@@ -1740,35 +1749,35 @@ html, body, gradio-app {
     border: none !important;
     border-bottom: 2px solid transparent !important;
     margin-bottom: -1px;
-    text-transform: uppercase;
-    letter-spacing: .03em;
+    font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif !important;
     transition: color .15s ease;
 }
 .gradio-container .tab-nav button:hover {
     color: var(--hort-text) !important;
 }
 .gradio-container .tab-nav button.selected {
-    color: var(--hort-cyan) !important;
+    color: var(--hort-text) !important;
     background: transparent !important;
     border-bottom: 2px solid var(--hort-cyan) !important;
-    box-shadow: 0 1px 8px rgba(61,220,132,0.35) !important;
-    font-weight: 700 !important;
+    box-shadow: none !important;
+    font-weight: 600 !important;
 }
 .hort-main-tabs > .tab-nav,
 .gradio-container .hort-main-tabs .tab-nav {
-    margin-bottom: 26px !important;
+    margin-bottom: 22px !important;
     overflow: visible !important;
+    padding: 0 6px !important;
 }
 .hort-main-tabs > .tab-nav button,
 .gradio-container .hort-main-tabs .tab-nav button {
     min-height: 44px !important;
-    padding: 10px 16px !important;
-    font-size: 13px !important;
-    font-weight: 600 !important;
+    padding: 10px 2px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
 }
 
 .plot-container, .js-plotly-plot, .plotly, .gr-plot {
-    border-radius: 4px !important;
+    border-radius: 10px !important;
     overflow: hidden !important;
 }
 
@@ -1795,12 +1804,11 @@ footer { display: none !important; }
 }
 
 @media (max-width: 900px) {
-    .hero-title { font-size: 30px; }
+    .app-sidebar { border-right: none; border-bottom: 1px solid var(--hort-border); }
 }
 @media (max-width: 560px) {
     .panel-card, .chart-card, .results-card { padding: 16px !important; }
-    .hero-subtitle { font-size: 13px; }
-    .metric-value { font-size: 18px; }
+    .kpi-value { font-size: 20px; }
 }
 """
 
@@ -1850,91 +1858,88 @@ def make_exact_file_input():
 
 with gr.Blocks(title="Rail Delay Lab", theme=HORT_THEME, css=CUSTOM_CSS) as demo:
     gr.HTML(f"""
-    <section class="hero-card">
-        <div class="term-titlebar">
-            <span class="term-dot"></span>
-            <span class="term-path">~/rail-delay-lab</span>
+    <div class="brand-strip">
+        <div class="brand-mark">{icon_svg('train', 13)}</div>
+        <span class="brand-name">Rail Delay Lab</span>
+        <div class="brand-spacer"></div>
+        <div class="status-pill">
+            <span class="status-dot"></span>
+            <span class="label">Live</span>
         </div>
-        <div class="hero-body">
-            <div class="hero-kicker">&gt; railway_capacity_decision_lab</div>
-            <div class="hero-title">Rail Delay Lab</div>
-            <div class="hero-subtitle">
-                An interactive railway simulation for exploring train capacity, delay propagation, conflict resolution, and timetable reliability.
-            </div>
-            <div class="hero-chips">
-                <span class="hero-chip"><span class="br">[</span>Timetable Planning<span class="br">]</span></span>
-                <span class="hero-chip"><span class="br">[</span>Delay Scenarios<span class="br">]</span></span>
-                <span class="hero-chip"><span class="br">[</span>Space-Time Visuals<span class="br">]</span></span>
-                <span class="hero-chip"><span class="br">[</span>Capacity Sweet-Spot<span class="br">]</span></span>
-            </div>
-        </div>
-    </section>
+        <div class="avatar-chip">OP</div>
+    </div>
     """)
 
     with gr.Tabs(elem_classes=["hort-main-tabs"]):
         with gr.TabItem("Delay Propagation and Conflict Resolution"):
             gr.Markdown("## Delay Propagation and Conflict Resolution")
-            gr.Markdown("Upload CSV files to populate the tables below, or edit them manually. Then select a Train to minimize its delay.")
-            metric_strip = gr.HTML(build_metric_html(None, None))
-
-            with gr.Row():
-                with gr.Column(scale=1):
-                    with gr.Group(elem_classes=["panel-card"]):
-                        gr.HTML(section_header("building", "Infrastructure"))
-                        file_infra = make_exact_file_input()
-                        t_stations = gr.Dataframe(value=d_stations, label="Stations Data", interactive=True, max_height=560, wrap=True, show_row_numbers=True, buttons=[])
-                        file_infra.upload(fn=load_csv, inputs=file_infra, outputs=t_stations)
-                        txt_spacing = gr.Number(value=5.0, label="Min Safety Spacing (km)", step=0.1)
-
-                    with gr.Group(elem_classes=["panel-card"]):
-                        gr.HTML(section_header("clock", "Delay Injection"))
-                        file_delays = make_exact_file_input()
-                        t_delays = gr.Dataframe(value=d_delays, label="Delay Data", interactive=True, max_height=520, wrap=True, show_row_numbers=True, buttons=[])
-                        file_delays.upload(fn=load_csv, inputs=file_delays, outputs=t_delays)
-
-                        main_delay_mode = gr.Radio(
-                            choices=["Use Uploaded/Inserted Delay", "Randomized (Monte Carlo)"],
-                            value="Use Uploaded/Inserted Delay",
-                            label="Simulation Delay Mode",
-                            elem_classes=["hort-radio"]
+            gr.Markdown("Upload CSV files to populate the tables below, or edit them manually, then run the resolver.")
+
+            with gr.Row(equal_height=True):
+                with gr.Column(scale=0, min_width=300, elem_classes=["app-sidebar"]):
+                    gr.HTML('<p class="side-label">Infrastructure</p>')
+                    txt_spacing = gr.Number(value=5.0, label="Min Safety Spacing (km)", step=0.1)
+
+                    gr.HTML('<p class="side-label">Delay Injection</p>')
+                    main_delay_mode = gr.Radio(
+                        choices=["Use Uploaded/Inserted Delay", "Randomized (Monte Carlo)"],
+                        value="Use Uploaded/Inserted Delay",
+                        label="Simulation Delay Mode",
+                        elem_classes=["hort-radio"]
+                    )
+                    main_rand_prob = gr.Slider(0, 100, value=25, step=5, label="Delay Probability (%)")
+                    main_min_delay = gr.Number(value=5, label="Min Delay (min)")
+                    main_max_delay = gr.Number(value=15, label="Max Delay (min)")
+
+                    gr.HTML('<p class="side-label">View &amp; Optimization</p>')
+                    with gr.Column(elem_classes=["selector-strip"]):
+                        dd_view = gr.Dropdown(
+                            choices=["All Scenarios", "Nominal Only", "Conflicted Only", "Resolved Only"],
+                            value="All Scenarios",
+                            label="Select View",
+                            interactive=True,
+                            filterable=False,
+                            allow_custom_value=False,
+                            elem_id="view_listbox",
+                            elem_classes=["hort-listbox", "hort-view-select"]
+                        )
+                        dd_selected_train = gr.Dropdown(
+                            choices=["None", "101", "102"],
+                            value="None",
+                            label="Select Train",
+                            interactive=True,
+                            filterable=False,
+                            allow_custom_value=False,
+                            elem_id="train_listbox",
+                            elem_classes=["hort-listbox", "hort-train-select"]
                         )
-                        with gr.Row():
-                            main_rand_prob = gr.Slider(0, 100, value=25, step=5, label="Delay Probability (%)")
-                            main_min_delay = gr.Number(value=5, label="Min Delay (min)")
-                            main_max_delay = gr.Number(value=15, label="Max Delay (min)")
+                    txt_max_buffer = gr.Number(value=15.0, label="Max Buffer Cap (min)", step=1.0)
+
+                    gr.HTML('<div class="sidebar-spacer"></div>')
+                    btn = gr.Button("Simulate", variant="primary", size="lg")
+
+                with gr.Column(scale=1, elem_classes=["app-main"]):
+                    metric_strip = gr.HTML(build_metric_html(None, None))
+
+                    with gr.Row():
+                        with gr.Column():
+                            with gr.Group(elem_classes=["panel-card", "data-row-card"]):
+                                gr.HTML(section_header("building", "Infrastructure Data"))
+                                file_infra = make_exact_file_input()
+                                t_stations = gr.Dataframe(value=d_stations, label="Stations Data", interactive=True, max_height=300, wrap=True, show_row_numbers=True, buttons=[])
+                                file_infra.upload(fn=load_csv, inputs=file_infra, outputs=t_stations)
+                        with gr.Column():
+                            with gr.Group(elem_classes=["panel-card", "data-row-card"]):
+                                gr.HTML(section_header("clock", "Delay Data"))
+                                file_delays = make_exact_file_input()
+                                t_delays = gr.Dataframe(value=d_delays, label="Delay Data", interactive=True, max_height=300, wrap=True, show_row_numbers=True, buttons=[])
+                                file_delays.upload(fn=load_csv, inputs=file_delays, outputs=t_delays)
 
-                    with gr.Group(elem_classes=["panel-card"]):
-                        gr.HTML(section_header("target", "View & Optimization"))
-                        with gr.Row(elem_classes=["selector-strip"]):
-                            dd_view = gr.Dropdown(
-                                choices=["All Scenarios", "Nominal Only", "Conflicted Only", "Resolved Only"],
-                                value="All Scenarios",
-                                label="Select View",
-                                interactive=True,
-                                filterable=False,
-                                allow_custom_value=False,
-                                elem_id="view_listbox",
-                                elem_classes=["hort-listbox", "hort-view-select"]
-                            )
-                            dd_selected_train = gr.Dropdown(
-                                choices=["None", "101", "102"],
-                                value="None",
-                                label="Select Train",
-                                interactive=True,
-                                filterable=False,
-                                allow_custom_value=False,
-                                elem_id="train_listbox",
-                                elem_classes=["hort-listbox", "hort-train-select"]
-                            )
-                        txt_max_buffer = gr.Number(value=15.0, label="Max Buffer Cap (min)", step=1.0)
-
-                with gr.Column(scale=2):
                     with gr.Group(elem_classes=["panel-card"]):
                         gr.HTML(section_header("train", "Train Requests"))
                         file_trains = make_exact_file_input()
-                        t_trains = gr.Dataframe(value=d_trains, label="Train Requests Data", interactive=True, max_height=680, wrap=True, show_row_numbers=True, buttons=[])
+                        t_trains = gr.Dataframe(value=d_trains, label="Train Requests Data", interactive=True, max_height=320, wrap=True, show_row_numbers=True, buttons=[])
                         file_trains.upload(fn=load_train_csv, inputs=file_trains, outputs=[t_trains, dd_selected_train])
-                        btn = gr.Button("Simulate", variant="primary", size="lg")
 
                     with gr.Group(elem_classes=["chart-card"]):
                         gr.HTML(section_header("chart", "Operational Space-Time Diagram"))
@@ -1958,38 +1963,49 @@ with gr.Blocks(title="Rail Delay Lab", theme=HORT_THEME, css=CUSTOM_CSS) as demo
             gr.Markdown("## Economic Capacity Analysis")
             gr.Markdown("Evaluate the capacity/reliability trade-off, TAC revenue, performance-regime penalties, and the best operating sweet spot.")
 
-            with gr.Row():
-                with gr.Column(scale=1):
-                    with gr.Group(elem_classes=["panel-card"]):
-                        gr.HTML(section_header("building", "Infrastructure & Delays"))
-                        econ_file_infra = make_exact_file_input()
-                        econ_t_stations = gr.Dataframe(value=d_stations, label="Stations Data", interactive=True, max_height=560, wrap=True, show_row_numbers=True, buttons=[])
-                        econ_file_infra.upload(fn=load_csv, inputs=econ_file_infra, outputs=econ_t_stations)
-                        econ_txt_spacing = gr.Number(value=5.0, label="Min Safety Spacing (km)", step=0.1)
-
-                        econ_file_delays = make_exact_file_input()
-                        econ_t_delays = gr.Dataframe(value=d_delays, label="Delay Data", interactive=True, max_height=520, wrap=True, show_row_numbers=True, buttons=[])
-                        econ_file_delays.upload(fn=load_csv, inputs=econ_file_delays, outputs=econ_t_delays)
+            with gr.Row(equal_height=True):
+                with gr.Column(scale=0, min_width=300, elem_classes=["app-sidebar"]):
+                    gr.HTML('<p class="side-label">Infrastructure</p>')
+                    econ_txt_spacing = gr.Number(value=5.0, label="Min Safety Spacing (km)", step=0.1)
+
+                    gr.HTML('<p class="side-label">Delay Injection Strategy</p>')
+                    delay_mode = gr.Radio(
+                        choices=["Predefined (from Delays Tab)", "Randomized"],
+                        value="Predefined (from Delays Tab)",
+                        label="Delay Mode",
+                        elem_classes=["hort-radio"]
+                    )
+                    rand_prob = gr.Slider(0, 100, value=25, step=5, label="Probability of Delay per Train (%)")
+                    min_delay = gr.Number(value=5, label="Min Random Delay (min)")
+                    max_delay = gr.Number(value=15, label="Max Random Delay (min)")
+
+                    gr.HTML('<p class="side-label">Primary Delay Responsibility</p>')
+                    gr.Markdown("_Share of every primary delay attributed to the Infrastructure Manager (IM) vs the Railway Undertaking (RU), applied before the search runs._")
+                    im_resp_share = gr.Slider(0, 100, value=50, step=5, label="IM Responsibility Share (%)")
+
+                    gr.HTML('<p class="side-label">Economic &amp; Search Parameters</p>')
+                    max_trains_in = gr.Number(value=25, label="Max Trains to Evaluate")
+                    num_tac = gr.Number(value=115.84, label="TAC Fee (€ per train)")
+                    num_pr = gr.Number(value=7.09, label="PR Penalty (€ per min)")
+
+                    gr.HTML('<div class="sidebar-spacer"></div>')
+                    btn_econ = gr.Button("Calculate Sweet Spot", variant="primary", size="lg")
+
+                with gr.Column(scale=1, elem_classes=["app-main"]):
+                    with gr.Row():
+                        with gr.Column():
+                            with gr.Group(elem_classes=["panel-card", "data-row-card"]):
+                                gr.HTML(section_header("building", "Infrastructure Data"))
+                                econ_file_infra = make_exact_file_input()
+                                econ_t_stations = gr.Dataframe(value=d_stations, label="Stations Data", interactive=True, max_height=300, wrap=True, show_row_numbers=True, buttons=[])
+                                econ_file_infra.upload(fn=load_csv, inputs=econ_file_infra, outputs=econ_t_stations)
+                        with gr.Column():
+                            with gr.Group(elem_classes=["panel-card", "data-row-card"]):
+                                gr.HTML(section_header("clock", "Delay Data"))
+                                econ_file_delays = make_exact_file_input()
+                                econ_t_delays = gr.Dataframe(value=d_delays, label="Delay Data", interactive=True, max_height=300, wrap=True, show_row_numbers=True, buttons=[])
+                                econ_file_delays.upload(fn=load_csv, inputs=econ_file_delays, outputs=econ_t_delays)
 
-                    with gr.Group(elem_classes=["panel-card"]):
-                        gr.HTML(section_header("dice", "Delay Injection Strategy"))
-                        delay_mode = gr.Radio(
-                            choices=["Predefined (from Delays Tab)", "Randomized"],
-                            value="Predefined (from Delays Tab)",
-                            label="Delay Mode",
-                            elem_classes=["hort-radio"]
-                        )
-                        with gr.Row():
-                            rand_prob = gr.Slider(0, 100, value=25, step=5, label="Probability of Delay per Train (%)")
-                            min_delay = gr.Number(value=5, label="Min Random Delay (min)")
-                            max_delay = gr.Number(value=15, label="Max Random Delay (min)")
-
-                    with gr.Group(elem_classes=["panel-card"]):
-                        gr.HTML(section_header("scale", "Primary Delay Responsibility"))
-                        gr.Markdown("_Sets, **before** the sweet-spot search runs, what share of every primary delay is attributed to the Infrastructure Manager (IM) vs the Railway Undertaking (RU) - applied the same way whether the delay is Predefined or Randomized above. IM-caused delays are a penalty for IM; RU-caused delays are income for IM. Secondary delays always stay a cost for IM (PR Penalty)._")
-                        im_resp_share = gr.Slider(0, 100, value=50, step=5, label="IM Responsibility Share for Primary Delays (%)")
-
-                with gr.Column(scale=2):
                     with gr.Group(elem_classes=["panel-card"]):
                         gr.HTML(section_header("train", "Fleet Mix"))
                         t_fleet = gr.Dataframe(
@@ -1997,20 +2013,12 @@ with gr.Blocks(title="Rail Delay Lab", theme=HORT_THEME, css=CUSTOM_CSS) as demo
                             value=[["High-Speed", 130, 2, 1], ["Regional", 100, 4, 2], ["Freight", 80, 5, 3]],
                             interactive=True,
                             label="Fleet Composition",
-                            max_height=420,
+                            max_height=320,
                             wrap=True,
                             show_row_numbers=True,
                             buttons=[]
                         )
 
-                    with gr.Group(elem_classes=["panel-card"]):
-                        gr.HTML(section_header("coin", "Economic & Search Parameters"))
-                        with gr.Row():
-                            max_trains_in = gr.Number(value=25, label="Max Trains to Evaluate")
-                            num_tac = gr.Number(value=115.84, label="TAC Fee (€ per train)")
-                            num_pr = gr.Number(value=7.09, label="PR Penalty (€ per min)")
-                        btn_econ = gr.Button("Calculate Sweet Spot", variant="primary", size="lg")
-
             with gr.Group(elem_classes=["results-card"]):
                 gr.HTML(section_header("bars", "Economic Capacity Outputs"))
                 with gr.Row():