/* System status page. Builds on site.css tokens: the page sits inside the
   marketing layout, so header, footer, type and buttons come from there. */
:root {
    --status-ok:#6a9474;
    --status-warn:var(--orange);
    --status-down:#b3261e;
    --status-down-light:#fdecea;
}

.status-hero {
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
    gap:72px;
    align-items:end;
    padding-bottom:64px;
}
.status-intro h1 {
    margin-top:12px;
    font-size:clamp(38px,4vw,56px);
}
.status-intro h1 em {
    font-style:normal;
    color:var(--orange);
}
.status-lead {
    margin-top:18px;
    max-width:52ch;
    color:var(--muted);
    font-size:16px;
    line-height:1.65;
}
.status-checked {
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:24px;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
}
.status-live {
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--status-ok);
    box-shadow:0 0 0 4px #6a947433;
}
.status-seal {
    display:grid;
    place-items:center;
    width:56px;
    height:56px;
    margin-bottom:24px;
    border-radius:16px;
}
.status-seal-success { background:var(--sage); color:var(--green); }
.status-seal-warning { background:var(--orange-light); color:var(--orange-ink); }
.status-seal-danger { background:var(--status-down-light); color:var(--status-down); }

.status-summary {
    padding:28px;
    border-radius:var(--radius);
    color:var(--white);
    background:var(--green);
    box-shadow:var(--shadow);
}
.status-summary p { color:var(--white); }
.status-summary-warning { background:var(--ink); }
.status-summary-danger { background:#7a1c16; }
.status-label {
    display:block;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:rgba(255,254,250,.72);
}
.status-uptime {
    margin-top:10px;
    font-family:'Sora',Arial,sans-serif;
    font-size:clamp(44px,5vw,64px);
    font-weight:600;
    line-height:1;
    letter-spacing:-.05em;
    font-variant-numeric:tabular-nums;
}
.status-uptime small {
    font-size:.45em;
    margin-left:4px;
    opacity:.75;
}
.status-summary-note {
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid rgba(255,254,250,.18);
    font-size:15px;
    font-weight:700;
}
.status-summary .status-summary-window {
    margin-top:4px;
    font-size:13px;
    color:rgba(255,254,250,.72);
}

.status-section-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:24px;
}
.status-section-head h2 { font-size:clamp(26px,2.6vw,34px); letter-spacing:-.04em; }
.status-legend {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin:0;
    padding:0;
    list-style:none;
    color:var(--muted);
    font-size:13px;
    font-weight:600;
}
.status-legend li { display:inline-flex; align-items:center; gap:8px; }
.status-swatch { width:10px; height:10px; border-radius:3px; }
.status-swatch-green, .status-bar-green { background:var(--status-ok); }
.status-swatch-yellow, .status-bar-yellow { background:var(--status-warn); }
.status-swatch-red, .status-bar-red { background:var(--status-down); }

.status-services {
    background:var(--white);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.status-service { padding:24px 32px; }
.status-service + .status-service { border-top:1px solid var(--border); }
.status-service-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
}
.status-service h3 { font-size:18px; letter-spacing:-.02em; }

.status-pill {
    display:inline-flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.status-dot { width:7px; height:7px; border-radius:50%; background:currentColor; }
.status-pill-success { background:var(--sage); color:var(--green); }
.status-pill-warning { background:var(--orange-light); color:var(--orange-ink); }
.status-pill-danger { background:var(--status-down-light); color:var(--status-down); }

.status-bars {
    display:flex;
    gap:3px;
    height:36px;
}
.status-bar {
    flex:1 1 0;
    min-width:0;
    border-radius:3px;
    transition:opacity var(--feedback) var(--standard);
}
.status-bars:hover .status-bar { opacity:.45; }
.status-bars:hover .status-bar:hover { opacity:1; }
.status-bars-meta {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
    color:var(--muted);
    font-size:12px;
    font-weight:600;
}
.status-bars-uptime { color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }

.status-incidents {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);
    gap:72px;
    align-items:start;
}
.status-days {
    position:relative;
    margin:0;
    padding:0;
    list-style:none;
}
.status-days::before {
    content:"";
    position:absolute;
    left:7px;
    top:8px;
    bottom:8px;
    width:2px;
    background:var(--border);
}
.status-day {
    position:relative;
    padding-left:40px;
}
.status-day + .status-day { margin-top:32px; }
.status-day-marker {
    position:absolute;
    left:0;
    top:3px;
    width:16px;
    height:16px;
    border-radius:50%;
    border:3px solid var(--paper);
    background:var(--status-ok);
    box-shadow:0 0 0 1px var(--border);
}
.status-day-incident .status-day-marker { background:var(--status-warn); }
.status-day-date {
    font-family:'DM Sans',Arial,sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--muted);
}
.status-day-empty {
    margin-top:8px;
    color:var(--muted);
    font-size:15px;
}
.status-incident {
    margin-top:12px;
    padding:20px 24px;
    background:var(--white);
    border:1px solid var(--border);
    border-radius:16px;
}
.status-incident-head {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}
.status-incident h4 {
    margin:0;
    font-family:'Sora',Arial,sans-serif;
    font-size:17px;
    font-weight:600;
    letter-spacing:-.02em;
}
.status-updates {
    margin:16px 0 0;
    padding:0;
    list-style:none;
}
.status-updates li {
    display:grid;
    grid-template-columns:84px minmax(0,1fr);
    gap:12px;
    font-size:14px;
    line-height:1.55;
}
.status-updates li + li { margin-top:8px; }
.status-updates time {
    color:var(--muted);
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.status-help .support-note { margin-top:0; }

@media(max-width:899px) {
    .status-hero, .status-incidents { grid-template-columns:1fr; gap:40px; }
    .status-hero { padding-bottom:48px; }
}
@media(max-width:650px) {
    .status-service { padding:20px; }
    .status-service-head { flex-wrap:wrap; gap:10px; }
    .status-bars { gap:2px; height:32px; }
    .status-incident { padding:18px; }
    .status-updates li { grid-template-columns:1fr; gap:0; }
    .status-actions { flex-direction:column; align-items:stretch; }
}
@media(prefers-reduced-motion:reduce) {
    .status-bar { transition:none; }
}