/* Observatory status pages: readings on the left, the all-sky frame in the middle, contact right —
   the arrangement customers already know from the Wix pages. */
.status-page {
  padding-block: 20px 64px;
  color: var(--site-text);
  font: 17px / 1.55 var(--font-site);
}
/* The observatory pages carry the mark alone, larger than the rest of the site wears it: the
   page's own title holds the header, and a wordmark beside it crowds the band. */
.header-minimal .brand img {
  width: 104px;
  height: 104px;
}
.header-minimal .brand-name {
  display: none;
}

/* The headline sits in the header, between the brand and the account control. The station pages
   give these three lines a band of their own; stacked tight they read as one crowded block. */
.status-headline {
  padding-block: 10px;
  text-align: center;
}
.status-headline h1 {
  margin: 0;
  font: 700 34px / 1.3 var(--font-site);
  /* Assistant sets its bold tight; the station pages' title breathes between letters. */
  letter-spacing: 0.035em;
}
.location {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 46px;
  margin: 12px 0 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
/* Under the header rule, above the frame — where the station pages put it. */
.roof {
  margin: 20px 0 18px;
  font: 700 24px var(--font-site);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--muted);
}
.roof[data-state="open"] {
  color: #3ddc6b;
}
.roof[data-state="closed"] {
  color: #f2564b;
}
.status-notice {
  max-width: 560px;
  margin: 40px auto;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
  text-align: center;
}
.status-notice a {
  color: var(--gold);
  white-space: nowrap;
}

/* The station pages put the readings hard against the left edge and the all-sky frame in the
   middle of the page, not in the middle of what is left over. The outer columns are equal so the
   frame stays centred now that the contact block has moved to the foot. */
/* Readings left, frame in the middle of the page, contact on the right and low beside the frame —
   the station pages' arrangement. */
.status-body {
  display: grid;
  grid-template-columns: 325px minmax(0, 1fr) 245px;
  gap: 20px;
  align-items: start;
}
.readings {
  justify-self: start;
  width: 100%;
}
.readings h2 {
  margin: 0 0 14px;
  font: 700 21px var(--font-site);
  text-align: center;
}
.readings section + section {
  margin-top: 44px;
}
.readings dl {
  margin: 0;
  display: grid;
  gap: 5px;
}
/* Labels end on one line, values start on another: the readings line up as a column, as they do
   on the station pages. */
.reading {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 10px;
  font-size: 16px;
}
.reading dt {
  text-align: right;
  color: var(--muted);
}
.reading dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  /* A timestamp broken over two lines turns the block into a ragged column. */
  white-space: nowrap;
}
/* The console grades humidity, cloud and wind against the observatory's own thresholds. */
.reading dd[data-grade="good"] {
  color: #3ddc6b;
}
.reading dd[data-grade="warn"] {
  color: var(--gold);
}
.reading dd[data-grade="bad"] {
  color: #f2564b;
}

.allsky figure {
  position: relative;
  /* Square frame: as wide as the row allows, up to a size where its own resolution gives out. */
  max-width: 900px;
  margin: 21px auto 0;
}
.allsky img {
  display: block;
  width: 100%;
  /* The frame the camera takes is square; the station pages show it letterboxed, wide rather than
     tall, so the readings beside it stay in view without scrolling. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #000;
}
/* Gemini's camera is mounted square to the compass, so the frame's corners are directions; Virgo's
   is not, and its page leaves them off. */
.compass-point {
  display: none;
  position: absolute;
  font-size: 13px;
  font-weight: 600;
}
.compass .compass-point {
  display: block;
}
.compass-point[data-point="N"] {
  top: -21px;
  left: 4px;
}
.compass-point[data-point="E"] {
  top: -21px;
  right: 4px;
}
.compass-point[data-point="W"] {
  bottom: -21px;
  left: 4px;
}
.compass-point[data-point="S"] {
  bottom: -21px;
  right: 4px;
}

.allsky-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.allsky-links .button {
  padding: 11px 20px;
  border: 1px solid var(--site-text);
  border-radius: 3px;
  font-size: 16px;
}
.allsky-links .button:hover {
  border-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
}
.contact {
  /* Low beside the frame, not level with its top: the station pages hang it about two thirds of
     the way down. */
  align-self: end;
  padding-bottom: 96px;
}
.contact[hidden] {
  display: none;
}
.contact h2 {
  margin: 0 0 10px;
  font: 700 21px var(--font-site);
}
.contact p {
  margin: 0 0 6px;
  font-size: 17px;
}
.contact a {
  color: inherit;
}
.allsky-taken {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.refresh-note {
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

@media (max-width: 900px) {
  .status-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .readings {
    width: auto;
  }
  .contact {
    align-self: auto;
    padding-bottom: 0;
    text-align: center;
  }
  .readings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .readings section + section {
    margin-top: 0;
  }
  .reading {
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 8px;
  }
  .reading dt {
    text-align: left;
  }
}
@media (max-width: 760px) {
  /* On a phone the three facts sit on one or two lines; a wide gap breaks them badly. */
  .location {
    gap: 4px 20px;
  }
}

@media (max-width: 560px) {
  .readings {
    grid-template-columns: 1fr;
  }
  .status-headline h1 {
    font-size: 19px;
  }
  .location {
    font-size: 14px;
  }
}