/* JarvisOS status console
   Dark-first operations UI. Mobile-first, high contrast, and never dependent on
   colour alone: every status also carries a glyph and a word. */

:root {
  --bg: #0b0f14;
  --bg-raised: #121821;
  --bg-sunken: #080b10;
  --border: #1f2937;
  --border-strong: #2d3a4d;
  --text: #e6edf5;
  --text-dim: #9aa8bb;
  --text-faint: #6b7a8f;

  --ok: #34d399;
  --ok-bg: #0d2a22;
  --degraded: #fbbf24;
  --degraded-bg: #2e2410;
  --down: #f87171;
  --down-bg: #33161a;
  --unknown: #94a3b8;
  --unknown-bg: #1a212b;
  --maintenance: #60a5fa;
  --maintenance-bg: #10233d;
  --accent: #7dd3fc;

  --radius: 10px;
  --radius-sm: 6px;
  --gap: 1rem;
  --maxw: 1200px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f7fa;
    --bg-raised: #ffffff;
    --bg-sunken: #eceff4;
    --border: #d8dee7;
    --border-strong: #b9c3d0;
    --text: #10161f;
    --text-dim: #4a5766;
    --text-faint: #6b7a8f;
    --ok: #047857;
    --ok-bg: #d9f5ea;
    --degraded: #92610a;
    --degraded-bg: #fdf0d5;
    --down: #b91c1c;
    --down-bg: #fbe0e0;
    --unknown: #52606f;
    --unknown-bg: #e6eaf0;
    --maintenance: #1d4ed8;
    --maintenance-bg: #dde7fd;
    --accent: #0369a1;
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: 0.98rem; }

code, pre { font-family: var(--mono); font-size: 0.86em; }
.pre {
  background: var(--bg-sunken); border: 1px solid var(--border);
  padding: 0.75rem; border-radius: var(--radius-sm); overflow-x: auto;
}
.muted { color: var(--text-dim); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--bg); padding: 0.6rem 1rem;
}
.skip:focus { left: 0; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); padding: 0.7rem 1rem;
}
.brand { display: flex; align-items: baseline; gap: 0.5rem; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand__dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--unknown);
  align-self: center; flex: none;
}
.brand__dot--ok { background: var(--ok); }
.brand__dot--degraded { background: var(--degraded); }
.brand__dot--down { background: var(--down); animation: pulse 1.6s ease-in-out infinite; }
.brand__dot--maintenance { background: var(--maintenance); }
.brand__name { font-weight: 700; letter-spacing: -0.02em; }
.brand__sub { color: var(--text-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }

.topbar__right { display: flex; align-items: center; gap: 0.6rem; }
.overall {
  font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.55rem;
  border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim);
  white-space: nowrap;
}
.overall--ok { color: var(--ok); border-color: var(--ok); }
.overall--degraded { color: var(--degraded); border-color: var(--degraded); }
.overall--down { color: var(--down); border-color: var(--down); background: var(--down-bg); }
.overall--maintenance { color: var(--maintenance); border-color: var(--maintenance); }

.refresh {
  background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim);
  border-radius: var(--radius-sm); width: 32px; height: 32px; font-size: 1rem;
  cursor: pointer; line-height: 1;
}
.refresh:hover { color: var(--text); border-color: var(--accent); }
.refresh[data-busy] { animation: spin 0.8s linear infinite; }

.nav {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; gap: 0.25rem; padding: 0 0.5rem 0.4rem;
  overflow-x: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav__item {
  padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--text-dim); font-size: 0.9rem; font-weight: 550; white-space: nowrap;
}
.nav__item:hover { color: var(--text); background: var(--bg-raised); text-decoration: none; }
.nav__item--active { color: var(--text); background: var(--bg-raised); box-shadow: inset 0 -2px 0 var(--accent); }

.offline-note {
  background: var(--degraded-bg); color: var(--degraded);
  border-bottom: 1px solid var(--degraded);
  padding: 0.5rem 1rem; text-align: center; font-size: 0.88rem; font-weight: 600;
}

.main { max-width: var(--maxw); margin: 0 auto; padding: 1rem; display: grid; gap: 1.25rem; }

/* ---------- Alarm ---------- */

.alarm {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.1rem; border-radius: var(--radius);
  border: 2px solid var(--degraded); background: var(--degraded-bg);
}
.alarm--down {
  border-color: var(--down); background: var(--down-bg);
  animation: alarm-glow 2.4s ease-in-out infinite;
}
.alarm__icon {
  font-size: 1.6rem; line-height: 1; flex: none;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid currentColor; color: var(--degraded);
}
.alarm--down .alarm__icon { color: var(--down); }
.alarm__body { flex: 1 1 260px; }
.alarm__title { font-size: 1.1rem; color: var(--degraded); letter-spacing: 0.01em; }
.alarm--down .alarm__title { color: var(--down); }
.alarm__lead { margin: 0.3rem 0 0; color: var(--text); font-size: 0.92rem; }
.alarm__action {
  flex: none; font-weight: 650; padding: 0.55rem 0.9rem; border-radius: var(--radius-sm);
  border: 1px solid currentColor; color: var(--degraded);
}
.alarm--down .alarm__action { color: var(--down); }
.alarm__action:hover { background: color-mix(in srgb, currentColor 15%, transparent); text-decoration: none; }

@keyframes alarm-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--down) 40%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--down) 0%, transparent); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- KPIs ---------- */

.kpis { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.kpi {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.85rem 0.95rem;
  display: grid; gap: 0.15rem; color: var(--text);
}
.kpi:hover { text-decoration: none; border-color: var(--border-strong); }
.kpi__label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.kpi__value { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; }
.kpi__sub { font-size: 0.8rem; color: var(--text-dim); }
.kpi--ok { border-left: 3px solid var(--ok); }
.kpi--warn { border-left: 3px solid var(--degraded); }
.kpi--crit { border-left: 3px solid var(--down); background: var(--down-bg); }

/* ---------- Panels ---------- */

.panel {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem;
}
.panel--warn { border-color: var(--degraded); }
.panel--calm { border-left: 3px solid var(--ok); }
.panel--lead { background: var(--bg-sunken); }
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.panel__hint { font-size: 0.8rem; color: var(--text-faint); }
/* A titled sub-section inside a panel — one capability's critical path, say. */
.panel__block { display: grid; gap: 0.4rem; padding: 0.7rem 0; border-top: 1px solid var(--border); }
.panel__block:first-of-type { border-top: 0; padding-top: 0; }
.panel__block h3 { margin: 0; font-size: 0.92rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
/* A row that is still true but not actionable yet — a blocked recovery action. */
.row--muted { opacity: 0.62; }

.group__head { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.group__blurb { font-size: 0.82rem; color: var(--text-faint); }

/* ---------- Status pills / tags ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.55rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 650; white-space: nowrap;
  border: 1px solid transparent;
}
.pill--sm { font-size: 0.72rem; padding: 0.15rem 0.45rem; }
.pill__glyph { font-size: 0.85em; }
.pill--ok { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.pill--degraded { color: var(--degraded); background: var(--degraded-bg); border-color: color-mix(in srgb, var(--degraded) 40%, transparent); }
.pill--down { color: var(--down); background: var(--down-bg); border-color: var(--down); }
.pill--unknown { color: var(--unknown); background: var(--unknown-bg); border-color: color-mix(in srgb, var(--unknown) 40%, transparent); }
.pill--maintenance { color: var(--maintenance); background: var(--maintenance-bg); border-color: color-mix(in srgb, var(--maintenance) 40%, transparent); }

.tag {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm);
  font-size: 0.7rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em;
  border: 1px solid var(--border-strong); color: var(--text-dim);
}
.tag--critical { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); }
.tag--important { color: var(--degraded); border-color: color-mix(in srgb, var(--degraded) 50%, transparent); }
.tag--root { color: var(--down); border-color: var(--down); background: var(--down-bg); }
.tag--downstream { color: var(--text-faint); }
.tag--crit { color: var(--down); border-color: var(--down); }
.tag--ext { color: var(--maintenance); border-color: color-mix(in srgb, var(--maintenance) 50%, transparent); }
.tag--ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.tag--warn { color: var(--degraded); border-color: color-mix(in srgb, var(--degraded) 50%, transparent); }

/* ---------- Entity grid ---------- */

.grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.card {
  display: grid; gap: 0.55rem; align-content: start;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-left: 3px solid var(--unknown);
  border-radius: var(--radius); padding: 0.85rem; color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-1px); }
.card--ok { border-left-color: var(--ok); }
.card--degraded { border-left-color: var(--degraded); }
.card--down { border-left-color: var(--down); background: var(--down-bg); }
.card--unknown { border-left-color: var(--unknown); }
.card--maintenance { border-left-color: var(--maintenance); }
.card--alarm { box-shadow: 0 0 0 1px color-mix(in srgb, var(--down) 35%, transparent); }

.card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.card__name { font-size: 0.98rem; }
.card__meta { font-size: 0.76rem; color: var(--text-faint); margin-top: 0.15rem; display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.card__reason {
  margin: 0; font-size: 0.84rem; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.75rem; color: var(--text-faint); }
.fact--failover { color: var(--maintenance); }
.fact--warn { color: var(--degraded); }
.fact--blast { color: var(--down); }

/* ---------- Triage ---------- */

.triage { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: t; }
.triage__item {
  border: 1px solid var(--border); border-left: 3px solid var(--unknown);
  border-radius: var(--radius); padding: 0.75rem; background: var(--bg-sunken);
}
.triage__item--down { border-left-color: var(--down); }
.triage__item--degraded { border-left-color: var(--degraded); }
.triage__item--unknown { border-left-color: var(--unknown); }
.triage__lead { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.triage__name { font-weight: 650; color: var(--text); }
.triage__reason { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--text-dim); }
.triage__first { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--text); border-left: 2px solid var(--accent); padding-left: 0.6rem; }
.triage__actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.triage__blast { font-size: 0.78rem; color: var(--down); }

.btn {
  display: inline-block; padding: 0.45rem 0.75rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); color: var(--text); font-size: 0.85rem; font-weight: 600;
}
.btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn--sm { padding: 0.28rem 0.55rem; font-size: 0.78rem; }
.btn--primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn--primary:hover { color: var(--bg); opacity: 0.9; }

/* ---------- Detail ---------- */

.crumbs { font-size: 0.82rem; color: var(--text-faint); display: flex; gap: 0.4rem; }

.detail-head {
  display: grid; gap: 1rem; padding: 1rem;
  background: var(--bg-raised); border: 1px solid var(--border);
  border-left: 3px solid var(--unknown); border-radius: var(--radius);
}
.detail-head--ok { border-left-color: var(--ok); }
.detail-head--degraded { border-left-color: var(--degraded); }
.detail-head--down { border-left-color: var(--down); }
.detail-head__title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.detail-head__desc { margin: 0.5rem 0 0; color: var(--text-dim); font-size: 0.92rem; max-width: 70ch; }
.detail-head__side { display: grid; gap: 0.6rem; align-content: start; }

@media (min-width: 800px) {
  .detail-head { grid-template-columns: 1fr 260px; }
}

.factgrid {
  display: grid; gap: 0.6rem 1.25rem; margin: 0.9rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.factgrid > div { display: grid; gap: 0.1rem; }

/* Two columns that collapse to one on a phone. Used for a pair of lists that
   are read against each other — what happens at warn, and what happens at
   crit — where side by side is the comparison and stacked is still readable. */
.grid2 {
  display: grid; gap: 0.6rem 1.5rem; margin: 0.9rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.grid2 h4 { margin: 0 0 0.35rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }

.factgrid dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.factgrid dd { margin: 0; font-size: 0.9rem; }

.reasons {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; background: var(--bg-raised);
}
.reasons--bad { border-color: var(--down); background: var(--down-bg); }
.reasons ul { margin: 0.6rem 0 0; padding-left: 0; list-style: none; display: grid; gap: 0.5rem; }
.reasons li { font-size: 0.9rem; }
.reasons__tag {
  display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 0.05rem 0.35rem; border-radius: 3px;
  background: var(--down); color: #fff; margin-right: 0.4rem;
}
.reasons__tag--dep { background: var(--degraded); color: #1a1206; }

.banner {
  margin: 0.75rem 0 0; padding: 0.7rem 0.85rem; border-radius: var(--radius-sm);
  font-size: 0.88rem; border: 1px solid var(--border-strong);
}
.banner--failover { border-color: var(--maintenance); background: var(--maintenance-bg); color: var(--maintenance); }
.banner--warn { border-color: var(--degraded); background: var(--degraded-bg); color: var(--degraded); }

/* ---------- Meters ---------- */

.meters { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.meter__head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; margin-bottom: 0.3rem; }
.meter__label { color: var(--text-dim); }
.meter__value { font-weight: 650; font-variant-numeric: tabular-nums; }
.meter__track {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--border); overflow: hidden;
}
.meter__fill { height: 100%; background: var(--ok); border-radius: 999px; }
.meter--warn .meter__fill { background: var(--degraded); }
.meter--crit .meter__fill { background: var(--down); }
.meter--unknown .meter__fill { background: var(--unknown); opacity: 0.3; }
.meter--warn .meter__value { color: var(--degraded); }
.meter--crit .meter__value { color: var(--down); }
.meter__tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--degraded); opacity: 0.6; }
.meter__tick--crit { background: var(--down); opacity: 0.8; }

/* ---------- Readiness ---------- */

.readiness {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem; background: var(--bg-sunken);
}
.readiness__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.35rem; }
.readiness__head strong { font-size: 1.1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.readiness__head .unit { font-size: 0.7rem; color: var(--text-faint); font-weight: 400; }
.readiness__track { height: 6px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.readiness__fill { height: 100%; background: var(--ok); }
.readiness--warn .readiness__fill { background: var(--degraded); }
.readiness--crit .readiness__fill { background: var(--down); }

.readiness-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.readiness-card {
  display: grid; gap: 0.6rem; padding: 0.85rem; color: var(--text);
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius);
}
.readiness-card:hover { text-decoration: none; border-color: var(--border-strong); }
.readiness-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

.factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.8rem; }
.factors--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); font-size: 0.86rem; }
.factor { display: flex; align-items: center; gap: 0.4rem; color: var(--text-dim); }
.factor--ok > span:first-child { color: var(--ok); }
.factor--bad { color: var(--text); }
.factor--bad > span:first-child { color: var(--down); }
.factor__weight { margin-left: auto; color: var(--text-faint); font-size: 0.75rem; }

/* ---------- Chips / lists / tables ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin-bottom: 0.6rem; }
.chips__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-right: 0.25rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.5rem; border-radius: 999px; font-size: 0.78rem;
  border: 1px solid var(--border-strong); color: var(--text-dim); background: var(--bg-sunken);
}
.chip:hover { text-decoration: none; border-color: var(--accent); }
.chip--ok { color: var(--ok); }
.chip--degraded { color: var(--degraded); border-color: color-mix(in srgb, var(--degraded) 45%, transparent); }
.chip--down { color: var(--down); border-color: var(--down); background: var(--down-bg); }
.chip--unknown { color: var(--unknown); }

.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.9rem; }

.runbook, .order { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.55rem; font-size: 0.92rem; }
.runbook li { padding-left: 0.2rem; }
.order { list-style: none; padding-left: 0; counter-reset: step; }
.order__item {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-left: 3px solid var(--unknown); border-radius: var(--radius-sm); font-size: 0.88rem;
}
.order__item::before {
  counter-increment: step; content: counter(step);
  font-variant-numeric: tabular-nums; color: var(--text-faint);
  font-size: 0.75rem; min-width: 1.2em;
}
.order__item--ok { border-left-color: var(--ok); }
.order__item--degraded { border-left-color: var(--degraded); }
.order__item--down { border-left-color: var(--down); }
.order__glyph { color: var(--text-dim); }
.order__item--down .order__glyph { color: var(--down); }
.order__item--degraded .order__glyph { color: var(--degraded); }
.order__item--ok .order__glyph { color: var(--ok); }
.order__kind { margin-left: auto; font-size: 0.72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.05em; }

.targets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.target {
  padding: 0.65rem 0.75rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); border: 1px solid var(--border); border-left: 3px solid var(--unknown);
}
.target--ok { border-left-color: var(--ok); }
.target--degraded { border-left-color: var(--degraded); }
.target--down { border-left-color: var(--down); }
.target__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.target__note { margin: 0.35rem 0 0; font-size: 0.83rem; color: var(--text-dim); }

.incidents { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.incident {
  padding: 0.65rem 0.75rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
}
.incident--open { border-left-color: var(--down); }
.incident--degraded.incident--open { border-left-color: var(--degraded); }
.incident__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.incident__id { font-family: var(--mono); font-size: 0.76rem; color: var(--text-faint); }
.incident__entity { font-weight: 650; color: var(--text); }
.incident__dur { margin-left: auto; font-size: 0.76rem; color: var(--text-faint); }
.incident__reason { margin: 0.35rem 0 0; font-size: 0.86rem; color: var(--text-dim); }
.incident__meta { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--down); }

.incident__meta {
  margin: 0.4rem 0 0; font-size: 0.75rem; color: var(--text-faint);
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
}
.incident__meta-root { color: var(--down); }
.incident__meta-dep { color: var(--degraded); }
.incident__meta-recur { color: var(--maintenance); }
.incident__task { margin-left: auto; font-weight: 650; }
.incident-children { list-style: none; padding: 0 0 0 1rem; border-left: 2px dashed var(--border-strong); }
.incident-children__label { margin: 0 0 0.4rem; font-size: 0.76rem; color: var(--text-faint); }

/* ---------- Incident priority + lifecycle ---------- */

.prio {
  display: inline-block; padding: 0.1rem 0.4rem; border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  border: 1px solid currentColor;
}
.prio--P1 { color: #fff; background: var(--down); border-color: var(--down); }
.prio--P2 { color: var(--down); background: var(--down-bg); }
.prio--P3 { color: var(--degraded); background: var(--degraded-bg); }
.prio--P4 { color: var(--text-dim); background: var(--bg-sunken); }

.phase {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.72rem; font-weight: 650; padding: 0.1rem 0.45rem;
  border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-dim);
}
.phase--mitigating { color: var(--maintenance); border-color: color-mix(in srgb, var(--maintenance) 50%, transparent); }
.phase--monitoring { color: var(--degraded); border-color: color-mix(in srgb, var(--degraded) 50%, transparent); }
.phase--resolved { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }

.phase-card {
  display: grid; gap: 0.15rem; padding: 0.6rem 0.7rem;
  background: var(--bg-sunken); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong); border-radius: var(--radius-sm);
}
.phase-card--open { border-left-color: var(--down); }
.phase-card--mitigating { border-left-color: var(--maintenance); }
.phase-card--monitoring { border-left-color: var(--degraded); }
.phase-card--resolved { border-left-color: var(--ok); }
.phase-card__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.phase-card__value { font-size: 1.05rem; }
.phase-card__hint { font-size: 0.76rem; color: var(--text-dim); }

/* ---------- Recovery task ---------- */

.faults { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.fault {
  display: grid; gap: 0.15rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
  background: var(--bg-raised); border-left: 3px solid var(--down);
}
.fault__label { font-weight: 650; font-size: 0.88rem; }
.fault__detail { font-size: 0.85rem; color: var(--text-dim); }

.task-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: dstep; }
.task-step {
  position: relative; padding: 0.7rem 0.75rem 0.7rem 2.4rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); border: 1px solid var(--border);
}
.task-step::before {
  counter-increment: dstep; content: counter(dstep);
  position: absolute; left: 0.7rem; top: 0.7rem;
  font-family: var(--mono); font-size: 0.78rem; color: var(--accent); font-weight: 700;
}
.task-step__title { display: block; font-size: 0.9rem; }
.task-step__detail { margin: 0.25rem 0 0; font-size: 0.86rem; color: var(--text-dim); }
.task-step__refs { margin: 0.45rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }

.autos { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; gap: 0.5rem; }
.auto {
  padding: 0.65rem 0.75rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
}
.auto--succeeded { border-left-color: var(--ok); }
.auto--failed { border-left-color: var(--down); }
.auto--in-progress { border-left-color: var(--maintenance); }
.auto--skipped, .auto--unknown { border-left-color: var(--degraded); }
.auto__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.auto__outcome { margin-left: auto; font-size: 0.76rem; font-weight: 650; color: var(--text-dim); }
.auto--succeeded .auto__outcome { color: var(--ok); }
.auto--failed .auto__outcome { color: var(--down); }
.auto__meta { margin: 0.3rem 0 0; font-size: 0.8rem; color: var(--text-dim); }
.tag--safety-safe { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.tag--safety-disruptive { color: var(--degraded); border-color: color-mix(in srgb, var(--degraded) 50%, transparent); }
.tag--safety-destructive { color: var(--down); border-color: var(--down); background: var(--down-bg); }
.tag--safety-unknown { color: var(--unknown); }

.manual--derived { color: var(--text); font-weight: 550; }
.manual--gap { color: var(--degraded); }

.closure { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.closure__item {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); border: 1px solid var(--border); font-size: 0.87rem;
}
.closure__item--met { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.closure__mark { font-weight: 700; color: var(--text-faint); }
.closure__item--met .closure__mark { color: var(--ok); }
.closure__item--unmet .closure__mark { color: var(--degraded); }
.closure__label { flex: 1 1 16rem; }
.closure__detail { flex-basis: 100%; font-size: 0.78rem; color: var(--text-faint); }

.linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.88rem; }
.linklist__item { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.timeline__item {
  display: grid; gap: 0.15rem 0.6rem; font-size: 0.84rem;
  grid-template-columns: 6rem 6.5rem 1fr; align-items: baseline;
  padding: 0.4rem 0.5rem; border-radius: var(--radius-sm); border-left: 2px solid var(--border-strong);
}
.timeline__item--opened, .timeline__item--recurred { border-left-color: var(--down); }
.timeline__item--remediation { border-left-color: var(--maintenance); }
.timeline__item--monitoring { border-left-color: var(--degraded); }
.timeline__item--resolved { border-left-color: var(--ok); }
.timeline__when { color: var(--text-faint); font-size: 0.76rem; }
.timeline__type {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-dim);
}
.timeline__what { color: var(--text); }

@media (max-width: 620px) {
  .timeline__item { grid-template-columns: 1fr; }
  .incident__task { margin-left: 0; }
}

.small { font-size: 0.8rem; }

.table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
.table th, .table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); }
.table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 650; }
.table tbody tr:last-child td { border-bottom: none; }

/* The availability tables are wide by nature — a class, two objectives and a
   redundancy model do not fold. Scroll them rather than shrink the type below
   what is readable on a phone at 3am. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .table { min-width: 44rem; }
.table-wrap .table td, .table-wrap .table th { white-space: nowrap; }
.table-wrap .table td:last-child { white-space: normal; min-width: 18rem; }

/* ---------- Availability classes ---------- */

.tag--tier-0 { color: var(--down); border-color: var(--down); }
.tag--tier-1 { color: var(--degraded); border-color: color-mix(in srgb, var(--degraded) 50%, transparent); }
.tag--tier-2 { color: var(--maintenance); border-color: color-mix(in srgb, var(--maintenance) 50%, transparent); }
.tag--tier-3 { color: var(--text-faint); }

/* Severity is carried by the left border, the glyph and the word — never by
   colour alone, same rule as every other status in this console. */
.fault--accepted { border-left-color: var(--degraded); }
.fault--note { border-left-color: var(--unknown); }
/* A fatal finding is a design that is wrong on its own terms rather than a risk
   somebody weighed, so it gets a heavier border than a gap. The word "Fatal"
   still leads the label — the border is the second signal, never the only one. */
.fault--crit { border-left-color: var(--down); border-left-width: 5px; }

/* ---------- Object storage ---------- */

/* Read outcomes for the object-store survival matrix. Every cell already
   carries a glyph and a word; these only reinforce them. "Partial" is
   deliberately not the same signal as "stale": one answer is old and complete,
   the other is current and incomplete, and an operator deciding whether to wait
   or to fail over needs to be able to tell those apart at a glance. */
.objout--served { color: var(--ok); }
.objout--stale { color: var(--degraded); }
.objout--degraded { color: var(--maintenance); background: var(--degraded-bg); }
.objout--lost { color: var(--down); background: var(--down-bg); }

/* ---------- Control plane ---------- */

/* The survival matrix. Every cell carries a glyph and a word as well as its
   colour: the whole point of the page is that it is readable under stress, and
   a grid of coloured squares is exactly the thing that is not. */
.matrix th[scope='row'] { white-space: normal; min-width: 12rem; text-transform: none; font-size: 0.85rem; color: var(--text); }
.table-wrap .matrix td:last-child { min-width: 0; }
.out { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); }
.out--serving { color: var(--ok); }
.out--failover { color: var(--ok); }
.out--degraded { color: var(--degraded); }
.out--manual { color: var(--maintenance); }
.out--break-glass { color: var(--degraded); background: var(--degraded-bg); }
.out--lost { color: var(--down); background: var(--down-bg); }

/* Data-resilience outcomes. Same rule as everywhere else: never colour alone —
   each cell carries a glyph and a word, and these only reinforce them. */
.out--writable { color: var(--ok); }
.out--read-only { color: var(--degraded); }
.out--manual-promotion { color: var(--maintenance); }
.out--restore-required { color: var(--degraded); background: var(--degraded-bg); }

/* A copy that is declared but not running protects nothing yet, and the table
   should not let it read like one that does. */
.row--planned th, .row--planned td { opacity: 0.62; }
.out__sec { display: block; font-weight: 400; font-size: 0.72rem; color: var(--text-faint); }

.panel__sub {
  margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
  display: grid; gap: 0.45rem;
}
.panel__sub h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); }
.plain--ordered { list-style: decimal; padding-left: 1.2rem; }
.plain--ordered li { padding-left: 0.2rem; }

/* ---------- Action card (the one human-only blocker) ---------- */

/* Distinct from .alarm on purpose: an alarm means something broke, this means
   something is waiting for a person. Same visual weight, different colour and
   a different glyph, so the two are never mistaken for each other at a glance. */
.action {
  border: 1px solid var(--maintenance); border-left: 4px solid var(--maintenance);
  background: var(--maintenance-bg); border-radius: var(--radius);
  padding: 1rem; margin-bottom: var(--gap); display: grid; gap: 0.55rem;
}
.action__head { display: flex; gap: 0.7rem; align-items: flex-start; }
.action__badge { font-size: 1.3rem; line-height: 1; color: var(--maintenance); }
.action__title { font-size: 1.05rem; color: var(--text); }
.action__meta { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--text-dim); }
.action__why { margin: 0; font-size: 0.9rem; color: var(--text); }
.action__blocks { margin: 0; font-size: 0.85rem; color: var(--text-dim); }
.action__block { display: grid; gap: 0.3rem; }
.action__block h3 {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
}
.action__block .pre { margin: 0; }
.action__foot { margin: 0.2rem 0 0; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* ---------- Worker slots ---------- */

.slots { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 0.6rem; }
.slots__figure {
  display: grid; place-items: center; min-width: 5.5rem; padding: 0.6rem 0.9rem;
  background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.slots__figure strong { font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.slots__figure span { font-size: 0.72rem; color: var(--text-faint); text-align: center; }
.slots__body { flex: 1 1 260px; display: grid; gap: 0.3rem; }
.slots__body p { margin: 0; font-size: 0.88rem; }

/* ---------- Footer ---------- */

.footer {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
  color: var(--text-faint); font-size: 0.78rem; border-top: 1px solid var(--border);
}
.footer p { margin: 0.2rem 0; }

@media (max-width: 420px) {
  .kpi__value { font-size: 1.35rem; }
  .main { padding: 0.75rem; }
  .alarm { padding: 0.85rem; }
}

@media print {
  .topbar, .footer, .refresh, .alarm__action { display: none; }
  body { background: #fff; color: #000; }
  .panel, .card, .detail-head { border: 1px solid #999; break-inside: avoid; }
}

/* ---------- Catalogue freshness ---------- */
/* Freshness is a value in its own right: a claim from a collector that last ran
   nine hours ago is not the same statement as one from a minute ago. Word and
   glyph carry it, colour only reinforces — same rule as every status here. */

.tag--fresh-fresh { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.tag--fresh-aging { color: var(--degraded); border-color: color-mix(in srgb, var(--degraded) 50%, transparent); }
.tag--fresh-stale { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); }
.tag--fresh-failed { color: var(--down); border-color: var(--down); }
.tag--fresh-missing { color: var(--unknown); }
.tag--fresh-unconfigured { color: var(--text-faint); }
.tag--fresh-unknown { color: var(--unknown); }

/* ---------- Burst compute ---------- */
/* Six axis columns of bare digits is a table nobody reads, so each score gets a
   bar. The number stays first and stays the signal: the bar is a second
   encoding of the same fact, never the only one, and it carries no colour. */
.burst-axis { white-space: nowrap; }
.burst-axis__n { font-variant-numeric: tabular-nums; font-weight: 600; }
.burst-axis__bar {
  display: inline-block; width: 2.2rem; height: 0.35rem; margin-left: 0.35rem;
  border-radius: 999px; background: var(--bg-sunken); overflow: hidden; vertical-align: middle;
}
.burst-axis__bar i { display: block; height: 100%; background: var(--text-faint); }

/* ---------- Outstanding requirements ---------- */
/* State here is not health, so it deliberately does not borrow the health
   palette wholesale: "open" is not a fault, it is a thing somebody has not done
   yet. Glyph and word carry the meaning; colour only separates the two states
   that behave differently — lapsed, which came back on its own, and closed. */
.tag--req-open { color: var(--degraded); border-color: color-mix(in srgb, var(--degraded) 50%, transparent); }
.tag--req-lapsed { color: var(--down); border-color: color-mix(in srgb, var(--down) 50%, transparent); }
.tag--req-unverifiable { color: var(--unknown); border-color: color-mix(in srgb, var(--unknown) 40%, transparent); }
.tag--req-waiting { color: var(--text-faint); }
.tag--req-satisfied { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }