/* Paradigm Status — hybrid: Paradigm navy/amber chrome, neutral status body. */

:root {
  --navy: #0f1419;
  --panel: #1a2230;
  --rule: #2a3445;
  --amber: #f5a623;

  --bg: #f4f5f7;
  --card: #ffffff;
  --text: #1c2430;
  --muted: #66707e;
  --line: #dfe3e8;

  --ok: #1d8a50;
  --maint: #2563a8;
  --degraded: #b7791f;
  --partial: #d97706;
  --major: #c2382e;

  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; }

a { color: inherit; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Header */
.site-head {
  background: var(--navy);
  border-bottom: 2px solid var(--amber);
}
.head-row { display: flex; align-items: baseline; gap: 0.75rem; padding: 1.1rem 1.25rem; }
.wordmark img { display: block; }
.wordmark { align-self: center; }
.head-status {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  align-self: center;
}

/* Overall banner */
.banner {
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
}
.banner .wrap { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.8rem; padding-bottom: 0.8rem; }
.banner.ok       { background: var(--ok); }
.banner.maint    { background: var(--maint); }
.banner.degraded { background: var(--degraded); }
.banner.partial  { background: var(--partial); }
.banner.major    { background: var(--major); }
.banner .led { background: #fff; }

/* Sections */
main { padding: 2rem 1.25rem 3rem; }
section + section { margin-top: 2.5rem; }
h2 {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.h-sub { font-weight: 400; letter-spacing: 0.06em; text-transform: none; }

/* Datacenter tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "led code" "label label" "status status";
  align-items: center;
  column-gap: 0.55rem;
}
.tile .led { grid-area: led; }
.tile-code {
  grid-area: code;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}
.tile-label { grid-area: label; color: var(--muted); font-size: 0.82rem; margin-top: 0.35rem; }
.tile-status { grid-area: status; font-size: 0.82rem; font-weight: 600; margin-top: 0.1rem; }
.tile.ok .tile-status       { color: var(--ok); }
.tile.maint .tile-status    { color: var(--maint); }
.tile.degraded .tile-status { color: var(--degraded); }
.tile.partial .tile-status  { color: var(--partial); }
.tile.major .tile-status    { color: var(--major); }

/* LED */
.led {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
}
.tile.ok .led       { background: var(--ok); }
.tile.maint .led    { background: var(--maint); }
.tile.degraded .led { background: var(--degraded); animation: pulse 1.6s ease-in-out infinite; }
.tile.partial .led  { background: var(--partial); animation: pulse 1.6s ease-in-out infinite; }
.tile.major .led    { background: var(--major); animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .led { animation: none !important; }
}

/* Incidents */
.incident {
  background: var(--card);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  padding: 1rem 1.15rem;
}
.incident + .incident { margin-top: 0.9rem; }
.incident.impact-none        { border-left-color: var(--muted); }
.incident.impact-minor       { border-left-color: var(--degraded); }
.incident.impact-major       { border-left-color: var(--partial); }
.incident.impact-critical    { border-left-color: var(--major); }
.incident.impact-maintenance { border-left-color: var(--maint); }

.incident-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.incident-head h3 { font-size: 1rem; font-weight: 600; flex: 1; min-width: 12rem; }

.badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
}
.badge.impact-none        { background: var(--muted); }
.badge.impact-minor       { background: var(--degraded); }
.badge.impact-major       { background: var(--partial); }
.badge.impact-critical    { background: var(--major); }
.badge.impact-maintenance { background: var(--maint); }

.chips { display: inline-flex; gap: 0.3rem; }
.chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
}

.incident-meta { font-size: 0.82rem; color: var(--muted); margin-top: 0.4rem; }
.incident-meta time, .site-foot time { font-family: var(--mono); font-size: 0.78rem; }
.incident-body { margin-top: 0.6rem; font-size: 0.92rem; }

.timeline { margin-top: 0.7rem; }
.timeline summary { cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.timeline ul { list-style: none; padding: 0.6rem 0 0 0.9rem; border-left: 2px solid var(--line); margin-left: 0.2rem; }
.timeline li + li { margin-top: 0.75rem; }
.tl-status { font-weight: 600; font-size: 0.85rem; margin-right: 0.4rem; }
.timeline p { font-size: 0.88rem; margin-top: 0.15rem; }

.all-clear {
  background: var(--card);
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 1rem 1.15rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Footer */
.site-foot {
  background: var(--navy);
  color: #9aa5b4;
  font-size: 0.82rem;
  border-top: 2px solid var(--amber);
}
.site-foot .wrap { padding: 1.2rem 1.25rem; }
.site-foot a { color: #cdd5e0; }

@media (max-width: 480px) {
  .head-row { padding-left: 0; padding-right: 0; }
  main { padding-left: 0.25rem; padding-right: 0.25rem; }
}