:root {
  color-scheme: light;
  --surface: #fcfcfb;
  --night: #efeee9;
  --hover: #e1e0d9;
  --band: #e6e5df;
  --ink: #0b0b0b;
  --ink2: #52514e;
  --muted: #898781;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --temp: #eb6834;
  --rain: #2a78d6;
  --pop: #86b6ef;
  --cloud: #c3c2b7;
  --hum: #1baf7a;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --surface: #1a1a19;
    --night: #0f0f0e;
    --hover: #383835;
    --band: #30302d;
    --ink: #f0efec;
    --ink2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --temp: #d95926;
    --rain: #3987e5;
    --pop: #1c5cab;
    --cloud: #52514e;
    --hum: #199e70;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
main { max-width: 760px; margin: 0 auto; padding: 20px 12px 48px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { font-size: 22px; font-weight: 650; margin: 0; letter-spacing: -0.01em; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.units { display: flex; border: 1px solid var(--axis); border-radius: 8px; overflow: hidden; flex: none; }
.units button { border: 0; background: none; padding: 5px 11px; color: var(--ink2); }
.units button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }

.search { position: relative; display: flex; gap: 8px; margin-top: 12px; }
.search input {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--axis); border-radius: 8px;
  background: var(--surface);
}
.search > button { padding: 8px 12px; border: 1px solid var(--axis); border-radius: 8px; background: none; white-space: nowrap; }
#results {
  position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--axis); border-radius: 8px;
}
#results button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px; border-radius: 6px; }
#results button:hover, #results button:focus-visible { background: var(--grid); }
#results small { color: var(--muted); }

.sleep { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: 13.5px; color: var(--ink2); }
.sleep label { display: flex; align-items: center; gap: 6px; }
.sleep select { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--axis); border-radius: 6px; padding: 3px 4px; }
.sources { display: flex; gap: 6px; overflow-x: auto; margin: 14px -12px 0; padding: 0 12px 10px; scrollbar-width: thin; }
.sources button {
  flex: none; border: 1px solid var(--axis); border-radius: 999px; background: none; padding: 5px 12px;
  white-space: nowrap; color: var(--ink2);
}
.sources button small { color: var(--muted); margin-left: 4px; }
.sources button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.sources button[aria-pressed="true"] small { color: var(--axis); }

.head {
  position: sticky; top: 0; z-index: 3; height: 70px; background: var(--surface);
  border-bottom: 1px solid var(--axis);
}
.head > div { position: absolute; top: 8px; overflow: hidden; white-space: nowrap; }
.head .k { font-size: 11px; color: var(--ink2); display: flex; align-items: center; gap: 4px; }
.head .k i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.head .v { font-size: 17px; font-weight: 650; line-height: 1.25; }
.head .r { font-size: 10px; color: var(--muted); display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.head .when .v { font-size: 13px; line-height: 1.6; }

.chart { position: relative; }
.chart svg { position: absolute; top: 0; left: 0; touch-action: pan-y; }
.dayh {
  position: sticky; top: 70px; z-index: 2; display: block; width: 100%; height: 30px; padding: 0;
  border: 0; border-top: 1px solid var(--surface); border-radius: 0; background: var(--band); color: var(--ink);
  font-size: 12.5px; text-align: left; font-variant-numeric: tabular-nums; transition: bottom 0.2s ease;
}
.dayh span { position: absolute; top: 0; line-height: 29px; white-space: nowrap; overflow: hidden; }
.dayh .d { left: 8px; font-size: 13.5px; font-weight: 700; }
.dayh small { font-size: inherit; color: var(--ink2); margin-left: 2px; }
.chart text { font-size: 10.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.chart text.day { fill: var(--ink); font-weight: 650; font-size: 11.5px; }
.chart text.sun { fill: var(--ink2); }
.chart text.val { fill: var(--ink); font-weight: 600; stroke: var(--surface); stroke-width: 3px; paint-order: stroke; }
.chart .night { fill: var(--night); }
.chart .hover { fill: var(--hover); }
.chart .g { stroke: var(--grid); stroke-width: 1; }
.chart .ax { stroke: var(--axis); stroke-width: 1; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .thin { fill: none; stroke-width: 1.5; }
.empty { padding: 40px 0; color: var(--ink2); }

.c-temp { --c: var(--temp); }
.c-pop { --c: var(--pop); }
.c-precip { --c: var(--rain); }
.c-cloud { --c: var(--cloud); }
.c-hum { --c: var(--hum); }
.head .k i { background: var(--c); }
.chart .line, .chart .thin { stroke: var(--c); }
.chart .fill { fill: var(--c); }
.chart .band { fill: color-mix(in srgb, var(--c) 28%, var(--surface)); }

footer { margin-top: 20px; font-size: 12.5px; color: var(--ink2); }
footer p { margin: 0 0 6px; }
footer a { color: inherit; }