:root {
  --ink: #1d2c3a;
  --red: #ad4949;
  --blue: #276b91;
  --cream: #efede3;
  --card: #ffffff;
  --success: #26734d;
  --warning: #a86619;
  --danger: #b84444;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Arial, Helvetica, sans-serif; }
.site-header { min-height: 74px; padding: 14px max(24px, calc((100% - 1050px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--card); border-bottom: 3px solid var(--red); box-shadow: 0 2px 10px rgb(29 44 58 / 8%); }
.brand img { display: block; max-height: 40px; width: auto; }
.back-link { color: var(--red); text-decoration: none; font-weight: 700; }
.container { width: min(100% - 40px, 850px); margin: 64px auto; }
.eyebrow { margin: 0 0 8px; color: var(--red); font-size: .78rem; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.8rem); }
.intro { margin: 14px 0 32px; font-size: 1.05rem; line-height: 1.55; }
.summary, .services, .incidents { background: var(--card); border-radius: 14px; box-shadow: 0 5px 20px rgb(29 44 58 / 8%); }
.summary { display: flex; align-items: center; gap: 17px; padding: 22px 24px; border-left: 5px solid var(--blue); }
.summary p { margin: 4px 0 0; color: #50606d; }
.summary-indicator { flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; background: var(--blue); }
.summary.operational { border-color: var(--success); }.summary.operational .summary-indicator { background: var(--success); }
.summary.degraded { border-color: var(--warning); }.summary.degraded .summary-indicator { background: var(--warning); }
.summary.down, .summary.stale { border-color: var(--danger); }.summary.down .summary-indicator, .summary.stale .summary-indicator { background: var(--danger); }
.services { margin-top: 24px; }
.incidents { margin-top: 24px; overflow: hidden; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 24px; border-bottom: 1px solid #e9e6dc; }
h2 { margin: 0; font-size: 1.2rem; }.section-heading span { color: #667681; font-size: .88rem; }
.service { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 16px; padding: 19px 24px; border-bottom: 1px solid #eeeae2; }.service:last-child { border-bottom: 0; }
.service-info { min-width: 0; }.service-name { font-weight: 700; }.service-meta { margin-top: 4px; font-size: .84rem; color: #667681; }
.availability { grid-column: 1 / -1; display: flex; align-items: end; gap: 2px; min-height: 18px; width: 100%; margin-top: 12px; }.availability-bar { position: relative; display: block; flex: 1 1 0; min-width: 0; height: 15px; border-radius: 1px; background: #c9d0d3; cursor: help; }.availability-bar.operational { background: var(--success); }.availability-bar.degraded { background: var(--warning); }.availability-bar.down { background: var(--danger); }.availability-bar.unknown { background: #d9dedf; }.availability-bar::after { position: absolute; z-index: 5; bottom: calc(100% + 8px); left: 50%; display: none; width: max-content; max-width: 220px; padding: 7px 9px; color: #fff; background: var(--ink); border-radius: 5px; box-shadow: 0 3px 10px rgb(29 44 58 / 20%); content: attr(data-tooltip); font-size: .76rem; font-weight: 600; line-height: 1.3; pointer-events: none; transform: translateX(-50%); }.availability-bar:hover::after, .availability-bar:focus-visible::after { display: block; }
.badge { padding: 6px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }.badge.operational { background: #e6f4eb; color: var(--success); }.badge.degraded { background: #fff0dc; color: var(--warning); }.badge.down { background: #fbeaea; color: var(--danger); }
.incident, .empty-state { margin: 0; padding: 19px 24px; border-bottom: 1px solid #eeeae2; }.incident:last-child { border-bottom: 0; }.incident-title { font-weight: 700; }.incident-meta, .incident-summary { margin-top: 5px; color: #667681; font-size: .88rem; line-height: 1.45; }.empty-state { color: #667681; }
footer { padding: 0 24px 35px; text-align: center; color: #667681; font-size: .85rem; }
@media (max-width: 520px) { .site-header { padding: 14px 20px; }.brand img { max-height: 32px; }.back-link { font-size: .86rem; }.container { width: min(100% - 28px, 850px); margin: 38px auto; }.section-heading { display: block; }.section-heading span { display: block; margin-top: 5px; }.service { padding: 17px; }.availability { gap: 1px; }.availability-bar { height: 13px; } }