.weather-app { margin:0; background:var(--color-bg); color:var(--color-text); font:var(--text-base)/1.5 var(--font-body); overflow:hidden; }
.weather-app *, .weather-app *::before, .weather-app *::after { box-sizing:border-box; }
.weather-app [hidden] { display:none; }
.weather-app :where(button,select,input) { font:inherit; }
.weather-app button,.weather-app select { cursor:pointer; }
.weather-app button:disabled,.weather-app input:disabled { opacity:.4; cursor:not-allowed; }
.weather-app :focus-visible { outline:2px solid var(--color-accent); outline-offset:3px; }
.weather-app a { color:var(--color-map-text); text-underline-offset:3px; }
.weather-app h2,.weather-app h3,.weather-app p { margin:0; }
.weather-app h2 { font-size:var(--text-lg); font-weight:600; }.weather-app h3 { font-size:var(--text-base); font-weight:600; }
.map-layout { height:100vh; height:100dvh; display:grid; grid-template-columns:minmax(0,1fr) var(--sidebar-width); }
.map-stage { position:relative; min-width:0; min-height:0; overflow:hidden; }
#map { width:100%; height:100%; background:var(--color-map); }
.control-panel { position:fixed; right:0; top:0; bottom:0; width:var(--sidebar-width); display:flex; flex-direction:column; gap:var(--space-6); padding:var(--space-5); background:var(--color-surface); border-left:var(--border); overflow-y:auto; }
.button { min-height:var(--control-height); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); border:var(--border); border-radius:var(--radius-sm); padding:var(--space-2) var(--space-3); color:var(--color-text); background:var(--color-surface); text-decoration:none; font-weight:500; white-space:nowrap; }
.button:hover { background:var(--color-soft); }.button-icon { width:var(--control-height); min-width:var(--control-height); padding:var(--space-1); font-size:var(--text-xl); }
.location-control { display:flex; align-items:center; gap:var(--space-2); position:relative; }
.weather-app select { min-width:0; min-height:var(--control-height); padding:var(--space-2); background:var(--color-surface); color:var(--color-text); border:var(--border); border-radius:var(--radius-sm); max-width:100%; }
.location-control select { flex:1; width:100%; }.location-message { position:absolute; top:calc(100% + var(--space-2)); left:0; right:0; padding:var(--space-3); border:var(--border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-map-text); font-size:var(--text-xs); z-index:900; box-shadow:var(--shadow); }
.segments { display:flex; gap:var(--space-1); padding:var(--space-1); border:var(--border); border-radius:var(--radius-sm); }
.segments button { flex:1; min-width:0; min-height:36px; border:0; padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); color:var(--color-muted); background:transparent; font-size:var(--text-xs); font-weight:600; }.segments button.active { color:var(--color-text); background:var(--color-soft); }
.timeline { display:grid; gap:var(--space-2); }.time-label { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); min-height:24px; font-size:var(--text-xs); color:var(--color-muted); }.time-label>span { min-width:0; }.text-button { border:0; background:none; color:var(--color-good); padding:var(--space-1); min-height:32px; font-size:var(--text-xs); }
.time-controls { display:flex; align-items:center; gap:var(--space-3); }.time-controls .button { font-size:var(--text-base); }.time-controls input { flex:1; min-width:0; height:30px; margin:0; accent-color:var(--color-good); }
.compact-weather { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); color:var(--color-muted); font-size:var(--text-xs); }.compact-weather strong { display:block; font-size:var(--text-base); font-weight:500; color:var(--color-text); }.compact-weather.stale { color:var(--color-warning-text); }.compact-weather.stale strong { color:var(--color-warning-text); }
.risk-summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); width:100%; min-height:var(--control-height); padding:var(--space-3); border:var(--border); border-radius:var(--radius-sm); background:transparent; color:var(--color-muted); text-align:left; font-size:var(--text-xs); }.risk-summary[data-level="red"] { color:var(--color-alert-text); border-color:var(--color-red); }.risk-summary[data-level="orange"],.risk-summary[data-level="yellow"] { color:var(--color-warning-text); }
.model-label { grid-column:1/-1; font-size:var(--text-xs); }
.control-footer { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:auto; }.control-footer .button { font-size:var(--text-xs); }.control-footer .button-icon { font-size:var(--text-lg); }.connection { border:0; background:none; color:var(--color-muted); padding:var(--space-1); font-size:var(--text-xs); min-height:36px; text-align:left; }.connection.degraded { color:var(--color-warning-text); }
.map-actions { position:absolute; z-index:800; top:max(var(--space-4),env(safe-area-inset-top)); right:var(--space-4); display:grid; gap:var(--space-2); }.map-actions .button { background:var(--color-map-panel); }
.map-status { position:absolute; left:var(--space-4); bottom:var(--space-8); z-index:500; display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); max-width:calc(100% - 90px); padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); background:var(--color-map-panel); color:var(--color-map-muted); font-size:var(--text-xs); pointer-events:none; }#layer-title { color:var(--color-map-text); }#offline { color:var(--color-warning-text); flex-basis:100%; }
.detail-dialog { position:fixed; inset:var(--space-4) calc(var(--sidebar-width) + var(--space-4)) var(--space-4) auto; width:min(540px,calc(100vw - var(--sidebar-width) - var(--space-8))); height:fit-content; max-height:calc(100dvh - var(--space-8)); margin:0; padding:0; border:var(--border); border-radius:var(--radius); background:var(--color-surface); color:var(--color-text); box-shadow:var(--shadow); overflow:hidden; }
.detail-dialog[open] { display:flex; flex-direction:column; }.detail-dialog::backdrop { background:var(--color-dialog-backdrop); }
.dialog-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-4); flex-shrink:0; }.dialog-tabs { margin:0 var(--space-4) var(--space-3); flex-shrink:0; }.dialog-content { overflow-y:auto; overscroll-behavior:contain; padding:0 var(--space-4) var(--space-5); min-height:0; }
.setting-row { display:flex; justify-content:space-between; gap:var(--space-4); align-items:center; min-height:56px; border-bottom:var(--border); font-size:var(--text-sm); }.setting-row input { width:20px; height:20px; accent-color:var(--color-good); }.field { display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--text-sm); margin-top:var(--space-4); min-width:0; }.field select { width:100%; }.setting-section,.section-heading { margin-top:var(--space-6)!important; }.field-label { display:block; margin-bottom:var(--space-2); font-size:var(--text-sm); }.hint { font-size:var(--text-xs); color:var(--color-muted); line-height:1.65; margin-top:var(--space-3)!important; }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }.tag { font-size:var(--text-xs); color:var(--color-muted); }
.proximity-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-1) var(--space-2); padding:var(--space-3) 0; border-bottom:var(--border); }.proximity-row strong { font-size:var(--text-sm); }.proximity-row small { color:var(--color-muted); font-size:var(--text-xs); }.distance { grid-column:2; grid-row:1/3; align-self:center; font-size:var(--text-xs); text-align:right; }.distance.inside { color:var(--color-alert-text); }.level { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:var(--space-1); }.level-red { background:var(--color-red); }.level-orange { background:var(--color-orange); }.level-yellow { background:var(--color-yellow); }
.filter-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }.warning-grid { display:grid; gap:var(--space-3); margin-top:var(--space-4); }.warning-card { border:var(--border); border-left:3px solid var(--color-yellow); border-radius:var(--radius-sm); padding:var(--space-3); }.warning-card.red { border-left-color:var(--color-red); }.warning-card.orange { border-left-color:var(--color-orange); }.warning-card header { display:flex; justify-content:space-between; gap:var(--space-2); font-size:var(--text-sm); }.warning-card small { display:block; margin-top:var(--space-2); font-size:var(--text-xs); color:var(--color-muted); }.warning-card h3 { margin-top:var(--space-1); }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-4); }.metric { border-top:var(--border); padding-top:var(--space-2); }.metric span { display:block; font-size:var(--text-xs); color:var(--color-muted); }.metric strong { font-size:var(--text-xl); font-weight:500; }.metric small { color:var(--color-muted); margin-left:var(--space-1); font-size:var(--text-xs); }.station-row { display:grid; grid-template-columns:1fr auto; gap:var(--space-2); padding:var(--space-3) 0; border-bottom:var(--border); }.station-row b { font-size:var(--text-sm); }.station-row small { font-size:var(--text-xs); color:var(--color-muted); }.station-values { text-align:right; font-size:var(--text-sm); }
.source-grid { display:grid; gap:var(--space-4); }.source-row { padding-top:var(--space-3); border-top:var(--border); }.source-row a { font-size:var(--text-sm); }.source-row small { display:block; font-size:var(--text-xs); color:var(--color-muted); }.source-links { display:grid; gap:var(--space-3); margin-top:var(--space-5); font-size:var(--text-sm); }.source-link { display:inline-block; margin-top:var(--space-4); font-size:var(--text-sm); }
.loading-state,.empty-state,.error-state,.notice { padding:var(--space-3) 0; font-size:var(--text-sm); color:var(--color-muted); }.error-state { color:var(--color-alert-text); }.notice { color:var(--color-warning-text); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Component-local Leaflet presentation, without changing vendor selector precedence. */
#map .weather-basemap { filter:grayscale(1) invert(1) brightness(.72) contrast(.85); }
#map .labels-pane { z-index:450; pointer-events:none; }#map .labels-pane.is-hidden { visibility:hidden; }
#map .city-label { background:var(--color-map-panel); color:var(--color-map-text); border:0; box-shadow:none; font-size:10px; padding:1px 4px; }#map .city-label::before { display:none; }
#map .leaflet-control-attribution { font-size:9px; background:var(--color-map-panel); color:var(--color-map-muted); }#map .leaflet-control-attribution a { color:var(--color-map-text); }
#map .leaflet-bar a { background:var(--color-map-panel); color:var(--color-map-text); border-color:var(--color-map-border); width:36px; height:36px; line-height:36px; }#map .leaflet-bar a.leaflet-disabled { color:var(--color-muted); }
#map .leaflet-popup-content-wrapper,#map .leaflet-popup-tip { background:var(--color-surface); color:var(--color-text); }#map .leaflet-popup-content { font:var(--text-sm)/1.6 var(--font-body); }
#map .station-icon { border:0; background:transparent; }#map .station-badge { background:var(--color-map-panel); color:var(--color-map-text); border:1px solid var(--color-good); border-radius:var(--radius-sm); padding:2px 5px; font:10px var(--font-mono); white-space:nowrap; }#map .station-badge.stale { border-color:var(--color-orange); }
#map .you-icon { background:var(--color-info); border:3px solid var(--color-map-text); border-radius:50%; box-shadow:0 0 0 7px color-mix(in srgb,var(--color-info),transparent 75%); }#map .reference-icon { background:var(--color-accent); border:3px solid var(--color-map-text); border-radius:50%; }#map .you-label { background:var(--color-surface); color:var(--color-text); border:0; font-weight:600; }
#map .leaflet-overlay-pane .warning-shape { stroke-width:1.4; fill-opacity:.06; }#map .leaflet-overlay-pane .warning-red { stroke:var(--color-red); fill:var(--color-red); }#map .leaflet-overlay-pane .warning-orange { stroke:var(--color-orange); fill:var(--color-orange); }#map .leaflet-overlay-pane .warning-yellow { stroke:var(--color-yellow); fill:var(--color-yellow); }#map .accuracy-circle { stroke:var(--color-info); fill:var(--color-info); fill-opacity:.08; stroke-width:1; }
.weather-app.is-immersive .map-layout { grid-template-columns:1fr; }.weather-app.is-immersive .control-panel { display:none; }
@media(max-width:900px) {
  .map-layout { display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) max(20dvh,128px); }
  .control-panel { position:relative; width:auto; top:auto; bottom:auto; right:auto; padding:var(--space-2) var(--space-3) max(var(--space-2),env(safe-area-inset-bottom)); border-left:0; border-top:var(--border); display:grid; grid-template-columns:minmax(0,1fr) 92px; grid-template-rows:44px minmax(48px,1fr); gap:var(--space-1) var(--space-3); overflow:visible; }
  .location-control { position:fixed; z-index:800; top:max(var(--space-3),env(safe-area-inset-top)); left:var(--space-3); width:min(270px,calc(100vw - 80px)); padding:var(--space-1); border-radius:var(--radius-sm); background:var(--color-map-panel); }
  .location-control select { background:var(--color-map-panel); }.location-control .button { background:var(--color-map-panel); }
  .layer-control { grid-column:1; grid-row:1; padding:0; }.layer-control button { padding:var(--space-1); }
  .timeline { grid-column:1; grid-row:2; gap:0; align-content:center; }.time-label { font-size:10px; min-height:20px; }.text-button { min-height:24px; }.time-controls { gap:var(--space-2); }.time-controls .button { min-height:32px; height:32px; width:32px; min-width:32px; }.time-controls input { height:24px; }
  .compact-weather { display:none; }.risk-summary { grid-column:2; grid-row:1; padding:var(--space-1); min-height:44px; font-size:10px; line-height:1.35; }.risk-summary>span:last-child { display:none; }
  .control-footer { grid-column:2; grid-row:2; margin:0; gap:var(--space-1); align-content:center; }.control-footer .button { flex:1; padding:var(--space-1); min-height:32px; font-size:10px; }.control-footer .button-icon { flex:0 0 28px; width:28px; min-width:28px; }.connection { min-height:20px; padding:0; width:100%; font-size:9px; }
  .map-actions { right:var(--space-3); top:max(var(--space-4),env(safe-area-inset-top)); }.map-status { left:var(--space-3); max-width:calc(100% - 70px); bottom:var(--space-8); font-size:10px; }
  .detail-dialog { inset:auto var(--space-2) var(--space-2); width:auto; max-height:76dvh; border-radius:var(--radius); }.dialog-header { padding:var(--space-2) var(--space-3); }.dialog-tabs { margin:0 var(--space-3) var(--space-2); }.dialog-content { padding:0 var(--space-3) var(--space-4); }
  .weather-app.is-immersive .map-layout { grid-template-rows:1fr; }
}
@media(max-height:520px) and (min-width:600px) { .map-layout { grid-template-columns:minmax(0,1fr) 260px; grid-template-rows:1fr; }.control-panel { position:relative; display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3); border-left:var(--border); overflow-y:auto; }.location-control { position:relative; inset:auto; width:auto; padding:0; }.compact-weather { display:none; }.control-footer { flex-wrap:nowrap; }.connection { width:auto; }.detail-dialog { inset:var(--space-2); width:calc(100vw - var(--space-4)); max-height:calc(100dvh - var(--space-4)); }.weather-app.is-immersive .map-layout { grid-template-columns:1fr; } }
.version-links { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); font-size:var(--text-xs); min-height:var(--control-height); }
.version-links [aria-current] { font-weight:700; text-decoration-thickness:2px; }