/* Meteo - stile minimale, mobile-first */

:root {
    color-scheme: light;
    --bg: #eef2f7;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #5b6b85;
    --accent: #0284c7;
    --accent-soft: #e0f2fe;
    --hover: #f1f5f9;
    --focus-ring: rgba(2, 132, 199, 0.15);
    --border: #e2e8f0;
    --radius: 16px;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.25);
    --skeleton-from: #e2e8f0;
    --skeleton-to: #f1f5f9;
    --notice-bg: #fffbeb;
    --notice-border: #fde68a;
    --notice-text: #92400e;
    --notice-error-bg: #fef2f2;
    --notice-error-border: #fecaca;
    --notice-error-text: #991b1b;
    --tip-bg: #0f172a;
    --tip-text: #ffffff;
    --overlay: rgba(15, 23, 42, 0.45);
    --icon-sun: #f59e0b;
    --icon-moon: #fbbf24;
    --icon-cloud: #94a3b8;
    --icon-rain: #0ea5e9;
    --icon-snow: #38bdf8;
    --icon-storm: #ff5722;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1220;
    --card: #151e2f;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --accent: #38bdf8;
    --accent-soft: rgba(56, 189, 248, 0.15);
    --hover: #1b2740;
    --focus-ring: rgba(56, 189, 248, 0.25);
    --border: #26334d;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
    --skeleton-from: #22304c;
    --skeleton-to: #16223a;
    --notice-bg: #33290e;
    --notice-border: #7c5c12;
    --notice-text: #fde68a;
    --notice-error-bg: #3a1c1c;
    --notice-error-border: #7f1d1d;
    --notice-error-text: #fca5a5;
    --tip-bg: #1e293b;
    --tip-text: #f1f5f9;
    --overlay: rgba(2, 6, 23, 0.65);
}

/* fallback: icone monocrome non ancora inline-ate su fondo scuro
   (le bicolore .bicolor hanno colori fissi e non vanno invertite) */
[data-theme="dark"] img.meteo-icon:not(.bicolor) {
    filter: brightness(0) invert(1);
}

/* legenda: icone visibili anche in tema scuro (stessa esclusione per le bicolore) */
[data-theme="dark"] .legend img:not(.bicolor) {
    filter: brightness(0) invert(1);
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
}

.container {
    max-width: 520px;
    margin: 0 auto;
    padding: 20px;
}

.muted {
    color: var(--muted);
    font-size: 0.85rem;
}

/* ---------- overlay di ricerca ---------- */

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 14px 16px 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.search-overlay[hidden] {
    display: none;
}

.search-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-inner input {
    flex: 1;
    min-width: 0;
    padding: 11px 52px 11px 16px;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--text);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-inner input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.locate-btn {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: none;
    color: var(--accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.locate-btn svg {
    width: 20px;
    height: 20px;
}

.locate-btn:hover {
    background: var(--accent-soft);
}

.search-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-close:hover {
    background: var(--hover);
    color: var(--text);
}

.results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    z-index: 55;
}

.results button {
    display: block;
    width: 100%;
    padding: 11px 16px;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
}

.results button:last-child {
    border-bottom: 0;
}

.results button:hover,
.results button:focus-visible {
    background: var(--hover);
}

/* ---------- notice ---------- */

.notice {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 65;
    max-width: min(480px, calc(100vw - 40px));
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    background: var(--notice-bg);
    border: 1px solid var(--notice-border);
    color: var(--notice-text);
    cursor: pointer;
    box-shadow: var(--shadow-md);
}

.notice.error {
    background: var(--notice-error-bg);
    border-color: var(--notice-error-border);
    color: var(--notice-error-text);
}

/* ---------- card ---------- */

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s, border-color 0.3s;
}

/* ---------- hero (adesso) ---------- */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 18px 20px 14px;
    background: linear-gradient(160deg, var(--accent-soft) 0%, var(--hover) 55%, var(--card) 100%);
    transition: background-color 0.3s, color 0.3s;
}

/* gradiente dinamico per condizione (tema chiaro) */

.hero[data-weather="clear"][data-day="day"] {
    background: linear-gradient(160deg, #bae6fd 0%, #e0f2fe 55%, var(--card) 100%);
}

.hero[data-weather="clear"][data-day="night"] {
    background: linear-gradient(160deg, #1e3a5f 0%, #16324f 55%, #0b1a2e 100%);
}

.hero[data-weather="partly"][data-day="day"] {
    background: linear-gradient(160deg, #bfdbfe 0%, #e2e8f0 55%, var(--card) 100%);
}

.hero[data-weather="partly"][data-day="night"] {
    background: linear-gradient(160deg, #27314a 0%, #1b2337 55%, #0f172a 100%);
}

.hero[data-weather="cloudy"][data-day="day"] {
    background: linear-gradient(160deg, #cbd5e1 0%, #eef2f7 55%, var(--card) 100%);
}

.hero[data-weather="cloudy"][data-day="night"] {
    background: linear-gradient(160deg, #2a3648 0%, #1c2533 55%, #0f172a 100%);
}

.hero[data-weather="rain"][data-day="day"] {
    background: linear-gradient(160deg, #9db8d8 0%, #dde8f2 55%, var(--card) 100%);
}

.hero[data-weather="rain"][data-day="night"] {
    background: linear-gradient(160deg, #233142 0%, #182230 55%, #0e1520 100%);
}

.hero[data-weather="snow"][data-day="day"] {
    background: linear-gradient(160deg, #dbeefe 0%, #f8fdff 55%, var(--card) 100%);
}

.hero[data-weather="snow"][data-day="night"] {
    background: linear-gradient(160deg, #334155 0%, #1e293b 55%, #0f172a 100%);
}

.hero[data-weather="storm"][data-day="day"] {
    background: linear-gradient(160deg, #8b93a8 0%, #cbd5e1 55%, var(--card) 100%);
}

.hero[data-weather="storm"][data-day="night"] {
    background: linear-gradient(160deg, #3b2f4f 0%, #241c35 55%, #14101f 100%);
}

/* gradiente dinamico per condizione (tema scuro) */

[data-theme="dark"] .hero[data-weather="clear"][data-day="day"] {
    background: linear-gradient(160deg, #0c4a6e 0%, #11294a 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="clear"][data-day="night"] {
    background: linear-gradient(160deg, #0f1f38 0%, #0a1526 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="partly"][data-day="day"] {
    background: linear-gradient(160deg, #274a6b 0%, #12233c 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="partly"][data-day="night"] {
    background: linear-gradient(160deg, #232c45 0%, #141b2e 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="cloudy"][data-day="day"] {
    background: linear-gradient(160deg, #334155 0%, #16213a 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="cloudy"][data-day="night"] {
    background: linear-gradient(160deg, #1e293b 0%, #101828 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="rain"][data-day="day"] {
    background: linear-gradient(160deg, #1f3a5c 0%, #101d33 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="rain"][data-day="night"] {
    background: linear-gradient(160deg, #1a2636 0%, #0d1522 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="snow"][data-day="day"] {
    background: linear-gradient(160deg, #2b4a63 0%, #142236 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="snow"][data-day="night"] {
    background: linear-gradient(160deg, #1e2b3c 0%, #101827 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="storm"][data-day="day"] {
    background: linear-gradient(160deg, #3a3f55 0%, #1a1f31 55%, var(--card) 100%);
}

[data-theme="dark"] .hero[data-weather="storm"][data-day="night"] {
    background: linear-gradient(160deg, #2a2038 0%, #16111f 55%, var(--card) 100%);
}

/* tinta icona in base alla condizione */

.hero[data-weather="clear"] .hero-icon,
.hero[data-weather="partly"] .hero-icon {
    color: var(--icon-sun);
}

.hero[data-weather="clear"][data-day="night"] .hero-icon,
.hero[data-weather="partly"][data-day="night"] .hero-icon {
    color: var(--icon-moon);
}

.hero[data-weather="cloudy"] .hero-icon {
    color: var(--icon-cloud);
}

.hero[data-weather="rain"] .hero-icon {
    color: var(--icon-rain);
}

.hero[data-weather="snow"] .hero-icon {
    color: var(--icon-snow);
}

.hero[data-weather="storm"] .hero-icon {
    color: var(--icon-storm);
}

/* testo chiaro sugli sfondi notturni */

.hero[data-day="night"] {
    color: #e2e8f0;
}

.hero[data-day="night"] .hero-unit,
.hero[data-day="night"] .hero-top h2,
.hero[data-day="night"] .hero-caption,
.hero[data-day="night"] .hero-details {
    color: #e2e8f0;
}

.hero[data-day="night"] .location-elev {
    color: rgba(226, 232, 240, 0.7);
}

.hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
}

/* ---------- menu hero ---------- */

.hero-menu {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
}

.menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.menu-btn svg {
    width: 20px;
    height: 20px;
}

.menu-btn:hover,
.menu-btn.open {
    background: var(--accent-soft);
}

.menu-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.menu-dropdown[hidden] {
    display: none;
}

.menu-dropdown button {
    display: block;
    width: 100%;
    padding: 12px 16px;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
}

.menu-dropdown button:last-child {
    border-bottom: 0;
}

.menu-dropdown button:hover {
    background: var(--hover);
}

.menu-dropdown button.menu-with-arrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-arrow {
    color: var(--muted);
}

.menu-dropdown button.menu-back {
    font-weight: 600;
    color: var(--accent);
}

.menu-dropdown button.menu-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-swap {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--muted);
}

/* ---------- selettore modello meteo ---------- */

.model-chip-wrap {
    position: relative;
}

.model-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--card);
    color: var(--muted);
    font-size: 0.75rem;
    cursor: pointer;
}

.model-label:hover {
    color: var(--text);
}

.model-label:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.model-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}

.model-label.open .model-chevron {
    transform: rotate(180deg);
}

.model-picker {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 40;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.model-picker[hidden] {
    display: none;
}

.model-picker-label {
    padding: 4px 16px 6px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.model-picker button {
    display: block;
    width: 100%;
    padding: 11px 16px;
    text-align: left;
    background: none;
    border: 0;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
}

.model-picker button:hover {
    background: var(--hover);
}

.model-picker button.active {
    color: var(--accent);
    font-weight: 600;
}

/* ---------- modale info ---------- */

.modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.modal[hidden] {
    display: none;
}

.modal-card {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: var(--card);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow-lg);
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 0;
    background: none;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    color: var(--text);
}

.modal-title {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 700;
}

.modal-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
}

.legend {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legend li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--text);
}

.legend img {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    color: var(--accent);
}

.hero-title-wrap {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 8px;
}

.hero-top h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    min-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.location-elev {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: var(--muted);
}

#loc-time {
    display: block;
    min-height: 1.3em;
}

.hero-main {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0 0;
    margin-top: calc(50dvh - 170px);
}

.hero-icon {
    width: 92px;
    height: 92px;
    color: var(--accent);
    flex-shrink: 0;
}

.hero-numbers {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-temp-line {
    display: flex;
    align-items: flex-start;
    gap: 2px;
}

.hero-temp {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    min-width: 1.6ch;
    margin-left: 12px;
}

.hero-unit {
    font-size: 1rem;
    font-weight: 600;
    color: var(--muted);
}

.hero-caption {
    margin: auto 0;
    align-self: center;
    max-width: 90%;
    text-align: center;
    font-size: 1.2rem;
    color: var(--muted);
    min-height: 1.5em;
}

.hero-details {
    margin-top: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 16px 2px;
    background: none;
    border: 0;
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.hero-details-arrow {
    width: 20px;
    height: 20px;
}

.hero-details:hover {
    color: var(--text);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.details-card {
    padding: 20px;
}

.details-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.details-desc {
    font-weight: 600;
    font-size: 0.95rem;
    min-height: 1.4em;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 1.4em;
}

/* ---------- skeleton di caricamento ---------- */

.skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 37%, var(--skeleton-from) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border: 1px solid transparent;
    pointer-events: none;
}

.skeleton.day-card {
    height: 62px;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0 0;
    }
}

/* ---------- sezione titoli ---------- */

.section-title {
    margin: 22px 4px 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* ---------- prossime 24 ore ---------- */

.h-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 8px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.h-list::-webkit-scrollbar {
    display: none;
}

.h-card {
    flex: 0 0 auto;
    width: 74px;
    padding: 10px 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
}

.h-hour {
    font-size: 0.75rem;
    color: var(--muted);
}

.h-icon {
    width: 34px;
    height: 34px;
}

.h-temp {
    font-weight: 600;
}

.h-prob {
    font-size: 0.72rem;
    color: var(--accent);
    min-height: 1em;
}

.h-drop {
    display: inline-flex;
    width: 10px;
    height: 10px;
    vertical-align: -1px;
    margin-right: 2px;
}

/* ---------- lista giorni ---------- */

.day-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.day-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.day-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.day-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.day-name {
    font-weight: 600;
    flex: 0 0 auto;
}

.day-date {
    color: var(--muted);
    font-size: 0.85rem;
    flex: 0 0 auto;
}

.day-icon {
    width: 34px;
    height: 34px;
    margin-left: auto;
}

.day-range {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 74px;
    text-align: right;
}

.day-min {
    color: var(--muted);
    font-size: 0.9rem;
}

.day-max {
    font-weight: 700;
    font-size: 1rem;
}

.day-prob {
    font-size: 0.75rem;
    color: var(--accent);
    width: 40px;
    text-align: right;
}

.chevron {
    color: var(--muted);
    transition: transform 0.2s;
    font-size: 0.85rem;
}

.day-card.open .chevron {
    transform: rotate(180deg);
}

/* ---------- dettaglio orario ---------- */

.day-hours {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--hover);
    padding: 4px 0 10px;
}

.day-card.open .day-hours {
    display: block;
}

.hours-head {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px 4px;
    font-size: 0.8rem;
    color: var(--muted);
}

.hour-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.hour-thead,
.hour-row {
    display: grid;
    grid-template-columns: 53px 30px 48px 58px 88px 62px 62px;
    gap: 0;
    align-items: center;
    padding: 7px 16px;
    min-width: 440px;
}

.hour-thead {
    padding-top: 2px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* spazio tra colonne tramite padding (niente gap: la fascia sticky resta coperta) */

.hour-thead > :nth-child(1),
.hour-row > :nth-child(1) {
    padding-right: 8px;
}

.hour-thead > span:nth-child(n+3),
.hour-row > span:nth-child(n+3) {
    padding-left: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hour-row + .hour-row {
    border-top: 1px solid var(--border);
}

/* colonne sticky: ora + icona meteo */

.hour-thead > :nth-child(1),
.hour-thead > :nth-child(2),
.hour-row > :nth-child(1),
.hour-row > :nth-child(2) {
    position: sticky;
    z-index: 1;
    background: var(--hover);
    white-space: nowrap;
}

.hour-thead > :nth-child(1),
.hour-row > :nth-child(1) {
    left: 16px;
}

.hour-thead > :nth-child(2),
.hour-row > :nth-child(2) {
    left: calc(16px + 53px);
}

.hour-time {
    color: var(--muted);
    font-size: 0.8rem;
}

.hour-icon {
    width: 30px;
    height: 30px;
}

/* colori icone per gruppo meteo (card: prossime ore, giorni, tabella oraria) */

.meteo-icon[data-weather="clear"],
.meteo-icon[data-weather="partly"] {
    color: var(--icon-sun);
}

.meteo-icon[data-weather="clear"][data-day="night"],
.meteo-icon[data-weather="partly"][data-day="night"] {
    color: var(--icon-moon);
}

.meteo-icon[data-weather="cloudy"] {
    color: var(--icon-cloud);
}

.meteo-icon[data-weather="rain"] {
    color: var(--icon-rain);
}

.meteo-icon[data-weather="snow"] {
    color: var(--icon-snow);
}

.meteo-icon[data-weather="storm"] {
    color: var(--icon-storm);
}

/* icone meteo inline (sviluppate via JS) */

.meteo-icon-inline {
    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

.meteo-icon-inline svg {
    width: 100%;
    height: 100%;
    display: block;
}

.hour-temp {
    font-weight: 600;
}

.hour-prec,
.hour-wind,
.hour-hum,
.hour-feels {
    color: var(--muted);
    font-size: 0.8rem;
}

/* ---------- popup descrizione icona ---------- */

.icon-tip {
    position: fixed;
    z-index: 60;
    max-width: 220px;
    padding: 7px 12px;
    background: var(--tip-bg);
    color: var(--tip-text);
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.35;
    pointer-events: none;
    box-shadow: var(--shadow-md);
    transform: translate(-50%, -100%);
}

.icon-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--tip-bg);
    transform: translateX(-50%);
}

.icon-tip[hidden] {
    display: none;
}

/* ---------- loading ---------- */

.loading {
    opacity: 0.55;
    transition: opacity 0.2s;
    pointer-events: none;
}

/* ---------- footer ---------- */

.site-footer {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 0.78rem;
    text-align: center;
}

/* ---------- desktop ---------- */

@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 20px;
    }

    .hero-main {
        gap: 14px;
    }

    .hero-icon {
        width: 120px;
        height: 120px;
    }

    .hero-temp {
        font-size: 2rem;
    }

    .hero-stats {
        max-width: 560px;
    }

    .h-list {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 10px;
        overflow: visible;
    }

    .h-card {
        width: auto;
    }
}