/* 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: var(--text-lg) / 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;
  text-wrap: balance;
}
.location {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 46px;
  margin: 12px 0 0;
  font-size: var(--text-xl);
  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 var(--text-xl) 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: 290px minmax(0, 1fr) 420px;
  gap: 20px;
  align-items: start;
}
.readings {
  justify-self: start;
  width: 100%;
}
.readings h2 {
  margin: 0 0 14px;
  font: 700 var(--text-xl) 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: 140px 1fr;
  gap: 10px;
  font-size: var(--text-base);
}
.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: var(--text-sm);
  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: var(--text-base);
}
.allsky-links .button:hover {
  border-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
}
/* The forecast at the top of the right-hand column, beside the frame, so it is on the first
   screen; the contact block sits under it. Three columns this wide need the room a dashboard
   takes: on a wide screen these pages use narrower margins and a wider page than the rest of the
   site, header included, so the frame keeps its size. */
@media (min-width: 1400px) {
  :root {
    --page-gutter: 40px;
    --page-width: 1600px;
  }
}
.readings,
.allsky {
  grid-row: 1 / span 2;
}
.forecast {
  grid-column: 3;
  grid-row: 1;
  margin-top: 21px;
}
.forecast h2 {
  margin: 0 0 10px;
  font: 700 var(--text-xl) var(--font-site);
}
.forecast img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
}
.forecast-source {
  margin: 8px 0 32px;
  color: var(--muted);
  font-size: var(--text-sm);
}
.forecast-source a {
  color: var(--gold);
}
.contact {
  grid-column: 3;
  grid-row: 2;
  align-self: start;
}
.contact[hidden] {
  display: none;
}
.contact h2 {
  margin: 0 0 10px;
  font: 700 var(--text-xl) var(--font-site);
}
.contact p {
  margin: 0 0 6px;
  font-size: var(--text-lg);
}
.contact a {
  color: inherit;
}
.allsky-taken {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: center;
}
.refresh-note {
  margin-top: 24px;
  color: var(--muted);
  font-size: var(--text-base);
  text-align: center;
}

/* Narrower than this, the forecast's column would leave the frame too small: the forecast goes
   under the frame at its own size, and the right-hand column keeps only the contact block. */
@media (max-width: 1399px) {
  .status-body {
    grid-template-columns: 290px minmax(0, 1fr) 220px;
  }
  .forecast {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    max-width: 580px;
    margin: 0 auto;
  }
  .contact {
    grid-row: 1 / span 2;
    align-self: end;
    padding-bottom: 96px;
  }
}
@media (max-width: 900px) {
  .status-body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .readings {
    width: auto;
  }
  .readings,
  .allsky,
  .contact,
  .forecast {
    grid-column: auto;
    grid-row: 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;
  }
  .readings h2 {
    text-align: left;
  }
  /* One column: the sky comes first, the numbers after it. */
  .allsky {
    order: -1;
  }
}
@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;
  }
  .location {
    font-size: var(--text-sm);
  }
}