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

:root {
  /* warm-paper dim — lighter than charcoal, sibling of dilmune.com dim cream
     2026-05-22: lifted L on bg layers + bumped muted text for readability */
  --bg:           oklch(0.24 0.014 70);
  --bg-elev:      oklch(0.28 0.016 70);
  --bg-row-hover: oklch(0.31 0.018 70);
  --border:       oklch(0.38 0.020 70);
  --border-soft:  oklch(0.33 0.017 70);

  --fg:           oklch(0.95 0.022 78);
  --fg-dim:       oklch(0.78 0.024 75);
  --fg-muted:     oklch(0.64 0.020 72);
  --fg-faint:     oklch(0.54 0.016 70);

  /* terracotta — echoes dilmune.com --primary oklch(0.56 0.18 30) lifted for dark
     2026-05-22: bumped chroma to push more of the dilmune red */
  --accent:       oklch(0.70 0.20 30);
  --accent-soft:  oklch(0.60 0.16 30);

  --ok:           oklch(0.76 0.15 145);
  --warn:         oklch(0.78 0.17 75);
  --err:          oklch(0.68 0.20 27);
  --info:         oklch(0.72 0.12 240);
  --unknown:      oklch(0.52 0.014 72);

  --ui:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --brand: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;

  --row-h: 28px;
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  min-height: 100vh;
  letter-spacing: 0;
}

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

::selection { background: var(--accent); color: var(--bg); }

/* ── Page ────────────────────────────────────────────────────────────────── */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 28px 96px;
}

@media (max-width: 640px) {
  .page { padding: 32px 20px 80px; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.brand {
  font-family: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--fg);
}
.brand-name { color: var(--accent); }
.brand-sep    { color: var(--fg-muted); margin: 0 6px; font-weight: 400; }
.brand-section{ color: var(--fg-dim); letter-spacing: 0.08em; }

.now {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 oklch(0.76 0.15 145 / 0.55);
  animation: pulse 2.4s ease-out infinite;
}
.pulse.pulse-degraded { background: var(--warn); box-shadow: 0 0 0 0 oklch(0.78 0.17 75 / 0.5); }
.pulse.pulse-outage   { background: var(--err);  box-shadow: 0 0 0 0 oklch(0.68 0.20 27 / 0.5); }
.pulse.pulse-stalled  { background: var(--fg-muted); animation: none; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(0.76 0.15 145 / 0.55); }
  70%  { box-shadow: 0 0 0 8px oklch(0.76 0.15 145 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.76 0.15 145 / 0); }
}

/* ── Overall line ────────────────────────────────────────────────────────── */

.overall {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.01em;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-soft);
}
#overall-state {
  color: var(--fg);
  font-weight: 500;
}
.overall-ok       #overall-state { color: var(--ok); }
.overall-degraded #overall-state { color: var(--warn); }
.overall-outage   #overall-state { color: var(--err); }
.overall-unknown  #overall-state { color: var(--fg-dim); }
.overall-loading  #overall-state { color: var(--fg-muted); }

.dot-sep        { color: var(--fg-muted); }
.dim            { color: var(--fg-dim); font-size: 12.5px; }
.overall-updated{ margin-left: auto; font-size: 11.5px; color: var(--fg-muted); }

/* ── Sections ────────────────────────────────────────────────────────────── */

.block { margin-bottom: 36px; }
.block.hidden, .hidden { display: none; }

.label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ── Component rows ──────────────────────────────────────────────────────── */

.rows {
  border-top: 1px solid var(--border-soft);
}
.row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 7px 4px;
  min-height: var(--row-h);
  font-family: var(--mono);
  font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.12s ease;
}
.row:hover { background: var(--bg-row-hover); }

.row-name {
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.row-name .dep-arrow {
  color: var(--fg-muted);
  font-size: 10.5px;
  font-weight: 400;
}
.row-name a.dep-link { color: var(--fg); }
.row-name a.dep-link:hover { color: var(--accent); }

.row-status {
  font-size: 12px;
  letter-spacing: 0.02em;
  min-width: 78px;
  text-align: left;
}
.row-status.s-ok       { color: var(--ok); }
.row-status.s-degraded { color: var(--warn); }
.row-status.s-outage   { color: var(--err); }
.row-status.s-maint    { color: var(--info); }
.row-status.s-unknown  { color: var(--fg-muted); }

.row-age {
  color: var(--fg-muted);
  font-size: 11.5px;
  min-width: 44px;
  text-align: right;
}

.row-hist {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  font-size: 13px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.row-hist .h { display: inline-block; }
.row-hist .h-ok       { color: var(--ok); }
.row-hist .h-degraded { color: var(--warn); }
.row-hist .h-outage   { color: var(--err); }
.row-hist .h-none     { color: var(--fg-faint); }

.row-meta {
  grid-column: 1 / -1;
  padding-left: 4px;
  font-size: 11px;
  color: var(--fg-muted);
}
.row-meta .pct { color: var(--fg-dim); }

.row-reasons {
  grid-column: 1 / -1;
  margin: 6px 0 2px 4px;
  padding: 6px 10px;
  border-left: 2px solid var(--warn);
  background: oklch(0.27 0.014 70);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.row-reasons .reason::before { content: "› "; color: var(--warn); }

@media (max-width: 540px) {
  .row { grid-template-columns: 1fr auto auto; gap: 12px; }
  .row-hist { display: none; }
}

/* ── Maintenance pills ───────────────────────────────────────────────────── */

.maint { margin: -16px 0 24px; }
.maint-pill {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--info);
  background: oklch(0.26 0.025 70 / 0.4);
  border-left: 2px solid var(--info);
  margin-bottom: 6px;
}
.maint-pill button {
  background: none; border: none; color: var(--fg-muted);
  cursor: pointer; font-size: 14px; line-height: 1;
}
.maint-pill button:hover { color: var(--fg); }

/* ── Active incident card ────────────────────────────────────────────────── */

.incident {
  border-left: 2px solid var(--warn);
  padding: 10px 0 10px 14px;
  margin-bottom: 14px;
}
.incident.impact-major     { border-left-color: var(--err); }
.incident.impact-minor     { border-left-color: var(--warn); }
.incident.impact-none      { border-left-color: var(--info); }
.incident.resolved         { border-left-color: var(--border); opacity: 0.85; }

.inc-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.inc-status {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--warn);
}
.incident.resolved .inc-status { color: var(--ok); }
.inc-title {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}
.inc-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  margin-top: 4px;
}

.inc-timeline { margin: 8px 0 4px; }
.upd {
  padding: 6px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12px;
}
.upd-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--fg-muted);
  margin-top: 7px;
}
.upd-resolved { background: var(--ok); }
.upd-monitoring, .upd-identified { background: var(--info); }
.upd-investigating { background: var(--warn); }
.upd-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--fg-dim);
  margin-right: 8px;
}
.upd-time { font-family: var(--mono); font-size: 11px; color: var(--fg-muted); }
.upd-text { font-family: var(--ui); color: var(--fg); margin-top: 2px; line-height: 1.5; }

.inc-expand-btn {
  background: none; border: none;
  font-family: var(--mono); font-size: 11px;
  color: var(--accent); cursor: pointer; padding: 4px 0;
}
.inc-expand-btn:hover { color: var(--fg); }

/* ── Incident history ────────────────────────────────────────────────────── */

.no-inc {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-muted);
  padding: 4px 0;
}

.day-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.day-row:last-child { border-bottom: 0; }
.day-label {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-dim);
  padding-top: 11px;
}
@media (max-width: 540px) {
  .day-row { grid-template-columns: 1fr; gap: 4px; }
  .day-label { padding-top: 0; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.foot {
  margin-top: 56px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-muted);
}
.foot a { color: var(--fg-muted); }
.foot a:hover { color: var(--accent); }
.cmd::before { content: ""; }

/* ── DCS platform card ───────────────────────────────────────────────────── */

.dcs-card {
  border: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 14px 16px;
  border-radius: 2px;
}

.dcs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dcs-status {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}
.dcs-status.s-ok       { color: var(--ok); }
.dcs-status.s-degraded { color: var(--warn); }
.dcs-status.s-outage   { color: var(--err); }
.dcs-status.s-unknown  { color: var(--fg-muted); }

.dcs-age {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
}

.dcs-issues {
  list-style: none;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 2px solid var(--warn);
  background: oklch(0.18 0.012 70);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-dim);
}
.dcs-issues li + li { margin-top: 4px; }

.dcs-issues-empty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 12px;
}

.dcs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 18px;
}

.dcs-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--mono);
}

.dcs-stat-k {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  color: var(--fg-muted);
}

.dcs-stat-v {
  font-size: 12.5px;
  color: var(--fg);
}