@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ==================================================================== */
/* Tokens                                                                */
/* ==================================================================== */
:root {
    --ink: #17221c;
    --ink-2: #2e3a33;
    --muted: #5d6a62;          /* >= 4.5:1 on --paper and --surface */
    --paper: #f4f1e9;
    --surface: #fffdf8;
    --surface-2: #faf8f2;
    --line: #dcd9ce;
    --line-strong: #c7c4b8;
    --green: #236b4a;
    --green-dark: #174a35;
    --mint: #dcefe1;
    --mint-line: #b9d9c2;
    --red: #a13d2f;
    --red-bg: #f8e6e0;
    --red-line: #e9c3b9;
    --amber: #7a5713;
    --amber-bg: #f6edd9;
    --amber-line: #e6d3a6;
    --chart: #1d7f52;          /* single-series data colour */
    --chart-ref: #a7aea9;      /* reference lines (y = x, zero) */
    --grid: #e7e5dc;
    --radius: 5px;
    --shadow-sm: 0 1px 2px rgba(23, 34, 28, .05);
    --shadow: 0 12px 32px rgba(23, 34, 28, .10);
    --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==================================================================== */
/* Base                                                                  */
/* ==================================================================== */
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--paper); font-family: var(--sans); line-height: 1.45; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; letter-spacing: -.03em; }
h2 { margin-bottom: 0; font-size: 18px; letter-spacing: -.015em; }
h3 { margin-bottom: 0; font-size: 16px; letter-spacing: -.01em; }
h4 { margin-bottom: 6px; font-size: 14px; }
a { color: var(--green); }
.hidden { display: none !important; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 12px; color: #fff; background: var(--green-dark); border-radius: var(--radius); }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; box-shadow: none !important; transform: none !important; }
input, textarea, select { display: block; width: 100%; margin: 0 0 14px; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); }
input:focus, textarea:focus, select:focus { outline: 2px solid rgba(35, 107, 74, .2); outline-offset: 0; border-color: var(--green); }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: var(--surface-2); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { width: auto; margin: 0; accent-color: var(--green); }
textarea { min-height: 96px; resize: vertical; }
label { display: block; margin: 0 0 6px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
label small, .label-hint { color: var(--muted); font: 400 11px var(--mono); }
.field-label { display: block; margin: 0 0 6px; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.eyebrow { margin: 0 0 6px; color: var(--green); font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.form-note { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.inline-note { margin: 0; }
.error-text { color: var(--red); }
.msg { min-height: 20px; margin: 16px 0 0; color: var(--red); font-size: 13px; }
.msg.success { color: var(--green); }

/* Buttons */
.primary, .secondary, .danger { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 15px; border: 1px solid transparent; border-radius: var(--radius); font-weight: 600; font-size: 14px; line-height: 1.25; text-align: center; max-width: 100%; transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.primary { color: #fff; background: var(--green); border-color: var(--green); }
.primary:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); box-shadow: 0 4px 12px rgba(23, 74, 53, .22); transform: translateY(-1px); }
.primary:active:not(:disabled), .secondary:active:not(:disabled) { box-shadow: none; transform: translateY(0); }
.secondary { color: var(--green-dark); background: var(--surface); border-color: var(--line-strong); }
.secondary:hover:not(:disabled) { background: #eef7f0; border-color: var(--green); box-shadow: 0 2px 8px rgba(23, 34, 28, .07); }
.danger { color: #fff; background: var(--red); border-color: var(--red); }
.danger:hover:not(:disabled) { background: #852f24; }
.small-btn { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.wide { width: 100%; }
.link-btn { max-width: 100%; padding: 0; color: var(--green); background: none; border: 0; font-weight: 600; font-size: 13px; text-align: left; overflow-wrap: anywhere; }
.link-btn:hover:not(:disabled) { text-decoration: underline; }
.danger-link { color: var(--red); }
.button-group { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.button-group.small { gap: 12px; font-size: 13px; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 0; }

/* Badges (always text, never colour alone) */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; color: var(--muted); background: #eeece4; border: 1px solid var(--line); border-radius: 99px; font: 500 11px var(--mono); white-space: nowrap; }
.badge.ok, .badge.done, .badge.completed, .badge.pass { color: var(--green-dark); background: var(--mint); border-color: var(--mint-line); }
.badge.current, .badge.active { color: #fff; background: var(--green); border-color: var(--green); }
.badge.warn, .badge.skipped, .badge.partial, .badge.interrupted { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.badge.error, .badge.failed { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.badge.running { color: var(--green-dark); background: var(--mint); border-color: var(--mint-line); }
.badge.recommended { color: var(--green-dark); background: #fff; border-color: var(--green); }
.badge.neutral, .badge.unavailable { color: var(--muted); background: var(--surface-2); border-color: var(--line); }

/* ==================================================================== */
/* Auth                                                                  */
/* ==================================================================== */
.auth-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 440px); gap: clamp(28px, 6vw, 88px); align-items: center; width: min(1080px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; padding: 40px 0; }
.auth-intro h1 { max-width: 520px; margin: 28px 0 22px; font-size: clamp(28px, 3.4vw, 42px); }
.auth-steps { display: grid; gap: 10px; max-width: 480px; margin: 0; padding: 0; list-style: none; }
.auth-steps li { display: flex; gap: 12px; align-items: baseline; color: var(--ink-2); font-size: 15px; }
.auth-steps span { color: var(--green); font: 500 12px var(--mono); }
.auth-shell { padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.auth-form { animation: appear .2s ease-out; }
.form-heading { margin-bottom: 18px; }
.form-heading h2 { margin-bottom: 4px; font-size: 22px; }
.form-heading .form-note { margin: 0; }
.switch-row { margin: 16px 0 0; color: var(--muted); font-size: 13px; }
.auth-form .primary.wide { margin-top: 4px; }

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-home { width: 100%; padding: 6px; margin: -6px 0; color: inherit; background: transparent; border: 1px solid transparent; border-radius: 8px; text-align: left; cursor: pointer; transition: background-color .15s, border-color .15s; }
.brand-home:hover { background: #eef7f0; border-color: var(--mint-line); }
.brand-home:hover .brand-mark { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(23, 74, 53, .25); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.brand small { display: block; color: var(--muted); font: 11px var(--mono); }
.brand-mark { flex: 0 0 auto; width: 26px; height: 26px; transition: transform .15s, box-shadow .15s; background: linear-gradient(135deg, var(--green) 0 50%, var(--green-dark) 50% 100%); border-radius: 6px; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .0); position: relative; }
.brand-mark::after { content: ""; position: absolute; inset: 7px; border: 2px solid #fff; border-radius: 2px; border-right-color: transparent; border-top-color: transparent; }
.brand-large strong { font-size: 20px; }

/* ==================================================================== */
/* App shell                                                             */
/* ==================================================================== */
.app-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; gap: 18px; height: 100vh; padding: 20px 14px 16px; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
.sidebar .brand { padding: 6px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { margin: 14px 8px 6px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.nav-group:first-child { margin-top: 0; }
.nav-group strong { display: block; margin-top: 3px; overflow: hidden; color: var(--ink); font: 600 13px var(--sans); letter-spacing: 0; text-transform: none; text-overflow: ellipsis; white-space: nowrap; }
.nav-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--radius); font-size: 14px; font-weight: 500; text-align: left; transition: background-color .15s, color .15s, box-shadow .15s; }
.nav-btn svg { flex: 0 0 auto; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.nav-btn:hover { background: #f1f5ef; color: var(--ink); }
.nav-btn:hover svg { opacity: 1; }
.nav-btn.active { color: var(--green-dark); background: var(--mint); font-weight: 600; box-shadow: inset 3px 0 0 var(--green); }
.sidebar-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 12px 6px 0; border-top: 1px solid var(--line); }
.user-label { overflow: hidden; color: var(--muted); font: 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.sidebar-foot .secondary { align-self: flex-start; }

.main-col { min-width: 0; width: 100%; max-width: 1240px; padding: 18px clamp(16px, 3vw, 36px) 32px; outline: none; }
.app-topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 34px; margin-bottom: 16px; }
.crumb { min-width: 0; overflow: hidden; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.status-bar { display: inline-flex; align-items: center; gap: 8px; max-width: min(640px, 70%); min-height: 28px; padding: 4px 11px; overflow: hidden; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 99px; font: 12px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.status-bar::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; background: var(--line-strong); border-radius: 50%; }
.status-bar.success { color: var(--green-dark); border-color: var(--mint-line); }
.status-bar.success::before { background: var(--green); }
.status-bar.error { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.status-bar.error::before { background: var(--red); }

.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 18px; }
.view-head > div:first-child { min-width: 0; flex: 1 1 360px; }
.view-sub { max-width: 720px; margin: 0; color: var(--muted); font-size: 14px; }
.view-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

/* Toasts */
/* Hand-over banner after evaluation / activation */
.guide-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 18px; margin: 0 0 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--green); border-left: 5px solid var(--green); border-radius: var(--radius); box-shadow: var(--shadow-sm); animation: appear .2s ease-out; }
.guide-banner .guide-text { flex: 1 1 340px; min-width: 0; }
.guide-banner .guide-text strong { display: block; color: var(--green-dark); font-size: 15px; }
.guide-banner .guide-text span { display: block; margin-top: 2px; font-size: 14px; overflow-wrap: anywhere; }
.guide-banner .guide-text small { display: block; margin-top: 4px; color: var(--muted); font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.guide-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.guide-dismiss { color: var(--muted); font-weight: 500; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100% - 36px)); pointer-events: none; }
.toast { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px 11px 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: var(--radius); box-shadow: var(--shadow); font-size: 13px; pointer-events: auto; animation: appear .18s ease-out; }
.toast.error { border-left-color: var(--red); }
.toast p { flex: 1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.toast strong { display: block; margin-bottom: 2px; font-size: 12px; }
.toast button { padding: 0 2px; color: var(--muted); background: none; border: 0; font-size: 16px; line-height: 1; }

/* ==================================================================== */
/* Panels and generic blocks                                            */
/* ==================================================================== */
.panel { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.panel-title { margin-bottom: 12px; font-size: 16px; }
.count-label { min-width: 26px; padding: 2px 8px; color: var(--green-dark); background: var(--mint); border-radius: 99px; font: 12px var(--mono); text-align: center; }
.empty-state { margin: 0; padding: 24px 10px; color: var(--muted); font-size: 14px; text-align: center; }
.empty-state .primary, .empty-state .secondary { margin-top: 12px; }
.empty-block { padding: 28px 16px; text-align: center; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.empty-block h3 { margin-bottom: 6px; }
.empty-block p { max-width: 460px; margin: 0 auto 12px; color: var(--muted); font-size: 14px; }
.loading-line { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 10px; color: var(--muted); font-size: 14px; }
.result-box { margin-top: 14px; padding: 11px 13px; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font: 12px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.result-box.success { color: var(--green-dark); background: var(--mint); border-color: var(--mint-line); }
.result-box.error { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.detail-box { margin-top: 14px; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.detail-box p { margin: 0 0 8px; }
.detail-box p:last-child { margin-bottom: 0; }
.detail-box ul { margin: 6px 0 0 18px; padding: 0; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
.chip-row li { padding: 3px 9px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; font: 11px var(--mono); }
.chip-row li.limit { color: var(--green-dark); background: var(--mint); border-color: var(--mint-line); }
.warning-list { margin: 12px 0 0; padding: 10px 14px; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--radius); font-size: 12px; }
.warning-list ul { margin: 4px 0 0 16px; padding: 0; }
.plain-list { margin: 6px 0 10px 18px; padding: 0; font-size: 13px; }
.plain-list li { margin-bottom: 4px; }
.plain-list small { color: var(--muted); }
.plain-list.numbered { list-style: decimal; }
.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; margin: 0 0 14px; font-size: 14px; }
.kv dt { color: var(--muted); font: 12px var(--mono); }
.kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
progress { display: block; width: 100%; height: 6px; margin: 12px 0 0; accent-color: var(--green); }
.footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 14px; color: var(--muted); border-top: 1px solid var(--line); font: 12px var(--mono); }

/* Tables */
.table-scroll { position: relative; overflow-x: auto; /* relative: keeps .sr-only cells inside the scroll box */ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.panel > .table-scroll:first-child, #runs-table .table-scroll { border-radius: var(--radius); }
.table-details { margin-top: 14px; }
.table-details summary { color: var(--green-dark); font-size: 13px; font-weight: 600; cursor: pointer; }
.table-details[open] summary { margin-bottom: 8px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; font-size: 13px; }
.data-table th { color: var(--ink-2); background: var(--surface-2); font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.data-table td.cell-name { min-width: 150px; overflow-wrap: anywhere; }
.data-table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tr.is-clickable { cursor: pointer; }
.data-table tr.is-clickable td { transition: background-color .12s; }
.data-table tr.is-clickable:hover { background: rgba(220, 239, 225, .45); }
.data-table tr.is-clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.data-table tr.is-selected { background: var(--mint); }
.data-table .row-open { white-space: nowrap; }

/* ==================================================================== */
/* Dashboard                                                             */
/* ==================================================================== */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat { min-width: 0; padding: 15px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.stat-label { display: block; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.stat-value { display: block; margin-top: 6px; overflow-wrap: anywhere; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-sub { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.stat.is-loading .stat-value { color: var(--line-strong); }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.quick { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 15px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s; }
.quick:hover:not(:disabled) { border-color: var(--green); background: #fbfdf9; box-shadow: 0 6px 16px rgba(23, 34, 28, .08); transform: translateY(-1px); }
.quick span { overflow-wrap: anywhere; }
.quick.is-primary { color: #fff; background: var(--green); border-color: var(--green); box-shadow: 0 4px 14px rgba(23, 74, 53, .2); }
.quick.is-primary strong { color: #fff; }
.quick.is-primary span { color: rgba(255, 255, 255, .85); }
.quick.is-primary strong::after { content: "Suggested next"; margin-left: 8px; padding: 1px 6px; color: var(--green-dark); background: rgba(255, 255, 255, .9); border-radius: 99px; font: 500 10px var(--mono); vertical-align: 2px; }
.quick.is-primary:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
.quick:disabled { opacity: 1; background: var(--surface-2); border-style: dashed; }
.quick:disabled strong { color: var(--muted); }
.quick strong { color: var(--green-dark); font-size: 14px; }
.quick span { color: var(--muted); font-size: 12px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.mini-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.mini-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; min-width: 0; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list .mini-main { flex: 1 1 auto; min-width: 0; }
.mini-list .mini-main strong { display: block; overflow-wrap: anywhere; }
.mini-list .mini-main strong .link-btn { font-size: 14px; line-height: 1.3; }
.mini-list .mini-main span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.mini-list .mini-side { flex: 0 0 auto; max-width: 45%; color: var(--muted); text-align: right; font-size: 12px; line-height: 1.4; }
.mini-list .mini-side b { display: block; color: var(--ink); font: 600 15px var(--mono); white-space: nowrap; }

/* ==================================================================== */
/* Projects                                                              */
/* ==================================================================== */
.form-panel { margin-bottom: 16px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.form-grid .span-2 { grid-column: 1 / -1; }
.project-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.project-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; padding: 15px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s, transform .15s; }
.project-item:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(23, 34, 28, .07); transform: translateY(-1px); }
.project-item.is-current { border-color: var(--green); box-shadow: inset 3px 0 0 var(--green); }
.project-item.is-current:hover { box-shadow: inset 3px 0 0 var(--green), 0 6px 18px rgba(23, 34, 28, .08); }
.project-item > * { min-width: 0; }
.project-item h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; font-size: 16px; overflow-wrap: anywhere; }
.project-item .project-desc { margin: 0 0 10px; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.project-facts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: 12px; }
.project-facts div { display: flex; gap: 6px; min-width: 0; }
.project-facts dt { color: var(--muted); font-family: var(--mono); }
.project-facts dd { margin: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

/* ==================================================================== */
/* Project overview                                                      */
/* ==================================================================== */
.facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 16px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.fact { min-width: 0; padding: 13px 15px; background: var(--surface); }
.fact span { display: block; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.fact b { display: block; margin-top: 5px; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fact small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.fact.is-highlight { background: #f2f9f3; }

/* ==================================================================== */
/* Context bar, progress, stepper                                       */
/* ==================================================================== */
.context-bar { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 1px; margin-bottom: 14px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.context-item { min-width: 0; padding: 9px 13px; background: var(--surface); }
.context-item label, .context-label { display: block; margin: 0 0 3px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.context-item select { margin: 0; padding: 5px 8px; font-weight: 600; }
.context-value { display: block; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.context-value .cv-main { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.context-value small { display: block; color: var(--muted); font: 400 11px var(--mono); }
.context-value.muted { color: var(--muted); font-weight: 500; }

.workflow-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; color: var(--muted); font: 12px var(--mono); }
.workflow-progress small { color: var(--green-dark); font-size: 11px; }
.progress-track { flex: 0 1 220px; height: 5px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); border-radius: 99px; transition: width .25s; }
.stepper { display: grid; grid-template-columns: repeat(10, minmax(72px, 1fr)); gap: 0; margin: 0 0 22px; padding: 0 0 4px; overflow-x: auto; list-style: none; scrollbar-width: thin; }
.stepper li { position: relative; min-width: 0; }
.stepper { --dot: 30px; }
.stepper li::before { content: ""; position: absolute; top: calc(var(--dot) / 2); left: calc(-50% + var(--dot) / 2 + 1px); right: calc(50% + var(--dot) / 2 + 1px); height: 2px; background: var(--line); transition: background-color .2s; }
.stepper li:first-child::before { display: none; }
.stepper li.done::before, .stepper li.current::before { background: var(--green); }
.stepper li.optional .step-no { border-color: var(--line-strong); }
.stepper li.optional .step-name { color: var(--muted); font-weight: 500; }
.stepper button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 4px 6px; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius); text-align: center; }
.stepper button:hover:not(:disabled) .step-no { border-color: var(--green); box-shadow: 0 0 0 3px rgba(35, 107, 74, .1); }
.stepper button:disabled { opacity: 1; cursor: not-allowed; }
.stepper .step-no { display: grid; place-items: center; width: var(--dot); height: var(--dot); transition: background-color .2s, border-color .2s, box-shadow .2s; color: var(--muted); background: var(--surface); border: 2px solid var(--line-strong); border-radius: 50%; font: 500 11px var(--mono); position: relative; z-index: 1; }
.stepper .step-name { display: block; max-width: 100%; overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stepper li.done .step-no { color: #fff; background: var(--green); border-color: var(--green); font-size: 0; box-shadow: 0 2px 6px rgba(23, 74, 53, .2); }
.stepper li.done .step-no::after { content: "✓"; font-size: 13px; }
.stepper li.done .step-name { color: var(--green-dark); }
.stepper li.saved .step-no { color: var(--green-dark); background: var(--mint); border-color: var(--green); }  /* done by a saved run */
.stepper li.current .step-no { color: var(--green-dark); background: var(--mint); border-color: var(--green); box-shadow: 0 0 0 4px rgba(35, 107, 74, .16); font-weight: 600; }
.stepper li.current .step-name { color: var(--ink); }
.stepper li.locked .step-no { border-style: dashed; }
.stepper li.locked .step-name { opacity: .7; }
.stepper li.locked .step-no { color: var(--line-strong); background: var(--surface-2); }
.stepper li.error .step-no { color: #fff; background: var(--red); border-color: var(--red); font-size: 0; }
.stepper li.error .step-no::after { content: "!"; font-size: 13px; }
.stepper li.error .step-name { color: var(--red); }

.next-action { max-width: 460px; margin: 0; padding: 8px 12px; color: var(--green-dark); background: var(--mint); border: 1px solid var(--mint-line); border-radius: var(--radius); font-size: 13px; }
.next-action:empty { display: none; }

/* ==================================================================== */
/* Workflow step panels                                                  */
/* ==================================================================== */
.step-panel { margin-top: 14px; scroll-margin-top: var(--scroll-offset, 14px); transition: border-color .15s, box-shadow .15s; }
.step-panel:not(.is-current):not(.is-collapsed):hover { border-color: var(--line-strong); }
.tab-content > .step-panel:first-of-type, .view-head + .step-panel { margin-top: 0; }
.step-panel.is-current { border-color: var(--green); box-shadow: 0 0 0 1px var(--green), 0 8px 24px rgba(23, 74, 53, .08); }
.step-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.step-head > div:first-child { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.step-number { color: var(--green); font: 500 12px var(--mono); }
/* Locked steps collapse to their header + why they are locked */
/* Locked steps, and steps already done by a saved run, collapse to a one-line hint
   (Workflow view only; the registry and prediction panels always stay usable). */
#tab-data .step-panel.is-collapsed { padding-top: 14px; padding-bottom: 14px; background: var(--surface-2); box-shadow: none; }
#tab-data .step-panel.is-collapsed > *:not(.step-head) { display: none !important; }
#tab-data .step-panel.is-collapsed .step-head { margin-bottom: 4px; }
#tab-data .step-panel.is-collapsed .step-head h3 { color: var(--ink-2); }
#tab-data .step-panel.is-collapsed::after { content: attr(data-collapsed-hint); display: block; color: var(--muted); font-size: 13px; }
#tab-data .step-panel.is-collapsed.is-saved { background: #f6faf6; border-color: var(--mint-line); }
#tab-data .step-panel.is-collapsed.is-saved::after { color: var(--green-dark); }
.step-continue { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 13px; }
.inline-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.inline-form .grow { flex: 1 1 260px; min-width: 0; }
.inline-form button { margin-bottom: 14px; }

/* Upload */
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 22px 16px; color: var(--ink-2); background: var(--surface-2); border: 1.5px dashed var(--line-strong); border-radius: var(--radius); font-size: 14px; font-weight: 500; text-align: center; cursor: pointer; transition: border-color .12s, background-color .12s; }
.dropzone:hover, .dropzone.is-dragover, .dropzone:focus-within { background: #f2f9f3; border-color: var(--green); }
.dropzone.is-disabled { color: var(--muted); background: var(--surface-2); border-color: var(--line); cursor: not-allowed; }
.dropzone-title u { color: var(--green); text-decoration-thickness: 1px; }
.dropzone-file { color: var(--muted); font: 12px var(--mono); }
.dropzone.has-file .dropzone-file { color: var(--green-dark); font-weight: 500; }

/* Profile */
.profile-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-top: 14px; }
.profile-stat { padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.profile-stat-label { display: block; margin-bottom: 4px; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.profile-stat-value { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.profile-stat-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.warning-sub { display: block; margin-top: 2px; color: var(--amber); font-size: 12px; }
.data-table td.has-missing { color: var(--amber); }
code { padding: 0 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; font: 12px var(--mono); overflow-wrap: anywhere; }
.target-table td small.reject-reason { max-width: 340px; white-space: normal; }
.target-table tr.is-target-rejected td { color: var(--ink-2); }
.target-table tr.is-chosen td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.install-note { grid-column: 1 / -1; margin: 2px 0 0; }
#cv-folds .field-label { margin-top: 10px; }
#test-note { margin-top: 10px; }
.profile-stat.is-warn { background: var(--amber-bg); border-color: var(--amber-line); }
.profile-stat.is-warn .profile-stat-value { color: var(--amber); }
.profile-warning { margin-top: 14px; padding: 12px 14px; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--radius); font-size: 13px; }
.profile-warning strong { color: #5f430e; }
.profile-warning ul { margin: 6px 0 0 18px; padding: 0; }

/* Target candidates + validation checks */
.check-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 10px 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.check-list li { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.check-list li:last-child { border-bottom: 0; }
.check-list .badge { justify-self: start; }
.verdict { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; }
.feature-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 10px; }
.feature-chips span { padding: 2px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; font: 11px var(--mono); }
.feature-chips span.cat { background: #f3f1fa; border-color: #ddd8ee; }
tr.is-target-valid td:first-child strong { color: var(--green-dark); }
tr.is-chosen { background: var(--mint); }

/* Preprocessing explainer */
.explain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 12px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.explain-grid > div { padding: 10px 12px; color: var(--muted); background: var(--surface); font-size: 12.5px; }
.explain-k { display: block; margin-bottom: 2px; color: var(--ink); font-size: 13px; font-weight: 600; }
.strategy-list { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 1fr); gap: 0; margin: 10px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.strategy-list dt, .strategy-list dd { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
.strategy-list dt { color: var(--ink-2); font-weight: 600; }
.strategy-list dd { color: var(--ink-2); }
.strategy-list dt:last-of-type, .strategy-list dd:last-of-type { border-bottom: 0; }
.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin: 12px 0; }
.analysis-grid > div { min-width: 0; padding: 9px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; overflow-wrap: anywhere; }
.analysis-grid small { color: var(--muted); }
.saved-note { display: flex; gap: 8px; align-items: baseline; margin-top: 10px; padding: 9px 12px; color: var(--green-dark); background: var(--mint); border: 1px solid var(--mint-line); border-radius: var(--radius); font-size: 13px; }

/* Model picker */
.model-picker-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.model-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); align-items: start; gap: 8px; margin: 0 0 16px; }
.model-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 11px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .12s, background-color .12s; }
.model-checkbox:hover { border-color: var(--green); }
.model-checkbox:has(input:checked) { background: #f2f9f3; border-color: var(--green); }
.model-checkbox input { margin-top: 2px; }
.model-checkbox > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.model-checkbox small { color: var(--muted); font: 400 11px var(--mono); }
.model-checkbox .badge { align-self: flex-start; }
.model-checkbox.unavailable { color: var(--muted); background: var(--surface-2); border-style: dashed; cursor: not-allowed; }
.model-checkbox.unavailable:hover { border-color: var(--line); }
/* Model card states: available, selected (above), training, trained / failed / skipped in the shown run */
.model-checkbox { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; }
.model-checkbox .model-name { overflow-wrap: anywhere; }
.model-checkbox .model-status { grid-column: 2; }
.model-checkbox .model-status:empty { display: none; }
.model-checkbox .model-status .badge { max-width: 100%; white-space: normal; text-align: left; }
.model-checkbox.is-training { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--mint-line); }
.model-checkbox.is-failed { background: #fdf7f5; border-color: var(--red-line); }
.model-checkbox.is-failed:hover { border-color: var(--red); }
.mini-spinner { flex: 0 0 auto; width: 9px; height: 9px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .9s linear infinite; }
.train-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.training-state { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 14px; color: var(--green-dark); background: var(--mint); border: 1px solid var(--mint-line); border-radius: var(--radius); font-size: 13px; }
.training-state strong { display: block; }
.spinner { flex: 0 0 auto; width: 16px; height: 16px; border: 2px solid var(--mint-line); border-top-color: var(--green); border-radius: 50%; animation: spin .9s linear infinite; }

/* Comparison */
.run-scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 6px; padding: 10px 12px; background: var(--mint); border: 1px solid var(--mint-line); border-radius: var(--radius); font-size: 14px; }
.run-scope .scope-label { color: var(--green-dark); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.run-scope small { flex-basis: 100%; color: var(--ink-2); font-size: 12px; }
.recommendation { margin: 10px 0 12px; padding: 11px 13px; color: var(--green-dark); background: #fff; border: 1px solid var(--mint-line); border-left: 4px solid var(--green); border-radius: var(--radius); font-size: 13px; }
.recommendation small { color: var(--ink-2); }
.comparison-table tbody tr { cursor: pointer; }
.comparison-table tbody tr:hover { background: rgba(220, 239, 225, .35); }
.comparison-table tbody tr.is-recommended { background: #f6fbf7; }
.comparison-table tbody tr.is-selected { background: var(--mint); box-shadow: inset 3px 0 0 var(--green); }
.comparison-table tbody tr.is-failed { cursor: default; color: var(--muted); }
.comparison-table tbody tr.is-failed:hover { background: transparent; }
.comparison-table .col-select { width: 36px; }
.comparison-table .model-cell strong { display: block; font-weight: 600; }
.comparison-table .error-reason { max-width: 340px; color: var(--red); white-space: normal; }
.pipeline-cell { min-width: 160px; max-width: 260px; color: var(--muted); font-size: 12px; white-space: normal; }
.table-legend { margin: 10px 0 0; font-size: 12px; }
.selection-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.selection-bar > * { min-width: 0; }
.selection-bar strong { font-size: 15px; overflow-wrap: anywhere; }
.selection-next { display: block; margin-top: 3px; color: var(--green-dark); font-size: 12px; }
.selection-next:empty { display: none; }

/* Evaluation */
.version-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13px; }
.version-strip .vs-name { min-width: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.version-strip .vs-meta { min-width: 0; color: var(--muted); font: 12px var(--mono); overflow-wrap: anywhere; }
.eval-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.eval-block { min-width: 0; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.eval-block-test { border-top: 3px solid var(--green); }
.block-title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; color: var(--green-dark); font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.block-title small { color: var(--muted); font-size: 11px; letter-spacing: 0; text-transform: none; }
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.metric-card { min-width: 0; padding: 11px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.metric-card .metric-label { display: block; margin-bottom: 4px; color: var(--muted); font: 500 11px var(--mono); text-transform: uppercase; overflow-wrap: anywhere; }
.metric-card .metric-value { display: block; overflow-wrap: break-word; font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.metric-card .metric-sub { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.metric-card.primary-metric { background: var(--mint); border-color: var(--mint-line); }
.metric-card.text-metric .metric-value { font-size: 15px; font-weight: 600; }
.fold-scores { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.fold-scores span { padding: 2px 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; font: 11px var(--mono); }
.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.chart-card { min-width: 0; margin: 0; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.chart-card figcaption { margin-bottom: 8px; font-size: 13px; font-weight: 600; }
.chart-card figcaption small { margin-left: 6px; color: var(--muted); font: 400 11px var(--mono); }
.chart-wide { grid-column: 1 / -1; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { fill: var(--muted); font: 11px var(--mono); }
.chart .axis-title { fill: var(--ink); font-size: 11px; }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .ref { stroke: var(--chart-ref); stroke-width: 1; }
.chart .dot { fill: var(--chart); fill-opacity: .45; }
.chart .dot:hover, .chart .bar:hover { fill-opacity: 1; }
.chart .bar { fill: var(--chart); fill-opacity: .85; }
.chart .bar-label { fill: var(--ink); }
.chart .hit { fill: transparent; }
.chart-empty { padding: 30px 14px; color: var(--muted); font-size: 13px; text-align: center; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.chart-empty small { display: block; max-width: 520px; margin: 6px auto 0; }
.chart-tooltip { position: fixed; z-index: 30; max-width: 260px; padding: 7px 9px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); font: 11px/1.5 var(--mono); pointer-events: none; }
.pipeline-block { margin-top: 14px; }
.pipeline-block p { margin: 0 0 6px; font-size: 13px; }

/* ==================================================================== */
/* Models: active model + registry                                      */
/* ==================================================================== */
.active-card { margin-bottom: 14px; border-top: 3px solid var(--green); }
.active-summary { display: grid; grid-template-columns: minmax(200px, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.active-summary > * { min-width: 0; }
.active-summary .active-name { padding: 12px 13px; background: var(--mint); border: 1px solid var(--mint-line); border-radius: var(--radius); }
.active-summary .active-name strong { display: block; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
.active-summary .active-name span { display: block; margin-top: 4px; color: var(--green-dark); font: 12px var(--mono); overflow-wrap: anywhere; }
.run-note { margin: 10px 0 0; padding: 8px 11px; color: var(--amber); background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--radius); }
.registry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.registry-summary { margin: 0; }
.registry-run { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.registry-run-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.registry-run-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.registry-run-head small { min-width: 0; color: var(--muted); font: 11px var(--mono); overflow-wrap: anywhere; }
.version-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.version-card { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s, transform .15s; }
.version-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(23, 34, 28, .07); transform: translateY(-1px); }
.registry-run:not(.is-current) .version-card:not(.is-active) { background: var(--surface-2); }
.version-card.is-active { border-color: var(--green); box-shadow: inset 0 3px 0 var(--green); }
.version-card.is-active:hover { box-shadow: inset 0 3px 0 var(--green), 0 6px 18px rgba(23, 34, 28, .08); }
.version-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.version-card-head > div { min-width: 0; }
.version-card.is-guided { border-color: var(--amber-line); box-shadow: 0 0 0 3px rgba(122, 87, 19, .12); }
.version-card-head strong { min-width: 0; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.version-tag { color: var(--green-dark); font: 600 12px var(--mono); }
.run-tag { align-self: flex-start; display: inline-block; padding: 2px 7px; color: var(--green-dark); background: #fff; border: 1px solid var(--mint-line); border-radius: 99px; font: 600 11px var(--mono); }
.version-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.version-metrics div { min-width: 0; padding: 6px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; }
.version-metrics span { display: block; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.version-metrics b { display: block; font-size: 14px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.version-meta { margin: 0; color: var(--muted); font: 11px/1.6 var(--mono); overflow-wrap: anywhere; }
.version-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
.version-actions .primary, .version-actions .secondary { min-height: 32px; padding: 5px 11px; font-size: 13px; }
.version-actions .danger-link { margin-left: auto; }
.checkbox-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; }

/* ==================================================================== */
/* Prediction                                                            */
/* ==================================================================== */
.prediction-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 16px; padding: 12px 14px; background: var(--mint); border: 1px solid var(--mint-line); border-radius: var(--radius); }
.prediction-scope .field-label { flex-basis: 100%; margin: 0; color: var(--green-dark); }
.prediction-scope strong { font-size: 17px; }
.prediction-scope small { flex-basis: 100%; color: var(--green-dark); font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.prediction-scope.empty { display: block; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line-strong); font-size: 13px; }
.prediction-switch { margin: 0 0 14px; padding: 10px 12px; background: var(--amber-bg); border: 1px solid var(--amber-line); border-radius: var(--radius); font-size: 13px; }
.prediction-switch p { margin: 0 0 8px; }
.predict-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.predict-form { min-width: 0; container-type: inline-size; }
.fields-title { margin: 8px 0 10px; color: var(--ink-2); font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.fields-title .label-hint { margin-left: 6px; letter-spacing: 0; text-transform: none; }

/* One field = name, type, control, hint. Two comfortable columns; one when narrow. */
.prediction-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@container (max-width: 540px) { .prediction-fields { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .prediction-fields { grid-template-columns: minmax(0, 1fr); } }  /* fallback without container queries */
.prediction-field { display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .12s; }
.prediction-field:focus-within { border-color: var(--green); }
.prediction-field .pf-name { display: block; margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.prediction-field .pf-type { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 3px 0 8px; color: var(--muted); font-size: 12px; }
.prediction-field .pf-type code { padding: 0 5px; font-size: 11px; }
.prediction-field input, .prediction-field select { min-height: 42px; margin: 0; font-size: 15px; }
.prediction-field select { padding-right: 32px; text-overflow: ellipsis; }
.prediction-field .pf-hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.prediction-field.has-error { border-color: var(--red-line); background: #fffaf8; }
.prediction-field.has-error input, .prediction-field.has-error select { border-color: var(--red); outline: 2px solid rgba(161, 61, 47, .12); }
.prediction-field .field-error { margin: 5px 0 0; }
.field-error { margin: -10px 0 12px; color: var(--red); font-size: 12px; font-weight: 600; }

.result-col { position: sticky; top: 16px; min-width: 0; }
.prediction-output { min-height: 200px; padding: 22px; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 8px; outline: none; }
.prediction-output.empty { display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; }
.prediction-output.success { background: #fff; border: 1px solid var(--green); box-shadow: inset 0 4px 0 var(--green), var(--shadow); animation: appear .2s ease-out; transition: box-shadow .15s; }
.prediction-output.success:hover { box-shadow: inset 0 4px 0 var(--green), 0 16px 36px rgba(23, 34, 28, .13); }
.prediction-output.error { color: var(--red); background: var(--red-bg); border: 1px solid var(--red-line); font-size: 13px; }
.prediction-output .pred-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.prediction-output .pred-label { color: var(--green-dark); font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.prediction-output .pred-time { color: var(--muted); font: 11px var(--mono); }
.prediction-output .pred-target { display: block; margin-top: 14px; color: var(--ink-2); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.prediction-output .pred-value { display: block; margin: 2px 0 16px; overflow-wrap: anywhere; font-size: clamp(36px, 4.4vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.prediction-output .pred-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.prediction-output .pred-meta dt { color: var(--muted); font: 12px/1.7 var(--mono); }
.prediction-output .pred-meta dd { min-width: 0; margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.prediction-output .pred-meta dd small { color: var(--muted); font: 400 11px var(--mono); }
.prediction-output .pred-meta .pred-exact { font: 500 12px var(--mono); }
.prediction-output ul { margin: 6px 0 0 18px; padding: 0; }
.pred-inputs { margin-top: 12px; font-size: 13px; }
.pred-inputs summary { color: var(--green); font-weight: 600; cursor: pointer; }
.pred-inputs dl { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 3px 12px; margin: 8px 0 0; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.pred-inputs dt { color: var(--muted); overflow-wrap: anywhere; }
.pred-inputs dd { margin: 0; font: 500 12px var(--mono); overflow-wrap: anywhere; }
.pred-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* ==================================================================== */
/* Training runs + settings                                              */
/* ==================================================================== */
.segmented { display: inline-flex; padding: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.segmented label { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 11px; color: var(--ink-2); border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; }
.segmented label:has(input:checked) { color: var(--green-dark); background: var(--surface); box-shadow: var(--shadow-sm); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:focus-within { outline: 2px solid var(--green); outline-offset: 1px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Dialog */
.confirm-dialog { width: min(440px, calc(100% - 32px)); padding: 22px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.confirm-dialog::backdrop { background: rgba(23, 34, 28, .35); }
.confirm-target { margin: 10px 0; font-weight: 600; }
.dialog-actions { justify-content: flex-end; }

/* ==================================================================== */
/* Motion + responsive                                                   */
/* ==================================================================== */
/* Workflow-9: project gate, sticky progress, evaluation stage, onboarding */
/* ==================================================================== */
.workflow-progress .progress-current { color: var(--ink); font-weight: 500; }
.workflow-progress > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-gate { max-width: 680px; margin: 8px auto 0; padding: 34px 30px 30px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 8px; box-shadow: var(--shadow-sm); }
.project-gate h2 { margin: 2px 0 8px; font-size: 24px; letter-spacing: -.01em; }
.project-gate p { max-width: 520px; margin: 0 auto 18px; color: var(--ink-2); }
.project-gate .button-group { justify-content: center; }
.project-gate .gate-note { margin: 14px auto 0; color: var(--muted); }
.gate-icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; background: var(--mint); border: 1px solid var(--mint-line); border-radius: 50%; position: relative; }
.gate-icon::before { content: ""; width: 18px; height: 14px; border: 2px solid var(--green-dark); border-radius: 3px; margin-top: 8px; }
.gate-icon::after { content: ""; position: absolute; top: 11px; width: 10px; height: 10px; border: 2px solid var(--green-dark); border-bottom: 0; border-radius: 7px 7px 0 0; }

.workflow-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.workflow-steps { min-width: 0; }
.workflow-steps > .step-panel:first-child { margin-top: 0; }
.workflow-rail { display: none; }
.rail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rail-title { color: var(--ink-2); font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.rail-count { color: var(--green-dark); font: 600 12px var(--mono); }
.workflow-rail .progress-track { display: block; width: 100%; margin: 8px 0 6px; }
.rail-steps { margin: 4px 0 0; padding: 0; list-style: none; }
.rail-steps li { position: relative; }
.rail-steps li:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: calc(50% + 9px); height: calc(100% - 18px); width: 2px; background: var(--line); }
.rail-steps li.done:not(:last-child)::before { background: var(--green); }
.rail-steps button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 7px; color: var(--ink-2); background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: 13px; text-align: left; transition: background-color .15s, border-color .15s; }
.rail-steps button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line); }
.rail-steps button:disabled { opacity: 1; cursor: not-allowed; }
.rail-dot { flex: none; display: grid; place-items: center; width: 16px; height: 16px; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 50%; position: relative; z-index: 1; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.rail-no { flex: none; width: 18px; color: var(--muted); font: 11px var(--mono); }
.rail-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rail-steps li.done .rail-dot { background: var(--green); border-color: var(--green); }
.rail-steps li.done .rail-dot::after { content: "✓"; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; }
.rail-steps li.saved .rail-dot { background: var(--mint); }
.rail-steps li.saved .rail-dot::after { color: var(--green-dark); }
.rail-steps li.done .rail-name { color: var(--green-dark); }
.rail-steps li.current button { color: var(--ink); background: var(--mint); border-color: var(--mint-line); font-weight: 600; }
.rail-steps li.current .rail-dot { background: #fff; border-color: var(--green); box-shadow: 0 0 0 4px rgba(35, 107, 74, .18); }
.rail-steps li.current .rail-dot::after { content: ""; width: 6px; height: 6px; background: var(--green); border-radius: 50%; }
.rail-steps li.locked .rail-dot { border-style: dashed; background: var(--surface-2); }
.rail-steps li.locked .rail-name, .rail-steps li.locked .rail-no { color: var(--muted); opacity: .75; }
.rail-steps li.optional .rail-name { color: var(--muted); }
.rail-steps li.error .rail-dot { background: var(--red); border-color: var(--red); }
.rail-steps li.error .rail-dot::after { content: "!"; color: #fff; font-size: 10px; font-weight: 700; }
.rail-steps li.running .rail-dot, .rail-steps li.current.running .rail-dot { border-color: var(--line); border-top-color: var(--green); animation: spin .9s linear infinite; }
.rail-context { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font: 11px/1.5 var(--mono); overflow-wrap: anywhere; }
.rail-context span { display: block; color: var(--ink); font: 600 13px/1.35 var(--sans); }

@media (min-width: 1280px) {
    .workflow-layout { grid-template-columns: minmax(0, 1fr) 216px; }
    .workflow-rail { display: block; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 14px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-sm); }
    body[data-view="data"] .workflow-nav { display: none; }   /* the rail shows the progress here */
}
@media (max-width: 1279px) {
    /* Workflow view: the progress bar sticks below the top of the screen while scrolling. */
    body[data-view="data"] .workflow-nav { position: sticky; top: var(--sticky-top, 0); z-index: 15; margin: 0 0 12px; padding: 8px 0 2px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 6px 12px -10px rgba(23, 34, 28, .25); }
    body[data-view="data"] .workflow-nav .workflow-progress { margin-bottom: 6px; }
    body[data-view="data"] .workflow-nav .stepper { --dot: 26px; margin-bottom: 0; }
    body[data-view="data"] .workflow-nav .stepper li:not(.done):not(.error) .step-no { font-size: 10px; }
}
@media (max-width: 600px) {
    body[data-view="data"] .workflow-nav .stepper { --dot: 24px; grid-template-columns: repeat(10, minmax(30px, 1fr)); }
    body[data-view="data"] .workflow-nav .stepper .step-name { display: none; }
    body[data-view="data"] .workflow-nav .stepper button { padding-bottom: 4px; }
    body[data-view="data"] .workflow-nav .workflow-progress small, body[data-view="data"] .workflow-nav .progress-track { display: none; }
}

.eval-stage { margin: 0 0 12px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .2s, background-color .2s; }
.eval-stage.is-complete { background: #f4faf5; border-color: var(--mint-line); box-shadow: inset 3px 0 0 var(--green); }
.eval-stage-facts { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, .7fr) minmax(0, .9fr); gap: 10px 16px; margin: 0; }
.eval-stage-facts dt { color: var(--muted); font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.eval-stage-facts dd { margin: 3px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.eval-stage-metrics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.eval-stage-metrics:empty { display: none; }
.stage-metric { min-width: 96px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.stage-metric span { display: block; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; }
.stage-metric b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stage-metrics-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 12px; }
.eval-stage-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.eval-stage-actions .label-hint { flex: 1 1 260px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.eval-stage.is-complete .label-hint { color: var(--green-dark); }

.onboarding { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 28px; align-items: center; margin: 0 0 16px; padding: 24px 26px; background: linear-gradient(180deg, #f6fbf6, var(--surface)); border: 1px solid var(--mint-line); border-left: 5px solid var(--green); border-radius: 8px; box-shadow: var(--shadow-sm); }
.onboarding h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: -.01em; }
.onboarding p { margin: 0 0 16px; color: var(--ink-2); }
.onboarding-steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.onboarding-steps li { display: flex; align-items: center; gap: 10px; color: var(--ink-2); }
.onboarding-steps b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; color: var(--green-dark); background: var(--mint); border: 1px solid var(--mint-line); border-radius: 50%; font: 600 11px var(--mono); }
.onboarding-steps li:first-child b { color: #fff; background: var(--green); border-color: var(--green); }
@media (max-width: 820px) {
    .onboarding { grid-template-columns: minmax(0, 1fr); padding: 20px; }
    .eval-stage-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .eval-stage-facts > div:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .primary:hover, .quick:hover, .project-item:hover, .version-card:hover { transform: none !important; }
}

/* ==================================================================== */
@keyframes appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 1180px) {
    .stepper .step-name { font-size: 11px; }
    .stat-grid, .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .active-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .active-summary .active-name { grid-column: 1 / -1; }
    .predict-layout { grid-template-columns: minmax(0, 1fr); }
    .result-col { position: static; }
    .prediction-output.empty { min-height: 0; padding: 18px; }
}
@media (max-width: 980px) {
    .app-shell { display: block; }
    .sidebar { position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; gap: 12px; height: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow: hidden; }
    .sidebar .brand { flex: none; }
    .brand-home { width: auto; margin: 0; padding: 4px; }
    .sidebar .brand small, .nav-group { display: none; }
    .side-nav { flex: 1 1 auto; flex-direction: row; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
    .nav-btn { width: auto; padding: 7px 10px; font-size: 13px; white-space: nowrap; }
    .nav-btn svg { display: none; }
    .nav-btn.active { box-shadow: inset 0 -2px 0 var(--green); }
    .sidebar-foot { flex: none; flex-direction: row; align-items: center; margin: 0 0 0 auto; padding: 0; border: 0; }
    .user-label { display: none; }
    .context-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .context-project { grid-column: 1 / -1; }
    .eval-grid { grid-template-columns: minmax(0, 1fr); }
    .explain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .auth-page { grid-template-columns: 1fr; gap: 24px; align-content: start; padding-top: 28px; }
    .auth-intro h1 { margin: 18px 0 14px; }
}
@media (max-width: 720px) {
    .settings-grid, .form-grid { grid-template-columns: 1fr; }
    .chart-grid { grid-template-columns: 1fr; }
    .project-item { grid-template-columns: 1fr; }
    .item-actions { justify-content: flex-start; }
    .step-head { align-items: flex-start; }
    .selection-bar { align-items: stretch; flex-direction: column; }
    .strategy-list { grid-template-columns: 1fr; }
    .strategy-list dt { padding-bottom: 0; border-bottom: 0; }
    .status-bar { max-width: 60%; }
    .next-action { max-width: none; }
}
@media (max-width: 520px) {
    .main-col { padding: 14px 12px 28px; }
    .panel { padding: 15px; }
    .stat-grid, .quick-actions, .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .explain-grid { grid-template-columns: 1fr; }
    .sidebar .brand strong { display: none; }
    .workflow-progress { white-space: nowrap; }
    .stat-value { font-size: 26px; }
    .version-list { grid-template-columns: 1fr; }
    .auth-shell { padding: 22px; }
    .app-topbar { flex-wrap: wrap; }
    .status-bar { max-width: 100%; }
    .check-list li { grid-template-columns: 1fr; gap: 4px; }
    .kv { grid-template-columns: 1fr; gap: 2px 0; }
    .kv dd { margin-bottom: 8px; }
}

/* ==================================================================== */
/* Visual refinement (PREVIEW)                                           */
/* Same identity (cream, InferAPI green, Space Grotesk / DM Mono).       */
/* Quieter surfaces, sentence-case labels, mono only for real values,    */
/* one state language, and motion only where something changed.         */
/* ==================================================================== */
:root {
    --line: #e3e0d6;
    --line-strong: #cdcabd;
    --tint: #f7f5ef;                 /* nested surfaces: a tint, not another border */
    --green-soft: #8cc4a2;
    --info: #3d5a73;                 /* informational notes only */
    --info-bg: #eaf0f4;
    --radius: 7px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(23, 34, 28, .04);
    --shadow-lift: 0 10px 24px -10px rgba(23, 34, 28, .22);
    --ease: cubic-bezier(.2, .7, .2, 1);
    --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.6 3.6L15.5 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --mask-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='4.5' y='9' width='11' height='8' rx='1.8' fill='black'/%3E%3Cpath d='M7 9V7.2a3 3 0 0 1 6 0V9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    --mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 4.5v7' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='15.2' r='1.6' fill='black'/%3E%3C/svg%3E");
    --mask-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='4.2' fill='black'/%3E%3C/svg%3E");
}

/* ---- Type: one family for reading, mono only for values ---------------- */
h1 { font-size: clamp(24px, 2.3vw, 29px); font-weight: 650; letter-spacing: -.025em; }
.view-head .eyebrow { display: none; }                       /* the sidebar already says where you are */
.view-sub { margin-top: 2px; font-size: 14px; }
.eyebrow { font: 600 12px var(--sans); letter-spacing: 0; text-transform: none; }
.crumb { font: 500 12px var(--sans); letter-spacing: 0; text-transform: none; }
.crumb::first-letter { text-transform: uppercase; }
.stat-label, .fact span, .metric-card .metric-label, .context-item label, .context-label, .profile-stat-label,
.eval-stage-facts dt, .stage-metric span, .version-metrics span, .rail-title, .prediction-output .pred-meta dt, .kv dt,
.project-facts dt, .run-scope .scope-label {
    color: var(--muted); font: 500 12px/1.35 var(--sans); letter-spacing: 0; text-transform: none;
}
.fields-title, .block-title { color: var(--ink); font: 600 14px var(--sans); letter-spacing: -.005em; text-transform: none; }
.block-title small, .fields-title .label-hint { font: 400 12px var(--sans); }
.data-table th { color: var(--muted); background: var(--tint); font: 600 12px var(--sans); letter-spacing: 0; text-transform: none; }
.th-sub { font-weight: 400; }
.step-head h3 { font-size: 17px; font-weight: 600; }
.step-number { color: var(--muted); font: 500 12px var(--mono); }
.result-box { font: 13px/1.5 var(--sans); }
.footer { font: 12px var(--sans); }
.status-bar { font: 12px var(--sans); }

/* ---- Surfaces: one border level; nested content uses tints -------------- */
.panel { border-color: var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.stat, .quick, .project-item, .version-card, .prediction-field, .guide-banner, .onboarding, .project-gate { border-radius: var(--radius-lg); }
.metric-card, .stage-metric, .version-metrics div, .profile-stat, .analysis-grid > div { background: var(--surface); border-color: transparent; box-shadow: 0 0 0 1px var(--line) inset; }
.eval-block, .detail-box, .selection-bar, .eval-stage { background: var(--tint); border-color: transparent; }
.metric-card.primary-metric { background: #eaf5ed; box-shadow: none; }
.data-table { border-color: var(--line); }
.table-scroll { border-color: var(--line); border-radius: var(--radius); }

/* ---- One state language: icon + word, colour as a second signal ---------- */
.badge { gap: 5px; padding: 2px 9px 2px 8px; font: 600 12px/1.5 var(--sans); }
.badge::before { content: ""; display: none; flex: none; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--mask-dot) center / contain no-repeat; mask: var(--mask-dot) center / contain no-repeat; }
.badge.done::before, .badge.ok::before, .badge.completed::before, .badge.pass::before, .badge.active::before { display: inline-block; -webkit-mask-image: var(--mask-check); mask-image: var(--mask-check); }
.badge.current::before, .badge.next::before { display: inline-block; }
.badge.locked::before { display: inline-block; -webkit-mask-image: var(--mask-lock); mask-image: var(--mask-lock); width: 10px; }
.badge.error::before, .badge.failed::before, .badge.warn::before { display: inline-block; -webkit-mask-image: var(--mask-alert); mask-image: var(--mask-alert); }
.badge.running::before { display: inline-block; width: 9px; height: 9px; background: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; -webkit-mask: none; mask: none; animation: spin .9s linear infinite; }
.badge.next { color: var(--green-dark); background: var(--surface); border-color: var(--green-soft); }
.badge.next::before { opacity: .55; }
.badge.locked { color: var(--muted); background: transparent; border-color: var(--line); }
.badge.optional { border-style: dashed; background: transparent; }
.tag { display: inline-flex; align-items: center; gap: 5px; margin: 4px 6px 0 0; padding: 1px 8px; border-radius: 99px; font: 600 11px/1.6 var(--sans); white-space: nowrap; }
.tag-recommended { color: var(--green-dark); background: #eef7f1; box-shadow: 0 0 0 1px var(--mint-line) inset; }
.tag-selected { color: #fff; background: var(--green); }

/* ---- Workflow cards: state at a glance --------------------------------- */
.step-ico { flex: none; width: 18px; height: 18px; align-self: center; fill: none; stroke: var(--green-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.step-head > div:first-child { align-items: center; gap: 8px; }
.step-panel { position: relative; overflow: hidden; }
.step-panel.is-done:not(.is-current) { box-shadow: inset 3px 0 0 var(--green-soft), var(--shadow-sm); }
.step-panel.is-error { box-shadow: inset 3px 0 0 var(--red), var(--shadow-sm); }
.step-panel.is-locked .step-ico { stroke: var(--muted); opacity: .6; }
.step-panel.is-running::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--green), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: running-bar 1.6s var(--ease) infinite; }
@keyframes running-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.step-panel.just-done { animation: panel-done .7s var(--ease) 1; }
@keyframes panel-done { 0% { box-shadow: inset 3px 0 0 var(--green), 0 0 0 0 rgba(35, 107, 74, .28); } 100% { box-shadow: inset 3px 0 0 var(--green-soft), 0 0 0 10px rgba(35, 107, 74, 0); } }
.step-intro { margin: -4px 0 12px; }
.step-continue { border-top-style: solid; border-top-color: var(--line); }

/* ---- Progress: the connecting line fills, completed checks draw in ----- */
.stepper li::before { transition: background-color .45s var(--ease); }
.stepper li.just-done .step-no, .rail-steps li.just-done .rail-dot { animation: check-pop .5s var(--ease) 1; }
.stepper li.just-done::before, .rail-steps li.just-done::before { animation: line-fill .5s var(--ease) 1; transform-origin: left center; }
.rail-steps li.just-done::before { transform-origin: top center; animation-name: line-fill-v; }
.stepper li.just-current .step-no, .rail-steps li.just-current .rail-dot { animation: halo 1.4s ease-out 2; }
@keyframes check-pop { 0% { transform: scale(.55); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes line-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes line-fill-v { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgba(35, 107, 74, .35); } 100% { box-shadow: 0 0 0 9px rgba(35, 107, 74, 0); } }
.rail-steps li.locked button:hover .rail-name, .rail-steps li.locked button:focus-visible .rail-name { color: var(--ink-2); }
.workflow-rail { border-radius: var(--radius-lg); }

/* ---- Interaction: lift only what can be clicked ------------------------- */
.quick, .project-item, .version-card, .stat { transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), background-color .18s var(--ease); }
.project-item:hover, .version-card:hover, .quick:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.project-item.is-current:hover { box-shadow: inset 3px 0 0 var(--green), var(--shadow-lift); }
.version-card.is-active:hover { box-shadow: inset 0 3px 0 var(--green), var(--shadow-lift); }
.stat:hover { border-color: var(--line-strong); }
.primary, .secondary, .danger { transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.nav-btn { position: relative; }
.nav-btn.active { box-shadow: none; }
.nav-btn::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; background: var(--green); border-radius: 2px; transform: scaleY(0); transition: transform .2s var(--ease); }
.nav-btn.active::after { transform: scaleY(1); }
@media (max-width: 980px) {
    /* the sidebar becomes a top bar: the indicator sits under the label */
    .nav-btn::after { left: 10px; right: 10px; top: auto; bottom: 1px; width: auto; height: 2px; transform: scaleX(0); }
    .nav-btn.active::after { transform: scaleX(1); }
}
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.tab-content:not(.hidden) { animation: view-in .22s var(--ease) 1; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Dashboard ------------------------------------------------------------ */
.stat { position: relative; padding: 16px 18px; }
.stat-ico { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; padding: 6px; fill: none; stroke: var(--green-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: #eef6f0; border-radius: 8px; }
.stat-value { margin-top: 10px; font-size: clamp(26px, 2.4vw, 32px); font-weight: 650; letter-spacing: -.02em; }
.stat-label { padding-right: 38px; }
.quick { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px 16px; }
.quick-ico { grid-row: 1 / span 2; width: 34px; height: 34px; padding: 7px; fill: none; stroke: var(--green-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: #eef6f0; border-radius: 9px; transition: background-color .18s var(--ease); }
.quick strong, .quick span { grid-column: 2; min-width: 0; }
.quick.is-primary .quick-ico { stroke: #fff; background: rgba(255, 255, 255, .16); }
.quick:disabled .quick-ico { stroke: var(--muted); background: var(--surface); }
.quick.is-primary strong::after { color: var(--green-dark); }
.mini-list li { padding: 12px 2px; }

/* ---- Skeletons (only while something loads) ------------------------------ */
.skeleton { display: block; border-radius: 6px; background: linear-gradient(90deg, #ebe8df 0%, #f6f4ee 50%, #ebe8df 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skeleton-value { width: 52px; height: 28px; margin-top: 10px; }
.skeleton-line { width: 70%; height: 10px; margin-top: 10px; }
.skeleton-line.short { width: 40%; }
.skeleton-title { width: 45%; height: 14px; }
.skeleton-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.skeleton-list.skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.skeleton-card { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.stat.is-loading .stat-label { color: var(--line-strong); }
.stat-grid .stat { min-height: 112px; }
.skeleton-rows .skeleton-card { padding: 18px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.skeleton-rows .skeleton-line { margin-top: 12px; }

/* ---- Project cards: name, what it holds, its key metric, then actions ---- */
.project-item { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main metric" "actions actions"; gap: 12px 24px; padding: 16px 18px 14px; }
.project-main { grid-area: main; min-width: 0; }
.project-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 4px; }
.project-title h3 { margin: 0; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.project-item .project-desc { margin-bottom: 12px; }
.project-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; }
.project-facts div { flex-direction: column; gap: 1px; }
.project-facts dd { max-width: none; font-size: 13px; }
.project-metric { grid-area: metric; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 120px; padding: 6px 0 6px 18px; border-left: 1px solid var(--line); text-align: right; }
.project-metric span { color: var(--muted); font-size: 12px; }
.project-metric b { font: 600 26px/1.1 var(--mono); letter-spacing: -.02em; }
.project-metric small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.project-metric.is-empty b { color: var(--line-strong); }
.project-item .item-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.item-actions-spacer { flex: 1 1 auto; }
@media (max-width: 720px) {
    .project-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "metric" "actions"; }
    .project-metric { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 8px; padding: 10px 0 0; border-left: 0; border-top: 1px dashed var(--line); text-align: left; }
    .project-metric b { font-size: 20px; }
    .item-actions-spacer { display: none; }
}

/* ---- Preprocessing: the plan first, details on demand --------------------- */
#step-preprocessing:has(#preprocessing-details:not(.hidden)) .explain-grid { display: none; }
#preprocessing-details.detail-box { padding: 16px; }
.prep-summary { margin-bottom: 14px; }
.prep-headline { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.prep-headline::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--green); border-radius: 50%; -webkit-mask: var(--mask-check) center / 70% no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--mask-check) center / 70% no-repeat exclude, linear-gradient(#000 0 0); }
.prep-shape { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
.prep-shape b { font: 600 14px var(--mono); color: var(--ink); }
.prep-why { margin: 0; color: var(--ink-2); font-size: 13px; }
.prep-decisions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; margin: 0 0 12px; overflow: hidden; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); }
.prep-decisions div { min-width: 0; padding: 10px 12px; background: var(--surface); }
.prep-decisions dt { margin-bottom: 2px; color: var(--ink); font-size: 13px; font-weight: 600; }
.prep-decisions dd { margin: 0; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
.prep-tech { margin-bottom: 12px; }
.feature-chips span { max-width: 100%; overflow-wrap: anywhere; }
.feature-chips span.cat { background: var(--info-bg); border-color: #d3dfe8; }
@media (max-width: 720px) { .strategy-list { grid-template-columns: minmax(0, 1fr); } }
.prep-tech[open] { padding-bottom: 4px; }
.prep-family { margin: 10px 0 2px; font-weight: 600; font-size: 13px; }
.prep-family small { color: var(--muted); font-weight: 400; }
.pipe-name { margin: 0 0 6px; font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.pipe-why { margin: 0 0 8px; color: var(--ink-2); font-size: 13px; }

/* ---- Comparison: CV first, a quiet recommendation, a clear selection ------ */
.cv-head { min-width: 150px; }
.cv-cell { min-width: 150px; }
.cv-num { display: flex; align-items: baseline; gap: 6px; font: 600 13px var(--mono); font-variant-numeric: tabular-nums; }
.cv-num small { display: inline; margin: 0; color: var(--muted); font: 400 11px var(--mono); }
.cv-bar { position: relative; display: block; height: 6px; margin-top: 6px; background: #ebe8df; border-radius: 99px; }
.cv-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--green-soft); border-radius: 99px; transition: width .4s var(--ease); }
.cv-err { position: absolute; top: -2px; bottom: -2px; border-left: 2px solid var(--green-dark); border-right: 2px solid var(--green-dark); opacity: .55; }
.comparison-table tbody tr.is-recommended { background: transparent; }
.comparison-table tbody tr.is-recommended .cv-fill { background: var(--green); }
.comparison-table tbody tr.is-selected { background: #eef7f1; box-shadow: inset 3px 0 0 var(--green); }
.comparison-table tbody tr:hover { background: #f5f8f3; }
.comparison-table tbody tr.is-selected:hover { background: #e7f3eb; }
.comparison-table .model-cell strong { display: block; }
.recommendation { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--green-soft); }
.run-scope { background: var(--tint); border-color: transparent; }
.comparison-table th.th-wrap { min-width: 72px; white-space: normal; }
.data-table th.num { font-family: var(--sans); }
.comparison-table .model-cell .badge { margin-top: 5px; }

/* ---- Final evaluation: a checkpoint, then a decision ---------------------- */
.eval-stage { padding: 16px 18px; border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line) inset; }
.eval-stage.is-complete { background: #f2f9f4; box-shadow: 0 0 0 1px var(--mint-line) inset, inset 4px 0 0 var(--green); }
.eval-stage-facts dd { font-size: 15px; }
.eval-stage-actions { padding-top: 12px; border-top: 1px solid var(--line); }
.eval-stage.is-complete #eval-stage-status { animation: check-pop .5s var(--ease) 1; }
.stage-metric b { font-family: var(--mono); font-weight: 600; }
#eval-stage-note { color: var(--muted); font: 400 13px/1.45 var(--sans); }
.badge.info { color: var(--info); background: var(--info-bg); border-color: #d3dfe8; }
/* Once evaluated, the detailed results below carry the numbers: the checkpoint keeps only the decision. */
.eval-stage.is-complete .eval-stage-metrics { display: none; }
#step-preprocessing:has(#preprocessing-details:not(.hidden)) #preprocessing-result.success,
.eval-stage.is-complete + #evaluation-result.success { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Registry -------------------------------------------------------------- */
.version-card { border-color: var(--line); }
.version-card.is-active { box-shadow: inset 0 3px 0 var(--green), var(--shadow-sm); }
.version-metrics b { font-family: var(--mono); font-weight: 600; }
.just-activated { animation: activated 1.2s var(--ease) 1; }
@keyframes activated { 0% { box-shadow: 0 0 0 0 rgba(35, 107, 74, .35); } 100% { box-shadow: 0 0 0 12px rgba(35, 107, 74, 0); } }

/* ---- Prediction: calm fields, the result as the payoff ------------------- */
.prediction-field { background: var(--tint); border-color: transparent; }
.prediction-field:focus-within { background: var(--surface); border-color: var(--green); box-shadow: 0 0 0 3px rgba(35, 107, 74, .12); }
.prediction-field input, .prediction-field select { background: var(--surface); }
.prediction-field .pf-type span { font-weight: 500; }
.prediction-field.is-outside { background: var(--amber-bg); box-shadow: inset 3px 0 0 var(--amber); }
.prediction-field.is-outside .pf-hint { color: var(--amber); }
.prediction-output.success { animation: result-in .38s var(--ease) 1; }
.prediction-output.success .pred-value { animation: value-in .5s var(--ease) .08s 1 both; }
@keyframes result-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes value-in { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.pred-label { display: inline-flex; align-items: center; gap: 6px; }
.pred-ok { width: 18px; height: 18px; padding: 3px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; background: var(--green); border-radius: 50%; }
.prediction-output .pred-label { font: 600 13px var(--sans); letter-spacing: 0; text-transform: none; }

/* ---- Empty states: one icon, one sentence, one action --------------------- */
.empty-block { background: transparent; border-color: var(--line-strong); }
.empty-block::before { content: ""; display: block; width: 36px; height: 36px; margin: 0 auto 10px; background: #eef6f0; border-radius: 10px; -webkit-mask: none; box-shadow: inset 0 0 0 1px var(--mint-line); }

/* ---- Dashboard quick actions: top-aligned, two-line summaries ------------ */
.quick { align-content: start; align-items: start; }
.quick strong { padding-top: 1px; line-height: 1.3; }
.quick span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.45; }
@media (max-width: 720px) { .quick span { -webkit-line-clamp: 3; } }
.quick.is-primary strong::after { display: inline-block; margin: 2px 0 0 6px; padding: 0 7px; font: 600 11px/1.6 var(--sans); white-space: nowrap; vertical-align: 1px; }
.runs-table.is-compact td:last-child { white-space: nowrap; }
.badge.active { color: var(--green-dark); background: var(--mint); border-color: var(--mint-line); }
.project-metric { width: 150px; min-width: 0; }

/* ---- Project gate: with saved projects, offer the recent ones ------------- */
.gate-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 460px; margin: 0 auto 16px; padding: 0; list-style: none; text-align: left; }
.gate-pick { display: grid; gap: 2px; width: 100%; min-width: 0; padding: 11px 14px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .18s var(--ease), background-color .18s var(--ease); }
.gate-pick:hover { background: #fbfdf9; border-color: var(--green); }
.gate-pick-name { overflow: hidden; color: var(--green-dark); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gate-pick-meta { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }

/* ---- Reduced motion: keep every state change, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
    .project-item:hover, .version-card:hover, .quick:hover { transform: none !important; }
}

/* ==================================================================== */
/* Authentication pages: sign in, sign up, verify, forgot / reset        */
/* ==================================================================== */
.auth-page { grid-template-columns: minmax(0, 1fr) minmax(340px, 448px); }
.auth-shell { padding: 32px 32px 28px; border-radius: 14px; box-shadow: 0 1px 2px rgba(23, 34, 28, .04), 0 22px 48px -24px rgba(23, 34, 28, .28); }
.auth-form { display: grid; gap: 16px; min-width: 0; }
.auth-head { display: grid; justify-items: start; gap: 6px; }
#reset-fields, #reset-invalid { display: grid; gap: 16px; min-width: 0; }
.auth-head h2 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.auth-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.auth-head strong { color: var(--ink); }
.auth-form .field { display: grid; gap: 7px; min-width: 0; }
.auth-form label { margin: 0; color: var(--ink); font-size: 13px; }
.auth-form input:not([type=checkbox]):not([type=radio]) { margin: 0; min-height: 44px; font-size: 15px; }
.auth-form input::placeholder { color: #9aa39e; }
.auth-form input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(161, 61, 47, .1); }
.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.small-link { font-size: 13px; white-space: nowrap; }
.optional { margin-left: 4px; color: var(--muted); font-weight: 400; font-size: 12px; }
.password-wrap { position: relative; }
.password-wrap input:not([type=checkbox]) { padding-right: 68px; }
.reveal-btn { position: absolute; top: 50%; right: 6px; padding: 5px 10px; color: var(--green-dark); background: transparent; border: 0; border-radius: 6px; font: 600 12px var(--sans); transform: translateY(-50%); }
.reveal-btn:hover { background: var(--mint); }
.reveal-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.field-error { margin: 0; color: var(--red); font-size: 13px; line-height: 1.4; }
.password-rules { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; color: var(--muted); font-size: 12.5px; list-style: none; }
.password-rules li { display: inline-flex; align-items: center; gap: 6px; transition: color .15s; }
.password-rules li::before { content: ""; flex: none; width: 14px; height: 14px; border: 1.5px solid var(--line-strong); border-radius: 50%; box-sizing: border-box; transition: background-color .15s, border-color .15s; }
.password-rules li.met { color: var(--green-dark); }
.password-rules li.met::before { border-color: var(--green); background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.2 2.2 4.6-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.auth-form .primary.wide { min-height: 46px; margin-top: 2px; font-size: 15px; }
.auth-form .secondary.wide { min-height: 44px; }
.google-slot:empty { display: none; }
.oauth-block { display: grid; gap: 16px; }
.google-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); font: 600 15px var(--sans); text-align: center; text-decoration: none; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.google-btn:hover { background: #fff; border-color: var(--ink-2); box-shadow: 0 2px 8px rgba(23, 34, 28, .08); }
.google-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.google-btn.is-busy { color: var(--muted); pointer-events: none; }
.or-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.switch-row { margin: 0; color: var(--muted); font-size: 13.5px; text-align: center; }
.switch-row .link-btn { font-size: 13.5px; text-align: center; }
.auth-fine { margin: -6px 0 0; font-size: 12.5px; text-align: center; }
.auth-status { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; padding: 3px 10px; border-radius: 99px; font: 600 12px var(--sans); }
.auth-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.auth-status.pending { color: var(--amber); background: var(--amber-bg); }
.auth-status.verified { color: var(--green-dark); background: var(--mint); }
.auth-form .code-input { min-height: 54px; font: 600 24px/1 var(--mono); letter-spacing: .4em; text-align: center; text-indent: .4em; }
.resend-row { line-height: 1.6; }
.resend-timer { color: var(--muted); font-variant-numeric: tabular-nums; }
.auth-note { margin: 0; padding: 10px 12px; color: var(--amber); background: var(--amber-bg); border-radius: var(--radius); font-size: 13px; line-height: 1.45; }
.auth-done { justify-items: center; text-align: center; }
.auth-done:focus { outline: none; }
.auth-done h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.auth-done p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.55; }
.auth-done .form-note { color: var(--muted); font-size: 13px; }
.auth-done .link-btn { font-size: 13px; }
.done-icon { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--mint); }
.done-icon.check::after { content: ""; position: absolute; left: 18px; top: 14px; width: 12px; height: 20px; border: solid var(--green-dark); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.done-icon.mail::before { content: ""; position: absolute; inset: 16px 13px; border: 2px solid var(--green-dark); border-radius: 3px; }
.done-icon.mail::after { content: ""; position: absolute; left: 18px; top: 13px; width: 13px; height: 13px; border: solid var(--green-dark); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.break-anywhere { overflow-wrap: anywhere; }
#auth-msg { min-height: 0; margin: 16px 0 0; padding: 10px 12px; color: var(--red); background: var(--red-bg); border-radius: var(--radius); font-size: 13.5px; line-height: 1.45; }
#auth-msg.success { color: var(--green-dark); background: var(--mint); }
#auth-msg:empty { display: none; }
@media (max-width: 980px) {
    .auth-page { grid-template-columns: minmax(0, 1fr); width: min(560px, calc(100% - 32px)); gap: 22px; align-content: start; padding: 28px 0 40px; }
    .auth-intro h1 { margin: 16px 0 0; font-size: clamp(22px, 5vw, 30px); }
    .auth-steps { display: none; }
}
@media (max-width: 480px) {
    .auth-shell { padding: 24px 18px 20px; border-radius: 12px; }
    .auth-head h2, .auth-done h2 { font-size: 22px; }
    .label-row { flex-wrap: wrap; }
}

/* ==================================================================== */
/* Readability and spacing                                               */
/* The same InferAPI with more room to read: larger text, calmer         */
/* spacing between sections, and a main column that uses wide screens.   */
/* At 100% zoom: body 15px, helper text 13px minimum, labels 14px,       */
/* inputs 15-16px, buttons 15px, tables 14px, page titles 32px,          */
/* section titles 18-20px.                                               */
/* ==================================================================== */
:root {
    --fs-xs: 13px;          /* the smallest text anywhere: hints, captions, badges */
    --fs-sm: 14px;          /* secondary text, labels, table cells */
    --fs-base: 15px;        /* body text, buttons, inputs */
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 20px;          /* section titles */
    --fs-h1: 32px;
    --gap-section: 28px;    /* between major sections */
    --gap-block: 18px;      /* between blocks inside a card */
    --pad-card: 28px;
    --control-h: 44px;
    --sidebar-w: 244px;
}

/* ---- Base type ---------------------------------------------------------- */
body { font-size: var(--fs-base); line-height: 1.6; }
h1 { margin-bottom: 6px; font-size: clamp(26px, 2.4vw, var(--fs-h1)); line-height: 1.15; }
h2 { font-size: var(--fs-xl); line-height: 1.3; }
h3 { font-size: var(--fs-lg); line-height: 1.3; }
h4 { font-size: var(--fs-md); line-height: 1.35; }
code { font-size: var(--fs-xs); }

/* ---- Forms and controls ------------------------------------------------- */
/* :where() keeps this at element weight, so component rules (password field, prediction field, context bar) still win */
input:where(:not([type=checkbox], [type=radio], [type=file])), select, textarea {
    min-height: var(--control-h); margin-bottom: 16px; padding: 10px 14px; font-size: var(--fs-base); line-height: 1.4;
}
select[multiple] { padding: 8px 10px; }
select[multiple] option { padding: 3px 4px; }
label, .field-label { margin-bottom: 8px; font-size: var(--fs-sm); line-height: 1.4; }
label small, .label-hint { font: 400 var(--fs-xs)/1.45 var(--sans); }
.form-note { margin-bottom: 16px; font-size: var(--fs-sm); line-height: 1.6; }
.msg { font-size: var(--fs-sm); }
.field-error { font-size: var(--fs-xs); }
.primary, .secondary, .danger { min-height: var(--control-h); padding: 10px 18px; font-size: var(--fs-base); }
.small-btn { min-height: 36px; padding: 7px 13px; font-size: var(--fs-sm); }
.link-btn { font-size: var(--fs-sm); line-height: 1.45; }
.button-group { gap: 12px; }
.button-group.small { gap: 14px; font-size: var(--fs-sm); }
.action-row { gap: 12px; margin-top: 8px; }
.badge { padding: 3px 10px 3px 9px; font: 600 var(--fs-xs)/1.45 var(--sans); }
.tag { font-size: 12.5px; }
.checkbox-inline { font-size: var(--fs-sm); }
.segmented label { padding: 8px 14px; font-size: var(--fs-sm); }

/* ---- App shell: a compact sidebar; the main column uses wide screens ---- */
.app-shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.sidebar { gap: 20px; padding: 22px 16px 18px; }
.brand small { font-size: var(--fs-xs); }
.nav-group { margin: 20px 10px 8px; font: 600 var(--fs-xs)/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.nav-group strong { margin-top: 4px; font-size: var(--fs-sm); }
.side-nav { gap: 3px; }
.nav-btn { gap: 12px; padding: 10px 12px; font-size: var(--fs-base); }
.nav-btn svg { width: 18px; height: 18px; }
.nav-btn::after { top: 10px; bottom: 10px; }
.sidebar-foot { gap: 10px; padding: 14px 8px 0; }
.user-label { font-size: var(--fs-xs); }
/* Up to ~1340px of content beside the sidebar; centred in the space that is left on very wide screens. */
.main-col { max-width: 1440px; margin-inline: auto; padding: 24px clamp(20px, 3.2vw, 48px) 40px; }
.app-topbar { min-height: 38px; margin-bottom: 20px; }
.crumb { font-size: var(--fs-sm); }
.status-bar { min-height: 32px; padding: 5px 13px; font-size: var(--fs-xs); }
.view-head { gap: 16px 28px; margin-bottom: var(--gap-section); }
.view-sub { max-width: 72ch; margin-top: 4px; font-size: var(--fs-base); line-height: 1.55; }
.view-actions { gap: 12px; }
.next-action { padding: 10px 14px; font-size: var(--fs-sm); line-height: 1.5; }
.footer { margin-top: 44px; padding-top: 16px; font-size: var(--fs-xs); }

/* ---- Cards, notes and status messages ----------------------------------- */
.panel { padding: var(--pad-card); }
.panel-heading { gap: 16px; margin-bottom: 18px; }
.panel-title { margin-bottom: 16px; font-size: var(--fs-lg); }
.count-label { padding: 2px 9px; font-size: var(--fs-xs); }
.empty-state { padding: 28px 12px; font-size: var(--fs-sm); }
.empty-block { padding: 32px 20px; }
.empty-block p { font-size: var(--fs-sm); line-height: 1.55; }
.loading-line { font-size: var(--fs-sm); }
/* Status messages: their own box with an edge, so they read apart from the controls above them. */
.result-box { margin-top: 18px; padding: 12px 16px 12px 15px; border-left: 3px solid var(--line-strong); font: var(--fs-sm)/1.55 var(--sans); }
.result-box.success { border-left-color: var(--green); }
.result-box.error { border-left-color: var(--red); }
.detail-box { margin-top: 18px; padding: 18px 20px; font-size: var(--fs-sm); line-height: 1.55; }
.detail-box p { margin-bottom: 10px; }
.chip-row { gap: 8px; margin: 16px 0; }
.chip-row li { padding: 4px 11px; font: 500 var(--fs-xs)/1.4 var(--sans); }
.warning-list { padding: 12px 16px; font-size: var(--fs-sm); line-height: 1.55; }
.plain-list { font-size: var(--fs-sm); line-height: 1.55; }
.plain-list li { margin-bottom: 6px; }
.kv { gap: 10px 20px; font-size: var(--fs-base); }
.kv dt { font-size: var(--fs-sm); }
.toast { padding: 13px 14px 13px 16px; font-size: var(--fs-sm); line-height: 1.5; }
.toast strong { font-size: var(--fs-xs); }
.guide-banner { gap: 14px 20px; margin-bottom: 22px; padding: 18px 20px; }
.guide-banner .guide-text strong { font-size: var(--fs-md); }
.guide-banner .guide-text span { margin-top: 4px; font-size: var(--fs-base); line-height: 1.5; }
.guide-banner .guide-text small { margin-top: 6px; font-size: var(--fs-xs); }
.guide-actions { gap: 10px 12px; }
.confirm-dialog { padding: 26px; font-size: var(--fs-base); }

/* ---- Tables: readable cells, room between rows, long text wraps ---------- */
.data-table th, .data-table td { padding: 12px 14px; font-size: var(--fs-sm); line-height: 1.45; }
.data-table th { font: 600 var(--fs-xs)/1.35 var(--sans); }
.data-table td small { margin-top: 3px; font-size: var(--fs-xs); line-height: 1.4; }
.data-table .num { font-size: var(--fs-sm); }
.table-details { margin-top: 16px; }
.table-details summary { font-size: var(--fs-sm); }
.table-details[open] summary { margin-bottom: 10px; }
.target-table td small.reject-reason { font-size: var(--fs-xs); }

/* ---- Dashboard ----------------------------------------------------------- */
.stat-grid { gap: 16px; margin-bottom: 20px; }
.stat { padding: 20px 22px; }
.stat-grid .stat { min-height: 128px; }
.stat-label { font-size: var(--fs-sm); }
.stat-value { margin-top: 12px; font-size: clamp(28px, 2.6vw, 36px); }
.stat-sub { margin-top: 8px; font-size: var(--fs-xs); line-height: 1.45; }
.quick-actions { gap: 16px; margin-bottom: var(--gap-section); }
.quick { row-gap: 4px; padding: 18px 20px; }
.quick strong { font-size: var(--fs-base); }
.quick span { font-size: var(--fs-xs); line-height: 1.5; }
.quick.is-primary strong::after { font-size: 12px; }
.dash-grid { gap: 24px; }
.mini-list li { gap: 16px; padding: 14px 2px; }
.mini-list .mini-main strong .link-btn { font-size: var(--fs-base); line-height: 1.35; }
.mini-list .mini-main span { margin-top: 4px; font-size: var(--fs-xs); line-height: 1.5; }
.mini-list .mini-side { font-size: var(--fs-xs); }
.mini-list .mini-side b { font-size: var(--fs-md); }
.onboarding { gap: 24px 36px; padding: 30px 32px; }
.onboarding h2 { font-size: 26px; }
.onboarding p { font-size: var(--fs-base); line-height: 1.6; }
.onboarding-steps { gap: 8px; font-size: var(--fs-sm); }
.onboarding-steps b { width: 24px; height: 24px; font-size: 12.5px; }

/* ---- Projects and overview ------------------------------------------------ */
.form-panel { margin-bottom: 24px; }
.form-grid { gap: 0 20px; }
.project-list { gap: 14px; }
.project-item { gap: 14px 28px; padding: 20px 22px 16px; }
.project-title h3 { font-size: var(--fs-lg); }
.project-item .project-desc { margin-bottom: 14px; font-size: var(--fs-sm); }
.project-facts { gap: 10px 20px; }
.project-facts dt { font-size: var(--fs-xs); }
.project-facts dd { font-size: var(--fs-sm); }
.project-metric span, .project-metric small { font-size: var(--fs-xs); }
.project-metric b { font-size: 28px; }
.project-item .item-actions { gap: 10px 14px; padding-top: 14px; }
.facts-grid { margin-bottom: 24px; }
.fact { padding: 16px 18px; }
.fact span { font-size: var(--fs-xs); }
.fact b { margin-top: 6px; font-size: 19px; }
.fact small { margin-top: 3px; font-size: var(--fs-xs); }
.project-gate { padding: 40px 36px 34px; }
.project-gate h2 { font-size: 26px; }
.project-gate p { font-size: var(--fs-base); line-height: 1.6; }
.gate-pick { padding: 13px 16px; }
.gate-pick-name { font-size: var(--fs-base); }
.gate-pick-meta { font-size: var(--fs-xs); }

/* ---- Context bar and progress -------------------------------------------- */
.context-bar { margin-bottom: 20px; }
.context-item { padding: 12px 16px; }
.context-item label, .context-label { margin-bottom: 4px; font-size: var(--fs-xs); }
.context-item select { min-height: 40px; padding: 7px 10px; font-size: var(--fs-base); }
.context-value { font-size: var(--fs-base); line-height: 1.35; }
.context-value small { font: 400 var(--fs-xs)/1.4 var(--sans); }
.workflow-progress { gap: 14px; font-size: var(--fs-xs); }
.workflow-progress small { font-size: var(--fs-xs); }
.stepper { --dot: 32px; margin-bottom: var(--gap-section); }
.stepper .step-no { font-size: 12.5px; }
.stepper .step-name { font-size: var(--fs-xs); }

/* ---- Workflow steps: clear stage titles, readable descriptions, air ------ */
.step-panel { margin-top: var(--gap-section); }
.step-head { gap: 16px; margin-bottom: 18px; }
.step-head h3 { font-size: var(--fs-xl); }
.step-number { font-size: var(--fs-xs); }
.step-panel > .form-note { max-width: 78ch; margin-bottom: var(--gap-block); color: var(--ink-2); font-size: var(--fs-base); }
.step-panel > .form-note.table-legend { color: var(--muted); font-size: var(--fs-sm); }
.step-intro { margin: -6px 0 16px; }
#tab-data .step-panel.is-collapsed { padding-top: 18px; padding-bottom: 18px; }
#tab-data .step-panel.is-collapsed .step-head { margin-bottom: 6px; }
#tab-data .step-panel.is-collapsed::after { font-size: var(--fs-sm); line-height: 1.5; }
.step-continue { gap: 10px 14px; margin-top: 22px; padding-top: 16px; font-size: var(--fs-sm); }
.inline-form { gap: 14px; margin-top: 20px; }
.inline-form button { margin-bottom: 16px; }
.dropzone { gap: 6px; padding: 30px 20px; font-size: var(--fs-base); }
.dropzone-file { font-size: var(--fs-xs); }
.saved-note { margin-top: 14px; padding: 11px 14px; font-size: var(--fs-sm); }
.profile-summary { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); gap: 12px; margin-top: 18px; }
.profile-stat { padding: 14px 16px; }
.profile-stat-label { margin-bottom: 6px; font-size: var(--fs-xs); }
.profile-stat-value { font-size: 22px; }
.profile-stat-sub, .warning-sub { margin-top: 3px; font-size: var(--fs-xs); }
.profile-warning { margin-top: 18px; padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.55; }
.check-list { margin-top: 12px; }
.check-list li { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 14px; font-size: var(--fs-sm); }
.verdict { gap: 12px; margin-bottom: 12px; font-size: var(--fs-base); }
.feature-chips { gap: 6px; margin: 6px 0 12px; }
.feature-chips span { padding: 3px 9px; font-size: var(--fs-xs); }
.explain-grid { margin-bottom: 16px; }
.explain-grid > div { padding: 14px 16px; font-size: var(--fs-xs); line-height: 1.5; }
.explain-k { margin-bottom: 3px; font-size: var(--fs-sm); }
.strategy-list { margin: 14px 0; }
.strategy-list dt, .strategy-list dd { padding: 10px 14px; font-size: var(--fs-sm); line-height: 1.5; }
.strategy-list small, .detail-box small, .recommendation small { font-size: var(--fs-xs); }
.analysis-grid { gap: 10px; margin: 14px 0; }
.analysis-grid > div { padding: 12px 14px; font-size: var(--fs-sm); line-height: 1.5; }
#preprocessing-details.detail-box { padding: 20px; }
.prep-summary { margin-bottom: 18px; }
.prep-headline { font-size: 17px; }
.prep-shape { font-size: var(--fs-base); }
.prep-why, .prep-decisions dt, .prep-decisions dd, .pipe-why, .prep-family { font-size: var(--fs-sm); line-height: 1.5; }
.prep-decisions div { padding: 12px 14px; }
.pipe-name { font-size: 17px; }
.model-picker-head { margin-bottom: 12px; }
.model-checkboxes { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 20px; }
.model-checkbox { padding: 14px 14px 13px; font-size: var(--fs-base); line-height: 1.35; }
.model-checkbox small { font: 400 var(--fs-xs)/1.4 var(--sans); }
.model-checkbox .model-status .badge.ok::before { display: none; }   /* the badge text already starts with ✓ */
.train-actions { gap: 16px; }
.training-state { gap: 14px; margin-top: 18px; padding: 14px 16px; font-size: var(--fs-sm); }

/* Comparison */
.run-scope { margin: 16px 0 10px; padding: 12px 16px; font-size: var(--fs-base); }
.run-scope .scope-label { font-size: var(--fs-xs); }
.run-scope small { font-size: var(--fs-xs); line-height: 1.5; }
#comparison-meta { margin-bottom: 12px; font-size: var(--fs-xs); }
.recommendation { margin: 14px 0 16px; padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.55; }
.recommendation small { font-size: var(--fs-xs); }
/* Ten columns beside the progress rail: tighter side padding and wrapping headers keep every column in view at 1440px */
.comparison-table th, .comparison-table td { padding-left: 10px; padding-right: 10px; }
.comparison-table th, .comparison-table th.num { white-space: normal; }
.comparison-table .col-select { width: 36px; }
.comparison-table td.num { font-size: 13.5px; }
.comparison-table .model-cell { min-width: 132px; }
@media (max-width: 1439px) { .comparison-table .model-cell .badge { white-space: normal; } }
.cv-num { font-size: var(--fs-sm); }
.cv-num small { font-size: var(--fs-xs); }
.pipeline-cell { min-width: 124px; max-width: 220px; font-size: var(--fs-xs); line-height: 1.45; }
.table-legend { margin-top: 12px; font-size: var(--fs-xs); line-height: 1.55; }
.selection-bar { gap: 16px; margin-top: 20px; padding: 16px 18px; }
.selection-bar strong { font-size: var(--fs-md); }
.selection-next { margin-top: 4px; font-size: var(--fs-xs); }

/* Evaluation */
.eval-stage { margin-bottom: 18px; padding: 20px 22px; }
.eval-stage-facts { gap: 12px 20px; }
.eval-stage-facts dt { font-size: var(--fs-xs); }
.eval-stage-facts dd { margin-top: 4px; font-size: var(--fs-md); }
.eval-stage-metrics { gap: 10px; margin-top: 16px; }
.stage-metric { padding: 9px 12px; }
.stage-metric span { font-size: var(--fs-xs); }
.stage-metric b { font-size: 17px; }
.stage-metrics-note { font-size: var(--fs-xs); }
.eval-stage-actions { gap: 10px 12px; margin-top: 16px; padding-top: 16px; }
#eval-stage-note, .eval-stage-actions .label-hint { font-size: var(--fs-xs); line-height: 1.5; }
.version-strip { gap: 8px 16px; margin: 18px 0; padding: 14px 18px; font-size: var(--fs-sm); }
.version-strip .vs-name { font-size: var(--fs-xl); }
.version-strip .vs-meta { font-size: var(--fs-xs); }
.eval-grid { gap: 18px; }
.eval-block { padding: 18px 20px; }
.block-title { margin-bottom: 14px; font-size: var(--fs-base); }
.block-title small { font-size: var(--fs-xs); }
.metric-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.metric-card { padding: 13px 14px; }
.metric-card .metric-label { margin-bottom: 6px; font-size: var(--fs-xs); }
.metric-card .metric-value { font-size: clamp(20px, 2vw, 26px); }
.metric-card .metric-sub { margin-top: 4px; font-size: var(--fs-xs); }
.metric-card.text-metric .metric-value { font-size: var(--fs-md); }
.fold-scores { gap: 6px; margin-top: 12px; }
.fold-scores span { padding: 3px 9px; font-size: var(--fs-xs); }
#test-note, #cv-folds { font-size: var(--fs-xs); }
.chart-grid { gap: 18px; margin-top: 18px; }
.chart-card { padding: 18px 20px; }
.chart-card figcaption { margin-bottom: 12px; font-size: var(--fs-base); line-height: 1.45; }
.chart-card figcaption small { font: 400 var(--fs-xs) var(--sans); }
.chart text, .chart .axis-title { font-size: 12px; }
.chart-tooltip { font-size: var(--fs-xs); }
.chart-empty { font-size: var(--fs-sm); }
.pipeline-block { margin-top: 18px; }
.pipeline-block p { margin-bottom: 8px; font-size: var(--fs-sm); line-height: 1.55; }

/* Progress rail: compact, but readable */
.rail-title { font-size: var(--fs-sm); }
.rail-count { font-size: var(--fs-xs); }
.workflow-rail .progress-track { margin: 10px 0 8px; }
.rail-steps button { gap: 10px; padding: 7px 7px; font-size: var(--fs-sm); }
.rail-name { overflow-wrap: normal; }
.rail-no { width: 22px; font-size: var(--fs-xs); }
.rail-context { margin-top: 14px; padding-top: 12px; font: var(--fs-xs)/1.5 var(--sans); }
.rail-context span { font-size: var(--fs-sm); }

/* ---- Models: active model and registry ------------------------------------ */
.active-card { margin-bottom: 24px; }
.active-summary { gap: 12px; }
.active-summary .active-name { padding: 16px 18px; }
.active-summary .active-name strong { font-size: 21px; }
.active-summary .active-name span { margin-top: 6px; font-size: var(--fs-xs); }
.active-summary .metric-card .metric-value { font-size: clamp(20px, 1.6vw, 24px); }
.run-note { padding: 10px 14px; font-size: var(--fs-sm); }
.registry { gap: 22px; }
.registry-run { gap: 12px; padding-top: 18px; }
.registry-run-head h4 { font-size: 17px; }
.registry-run-head small { font-size: var(--fs-xs); }
.version-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.version-card { gap: 12px; padding: 18px; }
.version-card-head strong { font-size: 17px; }
.version-tag { font-size: var(--fs-xs); }
.run-tag { padding: 2px 9px; font-size: var(--fs-xs); }
.version-metrics { gap: 8px; }
.version-metrics div { padding: 8px 10px; }
.version-metrics span { font-size: var(--fs-xs); }
.version-metrics b { font-size: var(--fs-md); }
.version-meta { font-size: var(--fs-xs); line-height: 1.6; }
.version-actions { gap: 10px; }
.version-actions .primary, .version-actions .secondary { min-height: 36px; padding: 7px 13px; font-size: var(--fs-sm); }

/* ---- Prediction: inputs with room on the left, the result on the right ---- */
.prediction-scope { gap: 6px 12px; margin-bottom: 22px; padding: 16px 18px; }
.prediction-scope .field-label { font-size: var(--fs-sm); }
.prediction-scope strong { font-size: 19px; }
.prediction-scope small { font-size: var(--fs-xs); }
.prediction-scope.empty { font-size: var(--fs-sm); }
.prediction-switch { margin-bottom: 18px; padding: 14px 16px; font-size: var(--fs-sm); }
.predict-layout { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 32px; }
.fields-title { margin: 14px 0 14px; font-size: var(--fs-md); }
.fields-title .label-hint { font-size: var(--fs-xs); }
.prediction-fields { gap: 16px; margin-bottom: 24px; }
.prediction-field { padding: 16px 18px 15px; }
.prediction-field .pf-name { font-size: var(--fs-base); }
.prediction-field .pf-type { margin: 4px 0 10px; font-size: var(--fs-xs); }
.prediction-field .pf-type code { font-size: var(--fs-xs); }
.prediction-field input, .prediction-field select { min-height: 46px; font-size: var(--fs-md); }
.prediction-field .pf-hint { margin-top: 8px; font-size: var(--fs-xs); line-height: 1.45; }
.prediction-field .field-error { margin-top: 6px; }
.result-col { top: 20px; }
.prediction-output { padding: 26px 28px; }
.prediction-output.empty { min-height: 240px; font-size: var(--fs-sm); }
.prediction-output.error { font-size: var(--fs-sm); }
.prediction-output .pred-label { font-size: var(--fs-sm); }
.prediction-output .pred-time { font-size: var(--fs-xs); }
.prediction-output .pred-target { margin-top: 18px; font-size: var(--fs-base); }
.prediction-output .pred-value { margin: 4px 0 22px; font-size: clamp(44px, 4.6vw, 64px); }
.prediction-output .pred-meta { gap: 8px 16px; padding-top: 18px; font-size: var(--fs-base); }
.prediction-output .pred-meta dt { font-size: var(--fs-xs); line-height: 1.75; }
.prediction-output .pred-meta dd small { font-size: var(--fs-xs); }
.prediction-output .pred-meta .pred-exact { font-size: var(--fs-xs); }
.pred-inputs { margin-top: 16px; font-size: var(--fs-sm); }
.pred-inputs dl { gap: 4px 14px; padding: 12px 14px; }
.pred-inputs dd { font-size: var(--fs-xs); }
.pred-actions { gap: 10px 14px; margin-top: 18px; padding-top: 16px; }
.pred-actions .label-hint { font-size: var(--fs-xs); }

/* ---- Settings ------------------------------------------------------------- */
.settings-grid { gap: 24px; }

/* ---- Account pages: the same reading sizes ------------------------------- */
.auth-page { grid-template-columns: minmax(0, 1fr) minmax(360px, 468px); width: min(1120px, calc(100% - 48px)); }
.auth-steps { gap: 12px; }
.auth-steps li { font-size: var(--fs-md); }
.auth-steps span { font-size: var(--fs-xs); }
.auth-shell { padding: 36px 36px 32px; }
.auth-form { gap: 18px; }
.auth-head { gap: 8px; }
.auth-head h2, .auth-done h2 { font-size: 26px; }
.auth-head p, .auth-done p { font-size: var(--fs-base); line-height: 1.55; }
.auth-form .field { gap: 8px; }
.auth-form label { font-size: var(--fs-sm); }
.auth-form input:not([type=checkbox]):not([type=radio]) { min-height: 48px; font-size: var(--fs-md); }
.reveal-btn { font-size: var(--fs-xs); }
.small-link { font-size: var(--fs-sm); }
.optional { font-size: var(--fs-xs); }
.password-rules { gap: 6px 18px; font-size: var(--fs-xs); }
.auth-form .primary.wide, .google-btn { min-height: 48px; font-size: var(--fs-md); }
.or-divider { font-size: var(--fs-xs); }
.switch-row, .switch-row .link-btn { font-size: var(--fs-sm); }
.auth-fine { font-size: var(--fs-xs); line-height: 1.5; }
.auth-status { font-size: var(--fs-xs); }
.auth-note { padding: 12px 14px; font-size: var(--fs-sm); }
.auth-done .form-note, .auth-done .link-btn { font-size: var(--fs-sm); }
#auth-msg { padding: 12px 14px; font-size: var(--fs-sm); }

/* ---- Wider desktop: rail and two-column areas ----------------------------- */
@media (min-width: 1280px) {
    .workflow-layout { grid-template-columns: minmax(0, 1fr) 236px; gap: 24px; }
    .workflow-rail { top: 20px; padding: 18px 14px 16px; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
    /* laptop widths: a little less side padding so the workflow keeps its width beside the rail */
    .main-col { padding-left: clamp(20px, 2.4vw, 40px); padding-right: clamp(20px, 2.4vw, 40px); }
    .workflow-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 20px; }
    #tab-data .step-panel { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    .main-col { padding-left: 22px; padding-right: 22px; }
    .workflow-layout { grid-template-columns: minmax(0, 1fr) 196px; gap: 18px; }
    .workflow-rail { padding: 16px 10px 14px; }
    .rail-steps button { gap: 8px; }
    .rail-no { width: 20px; }
    #tab-data .step-panel { padding-left: 22px; padding-right: 22px; }
    .comparison-table th, .comparison-table td { padding-left: 8px; padding-right: 8px; }
    .comparison-table td.num { font-size: 13px; }
    .comparison-table .model-cell { min-width: 112px; }
    .comparison-table .col-select { width: 30px; }
    .pipeline-cell { min-width: 104px; }
}
@media (max-width: 1599px) {
    /* below ~1600px, recent runs and recent projects each get the full width instead of two cramped columns */
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .quick.is-primary strong::after { display: block; width: fit-content; margin: 6px 0 2px; }
}
@media (min-width: 900px) and (max-width: 1599px) {
    /* full-width recent projects: two columns, so a name and its metric stay close together */
    #dashboard-projects .mini-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
    #dashboard-projects .mini-list li:nth-child(odd):nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 1180px) {
    .stepper .step-name { font-size: 12.5px; }
    .predict-layout { grid-template-columns: minmax(0, 1fr); }
    .prediction-output.empty { min-height: 0; padding: 20px; }
}
@media (max-width: 980px) {
    :root { --pad-card: 24px; }
    .sidebar { gap: 12px; padding: 10px 14px; }
    .nav-btn { padding: 8px 12px; font-size: var(--fs-sm); }
    .nav-btn::after { top: auto; bottom: 1px; }
    .sidebar-foot { padding: 0; }
    .auth-page { grid-template-columns: minmax(0, 1fr); width: min(560px, calc(100% - 32px)); }
    .main-col { padding-top: 20px; }
}
@media (max-width: 820px) {
    .onboarding { padding: 22px; }
}
@media (max-width: 720px) {
    :root { --pad-card: 20px; --gap-section: 22px; }
    /* 16px stops phones from zooming into a field on focus */
    input:where(:not([type=checkbox], [type=radio], [type=file])), select, textarea, .context-item select { font-size: var(--fs-md); }
    .project-metric b { font-size: 22px; }
    .step-panel > .form-note { font-size: var(--fs-sm); }
    .predict-layout { gap: 24px; }
    .prediction-output { padding: 22px 20px; }
}
@media (max-width: 520px) {
    :root { --pad-card: 18px; --gap-section: 20px; }
    .main-col { padding: 16px 14px 32px; }
    .panel { padding: var(--pad-card); }
    h1 { font-size: 26px; }
    .view-head { margin-bottom: 22px; }
    .stat { padding: 16px; }
    .stat-grid .stat { min-height: 112px; }
    .stat-value { font-size: 28px; }
    .quick-actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .quick { padding: 14px 16px; }
    .quick span { -webkit-line-clamp: 2; }
    .step-head h3 { font-size: var(--fs-lg); }
    .auth-shell { padding: 26px 20px 22px; }
    .auth-head h2, .auth-done h2 { font-size: 24px; }
    .check-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .kv { gap: 2px 0; }
    .version-list { grid-template-columns: minmax(0, 1fr); }
    .step-head { flex-wrap: wrap; }
    .active-summary > :last-child { grid-column: 1 / -1; }
    .active-summary .metric-card .metric-value { font-size: 19px; }
}

/* ==================================================================== */
/* InferLabs: brand and final polish                                     */
/* The supplied logo sits on its own dark green (the brand panel on the  */
/* account pages, the icon tile in the sidebar); the app stays cream.    */
/* ==================================================================== */
:root {
    --brand-night: #0a2e23;
    --brand-mint: #a8edcb;
    --brand-line: #6be7b0;
    --on-brand: #f2faf5;
    --on-brand-2: rgba(232, 246, 238, .82);
}

/* ---- Account pages: the full logo on a brand panel, the form beside it ---- */
.auth-page {
    grid-template-columns: minmax(400px, .9fr) minmax(0, 1.1fr);
    gap: 0; align-items: stretch;
    width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0;
}
.auth-intro {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(40px, 7vh, 80px) clamp(36px, 5vw, 84px);
    color: var(--on-brand);
    background:
        radial-gradient(ellipse 60% 38% at 30% 32%, rgba(47, 209, 140, .15), transparent 72%),
        radial-gradient(ellipse 130% 95% at 35% 30%, #11503d 0%, var(--brand-night) 52%, #05170f 100%);
}
.auth-brand { display: grid; justify-items: start; gap: 12px; }
/* the image keeps a little transparent room for its glow, so it starts slightly left of the text */
.auth-logo { display: block; width: clamp(210px, 18vw, 276px); height: auto; margin-left: -10px; }
.auth-version { margin: 0; padding: 2px 11px; color: var(--brand-mint); border: 1px solid rgba(168, 237, 203, .38); border-radius: 99px; font: 600 var(--fs-xs)/1.5 var(--sans); }
.auth-intro h1 { max-width: 24ch; margin: clamp(30px, 6vh, 48px) 0 22px; color: var(--on-brand); font-size: clamp(26px, 2.2vw, 33px); line-height: 1.22; }
.auth-steps { gap: 12px; }
.auth-steps li { color: var(--on-brand-2); }
.auth-steps span { color: var(--brand-line); }
.auth-shell { align-self: center; justify-self: center; width: min(468px, calc(100% - 64px)); margin: 48px 0; }

/* ---- Sidebar: the IL icon from the logo, then the name and version ------ */
.sidebar .brand { gap: 12px; }
.brand-icon { flex: 0 0 auto; display: block; width: 40px; height: 40px; border-radius: 9px; box-shadow: 0 1px 2px rgba(11, 61, 46, .22); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.brand-home:hover .brand-icon { transform: translateY(-1px); box-shadow: 0 5px 12px -4px rgba(11, 61, 46, .45); }
.brand strong { font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }
.brand small { margin-top: 1px; color: var(--muted); font: 500 var(--fs-xs)/1.35 var(--sans); }

/* ---- Page heads: one title per page ---------------------------------------- */
/* The h1 names the page and the context bar names the project, so the small
   breadcrumb above them only repeated both. The status pill keeps its place. */
.crumb { display: none; }
.app-topbar { justify-content: flex-end; min-height: 32px; margin-bottom: 14px; }

/* ---- Projects: every fact on one line on wide screens, then three per row -- */
@media (min-width: 1360px) { .project-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 721px) and (max-width: 1359px) { .project-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Models: a long target name gets room instead of breaking mid-word ---- */
.active-summary .metric-card.text-metric .metric-value { font-size: var(--fs-lg); line-height: 1.3; overflow-wrap: anywhere; }
@media (min-width: 1181px) { .active-summary { grid-template-columns: minmax(200px, 1.4fr) minmax(0, .75fr) minmax(0, .75fr) minmax(0, 1.05fr) minmax(0, 1.25fr); } }

/* ---- Settings: what the product is ------------------------------------------ */
.about-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.about-brand img { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 11px; }
.about-brand strong { display: block; font-size: var(--fs-lg); line-height: 1.25; }
.about-brand span { display: block; color: var(--muted); font-size: var(--fs-sm); }

/* ---- Footer: the product, not the build ---------------------------------- */
.footer strong { color: var(--ink-2); font-weight: 600; }

/* ---- Tablet and phone ------------------------------------------------------ */
@media (max-width: 980px) {
    .auth-page { grid-template-columns: minmax(0, 1fr); width: 100%; gap: 0; padding: 0; align-content: start; }
    .auth-intro { align-items: center; padding: 30px 24px 40px; text-align: center; }
    .auth-brand { justify-items: center; gap: 10px; }
    .auth-logo { width: 156px; margin-left: 0; }
    .auth-intro h1 { max-width: 26ch; margin: 18px auto 0; font-size: clamp(20px, 4.2vw, 26px); }
    .auth-steps { display: none; }
    .auth-shell { width: min(560px, calc(100% - 32px)); margin: -20px 0 40px; }
    .brand-icon { width: 36px; height: 36px; border-radius: 8px; }
}
@media (max-width: 520px) {
    .auth-intro { padding: 24px 20px 36px; }
    .auth-intro h1 { display: none; }
    .auth-logo { width: 148px; }
}
@media (max-width: 720px) { .project-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the compact workflow stepper (below 1280px): step numbers stay readable inside their dots */
@media (max-width: 1279px) { body[data-view="data"] .workflow-nav .stepper li:not(.done):not(.error) .step-no { font-size: 12px; } }