/* ============================================================================
   LaunchAudit — control surface
   One coherent design system. Very dark NEUTRAL base (zinc/near-black),
   one restrained accent, hairline borders, dense developer-tool layout.
   ============================================================================ */

/* ---- DARK (default) ---------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* surfaces — neutral zinc, NOT navy */
  --bg:            #0a0a0c;
  --bg-grad-a:     #0c0c0f;
  --bg-grad-b:     #08080a;
  --panel:         #111114;
  --panel-2:       #141417;
  --panel-inset:   #0d0d10;
  --rail:          #0b0b0e;

  /* hairlines — white at low opacity */
  --line:          rgba(255,255,255,0.07);
  --line-2:        rgba(255,255,255,0.10);
  --line-strong:   rgba(255,255,255,0.14);

  /* type */
  --fg:            #f4f4f5;
  --fg-2:          #c4c4cb;
  --fg-3:          #8d8d97;
  --fg-4:          #82828c; /* WCAG AA 4.5:1 on the dark surfaces (was #62626b, ~3.2:1) */

  /* single restrained accent — refined iris */
  --accent:        #7c83ff;
  --accent-2:      #9aa0ff;
  --accent-ink:    #0a0a0c;
  --accent-soft:   rgba(124,131,255,0.12);
  --accent-line:   rgba(124,131,255,0.32);

  /* status (muted, not neon) */
  --ok:            #4ec98a;
  --ok-soft:       rgba(78,201,138,0.12);
  --ok-line:       rgba(78,201,138,0.30);
  --warn:          #e0b23c;
  --warn-soft:     rgba(224,178,60,0.12);
  --warn-line:     rgba(224,178,60,0.30);
  --bad:           #f06a6a;
  --bad-soft:      rgba(240,106,106,0.12);
  --bad-line:      rgba(240,106,106,0.30);
  --crit:          #ff5d6c;
  --info:          #59b6d8;
  --info-soft:     rgba(89,182,216,0.12);
  --info-line:     rgba(89,182,216,0.30);

  --track:         rgba(255,255,255,0.06);
  --code-bg:       rgba(255,255,255,0.035);
  --code-fg:       #d7d7df;

  /* accent as a gradient — used sparingly (gauge, primary btn, active nav) */
  --accent-grad:   linear-gradient(135deg, #8f95ff 0%, #7c83ff 48%, #6f63f5 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(143,149,255,0.16), rgba(111,99,245,0.10));

  /* panel material: subtle top→bottom lift + top-edge inner highlight */
  --panel-grad:    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0) 38%);
  --raise-grad:    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 42%);
  --hi-top:        inset 0 1px 0 rgba(255,255,255,0.055);
  --hi-top-2:      inset 0 1px 0 rgba(255,255,255,0.07);

  /* three elevation tiers: page < panel < raised card */
  --shadow:        var(--hi-top), 0 1px 2px rgba(0,0,0,0.4), 0 12px 28px -14px rgba(0,0,0,0.66);
  --shadow-raise:  var(--hi-top-2), 0 1px 2px rgba(0,0,0,0.45), 0 18px 40px -18px rgba(0,0,0,0.72);
  --shadow-lift:   var(--hi-top-2), 0 2px 4px rgba(0,0,0,0.5), 0 28px 64px -22px rgba(0,0,0,0.85);
  --shadow-hover:  var(--hi-top-2), 0 2px 6px rgba(0,0,0,0.5), 0 26px 52px -20px rgba(0,0,0,0.8);
  --ring:          0 0 0 1px var(--accent-line), 0 0 0 4px var(--accent-soft);
}

/* ---- LIGHT — warm off-white, ink text, same structure ------------------ */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:            #f4f3ef;
  --bg-grad-a:     #f6f5f1;
  --bg-grad-b:     #efeee9;
  --panel:         #ffffff;
  --panel-2:       #fbfaf7;
  --panel-inset:   #f3f2ee;
  --rail:          #faf9f5;

  --line:          rgba(24,24,27,0.09);
  --line-2:        rgba(24,24,27,0.13);
  --line-strong:   rgba(24,24,27,0.18);

  --fg:            #18181b;
  --fg-2:          #3f3f46;
  --fg-3:          #6c6c75;
  --fg-4:          #6b6b73; /* WCAG AA 4.5:1 on the light surfaces (was #9a9aa2, ~2.5:1) */

  --accent:        #5b5fe0;
  --accent-2:      #4a4ec9;
  --accent-ink:    #ffffff;
  --accent-soft:   rgba(91,95,224,0.10);
  --accent-line:   rgba(91,95,224,0.30);

  --ok:            #0a6e40;
  --ok-soft:       rgba(31,157,99,0.10);
  --ok-line:       rgba(31,157,99,0.28);
  --warn:          #855d08;
  --warn-soft:     rgba(181,129,15,0.10);
  --warn-line:     rgba(181,129,15,0.28);
  --bad:           #b22f2a;
  --bad-soft:      rgba(214,69,63,0.10);
  --bad-line:      rgba(214,69,63,0.26);
  --crit:          #a31f1f;
  --info:          #115f73;
  --info-soft:     rgba(31,127,156,0.10);
  --info-line:     rgba(31,127,156,0.26);

  --track:         rgba(24,24,27,0.07);
  --code-bg:       rgba(24,24,27,0.045);
  --code-fg:       #2a2a30;

  --accent-grad:   linear-gradient(135deg, #6b6fe6 0%, #5b5fe0 50%, #4d51d6 100%);
  --accent-grad-soft: linear-gradient(135deg, rgba(91,95,224,0.12), rgba(77,81,214,0.07));

  --panel-grad:    linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0) 46%);
  --raise-grad:    linear-gradient(180deg, rgba(255,255,255,0.7), rgba(24,24,27,0.012) 60%);
  --hi-top:        inset 0 1px 0 rgba(255,255,255,0.9);
  --hi-top-2:      inset 0 1px 0 rgba(255,255,255,1);

  --shadow:        var(--hi-top), 0 1px 2px rgba(24,24,27,0.06), 0 10px 26px -16px rgba(24,24,27,0.20);
  --shadow-raise:  var(--hi-top-2), 0 1px 2px rgba(24,24,27,0.07), 0 16px 34px -18px rgba(24,24,27,0.22);
  --shadow-lift:   var(--hi-top-2), 0 2px 6px rgba(24,24,27,0.08), 0 24px 52px -22px rgba(24,24,27,0.26);
  --shadow-hover:  var(--hi-top-2), 0 2px 8px rgba(24,24,27,0.10), 0 22px 44px -20px rgba(24,24,27,0.24);
  --ring:          0 0 0 1px var(--accent-line), 0 0 0 4px var(--accent-soft);
}

/* ---- reset ------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 700px at 78% -8%, color-mix(in oklab, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-grad-a), var(--bg-grad-b));
  background-attachment: fixed;
  color: var(--fg);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1;
}
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
code, .mono, .mono-id {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-ligatures: none;
}
::selection { background: color-mix(in oklab, var(--accent) 30%, transparent); }

/* [hidden] must always win over display:grid/flex element rules */
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 9px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); border-radius:9px; border:3px solid transparent; background-clip:padding-box; }

/* ============================================================================
   SHELL
   ============================================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- sidebar ----------------------------------------------------------- */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 14px;
  background: var(--rail);
  border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; }
.brand-mark {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 92%, white), var(--accent));
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-line), 0 6px 16px -6px color-mix(in oklab, var(--accent) 60%, transparent);
  flex: none;
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; }
.brand-subtitle {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-4); margin-top: 2px;
}

.nav-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-4); padding: 12px 10px 7px;
}
.nav-list { display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--fg-3);
  font-size: 13px; font-weight: 500;
  position: relative;
  transition: color .14s ease, background .14s ease;
}
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .82; }
.nav-item:hover { color: var(--fg); background: color-mix(in oklab, var(--fg) 5%, transparent); }
.nav-item.nav-active { color: var(--fg); background: var(--accent-grad-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.nav-item.nav-active svg { opacity: 1; color: var(--accent-2); }
.nav-item.nav-active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--accent-grad);
  box-shadow: 0 0 8px -1px color-mix(in oklab, var(--accent) 70%, transparent);
}
.nav-item .nav-count {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; color: var(--fg-4);
  background: color-mix(in oklab, var(--fg) 6%, transparent);
  padding: 1px 6px; border-radius: 5px;
}
.nav-item.nav-active .nav-count { color: var(--accent-2); background: var(--accent-soft); }

.rail-spacer { flex: 1; }

.runner-note {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  padding: 12px;
}
.runner-note-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.runner-note-title { font-size: 11.5px; font-weight: 600; color: var(--fg-2); letter-spacing: -0.01em; }
.runner-note p { font-size: 11px; line-height: 1.5; color: var(--fg-3); margin-bottom: 10px; }
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px var(--ok-soft);
}
.live-dot.pulse { animation: livePulse 2.4s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 3px var(--ok-soft); } 50% { box-shadow: 0 0 0 5px transparent; } }
.runner-note-meta {
  display: flex; align-items: center; gap: 7px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-3);
}

/* ============================================================================
   WORKSPACE
   ============================================================================ */
.workspace { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 13px 26px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.topbar-titles { min-width: 0; }
.title-row { display: flex; align-items: center; gap: 10px; }
.title-row h1 {
  font-size: 16px; font-weight: 600; letter-spacing: -0.022em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46ch;
}
.title-sub {
  margin-top: 2px;
  font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-3);
  display: flex; align-items: center; gap: 7px;
}
.title-sub .dot-sep { color: var(--fg-4); }
.actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.campaign-switcher {
  appearance: none;
  font-family: "JetBrains Mono", monospace; font-size: 11.5px;
  color: var(--fg-2);
  background:
    var(--panel)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238d8d97' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 9px center;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 7px 28px 7px 11px;
  max-width: 230px;
  cursor: pointer;
}
.campaign-switcher:hover { border-color: var(--line-strong); }
.campaign-switcher:focus-visible { outline: none; box-shadow: var(--ring); }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  border-radius: 8px;
  font-size: 12.5px; font-weight: 540;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, border-color .14s ease, transform .08s ease, color .14s ease;
}
.btn svg { width: 15px; height: 15px; }
.btn:active { transform: translateY(0.5px); }
.btn-ghost { background: transparent; color: var(--fg-2); border-color: var(--line-2); }
.btn-ghost:hover { background: color-mix(in oklab, var(--fg) 5%, transparent); border-color: var(--line-strong); color: var(--fg); }
.btn-icon { width: 32px; padding: 0; justify-content: center; }
.btn-primary {
  background: var(--accent-grad); color: #fff; border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 1px 2px rgba(0,0,0,0.25),
    0 8px 20px -8px color-mix(in oklab, var(--accent) 75%, transparent);
}
.btn-primary:hover {
  filter: brightness(1.07) saturate(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 1px 2px rgba(0,0,0,0.25),
    0 10px 26px -8px color-mix(in oklab, var(--accent) 85%, transparent);
}
.btn-primary:active { filter: brightness(0.97); box-shadow: inset 0 1px 3px rgba(0,0,0,0.25), 0 2px 8px -4px color-mix(in oklab, var(--accent) 60%, transparent); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- canvas + grid ----------------------------------------------------- */
.canvas { padding: 22px 26px 64px; }
.view-head { margin-bottom: 18px; max-width: 760px; }
.view-head h2 { font-size: 19px; letter-spacing: -0.025em; }
.view-head p { margin-top: 6px; color: var(--fg-3); font-size: 13px; line-height: 1.55; }
.view-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 9px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 18px;
  align-items: start;
}
.content-grid.no-inspector { grid-template-columns: minmax(0, 1fr); }
.main-column { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.inspector { min-width: 0; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 74px; }

/* ============================================================================
   PANEL primitive — material: subtle gradient lift + top-edge highlight
   ============================================================================ */
.panel {
  position: relative;
  background:
    var(--panel-grad),
    var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.panel-pad { padding: 18px; }
.panel-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.panel-heading h2 { font-size: 14px; letter-spacing: -0.018em; display:flex; align-items:center; gap:8px; }
.panel-heading h2 svg { width: 15px; height: 15px; color: var(--accent-2); opacity: .9; }
.panel-heading p { margin-top: 4px; font-size: 12px; color: var(--fg-3); line-height: 1.5; max-width: 62ch; }
.panel-body { padding: 18px; }
.panel-title-line {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.panel-title-line h2 { font-size: 12.5px; letter-spacing: 0.01em; }
.panel-title-line svg { width: 14px; height: 14px; color: var(--accent-2); opacity: .9; }
.panel-title-line .spacer { flex: 1; }
.section-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--fg-4); margin-bottom: 9px;
}

/* ============================================================================
   BADGES / PILLS — small, precise, dot + label
   ============================================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 19px; padding: 0 7px;
  border-radius: 6px;
  font-size: 11px; font-weight: 540; line-height: 1;
  white-space: nowrap;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  background: color-mix(in oklab, var(--fg) 3.5%, transparent);
}
.badge.mono { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.01em; }
.badge::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .9; flex: none;
}
.badge.no-dot::before { display: none; }
.badge-muted   { color: var(--fg-3); }
.badge-info    { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.badge-success { color: var(--ok);   background: var(--ok-soft);   border-color: var(--ok-line); }
.badge-medium  { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.badge-high    { color: var(--bad);  background: var(--bad-soft);  border-color: var(--bad-line); }
.badge-critical{ color: var(--crit); background: var(--bad-soft);  border-color: var(--bad-line); }
.badge-low     { color: var(--fg-3); }
.badge-accent  { color: var(--accent-2); background: var(--accent-soft); border-color: var(--accent-line); }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.mono-id {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.01em;
  color: var(--fg-3);
}

/* status pill with explicit dot color */
.spill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:540; color: var(--fg-2); }
.spill .sdot { width:7px; height:7px; border-radius:50%; flex:none; }
.spill.s-passed  { color: var(--ok);  } .spill.s-passed .sdot  { background: var(--ok);  box-shadow:0 0 0 3px var(--ok-soft); }
.spill.s-failed  { color: var(--bad); } .spill.s-failed .sdot  { background: var(--bad); box-shadow:0 0 0 3px var(--bad-soft); }
.spill.s-blocked { color: var(--warn);} .spill.s-blocked .sdot { background: var(--warn);box-shadow:0 0 0 3px var(--warn-soft); }
.spill.s-ready   { color: var(--fg-3);} .spill.s-ready .sdot   { background: var(--fg-4); }
.spill.s-running { color: var(--info);} .spill.s-running .sdot { background: var(--info); }

/* ============================================================================
   HERO — readiness gauge + journey + run summary
   ============================================================================ */
.hero {
  display: grid;
  grid-template-columns: 232px minmax(0,1fr);
  gap: 0;
  overflow: hidden;
}
.hero-gauge {
  position: relative;
  padding: 28px 22px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  background:
    radial-gradient(170px 130px at 50% 38%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 70%),
    var(--panel-inset);
}
.gauge-wrap { position: relative; width: 172px; height: 172px; }
/* soft outer glow halo behind the ring */
.gauge-wrap::before {
  content: ""; position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle at 50% 44%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 64%);
  filter: blur(9px); opacity: .7; pointer-events: none; z-index: 0;
}
.gauge-wrap svg { position: relative; z-index: 1; width: 172px; height: 172px; transform: rotate(-90deg); display: block; }
.gauge-track { fill: none; stroke: var(--track); stroke-width: 12; }
.gauge-arc {
  fill: none; stroke: url(#gaugeGrad); stroke-width: 12; stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--accent) 45%, transparent));
}
.gauge-center {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}
.gauge-num {
  font-size: 52px; font-weight: 680; letter-spacing: -0.045em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--accent-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--accent-2);
}
.gauge-denom { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-4); margin-top: 1px; }
.gauge-cap {
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-2); font-weight: 540;
}

.hero-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 20px; justify-content: center; }
.journey-block { display: flex; flex-direction: column; gap: 11px; }
.hero-journey-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.hero-journey-head h3 { font-size: 13.5px; color: var(--fg); font-weight: 560; letter-spacing: -0.015em; }
.hero-journey-head .gap-to-go { font-family:"JetBrains Mono",monospace; font-size:11.5px; color: var(--fg-3); white-space: nowrap; }
.hero-journey-head .gap-to-go b { color: var(--accent-2); font-weight: 600; }

.journey { position: relative; }
.journey-track {
  position: relative; height: 12px; border-radius: 7px;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.28), inset 0 0 0 1px var(--line);
  overflow: visible;
}
/* milestone ticks at 80 (review gate) and 100 (handoff) */
.journey-track::before,
.journey-track::after {
  content: ""; position: absolute; top: -3px; bottom: -3px; width: 1.5px;
  background: var(--line-strong); border-radius: 2px; z-index: 1;
}
.journey-track::before { left: 80%; background: var(--line-2); top: -2px; bottom: -2px; }
.journey-track::after  { left: 100%; transform: translateX(-1.5px); background: var(--accent-line); }
.journey-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 7px;
  background: var(--accent-grad);
  box-shadow: 0 0 12px -1px color-mix(in oklab, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255,255,255,0.22);
  width: 0; transition: width 1.1s cubic-bezier(.22,.61,.36,1);
}
.journey-now {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  z-index: 3; transition: left 1.1s cubic-bezier(.22,.61,.36,1);
}
.journey-now-dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent-grad);
  border: 3px solid var(--panel-inset);
  box-shadow: 0 0 0 1px var(--accent-line), 0 2px 8px -1px color-mix(in oklab, var(--accent) 70%, transparent);
}
.journey-scale {
  display: flex; justify-content: space-between; margin-top: 9px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-4);
  letter-spacing: 0.02em;
}
.journey-scale .js-end { color: var(--accent-2); }

/* run summary segmented bar */
.run-summary { display: flex; flex-direction: column; gap: 9px; }
.run-summary-head { display:flex; align-items:center; justify-content:space-between; }
.run-summary-head .section-label { margin: 0; }
.run-summary-head .runtotal { font-family:"JetBrains Mono",monospace; font-size:11px; color: var(--fg-3); }
.segbar {
  display: flex; height: 11px; border-radius: 7px; overflow: hidden; gap: 2px;
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.26), inset 0 0 0 1px var(--line);
}
.segbar > span { display:block; min-width: 3px; transition: flex-grow .9s cubic-bezier(.22,.61,.36,1); }
.seg-passed  { background: linear-gradient(180deg, color-mix(in oklab, white 16%, var(--ok)), var(--ok)); }
.seg-failed  { background: linear-gradient(180deg, color-mix(in oklab, white 14%, var(--bad)), var(--bad)); }
.seg-blocked { background: linear-gradient(180deg, color-mix(in oklab, white 14%, var(--warn)), var(--warn)); }
.seg-ready   { background: var(--fg-4); }
.seg-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.seg-legend span { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color: var(--fg-3); }
.seg-legend span b { color: var(--fg); font-weight:600; font-variant-numeric: tabular-nums; }
.seg-legend i { width:8px; height:8px; border-radius:3px; display:inline-block; }

/* ============================================================================
   METRIC STRIP
   ============================================================================ */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}
.metric-card {
  position: relative;
  background:
    var(--raise-grad),
    var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 16px 16px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), border-color .18s ease, box-shadow .18s ease;
}
.metric-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
}
.metric-top { display: flex; align-items: center; gap: 8px; }
.metric-top .mi { width: 15px; height: 15px; color: var(--fg-3); flex:none; }
.metric-top span { font-size: 11.5px; color: var(--fg-3); font-weight: 500; }
.metric-top .badge { margin-left: auto; }
.metric-value { font-size: 29px; font-weight: 680; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-value .unit { font-size: 14px; color: var(--fg-4); font-weight: 500; letter-spacing: -0.01em; }
.metric-top span { letter-spacing: 0.005em; }
.metric-card p { font-size: 11.5px; color: var(--fg-4); line-height: 1.45; }

/* ============================================================================
   CATEGORY COVERAGE — the centerpiece
   ============================================================================ */
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.cov-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 13px;
  background:
    var(--raise-grad),
    var(--panel-2);
  padding: 16px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 132px;
  box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), border-color .18s ease, box-shadow .18s ease;
}
/* anchor the meter + stats to the card base so equal-height grid rows never read as dead air */
.cov-bar { margin-top: auto; }
.cov-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
}
.cov-head { display: flex; align-items: center; gap: 11px; }
.cov-icon {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
    var(--accent-grad-soft);
  color: var(--accent-2);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 2px 6px -3px color-mix(in oklab, var(--accent) 55%, transparent);
}
.cov-icon svg { width: 17px; height: 17px; }
.cov-title { font-size: 13.5px; font-weight: 600; letter-spacing: -0.018em; }
.cov-scope { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-4); margin-top: 2px; letter-spacing: 0.02em; }
.cov-count { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.cov-count b { font-size: 30px; font-weight: 680; letter-spacing: -0.04em; line-height: 0.92; font-variant-numeric: tabular-nums; }
.cov-count span {
  font-family:"JetBrains Mono",monospace; font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-4); display:block;
}

.cov-bar {
  display: flex; height: 8px; border-radius: 6px; overflow: hidden; gap: 2px;
  background: color-mix(in oklab, var(--fg) 9%, transparent);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.28), inset 0 0 0 1px var(--line-2);
}
.cov-bar > span { display:block; transition: flex-grow .9s cubic-bezier(.22,.61,.36,1); }
.cov-bar .b-passed { background: linear-gradient(180deg, color-mix(in oklab, white 16%, var(--ok)), var(--ok)); }
.cov-bar .b-failed { background: linear-gradient(180deg, color-mix(in oklab, white 14%, var(--bad)), var(--bad)); }
.cov-bar .b-blocked{ background: linear-gradient(180deg, color-mix(in oklab, white 14%, var(--warn)), var(--warn)); }
.cov-bar .b-empty  { flex: 1; background: transparent; }

.cov-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.cov-tag {
  display:inline-flex; align-items:center; gap:6px;
  font-size: 11.5px; font-weight: 540; color: var(--fg-3);
  font-variant-numeric: tabular-nums; letter-spacing: -0.005em;
}
.cov-tag i { width:6px; height:6px; border-radius:50%; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 16%, transparent); }
.cov-tag.t-pass i { background: var(--ok); } .cov-tag.t-pass { color: var(--ok); }
.cov-tag.t-fail i { background: var(--bad); } .cov-tag.t-fail { color: var(--bad); }
.cov-tag.t-block i{ background: var(--warn);} .cov-tag.t-block{ color: var(--warn); }
.cov-empty {
  display: inline-flex; align-items: center; gap: 7px;
  font-family:"JetBrains Mono",monospace; font-size: 10px; letter-spacing: 0.04em;
  color: var(--fg-4);
}
.cov-empty::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: transparent; flex: none;
}
.cov-card.is-empty {
  background: var(--panel-inset);
  border-style: dashed; border-color: var(--line-2);
  box-shadow: none;
}
.cov-card.is-empty:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.cov-card.is-empty .cov-icon { background: var(--code-bg); color: var(--fg-4); border-color: var(--line-2); box-shadow: none; }
.cov-card.is-empty .cov-count b { color: var(--fg-4); }
.cov-card.is-empty .cov-bar { box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), inset 0 0 0 1px var(--line); }

/* ============================================================================
   TEST CARD LIST — dense, Linear-style, grouped by category
   ============================================================================ */
.cat-group { border-top: 1px solid var(--line); }
.cat-group:first-child { border-top: none; }
.cat-group-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  background: var(--panel-inset);
  position: sticky; top: 0;
}
.cat-group-head .cat-name {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3);
}
.cat-group-head .cat-mini-bar { display:flex; height:5px; width:64px; border-radius:4px; overflow:hidden; background: var(--track); gap:1px; margin-left:2px; }
.cat-group-head .cat-mini-bar > span { display:block; }
.cat-group-head .cat-meta { margin-left:auto; font-family:"JetBrains Mono",monospace; font-size:10.5px; color: var(--fg-4); }

.trow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
  transition: background .12s ease;
  cursor: default;
}
.cat-group-head + .trow { border-top: none; }
.trow:hover { background: color-mix(in oklab, var(--fg) 3%, transparent); }
.trow-status { padding-top: 2px; }
.trow-main { min-width: 0; }
.trow-idline { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.trow-title { font-size: 13px; font-weight: 540; color: var(--fg); line-height: 1.4; letter-spacing: -0.01em; }
.trow-accept {
  margin-top: 7px; font-size: 11.5px; color: var(--fg-3); line-height: 1.5;
  display: flex; gap: 8px;
}
.trow-accept .ac-label {
  font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:0.08em;
  text-transform:uppercase; color: var(--fg-4); padding-top:1px; flex:none;
}
.trow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; padding-top: 1px; }
.risk-chip {
  display:inline-flex; align-items:center; gap:5px;
  font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:0.04em; text-transform:uppercase;
  color: var(--fg-3);
}
.risk-chip i { width:6px; height:6px; border-radius:50%; }
.risk-chip.r-critical i, .risk-chip.r-critical { color: var(--crit); }
.risk-chip.r-critical i { background: var(--crit); }
.risk-chip.r-high i, .risk-chip.r-high { color: var(--bad); }
.risk-chip.r-high i { background: var(--bad); }
.risk-chip.r-medium i, .risk-chip.r-medium { color: var(--warn); }
.risk-chip.r-medium i { background: var(--warn); }
.risk-chip.r-low i { background: var(--fg-4); }
.exec-tag { font-family:"JetBrains Mono",monospace; font-size:10px; color: var(--fg-4); display:flex; align-items:center; gap:5px; }
.exec-tag.is-live { color: var(--ok); }

/* ============================================================================
   KV / RUNNER TRUTH / CODE BOXES
   ============================================================================ */
.kv-list { display: flex; flex-direction: column; }
.kv-list > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
}
.kv-list > div:first-child { border-top: none; }
.kv-list span { font-size: 11.5px; color: var(--fg-3); }
.kv-list strong { font-family: "JetBrains Mono", monospace; font-size: 11.5px; font-weight: 500; color: var(--fg-2); text-align: right; }
.kv-list .kv-ok { color: var(--ok); }

.code-box {
  display: flex; flex-direction: column; gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-inset);
}
.code-box > span { font-size: 10.5px; color: var(--fg-4); }
.code-box code, .codechip {
  font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--code-fg);
  word-break: break-all;
}
.contract-stack { display: flex; flex-direction: column; gap: 11px; padding: 16px; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.mini-grid > div {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  background: var(--panel-inset);
}
.mini-grid span { font-size: 10.5px; color: var(--fg-4); display: block; margin-bottom: 3px; }
.mini-grid strong { font-size: 12px; font-weight: 540; color: var(--fg-2); }
.tool-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-grid code {
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--code-fg);
  background: var(--code-bg); border: 1px solid var(--line);
  padding: 3px 7px; border-radius: 6px;
}

/* ============================================================================
   FINDINGS + REPAIR
   ============================================================================ */
.finding-list { display: flex; flex-direction: column; }
.finding-card {
  padding: 14px 16px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  transition: background .14s ease;
}
.finding-card:hover { background: color-mix(in oklab, var(--fg) 2.5%, transparent); }
.finding-card:first-child { border-top: none; }
.finding-card h3 { font-size: 12.5px; font-weight: 560; line-height: 1.4; letter-spacing: -0.01em; }
.finding-card p { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; }
.evidence-refs { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.evidence-refs .eref {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-3);
  background: var(--code-bg); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 6px;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.evidence-refs .eref span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-refs .eref svg { width: 11px; height: 11px; color: var(--fg-4); flex: none; }
.evidence-refs .eref:hover { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-grad-soft); }
.evidence-refs .eref:hover svg { color: var(--accent-2); }

.repair-panel { padding: 16px; display: flex; flex-direction: column; gap: 0; }
.repair-panel .panel-title-line { margin: -16px -16px 14px; }
.repair-meta-row { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.repair-panel h3 { font-size: 13px; font-weight: 560; line-height: 1.35; margin-bottom: 7px; }
.repair-panel > p { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; margin-bottom: 13px; }
.repair-box { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.repair-box > span, .verify-box > span {
  font-family:"JetBrains Mono",monospace; font-size: 9.5px; letter-spacing: 0.1em;
  /* fg-3 (not fg-4) for AA contrast on the elevated accent-soft background */
  text-transform: uppercase; color: var(--fg-3);
}
.repair-box code {
  font-family:"JetBrains Mono",monospace; font-size: 11px; color: var(--code-fg);
  background: var(--code-bg); border: 1px solid var(--line);
  padding: 6px 9px; border-radius: 7px; word-break: break-all;
}
.verify-box {
  display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--accent-line); border-radius: 9px;
  background: var(--accent-soft); padding: 10px 11px;
  position: relative;
}
.verify-box code {
  font-family:"JetBrains Mono",monospace; font-size: 11px; color: var(--fg);
  word-break: break-all; line-height: 1.5; padding-right: 18px;
}
.verify-box .vcaret { color: var(--accent-2); }

/* ============================================================================
   GENERIC CARD GRIDS (scorecard, flagship, models, providers, storage)
   ============================================================================ */
.card-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }

.tile {
  position: relative;
  border: 1px solid var(--line); border-radius: 13px;
  background:
    var(--raise-grad),
    var(--panel-2);
  padding: 15px 16px;
  display: flex; flex-direction: column; gap: 11px;
  box-shadow: var(--shadow);
  transition: transform .18s cubic-bezier(.22,.61,.36,1), border-color .18s ease, box-shadow .18s ease;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-hover);
}
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tile-top h3 { font-size: 13px; font-weight: 560; line-height: 1.35; letter-spacing: -0.015em; }
.tile-top .mono-id { display: block; margin-bottom: 3px; }
.tile-lede { font-size: 11.5px; color: var(--fg-2); line-height: 1.5; }
.tile-row { display: flex; flex-direction: column; gap: 3px; }
.tile-row > span {
  font-family:"JetBrains Mono",monospace; font-size: 9.5px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--fg-4);
}
.tile-row p { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; }
.tile-row code, .tile code {
  font-family:"JetBrains Mono",monospace; font-size: 11px; color: var(--code-fg);
}
.tile-divider { height: 1px; background: var(--line); margin: 1px 0; }
.tile-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile-split .tile-row code { color: var(--code-fg); background: var(--code-bg); border:1px solid var(--line); padding: 4px 7px; border-radius: 6px; display:inline-block; margin-top:2px; word-break: break-all;}

/* storage subsystem cards reuse .tile */
.storage-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.data-contract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.contract-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.contract-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.contract-row:first-child { border-top: none; }
.contract-row h3 { font-family:"JetBrains Mono",monospace; font-size: 12px; font-weight: 560; color: var(--fg); }
.contract-row p { font-size: 11px; color: var(--fg-3); margin-top: 3px; line-height: 1.45; }
.contract-row .contract-row-main { min-width: 0; }

/* ============================================================================
   PERSISTENCE
   ============================================================================ */
.persist-banner {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--panel-inset);
}
.persist-banner .pi { width: 18px; height: 18px; color: var(--fg-3); flex:none; }
.persist-banner .pb-text { font-size: 12px; color: var(--fg-2); }
.persist-banner .pb-text b { color: var(--fg); font-weight: 600; }
.persist-banner .pb-text p { font-size: 11px; color: var(--fg-4); margin-top: 2px; }
.persist-banner .badge { margin-left: auto; }

/* ============================================================================
   EMPTY STATE
   ============================================================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 26px; text-align: left;
  border: 1px dashed var(--line-2); border-radius: 12px; margin: 16px;
  background: var(--panel-inset);
}
.empty-state .es-icon {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-2); border: 1px solid var(--accent-line);
}
.empty-state .es-icon svg { width: 18px; height: 18px; }
.empty-state h3 { font-size: 13.5px; }
.empty-state p { font-size: 12px; color: var(--fg-3); line-height: 1.55; max-width: 60ch; }
.empty-state code {
  display: block; width: 100%;
  font-family:"JetBrains Mono",monospace; font-size: 11px; color: var(--code-fg);
  background: var(--code-bg); border: 1px solid var(--line);
  padding: 10px 12px; border-radius: 8px; word-break: break-all; line-height: 1.6;
}

/* ============================================================================
   MODALS
   ============================================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: flex-start; justify-content: center;
  padding: 7vh 20px 20px;
  background: color-mix(in oklab, #000 58%, transparent);
  backdrop-filter: blur(4px);
}
.modal-backdrop.open { display: flex; animation: backdropIn .16s ease; }
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 540px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px;
  box-shadow: var(--shadow-lift);
  padding: 22px; animation: modalIn .2s cubic-bezier(.22,.61,.36,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h2 { font-size: 16px; letter-spacing: -0.02em; }
.modal-close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2);
  background: transparent; color: var(--fg-3); cursor: pointer; display: grid; place-items: center;
  transition: background .14s ease, color .14s ease;
}
.modal-close svg { width: 15px; height: 15px; }
.modal-close:hover { background: color-mix(in oklab, var(--fg) 6%, transparent); color: var(--fg); }
.modal-sub { margin-top: 8px; font-size: 12.5px; color: var(--fg-3); line-height: 1.55; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-top: 15px; }
.form-field span { font-size: 11.5px; font-weight: 540; color: var(--fg-2); }
.form-field input {
  height: 38px; padding: 0 12px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--panel-inset);
  color: var(--fg); font-size: 13px; font-family: inherit;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.form-field input::placeholder { color: var(--fg-4); }
.form-field input:focus-visible { outline: none; border-color: var(--accent-line); box-shadow: var(--ring); }
.form-error {
  margin-top: 13px; padding: 9px 12px; border-radius: 8px;
  background: var(--bad-soft); border: 1px solid var(--bad-line); color: var(--bad);
  font-size: 12px;
}
.form-submit { width: 100%; height: 40px; margin-top: 18px; justify-content: center; }
.modal-step { display: flex; gap: 13px; margin-top: 17px; }
.modal-step-num {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  font-family:"JetBrains Mono",monospace; font-size: 11px; font-weight: 600;
  color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.modal-step h3 { font-size: 12.5px; font-weight: 560; margin-bottom: 4px; }
.modal-step p { font-size: 11.5px; color: var(--fg-3); line-height: 1.5; }
.modal-code {
  position: relative; display: block; margin-top: 8px;
  font-family:"JetBrains Mono",monospace; font-size: 11px; color: var(--code-fg);
  background: var(--code-bg); border: 1px solid var(--line);
  padding: 9px 11px; border-radius: 8px; word-break: break-all; line-height: 1.6;
}
.modal-copy {
  position: absolute; top: 6px; right: 6px;
  font-family: inherit; font-size: 10px; color: var(--fg-3);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px;
  padding: 3px 7px; cursor: pointer; transition: color .14s, border-color .14s;
}
.modal-copy:hover { color: var(--fg); border-color: var(--line-strong); }
.modal-note {
  margin-top: 18px; padding: 11px 13px; border-radius: 9px;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  font-size: 11.5px; color: color-mix(in oklab, var(--warn) 88%, var(--fg)); line-height: 1.55;
}

/* ============================================================================
   MOTION
   ============================================================================ */
.reveal { opacity: 0; transform: translateY(8px); }
.reveal.in-view {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-view] { animation: none; }
.view-enter { animation: viewEnter .26s cubic-bezier(.22,.61,.36,1); }
@keyframes viewEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .journey-fill, .segbar > span, .cov-bar > span { transition: none !important; }
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 1180px) {
  .content-grid { grid-template-columns: minmax(0,1fr); }
  .inspector { position: static; flex-direction: row; flex-wrap: wrap; }
  .inspector > * { flex: 1 1 320px; }
  .storage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 1024px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: sticky; top: 0; z-index: 40;
    height: auto; flex-direction: row; align-items: center; gap: 14px;
    padding: 10px 16px; overflow-x: auto;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .brand { padding: 0; }
  .nav-eyebrow, .rail-spacer, .runner-note { display: none; }
  .nav-list { flex-direction: row; gap: 2px; }
  .nav-item { white-space: nowrap; }
  .nav-item.nav-active::before { display: none; }
  .nav-item .nav-count { display: none; }
}
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 11px 16px; }
  .actions { width: 100%; flex-wrap: wrap; }
  .actions .btn-label-hide { display: none; }
  .canvas { padding: 16px 14px 56px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .coverage-grid { grid-template-columns: minmax(0,1fr); }
  .card-grid-2, .card-grid-3, .storage-grid, .data-contract-grid { grid-template-columns: minmax(0,1fr); }
  .hero { grid-template-columns: minmax(0,1fr); }
  .hero-gauge { border-right: none; border-bottom: 1px solid var(--line); }
  .tile-split, .mini-grid { grid-template-columns: 1fr; }
  .inspector { flex-direction: column; }
  .inspector > * { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .topbar { padding: 10px 12px; }
  .canvas { padding: 14px 11px 48px; }
  .title-row h1 { font-size: 14.5px; max-width: 30ch; }
  .trow { grid-template-columns: auto 1fr; }
  .trow-side { grid-column: 2; flex-direction: row; align-items: center; gap: 12px; }
  .metric-value { font-size: 22px; }
  .gauge-wrap, .gauge-wrap svg { width: 150px; height: 150px; }
  .btn { padding: 0 10px; }
}

/* Sample-data advisory — shown when the API serves seed/demo data (no Postgres)
   so placeholder values are never mistaken for a real audit. */
.sample-note {
  margin: 0 0 12px;
  padding: 9px 11px;
  border: 1px solid var(--warn-line);
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.005em;
}

/* ============================================================================
   METALLIC CHIPS + ICONS  — polished, shimmering, high-visibility
   Appearance-only layer. Re-themes the existing .badge / .spill / .cov-tag /
   .risk-chip / .exec-tag chips and the .cov-icon / .mi / nav icons as brushed,
   beveled metal with a slow diagonal glint and a semantic outer glow.
   Semantic metals: rose (fail/high/critical), gold (pending/ready/seeded/warn),
   emerald (passed/clean/connected/live), steel (neutral/info/surfaces/type).
   ============================================================================ */

/* ---- metal tokens : DARK ------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  /* bevel + sheen shared by every metal chip */
  --m-bevel:   inset 0 1px 0 rgba(255,255,255,0.58), inset 0 -1px 0 rgba(0,0,0,0.42), inset 0 -2px 4px rgba(0,0,0,0.18);
  --m-sheen:   linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.06) 46%, rgba(255,255,255,0) 52%);
  --m-streak:  linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 62%, transparent 100%);
  --m-txtsh:   0 1px 0 rgba(0,0,0,0.55);

  /* STEEL / silver (neutral, info, surfaces, type chips) */
  --steel-fill: linear-gradient(180deg, #f4f7fc 0%, #cfd6e1 24%, #a7b0bf 56%, #828c9d 82%, #6a7484 100%);
  --steel-edge: rgba(240,244,251,0.90);
  --steel-glow: rgba(176,190,214,0.55);
  --steel-ink:  #14181f;
  /* GOLD (pending / ready / seeded / warn / medium) */
  --gold-fill:  linear-gradient(180deg, #fff4c4 0%, #f8d45c 22%, #e3ad2c 52%, #b9831c 80%, #8f6314 100%);
  --gold-edge:  rgba(255,242,190,0.95);
  --gold-glow:  rgba(232,178,52,0.75);
  --gold-ink:   #3a2a05;
  /* ROSE / red metal (fail / high / critical) */
  --rose-fill:  linear-gradient(180deg, #ffd4d4 0%, #f58a8a 26%, #e0484c 60%, #a82327 100%);
  --rose-edge:  rgba(255,210,210,0.90);
  --rose-glow:  rgba(240,90,96,0.78);
  --rose-ink:   #3a0c0d;
  /* EMERALD metal (passed / clean / connected / live / success) */
  --emer-fill:  linear-gradient(180deg, #cfeede 0%, #66c79a 28%, #1f9d63 62%, #0f6e44 100%);
  --emer-edge:  rgba(207,238,222,0.90);
  --emer-glow:  rgba(46,201,138,0.72);
  --emer-ink:   #06301d;
  /* IRIS metal (accent chip) */
  --iris-fill:  linear-gradient(180deg, #d7d9ff 0%, #9aa0ff 30%, #7c83ff 62%, #5a52d6 100%);
  --iris-edge:  rgba(215,217,255,0.90);
  --iris-glow:  rgba(124,131,255,0.72);
  --iris-ink:   #11122e;

  /* machined tile for card icons */
  --tile-steel: linear-gradient(160deg, #f7f9fd 0%, #ccd4e0 32%, #9ba5b6 64%, #6e7889 100%);
  --tile-iris:  linear-gradient(160deg, #eceeff 0%, #b9bdff 32%, #8b91ff 64%, #6058da 100%);
  --tile-bevel: inset 0 1px 0 rgba(255,255,255,0.70), inset 0 -2px 3px rgba(0,0,0,0.34), inset 0 0 0 1px rgba(255,255,255,0.10);
  --tile-glyph: drop-shadow(0 1px 0 rgba(255,255,255,0.65)) drop-shadow(0 -1px 1px rgba(0,0,0,0.45));
}

/* ---- metal tokens : LIGHT (deeper inks, softer top highlight) ----------- */
:root[data-theme="light"] {
  --m-bevel:   inset 0 1px 0 rgba(255,255,255,0.70), inset 0 -1px 0 rgba(0,0,0,0.28);
  --m-sheen:   linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.10) 46%, rgba(255,255,255,0) 52%);
  --m-streak:  linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0.70) 50%, rgba(255,255,255,0) 62%, transparent 100%);
  --m-txtsh:   0 1px 0 rgba(255,255,255,0.45);

  --steel-fill: linear-gradient(180deg, #ffffff 0%, #d6dbe4 34%, #aeb6c4 68%, #8a93a3 100%);
  --steel-edge: rgba(255,255,255,0.95);
  --steel-glow: rgba(120,134,158,0.45);
  --steel-ink:  #1a1f27;
  --gold-fill:  linear-gradient(180deg, #fff7d6 0%, #f4cd56 26%, #d39d22 60%, #a3720f 100%);
  --gold-edge:  rgba(255,247,214,0.95);
  --gold-glow:  rgba(212,159,36,0.55);
  --gold-ink:   #4a3406;
  --rose-fill:  linear-gradient(180deg, #ffe3e3 0%, #f47e80 30%, #d83f43 66%, #9c2024 100%);
  --rose-edge:  rgba(255,227,227,0.95);
  --rose-glow:  rgba(216,63,67,0.55);
  --rose-ink:   #ffffff;
  --emer-fill:  linear-gradient(180deg, #dcf3e7 0%, #5bbd8e 30%, #1a9259 66%, #0c633d 100%);
  --emer-edge:  rgba(220,243,231,0.95);
  --emer-glow:  rgba(26,146,89,0.50);
  --emer-ink:   #ffffff;
  --iris-fill:  linear-gradient(180deg, #e7e8ff 0%, #9ea3ff 30%, #6b6fe6 66%, #4a4ec9 100%);
  --iris-edge:  rgba(231,232,255,0.95);
  --iris-glow:  rgba(91,95,224,0.50);
  --iris-ink:   #ffffff;

  --tile-steel: linear-gradient(160deg, #ffffff 0%, #d2d8e2 36%, #a7b0c0 68%, #828c9d 100%);
  --tile-iris:  linear-gradient(160deg, #f0f1ff 0%, #b9bdff 36%, #7d82f0 68%, #5256cf 100%);
  --tile-bevel: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 3px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(255,255,255,0.55);
  --tile-glyph: drop-shadow(0 1px 0 rgba(255,255,255,0.85)) drop-shadow(0 -1px 1px rgba(0,0,0,0.30));
}

/* ============================================================================
   1) BADGE PILLS  →  brushed metal
   ============================================================================ */
.badge {
  position: relative;
  isolation: isolate;
  height: 20px;
  padding: 0 9px;
  font-weight: 650;
  letter-spacing: 0;
  border-radius: 7px;
  color: var(--steel-ink);
  border: 1px solid var(--steel-edge);
  background: var(--steel-fill);
  box-shadow: var(--m-bevel), 0 0 10px -2px var(--steel-glow);
  text-shadow: var(--m-txtsh);
}
/* polished top-half reflection */
.badge::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--m-sheen);
  pointer-events: none;
  z-index: 1;
}
/* the dot becomes a beveled metal bead */
.badge::before {
  width: 6px; height: 6px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), currentColor 62%);
  box-shadow: 0 0 5px -1px currentColor, inset 0 0 2px rgba(0,0,0,0.35);
  opacity: 1;
  z-index: 2;
}
/* SHIMMER streak — slow diagonal glint */
.badge.no-dot::before { display: none; }
.metal-shimmer::before,
.badge::after { /* keep sheen above */ }

/* dedicated shimmer element via an extra layer on the pill */
.badge { }
.badge > * { position: relative; z-index: 2; }

/* ---- semantic metal mapping (override the flat tints) ---- */
.badge-muted   { color: var(--steel-ink); background: var(--steel-fill); border-color: var(--steel-edge); box-shadow: var(--m-bevel), 0 0 9px -3px var(--steel-glow); }
/* dotted muted = status words (seeded / pending / ready / none) -> warm GOLD metal */
.badge-muted:not(.no-dot) { color: var(--gold-ink); background: var(--gold-fill); border-color: var(--gold-edge); box-shadow: var(--m-bevel), 0 0 12px -2px var(--gold-glow); }
.badge-muted:not(.no-dot)::before { color: var(--gold-ink); }
.badge-low     { color: var(--steel-ink); background: var(--steel-fill); border-color: var(--steel-edge); box-shadow: var(--m-bevel), 0 0 9px -3px var(--steel-glow); }
.badge-info    { color: var(--steel-ink); background: var(--steel-fill); border-color: var(--steel-edge); box-shadow: var(--m-bevel), 0 0 10px -2px var(--steel-glow); }
.badge-success { color: var(--emer-ink);  background: var(--emer-fill);  border-color: var(--emer-edge);  box-shadow: var(--m-bevel), 0 0 11px -2px var(--emer-glow); }
.badge-medium  { color: var(--gold-ink);  background: var(--gold-fill);  border-color: var(--gold-edge);  box-shadow: var(--m-bevel), 0 0 12px -2px var(--gold-glow); }
.badge-high    { color: var(--rose-ink);  background: var(--rose-fill);  border-color: var(--rose-edge);  box-shadow: var(--m-bevel), 0 0 12px -2px var(--rose-glow); }
.badge-critical{ color: var(--rose-ink);  background: var(--rose-fill);  border-color: var(--rose-edge);  box-shadow: var(--m-bevel), 0 0 13px -1px var(--rose-glow); }
.badge-accent  { color: var(--iris-ink);  background: var(--iris-fill);  border-color: var(--iris-edge);  box-shadow: var(--m-bevel), 0 0 12px -2px var(--iris-glow); }

/* the dot uses an ink that reads on the metal */
.badge-success::before { color: var(--emer-ink); }
.badge-medium::before  { color: var(--gold-ink); }
.badge-high::before, .badge-critical::before { color: var(--rose-ink); }
.badge-accent::before  { color: var(--iris-ink); }
.badge-muted::before, .badge-low::before, .badge-info::before { color: var(--steel-ink); }

/* shimmer glint sweep — added as a third pseudo via an inserted span-free trick:
   we animate a wide translucent streak using the badge's own ::after? no — ::after is the
   static sheen. Use a separate keyframed background-position layer on a duplicated pseudo
   by promoting the streak onto the element's box via mask is complex; instead use an
   ::before-independent animated layer on .badge through background blend. We attach the
   moving streak to .badge with a second box-shadow-free overlay using `mask`-free approach: */
.badge {
  background-image: var(--m-streak), var(--steel-fill);
  background-repeat: no-repeat, no-repeat;
  background-size: 220% 100%, 100% 100%;
  background-position: -140% 0, 0 0;
  animation: metalGlint 4.2s ease-in-out infinite;
}
.badge-success { background-image: var(--m-streak), var(--emer-fill); }
.badge-medium  { background-image: var(--m-streak), var(--gold-fill); }
.badge-high,
.badge-critical{ background-image: var(--m-streak), var(--rose-fill); }
.badge-accent  { background-image: var(--m-streak), var(--iris-fill); }
.badge-low,
.badge-info    { background-image: var(--m-streak), var(--steel-fill); }
.badge-muted.no-dot { background-image: var(--m-streak), var(--steel-fill); }
.badge-muted:not(.no-dot) { background-image: var(--m-streak), var(--gold-fill); }

@keyframes metalGlint {
  0%   { background-position: -140% 0, 0 0; }
  60%  { background-position:  240% 0, 0 0; }
  100% { background-position:  240% 0, 0 0; }
}

/* ============================================================================
   2) SPILL status pills (passed/failed/blocked/ready/running)  →  metal pills
   ============================================================================ */
.spill {
  position: relative; isolation: isolate;
  height: 20px; padding: 0 10px 0 9px; border-radius: 7px;
  font-weight: 700; letter-spacing: 0.01em;
  color: var(--steel-ink);
  border: 1px solid var(--steel-edge);
  background-image: var(--m-streak), var(--steel-fill);
  background-repeat: no-repeat; background-size: 220% 100%, 100% 100%;
  background-position: -140% 0, 0 0;
  box-shadow: var(--m-bevel), 0 0 10px -3px var(--steel-glow);
  text-shadow: var(--m-txtsh);
  animation: metalGlint 4.6s ease-in-out infinite;
}
.spill::after { content:""; position:absolute; inset:0; border-radius:inherit; background: var(--m-sheen); pointer-events:none; z-index:1; }
.spill .sdot { position: relative; z-index: 2; width: 7px; height: 7px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), currentColor 64%) !important;
  box-shadow: 0 0 5px -1px currentColor, inset 0 0 2px rgba(0,0,0,0.4) !important; }
.spill > :not(.sdot) { position: relative; z-index: 2; }

.spill.s-passed  { color: var(--emer-ink); border-color: var(--emer-edge); background-image: var(--m-streak), var(--emer-fill); box-shadow: var(--m-bevel), 0 0 11px -2px var(--emer-glow); }
.spill.s-passed .sdot  { color: var(--emer-ink); }
.spill.s-failed  { color: var(--rose-ink); border-color: var(--rose-edge); background-image: var(--m-streak), var(--rose-fill); box-shadow: var(--m-bevel), 0 0 12px -2px var(--rose-glow); }
.spill.s-failed .sdot  { color: var(--rose-ink); }
.spill.s-blocked { color: var(--gold-ink); border-color: var(--gold-edge); background-image: var(--m-streak), var(--gold-fill); box-shadow: var(--m-bevel), 0 0 12px -2px var(--gold-glow); }
.spill.s-blocked .sdot { color: var(--gold-ink); }
.spill.s-ready   { color: var(--steel-ink); border-color: var(--steel-edge); background-image: var(--m-streak), var(--steel-fill); }
.spill.s-ready .sdot   { color: var(--steel-ink); }
.spill.s-running { color: var(--steel-ink); border-color: var(--steel-edge); background-image: var(--m-streak), var(--steel-fill); box-shadow: var(--m-bevel), 0 0 11px -2px var(--steel-glow); }
.spill.s-running .sdot { color: var(--steel-ink); }

/* ============================================================================
   3) COV-TAG (N pass / N fail / N blocked)  →  metal mini-pills
   ============================================================================ */
.cov-tag {
  position: relative; isolation: isolate;
  height: 19px; padding: 0 9px 0 8px; border-radius: 6px;
  font-weight: 700; gap: 5px;
  color: var(--steel-ink);
  border: 1px solid var(--steel-edge);
  background-image: var(--m-streak), var(--steel-fill);
  background-repeat: no-repeat; background-size: 220% 100%, 100% 100%;
  background-position: -140% 0, 0 0;
  box-shadow: var(--m-bevel), 0 0 9px -3px var(--steel-glow);
  text-shadow: var(--m-txtsh);
  animation: metalGlint 5s ease-in-out infinite;
}
.cov-tag::after { content:""; position:absolute; inset:0; border-radius:inherit; background: var(--m-sheen); pointer-events:none; z-index:1; }
.cov-tag i { position: relative; z-index: 2; width: 6px; height: 6px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), currentColor 64%) !important;
  box-shadow: 0 0 4px -1px currentColor, inset 0 0 2px rgba(0,0,0,0.4) !important; }
.cov-tag.t-pass  { color: var(--emer-ink); border-color: var(--emer-edge); background-image: var(--m-streak), var(--emer-fill); box-shadow: var(--m-bevel), 0 0 10px -2px var(--emer-glow); }
.cov-tag.t-pass i  { color: var(--emer-ink); }
.cov-tag.t-fail  { color: var(--rose-ink); border-color: var(--rose-edge); background-image: var(--m-streak), var(--rose-fill); box-shadow: var(--m-bevel), 0 0 11px -2px var(--rose-glow); }
.cov-tag.t-fail i  { color: var(--rose-ink); }
.cov-tag.t-block { color: var(--gold-ink); border-color: var(--gold-edge); background-image: var(--m-streak), var(--gold-fill); box-shadow: var(--m-bevel), 0 0 11px -2px var(--gold-glow); }
.cov-tag.t-block i { color: var(--gold-ink); }

/* ============================================================================
   4) RISK-CHIP (critical/high/medium/low) + EXEC-TAG (executed/not run)
   ============================================================================ */
.risk-chip {
  position: relative; isolation: isolate;
  height: 19px; padding: 0 9px 0 8px; border-radius: 6px;
  font-weight: 700; gap: 5px;
  color: var(--steel-ink);
  border: 1px solid var(--steel-edge);
  background-image: var(--m-streak), var(--steel-fill);
  background-repeat: no-repeat; background-size: 220% 100%, 100% 100%;
  background-position: -140% 0, 0 0;
  box-shadow: var(--m-bevel), 0 0 9px -3px var(--steel-glow);
  text-shadow: var(--m-txtsh);
  animation: metalGlint 4.8s ease-in-out infinite;
}
.risk-chip::after { content:""; position:absolute; inset:0; border-radius:inherit; background: var(--m-sheen); pointer-events:none; z-index:1; }
.risk-chip i { position: relative; z-index: 2; width: 6px; height: 6px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95), currentColor 64%) !important;
  box-shadow: 0 0 4px -1px currentColor, inset 0 0 2px rgba(0,0,0,0.4) !important; }
.risk-chip > :not(i) { position: relative; z-index: 2; }
.risk-chip.r-critical, .risk-chip.r-high { color: var(--rose-ink); border-color: var(--rose-edge); background-image: var(--m-streak), var(--rose-fill); box-shadow: var(--m-bevel), 0 0 11px -2px var(--rose-glow); }
.risk-chip.r-critical i, .risk-chip.r-high i { color: var(--rose-ink); }
.risk-chip.r-medium { color: var(--gold-ink); border-color: var(--gold-edge); background-image: var(--m-streak), var(--gold-fill); box-shadow: var(--m-bevel), 0 0 11px -2px var(--gold-glow); }
.risk-chip.r-medium i { color: var(--gold-ink); }
.risk-chip.r-low { color: var(--steel-ink); border-color: var(--steel-edge); background-image: var(--m-streak), var(--steel-fill); }
.risk-chip.r-low i { color: var(--steel-ink); }

.exec-tag {
  position: relative; isolation: isolate;
  height: 19px; padding: 0 9px; border-radius: 6px;
  font-weight: 700; gap: 5px;
  color: var(--steel-ink);
  border: 1px solid var(--steel-edge);
  background-image: var(--m-streak), var(--steel-fill);
  background-repeat: no-repeat; background-size: 220% 100%, 100% 100%;
  background-position: -140% 0, 0 0;
  box-shadow: var(--m-bevel), 0 0 8px -3px var(--steel-glow);
  text-shadow: var(--m-txtsh);
  animation: metalGlint 5.2s ease-in-out infinite;
}
.exec-tag::after { content:""; position:absolute; inset:0; border-radius:inherit; background: var(--m-sheen); pointer-events:none; z-index:1; }
.exec-tag svg, .exec-tag > * { position: relative; z-index: 2; }
.exec-tag.is-live { color: var(--emer-ink); border-color: var(--emer-edge); background-image: var(--m-streak), var(--emer-fill); box-shadow: var(--m-bevel), 0 0 10px -2px var(--emer-glow); }

/* ============================================================================
   5) CARD ICONS  →  machined metal tiles with bright beveled glyphs
   ============================================================================ */
/* coverage-card app icons */
.cov-icon {
  position: relative; overflow: hidden;
  border: 1px solid var(--iris-edge);
  background-image: var(--m-streak), var(--tile-iris);
  background-repeat: no-repeat; background-size: 220% 100%, 100% 100%;
  background-position: -160% 0, 0 0;
  box-shadow: var(--tile-bevel), 0 0 14px -4px var(--iris-glow), 0 3px 8px -4px rgba(0,0,0,0.5);
  animation: metalGlint 5.4s ease-in-out infinite;
}
.cov-icon::after { content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0.04) 48%, rgba(255,255,255,0) 54%);
  pointer-events:none; z-index:1; }
.cov-icon svg { position: relative; z-index: 2; color: #f7f8ff; filter: var(--tile-glyph); }

/* metric-tile icons (.mi) — give the bare glyph a small machined tile */
.metric-top .mi {
  width: 24px; height: 24px; padding: 4px; border-radius: 7px;
  color: #1b2027;
  border: 1px solid var(--steel-edge);
  background-image: var(--m-streak), var(--tile-steel);
  background-repeat: no-repeat; background-size: 220% 100%, 100% 100%;
  background-position: -160% 0, 0 0;
  box-shadow: var(--tile-bevel), 0 0 10px -4px var(--steel-glow), 0 2px 5px -3px rgba(0,0,0,0.5);
  filter: var(--tile-glyph);
  animation: metalGlint 5.6s ease-in-out infinite;
}

/* left-nav icons — metal tile, brighter when active */
.nav-item svg {
  width: 24px; height: 24px; padding: 4px; border-radius: 7px;
  opacity: 1;
  color: #1b2027;
  border: 1px solid var(--steel-edge);
  background: var(--tile-steel);
  box-shadow: var(--tile-bevel), 0 1px 3px -2px rgba(0,0,0,0.5);
  filter: var(--tile-glyph);
}
.nav-item:hover svg { box-shadow: var(--tile-bevel), 0 0 9px -3px var(--steel-glow), 0 1px 3px -2px rgba(0,0,0,0.5); }
.nav-item.nav-active svg {
  opacity: 1; color: #14152e;
  border-color: var(--iris-edge);
  background: var(--tile-iris);
  box-shadow: var(--tile-bevel), 0 0 12px -3px var(--iris-glow), 0 1px 3px -2px rgba(0,0,0,0.5);
}

/* empty-state icon also gets the steel treatment for consistency */
.empty-state .es-icon {
  position: relative; overflow: hidden;
  border: 1px solid var(--iris-edge);
  background: var(--tile-iris);
  box-shadow: var(--tile-bevel), 0 0 12px -4px var(--iris-glow);
}
.empty-state .es-icon svg { position: relative; z-index: 2; color: #f7f8ff; filter: var(--tile-glyph); }
/* empty coverage cards: keep them muted (no metal blast) */
.cov-card.is-empty .cov-icon {
  background: var(--code-bg); border-color: var(--line-2);
  box-shadow: none; animation: none;
}
.cov-card.is-empty .cov-icon::after { display: none; }
.cov-card.is-empty .cov-icon svg { color: var(--fg-4); filter: none; }

/* ============================================================================
   reduced-motion : freeze every shimmer (metal gradient/bevel/glow remain)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .badge, .spill, .cov-tag, .risk-chip, .exec-tag,
  .cov-icon, .metric-top .mi {
    animation: none !important;
    background-position: 50% 0, 0 0 !important;
  }
}

/* ============================================================================
   PREMIUM CARD SURFACES  — edges, corners, ambient colored glows, depth
   Appearance-only layer, built ON TOP of the metal-chip system.
   Adds: (1) a slow multi-hue AURORA behind the content area, (2) gradient
   hairline rims that catch light on the top edge + an inner definition ring,
   (3) per-card semantic colored glows keyed via :has(), (4) deeper layered
   shadows so raised cards read as backlit glass floating over the aurora.
   Everything degrades to static under prefers-reduced-motion.
   ============================================================================ */

/* ---- tokens : DARK ------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
  /* one consistent family of corner radii across cards */
  --r-panel: 16px;
  --r-card:  14px;

  /* gradient hairline rim — bright at the top edge, fading down the sides.
     Drawn on a pseudo via mask so it never fights the element's own border. */
  --rim: linear-gradient(180deg,
            rgba(255,255,255,0.46) 0%,
            rgba(255,255,255,0.16) 16%,
            rgba(255,255,255,0.04) 44%,
            rgba(255,255,255,0.02) 100%);
  /* a faint accent-tinted rim for the hero / accent cards */
  --rim-iris: linear-gradient(180deg,
            color-mix(in oklab, var(--accent-2) 55%, white) 0%,
            color-mix(in oklab, var(--accent) 38%, transparent) 22%,
            rgba(255,255,255,0.03) 52%,
            rgba(124,131,255,0.06) 100%);

  /* inner definition ring — subtle, requested verbatim */
  --inner-ring: inset 0 0 0 1px rgba(255,255,255,0.04);

  /* per-card ambient glow colors (soft, low-opacity outer pools) */
  --glow-iris:  rgba(124,131,255,0.31);
  --glow-violet:rgba(167,120,255,0.25);
  --glow-rose:  rgba(240,106,106,0.30);
  --glow-emer:  rgba(78,201,138,0.27);
  --glow-gold:  rgba(224,178,60,0.25);
  --glow-cool:  rgba(125,155,215,0.20);

  /* deepened elevation — backlit-glass feel over the aurora */
  --shadow-card:  var(--hi-top), var(--inner-ring), 0 1px 2px rgba(0,0,0,0.42), 0 16px 34px -18px rgba(0,0,0,0.72);
  --shadow-card-h:var(--hi-top-2), var(--inner-ring), 0 2px 6px rgba(0,0,0,0.5), 0 30px 60px -22px rgba(0,0,0,0.86);
  --shadow-panel: var(--hi-top), var(--inner-ring), 0 1px 2px rgba(0,0,0,0.4), 0 20px 46px -22px rgba(0,0,0,0.7);

  /* aurora pool opacity (dimmed under light theme) */
  --aurora-strength: 0.72;
}

/* ---- tokens : LIGHT (pastel wash, glows subtler) ------------------------ */
:root[data-theme="light"] {
  --rim: linear-gradient(180deg,
            rgba(255,255,255,1) 0%,
            rgba(255,255,255,0.7) 24%,
            rgba(24,24,27,0.05) 70%,
            rgba(24,24,27,0.07) 100%);
  --rim-iris: linear-gradient(180deg,
            color-mix(in oklab, var(--accent) 60%, white) 0%,
            color-mix(in oklab, var(--accent) 34%, white) 26%,
            rgba(24,24,27,0.05) 72%,
            rgba(91,95,224,0.10) 100%);

  --inner-ring: inset 0 0 0 1px rgba(255,255,255,0.6);

  --glow-iris:  rgba(91,95,224,0.24);
  --glow-violet:rgba(140,98,224,0.20);
  --glow-rose:  rgba(214,69,63,0.20);
  --glow-emer:  rgba(26,146,89,0.18);
  --glow-gold:  rgba(181,129,15,0.18);
  --glow-cool:  rgba(90,120,180,0.15);

  --shadow-card:  var(--hi-top), var(--inner-ring), 0 1px 2px rgba(24,24,27,0.06), 0 16px 34px -20px rgba(24,24,27,0.20);
  --shadow-card-h:var(--hi-top-2), var(--inner-ring), 0 2px 8px rgba(24,24,27,0.10), 0 26px 50px -22px rgba(24,24,27,0.26);
  --shadow-panel: var(--hi-top), var(--inner-ring), 0 1px 2px rgba(24,24,27,0.06), 0 18px 40px -24px rgba(24,24,27,0.18);

  --aurora-strength: 0.55;
}

/* ============================================================================
   AURORA — living multi-hue ambient behind the whole content area.
   Attached to .canvas via fixed pseudos so it sits under every card and the
   page is never flat black. Two drifting layers of soft colored pools.
   ============================================================================ */
.canvas { position: relative; isolation: isolate; }
.canvas::before,
.canvas::after {
  content: "";
  position: fixed;
  inset: -10vmax;
  z-index: -1;
  pointer-events: none;
  opacity: var(--aurora-strength);
  will-change: transform;
}
/* layer 1 — indigo / violet / teal pools, slow clockwise drift */
.canvas::before {
  background:
    radial-gradient(38vmax 30vmax at 16% 8%,  color-mix(in oklab, var(--accent) 26%, transparent), transparent 60%),
    radial-gradient(34vmax 28vmax at 88% 14%, rgba(167,120,255,0.20), transparent 62%),
    radial-gradient(40vmax 34vmax at 78% 92%, rgba(56,196,196,0.16), transparent 64%);
  filter: blur(36px) saturate(118%);
  animation: auroraDriftA 38s ease-in-out infinite alternate;
}
/* layer 2 — rose / amber pools, counter-drift, longer period for parallax */
.canvas::after {
  background:
    radial-gradient(32vmax 26vmax at 10% 88%, rgba(240,106,106,0.16), transparent 62%),
    radial-gradient(30vmax 24vmax at 64% 6%,  rgba(224,178,60,0.14), transparent 60%),
    radial-gradient(30vmax 30vmax at 50% 56%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 66%);
  filter: blur(44px) saturate(112%);
  animation: auroraDriftB 52s ease-in-out infinite alternate;
}
:root[data-theme="light"] .canvas::before { filter: blur(40px) saturate(135%); }
:root[data-theme="light"] .canvas::after  { filter: blur(48px) saturate(130%); }

@keyframes auroraDriftA {
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg)   scale(1.05); }
  50%  { transform: translate3d( 2%,  3%, 0) rotate(4deg)   scale(1.12); }
  100% { transform: translate3d( 4%, -1%, 0) rotate(-3deg)  scale(1.06); }
}
@keyframes auroraDriftB {
  0%   { transform: translate3d( 3%,  2%, 0) rotate(0deg)   scale(1.08); }
  50%  { transform: translate3d(-3%, -3%, 0) rotate(-5deg)  scale(1.15); }
  100% { transform: translate3d(-1%,  3%, 0) rotate(3deg)   scale(1.07); }
}

/* ============================================================================
   GRADIENT HAIRLINE RIM + INNER RING + DEPTH
   A masked ::before draws a 1px gradient border (brighter on top) on top of
   each card without removing its existing border. Cards become semi-translucent
   so the aurora glows through them like backlit glass.
   ============================================================================ */
.panel,
.metric-card,
.cov-card,
.tile {
  position: relative;
}
/* the rim ring */
.panel::after,
.metric-card::after,
.cov-card::after,
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--rim);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  opacity: 0.9;
  transition: opacity .2s ease, background .2s ease;
}

/* rounder, consistent corners + deeper shadow + translucent glass body */
.panel {
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel);
  background:
    var(--panel-grad),
    color-mix(in oklab, var(--panel) 88%, transparent);
  backdrop-filter: blur(7px) saturate(118%);
  -webkit-backdrop-filter: blur(7px) saturate(118%);
}
.metric-card,
.cov-card,
.tile {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  background:
    var(--raise-grad),
    color-mix(in oklab, var(--panel-2) 86%, transparent);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, border-color .2s ease;
}
:root[data-theme="light"] .panel {
  background: var(--panel-grad), color-mix(in oklab, var(--panel) 92%, transparent);
}
:root[data-theme="light"] .metric-card,
:root[data-theme="light"] .cov-card,
:root[data-theme="light"] .tile {
  background: var(--raise-grad), color-mix(in oklab, var(--panel-2) 90%, transparent);
}

/* hover: rim brightens, card lifts, shadow deepens */
.metric-card:hover,
.cov-card:hover,
.tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-h);
}
.metric-card:hover::after,
.cov-card:hover::after,
.tile:hover::after { opacity: 1; }

/* ============================================================================
   PER-CARD AMBIENT COLOR GLOW  — keyed to meaning via :has()
   A soft, low-opacity outer pool that sits just behind each card (a blurred
   ::before), intensifying on hover. Reads premium, never neon.
   ============================================================================ */
.metric-card::before,
.cov-card::before,
.tile::before,
.hero::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow .26s ease, opacity .26s ease;
}

/* default neutral cool glow for every raised card */
.metric-card,
.cov-card,
.tile { --card-glow: var(--glow-cool); }

/* semantic overrides via the chips each card already contains */
.cov-card:has(.cov-tag.t-fail)            { --card-glow: var(--glow-rose); }
.cov-card:has(.cov-tag.t-block):not(:has(.cov-tag.t-fail)) { --card-glow: var(--glow-gold); }
.cov-card:has(.cov-tag.t-pass):not(:has(.cov-tag.t-fail)):not(:has(.cov-tag.t-block)) { --card-glow: var(--glow-emer); }
.cov-card.is-empty                        { --card-glow: transparent; }

.metric-card:has(.badge-high),
.metric-card:has(.badge-critical)         { --card-glow: var(--glow-rose); }
.metric-card:has(.badge-success)          { --card-glow: var(--glow-emer); }
.metric-card:has(.badge-medium),
.metric-card:has(.badge-muted:not(.no-dot)) { --card-glow: var(--glow-gold); }
.metric-card:has(.badge-accent)           { --card-glow: var(--glow-iris); }

/* tiles default to a faint iris identity (scorecards / features / routes) */
.tile { --card-glow: var(--glow-iris); }

/* render the glow: a soft resting pool, stronger on hover.
   inset makes the pseudo slightly larger than the card so the blurred
   shadow spreads out from behind it on all sides. */
.metric-card::before,
.cov-card::before,
.tile::before {
  inset: 2px;
  box-shadow:
    0 10px 34px -6px var(--card-glow),
    0 2px 14px -4px var(--card-glow);
  opacity: .8;
}
.metric-card:hover::before,
.cov-card:hover::before,
.tile:hover::before {
  box-shadow:
    0 18px 52px -6px var(--card-glow),
    0 4px 22px -4px var(--card-glow),
    0 0 0 1px color-mix(in oklab, var(--card-glow) 55%, transparent);
  opacity: 1;
}
.cov-card.is-empty::before { box-shadow: none; opacity: 0; }

/* ============================================================================
   HERO — the centerpiece: indigo→violet accent glow + accent-tinted rim,
   gauge halo gets a touch more life.
   ============================================================================ */
.hero {
  border-radius: var(--r-panel);
  box-shadow:
    var(--hi-top-2), var(--inner-ring),
    0 1px 2px rgba(0,0,0,0.45),
    0 26px 60px -24px rgba(0,0,0,0.8),
    0 20px 64px -16px var(--glow-iris),
    0 30px 90px -24px var(--glow-violet);
  transition: box-shadow .3s ease;
}
.hero:hover {
  box-shadow:
    var(--hi-top-2), var(--inner-ring),
    0 1px 2px rgba(0,0,0,0.45),
    0 26px 60px -24px rgba(0,0,0,0.8),
    0 26px 80px -12px var(--glow-iris),
    0 38px 110px -22px var(--glow-violet);
}
.hero::after {            /* accent-tinted gradient rim */
  background: var(--rim-iris);
}
.hero::before { display: none; } /* hero glow lives on the element box-shadow (overflow:hidden clips pseudos) */
/* the gauge halo: warm it up slightly so the hero feels alive */
.hero-gauge {
  background:
    radial-gradient(180px 140px at 50% 36%, color-mix(in oklab, var(--accent) 17%, transparent), transparent 70%),
    radial-gradient(120px 120px at 50% 40%, rgba(167,120,255,0.10), transparent 72%),
    var(--panel-inset);
}

/* ============================================================================
   RIGHT-RAIL cards (Runner truth / Findings / Repair packet) read as panels.
   Give the repair (accent) panel an iris rim + glow; findings a faint rose
   when failures are present, runner-truth a cool neutral.
   ============================================================================ */
.inspector > .panel { position: relative; }
.inspector > .panel::before {
  content: "";
  position: absolute; inset: -1px; border-radius: inherit;
  z-index: -1; pointer-events: none;
  box-shadow: 0 10px 32px -14px var(--glow-cool);
  opacity: .5;
  transition: box-shadow .26s ease, opacity .26s ease;
}
.inspector > .panel:hover::before { box-shadow: 0 14px 40px -12px var(--glow-cool); opacity: .85; }

/* findings panel: rose tint when it holds high/critical findings */
.inspector > .panel:has(#findings-count.badge-high)::before,
.inspector > .panel:has(.badge-critical)::before { box-shadow: 0 10px 32px -14px var(--glow-rose); }

/* repair packet panel: iris identity + accent rim */
.repair-panel::after { background: var(--rim-iris); }
.inspector > .repair-panel::before { box-shadow: 0 12px 36px -12px var(--glow-iris); opacity: .65; }
.inspector > .repair-panel:hover::before { box-shadow: 0 16px 46px -10px var(--glow-iris); opacity: 1; }

/* ============================================================================
   LARGE MAIN-COLUMN PANELS (Category coverage, Test results, Context contract)
   — a whisper of cool ambient so the big containers feel alive over the aurora,
   warming to rose when they hold failures. Kept very soft (these are big).
   ============================================================================ */
.main-column > .panel:not(.hero) {
  position: relative;
}
.main-column > .panel:not(.hero)::before {
  content: "";
  position: absolute; inset: 2px; border-radius: inherit;
  z-index: -1; pointer-events: none;
  box-shadow: 0 16px 50px -22px var(--glow-cool);
  opacity: .6;
  transition: box-shadow .26s ease, opacity .26s ease;
}
.main-column > .panel:not(.hero):hover::before { opacity: .9; }
/* panels that surface failures (test rows / coverage with fails) get a faint rose lean */
.main-column > .panel:has(.cov-tag.t-fail)::before,
.main-column > .panel:has(.risk-chip.r-high)::before,
.main-column > .panel:has(.risk-chip.r-critical)::before,
.main-column > .panel:has(.spill.s-failed)::before {
  box-shadow: 0 16px 50px -22px color-mix(in oklab, var(--glow-rose) 70%, var(--glow-cool));
}

/* ============================================================================
   MOBILE — keep the aurora tasteful and prevent any overflow.
   ============================================================================ */
@media (max-width: 720px) {
  .canvas::before { filter: blur(30px) saturate(115%); opacity: calc(var(--aurora-strength) * 0.85); }
  .canvas::after  { filter: blur(36px) saturate(110%); opacity: calc(var(--aurora-strength) * 0.8); }
  /* lighter glass blur on mobile for perf */
  .panel, .metric-card, .cov-card, .tile { backdrop-filter: blur(4px) saturate(110%); -webkit-backdrop-filter: blur(4px) saturate(110%); }
}

/* ============================================================================
   reduced-motion : freeze the aurora (static colored ambience remains)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .canvas::before, .canvas::after { animation: none !important; }
}

/* ============================================================================
   RESULTS FEED — TEXT LEGIBILITY PASS
   Kills the "messy text": title leads, the id folds to a faint right-aligned
   tag (no wasted line), the description reads at a real contrast step, the
   mono "accept" glitch-prefix is removed, section headers become legible.
   Layout + typography only — the chips' metal sheen is left untouched.
   ============================================================================ */
.cat-group-head { padding: 15px 18px 9px; }
.cat-group-head .cat-name {
  font-size: 11px; letter-spacing: 0.085em; color: var(--fg-2); font-weight: 600;
}

.trow { padding: 15px 18px; column-gap: 14px; }

/* main column: a tidy two-line block →  [ title ............ id ]
                                          [ description            ] */
.trow-main {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title id" "desc desc";
  align-items: baseline; column-gap: 12px; row-gap: 0;
}
.trow-title {
  grid-area: title;
  font-size: 14px; font-weight: 580; color: var(--fg);
  line-height: 1.45; letter-spacing: -0.011em;
}
.trow-idline { grid-area: id; margin: 0; justify-self: end; flex-wrap: nowrap; }
.trow-idline .mono-id { font-size: 10.5px; color: var(--fg-4); }

/* description: one clean, readable line — no mono "accept" prefix */
.trow-accept {
  grid-area: desc; display: block; margin-top: 5px;
  font-size: 12px; line-height: 1.55; color: var(--fg-2); max-width: 66ch;
}
.trow-accept .ac-label { display: none; }

/* ============================================================================
   CRISP PASS — cut the stacked glow/blur so the UI reads sharp.
   (Boss feedback: the purple 100 gauge + cards looked blurry from glow.)
   Global, append-only — wins by being last in the cascade.
   ============================================================================ */
/* gauge: shrink the soft halo behind the number + tighten the arc so 100 is crisp */
.gauge-wrap::before { filter: blur(3px); opacity: .20; inset: 48px; }
.gauge-arc { filter: drop-shadow(0 0 2px color-mix(in oklab, var(--accent) 26%, transparent)); }

/* glass: drop most backdrop haze so card content + edges stay sharp */
.panel, .metric-card, .cov-card, .tile, .inspector > .panel {
  backdrop-filter: blur(2px) saturate(106%);
  -webkit-backdrop-filter: blur(2px) saturate(106%);
}

/* per-card colored auras: subtle at rest, gentle on hover (no blurry bloom) */
.metric-card::before, .cov-card::before, .tile::before {
  inset: 0;
  box-shadow: 0 6px 18px -8px var(--card-glow);
  opacity: .20;
}
.metric-card:hover::before, .cov-card:hover::before, .tile:hover::before {
  box-shadow: 0 10px 26px -8px var(--card-glow), 0 0 0 1px color-mix(in oklab, var(--card-glow) 38%, transparent);
  opacity: .48;
}
.cov-card.is-empty::before { box-shadow: none; opacity: 0; }

/* right-rail + main panels: trim the ambient glow halos */
.inspector > .panel::before { opacity: .26; }
.inspector > .panel:hover::before { opacity: .48; }
.main-column > .panel:not(.hero)::before { opacity: .28; }
.main-column > .panel:not(.hero):hover::before { opacity: .48; }

/* hero: tighten the big iris/violet bloom so its edges stay crisp */
.hero, .hero:hover {
  box-shadow:
    var(--hi-top-2), var(--inner-ring),
    0 1px 2px rgba(0,0,0,0.45),
    0 18px 44px -26px rgba(0,0,0,0.82),
    0 14px 38px -24px var(--glow-iris);
}

/* aurora: dial the ambient background glow down so nothing behind glass smears */
:root[data-theme="dark"]  { --aurora-strength: 0.40; }
:root[data-theme="light"] { --aurora-strength: 0.30; }


/* ============================================================================
   CATEGORY FILTER — click a coverage card to filter Test Results
   ============================================================================ */
.cov-card.is-clickable { cursor: pointer; }
.cov-card.is-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cov-card.is-active {
  border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 55%, transparent);
}
.tr-head-actions { display: inline-flex; align-items: center; gap: 10px; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 9px; }
.btn-sm svg { width: 13px; height: 13px; }


/* elite display font on headers, brand, and key numerals */
.brand-name,.gauge-num,.metric-value,.cov-title,.panel-heading h2,.hero-cap{font-family:"Space Grotesk","Inter",system-ui,sans-serif;}

/* 3D logo in sidebar brand */
.brand-mark{background:none!important;border:none!important;box-shadow:none!important;padding:0!important;width:auto!important;height:auto!important;}
.brand-mark img{height:30px;width:auto;display:block;}
/* ============================================================================
   LIVE RUN BANNER — streamed phase progress while a scan is in flight
   ============================================================================ */
.live-progress {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.live-progress[data-state="done"] { border-left-color: var(--ok); }
.live-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg);
}
.live-progress-row strong { font-weight: 600; }
.live-phase { color: var(--muted, rgba(244,244,245,0.62)); flex: 1; min-width: 0; }
.live-step { color: var(--muted, rgba(244,244,245,0.62)); font-variant-numeric: tabular-nums; }
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--accent);
}
.live-dot-on { animation: live-pulse 1.1s ease-in-out infinite; }
.live-dot-done { background: var(--ok); animation: none; }
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.live-bar {
  margin-top: 10px;
  height: 4px;
  border-radius: 3px;
  background: var(--track);
  overflow: hidden;
}
.live-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}
.live-progress[data-state="done"] .live-bar-fill { background: var(--ok); }
@media (prefers-reduced-motion: reduce) {
  .live-dot-on { animation: none; }
  .live-bar-fill { transition: none; }
}