/*
 * Shared styles for the whole web UI.
 * Layout, the navigation shell and small components live here; spacing on
 * individual elements uses Tailwind classes in the templates.
 *
 * Widths: content is a centred column (max 80rem = 1280px) so pages read well
 * on 27" monitors, laptops and phones alike. The sidebar is fixed on screens
 * 1024px and wider and becomes a slide-in menu below that.
 */

:root {
  --brand: #355e8e;
  --brand-dark: #2c4f78;
  --brand-tint: #e8eff7;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --surface: #ffffff;
  --page-bg: #f6f8fb;
  --ink-2: #334155;
  --faint: #94a3b8;
  --line-strong: #cbd5e1;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --brand-ink: #355e8e;
  --topbar-bg: rgba(255, 255, 255, 0.92);
  color-scheme: light;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Shell ──────────────────────────────────────────────────────────── */
/* On wide screens the sidebar and the page sit side by side as one centred unit, so the navigation stays next to
   the content instead of against the window edge. Below 1024px the sidebar becomes a slide-in menu. */
.shell { display: flex; min-height: 100vh; max-width: calc(80rem + 17.5rem); margin: 0 auto; gap: 0.5rem; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page { width: 100%; max-width: 80rem; padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 3rem; box-sizing: border-box; flex: 1; }
.site-footer { padding: 1.25rem 1rem 1.75rem; text-align: center; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--line); }

.brand { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.brand .material-symbols-outlined { color: var(--brand-ink); font-size: 22px; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.6rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.icon-button:hover { background: var(--surface-3); }

.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: var(--topbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }

/* Sidebar: no shared panel behind the links; every entry is its own small button. */
.sidebar { width: 16.5rem; flex-shrink: 0; box-sizing: border-box; padding: 1.5rem 0.75rem 2rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.25rem 1rem; }
.nav-group { margin: 1.2rem 0.4rem 0.45rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.sidebar nav { display: flex; flex-direction: column; gap: 0.35rem; }
.sidebar nav .nav-group:first-child { margin-top: 0; }
.nav-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 0.7rem; font-size: 0.88rem; line-height: 1.3; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 120ms, box-shadow 120ms, transform 120ms; }
.nav-link .material-symbols-outlined { font-size: 19px; color: var(--muted); }
.nav-link:hover { border-color: var(--line-strong); color: var(--ink); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.07); transform: translateY(-1px); }
.nav-link-active { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 650; box-shadow: 0 4px 12px rgba(53, 94, 142, 0.25); }
.nav-link-active .material-symbols-outlined { color: #fff; }
.nav-link-active:hover { color: #fff; border-color: var(--brand-dark); }
.nav-backdrop { position: fixed; inset: 0; z-index: 35; background: rgba(15, 23, 42, 0.35); }

@media (min-width: 1024px) {
  .topbar, .sidebar-close, .nav-backdrop { display: none !important; }
}
@media (max-width: 1023px) {
  .shell { display: block; }
  .sidebar { position: fixed; z-index: 40; left: 0; top: 0; background: var(--page-bg); transform: translateX(-100%); transition: transform 180ms ease; box-shadow: 0 20px 45px rgba(15, 23, 42, 0.2); }
  .sidebar.sidebar-open { transform: translateX(0); }
  .page { padding-top: 1.25rem; }
}

/* ── Typography ─────────────────────────────────────────────────────── */
.page-title { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.page-caption { margin-top: 0.4rem; color: var(--muted); max-width: 70ch; }
.page > .mt-2.font-semibold:first-of-type, .lead { max-width: 75ch; }
.h2 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); font-weight: 750; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 0.6rem; }
.h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin: 0 0 0.4rem; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 1.75rem 0; }
.muted { color: var(--muted); }

/* ── Components ─────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 0.85rem; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); min-width: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.4rem; padding: 0.45rem 1rem; border-radius: 0.6rem; border: 1px solid var(--line-strong); background: var(--surface); font-size: 0.9rem; font-weight: 600; color: var(--ink); cursor: pointer; text-align: center; }
.btn:hover { background: var(--surface-2); border-color: var(--faint); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn[disabled], .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn .material-symbols-outlined { font-size: 18px; }
.alert { padding: 0.75rem 1rem; border-radius: 0.65rem; border: 1px solid; font-size: 0.92rem; line-height: 1.5; overflow-wrap: anywhere; }
.alert-info { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.alert-error { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.metric-label { font-size: 0.78rem; color: var(--muted); }
.metric-value { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
code { overflow-wrap: anywhere; }

/* Prose for the manual and other long-form text: keep lines readable. */
.prose { max-width: 75ch; }
.prose p { margin: 0.5rem 0; line-height: 1.65; }
.prose ul, .prose ol { margin: 0.5rem 0 0.5rem 1.4rem; line-height: 1.7; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose code, .card code { background: var(--surface-3); padding: 0.05rem 0.3rem; border-radius: 0.25rem; font-size: 0.88em; }
.table-simple { border-collapse: collapse; margin: 0.5rem 0; font-size: 0.92rem; }
.table-simple th, .table-simple td { border: 1px solid var(--line); padding: 0.45rem 0.75rem; text-align: left; vertical-align: top; }
.table-simple th { background: var(--surface-2); font-weight: 700; }
/* On phones, wide tables scroll inside themselves instead of widening the page. */
@media (max-width: 640px) {
  .table-simple { display: block; max-width: 100%; overflow-x: auto; }
}

/* <details> styled as collapsible panels */
details.expander { background: var(--surface); border: 1px solid var(--line); border-radius: 0.75rem; margin: 0.6rem 0; }
details.expander > summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 600; list-style: none; }
details.expander > summary::-webkit-details-marker { display: none; }
details.expander > summary::before { content: "▸"; display: inline-block; width: 1.1rem; transition: transform 120ms; color: var(--muted); }
details.expander[open] > summary::before { transform: rotate(90deg); }
details.expander > .expander-body { padding: 0 1rem 0.9rem; }

/* Form controls */
.input, .select, .textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: 0.6rem; padding: 0.5rem 0.7rem; background: var(--surface); font-size: 0.92rem; min-height: 2.4rem; }
.input:focus, .select:focus, .textarea:focus { outline: 2px solid #93c5fd; outline-offset: 0; border-color: #93c5fd; }
.label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--ink-2); margin-bottom: 0.3rem; }
input[type="range"] { accent-color: var(--brand); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-flex; }

/* Charts and graphs never push the page wider than the screen. */
.plot { width: 100%; min-width: 0; }
.cy-graph, .hub-graph { width: 100%; }


/* Tables from partials/records_table.html: long lists scroll inside the page, header stays visible. */
.records-scroll { max-height: 24rem; overflow-y: auto; }
.records-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--line); }
.records-table .cell-long { max-width: 26rem; overflow: hidden; text-overflow: ellipsis; }

/* Shared small controls: icon buttons, toggle switch, visually hidden text. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.55rem;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn .material-symbols-outlined { font-size: 19px; }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--line); }
.icon-btn-danger:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.icon-btn[disabled] { opacity: 0.35; pointer-events: none; }

/* Toggle switch (checkbox) */
.switch { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.4rem; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { position: relative; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--line-strong); transition: background 120ms; flex-shrink: 0; }
.switch-track::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 999px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.3); transition: transform 120ms; }
.switch input:checked + .switch-track { background: var(--c, var(--task, var(--brand))); }
.switch input:checked + .switch-track::after { transform: translateX(1rem); }
.switch input:focus-visible + .switch-track { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* Compact button */
.btn-sm { min-height: 2rem; padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.btn-sm .material-symbols-outlined { font-size: 16px; }

/* ── Panels ─────────────────────────────────────────────────────────── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); min-width: 0; }
.panel + .panel { margin-top: 1rem; }
.panel-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.panel-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 0.7rem;
  background: var(--task-tint, var(--brand-tint)); color: var(--task, var(--brand-ink)); font-size: 21px; }
.panel-title { margin: 0; font-size: 1.08rem; font-weight: 750; color: var(--ink); letter-spacing: -0.01em; }
.panel-sub { margin: 0.1rem 0 0; font-size: 0.84rem; color: var(--muted); }

/* ── Tool pages (partials/ui.html) ──────────────────────────────────── */
.tool-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.tool-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3.1rem; height: 3.1rem; border-radius: 0.9rem;
  background: var(--brand-tint); color: var(--brand-ink); font-size: 26px; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05); }
.tool-eyebrow { margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink); }
.tool-action { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; align-self: center; padding: 0.55rem 0.85rem; border-radius: 0.8rem;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--brand-ink); font-size: 0.86rem; font-weight: 650; transition: box-shadow 120ms, transform 120ms; }
.tool-action:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }
@media (max-width: 640px) { .tool-action { margin-left: 0; } }

.lookup { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.lookup-field { position: relative; flex: 1 1 16rem; }
.lookup-field .material-symbols-outlined { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--faint); font-size: 20px; }
.lookup-field input { width: 100%; box-sizing: border-box; min-height: 2.6rem; padding: 0.5rem 0.75rem 0.5rem 2.4rem; border: 1px solid transparent; border-radius: 0.65rem;
  background: var(--surface-2); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95rem; }
.lookup-field input:focus { outline: 2px solid #93c5fd; background: var(--surface); }
.lookup-hint { margin: 0.5rem 0.2rem 0; font-size: 0.84rem; color: var(--muted); }
.lookup-hint a { font-weight: 650; color: var(--brand-ink); text-decoration: underline; }

.kpi-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.kpi { padding: 0.8rem 0.95rem; background: var(--surface); border: 1px solid var(--line); border-radius: 0.85rem; min-width: 0; }
.kpi-label { margin: 0; font-size: 0.76rem; font-weight: 600; color: var(--muted); }
.kpi-value { margin: 0.15rem 0 0; font-size: 1.45rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.run-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.status-badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.85rem; font-weight: 700;
  color: var(--s); background: color-mix(in srgb, var(--s) 12%, var(--surface)); }
.status-badge i { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--s); }
.run-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 0.5rem; background: var(--surface-3); font-size: 0.82rem; color: var(--ink-2); }
.run-chip code { background: transparent; padding: 0; }
.progress-track { height: 0.6rem; margin-top: 0.4rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), #4f86c6); }
.plot-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.plot-card { padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--surface); min-width: 0; }
.stack { display: grid; gap: 1rem; }
.hero-result { margin: 0.75rem 0; padding: 1.75rem 2rem; border-radius: 1rem; text-align: center; border: 2px solid color-mix(in srgb, var(--r) 35%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--r) 12%, var(--surface)), var(--surface)); }
.hero-result-label { font-size: 1.9rem; font-weight: 800; color: var(--r); }
.hero-result-sub { margin-top: 0.25rem; font-size: 1.05rem; color: var(--muted); }
.stack > .panel + .panel { margin-top: 0; }
.model-card { margin: 0; border-radius: 1rem; }
.layer-steps { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.layer-steps li { display: grid; grid-template-columns: 2.6rem 7rem minmax(0, 1fr); align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem;
  border: 1px solid var(--line); border-radius: 0.6rem; background: var(--surface-2); font-size: 0.86rem; }
.layer-step-no { font-weight: 700; color: var(--muted); }
.layer-step-type { font-weight: 700; color: var(--brand-ink); }
.layer-step-config { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 520px) { .layer-steps li { grid-template-columns: 2rem minmax(0, 1fr); } .layer-step-config { grid-column: 1 / -1; } }
.seg-links { display: inline-flex; padding: 0.25rem; gap: 0.2rem; border-radius: 0.8rem; background: var(--surface-3); }
.seg-links a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 0.6rem; font-size: 0.9rem; font-weight: 650; color: var(--ink-2); }
.seg-links a .material-symbols-outlined { font-size: 18px; }
.seg-links a.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.file-drop { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.1rem; border: 2px dashed var(--line-strong); border-radius: 0.9rem;
  background: var(--surface-2); transition: border-color 120ms, background 120ms; }
.file-drop:hover, .file-drop:focus-within { border-color: var(--brand); background: var(--brand-tint); }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-drop .material-symbols-outlined { font-size: 30px; color: var(--brand-ink); }
.run-pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.35rem 0.3rem 0.65rem; border-radius: 999px; font-size: 0.85rem;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: var(--ink); }
.run-pill i { width: 0.6rem; height: 0.6rem; border-radius: 999px; background: var(--c); }
.run-pill code { background: transparent; padding: 0; }
.run-pill a { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; color: var(--muted); }
.run-pill a:hover { background: rgba(15, 23, 42, 0.08); color: var(--ink); }
.run-pill a .material-symbols-outlined { font-size: 16px; }
.run-card { padding: 0.9rem 1rem; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 0.9rem; background: var(--surface); font-size: 0.86rem; min-width: 0; }
.run-card-title { margin: 0; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 0.4rem; }
.run-card-title i { width: 0.65rem; height: 0.65rem; border-radius: 999px; background: var(--c); }
.run-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.6rem; margin: 0.6rem 0 0; }
.run-card dt { color: var(--muted); }
.run-card dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ── Accessibility ──────────────────────────────────────────────────── */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.6rem 1rem; border-radius: 0.6rem; background: var(--brand); color: #fff; font-weight: 650; transition: top 120ms; }
.skip-link:focus { top: 1rem; outline: 3px solid #93c5fd; outline-offset: 2px; }
:focus-visible { outline: 2px solid #4f86c6; outline-offset: 2px; }
.theme-toggle { display: flex; align-items: center; gap: 0.6rem; width: 100%; margin-top: 1.25rem; padding: 0.5rem 0.75rem; border-radius: 0.7rem; font-size: 0.84rem;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); cursor: pointer; }
.theme-toggle:hover { border-color: var(--line-strong); color: var(--ink); }
.theme-toggle .material-symbols-outlined { font-size: 19px; color: var(--muted); }
.theme-toggle .when-dark, [data-theme="dark"] .theme-toggle .when-light { display: none; }
[data-theme="dark"] .theme-toggle .when-dark { display: inline; }

/* ── Error pages ────────────────────────────────────────────────────── */
.error-page { max-width: 40rem; margin: clamp(2rem, 8vh, 5rem) auto; text-align: center; }
.error-code { font-size: clamp(4rem, 3rem + 5vw, 6.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--brand-ink); margin: 0; }
.error-title { margin: 0.75rem 0 0.5rem; font-size: 1.5rem; font-weight: 750; color: var(--ink); }
.error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }

/* ── Dark theme ─────────────────────────────────────────────────────── */
/* Chosen with the toggle in the sidebar and remembered in this browser; light is the default. Colours come
   from the variables above; the rest of this block covers tinted status colours and Tailwind utility classes.
   Figures keep their light chart area so category colours stay exactly as validated. */
:root { --hero-glow: #dbeafe; --hero-top: #f3f8fb; --hero-bottom: #eaf2f6; }
:root[data-theme="dark"] {
  --brand: #4a7bb3; --brand-dark: #3f6fa6; --brand-tint: #2a3a52; --brand-ink: #a9c8ec;
  --ink: #e8edf4; --ink-2: #c9d3df; --muted: #a3afbf; --faint: #8391a6;
  --line: #3a4557; --line-strong: #4b576b;
  --surface: #262e3b; --surface-2: #2b3442; --surface-3: #323c4c; --page-bg: #1d2430;
  --topbar-bg: rgba(29, 36, 48, 0.92);
  --hero-glow: #2d4566; --hero-top: #262e3b; --hero-bottom: #212936;
  color-scheme: dark;
}
[data-theme="dark"] .alert-info { background: #10233d; border-color: #1e3f66; color: #bfdbfe; }
[data-theme="dark"] .alert-warning { background: #2a1f08; border-color: #5c4412; color: #fde68a; }
[data-theme="dark"] .alert-error, [data-theme="dark"] .check-summary-bad, [data-theme="dark"] .meter-over { background: #2b1214; border-color: #6b2226; color: #fecaca; }
[data-theme="dark"] .alert-success, [data-theme="dark"] .check-summary-ok { background: #0e2619; border-color: #1d5236; color: #bbf7d0; }
[data-theme="dark"] .icon-btn-danger:hover { background: #2b1214; color: #fca5a5; border-color: #6b2226; }
[data-theme="dark"] .tag-info { background: #0c2a3d; color: #bae6fd; }
[data-theme="dark"] .tag-warn { background: #2a1f08; color: #fde68a; }
[data-theme="dark"] .check-fail .check-detail { color: #fca5a5; }
[data-theme="dark"] .check-bullets, [data-theme="dark"] .ready-list .todo { color: #fdba74; }
[data-theme="dark"] .ready-list .ok { color: #86efac; }
[data-theme="dark"] .task-ppi { color: #93c5fd; background: #13294a; }
[data-theme="dark"] .task-dtpi { color: #7dd3c0; background: #0f2e2a; }
[data-theme="dark"] .task-rpi { color: #d8b4fe; background: #2a1840; }
[data-theme="dark"] .kind-train { color: #5eead4; background: #0f2a27; }
[data-theme="dark"] .kind-infer { color: #93c5fd; background: #10233d; }
[data-theme="dark"] .role-hub { color: #fdba74; background: #3a1e0c; }
[data-theme="dark"] .role-partner { color: #bfdbfe; background: #13294a; }
[data-theme="dark"] .net-stat > .material-symbols-outlined { background: #3a1e0c; color: #fdba74; }
[data-theme="dark"] .net-partners button:hover { background: #3a1e0c; }
[data-theme="dark"] .eyebrow { background: rgba(18, 27, 43, 0.8); color: #9cc0e8; }
[data-theme="dark"] .step-number { background: #2c4f78; }
[data-theme="dark"] .tone-ppi { --tint: #0f2a27; }
[data-theme="dark"] .tone-dtpi { --tint: #13233f; }
[data-theme="dark"] .tone-rpi { --tint: #2a1638; }
[data-theme="dark"] .tone-ppi .task-art { background: #eaf6f4; }
[data-theme="dark"] .tone-dtpi .task-art { background: #eef3fe; }
[data-theme="dark"] .tone-rpi .task-art { background: #f8eefa; }
[data-theme="dark"] .status-badge, [data-theme="dark"] .status-pill { color: color-mix(in srgb, var(--s) 55%, #ffffff); }
[data-theme="dark"] .visibility-badge { background: var(--surface-3) !important; color: var(--ink-2) !important; }
[data-theme="dark"] .visibility-badge.is-public { color: #93c5fd !important; }
[data-theme="dark"] .builder { --task-tint: var(--surface-3) !important; }
[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
[data-theme="dark"] .bg-slate-50 { background-color: var(--surface-2) !important; }
[data-theme="dark"] .bg-slate-100 { background-color: var(--surface-3) !important; }
[data-theme="dark"] .text-slate-400 { color: var(--faint) !important; }
[data-theme="dark"] .text-slate-500 { color: var(--muted) !important; }
[data-theme="dark"] .text-slate-600, [data-theme="dark"] .text-slate-700 { color: var(--ink-2) !important; }
[data-theme="dark"] .border-slate-100, [data-theme="dark"] .border-slate-200 { border-color: var(--line) !important; }
[data-theme="dark"] code { color: var(--ink); }
/* Figures: Plotly charts are re-coloured by plots.js; the architecture diagram and the network keep a light canvas. */
[data-theme="dark"] .arch-diagram { background: radial-gradient(circle, #e2e8f0 1px, transparent 1.2px) 0 0 / 16px 16px, #f8fafc; }
[data-theme="dark"] .arch-legend { color: var(--ink-2); }
[data-theme="dark"] .hub-graph { background: radial-gradient(circle, #e2e8f0 1px, transparent 1.2px) 0 0 / 18px 18px, #f8fafc; }

/* ── Job timing (queue position, elapsed time) ──────────────────────── */
.job-timing { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 0.8rem 0 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--ink-2); }
.job-timing li { display: inline-flex; align-items: center; gap: 0.35rem; }
.job-timing .material-symbols-outlined { font-size: 17px; color: var(--muted); }
.status-note { display: block; margin-top: 0.25rem; font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

/* ── Upload in progress ─────────────────────────────────────────────── */
/* The form gets .is-uploading on submit; the overlay stays until the next page (with the file check) arrives. */
.upload-form { position: relative; }
.upload-busy { display: none; position: absolute; inset: 0; z-index: 5; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 1rem; border-radius: inherit; text-align: center; background: color-mix(in srgb, var(--surface) 98%, transparent); color: var(--ink); }
.upload-form.is-uploading { pointer-events: none; }
.upload-form.is-uploading .upload-busy { display: flex; }
.upload-spinner { width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 3px solid var(--line); border-top-color: var(--task, var(--brand)); animation: upload-spin 0.8s linear infinite; }
.upload-name { font-size: 0.82rem; color: var(--ink-2); word-break: break-all; }
.upload-name:empty { display: none; }
.upload-bar { position: relative; width: min(18rem, 80%); height: 0.3rem; margin-top: 0.2rem; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.upload-bar i { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 999px; background: var(--task, var(--brand)); animation: upload-slide 1.3s ease-in-out infinite; }
.upload-hint { font-size: 0.76rem; color: var(--muted); }
.data-load-compact .upload-busy { flex-direction: row; flex-wrap: wrap; gap: 0.35rem 0.7rem; }
.data-load-compact .upload-bar, .data-load-compact .upload-hint { display: none; }
@keyframes upload-spin { to { transform: rotate(360deg); } }
@keyframes upload-slide { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .upload-spinner, .upload-bar i { animation-duration: 3s; } }

/* ── Model configuration bar (results page) ─────────────────────────── */
.config-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: 0.85rem; background: var(--surface); }
.config-bar-label { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: auto; font-size: 0.86rem; font-weight: 650; color: var(--ink-2); }
.config-bar-label .material-symbols-outlined { font-size: 19px; color: var(--muted); }