/* ==========================================================================
   Radar — light interface, floating cards, one accent.
   Precipitation keeps the meteorological palette (pale cyan for drizzle,
   through deep blue, into yellow, red and finally pink for the extremes),
   so nothing in the chrome is allowed to use those hues.
   ========================================================================== */

@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/jakarta-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jakarta';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/jakarta-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #eef0f6;
  --card: rgba(255, 255, 255, 0.94);
  --card-solid: #ffffff;
  --ink: #191a2e;
  --mute: #8b90a8;
  --line: rgba(25, 26, 46, 0.08);
  --accent: #6c5ce7;
  --accent-soft: #efecfe;

  --shadow: 0 8px 26px rgba(25, 26, 60, 0.12), 0 1px 3px rgba(25, 26, 60, 0.06);
  --shadow-sm: 0 4px 14px rgba(25, 26, 60, 0.10), 0 1px 2px rgba(25, 26, 60, 0.05);
  --radius: 20px;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--paper);
}

body {
  position: fixed;
  inset: 0;
  font-family: 'Jakarta', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

.card {
  background: var(--card);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
}

/* ---------- map ---------------------------------------------------------- */

#map { position: absolute; inset: 0; background: var(--paper); z-index: 0; }
.leaflet-container { background: var(--paper); font-family: inherit; }

.leaflet-container .radar-frame,
.leaflet-container .forecast-frame {
  transition: opacity 200ms linear;
  pointer-events: none;
  will-change: opacity;
}

/* Past zoom 7 the radar tiles are being magnified well beyond the resolution
   the composite actually has. Softening the whole layer (the class sits on the
   container, so tiles blur as one sheet and no seams appear) shows the data at
   the precision it really carries. */
.leaflet-container .radar-frame { filter: blur(var(--radar-blur, 0px)); }

.leaflet-bottom.leaflet-right {
  bottom: calc(var(--dock-h, 128px) + var(--safe-b) + 16px);
  right: calc(var(--safe-r) + 14px);
}
.leaflet-control-attribution {
  background: none !important;
  color: rgba(25, 26, 46, 0.42) !important;
  font-size: 9px !important;
  font-family: inherit !important;
  letter-spacing: 0.02em;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}
.leaflet-control-attribution a { color: rgba(25, 26, 46, 0.42) !important; }

/* the dot showing where you are */
.me-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(25, 26, 60, 0.35);
}

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

#topbar {
  position: absolute;
  z-index: 500;
  top: calc(var(--safe-t) + 12px);
  left: calc(var(--safe-l) + 12px);
  right: calc(var(--safe-r) + 12px);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }

#place {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 9px;
  height: 46px;
  padding: 0 16px;
  text-align: left;
}
#place-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#place .hint { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--mute); }

#tools { display: flex; flex-direction: column; gap: 10px; }

.round-btn {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--ink);
  transition: color 140ms var(--ease), background 140ms var(--ease);
}
.round-btn svg { width: 21px; height: 21px; display: block; }
.round-btn.is-active { color: var(--accent); background: var(--accent-soft); }

/* search ------------------------------------------------------------------ */

#search {
  position: absolute;
  z-index: 600;
  top: calc(var(--safe-t) + 12px);
  left: calc(var(--safe-l) + 12px);
  right: calc(var(--safe-r) + 12px);
  overflow: hidden;
  display: none;
}
#search.is-open { display: block; }

#search-row { display: flex; align-items: center; height: 46px; padding: 0 8px 0 16px; }
#search-input {
  flex: 1 1 auto; min-width: 0; height: 100%;
  border: 0; background: none; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600;
}
#search-input::placeholder { color: var(--mute); font-weight: 500; }
#search-input:focus { outline: none; }
#search-close { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--mute); }
#search-close svg { width: 17px; height: 17px; }

#search-results { list-style: none; margin: 0; padding: 0; max-height: 44vh; overflow-y: auto; }
#search-results:not(:empty) { border-top: 1px solid var(--line); }
#search-results li + li { border-top: 1px solid var(--line); }
#search-results button { display: block; width: 100%; padding: 12px 16px; text-align: left; }
#search-results .r-name { display: block; font-size: 14px; font-weight: 700; }
#search-results .r-where { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }

/* ---------- legend (vertical, left edge) --------------------------------- */

#legend {
  position: absolute;
  z-index: 400;
  left: calc(var(--safe-l) + 12px);
  top: 50%;
  transform: translateY(-50%);
  padding: 10px 8px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 7px;
}
#legend .l-ramp { width: 8px; height: 126px; border-radius: 4px; }
/* Labels sit at their true position on a logarithmic scale rather than being
   spread evenly, so the numbers actually line up with the colours. */
#legend .l-scale {
  position: relative;
  width: 19px;
  height: 126px;
  font-size: 9px;
  font-weight: 700;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
#legend .l-scale span {
  position: absolute;
  left: 0;
  transform: translateY(50%);
  line-height: 1;
}

/* ---------- status ------------------------------------------------------- */

/* Sits clear of the button stack in the corner, and wraps rather than
   truncating: a message worth showing is worth reading to the end. */
#status {
  position: absolute;
  z-index: 450;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--safe-t) + 122px);
  padding: 10px 16px;
  border-radius: 16px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  width: max-content;
  max-width: min(78vw, 320px);
  opacity: 0;
  transition: opacity 200ms var(--ease);
  pointer-events: none;
}
#status.is-on { opacity: 1; }

/* ---------- model sheet -------------------------------------------------- */

#sheet-scrim {
  position: absolute;
  inset: 0;
  z-index: 700;
  background: rgba(25, 26, 46, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease);
}
#sheet-scrim.is-open { opacity: 1; pointer-events: auto; }

#sheet {
  position: absolute;
  z-index: 710;
  left: calc(var(--safe-l) + 12px);
  right: calc(var(--safe-r) + 12px);
  bottom: calc(var(--safe-b) + 12px);
  padding: 18px 18px 14px;
  transform: translateY(calc(100% + 24px));
  transition: transform 300ms var(--ease);
  background: var(--card-solid);
}
#sheet.is-open { transform: translateY(0); }

#sheet h2 { margin: 0 0 3px; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
#sheet .sheet-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--mute); line-height: 1.45; }

#model-list { list-style: none; margin: 0; padding: 0; }
#model-list li + li { margin-top: 6px; }
#model-list button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  text-align: left;
  background: #f4f5fa;
  transition: background 140ms var(--ease);
}
#model-list button[aria-checked="true"] { background: var(--accent-soft); }
#model-list .m-dot {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(25, 26, 46, 0.20);
}
#model-list button[aria-checked="true"] .m-dot {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 42%, transparent 44%);
}
#model-list .m-name { display: block; font-size: 14px; font-weight: 700; }
#model-list .m-note { display: block; font-size: 12px; color: var(--mute); margin-top: 1px; }

#sheet-done {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* ---------- bottom dock -------------------------------------------------- */

#dock {
  position: absolute;
  z-index: 500;
  left: calc(var(--safe-l) + 12px);
  right: calc(var(--safe-r) + 12px);
  bottom: calc(var(--safe-b) + 12px);
  padding: 12px 14px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
}

#timeline { flex: 1 1 auto; min-width: 0; }

#readout { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 7px; }
#clock { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#offset { font-size: 12px; font-weight: 600; color: var(--mute); }
/* Names the source on screen. Measured radar reads as plain fact; the two
   kinds of guess are marked, and a dashed edge carries "this is a model"
   without spending another colour on it. */
#tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 7px;
  color: var(--mute);
  background: rgba(25, 26, 46, 0.06);
  white-space: nowrap;
}
#tag[data-kind="nowcast"] { color: var(--accent); background: var(--accent-soft); }
#tag[data-kind="forecast"] {
  color: var(--accent);
  background: none;
  border: 1px dashed rgba(108, 92, 231, 0.55);
  padding: 2px 6px;
}
#tag[data-kind="dry"] { color: var(--mute); background: rgba(25, 26, 46, 0.06); }
#tag[hidden] { display: none; }

#scrub { position: relative; height: 34px; touch-action: none; cursor: grab; }
#scrub:active { cursor: grabbing; }

#track { position: absolute; left: 0; right: 0; top: 10px; height: 14px; }

/* Left of the mark: measured radar. A solid rule. */
#track-past {
  position: absolute; top: 5px; left: 0; width: var(--now-x, 25%); height: 4px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(25, 26, 46, 0.14), rgba(25, 26, 46, 0.30));
}

/* Right of the mark: a model's guess. Dashed, so the difference is legible
   without spending a second colour on it. */
#track-future {
  position: absolute; top: 5px; left: var(--now-x, 25%); right: 0; height: 4px;
  border-radius: 0 2px 2px 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(25, 26, 46, 0.26) 0 3px,
    rgba(25, 26, 46, 0) 3px 7px
  );
}

.tick {
  position: absolute; top: 3px; width: 1px; height: 8px;
  margin-left: -0.5px;
  background: rgba(25, 26, 46, 0.16);
  border-radius: 1px;
}

#now-notch {
  position: absolute; top: -5px; left: var(--now-x, 25%);
  width: 2px; height: 24px; margin-left: -1px;
  background: var(--accent);
  border-radius: 1px;
}

#thumb {
  position: absolute; top: 0; left: 50%;
  width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 8px rgba(25, 26, 60, 0.28);
  transition: transform 120ms var(--ease);
}
#scrub.is-dragging #thumb { transform: scale(1.25); transition: none; }

#axis {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 12px;
  font-size: 9.5px; font-weight: 700; color: var(--mute);
  pointer-events: none;
}
#axis .axis-start { position: absolute; left: 0; }
#axis .axis-end { position: absolute; right: 0; }
/* "ora" tracks the mark rather than the middle of the bar. */
#axis .axis-now {
  position: absolute;
  left: var(--now-x, 25%);
  transform: translateX(-50%);
  color: var(--accent);
}

#play {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 15px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(108, 92, 231, 0.38);
  transition: transform 140ms var(--ease);
}
#play:active { transform: scale(0.94); }
#play svg { width: 17px; height: 17px; display: block; }

/* ---------- boot --------------------------------------------------------- */

#boot {
  position: absolute; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: var(--paper);
  transition: opacity 320ms var(--ease);
}
#boot.is-gone { opacity: 0; pointer-events: none; }
#boot .b-mark {
  width: 3px; height: 34px; border-radius: 2px;
  background: var(--accent);
  animation: pulse 1.5s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.22; transform: scaleY(0.65); }
  50%      { opacity: 1;    transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .leaflet-container .radar-frame,
  .leaflet-container .forecast-frame { transition: none; }
  #boot .b-mark { animation: none; opacity: 1; }
  #thumb, #sheet, #play { transition: none; }
}

@media (min-width: 720px) {
  #dock, #topbar, #search, #sheet {
    left: auto;
    right: calc(var(--safe-r) + 16px);
    width: 430px;
  }
}