/* css/sky.css — current-location conditions: hero, hourly rail, AQI,
 * sunrise/sunset, severe alerts, and a 5-day forecast strip. */

.sky-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---- Hero --------------------------------------------------------------- */

.sky-hero {
  flex: 1;
  /* Without this, a flex item defaults to min-height:auto and grows to fit
   * its full content height instead of shrinking to the space .sky-content
   * actually has — which is what let the hourly rail get pushed below
   * .panel's fold on short-height tablet viewports, with only .panel's
   * overflow-y:auto fallback (never meant to be load-bearing) revealing it. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* dvh-based, not just fixed rem: shrinks the hero's own vertical rhythm
   * when *height* is the scarce dimension (a landscape tablet viewport),
   * not just when width is. */
  padding-block: clamp(1rem, 4dvh, var(--space-xl));
  padding-inline: var(--space-lg);
  background: radial-gradient(circle at 30% 0%, var(--color-accent-faint), transparent 60%), var(--color-surface);
}

.sky-hero--night {
  background: radial-gradient(circle at 30% 0%, rgba(120, 140, 220, 0.14), transparent 60%), var(--color-surface);
}

.sky-hero-skeleton {
  flex: 1;
  min-height: 16rem;
}

.sky-hero__top {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-xs);
}

/* Faint barometric-ring motif behind the condition glyph — Weather's own
 * accent treatment, distinct from Journey's map corner glyph and
 * Discover's editorial byline rule. */
.sky-hero__top::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(5.5rem, 14dvh, 9rem);
  height: clamp(5.5rem, 14dvh, 9rem);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(
    circle,
    var(--color-accent-faint) 0,
    var(--color-accent-faint) 1px,
    transparent 1px,
    transparent 12%
  );
  opacity: 0.5;
  animation: isobar-drift var(--ambient-drift-duration) linear infinite;
  pointer-events: none;
  z-index: 0;
}

.sky-hero__top > * {
  position: relative;
  z-index: 1;
}

.sky-hero__glyph {
  width: clamp(2.25rem, 8dvh, 5rem);
  height: clamp(2.25rem, 8dvh, 5rem);
  color: var(--color-accent);
}

.sky-hero__temp {
  font-family: var(--font-serif);
  /* Locally overridden from the shared --text-hero token (vw-driven) so it
   * also shrinks when *height* is the scarce dimension, without changing
   * --text-hero for tabs that don't share this problem. */
  font-size: clamp(2.25rem, 6dvh, 4.75rem);
  line-height: 1;
}

.sky-hero__condition {
  font-size: var(--text-body);
  color: var(--color-text-primary);
}

.sky-hero__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: clamp(0.5rem, 2dvh, var(--space-md));
}

.sky-aqi-pill {
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  border: 1px solid var(--color-hairline);
  color: var(--color-accent);
  background: var(--color-accent-faint);
}

.sky-aqi-pill--sensitive,
.sky-aqi-pill--unhealthy {
  color: #d98b3f;
  border-color: rgba(217, 139, 63, 0.4);
  background: rgba(217, 139, 63, 0.12);
}

.sky-aqi-pill--very-unhealthy,
.sky-aqi-pill--hazardous {
  color: #d9633f;
  border-color: rgba(217, 99, 63, 0.4);
  background: rgba(217, 99, 63, 0.12);
}

.sky-sun-readout {
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-hairline-faint);
}

/* ---- Severe alert banner -------------------------------------------------- */

.sky-alert {
  padding: 0.85rem var(--space-md);
  border-radius: var(--radius-sm);
  background: rgba(217, 99, 63, 0.14);
  border: 1px solid rgba(217, 99, 63, 0.35);
  color: #e39472;
  font-size: var(--text-caption);
  margin-bottom: var(--space-md);
}

.sky-alert__headline {
  font-weight: 600;
}

/* ---- Hourly rail ---------------------------------------------------------- */

.sky-hourly-rail {
  flex: none;
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: clamp(0.75rem, 3dvh, var(--space-lg));
  padding-top: clamp(0.5rem, 2dvh, var(--space-md));
  border-top: 1px solid var(--color-hairline-faint);
}

.sky-hourly-rail::-webkit-scrollbar {
  display: none;
}

.sky-hourly-item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 3.5rem;
}

.sky-hourly-item__hour {
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.sky-hourly-item__glyph {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-accent);
}

.sky-hourly-item__temp {
  font-size: var(--text-caption);
  color: var(--color-text-primary);
}

/* ---- 5-day forecast strip (shared visual language with the old weather
 * card's forecast strip) ----------------------------------------------- */

.forecast-strip {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--space-xs);
}

.forecast-strip::-webkit-scrollbar {
  display: none;
}

.forecast-day-card {
  flex: none;
  scroll-snap-align: start;
  width: clamp(6.5rem, 18vw, 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: var(--space-md) var(--space-sm);
}

.forecast-day-card--skeleton {
  height: 11rem;
}

.forecast-day-card__label {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.forecast-day-card__glyph {
  width: 2rem;
  height: 2rem;
  color: var(--color-accent);
  margin: 0.2rem 0;
}

.forecast-day-card__temps {
  display: flex;
  gap: 0.4rem;
  font-size: var(--text-body);
}

.forecast-day-card__high {
  color: var(--color-text-primary);
}

.forecast-day-card__low {
  color: var(--color-text-secondary);
}

.forecast-day-card__precip {
  font-size: var(--text-caption);
  color: var(--color-accent);
}