/*
 * The status view.
 *
 * Tokens, buttons, `.note`, `pre.code` and `.muted` come from `shell.css` and
 * `reference.css`, which every view loads — so what is here is only the shapes
 * this page invents: the host cards, the probe rows, the uptime tiles and the
 * bar strips.
 *
 * ── WHY THE BARS ARE NOT ONLY COLOUR ──────────────────────────────────────
 *
 * An uptime strip that says "fine" in green and "broken" in red says nothing
 * at all to a reader who cannot tell those two apart, and roughly one man in
 * twelve cannot. So a bar carries its state in its HEIGHT as well as its
 * colour: a full hour is full height, an hour with a failure in it is shorter
 * and darker, an hour on the floor is a stub. The shape survives greyscale,
 * a printout and a colour-blind reader.
 */

.st-page {
  max-width: 1040px;
  margin: 0 auto;
  padding: 26px 18px 100px;
}

.st-hero h1 {
  margin: 0 0 8px;
  font-size: 40px;
  line-height: 1.1;
}

.st-hero-lede {
  margin: 0 0 6px;
  max-width: 64ch;
  font-size: 17px;
  color: var(--text-muted);
}

/* ── The headline ─────────────────────────────────────────────────────── */

/*
 * The one thing a reader came for, above the fold: the current verdict on the
 * left, the recorded availability figure on the right. Two measurements from
 * two places, side by side rather than merged into one badge — a page that
 * blurs "responding now" with "has been responding" says "operational" to
 * someone who cannot reach the host.
 */
.st-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 24px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.st-summary-state {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.st-summary-state .st-pill {
  font-size: 14px;
  padding: 6px 14px 6px 12px;
}

.st-summary-hosts {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.st-summary-uptime {
  text-align: right;
  /* Never the first thing to wrap: the figure and its label belong together,
     and a percentage on its own line above the words "availability, last 30
     days" reads as a different number. */
  flex: none;
}

.st-summary-uptime b {
  display: block;
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* The empty state. Muted and small on purpose: it is the absence of a figure,
   not a figure of its own. */
.st-summary-pending {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: right;
}

.st-summary-uptime span {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-top: 3px;
}

.st-sec {
  margin-top: 46px;
}

.st-sec-head h2 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 24px;
  /* Clears the sticky top bar when a `#status/uptime` link is followed. */
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.st-lede {
  margin: 0;
  max-width: 72ch;
  color: var(--text-muted);
  font-size: 14.5px;
}

.st-meta {
  margin: 10px 0 0;
  color: var(--text-faint);
  font-size: 13px;
}

.st-none {
  margin: 6px 0 0;
  color: var(--text-faint);
  font-size: 13.5px;
}

/* ── The live bar ─────────────────────────────────────────────────────── */

.st-live-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
}

.st-stamp {
  color: var(--text-faint);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* ── Host cards ───────────────────────────────────────────────────────── */

/*
 * Two columns where there is room, one where there is not. `minmax(0, 1fr)`
 * rather than `1fr`: a long URL in a `<code>` is an unbreakable word, and with
 * a bare `1fr` it widens its own column and pushes the other one off screen.
 */
.st-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 16px;
  margin-top: 14px;
}

.st-card {
  padding: 16px 18px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

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

.st-card-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 18px;
}

.st-host {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-faint);
  word-break: break-all;
}

.st-card-what {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 13px;
}

.st-card h4 {
  margin: 18px 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

/* ── The verdict pill ─────────────────────────────────────────────────── */

.st-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px 4px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-muted);
}

.st-pill-extra {
  font-weight: 500;
  opacity: 0.75;
}

.st-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.st-pill[data-tone="ok"] {
  background: var(--ok-soft);
  color: var(--ok);
}

.st-pill[data-tone="warn"] {
  background: var(--warn-soft);
  color: var(--warn);
}

.st-pill[data-tone="bad"] {
  background: var(--danger-soft);
  color: var(--danger);
}

/*
 * "Not checked" pulses while the check is in flight. `prefers-reduced-motion`
 * turns it off — a page whose whole subject is whether something is alive
 * should not be the page that makes someone motion-sick.
 */
.st-pill[data-tone="muted"] .st-dot {
  animation: st-pulse 1.4s ease-in-out infinite;
}

@keyframes st-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-pill[data-tone="muted"] .st-dot {
    animation: none;
  }
}

/* ── Probe rows ───────────────────────────────────────────────────────── */

.st-probes {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.st-probe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.st-probe-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.st-probe-name {
  font-weight: 700;
  font-size: 13.5px;
}

.st-probe-path {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-faint);
}

/* Only on the checks that carry a credential, and the point is the contrast
   with the column beside it: the reader is looking at two cards where one row
   answers 200 and the other 401, and this is what says why in place. Quiet
   enough not to compete with the status code, which is the number they came
   for. */
.st-probe-tag {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-faint);
  white-space: nowrap;
}

/* The monitor's keyed line, under the reader's own result.

   Quieter than `.st-probe-why` and set apart by a dot, because it is a
   different KIND of statement: everything else on the card was measured on the
   reader's connection, and this one was not. It has to be legible without
   competing — a reader who never notices it has still read a true card. */
.st-probe-monitored {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-faint);
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.st-probe-monitored-dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
}

/* Anything other than "up" is the one case where this line SHOULD pull the
   eye: a keyed check that fails is a fact about our own credential, and the
   page says so rather than letting it read as an API problem. */
.st-probe-monitored[data-state="slow"] .st-probe-monitored-dot::before,
.st-probe-monitored[data-state="degraded"] .st-probe-monitored-dot::before {
  background: var(--warn);
}

.st-probe-monitored[data-state="down"] .st-probe-monitored-dot::before,
.st-probe-monitored[data-state="missing"] .st-probe-monitored-dot::before,
.st-probe-monitored[data-state="unreachable"] .st-probe-monitored-dot::before {
  background: var(--danger);
}

.st-probe-why {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.st-probe-num {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-variant-numeric: tabular-nums;
}

.st-status {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
}

.st-ms {
  font-size: 11.5px;
  color: var(--text-faint);
}

.st-probe-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: none;
}

.st-probe-dot[data-tone="ok"] {
  background: var(--ok);
}
.st-probe-dot[data-tone="warn"] {
  background: var(--warn);
}
.st-probe-dot[data-tone="bad"] {
  background: var(--danger);
}

/* ── Uptime windows ───────────────────────────────────────────────────── */

.st-windows {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
}

.st-window {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  text-align: center;
}

.st-window b {
  display: block;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.st-window span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-top: 2px;
}

/*
 * A window we cannot stand behind is drawn as one: dashed, muted, with the
 * coverage spelled out under it. It is deliberately NOT hidden — "we have not
 * been recording long enough to tell you" is information, and a missing tile
 * would just look like a layout that broke.
 */
.st-window[data-thin="true"] {
  border-style: dashed;
  background: transparent;
}

.st-window[data-thin="true"] b {
  color: var(--text-faint);
}

.st-window small {
  display: block;
  margin-top: 4px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--text-faint);
}

/* ── The bar strips ──────────────────────────────────────────────────── */

.st-strip-wrap {
  margin-top: 18px;
}

.st-strip-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 5px;
}

.st-strip {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  height: 34px;
}

.st-bar {
  flex: 1 1 0;
  min-width: 2px;
  border-radius: 2px;
  background: var(--border);
  /* Height carries the state as well as colour — see the header. */
  height: 40%;
}

.st-bar[data-state="up"] {
  background: var(--ok);
  height: 100%;
}

.st-bar[data-state="partial"] {
  background: var(--warn);
  height: 62%;
}

.st-bar[data-state="down"] {
  background: var(--danger);
  height: 30%;
}

.st-bar[data-state="unknown"] {
  background: var(--border);
  height: 12%;
}

.st-open-incident {
  margin: 14px 0 0;
  padding: 8px 10px;
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
}

.st-incidents {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 12.5px;
}

.st-incidents li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.st-inc-when {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

.st-inc-what {
  color: var(--text-faint);
}

.st-note-inline {
  display: block;
  padding: 8px 10px;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn);
}

/* ── Route coverage ───────────────────────────────────────────────────── */

.st-coverage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  margin-top: 16px;
}

.st-cov-num {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.st-cov-num b {
  display: block;
  font-family: var(--display);
  font-size: 26px;
}

.st-cov-num span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.st-details {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 10px 14px;
}

.st-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13.5px;
}

.st-missing {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 4px;
}

.st-missing code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── The legend ───────────────────────────────────────────────────────── */

.st-legend {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 18px;
  margin: 16px 0 0;
  font-size: 13.5px;
}

.st-legend dt {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.st-legend dd {
  margin: 0;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .st-hero h1 {
    font-size: 30px;
  }

  /* Stacked, and the figure left-aligned with everything else — a right-
     aligned number under a left-aligned pill looks like a layout error. */
  .st-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .st-summary-uptime,
  .st-summary-pending {
    text-align: left;
  }

  .st-windows {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .st-legend {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }

  .st-legend dd {
    margin-bottom: 10px;
  }
}

/*
 * A note that holds a code block.
 *
 * `.note` is a flex row (see `reference.css`), and a flex item will not shrink
 * below its own content. The `curl` block in "How to read these checks" is one
 * long unbreakable line, so inside a flex note it made the whole PAGE scroll
 * sideways — 1117px of body in a 375px viewport, measured. `min-width: 0` on
 * the child is the usual patch; a block container is the actual answer, and it
 * costs nothing here because this note has no icon column to lay out.
 */
.st-run {
  display: block;
}

.st-page pre.code {
  max-width: 100%;
  margin-bottom: 0;
}