/*
 * Sized in rem, where app.js sets 1rem = min(height, width / 2) / 24 so the
 * layout fills an 18:9 landscape phone and scales on anything else.
 * Kept to CSS an old Android WebView understands: no clamp(), flex gap,
 * aspect-ratio, inset or backdrop-filter.
 */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  --bg1: #1e6fd9;
  --bg2: #62b6f0;
  font-family: Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: #fff;
  background-color: #1e3a5f;
  background-image: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

/* Condition themes; .is-night overrides the sky-based ones. */
.t-clear  { --bg1: #1e6fd9; --bg2: #62b6f0; }
.t-partly { --bg1: #3b74b8; --bg2: #86aed4; }
.t-cloudy { --bg1: #55657d; --bg2: #8b9bb0; }
.t-fog    { --bg1: #5f6b7a; --bg2: #98a4b3; }
.t-rain   { --bg1: #2c4a63; --bg2: #557a95; }
.t-snow   { --bg1: #5b7c9e; --bg2: #a7bfd6; }
.t-storm  { --bg1: #1c2333; --bg2: #3b4a66; }

.is-night.t-clear,
.is-night.t-partly { --bg1: #0b1d3a; --bg2: #2a4470; }
.is-night.t-cloudy,
.is-night.t-fog    { --bg1: #1d2430; --bg2: #3c4656; }
.is-night.t-rain   { --bg1: #121e2b; --bg2: #2c4256; }
.is-night.t-snow   { --bg1: #23324a; --bg2: #4f6584; }
.is-night.t-storm  { --bg1: #0d1018; --bg2: #262e40; }

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.7rem 0.8rem;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.05rem;
  line-height: 1.3;
}
.place { font-weight: 500; letter-spacing: 0.02em; }
.when { opacity: 0.85; }
.clock { font-weight: 500; margin-left: 0.8rem; }

.now {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 0;
}
.now-main {
  display: flex;
  align-items: center;
  margin-right: 2rem;
}
.icon { width: 8.5rem; height: 8.5rem; margin-right: 0.6rem; }
.icon svg, .hour .i svg { display: block; width: 100%; height: 100%; }
.temp {
  font-size: 8.4rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 0.1rem 0.6rem rgba(0, 0, 0, 0.15);
}

.now-side { flex: 1; min-width: 0; }
.condition { font-size: 1.8rem; line-height: 1.15; }
.hilo { font-size: 1.15rem; opacity: 0.85; margin-top: 0.3rem; }
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 0.7rem;
  grid-column-gap: 1rem;
  margin-top: 1rem;
}
.stat .label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.stat .value {
  display: block;
  font-size: 1.15rem;
  font-weight: 500;
  margin-top: 0.1rem;
  white-space: nowrap;
}

.hourly {
  display: flex;
  background: rgba(255, 255, 255, 0.13);
  border-radius: 1rem;
  padding: 0.7rem 0.4rem;
}
.hour { flex: 1; text-align: center; }
.hour .h { font-size: 0.8rem; opacity: 0.8; }
.hour .i { width: 2.4rem; height: 2.4rem; margin: 0.25rem auto; }
.hour .t { font-size: 1.15rem; font-weight: 500; }
.hour .p { font-size: 0.7rem; height: 0.9rem; margin-top: 0.1rem; color: #cfe9ff; }
.hour.now-cell .h { opacity: 1; font-weight: 500; }

.status {
  font-size: 0.7rem;
  opacity: 0.6;
  text-align: right;
  margin-top: 0.45rem;
}
.status.stale { opacity: 1; color: #ffe08a; }