/* ════════════════════════════════════════════════════════════════════
   Service status board — Figma frame "status" (node 177:415).

   Every value below was read off the frame and is pinned by
   tests/test_status_design_fidelity.py against
   tests/design/status_page_tokens.json. Do not adjust a number without
   changing the frame and re-extracting: the test will fail, by design.

   Two things that are easy to get wrong, and so are called out:
     - The uptime bar is a THREE-state component and the state is carried by
       HEIGHT as well as colour (36 / 24 / 16px). Give every bar one height
       and the strip becomes colour-only, which is both a design regression
       and a WCAG 1.4.1 failure.
     - There are two muted greys: #b0b8c8 for body copy, and
       rgba(176,184,200,0.5) for metric labels and the axis. Collapsing them
       flattens the hierarchy the frame relies on.

   No inline styles anywhere on this page: style-src-attr is hash-pinned
   (chaos_tester_csp_style_hashes.py), so the 30 bars take their geometry
   from a state class rather than a style="height:" attribute.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --st-surface:     #0f172a;
    --st-hairline:    rgba(51,65,85,0.7);
    --st-body-muted:  #b0b8c8;                 /* body copy */
    --st-meta-muted:  rgba(176,184,200,0.5);   /* labels, axis */
    --st-cyan:        #00bfff;
    --st-cta-ink:     #0d121a;
    --st-ok:          #4ade80;
    --st-ok-wash:     rgba(74,222,128,0.06);
    --st-degraded:    #fbbf24;
    --st-outage:      #f87171;
    --st-content:     800px;
}

/* The frame's own background fill. Its radial decodes from
   matrix(76.8 0 0 55.26 640 552.6) with r=10 on a 1280x1842 frame to
   ellipse 60% 30% at 50% 30% — the SAME ellipse the report redesign uses,
   and NOT the landing/scan glow (60% 24% at 50% 58%). Scoped to the body
   class so it cannot leak onto any other page. */
body.status-page {
    background:
        radial-gradient(ellipse 60% 30% at 50% 30%, #173948 0%, #0e1a2c 55%, rgba(6, 9, 20, 0) 100%),
        #020617;
    background-attachment: fixed;
}

/* line-height: base.css sets 1.6 on body; nearly every text node in the frame
   is leading-[normal]. Inheriting 1.6 inflates every card and row — the
   subsystem rows came out 56px against the frame's 49px. The two roles that
   DO carry a numeric leading in the frame restate it below (h1 1.2, hero
   subtitle 1.55). */
.status {
    max-width: var(--st-content);
    margin: 0 auto;
    padding: 64px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    line-height: normal;
}

/* -- hero (177:429) ------------------------------------------------ */
.status-hero { text-align: center; display: flex; flex-direction: column; gap: 16px; }
.status-eyebrow {
    margin: 0;
    font-size: 12px; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--st-cyan);
}
/* Overrides .page-header/.landing-hero's 3.5rem h1 scale: this frame's title
   is 44px, the same size the progress and report redesigns use. No
   letter-spacing — 177:431 carries no tracking, unlike .landing-hero h1's
   -0.02em, which is the value that gets copied across by reflex. */
.status-hero h1 {
    margin: 0;
    font-size: 44px; font-weight: 700; line-height: 1.2;
    color: #fff;
}
.status-hero-sub {
    margin: 0;
    font-size: 16px; font-weight: 400; line-height: 1.55;
    color: var(--st-body-muted);
}

/* -- live region --------------------------------------------------- */
.status-live { display: flex; flex-direction: column; gap: 48px; }
/* Refresh is a background update, not a page load: dim rather than blank, so
   the last known-good figures stay readable while the fetch is in flight. */
.status-live[aria-busy="true"] { opacity: 0.65; transition: opacity .2s; }

/* -- banner (177:433) ---------------------------------------------- */
.status-banner {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 32px;
    border: 1px solid var(--st-ok);
    border-radius: 16px;
    background: var(--st-ok-wash);
    text-align: center;
}
.status-banner-headline {
    display: flex; align-items: center; gap: 12px;
    margin: 0;
}
.status-banner-label { font-size: 22px; font-weight: 700; color: var(--st-ok); }
.status-banner-sub { margin: 0; font-size: 14px; font-weight: 400; color: var(--st-body-muted); }

.status-dot {
    flex: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--st-ok);
}
.status-dot--sm { width: 8px; height: 8px; }

/* The banner and its dot recolour with the reported state; the frame only
   draws the operational case, so degraded/outage reuse its geometry. */
.status-banner--degraded { border-color: var(--st-degraded); background: rgba(251,191,36,0.06); }
.status-banner--degraded .status-banner-label { color: var(--st-degraded); }
.status-banner--degraded .status-dot { background: var(--st-degraded); }
.status-banner--outage { border-color: var(--st-outage); background: rgba(248,113,113,0.06); }
.status-banner--outage .status-banner-label { color: var(--st-outage); }
.status-banner--outage .status-dot { background: var(--st-outage); }

/* -- metric cards (177:438) ---------------------------------------- */
.status-metrics {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.status-metric {
    display: flex; flex-direction: column; gap: 6px;
    padding: 18px;
    background: var(--st-surface);
    border: 1px solid var(--st-hairline);
    border-radius: 10px;
}
.status-metric-label {
    font-size: 11px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--st-meta-muted);
}
.status-metric-value { font-size: 24px; font-weight: 700; color: #fff; }
/* Unmeasurable, not zero. The em dash is the whole point of the state. */
.status-metric--empty .status-metric-value { color: var(--st-meta-muted); }

/* -- subsystem rows (177:448) -------------------------------------- */
.status-section-title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: #fff; }
.status-service-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.status-service {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 20px;
    background: var(--st-surface);
    border: 1px solid var(--st-hairline);
    border-radius: 8px;
}
.status-service-name { font-size: 14px; font-weight: 600; color: #fff; }
.status-service-state {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 500; white-space: nowrap;
    color: var(--st-ok);
}
.status-service-state--degraded { color: var(--st-degraded); }
.status-service-state--degraded .status-dot { background: var(--st-degraded); }
.status-service-state--outage { color: var(--st-outage); }
.status-service-state--outage .status-dot { background: var(--st-outage); }

/* -- uptime history (177:475) -------------------------------------- */
.status-uptime {
    display: flex; flex-direction: column; gap: 16px;
    padding: 24px;
    background: var(--st-surface);
    border: 1px solid var(--st-hairline);
    border-radius: 12px;
}
.status-uptime-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.status-uptime-title { margin: 0; font-size: 14px; font-weight: 600; color: #fff; }
.status-uptime-average { margin: 0; font-size: 12px; font-weight: 400; color: var(--st-body-muted); }

.status-uptime-bars {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 4px;
    height: 36px;
}
.status-bar {
    flex: 0 1 20px;
    width: 20px;
    border-radius: 2px;
    opacity: 0.85;
}
/* Height is state, not scale — see the header note. */
.status-bar--ok       { height: 36px; background: var(--st-ok); }
.status-bar--degraded { height: 24px; background: var(--st-degraded); }
.status-bar--outage   { height: 16px; background: var(--st-outage); }
/* A day nobody audited is not a bad day. It reads as an empty slot rather
   than a green bar claiming uptime that was never measured. */
.status-bar--no-data  { height: 36px; background: rgba(51,65,85,0.55); opacity: 0.6; }
/* A day that DID run audits, before run_attempts existed to record whether any
   of them failed. public.reports proves something ran; it cannot prove
   anything succeeded, because it prunes to 3 rows per domain and every row in
   it says "completed". Green here would claim uptime nobody measured.
   Full height on purpose: height encodes SEVERITY for the three measured
   states, and this is an absence of measurement, not a severity. */
.status-bar--unverified { height: 36px; background: rgba(148,163,184,0.45); opacity: 0.75; }

.status-uptime-axis {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin: 0;
    font-size: 11px; font-weight: 400; color: var(--st-meta-muted);
}

/* -- refresh failure ------------------------------------------------ */
.status-error {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0;
    padding: 12px 16px;
    background: rgba(248,113,113,0.08);
    border: 1px solid rgba(248,113,113,0.4);
    border-radius: 8px;
    font-size: 13px; color: var(--st-body-muted);
}
.status-error[hidden] { display: none; }
.status-retry {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--st-hairline);
    border-radius: 8px;
    color: #fff; font-size: 13px; font-weight: 600;
    cursor: pointer;
}
.status-retry:hover { border-color: var(--st-cyan); color: var(--st-cyan); }

/* -- footnote ------------------------------------------------------- */
.status-meta { margin: 0; font-size: 13px; line-height: 1.6; color: var(--st-meta-muted); }

/* -- closing CTA (177:514) ------------------------------------------ */
/* Its own full-width section in the frame, with an 80px surround. .status
   already ends on 40px of padding, so the frame's 120px gap above the box
   comes out of 40 + 80. */
.status-cta { padding: 80px 0; }
.status-cta-box {
    /* 960px, deliberately wider than the 800px board column. */
    width: 960px;
    max-width: 100%;
    margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
    padding: 48px 64px;
    background: var(--st-surface);
    border: 1px solid var(--st-hairline);
    border-radius: 16px;
    text-align: center;
}
.status-cta-box h2 { margin: 0; font-size: 32px; font-weight: 700; color: #fff; }
.status-cta-sub {
    max-width: 600px; margin: 0;
    font-size: 15px; font-weight: 400; color: var(--st-body-muted);
}
.status-cta-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 15px 36px;
    border-radius: 12px;
    background: var(--st-cyan);
    color: var(--st-cta-ink);
    font-size: 15px; font-weight: 600;
    text-decoration: none;
}
/* Matches the landing .btn-audit hover; #0d121a on #00bfff is ~8.8:1. */
.status-cta-btn:hover { background: #33c7ff; color: var(--st-cta-ink); }
.status-cta-note { margin: 0; font-size: 13px; color: var(--st-body-muted); }
.status-cta-note a { color: var(--st-cyan); font-weight: 500; }

/* -- responsive (project convention: base.css collapses at 768px) ---- */
@media (max-width: 768px) {
    .status { padding: 40px 0 24px; gap: 32px; }
    .status-live { gap: 32px; }
    .status-hero h1 { font-size: 2.2rem; }
    .status-hero-sub { font-size: 1rem; }

    .status-banner { padding: 24px 20px; }
    .status-banner-label { font-size: 18px; }

    /* Three 250px cards do not fit a 375px viewport; two-up keeps the
       label/value pairing legible where a 1-up stack would run the page long. */
    .status-metrics { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .status-metric { padding: 14px; }
    .status-metric-value { font-size: 20px; }

    /* Long subsystem names wrap rather than crushing the state pill. */
    .status-service { flex-direction: column; align-items: flex-start; gap: 8px; }

    .status-uptime { padding: 18px; }
    .status-uptime-head { flex-direction: column; align-items: flex-start; gap: 4px; }
    /* The bars shrink with the viewport instead of overflowing it. */
    .status-uptime-bars { gap: 2px; }
    .status-bar { flex: 1 1 0; width: auto; min-width: 4px; }

    .status-cta { padding: 40px 0; }
    .status-cta-box { padding: 32px 20px; }
    .status-cta-box h2 { font-size: 24px; }
}