/* Lumaa Status Page — dedicated stylesheet.
   Light theme is the base :root (old browsers / no media-query support);
   dark overrides under prefers-color-scheme:dark — mirrors the handoff doc's
   own reference markup. This is the one public page that runs both themes;
   the rest of the marketing site is dark-only by design (core.css/policy.css).

   5-state system synthesized from a 2-concept design panel (2026-09-11):
   silhouette/shape carries state identity first, color is a redundant
   second channel — every state must read correctly in pure greyscale. */
:root{
  --bg:#faf9f6; --bg2:#f3f1ea; --surface:#ffffff; --surface2:#f6f4ee;
  --border:rgba(20,18,12,0.10); --border2:rgba(20,18,12,0.18);
  --text:#171512; --text2:#5c574c; --text3:#8a8474; --text4:#b6b0a0;
  --gold:#8a6f3a; --gold2:#6f5a2e; --gold-dim:rgba(138,111,58,0.10);
  --serif:'Fraunces', Georgia, serif;
  --sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, Menlo, monospace;
  --radius:2px;
  --ease:cubic-bezier(0.22,0.61,0.36,1);

  /* State tokens — fg / bg / border per level, light theme */
  --up:#37693f;          --up-bg:rgba(157,184,150,0.14);      --up-line:rgba(157,184,150,0.35);
  --amber:#8b5e23;        --amber-bg:rgba(201,146,74,0.16);    --amber-line:rgba(201,146,74,0.38);
  --bad:#8c4235;          --bad-bg:rgba(184,122,111,0.14);     --bad-line:rgba(184,122,111,0.36);
  --sage:#53614c;         --sage-bg:rgba(138,154,124,0.14);    --sage-line:rgba(138,154,124,0.32);
  --slate:#5f5f5f;         --slate-bg:rgba(138,138,138,0.12);   --slate-line:rgba(138,138,138,0.30);
  --orange:#8f4e22;        --orange-bg:rgba(178,101,53,0.16);   --orange-line:rgba(178,101,53,0.38);

  /* Raw fill colors for bar-strip marks (slightly stronger than chip text so
     3-4px cells still read at a glance) */
  --up-fill:#4f8a49; --amber-fill:#c9924a; --bad-fill:#b8493a; --sage-fill:#7c8d70; --slate-fill:#8a8a8a;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0b0a08; --bg2:#0e0d0a; --surface:#11100d; --surface2:#161512;
  --border:rgba(235,228,210,0.10); --border2:rgba(235,228,210,0.18);
  --text:#ece7da; --text2:#a39d8e; --text3:#6b6557; --text4:#403c33;
  --gold:#d1c5a9; --gold2:#b1a481; --gold-dim:rgba(209,197,169,0.10);

  --up:#b4cbae;            --up-bg:rgba(157,184,150,0.10);      --up-line:rgba(157,184,150,0.32);
  --amber:#d9a865;         --amber-bg:rgba(201,146,74,0.10);    --amber-line:rgba(201,146,74,0.32);
  --bad:#c99184;           --bad-bg:rgba(184,122,111,0.10);     --bad-line:rgba(184,122,111,0.32);
  --sage:#9cab8e;          --sage-bg:rgba(138,154,124,0.09);    --sage-line:rgba(138,154,124,0.28);
  --slate:#9c9c9c;          --slate-bg:rgba(138,138,138,0.08);   --slate-line:rgba(138,138,138,0.24);
  --orange:#cf8a52;         --orange-bg:rgba(178,101,53,0.12);   --orange-line:rgba(178,101,53,0.32);

  --up-fill:#9db896; --amber-fill:#c9924a; --bad-fill:#b87a6f; --sage-fill:#8a9a7c; --slate-fill:#8a8a8a;
}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light dark}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-decoration:none;transition:color .3s var(--ease)}
a:hover{color:var(--gold2);text-decoration:underline}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button{font-family:inherit;color:inherit}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* NAV */
.status-nav{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--border)}
.status-nav-inner{max-width:900px;margin:0 auto;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.status-logo{font-family:var(--serif);font-size:24px;font-weight:400;letter-spacing:-.02em;color:var(--text);line-height:1;font-variation-settings:"opsz" 60}
.status-logo:hover{color:var(--text);text-decoration:none}
.status-logo em{font-style:italic;color:var(--gold)}
.status-nav-back{font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--text3)}
.status-nav-back:hover{color:var(--text2);text-decoration:none}

.status-wrap{max-width:900px;margin:0 auto;padding:56px 24px 96px}

/* HERO */
.status-hero{margin-bottom:64px}
.status-hero-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.status-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text3)}
.status-updated{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--text3)}
.status-live-dot{width:6px;height:6px;border-radius:50%;background:var(--up-fill);flex-shrink:0;animation:statusPulse 2.4s ease-in-out infinite}
.status-live-dot.is-stale{background:var(--slate-fill);animation:none}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.status-live-dot{animation:none}}

.status-headline{font-family:var(--serif);font-weight:300;font-size:clamp(26px,4.4vw,42px);line-height:1.18;letter-spacing:-.02em;font-variation-settings:"opsz" 144;max-width:26ch}
.status-headline .glyph{display:inline-block;width:.62em;height:.62em;margin-right:.14em;vertical-align:middle;position:relative;top:-.06em}
.status-headline .sw-up{color:var(--up-fill)}
.status-headline .sw-degraded{color:var(--amber-fill)}
.status-headline .sw-down{color:var(--bad-fill)}
.status-headline .sw-excluded{color:var(--sage-fill)}
.status-headline .sw-unknown{color:var(--slate-fill)}

.status-subline{margin-top:12px;font-family:var(--mono);font-size:13px;color:var(--text2)}

.status-warn-banner{margin-top:20px;display:flex;gap:10px;align-items:flex-start;background:var(--orange-bg);border:1px solid var(--orange-line);border-radius:var(--radius);padding:12px 16px;font-size:13px;color:var(--text2)}
.status-warn-banner strong{color:var(--text)}

/* GROUPS */
.status-group{margin-bottom:56px}
.status-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.status-group-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3)}
.status-group-sub{font-size:12px;color:var(--text3)}
.status-group-box{border:1px solid var(--border);border-radius:var(--radius)}
.status-group--platform .status-group-box{background:var(--surface2)}
.status-group--deps .status-group-box{background:transparent}

/* ROW */
.status-row{padding:20px 22px;border-bottom:1px solid var(--border)}
.status-row:last-child{border-bottom:none}
.status-row-top{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap}
.status-name-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.status-name{font-size:15px;font-weight:500;color:var(--text)}
.status-lines{font-family:var(--mono);font-size:12px;color:var(--text3)}

.status-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:var(--radius);border:1px solid;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;line-height:1.5}
.status-chip svg{width:11px;height:11px;flex-shrink:0}
.status-chip--up{color:var(--up);background:var(--up-bg);border-color:var(--up-line)}
.status-chip--degraded{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-line)}
.status-chip--down{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.status-chip--excluded{color:var(--sage);background:var(--sage-bg);border-color:var(--sage-line);border-style:solid}
.status-chip--unknown{color:var(--slate);background:var(--slate-bg);border-color:var(--slate-line);border-style:dashed}
.status-chip-caption{font-size:11px;color:var(--text3);font-weight:400;letter-spacing:0;text-transform:none}

.status-metric{display:inline-flex;align-items:baseline;white-space:nowrap;flex-shrink:0}
.status-metric-pct{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--text);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.status-metric-sep{font-family:var(--mono);color:var(--text4);margin:0 .35em;opacity:.8}
.status-metric-cov{font-family:var(--mono);font-size:11px;color:var(--text2);font-variant-numeric:tabular-nums}
.status-metric-cov-word{font-family:var(--sans);font-size:11px;color:var(--text2);margin-left:3px}
.status-metric-nodata{font-family:var(--mono);font-size:12.5px;color:var(--text3)}

/* BAR STRIP */
.status-bar-block{margin-top:14px}
.status-bar-strip{display:grid;gap:1px;height:22px}
.status-bar-cell{position:relative;height:100%;background:var(--border);overflow:visible}
.status-bar-mark{position:absolute;left:0;right:0;border-radius:0}
.status-bar-mark--up{top:0;bottom:0;background:var(--up-fill)}
.status-bar-mark--degraded{bottom:0;height:55%;background:var(--amber-fill)}
.status-bar-mark--down{top:-3px;bottom:0;background:var(--bad-fill)}
.status-bar-mark--excluded{top:50%;height:2px;transform:translateY(-50%);background:var(--sage-fill)}
.status-bar-mark--unknown{top:0;bottom:0;background:transparent;border:1px dashed var(--slate-fill)}
.status-bar-axis{display:flex;justify-content:space-between;margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--text4)}

/* HISTORY DRAWER */
.status-history-toggle{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--text3);background:none;border:none;cursor:pointer;padding:0;letter-spacing:.04em}
.status-history-toggle:hover{color:var(--gold)}
.status-history-panel{margin-top:12px;padding:14px 16px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;color:var(--text2)}
.status-history-panel ul{list-style:none}
.status-history-panel li{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--border)}
.status-history-panel li:last-child{border-bottom:none}
.status-history-panel time{font-family:var(--mono);font-size:11px;color:var(--text3);flex-shrink:0}
.status-history-loading,.status-history-empty{color:var(--text3);font-family:var(--mono);font-size:12px}

/* INCIDENTS */
.status-incidents-list{display:flex;flex-direction:column;gap:14px}
.status-incident-card{border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;background:var(--surface)}
.status-incident-card.is-resolved{opacity:.72}
.status-incident-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.status-incident-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-incident-title{font-size:15px;font-weight:500;color:var(--text)}
.status-severity{display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--radius);border:1px solid;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.status-severity--minor{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-line)}
.status-severity--major{color:var(--orange);background:var(--orange-bg);border-color:var(--orange-line)}
.status-severity--critical{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-line)}
.status-incident-auto{font-family:var(--mono);font-size:10px;color:var(--text3);border:1px solid var(--border2);border-radius:var(--radius);padding:1px 6px}
.status-incident-time{font-family:var(--mono);font-size:11.5px;color:var(--text3);white-space:nowrap}
.status-incident-toggle{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--text3);background:none;border:none;cursor:pointer;padding:0}
.status-incident-toggle:hover{color:var(--gold)}
.status-incident-timeline{list-style:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.status-incident-timeline li{display:flex;gap:12px;padding:6px 0;font-size:13px;color:var(--text2)}
.status-incident-timeline time{font-family:var(--mono);font-size:11px;color:var(--text3);flex-shrink:0;width:15ch}
.status-incident-empty{font-family:var(--mono);font-size:12.5px;color:var(--text3)}
.status-load-more{margin-top:18px;display:block;width:100%;padding:12px;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-align:center;background:transparent;border:1px solid var(--border2);border-radius:var(--radius);cursor:pointer;transition:all .3s var(--ease)}
.status-load-more:hover{border-color:var(--text3);background:var(--surface2)}
.status-load-more:disabled{opacity:.5;cursor:default}

/* FOOTER */
.status-footer{margin-top:72px;padding-top:24px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:12.5px;color:var(--text3)}
.status-footer a{color:var(--text2)}
.status-footer a:hover{color:var(--gold)}

@media (max-width:640px){
  .status-wrap{padding:40px 18px 72px}
  .status-row{padding:16px 16px}
  .status-hero{margin-bottom:44px}
  .status-group{margin-bottom:40px}
}