/**
 * alerts.css — the Site health page: the Critical/Caution/In-range stat row,
 * the alert cards (full-height severity bar, right-aligned pill), and the
 * all-clear empty state.
 */

.seg{display:inline-flex;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.seg button{border:none;background:none;color:var(--muted);font:inherit;font-weight:700;font-size:12.5px;padding:7px 12px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(16,32,54,.08)}
.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.alerts-range{margin-top:16px;align-self:flex-start;width:max-content;max-width:100%}   /* its own width, not the column's */
.sumrow{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:22px 0 0}
.stat{background:var(--surface);border:none;border-radius:14px;box-shadow:0 1px 2px rgba(16,32,54,.04);padding:16px 4px;text-align:center}
.stat b{display:block;font-size:24px;font-weight:800;line-height:1}
.stat span{font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;font-weight:800;margin-top:6px;display:block}
.stat.crit b{color:var(--crit)} .stat.warn b{color:var(--warn)} .stat.due b{color:var(--due)} .stat.ok b{color:var(--ok)}
.stat.tap{cursor:pointer} .stat.tap:active{transform:scale(.97)}

.tick{position:relative;overflow:hidden;padding:18px;background:var(--surface);border:none;border-radius:16px;box-shadow:0 1px 2px rgba(16,32,54,.04);margin-bottom:14px}
.tick .sev{position:absolute;left:0;top:0;bottom:0;width:5px}
.tick.crit .sev{background:var(--crit)} .tick.warn .sev{background:var(--warn)} .tick.due .sev{background:var(--due)} .tick.ok .sev{background:var(--ok)}
.tick .ttl{font-weight:750;font-size:14.5px;display:flex;align-items:center;gap:8px}
.tick .ttl .pill{margin-left:auto}
.tick .desc{color:var(--muted);font-size:13px;margin-top:3px;font-weight:500}
.tick .desc .v{font-family:var(--mono);font-weight:800;color:var(--ink)}

.empty{text-align:center;color:var(--muted);padding:40px 10px}
.empty .big{font-size:44px}

/* "Contact us" on an alert card (the manager's cards have the same button). */
.tick .acts{display:flex;justify-content:flex-end;gap:8px;padding-top:12px}
.tick .acts .btn{flex:none;border:1px solid transparent;font:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:10px;cursor:pointer}
.tick .acts .btn.ask{color:var(--accent);background:var(--accent-wash)}
.tick .acts .btn:active{transform:scale(.97)}
.tick .acts .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}