.status-main {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fbf8 100%
    );
}

.status-hero {
  padding:
    clamp(70px, 9vw, 120px)
    0
    clamp(48px, 7vw, 80px);

  text-align: center;
}

.status-hero h1 {
  margin-bottom: 16px;

  color: var(--text);

  font-size:
    clamp(2.5rem, 6vw, 4.6rem);

  line-height: 1.02;
  letter-spacing: -0.05em;
}

.status-hero > .container > p {
  max-width: 680px;
  margin: 0 auto;

  font-size: 1.06rem;
}

.overall-status-card {
  width:
    min(100%, 760px);

  display: flex;
  align-items: center;
  gap: 18px;

  margin:
    40px auto 0;

  padding:
    24px 28px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-medium);

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  box-shadow:
    var(--shadow-medium);

  text-align: left;
}

.overall-status-indicator {
  width: 18px;
  height: 18px;

  flex:
    0 0 18px;

  border-radius: 50%;
}

.overall-status-indicator.operational {
  background:
    var(--primary);

  box-shadow:
    0 0 0 7px
    rgba(
      1,
      162,
      0,
      0.12
    );
}

.overall-status-indicator.degraded {
  background:
    #d99000;

  box-shadow:
    0 0 0 7px
    rgba(
      217,
      144,
      0,
      0.12
    );
}

.overall-status-indicator.outage {
  background:
    var(--danger);

  box-shadow:
    0 0 0 7px
    rgba(
      198,
      40,
      40,
      0.12
    );
}

.overall-status-indicator.unknown {
  background:
    #8a948c;
}

.overall-status-card strong,
.overall-status-card span {
  display: block;
}

.overall-status-card strong {
  margin-bottom: 2px;

  font-size: 1.15rem;
}

.overall-status-card span {
  color:
    var(--muted);

  font-size: 0.9rem;
}

.status-section {
  padding:
    70px 0;
}

.status-section-alt {
  background:
    var(--section-background);
}

.status-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content:
    space-between;

  gap: 20px;

  margin-bottom: 26px;
}

.status-section-heading h2 {
  margin-bottom: 5px;

  font-size:
    clamp(
      1.7rem,
      3vw,
      2.35rem
    );

  letter-spacing:
    -0.04em;
}

.service-status-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 18px;
}

.service-status-card {
  padding: 22px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-medium);

  background:
    var(--card-background);

  box-shadow:
    var(--shadow-small);
}

.service-status-main {
  display: flex;
  align-items: center;
  justify-content:
    space-between;

  gap: 16px;
}

.service-status-main strong,
.service-status-main span {
  display: block;
}

.service-status-main > div > span {
  margin-top: 2px;

  color:
    var(--muted);

  font-size:
    0.82rem;
}

.service-status-badge {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding:
    6px 11px;

  border-radius:
    999px;

  font-size:
    0.78rem;

  font-weight:
    700;

  white-space:
    nowrap;
}

.service-status-badge.operational {
  background:
    var(--primary-soft);

  color:
    var(--primary-dark);
}

.service-status-badge.degraded {
  background:
    #fff6df;

  color:
    #9b6300;
}

.service-status-badge.outage {
  background:
    var(--danger-soft);

  color:
    var(--danger);
}

.service-status-badge.unknown {
  background:
    #f0f2f0;

  color:
    var(--muted);
}

.uptime-history {
  display: grid;
  gap: 18px;
}

.uptime-service {
  padding: 22px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-medium);

  background:
    #ffffff;

  box-shadow:
    var(--shadow-small);
}

.uptime-service-header {
  display: flex;

  align-items: center;
  justify-content:
    space-between;

  gap: 20px;

  margin-bottom: 18px;
}

.uptime-service-header strong,
.uptime-service-header span {
  display: block;
}

.uptime-service-header span {
  color:
    var(--muted);

  font-size:
    0.82rem;
}

.uptime-percent {
  color:
    var(--primary-dark);

  font-size:
    1.25rem;
}

.uptime-days {
  display: grid;

  grid-template-columns:
    repeat(
      30,
      minmax(5px, 1fr)
    );

  gap: 4px;
}

.uptime-day {
  height: 28px;

  border-radius: 4px;

  background:
    #e8ece8;
}

.uptime-day.good {
  background:
    var(--primary);
}

.uptime-day.degraded {
  background:
    #e5a300;
}

.uptime-day.bad {
  background:
    var(--danger);
}

.uptime-day.unknown {
  background:
    #dfe4df;
}

.incident-list {
  display: grid;
  gap: 16px;
}

.incident-card,
.incident-empty {
  padding: 22px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-medium);

  background:
    #ffffff;

  box-shadow:
    var(--shadow-small);
}

.incident-card-header {
  display: flex;

  align-items: flex-start;
  justify-content:
    space-between;

  gap: 18px;
}

.incident-card-header strong,
.incident-card-header span {
  display: block;
}

.incident-card-header > div > span {
  margin-top: 4px;

  color:
    var(--muted);

  font-size:
    0.86rem;
}

.incident-card p {
  margin-top: 14px;

  font-size:
    0.9rem;
}

.incident-empty {
  text-align: center;
}

.incident-empty strong {
  display: block;

  margin-bottom: 4px;
}

@media (
  max-width: 760px
) {
  .service-status-grid {
    grid-template-columns:
      1fr;
  }

  .overall-status-card,
  .service-status-main,
  .incident-card-header {
    align-items:
      flex-start;
  }

  .uptime-days {
    gap: 3px;
  }

  .uptime-day {
    height: 22px;
  }
}

@media (
  max-width: 520px
) {
  .overall-status-card {
    padding: 20px;
  }

  .service-status-main,
  .incident-card-header {
    flex-direction:
      column;
  }

  .uptime-days {
    overflow-x: auto;

    grid-template-columns:
      repeat(30, 12px);

    padding-bottom: 4px;
  }
}

/* =========================================================
   Status page refinements
   ========================================================= */

.status-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(1, 162, 0, 0.12),
      transparent 32%
    ),
    radial-gradient(
      circle at 88% 25%,
      rgba(1, 162, 0, 0.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8fcf8 100%
    );
}

.status-hero-container {
  max-width: 980px;
  text-align: center;
}

.status-hero-introduction {
  max-width: 720px;
  margin: 0 auto;
}

.overall-status-card {
  max-width: 760px;
  justify-content: center;
  text-align: center;
}

.overall-status-copy {
  min-width: 0;
}

.overall-status-label {
  margin-bottom: 2px;
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 34px auto 0;
  max-width: 900px;
}

.status-summary-grid article {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-small);
  text-align: left;
}

.status-summary-grid strong,
.status-summary-grid span {
  display: block;
}

.status-summary-grid strong {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 0.9rem;
}

.status-summary-grid span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

.status-section-heading {
  align-items: flex-start;
}

.status-section-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--primary-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-status-card {
  position: relative;
  overflow: hidden;
  min-height: 118px;
  display: flex;
  align-items: center;
}

.service-status-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--border);
}

.service-status-card:has(.service-status-badge.operational)::before {
  background: var(--primary);
}

.service-status-card:has(.service-status-badge.degraded)::before {
  background: #d99000;
}

.service-status-card:has(.service-status-badge.outage)::before {
  background: var(--danger);
}

.uptime-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 20px;
}

.uptime-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.legend-dot.good {
  background: var(--primary);
}

.legend-dot.degraded {
  background: #e5a300;
}

.legend-dot.bad {
  background: var(--danger);
}

.legend-dot.unknown {
  background: #dfe4df;
}

.uptime-service {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.uptime-service:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.incident-card,
.incident-empty {
  position: relative;
}

.incident-empty {
  padding: 34px 22px;
}

.incident-empty strong {
  color: var(--text);
  font-size: 1rem;
}

@media (max-width: 900px) {
  .status-summary-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .overall-status-card {
    justify-content: flex-start;
    text-align: left;
  }

  .status-summary-grid article {
    text-align: left;
  }
}