/* ============================================================
   آسمان — Sky Weather
   Material Design 3 design tokens + components
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  color-scheme: light;

  /* font */
  --font-ui: 'Vazirmatn', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* primary — sky blue tonal palette */
  --md-primary: #00658f;
  --md-on-primary: #ffffff;
  --md-primary-container: #c9e6ff;
  --md-on-primary-container: #001e2c;

  --md-secondary: #4e616d;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #d1e5f4;
  --md-on-secondary-container: #0a1e28;

  --md-tertiary: #8a5100;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffddba;
  --md-on-tertiary-container: #2c1600;

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  --md-surface: #f6fafe;
  --md-surface-dim: #d6dbdf;
  --md-surface-bright: #f6fafe;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f0f4f8;
  --md-surface-container: #eaedf1;
  --md-surface-container-high: #e4e8ec;
  --md-surface-container-highest: #dee2e6;

  --md-on-surface: #171c1f;
  --md-on-surface-variant: #41484d;
  --md-outline: #71787d;
  --md-outline-variant: #c1c7cd;

  --md-inverse-surface: #2c3134;
  --md-inverse-on-surface: #edf1f5;

  /* elevation */
  --elev-1: 0 1px 2px 0 rgb(15 40 60 / 0.10), 0 1px 3px 1px rgb(15 40 60 / 0.06);
  --elev-2: 0 1px 2px 0 rgb(15 40 60 / 0.12), 0 2px 6px 2px rgb(15 40 60 / 0.07);
  --elev-3: 0 2px 3px 0 rgb(15 40 60 / 0.12), 0 5px 12px 4px rgb(15 40 60 / 0.08);
  --elev-4: 0 4px 6px 0 rgb(15 40 60 / 0.12), 0 8px 20px 6px rgb(15 40 60 / 0.10);

  /* motion */
  --ease-m3: cubic-bezier(0.2, 0, 0, 1);
  --ease-m3-emph: cubic-bezier(0.05, 0.7, 0.1, 1);
  --dur-short: 160ms;
  --dur-med: 260ms;
  --dur-long: 420ms;

  /* weather icon palette (on light surfaces) */
  --wi-cloud: #b6c8d8;
  --wi-cloud-2: #98adc0;
  --wi-rain: #3f9bdd;
  --wi-fog: #9fb2c2;
  --wi-snow: #86b0d2;
}

html.dark {
  color-scheme: dark;

  --md-primary: #8bcdfb;
  --md-on-primary: #00344d;
  --md-primary-container: #004c6d;
  --md-on-primary-container: #c9e6ff;

  --md-secondary: #b5c9d7;
  --md-on-secondary: #20333d;
  --md-secondary-container: #354955;
  --md-on-secondary-container: #d1e5f4;

  --md-tertiary: #ffb870;
  --md-on-tertiary: #4a2800;
  --md-tertiary-container: #693c00;
  --md-on-tertiary-container: #ffddba;

  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;

  --md-surface: #0f1417;
  --md-surface-dim: #0f1417;
  --md-surface-bright: #353a3d;
  --md-surface-container-lowest: #0a0f12;
  --md-surface-container-low: #171c1f;
  --md-surface-container: #1b2124;
  --md-surface-container-high: #252b2e;
  --md-surface-container-highest: #30363a;

  --md-on-surface: #dfe3e7;
  --md-on-surface-variant: #bfc8cd;
  --md-outline: #8a9297;
  --md-outline-variant: #41484d;

  --md-inverse-surface: #dfe3e7;
  --md-inverse-on-surface: #2c3134;

  --elev-1: 0 1px 2px 0 rgb(0 0 0 / 0.5), 0 1px 3px 1px rgb(0 0 0 / 0.3);
  --elev-2: 0 1px 2px 0 rgb(0 0 0 / 0.5), 0 2px 6px 2px rgb(0 0 0 / 0.32);
  --elev-3: 0 2px 3px 0 rgb(0 0 0 / 0.5), 0 5px 12px 4px rgb(0 0 0 / 0.34);
  --elev-4: 0 4px 6px 0 rgb(0 0 0 / 0.5), 0 8px 20px 6px rgb(0 0 0 / 0.36);

  --wi-cloud: #8ea4b6;
  --wi-cloud-2: #6d8496;
  --wi-rain: #63b3ec;
  --wi-fog: #7d92a3;
  --wi-snow: #cfe6fa;
}

html[lang='en'] {
  --font-ui: 'Roboto', 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 2. Base ---------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}

::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }

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

/* ---------- 3. Ambient background ---------- */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  will-change: transform;
}
.ambient__blob--a {
  width: 42vw; height: 42vw; min-width: 320px; min-height: 320px;
  top: -12vw; inset-inline-end: -8vw;
  background: color-mix(in oklab, var(--md-primary) 38%, transparent);
  animation: drift-a 26s var(--ease-m3) infinite alternate;
}
.ambient__blob--b {
  width: 36vw; height: 36vw; min-width: 260px; min-height: 260px;
  top: 32vh; inset-inline-start: -10vw;
  background: color-mix(in oklab, var(--md-tertiary) 26%, transparent);
  animation: drift-b 32s var(--ease-m3) infinite alternate;
}
.ambient__blob--c {
  width: 30vw; height: 30vw; min-width: 220px; min-height: 220px;
  bottom: -8vw; inset-inline-end: 18vw;
  background: color-mix(in oklab, var(--md-secondary) 30%, transparent);
  animation: drift-c 38s var(--ease-m3) infinite alternate;
}
@keyframes drift-a { to { transform: translate3d(-6vw, 8vh, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(9vw, -6vh, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(-5vw, -9vh, 0) scale(1.18); } }

.shell { position: relative; }

/* ---------- 4. Helpers ---------- */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- 5. Icon buttons ---------- */
.icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--md-on-surface-variant);
  background: transparent;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur-short) var(--ease-m3), color var(--dur-short) var(--ease-m3), transform var(--dur-short) var(--ease-m3);
}
.icon-btn:hover { background: color-mix(in oklab, var(--md-on-surface) 8%, transparent); }
.icon-btn:active { transform: scale(0.92); }
.icon-btn.is-on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* tooltip */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip-text);
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(-4px) scale(0.94);
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-m3), transform var(--dur-short) var(--ease-m3);
  z-index: 60;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ---------- 6. Brand ---------- */
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--md-primary-container), color-mix(in oklab, var(--md-primary) 26%, var(--md-primary-container)));
  color: var(--md-primary);
  box-shadow: var(--elev-1);
}

/* ---------- 7. Search bar (M3) ---------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  padding-inline: 16px 8px;
  border-radius: 28px;
  background: var(--md-surface-container-high);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-med) var(--ease-m3), background var(--dur-med) var(--ease-m3);
}
.search-bar:focus-within {
  background: var(--md-surface-container-lowest);
  box-shadow: var(--elev-3);
}
.search-bar__lead { width: 22px; height: 22px; flex: none; color: var(--md-on-surface-variant); }
.search-bar__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--md-on-surface);
  font-size: 15px;
  font-family: inherit;
}
.search-bar__input::placeholder { color: var(--md-on-surface-variant); }
.search-bar__input:focus { outline: none; }
.search-bar__divider { width: 1px; height: 24px; background: var(--md-outline-variant); margin-inline: 2px; }
.search-bar__trail {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-variant);
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-m3), color var(--dur-short) var(--ease-m3);
}
.search-bar__trail:hover { background: color-mix(in oklab, var(--md-on-surface) 10%, transparent); color: var(--md-primary); }

/* suggestions */
.suggestions {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  max-height: 336px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 20px;
  background: var(--md-surface-container);
  box-shadow: var(--elev-3);
  animation: pop-in var(--dur-med) var(--ease-m3-emph);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } }

.suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--md-on-surface);
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-short) var(--ease-m3);
}
.suggestion:hover, .suggestion.is-active { background: var(--md-surface-container-highest); }
.suggestion__pin {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex: none;
  border-radius: 50%;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.suggestion__name { font-size: 14px; font-weight: 500; }
.suggestion__sub { font-size: 11.5px; color: var(--md-on-surface-variant); }
.suggestion--empty {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--md-on-surface-variant);
}

/* ---------- 8. Chips ---------- */
.chips-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  direction: ltr;
}
html[dir='rtl'] .chips-row { direction: rtl; }
.chips-row > * { flex: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding-inline: 14px;
  border-radius: 10px;
  border: 1px solid var(--md-outline-variant);
  background: transparent;
  color: var(--md-on-surface-variant);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur-short) var(--ease-m3), color var(--dur-short) var(--ease-m3), border-color var(--dur-short) var(--ease-m3);
}
.chip:hover { background: color-mix(in oklab, var(--md-on-surface) 6%, transparent); }
.chip.is-active {
  background: var(--md-secondary-container);
  border-color: transparent;
  color: var(--md-on-secondary-container);
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--md-primary); flex: none; }

/* ---------- 9. Cards ---------- */
.card {
  border-radius: 24px;
  background: var(--md-surface-container-low);
  box-shadow: var(--elev-1);
  padding: 18px;
}
html.dark .card { background: var(--md-surface-container); }

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--md-on-surface);
}
.section-note { font-size: 11.5px; color: var(--md-on-surface-variant); }

/* ---------- 10. Hero ---------- */
.hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  color: #fff;
  box-shadow: var(--elev-3);
  isolation: isolate;
  background: linear-gradient(140deg, #2e90d1 0%, #0a6ba8 55%, #08517f 100%);
  transition: background var(--dur-long) var(--ease-m3);
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__glow {
  position: absolute;
  width: 320px; height: 320px;
  top: -120px; inset-inline-end: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.34), transparent 68%);
  animation: pulse-glow 9s ease-in-out infinite;
}
.hero__ring {
  position: absolute;
  width: 260px; height: 260px;
  bottom: -140px; inset-inline-start: -70px;
  border-radius: 50%;
  border: 34px solid rgb(255 255 255 / 0.07);
}
@keyframes pulse-glow { 50% { transform: scale(1.18); opacity: 0.75; } }

.hero__inner { position: relative; padding: 22px 22px 24px; }

.hero__place { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.hero__meta { margin-top: 3px; font-size: 12px; color: rgb(255 255 255 / 0.76); }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.16);
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}

.hero__body {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 18px;
}
.hero__icon { flex: none; width: 116px; height: 116px; }
.hero__icon .wi { width: 100%; height: 100%; }
.hero__reading { min-width: 0; }

.hero__temp {
  display: flex;
  align-items: flex-start;
  font-size: clamp(58px, 17vw, 86px);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.hero__temp sup { font-size: 0.34em; font-weight: 400; line-height: 1; margin-top: 0.34em; }
.hero__cond { margin-top: 8px; font-size: 14.5px; font-weight: 500; color: rgb(255 255 255 / 0.94); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 0.16);
}
.hero-stat {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.hero-stat__ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: rgb(255 255 255 / 0.16); }
.hero-stat__k { font-size: 10.5px; color: rgb(255 255 255 / 0.72); }
.hero-stat__v { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* hero gradients per condition */
.hero[data-theme='clear-night'] { background: linear-gradient(140deg, #3a4a86 0%, #1e2a55 55%, #101732 100%); }
.hero[data-theme='cloudy-day'] { background: linear-gradient(140deg, #7d9bb3 0%, #4b6a84 55%, #35506a 100%); }
.hero[data-theme='cloudy-night'] { background: linear-gradient(140deg, #46536e 0%, #2a3448 55%, #1a2130 100%); }
.hero[data-theme='rain'] { background: linear-gradient(140deg, #5b7f99 0%, #33536c 55%, #223a4e 100%); }
.hero[data-theme='snow'] { background: linear-gradient(140deg, #9fc4dc 0%, #6b91ad 55%, #4d6f8a 100%); }
.hero[data-theme='thunder'] { background: linear-gradient(140deg, #5b5b86 0%, #333357 55%, #1e1e38 100%); }
.hero[data-theme='fog'] { background: linear-gradient(140deg, #98a9b4 0%, #6b7c88 55%, #4e5d68 100%); }

/* icon palette inside hero — always light on the dark gradient */
.hero .wi {
  --wi-cloud: #ffffff;
  --wi-cloud-2: rgb(255 255 255 / 0.55);
  --wi-rain: #cfe9ff;
  --wi-fog: rgb(255 255 255 / 0.8);
  --wi-snow: #eaf6ff;
}

/* ---------- 11. Chart ---------- */
.chart-wrap { direction: ltr; overflow-x: auto; overflow-y: hidden; margin-bottom: 4px; }
.chart { display: block; overflow: visible; }
.chart__grid { stroke: var(--md-outline-variant); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.7; }
.chart__area { fill: url(#chartArea); }
.chart__line { fill: none; stroke: var(--md-primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart__dot { fill: var(--md-surface-container-lowest); stroke: var(--md-primary); stroke-width: 2; }
html.dark .chart__dot { fill: var(--md-surface-container-high); }
.chart__dot--now { fill: var(--md-primary); stroke: var(--md-surface-container-lowest); }
.chart__label { fill: var(--md-on-surface-variant); font-size: 10px; font-family: var(--font-ui); }
.chart__label--now { fill: var(--md-primary); font-weight: 700; }
.chart__temp { fill: var(--md-on-surface); font-size: 10.5px; font-weight: 600; font-family: var(--font-ui); }

/* ---------- 12. Hourly strip ---------- */
.hourly-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 4px;
  direction: ltr;
}
.hour {
  flex: none;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 18px;
  background: transparent;
  transition: background var(--dur-short) var(--ease-m3);
}
.hour:hover { background: var(--md-surface-container-high); }
.hour.is-now { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.hour__t { font-size: 11.5px; font-weight: 500; color: var(--md-on-surface-variant); }
.hour.is-now .hour__t { color: var(--md-on-primary-container); font-weight: 700; }
.hour__i { width: 34px; height: 34px; }
.hour__temp { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hour__rain { display: flex; align-items: center; gap: 2px; font-size: 10.5px; color: var(--md-primary); font-variant-numeric: tabular-nums; }
.hour.is-now .hour__rain { color: var(--md-on-primary-container); }

/* ---------- 13. Detail tiles ---------- */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: var(--md-surface-container-low);
  box-shadow: var(--elev-1);
  overflow: hidden;
}
html.dark .tile { background: var(--md-surface-container); }
.tile__head { display: flex; align-items: center; gap: 8px; }
.tile__ico {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 10px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}
.tile__label { font-size: 11.5px; font-weight: 500; color: var(--md-on-surface-variant); }
.tile__value {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 25px; font-weight: 500; line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tile__value small { font-size: 12px; font-weight: 400; color: var(--md-on-surface-variant); }
.tile__sub { font-size: 11.5px; color: var(--md-on-surface-variant); }

.meter { height: 6px; border-radius: 3px; background: var(--md-surface-container-highest); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 3px; transition: width var(--dur-long) var(--ease-m3-emph); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
}
.pill--good { background: #c8e6c9; color: #1b5e20; }
.pill--ok { background: #fff3c4; color: #7a5b00; }
.pill--warn { background: #ffe0b2; color: #8a4b00; }
.pill--bad { background: #ffcdd2; color: #8e1b1b; }
html.dark .pill--good { background: #1e3f22; color: #b6e2b8; }
html.dark .pill--ok { background: #4a3d00; color: #ffe9a0; }
html.dark .pill--warn { background: #4d2f00; color: #ffd7a6; }
html.dark .pill--bad { background: #4d1414; color: #ffc4c4; }

/* wind compass */
.compass { position: relative; width: 46px; height: 46px; flex: none; }
.compass__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--md-outline-variant); }
.compass__needle {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: transform var(--dur-long) var(--ease-m3-emph);
}
.compass__needle svg { width: 26px; height: 26px; color: var(--md-primary); }
.compass__n { position: absolute; top: -1px; inset-inline-start: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 700; color: var(--md-on-surface-variant); }

/* sun arc */
.sunarc { width: 100%; height: auto; overflow: visible; }
.sunarc__track { fill: none; stroke: var(--md-outline-variant); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 6; }
.sunarc__prog { fill: none; stroke: var(--md-tertiary); stroke-width: 3.4; stroke-linecap: round; }
.sunarc__sun { fill: var(--md-tertiary); }
.sunarc__halo { fill: var(--md-tertiary); opacity: 0.22; }

/* ---------- 14. Daily list ---------- */
.day-row {
  display: grid;
  grid-template-columns: 3.6rem 38px minmax(0, 1fr) 3.4rem 7.5rem;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border-radius: 16px;
  transition: background var(--dur-short) var(--ease-m3);
}
.day-row + .day-row { margin-top: 2px; }
.day-row:hover { background: var(--md-surface-container-high); }
.day-row.is-today { background: var(--md-secondary-container); }
.day-row.is-today .day-name { color: var(--md-on-secondary-container); font-weight: 700; }

.day-name { font-size: 13px; font-weight: 600; }
.day-ico { width: 38px; height: 38px; }
.day-cond { font-size: 12.5px; color: var(--md-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.day-rain { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--md-primary); font-variant-numeric: tabular-nums; }
.day-temp { display: flex; align-items: center; gap: 9px; direction: ltr; font-variant-numeric: tabular-nums; }
.day-temp__min { font-size: 12.5px; color: var(--md-on-surface-variant); width: 2.2rem; text-align: end; }
.day-temp__max { font-size: 13.5px; font-weight: 600; width: 2.2rem; }
.day-bar { position: relative; flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--md-surface-container-highest); overflow: hidden; }
.day-bar__fill {
  position: absolute; top: 0; bottom: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #56b6f0, #f0b429 78%, #ef6c3d);
  transition: inset-inline-start var(--dur-long) var(--ease-m3-emph), width var(--dur-long) var(--ease-m3-emph);
}

/* ---------- 15. Weather icons ---------- */
.wi { display: block; overflow: visible; }
.wi-rays { transform-box: view-box; transform-origin: 32px 32px; animation: wi-spin 26s linear infinite; }
.wi-sun-core { transform-box: view-box; transform-origin: 32px 32px; animation: wi-breathe 4.5s ease-in-out infinite; }
.wi-cloud { animation: wi-drift 6s ease-in-out infinite alternate; }
.wi-cloud-b { animation: wi-drift-b 8.5s ease-in-out infinite alternate; }
.wi-drop { animation: wi-fall 1.5s linear infinite; }
.wi-drop.d2 { animation-delay: 0.45s; }
.wi-drop.d3 { animation-delay: 0.9s; }
.wi-flake { transform-box: fill-box; transform-origin: center; animation: wi-snow 2.6s linear infinite; }
.wi-flake.f2 { animation-delay: 0.8s; }
.wi-flake.f3 { animation-delay: 1.6s; }
.wi-bolt { animation: wi-flash 2.4s steps(1, end) infinite; transform-box: fill-box; transform-origin: center; }
.wi-star { animation: wi-twinkle 2.6s ease-in-out infinite; }
.wi-star.s2 { animation-delay: 0.9s; }
.wi-star.s3 { animation-delay: 1.7s; }
.wi-fogline { animation: wi-fogmove 3.4s ease-in-out infinite alternate; }
.wi-fogline.g2 { animation-delay: 0.7s; }
.wi-fogline.g3 { animation-delay: 1.3s; }

@keyframes wi-spin { to { transform: rotate(360deg); } }
@keyframes wi-breathe { 50% { transform: scale(1.06); } }
@keyframes wi-drift { from { transform: translateX(-2.5px); } to { transform: translateX(2.5px); } }
@keyframes wi-drift-b { from { transform: translate(1px, -1.5px); } to { transform: translate(-4px, 1px); } }
@keyframes wi-fall {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(9px); opacity: 0; }
}
@keyframes wi-snow {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(10px) rotate(180deg); opacity: 0; }
}
@keyframes wi-flash {
  0%, 42%, 100% { opacity: 1; }
  46% { opacity: 0.15; }
  50% { opacity: 1; }
  54% { opacity: 0.25; }
  58% { opacity: 1; }
}
@keyframes wi-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes wi-fogmove { from { transform: translateX(-3px); } to { transform: translateX(3px); } }

/* ---------- 16. Skeleton ---------- */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: var(--md-surface-container);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--md-on-surface) 9%, transparent), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }
.skeleton--hero { height: 300px; border-radius: 28px; }
.skeleton--tile { height: 122px; border-radius: 20px; }
.skeleton--wide { height: 260px; }

/* ---------- 17. Buttons ---------- */
.btn-filled {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding-inline: 22px;
  border: 0; border-radius: 999px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--elev-1);
  transition: box-shadow var(--dur-short) var(--ease-m3), filter var(--dur-short) var(--ease-m3), transform var(--dur-short) var(--ease-m3);
}
.btn-filled:hover { box-shadow: var(--elev-2); filter: brightness(1.06); }
.btn-filled:active { transform: scale(0.97); }

/* ---------- 18. Snackbar ---------- */
.snackbar {
  position: fixed;
  z-index: 80;
  inset-inline: 16px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  margin-inline: auto;
  max-width: 460px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  box-shadow: var(--elev-3);
  font-size: 13px;
  animation: snack-in var(--dur-med) var(--ease-m3-emph);
}
@keyframes snack-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.snackbar__text { flex: 1 1 auto; }
.snackbar__action {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--md-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
html.dark .snackbar__action { color: #8bcdfb; }
.snackbar__action:hover { background: rgb(255 255 255 / 0.1); }

/* ---------- 19. Ripple ---------- */
.chip, .suggestion, .btn-filled, .search-bar__trail { position: relative; overflow: hidden; }

.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: 0.22;
  pointer-events: none;
  animation: ripple-out 620ms var(--ease-m3);
}
@keyframes ripple-out { to { transform: scale(2.6); opacity: 0; } }

/* ---------- 20. Entry animations ---------- */
.fade-up { animation: fade-up var(--dur-long) var(--ease-m3-emph) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 21. Responsive ---------- */
@media (min-width: 640px) {
  .hero__inner { padding: 26px 28px 28px; }
  .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero__icon { width: 140px; height: 140px; }
  .day-row { grid-template-columns: 4.4rem 42px minmax(0, 1fr) 4rem 10rem; }
}
@media (max-width: 520px) {
  .day-row { grid-template-columns: 3.2rem 34px 3.6rem minmax(0, 1fr); }
  .day-cond { display: none; }
  .hero__body { gap: 14px; }
  .hero__icon { width: 96px; height: 96px; }
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}