:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color: #32363d;
  background: #fff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
a { color: inherit; }

.hero {
  height: 300px;
  background: #3b5bdb;
  color: #fff;
  display: grid;
  place-items: center;
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: clamp(48px, 7.5vw, 78px);
  font-weight: 550;
  letter-spacing: -.065em;
  line-height: 1;
}

.brand-strong { font-weight: 820; }
.brand-icon { width: 86px; height: 86px; flex: none; }
.container { width: min(100% - 36px, 850px); margin-inline: auto; }

.top-actions {
  height: 61px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.preview-pill { color: #697382; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.preview-pill[hidden] { display: none; }

.portal-button {
  display: inline-block;
  padding: 11px 15px;
  border-radius: 4px;
  background: #3b5bdb;
  box-shadow: 0 1px 3px #0002;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .16em;
  text-decoration: none;
}

.portal-button:hover { background: #2f4dc9; }
.portal-button:focus-visible { outline: 3px solid #1a367f; outline-offset: 3px; }

.summary {
  min-height: 66px;
  padding: 17px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 4px;
  background: #329455;
  color: #fff;
}

.summary[data-status="degraded"] { background: #d79a28; }
.summary[data-status="outage"] { background: #cf4c55; }
.summary[data-status="unknown"] { background: #7f8998; }
.summary h1 { margin: 0; font-size: 19px; line-height: 1.2; font-weight: 700; }
.summary span { font-size: 11px; opacity: .9; text-align: right; }

.uptime-intro {
  margin: 98px 0 8px;
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
  color: #62676e;
}

.uptime-intro span { color: #3b5bdb; }
.component-list { border: 1px solid #d9dde3; border-radius: 4px; overflow: hidden; }
.group-heading {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid #e3e5e9;
  background: #f7f8fa;
  color: #777e89;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.group-heading:first-child { border-top: 0; }
.component { padding: 19px 20px 17px; border-top: 1px solid #e3e5e9; }
.component-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 9px; }
.component-name h3 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 650; }
.component-name p { margin: 3px 0 0; font-size: 11px; color: #89919a; }
.component-status { white-space: nowrap; font-size: 14px; color: #2d8e50; }
.component-status.degraded { color: #b77912; }
.component-status.outage { color: #c94a52; }
.component-status.unknown, .component-status.disabled { color: #8d96a1; }

.uptime-bars {
  display: grid;
  grid-template-columns: repeat(90, minmax(0, 1fr));
  gap: 3px;
  height: 34px;
}

.uptime-bar { min-width: 0; background: #319656; }
.uptime-bar.degraded { background: #e0a438; }
.uptime-bar.outage { background: #d2575d; }
.uptime-bar.unknown, .uptime-bar.no-data { background: #dbe0e5; }
.uptime-bar:hover { outline: 2px solid #3b5bdb; outline-offset: 1px; }
.component-foot { display: flex; align-items: center; gap: 13px; margin-top: 8px; color: #666d75; font-size: 12px; white-space: nowrap; }
.foot-rule { height: 1px; min-width: 8px; flex: 1; background: #b4b9c0; }
.uptime-percent { text-align: center; }
.history-key { display: flex; flex-wrap: wrap; gap: 20px; margin: 17px 0 0; color: #767e88; font-size: 11px; }
.history-key span { display: inline-flex; align-items: center; gap: 6px; }
.key-dot { display: inline-block; width: 9px; height: 9px; background: #319656; }
.key-dot.degraded { background: #e0a438; }
.key-dot.outage { background: #d2575d; }
.key-dot.no-data { background: #dbe0e5; }

.incidents { margin-top: 94px; }
.incidents h2 { margin: 0 0 27px; color: #696f78; font-size: 16px; font-weight: 750; letter-spacing: .04em; }
.incident-date { margin: 0; padding: 0 0 15px; border-bottom: 1px solid #e0e3e7; font-size: 16px; font-weight: 650; }
.incident-date:not(:first-child) { margin-top: 30px; }
.empty { margin: 14px 0 0; color: #777f89; font-size: 13px; }
.incident-entry { padding: 14px 0 2px; }
.incident-entry strong { color: #3b5bdb; font-size: 14px; }
.incident-entry p { margin: 5px 0 0; color: #6f7782; font-size: 12px; }
.footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 110px; padding: 25px 0 38px; border-top: 1px solid #e5e8ec; color: #929aa4; font-size: 12px; }

@media (max-width: 650px) {
  .hero { height: 225px; }
  .hero-brand { gap: 13px; font-size: 48px; }
  .brand-icon { width: 56px; height: 56px; }
  .summary { align-items: flex-start; flex-direction: column; }
  .summary span { text-align: left; }
  .uptime-intro { margin-top: 68px; text-align: left; }
  .component { padding: 15px 12px; }
  .group-heading { padding-inline: 12px; }
  .component-name h3 { font-size: 14px; }
  .component-status { font-size: 11px; }
  .uptime-bars { gap: 1px; height: 28px; }
  .component-foot { gap: 7px; font-size: 10px; }
  .footer { flex-direction: column; }
}