/* Weathertop — the background is the real sky at the forecast location (see js/sky.js).
   One family, Outfit: hairline-thin geometric numerals for the temperature (their
   round forms echo the ring of stones in the icon), regular weights for the rest. */

@property --sky-1 { syntax: '<color>'; inherits: true; initial-value: #2C78BD; }
@property --sky-2 { syntax: '<color>'; inherits: true; initial-value: #68ACE0; }
@property --sky-3 { syntax: '<color>'; inherits: true; initial-value: #B9DDF3; }

:root {
  --ink: #fff;
  --ink-2: rgba(255, 255, 255, 0.74);
  --ink-3: rgba(255, 255, 255, 0.56);
  --panel: rgba(6, 16, 34, 0.24);
  --rule: rgba(255, 255, 255, 0.13);
  --rain: #A6D8FF;
  --warn: #FFCB4F;
  --severe: #FF8F7E;
  --sheet: #0E1626;
  color-scheme: dark;
  transition: --sky-1 1.4s ease, --sky-2 1.4s ease, --sky-3 1.4s ease;
}

* { box-sizing: border-box; }

html {
  font-family: 'Outfit', system-ui, sans-serif;
  /* No overscroll stretch at the page ends: it tugs the fixed scene with it. */
  overscroll-behavior-y: none;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100svh;
  /* App-like: a long press doesn't select text or pop up a search sheet.
     The search field and alert text stay selectable. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  color: var(--ink);
  background: var(--sky-1);
  text-shadow: 0 1px 2px rgba(0, 20, 50, 0.18);
}

/* The sky, scene and particle layers are sized to the large viewport (100lvh)
   and pinned to the bottom of the screen, so the landscape stays put while
   Chrome's toolbar slides in and out at the top (it covers a strip of sky). */
body::before {
  content: '';
  position: fixed;
  inset: auto 0 0;
  height: 100lvh;
  z-index: -3;
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 55%, var(--sky-3) 100%);
}

#fx { position: fixed; inset: auto 0 0; z-index: -1; width: 100%; height: 100lvh; pointer-events: none; }

/* --- Weathertop scene (js/scene.js) ---------------------------------------- */

#scene { position: fixed; inset: auto 0 0; height: 100lvh; z-index: -2; pointer-events: none; }
#scene svg { display: block; width: 100%; height: 100%; }
/* The ground darkens into the manifest theme_color (#121A17) at the bottom edge,
   so Android's navigation bar in the installed app reads as part of the scene.
   Chrome paints that bar from the manifest and won't draw a web app behind it. */
#scene::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(18, 26, 23, 0), #121A17);
}
#scene [class^='f-'], #scene [class*=' f-'] { transition: fill 1.4s ease; }
#scene .f-far { fill: var(--s-far); }
#scene .f-rock { fill: var(--s-rock); }
#scene .f-rockShade { fill: var(--s-rockShade); }
#scene .f-rockHi { fill: var(--s-rockHi); }
#scene .f-ruin { fill: var(--s-ruin); }
#scene .f-grass { fill: var(--s-grass); }
#scene .f-grassFore { fill: var(--s-grassFore); }
#scene .f-sun { fill: var(--s-sun); }
#scene .c-sun { stop-color: var(--s-sun); }
#scene .c-cloud { stop-color: var(--s-cloud); }
#scene .s-strata { stroke: var(--s-strata); transition: stroke 1.4s ease; }
#scene .s-reed { stroke: var(--s-reed); transition: stroke 1.4s ease; }
#scene .cloud { fill: var(--s-cloud); transition: fill 1.4s ease; }

#scene .sun, #scene .moon, #scene .clouds, #scene .clouds .more, #scene .fog, #scene .snowcap { transition: opacity 1.4s ease; }
#scene .sun, #scene .moon { opacity: 0; }
#scene[data-body='sun'] .sun, #scene[data-body='moon'] .moon { opacity: 1; }
#scene[data-cover='overcast'] .sun, #scene[data-cover='overcast'] .moon,
#scene[data-cover='storm'] .sun, #scene[data-cover='storm'] .moon { opacity: 0; }
#scene .deck { opacity: 0; }
#scene[data-cover='overcast'] .deck, #scene[data-cover='storm'] .deck { opacity: 1; }
#scene .clouds .more { opacity: 0; }
#scene[data-cover='partly'] .clouds .more, #scene[data-cover='overcast'] .clouds .more, #scene[data-cover='storm'] .clouds .more { opacity: 1; }
#scene .fog, #scene .snowcap { opacity: 0; }
#scene[data-fog='true'] .fog { opacity: 1; }
#scene[data-snow='true'] .snowcap { opacity: 0.9; }

#scene .cloud { animation: drift var(--d) linear var(--delay) infinite; }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(560px); } }

#scene .reeds { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }
#scene .reeds.r1 { animation-duration: 6.5s; animation-delay: -2s; }
#scene .reeds.r2 { animation-duration: 4.2s; animation-delay: -1s; }
#scene[data-wind='high'] .reeds { animation-duration: 1.8s; --sway: 3.5deg; }
@keyframes sway { from { transform: skewX(calc(var(--sway, 1.4deg) * -1)); } to { transform: skewX(var(--sway, 1.4deg)); } }

#scene .band { animation: roll 60s ease-in-out infinite alternate; }
#scene .band.b2 { animation-duration: 85s; animation-direction: alternate-reverse; }
@keyframes roll { from { transform: translateX(-120px); } to { transform: translateX(120px); } }

#scene .flash { opacity: 0; }
#scene .flash.go { animation: flash 0.9s ease-out; }
@keyframes flash { 0% { opacity: 0; } 6% { opacity: 0.55; } 14% { opacity: 0.05; } 22% { opacity: 0.4; } 100% { opacity: 0; } }

button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* --- top bar ---------------------------------------------------------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: max(14px, calc(env(safe-area-inset-top) + 6px));
}

.place {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.1rem;
  font-weight: 600;
  text-shadow: inherit;
}
.place svg { width: 16px; height: 16px; opacity: 0.8; }

.alert-pill {
  max-width: 60%;
  padding: 7px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--warn);
  color: #2A1D00;
  font-size: 0.85rem;
  font-weight: 650;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-pill[data-severity='Severe'],
.alert-pill[data-severity='Extreme'] { background: var(--severe); color: #330800; }

input, .alert-body { -webkit-user-select: text; user-select: text; }

/* --- current conditions ---------------------------------------------- */

/* The first screen is all scene; the hourly panel starts just below the fold
   (12px = the panel's top margin). The place bar and hero are pinned while you
   scroll, until the panel arrives and pushes them up and off. */
.stage { min-height: calc(100svh - 12px); }
.pin { position: sticky; top: 0; }

.now {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 3svh;
}

.temp {
  font-weight: 150;
  font-size: clamp(8rem, 42vw, 15rem);
  line-height: 0.78;
  letter-spacing: -0.05em;
  margin: 0 0 0 -0.05em;
  text-shadow: 0 1px 3px rgba(0, 20, 50, 0.3), 0 2px 24px rgba(0, 20, 50, 0.22);
}
.temp-deg { font-weight: 150; margin-left: 0.02em; }

.cond {
  margin: 18px 0 0;
  font-size: 1.75rem;
  font-weight: 560;
  letter-spacing: -0.005em;
}
.hilo { margin: 4px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 1rem; }

/* The scene's clouds and sun drift behind these lines; a tight shadow plus a wide
   soft halo keeps white text readable on white cloud without a visible box. */
.cond, .hilo, .summary {
  text-shadow: 0 1px 2px rgba(0, 20, 50, 0.45), 0 0 14px rgba(0, 20, 50, 0.35);
}

.summary {
  margin: 16px 0 0;
  max-width: 34ch;
  font-size: 1.06rem;
  line-height: 1.45;
}

/* --- panels ----------------------------------------------------------- */

.panel {
  margin-top: 12px;
  padding: 14px 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  background: var(--panel);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}
.panel h2 {
  margin: 0 0 6px;
  padding: 0 16px;
  color: var(--ink-2);
  font-size: 0.84rem;
  font-weight: 600;
}

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

.hourly {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hourly::-webkit-scrollbar { display: none; }

.h-curve { position: absolute; top: 54px; left: 8px; overflow: visible; }

.h-cols {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0 8px;
  list-style: none;
}

.hcol {
  position: relative;
  display: grid;
  grid-template-rows: 20px 34px 84px 32px;
  justify-items: center;
  width: 58px;
  flex: none;
}
.hourly.dry .hcol { grid-template-rows: 20px 34px 84px 0; }

.hcol.newday::before {
  content: '';
  position: absolute;
  inset: 2px auto 4px 0;
  border-left: 1px solid var(--rule);
}

.h-time { color: var(--ink-2); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.hcol:first-child .h-time,
.newday .h-time { color: var(--ink); font-weight: 650; }
.hcol .wx-icon { width: 26px; height: 26px; align-self: center; }

.h-temp {
  position: absolute;
  grid-row: 3;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 560;
}

.h-pop {
  grid-row: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  color: var(--rain);
  font-size: 0.72rem;
}
.h-pop b { font-weight: 650; }
.h-pop::after {
  content: '';
  width: 20px;
  height: calc(var(--pop) * 0.14px);
  border-radius: 2px 2px 0 0;
  background: var(--rain);
  opacity: 0.75;
}

/* --- 10-day ----------------------------------------------------------- */

.daily { margin: 0; padding: 0; list-style: none; }

.day {
  display: grid;
  grid-template-columns: 5.6rem 28px 2.4rem 2.3rem 1fr 2.3rem;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 16px;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  text-align: left;
  text-shadow: inherit;
  font-variant-numeric: tabular-nums;
}
.daily li:first-child .day { border-top: 0; }
.day:active { background: rgba(255, 255, 255, 0.07); }
@media (hover: hover) { .day:hover { background: rgba(255, 255, 255, 0.05); } }

.d-name { font-weight: 600; white-space: nowrap; }
.d-name small { margin-left: 2px; color: var(--ink-3); font-size: 0.8rem; font-weight: 450; }
.day .wx-icon { width: 28px; height: 28px; }
.d-pop { color: var(--rain); font-size: 0.82rem; font-weight: 650; }
.d-lo { color: var(--ink-3); text-align: right; }
.d-hi { font-weight: 600; text-align: right; }

.d-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
}
.d-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.d-now {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(6, 16, 34, 0.45);
  transform: translate(-50%, -50%);
}

/* --- details ---------------------------------------------------------- */

.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}
.details > div { padding: 11px 16px 12px; border-top: 1px solid var(--rule); }
.details > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.details > div:nth-child(-n + 2) { border-top: 0; }
.details dt { color: var(--ink-2); font-size: 0.82rem; }
.details dd {
  margin: 2px 0 0;
  font-size: 1.4rem;
  font-weight: 520;
  font-variant-numeric: tabular-nums;
}
.details small {
  display: block;
  margin-top: 1px;
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 400;
}

/* --- footer + status --------------------------------------------------- */

.foot {
  padding: 18px 4px calc(28px + env(safe-area-inset-bottom));
  color: var(--ink-2);
  font-size: 0.8rem;
  line-height: 1.5;
}
.foot p { margin: 0 0 6px; }
.link {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-shadow: inherit;
}

.status {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 528px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(14, 22, 38, 0.94);
  font-size: 0.92rem;
  line-height: 1.4;
  text-shadow: none;
}

/* --- sheets ----------------------------------------------------------- */

.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 88svh;
  margin: auto auto 0;
  padding: 22px 0 calc(24px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 26px 26px 0 0;
  background: var(--sheet);
  color: var(--ink);
  text-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(0, 6, 18, 0.45); }
.sheet[open] { animation: sheet-up 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }

.sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.sheet-close svg { width: 16px; height: 16px; }

.sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 72px 14px 20px;
}
.sheet-head h2 { margin: 0; font-size: 1.6rem; font-weight: 600; }
.sheet-head p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.4; }
.sheet-head .wx-icon { width: 44px; height: 44px; flex: none; margin-left: auto; }

.sheet .hourly { margin: 4px 0 8px; }

.sheet-rows { margin: 0; }
.sheet-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 20px;
  border-top: 1px solid var(--rule);
}
.sheet-rows dt { color: var(--ink-2); }
.sheet-rows dd { margin: 0; text-align: right; font-weight: 550; }

.alert { padding: 0 20px 18px; }
.alert + .alert { padding-top: 18px; border-top: 1px solid var(--rule); }
.alert h3 { margin: 0 0 4px; font-size: 1.1rem; }
.alert-ends { margin: 0 0 10px; color: var(--warn); font-weight: 600; }
.alert-body { margin: 0 0 12px; max-width: 70ch; line-height: 1.55; white-space: pre-line; }

/* --- places ----------------------------------------------------------- */

.place-list { margin: 0; padding: 0; list-style: none; }
.place-list li { display: flex; }

.place-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  text-align: left;
  font-size: 1.05rem;
}
.place-row small { color: var(--ink-2); font-size: 0.85rem; }
.place-row.is-current::after {
  content: 'Showing';
  margin-left: auto;
  color: var(--rain);
  font-size: 0.82rem;
  font-weight: 600;
}
.place-row.gps { align-items: center; gap: 10px; width: 100%; color: var(--rain); font-weight: 600; }
.place-row.gps svg { width: 18px; height: 18px; flex: none; }

.remove {
  width: 52px;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  color: var(--ink-3);
}
.remove svg { width: 14px; height: 14px; }

.search { display: block; padding: 10px 20px 12px; border-top: 1px solid var(--rule); }
.search input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.search input::placeholder { color: var(--ink-3); }

.empty { padding: 14px 20px; color: var(--ink-2); }

.units { margin-top: 8px; padding: 14px 20px 0; border-top: 1px solid var(--rule); }
.units p { margin: 0 0 4px; color: var(--ink-2); font-size: 0.85rem; }
.units label { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.units input { accent-color: var(--rain); width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  #scene .cloud, #scene .reeds, #scene .band { animation: none; }
  .sheet[open] { animation: none; }
}

@media (min-width: 700px) {
  .stage { min-height: 70vh; }
}