/* DH-20 — the status page (status.<domain>). Served from its own bucket and
 * distribution (infra/status.tf), so it shares nothing with the app at run
 * time: its own Inter file (copied from static/fonts at upload), its own
 * tokens. Both themes follow the reader's system setting. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/fonts/inter-latin-var.woff2) format('woff2');
}

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6eb;
  --ink: #14171c;
  --ink-2: #5a626e;
  --ink-3: #8a919c;
  --ok: #16834a;
  --ok-soft: #e4f4ea;
  --warn: #9a5b00;
  --warn-soft: #fbefd9;
  --bad: #c0302b;
  --bad-soft: #fbe5e4;
  --unk: #5a626e;
  --unk-soft: #eceef1;
  --focus: #2f6fdf;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1114;
    --surface: #171a1f;
    --border: #2a2f37;
    --ink: #eef0f3;
    --ink-2: #a9b0ba;
    --ink-3: #7c8490;
    --ok: #4cc683;
    --ok-soft: #15291e;
    --warn: #f0b04a;
    --warn-soft: #2e2412;
    --bad: #f07a74;
    --bad-soft: #321a19;
    --unk: #a9b0ba;
    --unk-soft: #23272e;
    --focus: #7aa7ff;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 16px 48px;
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand__mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--ink);
}

.brand__name {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.brand__sub {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 1.125rem;
}

.head__link {
  color: var(--ink-2);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--surface);
}

.head__link:hover {
  color: var(--ink);
}

.head__link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ------------------------------------------------------------- the banner */

.banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  margin-bottom: 20px;
}

.banner__tile {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tile-bg, var(--unk-soft));
  color: var(--tile-ink, var(--unk));
}

.icon {
  display: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.banner__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.banner__detail {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.banner[data-state='operational'] {
  --tile-bg: var(--ok-soft);
  --tile-ink: var(--ok);
}
.banner[data-state='degraded'] {
  --tile-bg: var(--warn-soft);
  --tile-ink: var(--warn);
}
.banner[data-state='outage'] {
  --tile-bg: var(--bad-soft);
  --tile-ink: var(--bad);
}
.banner[data-state='operational'] .icon--operational,
.banner[data-state='degraded'] .icon--degraded,
.banner[data-state='outage'] .icon--outage,
.banner[data-state='unknown'] .icon--unknown,
.banner[data-state='loading'] .icon--unknown {
  display: block;
}

/* --------------------------------------------------------- the components */

.components {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.components:empty {
  display: none;
}

.component {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

.component:first-child {
  border-top: 0;
}

.component__name {
  font-weight: 500;
  min-width: 0;
}

.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--pill-bg, var(--unk-soft));
  color: var(--pill-ink, var(--unk));
}

.pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.component[data-state='operational'] {
  --pill-bg: var(--ok-soft);
  --pill-ink: var(--ok);
}
.component[data-state='degraded'] {
  --pill-bg: var(--warn-soft);
  --pill-ink: var(--warn);
}
.component[data-state='outage'] {
  --pill-bg: var(--bad-soft);
  --pill-ink: var(--bad);
}

/* ------------------------------------------------------- the uptime (DH-25) */

.uptime {
  margin-top: 20px;
  padding: 16px 20px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.uptime__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 12px;
}

.uptime__pct {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.uptime__window {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.uptime[data-state='none'] .uptime__pct {
  display: none;
}

/* One bar per UTC day, oldest first. Equal heights: the colour and the
 * title carry the number, so a day is never drawn bigger than it was. */
.uptime__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--days, 90), minmax(0, 1fr));
  gap: 1px;
  height: 28px;
}

.uptime__bars:empty {
  display: none;
}

.bar {
  border-radius: 1px;
  background: var(--border);
}

.bar[data-level='full'],
.bar[data-level='ok'] {
  background: var(--ok);
}
.bar[data-level='minor'] {
  background: var(--warn);
}
.bar[data-level='major'] {
  background: var(--bad);
}

.uptime__scale {
  display: flex;
  justify-content: space-between;
  margin: 6px 0 0;
  color: var(--ink-3);
  font-size: 0.75rem;
}

.uptime__bars:empty + .uptime__scale {
  display: none;
}

/* ------------------------------------------------------------- the footer */

.foot {
  margin-top: 20px;
  color: var(--ink-3);
  font-size: 0.8125rem;
}

.foot__updated {
  margin: 0 0 8px;
  color: var(--ink-2);
}

.foot__note {
  margin: 0;
  max-width: 56ch;
}

@media (max-width: 480px) {
  .page {
    padding-top: 20px;
  }
  .banner {
    padding: 16px;
  }
  .component {
    padding: 14px 16px;
  }
}