:root {
  --bg: #f6f8fc; --surface: #ffffff; --ink: #17243e; --muted: #72809a;
  --line: #e8edf5; --blue: #2563eb; --blue-dark: #174aca; --blue-soft: #edf3ff;
  --font: "Manrope", "Avenir Next", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; scrollbar-gutter: stable; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 14px; -webkit-font-smoothing: antialiased; }
button,input { font: inherit; }
button { cursor: pointer; color: inherit; touch-action: manipulation; }
button,a,input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,p { margin: 0; }
button:focus-visible,a:focus-visible,input:focus-visible { outline: 3px solid #7ca8ff; outline-offset: 4px; }
[hidden] { display: none !important; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.header { height: 90px; padding: 0 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-symbol { width: 43px; height: 43px; display: grid; place-items: center; background: var(--blue); color: #a8d2ff; border-radius: 14px; }
.brand-symbol svg { width: 34px; height: 34px; }
.brand-name { font-size: 21px; font-weight: 800; letter-spacing: -.9px; line-height: 1.1; }
.brand-name > span { font-weight: 500; }
.brand-name small { display: block; margin-top: 6px; font-size: 8px; letter-spacing: 1.8px; color: var(--muted); font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 6px; height: 100%; }
.nav-button { display: flex; align-items: center; gap: 9px; border: 0; border-radius: 11px; min-height: 44px; padding: 11px 18px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; transition: background .15s,color .15s; }
.nav-button .icon { width: 18px; height: 18px; }
.nav-button:hover { background: #f7f9fc; color: var(--ink); }
.nav-button.active { background: var(--blue-soft); color: var(--blue); }
.preview-badge { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--line); border-radius: 24px; padding: 10px 13px; min-height: 42px; color: var(--muted); font-size: 11px; font-weight: 600; }
.preview-badge .icon { width: 15px; height: 15px; margin-left: 4px; }
.preview-dot { width: 6px; height: 6px; border-radius: 50%; background: #6082c4; }
main { max-width: 1600px; margin: auto; padding: 32px 44px 0; }
.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 27px; }
h1 { font-size: clamp(26px,2.7vw,38px); font-weight: 800; line-height: 1.2; letter-spacing: -1.4px; }
h1 > span { color: var(--blue); }
.workspace { background: var(--surface); border: 1px solid #e2e8f2; border-radius: 22px; box-shadow: 0 8px 35px #233b6807; overflow: hidden; }
.toolbar { min-height: 80px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.metric-filters { display: flex; gap: 4px; padding: 4px; background: #f5f7fb; border-radius: 13px; }
.metric-filters button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 15px; border: 0; border-radius: 9px; background: transparent; font-size: 13px; color: var(--muted); font-weight: 600; transition: background .15s,color .15s,box-shadow .15s; }
.metric-filters button .icon { width: 18px; height: 18px; }
.metric-filters button[aria-pressed=true] { background: var(--blue); color: white; box-shadow: 0 3px 7px #2563eb22; }
.metric-filters button:hover:not([aria-pressed=true]) { background: #eaf0fa; color: var(--ink); }
.map-and-list { display: grid; grid-template-columns: minmax(0,1fr) 342px; }
.map-shell { position: relative; min-width: 0; background: #eaf0f3; }
#map { height: 570px; width: 100%; z-index: 0; background: #eaf0f3; }
.leaflet-container { font-family: var(--font); }
.leaflet-tile-pane { filter: saturate(.3) brightness(1.035); }
.leaflet-control-attribution { font-size: 10px !important; background: #ffffffdb !important; padding: 2px 7px !important; color: #526078; }
.leaflet-control-attribution a { color: #386598; }
.leaflet-control-zoom { margin: 0 18px 22px 0 !important; border: 1px solid #e1e7f0 !important; border-radius: 12px !important; overflow: hidden; box-shadow: 0 5px 15px #30496316 !important; }
.leaflet-control-zoom a { width: 42px !important; height: 42px !important; line-height: 42px !important; color: var(--ink) !important; border-color: var(--line) !important; font-family: var(--font) !important; font-size: 22px !important; font-weight: 500 !important; }
.leaflet-tooltip { border: 0; border-radius: 7px; font-family: var(--font); font-size: 12px; font-weight: 600; padding: 7px 10px; box-shadow: 0 3px 15px #152d5320; }
.map-area-label { position: absolute; z-index: 400; left: 22px; top: 21px; background: #ffffffee; backdrop-filter: blur(10px); border: 1px solid #ffffff; padding: 12px 15px; border-radius: 11px; font-size: 10px; letter-spacing: 1.2px; font-weight: 800; box-shadow: 0 3px 12px #213b5b08; }
.map-area-label small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0; margin-top: 3px; color: var(--muted); padding-left: 13px; }
.map-area-dot { display: inline-block; width: 5px; height: 5px; margin-right: 8px; background: var(--blue); border-radius: 50%; vertical-align: 2px; }
.reset-map { position: absolute; z-index: 400; right: 19px; top: 21px; width: 43px; height: 43px; border: 1px solid #e6ebf3; border-radius: 12px; background: white; display: grid; place-items: center; color: #526787; box-shadow: 0 3px 12px #213b5b08; }
.map-key { display: flex; gap: 28px; justify-content: space-between; align-items: center; position: absolute; z-index: 400; left: 22px; bottom: 25px; max-width: calc(100% - 106px); padding: 14px 16px; border: 1px solid #ffffff; border-radius: 12px; background: #ffffffef; backdrop-filter: blur(10px); box-shadow: 0 3px 12px #213b5b08; }
.map-key>div { display: flex; align-items: center; gap: 8px; font-size: 12px; white-space: nowrap; }
.key-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
#metric-unit { color: var(--muted); border-left: 1px solid var(--line); padding-left: 9px; }
.map-key>span { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--muted); }
.map-key>span .icon { width: 15px; height: 15px; }
.map-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 15px; padding: 30px; text-align: center; color: var(--muted); }
.map-fallback .icon { width: 38px; height: 38px; }
.map-fallback strong { color: var(--ink); font-size: 20px; }
.map-status { position: absolute; z-index: 410; left: 20px; right: 20px; top: 95px; font-size: 12px; background: #ffffffed; padding: 13px; border-radius: 10px; color: var(--muted); }
.map-touch-hint { position:absolute; z-index:700; left:50%; top:50%; transform:translate(-50%,-42%); max-width:calc(100% - 48px); padding:12px 16px; border:1px solid #ffffff42; border-radius:10px; background:#102138e8; color:#fff; box-shadow:0 8px 28px #07152642; font-size:13px; font-weight:700; text-align:center; pointer-events:none; opacity:0; transition:opacity .16s ease,transform .16s ease; }
.map-touch-hint.is-visible { opacity:1; transform:translate(-50%,-50%); }
.weather-pin { background: transparent !important; border: 0; }
.pin-content { display: flex; align-items: center; justify-content: center; min-width: 60px; height: 39px; background: white; color: #245dda; border: 2px solid white; border-radius: 11px; box-shadow: 0 4px 14px #1d385c2b; font-size: 16px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; position: relative; }
.pin-content:after { content: ""; position: absolute; bottom: -6px; width: 8px; height: 8px; transform: rotate(45deg); background: inherit; border-bottom: 2px solid white; border-right: 2px solid white; }
.pin-content.featured { background: var(--blue); color: white; box-shadow: 0 0 0 6px #2563eb18,0 5px 14px #2563eb40; }
.pin-content.stale { background: #fff5e5; color: #a86614; }
.pin-content.missing,.pin-content.absent { background: #f0f3f7; color: #8794a8; }
.pin-content.cool { color: #008b95; }
.station-panel { border-left: 1px solid var(--line); min-width: 0; height: 570px; display: flex; flex-direction: column; }
.list-header { padding: 23px 22px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.list-header>span { color: #a4afc0; padding-top: 4px; }
h2 { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.list-header h2 { display: flex; align-items: center; gap: 9px; }
#result-count { font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--blue); background: var(--blue-soft); border-radius: 7px; min-width: 23px; height: 23px; display: grid; place-items: center; }
.list-header p { color: var(--muted); font-size: 11px; margin-top: 6px; }
.search-field { margin: 0 22px 13px; padding: 0 12px; display: flex; gap: 8px; align-items: center; background: #f7f9fc; border: 1px solid #e9edf4; border-radius: 10px; color: #9aa6ba; }
.search-field .icon { width: 17px; height: 17px; }
.search-field input { border: 0; background: transparent; min-width: 0; width: 100%; padding: 12px 0; min-height: 44px; font-size: 13px; color: var(--ink); }
.search-field input::placeholder { color: #94a0b4; }
.search-field input:focus { outline: none; }
.search-field:focus-within { outline: 2px solid #83adfc; outline-offset: 2px; }
.station-list { padding: 0 10px; overflow-y: auto; flex: 1; }
.station-row { width: 100%; display: flex; align-items: center; gap: 12px; justify-content: space-between; text-align: left; background: transparent; border: 0; border-radius: 10px; padding: 14px 12px; min-height: 69px; position: relative; }
.station-row+.station-row:before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1px solid #eff2f7; }
.station-row:hover,.station-row[aria-current=true] { background: var(--blue-soft); }
.station-row-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: -.1px; }
.row-camera { display: inline-block; color: #98a8be; vertical-align: -2px; margin-left: 6px; }
.row-camera .icon { width: 12px; height: 12px; }
.station-row-sub { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: #8490a5; font-size: 10px; line-height: 1.35; }
.row-status-dot { width: 4px; height: 4px; border-radius: 50%; background: #51a589; flex: none; }
.row-status-dot.stale { background: #dc9a3c; }
.row-status-dot.missing,.row-status-dot.absent { background: #aeb8c8; }
.row-value { font-size: 23px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.9px; white-space: nowrap; line-height: 1.25; }
.row-value small { font-size: 11px; font-weight: 500; letter-spacing: 0; margin-left: 3px; color: var(--muted); }
.row-value.stale { color: #b27c33; }
.row-value.missing,.row-value.absent { color: #a1adbf; }
.panel-bottom { display: flex; align-items: center; gap: 7px; padding: 14px 22px; margin-top: 10px; background: #fafbfd; border-top: 1px solid var(--line); font-size: 10px; color: var(--muted); }
.panel-bottom>[data-icon] { margin-left: auto; }
.panel-bottom .icon { width: 13px; height: 13px; }
.small-status-dot { width: 4px; height: 4px; border-radius: 50%; background: #91a2bd; }
.empty-results { padding: 28px 20px; text-align: center; color: var(--muted); flex: 1; }
.empty-results>span { margin-bottom: 13px; }
.empty-results strong { display: block; font-size: 14px; color: var(--ink); }
.empty-results p { font-size: 12px; line-height: 1.7; margin-top: 8px; }
footer { max-width: 1512px; border-top: 1px solid #e3e9f2; padding: 22px 0 25px; margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; color: #96a1b4; font-size: 10px; }
.footer-brand { color: #697992; font-size: 12px; font-weight: 800; letter-spacing: -.3px; }
.footer-brand>span { color: #96a1b4; font-size: 10px; font-weight: 400; letter-spacing: 0; margin-left: 16px; }
body.view-stations .map-shell,body.view-webcams .map-shell { display: none; }
body.view-stations .map-and-list,body.view-webcams .map-and-list { grid-template-columns: 1fr; }
body.view-stations .station-panel,body.view-webcams .station-panel { height: auto; min-height: 420px; border-left: 0; }
body.view-stations .station-list,body.view-webcams .station-list { display: grid; grid-template-columns: repeat(3,1fr); padding: 4px 22px 22px; gap: 12px; overflow: visible; flex: initial; }
body.view-stations .station-row,body.view-webcams .station-row { border: 1px solid var(--line); border-radius: 14px; padding: 24px 20px; min-height: 103px; }
body.view-stations .station-row:before,body.view-webcams .station-row:before { display: none; }
body.view-stations .search-field,body.view-webcams .search-field { max-width: 480px; }
body.view-stations .list-header { display: none; }
body.view-stations .search-field { margin-top: 18px; }
dialog { border: 0; color: var(--ink); font: inherit; background: var(--surface); border-radius: 24px; box-shadow: 0 25px 120px #0b22413b; padding: 0; max-height: calc(100dvh - 48px); overscroll-behavior: contain; }
dialog::backdrop { background: #12244380; backdrop-filter: blur(5px); }
.detail-dialog { width: min(640px,calc(100% - 36px)); }
.detail-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 20px 26px 14px; background: var(--surface); position: sticky; top: 0; z-index: 2; }
.detail-overline { display: flex; align-items: center; gap: 7px; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #8392a9; }
.detail-overline .icon { width: 15px; height: 15px; color: var(--blue); }
.detail-demo { background: #eff3f9; border-radius: 4px; padding: 4px 6px; font-size: 8px; margin-left: 5px; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f4f6fa; color: #667995; }
#station-detail { padding: 0 28px 27px; }
.detail-title { display:flex; align-items:center; gap:11px; font-size: 31px; font-weight: 800; letter-spacing: -1.1px; margin-bottom: 8px; line-height: 1.2; }
.detail-heading-row { display:flex; align-items:center; justify-content:space-between; gap:22px; }
.detail-heading-row .detail-title { min-width:0; margin-bottom:8px; }
.locality-status-dot { width:10px; height:10px; flex:none; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 15%,transparent); }
.locality-status-dot.online { color:#36ad83; background:#36ad83; }
.locality-status-dot.offline { color:#d85e65; background:#d85e65; }
.detail-meta { color: var(--muted); font-size: 12px; }
.detail-status { display: flex; align-items: center; gap: 7px; color: #549b86; font-size: 11px; margin-top: 13px; }
.detail-status .icon { width: 14px; height: 14px; }
.detail-status.stale { color: #ad7b2f; }
.detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #edf3ff; padding: 23px 25px; border-radius: 17px; margin-top: 22px; }
.detail-hero-label { color: #6c84aa; font-size: 12px; font-weight: 600; }
.detail-temp { color: var(--blue); font-size: 68px; line-height: 1.18; letter-spacing: -4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.detail-temp small { font-size: 29px; font-weight: 500; letter-spacing: -1px; vertical-align: 20px; margin-left: 4px; }
.detail-hero-icon { width: 65px; height: 65px; border: 1px solid #d6e3fe; border-radius: 20px; color: #80a7f3; display: grid; place-items: center; }
.detail-hero-icon .icon { width: 35px; height: 35px; stroke-width: 1.2; }
.detail-hero.stale { background: #fff6e7; }
.detail-hero.stale .detail-temp { color: #b18037; }
.sensor-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 12px; }
.sensor-card { padding: 17px 15px; border: 1px solid var(--line); border-radius: 14px; }
.sensor-label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; }
.sensor-label .icon { width: 16px; height: 16px; color: #a1b0c7; }
.sensor-reading { font-size: 26px; font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -1px; margin: 12px 0 7px; white-space: nowrap; }
.sensor-reading small { margin-left: 3px; color: #91a0b7; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.sensor-card p { color: var(--muted); font-size: 10px; line-height: 1.6; }
.sensor-card.stale .sensor-reading { color: #ad7b2f; }
.sensor-card.missing .sensor-reading { color: #a3afbf; }
.absent-sensors { color: #8b98ad; line-height: 1.6; font-size: 11px; padding: 14px 1px 0; }
.webcam-demo { display: flex; align-items: center; gap: 16px; padding: 21px; border-radius: 15px; background: #f5f7fb; margin-top: 22px; border: 1px dashed #dce4f0; }
.webcam-demo>span { display: grid; place-items: center; width: 48px; height: 48px; background: white; border-radius: 13px; color: #95a5bf; }
.webcam-demo h3 { font-size: 14px; font-weight: 700; }
.webcam-demo p { font-size: 11px; color: #8a97ad; line-height: 1.6; margin-top: 4px; }
.detail-disclaimer { font-size: 10px; line-height: 1.6; color: #98a3b5; margin-top: 20px; }
.skip-link { position: absolute; top: -100px; left: 10px; z-index: 10000; padding: 14px; background: var(--blue); color: white; border-radius: 8px; }
.skip-link:focus { top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.noscript { padding: 25px; }
body:has(dialog[open]) { overflow: hidden; }
.pull-refresh { position:fixed; z-index:15000; top:calc(env(safe-area-inset-top) + 8px); left:50%; transform:translate(-50%,-130%); padding:10px 15px; border-radius:999px; background:#173453; color:#fff; box-shadow:0 8px 24px #07152645; font-size:12px; font-weight:700; white-space:nowrap; pointer-events:none; opacity:0; transition:transform .16s ease,opacity .16s ease; }
.pull-refresh.is-visible { transform:translate(-50%,0); opacity:1; }
.pull-refresh.is-ready { background:#2563eb; }
.more-menu nav .pwa-refresh-button { padding:12px; border:0; border-radius:7px; background:transparent; text-align:left; font-size:12px; }
.more-menu nav .pwa-refresh-button:hover { background:var(--blue-soft); color:var(--blue); }
@media(min-width:1700px) { .header { padding-left: calc((100vw - 1512px)/2); padding-right: calc((100vw - 1512px)/2); } }
@media(max-width:1599px) { footer { margin-left: 44px; margin-right: 44px; } }
@media(max-width:1150px) {
  .header { padding: 0 28px; gap: 18px; }
  main { padding: 27px 28px 0; }
  .preview-badge { font-size: 10px; }
  .nav-button { padding: 10px 13px; }
  .map-and-list { grid-template-columns: minmax(0,1fr) 306px; }
  .map-key>span { display: none; }
  footer { margin-left: 28px; margin-right: 28px; }
  body.view-stations .station-list,body.view-webcams .station-list { grid-template-columns: repeat(2,1fr); }
}
@media(max-width:850px) {
  .header { height: 80px; padding: 0 22px; }
  .brand-name { font-size: 18px; }
  .brand-symbol { width: 37px; height: 37px; border-radius: 11px; }
  .brand-name small { font-size: 7px; }
  .preview-badge { display: none; }
  main { padding: 25px 22px 0; }
  .page-heading { margin-bottom: 23px; }
  h1 { font-size: 29px; }
  .toolbar { padding: 14px; gap: 10px; }
  .metric-filters button { font-size: 12px; padding: 10px 11px; gap: 5px; }
  .map-and-list { grid-template-columns: minmax(0,1fr) 284px; }
  #map,.station-panel { height: 570px; }
  .list-header { padding: 21px 17px 17px; }
  .search-field { margin-left: 17px; margin-right: 17px; }
  .station-row { padding: 14px 10px; gap: 9px; }
  .station-row-name { font-size: 12px; }
  .row-value { font-size: 21px; }
  .row-camera { display: none; }
  footer { margin-left: 22px; margin-right: 22px; }
  .footer-brand>span { display: none; }
}
@media(max-width:680px) {
  .header { height: auto; padding: 18px 18px 0; gap: 17px; flex-wrap: wrap; }
  .brand-name { font-size: 21px; }
  .brand-symbol { width: 40px; height: 40px; }
  .brand-name small { font-size: 7px; }
  .main-nav { flex: 1 0 100%; order: 3; gap: 0; justify-content: space-between; margin-top: 0; }
  .nav-button { flex: 1; border-radius: 0; justify-content: center; min-height: 47px; padding: 12px 8px; font-size: 12px; border-bottom: 2px solid transparent; }
  .nav-button.active { background: transparent; border-bottom-color: var(--blue); }
  .nav-button .icon { width: 17px; height: 17px; }
  .preview-badge { display: flex; padding: 7px 9px; font-size: 0; gap: 0; min-height: 33px; border: 0; background: #f3f6fc; }
  .preview-badge .preview-dot { display: none; }
  .preview-badge .icon { margin: 0; width: 18px; height: 18px; }
  main { padding: 23px 16px 0; }
  .page-heading { display: block; margin-bottom: 20px; }
  h1 { font-size: 27px; letter-spacing: -1.1px; max-width: 340px; }
  .workspace { border-radius: 17px; }
  .toolbar { display: block; padding: 12px; }
  .metric-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 4px; border-radius: 12px; }
  .metric-filters button { min-height: 44px; font-size: 13px; gap: 7px; }
  .map-and-list { grid-template-columns: 1fr; }
  #map { height: 420px; }
  .map-area-label { left: 13px; top: 14px; padding: 10px 12px; font-size: 9px; }
  .map-area-label small { font-size: 9px; }
  .reset-map { top: 14px; right: 13px; }
  .map-key { left: 13px; bottom: 27px; padding: 12px; }
  .map-key>div { font-size: 11px; }
  .leaflet-control-zoom { margin-right: 13px !important; margin-bottom: 23px !important; }
  .station-panel { height: auto; border-left: 0; border-top: 1px solid var(--line); }
  .list-header { padding: 21px 20px 17px; }
  h2 { font-size: 20px; }
  .search-field { margin: 0 20px 13px; }
  .search-field input { font-size: 16px; }
  .station-list { overflow: visible; padding: 0 10px; }
  .station-row { min-height: 78px; padding: 15px 10px; }
  .station-row-name { font-size: 14px; }
  .station-row-sub { font-size: 11px; }
  .row-camera { display: inline-block; }
  .row-value { font-size: 25px; }
  .row-value small { font-size: 12px; }
  .panel-bottom { font-size: 10px; }
  footer { margin: 0 16px; padding: 18px 0; gap: 10px; flex-wrap: wrap; font-size: 9px; }
  body.view-stations .station-list,body.view-webcams .station-list { grid-template-columns: 1fr; padding: 0 16px 18px; gap: 10px; }
  body.view-stations .station-row,body.view-webcams .station-row { padding: 19px 15px; min-height: 92px; }
  .detail-dialog { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; border-radius: 24px 24px 0 0; }
  .detail-top { padding: 18px 20px 13px; }
  #station-detail { padding: 0 20px 24px; }
  .detail-title { font-size: 29px; }
  .detail-hero { padding: 21px; border-radius: 15px; }
  .detail-temp { font-size: 62px; }
  .detail-temp small { font-size: 26px; }
  .sensor-grid { grid-template-columns: 1fr 1fr; }
  .sensor-card { padding: 17px 14px; }
  .sensor-label { font-size: 12px; }
  .sensor-card p { font-size: 11px; }
  .detail-disclaimer { font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

/* Identità originale, mantenuta senza ridisegnare il logo. */
.header { background: #142139; color: #e8eef9; border: 0; }
.original-logo { width: 247px; height: auto; display: block; }
.header .nav-button { color: #a5b4cf; }
.header .nav-button:hover { background: #ffffff0c; color: white; }
.header .nav-button.active { background: #ffffff12; color: white; }
.header .preview-badge { color: #a9b8d1; border-color: #ffffff18; }
.more-menu { position: relative; margin-left: auto; }
.more-menu summary { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; font-size: 12px; color: #a9b8d1; list-style: none; }
.more-menu summary::-webkit-details-marker { display: none; }
.more-menu summary .icon { width: 16px; height: 16px; }
.more-menu nav { position: absolute; right: 0; top: calc(100% + 5px); z-index: 1000; display: grid; min-width: 185px; padding: 8px; background: white; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 12px 35px #152b4422; border-radius: 13px; }
.more-menu a { padding: 12px; font-size: 12px; border-radius: 7px; }
.more-menu a:hover { background: var(--blue-soft); color: var(--blue); }
.footer-brand>span { display: inline; }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.camera-gallery { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding: 5px 22px 25px; }
.camera-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; min-width: 0; background: var(--surface); }
.camera-media { display: block; aspect-ratio: 16/10; position: relative; background: #edf1f7; overflow: hidden; }
.camera-media>img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; transition: transform .3s; }
.camera-media:hover>img { transform: scale(1.025); }
.camera-placeholder { position: absolute; inset: 0; display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center; color: #8c9eb8; font-size: 11px; text-align: center; padding: 25px; }
.camera-placeholder .icon { width: 30px; height: 30px; }
.camera-locality { position: absolute; bottom: 12px; left: 12px; background: #142139c9; backdrop-filter: blur(7px); color: white; padding: 6px 10px; border-radius: 7px; font-size: 10px; font-weight: 600; z-index: 1; }
.camera-caption { padding: 16px; }
.camera-caption h3 { font-size: 12px; font-weight: 700; line-height: 1.7; }
.camera-caption p { color: var(--muted); font-size: 10px; margin-top: 5px; overflow-wrap: anywhere; }
.camera-image-time { display:block; margin-top:5px; color:var(--muted); font-size:10px; line-height:1.4; white-space:nowrap; }
.camera-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 13px; }
.camera-links a,.external-stations a { display: inline-flex; gap: 4px; align-items: center; font-size: 10px; color: var(--blue); min-height: 30px; font-weight: 600; }
.camera-links .icon,.external-stations a .icon { width: 12px; height: 12px; }
.camera-value { color: var(--blue); display: flex; }
.camera-value .icon { width: 23px; height: 23px; }
.row-camera { display: inline-flex; align-items: center; gap: 2px; }
.row-camera small { font-size: 8px; }
.pin-camera,.pin-rain { position: absolute; top: -10px; display: grid; place-items: center; width: 21px; height: 21px; background: #142139; color: white; border: 2px solid white; border-radius: 50%; }
.pin-camera { right: -6px; }
.pin-rain { left: -6px; background: #2563eb; }
.pin-camera .icon,.pin-rain .icon { width: 10px; height: 10px; stroke-width: 2; }
.pin-content.camera,.pin-content.external { background: #172b4d; color: white; }
.pin-content.camera .icon,.pin-content.external .icon { width: 20px; height: 20px; }
.pin-content.invalid,.pin-content.unknown,.pin-content.offline { color: #96a2b5; background: #f4f6f9; }
.row-value.unknown,.row-value.invalid,.row-value.offline { color: #a0aabe; }
.row-status-dot.unknown,.row-status-dot.invalid,.row-status-dot.offline { background: #aeb8c8; }
.locality-webcams { margin-top: 14px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.section-heading h2 { font-size: 19px; }
.section-heading>span { color: var(--muted); font-size: 11px; }
.detail-cameras { display: grid; grid-template-columns: 1fr; gap: 17px; }
.detail-cameras.single-camera { width:min(760px,100%); margin-inline:auto; grid-template-columns:1fr; }
.detail-dialog .camera-media { display:grid; height:auto; min-height:170px; aspect-ratio:auto; place-items:center; }
.detail-dialog .camera-media>img { position:relative; inset:auto; width:100%; height:auto; max-height:min(52dvh,540px); margin:auto; object-fit:contain; }
.camera-time-note,.location-precision { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 13px; }
.full-page-link { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; color: white; background: var(--blue); border-radius: 10px; font-weight: 700; font-size: 12px; margin-top: 23px; }
.full-page-link .icon { width: 17px; height: 17px; }
.detail-page-link { display:inline-flex; flex:0 0 auto; align-items:center; gap:6px; min-height:34px; margin:0 0 6px; color:var(--blue); font-size:11px; font-weight:750; }
.detail-page-link .icon { width:13px; height:13px; }
.detail-page-link:hover { text-decoration:underline; }
.source-pages { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; align-items: center; margin-top: 22px; color: var(--muted); }
.source-pages a { display: inline-flex; gap: 5px; align-items: center; color: var(--blue); min-height: 30px; }
.source-pages .icon { width: 12px; height: 12px; }
.publication-note { padding: 15px; font-size: 11px; line-height: 1.7; border-radius: 10px; margin-top: 18px; background: #fff6e7; color: #9d783b; }
.webcam-only-note { background: #f1f5fc; padding: 20px; display: flex; align-items: center; gap: 12px; color: #7187aa; font-size: 13px; border-radius: 13px; margin-top: 25px; }
.external-stations { margin-top: 25px; }
.external-stations article { padding: 17px; border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; }
.external-stations h3 { font-size: 13px; }
.external-stations p { font-size: 12px; color: var(--muted); margin-top: 8px; }
.detail-page-main { max-width: 1050px; }
.page-back { display: inline-flex; align-items: center; gap: 8px; color: #6b81a3; min-height: 44px; font-size: 12px; margin-bottom: 17px; }
.location-surface { background: white; padding: 35px; border: 1px solid var(--line); border-radius: 22px; margin-bottom: 32px; }
.location-surface .detail-title { font-size: 37px; }
.location-surface .detail-hero { max-width: 600px; }
.location-surface .sensor-grid { max-width: 600px; }
.location-surface .detail-cameras { grid-template-columns: repeat(2,minmax(0,1fr)); }
.location-surface .detail-cameras.single-camera { width:min(760px,100%); margin-inline:auto; grid-template-columns:1fr; }
.location-surface .camera-caption h3 { font-size: 13px; }
.location-surface .detail-status { font-size: 12px; }
@media(max-width:1150px) {
  .header { gap: 16px; }
  .original-logo { width: 210px; }
  .header .preview-badge { display: none; }
  .main-nav { margin-left: auto; }
  .more-menu { margin-left: 0; }
  .camera-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:680px) {
  .original-logo { width: 205px; }
  .more-menu { margin-left: auto; }
  .main-nav { margin-left: 0; }
  .header .nav-button.active { background: transparent; border-color: #7fa6fc; }
  .header .nav-button { font-size: 12px; }
  .camera-gallery { grid-template-columns: 1fr; gap: 17px; padding: 3px 16px 20px; }
  .camera-caption h3 { font-size: 13px; }
  .camera-caption p,.camera-links a { font-size: 11px; }
  .camera-media { aspect-ratio: 16/10; }
  .camera-links a { min-height: 36px; }
  .location-surface { padding: 22px 18px; border-radius: 16px; }
  .location-surface .detail-title { font-size: 28px; }
  .location-surface .detail-cameras { grid-template-columns: 1fr; }
  .footer-brand>span { margin-left: 0; }
  .footer-links { gap: 15px; font-size: 10px; }
}
.locality-cluster>span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #2563eb; color: white; border: 5px solid #bdd1ff; box-shadow: 0 3px 15px #215ec333; font-size: 18px; line-height: 1.1; font-weight: 800; }
.locality-cluster small { font-size: 8px; font-weight: 500; margin-top: 2px; }
.location-snapshot { color: var(--muted); font-size: 11px; line-height: 1.7; margin-top: 12px; }
@media(max-width:680px) {
  .more-menu summary { min-width: 44px; }
}

/* Versione ispirata a sitonew: mappa ampia, estremi e letture complete. */
:root { --bg:#f3f6fa; --surface:#fff; --surface-alt:#f6f8fc; --ink:#1b2b42; --muted:#63758e; --line:#e1e8f0; --blue:#2563eb; --blue-soft:#edf3ff; --overlay:#fffffff2; --header:#fff; }
:root[data-theme="dark"] { --bg:#0d1522; --surface:#172337; --surface-alt:#1c2c42; --ink:#e7eef8; --muted:#a5b5cb; --line:#2c3f57; --blue:#7ba9ff; --blue-soft:#233b5d; --overlay:#172337f2; --header:#131f31; }
.header { height:80px; background:var(--header); border-bottom:1px solid var(--line); gap:20px; color:var(--ink); }
.original-logo { width:222px; filter:brightness(0); }
[data-theme="dark"] .original-logo { filter:brightness(0) invert(1); }
.header .nav-button { color:var(--muted); white-space:nowrap; }
.header .nav-button:hover,.header .nav-button.active { color:var(--blue); background:var(--blue-soft); }
.header .preview-badge { color:var(--muted); border-color:var(--line); }
.more-menu summary { color:var(--muted); }
.more-menu nav { background:var(--surface); }
.theme-menu { position:relative; flex:none; }
.theme-menu>summary { list-style:none; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; background:var(--surface-alt); border:1px solid var(--line); border-radius:50%; color:var(--ink); }
.theme-menu>summary::-webkit-details-marker { display:none; }
.theme-options { position:absolute; right:0; top:54px; z-index:1100; min-width:210px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 12px 30px #07152630; padding:8px; }
.theme-options>span { display:block; color:var(--muted); font-size:11px; padding:10px; }
.theme-options button { display:block; width:100%; text-align:left; border:0; background:transparent; border-radius:8px; min-height:44px; padding:12px; font-size:13px; }
.theme-options button small { display:block; margin-top:5px; font-size:10px; color:var(--muted); }
.theme-options button[aria-pressed="true"],.theme-options button:hover { color:var(--blue); background:var(--blue-soft); }
summary:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
main { padding:24px 32px 0; }
.page-heading { margin-bottom:22px; }
h1 { font-size:clamp(26px,2.5vw,34px); }
.workspace { border-color:var(--line); border-radius:16px; box-shadow:0 6px 30px #182b4410; }
.toolbar { display:block; padding:16px 20px; }
.metric-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; background:transparent; padding:0; border-radius:0; }
.metric-group { min-width:0; }
.metric-category { display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--ink); margin-bottom:8px; }
.metric-category .icon { width:19px; height:19px; color:var(--blue); }
.metric-group>div { display:flex; gap:3px; background:var(--surface-alt); padding:3px; border-radius:8px; }
.metric-filters button { flex:1; min-height:36px; font-size:11px; padding:8px 7px; border-radius:6px; gap:0; white-space:nowrap; }
.metric-filters button[aria-pressed=true] { background:#2563eb; color:white; }
.metric-filters button:hover:not([aria-pressed=true]) { background:var(--blue-soft); color:var(--blue); }
.map-and-list { display:grid; grid-template-columns:1fr; }
.map-shell,#map { background:var(--surface-alt); }
#map { height:640px; }
.leaflet-tile-pane { filter:none; }
.map-area-label,.map-key,.reset-map,.map-status { background:var(--overlay); color:var(--ink); border-color:var(--line); }
.map-area-label small,.map-key>span { color:var(--muted); }
.map-area-label { top:16px; left:18px; }
.reset-map { top:16px; right:18px; }
.map-key { left:18px; bottom:28px; }
.leaflet-control-zoom a { background:var(--surface)!important; color:var(--ink)!important; border-color:var(--line)!important; }
.leaflet-control-zoom { border-color:var(--line)!important; }
.leaflet-tooltip { background:var(--surface); color:var(--ink); }
.leaflet-control-attribution { background:var(--overlay)!important; color:var(--muted); font-size:9px!important; }
.leaflet-control-attribution a { color:var(--blue); }
.pin-content { min-width:0; width:100%; height:32px; border:1px solid var(--line); border-radius:6px; font-size:13px; background:var(--surface); color:var(--ink); box-shadow:0 2px 6px #10253735; letter-spacing:-.2px; }
.pin-content:after { display:none; }
.pin-content.stale { background:var(--surface); color:var(--ink); border-bottom:3px solid #cd9c45; }
.pin-content.featured { background:#2563eb; color:white; box-shadow:0 2px 8px #2563eb45; }
.pin-content.camera,.pin-content.external { background:#243c5a; color:white; }
.pin-content.camera { justify-content:center; padding:0; }
.pin-content.absent,.pin-content.invalid,.pin-content.unknown,.pin-content.offline,.pin-content.missing { background:var(--surface-alt); color:var(--muted); }
.weather-pin.station-offline .pin-content { border-color:#b7bcc3; background:#f1f2f3; color:#555d66; filter:grayscale(1); }
.weather-pin.station-offline .pin-camera { border-color:#d9dde1; background:#59616a; filter:grayscale(1); }
.pin-camera,.pin-rain { width:17px; height:17px; top:-7px; border-width:1px; }
.pin-camera { right:-5px; }
.pin-rain { left:-5px; }
.pin-camera .icon,.pin-rain .icon { width:9px; height:9px; }
.network-extremes { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:22px; background:var(--surface-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.extremes-group h2 { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; letter-spacing:-.2px; margin-bottom:12px; }
.extremes-group h2 small { color:var(--muted); font-size:10px; font-weight:500; letter-spacing:0; }
.extremes-group>div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.network-extreme { min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:12px; text-align:left; }
.network-extreme:hover { border-color:var(--blue); }
.network-extreme>span { display:flex; gap:5px; align-items:center; font-size:9px; color:var(--muted); }
.network-extreme .icon { width:13px; height:13px; color:var(--blue); }
.network-extreme strong { display:block; font-size:23px; font-variant-numeric:tabular-nums; letter-spacing:-.7px; margin:9px 0 6px; }
.network-extreme strong small { font-size:10px; letter-spacing:0; margin-left:3px; color:var(--muted); font-weight:500; }
.network-extreme>small { display:block; font-size:9px; color:var(--muted); line-height:1.5; }
.network-extreme:not(:disabled)>small { font-size:calc(9px + 1pt); font-weight:700; }
.station-panel { height:auto; border:0; min-height:0; }
.list-header { padding:24px 22px 16px; }
.list-header p { font-size:12px; }
.search-field { background:var(--surface-alt); border-color:var(--line); max-width:480px; }
.station-list,body.view-stations .station-list { display:block; padding:0; overflow-x:auto; flex:initial; }
.stations-table { width:100%; border-collapse:collapse; font-size:12px; text-align:right; white-space:nowrap; }
.stations-table caption { text-align:left; }
.stations-table th,.stations-table td { border-bottom:1px solid var(--line); padding:15px 13px; }
.stations-table thead { background:var(--surface-alt); font-size:10px; color:var(--muted); }
.stations-table thead small { display:block; font-size:9px; margin-top:5px; font-weight:500; }
.stations-table tbody th { text-align:left; min-width:265px; max-width:300px; white-space:normal; padding:15px 24px; border-right:2px solid var(--line); box-shadow:8px 0 18px -18px #10253780; }
.stations-table thead th:first-child { text-align:left; min-width:265px; padding:15px 24px; border-right:2px solid var(--line); box-shadow:8px 0 18px -18px #10253780; }
.stations-table tbody th+td,.stations-table thead th:first-child+th { padding-left:20px; }
.stations-table tbody th>button { padding:0; border:0; background:transparent; text-align:left; min-height:32px; font-weight:700; line-height:1.5; font-size:12px; }
.stations-table tbody th>button:hover { color:var(--blue); }
.stations-table tbody th>button small { display:flex; gap:5px; color:var(--muted); font-size:9px; font-weight:500; }
.stations-table tbody th .icon { width:12px; height:12px; }
.table-page-link { display:block; color:var(--blue); font-weight:500; font-size:9px; min-height:24px; padding-top:5px; }
.stations-table td>span { font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
.stations-table td[data-column="temp"]>span,
.stations-table td[data-column="hum"]>span,
.stations-table td[data-column="wind"]>span,
.stations-table td[data-column="rain"]>span { font-weight:800; }
.stations-table td.invalid,.stations-table td.unknown,.stations-table td.absent { color:var(--muted); }
.table-update { font-size:10px; color:var(--muted); text-align:left; min-width:123px; }
.table-update>small { display:block; font-size:9px; margin-top:5px; }
.mobile-unit { display:none; }
.table-orientation-note { display:none; }
.mobile-locality-menu { display:none; }
.panel-bottom { background:var(--surface-alt); margin-top:0; }
body.view-stations .toolbar,body.view-webcams .toolbar,body.view-webcams .network-extremes { display:none; }
body.view-stations .network-extremes { display:none; }
.stations-table thead th:first-child { position:sticky; left:0; z-index:2; background:var(--surface-alt); }
.stations-table tbody th { position:sticky; left:0; z-index:1; background:var(--surface); }
.camera-media,.camera-placeholder { background:var(--surface-alt); color:var(--muted); }
.camera-placeholder[hidden] { display:none!important; }
.camera-time-note,.location-precision,.location-snapshot,.detail-disclaimer { color:var(--muted); }
.detail-dialog { width:min(1000px,calc(100% - 48px)); border-radius:18px; }
.detail-top { padding:16px 25px; }
.detail-demo { background:var(--surface-alt); color:var(--muted); }
.icon-button { background:var(--surface-alt); color:var(--muted); }
.weather-widget { border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:22px; }
.weather-widget-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:14px 17px; background:var(--surface-alt); border-bottom:1px solid var(--line); }
.weather-widget-top h2 { font-size:13px; font-weight:700; letter-spacing:0; }
.weather-widget-top>span { display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); }
.weather-widget-top .icon { width:13px; height:13px; }
.weather-columns { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto auto; }
.weather-column { display:grid; grid-template-rows:subgrid; grid-row:span 2; min-width:0; border-right:1px solid var(--line); border-top:3px solid #e99460; }
.weather-primary { min-width:0; }
.weather-column:nth-child(2) { border-top-color:#62b4c8; }
.weather-column:nth-child(3) { border-top-color:#74b5a1; }
.weather-column:nth-child(4) { border-right:0; border-top-color:#739fec; }
.weather-column h3 { display:flex; justify-content:center; align-items:center; gap:6px; font-size:12px; padding:19px 12px 12px; font-weight:600; }
.weather-column h3 .icon { width:18px; height:18px; color:var(--muted); }
.weather-main { font-size:38px; line-height:1.3; text-align:center; font-weight:750; letter-spacing:-1px; padding:0 8px 18px; font-variant-numeric:tabular-nums; }
.weather-main small { font-size:13px; letter-spacing:0; font-weight:500; margin-left:3px; color:var(--muted); }
.weather-main.invalid,.weather-main.unknown,.weather-main.absent { color:var(--muted); }
.weather-unavailable { color:var(--muted); font-size:10px; padding:0 10px 12px; text-align:center; }
.weather-secondary { background:var(--surface-alt); border-top:1px solid var(--line); padding:12px; min-width:0; }
@supports not (grid-template-rows:subgrid) {
  .weather-column { display:flex; flex-direction:column; }
  .weather-primary { min-height:145px; }
  .weather-secondary { flex:1; }
}
.weather-sub { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px; font-size:10px; line-height:1.6; padding:4px 0; }
.weather-sub>span { color:var(--muted); }
.weather-sub strong { font-variant-numeric:tabular-nums; font-size:12px; }
.weather-sub strong small { color:var(--muted); font-size:9px; margin-left:2px; font-weight:500; }
.weather-sub>small { width:100%; color:var(--muted); font-size:9px; }
.rain-only-widget { margin-top:22px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--surface); }
.rain-only-heading { display:flex; align-items:center; gap:9px; padding:15px 18px; border-bottom:1px solid var(--line); color:var(--reading-rain); font-size:12px; font-weight:800; }
.rain-only-heading .icon { width:17px; height:17px; }
.rain-only-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.rain-only-reading { display:flex; flex-direction:column; gap:9px; min-width:0; padding:19px 21px 22px; }
.rain-only-reading+ .rain-only-reading { border-left:1px solid var(--line); }
.rain-only-reading>span { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }
.rain-only-reading>span .icon { width:15px; height:15px; color:var(--reading-rain); }
.rain-only-reading strong { color:var(--reading-rain); font-size:clamp(29px,4vw,43px); line-height:1.1; font-variant-numeric:tabular-nums; }
.rain-only-reading strong small { margin-left:5px; font-size:14px; font-weight:500; }
.rain-only-reading strong.unknown,.rain-only-reading strong.missing,.rain-only-reading strong.invalid { color:var(--muted); }
.rain-only-reading>small { color:var(--muted); font-size:11px; line-height:1.5; }
.rain-only-source { padding:13px 18px; border-top:1px solid var(--line); background:var(--surface-alt); color:var(--muted); font-size:10px; line-height:1.5; }
.rain-only-source a { display:inline-flex; align-items:center; gap:3px; color:var(--blue); font-weight:700; }
.rain-only-source a .icon { width:11px; height:11px; }
@media(max-width:420px) { .rain-only-grid { grid-template-columns:1fr; } .rain-only-reading+ .rain-only-reading { border-left:0; border-top:1px solid var(--line); } }
.station-metadata { display:grid; grid-template-columns:repeat(3,1fr); padding:17px 0; gap:16px; border-bottom:1px solid var(--line); margin:5px 0 24px; }
.station-metadata dt { font-size:10px; color:var(--muted); margin-bottom:5px; }
.station-metadata dd { margin:0; font-size:12px; line-height:1.6; }
.station-photos { margin-top:28px; padding-top:23px; border-top:1px solid var(--line); }
.station-photos-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.station-photos-heading h2 { font-size:20px; letter-spacing:-.35px; }
.station-photos-heading span { color:var(--muted); font-size:10px; }
.station-photos>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.station-photos figure { min-width:0; margin:0; }
.station-photos img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:11px; background:var(--surface-alt); }
.station-photos figcaption { padding:7px 2px 0; color:var(--muted); font-size:10px; line-height:1.5; }
.station-graphs { margin-top:30px; }
.station-graphs>p { color:var(--muted); font-size:12px; line-height:1.6; }
.load-graphs { display:inline-flex; gap:10px; align-items:center; min-height:44px; margin-top:15px; border:1px solid var(--line); color:var(--blue); background:var(--blue-soft); padding:12px 16px; border-radius:9px; font-size:12px; }
.graphs-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:17px; }
.graph-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; padding:15px; }
.graph-card h3 { font-size:12px; margin-bottom:12px; }
.graph-card img { display:block; width:100%; height:auto; }
.graph-card iframe { width:100%; height:270px; border:0; }
.graph-card a,.graph-card p { display:block; font-size:11px; line-height:1.6; color:var(--blue); padding-top:10px; }
.location-surface { background:var(--surface); }
.detail-page-main { max-width:1220px; }
.webcam-only-note { background:var(--surface-alt); color:var(--muted); }
.publication-note { background:var(--surface-alt); color:var(--muted); border-left:3px solid #c79543; }
.info-symbol { background:var(--blue-soft); }
.full-page-link { background:#2563eb; }
footer { border-color:var(--line); }
.footer-brand,.footer-brand>span,.footer-links,.page-back { color:var(--muted); }
@media(max-width:1150px) {
  .header { padding:0 24px; gap:14px; }
  .original-logo { width:200px; }
  .metric-filters { gap:12px; }
  .network-extremes { grid-template-columns:1fr; }
  .network-extreme>span,.network-extreme>small { font-size:11px; }
  .network-extreme:not(:disabled)>small { font-size:calc(11px + 1pt); }
  .map-key>span { display:block; font-size:10px; }
}
@media(max-width:850px) {
  main { padding:22px 20px 0; }
  .original-logo { width:180px; }
  .page-heading { display:block; }
  .metric-filters { grid-template-columns:1fr 1fr; gap:15px; }
  .metric-filters button { min-height:40px; font-size:12px; }
  .weather-columns { grid-template-columns:1fr 1fr; }
  .weather-column:nth-child(2) { border-right:0; }
  .weather-main { font-size:36px; }
  .weather-sub { font-size:11px; }
  .weather-sub strong { font-size:13px; }
}
@media(max-width:680px) {
  .header { height:auto; padding:14px 16px 0; column-gap:14px; row-gap:8px; flex-wrap:wrap; }
  .original-logo { width:180px; }
  .theme-menu>summary { width:40px; height:40px; }
  .main-nav { margin:0; height:auto; }
  .header .nav-button { min-height:48px; padding:10px 5px; font-size:11px; gap:5px; }
  .header .nav-button.active { background:transparent; border-bottom-color:var(--blue); }
  .nav-button .icon { width:16px; }
  main { padding:20px 12px 0; }
  h1 { font-size:26px; }
  .toolbar { padding:14px 10px 4px; }
  .metric-filters { gap:12px 10px; }
  .metric-category { font-size:11px; margin-bottom:6px; }
  .metric-filters button { font-size:10px; padding:8px 4px; min-height:40px; }
  #map { height:560px; }
  .map-area-label { padding:10px; font-size:9px; left:10px; top:12px; }
  .map-area-label small { font-size:9px; }
  .reset-map { right:10px; top:12px; }
  .map-key { left:10px; padding:12px; bottom:30px; }
  .map-key>span { display:none; }
  .network-extremes { padding:16px 12px; gap:21px; }
  .extremes-group>div { grid-template-columns:1fr 1fr; }
  .network-extreme { padding:12px; }
  .network-extreme>span,.network-extreme>small { font-size:10px; }
  .network-extreme:not(:disabled)>small { font-size:calc(10px + 1pt); }
  .list-header { padding:21px 16px 16px; }
  .search-field { margin:0 16px 16px; }
  .station-list,body.view-stations .station-list { padding:0 12px 14px; overflow:visible; }
  .stations-table,.stations-table tbody { display:block; }
  .stations-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .stations-table tr { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-bottom:16px; white-space:normal; }
  .stations-table tbody th { grid-column:1/-1; min-width:0; max-width:none; padding:15px; background:var(--surface-alt); display:flex; justify-content:space-between; gap:10px; align-items:center; }
  .stations-table tbody th { position:static; }
  .stations-table tbody th>button { font-size:14px; }
  .stations-table td { padding:10px 14px; text-align:left; }
  .stations-table td:before { content:attr(data-label); display:block; font-size:10px; color:var(--muted); margin-bottom:6px; }
  .stations-table td>span { font-size:19px; }
  .mobile-unit { display:inline; font-size:10px; color:var(--muted); margin-left:3px; }
  .table-update { grid-column:1/-1; font-size:12px; border:0!important; }
  .table-update>small { display:inline; margin-left:8px; }
  .table-page-link { font-size:10px; min-height:44px; display:flex; align-items:center; white-space:nowrap; }
  .detail-dialog { width:100%; max-width:100%; max-height:94dvh; margin:auto 0 0; border-radius:20px 20px 0 0; }
  #station-detail { padding:0 15px 25px; }
  .detail-top { padding:13px 15px; }
  .detail-title { font-size:27px; }
  .detail-meta { font-size:11px; line-height:1.7; }
  .weather-widget-top { padding:13px 12px; gap:8px; }
  .weather-widget-top>span { font-size:9px; flex-wrap:wrap; }
  .weather-column h3 { font-size:11px; padding:16px 7px 12px; }
  .weather-column h3 .icon { width:15px; }
  .weather-main { font-size:32px; }
  .weather-main small { font-size:11px; }
  .weather-secondary { padding:10px; }
  .weather-sub { font-size:10px; }
  .weather-sub strong { font-size:12px; }
  .weather-sub strong small { font-size:8px; }
  .location-surface { padding:21px 14px; }
  .station-metadata { grid-template-columns:1fr; gap:14px; }
  .graphs-grid { grid-template-columns:1fr; }
  .graph-card iframe { height:240px; }
  .section-heading { flex-wrap:wrap; }
}
@media(max-width:360px) { .original-logo { width:154px; } .header { gap:8px; } .more-menu summary { font-size:11px; } }

/* Letture e picchi: gli stessi colori seguono filtri, mappa, tabella e schede. */
:root { --reading-now:#176c65; --reading-now-soft:#e8f6f1; --reading-high:#b8333b; --reading-high-soft:#fff0ed; --reading-low:#245ab4; --reading-low-soft:#edf3ff; --reading-rain:#126b98; --reading-rain-soft:#eaf6fb; }
:root[data-theme="dark"] { --reading-now:#82dfc9; --reading-now-soft:#1d423f; --reading-high:#ffaaa5; --reading-high-soft:#442e39; --reading-low:#a9c9ff; --reading-low-soft:#273e60; --reading-rain:#9bd8f7; --reading-rain-soft:#234157; }

/* Storico: una serie verificata, con vuoti espliciti e comandi adatti al tocco. */
:root { --chart-temp:#bd543f; --chart-hum:#2671bc; --chart-wind:#127d70; --chart-rain:#1879ad; }
:root[data-theme="dark"] { --chart-temp:#ffa08a; --chart-hum:#89bfff; --chart-wind:#7adbc5; --chart-rain:#8dd7ff; }
.history-section { margin-top:28px; padding:23px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.history-heading { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.history-kicker { display:block; margin-bottom:5px; color:var(--blue); font-size:10px; font-weight:800; letter-spacing:1.1px; }
.history-heading h2 { font-size:22px; letter-spacing:-.6px; }
.history-origin { color:var(--muted); font-size:11px; }
.history-intro,.history-unavailable>p { max-width:680px; margin:10px 0 19px; color:var(--muted); font-size:12px; line-height:1.65; }
.history-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-bottom:17px; border-bottom:1px solid var(--line); }
.history-metrics,.history-periods { display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:10px; background:var(--surface-alt); }
.history-controls button { min-height:39px; padding:8px 12px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:12px; font-weight:650; cursor:pointer; }
.history-controls button:hover { color:var(--ink); }
.history-controls button[aria-pressed=true] { color:var(--blue); background:var(--surface); box-shadow:0 1px 5px #102b4c1b; }
.history-content { min-height:277px; }
.history-loading,.history-empty { display:grid; align-content:center; min-height:250px; padding:24px; border-radius:10px; color:var(--muted); font-size:12px; line-height:1.6; text-align:center; }
.history-loading:before { content:""; width:24px; height:24px; margin:0 auto 13px; border:2px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:history-spin .8s linear infinite; }
@keyframes history-spin { to { transform:rotate(360deg); } }
.history-empty strong { color:var(--ink); font-size:14px; }
.history-empty p { margin:6px auto 0; max-width:420px; }
.history-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; margin:16px 0 20px; }
.history-stats>div { min-width:0; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:var(--surface-alt); }
.history-stats span,.history-stats em { display:block; color:var(--muted); font-size:10px; font-style:normal; }
.history-stats strong { display:block; margin:5px 0 2px; color:var(--history-color); font-size:22px; line-height:1.15; font-variant-numeric:tabular-nums; }
.history-stats strong small { margin-left:4px; color:var(--muted); font-size:11px; font-weight:500; }
.history-stats .history-stat-min { border-color:var(--reading-low); background:var(--reading-low-soft); }
.history-stats .history-stat-min span,.history-stats .history-stat-min strong,.history-stats .history-stat-min strong small { color:var(--reading-low); }
.history-stats .history-stat-max { border-color:var(--reading-high); background:var(--reading-high-soft); }
.history-stats .history-stat-max span,.history-stats .history-stat-max strong,.history-stats .history-stat-max strong small { color:var(--reading-high); }
.history-graph { display:grid; grid-template-columns:43px minmax(0,1fr); gap:8px; }
.history-y-labels { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; padding:0 0 1px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.history-plot { position:relative; min-width:0; }
.history-plot svg { display:block; width:100%; height:200px; overflow:hidden; touch-action:pan-y; cursor:crosshair; }
.history-plot svg:focus-visible,.comparison-plot svg:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:3px; }
.history-grid { fill:none; stroke:var(--line); stroke-width:1; vector-effect:non-scaling-stroke; }
.history-lines path { fill:none; stroke:var(--history-color); stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.history-single { fill:var(--history-color); }
.chart-guide { position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--history-color); opacity:.55; pointer-events:none; }
.history-point,.comparison-point { position:absolute; z-index:2; width:14px; height:14px; border:2px solid var(--surface); border-radius:50%; background:var(--history-color); box-shadow:0 0 0 2px var(--surface-alt),0 2px 8px #10233b55; transform:translate(calc(-50% + var(--marker-offset,0px)),-50%); pointer-events:none; }
.chart-timeline-dot { position:absolute; z-index:2; bottom:-5px; width:10px; height:10px; border:2px solid var(--surface-alt); border-radius:50%; background:var(--history-color); transform:translateX(-50%); pointer-events:none; }
.chart-guide[hidden],.history-point[hidden],.comparison-point[hidden],.chart-timeline-dot[hidden],.history-tooltip[hidden] { display:none; }
.history-tooltip { position:absolute; top:11px; z-index:1; padding:6px 9px; border-radius:7px; background:var(--ink); color:var(--surface); white-space:nowrap; font-size:10px; pointer-events:none; box-shadow:0 5px 14px #1224432b; }
.history-x-labels { display:flex; justify-content:space-between; padding:5px 0 0 51px; color:var(--muted); font-size:10px; }
.chart-interaction-hint { margin:9px 0 0 51px; color:var(--muted); font-size:10px; line-height:1.4; }
.history-rain-note { margin:10px 0 0 51px; color:var(--muted); font-size:10px; line-height:1.5; }
.history-foot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-top:17px; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.5; }
.history-source { color:var(--blue); font-weight:700; }
.history-unavailable { padding-bottom:18px; background:var(--surface-alt); }
.history-unavailable>p { margin-bottom:0; }
@media(max-width:650px) {
  .history-section { padding:17px 13px; margin-top:20px; }
  .history-heading h2 { font-size:19px; }
  .history-controls { display:block; }
  .history-metrics,.history-periods { width:100%; justify-content:space-between; }
  .history-periods { margin-top:8px; }
  .history-controls button { flex:1; min-height:44px; padding:8px 6px; font-size:11px; }
  .history-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
  .history-stats>div { padding:10px 8px; }
  .history-stats strong { font-size:17px; }
  .history-stats span,.history-stats em { font-size:9px; }
  .history-graph { grid-template-columns:32px minmax(0,1fr); gap:5px; }
  .history-x-labels { padding-left:37px; }
  .history-section .chart-interaction-hint { margin-left:37px; }
  .history-rain-note { margin-left:37px; }
}
@media(prefers-reduced-motion:reduce) { .history-loading:before { animation:none; } }

/* Confronto della rete: stessa grammatica dello storico, più serie e selezione compatta. */
:root { --compare-1:#3269c9; --compare-2:#c75d3c; --compare-3:#178273; --compare-4:#9a721e; }
:root[data-theme="dark"] { --compare-1:#91baff; --compare-2:#ffab87; --compare-3:#79deca; --compare-4:#edd079; }
.comparison-jump { display:none; }
body.view-stations .comparison-jump { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin:0 22px 18px; color:var(--blue); font-size:12px; font-weight:800; }
.comparison-jump:hover { text-decoration:underline; }
.comparison-section { min-width:0; padding:28px 28px 30px; border-top:1px solid var(--line); background:var(--surface); }
.comparison-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:20px; }
.comparison-heading h2 { margin:4px 0 0; font-size:clamp(22px,2.25vw,30px); line-height:1.15; letter-spacing:-.045em; }
.comparison-heading p { max-width:390px; color:var(--muted); font-size:12px; line-height:1.55; text-align:right; }
.comparison-controls { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.comparison-control-group { display:flex; flex-wrap:wrap; gap:4px; padding:4px; border-radius:10px; background:var(--surface-alt); }
.comparison-control-group button { min-height:38px; padding:8px 13px; border:0; border-radius:7px; color:var(--muted); background:transparent; font-size:12px; font-weight:750; }
.comparison-control-group button:hover { color:var(--ink); }
.comparison-control-group button[aria-pressed="true"] { color:var(--blue); background:var(--surface); box-shadow:0 1px 6px #102b4c20; }
.comparison-selection { display:grid; gap:15px; padding:18px 0 19px; }
.comparison-picker { position:relative; width:max-content; max-width:100%; z-index:5; }
.comparison-picker summary { display:flex; align-items:center; gap:12px; min-height:42px; padding:9px 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface-alt); color:var(--ink); font-size:12px; font-weight:800; cursor:pointer; list-style:none; }
.comparison-picker summary::-webkit-details-marker { display:none; }
.comparison-picker summary strong { color:var(--blue); font-variant-numeric:tabular-nums; }
.comparison-picker summary:after { content:"⌄"; margin-left:5px; color:var(--muted); font-size:17px; line-height:1; transition:transform .2s; }
.comparison-picker[open] summary:after { transform:rotate(180deg); }
.comparison-picker-panel { position:absolute; top:calc(100% + 7px); left:0; width:min(430px,calc(100vw - 48px)); padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface); box-shadow:0 15px 42px #10233b33; }
.comparison-search { display:grid; gap:6px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.03em; }
.comparison-search input { width:100%; min-height:39px; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface-alt); color:var(--ink); font-size:13px; }
.comparison-options { display:grid; gap:2px; max-height:260px; margin-top:9px; overflow-y:auto; }
.comparison-option { display:flex; align-items:center; gap:10px; min-height:36px; padding:6px 8px; border-radius:7px; color:var(--ink); font-size:12px; cursor:pointer; }
.comparison-option:hover { background:var(--surface-alt); }
.comparison-option input { width:16px; height:16px; margin:0; accent-color:var(--blue); }
.comparison-option:has(input:disabled) { opacity:.5; cursor:not-allowed; }
.comparison-no-results { padding:9px; color:var(--muted); font-size:12px; }
.comparison-legend { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:9px; }
.comparison-legend-item { display:grid; grid-template-columns:19px minmax(0,1fr) auto 23px; align-items:start; gap:8px; min-width:0; padding:13px 10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-alt); }
.comparison-swatch { width:12px; height:12px; margin-top:4px; border:2px solid var(--series-color); border-radius:50%; background:var(--series-color); box-shadow:0 0 0 3px color-mix(in srgb,var(--series-color) 17%,transparent); }
.comparison-legend-item strong { display:block; min-width:0; overflow:hidden; color:var(--ink); font-size:12px; line-height:1.4; white-space:nowrap; text-overflow:ellipsis; }
.comparison-legend-item small { grid-column:2/-1; min-width:0; margin-top:0; color:var(--muted); font-size:9px; line-height:1.4; white-space:nowrap; }
.comparison-legend-item b { color:var(--series-color); font-size:13px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.comparison-legend-item button { width:23px; height:23px; padding:0; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:20px; line-height:1; }
.comparison-legend-item button:hover { background:var(--surface); color:var(--ink); }
.comparison-chart { min-height:370px; padding:18px 18px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-alt); }
.comparison-chart .history-loading,.comparison-chart .history-empty { min-height:330px; }
.comparison-graph { display:grid; grid-template-columns:44px minmax(0,1fr); gap:9px; }
.comparison-plot { position:relative; min-width:0; }
.comparison-plot svg { display:block; width:100%; height:260px; overflow:hidden; touch-action:pan-y; cursor:crosshair; }
.comparison-point { width:13px; height:13px; background:var(--series-color); }
.comparison-plot .chart-timeline-dot { background:var(--blue); }
.comparison-series path { fill:none; stroke:var(--series-color); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.comparison-series circle { fill:var(--series-color); }
.comparison-series:nth-of-type(3) path { stroke-dasharray:10 4; }
.comparison-series:nth-of-type(4) path { stroke-dasharray:3 5; }
.comparison-cursor { stroke:var(--muted); stroke-width:1; stroke-dasharray:4 5; vector-effect:non-scaling-stroke; }
.comparison-x-labels { display:flex; justify-content:space-between; gap:8px; margin:6px 0 0 53px; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.comparison-chart .chart-interaction-hint { margin:9px 0 12px 53px; }
.comparison-readout { display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; min-height:45px; padding:10px 12px; border-radius:9px; background:var(--surface); }
.comparison-readout>strong { color:var(--ink); font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.comparison-readout>div { display:flex; gap:7px 15px; flex-wrap:wrap; }
.comparison-readout span { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:10px; }
.comparison-readout i { width:7px; height:7px; border-radius:50%; background:var(--series-color); }
.comparison-readout b { color:var(--series-color); font-variant-numeric:tabular-nums; }
.comparison-rain-note { margin:11px 0 0 53px; color:var(--muted); font-size:10px; line-height:1.5; }
.comparison-status { min-height:18px; margin-top:10px; color:var(--muted); font-size:10px; line-height:1.5; }
@media(max-width:800px) {
  .comparison-section { padding:21px 16px 24px; }
  .comparison-heading { display:block; }
  .comparison-heading p { max-width:none; margin-top:7px; text-align:left; }
  .comparison-controls { display:grid; grid-template-columns:1fr; }
  .comparison-control-group { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .comparison-control-group button { min-width:0; padding:8px 5px; font-size:11px; }
  .comparison-graph { grid-template-columns:35px minmax(0,1fr); gap:5px; }
  .comparison-x-labels { margin-left:40px; }
  .comparison-chart .chart-interaction-hint { margin-left:40px; }
  .comparison-rain-note { margin-left:40px; }
}
@media(max-width:480px) {
  body.view-stations .comparison-jump { margin:0 12px 13px; font-size:11px; }
  .comparison-section { padding:19px 10px 22px; }
  .comparison-control-group button { font-size:10px; }
  .comparison-picker { width:100%; }
  .comparison-picker-panel { width:100%; }
  .comparison-legend { grid-template-columns:1fr; gap:6px; }
  .comparison-chart { padding:12px 9px; }
  .comparison-plot svg { height:215px; }
  .comparison-x-labels span:nth-child(2) { display:none; }
  .comparison-readout { align-items:start; flex-direction:column; gap:5px; }
  .comparison-readout>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .comparison-readout span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
}
.metric-filters button[data-metric="temp"][aria-pressed="true"],.metric-filters button[data-metric="hum"][aria-pressed="true"],.metric-filters button[data-metric="wind"][aria-pressed="true"],.metric-filters button[data-metric="dew"][aria-pressed="true"],.metric-filters button[data-metric="rain"][aria-pressed="true"],.metric-filters button[data-metric="rr"][aria-pressed="true"] { background:var(--reading-now); color:var(--surface); box-shadow:none; }
.metric-filters button[data-metric="lowtemp"][aria-pressed="true"] { background:var(--reading-low); color:var(--surface); box-shadow:none; }
.metric-filters button[data-metric="hitemp"][aria-pressed="true"],.metric-filters button[data-metric="hihum"][aria-pressed="true"],.metric-filters button[data-metric="hiwind"][aria-pressed="true"] { background:var(--reading-high); color:var(--surface); box-shadow:none; }
:root[data-theme="dark"] .metric-filters button[aria-pressed="true"] { color:#102033; }
.metric-filters button[data-metric="lowtemp"]:not([aria-pressed="true"]) { color:var(--reading-low); }
.metric-filters button[data-metric="hitemp"]:not([aria-pressed="true"]),.metric-filters button[data-metric="hihum"]:not([aria-pressed="true"]),.metric-filters button[data-metric="hiwind"]:not([aria-pressed="true"]) { color:var(--reading-high); }
.network-extreme { position:relative; overflow:hidden; border-top:3px solid var(--accent); background:var(--tint); }
.network-extreme.tone-maximum { --accent:var(--reading-high); --tint:var(--reading-high-soft); }
.network-extreme.tone-minimum { --accent:var(--reading-low); --tint:var(--reading-low-soft); }
.network-extreme.tone-current { --accent:var(--reading-now); --tint:var(--reading-now-soft); }
.network-extreme.tone-rain { --accent:var(--reading-rain); --tint:var(--reading-rain-soft); }
.network-extreme>span,.network-extreme .icon,.network-extreme strong { color:var(--accent); }
.network-extreme strong small { color:var(--accent); opacity:.85; }
.network-extreme>small { color:var(--ink); opacity:.8; }
.network-extreme:hover { border-color:var(--accent); filter:brightness(.97); }
.stations-table thead .tone-current,.stations-table td.tone-current>span,.weather-main.tone-current,.weather-sub.tone-current strong { color:var(--reading-now); }
.stations-table thead .tone-maximum,.stations-table td.tone-maximum>span,.weather-main.tone-maximum,.weather-sub.tone-maximum strong { color:var(--reading-high); }
.stations-table thead .tone-minimum,.stations-table td.tone-minimum>span,.weather-main.tone-minimum,.weather-sub.tone-minimum strong { color:var(--reading-low); }
.weather-sub.tone-minimum>span { color:var(--reading-low); }
.weather-sub.tone-maximum>span { color:var(--reading-high); }
.weather-sub.tone-current>span { color:var(--reading-now); }
.weather-column:first-child { border-top-color:var(--reading-now); }
.weather-sub strong small,.weather-main small { color:inherit; opacity:.8; }
.pin-content.has-reading { background:var(--pin-bg); color:var(--pin-ink); border-color:var(--pin-border); }
.pin-content.stale { border-bottom:3px solid #c79035; }
.map-shell,#map { background:#edf3ed; }
.map-key { gap:14px; flex-wrap:wrap; max-width:calc(100% - 115px); }
.map-key>span { display:inline-flex; align-items:center; gap:7px; }
.boundary-key { white-space:nowrap; }
.boundary-key i { width:19px; border-top:3px solid #216b6a; }
.map-zoom-hint { color:var(--muted); white-space:nowrap; }
.camera-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:0 22px 30px; }
.camera-card { border-radius:10px; box-shadow:0 4px 18px #1429460b; }
.camera-media { width:100%; border:0; padding:0; text-align:left; cursor:zoom-in; font:inherit; }
.camera-media:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.camera-links button { display:inline-flex; align-items:center; border:0; background:var(--blue-soft); color:var(--blue); border-radius:6px; padding:6px 9px; min-height:34px; font-size:10px; font-weight:700; }
.camera-links button:hover { outline:1px solid var(--blue); }
.camera-media.is-offline { background:#a9b0b3; }
.camera-media.is-offline .camera-placeholder { background:linear-gradient(155deg,#cdd1d2 0 42%,#90999d 42% 63%,#6c797e 63% 100%); color:#344046; filter:grayscale(1); }
.camera-media.is-offline .camera-placeholder .icon { width:52px; height:52px; opacity:.45; }
.camera-media.is-offline .camera-placeholder>span { display:none; }
.camera-offline-stamp { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); min-width:72%; text-align:center; padding:13px 14px; background:#17212adc; color:white; border:1px solid #ffffff70; border-radius:7px; font-size:14px; letter-spacing:.11em; font-weight:800; box-shadow:0 5px 20px #18263255; }
.camera-offline-stamp small { display:block; margin-top:6px; font-size:9px; font-weight:500; letter-spacing:0; }
.camera-media-dialog { width:min(1120px,calc(100% - 24px)); max-width:calc(100vw - 24px); max-height:96dvh; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--surface); color:var(--ink); box-shadow:0 25px 80px #07132566; }
.camera-media-dialog::backdrop { background:#0b1725bd; backdrop-filter:blur(3px); }
.camera-media-header { min-height:48px; padding:7px 10px 7px 16px; border-bottom:1px solid var(--line); }
.camera-media-heading { display:flex; min-width:0; align-items:baseline; gap:12px; }
.camera-media-title { overflow:hidden; color:var(--ink); font-size:13px; line-height:1.25; font-weight:800; white-space:nowrap; text-overflow:ellipsis; }
.camera-media-time { flex:0 0 auto; color:var(--muted); font-size:10px; white-space:nowrap; }
@media(max-width:680px) { .camera-media-heading { flex-direction:column; gap:2px; } }
.camera-media-body { display:flex; min-height:0; max-height:calc(96dvh - 49px); padding:10px; flex-direction:column; overflow:hidden; }
#camera-media-stage { min-height:150px; max-height:calc(96dvh - 108px); background:#111f2c; border-radius:9px; overflow:auto; }
#camera-media-stage[data-media-type="image"],#camera-media-stage[data-media-type="timelapse"] { display:grid; min-height:0; place-items:center; overflow:hidden; }
#camera-media-stage iframe { display:block; width:100%; height:min(58dvh,560px); border:0; background:white; }
#camera-media-stage video { display:block; width:100%; height:auto; max-width:100%; max-height:calc(96dvh - 108px); object-fit:contain; background:#111f2c; }
.lightbox-image { display:block; width:auto; height:auto; max-width:100%; max-height:calc(96dvh - 108px); object-fit:contain; }
#camera-media-stage[data-media-type="image"] .lightbox-image { grid-area:1 / 1; }
#camera-media-stage .lightbox-image-full { opacity:0; transition:opacity .2s ease; }
#camera-media-stage .lightbox-image-full.is-ready { opacity:1; }
#camera-media-stage:has(.archive-grid),#camera-media-stage:has(.archive-message),#camera-media-stage:has(.archive-full-image) { background:var(--surface-alt); }
.archive-message { padding:50px 25px; text-align:center; color:var(--muted); font-size:13px; line-height:1.6; }
.archive-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-height:50dvh; overflow-y:auto; padding:12px; }
.archive-shot { position:relative; min-width:0; padding:0; overflow:hidden; text-align:left; border:1px solid var(--line); border-radius:8px; background:var(--surface); }
.archive-shot img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.archive-shot span { display:block; padding:8px; color:var(--ink); font-size:10px; font-weight:700; }
.archive-shot:hover { border-color:var(--blue); }
.archive-shot.image-unavailable { background:#d9dcdf; filter:grayscale(1); }
.archive-shot.image-unavailable:after { content:"Immagine non disponibile"; position:absolute; left:8px; right:8px; top:35%; text-align:center; font-size:10px; font-weight:800; color:#455159; }
.archive-shot.image-unavailable span { position:relative; z-index:1; background:var(--surface); }
.archive-more { display:block; margin:10px auto 13px; padding:10px 17px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--blue); font-size:11px; font-weight:700; }
.archive-back { margin:13px 13px 7px; padding:9px 13px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--blue); font-weight:700; font-size:11px; }
.archive-navigation { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 13px 11px; color:var(--muted); font-size:11px; }
.archive-navigation button { min-height:40px; padding:8px 12px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--blue); font-size:11px; font-weight:700; cursor:pointer; }
.archive-navigation button:disabled { color:var(--muted); opacity:.45; cursor:default; }
.archive-navigation span { text-align:center; }
.archive-full-image { display:block; max-width:calc(100% - 26px); max-height:calc(70dvh - 62px); object-fit:contain; margin:0 auto 13px; }
.archive-full-image.image-unavailable { min-height:160px; }
.camera-media-actions { display:flex; flex-wrap:wrap; gap:6px; margin:8px 4px 14px; }
.camera-media-actions button { min-height:34px; padding:6px 11px; border:1px solid var(--line); border-radius:7px; background:var(--surface-alt); color:var(--blue); font-size:10px; font-weight:700; }
.camera-media-actions button:hover { border-color:var(--blue); }
.camera-media-actions button[aria-pressed="true"] { background:var(--blue); color:white; border-color:var(--blue); }
.camera-media-body>p { color:var(--muted); font-size:11px; line-height:1.6; margin-top:12px; }
.camera-media-body>p a { color:var(--blue); text-decoration:underline; }
.stations-table thead th { vertical-align:middle; }
.stations-table thead th>button { display:flex; align-items:center; justify-content:center; gap:4px; width:100%; min-height:44px; padding:0; border:0; color:inherit; background:none; font:inherit; font-weight:800; cursor:pointer; white-space:nowrap; }
.stations-table thead th:first-child>button { justify-content:flex-start; }
.stations-table thead th>button .icon { width:12px; height:12px; flex:none; opacity:.38; }
.stations-table thead th[aria-sort]>button .icon { opacity:1; color:var(--blue); }
.stations-table thead th>button:hover { color:var(--blue); }
footer { display:block; padding-top:20px; }
.footer-main { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.privacy-control-active .footer-main { padding-left:0; }
.footer-brand>[data-current-year] { color:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; margin:0; }
.footer-brand>span:last-child { margin-left:14px; }
.footer-brand>span.footer-credit { display:inline-flex; align-items:center; gap:8px; margin-left:10px; font-size:10px; font-weight:500; letter-spacing:0; }
.footer-credit:before { content:"|"; margin-right:2px; color:var(--muted); }
.footer-credit a { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }
.footer-credit a:hover { color:var(--blue); }
.footer-privacy { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted); font:inherit; font-weight:700; cursor:pointer; padding:5px 8px; margin-left:8px; white-space:nowrap; }
.footer-privacy-icon { width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.footer-privacy:hover,.footer-privacy:focus-visible { border-color:var(--blue); color:var(--blue); background:var(--blue-soft); }
.footer-privacy:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.footer-privacy[hidden] { display:none; }
.footer-credit img { width:19px; height:19px; flex:none; border-radius:5px; }
.detail-meta { display:flex; flex-wrap:wrap; gap:5px 14px; }
.detail-meta-short { display:none; }
.detail-meta span+span:before { content:"·"; margin-right:14px; color:var(--muted); }
.station-metadata { grid-template-columns:repeat(2,minmax(0,1fr)); }
.footer-links a { display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; font-weight:700; }
.footer-links a .icon { width:16px; height:16px; color:var(--reading-now); }
.footer-links a:hover { color:var(--blue); }
.footer-stats { display:flex; flex-wrap:wrap; gap:8px 28px; border-top:1px solid var(--line); padding-top:15px; margin-top:16px; color:var(--muted); font-size:10px; }
.footer-stats strong { color:var(--ink); font-size:14px; margin-right:4px; font-variant-numeric:tabular-nums; }
.stat-label-mobile { display:none; }
@media(max-width:680px) { .stations-table thead { position:static; width:auto; height:auto; clip-path:none; display:block; padding:10px; border:1px solid var(--line); border-radius:10px; margin-bottom:12px; } .stations-table thead tr { display:flex; gap:6px; margin:0; padding:0; border:0; overflow:auto; } .stations-table thead th,.stations-table thead th:first-child { position:static; flex:none; width:auto; padding:0 7px; border:0; } .stations-table thead th>button { min-height:35px; } .stations-table thead th small { display:none; } }
@media(max-width:1150px) { .camera-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .map-zoom-hint { display:none!important; } }
@media(max-width:680px) { .camera-gallery { grid-template-columns:1fr; padding:0 12px 20px; gap:14px; } .map-key { max-width:calc(100% - 85px); } .boundary-key { font-size:9px; } .camera-media-dialog { width:calc(100% - 12px); max-width:calc(100vw - 12px); max-height:96dvh; } .camera-media-body { max-height:calc(96dvh - 49px); padding:6px; } #camera-media-stage { max-height:calc(96dvh - 100px); } .lightbox-image,#camera-media-stage video { max-height:calc(96dvh - 100px); } .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .archive-navigation { gap:6px; font-size:10px; } .archive-navigation button { padding:7px 8px; font-size:10px; } .detail-meta span+span:before { margin-right:8px; } }
@media(max-width:520px) { .detail-heading-row { align-items:flex-start; gap:12px; } .detail-page-link { justify-content:flex-end; max-width:105px; text-align:right; line-height:1.35; } }

@media(max-width:1023px) {
  body.view-stations .station-list { padding:0 8px 16px; }
  body.view-stations .stations-table { display:none; }
  .mobile-locality-menu { display:block; padding:0 4px 5px; }
  .mobile-directory-group+.mobile-directory-group { margin-top:15px; }
  .mobile-directory-group h2 { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 4px 9px; color:var(--muted); font-size:10px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; }
  .mobile-directory-group h2 span { display:grid; place-items:center; min-width:24px; height:24px; padding:0 6px; border-radius:12px; background:var(--surface-alt); color:var(--ink); font-size:10px; letter-spacing:0; }
  .mobile-directory-group ul { margin:0; padding:0; list-style:none; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface); }
  .mobile-directory-group li+li { border-top:1px solid var(--line); }
  .mobile-directory-group a { display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:55px; padding:8px 11px; color:var(--ink); }
  .mobile-directory-group a:hover { background:var(--surface-alt); }
  .directory-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:var(--blue-soft); color:var(--blue); }
  .directory-icon .icon { width:17px; height:17px; }
  .mobile-directory-group a>span:nth-child(2) { min-width:0; }
  .mobile-directory-group strong,.mobile-directory-group small { display:block; }
  .mobile-directory-group strong { overflow:hidden; font-size:13px; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
  .mobile-directory-group small { margin-top:3px; color:var(--muted); font-size:9px; line-height:1.35; }
  .mobile-directory-group a>.icon { width:14px; height:14px; color:var(--muted); }
  .directory-dot { width:8px; height:8px; border-radius:50%; }
  .directory-dot.is-live { background:#36ad83; }
  .directory-dot.is-offline { background:#d85e65; }
  .directory-reading { min-width:42px; text-align:right; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
  .directory-reading .icon { width:17px; height:17px; color:var(--blue); }
  .directory-text small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stations-table tbody th { min-width:0; max-width:none; padding:15px 14px; border-right:0; border-bottom:2px solid var(--line); box-shadow:0 8px 18px -20px #10253799; }
  .stations-table tbody th+td { padding-left:14px; }
  .stations-table tbody td:not(.table-update) { min-height:72px; padding:11px 14px; background:var(--surface); }
  .stations-table tbody td:nth-of-type(odd):not(.table-update) { border-right:1px solid var(--line); }
  .stations-table tbody td:before { margin-bottom:7px; font-size:9px; font-weight:700; letter-spacing:.025em; text-transform:uppercase; }
  .stations-table tbody td>span { font-size:20px; line-height:1; }
  .stations-table .table-update { padding:12px 14px 14px; background:var(--surface-alt); }
  .station-photos>div { grid-template-columns:1fr; }
}
@media(max-width:950px) and (orientation:landscape) {
  body.view-stations .station-list { overflow-x:auto; scrollbar-gutter:stable; }
  .stations-table { min-width:1180px; }
  .stations-table tbody th,.stations-table thead th:first-child { min-width:235px; padding-left:18px; padding-right:18px; }
  .stations-table th,.stations-table td { padding-top:12px; padding-bottom:12px; }
}

/* AdSense sizes are reserved before the request; ads.js copies them inline. */
.ad-placement { min-width:0; padding:10px 16px 12px; background:var(--surface); border-top:1px solid var(--line); }
.ad-label { display:block; margin-bottom:6px; color:var(--muted); font-size:10px; line-height:1; letter-spacing:.1em; text-transform:uppercase; }
.ad-slot { width:100%; max-width:970px; height:90px; margin-inline:auto; }
.ad-slot .adsbygoogle { display:block; width:100%; height:90px; }
.detail-ad { margin:0 0 28px; padding:13px 16px 16px; border:1px solid var(--line); border-radius:13px; }
.footer-ad { width:100%; max-width:none; margin:24px 0 0; border:1px solid var(--line); border-radius:13px; }
.footer-ad .ad-slot,.footer-ad .adsbygoogle { height:250px; }
@media(max-width:1023px) { .ad-slot,.ad-slot .adsbygoogle { height:60px; } .footer-ad .ad-slot,.footer-ad .adsbygoogle { height:90px; } }
@media(max-width:680px) {
  html { scrollbar-gutter:auto; }
  .ad-placement { padding:8px 10px 10px; }
  .ad-slot,.ad-slot .adsbygoogle { height:50px; }
  .detail-ad { margin-bottom:18px; }
  .footer-ad { width:calc(100% + 24px); margin:16px -12px 0; padding:8px 0 10px; border-inline:0; border-radius:0; }
  .footer-ad .ad-label { margin-left:9px; }
  .footer-ad .ad-slot { width:320px; max-width:100%; }
  .footer-ad .ad-slot,.footer-ad .adsbygoogle { height:100px; }
}

/* L'ordinamento evidenzia una sola colonna, anche nelle schede mobile. */
:root { --sort-head:#dfebff; --sort-cell:#f0f5ff; }
:root[data-theme="dark"] { --sort-head:#304c72; --sort-cell:#243a58; }
.stations-table thead th.sorted-column,.stations-table thead th.sorted-column:first-child { background:var(--sort-head); color:var(--blue); }
.stations-table tbody th.sorted-column,.stations-table tbody td.sorted-column { background:var(--sort-cell); box-shadow:inset 3px 0 0 var(--blue); }
.stations-table tbody td.sorted-column::before { color:var(--blue); font-weight:700; }

/* Le stazioni offline restano consultabili, ma sono distinguibili a colpo d'occhio. */
.weather-pin.station-offline { opacity:.67; }
.stations-table tbody tr.station-offline { filter:grayscale(1); }
.stations-table tbody tr.station-offline > th,
.stations-table tbody tr.station-offline > td { background:var(--surface-alt); }
.stations-table tbody tr.station-offline > .sorted-column { background:var(--sort-cell); }

/* Pagine editoriali autonome dal vecchio WordPress. */
.editorial-page { background:var(--bg); color:var(--ink); }
.editorial-main { position:relative; max-width:1600px; margin:0 auto; padding:24px 32px 56px; }
.editorial-main>.page-back { position:absolute; top:23px; right:32px; min-height:42px; margin:0; }
.editorial-intro { max-width:none; padding:0 0 22px; }
.editorial-kicker,.editorial-index { color:var(--blue); font-size:11px; letter-spacing:.14em; font-weight:800; }
.editorial-intro h1 { max-width:calc(100% - 150px); font-size:clamp(27px,3vw,38px); line-height:1.1; letter-spacing:-.045em; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.editorial-intro h1 span { color:var(--blue); }
.editorial-intro p { color:var(--muted); font-size:clamp(13px,1.2vw,17px); line-height:1.5; margin:7px 0 0; }
.editorial-panel { max-width:1280px; background:var(--surface); border:1px solid var(--line); border-radius:21px; padding:28px; margin:0 auto 22px; box-shadow:0 8px 30px #10233b08; overflow:hidden; }
.editorial-panel-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.editorial-panel h2 { font-size:clamp(24px,2.5vw,34px); line-height:1.2; letter-spacing:-.04em; margin:7px 0 10px; }
.editorial-panel p { color:var(--muted); font-size:14px; line-height:1.8; margin:0 0 13px; }
.editorial-panel-head p { margin:0; }
.editorial-panel-head>a,.editorial-action { display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-size:12px; font-weight:800; white-space:nowrap; }
.editorial-panel-head>a:hover,.editorial-action:hover { text-decoration:underline; }
.forecast-intro { padding-bottom:22px; }
.forecast-flow { display:flex; width:min(920px,100%); margin-inline:auto; padding:24px; flex-direction:column; align-items:center; gap:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 8px 30px #10233b08; }
.forecast-lamma,.forecast-ensemble,.forecast-radar { width:100%; }
.minimal-panel-action { display:flex; justify-content:center; margin-bottom:8px; }
.minimal-panel-action a { color:var(--blue); font-size:11px; font-weight:800; }
.lamma-widget-shell { position:relative; width:min(728px,100%); margin-inline:auto; overflow:hidden; border-radius:10px; background:#fff; }
.forecast-widget { position:absolute; top:0; left:50%; display:block; max-width:none; border:0; background:#fff; transform-origin:top center; }
.ensemble-image { display:block; width:100%; max-width:740px; height:auto; max-height:660px; margin-inline:auto; object-fit:contain; border-radius:10px; background:#fff; }
.radar-widget { display:block; width:100%; min-height:570px; border:0; border-radius:10px; background:#e3eaf0; }
.minimal-heading { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; margin-bottom:14px; text-align:center; }
.minimal-heading h2 { margin:0; font-size:clamp(24px,2.5vw,34px); line-height:1.2; letter-spacing:-.04em; }
.minimal-heading a { color:var(--blue); font-size:12px; font-weight:800; white-space:nowrap; }
.station-story,.station-secondary { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:36px; }
.station-story .story-copy,.station-secondary>div { padding:12px; }
.station-story figure,.station-secondary figure { margin:0; }
.station-story img,.station-secondary img { width:100%; height:auto; aspect-ratio:4/3; display:block; object-fit:cover; border-radius:14px; }
.station-story figcaption { color:var(--muted); font-size:11px; padding-top:9px; }
.station-story .editorial-action,.station-secondary .editorial-action { margin-top:16px; }
.contact-intro { padding-bottom:22px; }
.contact-panel { width:min(920px,100%); margin-inline:auto; padding:clamp(20px,3.5vw,38px); }
.donation-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; width:min(920px,100%); padding:26px clamp(20px,3.5vw,38px); background:linear-gradient(115deg,var(--surface) 57%,var(--blue-soft)); }
.donation-kicker { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.14em; }
.donation-panel h2 { margin:6px 0 9px; font-size:clamp(20px,2vw,25px); }
.donation-panel p { max-width:57ch; margin:0; font-size:13px; line-height:1.65; }
.donation-form { display:grid; justify-items:end; gap:8px; min-width:205px; }
.donation-form button { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:50px; padding:11px 18px; border:0; border-radius:10px; background:#005ea6; color:#fff; font-family:inherit; font-size:14px; font-weight:800; white-space:nowrap; cursor:pointer; box-shadow:0 4px 12px #005ea628; }
.donation-form button:hover { background:#004984; }
.donation-form button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
.donation-form button span { font-size:18px; line-height:1; }
.donation-form small { color:var(--muted); font-size:11px; line-height:1.4; text-align:right; }
.contact-panel form { display:grid; gap:22px; }
.contact-fields-two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.contact-field { display:grid; gap:9px; min-width:0; color:var(--ink); font-size:13px; font-weight:750; }
.contact-field input,.contact-field textarea { display:block; width:100%; min-width:0; padding:13px 15px; border:1px solid var(--line); border-radius:11px; background:var(--surface-alt); color:var(--ink); font-family:inherit; font-size:16px; font-weight:500; line-height:1.45; resize:vertical; }
.contact-field input { min-height:49px; }
.contact-field textarea { min-height:165px; }
.contact-field input:focus,.contact-field textarea:focus { outline:2px solid var(--blue); outline-offset:2px; border-color:var(--blue); }
.contact-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.contact-submit-row { display:flex; align-items:center; gap:16px; min-height:48px; }
.contact-submit-row button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:11px 21px; border:0; border-radius:10px; color:#fff; background:#2563eb; font-weight:800; font-size:14px; white-space:nowrap; }
.contact-submit-row button:hover { background:#174aca; }
.contact-submit-row button:disabled { opacity:.65; cursor:wait; }
.contact-submit-row p { margin:0; font-size:13px; line-height:1.5; }
.contact-success { color:#167252!important; }
.contact-error { color:#a12732!important; }
:root[data-theme="dark"] .contact-success { color:#78d4af!important; }
:root[data-theme="dark"] .contact-error { color:#ff9299!important; }
.contact-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:min(920px,100%); margin:22px auto 0; }
.editorial-ad { width:min(920px,100%); margin:24px auto 0; border:1px solid var(--line); border-radius:13px; }
.contact-links a { display:grid; grid-template-columns:47px 1fr 22px; align-items:center; gap:14px; padding:15px 17px; border:1px solid var(--line); border-radius:13px; color:var(--ink); background:var(--surface); }
.contact-links a:hover { border-color:var(--blue); box-shadow:0 5px 20px #245dc318; }
.contact-links a strong { font-size:15px; }
.contact-icon { display:grid; place-items:center; width:47px; height:47px; border-radius:12px; background:var(--blue-soft); color:var(--blue); }
.contact-icon .icon { width:22px; height:22px; }
@media(max-width:800px) { .station-story,.station-secondary { grid-template-columns:1fr; gap:20px; } .station-story .story-copy,.station-secondary>div { padding:0; } .station-story figure { order:-1; } }
@media(min-width:681px) and (max-width:850px) { .editorial-main { padding:22px 20px 45px; } .editorial-main>.page-back { top:21px; right:20px; } }
@media(max-width:550px) { .contact-fields-two,.contact-links { grid-template-columns:1fr; } .contact-panel form { gap:17px; } .contact-submit-row { align-items:stretch; flex-direction:column; gap:10px; } .contact-submit-row button { width:100%; } .contact-links { margin-top:20px; } }
@media(max-width:680px) { .editorial-main { padding:20px 12px 32px; } .editorial-main>.page-back { display:none; } .editorial-intro { padding:0 0 14px; } .editorial-panel { padding:19px; border-radius:14px; } .donation-panel { grid-template-columns:1fr; gap:19px; } .donation-form { min-width:0; justify-items:stretch; } .donation-form small { text-align:center; } .editorial-panel-head { display:block; } .editorial-panel-head>a { margin-top:13px; } .forecast-flow { padding:10px; gap:14px; border-radius:14px; } .minimal-heading { margin-bottom:9px; } .minimal-heading a { font-size:10px; } .ensemble-image { border-radius:8px; } .radar-widget { min-height:440px; border-radius:8px; } }

/* Navigazione chiara: le tre destinazioni principali restano sempre a vista. */
.more-stations-link { display:none!important; }
.nav-forecast .icon { width:18px; height:18px; }
.page-heading h1 { max-width:100%; font-size:clamp(27px,3vw,38px); line-height:1.1; letter-spacing:-.045em; white-space:nowrap; }

/* Le schede esclusivamente webcam privilegiano l'immagine e riducono la cornice. */
.detail-dialog.camera-focused { width:min(1480px,calc(100vw - 24px)); max-height:calc(100dvh - 16px); border-radius:14px; }
.camera-focused .detail-top { position:absolute; top:6px; right:6px; z-index:4; min-height:0; padding:0; background:transparent; }
.camera-focused .detail-overline { display:none; }
.camera-focused #station-detail { padding:0 10px 10px; }
.camera-focused .detail-heading-row { min-height:42px; padding:8px 52px 7px 4px; gap:14px; }
.camera-focused .detail-title { min-width:0; margin:0; font-size:clamp(18px,2vw,27px); line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.camera-focused .detail-page-link { min-height:30px; margin:0; white-space:nowrap; }
.camera-focused .locality-webcams { margin-top:0; }
.camera-focused .detail-cameras.single-camera { width:100%; }
.camera-focused .camera-card { border-radius:9px; }
.camera-focused .camera-media { min-height:0; }
.camera-focused .camera-media>img { max-height:calc(100dvh - 120px); }
.camera-focused .camera-caption { padding:8px 5px 3px; }
.camera-focused .camera-caption h3,.camera-focused .camera-caption p { display:none; }
.camera-focused .camera-links { margin-top:0; flex-wrap:nowrap; overflow-x:auto; }
.camera-focused .camera-links a,.camera-focused .camera-links button { flex:0 0 auto; white-space:nowrap; }
.location-surface .detail-cameras.single-camera { width:min(1100px,100%); }
.camera-media-dialog { width:min(1480px,calc(100% - 16px)); max-width:calc(100vw - 16px); }
.camera-media-body { padding:6px; }

@media(max-width:680px) {
  .header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; padding:12px 12px 0; gap:8px 10px; }
  .brand { min-width:0; }
  .original-logo { width:min(185px,52vw); }
  .main-nav { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; margin:0; gap:0; border-top:1px solid var(--line); }
  .header .main-nav>.nav-stations { display:none; }
  .header .main-nav .nav-button { justify-content:center; min-width:0; min-height:47px; padding:8px 3px; gap:5px; border-radius:0; font-size:clamp(10px,3vw,12px); white-space:nowrap; }
  .header .main-nav .nav-button .icon { width:16px; height:16px; }
  .more-menu { grid-column:2; grid-row:1; margin:0; }
  .theme-menu { grid-column:3; grid-row:1; }
  .more-menu nav { min-width:205px; }
  .more-menu .more-stations-link { display:flex!important; align-items:center; gap:9px; white-space:nowrap; }
  .more-menu .more-stations-link .icon { width:16px; height:16px; color:var(--blue); }
  .page-heading { overflow:hidden; }
  .page-heading h1 { font-size:clamp(17px,5.25vw,23px); letter-spacing:-.04em; white-space:nowrap; }
  .detail-dialog.camera-focused { width:100%; max-width:100%; max-height:100dvh; border-radius:14px 14px 0 0; }
  .camera-focused .detail-top { position:absolute; top:0; right:0; min-height:0; padding:5px; background:transparent; }
  .camera-focused .detail-overline { display:none; }
  .camera-focused #station-detail { padding:7px 4px 8px; }
  .camera-focused .detail-heading-row { min-height:41px; padding:2px 50px 6px 4px; gap:8px; }
  .camera-focused .detail-title { font-size:16px; }
  .camera-focused .detail-page-link { max-width:none; min-height:28px; font-size:9px; line-height:1; text-align:right; white-space:nowrap; }
  .camera-focused .camera-media>img { max-height:calc(100dvh - 126px); }
  .camera-focused .camera-links { gap:6px; padding-bottom:1px; }
  .camera-focused .camera-links a,.camera-focused .camera-links button { min-height:32px; font-size:9px; }
  .camera-caption h3,.detail-title,.detail-page-link,.camera-links a,.camera-links button { white-space:nowrap; }
  .camera-caption h3 { overflow:hidden; text-overflow:ellipsis; }
  .camera-links { flex-wrap:nowrap; overflow-x:auto; }
  .detail-meta { flex-wrap:nowrap; overflow-x:auto; white-space:nowrap; }
  .camera-media-dialog { width:calc(100% - 4px); max-width:calc(100vw - 4px); max-height:99dvh; }
  .camera-media-body { max-height:calc(99dvh - 49px); padding:3px; }
  #camera-media-stage,.lightbox-image,#camera-media-stage video { max-height:calc(99dvh - 92px); }
}

/* Anche sui tablet stretti il quarto richiamo non deve creare scorrimento orizzontale. */
@media(min-width:681px) and (max-width:950px) {
  .header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; height:auto; padding:12px 18px 0; gap:8px 12px; }
  .brand { min-width:0; }
  .original-logo { width:min(205px,36vw); }
  .main-nav { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; height:auto; margin:0; gap:0; border-top:1px solid var(--line); }
  .main-nav>.nav-stations { display:none; }
  .header .main-nav .nav-button { justify-content:center; min-width:0; min-height:48px; padding:9px 6px; border-radius:0; font-size:12px; white-space:nowrap; }
  .more-menu { grid-column:2; grid-row:1; margin:0; }
  .theme-menu { grid-column:3; grid-row:1; }
  .more-menu .more-stations-link { display:flex!important; align-items:center; gap:9px; white-space:nowrap; }
  .more-menu .more-stations-link .icon { width:16px; height:16px; color:var(--blue); }
}

/* Compact mobile reading list. */
@media(max-width:680px), (max-width:950px) and (pointer:coarse) {
  .list-header { padding-top:13px; padding-bottom:10px; }
  .search-field { margin-bottom:11px; }
  .camera-locality { display:none; }
  .mobile-directory-group h2 { margin-bottom:5px; }
  .detail-title,.location-surface .detail-title { min-width:0; font-size:clamp(16px,4.5vw,25px); }
  .detail-title>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .detail-meta-full { display:none; }
  .detail-meta-short { display:flex; flex-wrap:nowrap; white-space:nowrap; overflow:hidden; gap:0 8px; font-size:10px; }
  .detail-meta-short span { flex:none; }
  .detail-meta-short span:last-child { min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }
  .detail-meta-short span+span:before { margin-right:8px; }
  .detail-page-main { padding-top:9px; }
  .page-back { min-height:28px; margin-bottom:7px; }
  .location-surface { margin-bottom:16px; }
  .editorial-intro { padding-bottom:14px; }
  .editorial-intro h1 { max-width:100%; font-size:clamp(17px,5.25vw,23px); letter-spacing:-.04em; margin:0; }
  .editorial-intro p { font-size:13px; line-height:1.4; margin-top:5px; }
  .editorial-main { padding-bottom:26px; }
}

/* Mobile footer has two full-width text rows inside the screen edge. */
@media(max-width:680px) {
  footer { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; justify-content:stretch; width:100%; max-width:none; margin:0; padding:16px 12px 18px; }
  .footer-main { display:block; min-width:0; width:100%; }
  .footer-brand { display:block; width:max-content; max-width:100%; white-space:nowrap; font-size:clamp(8px,3vw,11px); letter-spacing:-.2px; }
  .privacy-control-active .footer-brand { font-size:clamp(8px,2.7vw,10px); }
  .footer-brand>span.footer-credit { margin-left:2px; gap:1px; font-size:clamp(8px,2.9vw,10px); }
  .privacy-control-active .footer-brand>span.footer-credit { font-size:clamp(8px,2.7vw,10px); }
  .footer-credit:before { margin-right:0; }
  .footer-credit a { gap:1px; }
  .footer-privacy { gap:2px; margin-left:2px; padding:3px 5px; }
  .footer-privacy-icon { width:12px; height:12px; }
  .footer-credit img { width:14px; height:14px; }
  .footer-links { display:none; }
  .footer-stats { display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:3px; width:100%; margin:12px 0 0; padding:10px 0 0; overflow:visible; white-space:nowrap; font-size:clamp(8px,3vw,10px); }
  .footer-stats>span { min-width:0; flex:none; }
  .footer-stats strong { font-size:clamp(10px,3.3vw,12px); margin-right:2px; }
  .stat-label-wide { display:none; }
  .stat-label-mobile { display:inline; }
}

/* La vista stazioni usa schede sintetiche fino al tablet, con dati leggibili a colpo d'occhio. */
@media(max-width:1023px) {
  body.view-stations .station-list { padding:0 12px 18px; overflow:visible; }
  .mobile-locality-menu { padding:0; }
  .mobile-directory-group+.mobile-directory-group { margin-top:18px; }
  .mobile-directory-group ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:0; border:0; border-radius:0; overflow:visible; background:transparent; }
  .mobile-directory-group li { min-width:0; }
  .mobile-directory-group li+li { border-top:0; }
  .mobile-directory-group a { height:100%; min-height:68px; grid-template-columns:8px minmax(0,1fr) auto; column-gap:8px; row-gap:5px; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
  .mobile-directory-group a:hover { border-color:var(--blue); }
  .mobile-directory-group a:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
  .mobile-directory-group strong { font-size:12px; }
  .mobile-directory-group .directory-text small { margin-top:2px; font-size:9px; }
  .directory-reading { display:flex; align-items:baseline; justify-content:flex-end; gap:2px; min-width:0; font-size:17px; line-height:1; white-space:nowrap; }
  .directory-reading.metric-temp .icon,.directory-reading.metric-rain .icon { align-self:center; width:15px; height:15px; flex:none; margin-right:2px; }
  .directory-reading.metric-temp .icon { color:var(--reading-now); }
  .directory-reading.metric-rain .icon { color:var(--reading-rain); }
  .directory-reading>small { display:inline; margin:0; color:var(--muted); font-size:10px; font-weight:700; }
  .directory-measures { grid-column:2/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; width:100%; padding-top:6px; border-top:1px solid var(--line); }
  .directory-measure { display:block; min-width:0; font-variant-numeric:tabular-nums; }
  .directory-measure-label { display:flex; align-items:center; gap:3px; min-height:14px; margin-bottom:2px; }
  .directory-measure-label .icon { width:12px; height:12px; flex:none; }
  .directory-measure.metric-rain .icon { color:var(--reading-rain); }
  .directory-measure.metric-wind .icon { color:var(--reading-now); }
  .directory-measure.metric-hum .icon { color:var(--blue); }
  .directory-measure-label small { display:block; min-width:0; margin:0; color:var(--muted); font-size:9px; line-height:1.1; white-space:nowrap; }
  .directory-measure>b { display:block; overflow:hidden; color:var(--ink); font-size:11px; line-height:1.2; font-weight:700; white-space:nowrap; text-overflow:ellipsis; }
  .directory-measure em { color:var(--muted); font-size:9px; font-style:normal; font-weight:500; }
}
@media(max-width:680px) {
  .mobile-directory-group ul { grid-template-columns:minmax(0,1fr); gap:6px; }
  .mobile-directory-group a { min-height:65px; }
  .mobile-directory-group strong { font-size:13px; }
  .directory-measure>b { font-size:12px; }
}

/* Le colonne della tabella occupano la larghezza del display senza scorrimento laterale. */
@media(min-width:1024px) {
  body.view-stations .station-list { overflow-x:visible; }
  .stations-table { width:100%; table-layout:fixed; white-space:normal; }
  .stations-table th,.stations-table td { box-sizing:border-box; min-width:0; padding:12px 8px; }
  .stations-table thead th:first-child,.stations-table tbody th { width:20%; min-width:0; max-width:none; padding:10px 10px 10px 14px; }
  .stations-table thead th:last-child,.stations-table tbody td:last-child { width:12%; }
  .stations-table tbody th+td,.stations-table thead th:first-child+th { padding-left:8px; }
  .stations-table thead th>button { display:block; position:relative; min-height:42px; padding:3px 14px; font-size:clamp(10px,.64vw,12px); line-height:1.25; text-align:center; white-space:normal; overflow-wrap:normal; }
  .stations-table thead th:first-child>button { text-align:left; }
  .stations-table thead th>button .icon { position:absolute; right:2px; top:50%; width:10px; height:10px; transform:translateY(-50%); }
  .stations-table thead small { font-size:clamp(9px,.54vw,11px); }
  .stations-table tbody th>button { font-size:clamp(16px,1vw,19px); font-weight:800; }
  .stations-table .table-page-link { font-size:clamp(9px,.58vw,11px); }
  .stations-table tbody td:not([data-column="updated"]) { text-align:center; }
  .stations-table td>span { font-size:clamp(13px,.78vw,16px); font-weight:500; }
  .stations-table td[data-column="temp"]>span,
  .stations-table td[data-column="hum"]>span,
  .stations-table td[data-column="wind"]>span,
  .stations-table td[data-column="rain"]>span { font-size:clamp(15px,.92vw,18px); font-weight:800; letter-spacing:-.025em; }
  .stations-table td.current-temperature-maximum>span,
  .stations-table td.current-temperature-minimum>span { display:inline-flex; align-items:center; justify-content:center; min-width:3.15em; min-height:3.15em; padding:.35em .5em; border:2px solid currentColor; border-radius:999px; line-height:1; }
  .stations-table td.current-temperature-maximum>span { background:color-mix(in srgb,var(--reading-high) 10%,transparent); }
  .stations-table td.current-temperature-minimum>span { background:color-mix(in srgb,var(--reading-low) 10%,transparent); }
  .stations-table .table-update { min-width:0; font-size:clamp(10px,.62vw,12px); line-height:1.4; text-align:center; overflow-wrap:anywhere; }
  .stations-table .table-update>small { font-size:clamp(9px,.54vw,11px); }

  /* Tinte leggere e continue aiutano a leggere le famiglie di misure per colonna. */
  .stations-table :is([data-column="temp"],[data-column="lowtemp"],[data-column="hitemp"]) { --column-group-color:var(--chart-temp); }
  .stations-table :is([data-column="hum"],[data-column="hihum"],[data-column="dew"]) { --column-group-color:var(--chart-hum); }
  .stations-table :is([data-column="wind"],[data-column="hiwind"]) { --column-group-color:var(--chart-wind); }
  .stations-table :is([data-column="rain"],[data-column="rr"]) { --column-group-color:var(--chart-rain); }
  .stations-table thead th:is([data-column="temp"],[data-column="lowtemp"],[data-column="hitemp"],[data-column="hum"],[data-column="hihum"],[data-column="dew"],[data-column="wind"],[data-column="hiwind"],[data-column="rain"],[data-column="rr"]):not(.sorted-column) { background:color-mix(in srgb,var(--column-group-color) 11%,var(--surface-alt)); }
  .stations-table tbody tr:not(.station-offline) td:is([data-column="temp"],[data-column="lowtemp"],[data-column="hitemp"],[data-column="hum"],[data-column="hihum"],[data-column="dew"],[data-column="wind"],[data-column="hiwind"],[data-column="rain"],[data-column="rr"]):not(.sorted-column) { background:color-mix(in srgb,var(--column-group-color) 5%,var(--surface)); }
  .stations-table :is(th,td):is([data-column="hum"],[data-column="wind"],[data-column="rain"]) { border-left:1px solid color-mix(in srgb,var(--column-group-color) 22%,var(--line)); }
}
@media(min-width:1024px) and (max-width:1279px) {
  .stations-table [data-column="hihum"],.stations-table [data-column="dew"],.stations-table [data-column="hiwind"],.stations-table [data-column="rr"] { display:none; }
  .stations-table thead th:first-child,.stations-table tbody th { width:24%; }
  .stations-table thead th:last-child,.stations-table tbody td:last-child { width:16%; }
}

/* Logo sopra e navigazione sotto, senza la riga vuota del vecchio header. */
@media(max-width:1023px) {
  .header { display:grid; grid-template-columns:minmax(0,1fr) auto auto; grid-template-rows:auto auto; align-items:center; height:auto; padding:8px 12px 0; column-gap:8px; row-gap:3px; flex-wrap:nowrap; }
  .brand { grid-column:1; grid-row:1; min-width:0; }
  .original-logo { display:block; width:clamp(162px,26vw,205px); max-width:100%; height:auto; }
  .more-menu { grid-column:2; grid-row:1; width:auto; margin:0; }
  .more-menu summary { justify-content:center; width:auto; min-height:38px; gap:5px; font-size:11px; white-space:nowrap; }
  .more-menu .more-stations-link { display:none!important; }
  .theme-menu { grid-column:3; grid-row:1; }
  .theme-menu>summary { width:38px; height:38px; }
  .main-nav { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); width:100%; min-width:0; height:auto; margin:0; gap:2px; border-top:1px solid var(--line); flex:initial; order:initial; }
  .header .main-nav .nav-button { display:flex; justify-content:center; min-width:0; min-height:42px; padding:6px 4px; gap:5px; border:0; border-radius:7px 7px 0 0; font-size:clamp(10px,1.2vw,12px); white-space:nowrap; }
  .header .main-nav>.nav-stations { display:flex; }
  .header .main-nav .nav-button .icon { display:inline-block; width:15px; height:15px; }
  .header .main-nav .nav-button.active { background:var(--blue-soft); color:var(--blue); }
}
@media(max-width:680px) {
  .header { padding:7px 10px 0; column-gap:6px; row-gap:2px; }
  .original-logo { width:clamp(150px,42vw,180px); }
  .main-nav { grid-template-columns:.85fr 1.35fr .9fr 1.1fr; gap:0; }
  .header .main-nav .nav-button { padding:5px 2px; gap:0; border-radius:7px; font-size:clamp(9px,2.5vw,11px); }
  .header .main-nav .nav-button .icon { display:none; }
  .more-menu summary { min-height:36px; }
  .theme-menu>summary { width:36px; height:36px; }
}

/* Nelle schede la quota segue il nome; lettura e modello restano sulla stessa riga. */
.detail-title { flex-direction:column; align-items:flex-start; gap:2px; }
.detail-title .detail-title-main { display:flex; align-items:center; gap:11px; max-width:100%; min-width:0; overflow:visible; white-space:normal; }
.detail-title-name { min-width:0; overflow-wrap:anywhere; }
.detail-title .detail-altitude { display:block; margin-left:1px; color:var(--muted); font-size:.42em; line-height:1.35; font-weight:600; letter-spacing:0; white-space:nowrap; }
.detail-meta.detail-meta-reading { display:flex; flex-wrap:nowrap; align-items:baseline; gap:0; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; }
.detail-meta-reading::-webkit-scrollbar { display:none; }
.detail-meta-reading span { flex:none; min-width:0; white-space:nowrap; overflow-wrap:normal; }
.detail-meta-reading span+span:before { content:"•"; margin:0 12px; color:var(--muted); }

/* La webcam segue il titolo; i comandi si trovano sotto l'immagine. */
.detail-dialog .camera-card { display:flex; flex-direction:column; }
.detail-dialog .camera-caption { order:initial; display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 14px 13px; text-align:center; }
.detail-dialog .camera-caption h3 { margin:0; }
.detail-dialog .camera-caption p { display:none; }
.detail-dialog .camera-image-time { order:initial; flex:none; margin:0; }
.detail-dialog .camera-links { order:initial; display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:7px 0 0; overflow:visible; }
.detail-dialog .camera-links a,.detail-dialog .camera-links button { flex:0 0 auto; }
.detail-dialog:not(.camera-focused) .camera-media>img { max-height:min(42dvh,420px); }

/* Dialog dedicato alle località con sole webcam. */
.detail-dialog.camera-focused { width:min(1220px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 24px); margin:auto; border-radius:16px; overflow-y:auto; }
.camera-focused .detail-top { top:10px; right:10px; }
.camera-focused #station-detail { padding:20px clamp(12px,2vw,26px) 15px; }
.camera-focused .detail-heading-row { display:block; min-height:0; margin:0 0 13px; padding:0 52px; text-align:center; }
.camera-focused .detail-title { display:flex; align-items:center; min-width:0; margin:0; font-size:clamp(18px,2.2vw,28px); line-height:1.25; white-space:normal; overflow:visible; text-overflow:clip; }
.camera-focused .detail-title-main { justify-content:center; }
.camera-focused .detail-title-name { white-space:normal; }
.camera-focused .locality-webcams { width:100%; margin:0; }
.camera-focused .detail-cameras.single-camera { width:100%; max-width:100%; }
.camera-focused .camera-card { border:0; border-radius:0; background:transparent; box-shadow:none; }
.camera-focused .camera-media,.camera-focused .camera-media.is-offline { width:100%; min-height:0; border-radius:10px; background:transparent; }
.camera-focused .camera-media>img { display:block; width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 210px); margin:auto; border-radius:8px; object-fit:contain; }
.camera-focused .camera-media:has(img[hidden]),.camera-focused .camera-media:not(:has(img)) { min-height:min(40dvh,300px); }
.camera-focused .camera-locality { display:none; }
.camera-focused .camera-offline-stamp { width:min(70%,620px); min-width:0; }
.camera-focused .camera-caption { padding:11px 0 0; }
.camera-focused .camera-caption h3,.camera-focused .camera-caption p,.camera-focused .camera-image-time { display:none; }
.camera-focused .camera-links { justify-content:center; gap:8px; margin:0; overflow:visible; }
.camera-focused .camera-links a,.camera-focused .camera-links button { min-height:35px; padding:7px 11px; white-space:nowrap; }
.camera-focused .camera-links button[data-camera-feature="image"] { background:var(--blue); color:white; }
.camera-detail-page-link { display:flex; justify-content:center; margin-top:8px; }
.camera-focused .detail-page-link { min-height:30px; margin:0; }
.camera-focused .source-pages { display:none; }

/* Il visualizzatore usa lo spazio disponibile lasciando margini e comandi fissi. */
.camera-media-dialog[open] { display:flex; flex-direction:column; width:min(1600px,calc(100vw - 32px)); max-width:calc(100vw - 32px); height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); }
.camera-media-dialog[open][data-media-type="archive"] { width:min(2200px,calc(100vw - 24px)); max-width:calc(100vw - 24px); }
.camera-media-header { flex:none; }
.camera-media-header .camera-media-heading { flex:1; min-width:0; }
.camera-media-header .camera-media-title { min-width:0; max-width:100%; }
.camera-media-header .icon-button { flex:none; }
.camera-media-dialog[open] .camera-media-body { flex:1; min-height:0; max-height:none; }
.camera-media-dialog[open] #camera-media-stage { flex:1; min-width:0; min-height:0; max-height:none; overflow-x:hidden; overflow-y:auto; }
.camera-media-dialog[open] #camera-media-stage[data-media-type="image"],.camera-media-dialog[open] #camera-media-stage[data-media-type="timelapse"] { overflow:hidden; }
.camera-media-dialog[open] .lightbox-image,.camera-media-dialog[open] #camera-media-stage video { display:block; width:100%; height:calc(100dvh - 150px); max-width:100%; max-height:100%; object-fit:contain; }
.camera-media-dialog[open] .camera-media-actions { flex:none; margin:8px 4px 2px; }
.archive-grid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); max-height:none; overflow:visible; }
.archive-full-image { max-height:calc(100dvh - 260px); }

@media(max-width:680px) {
  .detail-title .detail-altitude { font-size:.51em; }
  .detail-meta.detail-meta-reading { display:flex; flex-wrap:nowrap; font-size:clamp(7.5px,2.25vw,11px); line-height:1.6; white-space:nowrap; }
  .detail-meta-reading span+span:before { margin:0 6px; }
  .detail-heading-row { gap:7px; }
  .detail-page-link { max-width:82px; font-size:9px; }
  .detail-dialog .camera-caption { padding:8px 8px 11px; gap:4px; }
  .detail-dialog .camera-links a,.detail-dialog .camera-links button { min-height:30px; padding:5px 7px; font-size:9px; }
  .detail-dialog.camera-focused { width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); margin:auto; border-radius:14px; }
  .camera-focused #station-detail { padding:17px 9px 12px; }
  .camera-focused .detail-heading-row { min-height:0; margin-bottom:10px; padding:0 38px; }
  .camera-focused .detail-title { font-size:clamp(15px,4vw,20px); }
  .camera-focused .camera-media>img { max-height:calc(100dvh - 200px); }
  .camera-focused .camera-links { gap:6px; }
  .camera-focused .camera-links a,.camera-focused .camera-links button { min-height:32px; padding:6px 8px; font-size:9px; }
  .camera-media-dialog[open],.camera-media-dialog[open][data-media-type="archive"] { width:calc(100vw - 16px); max-width:calc(100vw - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); }
  .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:7px; }
  .archive-shot span { padding:5px; font-size:9px; }
}
@media(max-width:360px) {
  .metric-filters { grid-template-columns:1fr; gap:6px; }
  .metric-group { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:5px; }
  .metric-category { margin:0; font-size:10px; gap:4px; }
  .metric-category .icon { width:14px; height:14px; }
  .metric-group>div { min-width:0; }
  .metric-filters button { min-width:0; font-size:9px; padding:8px 2px; }
  .location-surface { padding-inline:10px; }
  .detail-meta-reading span+span:before { margin:0 4px; }
}

/* Le pagine locali usano lo stesso titolo compatto della mappa e delle webcam. */
.detail-page-main { position:relative; max-width:1600px; padding:24px 32px 56px; }
.detail-page-main>.page-back { position:absolute; top:23px; right:32px; min-height:42px; margin:0; }
.detail-page-main .location-surface { padding:0; margin-bottom:22px; border:0; border-radius:0; background:transparent; }
.detail-page-main .location-surface .detail-heading-row { margin:0; }
.detail-page-main .location-surface .detail-title { max-width:calc(100% - 150px); margin:0; font-size:clamp(27px,3vw,38px); line-height:1.1; letter-spacing:-.045em; white-space:nowrap; }
.detail-page-main .location-surface .detail-title-main,.detail-page-main .location-surface .detail-title-name { white-space:nowrap; overflow-wrap:normal; }
.detail-page-main .location-surface .detail-meta-reading { margin-top:8px; }
.detail-page-main .location-surface .weather-widget,.detail-page-main .location-surface .rain-only-widget { margin-top:20px; background:var(--surface); }
.detail-page-main .location-surface .locality-webcams { margin-top:22px; }
@media(min-width:681px) and (max-width:850px) {
  .detail-page-main { padding:22px 20px 45px; }
  .detail-page-main>.page-back { top:21px; right:20px; }
}
@media(max-width:680px) {
  .detail-page-main { padding:20px 12px 26px; }
  .detail-page-main>.page-back { display:none; }
  .detail-page-main .location-surface .detail-title { max-width:100%; font-size:clamp(17px,5.25vw,23px); letter-spacing:-.04em; }
  .detail-page-main .location-surface .detail-meta-reading { font-size:clamp(10px,2.7vw,12px); }
}
.stations-table td.current-temperature-maximum>span,
.stations-table td.current-temperature-maximum>.mobile-unit,
.directory-reading.current-temperature-maximum,
.directory-reading.current-temperature-maximum .icon,
.directory-reading.current-temperature-maximum>small { color:var(--reading-high); }
.stations-table td.current-temperature-minimum>span,
.stations-table td.current-temperature-minimum>.mobile-unit,
.directory-reading.current-temperature-minimum,
.directory-reading.current-temperature-minimum .icon,
.directory-reading.current-temperature-minimum>small { color:var(--reading-low); }

/* Webcam: su mobile e tablet il dialog segue la foto, con spazio attorno. */
@media(max-width:1023px) {
  /* La foto determina l'altezza del pulsante; il cartello resta dentro il bordo inferiore. */
  .detail-dialog .camera-media { display:block; }
  .detail-dialog:not(.camera-focused) .camera-media { min-height:54px; }
  .detail-dialog:not(.camera-focused) .camera-media:has(img[hidden]),
  .detail-dialog:not(.camera-focused) .camera-media:not(:has(img)) { min-height:170px; }
  .detail-dialog .camera-offline-stamp {
    top:auto;
    bottom:8px;
    width:max-content;
    max-width:calc(100% - 16px);
    min-width:0;
    padding:7px 10px;
    transform:translateX(-50%);
    font-size:11px;
    line-height:1.2;
  }
  .detail-dialog .camera-offline-stamp small { margin-top:3px; font-size:9px; line-height:1.2; }
  .camera-media-dialog[open],
  .camera-media-dialog[open][data-media-type="archive"] {
    width:min(760px,calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    height:fit-content;
    max-height:calc(100dvh - 40px);
    margin:auto;
    border-radius:18px;
  }
  .camera-media-dialog[open] .camera-media-body {
    flex:0 1 auto;
    max-height:calc(100dvh - 90px);
    padding:10px;
  }
  .camera-media-dialog[open] #camera-media-stage {
    flex:0 1 auto;
    max-height:calc(100dvh - 160px);
  }
  .camera-media-dialog[open] #camera-media-stage[data-media-type="image"],
  .camera-media-dialog[open] #camera-media-stage[data-media-type="timelapse"] {
    min-height:min(38vw,180px,35dvh);
    max-height:min(56dvh,520px);
  }
  .camera-media-dialog[open] .lightbox-image,
  .camera-media-dialog[open] #camera-media-stage video {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:min(56dvh,520px);
  }
  .camera-media-dialog[open][data-media-type="archive"] #camera-media-stage {
    max-height:min(58dvh,540px);
  }
  .camera-media-dialog[open] .camera-media-actions {
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:thin;
  }
  .camera-media-dialog[open] .camera-media-actions button { flex:none; min-height:40px; }
  .camera-media-dialog[open] .camera-media-header .icon-button { min-width:42px; min-height:42px; }
  .detail-dialog.camera-focused {
    width:min(760px,calc(100vw - 32px));
    max-width:calc(100vw - 32px);
    max-height:calc(100dvh - 40px);
    margin:auto;
    border-radius:18px;
  }
  .camera-focused .camera-media>img { max-height:min(50dvh,430px); }
}
@media(max-width:680px) {
  .camera-media-dialog[open],
  .camera-media-dialog[open][data-media-type="archive"],
  .detail-dialog.camera-focused {
    width:calc(100vw - 24px);
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 32px);
    border-radius:16px;
  }
  .camera-media-dialog[open] #camera-media-stage[data-media-type="image"],
  .camera-media-dialog[open] #camera-media-stage[data-media-type="timelapse"],
  .camera-media-dialog[open] .lightbox-image,
  .camera-media-dialog[open] #camera-media-stage video { max-height:min(52dvh,420px); }
  .camera-focused .camera-media>img { max-height:min(44dvh,360px); }
}

/* Visualizzatore webcam: titolo e comandi centrati sullo stesso asse della foto. */
.camera-media-dialog[open] .camera-media-header {
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 42px;
  align-items:center;
  min-height:70px;
  padding:8px 14px;
}
.camera-media-header::before { content:""; grid-column:1; }
.camera-media-dialog[open] .camera-media-heading {
  grid-column:2;
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:center;
  justify-self:stretch;
  gap:3px;
  min-width:0;
  text-align:center;
}
.camera-media-dialog[open] .camera-media-title {
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:7px;
  max-width:100%;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.2;
  letter-spacing:-.035em;
  text-align:center;
}
.camera-media-dialog[open] .camera-media-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.camera-media-dialog[open] .camera-media-altitude { flex:none; color:var(--muted); font-size:.58em; line-height:1; font-weight:700; letter-spacing:0; white-space:nowrap; }
.camera-media-dialog[open] .camera-media-subtitle {
  display:block;
  max-width:100%;
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
  font-weight:600;
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.camera-media-dialog[open] .camera-media-time { font-size:10px; line-height:1.2; }
.camera-media-dialog[open] .camera-media-header .icon-button {
  grid-column:3;
  justify-self:end;
  width:38px;
  height:38px;
  border:1px solid var(--line);
  background:var(--surface-alt);
}
.camera-media-dialog[open] .camera-media-header .icon-button:hover { color:var(--blue); border-color:var(--blue); }
.camera-media-dialog[open] .camera-media-actions {
  align-self:center;
  justify-content:center;
  width:max-content;
  max-width:100%;
  margin:11px auto 3px;
  padding:4px;
  gap:4px;
  flex-wrap:wrap;
  overflow:visible;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--surface-alt);
}
.camera-media-dialog[open] .camera-media-actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex:none;
  min-height:42px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
  font-weight:750;
  white-space:nowrap;
  transition:background .15s,color .15s,box-shadow .15s;
}
.camera-media-dialog[open] .camera-media-actions button .icon { width:15px; height:15px; }
.camera-media-dialog[open] .camera-media-actions button:hover:not([aria-pressed="true"]) { background:var(--blue-soft); color:var(--blue); }
.camera-media-dialog[open] .camera-media-actions button[aria-pressed="true"] { border-color:var(--blue); background:var(--blue); color:#fff; box-shadow:0 3px 10px #2563eb30; }
@media(max-width:680px) {
  .camera-media-dialog[open] .camera-media-header { grid-template-columns:38px minmax(0,1fr) 38px; min-height:62px; padding:7px 8px; }
  .camera-media-dialog[open] .camera-media-title { gap:5px; font-size:14px; line-height:1.2; white-space:nowrap; }
  .camera-media-dialog[open] .camera-media-subtitle { font-size:10px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .camera-media-dialog[open] .camera-media-actions { margin-top:9px; }
}
@media(max-width:420px) {
  .camera-media-dialog[open] .camera-media-actions button { gap:5px; padding:8px; font-size:10px; }
  .camera-media-dialog[open] .camera-media-actions button .icon { width:13px; height:13px; }
}

/* Web app iOS: evita che la sfocatura di sistema copra l'intestazione. */
.ios-pwa-top-blur-guard {
  position:fixed;
  inset:0 0 auto;
  height:11px;
  pointer-events:none;
  background:var(--header);
  -webkit-background-clip:text;
  background-clip:text;
}

/* Invito all'installazione: compare solo nel layout mobile e tablet. */
@media(max-width:1023px) {
  .more-menu nav .pwa-install-menu-button {
    width:100%;
    min-height:44px;
    padding:12px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:var(--ink);
    font-size:12px;
    text-align:left;
  }
  .more-menu nav .pwa-install-menu-button:hover {
    background:var(--blue-soft);
    color:var(--blue);
  }
  .pwa-install-invite {
    position:fixed;
    z-index:1200;
    left:50%;
    bottom:calc(14px + env(safe-area-inset-bottom));
    display:flex;
    align-items:center;
    gap:8px;
    width:min(300px,calc(100vw - 28px));
    min-height:60px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:999px;
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 12px 34px #07152645;
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,12px);
    transition:opacity .2s ease,transform .2s ease;
  }
  .pwa-install-invite.is-visible { opacity:1; pointer-events:auto; transform:translate(-50%,0); }
  .pwa-install-invite>img {
    flex:none;
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--blue-soft);
  }
  .pwa-install-action {
    flex:1;
    min-width:0;
    min-height:44px;
    padding:0 2px;
    border:0;
    background:transparent;
    color:var(--ink);
    font-size:12px;
    font-weight:800;
    text-align:left;
  }
  .pwa-install-dismiss {
    flex:none;
    width:44px;
    height:44px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--surface-alt);
    color:var(--muted);
    font-size:24px;
    font-weight:400;
    line-height:1;
  }
  .pwa-install-guide[open] {
    position:fixed;
    inset:auto 0 0;
    width:min(420px,calc(100vw - 28px));
    max-width:calc(100vw - 28px);
    max-height:calc(100dvh - 32px);
    margin:0 auto calc(14px + env(safe-area-inset-bottom));
    padding:18px;
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--surface);
    color:var(--ink);
    box-shadow:0 20px 50px #07152655;
  }
  .pwa-install-guide::backdrop { background:#0715267a; }
  .pwa-install-guide-heading { display:flex; align-items:center; gap:11px; margin-bottom:12px; }
  .pwa-install-guide-heading>img { width:42px; height:42px; border-radius:12px; }
  .pwa-install-guide-heading h2 { flex:1; font-size:17px; line-height:1.25; }
  .pwa-install-guide-close {
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:var(--surface-alt);
    color:var(--muted);
    font-size:24px;
    line-height:1;
  }
  .pwa-install-guide>p { color:var(--muted); font-size:13px; line-height:1.5; }
  .pwa-install-guide-steps { display:grid; gap:9px; margin:17px 0 18px; padding-left:23px; font-size:13px; line-height:1.5; }
  .pwa-install-guide-steps li { padding-left:3px; }
  .pwa-install-guide-steps li::marker { color:var(--blue); font-weight:800; }
  .pwa-install-guide-done {
    min-height:44px;
    padding:10px 17px;
    border:0;
    border-radius:10px;
    background:var(--blue);
    color:var(--surface);
    font-size:12px;
    font-weight:800;
  }
}
@media(max-width:1023px) and (prefers-reduced-motion:reduce) {
  .pwa-install-invite { transition:none; }
}