/* ZebraByte enterprise status UX layer.
 * Adds hierarchy and clarity without changing the canonical status engine.
 */

.section-kicker {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Product header: ZebraByte Status is a product identity, not a loose label. */
.topbar-inner { min-height: 70px; }
.brand-divider { height: 24px; }
.status-product {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 2px;
  white-space: nowrap;
}
.status-name {
  color: var(--text);
  font-size: 13px;
  line-height: 1;
  font-weight: 640;
  letter-spacing: -.015em;
}
.nav a { position: relative; }
.nav a.active::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: -18px;
  height: 1px;
  background: var(--text);
}

/* Global composition: one document rhythm across Overview, Services and Events. */
.page-heading {
  width: 100%;
  max-width: none;
  padding-top: 62px;
  padding-bottom: 42px;
}
.page-heading > h1,
.page-heading > p {
  max-width: 720px;
}
.page-heading .eyebrow {
  max-width: none;
  margin-bottom: 14px;
  color: #737970;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.page-heading h1 {
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -.042em;
}
.page-heading > p:not(.eyebrow) {
  max-width: 680px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
}
.page-heading-events { padding-top: 66px; }

/* Visible keyboard focus without adding permanent chrome. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(20,30,18,.55);
  outline-offset: 3px;
}

/* Hero: keep the Probo restraint, but give the live signal more authority. */
.overall {
  min-height: 205px;
  padding-top: 54px;
  padding-bottom: 40px;
}
.overall-main { gap: 27px; }
.status-orb { width: 64px; height: 64px; flex-basis: 64px; }
.status-orb-core { width: 14px; height: 14px; }
.overall-copy h1 { font-size: 31px; }

/* Active incidents are operational summaries, never decorative cards. */
.active-incidents-summary {
  display: block;
  max-width: 690px;
  margin-top: 20px;
  border-top: 1px solid var(--border-mid);
}
.active-incident-item {
  min-width: 0;
  max-width: none;
  padding: 12px 0 13px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.active-incident-item.degraded { border-left: 2px solid var(--amber); }
.active-incident-item.outage { border-left: 2px solid var(--red); }
.active-incident-title { font-size: 12px; line-height: 1.45; font-weight: 620; }
.active-incident-services { margin-top: 5px; font-size: 10px; line-height: 1.45; }

/* Maintenance is part of the page flow, not a floating card. */
.maintenance-section {
  position: relative;
  margin: 0;
  padding: 34px 0 42px;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
}
.maintenance-section .section-kicker { display: none; }
.maintenance-section-heading {
  align-items: flex-start;
  margin-bottom: 18px;
}
.maintenance-section-heading h2 { font-size: 20px; }
.maintenance-section-heading p:not(.section-kicker) { max-width: 660px; }
.maintenance-section-heading .text-link { margin-top: 5px; }

.maintenance-banner { display: none !important; }
.maintenance-banner-items { display: none; }

.maintenance-preview {
  display: block;
  margin-top: 0;
  border-top: 1px solid var(--border-mid);
}
.maintenance-preview .event-row {
  position: relative;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr) 100px;
  gap: 24px;
  min-height: 0;
  padding: 18px 0 19px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.maintenance-preview .event-date {
  grid-column: 1;
  grid-row: auto;
  padding-top: 1px;
  color: #766c58;
  font-size: 10px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}
.maintenance-preview .event-main {
  grid-column: 2;
  grid-row: auto;
  min-width: 0;
}
.maintenance-preview .event-kind { display: none; }
.maintenance-preview .event-title {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  font-weight: 630;
}
.maintenance-preview .event-message { display: none; }
.maintenance-preview .event-affected {
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}
.maintenance-preview .event-state {
  position: static;
  grid-column: 3;
  grid-row: auto;
  align-self: start;
  justify-content: flex-end;
  font-size: 10px;
}
.maintenance-preview .event-state.active { color: #8c5a19; }

/* Overview: categories are a concise operational index, never a duplicate service table. */
#components-root[hidden] { display: none !important; }
.category-overview-section {
  padding-top: 36px;
  padding-bottom: 42px;
}
.category-overview-heading {
  align-items: flex-start;
  margin-bottom: 16px;
}
.category-overview-heading h2 { font-size: 20px; }
.category-overview-heading p { max-width: 620px; }
.category-overview-heading .text-link { margin-top: 5px; }
.category-summary-root { border-top: 1px solid var(--border-mid); }
.category-summary-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 18px 0 19px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}
.category-summary-copy { min-width: 0; }
.category-summary-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 620;
  letter-spacing: -.012em;
}
.category-summary-meta {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}
.category-summary-issue {
  margin: 4px 0 0;
  color: #8c5a19;
  font-size: 10px;
  line-height: 1.5;
}
.category-summary-row.outage .category-summary-issue { color: var(--red); }
.category-summary-state {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 108px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
  white-space: nowrap;
}
.category-summary-state.operational { color: var(--green); }
.category-summary-state.degraded { color: #8c5a19; }
.category-summary-state.outage { color: var(--red); }
.category-summary-state .status-dot {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
}

/* Service section: make data semantics explicit. */
.services-section-heading { margin-bottom: 16px; }
.service-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}
.service-legend > span:not(.legend-note) { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  background: var(--unknown);
}
.legend-swatch.operational { background: #7e9d27; }
.legend-swatch.degraded { background: #c98a34; }
.legend-swatch.unknown { background: #e5e8e3; border: 1px solid rgba(20,30,18,.05); }
.legend-note {
  flex-basis: 100%;
  color: #81867f;
  font-size: 9.5px;
}
.monitor-legend {
  margin: 0 0 19px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--border);
}

/* Category headers must read as taxonomy, never as another service row. */
.services-root { border-top: 0; }
.service-group {
  padding: 34px 0 13px;
  border-bottom: 0;
}
.service-group + .service-group { margin-top: 9px; }
.service-group-head {
  min-height: 0;
  margin: 0;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--border-mid);
}
.service-group-copy {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
}
.service-group-head h3 {
  margin: 0;
  color: #263024;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 720;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.group-meta {
  margin: 0;
  color: #91968f;
  font-size: 9.5px;
  font-weight: 520;
  letter-spacing: .02em;
  text-transform: none;
}
.service-row {
  min-height: 62px;
  border-top: 1px solid var(--border);
}
.service-group-head + .service-row { border-top: 0; }
.service-name { font-weight: 560; }
.service-number { font-weight: 560; }
.service-state { font-weight: 520; }

.uptime-cell.unknown { background: #eceeeb; }
.uptime-cell.degraded { background: #c98a34; }
.uptime-cell.outage { background: #c45b54; }

body.response-metrics-empty .service-response,
body.response-metrics-empty [data-column="response"] { display: none !important; }
body.response-metrics-empty .services-section .column-headings {
  width: 480px;
  grid-template-columns: minmax(245px,1fr) 92px 105px;
}
body.response-metrics-empty .service-row {
  grid-template-columns: minmax(210px,1fr) minmax(250px,1.45fr) 92px 105px;
}
body.response-metrics-empty .monitor-columns {
  width: 100%;
  grid-template-columns: minmax(210px,1fr) minmax(250px,1.45fr) 92px 105px;
}

/* Events: every line follows one editorial axis; chronology is metadata, not a sidebar. */
.event-section {
  padding-top: 34px;
  padding-bottom: 42px;
}
.event-section-heading { margin-bottom: 14px; }
.event-section .empty-state {
  padding: 21px 0 2px;
  border-bottom: 0;
}
.event-detail {
  padding: 25px 0 29px;
  border-bottom: 1px solid var(--border);
}
.event-detail-grid { display: block; }
.event-detail-side {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  min-height: 18px;
  margin-bottom: 9px;
}
.event-detail-side .event-kind {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.4;
  letter-spacing: .07em;
}
.event-detail-state {
  justify-content: flex-start;
  gap: 6px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}
.event-detail-state .status-dot {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
}
.event-detail-body { min-width: 0; }
.event-detail-title {
  align-items: flex-start;
  gap: 30px;
}
.event-detail-title h3 {
  max-width: 780px;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -.018em;
}
.event-detail-title time {
  margin-left: auto;
  padding-top: 3px;
  color: #858a83;
  font-size: 9.5px;
  line-height: 1.45;
  white-space: nowrap;
}
.event-timeline {
  margin-top: 15px;
  border-top: 0;
}
.event-update {
  display: block;
  padding: 0;
  border-bottom: 0;
}
.event-update + .event-update {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.event-update-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 7px;
}
.event-update-status {
  font-size: 10.5px;
  font-weight: 620;
}
.event-update-time {
  display: inline;
  margin: 0;
  color: #858a83;
  font-size: 9.5px;
}
.event-update p {
  max-width: 880px;
  margin: 0;
  color: #596057;
  font-size: 12.5px;
  line-height: 1.72;
}
.event-affected {
  max-width: 880px;
  margin-top: 16px;
  color: #737970;
  font-size: 10.5px;
  line-height: 1.55;
}
.event-affected strong { color: var(--text); font-weight: 560; }
#events-maintenance .event-detail {
  border-left: 0;
  padding-left: 0;
}
#events-maintenance .event-kind,
#events-maintenance .event-detail-state.active { color: #8c5a19; }

@media (max-width: 900px) {
  body.response-metrics-empty .service-row { grid-template-columns: minmax(170px,1fr) minmax(190px,1.2fr) 82px 98px; }
}

@media (max-width: 680px) {
  .topbar-inner { min-height: 62px; gap: 9px; }
  .brand-divider { height: 20px; }
  .status-product { min-height: 32px; }
  .status-name { font-size: 11.5px; }
  .nav a.active::after { display: none; }

  .page-heading,
  .page-heading-events {
    padding-top: 42px;
    padding-bottom: 32px;
  }
  .page-heading .eyebrow { margin-bottom: 11px; }
  .page-heading h1 { font-size: 30px; }
  .page-heading > p:not(.eyebrow) { font-size: 12.5px; }

  .overall { padding-top: 38px; padding-bottom: 31px; }
  .overall-main { gap: 16px; }
  .status-orb { width: 48px; height: 48px; flex-basis: 48px; }
  .overall-copy h1 { font-size: 25px; }
  .active-incidents-summary { display: block; }

  .mobile-nav a {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .language-switch button {
    min-width: 28px;
    min-height: 30px;
  }

  .maintenance-section {
    margin: 0;
    padding: 28px 0 32px;
    border-radius: 0;
  }
  .maintenance-section-heading {
    display: block;
    margin-bottom: 15px;
  }
  .maintenance-section-heading .text-link { display: inline-block; margin-top: 11px; }
  .maintenance-preview { margin-top: 0; }
  .maintenance-preview .event-row {
    grid-template-columns: 1fr auto;
    gap: 5px 14px;
    min-height: 0;
    padding: 15px 0 16px;
  }
  .maintenance-preview .event-date {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 0 0 2px;
  }
  .maintenance-preview .event-main {
    grid-column: 1;
    grid-row: auto;
  }
  .maintenance-preview .event-state {
    grid-column: 2;
    grid-row: auto;
    align-self: start;
    justify-content: flex-end;
    margin-top: 1px;
  }

  .category-overview-section { padding-top: 30px; padding-bottom: 34px; }
  .category-overview-heading { display: block; margin-bottom: 14px; }
  .category-overview-heading .text-link { display: inline-block; margin-top: 10px; }
  .category-summary-row {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 12px;
    padding: 15px 0 16px;
  }
  .category-summary-copy h3 { font-size: 13.5px; }
  .category-summary-state {
    min-width: 0;
    align-self: start;
    margin-top: 2px;
    font-size: 10px;
  }

  .service-legend { gap: 7px 12px; }
  .legend-note { margin-top: 2px; }
  .service-group { padding-top: 28px; }
  .service-group-head { padding-bottom: 11px; }
  .service-group-copy { align-items: center; }
  .service-group-head h3 { font-size: 10.5px; }
  .group-meta { font-size: 9px; }

  .event-section {
    padding-top: 28px;
    padding-bottom: 34px;
  }
  .event-detail { padding: 21px 0 24px; }
  .event-detail-side {
    margin-bottom: 8px;
    gap: 7px 9px;
  }
  .event-detail-title { display: block; }
  .event-detail-title h3 { max-width: none; font-size: 15.5px; }
  .event-detail-title time {
    display: block;
    margin: 5px 0 0;
    padding-top: 0;
    white-space: normal;
  }
  .event-timeline { margin-top: 13px; }
  .event-update + .event-update {
    margin-top: 15px;
    padding-top: 15px;
  }
  .event-update-meta { margin-bottom: 6px; }
  .event-update p { max-width: none; font-size: 12px; line-height: 1.68; }

  body.response-metrics-empty .service-row {
    grid-template-columns: 1fr auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status-orb-ring { animation: none !important; }
}