/* /status/: three service rows and the time of the last check. Mobile first. */
.st-page { max-width: 720px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--gutter) 0; }
.st-page h1 { margin: .1em 0 .3em; font: 700 clamp(2.2rem, 1.4rem + 3vw, 3.4rem)/.95 var(--f-display); }
.st-banner { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--r-m); background: var(--panel); border-left: 6px solid var(--ink-3); font: 700 1.2rem var(--f-display); }
.st-banner.is-ok { border-left-color: #7bdc8e; }
.st-banner.is-bad { border-left-color: var(--red); }
.st-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--bezel); border: 1px solid var(--rule); border-radius: var(--r-m); }
.st-name { font: 700 1.1rem var(--f-display); }
.st-state { font: 700 1rem var(--f-display); color: var(--ink-2); }
.st-state::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; border-radius: 50%; background: var(--ink-3); }
.st-state.is-ok { color: #7bdc8e; } .st-state.is-ok::before { background: #7bdc8e; }
.st-state.is-bad { color: #FF9B8F; } .st-state.is-bad::before { background: var(--red); }
.st-meta { color: var(--ink-2); font-size: .95rem; }