/*
 * Status — one verdict, then the detail.
 *
 * The whole point is being readable in three seconds on a phone by
 * somebody who is already annoyed, so the banner carries the answer and
 * everything else is supporting evidence.
 */

.st-wrap { padding-block: var(--sp-12) var(--sp-16); max-width: 820px; }
.st-wrap h1 { font-size: var(--fs-3xl); margin: 0 0 var(--sp-6); }

.st-overall {
    font-size: var(--fs-xl);
    font-weight: 600;
    padding: var(--sp-5) var(--sp-6);
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-1);
}
.st-overall.is-up      { border-color: #1c3a24; background: #10251a; color: #3fb950; }
.st-overall.is-down    { border-color: #47211f; background: #2a1517; color: #f85149; }
.st-overall.is-checking{ color: var(--text-muted); }

.st-sub { color: var(--text-muted); margin: var(--sp-3) 0 var(--sp-8); font-size: var(--fs-sm); }

.st-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }

.st-row {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface-1);
    flex-wrap: wrap;
}
.st-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--text-faint); flex: none;
}
.st-row.is-up   .st-dot { background: #3fb950; }
.st-row.is-down .st-dot { background: #f85149; }

.st-row__meta { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.st-row__meta strong { overflow-wrap: anywhere; }
.st-row__meta span { color: var(--text-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }

.st-row__state { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.st-state { font-size: var(--fs-sm); }
.st-row.is-up   .st-state { color: #3fb950; }
.st-row.is-down .st-state { color: #f85149; }
.st-ms {
    font-size: var(--fs-xs); color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.st-why { font-size: var(--fs-xs); color: var(--text-muted); }

.st-foot {
    display: flex; align-items: center; gap: var(--sp-4);
    margin-top: var(--sp-6); flex-wrap: wrap;
}
.st-stamp { color: var(--text-muted); font-size: var(--fs-sm); }

.st-note {
    margin-top: var(--sp-12);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border);
}
.st-note h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-4); }
.st-note p  { color: var(--text-body); margin: 0 0 var(--sp-4); }

@media (max-width: 520px) {
    .st-row__state { width: 100%; }
}