/* ── Reset & base ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ── Light mode (default) ── */
  --bg:#f5f3ed;
  --bg-secondary:#eae7e0;
  --bg-tertiary:#e0ddd5;
  --bg-surface:#ffffff;

  --text: #131413;
  --text-secondary:#4a4843;
  --text-muted:#8a8680;

  --accent:#7aab8e;
  --accent-hover:#639678;
  --accent-subtle:#e4f0e9;

  --border:#d6d3cc;
  --border-subtle:#e6e3dc;

  /* Semantic */
  --color-success:#1a7a3a;
  --color-success-bg:#e8f5ee;
  --color-error:#c07070;
  --color-error-bg:#fce8e8;
  --color-warning:#b07010;
  --color-warning-bg:#fdf4da;
  --color-info:#4a9ba8;
  --color-info-bg:#e6f3f5;

  /* Typography */
  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'Fraunces',Georgia,serif;
  --font-mono:'SF Mono','Fira Code',Menlo,Monaco,Consolas,monospace;

  /* Radius */
  --radius-sm:2px;
  --radius:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 2px 6px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.03);
  --shadow-md:0 4px 12px rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,.10),0 3px 6px rgba(0,0,0,.04);
}

/* ── Dark mode ── */
[data-theme="dark"]{
  --bg:#1a1a19;
  --bg-secondary:#222221;
  --bg-tertiary:#2b2a28;
  --bg-surface:#2f2e2c;

  --text:#eeebe4;
  --text-secondary:#a8a49c;
  --text-muted:#5c5955;

  --accent:#a8cdb8;
  --accent-hover:#bddacc;
  --accent-subtle:rgba(168,205,184,.12);

  --border:#3a3937;
  --border-subtle:#333230;

  --color-success:#3cb870;
  --color-success-bg:rgba(60,184,112,.12);
  --color-error:#c07070;
  --color-error-bg:rgba(192,112,112,.12);
  --color-warning:#d4a030;
  --color-warning-bg:rgba(212,160,48,.12);
  --color-info:#5aabb8;
  --color-info-bg:rgba(90,171,184,.12);

  --shadow-xs:0 1px 2px rgba(0,0,0,.2);
  --shadow:0 2px 6px rgba(0,0,0,.25);
  --shadow-md:0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:0 8px 24px rgba(0,0,0,.35);
}

/* ── Accent overrides (must come after dark mode) ── */
[data-accent="amber"]{--accent:#c97a2a;--accent-hover:#a86420;--accent-subtle:#f0e4d4}
[data-theme="dark"][data-accent="amber"]{--accent:#b8782a;--accent-hover:#c98a3a;--accent-subtle:rgba(184,120,42,.12)}
[data-accent="purple"]{--accent:#9b98b8;--accent-hover:#8280a6;--accent-subtle:#eae9f0}
[data-theme="dark"][data-accent="purple"]{--accent:#cbcadb;--accent-hover:#dddce8;--accent-subtle:rgba(203,202,219,.12)}

html{font-size:15px}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}

/* ── Layout ───────────────────────────────────────── */
.container{max-width:960px;margin:0 auto;padding:var(--space-8,2rem)}
.page-header{margin-bottom:2rem}
.page-header h1{font-family:var(--font-serif);font-size:1.75rem;font-weight:600;line-height:1.2;margin-bottom:0.25rem}
.page-header p{color:var(--text-secondary);font-size:0.95rem}

/* ── Cards ────────────────────────────────────────── */
.card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;margin-bottom:1rem}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)}
.card-header h2{font-family:var(--font-serif);font-size:1rem;font-weight:600}
.card-body{padding:1.25rem}

/* ── Badges ───────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:0.15rem 0.5rem;border-radius:var(--radius-sm);font-size:0.72rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase}
.badge-pending{background:var(--color-warning-bg);color:var(--color-warning)}
.badge-running{background:var(--accent-subtle);color:var(--accent)}
.badge-completed,.badge-done{background:var(--color-success-bg);color:var(--color-success)}
.badge-failed,.badge-error{background:var(--color-error-bg);color:var(--color-error)}
.badge-new{background:var(--color-info-bg);color:var(--color-info)}
.badge-count{background:var(--bg-tertiary);color:var(--text-secondary)}

/* ── Buttons ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.55rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius-lg);font-size:0.9rem;font-weight:500;cursor:pointer;background:transparent;color:var(--text);font-family:inherit;transition:transform .2s cubic-bezier(.25,.46,.45,.94)}
.btn:hover{transform:scale(1.022);text-decoration:none;color:var(--text)}
.btn:active{transform:scale(0.978)}

/* Primary — near-black fill */
.btn-primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn-primary:hover{transform:scale(1.022);color:var(--bg);text-decoration:none}

/* Accent — amber, for key CTAs */
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{transform:scale(1.022);color:#fff;text-decoration:none}

/* Danger — destructive actions */
.btn-danger{background:var(--color-error);color:#fff;border-color:var(--color-error)}
.btn-danger:hover{transform:scale(1.022)}

/* Ghost — no border, just text */
.btn-ghost{border-color:transparent;color:var(--text-secondary)}
.btn-ghost:hover{color:var(--text)}

/* Outline — visible border, transparent fill (default .btn is this) */

/* Subtle — filled with secondary bg */
.btn-subtle{background:var(--bg-secondary);border-color:var(--bg-secondary);color:var(--text)}
.btn-subtle:hover{transform:scale(1.03)}

/* Dark — dark fill for use on dark sections (like Claude's macOS/Windows buttons) */
.btn-dark{background:var(--bg-tertiary);border-color:var(--border);color:var(--text)}
.btn-dark:hover{transform:scale(1.03)}

/* Sizes */
.btn-sm{padding:0.35rem 0.85rem;font-size:0.82rem}
.btn-lg{padding:0.7rem 1.6rem;font-size:1rem;font-weight:600}
.btn-icon{padding:0.5rem;border-radius:var(--radius-md)}
.btn-icon svg{width:1.1rem;height:1.1rem}

/* ── Forms ────────────────────────────────────────── */
input[type="text"],input[type="url"],input[type="number"],input[type="email"],input[type="password"],textarea,select{
  width:100%;padding:0.7rem 1rem;background:var(--bg-tertiary);border:1px solid transparent;border-radius:var(--radius-lg);
  color:var(--text);font-size:0.9rem;font-family:inherit;transition:border-color .2s ease, box-shadow .2s ease}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
label{display:block;font-size:0.82rem;font-weight:500;color:var(--text-secondary);margin-bottom:0.3rem}
.form-group{margin-bottom:1rem}
.form-row{display:flex;gap:1rem}.form-row>*{flex:1}
.btn-full{width:100%;justify-content:center;padding:0.65rem 1.1rem;font-size:0.9rem}

/* ── Tables ───────────────────────────────────────── */
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:0.6rem 0.75rem;font-size:0.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;border-bottom:1px solid var(--border)}
td{padding:0.65rem 0.75rem;font-size:0.88rem;border-bottom:1px solid var(--border-subtle)}
tr:hover{background:var(--bg-secondary)}

/* ── Stats row ────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:2rem}
.stat-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.25rem 1.5rem}
.stat-value{font-family:var(--font-serif);font-size:2rem;font-weight:300;line-height:1.15;letter-spacing:-0.02em}
.stat-label{font-size:0.72rem;font-weight:600;color:var(--text-muted);margin-top:0.25rem;text-transform:uppercase;letter-spacing:0.06em}

/* ── Key-value detail ─────────────────────────────── */
.kv{display:grid;grid-template-columns:140px 1fr;gap:0.5rem 1rem;font-size:0.88rem}
.kv dt{color:var(--text-muted);font-weight:500}
.kv dd{color:var(--text)}

/* ── Activity / log ───────────────────────────────── */
.log-line{font-family:var(--font-mono);font-size:0.8rem;padding:0.25rem 0;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle)}
.log-line:last-child{border-bottom:none}

/* ── Pill list ────────────────────────────────────── */
.pill{display:inline-block;padding:0.15rem 0.5rem;margin:0.15rem;border-radius:var(--radius-pill);font-size:0.8rem;background:var(--bg-tertiary);color:var(--text-secondary)}

/* ── Empty state ──────────────────────────────────── */
.empty{text-align:center;padding:2.5rem 1.25rem;color:var(--text-muted)}

/* ── Utility ──────────────────────────────────────── */
.mt-16{margin-top:1rem}.mb-16{margin-bottom:1rem}
.text-secondary{color:var(--text-secondary)}
.text-sm{font-size:0.8rem}
.mono{font-family:var(--font-mono)}
.flex{display:flex;align-items:center;gap:0.5rem}
.flex-between{display:flex;align-items:center;justify-content:space-between}

/* ── Alerts / Notices ─────────────────────────────── */
.dq-banner{padding:0.875rem 1.25rem;border-radius:var(--radius-md);margin-bottom:1rem;border:1px solid}
.dq-bad{background:var(--color-error-bg);border-color:var(--color-error)}
.dq-bad .dq-banner-header{color:var(--color-error)}
.dq-warn{background:var(--color-warning-bg);border-color:var(--color-warning)}
.dq-warn .dq-banner-header{color:var(--color-warning)}
.dq-banner-header{font-size:0.88rem;font-weight:600}
.dq-banner-fields{display:flex;flex-wrap:wrap;gap:0.25rem;margin-top:0.4rem}
.dq-missing-pill{display:inline-block;padding:0.15rem 0.5rem;border-radius:var(--radius-pill);font-size:0.72rem;background:var(--color-error-bg);color:var(--color-error);font-weight:500}
.dq-warn .dq-missing-pill{background:var(--color-warning-bg);color:var(--color-warning)}
.dq-empty{color:var(--color-error);font-style:italic;font-size:0.8rem;opacity:.8}
.card-warn{border-color:var(--color-error)}
.stat-card-warn{border-color:var(--color-warning);background:var(--color-warning-bg)}

/* ── Pipeline Inspector ──────────────────────────── */

/* Summary bar */
.pi-summary{background:var(--bg-surface);border-bottom:1px solid var(--border);padding:0.75rem 1.25rem}
.pi-summary-top{display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;margin-bottom:0.5rem}
.pi-back{color:var(--accent);text-decoration:none;font-weight:600;font-size:0.88rem}
.pi-back:hover{text-decoration:underline}
.pi-summary-stats{font-size:0.8rem;color:var(--text-secondary)}
.pi-summary-cost{font-size:0.72rem;color:var(--text-muted);font-family:var(--font-mono);margin-left:auto}
.pi-fields{display:flex;flex-wrap:wrap;gap:0.25rem}
.pi-pill{display:inline-flex;align-items:center;gap:0.2rem;padding:0.15rem 0.5rem;border-radius:var(--radius-pill);font-size:0.65rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:all .15s}
.pi-pill-ok{background:var(--color-success-bg);color:var(--color-success)}
.pi-pill-miss{background:var(--color-error-bg);color:var(--color-error);border-color:var(--color-error)}
.pi-pill-miss:hover{opacity:.8}

/* Flow container */
.pi-flow{padding:1.5rem 0}

/* Stage group */
.pi-stage{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:0}
.pi-stage-head{display:flex;align-items:center;gap:0.875rem;margin-bottom:1rem}
.pi-stage-num{width:2.25rem;height:2.25rem;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;flex-shrink:0}
.pi-stage-title{font-family:var(--font-serif);font-size:1rem;font-weight:600}
.pi-stage-desc{font-size:0.8rem;color:var(--text-secondary);margin-top:0.06rem}

/* Arrow between stages */
.pi-stage-arrow{text-align:center;padding:0.5rem 0;font-size:1.125rem;color:var(--border);line-height:1}

/* Section swim lane */
.pi-stage-lanes{display:flex;flex-direction:column;gap:0.875rem}
.pi-lane{border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:0.75rem;border-left:3px solid var(--lc,var(--border));background:var(--bg)}
.pi-lane-ghost{border:2px dashed var(--color-error);background:var(--color-error-bg);border-left-width:3px;border-left-style:solid;border-left-color:var(--color-error)}
.pi-lane-head{margin-bottom:0.625rem}
.pi-lane-name{font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.pi-lane-desc{font-size:0.72rem;color:var(--text-muted);margin-top:0.06rem}
.pi-lane-stats{font-size:0.65rem;color:var(--text-muted);font-family:var(--font-mono);margin-top:0.2rem}
.pi-lane-err{color:var(--color-error);font-weight:700}

/* Step cards flow horizontally within a lane */
.pi-lane-steps{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding-bottom:0.25rem}

/* Arrow between steps */
.pi-arrow{display:flex;align-items:center;color:var(--text-muted);font-size:1rem;padding:0 0.375rem;flex-shrink:0;padding-top:0.375rem}

/* Step card */
.pi-step{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);padding:0.5rem 0.625rem;min-width:11.25rem;max-width:16.25rem;flex-shrink:0;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pi-step:hover{border-color:var(--accent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 12%,transparent)}
.pi-step.active{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
[data-theme="dark"] .pi-step:hover{box-shadow:0 0 8px color-mix(in srgb,var(--accent) 15%,transparent)}
[data-theme="dark"] .pi-step.active{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 25%,transparent)}
.pi-step-done{border-left:3px solid var(--sc,var(--color-success))}
.pi-step-error{border-left:3px solid var(--color-error);background:var(--color-error-bg)}

/* Step top row: icon + label + meta */
.pi-step-top{display:flex;align-items:center;gap:0.375rem}
.pi-step-icon{width:1.375rem;height:1.375rem;border-radius:50%;border:1.5px solid;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:700;flex-shrink:0;background:var(--bg)}
.pi-step-label{font-size:0.72rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.pi-step-meta{font-size:0.6rem;color:var(--text-muted);font-family:var(--font-mono);white-space:nowrap;flex-shrink:0}

/* Rich output */
.pi-step-output{margin-top:0.375rem;padding-top:0.3rem;border-top:1px solid var(--border-subtle)}
.pi-out-line{font-size:0.65rem;line-height:1.35;color:var(--color-success);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pi-out-first{font-weight:600}
.pi-step-error .pi-out-line{color:var(--text-secondary)}

/* Error on step */
.pi-step-err{font-size:0.6rem;color:var(--color-error);margin-top:0.25rem;padding-top:0.2rem;border-top:1px solid var(--color-error-bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Comment annotations */
.pi-comment{display:inline-flex;align-items:flex-start;gap:0.375rem;font-size:0.72rem;line-height:1.4;padding:0.375rem 0.625rem;border-radius:var(--radius-md);margin:0 0.5rem;flex-shrink:0;max-width:18.75rem}
.pi-comment-icon{flex-shrink:0;font-size:0.82rem}
.pi-comment-success{background:var(--color-success-bg);color:var(--color-success)}
.pi-comment-warning{background:var(--color-warning-bg);color:var(--color-warning)}
.pi-comment-error{background:var(--color-error-bg);color:var(--color-error)}
.pi-comment-info{background:var(--accent-subtle);color:var(--accent)}

/* Complete badge */
.pi-complete{text-align:center;padding:0.875rem 1.25rem;font-size:0.9rem;font-weight:700;border-radius:var(--radius-lg);border:1px solid}
.pi-complete-done{background:var(--color-success-bg);color:var(--color-success);border-color:var(--color-success)}
.pi-complete-error{background:var(--color-error-bg);color:var(--color-error);border-color:var(--color-error)}

/* ── Detail slide-in panel ── */
.trace-detail-panel{position:fixed;top:0;right:-35rem;width:35rem;height:100vh;background:var(--bg-surface);border-left:1px solid var(--border);transition:right .25s ease;z-index:200;overflow-y:auto;box-shadow:var(--shadow-lg)}
.trace-detail-panel.open{right:0}
.trace-detail-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-surface);z-index:1}
.trace-detail-header h3{font-family:var(--font-serif);font-size:0.9rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:27.5rem}
.trace-detail-body{padding:1.25rem}
.trace-detail-meta{margin-bottom:1rem}
.trace-detail-section{margin-bottom:1.25rem}
.trace-detail-section h4{font-size:0.72rem;text-transform:uppercase;color:var(--text-muted);letter-spacing:0.04em;margin-bottom:0.5rem;font-weight:600}
.trace-pre{background:var(--bg);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:0.75rem;font-family:var(--font-mono);font-size:0.72rem;white-space:pre-wrap;word-break:break-word;max-height:31.25rem;overflow-y:auto;line-height:1.5;color:var(--text-secondary);tab-size:2}
.trace-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:150}
.trace-overlay.open{display:block}
[data-theme="dark"] .trace-overlay.open{background:rgba(0,0,0,.5)}

/* ── Reduced motion ───────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}