/*
 * ATPX Commercial — shared design system.
 * Used by every surface (Owner Console, Subscriber Console, Dashboard) so
 * the product reads as one thing built by one team. Refines the existing
 * dark palette/teal accent rather than replacing it — the goal is a
 * premium, quiet enterprise tool, not a redesign that fights what's
 * already shipped and familiar to whoever uses this daily.
 *
 * Token layers: color, type, space. Components below are built only from
 * these tokens - never a raw hex/px value in a component rule.
 */

:root {
  /* ---- color ---- */
  --bg: #0a0c0f;
  --panel: #12151a;
  --panel-raised: #171b21;
  --line: #232830;
  --line-strong: #626a73; /* WCAG: >=3:1 against both --bg and --panel - form/button borders are meaningful UI boundaries (1.4.11), not decorative */
  --text: #e8eaed;
  --text-muted: #8b93a1;
  --text-faint: #7c8793; /* WCAG: >=4.5:1 against --bg, --panel, AND --panel-raised (was #727c87, 4.31:1 against --panel and 4.20:1 against --panel-raised specifically - the more common real backgrounds this color renders on inside .card/.panel-raised - found via a real Playwright contrast scan 2026-08-16; the original fix was only verified against --bg) */
  --accent: #4fd1c5;
  --accent-strong: #3dbdb1;
  --accent-soft: #12302c;
  --ok: #4fd1c5;
  --ok-soft: #12302c;
  --warn: #f2a65a;
  --warn-soft: #332616;
  --bad: #e5697b;
  --bad-soft: #33181e;
  --focus-ring: rgba(79, 209, 197, 0.5);

  /* ---- data/intelligence accents (charts, KPI cards, stage pipelines) ----
     Additive to the semantic --ok/--warn/--bad/--accent set above, never a
     replacement - those are already contrast-verified for text/buttons/
     focus rings across every surface, and this finish-line pass must not
     regress that work. These four are for *data encoding* only (sparkline
     strokes, ring progress, stage-chip fills, icon tints on dark panel
     backgrounds) where a broader palette communicates category (savings vs.
     latency vs. cost vs. AI activity) the way the visual reference does -
     never used for body text at small sizes. */
  --data-blue: #5b9dff;
  --data-blue-soft: #16233d;
  --data-purple: #b18aff;
  --data-purple-soft: #241c3d;
  --data-orange: #f2a65a;
  --data-orange-soft: #332616;
  --data-green: #4fd1c5;
  --data-green-soft: #12302c;
  --data-red: #e5697b;

  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.5);
  --shadow-raised: 0 2px 4px rgba(0,0,0,0.5), 0 12px 32px -14px rgba(0,0,0,0.6);

  /* ---- type ---- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --leading: 1.5;

  /* ---- space (4px scale) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* iPhone standalone PWA: never let a stray wide element create horizontal scroll of the whole page - inner .tblwrap handles wide tables instead */
}

a { color: var(--accent); }
a:hover { color: var(--accent-strong); }

/* Visible keyboard focus everywhere, not just default browser outlines
   on some elements and nothing on others (Phase 6, accessibility). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--panel); color: var(--text); padding: var(--space-2) var(--space-4);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* ---- app shell ---- */

header.app-header {
  padding: var(--space-4) var(--space-6);
  padding-top: calc(var(--space-4) + env(safe-area-inset-top));
  padding-left: calc(var(--space-6) + env(safe-area-inset-left));
  padding-right: calc(var(--space-6) + env(safe-area-inset-right));
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
header.app-header h1 {
  font-size: var(--text-md); font-weight: 600; letter-spacing: 0.02em; margin: 0;
}
header.app-header .who {
  font-size: var(--text-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--space-3);
}

nav.app-nav {
  display: flex; gap: 2px;
  padding: 0 calc(var(--space-6) + env(safe-area-inset-right)) 0 calc(var(--space-6) + env(safe-area-inset-left));
  border-bottom: 1px solid var(--line); overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
nav.app-nav button {
  background: none; border: none; color: var(--text-muted);
  padding: var(--space-3) var(--space-4); font-size: var(--text-sm);
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap;
  min-height: 44px; /* Apple HIG minimum touch target */
}
nav.app-nav button.active { color: var(--text); border-bottom-color: var(--accent); }
nav.app-nav button:hover:not(.active) { color: var(--text); }
nav.app-nav .nav-group-label { display: none; } /* shown only in the sidebar layout below */

main.app-main {
  padding: var(--space-6);
  padding-left: calc(var(--space-6) + env(safe-area-inset-left));
  padding-right: calc(var(--space-6) + env(safe-area-inset-right));
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  max-width: 1240px; margin: 0 auto;
}

/* Wide viewports: a flat 10-20+ item horizontal tab bar (subscriber
   console has 21 sections, Owner Console 27) reads as an engineering
   tool, not a commercial product - real customer-experience audit
   finding, 2026-08-16. Left sidebar instead, grouped where the section
   list supplies group labels (subscriber.js's SECTIONS); ungrouped
   callers (console.js) still benefit from the vertical layout alone.
   Mobile keeps the existing horizontal-scroll tab bar unchanged below
   900px - already real-device verified, lower risk to touch. */
@media (min-width: 900px) {
  #appView {
    display: grid; grid-template-columns: 232px 1fr; grid-template-rows: auto 1fr;
    grid-template-areas: "header header" "nav main";
    align-items: start;
  }
  header.app-header { grid-area: header; }
  nav.app-nav {
    grid-area: nav; display: flex; flex-direction: column; align-items: stretch; gap: 1px;
    padding: var(--space-4) var(--space-3);
    padding-left: calc(var(--space-3) + env(safe-area-inset-left));
    border-bottom: none; border-right: 1px solid var(--line);
    overflow-x: visible; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  }
  nav.app-nav button {
    text-align: left; border-bottom: none; border-left: 2px solid transparent;
    border-radius: var(--radius-sm); padding: 8px 10px; min-height: 36px; white-space: normal;
  }
  nav.app-nav button.active { background: var(--panel-raised); border-left-color: var(--accent); }
  nav.app-nav button:hover:not(.active) { background: var(--panel); }
  nav.app-nav .nav-group-label {
    display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-faint); padding: var(--space-4) 10px var(--space-1);
  }
  nav.app-nav .nav-group-label:first-child { padding-top: var(--space-1); }
  main.app-main { grid-area: main; max-width: none; margin: 0; }
}

/* ---- cards / layout ---- */

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
}
.card h2 {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); margin: 0 0 var(--space-3); font-weight: 600;
}
.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.metric { font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.metric-label { color: var(--text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---- tables ---- */

.tblwrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
th {
  color: var(--text-muted); font-weight: 500; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.05em;
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
tr:last-child td { border-bottom: none; }

/* ---- pills / status ---- */

.pill {
  font-size: var(--text-xs); font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: var(--panel-raised); color: var(--text-muted); display: inline-flex;
  align-items: center; gap: 5px; white-space: nowrap; letter-spacing: 0.02em;
}
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.bad { color: var(--bad); background: var(--bad-soft); }

/* ---- buttons ----
   .btn on both <button> and <a>: the public site uses real <a href> links
   styled as buttons for navigation CTAs (Start free trial, Sign in, etc.) -
   a <button> can't navigate via href, and a JS-driven fake-navigation
   onclick would break "open in new tab"/right-click/no-JS. Scoping to
   button.btn only (as originally written) left every anchor-based CTA
   completely unstyled - found via live rendering, not by reading the CSS. */
button.btn, a.btn {
  background: var(--panel-raised); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-size: var(--text-sm);
  cursor: pointer; font-family: inherit; transition: border-color 0.12s ease;
  min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  box-sizing: border-box;
}
button.btn:hover:not(:disabled), a.btn:hover { border-color: var(--accent); color: var(--text); }
button.btn.danger:hover:not(:disabled), a.btn.danger:hover { border-color: var(--bad); color: var(--bad); }
button.btn.primary, a.btn.primary {
  background: var(--accent); color: #04201d; border-color: var(--accent); font-weight: 600;
}
button.btn.primary:hover:not(:disabled), a.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #04201d; }
button.btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- forms ----
   Real <label> elements paired 1:1 with inputs, not placeholder-only
   fields (a UX gap the project's own release audit flagged - a filled-in
   field with only a placeholder loses its description entirely). */

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); }
.field label { font-size: var(--text-sm); color: var(--text-muted); }
input, select, textarea {
  background: var(--bg); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); font-family: inherit;
}
form.inline { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; margin-top: var(--space-3); }
form.stacked { display: flex; flex-direction: column; gap: var(--space-1); max-width: 420px; }

/* ---- state banners (loading / empty / error) ---- */

.error-banner {
  background: var(--bad-soft); border: 1px solid var(--bad); color: var(--bad);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}
.ok-banner {
  background: var(--ok-soft); border: 1px solid var(--ok); color: var(--ok);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  font-size: var(--text-sm); word-break: break-all;
}
.empty {
  color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-6) 0;
  text-align: center;
}
.loading {
  color: var(--text-muted); font-size: var(--text-sm); padding: var(--space-6) 0;
  text-align: center; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
}
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--line-strong); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
code { background: var(--bg); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.9em; }
pre.small {
  font-size: var(--text-xs); color: var(--text-muted); background: var(--bg);
  padding: var(--space-2); border-radius: var(--radius-sm); max-height: 220px; overflow: auto;
  font-family: var(--font-mono); line-height: var(--leading);
}

/* ---- login shell ---- */

.login-wrap {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
  padding: calc(var(--space-4) + env(safe-area-inset-top)) calc(var(--space-4) + env(safe-area-inset-right)) calc(var(--space-4) + env(safe-area-inset-bottom)) calc(var(--space-4) + env(safe-area-inset-left));
}
.login-box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-8); width: 100%; max-width: 340px; }
.login-box h1 { font-size: var(--text-lg); margin: 0 0 var(--space-5); }
.login-box .field { margin-bottom: var(--space-3); }
.login-box input { width: 100%; }
.login-box button { width: 100%; margin-top: var(--space-5); padding: var(--space-3); }

/* ---- responsive ---- */

@media (max-width: 720px) {
  header.app-header { flex-wrap: wrap; }
  header.app-header h1 { font-size: var(--text-sm); }
  main.app-main {
    padding: var(--space-4);
    padding-left: calc(var(--space-4) + env(safe-area-inset-left));
    padding-right: calc(var(--space-4) + env(safe-area-inset-right));
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  }
  .grid { grid-template-columns: 1fr; }
  form.inline { flex-direction: column; align-items: stretch; }
  form.stacked { max-width: none; }
  /* 44px Apple HIG minimum tap target on every interactive control, not
     just nav buttons - the desktop sizes above are too small to reliably
     tap on a phone. */
  button.btn, input, select, textarea { min-height: 44px; font-size: 16px; }
  /* 16px input font-size also stops iOS Safari's automatic zoom-on-focus,
     which otherwise yanks the viewport every time a field is tapped. */
  th, td { padding: var(--space-2); font-size: var(--text-xs); }
  .card { padding: var(--space-3) var(--space-4); }
}

/* =====================================================================
   ATPX Finish-Line component set (2026-08-11)
   KPI cards, status rings, mission stage pipeline, evidence cards,
   approval decision panel, live-traffic panel. Built only from the
   tokens above - see shared/charts.js for the small inline-SVG helpers
   (sparkline/ring) these classes expect to contain.
   ===================================================================== */

/* ---- raised "glass" panel - used for hero/summary cards that need to
   read as one level higher than a plain .card (e.g. KPI row, health ring
   panel), never for routine list cards (keeps hierarchy meaningful
   instead of every panel fighting for the same visual weight) ---- */
.panel-raised {
  background: linear-gradient(180deg, var(--panel-raised) 0%, var(--panel) 100%);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* ---- KPI row ---- */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-4);
}
.kpi-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
}
.kpi-card .kpi-label {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--text-muted);
}
.kpi-card .kpi-icon {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.kpi-card .kpi-value {
  font-size: var(--text-2xl); font-weight: 700; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1;
}
.kpi-card .kpi-delta { font-size: var(--text-xs); font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.kpi-card .kpi-delta.up { color: var(--data-green); }
.kpi-card .kpi-delta.down { color: var(--data-red); }
.kpi-card .kpi-delta.flat { color: var(--text-muted); }
.kpi-card .kpi-spark { height: 32px; margin-top: var(--space-1); }
.kpi-card .kpi-unavailable {
  font-size: var(--text-xs); color: var(--text-faint); font-style: italic;
}

/* tint variants applied to .kpi-icon / .kpi-spark svg stroke via style attr
   using the --data-* tokens directly from JS - no separate class matrix
   needed since only two properties (bg tint, stroke colour) ever vary. */

/* ---- status ring (circular progress, e.g. health %, mission progress %) ---- */
.ring-wrap { display: flex; align-items: center; justify-content: center; position: relative; }
.ring-wrap svg { display: block; }
.ring-wrap .ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 2px;
}
.ring-wrap .ring-value { font-size: var(--text-2xl); font-weight: 700; font-family: var(--font-mono); }
.ring-wrap .ring-label { font-size: var(--text-xs); color: var(--text-muted); }

/* ---- mission stage pipeline ---- */
.stage-track {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin: var(--space-3) 0;
}
.stage-chip {
  font-size: var(--text-xs); padding: 5px 10px; border-radius: 999px;
  background: var(--panel-raised); color: var(--text-faint); border: 1px solid var(--line);
  white-space: nowrap; font-weight: 600; letter-spacing: 0.01em;
}
.stage-chip.done { background: var(--data-green-soft); color: var(--data-green); border-color: transparent; }
.stage-chip.current { background: var(--data-blue-soft); color: var(--data-blue); border-color: var(--data-blue); }
.stage-chip.pending { opacity: 0.55; }
.stage-connector { width: 12px; height: 1px; background: var(--line-strong); flex: none; }
.stage-connector.done { background: var(--data-green); }

/* ---- explain box: "what is ATPX doing and why" plain-language line
   required by the brainwork's experience principle - never raw enum
   values on their own ---- */
.explain-box {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--data-blue-soft); border: 1px solid rgba(91,157,255,0.35);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0; font-size: var(--text-sm); color: var(--text);
}
.explain-box .explain-icon { flex: none; color: var(--data-blue); font-size: 16px; line-height: 1.3; }

/* ---- evidence card: BEFORE / ACTION / AFTER / DELTA / CONFIDENCE ---- */
.evidence-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
}
.evidence-compare {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4);
  align-items: center; margin: var(--space-3) 0;
}
.evidence-compare .ev-before, .evidence-compare .ev-after { text-align: center; }
.evidence-compare .ev-arrow { color: var(--text-faint); font-size: var(--text-lg); }
.evidence-compare .ev-num { font-size: var(--text-xl); font-family: var(--font-mono); font-weight: 700; }
.evidence-compare .ev-num.before { color: var(--text-muted); }
.evidence-compare .ev-num.after { color: var(--data-green); }
.evidence-compare .ev-tag { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.evidence-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.evidence-meta .em-item { font-size: var(--text-xs); }
.evidence-meta .em-label { color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }
.evidence-meta .em-value { color: var(--text); font-size: var(--text-sm); margin-top: 2px; }
.evidence-badge { font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.evidence-badge.measured { background: var(--data-green-soft); color: var(--data-green); }
.evidence-badge.estimated { background: var(--data-orange-soft); color: var(--data-orange); }
.evidence-badge.unavailable { background: var(--panel-raised); color: var(--text-faint); }

/* ---- approval decision panel ---- */
.approval-panel {
  border: 1px solid var(--data-blue); background: var(--data-blue-soft);
  border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-3) 0;
}
.approval-panel h3 { margin: 0 0 var(--space-2); font-size: var(--text-md); }
.approval-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.approval-facts .af-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.approval-facts .af-value { font-size: var(--text-md); font-weight: 600; margin-top: 2px; }
.approval-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); }

/* ---- vertical timeline (mission log / audit trail) ---- */
.timeline { position: relative; margin: var(--space-3) 0; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 1px; background: var(--line); }
.timeline-item { position: relative; padding-bottom: var(--space-4); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ''; position: absolute; left: -22px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--data-blue); border: 2px solid var(--bg);
}
.timeline-item.done::before { background: var(--data-green); }
.timeline-item .ti-title { font-size: var(--text-sm); font-weight: 600; }
.timeline-item .ti-meta { font-size: var(--text-xs); color: var(--text-faint); margin-top: 1px; }

/* ---- live traffic / world panel container (map itself is inline SVG
   from charts.js; this just gives it the premium panel treatment plus a
   legend row layout matching the reference) ---- */
.traffic-panel { padding: 0; overflow: hidden; }
.traffic-panel .traffic-map-wrap {
  background: radial-gradient(ellipse at 50% 30%, #0f1830 0%, var(--bg) 70%);
  padding: var(--space-4);
}
.traffic-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); font-size: var(--text-xs); }
.traffic-legend .tl-item { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.traffic-legend .tl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* ---- section header (title + "View all" link, used above nearly every
   summary card list on Command Centre-style dashboards) ---- */
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.section-head h2 { margin: 0; }
.section-head a.view-all { font-size: var(--text-xs); color: var(--accent); text-decoration: none; }
.section-head a.view-all:hover { text-decoration: underline; }

/* ---- list rows used inside summary cards (missions/evidence/alerts) ---- */
.item-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
}
.item-row:last-child { border-bottom: none; }
.item-row .ir-main { min-width: 0; flex: 1; }
.item-row .ir-title { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-row .ir-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-row .ir-side { flex: none; text-align: right; font-size: var(--text-xs); color: var(--text-muted); }
.item-row.clickable { cursor: pointer; }
.item-row.clickable:hover { background: var(--panel-raised); margin: 0 calc(var(--space-2) * -1); padding-left: var(--space-2); padding-right: var(--space-2); border-radius: var(--radius-sm); }

/* progress bar used inside item rows for mission % complete */
.mini-bar { width: 100%; height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.mini-bar > span { display: block; height: 100%; background: var(--data-blue); border-radius: 999px; }

/* ---- breadcrumb / back-link for detail pages ---- */
.detail-back {
  display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted);
  font-size: var(--text-sm); text-decoration: none; margin-bottom: var(--space-4); cursor: pointer; background: none; border: none; padding: 0;
}
.detail-back:hover { color: var(--text); }

/* ---- Command Center (2026-09-22): live pulse indicator, generated<1s
   "this is really live" signal - respects reduced-motion. ---- */
@keyframes cc-pulse { 0% { box-shadow: 0 0 0 0 rgba(79,209,197,0.55); } 70% { box-shadow: 0 0 0 8px rgba(79,209,197,0); } 100% { box-shadow: 0 0 0 0 rgba(79,209,197,0); } }
.cc-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; animation: cc-pulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .cc-live-dot { animation: none; } }

/* ---- Command Center: domain capability grid - one tile per governed
   domain, built directly from GET /api/v1/capabilities. ---- */
.cc-domain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.cc-domain-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); cursor: pointer; transition: background 0.15s; text-align: left; }
.cc-domain-tile:hover, .cc-domain-tile:focus-visible { background: var(--panel-raised); }
.cc-domain-tile .cc-domain-name { font-size: var(--text-sm); font-weight: 600; }
.cc-domain-tile .cc-domain-count { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.cc-domain-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; flex: none; }

/* ---- Command Center: live cross-domain activity feed row ---- */
.cc-activity-row { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.cc-activity-row:last-child { border-bottom: none; }
.cc-activity-icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; font-size: 13px; background: var(--panel-raised); }
.cc-activity-main { min-width: 0; flex: 1; }
.cc-activity-title { font-size: var(--text-sm); font-weight: 600; }
.cc-activity-detail { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.cc-activity-meta { font-size: var(--text-xs); color: var(--text-faint); margin-top: 3px; font-family: var(--font-mono); word-break: break-all; }
.cc-activity-time { font-size: var(--text-xs); color: var(--text-muted); flex: none; white-space: nowrap; }

@media (max-width: 720px) {
  .evidence-compare { grid-template-columns: 1fr; text-align: left; }
  .evidence-compare .ev-arrow { display: none; }
  .approval-facts { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-card .kpi-value { font-size: var(--text-xl); }
  .cc-domain-grid { grid-template-columns: repeat(2, 1fr); }
}