*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font: "Inter", system-ui, -apple-system, sans-serif;--bg: #ffffff;--bg-subtle: #fafafa;--bg-hover: #f5f5f5;--border: #e8e8e8;--border-strong: #d4d4d4;--text-1: #111111;--text-2: #3d3d3d;--text-3: #8a8a8a;--text-4: #b8b8b8;--grid: 200px 134px 1fr 140px 320px;--step-done: #22c55e;--step-running: #3b82f6;--step-observing: #7c3aed;--step-waiting: #f59e0b;--step-pending: #e2e4e8;--step-failed: #ef4444;--chart-line: #5e6ad2;--chart-bar: #f59e0b;--chart-guardrail: #ef4444;--chart-event: #94a3b8;--chart-future: #f0f0f2;--chart-now: #7c3aed;--chart-window-end: #d1d5db}html,body{font-family:var(--font);font-size:14px;line-height:1.5;background:var(--bg-subtle);color:var(--text-2);-webkit-font-smoothing:antialiased}.layout{min-height:100vh;display:flex;flex-direction:column}.header{background:var(--bg);border-bottom:1px solid var(--border);padding:0 32px;height:52px;display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:10}.header-logo{font-size:15px;font-weight:600;color:var(--text-1);letter-spacing:-.3px}.logo-serif{font-family:Georgia,Times New Roman,serif;font-style:italic;font-weight:400;letter-spacing:0}.header-nav{display:flex;gap:4px}.header-nav a{font-size:13px;color:var(--text-3);text-decoration:none;padding:4px 8px;border-radius:5px;transition:color .12s,background .12s}.header-nav a:hover,.header-nav a.active{color:var(--text-1);background:var(--bg-hover)}.main{flex:1;padding:32px;max-width:1440px;margin:0 auto;width:100%}.page-heading{display:flex;align-items:baseline;gap:10px;margin-bottom:20px}.page-title{font-size:15px;font-weight:600;color:var(--text-1);letter-spacing:-.2px}.page-count{font-size:13px;color:var(--text-3)}.runs-table{background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden}.table-header{display:grid;grid-template-columns:var(--grid);padding:0 20px;height:36px;align-items:center;border-bottom:1px solid var(--border);background:var(--bg-subtle)}.table-header-cell{font-size:11px;font-weight:500;color:var(--text-4);text-transform:uppercase;letter-spacing:.5px}.run-row{display:grid;grid-template-columns:var(--grid);padding:14px 20px;align-items:center;border-bottom:1px solid var(--border);transition:background .1s}.run-row:last-child{border-bottom:none}.run-row:hover{background:var(--bg-subtle)}.run-name-cell{padding-right:20px}.run-name{font-size:13px;font-weight:500;color:var(--text-1);line-height:1.4}.run-class-cell{font-size:12px;color:var(--text-3);padding-right:16px}.pipeline-cell{padding-right:20px}.step-pipeline{display:flex;align-items:center;width:100%}.step-dot-outer{position:relative;display:flex;align-items:center;flex-shrink:0}.step-dot-outer.has-pr{cursor:pointer}.step-dot-outer.has-pr:hover .step-dot{transform:scale(1.25);transition:transform .1s}.step-dot-outer[data-tooltip]:hover:after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translate(-50%);background:#1a1a1a;color:#fff;font-size:11px;line-height:1.5;padding:5px 9px;border-radius:5px;white-space:pre;pointer-events:none;z-index:200;box-shadow:0 2px 10px #0000002e}.step-dot-outer[data-tooltip]:hover:before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:#1a1a1a;pointer-events:none;z-index:200}.step-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;transition:transform .1s}.step-dot.completed{background:var(--step-done)}.step-dot.running{background:var(--step-running);animation:step-pulse 1.8s ease-in-out infinite}.step-dot.observing{background:var(--step-observing);animation:step-pulse-purple 1.8s ease-in-out infinite}.step-dot.awaiting_approval{background:var(--step-waiting)}.step-dot.pending{background:var(--step-pending)}.step-dot.failed{background:var(--step-failed)}.step-dot.skipped{background:var(--step-pending);opacity:.5}@keyframes step-pulse{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 4px #3b82f61f}}@keyframes step-pulse-purple{0%,to{box-shadow:0 0 #7c3aed66}50%{box-shadow:0 0 0 4px #7c3aed1f}}.step-connector{height:1.5px;flex:1;min-width:0}.step-connector.done{background:var(--step-done)}.step-connector.pending{background:var(--step-pending)}.track-pipeline{width:100%}.track-segments{display:flex;gap:1.5px;height:7px;border-radius:4px;overflow:hidden}.track-segment{flex:1;min-width:0}.track-segment.completed{background:var(--step-done)}.track-segment.running{background:var(--step-running)}.track-segment.observing{background:var(--step-observing)}.track-segment.awaiting_approval{background:var(--step-waiting)}.track-segment.pending{background:var(--step-pending)}.track-segment.failed{background:var(--step-failed)}.track-segment.skipped{background:var(--step-pending);opacity:.5}.track-segment.has-pr{cursor:pointer}.track-segment.has-pr:hover{filter:brightness(1.12)}.track-segment[data-tooltip]:hover:after{content:attr(data-tooltip);position:fixed;background:#1a1a1a;color:#fff;font-size:11px;line-height:1.5;padding:5px 9px;border-radius:5px;white-space:pre;pointer-events:none;z-index:200;box-shadow:0 2px 10px #0000002e;transform:translate(-50%) translateY(-130%)}.track-meta{display:flex;align-items:flex-start;justify-content:space-between;position:relative;height:16px;margin-top:3px}.track-ticks{position:relative;flex:1;height:100%}.track-tick{position:absolute;transform:translate(-50%);font-size:10px;color:var(--text-4);line-height:1;top:1px}.track-count{font-size:10.5px;color:var(--text-3);white-space:nowrap;padding-left:8px;line-height:1;padding-top:1px}.status-cell{padding-right:16px}.status-indicator{display:flex;align-items:center;gap:7px;margin-bottom:4px}.status-icon{flex-shrink:0;display:block}.status-icon.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status-text{font-size:12.5px;font-weight:500}.status-text-running{color:#2563eb}.status-text-needs_input{color:#b45309}.status-text-observing{color:#6d28d9}.status-text-completed{color:#15803d}.current-step-label{font-size:11.5px;color:var(--text-3);line-height:1.4;padding-left:18px}.metrics-cell{display:flex;flex-direction:column;gap:9px}.sparkline-row{display:flex;align-items:center;gap:10px}.sparkline-label{font-size:10.5px;color:var(--text-3);white-space:nowrap;width:64px;text-align:right;flex-shrink:0}.sparkline-svg-wrap{flex:1}
