/* Status page, sc synergy brand (ai-os/kernel/identity/visual-identity.md). Self-hosted fonts only. */
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("fonts/outfit-400.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("fonts/outfit-600.woff2") format("woff2"); }
@font-face { font-family: "Orbitron"; font-weight: 700; font-display: swap; src: url("fonts/orbitron-700.woff2") format("woff2"); }

:root {
  --navy: #072238;
  --red: #E4032E;
  --cyan: #69E3F5;
  --lightblue: #C8EBF5;
  --bg: #f4f8fa;
  --card: #ffffff;
  --text: #072238;
  --muted: #4d6475;
  --line: #d5e3ea;
  --ok: #1d7a4c;
  --degraded: #b26a00;
  --partial: #d4500f;
  --major: #E4032E;
  --maint: #1f6fa8;
  --nodata: #d5dde2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #04131f;
    --card: #072238;
    --text: #eaf4f8;
    --muted: #a9c3d1;
    --line: #17384f;
    --ok: #3fbf7f;
    --degraded: #e0a030;
    --partial: #f07a3a;
    --maint: #69E3F5;
    --nodata: #24445a;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }
h1, h2 { font-family: "Orbitron", "Outfit", system-ui, sans-serif; font-weight: 700; letter-spacing: .02em; }
h3 { font-weight: 600; font-size: 1.05rem; margin: 0; }
a { color: inherit; }

.top { background: var(--navy); color: #fff; border-bottom: 4px solid var(--red); }
.top .wrap { display: flex; align-items: center; gap: 20px; padding-top: 18px; padding-bottom: 18px; flex-wrap: wrap; }
.logo { height: 44px; width: auto; }
.top h1 { font-size: 1.1rem; margin: 0; color: var(--lightblue); }

main section { margin: 28px 0; }
main h2 { font-size: 1rem; margin: 0 0 12px; text-transform: uppercase; }
h2.group { font-family: "Outfit", system-ui, sans-serif; text-transform: none; font-weight: 600; color: var(--muted); margin-top: 20px; }

.banner { border-radius: 8px; padding: 18px 20px; color: #fff; font-weight: 600; font-size: 1.15rem; background: var(--muted); }
.banner p { margin: 0; }
.banner.lvl-operational { background: var(--ok); }
.banner.lvl-maintenance { background: var(--maint); }
.banner.lvl-degraded { background: var(--degraded); }
.banner.lvl-partial_outage { background: var(--partial); }
.banner.lvl-major_outage { background: var(--major); }
.banner.lvl-unknown { background: var(--navy); }

.card { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--muted); border-radius: 8px; padding: 14px 16px; margin: 0 0 12px; }
.card.lvl-maintenance { border-left-color: var(--maint); }
.card.lvl-degraded { border-left-color: var(--degraded); }
.card.lvl-partial_outage { border-left-color: var(--partial); }
.card.lvl-major_outage { border-left-color: var(--major); }
.card p { margin: 6px 0 0; }
.meta { color: var(--muted); font-size: .92rem; }
.updates { list-style: none; margin: 10px 0 0; padding: 0; }
.updates li { border-top: 1px solid var(--line); padding: 8px 0 2px; }
.upd-head { color: var(--muted); font-size: .92rem; }
.upd-head strong { color: var(--text); }

.badge { display: inline-block; border-radius: 999px; padding: 1px 10px; font-size: .85rem; font-weight: 600; color: #fff; background: var(--muted); white-space: nowrap; }
.badge.lvl-operational { background: var(--ok); }
.badge.lvl-maintenance { background: var(--maint); }
.badge.lvl-degraded { background: var(--degraded); }
.badge.lvl-partial_outage { background: var(--partial); }
.badge.lvl-major_outage { background: var(--major); }
@media (prefers-color-scheme: dark) { .badge.lvl-maintenance, .banner.lvl-maintenance { color: var(--navy); } }

.comps { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.comp { padding: 14px 16px; border-top: 1px solid var(--line); }
.comp:first-child { border-top: 0; }
.comp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.desc { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }

.bars { display: flex; gap: 2px; margin-top: 10px; height: 28px; }
.day { flex: 1; border-radius: 2px; background: var(--nodata); }
.day.lvl-operational { background: var(--ok); }
.day.lvl-maintenance { background: var(--maint); }
.day.lvl-degraded { background: var(--degraded); }
.day.lvl-partial_outage { background: var(--partial); }
.day.lvl-major_outage { background: var(--major); }
.bars-legend { display: flex; justify-content: space-between; margin: 4px 0 0; color: var(--muted); font-size: .8rem; }
/* phones: last 30 days only */
@media (max-width: 600px) {
  .day:nth-child(-n+60) { display: none; }
  .bars-legend span:first-child { visibility: hidden; }
}

.empty { color: var(--muted); }
footer { color: var(--muted); font-size: .85rem; padding-bottom: 32px; border-top: 1px solid var(--line); }