.weather-readout { position: relative; display: flex; flex-direction: column; padding: 20px 22px 18px; border-radius: 30px; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; text-shadow: var(--text-shadow); overflow: visible; }
.weather-readout[hidden] { display: none; }
.weather-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 34px; }
.weather-place { display: flex; align-items: center; gap: 7px; min-width: 0; }
.weather-place svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex-shrink: 0; shape-rendering: geometricPrecision; }
.weather-place strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weather-heading-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }

/* Small round glass buttons (locate / refresh). */
.weather-icon-btn { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--secondary); background: var(--chip-fill); border: 1px solid var(--chip-border); box-shadow: var(--chip-shadow); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, background-color .3s, color .4s ease; }
.weather-icon-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; }
.weather-icon-btn:hover { border-color: var(--glass-highlight); color: var(--ink); }
.weather-icon-btn:active { transform: scale(.94); }
.weather-refresh-btn:disabled svg { animation: wx-spin 1.2s linear infinite; }
.weather-readout[data-state="error"] .weather-refresh-btn { color: var(--ink); border-color: var(--glass-highlight); }

.weather-now { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0 14px; min-height: 116px; }
.weather-reading { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.weather-degrees { display: flex; align-items: baseline; font-family: var(--font-serif); font-optical-sizing: auto; font-size: 62px; font-weight: 500; font-variant-numeric: lining-nums proportional-nums; line-height: .98; letter-spacing: -0.02em; }
.weather-unit { font-family: var(--font-sans); font-size: 16px; letter-spacing: 0; margin-left: 5px; font-weight: 500; color: var(--secondary); opacity: .88; }
.weather-summary { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; margin-top: 7px; }
.weather-feels { font-size: 12px; font-weight: 500; color: var(--secondary); line-height: 1.5; }
/* Hidden lines keep their height, so the card doesn't grow (and push the page) when data arrives. */
.weather-summary[hidden], .weather-feels[hidden] { display: block; visibility: hidden; }
.weather-readout:is([data-state="stale"], [data-state="error"]) .weather-degrees { opacity: .72; }

/* Weather icon: colour artwork, a soft depth shadow plus a per-condition glow. */
.weather-art { position: relative; z-index: 0; width: 124px; height: 96px; flex-shrink: 0; margin-right: 4px; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 3px 5px var(--wx-depth)) drop-shadow(0 0 var(--wx-icon-shadow-blur, 5px) var(--wx-icon-shadow-color, rgb(255 255 255 / 22%))); }
.weather-art::before { content: ""; position: absolute; z-index: -1; inset: 14%; border-radius: 50%; background: radial-gradient(circle, var(--wx-glow, rgb(205 218 235 / 18%)) 0%, transparent 72%); filter: blur(16px); animation: wx-halo-pulse 6s ease-in-out infinite; pointer-events: none; }
.weather-art svg { width: 100%; height: 100%; overflow: visible; shape-rendering: geometricPrecision; }
.wx-sun, .wx-moon, .wx-partly-day, .wx-partly-night, .wx-cloud-front, .wx-rain, .wx-snow, .wx-lightning, .wx-fog { opacity: 0; transform: scale(.9); transform-origin: 64px 64px; transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.weather-readout[data-kind="clear"]:not([data-night="true"]) .wx-sun,
.weather-readout[data-kind="clear"][data-night="true"] .wx-moon,
.weather-readout[data-kind="partly"]:not([data-night="true"]) .wx-partly-day,
.weather-readout[data-kind="partly"][data-night="true"] .wx-partly-night,
.weather-readout:is([data-kind="loading"], [data-kind="cloudy"]) .wx-cloud-front,
.weather-readout[data-kind="rain"] .wx-rain,
.weather-readout[data-kind="snow"] .wx-snow,
.weather-readout[data-kind="thunder"] .wx-lightning,
.weather-readout[data-kind="fog"] .wx-fog { opacity: 1; transform: none; }
.weather-readout[data-kind="loading"] .wx-cloud-front { opacity: .55; }

.weather-art :is(.wx-spin, .wx-sway, .wx-drift) { transform-box: fill-box; transform-origin: center; }
.wx-spin { animation: wx-sway 7s ease-in-out infinite; }
.wx-sway { animation: wx-sway 6s ease-in-out infinite; }
.wx-float { animation: wx-float 5.5s ease-in-out infinite; }
.wx-twinkle { animation: wx-twinkle 3.2s ease-in-out infinite; }
.wx-fall { opacity: 0; animation: wx-fall 1.3s cubic-bezier(.5, 0, .9, .6) infinite; }
.wx-drift { opacity: 0; animation: wx-drift 3.2s linear infinite; }
.wx-flash { animation: wx-flash 3.4s ease-out infinite; }
.wx-haze { animation: wx-haze 4.5s ease-in-out infinite; }
.wx-fall.wx-d2 { animation-delay: -.45s; }
.wx-fall.wx-d3 { animation-delay: -.9s; }
.wx-drift.wx-d2 { animation-delay: -1.1s; }
.wx-drift.wx-d3 { animation-delay: -2.2s; }
.wx-float.wx-d2 { animation-delay: -2.4s; }
.wx-twinkle.wx-d2 { animation-delay: -1.6s; }
.wx-haze.wx-d2 { animation-delay: -1.5s; }
.wx-haze.wx-d3 { animation-delay: -3s; }

.weather-readout { --wx-depth: rgb(0 10 30 / 26%); }
:root:not(.sky-dark) .weather-readout { --wx-depth: rgb(20 55 95 / 18%); }
.weather-readout[data-kind="clear"]:not([data-night="true"]) { --wx-glow: rgb(255 189 64 / 32%); --wx-icon-shadow-blur: 12px; --wx-icon-shadow-color: rgb(255 200 90 / 50%); }
.weather-readout[data-kind="clear"][data-night="true"] { --wx-glow: rgb(150 176 255 / 24%); --wx-icon-shadow-blur: 9px; --wx-icon-shadow-color: rgb(255 244 205 / 36%); }
.weather-readout[data-kind="partly"]:not([data-night="true"]) { --wx-glow: rgb(255 205 110 / 24%); --wx-icon-shadow-blur: 6px; --wx-icon-shadow-color: rgb(255 220 160 / 26%); }
.weather-readout[data-kind="partly"][data-night="true"] { --wx-glow: rgb(158 184 255 / 22%); --wx-icon-shadow-blur: 6px; --wx-icon-shadow-color: rgb(230 225 200 / 24%); }
.weather-readout:is([data-kind="loading"], [data-kind="cloudy"]) { --wx-glow: rgb(205 218 235 / 16%); --wx-icon-shadow-blur: 4px; --wx-icon-shadow-color: rgb(255 255 255 / 14%); }
.weather-readout[data-kind="rain"] { --wx-glow: rgb(90 165 255 / 24%); --wx-icon-shadow-blur: 4px; --wx-icon-shadow-color: rgb(160 205 255 / 20%); }
.weather-readout[data-kind="snow"] { --wx-glow: rgb(185 228 255 / 26%); --wx-icon-shadow-blur: 5px; --wx-icon-shadow-color: rgb(220 240 255 / 28%); }
.weather-readout[data-kind="thunder"] { --wx-glow: rgb(255 205 64 / 26%); --wx-icon-shadow-blur: 7px; --wx-icon-shadow-color: rgb(255 215 120 / 30%); }
.weather-readout[data-kind="fog"] { --wx-glow: rgb(196 205 216 / 16%); --wx-icon-shadow-blur: 4px; --wx-icon-shadow-color: rgb(255 255 255 / 14%); }

.weather-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 15px 0 2px; border-top: 1px solid var(--line); }
.weather-metrics > div { min-width: 0; }
.weather-metrics dt { display: flex; align-items: center; gap: 4px; color: var(--quiet); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; margin-bottom: 7px; white-space: nowrap; }
.weather-metrics dt svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .85; shape-rendering: geometricPrecision; }
.weather-metrics dd .wind-arrow { width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: transform 1.2s cubic-bezier(.4, 0, .2, 1), opacity .6s; }
.weather-metrics dd .wind-arrow.is-set { opacity: .85; }
.weather-metrics dd { color: var(--ink); font-family: var(--num); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; margin: 0; font-variant-numeric: tabular-nums lining-nums; }

.weather-readout:is([data-state="stale"], [data-state="error"]) .weather-art *,
.weather-readout:is([data-state="stale"], [data-state="error"]) .weather-art::before { animation-play-state: paused; }
.page-hidden .weather-art *,
.page-hidden .weather-art::before,
.page-hidden .weather-refresh-btn svg { animation-play-state: paused; }

@keyframes wx-spin { to { transform: rotate(360deg); } }
@keyframes wx-halo-pulse { 0%, 100% { transform: scale(.95); opacity: .55; } 50% { transform: scale(1.04); opacity: .85; } }
@keyframes wx-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes wx-float { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.5px, -3px); } }
@keyframes wx-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes wx-fall { 0% { transform: translate(1px, -5px); opacity: 0; } 18% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-3px, 15px); opacity: 0; } }
@keyframes wx-drift { 0% { transform: translate(0, -6px) rotate(0deg); opacity: 0; } 20% { opacity: 1; } 50% { transform: translate(2px, 3px) rotate(45deg); } 80% { opacity: 1; } 100% { transform: translate(-1px, 12px) rotate(90deg); opacity: 0; } }
@keyframes wx-flash { 0%, 58%, 100% { opacity: 1; } 62% { opacity: .15; } 66% { opacity: 1; } 70% { opacity: .3; } 75% { opacity: 1; } }
@keyframes wx-haze { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

@media (max-width: 1050px) {
  .weather-readout { padding: 18px 19px 16px; }
  .weather-art { width: 112px; margin-right: 0; }
}
@media (max-width: 600px) {
  .weather-readout { padding: 20px 20px 18px; border-radius: 29px; }
  .weather-art { width: 118px; height: 92px; margin-right: 2px; }
  .weather-now { min-height: 112px; }
  .weather-degrees { font-size: 56px; }
  .weather-icon-btn { width: 38px; height: 38px; }
}
@media (max-width: 360px) {
  .weather-readout { padding-inline: 15px; }
  .weather-art { width: 104px; margin-right: 0; }
  .weather-metrics { gap: 6px; }
  .weather-metrics dt svg { display: none; }
  .weather-metrics dd { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .weather-art *, .weather-art::before, .weather-refresh-btn svg { animation: none !important; transition: none !important; }
  .wx-fall, .wx-drift { opacity: 1; }
}