/* =========================================================================
   WEATHER WIDGET — see js/eo-weather.js. Card chrome reuses the app's
   .eo-rail-card / .eo-rail-kicker / .eo-pill-toggle vocabulary (eo-operator.
   css) so it sits on the Command Centre like every other instrument; only
   the weather-specific parts (location chips, forecast strip, icons) are
   defined here.
   ========================================================================= */

.weather-rail-card{ display:flex; flex-direction:column; gap:12px; }

.weather-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.weather-loc{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.weather-loc-chips{ display:flex; flex-wrap:wrap; gap:6px; }

.weather-chip{
  appearance:none; cursor:pointer; white-space:nowrap;
  padding:3px 11px; border-radius:999px;
  border:1px solid var(--line); background:transparent;
  color:var(--muted); font:600 10.5px/1.6 var(--font-mono); letter-spacing:.03em;
  transition:color .15s var(--ease,ease), border-color .15s var(--ease,ease), background .15s var(--ease,ease);
}
.weather-chip:hover{ color:var(--text); border-color:var(--line-bright); }
.weather-chip.is-active{ color:var(--text); border-color:var(--accent); background:rgba(var(--accent-rgb),.12); }
.weather-chip-add{
  width:22px; height:22px; padding:0; border-radius:50%; border-style:dashed;
  display:inline-flex; align-items:center; justify-content:center;
  font:600 13px/1 var(--font-mono);
}

.weather-head-actions{ display:flex; align-items:center; gap:8px; flex:none; }
.weather-range{ display:flex; gap:2px; }

.weather-refresh{
  appearance:none; cursor:pointer; flex:none;
  width:24px; height:24px; padding:0; border-radius:var(--r-md);
  border:1px solid var(--line); background:transparent; color:var(--muted);
  font-size:13px; line-height:1;
  transition:color .15s var(--ease,ease), border-color .15s var(--ease,ease), transform .35s var(--ease,ease);
}
.weather-refresh:hover{ color:var(--text); border-color:var(--hud-edge); }
.weather-refresh:active{ transform:rotate(180deg); }

.weather-search[hidden]{ display:none; }
.weather-search{ display:flex; flex-direction:column; gap:6px; }
.weather-search input.eo-input{ width:100%; }
.weather-search-results{ display:flex; flex-direction:column; gap:2px; max-height:160px; overflow-y:auto; }
.weather-result{
  appearance:none; cursor:pointer; text-align:left;
  padding:6px 9px; border-radius:var(--r-sm); border:1px solid transparent;
  background:var(--card-subtle); color:var(--text); font:500 11.5px/1.4 var(--font-body);
}
.weather-result:hover{ border-color:var(--line-bright); }
.weather-result-empty{ padding:6px 9px; color:var(--faint); font:500 11px/1.4 var(--font-body); }

.weather-loading, .weather-error{ padding:18px 4px; color:var(--faint); font:500 11.5px/1.5 var(--font-body); }
.weather-error{ color:var(--warn); }

/* ---- "now" hero row ---- */
.weather-now{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; row-gap:8px; }
.weather-now-icon{ flex:none; display:flex; }
.weather-now-main{ flex:1 1 130px; min-width:0; }
.weather-now-temp{ color:var(--text); font:650 34px/1 var(--font-display); letter-spacing:-.03em; }
.weather-now-desc{ margin-top:2px; color:var(--muted); font:600 12px/1.3 var(--font-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.weather-now-meta{ margin-top:3px; color:var(--faint); font:500 10.5px/1.4 var(--font-mono); white-space:nowrap; }
.weather-now-extra{ margin-left:auto; display:flex; gap:16px; flex:none; }
.weather-now-stat{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.weather-now-stat b{ color:var(--text); font:650 15px/1 var(--font-mono); }
.weather-now-stat span{ color:var(--faint); font:600 8.5px/1.4 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }

/* ---- forecast strip ---- */
.weather-forecast{
  display:flex; gap:4px; overflow-x:auto; padding-bottom:2px;
  border-top:1px solid var(--line-soft); padding-top:10px;
}
.weather-day{
  flex:1 0 62px; min-width:62px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 4px; border-radius:var(--r-md);
  transition:background .15s var(--ease,ease);
}
.weather-day:hover{ background:var(--card-subtle); }
.weather-day-label{ color:var(--faint); font:700 9px/1 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
.weather-day-icon{ display:flex; margin:1px 0; }
.weather-day-temps{ display:flex; gap:5px; align-items:baseline; }
.weather-day-temps b{ color:var(--text); font:650 12.5px/1 var(--font-mono); }
.weather-day-temps span{ color:var(--faint); font:500 11px/1 var(--font-mono); }
.weather-day-rain{ color:var(--accent-soft); font:600 9.5px/1 var(--font-mono); }
.weather-day-pollen{ min-height:11px; font:700 8.5px/1 var(--font-mono); letter-spacing:.03em; }

.wx-pollen-low{ color:var(--good); }
.wx-pollen-mod{ color:var(--accent-soft); }
.wx-pollen-high{ color:var(--warn); }
.wx-pollen-vhigh{ color:var(--danger); }

.weather-foot{ color:var(--faint); font:500 9.5px/1.4 var(--font-mono); letter-spacing:.03em; }

/* -------------------------------------------------------------------------
   ICONS — shared parts, animated with CSS only (no image/network assets).
   ------------------------------------------------------------------------- */
.wx-icon{ overflow:visible; }

.wx-sun-body{ fill:#F2B347; transform-origin:32px 32px; animation:wx-pulse 3.6s ease-in-out infinite; }
.wx-sun-rays{ stroke:#F2B347; stroke-width:3; stroke-linecap:round; transform-origin:32px 32px; animation:wx-spin 26s linear infinite; }
.wx-moon{ fill:#CDD8EF; filter:drop-shadow(0 0 3px rgba(205,216,239,.5)); animation:wx-pulse 4.4s ease-in-out infinite; transform-origin:32px 32px; }

.wx-cloud{ fill:#B9C6E6; animation:wx-drift 6s ease-in-out infinite; transform-origin:32px 32px; }
.wx-cloud-2{ fill:#8FA0C9; transform:translate(6px,-9px) scale(.72); animation-delay:-2.4s; }
.wx-cloud-flat{ fill:#94A3C4; opacity:.85; }
.wx-cloud-dark{ fill:#6E7CA6; }
.wx-icon-partly .wx-sun, .wx-icon-partly .wx-moon{ animation:wx-pulse 3.6s ease-in-out infinite; }

.wx-fog{ stroke:#9AAAC9; stroke-width:2.4; stroke-linecap:round; opacity:.7; animation:wx-fog-wave 4s ease-in-out infinite; animation-delay:calc(var(--wx-d,0) * .35s); }

.wx-drop{ stroke:#6FB6E8; stroke-linecap:round; animation:wx-fall 1s linear infinite; animation-delay:calc(var(--wx-d,0) * .16s); }
.wx-drop-sm{ stroke-width:2; opacity:.75; animation-duration:1.3s; }
.wx-drop-lg{ stroke-width:2.6; animation-duration:.8s; }

.wx-flake{ fill:#EAF2FF; animation:wx-snow-fall 3.2s linear infinite; animation-delay:calc(var(--wx-d,0) * .5s); }

.wx-bolt{ fill:#F6D758; transform-origin:32px 50px; animation:wx-flicker 2.4s ease-in-out infinite; }

@keyframes wx-spin{ to{ transform:rotate(360deg); } }
@keyframes wx-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.72; } }
@keyframes wx-drift{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(2.5px); } }
@keyframes wx-fog-wave{ 0%,100%{ transform:translateX(0); opacity:.55; } 50%{ transform:translateX(3px); opacity:.85; } }
@keyframes wx-fall{
  0%{ transform:translateY(-4px); opacity:0; }
  30%{ opacity:1; }
  100%{ transform:translateY(8px); opacity:0; }
}
@keyframes wx-snow-fall{
  0%{ transform:translate(0,-6px); opacity:0; }
  15%{ opacity:1; }
  100%{ transform:translate(3px,14px); opacity:0; }
}
@keyframes wx-flicker{
  0%,100%{ opacity:1; }
  46%{ opacity:1; }
  50%{ opacity:.15; }
  54%{ opacity:1; }
  70%{ opacity:.3; }
  74%{ opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .wx-sun-body, .wx-sun-rays, .wx-moon, .wx-cloud, .wx-fog, .wx-drop, .wx-flake, .wx-bolt{ animation:none !important; }
}

/* =========================================================================
   NEXT 48 HOURS — companion card (js/eo-weather.js, renderHourlyCard).
   One continuous 3-hourly strip on a fill-the-width grid: today's remaining
   slots run straight into tomorrow's, so the card is a single row tall and
   leaves no gap at any widget width. The day change is marked by a rule and
   a tag on the first slot rather than by a second row.
   ========================================================================= */
.weather-hourly-card{ display:flex; flex-direction:column; gap:8px; }
.weather-hourly-body{ display:flex; flex-direction:column; gap:8px; }

.wxh-head{ display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.wxh-head .eo-rail-kicker{ flex:none; }
.wxh-head .weather-loc-chips{ flex:1 1 auto; min-width:0; overflow:hidden; }
.wxh-head .weather-refresh{ margin-left:auto; flex:none; }

.wxh-strip{
  display:grid; grid-template-columns:repeat(var(--wxh-cols,16), minmax(0,1fr));
  gap:3px; min-width:0;
}

.wxh-hour{
  display:flex; flex-direction:column; align-items:center; gap:1px;
  min-width:0; padding:4px 3px 5px;
  border-radius:var(--r-sm); border:1px solid transparent;
}
/* A wet slot earns a tint — the one thing you scan this row for. */
.wxh-hour.is-wet{ background:rgba(var(--accent-rgb),.10); border-color:rgba(var(--accent-rgb),.22); }
/* Where today hands over to tomorrow. */
.wxh-hour.is-daybreak{ border-left:1px solid var(--line-bright); border-radius:0 var(--r-sm) var(--r-sm) 0; }

/* Present on every slot so the rows stay aligned; only day-first slots fill it. */
.wxh-hour-day{
  height:11px; color:var(--muted); white-space:nowrap;
  font:600 8px/11px var(--font-mono); letter-spacing:.08em; text-transform:uppercase;
}
/* The time is the axis of this widget, so it reads as a label, not a footnote:
   full HH:00 on a tick rule, so the 3-hour step is legible at a glance. */
.wxh-hour-time{
  display:block; width:100%; text-align:center;
  color:var(--text); font:600 10.5px/1.5 var(--font-mono); letter-spacing:.02em;
  border-bottom:1px solid var(--line); padding-bottom:2px; margin-bottom:3px;
}
.wxh-hour-time i{ font-style:normal; color:var(--faint); font-weight:500; }
.wxh-hour.is-wet .wxh-hour-time{ border-bottom-color:rgba(var(--accent-rgb),.35); }
/* The slot that starts a day gets the brighter tick — that's where the step wraps. */
.wxh-hour.is-daybreak .wxh-hour-time,
.wxh-hour:first-child .wxh-hour-time{ border-bottom-color:var(--line-bright); }
.wxh-hour-icon{ display:flex; align-items:center; justify-content:center; height:20px; }
.wxh-hour-temp{ color:var(--text); font:600 11.5px/1.2 var(--font-mono); }
.wxh-hour-rain{ color:var(--muted); font:500 9px/1.2 var(--font-mono); }
.wxh-hour.is-wet .wxh-hour-rain{ color:var(--accent); }