/* Copenhagen Weather — base theme + top half of the screen.
   Target: Tizen 6.0 WebView (Chromium 76), authored down to Chromium 69 to be safe.
   Deliberately AVOIDED: flex `gap` (Chrome 84), clamp()/min()/max() (79),
   `inset` (87), :is()/:where() (88), aspect-ratio (88), :focus-visible (86).
   Fixed 1920x1080 canvas — no breakpoints. ~30px overscan margin on every edge. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Day palette is the default; night overrides it. */
body {
  --bg1: #17457f;
  --bg2: #3d87c7;
  --fg: #ffffff;
  --fg-dim: rgba(255, 255, 255, 0.72);
  --tile: rgba(255, 255, 255, 0.15);
  --tile-2: rgba(255, 255, 255, 0.10);
  --accent: #ffd257;
  --wet: #7fd6ff;
  --focus: #ffffff;
  --focus-bg: rgba(255, 255, 255, 0.30);
  --sel-bg: rgba(255, 255, 255, 0.24);
}
body.theme-auto.is-night,
body.theme-night {
  --bg1: #060c22;
  --bg2: #1b2a5e;
  --fg: #eaf0ff;
  --fg-dim: rgba(234, 240, 255, 0.66);
  --tile: rgba(255, 255, 255, 0.075);
  --tile-2: rgba(255, 255, 255, 0.05);
  --accent: #ffd257;
  --wet: #63c8ff;
  --focus: #ffe27a;
  --focus-bg: rgba(255, 226, 122, 0.20);
  --sel-bg: rgba(255, 226, 122, 0.14);
}

html, body {
  width: 1920px; height: 1080px; overflow: hidden;
}
body {
  background: var(--bg1);
  background-image: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 100%);
  color: var(--fg);
  font-family: 'Samsung Sans', 'BreezeSans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 26px;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
/* No text selection / drag artifacts from a remote's OK key. */
body, body * { -webkit-user-select: none; user-select: none; }

::-webkit-scrollbar { width: 0; height: 0; display: none; }

#sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wx-icon { display: block; color: var(--fg); }

#app {
  width: 1920px; height: 1080px;
  padding: 30px 60px 26px 60px;
  display: flex; flex-direction: column;
}

/* ---------- header ---------- */
#hdr { height: 96px; display: flex; justify-content: space-between; align-items: flex-start; }
#city { font-size: 62px; font-weight: 700; line-height: 1.02; letter-spacing: -1px; }
#subtitle { font-size: 26px; color: var(--fg-dim); margin-top: 4px; }
#hdr-right { text-align: right; }
#clock { font-size: 56px; font-weight: 300; line-height: 1.05; }
#clock-date { font-size: 25px; color: var(--fg-dim); margin-top: 2px; }

/* ---------- hero (current conditions) ---------- */
#hero { height: 330px; margin-top: 14px; display: flex; }
/* Narrow enough that the stat grid gets room for its longest subtitle
   ("From WSW · max 12.3 m/s") without clipping — see .stat-sub overflow. */
#hero-main { width: 712px; display: flex; align-items: center; }
#hero-icon { width: 190px; height: 190px; margin-right: 30px; color: var(--accent); }
#hero-text { padding-bottom: 6px; }
#hero-temp { font-size: 150px; font-weight: 200; line-height: 0.94; letter-spacing: -4px; }
#hero-unit { font-size: 60px; font-weight: 300; letter-spacing: 0; margin-left: 6px; }
#hero-cond { font-size: 42px; font-weight: 500; margin-top: 10px; white-space: nowrap; }
#hero-range { font-size: 27px; color: var(--fg-dim); margin-top: 8px; white-space: nowrap; }

/* Grid `gap` is fine (Chrome 66). Rows are EXPLICIT: with `auto` rows Chromium 76
   squishes them to fit the container instead of overflowing. */
#stats {
  flex: 1; display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 158px 158px;
  grid-gap: 14px; gap: 14px;
}
.stat {
  background: var(--tile); border-radius: 16px;
  padding: 0 22px; display: flex; align-items: center; overflow: hidden;
}
.stat-ico { width: 46px; height: 46px; margin-right: 16px; flex-shrink: 0; color: var(--fg-dim); }
.stat-body { min-width: 0; }
.stat-k {
  font-size: 21px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--fg-dim); white-space: nowrap;
}
.stat-v { font-size: 36px; font-weight: 600; margin-top: 4px; white-space: nowrap; }
.stat-sub { font-size: 21px; color: var(--fg-dim); margin-top: 2px; white-space: nowrap; }

/* ---------- section headings ---------- */
.section-title {
  height: 30px; font-size: 24px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--fg-dim); margin-bottom: 10px;
}
.section-note { text-transform: none; letter-spacing: 0.5px; color: var(--accent); font-weight: 500; }