/*
 * Public system status
 * This page deliberately has its own defensive layout because it also opens at
 * status.heimat.email/ and must remain useful without any customer session.
 */

body.page-status {
  width: auto;
  height: auto;
  min-width: 320px;
  min-height: 100vh;
  border-radius: 0;
  color: #172338;
  background: #f4f7fb;
}

.page-status .site-main {
  overflow: hidden;
}

.page-status .status-hero {
  position: relative;
  min-height: 510px;
  padding-top: clamp(80px,9vw,122px);
  padding-bottom: clamp(70px,8vw,100px);
  overflow: hidden;
  background:
    radial-gradient(circle at 83% 23%,rgba(43,125,255,.34),transparent 26%),
    radial-gradient(circle at 96% 100%,rgba(102,71,225,.2),transparent 31%),
    linear-gradient(135deg,#071321,#102d50 68%,#163b68);
}

.page-status .status-hero::before,
.page-status .status-hero::after {
  position: absolute;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.page-status .status-hero::before {
  top: 65px;
  right: 9vw;
  width: 290px;
  height: 290px;
  box-shadow: 0 0 0 55px rgba(255,255,255,.018),0 0 0 110px rgba(255,255,255,.012);
}

.page-status .status-hero::after {
  right: 29vw;
  bottom: -95px;
  width: 230px;
  height: 160px;
  transform: rotate(-13deg);
}

.page-status .status-hero > * {
  position: relative;
  z-index: 1;
}

.page-status .status-hero .eyebrow {
  color: #7fb4ff;
}

.page-status .status-hero h1 {
  max-width: 760px;
  font-size: clamp(48px,7vw,84px);
  letter-spacing: -.055em;
}

.page-status .status-hero > p {
  max-width: 670px;
  font-size: clamp(15px,1.6vw,18px);
  line-height: 1.65;
}

.page-status .status-overall {
  min-height: 72px;
  padding: 15px 20px;
  border-color: rgba(149,184,230,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 18px 45px rgba(0,0,0,.13);
  backdrop-filter: blur(18px);
}

.page-status .status-overall > i {
  flex: 0 0 12px;
}

.page-status .status-overall b {
  color: #fff;
  font-size: 14px;
}

.page-status .status-overall small {
  margin-top: 3px;
  color: #91a4bd;
}

.page-status .status-content {
  position: relative;
  padding-top: 70px;
}

.page-status .status-content > .section-head:first-child {
  margin-top: 0;
}

.page-status .status-list {
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(20,47,82,.09);
}

.page-status .status-list article {
  min-height: 76px;
  padding: 18px 24px;
  transition: background .18s ease;
}

.page-status .status-list article:hover {
  background: #f8fbff;
}

.page-status .state-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #a9b4c3;
}

.page-status .state-dot.operational {
  background: #26b978;
  box-shadow: 0 0 0 6px rgba(38,185,120,.11);
}

.page-status .state-dot.pending {
  box-shadow: 0 0 0 6px rgba(240,182,77,.12);
}

.page-status .state-dot.degraded,
.page-status .state-dot.maintenance {
  background: #df6752;
  box-shadow: 0 0 0 6px rgba(223,103,82,.11);
}

.page-status .status-list article > span {
  min-width: 128px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #08734b;
  background: #eaf8f1;
  text-align: center;
}

.page-status .status-list .state-dot.pending ~ span {
  color: #8a5a09;
  background: #fff5e2;
}

.page-status .status-list .state-dot.degraded ~ span,
.page-status .status-list .state-dot.maintenance ~ span {
  color: #9d3529;
  background: #fff0ed;
}

.page-status .status-metrics article {
  min-height: 105px;
  padding: 21px;
  border-radius: 18px;
  background: linear-gradient(145deg,#fff,#f7faff);
  box-shadow: 0 12px 32px rgba(21,50,88,.05);
}

.page-status .status-metrics b {
  overflow-wrap: anywhere;
  font-size: clamp(18px,2vw,24px);
}

.page-status .status-domain-head {
  margin-top: 68px;
}

.page-status .status-domains {
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.page-status .status-domains article {
  min-width: 0;
  padding: 22px;
  border-radius: 19px;
  box-shadow: 0 12px 34px rgba(21,50,88,.05);
}

.page-status .status-domains header b,
.page-status .status-domains article > small {
  overflow-wrap: anywhere;
}

.page-status .status-note {
  padding: 16px 18px;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #fff;
}

@media (max-width: 900px) {
  .page-status .status-domains {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 620px) {
  .page-status .status-hero {
    min-height: auto;
    padding: 65px 18px 58px;
  }

  .page-status .status-hero::before {
    top: 70px;
    right: -120px;
  }

  .page-status .status-hero h1 {
    font-size: 50px;
  }

  .page-status .status-overall {
    display: flex;
    width: 100%;
    align-items: flex-start;
  }

  .page-status .status-overall > i {
    margin-top: 5px;
  }

  .page-status .status-content {
    width: min(100% - 28px,1120px);
    padding: 48px 0 75px;
  }

  .page-status .status-list article {
    grid-template-columns: 12px minmax(0,1fr);
    padding: 17px 16px;
  }

  .page-status .status-list article > span {
    grid-column: 2;
    min-width: 0;
    justify-self: start;
  }

  .page-status .status-domains {
    grid-template-columns: 1fr;
  }

  .page-status .status-domains article > div {
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-status .status-list article {
    transition: none;
  }
}