/* Kigali Rain — seasonal dark themes, mobile-first. */

:root {
  --radius: 16px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* Rainy season: deep green hills, rain blue, ochre accents. */
:root, :root[data-theme="rainy"] {
  --bg: #0d2126;
  --bg-grad: radial-gradient(120% 60% at 50% 0%, #14343c 0%, #0d2126 62%);
  --card: #122b31;
  --card-2: #17373f;
  --ink: #eaf5f1;
  --ink-dim: #a7c4bd;
  --accent: #57b8ff;         /* rain blue */
  --accent-ink: #06222e;
  --sun: #e8b04b;            /* savanna gold */
  --terracotta: #d97d54;
  --hills: #1e5c46;
  --hills-deep: #143e30;
  --good: #67c073;
  --warn: #f4d35e;
  --bad: #ee6a5a;
  --uv: #b98ae0;
  --bar-wet: #57b8ff;
  --bar-dry: #27444d;
  --line-p: #e8b04b;
  --int-none: #27444d;
  --int-light: #57b8ff;
  --int-mod: #9d8bff;
  --int-heavy: #f07a5f;
  --shadow: 0 2px 16px rgba(3, 16, 20, 0.5);
}

/* Dry season: warm earth, terracotta, ochre, dust. */
:root[data-theme="dry"] {
  --bg: #211308;
  --bg-grad: radial-gradient(120% 60% at 50% 0%, #39220d 0%, #211308 62%);
  --card: #2c1c0e;
  --card-2: #382410;
  --ink: #faf0e1;
  --ink-dim: #cfb494;
  --accent: #f2b95c;         /* savanna gold */
  --accent-ink: #331d05;
  --sun: #ffcf6e;
  --terracotta: #e08a5a;
  --hills: #6b5a2b;
  --hills-deep: #4a3d1d;
  --good: #8fc98a;
  --warn: #ffd97a;
  --bad: #ff8a70;
  --uv: #d9a0e8;
  --bar-wet: #7fb8d9;
  --bar-dry: #463522;
  --line-p: #e08a5a;
  --shadow: 0 2px 16px rgba(20, 10, 2, 0.55);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.45;
  padding-bottom: env(safe-area-inset-bottom);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  max-width: 560px;
  margin: 0 auto;
  position: sticky;
  top: 0;
  background: linear-gradient(var(--bg) 82%, transparent);
  z-index: 5;
}

.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand h1 { font-size: 1.05rem; margin: 0; letter-spacing: 0.2px; }
.brand .loc { margin: 0; font-size: 0.78rem; color: var(--ink-dim); }
.mark { width: 40px; height: 40px; flex: none; }

.actions { display: flex; gap: 6px; }
.icon-btn {
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: var(--card);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:active { transform: scale(0.94); }

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 4px 12px 20px;
  display: grid;
  gap: 12px;
}

/* Grid items default to min-width:auto, so one wide descendant (the hourly
   strip's no-wrap chips) can blow the single track out to max-content.
   Let items shrink; the scroll containers handle the overflow. */
main > * { min-width: 0; }

.card {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}
.card h2 { margin: 0 0 2px; font-size: 0.95rem; letter-spacing: 0.3px; }
.card-sub { margin: 0 0 8px; font-size: 0.78rem; color: var(--ink-dim); }

.offline-badge {
  max-width: 560px;
  margin: 4px auto;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--warn) 18%, var(--card));
  border: 1px solid var(--warn);
  border-radius: 12px;
  font-size: 0.85rem;
}

/* --- hero ---------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; }
.hero-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hero-temp { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.hero-temp sup { font-size: 1.4rem; font-weight: 500; color: var(--ink-dim); }
.hero-cond { color: var(--ink-dim); font-size: 0.9rem; margin-top: 4px; }
.hero-icon svg { width: 64px; height: 64px; }

.headline {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, var(--card-2));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 1rem;
  font-weight: 600;
}
.headline .hint { display: block; font-weight: 400; color: var(--ink-dim); font-size: 0.82rem; margin-top: 2px; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 0.8rem; color: var(--ink-dim); }
.hero-meta b { color: var(--ink); font-weight: 600; }

.risk-line {
  margin-top: 10px; font-size: 0.85rem; font-weight: 600;
  color: var(--bad);
  display: flex; align-items: center; gap: 6px;
}
.risk-line svg { width: 18px; height: 18px; flex: none; }

:root[data-theme="dry"] .hero {
  background:
    radial-gradient(90% 55% at 85% -10%, color-mix(in srgb, var(--sun) 22%, transparent) 0%, transparent 60%),
    var(--card);
}

/* --- rainy hero: the next-60-min answer ------------------------------------- */

.rain-answer {
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 12%, var(--card-2));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.answer-main { font-size: 1.45rem; font-weight: 800; line-height: 1.18; letter-spacing: -0.3px; }
.answer-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 0.8rem; color: var(--ink-dim); }
.conf-pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
}
.conf-pill.high { background: var(--good); color: #0e2413; }
.conf-pill.medium { background: var(--warn); color: #3a2c05; }
.conf-pill.low { background: var(--bad); color: #fff; }

/* --- rainy: 2 h minute-resolution rain chart --------------------------------- */

.nowcast-chart { margin-top: 4px; }
.nowcast-chart svg { display: block; width: 100%; height: auto; }
.nc-bar.i-none { fill: var(--int-none); }
.nc-bar.i-light { fill: var(--int-light); }
.nc-bar.i-mod { fill: var(--int-mod); }
.nc-bar.i-heavy { fill: var(--int-heavy); }
.swatch.i-none { background: var(--int-none); }
.swatch.i-light { background: var(--int-light); }
.swatch.i-mod { background: var(--int-mod); }
.swatch.i-heavy { background: var(--int-heavy); }
.intensity-legend { flex-wrap: wrap; gap: 8px 14px; }

/* --- UV card -------------------------------------------------------------- */

.uv-top { display: flex; align-items: center; gap: 14px; }
.uv-gauge { flex: none; width: 108px; }
.uv-now { font-size: 2.2rem; font-weight: 700; line-height: 1; }
.uv-now small { font-size: 0.85rem; color: var(--ink-dim); font-weight: 500; display: block; margin-top: 3px; }
.pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.4px;
  color: #14210f; margin-top: 6px;
}
.pill.low { background: #8fce8a; } .pill.moderate { background: #f4d35e; }
.pill.high { background: #f4a13b; } .pill.very_high { background: #ef6f5a; color: #fff; }
.pill.extreme { background: #b565d9; color: #fff; }
.pill.off { background: var(--card-2); color: var(--ink-dim); }

.uv-facts { display: flex; gap: 14px; margin-top: 10px; font-size: 0.82rem; color: var(--ink-dim); flex-wrap: wrap; }
.uv-facts b { color: var(--ink); }

.advice {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: var(--card-2);
  border-left: 4px solid var(--warn);
  font-size: 0.88rem;
}
.advice.needed_now { border-left-color: var(--bad); }
.advice.not_needed { border-left-color: var(--good); }
.advice b { display: block; margin-bottom: 2px; }
.advice span { color: var(--ink-dim); }

.crosscheck {
  margin-top: 10px; font-size: 0.78rem; color: var(--ink-dim);
  padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.crosscheck b { color: var(--ink); }

.uv-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.skin-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: transparent; color: var(--ink);
  padding: 5px 10px; border-radius: 999px; font-size: 0.8rem; cursor: pointer;
}
.chip.active { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.chip.wide { width: 100%; padding: 10px; margin-top: 6px; }
.bell {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: transparent; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; flex: none;
}
.bell svg { width: 19px; height: 19px; }
.bell.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

/* --- chart ---------------------------------------------------------------- */

.chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart svg { display: block; min-width: 640px; width: 100%; height: auto; }
.legend { display: flex; gap: 16px; font-size: 0.75rem; color: var(--ink-dim); margin-top: 6px; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }
.swatch.mm { background: var(--bar-wet); }
.swatch.p { background: var(--line-p); border-radius: 999px; height: 4px; width: 14px; vertical-align: middle; }
.swatch.now { background: var(--ink-dim); width: 2px; height: 12px; vertical-align: middle; }

/* --- hourly strip ---------------------------------------------------------- */

.hourly-strip {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 2px 4px;
  scrollbar-width: thin;
}
.h-chip {
  flex: none; width: 62px; text-align: center;
  background: var(--card-2); border-radius: 12px; padding: 8px 4px;
  font-size: 0.75rem; color: var(--ink-dim);
  border: 1px solid transparent;
}
.h-chip.now { border-color: var(--accent); }
.h-chip .h { color: var(--ink); font-weight: 600; }
.h-chip svg { width: 26px; height: 26px; margin: 3px auto; display: block; }
.h-chip .mm { color: var(--accent); font-weight: 600; }
.h-chip .t { color: var(--ink); font-weight: 600; }

/* --- daily ----------------------------------------------------------------- */

.day-row {
  display: grid;
  grid-template-columns: 44px 34px 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.day-row:last-child { border-bottom: 0; }
.day-name { font-weight: 600; font-size: 0.88rem; }
.day-name small { display: block; font-weight: 400; color: var(--ink-dim); font-size: 0.72rem; }
.day-row svg { width: 28px; height: 28px; }
.temp-range { position: relative; height: 26px; }
.temp-range .bar {
  position: absolute; top: 50%; height: 6px; transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--sun));
}
.temp-range .lo, .temp-range .hi {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 0.75rem; color: var(--ink-dim);
}
.temp-range .lo { left: 0; } .temp-range .hi { right: 0; }
.day-rain { text-align: right; font-size: 0.78rem; color: var(--ink-dim); min-width: 86px; }
.day-rain b { color: var(--ink); font-size: 0.9rem; }
.day-rain .spread { display: block; font-size: 0.7rem; }
.day-rain .uv-badge { color: var(--uv); font-weight: 700; }

/* --- season card ------------------------------------------------------------ */

.season-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.season-head .kn { color: var(--ink-dim); font-style: italic; font-size: 0.8rem; }
.progress { height: 10px; border-radius: 999px; background: var(--card-2); margin: 10px 0 6px; overflow: hidden; }
.progress i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--hills), var(--accent));
}
.season-facts { font-size: 0.85rem; color: var(--ink-dim); margin: 8px 0 0; }
.season-facts b { color: var(--ink); }
.compare { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card-2); font-size: 0.88rem; }
.compare.wetter { border-left: 4px solid var(--accent); }
.compare.drier { border-left: 4px solid var(--sun); }
.compare.normal { border-left: 4px solid var(--good); }
.compare span { display: block; color: var(--ink-dim); font-size: 0.78rem; margin-top: 2px; }

/* --- sources footer (both themes) -------------------------------------------- */

.sources-footer { margin: 0 0 12px; font-size: 0.78rem; color: var(--ink-dim); }
.sources-footer a { color: var(--accent); }
.sources-credit { margin: 0 0 6px; }
.sources-footer ul { margin: 6px 0; padding-left: 0; list-style: none; font-size: 0.72rem; color: var(--ink-dim); }

/* --- sources / footer -------------------------------------------------------- */

.fineprint { font-size: 0.72rem; color: var(--ink-dim); margin: 6px 0 0; }

footer { max-width: 560px; margin: 0 auto; padding: 8px 14px 28px; text-align: center; }
.install-btn {
  margin-bottom: 10px; padding: 10px 18px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer;
}

/* --- settings sheet ----------------------------------------------------------- */

.sheet-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  z-index: 20;
}
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 21;
  max-width: 560px; margin: 0 auto;
  background: var(--card-2);
  border-radius: 20px 20px 0 0;
  padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.45);
  max-height: 82vh; overflow-y: auto;
}
.sheet h2 { margin: 6px 0 2px; font-size: 1.05rem; }
.sheet h3 { margin: 16px 0 6px; font-size: 0.85rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.6px; }
.sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 25%, transparent); margin: 0 auto 8px; }
.skin-options { display: grid; gap: 6px; }
.skin-opt {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; text-align: left;
  padding: 9px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  background: transparent; color: var(--ink); cursor: pointer;
}
.skin-opt .st { font-weight: 700; }
.skin-opt small { grid-column: 2; color: var(--ink-dim); }
.skin-opt.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.theme-options { display: flex; gap: 6px; flex-wrap: wrap; }
.sheet-close {
  width: 100%; margin-top: 18px; padding: 12px; border-radius: 12px; border: 0;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 0.95rem; cursor: pointer;
}

@media (min-width: 480px) {
  .hero-temp { font-size: 3.4rem; }
  .answer-main { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .card { transition: background-color 0.4s ease; }
}