/* ─────────────────────────────────────────────────────────────────────────
   The status page. Paper cards like the rest of the sketchbook theme.
   Every state is shown three ways - a color, an icon and a word - so it reads
   for color-blind visitors and for anyone who doesn't know what green means.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --st-ok: #3f8a3a;
  --st-ok-ink: #2a6326;
  --st-ok-tint: #e7f0dd;
  --st-warn: #d99a1e;
  --st-warn-ink: #7a5108;
  --st-warn-tint: #fbefd2;
  --st-down: #c0392b;
  --st-down-ink: #962414;
  --st-down-tint: #f8e1db;
  --st-none: #ddd3c4;
}

.status-main {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: 110px 16px 70px;
}

.st-card {
  width: min(820px, 100%);
  padding: 28px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--wobble-soft);
  box-shadow: 0 4px 14px -10px rgba(42, 32, 22, 0.24);
  color: var(--ink);
}

.st-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
}

.st-sub {
  margin: 6px 0 0;
  color: var(--ink-soft);
}

/* ── The answer ─────────────────────────────────────────────────────────── */

.st-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 34px 36px;
}

.st-hero[data-state="ok"] { background: var(--st-ok-tint); border-color: var(--st-ok-ink); }
.st-hero[data-state="degraded"] { background: var(--st-warn-tint); border-color: var(--st-warn-ink); }
.st-hero[data-state="down"] { background: var(--st-down-tint); border-color: var(--st-down-ink); }

.st-hero-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: #fff;
  background: var(--st-ok);
}

.st-hero[data-state="degraded"] .st-hero-icon { background: var(--st-warn); }
.st-hero[data-state="down"] .st-hero-icon { background: var(--st-down); }
.st-hero[data-state="unknown"] { background: var(--paper-deep); }
.st-hero[data-state="unknown"] .st-hero-icon { background: var(--ink-soft); }
.st-hero-icon svg { width: 38px; height: 38px; }

.st-kicker {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
}

.st-hero-title {
  margin: 0;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.1;
}

.st-hero-sub {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.5;
}

.st-hero-meta {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ── Happening now ──────────────────────────────────────────────────────── */

.st-now {
  border-width: 2px;
  border-color: var(--st-warn-ink);
}

.st-now[data-state="down"] { border-color: var(--st-down-ink); }

.st-now-label {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--st-warn-ink);
}

.st-now[data-state="down"] .st-now-label { color: var(--st-down-ink); }

/* ── Services ───────────────────────────────────────────────────────────── */

.st-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}

.st-range {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.st-range button {
  padding: 8px 14px;
  font: 600 14px var(--font-display);
  color: var(--ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.st-range button + button { border-left: 1px solid var(--line); }
.st-range button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.st-range button:focus-visible { outline: 3px solid var(--sanguine); outline-offset: -3px; }

.st-legend {
  margin: 18px 0 6px;
  padding: 14px 16px;
  background: var(--paper-deep);
  border-radius: 10px;
  font-size: 15px;
}

.st-legend p { margin: 0 0 10px; }
.st-legend ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-legend li { display: inline-flex; gap: 8px; align-items: center; }

/* Phones tap, mice point. */
.st-hover { display: none; }
@media (hover: hover) {
  .st-tap { display: none; }
  .st-hover { display: inline; }
}

.swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.swatch[data-state="ok"], .bar[data-state="ok"] { background: var(--st-ok); }
.swatch[data-state="degraded"], .bar[data-state="degraded"] { background: var(--st-warn); }
.swatch[data-state="down"], .bar[data-state="down"] { background: var(--st-down); }
.swatch[data-state="none"], .bar[data-state="none"] { background: var(--st-none); }

.st-services {
  margin: 0;
  padding: 0;
  list-style: none;
}

.svc {
  padding: 22px 0;
  border-bottom: 1px solid var(--pencil);
}

.svc-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.svc-name {
  margin: 0;
  font-size: 18px;
}

.svc-about {
  margin: 2px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.pill {
  display: inline-flex;
  flex: none;
  gap: 6px;
  align-items: center;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  font: 700 14px var(--font-display);
  white-space: nowrap;
}

.pill svg { width: 16px; height: 16px; }
.pill[data-state="ok"] { background: var(--st-ok-tint); color: var(--st-ok-ink); }
.pill[data-state="degraded"] { background: var(--st-warn-tint); color: var(--st-warn-ink); }
.pill[data-state="down"] { background: var(--st-down-tint); color: var(--st-down-ink); }
.pill[data-state="none"] { background: var(--paper-deep); color: var(--ink-soft); }

.st-hero-icon svg,
.pill svg,
.st-now svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bars {
  display: flex;
  gap: 2px;
  height: 36px;
  margin-top: 14px;
}

.bar {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  cursor: pointer;
}

.bar:hover,
.bar[aria-current="true"] {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.bars-axis {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}

.bars-axis strong { color: var(--ink); }

.svc-detail {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--paper-deep);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.5;
}

.st-how {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ── Help ───────────────────────────────────────────────────────────────── */

.st-help p { margin: 10px 0 0; }
.st-help ol { margin: 12px 0 0; padding-left: 22px; line-height: 1.6; }
.st-help li + li { margin-top: 8px; }
.st-help a { color: var(--sanguine); }

/* ── Past problems ──────────────────────────────────────────────────────── */

.inc {
  padding: 18px 0;
  border-bottom: 1px solid var(--pencil);
}

.inc:last-child { border-bottom: 0; }

.inc-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.inc-title {
  margin: 0;
  font-size: 18px;
}

.inc-meta {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
}

.inc-steps {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
}

.inc-steps li {
  position: relative;
  padding: 0 0 10px 20px;
}

/* A small timeline: a dot per update, joined by a line. */
.inc-steps li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
}

.inc-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  bottom: -2px;
  width: 2px;
  background: var(--pencil);
}

.inc-steps b { font-family: var(--font-display); }
.inc-steps time { color: var(--ink-soft); }

.st-empty {
  margin: 14px 0 0;
  font-size: 16px;
}

.st-more {
  margin-top: 14px;
  padding: 10px 18px;
  font: 600 15px var(--font-display);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

/* ── Phones ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .status-main { padding-top: 96px; gap: 16px; }
  .st-card { padding: 22px 18px; }
  .st-hero { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 20px; }
  .st-hero-icon { width: 52px; height: 52px; }
  .st-hero-icon svg { width: 30px; height: 30px; }
  .st-hero-sub { font-size: 17px; }
  .st-range { width: 100%; }
  .st-range button { flex: 1; }
  .svc-head, .inc-head { flex-direction: column; gap: 8px; }
  .bars { height: 32px; }
}