/* ═══════════════════════════════════════════════════════════════════
   CAMPUS WEATHER — now a section embedded inside the merged right panel
   (#ipWeather in index.html, .info-panel in css/styles.css) instead of
   its own floating card. This file only styles the weather content
   itself; positioning/sizing/collapse-to-strip on selection is handled
   by .info-panel/.ip-weather rules in styles.css. Loaded AFTER
   css/styles.css (see index.html), so every var(--x) below resolves
   against that file's :root design tokens — same gold/wine palette,
   same radii/easing — and dark mode (body.dark) is inherited
   automatically since styles.css redefines those same variable names
   under body.dark rather than this file needing its own dark-mode block.
══════════════════════════════════════════════════════════════════ */

.ip-weather {
  font-family: var(--ui);
  flex-shrink: 0;
}

/* Weather has no manual collapse toggle of its own — script.js toggles
   .ip-weather.compact (see styles.css) when a campus/building is selected,
   condensing this to a one-line strip, so no header/toggle row is needed. */
.weather-widget-body { padding-bottom: 14px; border-bottom: 1.5px solid var(--border); }

/* ── Loading state ──────────────────────────────────────────────── */
.weather-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 10px;
  color: var(--muted);
  font-size: 12.5px;
}
.weather-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: wxSpin .8s linear infinite;
}
@keyframes wxSpin { to { transform: rotate(360deg); } }

/* ── Error state ────────────────────────────────────────────────── */
.weather-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  text-align: center;
}
.weather-error-icon { display: inline-flex; color: var(--muted); }
.weather-error p {
  margin: 0;
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.5;
}
.weather-error button {
  margin-top: 4px;
  padding: 7px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--s2);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast);
}
.weather-error button:hover { background: var(--gold-tint); border-color: var(--gold-ring); }

/* ── Current weather card ───────────────────────────────────────────
   Condition-tinted card instead of a flat stat grid — the underlying
   numbers are the same real API values as before, just presented less
   clinically. Flat, single-tone [data-cat] colors (not gradients — see
   --wx-* tokens in styles.css :root / body.dark) so this reads correctly
   in both themes without per-mode overrides scattered through this file. */
.weather-current {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--s2);
  transition: background .3s ease;
}
.weather-current[data-cat="sunny"]   { background: var(--wx-sunny); }
.weather-current[data-cat="partly"]  { background: var(--wx-partly); }
.weather-current[data-cat="cloudy"]  { background: var(--wx-cloudy); }
.weather-current[data-cat="rainy"]   { background: var(--wx-rainy); }
.weather-current[data-cat="stormy"]  { background: var(--wx-stormy); }
.weather-current[data-cat="foggy"]   { background: var(--wx-foggy); }
.weather-current[data-cat="snowy"]   { background: var(--wx-snowy); }

.wx-current-icon { width: 48px; height: 48px; flex-shrink: 0; color: var(--ink2); }
.wx-current-icon svg { width: 100%; height: 100%; display: block; }
.wx-current-main { flex: 1; min-width: 0; }
.wx-current-temp { font-family: var(--mono); font-size: 27px; font-weight: 600; color: var(--ink); line-height: 1.1; transition: font-size var(--fast); }
/* The friendly one-liner — the primary message. Real meteoblue description
   moves to a smaller, muted line below it (still fully visible, just no
   longer the headline). */
.wx-current-takeaway { font-size: 13px; font-weight: 600; color: var(--ink2); margin-top: 4px; line-height: 1.4; }
.wx-current-desc { font-size: 11px; color: var(--muted); margin-top: 3px; }
.wx-current-time { font-size: 10.5px; color: var(--muted); margin-top: 4px; opacity: .8; }

.wx-current-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.wx-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: var(--wx-stat-bg);
  border-radius: var(--r-md);
}
.wx-stat-icon { width: 15px; height: 15px; color: var(--slate); margin-bottom: 1px; }
.wx-stat-icon svg { width: 100%; height: 100%; display: block; }
.wx-stat-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.wx-stat-val { font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* ── 3-day forecast ─────────────────────────────────────────────── */
.weather-forecast {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.wx-forecast-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--s2);
  border-radius: var(--r-md);
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wx-forecast-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(28, 24, 16, .10); }
.wx-forecast-day { font-size: 11px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .3px; }
.wx-forecast-icon { width: 26px; height: 26px; color: var(--ink2); }
.wx-forecast-icon svg { width: 100%; height: 100%; display: block; }
.wx-forecast-desc {
  font-size: 9.5px;
  color: var(--muted);
  line-height: 1.25;
  min-height: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.wx-forecast-temps { display: flex; gap: 6px; font-family: var(--mono); font-size: 11.5px; }
.wx-forecast-max { font-weight: 600; color: var(--ink); }
.wx-forecast-min { color: var(--muted); }

.wx-forecast-empty { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--muted); padding: 10px 0; }