/* RODEO — the status page. Honest at a glance: one big line, then the parts. */
.status-body{min-height:100vh;padding:clamp(28px,6vw,64px) 20px}
.status-wrap{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.status-head{text-align:left}
.status-overall{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .3rem}
.status-h1{font-family:var(--f-display);font-size:clamp(1.5rem,4vw,2.1rem);font-weight:720;margin:0;letter-spacing:-.01em}
.status-lead{color:var(--ink-soft);margin:0}

/* the dot carries the state — calm turquoise for good, ember for trouble */
.status-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;background:var(--ink-soft);
  box-shadow:0 0 0 0 transparent;transition:background var(--t-settle),box-shadow var(--t-settle)}
[data-state="operational"] .status-dot{background:var(--verified);box-shadow:0 0 0 5px rgba(44,166,164,.16)}
[data-state="degraded"] .status-dot{background:var(--ember);box-shadow:0 0 0 5px rgba(228,86,43,.16)}
@media (prefers-reduced-motion:no-preference){
  [data-state="operational"] .status-dot{animation:status-breathe 3.4s var(--ease-rope) infinite}
}
@keyframes status-breathe{0%,100%{box-shadow:0 0 0 4px rgba(44,166,164,.10)}50%{box-shadow:0 0 0 7px rgba(44,166,164,.22)}}

.status-card{padding:8px 22px}
.status-list{list-style:none;margin:0;padding:0}
.status-row{display:flex;align-items:center;gap:.8rem;padding:16px 0;border-bottom:1px solid var(--glass-edge)}
.status-row:last-child{border-bottom:0}
.status-row .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--ink-soft)}
.status-row[data-state="operational"] .dot{background:var(--verified)}
.status-row[data-state="degraded"] .dot{background:var(--ember)}
.status-row .body{flex:1;min-width:0}
.status-row .label{font-weight:640;margin:0}
.status-row .plain{color:var(--ink-soft);font-size:.9rem;margin:.15rem 0 0}
.status-row .tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.status-row[data-state="operational"] .tag{color:var(--verified)}
.status-row[data-state="degraded"] .tag{color:var(--ember-hi)}

.status-foot{color:var(--ink-soft);font-size:.82rem;margin:0}
.status-back{margin:0;font-size:.9rem}
.status-back a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.status-back a:hover{color:var(--ink)}