:root {
  --font-sans: "Inter", "Helvetica Neue", Arial, system-ui, -apple-system, "Segoe UI", sans-serif;
}

html.theme-light {
  --bg: #f4f5f6;
  --surface: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --line: #e5e7eb;
  --row-line: #eceff3;
  --button-bg: #111827;
  --button-fg: #ffffff;
  --button-border: #111827;
  --ghost-bg: #ffffff;
  --ghost-fg: #111827;
  --ghost-border: #d1d5db;
  --ok-dot: #21bf81;
  --ok-banner-border: #78d7b0;
  --ok-banner-bg: #d6f3e7;
  --ok-banner-fg: #1b7f56;
  --ok-banner-copy: #2d4a3d;
  --cell-up: #20bf84;
  --cell-degraded: #f7b13f;
  --cell-down: #ed7e72;
}

html.theme-dark {
  --bg: #000000;
  --surface: #000000;
  --text: #ffffff;
  --muted: #b8beca;
  --line: #2a2a2a;
  --row-line: #1f1f1f;
  --button-bg: #ffffff;
  --button-fg: #000000;
  --button-border: #ffffff;
  --ghost-bg: #000000;
  --ghost-fg: #ffffff;
  --ghost-border: #585858;
  --ok-dot: #21bf81;
  --ok-banner-border: #2f8f63;
  --ok-banner-bg: #0f2e22;
  --ok-banner-fg: #97ebc7;
  --ok-banner-copy: #c9eddc;
  --cell-up: #20bf84;
  --cell-degraded: #f7b13f;
  --cell-down: #ed7e72;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}

.page {
  width: min(680px, calc(100% - 24px));
  margin: 22px auto 64px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-logo {
  width: 188px;
  height: auto;
  display: block;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle,
.subscribe-btn {
  border-radius: 8px;
  height: 34px;
  padding: 0 12px;
  font: 600 13px/1 var(--font-sans);
  cursor: pointer;
}

.theme-toggle {
  border: 1px solid var(--ghost-border);
  background: var(--ghost-bg);
  color: var(--ghost-fg);
}

.subscribe-btn {
  border: 1px solid var(--button-border);
  background: var(--button-bg);
  color: var(--button-fg);
}

.overall-banner {
  margin-top: 16px;
  border: 1px solid var(--ok-banner-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.banner-title {
  margin: 0;
  padding: 13px 14px;
  background: var(--ok-banner-bg);
  color: var(--ok-banner-fg);
  font-size: 17px;
  font-weight: 600;
}

.banner-copy {
  margin: 0;
  padding: 11px 14px;
  color: var(--ok-banner-copy);
  font-size: 14px;
  border-top: 1px solid var(--line);
}

.overall-banner.warn {
  border-color: #c79a3e;
}

.overall-banner.warn .banner-title {
  background: #ffe8bf;
  color: #7c4b00;
}

.overall-banner.warn .banner-copy {
  color: #5b3a08;
}

html.theme-dark .overall-banner.warn .banner-title {
  background: #382a11;
  color: #ffd89c;
}

html.theme-dark .overall-banner.warn .banner-copy {
  color: #e8cb9f;
}

.overall-banner.danger {
  border-color: #d38888;
}

.overall-banner.danger .banner-title {
  background: #ffe2e2;
  color: #8a2020;
}

.overall-banner.danger .banner-copy {
  color: #632525;
}

html.theme-dark .overall-banner.danger .banner-title {
  background: #391b1b;
  color: #ffc0c0;
}

html.theme-dark .overall-banner.danger .banner-copy {
  color: #e7cccc;
}

.status-card {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.status-card-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.status-card-header h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
}

.status-card-header p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.service-list {
  padding: 0;
}

.category-section {
  border-bottom: 1px solid var(--line);
}

.category-section:last-child {
  border-bottom: 0;
}

.category-title {
  margin: 0;
  padding: 12px 14px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.service-item {
  border-bottom: 1px solid var(--row-line);
}

.service-item:last-child {
  border-bottom: 0;
}

.service-summary {
  list-style: none;
  cursor: pointer;
  padding: 11px 12px 10px;
}

.service-summary::-webkit-details-marker {
  display: none;
}

.service-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.service-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.status-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ok-dot);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}

.status-dot.degraded {
  background: #f4b43f;
}

.status-dot.partial_outage,
.status-dot.major_outage {
  background: #e66f61;
}

/* Neutral slate for intentionally-parked / not-launched services (status "maintenance"): never
   red or amber, so a parked service never reads as an incident. */
.status-dot.maintenance {
  background: #94a3b8;
}

html.theme-dark .status-dot.maintenance {
  background: #64748b;
}

/* "Not launched" badge shown next to the name of a maintenance/parked service. */
.badge-maintenance {
  align-self: center;
  border: 1px solid #cbd5e1;
  background: #f1f5f9;
  color: #475569;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
}

html.theme-dark .badge-maintenance {
  border-color: #475569;
  background: #1e293b;
  color: #cbd5e1;
}

.service-name {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text);
}

.service-info {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  border: 1px solid var(--ghost-border);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}

.service-components {
  color: var(--muted);
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.service-components::after {
  content: "\25BE";
  font-size: 10px;
  transform: translateY(1px);
  transition: transform 180ms ease;
}

.service-item[open] .service-components::after {
  transform: rotate(180deg) translateY(1px);
}

.service-right {
  display: flex;
  align-items: center;
}

.service-uptime {
  font-size: 25px;
  color: var(--muted);
  white-space: nowrap;
}

.uptime-strip {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(90, minmax(2px, 1fr));
  gap: 2px;
}

.uptime-cell {
  height: 16px;
  border-radius: 1px;
  background: rgba(130, 130, 130, 0.34);
}

.uptime-cell.up {
  background: var(--cell-up);
}

.uptime-cell.degraded {
  background: var(--cell-degraded);
}

.uptime-cell.down {
  background: var(--cell-down);
}

.service-details {
  border-top: 1px solid var(--line);
  padding: 10px 14px 14px;
}

.service-detail-meta,
.service-detail-description,
.service-detail-list {
  color: var(--muted);
}

.service-detail-meta,
.service-detail-description {
  margin: 0;
  font-size: 14px;
}

.service-detail-description {
  margin-top: 6px;
}

.service-detail-list {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 14px;
}

.service-detail-list li {
  margin-top: 4px;
}

.history-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.history-toggle {
  border: 1px solid var(--ghost-border);
  background: var(--ghost-bg);
  color: var(--ghost-fg);
  border-radius: 8px;
  height: 36px;
  padding: 0 16px;
  font: 600 14px/1 var(--font-sans);
  cursor: pointer;
}

.hidden {
  display: none;
}

.history-section {
  margin-top: 20px;
}

.history-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}

.history-column h2,
.history-column h3 {
  margin: 0 0 10px;
  font-weight: 600;
  color: var(--text);
}

.history-column h2 {
  font-size: 21px;
}

.history-column h3 {
  font-size: 17px;
}

.history-list,
.maintenance-list {
  display: grid;
  gap: 10px;
}

.incident-item,
.maintenance-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.incident-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.incident-item summary::-webkit-details-marker {
  display: none;
}

.incident-title {
  font-size: 15px;
  font-weight: 600;
}

.incident-pill {
  border: 1px solid;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.incident-pill.minor {
  color: #9d6300;
  border-color: #ffcf87;
  background: #fff5e6;
}

.incident-pill.major,
.incident-pill.critical {
  color: #9f2d2d;
  border-color: #f4b1b1;
  background: #fff0f0;
}

html.theme-dark .incident-pill.minor {
  color: #ffd08a;
  border-color: #8f6a2d;
  background: #2f230f;
}

html.theme-dark .incident-pill.major,
html.theme-dark .incident-pill.critical {
  color: #ffb7b7;
  border-color: #885050;
  background: #321919;
}

.incident-time,
.incident-summary,
.incident-updates,
.maintenance-window,
.maintenance-summary {
  color: var(--muted);
  font-size: 14px;
}

.incident-time,
.incident-summary,
.maintenance-window,
.maintenance-summary {
  margin: 8px 0 0;
}

.incident-updates {
  margin: 8px 0 0;
  padding-left: 18px;
}

.incident-updates li {
  margin-top: 4px;
}

.maintenance-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.maintenance-title {
  margin: 0;
  font-size: 15px;
}

.maintenance-status {
  border-radius: 999px;
  border: 1px solid #bfd1f7;
  background: #edf3ff;
  color: #3257a3;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 8px;
}

html.theme-dark .maintenance-status {
  color: #b8d1ff;
  border-color: #4d6290;
  background: #16233f;
}

@media (max-width: 760px) {
  .page {
    width: calc(100% - 16px);
    margin-top: 12px;
  }

  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand-logo {
    width: 170px;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .status-card-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-summary-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-right {
    width: 100%;
    justify-content: flex-end;
  }

  .service-name {
    font-size: 16px;
  }

  .service-components {
    font-size: 14px;
  }

  .service-uptime {
    font-size: 14px;
  }

  .uptime-strip {
    grid-template-columns: repeat(60, minmax(2px, 1fr));
  }

  .history-columns {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}