:root{
    color-scheme: dark;
    --font-sans: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-size-11: 0.6875rem;
    --font-size-12: 0.75rem;
    --font-size-13: 0.8125rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-18: 1.125rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-28: 1.75rem;
    --font-size-32: 2rem;
    --font-size-40: 2.5rem;
    --font-size-48: 3rem;
    --font-size-64: 4rem;
    --font-size-80: 5rem;
    --font-display: clamp(2rem, 5.5vw, 3.2rem);
    --font-display-lg: clamp(3.2rem, 7vw, 5rem);
    --space-0: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-10: 40px;
    --space-16: 64px;
    --section-gap: 1.5rem;
    --card-padding: var(--space-4);
    --radius-sm: 8px;
    --radius-inner: 12px;
    --radius-card: 16px;
    --radius-section: 20px;
    --radius-pill: 999px;
    --radius-hero: 24px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.14);
    --shadow-glow: 0 0 40px rgba(255,180,0,0.2);
    --weather-clear-1: #F97316;
    --weather-clear-2: #F59E0B;
    --weather-clear-3: #7DD3FC;
    --weather-clear-4: #3B82F6;
    --weather-cloudy-1: #8BA7C4;
    --weather-cloudy-2: #B8C9D9;
    --weather-cloudy-3: #E8EEF4;
    --weather-rain-1: #2C3E50;
    --weather-rain-2: #3D566E;
    --weather-rain-3: #607D8B;
    --weather-storm-1: #1a1a2e;
    --weather-storm-2: #16213e;
    --weather-storm-3: #0f3460;
    --weather-snow-1: #E8F4FD;
    --weather-snow-2: #B8D4E8;
    --weather-snow-3: #8FB8D6;
    --weather-night-1: #0d1b2a;
    --weather-night-2: #1b263b;
    --weather-night-3: #415a77;
    --accent-primary: #3B82F6;
    --accent-secondary: #F59E0B;
    --alert-red: #EF4444;
    --alert-orange: #F97316;
    --alert-yellow: #EAB308;
    --bg-primary: #0a0e14;
    --bg-secondary: #12161e;
    --bg-card: #161c26;
    --bg-card-elevated: #1a2230;
    --text-primary: #f0f4f8;
    --text-secondary: #b8c4d0;
    --border: rgba(255,255,255,0.06);
    --border-strong: rgba(96, 165, 250, 0.35);
    --border-accent: rgba(59, 130, 246, 0.18);
    --weather-scene-start: var(--weather-clear-1);
    --weather-scene-middle: var(--weather-clear-2);
    --weather-scene-accent: var(--weather-clear-3);
    --weather-scene-end: var(--weather-clear-4);
    --page-glow: none;
    --page-gradient: none;
    --bg: var(--bg-primary);
    --bg-soft: rgba(10, 14, 20, 0.92);
    --surface: rgba(22, 28, 38, 0.92);
    --surface-strong: var(--bg-card);
    --surface-muted: #12161e;
    --text: var(--text-primary);
    --text-muted: var(--text-secondary);
    --text-soft: #b0bfd0;
    --text-caption: #b0bfd0;
    --text-label: #b0bece;
    --text-value: var(--text-primary);
    /* Teplotní škála — barva NESE VÝZNAM (mráz→modrá, horko→červená).
       Prahy drží temp_tone_class() v PHP a tempColorClass() v main.js:
       <0 freezing · 0–11 cold · 12–21 mild · 22–29 warm · ≥30 hot */
    --temp-freezing: #9fb6f9;
    --temp-cold: #5ab2f7;
    --temp-mild: #46c08b;
    --temp-warm: #f0993b;
    --temp-hot: #e85454;
    --accent: #60a5fa;
    --accent-strong: #93c5fd;
    --accent-soft: rgba(59, 130, 246, 0.18);
    --accent-glow: rgba(59, 130, 246, 0.12);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-soft: var(--shadow-card);
    --shadow-glow-blue: 0 0 30px rgba(59, 130, 246, 0.15), 0 0 60px rgba(59, 130, 246, 0.05);
    --shadow-glow-amber: 0 0 30px rgba(245, 158, 11, 0.12), 0 0 60px rgba(245, 158, 11, 0.04);
    --shadow-glow-green: 0 0 30px rgba(16, 185, 129, 0.12), 0 0 60px rgba(16, 185, 129, 0.04);
    --shadow-glow-purple: 0 0 30px rgba(139, 92, 246, 0.12), 0 0 60px rgba(139, 92, 246, 0.04);
    --header-bg: rgba(10, 14, 20, 0.82);
    --hero-top: var(--weather-night-2);
    --hero-bottom: var(--bg-secondary);
    --section-surface: rgba(22, 28, 38, 0.85);
    --section-divider: rgba(59, 130, 246, 0.12);
    --card-gradient: linear-gradient(145deg, rgba(22,30,42,1) 0%, rgba(18,22,30,1) 100%);
    --card-border-glow: rgba(59, 130, 246, 0.12);
    --icon-cloud: #c7d7ea;
    --icon-cloud-shadow: #96adc9;
    --icon-sun: #ffd060;
    --icon-sun-deep: #ff9a3c;
    --icon-moon: #d9e4ff;
    --icon-rain: #68b8ff;
    --icon-bolt: #ffd166;
    --icon-snow: #f1fbff;
    --icon-mist: #89a2bd;
}



:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
:focus:not(:focus-visible){ outline: none; }
.btn:focus-visible, .nav__link:focus-visible, .city-card:focus-visible, .region-pill:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }



.hero-weather__location,
.hero-weather__temp,
.hero-weather__condition,
.hero-weather__meta{ color: var(--text-primary); }
.hero-weather__temp small{ color: var(--text-muted); }







.hero__geo-status{ color: var(--text-muted); }


.hero__content .location-finder__intent-chip{ background: rgba(59,130,246,0.1); color: var(--accent-strong); border-color: rgba(59,130,246,0.2); }
.hero__content .location-finder__intent-chip.is-active,
.hero__content .location-finder__intent-chip:hover{ background: rgba(59,130,246,0.22); color: #bfdbfe; border-color: rgba(59,130,246,0.4); }







.weather-stat-card{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(59, 130, 246, 0.3);
    box-shadow: var(--shadow-card);
}




.weather-viz-card,
.region-hero__aside-card,
.region-alert-card,
.region-alerts__empty,
.city-card--region-rich,
.alerts-card,
.alerts-history__item,
.location-finder__empty{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: var(--shadow-card);
}












.region-hero{
    background: linear-gradient(145deg, rgba(16, 24, 38, 1) 0%, rgba(14, 18, 28, 1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.12);
}
.region-alerts{ background: var(--surface-muted); border-color: rgba(255,255,255,0.06); }
.region-alerts--yellow{
    background: linear-gradient(145deg, rgba(30, 26, 14, 1) 0%, rgba(24, 20, 12, 1) 100%);
    border-left: 3px solid rgba(234,179,8,0.5);
}
.region-alerts--orange{
    background: linear-gradient(145deg, rgba(32, 22, 14, 1) 0%, rgba(26, 18, 12, 1) 100%);
    border-left: 3px solid rgba(249,115,22,0.5);
}
.region-alerts--red{
    background: linear-gradient(145deg, rgba(32, 16, 16, 1) 0%, rgba(26, 14, 14, 1) 100%);
    border-left: 3px solid rgba(239,68,68,0.5);
}







.alerts-empty-state{ background: var(--surface-muted); border-color: rgba(255,255,255,0.06); }


.nearby--cities{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
}
.nearby__description{ color: var(--text-secondary); }




.home-overview-card,
.home-action-card{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(59, 130, 246, 0.3);
    box-shadow: var(--shadow-card);
}
.home-overview-card:hover,
.home-action-card:hover{
    border-left-color: rgba(59, 130, 246, 0.5);
    box-shadow: var(--shadow-card), var(--shadow-glow-blue);
}
.home-overview-card__cta{ color: #93c5fd; }


.saved-location-card,
.home-dashboard-card{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid rgba(59, 130, 246, 0.25);
    box-shadow: var(--shadow-card);
}
.saved-location-card:hover,
.home-dashboard-card:hover{
    border-left-color: rgba(59, 130, 246, 0.5);
    box-shadow: var(--shadow-card), var(--shadow-glow-blue);
}


.home-personalization__empty{
    background: rgba(59,130,246,0.06);
    border: 1px solid rgba(59,130,246,0.18);
    box-shadow: 0 0 30px rgba(59,130,246,0.06);
}
.home-personalization__empty[hidden]{ display: none !important; }
.home-personalization__intent-heading{ color: #b8c4d0; }


.location-finder__input,
.location-finder__select{
    background: rgba(22, 30, 42, 0.9);
    color: var(--text-primary);
    border-color: rgba(59, 130, 246, 0.15);
}
.location-finder__input:focus,
.location-finder__select:focus{
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 0 20px rgba(59, 130, 246, 0.08);
}
.location-finder__input::placeholder{ color: #94a3b8; }


.component-fallback{ background: linear-gradient(145deg, #1a2332 0%, #141a24 100%); }


.region-pill{
    background: linear-gradient(145deg, rgba(22, 30, 42, 1) 0%, rgba(18, 24, 34, 1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.12);
}
.region-pill:hover{
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.08);
}
.trust-block__links a{
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}
.trust-block__links a:hover{
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
}


.mobile-bottom-nav{
    background: rgba(10, 14, 20, 0.92);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(59, 130, 246, 0.08);
}
.mobile-bottom-nav__link:hover,
.mobile-bottom-nav__link.is-active{
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}






.snapshot-card,
.timeline-card{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
}









.home-map-widget__panel{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
}
.home-map-widget__hourly-item,
.home-map-widget__daily-item{
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.1);
}
.home-map-widget__hourly-item:hover,
.home-map-widget__daily-item:hover{
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
}


.city-page__back{
    background: rgba(16, 22, 32, 0.88);
    border-color: rgba(59, 130, 246, 0.15);
}
.city-page__back:hover{
    background: rgba(16, 22, 32, 0.96);
    border-color: rgba(59, 130, 246, 0.3);
}
.city-sticky-nav__link{
    background: rgba(22, 30, 42, 0.9);
    border: 1px solid rgba(255,255,255,0.06);
}
.city-sticky-nav__link.is-active,
.city-sticky-nav__link:hover{
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.25);
    color: #93c5fd;
}


.impact-notice{
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    text-align: center;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    box-shadow: 0 0 20px rgba(16,185,129,0.05);
}
.impact-notice__text{ color: #6ee7b7; }
.impact-notice__link{ color: #34d399; text-decoration: underline; }

/* Cause strip — slim in-content Mini ZOO banner (city pages, after the
   after-hero ad). Same green family as the impact notice but lower-key. */
.cause-strip{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    border-radius: 10px;
    padding: 0.6rem 1rem;
    margin: 0.5rem 0 1.25rem;
    background: rgba(16,185,129,0.06);
    border: 1px solid rgba(16,185,129,0.18);
    font-size: 0.9rem;
}
.cause-strip__text{ color: #a7f3d0; }
.cause-strip__cta{
    color: #fff;
    background: var(--accent);
    text-decoration: none;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.cause-strip__cta:hover{ filter: brightness(1.08); transform: translateY(-1px); }





.hourly-item--card{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s, border-color 0.15s;
}
.hourly-item--card:hover{
    background: linear-gradient(145deg, #1e2b3e 0%, #181f2c 100%);
    border-color: rgba(255,255,255,0.12);
}


.no-data{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    color: #b8c4d0;
}

img, svg, canvas, video, .skip-link, input, select, textarea{ transition: none; }
button, a, .btn{ transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }


*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{ font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body{ font-family: var(--font-sans); line-height: 1.6; color: var(--text); background: var(--bg-primary); text-rendering: optimizeLegibility; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem); overflow-x: hidden; }

/* Weather-reactive ambient backdrop — a subtle gradient tinted by the current
 * condition, laid out as a fixed pseudo-element below all content. Faded with
 * a mask toward the page bottom so text keeps good contrast below the fold. */
body[data-weather]::before{ content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.45; background-image: var(--weather-bg, none); background-size: cover; background-position: top center; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0) 100%); transition: background-image 900ms ease, opacity 900ms ease; }
body[data-weather="clear-day"]    { --weather-bg: linear-gradient(175deg, #4a78a8 0%, #2f4960 55%, var(--bg-primary) 100%); }
body[data-weather="clear-night"]  { --weather-bg: linear-gradient(175deg, #1a2540 0%, #0f1728 55%, var(--bg-primary) 100%); }
body[data-weather="partly-day"]   { --weather-bg: linear-gradient(175deg, #4c647c 0%, #2f3e50 55%, var(--bg-primary) 100%); }
body[data-weather="partly-night"] { --weather-bg: linear-gradient(175deg, #202a3d 0%, #141b28 55%, var(--bg-primary) 100%); }
body[data-weather="cloudy-day"]   { --weather-bg: linear-gradient(175deg, #4a5564 0%, #2e3541 55%, var(--bg-primary) 100%); }
body[data-weather="cloudy-night"] { --weather-bg: linear-gradient(175deg, #1f242c 0%, #141821 55%, var(--bg-primary) 100%); }
body[data-weather="fog"]          { --weather-bg: linear-gradient(175deg, #5a6370 0%, #3a4048 55%, var(--bg-primary) 100%); }
body[data-weather="rain-light"]   { --weather-bg: linear-gradient(175deg, #3b5570 0%, #223345 55%, var(--bg-primary) 100%); }
body[data-weather="rain"]         { --weather-bg: linear-gradient(175deg, #2e4860 0%, #1a2a3a 55%, var(--bg-primary) 100%); }
body[data-weather="snow"]         { --weather-bg: linear-gradient(175deg, #5a6a80 0%, #333f50 55%, var(--bg-primary) 100%); }
body[data-weather="thunderstorm"] { --weather-bg: linear-gradient(175deg, #2b2038 0%, #1a1426 55%, var(--bg-primary) 100%); }

@media (prefers-reduced-motion: reduce) {
    body[data-weather]::before{ transition: none; }
}

/*
 * touch-action: manipulation removes the ~300ms tap-delay and disables
 * double-tap zoom on tappable controls, which makes the UI feel native on
 * mobile without affecting scrolling anywhere else.
 */
a, button, [role="button"], input[type="button"], input[type="submit"], summary, label{ touch-action: manipulation; }

@media (pointer: coarse){
    a, button, [role="button"], input, select, textarea, summary{ min-height: 44px; min-width: 44px; }
}
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
ul, ol{ list-style: none; }
img, video, iframe, embed, object{ max-width: 100%; height: auto; }
html:not(.js) [data-deferred-placeholder]{ display: none !important; }
.sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.icon{ display: inline-block; vertical-align: -0.15em; flex-shrink: 0; }
.section-heading > .icon,
.city-grid__heading > .icon{ margin-right: 0.35em; opacity: 0.7; }
.weather-detail dt > .icon,
.user-preferences__label > .icon{ margin-right: 0.25em; opacity: 0.65; }
.trust-block__links a > .icon{ margin-right: 0.2em; opacity: 0.55; }
.home-map-widget__layer-chip > .icon{ margin-right: 0.2em; }
.skip-link{
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: 1000;
    min-height: 44px;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-pill);
    background: #111827;
    color: #ffffff;
    font-size: var(--font-size-14);
    font-weight: 800;
    transform: translateY(-180%);
    transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
    transform: translateY(0);
    color: #ffffff;
    text-decoration: none;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
    outline: 2px solid var(--accent-strong, #93c5fd);
    outline-offset: 2px;
    border-radius: inherit;
}


.temp--freezing{ color: var(--temp-freezing); }
.temp--cold{ color: var(--temp-cold); }
.temp--mild{ color: var(--temp-mild); }
.temp--warm{ color: var(--temp-warm); }
.temp--hot{ color: var(--temp-hot); }


.section-accordion{ border-radius: var(--radius-section); overflow: hidden; }
.section-accordion__trigger{ display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: var(--space-4); border: none; background: transparent; color: var(--text-primary); font: inherit; font-size: var(--font-size-18); font-weight: 700; cursor: pointer; text-align: left; }
.section-accordion__trigger:hover{ color: var(--accent-strong); }
.section-accordion__body{ display: none; padding: 0 var(--space-4) var(--space-4); }
.section-accordion__body.is-expanded{ display: block; }
.section-accordion__chevron{ display: inline-block; transition: transform 0.2s ease; font-size: 0.75em; flex-shrink: 0; margin-left: var(--space-2); }
.section-accordion.is-expanded .section-accordion__chevron{ transform: rotate(180deg); }
@media (min-width: 768px){
    .section-accordion__trigger{ display: none; }
    .section-accordion__body{ display: block; padding: 0; }
}












.is-lazy-hidden{ opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.is-lazy-hidden.is-revealed{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
    .is-lazy-hidden{ transition: none; }
}


@media (pointer: coarse){
    .btn,
    .region-pill,
    .location-finder__intent-chip,
    .home-personalization__intent-chip,
    .user-preferences__chip,
    .home-map-widget__layer-chip,
    .map-page__layer-chip,
    .alerts-filter-chip,
    .nav__link,
    .footer__nav a,
    .footer__cookie-button,
    .city-page__back,
    .city-sticky-nav__link,
    .mobile-bottom-nav__link{ min-height: 44px; min-width: 44px; }
}


.weather-detail dt,
.weather-stat-card__label,
.snapshot-card__label,
.hourly-item__time,
.daily-item__condition,
.home-dashboard-card__eyebrow,
.home-overview-card__eyebrow,
.city-card__region,
.city-card__updated{
    color: var(--text-label);
    font-size: var(--font-size-12);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.weather-detail dd,
.weather-stat-card__value,
.snapshot-card__value,
.hourly-item__temp,
.daily-item__max,
.daily-item__day{
    color: var(--text-value);
    font-weight: 700;
}
.weather-stat-card__detail,
.daily-item__min,
.hourly-item__condition{
    color: var(--text-secondary);
}

@view-transition{
    navigation: auto;
}

/* View-transition root snapshots need an opaque backing so the outgoing
 * page doesn't bleed through under the incoming one during the crossfade.
 * Using the page's dark surface matches the default theme and keeps the
 * transition feeling like one page fading into the next. */
::view-transition-group(root){
    background: #0a0e14;
}
::view-transition-old(root){
    animation: pocasi-vt-fade-out 180ms ease both;
}
::view-transition-new(root){
    animation: pocasi-vt-fade-in 180ms ease both;
}
@keyframes pocasi-vt-fade-out{ to { opacity: 0; } }
@keyframes pocasi-vt-fade-in{ from { opacity: 0; } }

.toast-region{
    position: fixed;
    right: var(--space-4);
    /* Stack: mobile-bottom-nav (~72–88px incl. safe-area) + 1rem breathing room.
     * Without the extra offset the toast bleeds behind the nav on notched devices. */
    bottom: calc(env(safe-area-inset-bottom, 0px) + 7rem);
    z-index: 220;
    display: grid;
    gap: var(--space-2);
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
}
@media (min-width: 768px) {
    /* Desktop: no bottom nav, pull the toast closer to the corner. */
    .toast-region{ bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem); }
}

.scroll-top{
    position: fixed;
    right: var(--space-4);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2rem);
    z-index: 210;
    min-height: 2.9rem;
    padding: 0.7rem 1rem;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(16px);
    font-size: var(--font-size-14);
    font-weight: 800;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    pointer-events: none;
}

.scroll-top.is-visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-top:hover{
    background: color-mix(in srgb, var(--bg-card) 94%, rgba(59, 130, 246, 0.08));
}

@media (max-width: 767px){
    .scroll-top{
        bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
    }
}



.toast.is-visible{
    opacity: 1;
    transform: translateY(0);
}






.is-skeleton,
.weather-card--loading{
    position: relative;
    overflow: hidden;
}

.is-skeleton > *,
.weather-card--loading > *{
    visibility: hidden;
}

.is-skeleton::after,
.weather-card--loading::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #1c2128 25%, #252d38 50%, #1c2128 75%);
    background-size: 200% 100%;
    transform: translateX(-100%);
    animation: skeletonShimmer 1.5s linear infinite;
}

@keyframes skeletonShimmer{
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

[data-deferred-placeholder][hidden],
[data-section-fallback][hidden]{ display: none !important; }

.deferred-placeholder,
.component-fallback{
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
}

.deferred-placeholder{
    display: grid;
    align-content: start;
    gap: 0.7rem;
    padding: 1rem;
    background: var(--bg-card);
    pointer-events: none;
}

.deferred-placeholder__line,
.deferred-placeholder__bar,
.deferred-placeholder__map-card{
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.deferred-placeholder__line::after,
.deferred-placeholder__bar::after,
.deferred-placeholder__map-card::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.68) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-100%);
    animation: skeletonShimmer 1.5s linear infinite;
}

.deferred-placeholder__line--eyebrow{ width: 7rem; height: 0.7rem; }
.deferred-placeholder__line--title{ width: min(18rem, 72%); height: 1.05rem; }










.deferred-placeholder--map{
    align-content: stretch;
    gap: 0.85rem;
}

.deferred-placeholder__map-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: auto;
}

.deferred-placeholder__map-card{
    min-height: 6.5rem;
    border-radius: var(--radius-card);
}

.component-fallback{
    display: grid;
    place-content: center;
    gap: 0.85rem;
    padding: 1.25rem;
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    text-align: center;
}

.component-fallback__message{
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    line-height: 1.6;
}

.component-fallback__button{
    justify-self: center;
    min-height: 2.5rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-strong);
    color: var(--text-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.component-fallback__button:hover{
    background: var(--accent-soft);
    border-color: rgba(96, 165, 250, 0.42);
    color: var(--accent-strong);
}

.component-fallback--map{ gap: 0.65rem; }
.component-fallback__icon{ color: var(--text-soft); }
.component-fallback__actions{ display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.component-fallback__link{ font-size: var(--font-size-14); font-weight: 600; color: var(--accent); }

.is-component-error canvas,
.is-component-error .leaflet-container{
    opacity: 0.08;
    pointer-events: none;
}

.skip-link--secondary{ top: 4.25rem; left: -9999px; }
.skip-link--secondary + .skip-link--secondary{ top: 7.5rem; }
.skip-link--secondary:focus,
.skip-link--secondary:focus-visible{ left: var(--space-4); }

.offline-banner{
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    z-index: 110;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    max-width: min(92vw, 38rem);
    padding: 0.75rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.92);
    color: #fff;
    box-shadow: var(--shadow-md);
    transform: translate(-50%, 140%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.offline-banner.is-visible{
    transform: translate(-50%, 0);
    opacity: 1;
}

.offline-banner__title{ font-weight: 800; }
.offline-banner__text{ color: rgba(255, 255, 255, 0.88); }

.btn,
.header__icon-button,
.header__temp-badge,
.nav__link,
.hero__scroll-indicator,
.hero-city-chip,
.location-finder__intent-chip,
.location-finder__option,
.user-preferences__chip,
.region-pill,
.city-quick-link-pill,
.mobile-bottom-nav__link,
.map-page__layer-chip,
.map-page__action-btn,
.map-page__popular-chip,
.map-page__radar-toggle,
.map-page__sidebar-toggle,
.map-page__fab-btn,
.alerts-filter-chip{
    min-height: 44px;
}


.container{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0 1rem; }


.header{ background: var(--header-bg); border-bottom: 1px solid var(--border); padding: 0.75rem 0; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(18px); }
.header__inner{ display: flex; align-items: center; gap: 0.5rem; }
.header__logo{ font-size: 1.25rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
.header__logo:hover{ text-decoration: none; color: var(--accent); }
.header--landing .header__inner{ justify-content: center; }
.footer--landing .footer__groups--landing{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
.header__controls{ display: inline-flex; align-items: center; gap: 0.55rem; margin-left: auto; }

.header__menu-toggle{ display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0.45rem 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); color: var(--text); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.header__menu-toggle:hover{ text-decoration: none; border-color: var(--border-strong); transform: translateY(-1px); }
.header__menu-toggle.is-open{ background: var(--accent-soft); border-color: rgba(96, 165, 250, 0.38); color: var(--accent-strong); }





.header__menu-toggle.is-open .header__menu-icon span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.header__menu-toggle.is-open .header__menu-icon span:nth-child(2){ opacity: 0; }
.header__menu-toggle.is-open .header__menu-icon span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.header__nav{ width: auto; }
.header__menu-toggle{ display: none; }

.nav__list{ display: flex; flex-direction: row; gap: 0.75rem; margin: 0; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; list-style: none; white-space: nowrap; }
.nav__link{ display: block; padding: 0; color: var(--text); font-size: 0.88rem; font-weight: 600; border-bottom: none; }
.nav__link:hover{ color: var(--accent); text-decoration: none; }
body.nav-open{ overflow: hidden; }

/* Header nav dropdowns (Aktivity / Objevit) — desktop only (.header__nav is display:none <768px; mobile uses bottom nav). Open on hover + focus-within (no-JS friendly); JS adds click toggle (aria-expanded + data-open) for touch/keyboard. */
.nav__item--has-submenu{ position: relative; }
.nav__dropdown-toggle{ display: inline-flex; align-items: center; gap: 0.28rem; background: none; border: 0; margin: 0; padding: 0; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--text); line-height: inherit; cursor: pointer; }
.nav__dropdown-toggle:hover{ color: var(--accent); }
.nav__dropdown-chevron{ width: 0.62em; height: 0.62em; flex: 0 0 auto; transition: transform 0.18s ease; }
.nav__item--has-submenu:hover .nav__dropdown-chevron,
.nav__item--has-submenu:focus-within .nav__dropdown-chevron,
.nav__dropdown-toggle[aria-expanded="true"] .nav__dropdown-chevron{ transform: rotate(180deg); }
.nav__submenu{ position: absolute; top: 100%; left: 0; z-index: 120; min-width: 12.5rem; margin: 0; padding: 0.85rem 0.4rem 0.4rem; list-style: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; }
.nav__submenu::before{ content: ""; position: absolute; inset: 0.5rem 0 0; border-radius: 12px; background: var(--surface-strong, var(--bg-card)); border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(0,0,0,0.28); z-index: -1; }
.nav__item--has-submenu:hover > .nav__submenu,
.nav__item--has-submenu:focus-within > .nav__submenu,
.nav__submenu[data-open="true"]{ opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sublink{ display: block; padding: 0.5rem 0.7rem; border-radius: 8px; color: var(--text); font-size: 0.86rem; font-weight: 500; white-space: nowrap; }
.nav__sublink:hover, .nav__sublink:focus-visible{ background: var(--accent-soft, rgba(96,165,250,0.14)); color: var(--accent-strong, var(--accent)); text-decoration: none; }

/* Thematic-hub links on the alerts overview (orphan-fix internal linking, 2026-06-01) — reuses .region-pill chips. */
.alerts-themes{ margin-top: var(--space-5, 1.5rem); }
.alerts-themes__links{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--space-3, 0.75rem); }

/* Tablet band 768–899px — the desktop nav (8 items incl. the Aktivity/Objevit dropdowns)
   collided with the logo before the mobile bottom-nav kicks in (≤767px). Free space by
   hiding the logo wordmark (keep the mark) + tightening the nav. Audit 2026-06-01. */
@media (min-width: 768px) and (max-width: 899px){
    .header__logo-text{ display: none; }
    .nav__list{ gap: 0.45rem; }
    .nav__link, .nav__dropdown-toggle{ font-size: 0.8rem; }
}


.main{ min-height: 60vh; padding: 1.75rem 0 2.25rem; }
.main > .container, .main > section, .main > article{ padding-left: 1rem; padding-right: 1rem; max-width: 960px; margin: 0 auto; }


.hero{ text-align: center; padding: 2rem 1rem 1.5rem; }
.hero--homepage{ text-align: left; padding: 0; margin-bottom: 0; }













.hero__geo-status{ font-size: 0.88rem; color: var(--text-secondary); }
.hero__geo-button.is-loading{ position: relative; padding-right: 3rem; }
.hero__geo-button.is-loading::after{
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 1rem;
    height: 1rem;
    margin-top: -0.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: weather-spin 0.75s linear infinite;
}
.hero__geo-status.is-loading{ color: var(--accent-strong); }
.hero__geo-status.is-error{ color: var(--alert-red, #b91c1c); }


.hero__popular-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }










.hero-weather__reading{ display: flex; align-items: center; gap: 0.8rem; }
.hero-weather__temp{ font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; letter-spacing: -0.06em; color: var(--text-primary); }



.hero-weather__cta{ display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; width: fit-content; padding: 0.55rem 0.95rem; border-radius: 999px; background: #2563eb; color: #fff; font-weight: 700; }
.hero-weather__cta:hover{ text-decoration: none; background: #1d4ed8; }
.onboarding-toast{ position: relative; z-index: 60; margin-top: 0.6rem; padding: 0.75rem 0.85rem; border-radius: 14px; background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border: 1px solid #f59e0b; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.onboarding-toast__title{ margin: 0; font-size: 0.9rem; font-weight: 700; color: #92400e; }
.onboarding-toast__copy{ margin: 0.2rem 0 0.5rem; font-size: 0.86rem; color: #78350f; }
.onboarding-toast__actions{ display: flex; gap: 0.5rem; }
.onboarding-toast__save{ min-height: 2rem; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.82rem; }
.onboarding-toast__dismiss{ min-height: 2rem; padding: 0.35rem 0.75rem; border-radius: 999px; font-size: 0.82rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(245,158,11,0.3); }


.onboarding-overlay{ position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity 0.3s ease; }
.onboarding-overlay.is-visible{ opacity: 1; }
.onboarding-overlay__card{ max-width: 380px; width: 90%; padding: var(--space-8); border-radius: var(--radius-hero); background: var(--bg-card-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-glow-blue); text-align: center; transform: translateY(20px); transition: transform 0.3s ease; }
.onboarding-overlay.is-visible .onboarding-overlay__card{ transform: translateY(0); }
.onboarding-overlay__title{ margin: 0 0 var(--space-3); font-size: var(--font-size-24); font-weight: 800; color: var(--text-primary); }
.onboarding-overlay__actions{ display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); }
.onboarding-overlay__geo{ display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.75rem 1.5rem; border: none; border-radius: var(--radius-pill); font-size: var(--font-size-16); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent) 100%); cursor: pointer; transition: box-shadow 0.15s ease; }
.onboarding-overlay__geo:hover{ box-shadow: var(--shadow-glow-blue); }
.onboarding-overlay__geo svg{ width: 1.2em; height: 1.2em; fill: currentColor; }
.onboarding-overlay__search{ min-height: 2.75rem; padding: 0.6rem 1.25rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); font-size: var(--font-size-14); font-weight: 600; color: var(--accent-strong); background: transparent; cursor: pointer; transition: background 0.15s ease; }
.onboarding-overlay__search:hover{ background: var(--accent-soft); }
.onboarding-overlay__skip{ padding: 0.5rem; border: none; background: none; font-size: var(--font-size-14); color: var(--text-soft); cursor: pointer; }
.onboarding-overlay__skip:hover{ color: var(--text-secondary); }
.onboarding-overlay__error{ margin: var(--space-4) 0 0; padding: 0.65rem 0.85rem; border-radius: var(--radius-inner); background: var(--danger-soft, rgba(220, 38, 38, 0.08)); color: var(--danger, #b91c1c); font-size: var(--font-size-14); font-weight: 500; line-height: 1.4; text-align: center; }
.home-alert-banner{ margin: 1rem 0 0.45rem; }
.home-alert-banner[hidden]{ display: none; }

/* ---------- Activity suitability pages (/cyklistika/praha, …) ---------- */
.activity-page{ display: flex; flex-direction: column; gap: var(--space-6); }
.activity-page__hero{ display: grid; grid-template-columns: auto 1fr; grid-template-areas: "kicker kicker" "city city" "score score" "link link"; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-section); background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-elevated) 100%); box-shadow: var(--shadow-lg); }
.activity-page__hero--great{ box-shadow: var(--shadow-lg), 0 0 0 1px rgba(34, 197, 94, 0.25); }
.activity-page__hero--good { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(59, 130, 246, 0.2); }
.activity-page__hero--fair { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(234, 179, 8, 0.25); }
.activity-page__hero--poor,
.activity-page__hero--bad  { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(239, 68, 68, 0.3); }
.activity-page__kicker{ grid-area: kicker; font-size: var(--font-size-14); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.activity-page__city{ grid-area: city; margin: 0; font-size: var(--font-size-32); font-weight: 800; color: var(--text-primary); line-height: 1.15; }
.activity-page__scoreboard{ grid-area: score; display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.activity-page__score-ring{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: radial-gradient(circle, var(--bg-card-elevated) 55%, transparent 56%), conic-gradient(var(--ring-color, var(--accent-primary)) calc(var(--ring-pct, 100%) * 1), rgba(255,255,255,0.08) 0%); flex: 0 0 auto; }
.activity-page__score-ring--great{ --ring-color: #22c55e; --ring-pct: 100%; }
.activity-page__score-ring--good { --ring-color: #3b82f6; --ring-pct: 75%; }
.activity-page__score-ring--fair { --ring-color: #eab308; --ring-pct: 55%; }
.activity-page__score-ring--poor { --ring-color: #f97316; --ring-pct: 35%; }
.activity-page__score-ring--bad  { --ring-color: #ef4444; --ring-pct: 20%; }
.activity-page__score-value{ font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--text-primary); }
.activity-page__score-outof{ font-size: var(--font-size-13); color: var(--text-soft); margin-top: 0.1rem; }
.activity-page__score-copy{ display: flex; flex-direction: column; gap: 0.35rem; }
.activity-page__rating{ font-size: var(--font-size-20); font-weight: 800; color: var(--text-primary); }
.activity-page__verdict{ margin: 0; font-size: var(--font-size-14); color: var(--text-secondary); line-height: 1.5; max-width: 38ch; }
.activity-page__best-window{ margin: 0.5rem 0 0; font-size: var(--font-size-14); font-weight: 600; color: var(--text-primary); }
.activity-page__city-link{ grid-area: link; justify-self: start; }

.activity-page__factors{ padding: var(--space-5); border-radius: var(--radius-section); background: var(--bg-card); }
.activity-page__factor-list{ list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); }
.activity-page__factor{ display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border-radius: var(--radius-inner); background: var(--bg-card-elevated); border-left: 4px solid var(--accent-primary); }
.activity-page__factor--ok  { border-left-color: #22c55e; }
.activity-page__factor--warn{ border-left-color: #eab308; }
.activity-page__factor--bad { border-left-color: #ef4444; }
.activity-page__factor-label{ font-size: var(--font-size-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.activity-page__factor-note{ font-size: var(--font-size-14); color: var(--text-primary); line-height: 1.45; }

.activity-page__weekly{ padding: var(--space-5); border-radius: var(--radius-section); background: var(--bg-card); }
.activity-page__weekly-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.45rem; margin-top: var(--space-3); }
.activity-page__day{ display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.6rem 0.4rem; border-radius: var(--radius-inner); background: var(--bg-card-elevated); text-align: center; }
.activity-page__day--great{ box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.35); }
.activity-page__day--good { box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.3); }
.activity-page__day--fair { box-shadow: inset 0 0 0 1px rgba(234, 179, 8, 0.35); }
.activity-page__day--poor { box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.35); }
.activity-page__day-label{ font-size: var(--font-size-11); font-weight: 700; text-transform: uppercase; color: var(--text-soft); }
.activity-page__day-score{ font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
.activity-page__day-rating{ font-size: var(--font-size-11); color: var(--text-soft); }

.activity-page__others{ padding: var(--space-5); border-radius: var(--radius-section); background: var(--bg-card); }
.activity-page__others-list{ list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.activity-page__others-list a{ display: inline-block; padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--bg-card-elevated); color: var(--accent-strong); font-size: var(--font-size-14); font-weight: 600; text-decoration: none; transition: background 0.15s ease; }
.activity-page__others-list a:hover{ background: var(--accent-soft); }

@media (min-width: 720px) {
    .activity-page__hero{ grid-template-columns: 1fr auto; grid-template-areas: "kicker link" "city city" "score score"; }
    .activity-page__city-link{ justify-self: end; }
}
@media (max-width: 600px) {
    .activity-page__weekly-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Weekend outlook (/vikend) ---------- */
.weekend-page{ display: flex; flex-direction: column; gap: var(--space-6); }
.weekend-page__hero{ padding: var(--space-6); border-radius: var(--radius-section); background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-elevated) 100%); box-shadow: var(--shadow-lg); }
.weekend-page__kicker{ font-size: var(--font-size-13); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-strong); }
.weekend-page__window{ margin: var(--space-2) 0 var(--space-3); font-size: var(--font-size-32); font-weight: 800; color: var(--text-primary); }
.weekend-page__intro{ margin: 0; color: var(--text-secondary); max-width: 55ch; font-size: var(--font-size-14); line-height: 1.55; }

.weekend-page__section{ padding: var(--space-5); border-radius: var(--radius-section); background: var(--bg-card); }
.weekend-page__section--top{ box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18); }
.weekend-page__section--bottom{ box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.18); }
.weekend-page__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.weekend-page__grid--compact{ grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.weekend-card{ padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); background: var(--bg-card-elevated); border-left: 4px solid var(--accent-primary); display: flex; flex-direction: column; gap: var(--space-2); }
.weekend-card--ideal{ border-left-color: #22c55e; }
.weekend-card--good { border-left-color: #3b82f6; }
.weekend-card--fair { border-left-color: #eab308; }
.weekend-card--poor { border-left-color: #f97316; }
.weekend-card--bad  { border-left-color: #ef4444; }
.weekend-card__head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.weekend-card__city{ font-size: var(--font-size-18); font-weight: 700; color: var(--text-primary); text-decoration: none; }
.weekend-card__city:hover{ color: var(--accent-strong); }
.weekend-card__score{ font-size: var(--font-size-20); font-weight: 800; color: var(--accent-strong); white-space: nowrap; }
.weekend-card__verdict{ margin: 0; font-size: var(--font-size-13); color: var(--text-secondary); line-height: 1.45; }
.weekend-card__days{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0; padding: 0.5rem 0 0; border-top: 1px solid rgba(255,255,255,0.06); }
.weekend-card__day{ display: flex; flex-direction: column; gap: 0.1rem; }
.weekend-card__day dt{ font-size: var(--font-size-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft); margin: 0; }
.weekend-card__day dd{ margin: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.weekend-card__temp{ font-size: var(--font-size-14); font-weight: 600; color: var(--text-primary); }
.weekend-card__pop{ font-size: var(--font-size-12); color: var(--text-soft); }

/* ---------- Weather report panel — floating "Waze for weather" ---------- */
.report-panel{ position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem); right: 1rem; z-index: 55; }
.report-panel__trigger{ display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1rem 0.65rem 0.75rem; border: 1px solid var(--border-strong); border-radius: 999px; background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent) 100%); color: #fff; font-size: var(--font-size-14); font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,0.35); cursor: pointer; position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.report-panel__trigger:hover{ transform: translateY(-1px); box-shadow: 0 16px 40px rgba(0,0,0,0.45); }
.report-panel__trigger-emoji{ font-size: 1.2rem; line-height: 1; }
.report-panel__trigger-badge{ position: absolute; top: -0.35rem; right: -0.35rem; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: #ef4444; color: #fff; font-size: var(--font-size-11); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.report-panel__body{ position: absolute; right: 0; bottom: calc(100% + 0.6rem); width: min(22rem, calc(100vw - 2rem)); padding: var(--space-4); border-radius: var(--radius-section); background: var(--bg-card); box-shadow: 0 24px 60px rgba(0,0,0,0.5); border: 1px solid var(--border); }
.report-panel__head{ display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.report-panel__title{ font-size: var(--font-size-16); font-weight: 700; color: var(--text-primary); }
.report-panel__close{ width: 2rem; height: 2rem; border: none; background: var(--bg-card-elevated); color: var(--text-soft); font-size: 1.3rem; border-radius: 999px; cursor: pointer; line-height: 1; padding: 0; }
.report-panel__close:hover{ color: var(--text-primary); }
.report-panel__intro{ margin: 0 0 var(--space-3); font-size: var(--font-size-13); color: var(--text-secondary); line-height: 1.45; }
.report-panel__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.report-panel__option{ display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.65rem 0.35rem; border: 1px solid transparent; border-radius: var(--radius-inner); background: var(--bg-card-elevated); color: var(--text-primary); font-weight: 600; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease; }
.report-panel__option:hover{ background: var(--accent-soft); border-color: var(--accent-primary); transform: translateY(-1px); }
.report-panel__option-emoji{ font-size: 1.6rem; line-height: 1; }
.report-panel__option-label{ font-size: var(--font-size-11); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text-soft); }
.report-panel__note{ margin: var(--space-3) 0 0; font-size: var(--font-size-11); color: var(--text-soft); line-height: 1.4; }
.report-panel__toast{ margin-top: var(--space-3); padding: 0.6rem 0.75rem; border-radius: var(--radius-inner); background: var(--bg-card-elevated); border-left: 3px solid var(--accent-primary); display: flex; flex-direction: column; gap: 0.15rem; }
.report-panel__toast--success{ border-left-color: #22c55e; }
.report-panel__toast--warn { border-left-color: #eab308; }
.report-panel__toast--error{ border-left-color: #ef4444; }
.report-panel__toast-title{ font-size: var(--font-size-13); font-weight: 700; color: var(--text-primary); }
.report-panel__toast-body{ font-size: var(--font-size-12); color: var(--text-secondary); }

@media (max-width: 600px) {
    .report-panel{ right: 0.6rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem); }
    .report-panel__trigger-label{ display: none; }
}

/* ---------- User report markers on Leaflet maps ---------- */
.report-marker{ position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(10, 14, 20, 0.85); border: 2px solid rgba(255, 255, 255, 0.8); border-radius: 50%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease; }
.report-marker:hover{ transform: scale(1.15); }
.report-marker__emoji{ font-size: 1.4rem; line-height: 1; }
.report-marker__count{ position: absolute; top: -6px; right: -6px; min-width: 1.1rem; height: 1.1rem; padding: 0 4px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid rgba(10, 14, 20, 0.85); }
.report-marker--fresh::after{ content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(59, 130, 246, 0.6); animation: reportMarkerPulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes reportMarkerPulse {
    0%   { transform: scale(0.8); opacity: 0.9; }
    70%  { transform: scale(1.5); opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .report-marker--fresh::after{ animation: none; }
}

/* Leaflet popup for report clusters — voting UI */
.leaflet-popup.report-popup-wrapper .leaflet-popup-content-wrapper{ padding: 0; border-radius: 14px; background: var(--bg-card); color: var(--text-primary); box-shadow: 0 16px 40px rgba(0,0,0,0.5); border: 1px solid var(--border); }
.leaflet-popup.report-popup-wrapper .leaflet-popup-content{ margin: 0; padding: 0.85rem 1rem; }
.leaflet-popup.report-popup-wrapper .leaflet-popup-tip{ background: var(--bg-card); }
.report-popup{ font-family: var(--font-sans); min-width: 210px; }
.report-popup__head{ display: flex; align-items: center; gap: 0.5rem; }
.report-popup__emoji{ font-size: 1.6rem; }
.report-popup__code{ font-size: var(--font-size-16); font-weight: 700; color: var(--text-primary); }
.report-popup__meta{ margin: 0.25rem 0 0.6rem; font-size: var(--font-size-12); color: var(--text-soft); line-height: 1.3; }
.report-popup__actions{ display: flex; gap: 0.4rem; }
.report-popup__btn{ flex: 1; padding: 0.4rem 0.5rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--font-size-12); font-weight: 700; cursor: pointer; transition: background 0.12s ease, transform 0.12s ease; }
.report-popup__btn--confirm{ background: rgba(34, 197, 94, 0.15); color: #4ade80; border-color: rgba(34, 197, 94, 0.35); }
.report-popup__btn--confirm:hover:not(:disabled){ background: rgba(34, 197, 94, 0.25); transform: translateY(-1px); }
.report-popup__btn--deny{ background: rgba(239, 68, 68, 0.12); color: #fca5a5; border-color: rgba(239, 68, 68, 0.3); }
.report-popup__btn--deny:hover:not(:disabled){ background: rgba(239, 68, 68, 0.22); transform: translateY(-1px); }
.report-popup__btn:disabled{ opacity: 0.5; cursor: not-allowed; transform: none; }
.report-popup__status{ margin: 0.5rem 0 0; padding: 0.35rem 0.5rem; border-radius: var(--radius-inner); background: var(--bg-card-elevated); font-size: var(--font-size-11); color: var(--text-secondary); text-align: center; }

/* ---------- City activity teasers (entry-points to /{activity}/{city}) ---------- */
.city-activity-teasers__weekend-link{ margin-left: auto; font-size: var(--font-size-13); font-weight: 600; color: var(--accent-strong); text-decoration: none; }
.city-activity-teasers__weekend-link:hover{ color: var(--text-primary); }
.city-activity-teasers__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.6rem; margin-top: var(--space-3); }
.city-activity-tile{ display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; grid-template-areas: "emoji label" "emoji score" "emoji rating"; gap: 0.1rem 0.6rem; padding: 0.85rem 0.95rem; border-radius: var(--radius-card); background: var(--bg-card-elevated); color: var(--text-primary); text-decoration: none; border-left: 4px solid var(--accent-primary); transition: transform 0.15s ease, background 0.15s ease; }
.city-activity-tile:hover{ transform: translateY(-2px); background: var(--bg-card); }
.city-activity-tile--great{ border-left-color: #22c55e; }
.city-activity-tile--good { border-left-color: #3b82f6; }
.city-activity-tile--fair { border-left-color: #eab308; }
.city-activity-tile--poor { border-left-color: #f97316; }
.city-activity-tile--bad  { border-left-color: #ef4444; }
.city-activity-tile__emoji{ grid-area: emoji; font-size: 2rem; line-height: 1; align-self: center; }
.city-activity-tile__label{ grid-area: label; font-size: var(--font-size-13); font-weight: 700; color: var(--text-primary); }
.city-activity-tile__score{ grid-area: score; font-size: var(--font-size-14); color: var(--text-secondary); }
.city-activity-tile__score strong{ font-size: var(--font-size-20); color: var(--text-primary); font-weight: 800; }
.city-activity-tile__rating{ grid-area: rating; font-size: var(--font-size-11); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }

/* Mobile: show the 4 highest-scoring tiles only. The backend already sorts
 * by score descending, so nth-child(n+5) reliably hides the least-relevant
 * activities for today's weather and keeps the widget a single 2x2 block. */
@media (max-width: 600px) {
    .city-activity-teasers__grid > .city-activity-tile:nth-child(n+5){ display: none; }
}

/* Live community report banner on city pages */
.city-report-banner{ display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; margin: var(--space-3) 0; border-radius: var(--radius-card); background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(59, 130, 246, 0.04) 100%); border-left: 4px solid #3b82f6; }
.city-report-banner--rain { background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%); border-left-color: #3b82f6; }
.city-report-banner--storm{ background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.05) 100%); border-left-color: #a855f7; }
.city-report-banner--snow { background: linear-gradient(135deg, rgba(148, 163, 184, 0.2) 0%, rgba(148, 163, 184, 0.05) 100%); border-left-color: #94a3b8; }
.city-report-banner--wind { background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(234, 179, 8, 0.05) 100%); border-left-color: #eab308; }
.city-report-banner--clear{ background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(251, 191, 36, 0.04) 100%); border-left-color: #fbbf24; }
.city-report-banner__emoji{ font-size: 2.1rem; line-height: 1; }
.city-report-banner__copy{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.city-report-banner__headline{ font-size: var(--font-size-14); font-weight: 700; color: var(--text-primary); }
.city-report-banner__meta{ font-size: var(--font-size-12); color: var(--text-soft); }
.city-report-banner--linked{ text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.city-report-banner--linked:hover{ transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,0.3); }
.city-report-banner__arrow{ margin-left: auto; font-size: 1.3rem; color: var(--accent-strong); font-weight: 700; padding-left: 0.5rem; }
.home-report-banner-wrap{ margin-top: 0.5rem; }
.home-report-banner-wrap .city-report-banner{ margin: 0; }

/* ---------- Thematic hubs (/bourky, /dest, /snih, /vitr) ---------- */
.thematic-hub{ display: flex; flex-direction: column; gap: var(--space-6); }
.thematic-hub__hero{ display: flex; align-items: center; gap: 1rem; padding: var(--space-5); border-radius: var(--radius-section); background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-elevated) 100%); box-shadow: var(--shadow-lg); }
.thematic-hub__emoji{ font-size: 3.2rem; line-height: 1; }
.thematic-hub__title{ margin: 0 0 var(--space-2); font-size: var(--font-size-32); font-weight: 800; color: var(--text-primary); }
.thematic-hub__intro{ margin: 0; color: var(--text-secondary); line-height: 1.5; max-width: 60ch; }

.thematic-hub__live{ padding: var(--space-4) var(--space-5); border-radius: var(--radius-card); background: var(--bg-card); border-left: 4px solid var(--accent-primary); }
.thematic-hub__live-list{ list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--font-size-14); }
.thematic-hub__live-list li{ display: flex; align-items: center; gap: 0.4rem; }
.thematic-hub__live-emoji{ font-size: 1.3rem; }

.thematic-hub__section{ padding: var(--space-5); border-radius: var(--radius-section); background: var(--bg-card); }
.thematic-hub__section--calm{ background: color-mix(in srgb, var(--bg-card) 94%, transparent); }
.thematic-hub__city-list{ list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.5rem; }
.thematic-hub__city-list--calm{ grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.thematic-hub__city-link{ display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-inner); background: var(--bg-card-elevated); color: var(--text-primary); text-decoration: none; transition: transform 0.15s ease; }
.thematic-hub__city-link:hover{ transform: translateY(-1px); background: var(--bg-card); }
.thematic-hub__city-name{ font-size: var(--font-size-16); font-weight: 700; }
.thematic-hub__city-temp{ font-size: var(--font-size-14); color: var(--accent-strong); font-weight: 700; }
.thematic-hub__city-reason{ font-size: var(--font-size-11); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft); }
.thematic-hub__empty{ margin: var(--space-3) 0 0; color: var(--text-soft); font-style: italic; }
.thematic-hub__knowledge{ list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.thematic-hub__knowledge a{ display: inline-block; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--bg-card-elevated); color: var(--accent-strong); font-size: var(--font-size-13); text-decoration: none; }
.thematic-hub__knowledge a:hover{ background: var(--accent-soft); }

/* Climate records — hot/cold/wet/dry highlight pills beneath climate chart */
.city-climate__records{ list-style: none; margin: var(--space-3) 0 var(--space-3); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.5rem; }
.city-climate__record{ display: flex; flex-direction: column; gap: 0.1rem; padding: 0.65rem 0.85rem; border-radius: var(--radius-inner); background: var(--bg-card-elevated); border-left: 3px solid var(--accent-primary); }
.city-climate__record--hot{ border-left-color: #ef4444; }
.city-climate__record--cold{ border-left-color: #3b82f6; }
.city-climate__record--wet{ border-left-color: #06b6d4; }
.city-climate__record--dry{ border-left-color: #eab308; }
.city-climate__record-icon{ font-size: 1.2rem; line-height: 1; }
.city-climate__record-label{ font-size: var(--font-size-11); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft); }
.city-climate__record-value{ font-size: var(--font-size-14); font-weight: 700; color: var(--text-primary); }
.home-alert-banner__inner{ display: grid; gap: 0.9rem; padding: 1.25rem; border-radius: var(--radius-section); border: 1px solid rgba(214, 183, 106, 0.3); background: var(--bg-card-elevated); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2); }
.home-alert-banner__badge{ display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-height: 2rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255, 255, 255, 0.06); color: var(--alert-yellow); }
.home-alert-banner__copy{ display: grid; gap: 0.28rem; }
.home-alert-banner__title{ font-size: clamp(1.02rem, 2.6vw, 1.24rem); font-weight: 800; line-height: 1.2; color: var(--text-primary); }
.home-alert-banner__summary{ margin: 0; font-size: 0.95rem; color: var(--text-secondary); }
.home-alert-banner__actions{ display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: center; }
.home-alert-banner__link,
.home-alert-banner__notify{ min-height: 2.85rem; }
.home-alert-banner--orange .home-alert-banner__inner{ border-color: rgba(242, 168, 74, 0.3); }
.home-alert-banner--orange .home-alert-banner__badge{ color: var(--alert-orange); }
.home-alert-banner--orange .home-alert-banner__title{ color: var(--text-primary); }
.home-alert-banner--orange .home-alert-banner__summary{ color: var(--text-secondary); }
.home-alert-banner--red .home-alert-banner__inner{ border-color: rgba(239, 141, 145, 0.3); }
.home-alert-banner--red .home-alert-banner__badge{ color: var(--alert-red); }
.home-alert-banner--red .home-alert-banner__title{ color: var(--text-primary); }
.home-alert-banner--red .home-alert-banner__summary{ color: var(--text-secondary); }
/* --- Homepage alert banner: severity accent bar + subtle attention pulse (wow) --- */
.home-alert-banner__inner{ position: relative; overflow: hidden; border-left-width: 4px; border-left-color: var(--alert-yellow); }
.home-alert-banner--orange .home-alert-banner__inner{ border-left-color: var(--alert-orange); }
.home-alert-banner--red .home-alert-banner__inner{ border-left-color: var(--alert-red); }
.home-alert-banner__badge{ gap: 0.4rem; animation: home-alert-pulse 2.6s ease-in-out infinite; }
.home-alert-banner__badge::before{ content: "\26A0"; font-size: 0.95em; line-height: 1; }
@keyframes home-alert-pulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(234,179,8,0); } 50%{ box-shadow: 0 0 0 6px rgba(234,179,8,0.14); } }
.home-alert-banner--orange .home-alert-banner__badge{ background: rgba(249,115,22,0.12); }
.home-alert-banner--red .home-alert-banner__badge{ background: rgba(239,68,68,0.14); animation: home-alert-pulse-red 1.6s ease-in-out infinite; }
@keyframes home-alert-pulse-red{ 0%,100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); } 50%{ box-shadow: 0 0 0 7px rgba(239,68,68,0.20); } }
@media (prefers-reduced-motion: reduce){ .home-alert-banner__badge{ animation: none; } }

/* Hazard-type emoji on weather alerts — instantly shows WHAT the warning is about,
   independent of the severity colour (2026-05-30). Pulse only on the highest (red) level. */
.alert-item__hazard{ font-size: 1.6rem; line-height: 1; }
.home-alert-banner__hazard{ font-size: 2.2rem; line-height: 1; align-self: center; }
.alert-item--red .alert-item__hazard,
.home-alert-banner--red .home-alert-banner__hazard{ animation: home-hazard-pulse 1.6s ease-in-out infinite; transform-origin: center; display: inline-block; }
@keyframes home-hazard-pulse{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce){ .alert-item__hazard, .home-alert-banner__hazard{ animation: none !important; } }

/* Off-season notice on activity city pages (e.g. /lyzovani/praha in summer) — audit #6, 2026-05-31. */
.activity-page__off-season{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; padding: 1.75rem 1.25rem; border: 1px dashed var(--border); border-radius: 14px; background: var(--bg-soft, rgba(255,255,255,0.04)); }
.activity-page__off-season-emoji{ font-size: 2.4rem; line-height: 1; }
.activity-page__off-season-title{ font-size: 1.15rem; font-weight: 800; }
.activity-page__off-season-text{ color: var(--text-soft); max-width: 46ch; margin: 0; }
/* --- Affected-region chips (direct link to each kraj) --- */
.home-alert-banner__regions{ display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.home-alert-banner__region{ display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.34rem 0.72rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; text-decoration: none; color: var(--text-primary); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.home-alert-banner__region:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }
.home-alert-banner__region-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--alert-yellow); flex-shrink: 0; }
.home-alert-banner__region--orange .home-alert-banner__region-dot{ background: var(--alert-orange); }
.home-alert-banner__region--red .home-alert-banner__region-dot{ background: var(--alert-red); }
.home-alert-banner__region--more{ opacity: 0.7; font-weight: 700; }
.location-finder__status{ margin-top: 0.65rem; font-size: 0.88rem; color: var(--text-secondary); }




.location-finder__intent-chip{ border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text); padding: 0.42rem 0.7rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; }
.location-finder__intent-chip.is-active,
.location-finder__intent-chip:hover{ background: var(--accent-soft); border-color: var(--border-strong); color: var(--accent-strong); }
.hero__content .location-finder__intent-chip{ background: rgba(59,130,246,0.1); color: var(--accent-strong); border-color: rgba(59,130,246,0.2); }
.hero__content .location-finder__intent-chip.is-active,
.hero__content .location-finder__intent-chip:hover{ background: rgba(59,130,246,0.22); color: #bfdbfe; border-color: rgba(59,130,246,0.4); }








body[data-weather-theme="default"],
body[data-weather-theme="sunny"]{ --weather-scene-start: var(--weather-clear-1); --weather-scene-middle: var(--weather-clear-2); --weather-scene-accent: var(--weather-clear-3); --weather-scene-end: var(--weather-clear-4); }
body[data-weather-theme="cloudy"],
body[data-weather-theme="mist"]{ --weather-scene-start: var(--weather-cloudy-1); --weather-scene-middle: var(--weather-cloudy-2); --weather-scene-accent: var(--weather-cloudy-3); --weather-scene-end: var(--weather-cloudy-3); }
body[data-weather-theme="rain"]{ --weather-scene-start: var(--weather-rain-1); --weather-scene-middle: var(--weather-rain-2); --weather-scene-accent: var(--weather-rain-3); --weather-scene-end: var(--weather-rain-3); }
body[data-weather-theme="storm"]{ --weather-scene-start: var(--weather-storm-1); --weather-scene-middle: var(--weather-storm-2); --weather-scene-accent: var(--weather-storm-3); --weather-scene-end: var(--weather-storm-3); }
body[data-weather-theme="snow"]{ --weather-scene-start: var(--weather-snow-1); --weather-scene-middle: var(--weather-snow-2); --weather-scene-accent: var(--weather-snow-3); --weather-scene-end: var(--weather-snow-3); }
body[data-weather-theme="night"],
body[data-weather-theme="night-cloudy"]{ --weather-scene-start: var(--weather-night-1); --weather-scene-middle: var(--weather-night-2); --weather-scene-accent: var(--weather-night-3); --weather-scene-end: var(--weather-night-3); }

.deferred-section{ content-visibility: auto; contain-intrinsic-size: 720px; }
.deferred-section--map{ contain-intrinsic-size: 980px; }
.deferred-section--footer{ contain-intrinsic-size: 520px; }


.home-map-widget.is-component-error .home-map-widget__map,
.home-map-widget__map.is-component-error{
    max-height: 22rem;
}
.home-map-widget.is-component-error .home-map-widget__map .leaflet-container,
.home-map-widget__map.is-component-error .leaflet-container{
    display: none !important;
}


.city-grid{ padding: 0; margin-bottom: var(--section-gap); }
.city-grid__heading{ font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; }
.city-grid__note{ margin: -0.35rem 0 0.9rem; color: var(--text-muted); font-size: 0.88rem; line-height: 1.5; }
.city-grid__list{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.city-grid__cta{ text-align: center; margin-top: 0.75rem; }
.city-grid__cta-link{ font-size: 0.85rem; }

.city-card{ display: flex; flex-direction: column; min-height: 9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; backdrop-filter: blur(12px); }
.city-card:hover{ border-color: var(--border-strong); box-shadow: var(--shadow-glow), var(--shadow-soft); text-decoration: none; transform: translateY(-2px); }
.city-card__header{ display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.city-card__name{ font-weight: 700; font-size: 1rem; color: var(--text); overflow-wrap: break-word; min-width: 0; }
.city-card__reading{ display: flex; align-items: center; gap: 0.65rem; margin: 0.5rem 0 0.15rem; }
.city-card__temp{ font-size: 1.45rem; font-weight: 800; color: var(--accent); margin: 0; letter-spacing: -0.04em; }
.city-card__condition{ font-size: 0.85rem; color: var(--text-muted); }
.city-card__metrics{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.city-card__metric{ display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0.16rem 0.45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8rem; font-weight: 700; }

.city-card__metric.city-card__tertiary{ display: none; }
@media (min-width: 768px){ .city-card__metric.city-card__tertiary{ display: inline-flex; } }
.city-card:hover .city-card__metric.city-card__tertiary,
.city-card:focus-within .city-card__metric.city-card__tertiary{ display: inline-flex; }
.city-card__footer{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.65rem; }
.city-card__region{ font-size: 0.84rem; color: var(--text-soft); }







[data-freshness="fresh"]{ --freshness-color: #22c55e; }
[data-freshness="recent"]{ --freshness-color: #eab308; }
[data-freshness="stale"]{ --freshness-color: #ef4444; }


.city-page{ padding: 0.75rem 0; }
.city-page__header{ display: grid; gap: 0.9rem; margin-bottom: 1.4rem; }
.city-page__title{ font-size: clamp(1.85rem, 3.5vw, 2.75rem); font-weight: 800; margin-bottom: 0; letter-spacing: -0.035em; line-height: 1.1; overflow-wrap: break-word; }
.city-page__breadcrumb{ font-size: var(--font-size-13); color: var(--text-soft); }
.city-page__breadcrumb a{ color: var(--text-secondary); text-decoration: none; }
.city-page__breadcrumb a:hover{ color: var(--accent-strong); text-decoration: underline; }
.city-page__back{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(10px);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.city-page__back:hover{ text-decoration: none; background: var(--surface); border-color: var(--border-strong); color: var(--accent-strong); }
.city-page > section:not(.nearby),
.city-page > .ad-slot{ margin-bottom: var(--section-gap); }
.page-city .breadcrumb{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0.9rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--bg-soft) 40%, transparent);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-city .breadcrumb__list{ gap: 0.35rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.page-city .breadcrumb__list::-webkit-scrollbar{ display: none; }
.page-city .breadcrumb__item::after{ margin-left: 0.35rem; color: var(--text-soft); }
.section-heading,
.weather-alerts__heading{ position: relative; display: inline-block; font-size: clamp(1.5rem, 2.6vw, 1.85rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.038em; margin-bottom: 1rem; color: var(--text); }
.section-heading::after,
.weather-alerts__heading::after{ content: ""; display: block; width: 2.75rem; height: 0.22rem; margin-top: 0.5rem; border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0%, rgba(96, 165, 250, 0.22) 100%); }






.weather-current,
.weather-hourly,
.weather-daily,
.weather-secondary,
.weather-alerts,
.no-data{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }

.weather-current{ padding: 1.4rem; background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 94%, transparent) 0%, color-mix(in srgb, var(--surface-strong) 78%, transparent) 100%); }
.weather-widget{ position: relative; padding: 1.15rem; overflow: hidden; }
.weather-widget__header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.9rem; margin-bottom: 1rem; }
.weather-widget__intro{ margin: 0; color: var(--text-muted); font-size: 0.875rem; line-height: 1.6; }
.weather-current__primary{ display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; min-width: 0; }

.weather-current__temp{ font-size: clamp(4rem, 8vw, 5rem); line-height: 0.92; font-weight: 800; color: var(--accent); letter-spacing: -0.05em; }
.weather-current__temp small{ font-size: 1.15rem; font-weight: 700; vertical-align: top; margin-left: 0.18rem; color: var(--text-muted); }
.weather-current__condition{ display: inline-flex; align-items: center; min-height: 2rem; padding: 0.35rem 0.7rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.95rem; font-weight: 700; width: fit-content; }
.weather-current__details{ display: grid; grid-template-columns: 1fr; gap: 0.65rem; }

.weather-detail{ display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 0.95rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); transition: border-color 0.18s ease, box-shadow 0.18s ease; }
.weather-detail:hover{ border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); }
.weather-detail dt{ color: var(--text-muted); font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; }
.weather-detail dd{ font-weight: 800; font-size: 1rem; color: var(--text); text-align: right; }



.weather-current__details--secondary.is-expanded{ display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }



.weather-current__toggle.is-expanded .weather-current__toggle-icon{ transform: rotate(180deg); }
.city-sticky-nav{
    position: fixed;
    top: 5rem;
    left: 50%;
    z-index: 95;
    width: min(1180px, calc(100% - 1.5rem));
    transform: translate(-50%, -0.5rem);
    opacity: 0;
    pointer-events: none;
    /* visibility: hidden removes the hidden nav from hit-testing and, on
     * some engines, from scrollWidth calculation — prevents a spurious
     * horizontal-overflow warning in Lighthouse. Transition the property
     * with a delay so the slide-out animation still runs before hide. */
    visibility: hidden;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
.city-sticky-nav.is-visible{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    visibility: visible;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}
.city-sticky-nav__inner{
    display: grid;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: var(--radius-section);
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: var(--shadow-lg);
}
.city-sticky-nav__summary{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.city-sticky-nav__city{ font-size: 1rem; color: var(--text-primary); }
.city-sticky-nav__reading{ display: inline-flex; align-items: center; gap: 0.55rem; }
.weather-icon--sticky{ width: 2rem; height: 2rem; flex: 0 0 2rem; }
.city-sticky-nav__temp{ font-size: 1.05rem; font-weight: 800; color: var(--text-primary); }
.city-sticky-nav__temp small{ font-size: 0.82rem; color: var(--text-secondary); }
.city-sticky-nav__links{ display: flex; flex-wrap: wrap; gap: 0.55rem; }
.city-sticky-nav__link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.06);
    background: rgba(22, 30, 42, 0.9);
    color: var(--text-secondary);
    font-weight: 700;
}
.city-sticky-nav__link.is-active,
.city-sticky-nav__link:hover{
    text-decoration: none;
    border-color: rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
}

@media (min-width: 900px){
    .city-sticky-nav__inner{
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
    }

    .city-sticky-nav__links{ justify-content: flex-end; }
}
.weather-secondary__grid,
.weather-stat-card{ display: grid; gap: 0.28rem; padding: 0.95rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: linear-gradient(145deg, #1a2332 0%, #141a24 100%); }
.weather-stat-card__label{ font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.weather-stat-card__value{ font-size: 1.2rem; color: var(--text); letter-spacing: -0.03em; }
.weather-stat-card__detail{ color: var(--text-muted); font-size: 0.86rem; }




.weather-hourly,
.weather-daily,
.weather-secondary,
.weather-alerts,
.no-data{ padding: 1rem; }
.weather-widget::before,
.home-snapshot::before,
.home-overview::before,
.regions-grid::before,
.trust-block::before,
.feature-page__hero::before,
.feature-page > section::before,
.home-personalization::before,
.home-timeline::before,
.home-nowcast::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 0.34rem; background: linear-gradient(90deg, var(--accent) 0%, rgba(96, 165, 250, 0.38) 60%, transparent 100%); }

.hourly-list,
.daily-list,
.alerts-list{ display: grid; gap: 0.7rem; }

.hourly-item,
.daily-item{ display: grid; gap: 0.25rem 0.75rem; padding: 0.8rem 0.9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); transition: border-color 0.16s ease, box-shadow 0.16s ease; }
.hourly-item:hover,
.daily-item:hover{ border-color: var(--border-strong); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.08); }

.hourly-item{ grid-template-columns: auto auto auto; align-items: center; }
.weather-hourly__scroller,
.weather-daily__scroller{ overflow-x: auto; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; cursor: grab; }
.weather-hourly__scroller:active,
.weather-daily__scroller:active{ cursor: grabbing; }
.weather-hourly__scroller::-webkit-scrollbar,
.weather-daily__scroller::-webkit-scrollbar{ height: 4px; }
.weather-hourly__scroller::-webkit-scrollbar-track,
.weather-daily__scroller::-webkit-scrollbar-track{ background: transparent; }
.weather-hourly__scroller::-webkit-scrollbar-thumb,
.weather-daily__scroller::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.15); border-radius: 2px; }
.weather-hourly__scroller::-webkit-scrollbar-thumb:hover,
.weather-daily__scroller::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.3); }

.weather-hourly, .weather-daily{ position: relative; }
.weather-hourly::after, .weather-daily::after{ content: ''; position: absolute; top: 0.85rem; right: 0; bottom: 0.85rem; width: 3rem; pointer-events: none; z-index: 2; background: linear-gradient(to right, transparent, var(--surface)); border-radius: 0 12px 12px 0; }
.weather-hourly__scroller[data-swipe-carousel],
.weather-daily__scroller[data-swipe-carousel]{ scroll-snap-type: x proximity; }
.hourly-list--scroll{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(155px, 1fr); gap: 0.8rem; }
.hourly-list--virtual{ display: flex; align-items: stretch; gap: 0.8rem; }
.hourly-list__spacer{ flex: 0 0 0; margin: 0; padding: 0; list-style: none; }
.hourly-item--card{ grid-template-columns: 1fr; align-items: start; justify-items: start; min-height: 100%; padding: 1rem; background: var(--bg-card); }
.hourly-item--card,
.daily-item--table,
.daily-item--detailed{ scroll-snap-align: start; scroll-snap-stop: always; }
.hourly-item__time{ font-size: 0.88rem; font-weight: 700; color: var(--text-muted); }
.hourly-item__temp{ justify-self: end; font-size: 1rem; font-weight: 700; color: var(--text); }
.hourly-item--card .hourly-item__temp{ justify-self: start; font-size: 1.25rem; }
.hourly-item__condition{ grid-column: 1 / -1; font-size: 0.88rem; color: var(--text-muted); }
.hourly-item__wind{ grid-column: 1 / -1; font-size: 0.86rem; color: var(--text-muted); }
.hourly-item__pop{ grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; padding: 0.2rem 0.5rem; border-radius: 999px; background: rgba(45, 140, 255, 0.12); color: var(--accent-strong); font-size: 0.78rem; font-weight: 700; }


.daily-item{ grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; }
.daily-list--table{ display: grid; gap: 0.8rem; }
.daily-item--table{ grid-template-columns: minmax(0, 1.4fr) auto auto minmax(140px, 0.9fr); gap: 0.7rem 1rem; align-items: center; padding: 0.9rem 1.25rem; min-height: 3.75rem; background: var(--bg-card); border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s; }
.daily-item--table:hover{ background: rgba(255, 255, 255, 0.03); }
.daily-item--table:first-child{ background: rgba(96, 165, 250, 0.05); border-left: 3px solid rgba(96, 165, 250, 0.4); }
.daily-item--table:first-child .daily-item__day{ color: #93c5fd; }
.daily-item__headline{ display: grid; gap: 0.22rem; min-width: 0; }
.daily-item__day{ font-weight: 700; color: var(--text); }
.daily-item__condition{ grid-column: 1 / -1; font-size: 0.88rem; color: var(--text-muted); }
.daily-item--table .daily-item__condition{ grid-column: auto; }
.daily-item__visual{ display: inline-flex; align-items: center; justify-content: center; }
.daily-item__temps{ display: grid; justify-items: end; gap: 0.12rem; }
.daily-item__max{ font-size: 1rem; font-weight: 800; color: var(--text); }
.daily-item__min{ font-size: 0.88rem; font-weight: 500; color: rgba(148, 163, 184, 0.7); }
.daily-item__precip{ display: grid; gap: 0.26rem; }
.daily-item__precip-label,
.daily-item__precip-total{ font-size: 0.86rem; color: var(--text-muted); }
.daily-item__precip-value{ font-size: 0.84rem; font-weight: 700; color: var(--accent-strong); }
.daily-item__precip-bar{ display: block; width: 100%; height: 0.5rem; border-radius: 999px; background: rgba(148, 163, 184, 0.18); overflow: hidden; }
.daily-item__precip-bar span{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%); }

.weather-icon{ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; overflow: visible; }
.weather-icon svg{ width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 16px rgba(37, 99, 235, 0.12)); }
.weather-icon--card{ width: 2.7rem; height: 2.7rem; }
.weather-icon--hero{ width: min(5rem, 80px); height: min(5rem, 80px); padding: 0.2rem; }
.weather-icon--hourly,
.weather-icon--daily{ width: 2.2rem; height: 2.2rem; }
.weather-icon--snapshot{ width: 3.2rem; height: 3.2rem; }
.weather-icon-sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }
.weather-icon__sun-core,
.weather-icon__sun-core--small{ fill: var(--icon-sun); stroke: var(--icon-sun-deep); stroke-width: 2; }
.weather-icon__sun-rays,
.weather-icon__sun-rays--small{ fill: none; stroke: var(--icon-sun-deep); stroke-width: 3.2; stroke-linecap: round; transform-origin: 32px 32px; animation: weather-spin 16s linear infinite; }
.weather-icon__sun-rays--small{ transform-origin: 22px 22px; stroke-width: 2.7; }
.weather-icon__moon{ fill: var(--icon-moon); stroke: rgba(120, 139, 191, 0.55); stroke-width: 2; }
.weather-icon__star{ fill: #fff4bf; animation: weather-pulse 2.6s ease-in-out infinite; }
.weather-icon__star--small{ animation-delay: 0.8s; }
.weather-icon__cloud{ fill: var(--icon-cloud); stroke: var(--icon-cloud-shadow); stroke-width: 2.2; }
.weather-icon__cloud--back{ opacity: 0.8; }
.weather-icon__rain{ fill: none; stroke: var(--icon-rain); stroke-width: 3.2; stroke-linecap: round; animation: weather-rain 1.8s ease-in-out infinite; }
.weather-icon__rain--2{ animation-delay: 0.2s; }
.weather-icon__rain--3{ animation-delay: 0.45s; }
.weather-icon__bolt{ fill: var(--icon-bolt); stroke: rgba(255, 183, 3, 0.24); stroke-width: 1.5; animation: weather-pulse 2s ease-in-out infinite; }
.weather-icon__snow path{ fill: none; stroke: var(--icon-rain); stroke-width: 2.4; stroke-linecap: round; animation: weather-drift 3.2s ease-in-out infinite; }
.weather-icon__snow--2 path{ animation-delay: 0.8s; }
.weather-icon__mist{ fill: none; stroke: var(--icon-mist); stroke-width: 3.2; stroke-linecap: round; animation: weather-float 3.8s ease-in-out infinite; }
.weather-icon__mist--2{ animation-delay: 0.4s; }
.weather-icon__mist--3{ animation-delay: 0.8s; }
.hero-weather .weather-icon__cloud--front,
.hero-weather .weather-icon__cloud--back{ fill: #60a5fa; stroke: #2563eb; }
.hero-weather .weather-icon__moon{ fill: #6366f1; }
.hero-weather .weather-icon__rain,
.hero-weather .weather-icon__snow path{ stroke: #2563eb; }
.hero-weather svg.weather-icon-sprite{ filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.18)); }
.weather-icon--night svg{ filter: drop-shadow(0 8px 18px rgba(125, 196, 255, 0.16)); }

@keyframes weather-spin{
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes weather-rain{
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(3px); opacity: 1; }
}

@keyframes weather-drift{
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(2px); opacity: 1; }
}

@keyframes weather-float{
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50% { transform: translateX(1.5px); opacity: 1; }
}

@keyframes weather-pulse{
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.05); opacity: 1; }
}


.weather-alerts{ background: var(--bg-card); border-color: var(--border); }
.alert-item{ display: grid; gap: 0.2rem; padding: 0.9rem 1rem; border-left: 4px solid var(--alert-yellow); border-radius: var(--radius-inner); background: var(--bg-card-elevated); }
.alert-item--yellow{ border-left-color: var(--alert-yellow); }
.alert-item--orange{ border-left-color: var(--alert-orange); }
.alert-item--red{ border-left-color: var(--alert-red); }
.alert-item__severity{ display: inline-flex; align-items: center; width: fit-content; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(255, 255, 255, 0.06); color: var(--text-secondary); }
.alert-item--orange .alert-item__severity{ color: var(--alert-orange); }
.alert-item--red .alert-item__severity{ color: var(--alert-red); }
.alert-item__event{ font-size: 0.95rem; color: var(--text-primary); }
.alert-item__sender,
.alert-item__until{ font-size: 0.86rem; color: var(--text-secondary); }


.no-data{ display: grid; gap: 0.75rem; justify-items: center; padding: 2.5rem 1.5rem; text-align: center; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); }
.no-data__icon{ color: var(--text-soft); opacity: 0.5; }
.no-data__title{ font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }
.no-data p{ max-width: 34rem; margin: 0 auto; font-size: 0.92rem; line-height: 1.6; }
.no-data__hint{ font-size: 0.85rem; color: var(--text-soft); }
.no-data__actions{ display: flex; gap: 0.75rem; margin-top: 0.5rem; }




.city-region-context{ background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-inner); padding: var(--space-4); display: grid; gap: var(--space-2); }
.city-region-context .section-heading{ margin-bottom: 0; font-size: var(--font-size-16); }
.city-region-context__description{ color: var(--text-secondary); font-size: var(--font-size-14); margin: 0; }
.nearby{ margin-top: 1.25rem; }






.city-module-page{ padding: 0.5rem 0; }
.city-module-page__title{ font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.city-module-page > section,
.city-module-page > .ad-slot{ margin-bottom: 1rem; }
.city-module-page__section{ overflow: hidden; }
.daily-list--detailed .daily-item{ grid-template-columns: minmax(0, 1fr) auto auto; }
.daily-item__details{ grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 0.9rem; margin-top: 0.15rem; padding-top: 0.25rem; }
.daily-item__details div{ display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.daily-item__details dt{ font-size: 0.86rem; color: var(--text-secondary); }
.daily-item__details dd{ font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.alert-item--detailed{ gap: 0.35rem; }
.alert-item__from{ font-size: 0.86rem; color: var(--text-secondary); }
.alert-item__description{ margin-top: 0.2rem; font-size: 0.92rem; line-height: 1.55; color: var(--text-primary); }


.region-page{ display: grid; gap: var(--space-5); padding: 0.5rem 0; }
.region-page__title{ margin: 0; font-size: clamp(var(--font-size-32), 4vw, 3.8rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.98; }
.region-page__description{ margin: 0; max-width: 60ch; color: var(--text-secondary); font-size: var(--font-size-16); line-height: 1.65; }
.region-page--dashboard .weather-widget{ border-radius: var(--radius-hero); box-shadow: var(--shadow-md); }
.region-hero{ display: grid; gap: var(--space-4); padding: clamp(var(--space-4), 4vw, var(--space-6)); background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-elevated) 100%); overflow: hidden; }
.region-hero__copy{ display: grid; gap: var(--space-3); min-width: 0; }
.region-hero__breadcrumb{ font-size: var(--font-size-13); color: var(--text-soft); }
.region-hero__breadcrumb a{ color: var(--text-secondary); text-decoration: none; }
.region-hero__breadcrumb a:hover{ color: var(--accent-strong); text-decoration: underline; }

.region-hero__headline{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.region-hero__headline-copy{ display: grid; gap: 0.35rem; }
.region-hero__city-label{ font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.region-hero__city-name{ font-size: clamp(var(--font-size-24), 3vw, var(--font-size-32)); font-weight: 800; color: var(--text-primary); overflow-wrap: break-word; }
.region-hero__temp-line{ display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.7rem; }
.region-hero__temp{ font-size: clamp(var(--font-size-48), 5vw, var(--font-size-80)); font-weight: 800; letter-spacing: -0.05em; color: var(--text-primary); line-height: 0.95; }
.region-hero__temp small{ font-size: 0.42em; margin-left: 0.08em; }
.region-hero__condition{ font-size: var(--font-size-20); font-weight: 700; color: var(--text-secondary); }
.region-hero__metrics{ margin: 0; }
.region-hero__actions{ display: flex; flex-wrap: wrap; gap: 0.75rem; }
.region-hero__aside{ display: grid; gap: var(--space-3); }
.region-hero__aside-card{ display: grid; gap: 0.4rem; padding: var(--space-3); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--bg-soft); box-shadow: var(--shadow-sm); }
.region-hero__aside-label{ font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
.region-hero__aside-value{ font-size: var(--font-size-20); font-weight: 800; color: var(--text-primary); }
.region-hero__aside-text{ margin: 0; color: var(--text-secondary); font-size: var(--font-size-14); line-height: 1.55; }
.region-alerts{ display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.region-alerts__header{ display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.region-alerts--yellow{ border-color: rgba(234, 179, 8, 0.36); background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 90%, rgba(234,179,8,1) 10%) 0%, var(--bg-card) 100%); }
.region-alerts--orange{ border-color: rgba(249, 115, 22, 0.32); background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 90%, rgba(249,115,22,1) 10%) 0%, var(--bg-card) 100%); }
.region-alerts--red{ border-color: rgba(239, 68, 68, 0.32); background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 90%, rgba(239,68,68,1) 10%) 0%, var(--bg-card) 100%); }
.region-alerts__cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.region-alert-card{ display: grid; gap: 0.45rem; padding: var(--space-3); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.region-alert-card__title{ font-size: var(--font-size-20); font-weight: 800; color: var(--text-primary); }
.region-alert-card__meta,
.region-alert-card__time{ margin: 0; color: var(--text-secondary); font-size: var(--font-size-14); line-height: 1.55; }
.region-alerts__empty{ display: grid; gap: 0.3rem; padding: var(--space-3); border-radius: var(--radius-card); background: var(--bg-soft); border: 1px dashed var(--border); color: var(--text-secondary); }
.region-dashboard-grid{ display: grid; gap: var(--space-4); }





.city-grid__list--region{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.city-card--region-rich{ display: grid; align-content: start; gap: 0.45rem; min-height: 100%; padding: var(--space-3); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.city-card--region-rich:hover{ transform: translateY(-2px); box-shadow: var(--shadow-glow), var(--shadow-md); text-decoration: none; }
.city-card__headline{ display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.city-card--region-rich .city-card__headline{ align-items: flex-start; }
.city-card--region-rich .city-card__name{
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.city-card--region-rich .city-card__meta{ margin-top: auto; }




.region-forecast .weather-daily{ display: grid; gap: 0.8rem; }


.region-forecast__item .daily-item__visual,
.region-forecast__item .daily-item__temps{ justify-self: end; }
.region-forecast__item .daily-item__condition,
.region-forecast__item .daily-item__precip{ grid-column: 1 / -1; }
.region-city-links__list{ display: flex; flex-wrap: wrap; gap: 0.65rem; }
.region-city-links__list .region-pill{ min-height: 2.5rem; }

@media (min-width: 900px){
    .region-hero{ grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr); align-items: start; }
    .region-dashboard-grid{ grid-template-columns: minmax(300px, 0.95fr) minmax(0, 1.25fr); align-items: start; }
}



@media (max-width: 699px){
    .region-page__title{ font-size: clamp(2rem, 10vw, 3rem); }
    .region-hero__temp{ font-size: clamp(3.25rem, 17vw, 5rem); }
    .region-alerts__header{ flex-direction: column; }
    .region-hero__actions .btn,
    .region-alerts__header .btn{ width: 100%; text-align: center; }
    
    
}


.knowledge-page{ padding: 0.5rem 0; }
.knowledge-page__title{ font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }
.knowledge-page__byline{ color: var(--text-muted, #6b7280); font-size: .875rem; margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.knowledge-page__byline-author{ font-weight: 600; }
.knowledge-page__byline-sep{ opacity: .5; }
.knowledge-page__byline-reading{ color: var(--text-soft, #6b7280); }
.knowledge-page__content .glossary-autolink{ border-bottom: 1px dotted var(--accent); color: inherit; text-decoration: none; }
.knowledge-page__content .glossary-autolink:hover{ color: var(--accent); border-bottom-style: solid; }
.knowledge-page__pager{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 2rem 0; }
.knowledge-page__pager-link{ display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card, #fff); text-decoration: none; color: var(--text-primary); transition: border-color .15s, transform .15s; }
.knowledge-page__pager-link:hover{ border-color: var(--accent); transform: translateY(-1px); }
.knowledge-page__pager-link--next{ text-align: right; }
.knowledge-page__pager-eyebrow{ font-size: 0.8rem; color: var(--text-soft, #6b7280); font-weight: 600; }
.knowledge-page__pager-title{ font-weight: 700; line-height: 1.3; }
.knowledge-page__pager-spacer{ display: block; }
.knowledge-page__share{ margin: 1.25rem 0; }
.knowledge-page__share-btn{ appearance: none; border: 1px solid var(--border); background: var(--bg-card, #fff); color: var(--text-primary); padding: 0.55rem 1rem; border-radius: 999px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.knowledge-page__share-btn:hover{ border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px){ .knowledge-page__pager{ grid-template-columns: 1fr; } .knowledge-page__pager-link--next{ text-align: left; } }
.city-climate__region-note{ color: var(--text-soft, #9ca3af); font-size: .85rem; margin: -.25rem 0 1rem; font-style: italic; }
.city-climate__delta{ display: inline-block; padding: .45rem .9rem; border-radius: 999px; margin: 0 0 1rem; font-size: .9rem; font-weight: 600; border: 1px solid transparent; }
.city-climate__delta--warmer{ background: rgba(248, 113, 113, 0.12); color: #f87171; border-color: rgba(248, 113, 113, 0.28); }
.city-climate__delta--colder{ background: rgba(96, 165, 250, 0.12); color: #60a5fa; border-color: rgba(96, 165, 250, 0.28); }
.city-climate__delta--same{ background: rgba(52, 211, 153, 0.1); color: #34d399; border-color: rgba(52, 211, 153, 0.25); }
.offline-page{ min-height: calc(100vh - 12rem); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.offline-page__card{ max-width: 520px; text-align: center; }
.offline-page__icon{ font-size: 4rem; margin-bottom: 1rem; opacity: .85; }
.offline-page__title{ font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; margin: 0 0 0.75rem; }
.offline-page__message{ color: var(--text-secondary); line-height: 1.6; margin: 0 0 1.75rem; }
.offline-page__actions{ display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 1.5rem; }
.offline-page__btn{ padding: 0.7rem 1.2rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card, #fff); color: var(--text-primary); text-decoration: none; font-weight: 600; cursor: pointer; font-size: 0.95rem; }
.offline-page__btn:hover{ border-color: var(--accent); }
.offline-page__btn--primary{ background: var(--accent); color: #fff; border-color: var(--accent); }
.offline-page__hint{ color: var(--text-soft); font-size: 0.92rem; }
.offline-page__last-link{ color: var(--accent); font-weight: 600; }
.affiliate-link{ color: var(--accent); text-decoration: underline; text-decoration-style: dotted; }
.affiliate-link:hover{ text-decoration-style: solid; }
.affiliate-link::after{ content: " ↗"; font-size: .75em; opacity: .6; }
.region-climate-page__hero{ margin-bottom: 1.5rem; }
.region-climate-page__title{ font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 800; margin: 0 0 .6rem; }
.region-climate-page__intro{ color: var(--text-secondary); line-height: 1.65; max-width: 760px; }
.region-climate-page__stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin: 0 0 2rem; }
.region-climate-stat{ padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card, #fff); display: flex; flex-direction: column; gap: .2rem; }
.region-climate-stat__label{ font-size: .8rem; color: var(--text-soft, #6b7280); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.region-climate-stat__value{ font-size: 1.4rem; font-weight: 800; color: var(--text-primary); }
.region-climate-stat__sub{ font-size: .85rem; color: var(--text-soft); }
.region-climate-page__body{ margin: 2rem 0; line-height: 1.75; max-width: 780px; }
.region-climate-page__body p{ margin-bottom: 1rem; }
.region-climate-page__footer{ margin-top: 2rem; }
.knowledge-page__toc{ background: var(--bg-elev, #f5f7fa); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.knowledge-page__toc-heading{ font-size: .95rem; font-weight: 700; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-soft, #6b7280); }
.knowledge-page__toc-list{ margin: 0; padding-left: 1.25rem; display: grid; gap: .3rem; font-size: .95rem; }
.knowledge-page__toc-list a{ color: var(--accent); text-decoration: none; }
.knowledge-page__toc-list a:hover{ text-decoration: underline; }
.knowledge-page__content.prose h2{ scroll-margin-top: 72px; }
.knowledge-page__content.prose{ line-height: 1.7; }
.knowledge-page__content.prose p{ margin-bottom: 1rem; }
.knowledge-page__content.prose h2{ font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.knowledge-page__content.prose h3{ font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.knowledge-page__content.prose ul, .knowledge-page__content.prose ol{ margin: 0.5rem 0 1rem 1.5rem; }
.knowledge-page__content.prose ul{ list-style: disc; }
.knowledge-page__content.prose ol{ list-style: decimal; }
.knowledge-page__related{ margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #e0e0e0; }
.knowledge-page__back{ font-weight: 500; }


.breadcrumb{ margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-soft, #6b7280); }
.breadcrumb__list{ display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; align-items: center; list-style: none; padding: 0; margin: 0; }
.breadcrumb__item{ display: inline-flex; align-items: center; gap: 0.4rem; }
.breadcrumb__item::after{ content: "›"; color: var(--text-soft, #9ca3af); font-size: 0.95rem; opacity: 0.7; }
.breadcrumb__item:last-child::after{ content: ""; }
.breadcrumb__item:last-child{ color: var(--text-primary); font-weight: 600; }
.breadcrumb__item a{ color: var(--text-soft, #6b7280); text-decoration: none; transition: color 0.15s; }
.breadcrumb__item a:hover{ color: var(--accent); text-decoration: underline; }



.footer{ background: var(--surface); border-top: 1px solid var(--border); padding: 2rem 0 1.5rem; margin-top: 2rem; padding-bottom: 2rem; }
.footer__groups{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.footer__group{ display: flex; flex-direction: column; gap: 0.35rem; }
.footer__group-title{ font-size: 0.78rem; font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }
.footer__group a{ font-size: 0.84rem; color: var(--text-secondary); text-decoration: none; padding: 0.15rem 0; line-height: 1.4; transition: color 0.15s; }
.footer__group a:hover{ color: var(--accent); }
.footer__cookie-button{ padding: 0.15rem 0; border: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 0.84rem; cursor: pointer; text-align: left; line-height: 1.4; transition: color 0.15s; }
.footer__cookie-button:hover{ color: var(--accent); }
.footer__bottom{ text-align: center; }
.footer__copyright{ font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.footer__network{ display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.25rem 0 1.1rem; font-size: 0.8rem; }
.footer__network-label{ flex-basis: 100%; text-align: center; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; margin: 0 0 0.15rem; }
.footer__network-link{ display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text-secondary); text-decoration: none; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.12s; }
.footer__network-link:hover{ color: var(--text-primary); border-color: var(--accent); background: var(--surface-muted); transform: translateY(-1px); }
.footer__network-link--current{ font-weight: 700; color: var(--text-primary); border-color: var(--accent); background: var(--surface-muted); }
.footer__network-link--hub{ font-weight: 700; color: #fff; background: var(--accent); border-color: var(--accent); }
.footer__network-link--hub:hover{ color: #fff; background: var(--accent); filter: brightness(1.08); }
.footer__region-switcher{ display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.footer__region-link{ display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; border-radius: 6px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; border: 1px solid var(--border); transition: border-color 0.15s, background 0.15s; }
.footer__region-link:hover{ border-color: var(--accent); background: var(--surface-muted); }

@media (max-width: 767px){ .footer__groups{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px){ .footer__groups{ grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; } .footer__group-title{ font-size: 0.72rem; } .footer__group a, .footer__cookie-button{ font-size: 0.8rem; padding: 0.2rem 0; } }
@media (pointer: coarse){ .footer__group a, .footer__cookie-button{ padding: 0.35rem 0; } }
@media (max-width: 767px){ .footer{ padding-bottom: 6.5rem; } }


.bottom-sheet__app-actions{ display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.bottom-sheet__app-actions[hidden]{ display: none; }
.bottom-sheet__item--action{ border: none; background: none; cursor: pointer; text-align: left; font: inherit; width: 100%; }
.bottom-sheet__item--action:hover{ background: var(--accent-soft); }

.mobile-bottom-nav{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 205;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.55rem 0.75rem calc(env(safe-area-inset-bottom, 0px) + 0.55rem);
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-primary) 95%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.1);
}


.bottom-sheet{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 250; display: flex; align-items: flex-end; }
.bottom-sheet[hidden]{ display: none; }
.bottom-sheet__backdrop{ position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); }
.bottom-sheet__panel{ position: relative; width: 100%; max-height: 60vh; padding: var(--space-4) var(--space-4) calc(env(safe-area-inset-bottom, 0px) + var(--space-4)); border-radius: 20px 20px 0 0; background: var(--bg-card-elevated); border-top: 1px solid var(--border); transform: translateY(0); transition: transform 0.25s ease; }
.bottom-sheet__handle{ width: 36px; height: 4px; margin: 0 auto var(--space-4); border-radius: 2px; background: var(--border); }
.bottom-sheet__nav{ display: flex; flex-direction: column; gap: var(--space-1); }
.bottom-sheet__item{ display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--font-size-16); font-weight: 600; text-decoration: none; }
.bottom-sheet__item:hover{ background: var(--accent-soft); text-decoration: none; }
.bottom-sheet__item svg{ width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

.mobile-bottom-nav__link{
    display: grid;
    gap: 0.18rem;
    justify-items: center;
    align-content: center;
    min-height: 3.35rem;
    padding: 0.45rem 0.35rem;
    border-radius: var(--radius-card);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 700;
}

.mobile-bottom-nav__link:hover,
.mobile-bottom-nav__link.is-active{
    color: var(--accent-strong);
    background: var(--accent-soft);
    text-decoration: none;
}

.mobile-bottom-nav__icon{
    width: 1.45rem;
    height: 1.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-bottom-nav__icon svg{
    width: 100%;
    height: 100%;
}

.mobile-bottom-nav__label{
    line-height: 1.1;
    /* P1 #18 fix (audit 2026-05-25): labels truncated on narrow viewports
       (199px effective after DPI scaling). Allow font shrink + auto-shrink
       via font-size: clamp(), and forbid white-space wrap that broke "Mehr". */
    font-size: clamp(0.62rem, 2.5vw, 0.82rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    text-align: center;
}

/* P1 #17 fix (audit 2026-05-25): TOC entries clipping on 375×667 viewport.
   Wrap long entries to multiple lines (no overflow), preserve indent for nested. */
.toc__link,
.knowledge-page__toc a,
.article-toc__link{
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}
@media (max-width: 480px){
    .toc__link,
    .knowledge-page__toc a,
    .article-toc__link{
        font-size: 0.88rem;
    }
}

/* Knowledge article hero image (audit 2026-05-25 P1 #16).
   16:9 aspect, responsive width, fade-in once loaded. */
.knowledge-page__hero{
    margin: 0 0 1.5rem;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(56,189,248,0.08), rgba(99,102,241,0.04));
    aspect-ratio: 1200 / 630;
}
.knowledge-page__hero-img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 480px){
    .knowledge-page__hero{ margin-bottom: 1rem; }
}


.city-sea{ padding: 1rem 1.1rem; border-radius: var(--radius-card); background: linear-gradient(135deg, rgba(14,165,233,0.12), rgba(59,130,246,0.04)); border: 1px solid rgba(14,165,233,0.22); }
.city-sea__grid{ display: grid; grid-template-columns: minmax(180px, 1.4fr) repeat(auto-fit, minmax(100px, 1fr)); gap: 0.9rem; align-items: center; margin: 0.35rem 0; }
.city-sea__main{ display: flex; flex-direction: column; gap: 0.15rem; }
.city-sea__label{ font-size: 0.85rem; color: var(--text-secondary); font-weight: 600; }
.city-sea__temp{ font-size: 1.9rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.city-sea__stat{ display: flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); background: rgba(255,255,255,0.04); }
.city-sea__stat-label{ font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-secondary); text-transform: uppercase; }
.city-sea__stat-value{ font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.city-sea__source{ margin: 0.4rem 0 0; font-size: 0.75rem; color: var(--text-secondary); }

.nearby--pois{ margin: 1.5rem 0; }
.nearby-pois__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.55rem; }
.nearby-poi-card{ display: flex; flex-direction: column; gap: 0.25rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm); background: var(--surface-muted); border: 1px solid var(--border); text-decoration: none; color: inherit; transition: transform 0.12s ease, border-color 0.12s ease; }
.nearby-poi-card:hover{ transform: translateY(-1px); border-color: var(--border-strong); text-decoration: none; }
.nearby-poi-card__name{ font-weight: 700; color: var(--text-primary); }
.nearby-poi-card__meta{ font-size: 0.82rem; color: var(--text-secondary); }

.home-mountains{ padding: 1.5rem 0; }
.home-mountains__intro{ max-width: 720px; color: var(--text-secondary); margin: 0.2rem 0 1rem; }
.home-mountains__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; }
.home-mountain-card{ display: flex; flex-direction: column; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: linear-gradient(135deg, rgba(59,130,246,0.10), rgba(59,130,246,0.03)); border: 1px solid rgba(59,130,246,0.18); text-decoration: none; color: inherit; transition: transform 0.12s ease, border-color 0.12s ease; }
.home-mountain-card:hover{ transform: translateY(-1px); border-color: rgba(59,130,246,0.38); text-decoration: none; }
.home-mountain-card__name{ font-weight: 700; color: var(--text-primary); }
.home-mountain-card__elev{ margin-top: 0.2rem; font-size: 0.85rem; color: var(--text-secondary); }
.home-mountain-card__reading{ display: flex; align-items: center; gap: 0.5rem; margin-top: 0.45rem; }
.home-mountain-card__temp{ font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.weather-icon--mountain{ width: 26px; height: 26px; flex: none; }

.poi-page{ max-width: 900px; margin: 0 auto; padding: 1rem; }
.poi-page__hero{ padding: 1.5rem 1.2rem; margin-bottom: 1.5rem; border-radius: var(--radius-card); background: linear-gradient(145deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04)); border: 1px solid rgba(59,130,246,0.18); }
.poi-page__eyebrow{ margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); }
.poi-page__title{ margin: 0.35rem 0 0.5rem; font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; }
.poi-page__elevation{ margin: 0 0 1.2rem; color: var(--text-secondary); font-size: 0.95rem; }
.poi-page__elevation strong{ color: var(--text-primary); font-weight: 700; }
.poi-page__current{ display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.poi-page__icon{ width: 4.5rem; height: 4.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.poi-page__icon svg, .poi-page__icon .weather-icon--poi{ width: 100%; height: 100%; }
.poi-page__temp{ font-size: clamp(3rem, 9vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.poi-page__temp small{ font-size: 0.5em; font-weight: 500; color: var(--text-secondary); margin-left: 0.2em; }
.poi-page__conditions{ display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.95rem; color: var(--text-secondary); }
.poi-page__condition{ font-size: 1.05rem; font-weight: 600; color: var(--text-primary); }
.poi-page__correction-note{ margin: 1rem 0 0; padding: 0.6rem 0.9rem; border-radius: var(--radius-sm); background: rgba(250,204,21,0.08); border: 1px solid rgba(250,204,21,0.25); font-size: 0.85rem; color: var(--text-secondary); }
.poi-page__forecast{ margin-bottom: 2rem; }
.poi-forecast-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 0.5rem; }
.poi-forecast-day{ padding: 0.7rem 0.4rem; border-radius: var(--radius-sm); background: var(--surface-muted); text-align: center; }
.poi-forecast-day__date{ font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.35rem; }
.poi-forecast-day__high{ font-size: 1.15rem; font-weight: 700; }
.poi-forecast-day__low{ font-size: 0.95rem; color: var(--text-secondary); }
.poi-page__about{ margin: 2rem 0; }
.poi-page__facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; margin: 0; }
.poi-page__fact{ padding: 0.8rem 1rem; border-radius: var(--radius-sm); background: var(--surface-muted); }
.poi-page__fact dt{ font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }
.poi-page__fact dd{ margin: 0; font-weight: 600; }

.ad-slot{ min-height: 50px; margin: 1rem 0; text-align: center; }
.city-page .ad-slot{ margin: 1.5rem 0; }


.btn{ display: inline-block; padding: 0.5rem 1.25rem; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; line-height: 1.4; overflow-wrap: break-word; }
.btn--primary{ background: linear-gradient(180deg, #0d7ff2 0%, #0b67c2 100%); color: #fff; border-color: #0b67c2; box-shadow: 0 10px 20px rgba(13, 127, 242, 0.18); }
.btn--primary:hover{ background: linear-gradient(180deg, #0b74dd 0%, #0959aa 100%); border-color: #0959aa; text-decoration: none; }
.btn:active{ transform: scale(0.97); }
.btn-text{ padding: 0.4rem 0.6rem; border: none; background: none; font: inherit; font-size: var(--font-size-14); font-weight: 600; color: var(--text-soft); cursor: pointer; border-radius: var(--radius-sm); }
.btn-text:hover{ color: var(--accent-strong); background: var(--accent-soft); }



@media (display-mode: standalone){
    [data-pwa-install]{ display: none !important; }
}


.trust-bar{ padding: 0.6rem 0; margin-bottom: 0.75rem; }
.trust-bar__inner{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-5); }
.trust-bar__item{ display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--font-size-13); font-weight: 600; color: var(--text-soft); }
.trust-bar__icon{ width: 0.85em; height: 0.85em; color: #22c55e; flex-shrink: 0; }
.btn--secondary{ background: color-mix(in srgb, var(--bg-card) 78%, transparent); color: var(--text-muted); border-color: var(--border); }
.btn--secondary:hover{ border-color: var(--border-strong); color: var(--text); text-decoration: none; }


.cookie-banner{ position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; background: #111827; color: #f3f4f6; padding: 1rem 0; box-shadow: 0 -2px 8px rgba(0,0,0,0.25); }
.cookie-banner[hidden]{ display: none; }
.cookie-banner__inner{ display: flex; flex-direction: column; gap: 0.75rem; }
.cookie-banner__copy{ display: grid; gap: 0.35rem; }
.cookie-banner__title{ font-size: 1rem; font-weight: 800; }
.cookie-banner__msg{ font-size: 0.9rem; line-height: 1.5; }
.cookie-banner__link{ color: #7ab8f5; margin-left: 0.35rem; text-decoration: underline; }
.cookie-banner__link:hover{ color: #acd4ff; }
.cookie-banner__actions{ display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cookie-banner__preferences{ display: grid; gap: 0.65rem; padding: 0.85rem; border-radius: var(--radius-card); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.cookie-banner__toggle{ display: flex; gap: 0.75rem; align-items: flex-start; }
.cookie-banner__toggle input{ margin-top: 0.2rem; }
.cookie-banner__toggle-copy{ display: grid; gap: 0.15rem; }
.cookie-banner__toggle-copy strong{ color: #f9fafb; font-size: 0.92rem; }
.cookie-banner__toggle-copy span{ color: #cbd5e1; font-size: 0.84rem; line-height: 1.5; }
.cookie-banner .btn--secondary{ color: #e5e7eb; border-color: rgba(229,231,235,0.28); }
.cookie-banner .btn--secondary:hover{ border-color: rgba(229,231,235,0.48); color: #ffffff; }
.cookie-banner .btn--surface{ background: rgba(59,130,246,0.18); color: #dbeafe; border-color: rgba(96,165,250,0.34); }
.cookie-banner .btn--surface:hover{ background: rgba(59,130,246,0.28); color: #eff6ff; border-color: rgba(147,197,253,0.42); }


@media (min-width: 768px){
    body{ padding-bottom: 0; }
    .home-alert-banner__inner{ grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; }
    
    .city-grid__list{ grid-template-columns: repeat(3, 1fr); }
    .city-grid__list--region{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .city-page > section:not(.nearby),
    .city-page > .ad-slot,
    .city-module-page > section,
    .city-module-page > .ad-slot{ margin-bottom: 1.25rem; }
    .weather-current{ padding: 1.5rem; }
    .weather-current__primary{ align-items: center; gap: 1rem; }
    .weather-current__temp{ font-size: clamp(4.4rem, 7vw, 5rem); }
    .weather-current__details{ grid-template-columns: 1fr 1fr; }
    
    
    .daily-item--table{ grid-template-columns: minmax(0, 1.35fr) auto auto minmax(170px, 0.95fr); }
    .city-module-page__title{ font-size: 1.7rem; }

    body.nav-open{ overflow: auto; }

    
    .nav__list{ gap: 1.5rem; }
    .nav__link{ font-size: 0.95rem; }

    
    .cookie-banner__inner{ flex-direction: row; align-items: flex-start; justify-content: space-between; }
    .cookie-banner__copy{ flex: 1; }
    .cookie-banner__preferences{ min-width: min(28rem, 100%); }
    .mobile-bottom-nav,
    .mobile-app-prompt{ display: none; }

    
    .weather-current{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-6); align-items: start; }
    .weather-current__primary{ flex-direction: column; align-items: flex-start; }
    
    
    
    
    .home-dashboard__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    
}





@media (min-width: 1024px){
    .city-grid__list{ grid-template-columns: repeat(4, 1fr); }
    .city-grid__list--region{ grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
    .city-page > section:not(.nearby),
    .city-page > .ad-slot,
    .city-module-page > section,
    .city-module-page > .ad-slot{ margin-bottom: 1.5rem; }
    .city-page__title{ margin-bottom: 1.25rem; }
    .city-module-page__title{ margin-bottom: 1.25rem; }
    .weather-current{ display: grid; grid-template-columns: minmax(220px, 0.95fr) minmax(0, 1.6fr); column-gap: 1.5rem; row-gap: 1rem; align-items: start; }
    .weather-current__primary{ align-items: center; justify-content: flex-start; margin-bottom: 0; }
    .weather-current__temp{ font-size: clamp(4.8rem, 6vw, 5.2rem); }
    .weather-current__details{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    
    
    .weather-hourly,
    .weather-daily,
    .weather-secondary,
    .weather-alerts{ padding: 1.1rem 1.15rem; }
    .daily-list--detailed{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px){
    .main{ padding-bottom: 1rem; }
    .daily-item--table{ grid-template-columns: 1fr auto; }
    .daily-item__temps,
    .daily-item__precip{ grid-column: 1 / -1; }
    .weather-widget__header{ flex-direction: column; }
    .daily-list--table,
    .daily-list--detailed{
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(280px, 86vw);
        align-items: stretch;
    }
    .hourly-list--scroll{ grid-auto-columns: minmax(160px, 76vw); }
    .hourly-list--virtual{ gap: var(--space-3); }
    .cookie-banner{ bottom: calc(env(safe-area-inset-bottom, 0px) + 4.9rem); }
}


.location-finder,
.home-snapshot,
.home-actions,
.home-overview,
.regions-grid,
.home-spotlight,
.trust-block,
.feature-page > section{ margin-bottom: var(--section-gap); }
.home-spotlight{ padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-section); background: var(--section-surface); backdrop-filter: blur(14px); }
.home-spotlight__heading{ font-size: 1.1rem; }
.home-spotlight__intro{ color: var(--text-muted); font-size: 0.88rem; margin-bottom: 0.65rem; }
.home-spotlight__list{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
.home-spotlight__toggle{ margin-top: 0.55rem; }
.location-finder,
.home-snapshot,
.home-overview,
.regions-grid,
.home-spotlight,
.trust-block,
.feature-page__hero{ position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-section); padding: 1.25rem; box-shadow: var(--shadow-soft); backdrop-filter: blur(14px); overflow: hidden; }


.snap{ display: grid; gap: var(--section-gap); margin-bottom: var(--section-gap); }


.snap__now{ display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-section); background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 88%, rgba(250,204,21,1) 12%) 0%, var(--bg-card) 100%); border: 1px solid rgba(250,204,21,0.12); text-decoration: none; color: inherit; transition: border-color 0.2s, box-shadow 0.2s; }
.snap__now:hover{ border-color: rgba(250,204,21,0.3); box-shadow: 0 8px 32px rgba(250,204,21,0.08); text-decoration: none; }
.snap__now-icon{ width: 3.5rem; height: 3.5rem; flex-shrink: 0; }
.snap__now-icon .weather-icon--snap{ width: 100%; height: 100%; }
.snap__now-data{ display: grid; gap: 0.1rem; }
.snap__now-temp{ font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--text-primary); }
.snap__now-temp small{ font-size: 0.5em; font-weight: 600; }
.snap__now-condition{ font-size: 0.95rem; font-weight: 700; color: var(--text-secondary); }
.snap__now-feels{ font-size: 0.82rem; color: var(--text-soft); }
.snap__now-meta{ display: grid; gap: 0.2rem; text-align: right; }
.snap__now-city{ font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.snap__now-brief{ font-size: 0.78rem; color: var(--text-secondary); max-width: 32ch; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.snap__now-updated{ font-size: 0.7rem; color: var(--text-soft); display: flex; align-items: center; gap: 0.2rem; justify-content: flex-end; }
.snap__now-updated svg{ opacity: 0.5; }
.snap__now-cta{ font-size: 0.78rem; font-weight: 700; color: var(--accent-strong); white-space: nowrap; }


.snap__forecast{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-section); }
.snap__day{ display: grid; gap: 0.25rem; padding: 0.85rem 0.75rem; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface-muted); text-align: center; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
.snap__day:hover{ border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.snap__day-label{ font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.snap__day-icon{ display: flex; justify-content: center; height: 2.2rem; }
.snap__day-icon .weather-icon--snap-sm{ width: 2.2rem; height: 2.2rem; }
.snap__day-temp{ font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); line-height: 1.2; }
.snap__day-temp small{ font-size: 0.75em; font-weight: 500; color: var(--text-soft); }
.snap__day-cond{ font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; }
.snap__day-pop{ font-size: 0.7rem; color: var(--accent); display: flex; align-items: center; justify-content: center; gap: 0.2rem; }
.snap__day-trend{ font-size: 0.68rem; font-weight: 700; color: var(--text-soft); background: rgba(255,255,255,0.04); border-radius: 999px; padding: 0.15rem 0.4rem; margin: 0 auto; }


@media (max-width: 600px){
    .snap__now{ grid-template-columns: auto 1fr; gap: 0.75rem; padding: 1rem; }
    .snap__now-meta{ display: none; }
    .snap__now-cta{ grid-column: 1 / -1; text-align: center; padding: 0.5rem; border-radius: var(--radius-inner); background: rgba(59,130,246,0.08); }
    .snap__now-temp{ font-size: 2rem; }
    .snap__forecast{ grid-template-columns: repeat(3, 1fr); gap: 0.5rem; padding: 0.75rem; }
    .snap__day{ padding: 0.75rem 0.5rem; }
    .snap__day-temp{ font-size: 1rem; }
}




.btn--surface{ background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(96, 165, 250, 0.26); }
.btn--surface:hover{ background: rgba(219, 234, 254, 0.9); border-color: rgba(96, 165, 250, 0.42); color: var(--accent-strong); text-decoration: none; }
.location-finder__form{ display: grid; gap: 0.75rem; }
.location-finder__form--hero{ grid-template-columns: 1fr; }
.location-finder__control{ position: relative; }
.location-finder__input,
.location-finder__select{ width: 100%; min-height: 2.75rem; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 0.75rem 0.9rem; background: var(--surface-strong); color: var(--text-primary); font-size: 0.95rem; }
.location-finder__input{ caret-color: #2563eb; }
.location-finder__input::placeholder{ color: var(--text-soft); opacity: 0.85; }
.location-finder--hero .location-finder__input,
.location-finder--hero .location-finder__select{ min-height: 4rem; padding: 1rem 1.1rem; font-size: 1.08rem; border-radius: var(--radius-section); }
.location-finder__control--unified{ display: flex; align-items: center; }
.location-finder__control--unified .location-finder__input{ padding-right: 3.5rem; }
.location-finder__geo-suffix{ position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); cursor: pointer; transition: background 0.15s, color 0.15s; overflow: hidden; font-size: 0; line-height: 1; }
.location-finder__geo-suffix svg{ width: 18px; height: 18px; flex-shrink: 0; display: block; }
.location-finder__geo-suffix:hover{ background: var(--accent); color: #fff; }
.location-finder__geo-suffix.is-loading{ animation: geoSuffixPulse 1s ease-in-out infinite; }
@keyframes geoSuffixPulse{ 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }






.location-finder__input:focus,
.location-finder__select:focus{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13, 127, 242, 0.12); }
.location-finder__results{ position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 20; }
.location-finder__list{ display: grid; gap: 0.3rem; padding: 0.45rem; background: var(--surface-strong); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.location-finder__group-header{ padding: 0.45rem 0.8rem 0.2rem; font-size: var(--font-size-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-label); }
.location-finder__option{ width: 100%; text-align: left; border: none; border-radius: var(--radius-inner); background: transparent; color: var(--text); padding: 0.7rem 0.8rem; font-size: 0.95rem; cursor: pointer; }
.location-finder__option:hover,
.location-finder__option.is-active{ background: var(--accent-soft); color: var(--accent-strong); }
.location-finder__option-row{ display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.location-finder__option-label{ display: block; font-weight: 600; }
.location-label-group{ display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.location-label-text{ display: inline-block; min-width: 0; }
.location-label-temp{ display: inline-flex; align-items: center; color: var(--text-soft); font-size: 0.84rem; font-weight: 700; white-space: nowrap; }
.location-flag{ display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; font-size: 1rem; line-height: 1; }
.location-finder__option-kind{ display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.location-finder__option-meta-row{ display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.12rem; }
.location-finder__option-meta{ display: block; font-size: 0.84rem; color: var(--text-soft); }
.location-finder__option-detail{ display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0.12rem 0.45rem; border-radius: 999px; background: rgba(148, 163, 184, 0.12); color: var(--text-muted); font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.location-finder__empty{ display: grid; gap: 0.25rem; padding: 0.9rem; border-radius: var(--radius-inner); background: var(--surface-muted); color: var(--text); }
.location-finder__empty-title{ font-size: 0.95rem; }
.location-finder__empty-copy{ color: var(--text-muted); font-size: 0.86rem; }
.location-finder__submit{ width: 100%; }


.home-personalization,
.home-timeline{ position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-section); padding: 1.25rem; box-shadow: var(--shadow-soft); margin-bottom: var(--section-gap); backdrop-filter: blur(14px); overflow: hidden; }
.home-personalization__header,
.home-timeline__header{ display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 0.75rem; }
.home-personalization__intro,
.home-timeline__intro,
.home-personalization__empty,
.home-nowcast__intro{ color: var(--text-muted); }
.home-personalization__empty-actions{ margin-top: 0.65rem; }
.home-personalization__empty-geo{ display: inline-flex; align-items: center; gap: 0.4rem; border-radius: 999px; font-size: 0.88rem; }
.home-personalization__empty-popular{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.55rem; }
.home-personalization__empty-or{ font-size: 0.82rem; color: var(--text-soft); }
.home-personalization__empty-quick{ cursor: pointer; font-size: 0.82rem; }
.home-personalization__trust{ display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.65rem; }
.home-personalization__trust-item{ display: inline-flex; align-items: center; min-height: 1.7rem; padding: 0.16rem 0.5rem; border-radius: 999px; background: rgba(148, 163, 184, 0.12); color: var(--text-muted); font-size: 0.82rem; font-weight: 700; }
.home-personalization__intent{ margin-top: 0.8rem; }
.home-personalization__intent-heading{ display: block; margin-bottom: 0.4rem; font-size: 0.82rem; color: var(--text-primary); }
.home-personalization__intent-list{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
.home-personalization__intent-chip{ border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); color: var(--text-muted); padding: 0.38rem 0.68rem; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.home-personalization__intent-chip.is-active,
.home-personalization__intent-chip:hover{ background: var(--accent-soft); border-color: rgba(96, 165, 250, 0.42); color: var(--accent-strong); }
.home-personalization__list{ display: grid; grid-template-columns: 1fr; gap: 0.65rem; }
.home-personalization__list.is-drag-active{ gap: 0.8rem; }
.home-personalization__empty{
    display: grid;
    gap: 0.5rem;
    padding: 1.25rem 1.2rem;
    border: 1px dashed rgba(59, 130, 246, 0.32);
    border-radius: var(--radius-card);
    background: rgba(59, 130, 246, 0.06);
}
.home-personalization__empty-title{ color: var(--text); font-size: 1.05rem; font-weight: 700; }
.home-personalization__empty-copy{ color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6; }
.home-dashboard{ position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-section); padding: 1.25rem; box-shadow: var(--shadow-soft); margin-bottom: var(--section-gap); backdrop-filter: blur(14px); overflow: hidden; }
.home-dashboard__header{ display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 0.75rem; }
.home-dashboard__grid{ display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.home-dashboard-card{ display: grid; gap: 0.55rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-strong); box-shadow: var(--shadow-soft); }
.home-dashboard-card__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.home-dashboard-card__eyebrow{ font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.home-dashboard-card__title{ font-size: 1rem; color: var(--text); margin: 0.18rem 0 0; }
.home-dashboard-card__actions{ display: inline-flex; gap: 0.35rem; }
.home-dashboard-card__move{ display: inline-flex; align-items: center; justify-content: center; width: 2rem; min-height: 2rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); color: var(--text-muted); font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.home-dashboard-card__move:hover:not(:disabled){ background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(96, 165, 250, 0.42); }
.home-dashboard-card__move:disabled{ opacity: 0.45; cursor: default; }
.home-dashboard-card__value{ font-size: 1.45rem; line-height: 1.05; color: var(--text); }
.home-dashboard-card__detail{ color: var(--text-muted); margin: 0; }
.home-dashboard-card__list{ display: grid; gap: 0.35rem; margin: 0; padding-left: 1rem; color: var(--text-muted); font-size: 0.88rem; }
.widget-configurator__layout{ display: grid; gap: var(--space-6); }
.widget-configurator__controls{ display: grid; gap: var(--space-4); }
.widget-configurator__panel{ display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.widget-configurator__heading{ margin: 0; font-size: var(--font-size-20); }
.widget-configurator__search{ position: relative; display: grid; gap: var(--space-3); }
.widget-configurator__popular,
.widget-configurator__chips,
.widget-configurator__fields{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
.widget-configurator__field{ display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0.5rem 0.85rem; border-radius: var(--radius-pill); background: var(--bg-secondary); color: var(--text-primary); font-weight: 600; }
.widget-configurator__field input{ margin: 0; }
.widget-configurator__code{ width: 100%; min-height: 8.5rem; padding: 0.9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-secondary); color: var(--text-primary); font: 500 0.92rem/1.6 "SFMono-Regular", Consolas, monospace; resize: vertical; }
.widget-configurator__preview-summary{ display: grid; gap: 0.2rem; margin-bottom: var(--space-3); color: var(--text-secondary); }
.widget-configurator__iframe{ width: 100%; min-height: 18rem; border: 0; border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--shadow-md); }
.garden-page__picker{ display: grid; gap: var(--space-3); margin-bottom: var(--space-5); }
.garden-page__picker-label{ font-weight: 700; color: var(--text-primary); }
.garden-page__picker-row{ display: grid; gap: var(--space-3); }
.garden-page__hero{ display: grid; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-4); border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.garden-page__hero-copy{ display: grid; gap: 0.2rem; }
.garden-page__hero-city{ font-size: var(--font-size-24); }
.garden-page__hero-detail{ color: var(--text-secondary); }
.garden-page__hero-reading{ display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; color: var(--text-secondary); }
.garden-page__hero-temp{ font-size: var(--font-size-32); font-weight: 800; color: var(--text-primary); }
.garden-page__nights{ margin-top: var(--space-5); }
.garden-page__night-grid{ display: grid; gap: var(--space-3); }
.saved-location-card{ display: grid; gap: 0.75rem; align-content: start; min-height: 15.25rem; padding: 0.95rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: linear-gradient(145deg, #1a2332 0%, #141a24 100%); color: inherit; cursor: grab; }
.saved-location-card__main{ display: grid; gap: 0.7rem; color: inherit; text-decoration: none; min-height: 100%; }
.saved-location-card:hover{ border-color: var(--border-strong); box-shadow: var(--shadow-soft); transform: translateY(-2px); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.saved-location-card__main:hover{ text-decoration: none; }
.saved-location-card.is-dragging{ opacity: 0.72; transform: scale(0.985); cursor: grabbing; }
.saved-location-card__top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.saved-location-card__identity{ display: grid; gap: 0.18rem; min-width: 0; }
.saved-location-card__label{ font-weight: 700; color: var(--text); }
.saved-location-card__meta{ min-height: 2.4rem; font-size: 0.86rem; color: var(--text-soft); line-height: 1.45; }
.saved-location-card__drag{
    display: inline-grid;
    place-items: center;
    width: 2rem;
    min-height: 2rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--text-soft);
    flex: 0 0 2rem;
}
.saved-location-card__drag::before{ content: "⋮⋮"; letter-spacing: 1px; font-weight: 700; }
.saved-location-card__cta{ font-size: 0.84rem; font-weight: 700; color: var(--accent-strong); margin-top: 0.15rem; }

.saved-location-card__summary.is-active,
.saved-location-card__summary:hover{ background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(96, 165, 250, 0.42); }
.saved-location-card__actions{ display: flex; flex-wrap: wrap; gap: 0.55rem; }
.saved-location-card__action{ display: inline-flex; align-items: center; justify-content: center; min-height: 2.35rem; padding: 0.45rem 0.8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong); color: var(--text-muted); font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.saved-location-card__summary,
.saved-location-card__action{ min-width: 9.5rem; }

.saved-location-card__action--remove:hover{ background: rgba(239, 68, 68, 0.12); color: var(--alert-red, #dc2626); border-color: rgba(239, 68, 68, 0.28); }
.user-preferences{ margin-top: 1.25rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface-strong); }
.user-preferences__header{ display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.user-preferences__heading{ font-size: 1.05rem; font-weight: 700; color: var(--text); }
.user-preferences__intro{ color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; }
.user-preferences__grid{ display: grid; gap: 1rem; }
.user-preferences__group{ display: grid; gap: 0.5rem; }
.user-preferences__label{ display: flex; align-items: center; font-size: 0.86rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.01em; }
.user-preferences__chips{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
.user-preferences__chip{ border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-muted); padding: 0.45rem 0.82rem; font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.user-preferences__chip.is-active{ background: var(--accent-soft); border-color: rgba(96, 165, 250, 0.42); color: var(--accent-strong); }
.user-preferences__chip:hover:not(.is-active){ background: rgba(148, 163, 184, 0.12); border-color: var(--border-strong); color: var(--text); }
.user-preferences__summary-toggle{ white-space: nowrap; }
.user-preferences__summary-status{ margin-top: 0.85rem; padding: 0.65rem 0.85rem; border-radius: 10px; background: rgba(148, 163, 184, 0.08); color: var(--text-muted); font-size: 0.86rem; line-height: 1.5; }
body[data-layout-density="compact"] .weather-widget__intro,
body[data-layout-density="compact"] .home-snapshot__intro,
body[data-layout-density="compact"] .home-nowcast__intro,
body[data-layout-density="compact"] .home-timeline__intro,
body[data-layout-density="compact"] .home-personalization__intro,
body[data-layout-density="compact"] .weather-current__summary,
body[data-layout-density="compact"] .saved-location-card__meta,
body[data-layout-density="compact"] .timeline-card__meta:nth-of-type(n+2){ display: none; }
body[data-layout-density="compact"] .home-personalization,
body[data-layout-density="compact"] .home-timeline,
body[data-layout-density="compact"] .home-nowcast,
body[data-layout-density="compact"] .home-map-widget,
body[data-layout-density="compact"] .weather-widget{ padding: 0.85rem; }
body[data-layout-density="compact"] .timeline-card,
body[data-layout-density="compact"] .snapshot-card,
body[data-layout-density="compact"] .nowcast-card,
body[data-layout-density="compact"] .saved-location-card{ padding: 0.8rem; }
body[data-layout-density="compact"] .weather-current__details{ gap: 0.45rem; }

.home-nowcast{ position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-section); padding: 1.25rem; box-shadow: var(--shadow-soft); margin-bottom: var(--section-gap); backdrop-filter: blur(14px); overflow: hidden; }
.home-nowcast__header{ display: flex; flex-direction: column; gap: 0.85rem; margin-bottom: 0.75rem; }
.home-nowcast__grid{ display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.nowcast-card{ display: grid; gap: 0.28rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); color: inherit; text-decoration: none; }
.nowcast-card:hover{ text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-soft); }
.nowcast-card--signal{ background: color-mix(in srgb, var(--bg-card) 92%, var(--accent) 8%); }
.nowcast-card--now{ border-color: var(--accent); }
.nowcast-card--soon{ border-color: var(--accent-secondary); background: color-mix(in srgb, var(--bg-card) 92%, var(--accent-secondary) 8%); }
.nowcast-card--later{ border-color: var(--border); }
.nowcast-card__eyebrow{ font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.nowcast-card__title{ font-size: 1.05rem; color: var(--text); }
.nowcast-card__description{ font-size: 0.92rem; color: var(--text-muted); }
.nowcast-card__meta{ font-size: 0.86rem; font-weight: 700; color: var(--accent-strong); }
.home-timeline__list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.timeline-card{ display: grid; gap: 0.25rem; padding: 0.95rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: linear-gradient(145deg, #1a2332 0%, #141a24 100%); }
.timeline-card__time{ font-size: 0.86rem; font-weight: 700; color: var(--text-muted); }
.timeline-card__reading{ display: flex; align-items: center; gap: 0.6rem; }
.timeline-card__temp{ font-size: 1.2rem; color: var(--text); }
.timeline-card__condition{ font-size: 0.9rem; font-weight: 700; color: var(--text-muted); }
.timeline-card__meta{ font-size: 0.86rem; color: var(--text-muted); }
.home-map-widget{ position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-section); padding: 1.25rem; box-shadow: var(--shadow-soft); margin-bottom: var(--section-gap); overflow: hidden; }
.home-map-widget::before{ display: none; }
.home-map-widget__header{ display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.home-map-widget__header .section-heading{ font-size: clamp(1.3rem, 2.5vw, 1.6rem); }
.home-map-widget__intro{ color: var(--text-soft); font-size: 0.85rem; max-width: 45ch; }

.home-map-widget__meta-item{ display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0.12rem 0.45rem; border-radius: 999px; background: rgba(148, 163, 184, 0.08); color: var(--text-soft); font-size: 0.75rem; font-weight: 600; }
.home-map-widget__layout{ display: grid; gap: 0.9rem; }
.home-map-widget__surface{ display: grid; gap: 0.75rem; }
.home-map-widget__toolbar{ display: grid; gap: 0.75rem; }
.home-map-widget__layers{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
.home-map-widget__layer-chip,
.home-map-widget__radar-toggle{ display: inline-flex; align-items: center; justify-content: center; min-height: 2.1rem; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-inner); background: var(--surface-muted); color: var(--text-soft); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: all 0.15s; }
.home-map-widget__layer-chip.is-active{ background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(96, 165, 250, 0.35); box-shadow: 0 0 0 1px rgba(96,165,250,0.12); }
.home-map-widget__layer-chip:hover,
.home-map-widget__radar-toggle:hover{ background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(96, 165, 250, 0.3); }
.home-map-widget__radar{ display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.home-map-widget__radar-label{ font-size: 0.78rem; color: var(--text-soft); font-weight: 600; }
.home-map-widget__radar-status{ font-size: 0.72rem; color: var(--text-soft); }
.home-map-widget__map{ position: relative; min-height: 26rem; border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; background: var(--bg-primary); }
.home-map-widget__panel{ display: grid; gap: 0.65rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: linear-gradient(145deg, var(--bg-card-elevated) 0%, var(--bg-card) 100%); }
.home-map-widget__panel-header{ display: grid; gap: 0.18rem; }
.home-map-widget__panel-eyebrow{ font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-strong); font-weight: 700; }
.home-map-widget__panel-location{ font-size: 1.2rem; color: var(--text-primary); line-height: 1.1; font-weight: 800; }
.home-map-widget__panel-subtitle{ color: var(--text-soft); font-size: 0.8rem; }
.home-map-widget__panel-subtitle:empty{ display: none; } /* hide empty subtitle so it doesn't leave a gap between location name and temp; JS still populates it via data-map-panel-subtitle (audit #12, 2026-05-30) */
.home-map-widget__panel-updated{ color: var(--text-soft); font-size: 0.72rem; }
.home-map-widget__panel-reading{ display: flex; align-items: center; gap: 0.7rem; }
.home-map-widget__panel-primary{ display: grid; gap: 0.1rem; }
.home-map-widget__panel-temp{ font-size: 2.2rem; line-height: 1; color: var(--text-primary); letter-spacing: -0.05em; font-weight: 800; }
.home-map-widget__panel-condition{ font-weight: 700; color: var(--text-secondary); font-size: 0.9rem; }
.home-map-widget__panel-metrics{ display: flex; flex-wrap: wrap; gap: 0.35rem; }
.home-map-widget__panel-metric{ display: inline-flex; align-items: center; min-height: 1.6rem; padding: 0.15rem 0.45rem; border-radius: 8px; background: rgba(148, 163, 184, 0.08); color: var(--text-soft); font-size: 0.75rem; font-weight: 600; }
.home-map-widget__panel-block{ display: grid; gap: 0.55rem; position: relative; }
.home-map-widget__panel-block::after{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2.5rem; pointer-events: none; z-index: 1; background: linear-gradient(to right, transparent, var(--bg-card)); border-radius: 0 12px 12px 0; }
.home-map-widget__panel-block-heading{ font-size: 0.72rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.home-map-widget__hourly{ display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7rem, 1fr); gap: 0.55rem; overflow-x: auto; padding-bottom: 0.15rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.home-map-widget__hourly::-webkit-scrollbar{ display: none; }
.home-map-widget__hourly-item,
.home-map-widget__daily-item{ display: grid; gap: 0.15rem; padding: 0.75rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.home-map-widget__hourly-time,
.home-map-widget__daily-label{ font-size: 0.82rem; color: var(--text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.home-map-widget__hourly-temp,
.home-map-widget__daily-temp{ color: var(--text); font-size: 1rem; }
.home-map-widget__hourly-wind,
.home-map-widget__daily-precip{ font-size: 0.84rem; color: var(--text-muted); }
.home-map-widget__daily{ display: grid; gap: 0.55rem; }
.home-map-widget__panel-cta{ width: fit-content; }
.city-card__reading--placeholder,
.city-card__metrics--placeholder{ border-radius: var(--radius-sm); }
.city-card__metrics--placeholder{ min-height: 1.85rem; }
.home-map-marker{ display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; min-height: 1.8rem; padding: 0.25rem 0.5rem; border-radius: 10px; background: rgba(15, 23, 42, 0.88); border: 1.5px solid rgba(96, 165, 250, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); color: var(--accent-strong); font-size: 0.8rem; font-weight: 800; white-space: nowrap; backdrop-filter: blur(6px); transition: all 0.15s; }
.home-map-marker:hover{ border-color: rgba(96, 165, 250, 0.6); transform: scale(1.08); }
.home-map-marker.is-selected{ background: linear-gradient(180deg, #0d7ff2 0%, #0b67c2 100%); color: #fff; border-color: rgba(13, 127, 242, 0.5); box-shadow: 0 4px 16px rgba(13, 127, 242, 0.3); transform: scale(1.1); }
.home-map-marker__label{ pointer-events: none; }

.home-map-widget .leaflet-control-zoom a{ color: var(--accent-strong); }
.home-map-widget .leaflet-control-attribution{ background: rgba(10, 14, 20, 0.8); font-size: 0.68rem; }
.home-map-widget .leaflet-popup-content-wrapper,
.home-map-widget .leaflet-popup-tip{ background: var(--surface-strong); color: var(--text); }
.home-map-widget .leaflet-popup-content{ margin: 0.7rem 0.85rem; font-size: 0.88rem; }
.home-actions{ display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.home-overview__header{ margin-bottom: 0.85rem; }
.home-overview__intro{ color: var(--text-muted); margin: 0; }
.home-overview__grid{ display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.home-overview-card{ display: block; border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1rem; background: var(--surface-strong); color: inherit; text-decoration: none; box-shadow: var(--shadow-soft); }
.home-overview-card:hover{ text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-soft); }
.home-overview-card__eyebrow{ font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.home-overview-card__title{ display: block; font-size: 1.05rem; color: var(--text); margin: 0.25rem 0 0.35rem; }
.home-overview-card__description{ display: block; font-size: 0.92rem; color: var(--text-muted); margin-bottom: 0.55rem; }
.home-overview-card__cta{ font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.home-action-card{ display: grid; gap: 0.35rem; padding: 1rem; background: var(--surface-strong); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.home-action-card:hover{ text-decoration: none; border-color: var(--border-strong); box-shadow: var(--shadow-soft); }
.home-action-card__eyebrow{ font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); }
.home-action-card__title{ font-size: 1.05rem; color: var(--text); }
.home-action-card__description{ font-size: 0.92rem; color: var(--text-muted); }
.home-action-card__cta{ font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.regions-grid__heading{ font-size: 1.1rem; font-weight: 600; margin-bottom: 0.35rem; }
.regions-grid__description,
.feature-page__intro,
.trust-block__description{ color: var(--text-muted); margin-bottom: 0.85rem; }
.regions-grid__list,
.trust-block__links{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.region-pill,
.trust-block__links a{ display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0.45rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-soft); color: var(--accent-strong); font-size: 0.9rem; font-weight: 700; }
.region-pill:hover,
.trust-block__links a:hover{ text-decoration: none; border-color: var(--border-strong); }

/* /kraj regions hub — grid of region cards. These .regions-hub__* classes existed in
   templates/pages/regions-hub.php but had NO CSS, so /kraj rendered unstyled (audit #1, 2026-05-30). */
.regions-hub{ padding: 0.5rem 0 2rem; }
.regions-hub__hero{ margin-bottom: 1.25rem; }
.regions-hub__title{ font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; margin: 0 0 0.35rem; line-height: 1.2; }
.regions-hub__lead{ color: var(--text-muted); margin: 0; font-size: 1rem; max-width: 60ch; }
.regions-hub__grid{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
.regions-hub__card{ display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-section, 14px); background: var(--surface, #fff); box-shadow: var(--shadow-soft); color: var(--text-primary); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.regions-hub__card:hover{ border-color: var(--border-strong); transform: translateY(-2px); text-decoration: none; }
.regions-hub__card-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.regions-hub__card-name{ font-size: 1rem; font-weight: 700; }
.regions-hub__card-temp{ font-size: 1.1rem; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.regions-hub__card-meta{ font-size: 0.82rem; color: var(--text-soft); }
.is-dark .regions-hub__card{ background: var(--bg-card, #1e293b); }
@media (max-width: 480px){ .regions-hub__grid{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }

.feature-page{ padding: 0.5rem 0; }
.feature-page__title{ font-size: 1.5rem; font-weight: 700; margin-bottom: 0.45rem; }


.trust-block__updated{ font-size: 0.82rem; color: var(--text-soft); margin-bottom: 0.85rem; }
.feature-summary,
.feature-quick-links,
.feature-faq{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-section); padding: 1.25rem; box-shadow: var(--shadow-soft); margin-bottom: var(--section-gap); }
.feature-summary__grid{ display: grid; gap: 0.75rem; }
.feature-summary__card{ display: grid; gap: 0.3rem; padding: 0.95rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); }
.feature-summary__value{ font-size: 1.35rem; font-weight: 700; color: var(--text); }
.feature-summary__label{ font-size: 0.98rem; font-weight: 600; color: var(--text); }
.feature-summary__description,
.feature-faq__answer{ color: var(--text-muted); }
.feature-summary__link{ font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.feature-summary__link:hover{ text-decoration: underline; }
.feature-faq__list{ display: grid; gap: 0.5rem; }
.feature-faq__item{ border-bottom: none; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); overflow: hidden; }
.feature-faq__item:last-child{ border-bottom: none; }
.feature-faq__item summary{ padding: 0.85rem 1rem; font-size: 1rem; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.feature-faq__item summary::-webkit-details-marker{ display: none; }
.feature-faq__item summary::after{ content: "+"; font-size: 1.2rem; font-weight: 300; color: var(--text-secondary); transition: transform 0.2s; flex-shrink: 0; margin-left: 0.75rem; }
.feature-faq__item[open] summary::after{ content: "−"; }
.feature-faq__item summary:hover{ background: var(--bg-soft); }
.feature-faq__item .feature-faq__answer{ padding: 0 1rem 0.85rem; margin: 0; }
.feature-faq__question{ font-size: 1rem; font-weight: 600; color: var(--text); margin-bottom: 0; }

@media (min-width: 768px){
    
    
    .hero__popular-list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .location-finder__form{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .location-finder__form--hero{ grid-template-columns: minmax(0, 1fr) auto; }
    .location-finder__control{ min-width: 0; }
    .location-finder__submit{ width: auto; }
    .home-personalization__header,
    .home-dashboard__header,
    .home-nowcast__header,
    .home-timeline__header{ flex-direction: row; align-items: center; justify-content: space-between; }
    .home-dashboard__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .widget-configurator__layout{ grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); }
    .garden-page__picker-row{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .garden-page__hero{ grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
    .garden-page__night-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-personalization__list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-preferences__header{ flex-direction: row; align-items: center; justify-content: space-between; }
    .user-preferences__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-map-widget__layout{ grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.95fr); align-items: start; }
    .home-map-widget__toolbar{ grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .home-nowcast__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    
    
    .home-timeline__list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-overview__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .feature-summary__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .feature-page__title{ font-size: 1.75rem; }
}

@media (max-width: 767px){
    
    
    
    
    .hero__popular-list{ grid-template-columns: 1fr 1fr; }
    
    .home-map-widget__map{ min-height: 20rem; }
    .home-map-widget__hourly{ grid-auto-columns: minmax(6.5rem, 1fr); }
    .widget-configurator__layout{ grid-template-columns: 1fr; }
    .garden-page__night-grid{ grid-template-columns: 1fr; }
    .embed-weather__inner{ min-height: auto; }
}












.city-grid__list--nearby{ margin-top: 0.85rem; }
.nearby--cities{ background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; box-shadow: var(--shadow-sm); }
.nearby__description{ color: var(--text-secondary); margin-bottom: 0.85rem; }

@media (min-width: 1024px){
    .home-dashboard__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-personalization__list{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .home-map-widget__daily{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
    
    .home-timeline__list{ grid-template-columns: repeat(8, minmax(0, 1fr)); }
    
}



.container{ max-width: 1180px; }

.btn,
.region-pill,
.home-overview-card,
.city-card,
.saved-location-card,
.weather-stat-card,
.hourly-item--card,
.daily-item--table,
.home-map-widget,
.weather-widget,
.weather-alerts,
.trust-block,
.feature-page > section,
.home-personalization{
    border-radius: var(--radius-card);
}

.btn{ border-radius: var(--radius-pill); }

.header{
    padding: var(--space-3) 0;
    background: color-mix(in srgb, var(--header-bg) 78%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-sm);
}

.header__inner{
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: nowrap;
    min-width: 0;
}

.header__logo{
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-20);
    font-weight: 800;
    min-width: 0;
    overflow: hidden;
}

.header__logo-mark{
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--accent-strong);
    background: rgba(255, 255, 255, 0.34);
    box-shadow: var(--shadow-glow);
}

.header__logo-mark svg{ width: 100%; height: 100%; }
.header__logo-text{ white-space: nowrap; }
.header__nav{ flex: 1; min-width: 0; }
.nav__list{ justify-content: center; }
.header__controls{ gap: var(--space-2); flex-shrink: 0; }

.header__icon-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}

.header__icon-button svg{ width: 1.2rem; height: 1.2rem; }



.header__search{ position: relative; display: inline-flex; align-items: center; }
.header__search-panel{ position: absolute; top: calc(100% + 0.6rem); right: 0; width: min(22rem, 70vw); opacity: 0; pointer-events: none; transform: translateY(-0.25rem); transition: opacity 0.2s ease, transform 0.2s ease; }
.header__search.is-open .header__search-panel,
.header__search-panel.is-open{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.header__search-input{ width: 100%; min-height: 3rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--bg-card) 94%, transparent); color: var(--text); box-shadow: var(--shadow-md); font: inherit; }


.header__temp-badge-location{ color: var(--text-secondary); font-size: var(--font-size-12); font-weight: 700; }
.header__temp-badge-value{ color: var(--accent-strong); font-size: var(--font-size-14); font-weight: 800; }

.header--compact{ padding: var(--space-2) 0; }
.header--compact .header__logo-mark{ width: 2.1rem; height: 2.1rem; }

.hero--homepage{
    position: relative;
    display: block;
    margin-bottom: var(--space-6);
}













.location-finder__form--hero{ display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

.location-finder__input,
.location-finder__select{
    min-height: 4rem;
    padding: 0.95rem 1.2rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface-strong);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-20);
    box-shadow: var(--shadow-md);
}


.hero__popular-list{ gap: var(--space-3); }





.hero-weather__temp{ font-size: clamp(var(--font-size-64), 8vw, var(--font-size-80)); font-weight: 800; letter-spacing: -2px; color: var(--text-primary); text-shadow: none; }
.hero-weather__temp small{ font-size: var(--font-size-24); color: var(--text-secondary); }












.hero__content .location-finder__intent-chip{ box-shadow: none; }

.hero__scroll-indicator{
    position: absolute;
    left: 50%;
    bottom: var(--space-4);
    transform: translateX(-50%);
    z-index: 2;
    display: inline-grid;
    justify-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--font-size-12);
    font-weight: 700;
}

.hero__scroll-indicator:hover{ text-decoration: none; }
.hero__scroll-arrow{ width: 1.1rem; height: 1.1rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); animation: heroScrollBounce 1.6s ease-in-out infinite; }

@media (max-width: 767px){
    .hero__scroll-indicator{ display: none; }
}

.home-map-widget{ padding: var(--space-6); box-shadow: var(--shadow-lg); }
.home-map-widget__map{ min-height: 480px; }
.home-map-widget__panel{ box-shadow: var(--shadow-md); }
.home-map-widget__panel-temp{ font-size: var(--font-size-32); font-weight: 800; }

.saved-location-card{ min-height: 15.25rem; box-shadow: var(--shadow-sm); }
.saved-location-card__meta{ min-height: 2.8rem; line-height: 1.5; }
.saved-location-card__weather-slot{ min-height: 5.8rem; display: block; }
.saved-location-card__weather-slot.is-skeleton{
    min-height: 5.8rem;
    border-radius: var(--radius-sm);
}
.saved-location-card__action[title]{ cursor: help; }
.saved-location-card__weather{ display: grid; gap: 0.5rem; }
.saved-location-card__weather-main{ display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.75rem; }
.saved-location-card__weather-copy{ display: grid; gap: 0.08rem; min-width: 0; }
.saved-location-card__temp{ font-size: var(--font-size-24); font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.saved-location-card__condition{ font-size: var(--font-size-14); color: var(--text-secondary); }
.saved-location-card__range{ display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--font-size-14); color: var(--text-secondary); font-weight: 700; }
.saved-location-card__range-label{ font-size: var(--font-size-12); color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.saved-location-card__weather--unavailable .saved-location-card__range{ font-size: var(--font-size-12); line-height: 1.45; font-weight: 600; }
.weather-icon--saved{ width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; }


.weather-current{ padding: var(--space-6); }
.weather-current__primary{ align-items: flex-start; }
.weather-current__temp{ font-size: clamp(var(--font-size-64), 8vw, var(--font-size-80)); letter-spacing: -2px; }
.weather-current__details{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.weather-detail{ min-width: 0; flex-wrap: wrap; align-content: start; gap: 0.35rem 0.75rem; overflow: visible; }
.weather-detail dd{ font-size: var(--font-size-16); text-align: left; word-break: break-word; }


















































.cond{ padding: 0; }


.cond__summary{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.cond__summary-item{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
}
.cond__summary-item:first-child{ border-radius: var(--radius-card) 0 0 var(--radius-card); }
.cond__summary-item:last-child{ border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.cond__summary-label{
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.cond__summary-value{
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.cond__summary-item--great .cond__summary-value{ color: #34d399; }
.cond__summary-item--good .cond__summary-value{ color: #6ee7b7; }
.cond__summary-item--neutral .cond__summary-value{ color: var(--text-primary); }
.cond__summary-item--warning .cond__summary-value{ color: #fbbf24; }
.cond__summary-item--danger .cond__summary-value{ color: #f87171; }


.cond__cards{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.cond__card{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 1.25rem;
    border-radius: var(--radius-card);
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    box-shadow: var(--shadow-card);
}
.cond__card-title{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cond__card-title svg{ opacity: 0.7; }
.cond__card-body{ display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }


.cond__card--comfort{ border-left: 3px solid rgba(59, 130, 246, 0.35); }
.cond__card--sun{ border-left: 3px solid rgba(251, 191, 36, 0.35); }
.cond__card--air{ border-left: 3px solid rgba(16, 185, 129, 0.35); }


.cond__metric{
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.cond__metric--primary{
    padding-bottom: var(--space-3);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cond__metric-label{
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.cond__metric-value{
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.cond__metric-value--lg{
    font-size: 2rem;
    letter-spacing: -0.04em;
    line-height: 1;
}
.cond__metric-interp{
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.35;
}


.cond__metric-value--aqi-good{ color: #34d399; }
.cond__metric-value--aqi-fair{ color: #a3e635; }
.cond__metric-value--aqi-moderate{ color: #fbbf24; }
.cond__metric-value--aqi-poor{ color: #f97316; }
.cond__metric-value--aqi-very-poor{ color: #ef4444; }

.cond__metric-row{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
.cond__metric-row > .cond__metric{
    padding: 0.5rem 0;
}
.cond__metric-row > .cond__metric:not(:last-child){
    border-right: 1px solid rgba(255,255,255,0.05);
    padding-right: var(--space-3);
}


.cond__sun-timeline{ display: flex; flex-direction: column; gap: 0.5rem; }
.cond__sun-bar{
    position: relative;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.15);
    overflow: visible;
}
.cond__sun-fill{
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.4) 0%, rgba(251, 191, 36, 0.25) 100%);
}
.cond__sun-dot{
    position: absolute;
    top: 50%;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 999px;
    background: #94a3b8;
    border: 2px solid #1a2332;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.cond__sun-dot.is-day{
    background: #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.cond__sun-labels{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.cond__sun-labels svg{ vertical-align: -2px; margin-right: 0.15rem; opacity: 0.6; }
.cond__sun-status{
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.cond__metric-row--sun{
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255,255,255,0.05);
}


.cond__pressure-bar{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.cond__pressure-track{
    position: relative;
    height: 0.4rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(59,130,246,0.18) 0%, rgba(148,163,184,0.12) 50%, rgba(239,68,68,0.18) 100%);
}
.cond__pressure-marker{
    position: absolute;
    top: 50%;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background: #fff;
    border: 2.5px solid #3b82f6;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.25);
}
.cond__pressure-meta{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.cond__pressure-meta strong{ font-weight: 800; }
.cond__pressure-trend{ font-size: 0.78rem; font-weight: 700; }
.cond__pressure-trend--rising{ color: #0d9488; }
.cond__pressure-trend--falling{ color: #ef4444; }
.cond__pressure-trend--steady{ color: var(--text-secondary); }


.cond__tiles{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.04);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.cond__tile{
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.875rem 0.75rem;
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
}
.cond__tile:first-child{ border-radius: var(--radius-card) 0 0 var(--radius-card); }
.cond__tile:last-child{ border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.cond__tile-label{
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}
.cond__tile-label svg{ opacity: 0.6; flex-shrink: 0; }
.cond__tile-value{
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.cond__tile-interp{
    font-size: 0.72rem;
    color: var(--text-secondary);
    line-height: 1.25;
}


.cond__tile--low .cond__tile-value{ color: #34d399; }
.cond__tile--moderate .cond__tile-value{ color: #fbbf24; }
.cond__tile--high .cond__tile-value{ color: #f97316; }
.cond__tile--very_high .cond__tile-value{ color: #ef4444; }
.cond__tile--extreme .cond__tile-value{ color: #dc2626; }
.cond__tile--moon .cond__tile-value{ color: #93c5fd; }




@media (max-width: 1023px){
    .cond__cards{ grid-template-columns: 1fr; }
    .cond__tiles{ grid-template-columns: repeat(3, 1fr); }
    .cond__tile:first-child{ border-radius: var(--radius-card) 0 0 0; }
    .cond__tile:last-child{ border-radius: 0 0 var(--radius-card) 0; }
    .cond__tile:nth-child(3){ border-radius: 0 var(--radius-card) 0 0; }
    .cond__tile:nth-child(4){ border-radius: 0 0 0 var(--radius-card); }
}

@media (min-width: 768px) and (max-width: 1023px){
    .cond__cards{ grid-template-columns: 1fr 1fr; }
    .cond__card--air{ grid-column: 1 / -1; }
}


@media (max-width: 767px){
    .cond__summary{
        grid-template-columns: 1fr 1fr;
    }
    .cond__summary-item:first-child{ border-radius: var(--radius-card) 0 0 0; }
    .cond__summary-item:nth-child(2){ border-radius: 0 var(--radius-card) 0 0; }
    .cond__summary-item:nth-child(3){ border-radius: 0; }
    .cond__summary-item:last-child{ border-radius: 0 0 var(--radius-card) 0; }
    .cond__summary-item:nth-child(3){ border-radius: 0 0 0 var(--radius-card); }

    .cond__cards{ grid-template-columns: 1fr; gap: var(--space-2); }

    .cond__metric-row{ grid-template-columns: 1fr 1fr; }
    .cond__metric-row > .cond__metric:last-child{
        grid-column: 1 / -1;
        border-right: none;
        padding-right: 0;
        border-top: 1px solid rgba(255,255,255,0.05);
        padding-top: 0.5rem;
    }

    .cond__tiles{ grid-template-columns: repeat(2, 1fr); }
    .cond__tile:first-child{ border-radius: var(--radius-card) 0 0 0; }
    .cond__tile:nth-child(2){ border-radius: 0 var(--radius-card) 0 0; }
    .cond__tile:nth-child(5){ border-radius: 0 0 0 var(--radius-card); }
    .cond__tile:last-child{ border-radius: 0 0 var(--radius-card) 0; }
    .cond__tile:nth-child(3),
    .cond__tile:nth-child(4){ border-radius: 0; }
}

@media (max-width: 374px){
    .cond__summary{ grid-template-columns: 1fr; }
    .cond__summary-item{ border-radius: 0 !important; }
    .cond__summary-item:first-child{ border-radius: var(--radius-card) var(--radius-card) 0 0 !important; }
    .cond__summary-item:last-child{ border-radius: 0 0 var(--radius-card) var(--radius-card) !important; }

    .cond__metric-row{ grid-template-columns: 1fr; }
    .cond__metric-row > .cond__metric:not(:last-child){
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-bottom: 0.5rem;
    }
    .cond__metric-row > .cond__metric:last-child{
        grid-column: auto;
    }

    .cond__tiles{ grid-template-columns: 1fr; }
    .cond__tile{ border-radius: 0 !important; }
    .cond__tile:first-child{ border-radius: var(--radius-card) var(--radius-card) 0 0 !important; }
    .cond__tile:last-child{ border-radius: 0 0 var(--radius-card) var(--radius-card) !important; }
}


@media (min-width: 1280px){
    .cond__cards{ gap: var(--space-4); }
}


html:not(.is-dark) .cond__summary-item,
html:not(.is-dark) .cond__card,
html:not(.is-dark) .cond__tile{
    background: var(--bg-card);
}
html:not(.is-dark) .cond__summary{ background: var(--border); }
html:not(.is-dark) .cond__tiles{ background: var(--border); }
html:not(.is-dark) .cond__card{
    border-color: var(--border);
    box-shadow: var(--shadow-sm);
}
html:not(.is-dark) .cond__card-title{ border-bottom-color: var(--border); }
html:not(.is-dark) .cond__metric--primary{ border-bottom-color: var(--border); }
html:not(.is-dark) .cond__metric-row > .cond__metric:not(:last-child){ border-right-color: var(--border); }
html:not(.is-dark) .cond__metric-row--sun{ border-top-color: var(--border); }
html:not(.is-dark) .cond__pressure-bar{ border-top-color: var(--border); }
html:not(.is-dark) .cond__sun-dot{ border-color: #fff; }
html:not(.is-dark) .cond__pressure-marker{ background: var(--text-primary); border-color: #3b82f6; }
html:not(.is-dark) .cond__sun-bar{ background: rgba(0,0,0,0.06); }
html:not(.is-dark) .cond__sun-fill{ background: linear-gradient(90deg, rgba(251, 191, 36, 0.25) 0%, rgba(251, 191, 36, 0.12) 100%); }

.city-radar__map{ height: 300px; border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.embed-weather{ min-height: 100vh; padding: 0; }
.embed-weather__inner{ min-height: 100vh; display: grid; gap: var(--space-4); padding: var(--space-5); font-family: "Plus Jakarta Sans", system-ui, sans-serif; background: var(--bg-card); color: var(--text-primary); }
.embed-weather--scheme-dark .embed-weather__inner{ background: #0d1117; color: #e6edf3; }
.embed-weather--scheme-transparent .embed-weather__inner{ background: linear-gradient(135deg, rgba(255,255,255,0.24), rgba(59,130,246,0.16)); backdrop-filter: blur(16px); }
.embed-weather__header,
.embed-weather__footer{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.embed-weather__copy{ display: grid; gap: 0.2rem; }
.embed-weather__name{ font-size: var(--font-size-24); line-height: 1; }
.embed-weather__condition,
.embed-weather__updated,
.embed-weather__link{ color: var(--text-secondary); font-size: var(--font-size-14); }
.embed-weather__body{ display: grid; gap: var(--space-3); }
.embed-weather--extended .embed-weather__body{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.embed-weather__metric{ display: grid; gap: 0.2rem; padding: var(--space-3); border-radius: var(--radius-card); background: rgba(148,163,184,0.12); }
.embed-weather__metric--temp .embed-weather__metric-value{ font-size: var(--font-size-32); font-weight: 800; letter-spacing: -0.04em; }
.embed-weather__metric-label{ color: var(--text-secondary); font-size: var(--font-size-12); text-transform: uppercase; letter-spacing: 0.05em; }
.embed-weather__metric-value{ font-size: var(--font-size-20); font-weight: 700; }
.embed-weather--minimal .embed-weather__body{ gap: var(--space-2); }
.embed-weather--minimal .embed-weather__metric{ padding: var(--space-2); }
.embed-weather__link{ text-decoration: none; font-weight: 700; }
.embed-weather__link:hover{ color: var(--accent-primary); }
.hourly-item--card{ min-width: 82px; }
.hourly-item--card .hourly-item__temp{ font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.hourly-item--card{ padding: 0.75rem; gap: 0.2rem; border-radius: 12px; }

.hourly-item--current .hourly-item__time{ color: #93c5fd; font-weight: 800; }
.daily-item__headline{ grid-template-columns: auto auto; align-items: baseline; gap: 0.15rem 0.5rem; }
.daily-item__date{ font-size: var(--font-size-14); color: var(--text-secondary); font-weight: 700; }
.mobile-bottom-nav{ grid-template-columns: repeat(5, minmax(0, 1fr)); }

.page-map .main{
    padding: 0;
}

.page-map .main > section{
    max-width: none;
    padding: 0;
}

.map-page{
    position: relative;
    min-height: calc(100svh - 5rem);
}

.map-page__frame{
    position: relative;
    /* `100svh` is the new "small viewport height" unit (Safari 15.4+, Chrome 108+).
     * Older browsers (and some mobile WebViews) silently ignore the rule and the
     * container collapses to 0px — the Leaflet map then can't render and the
     * user sees only the sidebar (user audit 2026-05-24). Provide `100vh` as a
     * universal fallback BEFORE the modern unit so older browsers get something
     * usable; modern browsers override to the smaller, address-bar-aware unit. */
    min-height: 600px;
    height: calc(100vh - 5rem);
    height: calc(100svh - 5rem);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(148, 163, 184, 0.18) 0%, rgba(226, 232, 240, 0.42) 100%);
}

.map-page__canvas,
.map-page__map{
    position: absolute;
    inset: 0;
}

.map-page__overlay,
.map-page__sidebar,
.map-page__legend,
.map-page__fab{
    z-index: 500;
}

.map-page__overlay--left{
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    max-width: min(22rem, calc(100% - 6rem));
}

.map-page__actions{
    display: none;
}

.map-page__glass,
.map-page__legend{
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: color-mix(in srgb, var(--bg-card) 82%, transparent);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
}

.map-page__glass{
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-card);
}

.map-page__intro{
    display: none;
}

.map-page__eyebrow{
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 2rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-secondary);
    font-size: var(--font-size-12);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.map-page__title{
    margin-top: var(--space-2);
    font-size: var(--font-size-20);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.map-page__description{
    margin-top: var(--space-1);
    max-width: 42rem;
    color: var(--text-secondary);
    font-size: var(--font-size-14);
}

.map-page__layers,
.map-page__popular{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.map-page__actions{
    display: none;
}

.map-page__layer-chip,
.map-page__action-btn,
.map-page__popular-chip,
.map-page__radar-toggle,
.map-page__sidebar-toggle{
    min-height: 2.75rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
    font-size: var(--font-size-14);
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.map-page__layer-chip.is-active,
.map-page__layer-chip:hover,
.map-page__action-btn:hover,
.map-page__popular-chip:hover,
.map-page__radar-toggle:hover,
.map-page__sidebar-toggle:hover{
    border-color: var(--border-strong);
    color: var(--accent-strong);
    text-decoration: none;
}

.map-page__radar{
    display: none;
}

.map-page__radar-heading{
    font-size: var(--font-size-12);
    color: var(--text-secondary);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.map-page__radar-row{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.map-page__radar-status{
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    font-weight: 600;
}

.map-page__search{
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

.map-page__search:not([hidden]){
    display: grid;
}

.map-page__search-label{
    font-size: var(--font-size-14);
    font-weight: 700;
}

.map-page__search-input{
    min-height: 3.25rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--bg-card);
    color: var(--text-primary);
    font: inherit;
}

.map-page__search-results{
    display: grid;
    gap: var(--space-2);
    max-height: 16rem;
    overflow: auto;
}

.map-page__search-empty{
    padding: 0.8rem 0;
    color: var(--text-secondary);
    font-size: var(--font-size-14);
}

.map-page__search-result{
    display: grid;
    gap: 0.12rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--bg-card);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.map-page__search-result.is-active,
.map-page__search-result:hover{
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}

.map-page__search-result-name{
    font-size: var(--font-size-16);
}
.map-page__search-result-name .location-label-group{
    align-items: center;
}

.map-page__search-result-meta,
.map-page__search-result-detail{
    color: var(--text-secondary);
    font-size: var(--font-size-14);
}

.map-page__sidebar{
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    width: min(25rem, calc(100% - 2rem));
    overflow: auto;
    box-shadow: var(--shadow-lg);
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
    /* Asymmetric visibility transition: when CLOSING, visibility flips AFTER the 0.3s slide so the
       animation stays visible; when OPENING, .is-open overrides with `visibility 0s 0s` so the
       panel shows instantly and the slide-in is visible. */
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
}

.map-page__sidebar.is-open{
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
}

/* Collapsed state. JS removes `.is-open` and adds an explicit `.is-collapsed` class
   (main.js setSidebarCollapsed). Belt-and-suspenders defense: transform slides off-screen, opacity
   fades, visibility removes from a11y/tab-focus tree. Caught 2026-06-01 by external audit — even
   though the live CSS already carried the transform, measured `transform: none` on the panel meant
   something somewhere clobbered it; opacity+visibility close the gap regardless of root cause and
   take the panel out of the accessibility tree (no tab focus on hidden children). */
.map-page__sidebar.is-collapsed,
.map-page__sidebar:not(.is-open){
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.map-page__sidebar-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.map-page__legend{
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    display: grid;
    gap: var(--space-2);
    max-width: min(18rem, calc(100% - 6rem));
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-card);
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.map-page__legend:hover,
.map-page__legend:focus-within{
    opacity: 1;
}

.map-page__legend-item{
    display: grid;
    gap: 0.35rem;
}

.map-page__legend-title,
.map-page__legend-caption{
    font-size: var(--font-size-12);
    font-weight: 700;
    color: var(--text-secondary);
}

.map-page__legend-scale{
    display: block;
    width: 100%;
    height: 0.65rem;
    border-radius: var(--radius-pill);
}

.map-page__legend-scale--radar{
    background: linear-gradient(90deg, #93c5fd 0%, #3b82f6 35%, #f59e0b 68%, #ef4444 100%);
}

.map-page__legend-scale--temp_new{
    background: linear-gradient(90deg, #1d4ed8 0%, #38bdf8 30%, #facc15 62%, #f97316 100%);
}

.map-page__legend-scale--precipitation_new{
    background: linear-gradient(90deg, #dbeafe 0%, #60a5fa 40%, #1d4ed8 100%);
}

.map-page__legend-scale--wind_new{
    background: linear-gradient(90deg, #cffafe 0%, #06b6d4 42%, #0f766e 100%);
}

.map-page__legend-scale--pressure_new{
    background: linear-gradient(90deg, #93c5fd 0%, #c084fc 50%, #f472b6 100%);
}

.map-page__fab{
    display: none;
}

@media (max-width: 767px){
    .header__nav{ display: none; }
    .nav__list{ gap: 0.5rem; }
    .nav__link{ font-size: 0.82rem; }
    .header__search-panel{ position: fixed; left: 0.75rem; right: 0.75rem; top: 4rem; width: auto; max-width: none; z-index: 45; }
    .hero-v2{ padding-top: 1.25rem; padding-bottom: 1rem; gap: var(--space-4); }
    .hero-v2__title{ font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .hero-v2__sub{ font-size: var(--font-size-13); max-width: 28ch; margin: 0 auto; }
    .hero-v2__form{ display: flex; flex-direction: row; align-items: stretch; width: 100%; max-width: 100%; }
    .hero-v2__control{ flex: 1 1 auto; min-width: 0; position: relative; }
    .hero-v2__submit span{ display: none; }
    .hero-v2__submit{ flex: 0 0 auto; width: auto; min-width: 3rem; padding: 0 1rem; border-radius: 0 14px 14px 0; }
    .hero-v2__input{ border-radius: 14px 0 0 14px; }
    .location-finder__control{ min-width: 0; }
    .location-finder__geo-suffix{ width: 2.2rem; height: 2.2rem; }
    .location-finder__geo-suffix svg{ width: 16px; height: 16px; flex-shrink: 0; }
    
    
    .hero-v2__weather-icon, .hero-v2__weather-icon .weather-icon--hero{ width: 2.8rem; height: 2.8rem; }
    
    
    
    .city-page__header{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem var(--space-2); margin-bottom: var(--space-2); }
    .city-page__title{ flex-basis: 100%; font-size: clamp(1.4rem, 6vw, 1.75rem); margin-bottom: 0; min-width: 0; overflow-wrap: break-word; order: 3; }
    .city-page__breadcrumb{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; order: 2; }
    .city-page__back{ flex-shrink: 0; min-height: 2.35rem; padding: 0.42rem 0.8rem; order: 1; }
    .city-sticky-nav{ top: 3.2rem; left: 0; right: 0; width: 100%; border-radius: 0; }
    .city-sticky-nav__inner{ padding: var(--space-2) var(--space-3); }
    .city-sticky-nav__summary{ align-items: flex-start; flex-direction: column; }
    .city-sticky-nav__links{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.1rem; }
    
    .weather-current{ padding: var(--space-4); }
    .weather-current__temp{ font-size: var(--font-display); }
    .home-map-widget{ padding: var(--space-3); }
    .home-map-widget__map{ min-height: 240px; }
    
    
    .map-page__overlay--left{
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        width: auto;
    }
    .map-page__glass{
        padding: var(--space-2) var(--space-3);
    }
    .map-page__intro{
        display: none;
    }
    .map-page__actions{
        display: none;
    }
    .map-page__sidebar{
        top: auto;
        right: 0.75rem;
        bottom: 5.25rem;
        left: 0.75rem;
        width: auto;
        max-height: 50svh;
        transform: translateY(calc(100% + 6rem));
    }
    .map-page__sidebar.is-open{
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
    }
    /* Mobile collapsed state: slide DOWN off-screen (panel is bottom-anchored here).
       Same belt-and-suspenders defense as desktop (opacity+visibility) — see desktop note. */
    .map-page__sidebar.is-collapsed,
    .map-page__sidebar:not(.is-open){
        transform: translateY(calc(100% + 6rem));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .map-page__legend{
        display: none;
    }
    .map-page__fab{
        position: absolute;
        right: 0.75rem;
        bottom: 0.75rem;
        display: grid;
        gap: var(--space-2);
    }
    .map-page__fab-btn{
        width: 3rem;
        height: 3rem;
        border: 1px solid var(--border);
        border-radius: 999px;
        background: var(--bg-card);
        color: var(--text-primary);
        font: inherit;
        font-size: 1.05rem;
        font-weight: 800;
        box-shadow: var(--shadow-md);
    }
}

@media (min-width: 1024px){
    .weather-current{ grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.7fr); }
    
}

@keyframes heroAmbientFloat{
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(0, -1.25%, 0) scale(1.02); }
}

@keyframes heroParticles{
    0% { transform: translateY(0); }
    100% { transform: translateY(-24px); }
}

@keyframes heroScrollBounce{
    0%, 100% { transform: rotate(-45deg) translateY(0); }
    50% { transform: rotate(-45deg) translateY(6px); }
}

@media (prefers-reduced-motion: reduce){
    html:focus-within{
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero__scroll-arrow,
    .weather-icon svg,
    .hero--fullscreen::before,
    .hero--fullscreen::after,
    .is-skeleton::after,
    ::view-transition-old(root),
    ::view-transition-new(root){
        animation: none !important;
    }

    
}


.page-alerts-overview .main{ display: block; }


.alerts-hero{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1.25rem; border-radius: var(--radius-section); border: 1px solid var(--border); margin-bottom: var(--section-gap); }
.alerts-hero--green{ background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 92%, rgba(16,185,129,1) 8%) 0%, var(--bg-card) 100%); }
.alerts-hero--yellow{ background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 90%, rgba(234,179,8,1) 10%) 0%, var(--bg-card) 100%); }
.alerts-hero--orange{ background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 90%, rgba(249,115,22,1) 10%) 0%, var(--bg-card) 100%); }
.alerts-hero--red{ background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 90%, rgba(239,68,68,1) 10%) 0%, var(--bg-card) 100%); }
.alerts-hero__status{ display: flex; align-items: flex-start; gap: 0.75rem; }
.alerts-hero__icon{ font-size: 1.5rem; line-height: 1; }
.alerts-hero__title{ font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; margin: 0 0 0.25rem; letter-spacing: -0.02em; color: var(--text-primary); }
.alerts-hero__summary{ margin: 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; max-width: 50ch; }
.alerts-hero__chips{ display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.alerts-hero__chip{ padding: 0.25rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: rgba(255,255,255,0.06); color: var(--text-secondary); }
.alerts-hero__chip--source{ color: var(--text-soft); }


.alerts-regions{ margin-bottom: var(--section-gap); }
.alerts-regions__heading{ font-size: 1.1rem; font-weight: 700; margin-bottom: 0.65rem; }
.alerts-regions__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 0.4rem; }
.alerts-region-btn{ display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.alerts-region-btn:hover{ border-color: var(--accent); background: var(--accent-soft); }
.alerts-region-btn.is-active{ border-color: rgba(59,130,246,0.4); background: var(--accent-soft); color: var(--accent-strong); }
.alerts-region-btn__name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alerts-region-btn__count{ flex-shrink: 0; min-width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border-radius: 999px; font-size: 0.7rem; font-weight: 800; background: rgba(234,179,8,0.2); color: #a16207; }
.alerts-region-btn--orange .alerts-region-btn__count{ background: rgba(249,115,22,0.2); color: #ea580c; }
.alerts-region-btn--red .alerts-region-btn__count{ background: rgba(239,68,68,0.2); color: #ef4444; }
.alerts-region-btn__ok{ flex-shrink: 0; font-size: 0.7rem; color: #16a34a; }


.alerts-cards-section{ margin-bottom: var(--section-gap); }


.alerts-empty{ display: grid; gap: 0.5rem; justify-items: center; text-align: center; padding: 2rem 1.5rem; border-radius: var(--radius-card); border: 1px dashed rgba(34,197,94,0.25); background: linear-gradient(145deg, rgba(220,252,231,0.06) 0%, var(--bg-card) 100%); }


.alerts-empty p{ color: var(--text-secondary); max-width: 40ch; }
.alerts-empty--filtered{ text-align: left; justify-items: start; margin-top: 0.75rem; }

@media (max-width: 600px){
    .alerts-regions__grid{ grid-template-columns: repeat(2, 1fr); }
    .alerts-hero{ flex-direction: column; }
}
.alerts-overview-page{ display: grid; gap: 1.5rem; max-width: 100%; overflow: hidden; }














.alerts-overview-page__panel,
.alerts-overview-page__map-card,
.alerts-overview-page__cards-card,
.alerts-history{ padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--shadow-sm); }



.alerts-status-banner{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 1rem; border-radius: var(--radius-section); border: 1px solid transparent; margin-top: 1rem; }

















.alerts-filter-chip.is-active{ border-color: rgba(59,130,246,0.38); box-shadow: inset 0 0 0 1px rgba(59,130,246,0.18); }








.alerts-region-map__svg{ width: 100%; height: auto; overflow: visible; }







.alerts-region-map__svg a:hover .alerts-region-map__path,
.alerts-region-map__svg a:focus-visible .alerts-region-map__path{ filter: brightness(1.3); stroke: rgba(255,255,255,0.7); stroke-width: 2.5; }
.alerts-region-map__svg a:hover .alerts-region-map__label,
.alerts-region-map__svg a:focus-visible .alerts-region-map__label{ fill: #fff; }
.alerts-region-map__svg a:focus-visible{ outline: none; }
.alerts-region-map__svg a{ outline: none; }


@keyframes regionFadeIn{ from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }







.alerts-region-map__tooltip.is-visible{ opacity: 1; }
.alerts-region-map__tooltip-name{ font-weight: 700; margin-bottom: 0.1rem; }
.alerts-region-map__tooltip-severity{ display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: var(--text-secondary); }
.alerts-region-map__tooltip-dot{ width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; }




















.alerts-cards{ display: grid; gap: 0.85rem; }
.alerts-card{ display: grid; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.alerts-card--yellow{ border-left: 6px solid #eab308; }
.alerts-card--orange{ border-left: 6px solid #f97316; }
.alerts-card--red{ border-left: 6px solid #ef4444; }
.alerts-card__header{ display: flex; justify-content: space-between; gap: 0.9rem; align-items: flex-start; }
.alerts-card__type{ display: flex; gap: 0.8rem; align-items: flex-start; }
.alert-type-icon{ display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 14px; background: rgba(59,130,246,0.1); color: var(--accent); flex: 0 0 auto; }
.alert-type-icon svg{ width: 1.35rem; height: 1.35rem; }
.alert-type-icon--storm{ background: rgba(99,102,241,0.12); color: #4f46e5; }
.alert-type-icon--rain{ background: rgba(59,130,246,0.12); color: #2563eb; }
.alert-type-icon--wind{ background: rgba(14,165,233,0.12); color: #0284c7; }
.alert-type-icon--snow{ background: rgba(125,211,252,0.14); color: #0ea5e9; }
.alert-type-icon--fog{ background: rgba(148,163,184,0.14); color: #64748b; }
.alert-type-icon--heat{ background: rgba(249,115,22,0.12); color: #ea580c; }
.alerts-card__sender,
.alerts-card__meta{ color: var(--text-secondary); font-size: 0.9rem; }
.alerts-card__meta{ display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; }
.alerts-card__description{ margin: 0; color: var(--text-primary); line-height: 1.55; }
.alerts-card__actions{ display: flex; flex-wrap: wrap; gap: 0.55rem; }


.alerts-empty-state{ display: grid; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-card); border: 1px dashed rgba(34,197,94,0.28); background: linear-gradient(145deg, rgba(220,252,231,0.08) 0%, var(--bg-card) 100%); color: var(--text-secondary); text-align: center; justify-items: center; }
.alerts-empty-state strong{ color: var(--text-primary); font-size: 1.1rem; }
.alerts-empty-state p{ max-width: 36rem; }



@keyframes alerts-safe-pulse{
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.22); }
    50% { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}

.alerts-history[open]{ display: grid; gap: 0.85rem; }
.alerts-history__summary{ cursor: pointer; font-size: 1.02rem; font-weight: 700; }
.alerts-history__list{ display: grid; gap: 0.7rem; }
.alerts-history__item{ display: grid; gap: 0.2rem; padding: 0.85rem 1rem; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); }
.alerts-history__item--yellow{ border-left: 5px solid #eab308; }
.alerts-history__item--orange{ border-left: 5px solid #f97316; }
.alerts-history__item--red{ border-left: 5px solid #ef4444; }
.alerts-history__empty{ margin: 0.8rem 0 0; color: var(--text-secondary); }



@media (max-width: 767px){
    .alerts-overview-page__hero,
    .alerts-overview-page__panel,
    .alerts-overview-page__map-card,
    .alerts-overview-page__cards-card,
    .alerts-history{ padding: 0.95rem; }
    .alerts-overview-page__section-header,
    .alerts-card__header,
    .alerts-status-banner{ grid-template-columns: 1fr; display: grid; }
    
    
    
    
}

.comparison-page__form{ display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.comparison-page__label{ font-size: 0.875rem; color: var(--text-secondary); }
.comparison-page__controls{ display: flex; gap: 0.75rem; flex-wrap: wrap; }
.comparison-page__input{ flex: 1 1 320px; min-height: 3rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); color: var(--text-primary); font: inherit; }
.comparison-page__hint{ margin: 0; color: var(--text-secondary); font-size: 0.875rem; }
.comparison-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.comparison-card{ display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.comparison-card__header{ display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.comparison-card__title{ margin: 0; font-size: 1.25rem; }
.comparison-card__title a{ color: inherit; text-decoration: none; }
.comparison-card__meta{ margin: 0.25rem 0 0; color: var(--text-secondary); font-size: 0.875rem; }
.comparison-card__reading{ text-align: right; }
.comparison-card__temp{ display: block; font-size: 2rem; line-height: 1; }
.comparison-card__condition{ color: var(--text-secondary); font-size: 0.875rem; }
.comparison-card__stats{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; margin: 0; }
.comparison-card__stats div{ display: grid; gap: 0.25rem; }
.comparison-card__stats dt{ color: var(--text-secondary); font-size: 0.8125rem; }
.comparison-card__stats dd{ margin: 0; font-weight: 700; }
.comparison-card__cta{ margin: 0; }
.comparison-page__empty{ padding: 1rem 1.25rem; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--bg-secondary); }

@media (max-width: 767px){
    .comparison-card__header{ display: grid; }
    .comparison-card__reading{ text-align: left; }
    .comparison-card__stats{ grid-template-columns: 1fr; }
}







.hero-weather__temp{
    font-size: clamp(4.5rem, 12vw, 9rem);
    line-height: 0.86;
    letter-spacing: -0.04em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.hero-weather__temp small{
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
    vertical-align: top;
    display: inline-block;
    margin-top: 0.55rem;
    margin-left: 0.1rem;
    letter-spacing: 0;
}

.weather-current__temp{
    font-size: clamp(5rem, 14vw, 9rem);
    line-height: 0.84;
    letter-spacing: -0.04em;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.weather-current__temp small{
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    vertical-align: top;
    display: inline-block;
    margin-top: 0.5rem;
    letter-spacing: 0;
}

@media (max-width: 479px){
    .weather-current__temp{ font-size: clamp(4.5rem, 26vw, 6.2rem); }
}

@media (min-width: 480px) and (max-width: 767px){
    .weather-current__temp{ font-size: clamp(5rem, 22vw, 7.5rem); }
}

@media (min-width: 768px) and (max-width: 959px){
    .weather-current__temp{ font-size: clamp(6rem, 12vw, 8.5rem); }
}


.weather-current{
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    backdrop-filter: none;
}

.weather-current{
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: var(--shadow-md);
}




.hero--homepage{
    background: linear-gradient(145deg, #0a1628 0%, #0e1420 40%, #0a1832 70%, #0c0e1a 100%);
}


.hero--homepage::before{
    content: "" !important;
    position: absolute;
    top: -20%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 70%);
    pointer-events: none;
    animation: none !important;
    border-radius: 50%;
    filter: blur(40px);
}
.hero--homepage::after{
    content: "" !important;
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 40%;
    height: 50%;
    background: radial-gradient(ellipse, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0) 70%);
    pointer-events: none;
    animation: none !important;
    border-radius: 50%;
    filter: blur(40px);
}

body[data-weather-theme="sunny"] .hero--homepage,
body[data-weather-theme="default"] .hero--homepage{
    background: linear-gradient(145deg, #0c1a2e 0%, #162038 40%, #1a1630 70%, #0e1220 100%);
}

body[data-weather-theme="rain"] .hero--homepage{
    background: linear-gradient(145deg, #0a1420 0%, #0e1a2e 45%, #101828 100%);
}

body[data-weather-theme="storm"] .hero--homepage{
    background: linear-gradient(145deg, #0e0a1e 0%, #1a1640 45%, #0c0e1a 100%);
}

body[data-weather-theme="snow"] .hero--homepage{
    background: linear-gradient(145deg, #0e1828 0%, #142030 45%, #0c1420 100%);
}

body[data-weather-theme="night"] .hero--homepage,
body[data-weather-theme="night-cloudy"] .hero--homepage{
    background: linear-gradient(145deg, #060c18 0%, #0e1828 55%, #08061a 100%);
}

body[data-weather-theme="cloudy"] .hero--homepage,
body[data-weather-theme="mist"] .hero--homepage{
    background: linear-gradient(145deg, #0c1018 0%, #121822 45%, #0e1420 100%);
}




.hero--homepage{
    min-height: auto;
    padding: 0;
    position: relative;
}

.hero-v2{
    position: relative;
    display: grid;
    gap: var(--space-8);
    max-width: 680px;
    margin: 0 auto;
    padding: clamp(2.5rem, 8vw, 5rem) var(--space-4) clamp(2rem, 6vw, 4rem);
    text-align: center;
}


.hero-v2__head{
    display: grid;
    gap: var(--space-3);
}

.hero-v2__title{
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--text-primary);
}

.hero-v2__sub{
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 48ch;
    margin: 0 auto;
}


.hero-v2__search{
    display: grid;
    gap: var(--space-3);
}

.hero-v2__catalog-meta{
    font-size: 0.88rem;
    color: var(--text-soft);
    margin: 0;
}

.hero-v2__form.hero-v2__form{
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.hero-v2__form .location-finder__select{
    flex: 1;
    min-width: 0;
    border-radius: 16px 0 0 16px;
    border-right: none;
}

.hero-v2__control{
    position: relative;
    flex: 1;
    min-width: 0;
}

.hero-v2__input{
    width: 100%;
    min-height: 3.5rem;
    padding: 0 3.2rem 0 1.25rem;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-right: none;
    border-radius: 16px 0 0 16px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    font-size: 1rem;
    font-family: inherit;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}

.hero-v2__input::placeholder{
    color: var(--text-secondary);
    font-weight: 400;
}

.hero-v2__input:focus{
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.hero-v2__submit{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.5rem;
    padding: 0 1.5rem;
    border-radius: 0 16px 16px 0;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid var(--accent);
    border-left: none;
    flex-shrink: 0;
}


.hero-v2__control .location-finder__results{
    z-index: 50;
}
.hero-v2__control .location-finder__list{
    background: rgba(15, 20, 30, 0.96);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
}


.hero-v2__quick{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
@media (max-width: 480px){
    .hero-v2__quick{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
    .hero-v2__quick-link{ justify-content: center; }
}

/* Hero shortcuts — 3 high-intent CTAs below search bar */
.hero-v2__shortcuts{ display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.75rem; }
.hero-v2__shortcut{ display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.95rem; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--bg-card) 85%, transparent); color: var(--text-primary); font-size: var(--font-size-13); font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease; }
.hero-v2__shortcut:hover{ background: var(--accent-soft); border-color: var(--accent-primary); transform: translateY(-1px); }
.hero-v2__shortcut-emoji{ font-size: 1.1rem; line-height: 1; }
.hero-v2__shortcut-label{ white-space: nowrap; }
@media (max-width: 480px){
    .hero-v2__shortcuts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .hero-v2__shortcut{ padding: 0.5rem 0.5rem; justify-content: center; font-size: var(--font-size-12); }
}

.hero-v2__quick-link{
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.hero-v2__quick-link:hover{
    text-decoration: none;
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(59, 130, 246, 0.1);
    color: var(--text-primary);
}

.hero-v2__quick-temp{
    color: var(--accent);
    font-weight: 800;
}










.hero-v2__weather-icon .weather-icon--hero{
    width: 3.5rem;
    height: 3.5rem;
}



























@media (min-width: 768px){
    .hero-v2{
        max-width: 720px;
    }

    

    .hero-v2__weather-icon,
    .hero-v2__weather-icon .weather-icon--hero{
        width: 4rem;
        height: 4rem;
    }

    
}


@media (min-width: 960px){
    .hero-v2{
        max-width: 800px;
        padding-top: clamp(4rem, 8vh, 6rem);
        padding-bottom: clamp(3rem, 6vh, 5rem);
        gap: var(--space-10);
    }

    .hero-v2__title{
        font-size: clamp(2.8rem, 4vw, 3.6rem);
    }

    

    .hero-v2__input{
        min-height: 3.75rem;
        font-size: 1.05rem;
        padding-left: 1.5rem;
    }

    .hero-v2__submit{
        min-height: 3.75rem;
        padding: 0 2rem;
        font-size: 1rem;
    }
}




.section-heading{
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
}


.section-heading::after{ display: none !important; }




.city-page__title{
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
    font-weight: 800;
}

.weather-current__condition{
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: 0.45rem 1.1rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent-strong);
    width: fit-content;
    letter-spacing: 0.01em;
}

@media (min-width: 768px){
    .weather-current__primary{ gap: 1.5rem; }
    .weather-current{ padding: 2rem 2.25rem; }

    
    .weather-current{
        display: grid;
        grid-template-columns: 1fr;
    }
    .weather-current__primary{
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    
}





.nearby--cities{
    background: var(--bg-card);
    border-color: var(--border);
}





.alerts-card{
    background: var(--bg-card);
    border-color: var(--border);
}


.map-page__layer-chip,
.map-page__action-btn,
.map-page__popular-chip,
.map-page__radar-toggle,
.map-page__sidebar-toggle{
    background: rgba(22, 27, 34, 0.92);
    color: var(--text-primary);
    border-color: var(--border);
}







.city-card{
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.city-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.11);
    text-decoration: none;
}

.city-card:hover{
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
}

.city-card__temp{
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
}





.region-pill{
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.region-pill:hover{
    transform: translateY(-2px);
    text-decoration: none;
}




.mobile-bottom-nav{ grid-template-columns: repeat(5, minmax(0, 1fr)); }







.hero__scroll-arrow{ animation: none; }
















.hero__eyebrow,
.hero__meta,
.location-finder__intent,
.location-finder__meta,
.location-finder__trust,
.location-finder__status{
    display: none !important;
}





.weather-current > .weather-widget__header{
    display: none;
}



.home-dashboard,
.home-map-widget,
.home-personalization,
.home-snapshot,
.home-overview,
.home-timeline,
.home-regions,
.home-trust-block{
    margin-top: var(--section-gap, 1.5rem);
}


.hero--homepage + .home-dashboard,
.hero--homepage + .home-map-widget,
.hero--homepage + .home-personalization,
.hero--homepage + section{
    margin-top: var(--space-4);
}




.section-heading{
    margin-bottom: var(--space-2);
}

.weather-widget__header{
    margin-bottom: var(--space-3);
}

.weather-widget__intro{
    margin-top: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-14);
    line-height: 1.5;
}




















.city-page__header{
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.city-page__back{
    font-size: var(--font-size-14);
    font-weight: 700;
    color: var(--accent-strong);
    text-decoration: none;
    white-space: nowrap;
}

.city-page__back:hover{ text-decoration: underline; }















@media (prefers-reduced-motion: reduce){
    .city-card,
    .city-card:hover,
    .region-pill:hover,
    .header__temp-badge,
    .header__temp-badge:hover{
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
    .hero-weather__temp{ animation: none !important; }
    .hero--homepage::before,
    .hero--homepage::after{ display: none !important; }
}





.section-heading{
    background: linear-gradient(135deg, #f0f4f8 0%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


.hero-weather__temp{
    text-shadow: 0 0 60px rgba(59, 130, 246, 0.2), 0 0 120px rgba(59, 130, 246, 0.08);
    animation: tempGlow 4s ease-in-out infinite alternate;
}

@keyframes tempGlow{
    0% { text-shadow: 0 0 40px rgba(59, 130, 246, 0.15), 0 0 80px rgba(59, 130, 246, 0.06); }
    100% { text-shadow: 0 0 60px rgba(59, 130, 246, 0.25), 0 0 120px rgba(59, 130, 246, 0.1); }
}


.weather-current__temp{
    text-shadow: 0 0 50px rgba(59, 130, 246, 0.15);
}


.home-overview-card,
.home-action-card,
.saved-location-card,
.home-dashboard-card,
.weather-viz-card,
.snapshot-card,
.alerts-card{
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-overview-card:hover,
.home-action-card:hover,
.weather-viz-card:hover,
.snapshot-card:hover,
.alerts-card:hover{
    transform: translateY(-3px);
    border-color: rgba(59, 130, 246, 0.2);
}


.weather-current__condition{
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.25);
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.08);
}





.city-card{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
}
.city-card:hover{
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34), var(--shadow-glow-blue);
}


.header{
    border-bottom-color: rgba(59, 130, 246, 0.08);
}


.footer a,
.footer__link{
    color: #93c5fd;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.footer__nav a,
.footer__network-link,
.footer__region-link,
.footer__cookie-button{
    text-decoration: none;
}


.info-page section,
.feature-page section{
    background: linear-gradient(145deg, #1a2332 0%, #141a24 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-card);
    padding: var(--card-padding);
    margin-bottom: var(--space-4);
}


.section-intro,
.weather-widget__intro{
    color: #b8c4d0;
}


.btn--primary,
.hero__search-submit{
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}
.btn--primary:hover,
.hero__search-submit:hover{
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3);
}





.scroll-top{
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #93c5fd;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}
.scroll-top:hover{
    background: rgba(59, 130, 246, 0.25);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
}



.wcard{
    display: grid;
    gap: 0;
    padding: 0;
    border-radius: var(--radius-section);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.97) 0%, rgba(20, 30, 55, 0.95) 50%, rgba(12, 20, 40, 0.98) 100%);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
    contain: layout;
    position: relative;
}
.wcard::before{
    content: '';
    position: absolute;
    top: -60px;
    left: -40px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.1) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.wcard > *{ position: relative; z-index: 1; }
.wcard--sunny::before{ background: radial-gradient(circle, rgba(251, 191, 36, 0.12) 0%, transparent 70%); }
.wcard--rainy::before{ background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%); }
.wcard--cloudy::before{ background: radial-gradient(circle, rgba(148, 163, 184, 0.08) 0%, transparent 70%); }
.wcard--snowy::before{ background: radial-gradient(circle, rgba(186, 230, 253, 0.1) 0%, transparent 70%); }


.wcard__meta{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1.5rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.wcard__date{ font-weight: 500; color: rgba(226, 232, 240, 0.9); letter-spacing: 0.01em; }
.wcard__clock{ font-variant-numeric: tabular-nums; font-weight: 800; color: #93c5fd; font-size: 0.88rem; }
.wcard__nameday{ color: var(--text-secondary); }
.wcard__nameday strong{ color: var(--text-primary); font-weight: 700; }

.wcard__holiday-badge{
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}


.wcard__body{
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.25rem;
}

@media (min-width: 640px){
    .wcard__body{
        grid-template-columns: 1.4fr 1fr;
        gap: 1.5rem;
        padding: 1.5rem 1.5rem 1.25rem;
    }
}


.wcard__primary{ display: grid; gap: 0.75rem; }

.wcard__hero-row{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wcard__icon{ flex-shrink: 0; }
.wcard__icon .weather-icon--hero{ width: clamp(4rem, 14vw, 6rem); height: clamp(4rem, 14vw, 6rem); filter: drop-shadow(0 4px 12px rgba(96, 165, 250, 0.15)); }

.wcard__hero-copy{ display: grid; gap: 0.1rem; }

.wcard__temp{
    font-size: clamp(4rem, 12vw, 5.5rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: #f0f4f8;
    text-shadow: 0 2px 20px rgba(255, 255, 255, 0.06);
}
.wcard__temp small{ font-size: 0.32em; font-weight: 600; color: var(--text-secondary); vertical-align: super; margin-left: 0.05em; }

.wcard__trend{
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.wcard__trend--rising{ color: #f87171; }
.wcard__trend--falling{ color: #60a5fa; }
.wcard__trend--steady{ color: var(--text-soft); }

.wcard__condition{
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #93c5fd;
    font-size: 0.92rem;
    font-weight: 700;
}

.wcard__sub-stats{
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

.wcard__pill{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.wcard__pill strong{ color: var(--text-primary); font-weight: 800; }
.wcard__pill svg{ opacity: 0.7; }
.wcard__pill--rain{ background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.wcard__pill--rain strong{ color: #bfdbfe; }

/* --- Nowcasting strip (minute-level precipitation) --- */
.nowcast{
    margin-top: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 360px;
}
.nowcast__head{
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
}
.nowcast__head svg{ flex: none; opacity: 0.85; }
.nowcast__eta{ font-weight: 600; opacity: 0.78; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowcast--starting .nowcast__head, .nowcast--raining .nowcast__head{ color: #bfdbfe; }
.nowcast--stopping .nowcast__head{ color: #a7f3d0; }
.nowcast--dry .nowcast__head{ color: var(--text-secondary); font-weight: 600; }
.nowcast--starting .nowcast__head svg, .nowcast--raining .nowcast__head svg{ color: #60a5fa; opacity: 1; }
.nowcast--stopping .nowcast__head svg{ color: #34d399; opacity: 1; }
.nowcast--dry .nowcast__head svg{ color: #fbbf24; }

.nowcast__bars{
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 26px;
    margin-top: 0.45rem;
}
.nowcast__bar{
    flex: 1 1 0;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: rgba(96, 165, 250, 0.9);
    transform-origin: bottom;
}
/* Intensity → height + tint (0 dry · 1 drizzle · 2 light · 3 moderate · 4 heavy) */
.nowcast__bar--l0{ height: 3px;  background: rgba(148, 163, 184, 0.35); }
.nowcast__bar--l1{ height: 28%;  background: rgba(96, 165, 250, 0.55); }
.nowcast__bar--l2{ height: 52%;  background: rgba(96, 165, 250, 0.8); }
.nowcast__bar--l3{ height: 76%;  background: rgba(59, 130, 246, 0.92); }
.nowcast__bar--l4{ height: 100%; background: rgba(37, 99, 235, 1); }
.nowcast--snow .nowcast__bar--l1{ background: rgba(186, 230, 253, 0.55); }
.nowcast--snow .nowcast__bar--l2{ background: rgba(186, 230, 253, 0.8); }
.nowcast--snow .nowcast__bar--l3{ background: rgba(125, 211, 252, 0.92); }
.nowcast--snow .nowcast__bar--l4{ background: rgba(56, 189, 248, 1); }

.nowcast__axis{
    display: flex;
    justify-content: space-between;
    margin-top: 0.2rem;
    font-size: 0.66rem;
    letter-spacing: 0.02em;
    color: var(--text-tertiary, rgba(148, 163, 184, 0.75));
    text-transform: uppercase;
}


.wcard__stats{
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
    align-self: start;
    min-width: 220px;
}

.wcard__stat{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.wcard__stat:last-child{ border-bottom: none; }

.wcard__stat dt{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.85);
}
.wcard__stat dt svg{ opacity: 0.6; }

.wcard__stat dd{
    font-size: 0.88rem;
    font-weight: 700;
    color: rgb(226, 232, 240);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wcard__wind-beaufort{ opacity: 0.6; font-weight: 400; font-size: 0.85em; }


.city-intent{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.5rem; }
.city-intent__item{ display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.7rem 0.75rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-muted); }
.city-intent__icon{ flex-shrink: 0; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 8px; }
.city-intent__icon--good{ background: rgba(34,197,94,0.12); color: #16a34a; }
.city-intent__icon--ok{ background: rgba(59,130,246,0.12); color: #3b82f6; }
.city-intent__icon--warn{ background: rgba(234,179,8,0.15); color: #a16207; }
.city-intent__icon--bad{ background: rgba(239,68,68,0.12); color: #ef4444; }
.city-intent__label{ font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); }
.city-intent__value{ font-size: 0.82rem; color: var(--text-primary); line-height: 1.4; }
@media (max-width: 480px){ .city-intent{ grid-template-columns: 1fr 1fr; } .city-intent__value{ font-size: 0.78rem; } }


.minizoo-snippet{ padding: 1.25rem; border-radius: var(--radius-section); border: 1px solid rgba(34,197,94,0.15); background: linear-gradient(145deg, color-mix(in srgb, var(--bg-card) 94%, rgba(34,197,94,1) 6%) 0%, var(--bg-card) 100%); margin-bottom: var(--section-gap); }
.minizoo-snippet__heading{ font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.4rem; }
.minizoo-snippet__heading svg{ color: #16a34a; }
.minizoo-snippet__text{ margin: 0 0 0.65rem; font-size: 0.88rem; line-height: 1.55; color: var(--text-secondary); }
.minizoo-snippet__footer{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.minizoo-snippet__cta{ font-size: 0.82rem; font-weight: 700; color: #16a34a; text-decoration: none; }
.minizoo-snippet__cta:hover{ text-decoration: underline; }
.minizoo-snippet__support{ font-size: 0.75rem; color: var(--text-soft); }


.city-climate-intro{ margin: 0; padding: 0.65rem 1rem; border-radius: 12px; background: var(--surface-muted); border-left: 3px solid var(--accent-soft); font-size: 0.85rem; line-height: 1.6; color: var(--text-secondary); }


.city-confidence-note{ font-size: 0.78rem; color: var(--text-soft); margin: 0 0 0.5rem; }


.forecast-confidence-row{ display: flex; justify-content: flex-end; margin-bottom: 0.25rem; }


.city-pill-row--mt{ margin-top: 0.65rem; }

.wcard__stat-sep{ color: var(--text-soft); margin: 0 0.15rem; font-weight: 400; }

.wcard__stat-badge{
    display: inline-flex;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.3rem;
}
.wcard__stat-badge--low{ background: rgba(34, 197, 94, 0.15); color: #86efac; }
.wcard__stat-badge--moderate{ background: rgba(234, 179, 8, 0.15); color: #fde047; }
.wcard__stat-badge--high{ background: rgba(249, 115, 22, 0.15); color: #fdba74; }
.wcard__stat-badge--very_high,
.wcard__stat-badge--extreme{ background: rgba(239, 68, 68, 0.15); color: #fca5a5; }


.wcard__footer{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0 0 20px 20px;
}

.wcard__mini{
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.09);
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
}
.wcard__mini-icon{ display: inline-flex; align-items: center; font-size: 0.85rem; }
.wcard__mini-icon svg{ opacity: 0.7; }
.wcard__mini-label{ font-weight: 600; }
.wcard__mini-value{ font-weight: 800; color: var(--text-primary); }

.wcard__mini--sun{ }
.wcard__mini--ok{ border-color: rgba(34, 197, 94, 0.2); background: rgba(34, 197, 94, 0.08); }
.wcard__mini--ok .wcard__mini-icon{ color: #86efac; }
.wcard__mini--ok .wcard__mini-label{ color: #86efac; }

.wcard__mini--alert-yellow{ border-color: rgba(234, 179, 8, 0.3); background: rgba(234, 179, 8, 0.1); }
.wcard__mini--alert-yellow .wcard__mini-icon,
.wcard__mini--alert-yellow .wcard__mini-value{ color: #fde047; }
.wcard__mini--alert-orange{ border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.1); }
.wcard__mini--alert-orange .wcard__mini-icon,
.wcard__mini--alert-orange .wcard__mini-value{ color: #fdba74; }
.wcard__mini--alert-red{ border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.1); }
.wcard__mini--alert-red .wcard__mini-icon,
.wcard__mini--alert-red .wcard__mini-value{ color: #fca5a5; }

a.wcard__mini:hover{ text-decoration: none; border-color: rgba(255, 255, 255, 0.15); }

.wcard__mini--aqi-good{ border-color: rgba(34, 197, 94, 0.2); }
.wcard__mini--aqi-good .wcard__mini-value{ color: #86efac; }
.wcard__mini--aqi-moderate{ border-color: rgba(234, 179, 8, 0.2); }
.wcard__mini--aqi-moderate .wcard__mini-value{ color: #fde047; }
.wcard__mini--aqi-poor{ border-color: rgba(239, 68, 68, 0.2); }
.wcard__mini--aqi-poor .wcard__mini-value{ color: #fca5a5; }


.wcard__mini-forecast{
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-left: auto;
}
.wcard__mini-forecast-label{
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-soft);
    white-space: nowrap;
}
.wcard__mini-forecast-items{ display: flex; gap: 0.75rem; }
.wcard__mini-forecast-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    line-height: 1.2;
}
.wcard__mini-forecast-item em{ font-style: normal; font-size: 0.7rem; color: var(--text-soft); font-weight: 600; }
.wcard__mini-forecast-item strong{ font-size: 0.85rem; font-weight: 800; color: var(--text-primary); }
.wcard__mini-forecast-item small{ font-size: 0.65rem; color: #60a5fa; font-weight: 700; }


.wcard__tip{
    padding: 0.6rem 1.25rem;
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.wcard__tip em{ font-style: normal; color: #fbbf24; font-weight: 700; }
.wcard__tip svg{ opacity: 0.7; vertical-align: -2px; }
.wcard__tip--warm{ border-left: 3px solid var(--accent); }
.wcard__tip--cool{ border-left: 3px solid #60a5fa; }
.wcard__tip-detail{ opacity: 0.7; margin-left: 0.3rem; }


.wcard__updated{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 1.25rem 0.75rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.wcard__updated svg{ opacity: 0.6; }





@media (max-width: 639px){
    .wcard__meta{ padding: 0.65rem 1rem; font-size: 0.78rem; }
    .wcard__body{ padding: 1rem; gap: 1rem; }
    .wcard__stats{ margin-top: 0.25rem; }
    .wcard__footer{ padding: 0.75rem 1rem; gap: 0.4rem; }
    .wcard__mini-forecast{ width: 100%; margin-left: 0; justify-content: space-between; }
    .wcard__tip{ padding: 0.5rem 1rem; }
    .wcard__updated{ padding: 0.4rem 1rem 0.65rem; }
}



.city-ai-brief{
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--bg-card) 94%, var(--accent) 6%);
}
.city-ai-brief__text{
    margin: 0;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--text-primary);
}
.city-ai-brief__disclosure{
    margin: 0.6rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
    font-style: italic;
}


.cond-details{ border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--bg-card); box-shadow: var(--shadow-sm); overflow: hidden; }
.cond-details__trigger{ display: flex; justify-content: space-between; align-items: center; padding: 1rem; font-size: 1rem; font-weight: 700; cursor: pointer; list-style: none; color: var(--text-primary); }
.cond-details__trigger::-webkit-details-marker{ display: none; }
.cond-details__trigger:hover{ background: var(--bg-soft); }
.cond-details__chevron{ font-size: 1.1rem; color: var(--text-secondary); transition: transform 0.2s; }
.cond-details[open] .cond-details__chevron{ content: "−"; }
.cond-details[open] .cond-details__trigger{ border-bottom: 1px solid var(--border); }
.cond-details .weather-widget{ border: none; border-radius: 0; box-shadow: none; }


.city-meteogram{ padding: 0.75rem 0.5rem; }
.city-meteogram .weather-widget__header{ padding: 0 0.5rem; }
.city-meteogram canvas{ width: 100% !important; height: 220px !important; }
@media (min-width: 768px){ .city-meteogram canvas{ height: 240px !important; } }


.forecast-confidence{ display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.forecast-confidence--high{ background: rgba(34,197,94,0.12); color: #16a34a; }
.forecast-confidence--medium{ background: rgba(234,179,8,0.12); color: #a16207; }
.forecast-confidence--low{ background: rgba(239,68,68,0.12); color: #ef4444; }




.city-pill-row{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.city-pill-row--mb{ margin-bottom: 0.5rem; }
.city-pill{ display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-primary); }
.city-pill--accent{ background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(59,130,246,0.15); }
.city-pill__detail{ opacity: 0.7; font-weight: 400; }
.city-pill--micro{ padding: 0.15rem 0.45rem; font-size: 0.7rem; background: rgba(255,255,255,0.06); color: var(--text-muted); border: none; }



.city-activity-row{ display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
.city-activity-card{ padding: 0.7rem 0.6rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-muted); text-align: center; display: grid; gap: 0.15rem; }
.city-activity-card__label{ font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; }
.city-activity-card__score{ font-size: 1.4rem; font-weight: 800; color: var(--text-muted); line-height: 1.2; }
.city-activity-card__score--high{ color: var(--accent); }
.city-activity-card__score--mid{ color: var(--text-primary); }
.city-activity-card__score--low{ color: var(--text-muted); }
.city-activity-card__score small{ font-size: 0.65rem; font-weight: 400; }
.city-activity-card__reason{ font-size: 0.68rem; color: var(--text-soft); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 480px){
    .city-activity-row{ grid-template-columns: repeat(3, 1fr); }
    .city-activity-card__reason{ display: none; }
    .city-activity-card{ padding: 0.55rem 0.4rem; }
    .city-activity-card__score{ font-size: 1.2rem; }
}


.city-pollen{ display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.city-pollen__badge{ width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.city-pollen__value{ font-size: 1.3rem; font-weight: 800; }
.city-pollen__label{ font-weight: 700; font-size: 0.95rem; }
.city-pollen__detail{ font-size: 0.8rem; color: var(--text-muted); }
.city-pollen__cats{ display: flex; gap: 0.3rem; margin-top: 0.25rem; }


.city-related-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem; }
.city-related-card{ display: block; padding: 0.65rem 0.8rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-muted); transition: border-color 0.15s; color: inherit; text-decoration: none; }
.city-related-card:hover{ border-color: var(--accent); text-decoration: none; }
.city-related-card__eyebrow{ font-size: 0.65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 0.15rem; }
.city-related-card__title{ font-weight: 700; font-size: 0.85rem; }
.city-related-card__desc{ font-size: 0.7rem; color: var(--text-muted); margin-top: 0.1rem; }


.city-faq-list{ display: grid; gap: 0.35rem; }
.city-faq-item{ border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); overflow: hidden; }
.city-faq-item summary{ padding: 0.7rem 0.9rem; cursor: pointer; font-weight: 700; font-size: 0.85rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.city-faq-item summary::-webkit-details-marker{ display: none; }
.city-faq-item summary::after{ content: "+"; font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; margin-left: 0.5rem; }
.city-faq-item[open] summary::after{ content: "−"; }
.city-faq-item__answer{ padding: 0 0.9rem 0.7rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; margin: 0; }


.city-share{ text-align: center; padding: 0.5rem 0; }
.city-share__btn{ display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-primary); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.city-share__btn:hover{ border-color: var(--accent); }



.knowledge-page{ max-width: 720px; margin: 0 auto; padding: 0 1rem 3rem; }
.knowledge-page__title{ font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 1.5rem; }

.prose{ line-height: 1.75; color: var(--text-primary); }
.prose p{ margin: 0 0 1.1rem; }
.prose h2{ font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 2rem 0 0.75rem; letter-spacing: -.02em; }
.prose h3{ font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 1.5rem 0 0.5rem; }
.prose ul, .prose ol{ margin: 0 0 1.1rem 1.5rem; padding: 0; }
.prose li{ margin-bottom: 0.4rem; }
.prose strong{ color: var(--text); font-weight: 700; }
.prose em{ font-style: italic; color: var(--text-secondary); }
.prose a{ color: var(--accent); text-decoration: underline; }
.prose a:hover{ color: var(--accent-strong); }



.city-climate{ margin: 2rem 0; padding: 1.25rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; }
.city-climate__chart{ overflow: hidden; }
.city-climate .section-heading{ margin-bottom: 1.25rem; }
.city-climate__label{ font-size: 0.78rem; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 0.5rem; }
.city-climate__label--precip{ margin-top: 1.25rem; }
.city-climate__bars{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 80px; min-width: 280px; }
.city-climate__col{ display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: flex-end; }
.city-climate__value{ font-size: 0.6rem; color: var(--text-secondary); line-height: 1; white-space: nowrap; }
.city-climate__bar{ width: 100%; border-radius: 3px 3px 0 0; min-height: 3px; transition: opacity 0.15s; }
.city-climate__bar--temp-cold{ background: #60a5fa; }
.city-climate__bar--temp-cool{ background: #34d399; }
.city-climate__bar--temp-warm{ background: #fbbf24; }
.city-climate__bar--temp-hot{ background: #f87171; }
.city-climate__bar--rain{ background: #60a5fa; opacity: 0.7; }
.city-climate__month{ font-size: 0.6rem; color: var(--text-soft); margin-top: 2px; }


.city-climate__col--current{ position: relative; }
.city-climate__col--current::before{
    content: '';
    position: absolute;
    inset: -6px -3px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 6px;
    pointer-events: none;
}
.city-climate__col--current .city-climate__bar{
    opacity: 1;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.35);
    position: relative;
}
.city-climate__col--current .city-climate__bar::after{
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #93c5fd;
    box-shadow: 0 0 6px rgba(147, 197, 253, 0.7);
}
/* Dim only the colored bar + value (visual emphasis), keep month label at
   full opacity — opacity:0.5 on the whole column blends #b0bfd0 down to
   ~#636e7b (3.29:1 vs #161c26, fails WCAG AA on 9.6px small text). */
.city-climate__bars:has(.city-climate__col--current) .city-climate__col:not(.city-climate__col--current) .city-climate__bar,
.city-climate__bars:has(.city-climate__col--current) .city-climate__col:not(.city-climate__col--current) .city-climate__value{
    opacity: 0.55;
}
.city-climate__col--current .city-climate__month{
    color: #93c5fd;
    font-weight: 800;
}
.city-climate__col--current .city-climate__value{
    color: #93c5fd;
    font-weight: 700;
}
.city-climate__col--current{ opacity: 1 !important; }
.city-climate__source{ font-size: 0.75rem; color: var(--text-soft); margin: 0.75rem 0 0; }

@media (max-width: 480px){
    .city-climate__value{ display: none; }
    .city-climate__bars{ height: 60px; gap: 2px; }
}

.knowledge-page__related{ margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.knowledge-page__back{ display: inline-flex; align-items: center; gap: .4rem; color: var(--accent); text-decoration: underline; font-weight: 600; font-size: .95rem; }
.knowledge-page__back:hover{ color: var(--accent-strong); }
.knowledge-page__cities{ margin-top: 2rem; }
.knowledge-page__cities-heading{ font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-secondary); }
.knowledge-page__glossary{ margin-top: 2rem; }
.knowledge-page__glossary-heading{ font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-secondary); }
.knowledge-page__more{ margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.knowledge-page__more-heading{ font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--text-secondary); }


.home-featured-articles{ padding: 2rem 0; }
.home-featured-articles__title{ font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; }
.home-featured-articles__all{ display: inline-block; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.home-featured-articles__all:hover{ text-decoration: underline; }
.region-knowledge{ padding: 1.25rem 0; }
.region-knowledge .section-heading{ display: flex; align-items: center; gap: 0.5rem; font-size: 1.15rem; font-weight: 700; margin: 0 0 0.85rem; }
.region-knowledge__grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.85rem; }
.region-knowledge__card{ display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-muted); text-decoration: none; color: var(--text-primary); transition: border-color 0.2s, transform 0.15s; }
.region-knowledge__card:hover{ border-color: var(--accent); transform: translateY(-2px); }
.region-knowledge__title{ font-size: 0.95rem; font-weight: 700; margin: 0; line-height: 1.3; color: var(--text-primary); }
.region-knowledge__desc{ font-size: 0.82rem; color: var(--text-soft); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.home-about{ padding: 1.5rem 0; margin-top: 1rem; border-top: 1px solid var(--border); }
.home-about__heading{ font-size: 1.1rem; font-weight: 700; margin: 0 0 0.75rem; color: var(--text-primary); }
.home-about__text{ font-size: 0.92rem; line-height: 1.65; color: var(--text-secondary); margin: 0 0 0.6rem; }
.home-about__features{ font-size: 0.88rem; line-height: 1.6; color: var(--text-muted); margin: 0; }
.knowledge-index__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.knowledge-index__card{ display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.25rem 1rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card, #fff); text-decoration: none; color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.15s, transform 0.15s; }
.knowledge-index__card:hover{ border-color: var(--accent); box-shadow: 0 4px 12px rgba(11,103,194,0.10); transform: translateY(-2px); }
.knowledge-index__card-title{ font-size: 1rem; font-weight: 700; margin: 0; line-height: 1.3; }
.knowledge-index__card-desc{ font-size: 0.85rem; color: var(--text-soft); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.is-dark .knowledge-index__card{ background: var(--bg-card, #1e293b); }
@media (max-width: 480px){ .knowledge-index__grid{ grid-template-columns: 1fr; } }


@media (max-width: 360px){
    .header__logo-text{ display: none; }
    .header__inner{ gap: var(--space-2); }
}


@media (max-width: 374px){
    .city-grid__list{ grid-template-columns: 1fr; }
}


.page-404-content{ padding: 3rem 1rem; max-width: 760px; margin: 0 auto; text-align: center; }
.page-404-content__icon{ font-size: 4rem; margin-bottom: 0.5rem; }
.page-404-content__title{ font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin: 0 0 0.5rem; }
.page-404-content__message{ font-size: 1rem; color: var(--text-secondary); margin: 0 0 2rem; line-height: 1.6; }
.page-404-content__actions{ display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: 2.5rem; }
.page-404-content__btn{ padding: 0.65rem 1.1rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-primary); text-decoration: none; font-size: 0.92rem; font-weight: 600; transition: border-color 0.15s, background 0.15s; }
.page-404-content__btn:hover{ border-color: var(--accent); background: var(--surface-hover, var(--surface-muted)); }
.page-404-content__btn--primary{ background: var(--accent); color: #fff; border-color: var(--accent); }
.page-404-content__btn--primary:hover{ opacity: 0.9; }
.page-404-content__cities{ margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.page-404-content__subtitle{ font-size: 1.1rem; font-weight: 700; margin: 0 0 1rem; }
.page-404-content__city-grid{ display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.page-404-content__city{ padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-muted); color: var(--text-primary); text-decoration: none; font-size: 0.88rem; font-weight: 600; transition: border-color 0.15s; }
.page-404-content__city:hover{ border-color: var(--accent); }
.page-404-content__city--suggestion{ background: var(--accent); color: #fff; border-color: var(--accent); }
.page-404-content__city--suggestion:hover{ opacity: .9; }
.page-404-content__search{ margin: 0 auto 1.5rem; max-width: 520px; }
.page-404-content__search-label{ display: block; font-size: .9rem; color: var(--text-secondary); margin-bottom: .5rem; }
.page-404-content__search-row{ display: flex; gap: .5rem; }
.page-404-content__search-row input{ flex: 1; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: 8px; font-size: 1rem; background: var(--bg-card, #fff); color: var(--text-primary); }
.page-404-content__search-row input:focus{ border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 1px; }
.page-404-content__suggestions{ margin: 0 auto 2rem; }

/* === Aesthetic polish v1 (May 2026) ============================================== */
/* Additive layer over existing component styles. Five subtle improvements:
   1) Glass surface on hero cards (city-card, snap__day, weather-widget where applicable)
   2) Soft hover lift on clickable cards
   3) Pulsing freshness dot on "Aktualizováno před X" lines
   4) Tabular numerals on temperature values (no digit-width jitter)
   5) Tightened letter-spacing on uppercase labels
   Rollback: delete this block. Nothing else needs changing. */

/* --- 1) Glass surface on top-level cards -------------------------------------- */
/* Replace solid surface fills with subtle translucent + backdrop-blur so cards
   feel like floating glass against the dark theme. Selectivity is intentional:
   we only touch container cards, not nested chips/pills (those would be too
   GPU-heavy and visually noisy). */
.city-card {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.snap__day {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
/* Section wrappers in city pages — only apply when they're not already
   contextual (e.g. .cond .weather-widget which uses its own treatment). */
.weather-widget {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: var(--radius-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* --- 2) Soft hover lift (override existing transforms with smoother feel) ----- */
.city-card:hover {
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), 0 0 24px rgba(96, 165, 250, 0.08);
    transform: translateY(-3px);
}
.snap__day:hover {
    border-color: rgba(96, 165, 250, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

/* --- 3) Pulsing freshness dot on "Aktualizováno před X min" lines ------------ */
.wcard__updated,
.snap__now-updated,
.module-status__updated {
    position: relative;
}
.wcard__updated::before,
.snap__now-updated::before,
.module-status__updated::before {
    content: '';
    display: inline-block;
    vertical-align: 0.05em;
    width: 6px;
    height: 6px;
    margin-right: 0.4em;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
    animation: polishFreshnessPulse 2.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes polishFreshnessPulse {
    0%, 100% { opacity: 0.7; box-shadow: 0 0 4px rgba(34, 197, 94, 0.5); }
    50% { opacity: 1; box-shadow: 0 0 10px rgba(34, 197, 94, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .wcard__updated::before,
    .snap__now-updated::before,
    .module-status__updated::before { animation: none; }
}

/* --- 4) Tabular numerals on temperature values --------------------------------- */
/* Prevents digit jitter (e.g. 15° vs 17° having different widths) so columns
   stay aligned and the page doesn't subtly shift when data refreshes. */
.wcard__temp,
.snap__now-temp,
.snap__day-temp,
.city-card__temp,
.daily-item__max,
.daily-item__min,
.hourly-item__temp,
.city-sticky-nav__temp,
.cond__value,
.metric__value,
[data-temp-value] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* --- 5) Letter-spacing tighten on uppercase labels ---------------------------- */
/* Where labels are visually uppercase (text-transform: uppercase) make sure
   they have intentional tracking. Most already have letter-spacing, but a few
   don't — this normalizes them. */
.section-heading,
.cond__summary-label,
.cond__metric-label,
.pollen-cat,
.hourly-item__hour,
.daily-item__day,
.snap__day-label,
.weather-widget__header h2,
.weather-widget__header .header-meta {
    letter-spacing: 0.04em;
}

/* === Aesthetic polish v2 (May 2026) ============================================== */
/* Three additions on top of polish v1:
   #6 Subtle radial gradient on body (depth without distracting from content)
   #4 Diagonal gradient on primary CTAs (premium feel)
   Extended polish to city.php-specific cards (glass + hover lift + tracking) */

/* --- #6 Radial body gradient ----------------------------------------------------
   Replaces the flat #0a0e14 base with a subtle ellipse "sky" at top fading to
   deep dark at bottom. The body[data-weather]::before overlay still paints
   weather-themed colors over this; we keep that intact (z-index: -1). */
body {
    background:
        radial-gradient(ellipse at top, #1a2845 0%, #0a0f1c 55%, #050811 100%);
}

/* --- #4 Gradient on primary CTAs ------------------------------------------------
   Diagonal sky-blue → indigo gradient. Apply to .btn--primary specifically;
   nested-context overrides remain in place. */
.btn--primary {
    background: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.btn--primary:hover,
.btn--primary:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(99, 102, 241, 0.32);
    filter: brightness(1.05);
}
.btn--primary:active {
    transform: translateY(0);
    filter: brightness(0.97);
}

/* --- City detail: glass surface on city.php components ------------------------- */
.cond__card,
.city-activity-card,
.city-activity-tile,
.city-related-card,
.daily-item {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(148, 163, 184, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* --- City detail: hover lift on clickable cards -------------------------------- */
.city-related-card:hover,
.city-activity-tile:hover,
.daily-item:hover {
    transform: translateY(-2px);
    border-color: rgba(148, 163, 184, 0.28);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 16px rgba(96, 165, 250, 0.06);
}
.hourly-item--card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* --- City detail: extend tracking to more uppercase labels --------------------- */
.city-activity-tile__label,
.city-related-card__eyebrow,
.city-pollen__label,
.city-region-context__heading,
.alert-item__severity,
.weather-alerts__heading {
    letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────────────────────────────────
   Polish v3 — Touch target a11y (2026-05-22, Sprint 5 batch 4)
   ──────────────────────────────────────────────────────────────────────

   Multiple audits (v5, post-Sprint-5 audit) measured 33-35% of <a>/<button>
   on city pages below 44×44 px (WCAG 2.5.5 AAA recommendation, Apple HIG).
   Specific verified violators:
     - breadcrumb__item a    → 23 px high (inline text, no padding)
     - city-activity-teasers__weekend-link → 21 px ("Víkendový výhled →")
     - knowledge-page__back  → 38 px (5 px short)

   Fix: extend each to inline-flex with min-height: 44px + small padding.
   Visual layout shifts mildly (rows slightly taller), but tap area becomes
   thumb-friendly. Hover/focus states preserved.

   Bottom navigation (.bottom-nav__item) already ≥44px — not touched.
   Rollback = delete this block. */

.breadcrumb__item a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
}
.city-activity-teasers__weekend-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 8px;
}
.knowledge-page__back {
    min-height: 44px;
    padding: 10px 6px;
}

/* ──────────────────────────────────────────────────────────────────────
   Polish v4 — Push opt-in toast (2026-05-22, Sprint 6 batch 1)
   ──────────────────────────────────────────────────────────────────────
   Floating bottom-right toast (desktop) / bottom-stretch (mobile) shown
   only via JS after ≥2 visits + permission==='default' + not dismissed.
   Glassmorphism surface to match polish v1 aesthetic.
   Rollback = delete this block + revert push-opt-in-banner.php include
   in base.php + remove JS gating block in main.js. */
.push-opt-in {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    max-width: 22rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "body close" "actions actions";
    gap: 0.6rem 0.5rem;
    padding: 0.95rem 1rem;
    border-radius: 16px;
    background: rgba(20, 28, 42, 0.92);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
    color: #f0f4f8;
    font-size: 0.92rem;
    animation: push-opt-in-fade-in 240ms ease-out;
}
@keyframes push-opt-in-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.push-opt-in[hidden] { display: none; }
.push-opt-in__body { grid-area: body; display: grid; gap: 0.2rem; }
.push-opt-in__title { font-size: 1rem; font-weight: 700; }
.push-opt-in__copy { margin: 0; font-size: 0.85rem; color: rgba(240, 244, 248, 0.78); line-height: 1.4; }
.push-opt-in__close {
    grid-area: close;
    width: 28px; height: 28px;
    border: 0; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); color: #f0f4f8;
    font-size: 1.1rem; line-height: 1;
    cursor: pointer; transition: background 0.15s;
}
.push-opt-in__close:hover { background: rgba(255, 255, 255, 0.16); }
.push-opt-in__actions { grid-area: actions; display: flex; gap: 0.5rem; }
.push-opt-in__cta { min-height: 44px; padding: 10px 14px; font-size: 0.92rem; }
@media (max-width: 480px) {
    .push-opt-in {
        right: 0.75rem;
        left: 0.75rem;
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px) + 60px); /* clear bottom nav */
        max-width: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .push-opt-in { animation: none; }
}


/* ============================================================
   Destination page (/zahranici/{slug}) — added 2026-05-23
   Scoped under .destination so it can't bleed into other pages.
   Rollback = delete from this comment to EOF.
   ============================================================ */
.destination-hero {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 1.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(56,189,248,.08), rgba(99,102,241,.08));
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 1rem;
    backdrop-filter: blur(14px);
}
.destination-hero__head {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.destination-hero__flag {
    flex: 0 0 auto;
    width: 48px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.destination-hero__title-block { flex: 1 1 auto; min-width: 0; }
.destination-hero__title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    line-height: 1.15;
    margin: 0 0 .25rem;
}
.destination-hero__meta {
    margin: 0;
    color: rgba(226,232,240,.78);
    font-size: .95rem;
    letter-spacing: .01em;
}
.destination-hero__strip {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: baseline;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.05);
}
.destination-hero__clock,
.destination-hero__flight {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.destination-hero__clock-label,
.destination-hero__flight-label {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(148,163,184,.85);
}
.destination-hero__clock-value,
.destination-hero__flight-value {
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
    color: #e2e8f0;
}
.destination-hero__clock-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Side-by-side current weather + local info */
.destination-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 720px) {
    .destination-grid { grid-template-columns: 1fr; }
}
.destination-current,
.destination-local-info {
    padding: 1.25rem 1.25rem 1.5rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: .85rem;
    backdrop-filter: blur(12px);
}
.destination-local-info__heading {
    margin: 0 0 1rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(148,163,184,.9);
}
.destination-local-info__list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    margin: 0;
}
.destination-local-info__row {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: .75rem;
    align-items: baseline;
}
.destination-local-info__row dt {
    color: rgba(148,163,184,.85);
    font-size: .85rem;
}
.destination-local-info__row dd {
    margin: 0;
    color: #e2e8f0;
    font-size: .95rem;
}
.destination-local-info__row--rate dd strong {
    font-variant-numeric: tabular-nums;
    color: #5eead4;  /* teal — subtle "value" cue */
}
.destination-local-info__rate-source {
    display: block;
    margin-top: .15rem;
    color: rgba(148,163,184,.6);
    font-size: .72rem;
}

/* Nearby destinations */
.destination-nearby__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.destination-nearby__card {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .9rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .65rem;
    color: #e2e8f0;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.destination-nearby__card:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.05);
    box-shadow: 0 6px 16px -8px rgba(56,189,248,.4);
}
.destination-nearby__flag {
    flex: 0 0 auto;
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}
.destination-nearby__name {
    flex: 1 1 auto;
    font-size: .92rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.destination-nearby__icon { flex: 0 0 auto; }
/* SVG size constraint — without this `.weather-icon--nearby svg` renders at
 * intrinsic ~400px height (bug spotted 2026-05-24 on /zahranici/larnaka,
 * the Pafos card looked like a giant empty box dominated by the cloud icon).
 * Mirrors what `.destination-similar__icon svg` already does for the
 * SimilarDestinations cards a few hundred lines below. */
.destination-nearby__icon svg,
.weather-icon--nearby { width: 24px; height: 24px; display: block; }
.destination-nearby__temp {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #fbbf24;
}

/* "Kam za teplem právě teď" homepage section — added 2026-05-23 */
.home-hottest { padding: 2.5rem 0 1.5rem; }
.home-hottest__intro {
    color: rgba(148,163,184,.85);
    max-width: 60ch;
    margin: 0 0 1.5rem;
}
.home-hottest__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.home-hottest-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem 1.25rem 1.4rem;
    background: linear-gradient(135deg, rgba(251,191,36,.10), rgba(244,114,182,.08));
    border: 1px solid rgba(251,191,36,.18);
    border-radius: .9rem;
    color: #f1f5f9;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.home-hottest-card:hover {
    transform: translateY(-2px);
    border-color: rgba(251,191,36,.4);
    box-shadow: 0 12px 28px -16px rgba(251,191,36,.55);
}
.home-hottest-card__head {
    display: flex;
    align-items: center;
    gap: .6rem;
}
.home-hottest-card__flag {
    flex: 0 0 auto;
    width: 32px;
    height: 22px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.home-hottest-card__name {
    font-weight: 600;
    font-size: 1.05rem;
}
.home-hottest-card__temp {
    font-size: 2.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--temp-warm);
    line-height: 1;
}
.home-hottest-card__temp span {
    font-size: 1.1rem;
    font-weight: 500;
    margin-left: .15rem;
    color: rgba(251,191,36,.85);
}
.home-hottest-card__sub {
    font-size: .82rem;
    color: rgba(148,163,184,.85);
}

/* ============================================================
   ClimateChart — destination page monthly normals (2026-05-23)
   Pure CSS column chart (no JS, no CLS).
   - Temperature bars: vertical gradient cold(blue) → warm(orange)
   - Sea-temperature: small dot marker overlaid on the temp bar
   - Precipitation: separate row below with bar + value
   ============================================================ */
.destination-climate {
    margin-bottom: 2rem;
}
.destination-climate__intro {
    color: rgba(148,163,184,.8);
    margin: .5rem 0 1.5rem;
    font-size: .95rem;
}
.destination-climate__best {
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: linear-gradient(135deg, rgba(251,191,36,.08), rgba(244,114,182,.06));
    border-left: 3px solid #fbbf24;
    border-radius: .35rem;
    color: #f1f5f9;
    font-size: .95rem;
}
.destination-climate__source {
    margin-top: .5rem;
    font-size: .75rem;
    color: rgba(148,163,184,.6);
}
.climate-chart {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: .35rem;
    padding: 1rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .85rem;
}
.climate-chart__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    border-radius: .35rem;
    transition: background .15s ease;
    cursor: default;
}
.climate-chart__column:hover {
    background: rgba(255,255,255,.04);
}
.climate-chart__column--best {
    background: rgba(251,191,36,.08);
}
.climate-chart__column--best:hover {
    background: rgba(251,191,36,.14);
}
.climate-chart__max,
.climate-chart__min {
    font-variant-numeric: tabular-nums;
    font-size: .8rem;
    color: #e2e8f0;
    line-height: 1;
}
.climate-chart__max { color: #fbbf24; font-weight: 600; }
.climate-chart__min { color: #93c5fd; }
.climate-chart__plot {
    position: relative;
    width: 100%;
    height: 140px;
    background: linear-gradient(to bottom,
        rgba(255,255,255,.02) 0%,
        rgba(255,255,255,.02) 100%);
    border-radius: .25rem;
    margin: .15rem 0;
}
.climate-chart__bar {
    position: absolute;
    left: 25%;
    right: 25%;
    background: linear-gradient(to top,
        #38bdf8 0%,    /* cold (~5°C and below) */
        #4ade80 30%,   /* mild (~15°C) */
        #fbbf24 65%,   /* warm (~25°C) */
        #f97316 100%); /* hot (~35°C+) */
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.climate-chart__sea-marker {
    position: absolute;
    left: 50%;
    width: 9px;
    height: 9px;
    margin-left: -4.5px;
    margin-bottom: -4.5px;
    border-radius: 50%;
    background: #0ea5e9;
    border: 1.5px solid #0c4a6e;
    box-shadow: 0 0 0 2px rgba(14,165,233,.25);
}
.climate-chart__precip-cell {
    position: relative;
    width: 100%;
    height: 40px;
    margin-top: .15rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.climate-chart__precip-bar {
    position: absolute;
    bottom: 12px;
    left: 30%;
    right: 30%;
    background: linear-gradient(to top, rgba(56,189,248,.5), rgba(56,189,248,.15));
    border-radius: 2px;
    min-height: 1px;
}
.climate-chart__precip-value {
    position: relative;
    z-index: 1;
    font-size: .65rem;
    color: rgba(148,163,184,.85);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    margin-top: auto;
}
.climate-chart__month {
    font-size: .72rem;
    text-transform: lowercase;
    letter-spacing: .03em;
    color: rgba(148,163,184,.85);
    line-height: 1;
}
.climate-chart__column--best .climate-chart__month {
    color: #fbbf24;
    font-weight: 600;
}
.climate-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
    font-size: .8rem;
    color: rgba(148,163,184,.85);
}
.climate-chart__legend li { display: flex; align-items: center; gap: .35rem; }
.climate-chart__legend-swatch {
    display: inline-block;
    width: 14px;
    height: 8px;
    border-radius: 2px;
}
.climate-chart__legend-swatch--temp {
    background: linear-gradient(to right, #38bdf8, #fbbf24, #f97316);
}
.climate-chart__legend-swatch--precip {
    background: rgba(56,189,248,.5);
}
.climate-chart__legend-swatch--sea {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0ea5e9;
    border: 1.5px solid #0c4a6e;
}

/* Mobile: tighter grid + smaller chart */
@media (max-width: 640px) {
    .climate-chart {
        gap: .15rem;
        padding: .5rem .25rem;
    }
    .climate-chart__plot { height: 110px; }
    .climate-chart__max,
    .climate-chart__min { font-size: .7rem; }
    .climate-chart__month { font-size: .65rem; }
    .climate-chart__precip-cell { height: 30px; }
}

/* ============================================================
   TravelTips — destination page (2026-05-23)
   Hand-written Czech content: summary paragraph + best time + bullets.
   ============================================================ */
.destination-tips {
    margin-bottom: 2.5rem;
    padding: 1.5rem 1.5rem 1.75rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: .9rem;
    backdrop-filter: blur(12px);
}
.destination-tips__summary {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #e2e8f0;
    margin: 0 0 1.5rem;
    max-width: 70ch;
}
.destination-tips__subheading {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(148,163,184,.9);
    margin: 1.25rem 0 .5rem;
}
.destination-tips__best-time p {
    margin: 0;
    padding: .85rem 1rem;
    background: linear-gradient(135deg, rgba(56,189,248,.06), rgba(99,102,241,.06));
    border-left: 3px solid #38bdf8;
    border-radius: .35rem;
    color: #e2e8f0;
    line-height: 1.55;
    max-width: 75ch;
}
.destination-tips__list {
    list-style: none;
    padding: 0;
    margin: .35rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.destination-tips__list li {
    padding: .55rem .85rem .55rem 1.65rem;
    color: #e2e8f0;
    line-height: 1.55;
    position: relative;
    max-width: 75ch;
}
.destination-tips__list li::before {
    content: '→';
    position: absolute;
    left: .35rem;
    top: .55rem;
    color: #38bdf8;
    font-weight: 600;
}
.destination-tips__list strong {
    color: #fbbf24;
    margin-right: .2rem;
}

/* ============================================================
   Destination HourlyForecast — 12-hour strip (2026-05-23)
   Simpler than the city-page hourly (no virtual scroll, no meteogram) —
   destinations are typically scanned, not deeply explored.
   ============================================================ */
.destination-hourly {
    margin-bottom: 2rem;
}
.destination-hourly__list {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .35rem;
    list-style: none;
    padding: 1rem;
    margin: .5rem 0 0;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .85rem;
    overflow-x: auto;
}
.destination-hourly__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .6rem .35rem;
    border-radius: .45rem;
    background: rgba(255,255,255,.03);
    transition: background .15s ease;
    min-width: 0;
}
.destination-hourly__item:hover {
    background: rgba(255,255,255,.05);
}
.destination-hourly__time {
    font-size: .78rem;
    color: rgba(148,163,184,.85);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.destination-hourly__icon { line-height: 1; }
.destination-hourly__icon svg {
    width: 28px;
    height: 28px;
}
.destination-hourly__temp {
    font-weight: 600;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
}
.destination-hourly__pop {
    font-size: .72rem;
    color: #38bdf8;
    font-variant-numeric: tabular-nums;
}
.destination-hourly__pop--zero {
    color: rgba(148,163,184,.5);
}

/* On narrow screens fall back to horizontal scroll (more readable than
 * cramming 12 cards into 360 px). */
@media (max-width: 720px) {
    .destination-hourly__list {
        grid-template-columns: repeat(12, 70px);
        gap: .25rem;
        padding: .75rem .5rem;
    }
    .destination-hourly__item { padding: .5rem .25rem; }
    .destination-hourly__icon svg { width: 24px; height: 24px; }
}

/* ============================================================
   Homepage top-categories — companion lists below "Kam za teplem"
   Two compact 3-item rankings: warmest sea (beach) + coldest (cool-off).
   ============================================================ */
.home-top-compact-wrap { padding: .5rem 0 2rem; }
.home-top-compact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 1rem;
}
@media (max-width: 720px) {
    .home-top-compact__grid { grid-template-columns: 1fr; }
}
.home-top-compact {
    padding: 1rem 1.25rem 1.25rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .85rem;
}
.home-top-compact--sea {
    border-color: rgba(14,165,233,.2);
    background: linear-gradient(135deg, rgba(14,165,233,.06), rgba(56,189,248,.04));
}
.home-top-compact--cold {
    border-color: rgba(96,165,250,.2);
    background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(96,165,250,.04));
}
.home-top-compact__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .25rem;
    font-size: 1rem;
    color: #f1f5f9;
}
.home-top-compact__title svg {
    width: 18px;
    height: 18px;
    color: inherit;
}
.home-top-compact--sea .home-top-compact__title svg { color: #0ea5e9; }
.home-top-compact--cold .home-top-compact__title svg { color: #60a5fa; }
.home-top-compact__intro {
    margin: 0 0 .85rem;
    font-size: .8rem;
    color: rgba(148,163,184,.78);
}
.home-top-compact__list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.home-top-compact__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: .45rem;
    background: rgba(0,0,0,.18);
    color: #e2e8f0;
    text-decoration: none;
    transition: background .12s ease;
}
.home-top-compact__row:hover {
    background: rgba(0,0,0,.3);
}
.home-top-compact__flag {
    flex: 0 0 auto;
    width: 22px;
    height: 14px;
    border-radius: 2px;
    object-fit: cover;
}
.home-top-compact__name {
    flex: 1 1 auto;
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-top-compact__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #fbbf24;
}
.home-top-compact--sea .home-top-compact__value { color: #38bdf8; }
.home-top-compact--cold .home-top-compact__value { color: #93c5fd; }

/* ============================================================
   SimilarDestinations — destination page (2026-05-23)
   Richer than NearbyCities: shows country + region + current weather.
   ============================================================ */
.destination-similar { margin-bottom: 2rem; }
.destination-similar__intro {
    color: rgba(148,163,184,.8);
    margin: .35rem 0 1rem;
    font-size: .95rem;
}
.destination-similar__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}
.destination-similar__card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .65rem;
    color: #e2e8f0;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.destination-similar__card:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,.05);
    border-color: rgba(56,189,248,.25);
}
.destination-similar__flag {
    flex: 0 0 auto;
    width: 32px;
    height: 22px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.destination-similar__body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.destination-similar__name {
    font-weight: 600;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.destination-similar__meta {
    font-size: .72rem;
    color: rgba(148,163,184,.78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.destination-similar__weather {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
}
.destination-similar__temp {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #fbbf24;
}
.destination-similar__icon svg { width: 20px; height: 20px; }

/* ============================================================
   /zahranici hub page (2026-05-23)
   ============================================================ */
.destinations-hub__hero {
    text-align: center;
    padding: 2rem 1rem 2.5rem;
}
.destinations-hub__title {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin: 0 0 .5rem;
}
.destinations-hub__lead {
    color: rgba(148,163,184,.85);
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.6;
}
.destinations-hub__country-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
}
.hub-country-card {
    padding: 1rem 1.1rem 1.1rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .75rem;
    transition: border-color .15s ease;
}
.hub-country-card:hover { border-color: rgba(56,189,248,.3); }
.hub-country-card__head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: .85rem;
}
.hub-country-card__flag {
    flex: 0 0 auto;
    width: 48px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.hub-country-card__title-block { min-width: 0; }
.hub-country-card__title {
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.2;
}
.hub-country-card__title-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(56,189,248,.3);
    transition: border-color .15s ease, color .15s ease;
}
.hub-country-card__title-link:hover {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}
.hub-country-card__more {
    display: inline-block;
    margin-top: .5rem;
    padding: .35rem .65rem;
    font-size: .8rem;
    font-weight: 600;
    color: #7dd3fc;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.18);
    border-radius: .5rem;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease;
}
.hub-country-card__more:hover {
    background: rgba(56,189,248,.18);
    border-color: rgba(56,189,248,.35);
}
.hub-country-card__count {
    margin: .15rem 0 0;
    color: rgba(148,163,184,.78);
    font-size: .8rem;
}
.hub-country-card__cities {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.hub-country-card__city {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: .4rem .6rem;
    border-radius: .35rem;
    color: #e2e8f0;
    text-decoration: none;
    font-size: .92rem;
    transition: background .12s ease;
}
.hub-country-card__city:hover { background: rgba(255,255,255,.04); }
.hub-country-card__city-temp {
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* A-Z list — flat grid */
.destinations-hub__az-intro {
    color: rgba(148,163,184,.8);
    margin: .35rem 0 1rem;
}
.destinations-hub__az-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0 2.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .35rem;
}
.destinations-hub__az-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem;
    padding: .55rem .75rem;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: .45rem;
    color: #e2e8f0;
    text-decoration: none;
    transition: background .12s ease;
}
.destinations-hub__az-card:hover {
    background: rgba(255,255,255,.05);
}
.destinations-hub__az-flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
}
.destinations-hub__az-name {
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.destinations-hub__az-country {
    display: none;  /* hidden on narrow — country is implied by flag */
}
@media (min-width: 720px) {
    .destinations-hub__az-card {
        grid-template-columns: auto 1fr auto auto;
    }
    .destinations-hub__az-country {
        display: inline;
        font-size: .72rem;
        color: rgba(148,163,184,.7);
    }
}
.destinations-hub__az-temp {
    font-variant-numeric: tabular-nums;
    color: #fbbf24;
    font-weight: 600;
}
.destinations-hub__seo {
    max-width: 65ch;
    margin: 2rem 0;
    color: rgba(226,232,240,.85);
    line-height: 1.7;
}
.destinations-hub__seo h2 {
    margin-top: 1.5rem;
    color: #f1f5f9;
}

/* ============================================================
   Destination long-form SEO content + FAQ (2026-05-23)
   Reading-optimized — max-width capped, generous line-height.
   ============================================================ */
.destination-seo-content {
    max-width: 70ch;
    margin: 2rem 0;
    color: rgba(226,232,240,.85);
    line-height: 1.75;
}
.destination-seo-content__h2 {
    margin: 2rem 0 .5rem;
    color: #f1f5f9;
    font-size: 1.35rem;
}
.destination-seo-content p {
    margin: 0 0 1rem;
}
.destination-seo-content p strong {
    color: #fbbf24;
}
.destination-faq {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .5rem;
}
.destination-faq__item {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .5rem;
    padding: .15rem .25rem;
    transition: border-color .15s ease;
}
.destination-faq__item[open] {
    border-color: rgba(56,189,248,.25);
}
.destination-faq__question {
    cursor: pointer;
    padding: .85rem 1rem;
    color: #e2e8f0;
    font-weight: 600;
    list-style: none;
    position: relative;
    padding-right: 2.5rem;
}
.destination-faq__question::-webkit-details-marker { display: none; }
.destination-faq__question::after {
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #38bdf8;
    font-size: 1.4rem;
    font-weight: 300;
    transition: transform .2s ease;
}
.destination-faq__item[open] .destination-faq__question::after {
    content: '−';
}
.destination-faq__answer {
    margin: 0;
    padding: 0 1rem 1rem;
    color: rgba(226,232,240,.85);
    line-height: 1.65;
}

/* Cookie consent — class-based hide layer (2026-05-23, added on top of [hidden] selector).
 * Pre-paint script in <head> sets `has-cookie-consent` on <html> before paint, so the
 * banner never flashes for returning visitors even on edge cases where the SSR cookie
 * check missed (cleared cookies + retained localStorage, TWA isolation, etc.). */
html.has-cookie-consent #cookie-banner { display: none !important; }

/* Trending searches — homepage tag cloud (2026-05-23) */
.home-trending { padding: 1.5rem 0 2rem; }
.home-trending__intro {
    color: rgba(148,163,184,.85);
    max-width: 60ch;
    margin: 0 0 1rem;
    font-size: .92rem;
}
.home-trending__cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .65rem;
    align-items: center;
}
.home-trending__chip {
    display: inline-block;
    padding: .35rem .85rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;
    color: #e2e8f0;
    text-decoration: none;
    line-height: 1.4;
    transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.home-trending__chip:hover {
    background: rgba(56,189,248,.15);
    border-color: rgba(56,189,248,.4);
    transform: translateY(-1px);
}
/* Jednotná velikost čipů — různá písma působila jako chyba vykreslení.
   Popularitu vyjadřuje pořadí + jemná opacita, ne velikost. */
.home-trending__chip--size-1 { font-size: .9rem; opacity: .78; }
.home-trending__chip--size-2 { font-size: .9rem; opacity: .85; }
.home-trending__chip--size-3 { font-size: .9rem; opacity: .92; }
.home-trending__chip--size-4 { font-size: .9rem; }
.home-trending__chip--size-5 { font-size: .9rem; font-weight: 600; }

/* Destination details strip — humidity / pressure / visibility / sunrise / sunset
 * Goes right under the current-weather block in the hero (2026-05-24, P2 audit). */
.destination-details {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}
.destination-details__item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .55rem .85rem;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: .45rem;
    min-width: 5rem;
}
.destination-details__label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(148,163,184,.85);
}
.destination-details__value {
    font-size: .98rem;
    color: #e2e8f0;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ============================================================
   "Procházet zahraniční destinace" CTA card on homepage (2026-05-24)
   Glass surface + flag strip + arrow — bridges TopHottest to /zahranici hub.
   ============================================================ */
.home-zahranici-cta {
    padding: 1rem 0 2.5rem;
}
.home-zahranici-cta__card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg,
        rgba(56,189,248,.10) 0%,
        rgba(99,102,241,.08) 50%,
        rgba(236,72,153,.08) 100%);
    border: 1px solid rgba(56,189,248,.20);
    border-radius: 1rem;
    color: #f1f5f9;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    backdrop-filter: blur(14px);
}
.home-zahranici-cta__card:hover {
    transform: translateY(-2px);
    border-color: rgba(56,189,248,.5);
    box-shadow: 0 12px 32px -12px rgba(56,189,248,.4);
}
.home-zahranici-cta__flags {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 60px;
    gap: .25rem;
    align-content: flex-start;
}
.home-zahranici-cta__flags img {
    width: 40px;
    height: 26px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.home-zahranici-cta__body {
    min-width: 0;
}
.home-zahranici-cta__title {
    margin: 0 0 .25rem;
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    line-height: 1.2;
    color: #f1f5f9;
}
.home-zahranici-cta__sub {
    margin: 0;
    color: rgba(226,232,240,.78);
    font-size: .92rem;
    line-height: 1.45;
}
.home-zahranici-cta__arrow {
    font-size: 2rem;
    color: #38bdf8;
    font-weight: 300;
    transition: transform .2s ease;
}
.home-zahranici-cta__card:hover .home-zahranici-cta__arrow {
    transform: translateX(4px);
}

/* Mobile: stack vertically, flags become horizontal row */
@media (max-width: 640px) {
    .home-zahranici-cta__card {
        grid-template-columns: 1fr;
        gap: .85rem;
        padding: 1rem 1.25rem;
        text-align: left;
    }
    .home-zahranici-cta__flags {
        flex-direction: row;
        max-height: none;
        flex-wrap: wrap;
    }
    .home-zahranici-cta__flags img {
        width: 32px;
        height: 22px;
    }
    .home-zahranici-cta__arrow {
        align-self: flex-end;
        margin-top: -.5rem;
    }
}

/* ────────────────────────────────────────────────────────────
   Per-country destination hub — /zahranici/spanelsko, /zahranici/italie, …
   Phase 6 (2026-05-24). Captures the "počasí Španělsko"
   intent that's 10× larger than any single-city query.
   ─────────────────────────────────────────────────────────── */
.dest-country { max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; }

.dest-country__hero {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1.25rem;
}
.dest-country__hero-flag {
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: .5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    flex-shrink: 0;
}
.dest-country__hero-text { min-width: 0; flex: 1; }
.dest-country__title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.15;
    margin: 0 0 .5rem;
    font-weight: 700;
}
.dest-country__lead {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 1.25rem;
    max-width: 60ch;
}
.dest-country__hero-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.dest-country__hero-stat {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.dest-country__hero-stat-label {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.dest-country__hero-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #38bdf8;
}

.dest-country__intro {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 1rem;
}
.dest-country__intro .section-heading {
    margin-top: 0;
    margin-bottom: .75rem;
    font-size: 1.25rem;
}
.dest-country__intro-body {
    line-height: 1.65;
    color: rgba(255, 255, 255, .85);
    margin: 0;
}

.dest-country__cities { margin-bottom: 2.5rem; }
.dest-country__type-heading {
    font-size: 1.1rem;
    margin: 1.5rem 0 .75rem;
    color: rgba(255, 255, 255, .9);
    font-weight: 600;
    letter-spacing: .01em;
}
.dest-country__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .85rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.dest-country__card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1.1rem;
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: .85rem;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dest-country__card:hover {
    transform: translateY(-2px);
    border-color: rgba(56, 189, 248, .35);
    box-shadow: 0 8px 28px -8px rgba(56, 189, 248, .25);
}
.dest-country__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
}
.dest-country__card-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}
.dest-country__card-temp {
    font-size: 1.35rem;
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.dest-country__card-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .58);
    flex-wrap: wrap;
}
.dest-country__card-region { letter-spacing: .01em; }
.dest-country__card-coastal {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .35rem;
    background: rgba(56, 189, 248, .15);
    color: #7dd3fc;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dest-country__card-desc {
    font-size: .85rem;
    color: rgba(255, 255, 255, .65);
    text-transform: lowercase;
}

.dest-country__related {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 255, 255, .05);
    border-radius: 1rem;
}
.dest-country__related .section-heading {
    margin-top: 0;
    margin-bottom: .5rem;
    font-size: 1.25rem;
}
.dest-country__related-intro {
    color: rgba(255, 255, 255, .68);
    font-size: .92rem;
    margin: 0 0 1.25rem;
}
.dest-country__related-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .65rem;
}
.dest-country__related-card {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .75rem;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.dest-country__related-card:hover {
    transform: translateX(2px);
    border-color: rgba(56, 189, 248, .35);
    background: rgba(56, 189, 248, .06);
}
.dest-country__related-flag {
    width: 48px;
    height: 32px;
    object-fit: cover;
    border-radius: .35rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.dest-country__related-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1;
}
.dest-country__related-name {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}
.dest-country__related-count {
    font-size: .76rem;
    color: rgba(255, 255, 255, .55);
}
.dest-country__related-arrow {
    color: rgba(56, 189, 248, .65);
    font-size: 1.1rem;
    transition: transform .18s ease;
}
.dest-country__related-card:hover .dest-country__related-arrow {
    transform: translateX(3px);
    color: #38bdf8;
}

.dest-country__back { text-align: center; margin-top: 2rem; }
.dest-country__back-link {
    display: inline-block;
    padding: .65rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .65rem;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    font-size: .92rem;
    transition: background .15s ease, border-color .15s ease;
}
.dest-country__back-link:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .2);
}

@media (max-width: 720px) {
    .dest-country { padding: 1.25rem .75rem; }
    .dest-country__hero {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.25rem;
        gap: 1rem;
    }
    .dest-country__hero-flag { width: 72px; height: 48px; }
    .dest-country__hero-stat-value { font-size: 1.25rem; }
    .dest-country__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Sun position bar — heliotachymetr on city detail
   Added 2026-05-28. Shows where the sun sits between sunrise
   and sunset for the city; switches to "next sunrise in Xh"
   countdown at night. Day-aware via .sun-bar--day / --night.
   ============================================================ */
.sun-bar {
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.25rem 1.1rem;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}
.sun-bar__track {
    position: relative;
    height: 38px;
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 14px;
}
.sun-bar--day .sun-bar__track {
    background: linear-gradient(90deg,
        #4a3a82 0%,        /* dawn indigo */
        #f4a06a 15%,       /* sunrise orange */
        #f9d77a 35%,       /* morning gold */
        #87ceeb 55%,       /* noon sky-blue */
        #f9d77a 75%,       /* afternoon gold */
        #f4a06a 85%,       /* sunset orange */
        #4a3a82 100%);     /* dusk indigo */
}
.sun-bar--night .sun-bar__track {
    background: linear-gradient(90deg,
        #1a1f3a 0%,
        #2d3461 50%,
        #1a1f3a 100%);
}
.sun-bar__edge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.sun-bar__edge--end { margin-left: auto; }
.sun-bar__edge-time {
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.sun-bar__sun {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 1.5rem;
    filter: drop-shadow(0 0 6px rgba(255, 220, 100, 0.7));
    transition: left 600ms ease-out;
    pointer-events: none;
}
.sun-bar__moon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    font-size: 1.4rem;
    filter: drop-shadow(0 0 6px rgba(150, 180, 220, 0.5));
    pointer-events: none;
}
.sun-bar__caption {
    margin: 0.7rem 0 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    font-variant-numeric: tabular-nums;
}
.sun-bar--night .sun-bar__caption {
    color: rgba(180, 200, 230, 0.85);
}
@media (max-width: 480px) {
    .sun-bar { padding: 0.85rem 1rem 0.95rem; margin: 0.85rem 0 1rem; }
    .sun-bar__track { height: 32px; padding: 0 10px; }
    .sun-bar__edge { font-size: 1rem; gap: 0.3rem; }
    .sun-bar__edge-time { font-size: 0.78rem; }
    .sun-bar__sun { font-size: 1.3rem; }
    .sun-bar__caption { font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sun-bar__sun { transition: none; }
}

/* Solar noon marker — subtle tick at 50 % on the day variant. */
.sun-bar--day .sun-bar__noon-tick {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 2px;
    height: 50%;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    pointer-events: none;
}

/* ============================================================
   WOW EFFECT #1 — Animated weather background
   ------------------------------------------------------------
   Layered over body[data-weather]::before (the static gradient).
   Gated by body.fx-weather-background (config/ui_effects.php).
   Decorative only · z-index:-1 (above gradient, below content) ·
   animates transform/opacity only · hidden under reduced-motion ·
   lighter on mobile. Which elements show is decided by the
   server-set body[data-weather="…"] bucket → no JS, no flash,
   and it re-themes live when main.js swaps the bucket on search.
   Rollback = delete this whole block + config flag.
   ============================================================ */
.weather-fx { display: none; }
body.fx-weather-background .weather-fx {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: layout paint;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0) 90%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0) 90%);
}
/* Every layer hidden by default; per-bucket rules below opt them in. */
.weather-fx > * { display: none; }

/* — Sun (clear-day / partly-day): soft glow, slow breathing — */
.weather-fx__sun {
    position: absolute;
    top: -7%;
    right: 9%;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,221,150,0.55) 0%, rgba(255,201,92,0.22) 42%, rgba(255,201,92,0) 70%);
    filter: blur(3px);
    will-change: transform, opacity;
    animation: fx-sun-breathe 9s ease-in-out infinite;
}
@keyframes fx-sun-breathe {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.85; }
    50%      { transform: scale(1.08) translateY(6px); opacity: 1; }
}

/* — Clouds (partly / cloudy / precip): blurred drifting ellipses — */
.weather-fx__cloud {
    position: absolute;
    border-radius: 100px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.07) 58%, rgba(255,255,255,0) 75%);
    filter: blur(6px);
    will-change: transform;
}
.weather-fx__cloud--1 { top: 8%;  width: 320px; height: 90px;  animation: fx-cloud-drift 60s linear infinite; }
.weather-fx__cloud--2 { top: 19%; width: 240px; height: 70px;  animation: fx-cloud-drift 92s linear infinite; animation-delay: -30s; opacity: 0.82; }
.weather-fx__cloud--3 { top: 33%; width: 400px; height: 112px; animation: fx-cloud-drift 124s linear infinite; animation-delay: -60s; opacity: 0.6; }
@keyframes fx-cloud-drift {
    from { transform: translate3d(-44vw, 0, 0); }
    to   { transform: translate3d(122vw, 0, 0); }
}

/* — Stars (night buckets): tiny twinkling dots — */
.weather-fx__stars { position: absolute; inset: 0; }
.weather-fx__star {
    position: absolute;
    width: var(--fx-size, 2px);
    height: var(--fx-size, 2px);
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    box-shadow: 0 0 4px rgba(255,255,255,0.55);
    opacity: 0.4;
    will-change: transform, opacity;
    animation-name: fx-twinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes fx-twinkle {
    0%, 100% { opacity: 0.22; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.15); }
}

/* — Rain (rain / rain-light / storm): thin falling streaks — */
.weather-fx__rain { position: absolute; inset: 0; }
.weather-fx__drop {
    position: absolute;
    top: 0;
    width: 1.5px;
    height: var(--fx-len, 18px);
    background: linear-gradient(to bottom, rgba(174,205,255,0) 0%, rgba(174,205,255,0.55) 100%);
    will-change: transform;
    animation-name: fx-rain;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes fx-rain {
    from { transform: translate3d(0, -22vh, 0); }
    to   { transform: translate3d(2vw, 122vh, 0); }
}

/* — Snow (snow): slow drifting flakes — */
.weather-fx__snow { position: absolute; inset: 0; }
.weather-fx__flake {
    position: absolute;
    top: 0;
    width: var(--fx-size, 4px);
    height: var(--fx-size, 4px);
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 0 3px rgba(255,255,255,0.5);
    will-change: transform;
    animation-name: fx-snow;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes fx-snow {
    from { transform: translate3d(0, -12vh, 0); }
    to   { transform: translate3d(var(--fx-drift, 0px), 112vh, 0); }
}

/* — Fog: wide soft bands swaying horizontally — */
.weather-fx__fog {
    position: absolute;
    left: -20%;
    width: 140%;
    height: 120px;
    background: linear-gradient(90deg, rgba(200,210,222,0) 0%, rgba(200,210,222,0.11) 50%, rgba(200,210,222,0) 100%);
    filter: blur(8px);
    opacity: 0.7;
    will-change: transform;
}
.weather-fx__fog--1 { top: 24%; animation: fx-fog 26s ease-in-out infinite; }
.weather-fx__fog--2 { top: 44%; animation: fx-fog 38s ease-in-out infinite reverse; animation-delay: -10s; }
@keyframes fx-fog {
    0%, 100% { transform: translate3d(-6%, 0, 0); }
    50%      { transform: translate3d(6%, 0, 0); }
}

/* — Lightning flash (thunderstorm): brief rare opacity pulse — */
.weather-fx__flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(220,230,255,0.5) 0%, rgba(220,230,255,0) 60%);
    opacity: 0;
    will-change: opacity;
    animation: fx-flash 9s ease-out infinite;
}
@keyframes fx-flash {
    0%, 92%, 100% { opacity: 0; }
    93% { opacity: 0.9; }
    94% { opacity: 0.2; }
    95% { opacity: 0.7; }
    96% { opacity: 0; }
}

/* — Per-bucket visibility map (server-set body[data-weather]) — */
body[data-weather="clear-day"]    .weather-fx__sun,
body[data-weather="partly-day"]   .weather-fx__sun { display: block; }

body[data-weather="clear-night"]  .weather-fx__stars,
body[data-weather="partly-night"] .weather-fx__stars,
body[data-weather="cloudy-night"] .weather-fx__stars { display: block; }
body[data-weather="cloudy-night"] .weather-fx__stars { opacity: 0.5; }

body[data-weather="partly-day"]   .weather-fx__cloud--1,
body[data-weather="partly-day"]   .weather-fx__cloud--2,
body[data-weather="partly-night"] .weather-fx__cloud--1,
body[data-weather="partly-night"] .weather-fx__cloud--2,
body[data-weather="cloudy-day"]   .weather-fx__cloud,
body[data-weather="cloudy-night"] .weather-fx__cloud,
body[data-weather="rain"]         .weather-fx__cloud,
body[data-weather="rain-light"]   .weather-fx__cloud,
body[data-weather="snow"]         .weather-fx__cloud,
body[data-weather="thunderstorm"] .weather-fx__cloud { display: block; }

body[data-weather="rain"]         .weather-fx__rain,
body[data-weather="rain-light"]   .weather-fx__rain,
body[data-weather="thunderstorm"] .weather-fx__rain { display: block; }
body[data-weather="rain-light"]   .weather-fx__rain { opacity: 0.5; }

body[data-weather="snow"]         .weather-fx__snow { display: block; }

body[data-weather="fog"]          .weather-fx__fog { display: block; }

body[data-weather="thunderstorm"] .weather-fx__flash { display: block; }

/* — Mobile: lighter. Drop the big slow cloud + thin out particles. — */
@media (max-width: 767px) {
    body.fx-weather-background .weather-fx__cloud--3 { display: none !important; }
    body.fx-weather-background .weather-fx__sun { width: 150px; height: 150px; }
    .weather-fx__drop:nth-child(2n),
    .weather-fx__flake:nth-child(2n),
    .weather-fx__star:nth-child(3n) { display: none; }
}

/* — Reduced motion: drop the animated layer entirely; static gradient stays. — */
@media (prefers-reduced-motion: reduce) {
    body.fx-weather-background .weather-fx { display: none !important; }
}

/* ============================================================================
   WOW EFFECT #2 — staggered card reveal on viewport entry
   ----------------------------------------------------------------------------
   The count-up of numbers is already handled in JS (animateTemperatures runs
   on load + after every search/unit change). This block adds only the
   fade-in + slide-up of cards as they scroll into view.

   Safety contract:
     - Gated by body.fx-count-up (the #2 feature flag).
     - The hiding class .fx-reveal is added by JS only → if JS never runs,
       content is always visible (no FOUC, no SEO hidden-content risk).
     - JS skips any card already inside the viewport on first paint, so this
       can never delay LCP or cause CLS on the initial render.
     - Animates transform + opacity only (GPU compositing).
     - prefers-reduced-motion → JS no-ops AND CSS forces everything visible.
   ========================================================================== */
body.fx-count-up .fx-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: calc(var(--fx-i, 0) * 60ms);
    will-change: opacity, transform;
}

body.fx-count-up .fx-reveal.is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    body.fx-count-up .fx-reveal,
    body.fx-count-up .fx-reveal.is-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================================================
   WOW EFFECT #4 — subtle 3D tilt + glass light-edge on cards
   ----------------------------------------------------------------------------
   The base glass surface (blur + translucency) already ships in the always-on
   polish layer. This adds the pointer-driven 3D tilt (max ~6°) and a light
   top-edge highlight while the card is being hovered.

   Safety contract:
     - Gated by body.fx-card-tilt (the #4 feature flag).
     - The .fx-tiltable marker class is added by JS only.
     - JS skips touch / coarse-pointer devices (mouse-only effect) and bails
       on prefers-reduced-motion; CSS also forces transform:none in both
       cases as belt-and-braces.
     - Animates transform only (GPU). Transition timing is managed inline by
       JS (snappy follow on move, eased return on leave).
   ========================================================================== */
body.fx-card-tilt .fx-tiltable {
    transform-style: preserve-3d;
    will-change: transform;
}

body.fx-card-tilt .fx-tiltable.fx-tilt-active {
    z-index: 2;
    box-shadow:
        0 18px 42px -20px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    body.fx-card-tilt .fx-tiltable { transform: none !important; }
}

@media (hover: none), (pointer: coarse) {
    body.fx-card-tilt .fx-tiltable { transform: none !important; }
}

/* ============================================================================
   WOW EFFECT #6 — microinteractions
   ----------------------------------------------------------------------------
   Search-field focus glow, button ripple, smooth city/region chip hovers, and
   a gently breathing weather icon. All gated by body.fx-microinteractions.
   GPU-only (transform/opacity/box-shadow). prefers-reduced-motion strips every
   moving piece at the bottom of the block.
   ========================================================================== */

/* — Search-field focus glow — */
body.fx-microinteractions .location-finder__input,
body.fx-microinteractions .header__search-input,
body.fx-microinteractions .glossary-index__search-input {
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
body.fx-microinteractions .location-finder__input:focus,
body.fx-microinteractions .header__search-input:focus,
body.fx-microinteractions .glossary-index__search-input:focus {
    border-color: rgba(56, 189, 248, 0.7);
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.32),
        0 10px 30px -12px rgba(56, 189, 248, 0.55);
}

/* — Smooth chip hovers — */
body.fx-microinteractions .home-trending__chip,
body.fx-microinteractions .home-personalization__intent-chip,
body.fx-microinteractions .home-map-widget__layer-chip,
body.fx-microinteractions .user-preferences__chip,
body.fx-microinteractions .alerts-hero__chip,
body.fx-microinteractions .glossary-index__cat-chip,
body.fx-microinteractions .hero-v2__quick-link {
    transition:
        transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}
body.fx-microinteractions .home-trending__chip:hover,
body.fx-microinteractions .home-personalization__intent-chip:hover,
body.fx-microinteractions .home-map-widget__layer-chip:hover,
body.fx-microinteractions .user-preferences__chip:hover,
body.fx-microinteractions .alerts-hero__chip:hover,
body.fx-microinteractions .glossary-index__cat-chip:hover,
body.fx-microinteractions .hero-v2__quick-link:hover {
    transform: translateY(-2px);
}

/* — Button ripple. Ripple node injected by JS on click. — */
body.fx-microinteractions .btn {
    position: relative;
    overflow: hidden;
}
.fx-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    will-change: transform, opacity;
    animation: fx-ripple 0.6s ease-out forwards;
}
@keyframes fx-ripple {
    to { transform: scale(2.4); opacity: 0; }
}

/* — Gently breathing weather icon — */
@keyframes fx-icon-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
body.fx-microinteractions .wcard__icon {
    transform-origin: center;
    will-change: transform;
    animation: fx-icon-breathe 5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.fx-microinteractions .wcard__icon { animation: none !important; }
    body.fx-microinteractions .fx-ripple { display: none !important; }
    body.fx-microinteractions .home-trending__chip:hover,
    body.fx-microinteractions .home-personalization__intent-chip:hover,
    body.fx-microinteractions .home-map-widget__layer-chip:hover,
    body.fx-microinteractions .user-preferences__chip:hover,
    body.fx-microinteractions .alerts-hero__chip:hover,
    body.fx-microinteractions .glossary-index__cat-chip:hover,
    body.fx-microinteractions .hero-v2__quick-link:hover {
        transform: none !important;
    }
}

/* ============================================================================
   WOW EFFECT #3 — lightweight particle layer over the hero (canvas)
   ----------------------------------------------------------------------------
   Heaviest effect → OFF by default (config/ui_effects.php: particles=false).
   The .fx-particles-host marker + the canvas are added by JS only, so this
   block does nothing unless JS ran AND found a hero. The position:relative on
   sibling hero children carries no layout offset — it only lifts them above
   the canvas in the stacking order so content stays readable + clickable.
   ========================================================================== */
body.fx-particles .fx-particles-host {
    position: relative;
}
body.fx-particles .fx-particles-host > .fx-particles-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
body.fx-particles .fx-particles-host > *:not(.fx-particles-canvas) {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    body.fx-particles .fx-particles-canvas { display: none !important; }
}

/* --- Teplotní tóny: finální override (2026-06-10) ---------------------------
   Drženo na KONCI souboru, aby tónová třída vždy přebila dřívější fixní barvy
   (.city-card__temp accent, .home-hottest-card__temp apod.). */
.temp--freezing{ color: var(--temp-freezing); }
.temp--cold{ color: var(--temp-cold); }
.temp--mild{ color: var(--temp-mild); }
.temp--warm{ color: var(--temp-warm); }
.temp--hot{ color: var(--temp-hot); }

/* --- Pylové úrovně — barva nese závažnost (sdílí paletu s teplotní škálou) --- */
.pollen-level--none{ color: var(--text-muted); }
.pollen-level--low{ color: var(--temp-mild); }
.pollen-level--moderate{ color: #c9c356; }
.pollen-level--high{ color: var(--temp-warm); }
.pollen-level--very_high{ color: var(--temp-hot); }

/* --- "Právě teď" superlativy pod hero (fáze B, 2026-06-10) ------------------ */
.home-now{ padding: 0.4rem 0 0.2rem; }
.home-now__inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; }
.home-now__kicker{ font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-right: 0.2rem; }
.home-now__chip{ display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-strong, rgba(148,163,184,0.08)); color: var(--text-primary); font-size: 0.88rem; text-decoration: none; }
a.home-now__chip:hover{ border-color: var(--accent); text-decoration: none; }
.home-now__k{ color: var(--text-muted); font-size: 0.8rem; }
.home-now__t{ font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 640px){
    /* Mobil: žádný skrytý vodorovný scroll (ořezával chipy). Kicker na vlastní
       řádek, chipy zalomené na střed přes celou šířku — vše vidět najednou. */
    .home-now{ padding: 0.5rem 0 0.4rem; }
    .home-now__inner{ flex-wrap: wrap; justify-content: center; gap: 0.45rem; }
    .home-now__kicker{ flex-basis: 100%; text-align: center; margin: 0 0 0.15rem; }
    .home-now__chip{ font-size: 0.85rem; padding: 0.4rem 0.8rem; }
}

/* --- Štítek kategorie na kartách Průvodce (fáze B) -------------------------- */
.knowledge-card-tag{ display: inline-block; width: fit-content; margin-bottom: 0.35rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: rgba(96,165,250,0.14); color: var(--accent-strong, #93c5fd); }
.knowledge-card-tag--safety{ background: rgba(232,84,84,0.16); color: #f0a3a3; }
.knowledge-card-tag--health{ background: rgba(70,192,139,0.16); color: #8fdcbb; }
.knowledge-card-tag--activity{ background: rgba(240,153,59,0.16); color: #f3c08a; }
.knowledge-card-tag--records{ background: rgba(159,182,249,0.18); color: #c0cffb; }

/* --- Moje lokality: odebrání jako kompaktní ikona (fáze B) ------------------ */
.saved-location-card{ position: relative; }
.saved-location-card__action--icon{ position: absolute; top: 0.8rem; right: 3.35rem; width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; padding: 0; border-radius: 50%; font-size: 0.95rem; line-height: 1; }
.saved-location-card__actions:has(.saved-location-card__action--icon){ display: contents; }

/* --- Mapa krajů s teplotami (fáze C, 2026-06-10) ---------------------------- */
.region-temp-map-wrap{ max-width: 620px; margin: 0 auto 1rem; }
.region-temp-map{ display: block; width: 100%; height: auto; }
.region-temp-map__shape{ fill: rgba(148,163,184,0.10); stroke: rgba(148,163,184,0.45); stroke-width: 1.4; stroke-linejoin: round; transition: fill 0.15s ease, stroke 0.15s ease; }
.region-temp-map a{ cursor: pointer; outline: none; }
.region-temp-map a:hover .region-temp-map__shape,
.region-temp-map a:focus-visible .region-temp-map__shape{ stroke: var(--accent); stroke-width: 2.2; fill: rgba(96,165,250,0.22); }
/* Teplota na mapě = vždy bílá s plným tmavým halo, čitelná na každé výplni.
   paint-order:stroke vykreslí obrys POD výplň, takže halo nezužuje glyf. */
.region-temp-map__temp{ font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; pointer-events: none; fill: #fff; stroke: #0a1018; stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; letter-spacing: -0.02em; }
/* Teplotní tón už NEbarví číslo (splývalo s výplní) — případné dřívější
   temp--* na elementu přebijeme zpět na bílou. */
.region-temp-map__temp.temp--freezing,
.region-temp-map__temp.temp--cold,
.region-temp-map__temp.temp--mild,
.region-temp-map__temp.temp--warm,
.region-temp-map__temp.temp--hot{ fill: #fff; }
.rtm-fill--freezing{ fill: rgba(159,182,249,0.20); }
.rtm-fill--cold{ fill: rgba(90,178,247,0.18); }
.rtm-fill--mild{ fill: rgba(70,192,139,0.16); }
.rtm-fill--warm{ fill: rgba(240,153,59,0.18); }
.rtm-fill--hot{ fill: rgba(232,84,84,0.20); }
.region-temp-map a:hover .rtm-fill--freezing{ fill: rgba(159,182,249,0.34); }
.region-temp-map a:hover .rtm-fill--cold{ fill: rgba(90,178,247,0.32); }
.region-temp-map a:hover .rtm-fill--mild{ fill: rgba(70,192,139,0.30); }
.region-temp-map a:hover .rtm-fill--warm{ fill: rgba(240,153,59,0.32); }
.region-temp-map a:hover .rtm-fill--hot{ fill: rgba(232,84,84,0.34); }

/* --- Mapa radaru: časová osa + barevná legenda (redesign 2026-06-11) -------- */
.map-page__radar-time{ font-size: 0.82rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.map-page__radar-time.is-forecast{ color: var(--accent-strong, #93c5fd); }
.map-page__radar-scrubber{ width: 100%; margin: 0.5rem 0 0.35rem; accent-color: var(--accent, #60a5fa); cursor: pointer; }
.map-page__radar-scrubber:disabled{ opacity: 0.4; cursor: default; }
.map-page__radar-foot{ display: flex; justify-content: space-between; align-items: center; }
.map-page__radar-scale{ margin-top: 0.6rem; }
.map-page__radar-scale-bar{ display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #7ec8ff 0%, #4aa3ff 25%, #2f6bd6 45%, #46c08b 55%, #f5d442 70%, #f0993b 82%, #e8643c 92%, #d6334d 100%); }
.map-page__radar-scale-labels{ display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }

/* --- "Prší u vás?" věta v panelu mapy (2026-06-11) ------------------------- */
.home-map-widget__panel-nowcast{ display: block; margin: 0.5rem 0 0; padding: 0.45rem 0.7rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; line-height: 1.35; background: rgba(96,165,250,0.12); color: var(--text-primary); border: 1px solid rgba(96,165,250,0.25); }
.home-map-widget__panel-nowcast.is-dry{ background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.20); color: var(--text-muted); }
.home-map-widget__panel-nowcast.is-starting{ background: rgba(96,165,250,0.16); border-color: rgba(96,165,250,0.40); }
.home-map-widget__panel-nowcast.is-raining{ background: rgba(59,130,246,0.20); border-color: rgba(59,130,246,0.45); }
.home-map-widget__panel-nowcast.is-stopping{ background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.30); }
.home-map-widget__panel-nowcast::before{ content: '☔ '; }
.home-map-widget__panel-nowcast.is-dry::before{ content: '🌤 '; }
.home-map-widget__panel-nowcast.is-stopping::before{ content: '🌥 '; }

/* --- Včerejší rekap na stránce města (#9, 2026-06-11) ---------------------- */
.city-yesterday__row{ display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; }
.city-yesterday__temps strong{ font-size: 1.5rem; font-weight: 800; }
.city-yesterday__minmax{ color: var(--text-muted); font-size: 1rem; }
.city-yesterday__condition{ color: var(--text-secondary); }
.city-yesterday__pill{ font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(96,165,250,0.14); border: 1px solid rgba(96,165,250,0.28); }
.city-yesterday__pill--dry{ background: rgba(148,163,184,0.10); border-color: rgba(148,163,184,0.22); color: var(--text-muted); }
.city-yesterday__verdict{ margin: 0.55rem 0 0; font-size: 0.85rem; color: var(--text-secondary); }
.city-yesterday__verdict--warmer{ color: #fbbf24; }
.city-yesterday__verdict--colder{ color: #7ec8ff; }