/* /status — is everything working. Deliberately quiet: no dots, no traffic lights, just the service, a word and
   how long it took to answer. */

.st-wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
.st-head { padding: 72px 0 0; }
.st-head h1 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: clamp(38px, 6vw, 56px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.st-head p { margin-top: 12px; max-width: 46ch; color: var(--muted); font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }

/* the headline answer */
.st-now { position: relative; margin: 36px 0 10px; padding: 26px 28px 26px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2); overflow: hidden; }
.st-now::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--muted); }
.st-now.is-ok::before { background: var(--coral); }
.st-now.is-slow::before { background: #e3b341; }
.st-now.is-partial::before, .st-now.is-major::before { background: #e5534b; }
.st-now h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.st-now p { margin-top: 7px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.st-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 18px; }
.st-when { color: var(--faint, #7d7a76); font-size: 13px; font-variant-numeric: tabular-nums; }
.st-again { padding: 8px 15px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; transition: background .15s, border-color .15s; }
.st-again:hover:not(:disabled) { background: rgb(255 255 255 / .05); border-color: var(--muted); }
.st-again:disabled { opacity: .5; cursor: default; }

/* the groups */
.st-group { margin-top: 34px; padding: 0; }   /* site.css gives every <section> 120px of padding; not here */
.st-group > h3 { margin-bottom: 10px; padding-left: 2px; font-size: 12px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--faint, #7d7a76); }
.st-list { border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); overflow: hidden; }
.st-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); }
.st-row:first-child { border-top: 0; }
.st-name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 600; }
.st-ms { color: var(--faint, #7d7a76); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-state { min-width: 74px; text-align: right; font-size: 12px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.st-state.up { color: var(--muted); }
.st-state.slow { color: #e3b341; }
.st-state.down { color: #e5534b; }

/* while it checks */
.st-row.wait .st-name, .st-row.wait .st-state { color: transparent; background: linear-gradient(90deg, rgb(255 255 255 / .05), rgb(255 255 255 / .09), rgb(255 255 255 / .05)); background-size: 200% 100%; border-radius: 6px; animation: st-sheen 1.3s linear infinite; }
.st-row.wait .st-state { min-width: 74px; }
@keyframes st-sheen { to { background-position: -200% 0; } }

.st-foot { margin: 40px 0 90px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--faint, #7d7a76); font-size: 13.5px; line-height: 1.6; }
.st-foot a { color: var(--muted); text-underline-offset: 3px; }

@media (max-width: 560px) {
  .st-head { padding-top: 48px; }
  .st-now { padding: 22px 20px 22px 22px; border-radius: 18px; }
  .st-row { padding: 14px 16px; gap: 12px; }
  .st-name { font-size: 15px; }
  .st-ms { display: none; }
}