/* Version: 1.2.0 | Created: 2026-09-01 | Updated: 2026-09-04 */
/* Ambient Mode: full-screen glanceable scenes for TVs and wall displays.
   Loaded on top of base.css (theme tokens come from there). */

.ambient-body {
  overflow: hidden;
  height: 100vh;
}

.amb-cursor-hidden,
.amb-cursor-hidden * {
  cursor: none !important;
}

.ambient-exit {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  z-index: 20;
  color: var(--fg-dim);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel-bg);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

.ambient-exit:hover {
  opacity: 1;
  color: var(--accent);
}

.ambient-stage {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.ambient-scene {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease;
}

.ambient-scene.amb-fading {
  opacity: 0;
}

/* Scene: Now */
.amb-now {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.amb-now-icon .w-icon {
  width: clamp(9rem, 24vw, 20rem);
  height: clamp(9rem, 24vw, 20rem);
}

.amb-huge {
  font-size: clamp(5rem, 18vw, 15rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.amb-huge-unit {
  font-size: 0.35em;
  font-weight: 600;
  color: var(--fg-dim);
  vertical-align: super;
}

.amb-sub {
  font-size: clamp(1.3rem, 3.4vw, 2.6rem);
  margin-top: 0.5rem;
}

.amb-dim {
  color: var(--fg-dim);
}

/* Panel scenes (rain, wind, forecast) */
.amb-panel {
  text-align: center;
  width: min(90vw, 70rem);
}

.amb-title {
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 1.5rem;
}

.amb-title-rain { color: var(--accent-rain); }
.amb-title-wind { color: var(--accent-wind); }
.amb-title-forecast { color: var(--accent-temp); }

.amb-big {
  font-size: clamp(2.6rem, 9vw, 7rem);
  font-weight: 700;
  line-height: 1.1;
}

.amb-mid {
  font-size: 0.55em;
  color: var(--fg-dim);
  font-weight: 600;
}

.amb-rain-live {
  color: var(--accent-rain);
}

.amb-stats {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  margin-top: clamp(1.5rem, 4vh, 3rem);
  flex-wrap: wrap;
}

.amb-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.amb-stat span {
  font-size: clamp(0.95rem, 1.8vw, 1.4rem);
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.amb-stat strong {
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  font-weight: 700;
}

.amb-trend {
  font-size: 0.6em;
  color: var(--fg-dim);
}

.amb-trend-up { color: var(--accent-temp); }
.amb-trend-down { color: var(--accent-rain); }

/* Forecast scene */
.amb-forecast-row {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}

.amb-forecast-cell {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: clamp(1rem, 2.5vw, 2rem);
  min-width: clamp(11rem, 24vw, 18rem);
}

.amb-fc-when {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.amb-fc-cond {
  font-size: clamp(1rem, 1.9vw, 1.4rem);
  min-height: 2.4em;
}

.amb-fc-temp {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-top: 0.4rem;
}

.amb-fc-rain {
  font-size: clamp(0.95rem, 1.7vw, 1.3rem);
  color: var(--accent-rain);
  margin-top: 0.25rem;
}

/* Footer: clock + dots */
.ambient-footer {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 1rem;
}

.amb-clock-time {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.amb-clock-date {
  display: block;
  font-size: clamp(1rem, 2.2vw, 1.7rem);
  color: var(--fg-dim);
}

.ambient-dots {
  display: flex;
  gap: 0.6rem;
  padding-bottom: 0.8rem;
}

.amb-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--gauge-track);
  transition: background 0.4s ease;
}

.amb-dot-active {
  background: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .ambient-scene {
    transition: none;
  }
}

/* Portrait phones: stack the Now scene */
@media (max-width: 700px) {
  .amb-now {
    flex-direction: column;
    text-align: center;
  }

  .ambient-footer {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
  }
}

/* Value-coloured numbers (js/theme/value-scales.js). Same mechanism as
   .group-hero .big in base.css: inline custom properties --v-day-a, --v-day-b,
   --v-night-a, --v-night-b. Only spans that carry those inline stops get the
   gradient; a bare .amb-val (no band, e.g. 0.0 mm) keeps its normal colour. */
.amb-val[style] {
  --v-a: var(--v-day-a);
  --v-b: var(--v-day-b);
  background: linear-gradient(120deg, var(--v-a), var(--v-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

:root[data-theme="night"] .amb-val[style] {
  --v-a: var(--v-night-a);
  --v-b: var(--v-night-b);
}


/* ---- Phone / touch ambient mode (v1.2.0) ----
   Ambient Mode was built for a TV or wall panel. On a phone the exit link sat
   at 55% opacity with only a :hover rule to bring it back, and there is no
   hover on a touch screen, so the only way out of the screen was hard to see
   and small to hit. On touch it is always solid and a full tap target. */
@media (hover: none), (pointer: coarse) {
  .ambient-exit {
    opacity: 1;
    font-size: 1rem;
    padding: 0.7rem 1.2rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--fg);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  }
}

/* 100vh on a phone counts the browser chrome, which pushed the clock and dots
   off the bottom of the screen. svh is the visible height. */
@supports (height: 100svh) {
  .ambient-body {
    height: 100svh;
  }

  .ambient-stage {
    height: 100svh;
  }
}

@media (max-width: 699px) {
  .ambient-stage {
    padding: 3.5rem 1rem 1.25rem;
  }
}