/* Status page layout on the Sectigo design system tokens (public/ds). */
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body-primary);
  font-family: var(--font-family-body);
}
.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--spacing-md);
  top: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-primary);
  outline: 2px solid var(--border-focus);
}
.masthead {
  border-bottom: 1px solid var(--border-default-subtle);
  background: var(--surface-primary);
}
.masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}
.masthead__brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-heading-primary);
  font-family: var(--font-family-display);
  font-weight: 600;
  text-decoration: none;
}
.logo--dark {
  display: none;
}
:root.dark .logo--light {
  display: none;
}
:root.dark .logo--dark {
  display: inline;
}
.env-label {
  padding: 2px var(--spacing-sm);
  border: 1px solid var(--border-default-regular);
  border-radius: var(--radius-full);
  font-size: 0.875rem;
}
.section-title {
  margin: var(--spacing-2xl) 0 var(--spacing-md);
  font-family: var(--font-family-display);
  color: var(--text-heading-primary);
  font-size: 1.25rem;
}
.overall {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--border-success);
  background: var(--surface-success-subtle);
}
.overall--degraded,
.overall--unknown {
  border-left-color: var(--border-warning);
  background: var(--surface-warning-subtle);
}
.overall--outage {
  border-left-color: var(--border-error);
  background: var(--surface-error-subtle);
}
.overall__icon {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--text-success-strong);
}
.overall--degraded .overall__icon,
.overall--unknown .overall__icon {
  color: var(--text-warning-strong);
}
.overall--outage .overall__icon {
  color: var(--text-error-strong);
}
.overall__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  color: var(--text-heading-primary);
}
.overall__meta {
  margin: var(--spacing-xs) 0 0;
  color: var(--text-body-secondary);
}
.components {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-default-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
}
.component {
  padding: var(--spacing-lg);
}
.component + .component {
  border-top: 1px solid var(--border-default-subtle);
}
.component__row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  align-items: flex-start;
}
.component__name {
  margin: 0;
  font-size: 1rem;
  color: var(--text-heading-primary);
}
.component__desc {
  margin: var(--spacing-xs) 0 0;
  color: var(--text-body-secondary);
  font-size: 0.875rem;
}
.component__state {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}
.component__icon {
  width: 16px;
  height: 16px;
}
.component__state--operational {
  color: var(--text-success-strong);
}
.component__state--degraded,
.component__state--unknown {
  color: var(--text-warning-strong);
}
.component__state--outage {
  color: var(--text-error-strong);
}
.uptime {
  display: flex;
  gap: 2px;
  list-style: none;
  margin: var(--spacing-md) 0 var(--spacing-xs);
  padding: 0;
  height: 32px;
}
.uptime__day {
  flex: 1 1 0;
  min-width: 1px;
  border-radius: 2px;
  background: var(--surface-muted-light);
}
.uptime__day--up {
  background: var(--surface-success-strong);
}
.uptime__day--partial {
  background: var(--surface-warning-strong);
}
.uptime__day--down {
  background: var(--surface-error-strong);
}
.uptime__legend {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--text-body-secondary);
  font-size: 0.75rem;
}
.incident {
  margin-bottom: var(--spacing-md);
}
.incident--major,
.incident--critical {
  border-left: 4px solid var(--border-error);
}
.incident--minor {
  border-left: 4px solid var(--border-warning);
}
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.timeline__item + .timeline__item {
  margin-top: var(--spacing-md);
}
.timeline__meta,
.timeline__message {
  margin: 0;
}
.timeline__message {
  white-space: pre-wrap;
}
.empty {
  color: var(--text-body-secondary);
}
.footer {
  margin-top: var(--spacing-2xl);
  padding-bottom: var(--spacing-2xl);
  color: var(--text-body-secondary);
  font-size: 0.875rem;
}
@media (max-width: 600px) {
  .component__row {
    flex-direction: column;
  }
  .uptime {
    height: 24px;
  }
  /* Phones: the last 30 days only, so each day stays a visible bar. */
  .uptime__day:nth-child(-n + 60),
  .legend-long {
    display: none;
  }
}
@media (min-width: 601px) {
  .legend-short {
    display: none;
  }
}