/* ============================================================
   10-status — system status page.
   Every selector scoped to .sts*  ·  every value resolves to a token.

   Status colour is derived, never authored: the palette has no
   semantic green/amber/red, so each state is mixed from an existing
   accent toward --c-navy until it clears 4.5:1 on white for text and
   3:1 for the day markers. That keeps the page inside the token set
   and inside WCAG at the same time.
   ============================================================ */

.sts-hero,
.sts-comp,
.sts-inc,
.sts-sub {
  /* text-weight ink for pills and labels */
  --sts-ok:      color-mix(in srgb, var(--c-lime) 38%, var(--c-navy));
  --sts-deg:     color-mix(in srgb, var(--c-orange) 48%, var(--c-navy));
  --sts-out:     color-mix(in srgb, var(--c-magenta) 48%, var(--c-navy));
  /* marker weight: lighter, still ≥3:1 as a non-text graphic */
  --sts-ok-bar:  color-mix(in srgb, var(--c-lime) 55%, var(--c-navy));
  --sts-deg-bar: color-mix(in srgb, var(--c-orange) 62%, var(--c-navy));
  --sts-out-bar: color-mix(in srgb, var(--c-magenta) 58%, var(--c-navy));
  /* pill wash */
  --sts-ok-wash:  color-mix(in srgb, var(--sts-ok) 9%, var(--c-white));
  --sts-deg-wash: color-mix(in srgb, var(--sts-deg) 10%, var(--c-white));
  --sts-out-wash: color-mix(in srgb, var(--sts-out) 9%, var(--c-white));
  --sts-hairline: var(--c-hairline);
}

/* ============================================================
   1. Banner
   The nav sits transparent over this block with a negative flow
   height, so the hero owns the clearance the bar needs.
   ============================================================ */

.sts-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--s-13) + var(--s-2)) var(--s-12);
  background: var(--surface-dark);
  color: var(--text-invert-body);
}

.sts-hero__bg {
  position: absolute;
  inset: -30% -10% -40%;
  z-index: -1;
  background:
    radial-gradient(40% 52% at 14% 24%, color-mix(in srgb, var(--c-lime) 22%, transparent), transparent 70%),
    radial-gradient(38% 48% at 84% 14%, color-mix(in srgb, var(--c-brand) 34%, transparent), transparent 72%),
    radial-gradient(46% 56% at 60% 92%, color-mix(in srgb, var(--c-cyan) 16%, transparent), transparent 74%),
    var(--grad-dark);
}

/* Same 1.6° foot the catalog hero uses, so the page family reads. */
.sts-hero::after {
  content: "";
  position: absolute;
  inset-inline: -2%;
  bottom: calc(var(--s-8) * -1);
  height: var(--s-11);
  background: var(--surface);
  transform: rotate(-1.6deg);
  transform-origin: bottom left;
}

.sts-hero__inner { position: relative; z-index: 1; }

.sts-hero__eyebrow { color: var(--c-teal); }

/* The beacon aligns to the first line of the headline, not to the block:
   centring a 48px disc against a two-line 60px title parks it in the
   leading, which reads as a mistake. --s-2 is half the difference between
   the first line box (60px × 1.08) and the disc. */
.sts-hero__headline {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  margin-block-start: var(--s-5);
}
.sts-hero__beacon { margin-block-start: var(--s-2); }

.sts-hero__t {
  font-size: var(--fs-h1);
  color: var(--text-invert);
  max-width: 16ch;
}

/* The beacon: a static ring plus one slow pulse. Two seconds of ease-out
   every four, so it is felt in peripheral vision and never watched. */
.sts-hero__beacon {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s-9);
  height: var(--s-9);
  border-radius: var(--r-pill);
  color: var(--c-lime);
  background: color-mix(in srgb, var(--c-lime) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-lime) 34%, transparent);
}

.sts-hero__beacon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-lime) 50%, transparent);
  animation: sts-pulse 4s var(--ease-out) infinite;
}

@keyframes sts-pulse {
  0%       { transform: scale(1);    opacity: .75; }
  55%, 100%{ transform: scale(1.75); opacity: 0;   }
}

.sts-hero__check { width: var(--s-6); height: var(--s-6); }

.sts-hero__meta {
  margin-block-start: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text-invert-body);
}

.sts-hero__time {
  color: var(--text-invert);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.sts-hero__note {
  max-width: 66ch;
  margin-block-start: var(--s-7);
  padding: var(--s-5) var(--s-6);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-white) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-white) 16%, transparent);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-invert-body);
}
.sts-hero__note strong { color: var(--text-invert); font-weight: var(--fw-semi); }

.sts-hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  margin-block-start: var(--s-8);
}
.sts-hero__link { color: var(--c-teal); }
.sts-hero__link:hover { color: var(--c-lime); }

/* ============================================================
   2. Components
   ============================================================ */

.sts-comp__head { max-width: 60ch; }
.sts-comp__h { font-size: var(--fs-h2); }
.sts-comp__sub {
  margin-block-start: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.sts-comp__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-7);
  margin-block: var(--s-9) var(--s-5);
  padding-block-end: var(--s-4);
}

.sts-comp__keys { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); }

.sts-comp__key {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-body);
}

.sts-swatch {
  width: var(--s-1);
  height: var(--s-4);
  border-radius: 1px;
  background: var(--sts-ok-bar);
}
.sts-swatch.is-deg { background: var(--sts-deg-bar); }
.sts-swatch.is-out { background: var(--sts-out-bar); }

.sts-comp__scale {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  flex: 1 1 14rem;
  max-width: 26rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  white-space: nowrap;
}
.sts-comp__rule {
  flex: 1 1 auto;
  min-width: var(--s-6);
  height: 1px;
  background: var(--sts-hairline);
}

.sts-comp__list { border-block-start: 1px solid var(--sts-hairline); }

.sts-comp__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "id   up"
    "pill pill"
    "hist hist";
  align-items: center;
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-6);
  border-block-end: 1px solid var(--sts-hairline);
}

.sts-comp__id {
  grid-area: id;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}

.sts-comp__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s-7);
  height: var(--s-7);
  border-radius: var(--r-sm);
  color: var(--c-slate-light);
  background: var(--surface-alt);
  box-shadow: inset 0 0 0 1px var(--sts-hairline);
}
.sts-comp__ico svg { width: var(--s-5); height: var(--s-5); }

.sts-comp__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

.sts-comp__up {
  grid-area: up;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: var(--lh-snug);
}
.sts-comp__up b {
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-snug);
}
.sts-comp__up span {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ---- status pill: dot AND text, never colour alone ---- */
.sts-pill {
  grid-area: pill;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--s-7);
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug);
  white-space: nowrap;
  color: var(--sts-ok);
  background: var(--sts-ok-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sts-ok) 22%, transparent);
}
.sts-pill.is-deg {
  color: var(--sts-deg);
  background: var(--sts-deg-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sts-deg) 22%, transparent);
}
.sts-pill.is-out {
  color: var(--sts-out);
  background: var(--sts-out-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sts-out) 22%, transparent);
}

.sts-pill__dot {
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: currentColor;
}

/* ---- 90-day history ----
   flex-basis 0 + min-width 0 lets ninety bars share whatever width is
   left after the gaps, so the row can never push the page sideways —
   at 360px each bar lands near 2px and the shape still reads. */
.sts-hist {
  grid-area: hist;
  display: flex;
  align-items: stretch;
  gap: 1px;
  height: var(--s-7);
  min-width: 0;
}

.sts-day {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 1px;
  background: var(--sts-ok-bar);
  transition: opacity var(--t-fast) var(--ease-out);
}
.sts-day.is-deg { background: var(--sts-deg-bar); }
.sts-day.is-out { background: var(--sts-out-bar); }
.sts-hist:hover .sts-day { opacity: .55; }
.sts-hist .sts-day:hover { opacity: 1; }

@media (min-width: 56rem) {
  .sts-comp__row {
    grid-template-columns: minmax(0, 13.5rem) minmax(0, 9.5rem) minmax(0, 1fr) auto;
    grid-template-areas: "id pill hist up";
    gap: var(--s-6);
    padding-block: var(--s-5);
  }
  .sts-comp__up { flex-direction: row; align-items: baseline; gap: var(--s-2); }
  .sts-comp__up span { white-space: nowrap; }
}

/* ============================================================
   3. Incident history
   ============================================================ */

.sts-inc__head { max-width: 58ch; }
.sts-inc__h { font-size: var(--fs-h2); }
.sts-inc__sub {
  margin-block-start: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.sts-inc__list {
  margin-block-start: var(--s-9);
  border-block-start: 1px solid var(--sts-hairline);
}

.sts-inc__item {
  display: grid;
  gap: var(--s-4);
  padding-block: var(--s-8);
  border-block-end: 1px solid var(--sts-hairline);
}

.sts-inc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.sts-inc__date {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-snug);
}

.sts-inc__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  height: var(--s-6);
  padding-inline: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--sts-ok);
  background: var(--sts-ok-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sts-ok) 20%, transparent);
}
.sts-inc__tick { width: var(--s-4); height: var(--s-4); }

.sts-inc__t {
  font-size: var(--fs-h4);
  color: var(--text-strong);
  max-width: 40ch;
}

.sts-inc__facts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.sts-inc__clock { flex: none; width: var(--s-4); height: var(--s-4); }
.sts-inc__dot { color: var(--c-hairline); }

.sts-inc__p {
  max-width: 68ch;
  margin-block-start: var(--s-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.sts-inc__p b { color: var(--text-strong); font-weight: var(--fw-semi); }

.sts-inc__code {
  padding: 1px var(--s-1);
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--c-navy) 6%, transparent);
  font-size: var(--fs-xs);
  color: var(--c-navy);
  overflow-wrap: anywhere;
}

.sts-inc__foot {
  margin-block-start: var(--s-7);
  max-width: 68ch;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

@media (min-width: 51.25rem) {
  .sts-inc__item {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
  .sts-inc__meta { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* ============================================================
   4. Subscribe
   ============================================================ */

.sts-sub__card {
  max-width: 46rem;
  padding: var(--s-9);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--sts-hairline), var(--sh-sm);
}

.sts-sub__ico {
  display: grid;
  place-items: center;
  width: var(--s-8);
  height: var(--s-8);
  border-radius: var(--r-md);
  color: var(--c-brand);
  background: var(--c-brand-tint);
}
.sts-sub__ico svg { width: var(--s-6); height: var(--s-6); }

.sts-sub__h {
  margin-block-start: var(--s-5);
  font-size: var(--fs-h3);
  max-width: 22ch;
}

.sts-sub__lead {
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.sts-sub__form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-3);
  margin-block-start: var(--s-7);
}

.sts-sub__field { flex: 1 1 16rem; min-width: 0; }

.sts-sub__label {
  display: block;
  margin-block-end: var(--s-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  letter-spacing: var(--tracking-snug);
}

.sts-sub__input {
  width: 100%;
  height: var(--s-9);
  padding-inline: var(--s-4);
  border: 0;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--sts-hairline), var(--sh-xs);
  font-size: var(--fs-sm);
  color: var(--text-strong);
  transition: box-shadow var(--t-fast) var(--ease-out);
}
.sts-sub__input::placeholder { color: var(--text-muted); }
.sts-sub__input:hover { box-shadow: inset 0 0 0 1px var(--c-slate-light), var(--sh-xs); }
.sts-sub__input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--c-brand),
              0 0 0 3px color-mix(in srgb, var(--c-brand) 22%, transparent);
}

.sts-sub__btn { flex: 0 0 auto; height: var(--s-9); }

.sts-sub__msg {
  margin-block-start: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--sts-ok-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sts-ok) 22%, transparent);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--sts-ok);
  overflow-wrap: anywhere;
}

.sts-sub__fine {
  margin-block-start: var(--s-5);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 62ch;
}

@media (max-width: 32rem) {
  .sts-sub__card { padding: var(--s-7) var(--s-6); }
  .sts-sub__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sts-hero__beacon::before { animation: none; opacity: 0; }
  .sts-hist:hover .sts-day { opacity: 1; }
}