/* Public status pages users build from their monitors: /s/:slug */

.mpage { min-height: 100vh; display: flex; flex-direction: column; }
.mpage-main { flex: 1; }
.mpage-owner { background: var(--accent-soft); border-bottom: 1px solid var(--border); padding-block: var(--s-2); }

.mpage-head { margin-bottom: var(--s-5); }
.mpage-head .page-title { overflow-wrap: anywhere; }
.mpage-head .lede { margin-top: var(--s-3); max-width: 60ch; }

.mpage-banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); margin-bottom: var(--s-5); }
.mpage-banner__label { font-size: var(--fs-18); font-weight: 600; }
.mpage-banner--up { background: var(--up-soft); border-color: transparent; color: var(--up-text); }
.mpage-banner--warn { background: var(--warn-soft); border-color: transparent; color: var(--warn-text); }
.mpage-banner--down { background: var(--down-soft); border-color: transparent; color: var(--down-text); }
.mpage-banner .muted { color: inherit; opacity: 0.8; }

.mpage-svc .strip { margin-top: var(--s-3); }
.mpage-svc__name { font-size: var(--fs-16); font-weight: 600; overflow-wrap: anywhere; }
.mpage-svc__host { display: block; font-size: var(--fs-12); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpage-svc__host:hover { color: var(--accent-text); }
.mpage-svc .badge { flex-shrink: 0; }
.mpage-legend { margin-top: var(--s-3); }

.mpage-foot { padding: var(--s-6) var(--s-4); text-align: center; }
.mpage-foot__brand { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-12); color: var(--text-3); text-decoration: none; }
.mpage-foot__brand:hover { color: var(--text-2); }

.mpage-community { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-2); color: var(--text-3); }
.mpage-community__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--nodata); flex-shrink: 0; }
.mpage-community__dot--healthy { background: var(--up); }
.mpage-community__dot--degraded { background: var(--warn); }
.mpage-community__dot--likely_down { background: var(--down); }