/* Ambient Time concept dashes — TV / large-display type scale.
   Linked after each page's inline styles so clamp()/vw overrides fixed px.
   Matches the shipped /tv/aurora/ approach: readable at 10ft on 16:9. */

:root {
  --tv-clock: clamp(4.25rem, 10.5vw, 11.5rem);
  --tv-date: clamp(1.05rem, 2.2vw, 1.85rem);
  --tv-loc: clamp(0.85rem, 1.35vw, 1.2rem);
  --tv-label: clamp(0.78rem, 1.15vw, 1.05rem);
  --tv-metric: clamp(2.4rem, 5.5vw, 5.25rem);
  --tv-stat: clamp(1.15rem, 2vw, 1.75rem);
  --tv-body: clamp(0.9rem, 1.25vw, 1.15rem);
  --tv-micro: clamp(0.75rem, 1.05vw, 0.95rem);
  --tv-pad: clamp(1.5rem, 3.2vw, 3.25rem);
  --tv-gap: clamp(0.75rem, 1.4vw, 1.25rem);
}

/* Primary clock + date (shared #ids across concept pages) */
#clock {
  font-size: var(--tv-clock) !important;
  letter-spacing: -0.02em !important;
  line-height: 0.95 !important;
}
#date-line {
  font-size: var(--tv-date) !important;
}
#loc-line,
#city-line,
#location-line,
#depth-line,
#season-line,
#condition-line {
  font-size: var(--tv-loc) !important;
}

/* Section labels */
.lbl,
.section-label,
.card-label,
.env-label,
.marine-label,
.vi-label,
.gauge-day,
.hour-time,
.hour-precip,
.w-label,
.transit-detail,
.creature-detail,
.fc-activity,
.wc-day,
.t-label,
.palette-label {
  font-size: var(--tv-label) !important;
}

/* Hero metrics in side cards */
#temp-big,
#kp-big,
#feels-temp,
#weather-temp,
#focus-time {
  font-size: var(--tv-metric) !important;
}

.env-val,
.marine-val,
.vi-val,
.room-temp,
.market-val,
.wc-time,
.transit-time,
.creature-depth,
.event-title,
.solar-val {
  font-size: var(--tv-stat) !important;
}

.card,
.panel {
  padding: clamp(0.9rem, 1.6vw, 1.4rem) clamp(1rem, 1.8vw, 1.6rem) !important;
}

/* Stage padding — desert/aurora-style #app grids + rainfall/city shells */
#app {
  padding: var(--tv-pad) !important;
  gap: var(--tv-gap) !important;
}

/* Footer credit — keep small but not sub-pixel on 4K */
.credit,
.ambient-credit,
#credit {
  font-size: var(--tv-micro) !important;
}

@media (max-width: 900px) {
  :root {
    --tv-clock: clamp(2.75rem, 14vw, 5.5rem);
    --tv-metric: clamp(1.75rem, 8vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}