/* Status page — visual language ported from the conquest reference
 * (flex-segment uptime bars, worst-status banner, clean cards) onto a
 * plain dark theme. No frameworks, no fonts to fetch: system stack only,
 * because this page must render when everything else is down. */

:root {
    --bg: #0b0e18;
    --card: #11141f;
    --border: rgba(255, 255, 255, 0.08);
    --text: #ededed;
    --muted: #9aa0ae;
    --faint: #5c6270;
    /* Conquest taxonomy carried over: green operational / yellow degraded
     * / red major; no-data is a dim gray so gaps read as gaps, not outages. */
    --green: #2ecc71;
    --yellow: #f1c40f;
    --red: #e74c3c;
    --no-data: #333a49;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.banner {
    padding: 14px 20px;
    text-align: center;
    font-weight: 600;
    font-size: 17px;
}
.banner-green { background: var(--green); color: #fff; }
.banner-yellow { background: var(--yellow); color: #0b0e18; }
.banner-red { background: var(--red); color: #fff; }
.banner-gray { background: var(--no-data); color: var(--text); }

.wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 16px 0;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 20px;
    margin-bottom: 20px;
}

.target { padding: 18px 0; border-bottom: 1px solid var(--border); }
.target:last-child { border-bottom: 0; }

.target-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px;
}
.target-label { font-weight: 600; }
.target-meta { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* Uptime bar strip: one flex segment per day, gaps like the conquest bars. */
.uptime-bar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    height: 34px;
}
.seg {
    flex: 1 1 0;
    min-width: 2px;
    border-radius: 2px;
    background: var(--no-data);
    transition: opacity 0.1s ease;
}
.seg:hover { opacity: 0.75; }
.seg-up { background: var(--green); }
.seg-degraded { background: var(--yellow); }
.seg-down { background: var(--red); }

.bar-scale {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--muted);
}
.bar-scale .rule { flex: 1; border-top: 1px solid var(--border); }

.incidents h2 { font-size: 16px; margin: 14px 0 10px; }

.incident-list { list-style: none; margin: 0; padding: 0 0 8px; }
.incident {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.incident-title { font-weight: 600; font-size: 14px; }
.incident-reason { color: var(--muted); font-size: 13px; }
.incident-meta { color: var(--faint); font-size: 11px; margin-top: 2px; }

.empty { color: var(--muted); font-size: 13px; padding-bottom: 14px; }

footer {
    text-align: center;
    color: var(--faint);
    font-size: 12px;
    padding: 8px 0 28px;
}