/* ─────────────────────────────────────────────────────────────────────────
   status9.css — the public status page. Loads after site9.css and assumes its
   tokens, `.page-hero` and `.section`.

   Four states, and each one is a colour *and* a glyph. Hue alone would leave
   the page unreadable to the people most likely to be checking it in a hurry;
   status-page.ts pairs every state with a Remix icon for that reason, and the
   colours below only reinforce what the glyph already says.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --st-ok: var(--green);
  --st-degraded: #d9a441;
  --st-maintenance: var(--blue);
  --st-outage: #f2564d;
}
:root[data-theme="light"] {
  --st-degraded: #a9781c;
  --st-outage: #cf3227;
}

/* ─────────────── hero ─────────────── */

/* The summary line carries the state icon inline, so the heading has to be a
   flex row to keep the glyph on the first line's baseline rather than letting
   it sit alone above a wrapped title. */
.status-hero h1 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  max-width: 24ch;
}
.status-hero h1 i { font-size: .72em; }

.status-hero.operational h1 i { color: var(--st-ok); }
.status-hero.degraded h1 i { color: var(--st-degraded); }
.status-hero.maintenance h1 i { color: var(--st-maintenance); }
.status-hero.outage h1 i { color: var(--st-outage); }

/* ─────────────── component list ─────────────── */

/* One bordered block with divided rows, rather than a stack of separate cards:
   this is a list to be read straight down, and cards would put a gap and two
   borders between every pair of lines. */
.status-list {
  max-width: 860px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.status-row { padding: 22px clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--border); }
.status-row:last-child { border-bottom: 0; }

.status-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 8px;
}

.status-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--t3);
}
.status-dot.operational { background: var(--st-ok); }
.status-dot.degraded { background: var(--st-degraded); }
.status-dot.maintenance { background: var(--st-maintenance); }
.status-dot.outage { background: var(--st-outage); }

.status-name { font-size: 16px; font-weight: 600; color: var(--t1); }

/* `margin-left: auto` pushes the state label to the right edge of the row on a
   wide screen; when the row wraps on a phone it simply follows the name. */
.status-state {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-state.operational { color: var(--st-ok); }
.status-state.degraded { color: var(--st-degraded); }
.status-state.maintenance { color: var(--st-maintenance); }
.status-state.outage { color: var(--st-outage); }

.status-desc { font-size: 14.5px; line-height: 1.6; color: var(--t2); }

/* The automatic check's own words. Quieter than the description because it is
   machine output, and it is often the same sentence twice running. */
.status-detail {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--t3);
}

.status-foot {
  max-width: 860px;
  margin: clamp(24px, 4vw, 32px) auto 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--t3);
  text-align: center;
}
.status-foot a { color: var(--accent-ink); border-bottom: 1px solid var(--accent-deep); }
.status-foot time { font-family: var(--mono); font-size: 13px; }

@media (max-width: 560px) {
  /* The label stops being a right-aligned column once the row wraps — pinned
     right on its own line it reads as belonging to the next component. */
  .status-state { margin-left: 0; }
}