:root {
  --night: #1b1c30;
  --deep: #14152a;
  --surface: #25273f;
  --line: #34365a;
  --ink: #ebe3cf;
  --muted: #a39fb6;
  --faint: #6f6c8a;
  --lamp: #c8bcff;
  --lamp-glow: rgba(200, 188, 255, .18);
  --amber: #d9a95b;
  --cold: #8fa7c4;
  --rain: #7fa6d8;
  --twilight: #3a3a63;
  --dawn: #4a3f5e;
  --serif: "Spectral", Georgia, "Times New Roman", serif;
  --sans: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Red light: one hue only, to keep dark adaptation outdoors */
:root[data-light="red"] {
  --night: #120404; --deep: #0c0202; --surface: #1d0807; --line: #3a100d;
  --ink: #e0503f; --muted: #a6382c; --faint: #6e2219;
  --lamp: #ff5a45; --lamp-glow: rgba(255, 70, 50, .14); --amber: #c9402f; --cold: #8a2a20; --rain: #9b3226;
  --twilight: #230807; --dawn: #2a0a08;
}
*, *::before, *::after { box-sizing: inherit; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body {
  margin: 0; background: var(--night); color: var(--ink);
  font: 17px/1.5 var(--sans); min-height: 100vh;
}
main, .top, .foot { max-width: 640px; margin: 0 auto; padding-left: 18px; padding-right: 18px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; border-radius: 6px; }

.top { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; padding-bottom: 6px; }
.mark { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.mark { display: inline-flex; align-items: center; gap: 8px; }
.mark-icon { display: block; }
.mark span { font-style: italic; font-weight: 400; color: var(--muted); margin-right: -6px; }

.ghost { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; color: var(--muted); cursor: pointer; font-size: .85rem; }
.ghost[aria-pressed="true"] { border-color: var(--lamp); color: var(--lamp); }

.where { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; }
.where input {
  background: var(--deep); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase; min-width: 0;
}
.where input::placeholder { text-transform: none; letter-spacing: 0; color: var(--faint); }
.go { background: var(--lamp); color: var(--deep); border: 0; border-radius: 12px; padding: 0 16px; font-weight: 700; cursor: pointer; }
.where .small { grid-column: 1 / -1; justify-self: start; }
.place { color: var(--muted); margin: 10px 0 0; min-height: 1.5em; font-size: .95rem; }
.place b { color: var(--ink); font-weight: 400; }
.err { color: var(--amber); }

h2 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; margin: 0 0 12px; }
section { margin-top: 34px; }

/* Tonight */
.tonight { margin-top: 22px; }
.night-label { margin: 0; color: var(--muted); font-size: .95rem; }
.verdict { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 8.5vw, 2.7rem); line-height: 1.08; margin: 4px 0 10px; letter-spacing: -.01em; }
.verdict.good { color: var(--lamp); text-shadow: 0 0 28px var(--lamp-glow); }
.verdict.ok { color: var(--ink); }
.verdict.meh { color: var(--amber); }
.verdict.bad { color: var(--cold); }
.why { margin: 0 0 18px; color: var(--ink); max-width: 36em; }
.why .chip { white-space: nowrap; }

.strip-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px 6px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.strip { display: flex; position: relative; border-radius: 14px; overflow: hidden; width: max-content; min-width: 100%; }
.hr { width: 46px; flex: none; display: grid; grid-template-rows: 18px 54px 64px 34px 22px; justify-items: center; align-items: center; position: relative; scroll-snap-align: start; padding: 6px 0 4px; }
.hr .t { font-size: .74rem; color: var(--muted); }
.hr .cloud { width: 100%; height: 54px; position: relative; }
.hr .cloud i { position: absolute; top: 0; left: 0; right: 0; background: var(--ink); opacity: .2; border-radius: 0 0 6px 6px; }
.hr .temp { font-weight: 700; font-size: .95rem; position: relative; z-index: 2; }
.hr .wind { font-size: .78rem; color: var(--muted); display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 2px; }
.hr .wind svg { width: 14px; height: 14px; }
.hr .wind.strong { color: var(--amber); }
.hr .rain { font-size: .74rem; color: var(--rain); }
.strip svg.tline { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 1; }
.strip-key { color: var(--faint); font-size: .78rem; margin: 6px 0 0; }

/* Week */
.week-list { list-style: none; margin: 0; padding: 0; }
.wk { display: grid; grid-template-columns: 4.6em 1fr 3.2em 3.6em; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.wk + .wk { border-top-color: transparent; }
.wk:hover { background: var(--deep); }
.wk[aria-current="true"] { border-color: var(--line); background: var(--surface); }
.wk .d { font-family: var(--serif); font-size: 1.05rem; }
.wk .d small { display: block; font-family: var(--sans); font-size: .72rem; color: var(--faint); }
.wk .bar { height: 10px; background: var(--deep); border-radius: 6px; overflow: hidden; }
.wk .bar i { display: block; height: 100%; border-radius: 6px; background: var(--muted); }
.wk.best .bar i { background: var(--lamp); box-shadow: 0 0 12px var(--lamp-glow); }
.wk .tm { text-align: right; font-weight: 700; }
.wk .fx { text-align: right; font-size: .78rem; color: var(--muted); }
.best-tag { color: var(--lamp); font-size: .72rem; display: block; }

/* Moths */
.note { color: var(--muted); font-size: .9rem; margin: -4px 0 14px; }
.note.warn { color: var(--amber); }
.tabs { display: flex; gap: 6px; margin-bottom: 8px; position: sticky; top: env(safe-area-inset-top, 0px); background: var(--night); padding: 8px 0; z-index: 5; }
.tab { flex: 1; background: var(--deep); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; cursor: pointer; color: var(--muted); }
.tab b { display: block; font-size: 1.2rem; color: var(--ink); font-weight: 700; }
.tab[aria-selected="true"] { border-color: var(--lamp); color: var(--lamp); }
.tab[aria-selected="true"] b { color: var(--lamp); }
.spp { list-style: none; margin: 0; padding: 0; }
.sp { border-bottom: 1px solid var(--line); }
.sp > button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 2px; cursor: pointer; }
.sp > button:focus-visible { outline: 2px solid var(--lamp); }
.sp .nm { font-family: var(--serif); font-size: 1.12rem; line-height: 1.25; }
.sp .sci { font-family: var(--serif); font-style: italic; color: var(--muted); font-size: .9rem; }
.sp .tags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sp .spark { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; }
.sp .spark small { display: block; font-size: .72rem; color: var(--faint); }
.tag { font-size: .74rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.tag.emerging { color: var(--lamp); border-color: var(--lamp); }
.tag.peaking { color: var(--ink); border-color: var(--muted); }
.tag.last { color: var(--faint); border-style: dashed; }
.tag.scarce, .tag.migrant, .tag.local { color: var(--amber); border-color: var(--amber); }
.tag.cold { color: var(--cold); border-color: var(--cold); }
.tag.mild { color: var(--lamp); border-color: transparent; background: var(--lamp-glow); }
.tag.look { color: var(--ink); border-color: var(--ink); }
.detail { padding: 0 2px 16px; color: var(--muted); font-size: .92rem; }
.detail p { margin: 6px 0; }
.detail .lk { color: var(--ink); background: var(--surface); border-radius: 10px; padding: 10px 12px; margin-top: 10px; }
.detail .lk b { font-weight: 700; }
.fp { width: 100%; height: auto; display: block; margin: 4px 0 2px; }
.compact .sp > button { padding: 10px 2px; }
.empty { color: var(--muted); padding: 12px 2px; }

.nodata { background: var(--surface); border-radius: 14px; padding: 16px; }
.nodata p { margin: 0 0 10px; }
.intro { color: var(--muted); }
.pilots { display: flex; flex-wrap: wrap; gap: 8px; }
.pilots button { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 10px 14px; cursor: pointer; text-align: left; }
.pilots button small { display: block; color: var(--faint); font-size: .75rem; }

.foot { margin-top: 48px; padding-bottom: 40px; color: var(--muted); font-size: .88rem; }
.foot summary { cursor: pointer; color: var(--muted); padding: 10px 0; }
.about p { max-width: 38em; }
.about strong { color: var(--ink); font-weight: 700; }
.built { color: var(--faint); }

.loading { opacity: .5; transition: opacity .2s; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (min-width: 560px) { .hr { width: 52px; } }

:root[data-light="red"] .go { background: var(--surface); color: var(--lamp); border: 1px solid var(--lamp); }