/* status.css — the fleet status page's one stylesheet. Same palette shape as
   the console's inline styles (CSS custom properties flipped by
   prefers-color-scheme — see internal/console/templates/layout.html), kept
   in its own small file here because this page ships from an embedded FS,
   not the console's template set, and the design spec calls for exactly one
   stylesheet, no frameworks. */

:root {
  --bg: #ffffff;
  --ink: #1d2029;
  --muted: #64707f;
  --accent: #0f5e85;
  --accent-soft: rgba(15, 94, 133, 0.09);
  --rule: #e7e9f0;
  --good: #2f7a4f;
  --bad: #b3403a;
  --warn: #a6790f;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14151c;
    --ink: #eef0f6;
    --muted: #93a4ba;
    --accent: #5db8dd;
    --accent-soft: rgba(93, 184, 221, 0.12);
    --rule: #2a2e38;
    --good: #6fbf8d;
    --bad: #e07b76;
    --warn: #e0b95c;
  }
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 0 1.25rem 3rem;
}

header.masthead {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.75rem 0 1rem;
  border-bottom: 1px solid var(--rule);
}
header.masthead h1 { font-size: 1.6rem; }
.generated { color: var(--muted); font-size: 0.85rem; margin-top: 0.35rem; }

main { max-width: 56rem; margin: 0 auto; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.75rem; }

.tiles { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.tile {
  flex: 1 1 10rem;
  background: var(--accent-soft);
  border-radius: 0.6rem;
  padding: 1rem 1.1rem;
}
.tile h2 {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.tile-value { font-size: 1.6rem; font-weight: 600; }
.tile-detail { color: var(--muted); font-size: 0.8rem; margin-top: 0.25rem; }

.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--rule); text-align: left; }
th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}

/* .chip-stale is deliberately bordered-only (no fill) per the design spec:
   staleness is a "trust this less" signal, not an outage — it should read
   as a flag on the row, not as loud as the up/down service chips. */
.chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin: 0.15rem 0.3rem 0.15rem 0;
}
.chip-stale { border: 1px solid var(--warn); color: var(--warn); }
.chip-up { background: var(--accent-soft); color: var(--good); }
.chip-down { background: var(--accent-soft); color: var(--bad); }
.chips { display: flex; flex-wrap: wrap; }

.small { color: var(--muted); font-size: 0.85rem; margin-top: 0.5rem; }

footer {
  max-width: 56rem;
  margin: 2.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.85rem;
}