/* Concorbit Platform Status — public renderer styling. On-brand with the ops command centre
   (anthracite + cool-grey + warm cream + teal/brass) but standalone: no external fonts/assets. */
:root {
  --base: #1C1F1B; --surface: #232622; --panel: #262924; --border: #3F423C; --hair: #383B34;
  --text: #E8DFC6; --muted: #A89F88; --eyebrow: #AAA490;
  --accent: #6FA8AA; --brass: #C8A86A;
  --ok: #34d399; --warn: #fbbf24; --partial: #fb923c; --bad: #f87171; --maint: #60a5fa; --idle: #A89F88;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(111,168,170,0.06), transparent 60%),
    var(--base);
  color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 820px; margin: 0 auto; padding: 38px 22px 60px; }

.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .mk { width: 20px; height: 20px; background: var(--accent); box-shadow: 0 0 16px rgba(111,168,170,0.4); position: relative; flex: none; }
.brand .mk::after { content: ""; position: absolute; inset: 6px; border: 1.5px solid var(--base); }
.brand .bn { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.brand .bt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); border-left: 1px solid var(--hair); padding-left: 10px; }
.updated { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.banner { display: flex; align-items: center; gap: 13px; padding: 20px 22px; border: 1px solid var(--border); border-left-width: 3px; margin-bottom: 18px; background: var(--surface); }
.banner .bdot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--idle); }
.banner .btext { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.banner.operational { border-left-color: var(--ok); } .banner.operational .bdot { background: var(--ok); box-shadow: 0 0 12px rgba(52,211,153,0.6); } .banner.operational .btext { color: #b8f0d8; }
.banner.degraded { border-left-color: var(--warn); } .banner.degraded .bdot { background: var(--warn); } .banner.degraded .btext { color: #ffe6ad; }
.banner.partial_outage { border-left-color: var(--partial); } .banner.partial_outage .bdot { background: var(--partial); } .banner.partial_outage .btext { color: #ffd2ad; }
.banner.major_outage { border-left-color: var(--bad); } .banner.major_outage .bdot { background: var(--bad); } .banner.major_outage .btext { color: #ffc9c9; }
.banner.maintenance { border-left-color: var(--maint); } .banner.maintenance .bdot { background: var(--maint); } .banner.maintenance .btext { color: #bcd7fb; }
.banner.unknown { border-left-color: var(--muted); } .banner.unknown .btext { color: var(--muted); }
.banner.loading .btext { color: var(--muted); }

.notice { padding: 11px 14px; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.3); border-left-width: 3px; color: #ffe6ad; font-size: 13px; margin-bottom: 18px; }

.components { display: flex; flex-direction: column; gap: 12px; }
.group { border: 1px solid var(--border); background: var(--panel); }
.group-head { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border-bottom: 1px solid var(--hair); }
.group-name { font-weight: 600; font-size: 15px; flex: 1; }
.group-status, .comp-status { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
.comp { display: flex; align-items: center; gap: 11px; padding: 11px 16px; border-bottom: 1px solid var(--hair); }
.comp:last-child { border-bottom: 0; }
.comp-name { flex: 1; font-size: 14px; }
.comp-desc { color: var(--muted); font-size: 12px; flex: 2; }

.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--idle); }
.dot.operational, .group-status.operational, .comp-status.operational { color: var(--ok); }
.dot.operational { background: var(--ok); box-shadow: 0 0 8px rgba(52,211,153,0.5); }
.dot.degraded { background: var(--warn); } .group-status.degraded, .comp-status.degraded { color: var(--warn); }
.dot.partial_outage { background: var(--partial); } .group-status.partial_outage, .comp-status.partial_outage { color: var(--partial); }
.dot.major_outage { background: var(--bad); } .group-status.major_outage, .comp-status.major_outage { color: var(--bad); }
.dot.maintenance { background: var(--maint); } .group-status.maintenance, .comp-status.maintenance { color: var(--maint); }

.incidents { margin-top: 26px; }
.sect { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eyebrow); margin: 0 0 12px; }
.incident { border: 1px solid var(--border); border-left: 3px solid var(--warn); background: var(--panel); padding: 14px 16px; margin-bottom: 10px; }
.incident.major { border-left-color: var(--partial); } .incident.critical { border-left-color: var(--bad); }
.inc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.inc-state { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass); border: 1px solid rgba(200,168,106,0.35); padding: 1px 7px; }
.inc-title { font-weight: 600; }
.inc-update { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; color: var(--muted); }
.inc-at { font-family: var(--mono); font-size: 11px; flex: none; width: 64px; }

.foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--muted); }
.verified { font-family: var(--mono); font-size: 11px; }
.verified.ok { color: var(--ok); } .verified.bad { color: var(--bad); }