/* ZebraByte Status reading scale.
 * A deliberate sizing and spacing layer for desktop, tablet and mobile.
 * It does not alter status semantics or the editorial structure.
 */

html:root {
  --width: 1240px;
}

html body {
  font-size: 15px;
  line-height: 1.5;
}

/* Header and global page width */
body .topbar-inner,
body .page-shell,
body .footer-inner {
  width: min(var(--width), calc(100% - 56px));
}

body .topbar-inner {
  min-height: 76px;
  gap: 14px;
}

body .brand img {
  width: 118px;
  max-height: 38px;
}

body .brand-divider {
  height: 26px;
}

body .status-name {
  font-size: 14px;
  font-weight: 640;
}

body .nav a,
body .support-link {
  font-size: 13.5px;
}

body .nav a {
  padding: 10px 12px;
}

body .language-switch {
  font-size: 12px;
}

body .secondary-button,
body .primary-button {
  min-height: 40px;
  padding-inline: 16px;
  font-size: 13px;
}

/* Shared headings and supporting copy */
body .eyebrow {
  font-size: 12.5px;
}

body .section-heading h2,
body .event-section-heading h2,
body .maintenance-section-heading h2,
body .category-overview-heading h2 {
  font-size: 21px;
  line-height: 1.28;
}

body .section-heading p,
body .page-heading > p:not(.eyebrow),
body .overall-description {
  font-size: 14.5px;
}

body .text-link,
.view[data-view="status"] .section-heading .text-link {
  font-size: 13px;
}

/* Overview hero */
.view[data-view="status"] .overall {
  min-height: 228px;
  padding-top: 58px;
  padding-bottom: 44px;
  gap: 52px;
}

.view[data-view="status"] .overall-main {
  gap: 30px;
}

.view[data-view="status"] .status-orb {
  width: 68px;
  height: 68px;
  flex-basis: 68px;
}

.view[data-view="status"] .status-orb-core {
  width: 15px;
  height: 15px;
}

.view[data-view="status"] .overall-copy h1 {
  font-size: 34px;
  line-height: 1.14;
  letter-spacing: -.038em;
}

.view[data-view="status"] .overall-description {
  max-width: 720px;
  margin-top: 12px;
  line-height: 1.65;
}

.view[data-view="status"] .updated-at {
  font-size: 11.5px;
}

.view[data-view="status"] .active-incidents-summary {
  margin-top: 22px;
}

.view[data-view="status"] .active-incident-item {
  padding-top: 14px;
  padding-bottom: 15px;
}

.view[data-view="status"] .active-incident-title {
  font-size: 13.5px;
}

.view[data-view="status"] .active-incident-services {
  font-size: 11.5px;
}

/* Overview sections */
.view[data-view="status"] .maintenance-section,
.view[data-view="status"] .category-overview-section,
.view[data-view="status"] .recent-section {
  padding-top: 40px;
  padding-bottom: 44px;
}

.view[data-view="status"] .maintenance-section-heading,
.view[data-view="status"] .category-overview-heading,
.view[data-view="status"] .recent-section .section-heading {
  margin-bottom: 18px;
}

.view[data-view="status"] .maintenance-preview .event-row {
  grid-template-columns: 142px minmax(0, 1fr) 112px;
  gap: 28px;
  padding-top: 20px;
  padding-bottom: 21px;
}

.view[data-view="status"] .maintenance-preview .event-date {
  font-size: 11.5px;
}

.view[data-view="status"] .maintenance-preview .event-title {
  font-size: 15.5px;
}

.view[data-view="status"] .maintenance-preview .event-affected,
.view[data-view="status"] .maintenance-preview .event-state {
  font-size: 11.5px;
}

.view[data-view="status"] .category-summary-row {
  min-height: 100px;
  gap: 14px;
  padding: 18px 24px 19px;
}

.view[data-view="status"] .category-summary-copy h3 {
  font-size: 14.5px;
}

.view[data-view="status"] .category-summary-meta,
.view[data-view="status"] .category-summary-state,
.view[data-view="status"] .category-summary-issue {
  font-size: 11.5px;
}

.view[data-view="status"] #events-preview .event-row {
  padding-top: 19px;
  padding-bottom: 20px;
}

.view[data-view="status"] #events-preview .event-date,
.view[data-view="status"] #events-preview .event-state,
.view[data-view="status"] #events-preview .event-affected {
  font-size: 11.5px;
}

.view[data-view="status"] #events-preview .event-title {
  font-size: 15px;
}

/* Detailed page headings */
.view[data-view="monitors"] .page-heading,
.view[data-view="events"] .page-heading {
  padding-top: 66px;
  padding-bottom: 44px;
}

.view[data-view="monitors"] .page-heading h1,
.view[data-view="events"] .page-heading h1 {
  font-size: 38px;
  line-height: 1.12;
}

.view[data-view="monitors"] .page-heading .eyebrow,
.view[data-view="events"] .page-heading .eyebrow {
  font-size: 11.5px;
}

/* Services: readable technical inventory */
.view[data-view="monitors"] .monitor-list-section {
  padding-top: 32px;
  padding-bottom: 50px;
}

.view[data-view="monitors"] .service-legend {
  gap: 10px 17px;
  font-size: 11.5px;
}

.view[data-view="monitors"] .legend-note {
  font-size: 11px;
}

.view[data-view="monitors"] .monitor-legend {
  margin-bottom: 23px;
  padding-bottom: 20px;
}

.view[data-view="monitors"] .column-headings {
  gap: 22px;
  font-size: 11px;
}

.view[data-view="monitors"] .monitor-columns,
.view[data-view="monitors"] .service-row {
  grid-template-columns: minmax(230px, 1.05fr) minmax(300px, 1.45fr) 90px 92px 116px;
  gap: 22px;
}

body.response-metrics-empty .view[data-view="monitors"] .monitor-columns,
body.response-metrics-empty .view[data-view="monitors"] .service-row {
  grid-template-columns: minmax(240px, 1.05fr) minmax(320px, 1.55fr) 100px 120px;
  gap: 24px;
}

.view[data-view="monitors"] .service-group {
  padding-top: 38px;
  padding-bottom: 16px;
}

.view[data-view="monitors"] .service-group + .service-group {
  margin-top: 13px;
}

.view[data-view="monitors"] .service-group-head {
  padding-bottom: 15px;
}

.view[data-view="monitors"] .service-group-head h3 {
  font-size: 12.5px;
  line-height: 1.4;
}

.view[data-view="monitors"] .group-meta {
  font-size: 11px;
}

.view[data-view="monitors"] .service-row {
  min-height: 70px;
}

.view[data-view="monitors"] .service-name {
  font-size: 15px;
  font-weight: 580;
}

.view[data-view="monitors"] .service-check {
  margin-top: 5px;
  font-size: 11.5px;
}

.view[data-view="monitors"] .service-number,
.view[data-view="monitors"] .service-state {
  font-size: 13px;
}

.view[data-view="monitors"] .uptime-strip {
  height: 20px;
  gap: 2.5px;
}

/* Incident and maintenance detail */
.view[data-view="events"] .event-section {
  padding-top: 40px;
  padding-bottom: 48px;
}

.view[data-view="events"] .event-section-heading {
  margin-bottom: 18px;
}

.view[data-view="events"] .event-section-heading > span {
  font-size: 12.5px;
}

.view[data-view="events"] .event-detail {
  padding-top: 29px;
  padding-bottom: 33px;
}

.view[data-view="events"] .event-detail-side .event-kind,
.view[data-view="events"] .event-detail-title time,
.view[data-view="events"] .event-update-time {
  font-size: 11px;
}

.view[data-view="events"] .event-detail-state,
.view[data-view="events"] .event-update-status,
.view[data-view="events"] .event-affected {
  font-size: 11.5px;
}

.view[data-view="events"] .event-detail-title h3 {
  font-size: 17.5px;
  line-height: 1.45;
}

.view[data-view="events"] .event-timeline {
  margin-top: 18px;
}

.view[data-view="events"] .event-update + .event-update {
  margin-top: 21px;
  padding-top: 21px;
}

.view[data-view="events"] .event-update p {
  max-width: 920px;
  font-size: 14px;
  line-height: 1.72;
}

/* Footer and subscription UI */
body .footer-inner {
  min-height: 82px;
  font-size: 12px;
}

body .modal-heading h2 {
  font-size: 19px;
}

body .modal-heading p,
body .subscription-pane p,
body .subscription-message {
  font-size: 13px;
}

body .subscription-tabs button {
  font-size: 13px;
}

body .subscription-privacy {
  font-size: 11px;
}

@media (max-width: 900px) {
  body .topbar-inner,
  body .page-shell,
  body .footer-inner {
    width: min(var(--width), calc(100% - 36px));
  }

  body .topbar-inner {
    min-height: 68px;
  }

  body .status-name {
    font-size: 13.5px;
  }

  body .mobile-nav a {
    font-size: 12.5px;
  }

  .view[data-view="status"] .overall {
    min-height: 0;
    padding-top: 42px;
    padding-bottom: 34px;
  }

  .view[data-view="status"] .overall-copy h1 {
    font-size: 30px;
  }

  .view[data-view="monitors"] .page-heading,
  .view[data-view="events"] .page-heading {
    padding-top: 48px;
    padding-bottom: 34px;
  }

  .view[data-view="monitors"] .page-heading h1,
  .view[data-view="events"] .page-heading h1 {
    font-size: 32px;
  }

  .view[data-view="monitors"] .service-row {
    min-height: 0;
    padding-top: 17px;
    padding-bottom: 18px;
  }

  .view[data-view="monitors"] .service-name {
    font-size: 14.5px;
  }

  .view[data-view="monitors"] .service-check,
  .view[data-view="monitors"] .group-meta,
  .view[data-view="monitors"] .service-legend,
  .view[data-view="monitors"] .legend-note {
    font-size: 11px;
  }

  .view[data-view="monitors"] .service-number,
  .view[data-view="monitors"] .service-state {
    font-size: 12.5px;
  }
}

@media (max-width: 680px) {
  html body {
    font-size: 14.5px;
  }

  body .topbar-inner,
  body .page-shell,
  body .footer-inner {
    width: calc(100% - 28px);
  }

  body .topbar-inner {
    min-height: 64px;
  }

  body .brand img {
    width: 104px;
    max-height: 34px;
  }

  body .status-name {
    font-size: 13px;
  }

  .view[data-view="status"] .overall {
    padding-top: 34px;
    padding-bottom: 30px;
    gap: 22px;
  }

  .view[data-view="status"] .overall-main {
    gap: 18px;
  }

  .view[data-view="status"] .status-orb {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .view[data-view="status"] .overall-copy h1 {
    font-size: 27px;
    line-height: 1.16;
  }

  .view[data-view="status"] .overall-description {
    font-size: 14px;
  }

  .view[data-view="status"] .updated-at {
    font-size: 11px;
  }

  body .section-heading h2,
  body .event-section-heading h2,
  body .maintenance-section-heading h2,
  body .category-overview-heading h2 {
    font-size: 19.5px;
  }

  .view[data-view="status"] .maintenance-section,
  .view[data-view="status"] .category-overview-section,
  .view[data-view="status"] .recent-section {
    padding-top: 28px;
    padding-bottom: 30px;
  }

  .view[data-view="status"] .section-heading .text-link {
    font-size: 11.5px;
  }

  .view[data-view="status"] .maintenance-preview .event-date,
  .view[data-view="status"] .maintenance-preview .event-affected,
  .view[data-view="status"] .maintenance-preview .event-state,
  .view[data-view="status"] .category-summary-meta,
  .view[data-view="status"] .category-summary-state,
  .view[data-view="status"] .category-summary-issue,
  .view[data-view="status"] #events-preview .event-date,
  .view[data-view="status"] #events-preview .event-state,
  .view[data-view="status"] #events-preview .event-affected {
    font-size: 11px;
  }

  .view[data-view="status"] .maintenance-preview .event-title,
  .view[data-view="status"] #events-preview .event-title,
  .view[data-view="status"] .category-summary-copy h3 {
    font-size: 14px;
  }

  .view[data-view="status"] .category-summary-row,
  .view[data-view="status"] .category-summary-row:first-child,
  .view[data-view="status"] .category-summary-row:last-child {
    padding-top: 14px;
    padding-bottom: 15px;
  }

  .view[data-view="monitors"] .page-heading,
  .view[data-view="events"] .page-heading {
    padding-top: 38px;
    padding-bottom: 28px;
  }

  .view[data-view="monitors"] .page-heading h1,
  .view[data-view="events"] .page-heading h1 {
    font-size: 29px;
  }

  .view[data-view="monitors"] .page-heading > p:not(.eyebrow),
  .view[data-view="events"] .page-heading > p:not(.eyebrow) {
    font-size: 13.5px;
  }

  .view[data-view="monitors"] .service-group {
    padding-top: 29px;
  }

  .view[data-view="monitors"] .service-group-head h3 {
    font-size: 11.5px;
  }

  .view[data-view="monitors"] .service-name {
    font-size: 14px;
  }

  .view[data-view="monitors"] .service-check,
  .view[data-view="monitors"] .group-meta {
    font-size: 10.5px;
  }

  .view[data-view="monitors"] .service-number,
  .view[data-view="monitors"] .service-state {
    font-size: 12px;
  }

  .view[data-view="events"] .event-detail-title h3 {
    font-size: 16px;
  }

  .view[data-view="events"] .event-update p {
    font-size: 13.5px;
  }

  body .footer-inner {
    min-height: 72px;
    font-size: 11.5px;
  }
}