:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1e293b;
  --glass: rgba(255,255,255,.94);
  --border: rgba(148,163,184,.24);
  --shadow: 0 10px 34px rgba(15,23,42,.16);
  --orange: #ff9f1c;
  --blue: #3b82f6;
}
* { box-sizing: border-box; }
html, body, #map { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #e5e7eb; }
button, select, input { font: inherit; }
button { color: inherit; }
#map { position: fixed; inset: 0; z-index: 0; }
.leaflet-control-zoom { display: none; }
.leaflet-image-layer.radar-overlay { image-rendering: auto; }
.leaflet-layer.intermediate-basemap {
  filter: brightness(1.55) contrast(.65) saturate(.65);
}
.radar-site-label-icon {
  display: flex !important; align-items: center; justify-content: center;
  border: 0 !important; background: transparent !important;
  pointer-events: auto; cursor: pointer;
}
.radar-site-badge {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 19px; padding: 2px 5px;
  border: 2px solid rgba(255,255,255,.98); border-radius: 999px;
  color: #fff; font-size: 10px; font-weight: 900; line-height: 1;
  letter-spacing: -.035em; white-space: nowrap;
  box-shadow: 0 0 0 1px rgba(15,23,42,.92), 0 2px 7px rgba(15,23,42,.72);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
  transform: scale(var(--radar-site-badge-scale, 1));
  transform-origin: center; transition: transform .14s ease, background-color .14s ease;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.radar-site-badge.is-selected { background: #2563eb; }
.radar-site-badge.is-available { background: #16823b; }
.radar-site-badge.is-unavailable { background: #b91c1c; }
.radar-site-badge.is-checking { background: #64748b; }
.radar-site-label-icon:hover .radar-site-badge,
.radar-site-label-icon:focus .radar-site-badge { filter: brightness(1.13); }

.value-marker-icon,
.search-result-marker-icon {
  border: 0 !important; background: transparent !important; pointer-events: none !important;
}
.value-marker-icon { display: grid !important; place-items: center; }
.value-marker-shape {
  position: relative; display: block; flex: 0 0 auto;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.98));
}
.value-marker-crosshair { width: 18px; height: 18px; }
.value-marker-crosshair::before,
.value-marker-crosshair::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #000;
  transform: translate(-50%, -50%);
}
.value-marker-crosshair::before { width: 18px; height: 2px; }
.value-marker-crosshair::after { width: 2px; height: 18px; }
.value-marker-square { width: 8px; height: 8px; background: #000; }
.value-marker-circle { width: 9px; height: 9px; border-radius: 50%; background: #000; }
.value-marker-triangle {
  width: 11px; height: 10px; background: #000;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.search-result-pin {
  position: relative; width: 28px; height: 28px; display: block;
  border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  background: #2563eb; box-shadow: 0 2px 8px rgba(15,23,42,.65);
  transform: rotate(-45deg);
}
.search-result-pin > span {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; background: #fff; transform: translate(-50%, -50%);
}

.topbar {
  position: fixed; z-index: 1000; top: 12px; left: 12px; right: 12px;
  min-height: 80px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 26px;
  background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.brand { min-width: 420px; display: flex; align-items: center; gap: 14px; margin-right: auto; }
.brand-copy {
  min-width: 0; display: flex; align-items: baseline; gap: 9px;
  overflow: visible; white-space: nowrap;
}
.brand h1 { margin: 0; font-size: 22px; line-height: 1.05; letter-spacing: -.02em; }
.brand-author {
  color: #8b1e2d; font-size: clamp(8px, .55vw, 11px); font-weight: 800;
  line-height: 1; letter-spacing: -.025em; white-space: nowrap;
}
.brand-logo {
  position: relative; width: 54px; height: 54px; flex: 0 0 54px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.36); border-radius: 17px;
  background: #075f61; box-shadow: 0 8px 18px rgba(3,92,94,.28);
}
.brand-logo img {
  position: absolute; width: 220%; height: 220%; max-width: none;
  left: -60%; top: -28%; object-fit: cover; user-select: none; pointer-events: none;
}

.control, .theme-control, .map-box {
  height: 58px; border: 1px solid var(--border); border-radius: 17px;
  background: rgba(241,245,249,.88);
}
.select-control { min-width: 175px; padding: 8px 12px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 9px; }
.parameter-control { min-width: 285px; }
.elevation-control { min-width: 150px; }
.select-control > span { color: #7b8798; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
select { min-width: 0; max-width: 100%; border: 0; outline: 0; background: transparent; font-weight: 700; font-size: 16px; cursor: pointer; }
.theme-control { display: flex; padding: 5px; }
.theme-control button { border: 0; background: transparent; border-radius: 12px; padding: 0 15px; font-weight: 700; color: #6b7587; cursor: pointer; }
.theme-control button.active { color: #20293a; background: #dce2e8; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.theme-control button:disabled,
.theme-control button.is-locked { cursor: not-allowed; opacity: .38; }
.theme-control button.active:disabled { opacity: 1; cursor: default; }
.boundary-button { min-width: 155px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--border); font-weight: 700; cursor: pointer; }
.switch-dot { width: 43px; height: 25px; padding: 3px; display: inline-flex; border-radius: 999px; background: #cbd5e1; transition: .2s; }
.switch-dot::after { content: ""; width: 19px; height: 19px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: .2s; }
.switch-dot.on { background: var(--blue); }
.switch-dot.on::after { transform: translateX(18px); }
.switch-dot.partial { background: #f59e0b; }
.switch-dot.partial::after { transform: translateX(9px); }

.tools-wrap {
  position: fixed; z-index: 1000; top: 104px; left: 28px; width: 184px;
  display: grid; gap: 7px;
}
.tool-control { position: relative; }
.tools-button {
  width: 184px; min-width: 0; padding: 0 13px;
  display: grid; grid-template-columns: 27px minmax(0,1fr) auto; align-items: center; gap: 9px;
  border: 1px solid var(--border); box-shadow: var(--shadow); cursor: pointer;
  font-weight: 750; text-align: left; backdrop-filter: blur(14px); transition: border-color .16s, background .16s, transform .16s;
}
.tools-button:hover { border-color: rgba(59,130,246,.38); background: rgba(248,250,252,.97); }
.tools-button:active { transform: translateY(1px); }
.tool-button-icon { display: grid; place-items: center; font-size: 18px; line-height: 1; }
.drawing-brush-icon { font-size: 19px; }
.language-button-icon { font-size: 18px; }
.language-chevron { font-size: 16px; transform: none !important; }
.tool-button-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-chevron { color: #7b8798; font-size: 23px; font-weight: 600; line-height: 1; transition: transform .16s; }
.tools-button[aria-expanded="true"] .tool-chevron { transform: rotate(90deg); }
.tools-lines { font-size: 18px; }
.information-button-icon { width: 22px; height: 22px; display: grid; place-items: center; color: #075f61; }
.information-button-icon svg { width: 22px; height: 22px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.information-button-icon .information-dot { fill: currentColor; stroke: none; }
.information-button[aria-expanded="true"] { border-color: rgba(7,95,97,.46); background: rgba(236,254,255,.96); }
.information-panel {
  position: fixed; z-index: 1030; top: auto;
  bottom: var(--information-panel-bottom, 8px);
  left: var(--information-panel-left, 221px);
  width: min(355px, calc(100vw - 245px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; border: 1px solid var(--border); border-radius: 17px;
  background: rgba(255,255,255,.97); box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.information-panel header {
  min-height: 58px; padding: 10px 10px 10px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.24); background: rgba(248,250,252,.96);
}
.information-panel header div { display: grid; gap: 2px; }
.information-panel header span { color: #768397; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.information-panel header strong { color: #1f2b3d; font-size: 16px; }
.information-panel header button {
  width: 35px; height: 35px; flex: 0 0 35px; border: 0; border-radius: 11px;
  background: #e5eaf0; cursor: pointer; color: #526076; font-size: 23px; line-height: 1;
}
.information-panel header button:hover { background: #dbe3eb; }
.information-panel-body { padding: 13px 15px 15px; color: #405067; }
.information-panel-body p { margin: 0; font-size: 12px; line-height: 1.48; }
.information-panel-body p + p { margin-top: 10px; }
.information-panel-body a { color: #075f61; font-weight: 750; overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.information-usage-notice {
  padding: 11px 12px;
  border: 1px solid rgba(139, 30, 45, .28);
  border-radius: 12px;
  background: rgba(139, 30, 45, .08);
  color: #641824;
  overflow-wrap: anywhere;
}
.information-usage-notice strong {
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .015em;
}

.information-contributors { padding-left: 10px; border-left: 3px solid rgba(7,95,97,.28); }
.tools-menu {
  position: absolute; top: 0; left: calc(100% + 9px); width: 220px; margin: 0; padding: 7px;
  background: var(--glass); border: 1px solid var(--border); border-radius: 15px;
  box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.tools-menu > button { width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; text-align: left; background: transparent; cursor: pointer; font-weight: 650; }
.tools-menu > button:hover { background: #e8edf3; }
.general-tools-control > .tools-menu {
  width: 340px; max-height: min(720px, calc(100vh - 120px)); overflow-y: auto; scrollbar-width: thin;
}
.map-query-tools { display: grid; gap: 9px; padding: 5px; }
.location-search-form { display: grid; gap: 6px; }
.location-search-form > label,
.tool-setting-select > span {
  color: #475569; font-size: 11px; font-weight: 850; letter-spacing: .015em;
}
.location-search-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; }
.location-search-entry input {
  width: 100%; min-width: 0; height: 39px; padding: 0 10px;
  border: 1px solid rgba(148,163,184,.38); border-radius: 10px;
  outline: 0; background: #fff; color: #1e293b; font-size: 13px;
}
.location-search-entry input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.16); }
.location-search-entry button {
  height: 39px; padding: 0 12px; border: 0; border-radius: 10px;
  background: #2563eb; color: #fff; cursor: pointer; font-size: 12px; font-weight: 800;
}
.location-search-entry button:disabled { cursor: wait; opacity: .62; }
.location-search-status { min-height: 14px; margin: 0; color: #64748b; font-size: 10px; line-height: 1.35; }
.location-search-status.is-error { color: #b91c1c; }
.location-search-results {
  max-height: 190px; display: grid; gap: 5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.location-search-result {
  width: 100%; padding: 8px 9px; display: grid; gap: 3px;
  border: 1px solid rgba(148,163,184,.27); border-radius: 10px;
  background: #f8fafc; cursor: pointer; color: #263247; text-align: left;
}
.location-search-result:hover,
.location-search-result:focus-visible { border-color: rgba(59,130,246,.5); background: #eff6ff; }
.location-search-result strong { overflow: hidden; font-size: 12px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.location-search-result span { color: #64748b; font-size: 10px; line-height: 1.25; }
.location-search-result small { color: #1d4ed8; font-size: 9px; font-weight: 800; }
.geocoder-attribution { color: #7b8798; font-size: 9px; }
.geocoder-attribution a { color: #475569; text-underline-offset: 2px; }
.tool-setting-checkbox,
.tool-setting-select {
  min-height: 38px; padding: 7px 8px; display: flex; align-items: center; gap: 8px;
  border: 1px solid rgba(148,163,184,.24); border-radius: 10px; background: rgba(248,250,252,.92);
}
.tool-setting-checkbox { cursor: pointer; }
.tool-setting-checkbox input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: #2563eb; }
.tool-setting-checkbox span { color: #3f4d62; font-size: 10px; font-weight: 700; line-height: 1.25; }
.tool-setting-select { justify-content: space-between; }
.tool-setting-select select {
  min-width: 112px; height: 31px; padding: 0 25px 0 8px;
  border: 1px solid rgba(148,163,184,.34); border-radius: 8px; background: #fff; font-size: 11px;
}
.imagery-mode-control {
  margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;
  border: 1px solid rgba(37,99,235,.24); border-radius: 11px; background: rgba(239,246,255,.78);
}
.imagery-mode-control legend {
  padding: 0 4px; color: #334155; font-size: 11px; font-weight: 850;
}
.imagery-mode-control label {
  min-width: 0; min-height: 42px; padding: 6px 4px; display: grid; place-items: center; align-content: center; gap: 3px;
  border: 1px solid rgba(148,163,184,.30); border-radius: 9px; background: #fff;
  color: #475569; cursor: pointer; text-align: center; font-size: 9px; font-weight: 800; line-height: 1.15;
}
.imagery-mode-control label:has(input:checked) {
  border-color: #2563eb; background: #dbeafe; color: #1d4ed8;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
}
.imagery-mode-control input { width: 14px; height: 14px; margin: 0; accent-color: #2563eb; }
.imagery-mode-control small {
  grid-column: 1 / -1; color: #64748b; font-size: 9px; line-height: 1.3;
}
.lightning-radar-sync-button {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid rgba(220,38,38,.58);
  border-radius: 10px;
  background: rgba(254,242,242,.98);
  color: #7f1d1d;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .16s, background-color .16s, box-shadow .16s;
}
.lightning-radar-sync-button:hover { background: #fee2e2; }
.lightning-radar-sync-button:focus-visible {
  outline: 3px solid rgba(59,130,246,.34);
  outline-offset: 2px;
}
.lightning-radar-sync-indicator {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #dc2626;
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(127,29,29,.22);
}
.lightning-radar-sync-copy { min-width: 0; display: grid; gap: 2px; }
.lightning-radar-sync-copy strong { color: #263247; font-size: 10px; line-height: 1.2; }
.lightning-radar-sync-copy small { color: #64748b; font-size: 8px; font-weight: 650; line-height: 1.25; }
.lightning-radar-sync-status {
  min-width: 39px;
  padding: 3px 5px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
}
.lightning-radar-sync-button.is-radar-matched {
  border-color: rgba(22,163,74,.68);
  background: rgba(240,253,244,.98);
  color: #14532d;
}
.lightning-radar-sync-button.is-radar-matched:hover { background: #dcfce7; }
.lightning-radar-sync-button.is-radar-matched .lightning-radar-sync-indicator,
.lightning-radar-sync-button.is-radar-matched .lightning-radar-sync-status {
  background: #16a34a;
}
.boundary-opacity-settings {
  padding: 8px; display: grid; gap: 7px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 11px; background: rgba(248,250,252,.92);
}
.boundary-opacity-settings > strong { color: #475569; font-size: 10px; }
.boundary-opacity-settings label { display: grid; gap: 3px; }
.boundary-opacity-settings label > span {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #526076; font-size: 9px; font-weight: 800;
}
.boundary-opacity-settings output { font-variant-numeric: tabular-nums; }
.boundary-opacity-settings input { width: 100%; margin: 0; accent-color: #334155; cursor: pointer; }
.measure-hint { position: fixed; z-index: 1000; top: 104px; left: 222px; padding: 9px 13px; border-radius: 12px; background: rgba(15,23,42,.88); color: #fff; box-shadow: var(--shadow); font-size: 13px; }

.drawing-tools-button-active { border-color: rgba(59,130,246,.45); background: rgba(239,246,255,.96); }
.drawing-tools-menu {
  width: 318px; max-height: min(680px, calc(100vh - 120px)); padding: 11px; overflow-y: auto;
  scrollbar-width: thin;
}
.drawing-tools-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 1px 2px 10px; }
.drawing-tools-heading strong { font-size: 14px; }
.drawing-tools-heading span { color: #728096; font-size: 11px; font-weight: 750; }
.drawing-tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.drawing-tool-grid .drawing-tool {
  width: auto; min-height: 58px; padding: 7px 4px;
  display: grid; place-items: center; align-content: center; gap: 3px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 11px;
  background: rgba(248,250,252,.9); cursor: pointer; color: #334155;
}
.drawing-tool-grid .drawing-tool:hover { border-color: rgba(59,130,246,.42); background: #edf4ff; }
.drawing-tool-grid .drawing-tool.active { border-color: #3b82f6; background: #dbeafe; color: #1d4ed8; box-shadow: inset 0 0 0 1px rgba(59,130,246,.15); }
.drawing-tool-grid .drawing-eraser-tool.active { border-color: #f97316; background: #ffedd5; color: #c2410c; box-shadow: inset 0 0 0 1px rgba(249,115,22,.16); }
.drawing-tool-grid .drawing-tool > span { font-size: 23px; line-height: 1; }
.drawing-tool-grid .drawing-tool small { font-size: 9px; font-weight: 800; line-height: 1; }
.drawing-style-details > summary { display: none; }
.drawing-settings { margin-top: 10px; padding-top: 10px; display: grid; gap: 10px; border-top: 1px solid rgba(148,163,184,.25); }
.drawing-color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawing-color-control, .drawing-range-control, .drawing-select-control, .drawing-check-control {
  color: #526076; font-size: 11px; font-weight: 800;
}
.drawing-color-control {
  min-height: 43px; padding: 6px 7px 6px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 10px; background: rgba(248,250,252,.85);
}
.drawing-color-control input[type="color"] { width: 32px; height: 29px; padding: 2px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.drawing-range-control { display: grid; gap: 6px; }
.drawing-range-control > span { display: flex; justify-content: space-between; gap: 10px; }
.drawing-range-control output { color: #243047; font-variant-numeric: tabular-nums; }
.drawing-range-control input[type="range"] { width: 100%; margin: 0; accent-color: #3b82f6; cursor: pointer; }
.drawing-select-control { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 9px; }
.drawing-select-control select { height: 35px; padding: 0 9px; border: 1px solid rgba(148,163,184,.30); border-radius: 9px; background: #f8fafc; font-size: 12px; }
.drawing-check-control { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.drawing-check-control input { width: 17px; height: 17px; margin: 0; accent-color: #3b82f6; }
.drawing-actions { margin-top: 11px; padding-top: 10px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; border-top: 1px solid rgba(148,163,184,.25); }
.drawing-actions button { min-height: 38px; padding: 7px 9px; border: 1px solid rgba(148,163,184,.28); border-radius: 10px; background: #eef2f7; cursor: pointer; font-size: 11px; font-weight: 800; }
.drawing-actions button:hover { background: #e2e8f0; }
.drawing-actions .drawing-clear-button { border-color: rgba(220,38,38,.22); background: #fef2f2; color: #b91c1c; }
.drawing-actions .drawing-clear-button:hover { background: #fee2e2; }

.warnings-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.warning-button-icon {
  width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: #94a3b8; color: #fff; font-size: 16px; font-weight: 950; line-height: 1;
}
.warnings-button.is-enabled { border-color: rgba(249,115,22,.35); }
.warnings-button.is-enabled .warning-button-icon { background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.11); }
.warnings-button:not(.is-enabled) { color: #68758a; }
.warnings-button.has-no-warnings .warning-button-icon { background: #94a3b8; box-shadow: none; }
.tool-status { color: #6c788b; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.warnings-button.is-enabled:not(.has-no-warnings) .tool-status { color: #c2410c; }
.general-warnings-button.is-enabled { border-color: rgba(220,38,38,.30); }
.general-warnings-button.is-enabled .general-warning-icon { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.10); }
.general-warnings-button.is-enabled:not(.has-no-warnings) .tool-status { color: #b91c1c; }
.radar-visibility-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.radar-button-icon {
  width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%;
  background: #94a3b8; color: #fff;
}
.radar-button-icon svg {
  width: 21px; height: 21px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round;
}
.radar-button-icon .radar-dish-fill,
.radar-button-icon .radar-feed { fill: currentColor; stroke: none; }
.radar-button-icon .radar-dish-rim { stroke-width: 1.55; }
.radar-button-icon .radar-wave { stroke-width: 1.65; }
.radar-visibility-button.is-enabled { border-color: rgba(59,130,246,.34); }
.radar-visibility-button.is-enabled .radar-button-icon { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,.11); }
.radar-visibility-button.is-enabled .tool-status { color: #1d4ed8; }
.radar-visibility-button:not(.is-enabled) { color: #68758a; }
.satellite-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.satellite-button-icon {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
}
.satellite-button-icon svg {
  width: 21px; height: 21px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.satellite-button-icon svg circle { fill: currentColor; stroke: currentColor; }
.satellite-button.is-enabled { border-color: rgba(14,165,233,.43); }
.satellite-button.is-enabled .satellite-button-icon {
  background: #0284c7; color: #fff; box-shadow: 0 0 0 4px rgba(14,165,233,.12);
}
.satellite-button.is-enabled .tool-status { color: #0369a1; }
.satellite-button.has-satellite-error { border-color: rgba(220,38,38,.42); }
.satellite-button.has-satellite-error .satellite-button-icon { background: #dc2626; box-shadow: none; }
.satellite-button.has-satellite-error .tool-status { color: #b91c1c; }
.satellite-menu {
  position: fixed; top: 104px; left: 221px;
  width: 370px; max-height: min(680px, calc(100vh - 120px)); padding: 12px; overflow-y: auto;
  scrollbar-width: thin;
}
.satellite-menu-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 1px 1px 11px; border-bottom: 1px solid rgba(148,163,184,.25);
}
.satellite-menu-heading > div { min-width: 0; display: grid; gap: 2px; }
.satellite-menu-heading strong { color: #1f2b3d; font-size: 14px; }
.satellite-menu-heading > div span {
  color: #7b8798; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em;
}
.satellite-mode-badge {
  padding: 5px 8px; border-radius: 999px; background: #e2e8f0; color: #64748b;
  font-size: 9px; font-weight: 900; text-transform: uppercase;
}
.satellite-mode-badge.is-enabled { background: #e0f2fe; color: #0369a1; }
.satellite-toggle-controls {
  margin-top: 10px; display: grid; gap: 7px;
}
.satellite-switch-control {
  min-height: 50px; padding: 8px 9px; display: grid;
  grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 10px;
  border: 1px solid rgba(148,163,184,.26); border-radius: 10px;
  background: #f8fafc; cursor: pointer;
}
.satellite-switch-control > span { min-width: 0; display: grid; gap: 2px; }
.satellite-switch-control b { color: #263247; font-size: 11px; line-height: 1.25; }
.satellite-switch-control small { color: #7b8798; font-size: 8.5px; line-height: 1.3; }
.satellite-switch-control input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.satellite-switch-control i {
  width: 40px; height: 23px; padding: 3px; display: block; justify-self: end;
  border-radius: 999px; background: #cbd5e1; transition: background .18s;
}
.satellite-switch-control i::after {
  content: ""; display: block; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.30); transition: transform .18s;
}
.satellite-switch-control input:checked + i { background: #0284c7; }
.satellite-switch-control input:checked + i::after { transform: translateX(17px); }
.satellite-switch-control input:focus-visible + i { outline: 3px solid rgba(59,130,246,.40); outline-offset: 2px; }
.satellite-layer-control {
  margin-top: 11px; display: grid; gap: 6px; color: #526076; font-size: 10px;
  font-weight: 850; text-transform: uppercase; letter-spacing: .04em;
}
.satellite-layer-control select {
  width: 100%; height: 39px; padding: 0 10px;
  border: 1px solid rgba(148,163,184,.30); border-radius: 10px;
  background: #f8fafc; color: #263247; font-size: 12px; text-transform: none;
}
.satellite-layer-control select:disabled { cursor: default; opacity: .52; }
.satellite-message {
  min-height: 30px; margin: 9px 1px 0; color: #334155; font-size: 10px;
  font-weight: 750; line-height: 1.4;
}
.satellite-shared-timeline-note {
  margin: 6px 1px 0; padding: 7px 8px; border-radius: 9px;
  background: #e0f2fe; color: #075985; font-size: 9px; font-weight: 750; line-height: 1.35;
}
.satellite-note {
  margin: 7px 1px 0; padding-top: 8px; border-top: 1px solid rgba(148,163,184,.22);
  color: #7b8798; font-size: 8px; line-height: 1.38;
}
.satellite-note a { color: #0369a1; font-weight: 800; text-underline-offset: 2px; }
.storm-tracking-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.storm-button-icon {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
}
.storm-button-icon svg {
  width: 21px; height: 21px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.storm-button-icon .storm-cloud { fill: currentColor; stroke: none; }
.storm-button-icon .storm-bolt { fill: currentColor; stroke: none; }
.storm-button-icon .storm-rain { stroke-width: 1.9; }
.storm-tracking-button.is-enabled { border-color: rgba(255,138,0,.48); }
.storm-tracking-button.is-enabled .storm-button-icon {
  background: #ff8a00; color: #fff; box-shadow: 0 0 0 4px rgba(255,138,0,.12);
}
.storm-tracking-button.is-enabled .tool-status { color: #c45f00; }
.storm-tracking-button.has-stale-data { border-color: rgba(217,119,6,.50); }
.storm-tracking-button.has-stale-data .storm-button-icon { background: #d97706; box-shadow: none; }
.storm-tracking-button.has-storm-error { border-color: rgba(220,38,38,.40); }
.storm-tracking-button.has-storm-error .storm-button-icon { background: #dc2626; box-shadow: none; }
.storm-tracking-button.has-storm-error .tool-status { color: #b91c1c; }
.storm-tracking-menu {
  width: 360px; max-height: min(640px, calc(100vh - 120px)); padding: 12px; overflow-y: auto;
  scrollbar-width: thin;
}
.storm-menu-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 1px 1px 11px; border-bottom: 1px solid rgba(148,163,184,.25);
}
.storm-menu-heading > div { min-width: 0; display: grid; gap: 2px; }
.storm-menu-heading strong { color: #1f2b3d; font-size: 14px; }
.storm-menu-heading > div span {
  color: #7b8798; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em;
}
.storm-master-switch {
  min-width: 81px; display: grid; grid-template-columns: 40px auto; align-items: center; gap: 7px;
  cursor: pointer;
}
.storm-master-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.storm-master-switch > span {
  width: 40px; height: 23px; padding: 3px; display: block; border-radius: 999px;
  background: #cbd5e1; transition: background .18s;
}
.storm-master-switch > span::after {
  content: ""; display: block; width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.30); transition: transform .18s;
}
.storm-master-switch input:checked + span { background: #ff8a00; }
.storm-master-switch input:checked + span::after { transform: translateX(17px); }
.storm-master-switch input:focus-visible + span { outline: 3px solid rgba(59,130,246,.40); outline-offset: 2px; }
.storm-master-switch b { color: #526076; font-size: 10px; text-transform: uppercase; }
.storm-mode-fieldset { min-width: 0; margin: 11px 0 0; padding: 0; border: 0; }
.storm-mode-fieldset legend { margin-bottom: 7px; color: #526076; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.storm-mode-fieldset:disabled { opacity: .48; }
.storm-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.storm-mode-grid button {
  min-width: 0; min-height: 75px; padding: 7px 4px; display: grid; place-items: center; align-content: center; gap: 3px;
  border: 1px solid rgba(148,163,184,.28); border-radius: 11px;
  background: #f8fafc; color: #334155; cursor: pointer;
}
.storm-mode-grid button:hover { border-color: rgba(255,138,0,.50); background: #fff7ed; }
.storm-mode-grid button.active {
  border-color: #ff8a00; background: #fff3df; color: #9a4a00;
  box-shadow: inset 0 0 0 1px rgba(255,138,0,.15);
}
.storm-mode-grid button b { font-size: 10px; }
.storm-mode-grid button small { min-height: 20px; color: #758196; font-size: 8px; line-height: 1.18; }
.storm-mode-swatch { height: 22px; display: grid; place-items: center; color: #ff343e; font-size: 20px; line-height: 1; }
.storm-outline-swatch {
  width: 25px; height: 18px; border: 1.5px solid rgba(15,23,42,.78); border-radius: 50% 42% 55% 44%;
  background: rgba(255,212,0,.15);
}
.storm-direction-swatch { font-weight: 950; }
.storm-tracks-swatch { color: #c026d3; letter-spacing: 2px; transform: translateY(-3px); }
.storm-severity-key {
  margin-top: 10px; padding: 8px 9px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px;
  border: 1px solid rgba(148,163,184,.23); border-radius: 10px; background: rgba(248,250,252,.86);
}
.storm-severity-key span { min-width: 0; display: flex; align-items: center; gap: 5px; }
.storm-severity-key i { width: 10px; height: 10px; flex: 0 0 10px; border: 2px solid currentColor; border-radius: 50%; }
.storm-severity-key i.light { color: #ffd400; }
.storm-severity-key i.moderate { color: #ff8a00; }
.storm-severity-key i.heavy { color: #ff343e; }
.storm-severity-key i.extreme { color: #c026d3; }
.storm-severity-key b { overflow: hidden; color: #526076; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.storm-tracking-message {
  min-height: 30px; margin: 9px 1px 0; color: #334155; font-size: 10px; font-weight: 750; line-height: 1.4;
}
.storm-experimental-note {
  margin: 7px 1px 0; padding-top: 8px; border-top: 1px solid rgba(148,163,184,.22);
  color: #7b8798; font-size: 8px; line-height: 1.38;
}
.location-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.location-button-icon {
  width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%;
  background: #e2e8f0; color: #64748b;
}
.location-button-icon svg {
  width: 20px; height: 20px; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.location-button-icon svg circle:first-child { fill: currentColor; stroke: none; }
.location-button.is-enabled { border-color: rgba(37,99,235,.36); }
.location-button.is-enabled .location-button-icon {
  background: #2563eb; color: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.location-button.is-enabled .tool-status { color: #1d4ed8; }
.location-button.is-locating .location-button-icon svg { animation: location-button-spin 1.25s linear infinite; }
.location-button.has-location-error { border-color: rgba(220,38,38,.32); color: #7f1d1d; }
.location-button.has-location-error .location-button-icon { background: #fee2e2; color: #b91c1c; box-shadow: none; }
.location-button.has-location-error .tool-status { color: #b91c1c; }
.user-location-icon { position: relative; border: 0; background: transparent; }
.user-location-pulse,
.user-location-dot { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.user-location-pulse {
  width: 28px; height: 28px; background: rgba(59,130,246,.20);
  animation: user-location-pulse 1.8s ease-out infinite;
}
.user-location-dot {
  width: 15px; height: 15px; border: 3px solid #fff; background: #1a73e8;
  box-shadow: 0 1px 6px rgba(15,23,42,.65), 0 0 0 1px rgba(29,78,216,.28);
}
@keyframes user-location-pulse {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.55); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes location-button-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .user-location-pulse,
  .location-button.is-locating .location-button-icon svg { animation: none; }
}
.radar-disabled { display: none !important; }

.general-warning-panel {
  position: fixed; z-index: 1005; top: 104px; right: 20px;
  width: min(410px, calc(100vw - 24px)); max-height: calc(100vh - 202px);
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(148,163,184,.30); border-radius: 19px;
  background: rgba(255,255,255,.97); box-shadow: 0 18px 58px rgba(15,23,42,.26);
  backdrop-filter: blur(18px);
}
.general-warning-header {
  min-height: 72px; padding: 12px 12px 11px 16px;
  display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(148,163,184,.23); background: rgba(248,250,252,.96);
}
.general-warning-eyebrow { display: block; margin-bottom: 3px; color: #7b8798; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.general-warning-header h2 { margin: 0; font-size: 16px; line-height: 1.15; }
.general-warning-navigation { display: grid; grid-template-columns: 34px auto 34px; align-items: center; gap: 5px; }
.general-warning-navigation button, .general-warning-close {
  width: 34px; height: 34px; padding: 0; border: 1px solid rgba(148,163,184,.27);
  border-radius: 10px; background: #e9eef5; cursor: pointer; font-size: 22px; font-weight: 800; line-height: 1;
}
.general-warning-navigation button:hover, .general-warning-close:hover { background: #dfe6ef; }
.general-warning-navigation button:disabled { opacity: .42; cursor: default; }
.general-warning-navigation span { min-width: 40px; text-align: center; color: #4b586d; font-size: 11px; font-weight: 850; font-variant-numeric: tabular-nums; }
.general-warning-close { color: #68758a; font-size: 20px; }
.general-warning-scope-bar {
  padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 9px;
  border-bottom: 1px solid rgba(148,163,184,.22); background: #fff7ed;
}
.general-warning-scope-bar button {
  min-height: 34px; padding: 6px 10px; flex: 0 0 auto;
  border: 1px solid rgba(249,115,22,.28); border-radius: 10px;
  background: #ffedd5; color: #9a3412; cursor: pointer; font-size: 10px; font-weight: 850;
}
.general-warning-scope-bar button:hover { background: #fed7aa; }
.general-warning-scope-bar span {
  min-width: 0; overflow: hidden; color: #7c2d12; font-size: 10px; font-weight: 750;
  text-align: right; white-space: nowrap; text-overflow: ellipsis;
}
.general-warning-body { padding: 13px; overflow-y: auto; scrollbar-width: thin; color: #263247; }
.general-warning-code-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.general-warning-code-chip {
  padding: 5px 9px; border-radius: 999px; background: var(--warning-color);
  color: #111827; font-size: 10px; font-weight: 950; letter-spacing: .045em;
}
.general-warning-section {
  margin-top: 9px; padding: 11px 12px; border: 1px solid rgba(148,163,184,.22);
  border-left: 5px solid var(--warning-color); border-radius: 12px; background: #fff;
}
.general-warning-section:first-of-type { margin-top: 0; }
.general-warning-section h3 { margin: 0 0 8px; font-size: 12px; }
.general-warning-section dl { margin: 0; display: grid; gap: 7px; }
.general-warning-section dl div { display: grid; gap: 2px; }
.general-warning-section dt { color: #7b8798; font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .055em; }
.general-warning-section dd { margin: 0; font-size: 12px; line-height: 1.4; }
.general-warning-counties { margin-top: 11px; padding: 10px 11px; border-radius: 12px; background: #f1f5f9; }
.general-warning-counties strong { display: block; margin-bottom: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: .055em; }
.general-warning-counties p { margin: 0; color: #536176; font-size: 12px; line-height: 1.45; }
.general-warning-details { margin-top: 10px; border: 1px solid rgba(148,163,184,.24); border-radius: 12px; background: #fff; }
.general-warning-details summary { padding: 10px 11px; cursor: pointer; font-size: 11px; font-weight: 850; }
.general-warning-details div { max-height: 220px; padding: 0 11px 11px; overflow-y: auto; color: #526076; font-size: 11px; line-height: 1.48; }
.general-warning-details p { margin: 7px 0 0; }
.general-warning-empty { margin: 0; padding: 18px 10px; color: #657186; text-align: center; font-size: 13px; font-weight: 700; }
.general-warning-footer {
  padding: 9px 13px 10px; display: grid; gap: 2px;
  border-top: 1px solid rgba(148,163,184,.22); background: #f8fafc;
  color: #8390a3; font-size: 9px; line-height: 1.35;
}
.general-warning-panel.is-collapsed {
  top: 104px; right: auto; bottom: auto; left: 222px;
  width: min(330px, calc(100vw - 242px)); max-height: none;
  border-radius: 15px;
}
.general-warning-panel.is-collapsed .general-warning-header {
  min-height: 54px; padding: 7px 8px 7px 12px;
  border-bottom: 0; gap: 7px;
}
.general-warning-panel.is-collapsed .general-warning-header > div { min-width: 0; }
.general-warning-panel.is-collapsed .general-warning-header h2 {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px;
}
.general-warning-panel.is-collapsed .general-warning-eyebrow,
.general-warning-panel.is-collapsed .general-warning-scope-bar,
.general-warning-panel.is-collapsed .general-warning-body,
.general-warning-panel.is-collapsed .general-warning-footer { display: none; }
.general-warning-panel.is-collapsed .general-warning-navigation {
  grid-template-columns: 30px auto 30px; gap: 3px;
}
.general-warning-panel.is-collapsed .general-warning-navigation button,
.general-warning-panel.is-collapsed .general-warning-close {
  width: 30px; height: 30px; border-radius: 9px; font-size: 19px;
}
.general-warning-panel.is-collapsed .general-warning-navigation span { min-width: 34px; font-size: 10px; }

@media (min-width: 900px) {
  body.general-warning-panel-open .legend-dock { right: 448px; max-width: calc(100vw - 470px); }
  body.general-warning-panel-open .attribution-note { right: 448px; }
}

.leaflet-container.drawing-active { cursor: crosshair !important; touch-action: none !important; }
.leaflet-container.drawing-eraser-active { cursor: cell !important; touch-action: none !important; }
.leaflet-container.mobile-drawing-map-locked { touch-action: none !important; }

.timeline-panel {
  position: fixed; z-index: 1000; left: 16px; right: 16px; bottom: 14px;
  min-height: 60px; padding: 9px 12px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 20px;
  background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.timeline-panel button { height: 40px; min-width: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: #e5eaf0; cursor: pointer; font-weight: 750; }
.timeline-panel button.primary { background: var(--blue); color: #fff; }
.timeline-panel button:disabled { cursor: default; opacity: .42; }
.timeline-panel input { min-width: 100px; flex: 1; accent-color: var(--blue); }
.timeline-frame-times {
  min-width: 350px; display: grid; gap: 2px;
  text-align: center; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.timeline-frame-times time {
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

.error-toast { position: fixed; z-index: 1200; top: 112px; left: 50%; transform: translateX(-50%); width: min(760px,calc(100% - 40px)); padding: 13px 18px; border-radius: 14px; background: #c53b4b; color: #fff; box-shadow: var(--shadow); text-align: center; }
.legend-dock {
  position: fixed; z-index: 900; right: 20px; bottom: 90px;
  display: flex; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; gap: 9px;
  max-width: calc(100vw - 24px);
}
.legend { width: 190px; padding: 11px; background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.transparency-control {
  width: 150px; min-height: 62px; padding: 10px 11px 9px;
  display: grid; align-content: center; gap: 8px;
  background: rgba(255,255,255,.9); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); backdrop-filter: blur(12px);
  user-select: none;
}
.transparency-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 800; }
.transparency-header output { min-width: 31px; text-align: right; font-variant-numeric: tabular-nums; }
.transparency-control input { width: 100%; margin: 0; accent-color: var(--blue); cursor: pointer; }
.satellite-transparency-control { border-color: rgba(2,132,199,.30); }
.satellite-transparency-control input { accent-color: #0284c7; }
.lightning-transparency-control { border-color: rgba(234,179,8,.42); }
.lightning-transparency-control input { accent-color: #eab308; }
.lightning-transparency-control .transparency-header > span {
  min-width: 0;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.lightning-flashes-transparency-control { background: rgba(255,251,235,.94); }
.lightning-area-transparency-control { background: rgba(254,249,195,.94); }
.legend-title { margin-bottom: 6px; font-size: 12px; font-weight: 800; }
.legend-bar { height: 13px; border: 1px solid rgba(20,30,45,.18); border-radius: 8px; background: transparent; }
.legend-values { position: relative; height: 14px; margin-top: 4px; font-size: 10px; font-weight: 700; }
.legend-values span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); }
.legend-values .legend-value-first { transform: none; }
.legend-values .legend-value-last { transform: translateX(-100%); }
.attribution-note { position: fixed; z-index: 700; right: 20px; bottom: 78px; color: rgba(30,41,59,.6); font-size: 10px; pointer-events: none; }
.is-hidden { display: none !important; }
.information-panel[hidden],
.information-panel.is-hidden {
  display: none !important; visibility: hidden !important;
  pointer-events: none !important; opacity: 0 !important;
}

.measure-marker { width: 13px; height: 13px; margin-left: -6px; margin-top: -6px; border: 3px solid #fff; border-radius: 50%; background: #2563eb; box-shadow: 0 1px 7px rgba(0,0,0,.55); }
.measure-label { padding: 5px 8px; border: 0; border-radius: 9px; background: #172033; color: #fff; box-shadow: var(--shadow); font-weight: 750; }
.measure-label::before { border-top-color: #172033; }

@media (max-width: 1180px) {
  .topbar { overflow-x: auto; align-items: stretch; }
  .brand { min-width: 400px; }
  .parameter-control { min-width: 245px; }
}
@media (max-width: 720px) {
  .topbar { top: 6px; left: 6px; right: 6px; min-height: 72px; border-radius: 20px; padding: 8px; }
  .brand { min-width: 360px; }
  .brand-logo { width: 48px; height: 48px; flex-basis: 48px; }
  .brand h1 { font-size: 18px; }
  .control, .theme-control { height: 52px; }
  .tools-wrap { top: 88px; left: 12px; }
  .measure-hint { top: 88px; left: 205px; }
  .timeline-panel { left: 7px; right: 7px; bottom: 7px; gap: 6px; padding: 7px; }
  .timeline-panel time { min-width: 110px; font-size: 11px; }
  #latestButton { display: none; }
  .legend-dock { right: 9px; bottom: 76px; gap: 7px; }
  .legend { width: 155px; }
  .transparency-control { width: 126px; min-height: 59px; padding: 9px; }
  .transparency-header { font-size: 10px; }
  .attribution-note { display: none; }
}

/* v6.29.10 · Warnings, observations and Romanian surface stations */
.factual-data-button-icon {
  width: 29px; height: 29px; display: grid; place-items: center; overflow: hidden;
  border-radius: 9px; background: rgba(255,255,255,.72);
}
.factual-data-button-icon img {
  width: 42px; height: 30px; max-width: none; object-fit: contain;
  user-select: none; pointer-events: none;
}
.factual-data-button.is-enabled {
  border-color: rgba(239,68,68,.3);
  background: rgba(255,247,247,.96);
}
.factual-data-control > .factual-data-menu {
  width: 420px; max-height: min(760px, calc(100vh - 120px));
  padding: 11px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
}
.factual-data-heading {
  min-height: 45px; margin: -3px -2px 9px; padding: 4px 6px 9px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.factual-data-heading > div { min-width: 0; display: grid; gap: 2px; }
.factual-data-heading strong { color: #162033; font-size: 15px; }
.factual-data-heading span:not(.factual-live-dot) {
  color: #718096; font-size: 10px; line-height: 1.25;
}
.factual-live-dot {
  width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.12);
}
.factual-action-grid { display: grid; gap: 7px; }
.factual-action {
  width: 100%; min-height: 62px; padding: 8px 10px;
  display: grid; grid-template-columns: 35px minmax(0,1fr) auto; align-items: center; gap: 10px;
  border: 1px solid rgba(148,163,184,.25); border-radius: 13px;
  background: rgba(248,250,252,.88); color: #263247; cursor: pointer; text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.factual-action:hover { border-color: rgba(59,130,246,.36); background: #fff; }
.factual-action:active { transform: translateY(1px); }
.factual-action-copy { min-width: 0; display: grid; gap: 2px; }
.factual-action-copy strong {
  min-width: 0; overflow: hidden; color: #263247; font-size: 12px;
  line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.factual-action-copy small { color: #718096; font-size: 9.5px; line-height: 1.25; }
.factual-action .tool-status {
  max-width: 67px; overflow: hidden; color: #64748b; font-size: 9px;
  font-weight: 850; text-overflow: ellipsis; white-space: nowrap;
}
.factual-action .warning-button-icon { width: 29px; height: 29px; }
.weather-observations-icon {
  width: 35px; height: 35px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(148,163,184,.25); border-radius: 10px; background: #fff;
}
.weather-observations-icon img {
  width: 48px; height: 48px; max-width: none; object-fit: cover; transform: scale(1.5);
  user-select: none; pointer-events: none;
}
.weather-observations-button.is-enabled {
  border-color: rgba(13,148,136,.36); background: rgba(240,253,250,.92);
}
.weather-observations-button.is-enabled .weather-observations-icon {
  border-color: rgba(13,148,136,.35); box-shadow: 0 0 0 4px rgba(20,184,166,.08);
}
.weather-observations-button.is-enabled .tool-status { color: #0f766e; }
.weather-observations-controls {
  max-height: 480px; margin-top: 9px; padding-top: 9px; display: grid; gap: 9px;
  overflow: hidden; border-top: 1px solid rgba(148,163,184,.22);
  opacity: 1; transition: max-height .2s ease, opacity .16s ease, margin .2s ease, padding .2s ease;
}
.weather-observations-controls.is-collapsed {
  max-height: 0; margin-top: 0; padding-top: 0; border-top-color: transparent; opacity: 0;
  pointer-events: none;
}
.observation-switch {
  min-height: 50px; padding: 8px 10px; display: grid;
  grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px;
  border: 1px solid rgba(148,163,184,.26); border-radius: 12px; background: #f8fafc;
  cursor: pointer;
}
.observation-switch > span { min-width: 0; display: grid; gap: 2px; }
.observation-switch b { color: #263247; font-size: 11px; }
.observation-switch small { color: #718096; font-size: 9px; line-height: 1.25; }
.observation-switch input { position: absolute; opacity: 0; pointer-events: none; }
.observation-switch i {
  position: relative; width: 43px; height: 25px; border-radius: 999px;
  background: #cbd5e1; box-shadow: inset 0 0 0 1px rgba(100,116,139,.12);
  transition: background .16s ease;
}
.observation-switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.25);
  transition: transform .16s ease;
}
.observation-switch input:checked + i { background: #0d9488; }
.observation-switch input:checked + i::after { transform: translateX(18px); }
.observation-switch input:focus-visible + i { outline: 3px solid rgba(59,130,246,.28); outline-offset: 2px; }
.observation-source-control {
  min-width: 0; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  border: 0;
}
.observation-source-control legend,
.observation-parameter-control > span {
  grid-column: 1 / -1; margin: 0 0 3px; color: #64748b;
  font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
}
.observation-source-control label { min-width: 0; cursor: pointer; }
.observation-source-control input { position: absolute; opacity: 0; pointer-events: none; }
.observation-source-control label > span {
  min-height: 52px; padding: 8px 9px; display: grid; place-content: center; gap: 2px;
  border: 1px solid rgba(148,163,184,.28); border-radius: 11px;
  background: #f8fafc; color: #475569; text-align: center;
}
.observation-source-control label b { font-size: 11px; }
.observation-source-control label small { font-size: 8.5px; line-height: 1.15; }
.observation-source-control input:checked + span {
  border-color: #0d9488; background: #ecfdf5; color: #0f766e;
  box-shadow: inset 0 0 0 1px rgba(13,148,136,.16);
}
.observation-source-control input:focus-visible + span { outline: 3px solid rgba(59,130,246,.24); }
.observation-parameter-control { min-width: 0; display: grid; gap: 5px; }
.observation-parameter-control select {
  width: 100%; height: 42px; padding: 0 10px;
  border: 1px solid rgba(148,163,184,.3); border-radius: 10px;
  outline: 0; background: #fff; color: #243047; font-size: 12px; font-weight: 750;
}
.observation-parameter-control select:focus {
  border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.13);
}
.observation-parameter-control select:disabled { cursor: not-allowed; opacity: .48; }
.observation-menu-footer { display: grid; gap: 6px; }
.observation-menu-footer p {
  min-height: 15px; margin: 0; color: #64748b; font-size: 9.5px; line-height: 1.35;
}
.observation-menu-footer p.is-live { color: #0f766e; }
.observation-menu-footer p.is-loading { color: #2563eb; }
.observation-menu-footer p.is-stale { color: #b45309; }
.observation-menu-footer p.is-error { color: #b91c1c; }
.observation-missing-legend {
  display: inline-flex; align-items: center; gap: 6px; color: #718096; font-size: 8.5px;
}
.observation-missing-legend i {
  width: 17px; height: 17px; display: grid; place-items: center; border: 1px dashed #94a3b8;
  border-radius: 5px; background: #e2e8f0; color: #475569; font-size: 13px; font-style: normal;
}

.observation-leaflet-icon {
  border: 0 !important; background: transparent !important; cursor: pointer !important;
  overflow: visible !important;
}
.observation-leaflet-icon > * {
  transform: scale(var(--observation-marker-scale, 1));
  transform-origin: center; transition: transform .12s ease, filter .12s ease;
}
.observation-leaflet-icon:hover > *,
.observation-leaflet-icon:focus > * { filter: brightness(1.03) drop-shadow(0 5px 10px rgba(15,23,42,.25)); }
.synop-plot-card {
  position: relative; width: 112px; height: 100px; overflow: hidden;
  border: 1px solid rgba(226,232,240,.98); border-radius: 12px;
  background: rgba(255,255,255,.96); color: #4b5563;
  box-shadow: 0 4px 14px rgba(15,23,42,.28);
}
.plot-value {
  position: absolute; z-index: 2; display: grid; color: #475569;
  font-size: 11px; font-weight: 850; line-height: .95; white-space: nowrap;
}
.plot-value small { margin-top: 3px; color: #64748b; font-size: 6.5px; font-weight: 650; }
.plot-temperature { left: 9px; top: 10px; color: #dc2626; }
.plot-pressure { right: 8px; top: 10px; color: #0faaa4; text-align: right; }
.plot-visibility { left: 9px; top: 42px; }
.plot-tendency { right: 8px; top: 42px; text-align: right; }
.plot-dew-point { left: 9px; bottom: 8px; color: #2683df; }
.plot-precipitation { right: 8px; bottom: 8px; color: #0faaa4; text-align: right; }
.synop-plot-symbol {
  position: absolute; z-index: 1; left: 50%; top: 50%; width: 58px; height: 58px;
  overflow: visible; transform: translate(-50%, -50%);
}
.plot-cloud-ring, .plot-calm, .plot-variable-wind, .plot-cloud-missing {
  fill: none; stroke: #0a0a0a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.plot-cloud-fill { fill: #0a0a0a; stroke: none; }
.plot-wind { fill: none; stroke: #1268ad; stroke-width: 3; stroke-linecap: round; }
.plot-calm { stroke-width: 2; }
.plot-variable-wind { stroke: #1268ad; }
.observation-value-marker {
  min-width: 62px; max-width: 112px; min-height: 36px; padding: 5px 8px;
  display: flex; align-items: baseline; justify-content: center; gap: 3px;
  border: 2px solid #fff; border-radius: 999px; background: var(--parameter-colour);
  color: #fff; box-shadow: 0 0 0 1px rgba(15,23,42,.45), 0 3px 10px rgba(15,23,42,.3);
  font-size: 12px; font-weight: 900; line-height: 1; white-space: nowrap;
}
.observation-value-marker span {
  min-width: 0; max-width: 82px; overflow: hidden; text-overflow: ellipsis;
}
.observation-value-marker small { font-size: 8px; font-weight: 750; }
.observation-missing-marker {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 2px solid #fff; border-radius: 8px; background: #64748b; color: #fff;
  box-shadow: 0 0 0 1px rgba(15,23,42,.5), 0 3px 9px rgba(15,23,42,.3);
  transform: rotate(45deg) scale(var(--observation-marker-scale, 1)) !important;
}
.observation-missing-marker span { font-size: 19px; font-weight: 600; transform: rotate(-45deg); }

.observation-detail-panel {
  position: fixed; z-index: 1240; top: 104px; right: 18px; bottom: 96px;
  width: min(780px, calc(100vw - 245px)); overflow: hidden;
  border: 1px solid rgba(71,85,105,.36); border-radius: 20px;
  background: #0f1828; color: #e7eefb; box-shadow: 0 24px 70px rgba(2,6,23,.48);
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity .16s ease, transform .18s ease;
}
.observation-detail-panel.is-hidden {
  opacity: 0; transform: translateY(8px) scale(.985); pointer-events: none;
}
.observation-detail-panel[hidden] { display: none !important; }
.observation-detail-header {
  min-height: 62px; padding: 11px 14px 11px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-bottom: 1px solid #2a3850; background: #19243a;
}
.observation-detail-header > div { min-width: 0; display: grid; gap: 3px; }
.observation-detail-type {
  color: #7f9abb; font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
}
.observation-detail-header h2 {
  min-width: 0; margin: 0; overflow: hidden; color: #fff; font-size: 15px;
  line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
}
.observation-detail-header button {
  width: 36px; height: 36px; flex: 0 0 36px; border: 1px solid #2e3e58; border-radius: 11px;
  background: #132035; color: #7f9abb; cursor: pointer; font-size: 23px; line-height: 1;
}
.observation-detail-header button:hover { background: #22314a; color: #fff; }
.observation-detail-body {
  height: calc(100% - 62px); padding: 14px 20px 0; overflow-x: hidden; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #44536a #111c2e;
}
.observation-detail-meta {
  margin: 0 0 12px; color: #84a0c2; font-size: 10px; line-height: 1.4;
}
.observation-current-layout {
  display: grid; grid-template-columns: 178px minmax(0,1fr); align-items: center; gap: 15px;
}
.observation-detail-plot { min-width: 0; display: grid; place-items: center; }
.synop-plot-card.is-large {
  width: 174px; height: 144px; border-radius: 13px; box-shadow: 0 7px 22px rgba(0,0,0,.25);
}
.synop-plot-card.is-large .plot-value { font-size: 18px; }
.synop-plot-card.is-large .plot-value small { margin-top: 4px; font-size: 9px; }
.synop-plot-card.is-large .plot-temperature,
.synop-plot-card.is-large .plot-pressure { top: 19px; }
.synop-plot-card.is-large .plot-temperature,
.synop-plot-card.is-large .plot-visibility,
.synop-plot-card.is-large .plot-dew-point { left: 14px; }
.synop-plot-card.is-large .plot-pressure,
.synop-plot-card.is-large .plot-tendency,
.synop-plot-card.is-large .plot-precipitation { right: 14px; }
.synop-plot-card.is-large .plot-visibility,
.synop-plot-card.is-large .plot-tendency { top: 61px; }
.synop-plot-card.is-large .plot-dew-point,
.synop-plot-card.is-large .plot-precipitation { bottom: 14px; }
.synop-plot-card.is-large .synop-plot-symbol { width: 86px; height: 86px; }
.observation-metric-grid {
  min-width: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px;
}
.observation-metric {
  min-width: 0; min-height: 56px; padding: 8px 10px; display: grid; align-content: space-between; gap: 5px;
  border: 1px solid #2b3a52; border-radius: 11px; background: #111b2c;
}
.observation-metric > span {
  overflow: hidden; color: #86a0bf; font-size: 8px; line-height: 1.15;
  text-overflow: ellipsis;
}
.observation-metric strong {
  overflow: hidden; color: #eef4ff; font-size: 13px; line-height: 1.05;
  text-overflow: ellipsis; white-space: nowrap;
}
.observation-metric strong small { color: #d9e4f7; font-size: 9px; font-weight: 750; }
.observation-metric.is-missing { opacity: .62; }
.observation-raw-details {
  margin-top: 12px; border: 1px solid #2a3850; border-radius: 10px; background: #19243a;
}
.observation-raw-details.is-hidden { display: none; }
.observation-raw-details summary {
  padding: 9px 11px; color: #8da7c8; cursor: pointer; font-size: 9px; font-weight: 800;
}
.observation-raw-details code {
  padding: 0 11px 10px; display: block; overflow-wrap: anywhere; color: #dbe7f8;
  font-size: 9px; line-height: 1.5; white-space: normal;
}
.observation-history-section { margin-top: 16px; padding-bottom: 12px; }
.observation-history-section > header {
  margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: #8da7c8; font-size: 9px; letter-spacing: .035em; text-transform: uppercase;
}
.observation-history-section > header > div { display: flex; align-items: center; gap: 6px; }
.observation-history-section > header > div > span { color: #38bdf8; font-size: 17px; }
.observation-chart-tabs {
  margin-bottom: 8px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
}
.observation-chart-tabs::-webkit-scrollbar { display: none; }
.observation-chart-tabs button {
  min-height: 31px; padding: 0 10px; flex: 0 0 auto;
  border: 1px solid #2b3a52; border-radius: 9px; background: #19243a;
  color: #8da7c8; cursor: pointer; font-size: 9px; font-weight: 750;
}
.observation-chart-tabs button.active {
  border-color: #3b92ef; background: #3b92ef; color: #fff;
}
.observation-chart {
  position: relative; min-height: 235px; overflow: hidden;
  border: 1px solid #223149; border-radius: 12px; background: #0f1828;
}
.observation-chart svg { width: 100%; height: 235px; display: block; overflow: visible; }
.chart-grid-line { stroke: #334156; stroke-width: 1; opacity: .8; }
.chart-grid-line.is-vertical { opacity: .55; }
.chart-axis-label, .chart-time-label { fill: #aabbd2; font-size: 8px; }
.chart-series { fill: none; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.chart-point { stroke: #0f1828; stroke-width: 1.2; }
.observation-chart-legend {
  min-height: 31px; padding: 3px 10px 8px; display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 14px; color: #c6d4e8; font-size: 8px;
}
.observation-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.observation-chart-legend i {
  width: 14px; height: 3px; border-radius: 999px; background: var(--series-colour);
}
.observation-chart-empty {
  min-height: 210px; margin: 0; padding: 25px; display: grid; place-items: center;
  color: #8da7c8; font-size: 11px; text-align: center;
}
.observation-zoom-button {
  width: 100%; min-height: 48px; margin: 0; padding: 0 16px;
  display: flex; align-items: center; gap: 8px; border: 0; border-top: 1px solid #2a3850;
  background: #19243a; color: #75b9ff; cursor: pointer; font-size: 11px; text-align: left;
}
.observation-zoom-button:hover { background: #213049; color: #fff; }

@media (max-width: 980px) {
  .observation-detail-panel {
    top: 92px; right: 10px; bottom: 88px; width: min(690px, calc(100vw - 20px));
  }
  .observation-current-layout { grid-template-columns: 160px minmax(0,1fr); }
  .observation-metric-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .factual-data-button-icon {
    grid-column: 1; grid-row: 1; width: 30px; height: 30px;
  }
  .tools-wrap .factual-data-button-icon img { width: 42px; height: 31px; }
  .factual-data-menu.is-mobile-portal {
    max-height: min(74dvh, 650px) !important; padding: 10px !important;
  }
  .observation-detail-panel {
    z-index: 2250; top: max(7px, env(safe-area-inset-top)); right: max(7px, env(safe-area-inset-right));
    bottom: var(--phone-panel-bottom, calc(max(7px, env(safe-area-inset-bottom)) + 122px));
    left: max(7px, env(safe-area-inset-left)); width: auto;
    max-height: none; border-radius: 18px;
  }
}

@media (max-width: 620px) {
  .observation-detail-header { min-height: 56px; padding: 8px 10px 8px 14px; }
  .observation-detail-body { height: calc(100% - 56px); padding: 10px 11px 0; }
  .observation-detail-meta { margin-bottom: 9px; font-size: 8.5px; }
  .observation-current-layout { grid-template-columns: 132px minmax(0,1fr); gap: 8px; }
  .synop-plot-card.is-large { width: 130px; height: 120px; }
  .synop-plot-card.is-large .plot-value { font-size: 13px; }
  .synop-plot-card.is-large .plot-value small { font-size: 7px; }
  .synop-plot-card.is-large .plot-temperature,
  .synop-plot-card.is-large .plot-pressure { top: 14px; }
  .synop-plot-card.is-large .plot-temperature,
  .synop-plot-card.is-large .plot-visibility,
  .synop-plot-card.is-large .plot-dew-point { left: 9px; }
  .synop-plot-card.is-large .plot-pressure,
  .synop-plot-card.is-large .plot-tendency,
  .synop-plot-card.is-large .plot-precipitation { right: 9px; }
  .synop-plot-card.is-large .plot-visibility,
  .synop-plot-card.is-large .plot-tendency { top: 51px; }
  .synop-plot-card.is-large .plot-dew-point,
  .synop-plot-card.is-large .plot-precipitation { bottom: 11px; }
  .synop-plot-card.is-large .synop-plot-symbol { width: 67px; height: 67px; }
  .observation-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
  .observation-metric { min-height: 51px; padding: 7px 8px; }
  .observation-metric strong { font-size: 11px; }
  .observation-history-section { margin-top: 12px; }
  .observation-chart { min-height: 205px; }
  .observation-chart svg { height: 205px; }
  .observation-chart-tabs button { min-height: 35px; }
}

@media (max-width: 390px) {
  .factual-action { min-height: 58px; padding: 7px 8px; gap: 7px; }
  .factual-action-copy small { font-size: 8.5px; }
  .observation-source-control { gap: 5px; }
  .observation-current-layout { grid-template-columns: 118px minmax(0,1fr); }
  .synop-plot-card.is-large { width: 116px; height: 112px; }
  .synop-plot-card.is-large .synop-plot-symbol { width: 60px; height: 60px; }
  .observation-metric { min-height: 48px; padding: 6px; }
  .observation-metric > span { font-size: 7.5px; }
  .observation-metric strong { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .weather-observations-controls,
  .observation-detail-panel,
  .observation-leaflet-icon > * { transition: none !important; }
}

.tools-separator { height: 1px; margin: 6px 5px; background: rgba(148,163,184,.28); }
.cross-section-hint { top: 104px; background: rgba(124,45,18,.92); }
.cross-section-marker {
  width: 15px; height: 15px; margin-left: -7px; margin-top: -7px;
  border: 3px solid #fff; border-radius: 50%; background: #f97316;
  box-shadow: 0 1px 8px rgba(0,0,0,.58);
}
.cross-section-label {
  padding: 5px 8px; border: 0; border-radius: 9px;
  background: #c2410c; color: #fff; box-shadow: var(--shadow); font-weight: 750;
}
.cross-section-label::before { border-top-color: #c2410c; }

.cross-section-panel {
  position: fixed; z-index: 1080; left: 50%; bottom: 88px;
  width: min(920px, calc(100% - 36px)); max-height: calc(100vh - 205px);
  transform: translateX(-50%); overflow: hidden;
  border: 1px solid var(--border); border-radius: 20px;
  background: rgba(255,255,255,.97); box-shadow: 0 18px 60px rgba(15,23,42,.30);
  backdrop-filter: blur(18px);
}
.cross-section-header {
  min-height: 58px; padding: 10px 13px 9px 17px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}
.cross-section-header h2 { margin: 0; font-size: 17px; line-height: 1.15; letter-spacing: -.01em; }
.cross-section-header p { min-height: 15px; margin: 4px 0 0; color: #748094; font-size: 12px; }
.cross-section-header button {
  width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 11px;
  background: #e8edf3; color: #263247; cursor: pointer; font-size: 25px; line-height: 1;
}
.cross-section-header button:hover { background: #dce3eb; }
.cross-section-body {
  position: relative; min-height: 180px; max-height: calc(100vh - 274px);
  overflow: auto; padding: 10px; background: #f4f6f9;
}
.cross-section-image { display: block; width: 100%; height: auto; border-radius: 12px; background: #fff; }
.cross-section-status {
  min-height: 160px; display: grid; place-items: center; padding: 22px;
  color: #657186; text-align: center; font-weight: 700;
}
.cross-section-panel.is-loading .cross-section-status::before {
  content: ""; width: 24px; height: 24px; margin-right: 10px;
  display: inline-block; vertical-align: middle;
  border: 3px solid #cbd5e1; border-top-color: #f97316; border-radius: 50%;
  animation: radar-spin .8s linear infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .cross-section-hint { top: 88px; }
  .cross-section-panel {
    bottom: 74px; width: calc(100% - 14px); max-height: calc(100vh - 160px); border-radius: 16px;
  }
  .cross-section-body { max-height: calc(100vh - 225px); padding: 6px; }
  .cross-section-header { min-height: 52px; padding: 8px 9px 8px 13px; }
  .cross-section-header h2 { font-size: 15px; }
}

.hover-value {
  position: fixed;
  z-index: 1160;
  pointer-events: none;
  user-select: none;
  min-width: 1ch;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  will-change: left, top;
}


@media (max-width: 720px) {
}


.warning-transparency-control { width: 176px; border-color: rgba(249,115,22,.30); }
.warning-transparency-control input { accent-color: #f97316; }

.leaflet-tooltip.nowcast-name-tooltip {
  padding: 5px 8px; border: 1px solid rgba(255,255,255,.62); border-radius: 8px;
  background: rgba(15,23,42,.92); color: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.28);
  font-size: 11px; font-weight: 850; line-height: 1.15; white-space: nowrap;
}
.leaflet-tooltip-top.nowcast-name-tooltip::before { border-top-color: rgba(15,23,42,.92); }

.nowcast-popup .leaflet-popup-content-wrapper {
  padding: 0; overflow: hidden; border-radius: 18px;
  background: rgba(255,255,255,.98); box-shadow: 0 18px 58px rgba(15,23,42,.28);
}
.nowcast-popup .leaflet-popup-content { margin: 0; width: auto !important; max-height: min(68vh, 620px); overflow-y: auto; }
.nowcast-popup .leaflet-popup-tip { background: #fff; }
.nowcast-popup-content { min-width: 300px; color: #243047; }
.nowcast-popup-title {
  position: sticky; top: 0; z-index: 1; padding: 14px 17px 12px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(148,163,184,.24); background: rgba(248,250,252,.97);
}
.nowcast-popup-title strong { font-size: 17px; }
.nowcast-popup-title span { color: #748094; font-size: 12px; font-weight: 700; }
.nowcast-warning-card { margin: 12px; padding: 13px 14px; border: 1px solid rgba(148,163,184,.24); border-left: 6px solid var(--warning-color); border-radius: 14px; background: #fff; }
.nowcast-warning-card + .nowcast-warning-card { margin-top: 10px; }
.nowcast-warning-card header { display: grid; gap: 7px; margin-bottom: 10px; }
.nowcast-warning-card header strong { font-size: 14px; }
.nowcast-code-chip { width: fit-content; padding: 4px 8px; border-radius: 999px; background: var(--warning-color); color: #111827; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.nowcast-warning-card dl { margin: 0 0 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.nowcast-warning-card dl div { padding: 8px 9px; border-radius: 10px; background: #f4f6f9; }
.nowcast-warning-card dt { color: #7a8597; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.nowcast-warning-card dd { margin: 3px 0 0; font-size: 12px; font-weight: 750; }
.nowcast-warning-card section { margin-top: 10px; }
.nowcast-warning-card h4 { margin: 0 0 5px; color: #4a566b; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.nowcast-warning-card p { margin: 0; font-size: 13px; line-height: 1.45; }
.nowcast-warning-card footer { margin-top: 10px; color: #8490a1; font-size: 10px; }
.nowcast-area-list { display: grid; gap: 7px; }
.nowcast-area-list div { display: grid; gap: 2px; }
.nowcast-area-list strong { font-size: 12px; }
.nowcast-area-list span, .nowcast-zone-text { color: #566276; font-size: 12px; line-height: 1.4; }

.general-warning-popup .leaflet-popup-content-wrapper {
  padding: 0; overflow: hidden; border-radius: 16px;
  background: rgba(255,255,255,.98); box-shadow: 0 16px 48px rgba(15,23,42,.25);
}
.general-warning-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.general-warning-popup .leaflet-popup-tip { background: #fff; }
.general-warning-popup-content { min-width: 260px; padding: 14px 15px; color: #263247; }
.general-warning-popup-content header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.general-warning-popup-content h3 { margin: 0; font-size: 16px; }
.general-warning-popup-content .general-warning-code-chip { flex: 0 0 auto; }
.general-warning-popup-content p { margin: 5px 0 0; color: #566276; font-size: 12px; line-height: 1.4; }

.storm-direction-label-icon,
.storm-direction-arrow-icon { border: 0; background: transparent; }
.storm-direction-label-icon span {
  min-width: 28px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center;
  border: 1px solid var(--storm-color); border-radius: 8px; background: rgba(15,23,42,.88);
  box-shadow: 0 2px 7px rgba(15,23,42,.30); color: #fff; font-size: 8px; font-weight: 900;
  line-height: 1; white-space: nowrap;
}
.storm-direction-arrow-icon span {
  width: 28px; height: 28px; display: grid; place-items: center; color: var(--storm-color);
  filter: drop-shadow(0 1px 1px #fff) drop-shadow(0 1px 3px rgba(15,23,42,.65));
  font-size: 28px; font-weight: 950; line-height: 1;
}
.storm-track-tooltip {
  padding: 4px 7px; border-color: rgba(15,23,42,.22); border-radius: 7px;
  background: rgba(15,23,42,.88); color: #fff; box-shadow: 0 4px 14px rgba(15,23,42,.25);
  font-size: 9px; font-weight: 850;
}
.storm-popup .leaflet-popup-content-wrapper {
  overflow: hidden; border-radius: 15px; background: #fff; box-shadow: 0 16px 45px rgba(15,23,42,.30);
}
.storm-popup .leaflet-popup-content { margin: 0; width: auto !important; }
.storm-popup .leaflet-popup-tip { background: #fff; }
.storm-popup-card { width: 300px; color: #263247; }
.storm-popup-card header {
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid rgba(148,163,184,.22); background: #f8fafc;
}
.storm-popup-ring {
  width: 31px; height: 31px; flex: 0 0 31px; border: 4px solid var(--storm-color); border-radius: 50%;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--storm-color);
}
.storm-popup-card header div { display: grid; gap: 2px; }
.storm-popup-card header strong { font-size: 14px; }
.storm-popup-card header small { color: #718096; font-size: 9px; font-weight: 750; text-transform: capitalize; }
.storm-popup-card dl {
  margin: 0; padding: 11px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
}
.storm-popup-card dl div { min-width: 0; display: grid; gap: 2px; }
.storm-popup-card dt { color: #7b8798; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .04em; }
.storm-popup-card dd { margin: 0; overflow-wrap: anywhere; color: #263247; font-size: 11px; font-weight: 800; }
.storm-popup-card footer {
  padding: 9px 14px 11px; display: grid; gap: 2px; border-top: 1px solid rgba(148,163,184,.20);
}
.storm-popup-card footer b { color: var(--storm-color); font-size: 9px; }
.storm-popup-card footer span { color: #718096; font-size: 8px; }

@media (max-width: 720px) {
  .warning-transparency-control { width: 156px; }
  .nowcast-popup-content { min-width: 250px; }
  .nowcast-warning-card dl { grid-template-columns: 1fr; }
  .general-warning-panel { top: 88px; right: 9px; max-height: calc(100vh - 170px); }
}

@media (max-width: 540px) {
  .tools-wrap { width: 174px; }
  .tools-button { width: 174px; }
  .tool-control > .tools-menu {
    position: fixed; top: 285px; left: 12px; right: 12px; width: auto;
    max-height: calc(100vh - 370px);
  }
  .information-panel {
    position: fixed; top: 285px; bottom: auto; left: 12px; right: 12px; width: auto;
    max-height: calc(100vh - 370px); overflow-y: auto;
  }
  .measure-hint, .cross-section-hint { top: 285px; left: 12px; right: 12px; text-align: center; }
  .drawing-tools-menu { width: auto; }
  .general-warning-panel { top: 82px; left: 7px; right: 7px; width: auto; max-height: calc(100vh - 164px); }
  .general-warning-header { grid-template-columns: minmax(0,1fr) auto auto; padding-left: 13px; }
}

/* Responsive application shell (v6.14.6). The desktop controls keep their
   original layout; phones receive compact drawers and touch-size docks. */
.mobile-controls-button,
.mobile-legend-button { display: none; }
.mobile-controls-panel { display: contents; }
.legend-controls {
  display: flex; align-items: flex-end; justify-content: flex-end;
  flex-wrap: wrap; gap: 9px;
}
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(59,130,246,.42);
  outline-offset: 2px;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  :root {
    --phone-safe-top: env(safe-area-inset-top, 0px);
    --phone-safe-right: env(safe-area-inset-right, 0px);
    --phone-safe-bottom: env(safe-area-inset-bottom, 0px);
    --phone-safe-left: env(safe-area-inset-left, 0px);
    --phone-timeline-height: 90px;
    --phone-tool-bottom: calc(var(--phone-safe-bottom) + 104px);
    --phone-panel-bottom: calc(var(--phone-safe-bottom) + 162px);
  }

  html, body, #map { height: 100%; height: 100dvh; }
  body { overscroll-behavior: none; }

  .topbar {
    z-index: 1110;
    top: calc(var(--phone-safe-top) + 6px);
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    min-height: 58px; height: 58px; padding: 6px 7px;
    overflow: visible; align-items: center; gap: 7px;
    border-radius: 20px;
  }
  .brand { min-width: 0; flex: 1 1 auto; gap: 7px; margin-right: 0; }
  .brand-logo {
    width: 36px; height: 36px; flex: 0 0 36px;
    border-radius: 12px;
  }
  .brand-copy { min-width: 0; gap: 5px; }
  .brand h1 { flex: 0 0 auto; font-size: 15px; }
  .brand-author {
    flex: 0 0 auto; font-size: clamp(5px, 1.4vw, 6.5px);
    letter-spacing: -.055em;
  }
  .mobile-controls-button {
    min-width: 46px; height: 46px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--border); border-radius: 14px;
    background: #e8edf3; cursor: pointer; color: #334155;
    font-size: 12px; font-weight: 800;
  }
  .mobile-controls-button svg {
    width: 22px; height: 22px; flex: 0 0 22px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .topbar.mobile-controls-open .mobile-controls-button {
    border-color: rgba(59,130,246,.42); background: #dbeafe; color: #1d4ed8;
  }
  .mobile-controls-panel {
    position: fixed; z-index: 1115;
    top: calc(var(--phone-safe-top) + 72px);
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    max-height: calc(100vh - var(--phone-safe-top) - var(--phone-panel-bottom) - 80px);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 80px);
    padding: 9px; overflow-y: auto; overscroll-behavior: contain;
    display: none; grid-template-columns: minmax(0,1fr); gap: 7px;
    border: 1px solid var(--border); border-radius: 18px;
    background: rgba(255,255,255,.97); box-shadow: 0 18px 48px rgba(15,23,42,.24);
    backdrop-filter: blur(18px); scrollbar-width: thin;
  }
  .topbar.mobile-controls-open .mobile-controls-panel { display: grid; }
  .mobile-controls-panel .control,
  .mobile-controls-panel .theme-control {
    width: 100%; min-width: 0; height: 52px;
  }
  .mobile-controls-panel .select-control {
    grid-template-columns: 74px minmax(0,1fr); padding: 7px 11px;
  }
  .mobile-controls-panel .select-control > span { font-size: 10px; }
  .mobile-controls-panel select { width: 100%; font-size: 16px; }
  .mobile-controls-panel .theme-control { justify-content: stretch; }
  .mobile-controls-panel .theme-control button {
    min-width: 0; flex: 1 1 0; padding: 0 7px; font-size: 12px;
  }
  .mobile-controls-panel .boundary-button { justify-content: flex-start; }

  .tools-wrap {
    z-index: 1105; top: auto;
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    bottom: var(--phone-tool-bottom);
    width: auto; height: 50px; padding: 1px;
    display: flex; gap: 5px; overflow-x: auto; overflow-y: visible;
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .tools-wrap::-webkit-scrollbar { display: none; }
  .tools-wrap > .tool-control,
  .tools-wrap > .tools-button { flex: 0 0 46px; }
  .tool-control { position: static; }
  .tools-wrap .tools-button {
    position: relative; width: 46px; height: 46px; min-height: 46px; padding: 0;
    display: grid; grid-template-columns: 1fr; place-items: center; gap: 0;
    border-radius: 14px; text-align: center;
  }
  .tools-wrap .tool-button-icon,
  .tools-wrap .warning-button-icon,
  .tools-wrap .radar-button-icon,
  .tools-wrap .satellite-button-icon,
  .tools-wrap .storm-button-icon,
  .tools-wrap .location-button-icon,
  .tools-wrap .information-button-icon { grid-column: 1; grid-row: 1; }
  .tools-wrap .tool-button-label,
  .tools-wrap .tool-chevron,
  .tools-wrap .tool-status { display: none; }
  .tools-wrap .language-button-icon { display: none; }
  .tools-wrap .language-button .tool-button-label {
    display: block; max-width: 42px; overflow: hidden;
    font-size: 9px; line-height: 1.05; text-overflow: ellipsis;
  }
  .tools-wrap .warning-button-icon,
  .tools-wrap .radar-button-icon,
  .tools-wrap .satellite-button-icon,
  .tools-wrap .storm-button-icon,
  .tools-wrap .location-button-icon { width: 25px; height: 25px; }

  .tool-control > .tools-menu,
  .tools-menu,
  .information-panel {
    position: fixed; z-index: 1130;
    top: auto; bottom: var(--phone-panel-bottom);
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    width: auto; max-height: calc(100vh - var(--phone-safe-top) - var(--phone-panel-bottom) - 78px);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 78px);
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: 17px; scrollbar-width: thin;
  }
  .tools-menu > button { min-height: 46px; }
  .general-tools-control > .tools-menu {
    width: auto; max-height: min(58dvh, 500px); padding: 6px;
  }
  .map-query-tools { gap: 6px; padding: 3px; }
  .location-search-entry input,
  .location-search-entry button { height: 36px; }
  .location-search-results { max-height: 128px; }
  .location-search-result { padding: 6px 8px; }
  .tool-setting-checkbox,
  .tool-setting-select { min-height: 34px; padding: 5px 7px; }
  .tool-setting-select select { height: 29px; }
  .lightning-radar-sync-button { min-height: 44px; padding: 5px 7px; }
  .lightning-radar-sync-copy strong { font-size: 9.5px; }
  .lightning-radar-sync-copy small { font-size: 7.5px; }
  .drawing-tools-menu {
    left: auto; width: min(330px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 14px));
    max-height: min(52dvh, 360px); padding: 7px;
  }
  .satellite-menu {
    left: auto; width: min(370px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 14px));
    max-height: min(62dvh, 470px); padding: 10px;
  }
  .storm-tracking-menu {
    left: auto; width: min(360px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 14px));
    max-height: min(58dvh, 430px); padding: 10px;
  }
  .drawing-tools-heading { margin: 0 2px 6px; gap: 7px; }
  .drawing-tools-heading strong { font-size: 12px; }
  .drawing-tools-heading span {
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px;
  }
  .drawing-tool-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .drawing-tool-grid .drawing-tool { min-height: 44px; padding: 4px 2px; border-radius: 9px; }
  .drawing-tool-grid .drawing-tool > span { font-size: 18px; }
  .drawing-tool-grid .drawing-tool small { font-size: 8px; }
  .drawing-style-details { margin-top: 7px; }
  .drawing-style-details > summary {
    min-height: 36px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between;
    border: 1px solid rgba(148,163,184,.28); border-radius: 10px; background: #f1f5f9;
    cursor: pointer; color: #475569; font-size: 10px; font-weight: 850; list-style: none;
  }
  .drawing-style-details > summary::-webkit-details-marker { display: none; }
  .drawing-style-details > summary::after { content: "⌄"; font-size: 14px; }
  .drawing-style-details[open] > summary::after { transform: rotate(180deg); }
  .drawing-style-details:not([open]) > .drawing-settings { display: none; }
  .drawing-settings { margin-top: 6px; padding: 7px 3px 0; gap: 7px; }
  .drawing-color-control { min-height: 38px; }
  .drawing-select-control select { height: 32px; }
  .drawing-actions { margin-top: 7px; padding-top: 7px; }
  .drawing-actions button { min-height: 36px; }

  .timeline-panel {
    z-index: 1100;
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
    bottom: calc(var(--phone-safe-bottom) + 6px);
    min-height: 0; height: var(--phone-timeline-height); padding: 6px 7px;
    display: grid;
    grid-template-columns: 42px 42px 42px minmax(0,1fr) 58px;
    grid-template-rows: 28px 44px; align-items: center; gap: 4px 5px;
    border-radius: 18px;
  }
  .timeline-panel button {
    min-width: 0; width: 100%; height: 40px; padding: 0 5px; border-radius: 11px;
  }
  #timelineSlider { grid-column: 1 / -1; grid-row: 1; width: 100%; min-width: 0; margin: 0; }
  #previousButton { grid-column: 1; grid-row: 2; }
  #playButton { grid-column: 2; grid-row: 2; }
  #nextButton { grid-column: 3; grid-row: 2; }
  #frameTime {
    grid-column: 4; grid-row: 2; min-width: 0; overflow: hidden;
    font-size: 10px; line-height: 1.15; text-align: center; text-overflow: ellipsis;
  }
  #latestButton {
    grid-column: 5; grid-row: 2; display: block;
    padding: 0 4px; font-size: 10px;
  }

  .legend-dock {
    z-index: 1085; top: auto;
    right: calc(var(--phone-safe-right) + 7px);
    bottom: var(--phone-panel-bottom); max-width: calc(100vw - 14px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
  }
  .mobile-legend-button {
    min-width: 82px; height: 44px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid var(--border); border-radius: 14px;
    background: rgba(255,255,255,.95); box-shadow: var(--shadow);
    cursor: pointer; font-size: 11px; font-weight: 850; backdrop-filter: blur(14px);
  }
  .mobile-legend-button > span:first-child { font-size: 18px; color: #3b82f6; }
  .legend-controls { display: none; }
  .legend-dock.mobile-expanded {
    left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px);
  }
  .legend-dock.mobile-expanded .legend-controls {
    width: 100%; max-height: 330px; max-height: min(43dvh, 330px); padding: 7px;
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
    border: 1px solid var(--border); border-radius: 16px;
    background: rgba(255,255,255,.96); box-shadow: var(--shadow); backdrop-filter: blur(16px);
  }
  .legend-dock.mobile-expanded .legend,
  .legend-dock.mobile-expanded .transparency-control {
    width: 100%; min-width: 0; box-shadow: none; background: #f8fafc;
  }
  .legend-dock.mobile-expanded .legend { grid-column: 1 / -1; }
  .legend-dock.mobile-expanded .warning-transparency-control { width: 100%; }

  .general-warning-panel,
  .cross-section-panel {
    z-index: 1120;
    top: calc(var(--phone-safe-top) + 72px);
    bottom: var(--phone-panel-bottom); left: calc(var(--phone-safe-left) + 7px);
    right: calc(var(--phone-safe-right) + 7px); width: auto; max-height: none;
    transform: none; border-radius: 17px;
  }
  .general-warning-header {
    min-height: 66px; padding: 10px 9px 9px 13px;
    grid-template-columns: minmax(0,1fr) auto auto; gap: 7px;
  }
  .general-warning-navigation button,
  .general-warning-close { width: 40px; height: 40px; }
  .general-warning-body { min-height: 0; padding: 10px; }
  .general-warning-scope-bar { padding: 7px 8px; align-items: stretch; flex-direction: column; }
  .general-warning-scope-bar button { width: 100%; min-height: 38px; }
  .general-warning-scope-bar span { text-align: left; white-space: normal; }
  .general-warning-footer { padding-bottom: max(9px, var(--phone-safe-bottom)); }
  .general-warning-panel.is-collapsed {
    top: calc(var(--phone-safe-top) + 72px); right: auto; bottom: auto;
    left: calc(var(--phone-safe-left) + 7px);
    width: min(340px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 14px));
    max-height: none;
  }
  .general-warning-panel.is-collapsed .general-warning-header {
    min-height: 52px; padding: 6px 7px 6px 10px;
    grid-template-columns: minmax(0,1fr) auto auto;
  }
  .cross-section-body { min-height: 0; max-height: none; flex: 1 1 auto; padding: 6px; }
  .cross-section-panel { display: flex; flex-direction: column; }
  .cross-section-status { min-height: 140px; }

  .measure-hint,
  .cross-section-hint {
    z-index: 1125; top: calc(var(--phone-safe-top) + 72px);
    left: calc(var(--phone-safe-left) + 7px); right: calc(var(--phone-safe-right) + 7px);
    max-width: none; padding: 9px 11px; text-align: center; font-size: 11px;
  }
  .error-toast {
    top: calc(var(--phone-safe-top) + 72px); width: calc(100% - var(--phone-safe-left) - var(--phone-safe-right) - 14px);
    padding: 10px 12px; font-size: 12px;
  }
  .attribution-note { display: none; }
  .leaflet-control-attribution {
    right: calc(var(--phone-safe-right) + 3px); bottom: var(--phone-panel-bottom);
    max-width: 70vw; white-space: normal; text-align: right; font-size: 8px;
  }
  .leaflet-popup { max-width: calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 34px) !important; }
  .nowcast-popup-content,
  .general-warning-popup-content,
  .storm-popup-card {
    width: min(300px, calc(100vw - var(--phone-safe-left) - var(--phone-safe-right) - 72px));
    min-width: 0;
  }
  .nowcast-popup .leaflet-popup-content { max-height: min(54dvh, 480px); }
  .nowcast-warning-card { margin: 8px; padding: 11px; }
  .nowcast-warning-card dl { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .mobile-controls-button { width: 46px; padding: 0; }
  .mobile-controls-button > span { display: none; }
  .radar-site-badge {
    min-width: 43px; min-height: 17px; padding: 1px 4px;
    border-width: 1.5px; font-size: 9px;
  }
}

@media (max-width: 420px) {
  .brand { gap: 5px; }
  .brand-logo { width: 32px; height: 32px; flex-basis: 32px; border-radius: 10px; }
  .brand-copy { gap: 4px; }
  .brand h1 { font-size: 14px; }
  .brand-author { font-size: 6px; }
  .general-warning-header { grid-template-columns: minmax(0,1fr) auto; }
  .general-warning-navigation {
    grid-column: 1 / -1; grid-row: 2; justify-content: center;
  }
  .general-warning-close { grid-column: 2; grid-row: 1; }
  .general-warning-eyebrow { font-size: 8px; }
  .general-warning-header h2 { font-size: 14px; }
  .tools-wrap { gap: 4px; }
  .drawing-tool-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .drawing-tools-heading { align-items: baseline; flex-direction: row; gap: 6px; }
  .general-warning-panel.is-collapsed .general-warning-navigation {
    grid-column: auto; grid-row: auto; justify-content: initial;
  }
  .general-warning-panel.is-collapsed .general-warning-close { grid-column: auto; grid-row: auto; }
  .information-panel-body { padding: 11px 12px 13px; }
}

@media (max-width: 360px) {
  .brand-logo { display: none; }
  .brand { gap: 0; }
}

@media (orientation: landscape) and (max-height: 600px) and (max-width: 960px) {
  :root {
    --phone-timeline-height: 54px;
    --phone-tool-bottom: calc(var(--phone-safe-bottom) + 66px);
    --phone-panel-bottom: calc(var(--phone-safe-bottom) + 122px);
  }
  .mobile-controls-panel {
    grid-template-columns: repeat(2, minmax(0,1fr));
    max-height: calc(100vh - var(--phone-safe-top) - 80px);
    max-height: calc(100dvh - var(--phone-safe-top) - 80px);
  }
  .mobile-controls-panel .parameter-control,
  .mobile-controls-panel .theme-control { grid-column: 1 / -1; }
  .timeline-panel {
    height: var(--phone-timeline-height); padding: 5px 6px;
    grid-template-columns: 40px 40px 40px minmax(100px,1fr) minmax(92px,120px) 54px;
    grid-template-rows: 42px; gap: 4px;
  }
  #previousButton { grid-column: 1; grid-row: 1; }
  #playButton { grid-column: 2; grid-row: 1; }
  #nextButton { grid-column: 3; grid-row: 1; }
  #timelineSlider { grid-column: 4; grid-row: 1; }
  #frameTime { grid-column: 5; grid-row: 1; }
  #latestButton { grid-column: 6; grid-row: 1; }
  .tool-control > .tools-menu,
  .tools-menu,
  .information-panel {
    max-height: calc(100vh - var(--phone-safe-top) - var(--phone-panel-bottom) - 76px);
    max-height: calc(100dvh - var(--phone-safe-top) - var(--phone-panel-bottom) - 76px);
  }
  .general-warning-panel,
  .cross-section-panel { top: calc(var(--phone-safe-top) + 70px); }
  .legend-dock.mobile-expanded .legend-controls { max-height: 45dvh; }
}


/* v6.18.0 MTG derived-layer metadata and temperature legend. */
.satellite-layer-note { margin: 7px 0 0; padding: 8px 9px; border-radius: 9px; background: rgba(28,132,211,.09); color: var(--muted); font-size: 10px; line-height: 1.35; }
.satellite-legend { width: 260px; }
.satellite-legend .legend-bar { height: 15px; }
@media (max-width: 720px) {
  .satellite-legend { width: 100%; }
}

/* v6.19.0: iOS Safari tap, stacking and memory-pressure safeguards. */
button,
input[type="button"],
input[type="submit"],
input[type="checkbox"],
input[type="radio"],
select,
[role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.tools-menu[hidden],
.tools-menu[aria-hidden="true"],
.tools-menu.is-hidden,
.information-panel[hidden],
.information-panel[aria-hidden="true"],
.information-panel.is-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-menu.is-mobile-portal {
    position: fixed !important;
    z-index: 2200 !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    top: auto !important;
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 62px) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(68dvh, 620px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    isolation: isolate;
  }

  .general-tools-menu.is-mobile-portal {
    max-height: min(72dvh, 680px) !important;
  }

  html.ios-webkit .tools-menu,
  html.ios-webkit .information-panel,
  html.ios-webkit .topbar,
  html.ios-webkit .legend-dock,
  html.ios-webkit .map-box {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.ios-webkit .tools-menu,
  html.ios-webkit .information-panel {
    background: rgba(249, 251, 255, 0.99) !important;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.32) !important;
  }

  html.ios-webkit .leaflet-container,
  html.ios-webkit .leaflet-control-container {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* v6.19.0: independent MTG Lightning Imager overlays and iOS drawing recovery. */
.lightning-button { grid-template-columns: 27px minmax(0,1fr) auto; }
.lightning-button-icon {
  width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px;
  color: #713f12; background: #fef3c7; box-shadow: inset 0 0 0 1px rgba(161,98,7,.16);
}
.lightning-button-icon svg { width: 19px; height: 19px; overflow: visible; }
.lightning-button-icon path { fill: #facc15; stroke: #111827; stroke-width: .9; stroke-linejoin: round; }
.lightning-button.is-enabled { border-color: rgba(234,179,8,.55); }
.lightning-button.is-enabled .lightning-button-icon { background: #fde047; color: #422006; }
.lightning-button.is-enabled .tool-status { color: #854d0e; }
.lightning-button.has-lightning-error { border-color: rgba(220,38,38,.42); }
.lightning-menu {
  width: min(360px, calc(100vw - 32px)); padding: 11px; display: grid; gap: 9px;
  max-height: min(620px, calc(100dvh - 120px)); overflow: auto;
}
.lightning-menu-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.lightning-menu-heading > div { min-width: 0; display: grid; gap: 2px; }
.lightning-menu-heading strong { color: #1f2b3d; font-size: 14px; }
.lightning-menu-heading > div span { color: #7b8798; font-size: 9px; }
.lightning-mode-badge {
  flex: 0 0 auto; padding: 4px 7px; border-radius: 999px; background: #eef2f7;
  color: #64748b; font-size: 9px; font-weight: 850; text-transform: uppercase;
}
.lightning-mode-badge.is-enabled { background: #fef3c7; color: #854d0e; }
.lightning-message, .lightning-note {
  margin: 0; color: #64748b; font-size: 10px; line-height: 1.4;
}
.lightning-message { padding: 8px 9px; border-radius: 9px; background: rgba(250,204,21,.10); }
.lightning-layer-card {
  position: relative; display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(148,163,184,.30);
  border-radius: 11px; background: rgba(248,250,252,.84);
}
.lightning-layer-card.is-disabled { opacity: .52; }
.lightning-layer-switch {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer;
}
.lightning-layer-switch > span { min-width: 0; display: grid; gap: 2px; }
.lightning-layer-switch b { color: #263247; font-size: 11px; line-height: 1.25; }
.lightning-layer-switch small { color: #7b8798; font-size: 8.5px; line-height: 1.3; }
.lightning-layer-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.lightning-layer-switch i {
  flex: 0 0 auto; width: 37px; height: 20px; padding: 2px; border-radius: 999px;
  background: #cbd5e1; transition: background .16s ease;
}
.lightning-layer-switch i::after {
  content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(15,23,42,.28); transition: transform .16s ease;
}
.lightning-layer-switch input:checked + i { background: #eab308; }
.lightning-layer-switch input:checked + i::after { transform: translateX(17px); }
.lightning-layer-switch input:focus-visible + i { outline: 3px solid rgba(234,179,8,.35); outline-offset: 2px; }
.lightning-opacity-control { display: grid; gap: 5px; color: #526076; font-size: 9.5px; font-weight: 750; }
.lightning-opacity-control > span { display: flex; justify-content: space-between; gap: 8px; }
.lightning-opacity-control input { width: 100%; accent-color: #eab308; }
.lightning-opacity-control input:disabled { opacity: .5; }

/* The Leaflet pane already supplies the interaction transform. Permanently
   promoting a second full-screen layer retained unnecessary GPU surfaces on
   desktop browsers. */
.lightning-flash-canvas {
  contain: strict;
  backface-visibility: hidden;
}
.lightning-cross-key { position: absolute; top: 42px; right: 15px; width: 14px; height: 14px; pointer-events: none; }
.lightning-cross-key::before, .lightning-cross-key::after,
.lightning-cross-key span::before, .lightning-cross-key span::after {
  content: ""; position: absolute; left: 6px; top: 1px; width: 2px; height: 12px; border-radius: 2px;
  transform-origin: center; background: #111827;
}
.lightning-cross-key::before { transform: rotate(45deg); }
.lightning-cross-key::after { transform: rotate(-45deg); }
.lightning-cross-key span::before, .lightning-cross-key span::after { left: 6.5px; width: 1px; background: #d9d9d9; }
.lightning-cross-key span::before { transform: rotate(45deg); }
.lightning-cross-key span::after { transform: rotate(-45deg); }
.lightning-flash-canvas { pointer-events: none; image-rendering: auto; }
.lightning-flash-legend, .lightning-area-legend { width: 260px; }
.lightning-flash-legend .legend-bar, .lightning-area-legend .legend-bar { height: 15px; }
html.ios-webkit [data-reliable-tap="true"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mobile-drawing-map-locked { touch-action: none !important; }

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .lightning-button-icon { width: 25px; height: 25px; }
  .lightning-menu { width: min(390px, calc(100vw - 18px)); max-height: min(640px, calc(100dvh - 86px)); }
  .lightning-flash-legend, .lightning-area-legend { width: 100%; }
}


/* v6.24.0 — attribution, extended imagery bounds, robust Cloud Type legend and lightning symbols. */
.satellite-legend-toggle-control {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(2,132,199,.20);
  border-radius: 12px;
  background: rgba(239,248,255,.72);
}
.satellite-legend-toggle-control:has(input:disabled) { opacity: .58; }
.satellite-legend.is-categorical {
  width: min(390px, calc(100vw - 30px));
  max-height: min(60vh, 520px);
  overflow: hidden;
}
.satellite-legend.is-categorical .legend-title { margin-bottom: 8px; }
.satellite-category-legend {
  max-height: min(48vh, 430px);
  overflow: auto;
  padding-right: 3px;
  display: grid;
  gap: 3px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.satellite-category-item {
  min-height: 25px;
  display: grid;
  grid-template-columns: 19px 23px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(241,245,249,.72);
  color: #263247;
  font-size: 10px;
  line-height: 1.2;
}
.satellite-category-item:nth-child(even) { background: rgba(226,232,240,.62); }
.satellite-category-swatch {
  width: 17px;
  height: 17px;
  display: block;
  border: 1px solid rgba(15,23,42,.45);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.satellite-category-value {
  text-align: right;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.satellite-category-label {
  min-width: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .satellite-legend.is-categorical {
    width: min(360px, calc(100vw - 18px));
    max-height: 53vh;
  }
  .satellite-category-legend { max-height: 39vh; }
  .satellite-category-item {
    min-height: 23px;
    grid-template-columns: 18px 20px minmax(0,1fr);
    gap: 5px;
    font-size: 9px;
  }
}


/* v6.24.0 — flash symbol selector and larger map symbols. */
.lightning-symbol-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin: 8px 0 7px;
  padding: 7px;
  border: 1px solid rgba(234,179,8,.24);
  border-radius: 10px;
  background: rgba(255,251,235,.72);
}
.lightning-symbol-settings legend {
  grid-column: 1 / -1;
  padding: 0 3px;
  color: #526076;
  font-size: 9.5px;
  font-weight: 800;
}
.lightning-symbol-settings label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 18px minmax(0,1fr);
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
  color: #39475c;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.lightning-symbol-settings input { margin: 0; accent-color: #eab308; }
.lightning-symbol-option-preview { width: 17px; height: 17px; position: relative; display: inline-grid; place-items: center; }
.lightning-symbol-option-cross::before,
.lightning-symbol-option-cross::after,
.lightning-symbol-option-cross i::before,
.lightning-symbol-option-cross i::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 7px;
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: #111827;
}
.lightning-symbol-option-cross::before { transform: rotate(45deg); }
.lightning-symbol-option-cross::after { transform: rotate(-45deg); }
.lightning-symbol-option-cross i::before,
.lightning-symbol-option-cross i::after { left: 2px; top: 8px; width: 13px; height: 1px; background: #d9d9d9; }
.lightning-symbol-option-cross i::before { transform: rotate(45deg); }
.lightning-symbol-option-cross i::after { transform: rotate(-45deg); }
.lightning-symbol-option-bolt svg { width: 16px; height: 16px; overflow: visible; }
.lightning-symbol-option-bolt path { fill: #d9d9d9; stroke: #111827; stroke-width: 1.6; stroke-linejoin: round; }
.lightning-cross-key { width: 17px; height: 17px; }
.lightning-cross-key::before, .lightning-cross-key::after,
.lightning-cross-key span::before, .lightning-cross-key span::after { left: 1px; top: 7px; width: 15px; height: 3px; }
.lightning-cross-key span::before, .lightning-cross-key span::after { left: 2px; top: 8px; width: 13px; height: 1px; }
.lightning-cross-key.is-bolt::before,
.lightning-cross-key.is-bolt::after,
.lightning-cross-key.is-bolt span::before,
.lightning-cross-key.is-bolt span::after { display: none; }
.lightning-cross-key.is-bolt span {
  position: absolute;
  inset: 0;
  display: block;
  background: #d9d9d9;
  border: 1px solid #111827;
  clip-path: polygon(56% 0, 17% 49%, 43% 49%, 27% 100%, 84% 43%, 59% 43%, 78% 18%, 52% 18%);
}
.information-data-attribution {
  padding: 9px 10px;
  border-left: 3px solid rgba(14,116,144,.45);
  border-radius: 0 8px 8px 0;
  background: rgba(236,254,255,.55);
}
.information-data-attribution strong { color: #0f4c5c; }

@media (max-width: 720px) {
  .lightning-symbol-settings { grid-template-columns: 1fr; }
}


/* v6.28.5 — selectable MTG-original / legacy corrected LFL placement. */
.lightning-placement-settings {
  display: grid;
  gap: 6px;
  margin: 8px 0 7px;
  padding: 7px;
  border: 1px solid rgba(14,116,144,.24);
  border-radius: 10px;
  background: rgba(236,254,255,.64);
}
.lightning-placement-settings legend {
  padding: 0 3px;
  color: #35536a;
  font-size: 9.5px;
  font-weight: 800;
}
.lightning-placement-settings label {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  gap: 7px;
  padding: 6px 7px;
  border: 1px solid rgba(148,163,184,.24);
  border-radius: 8px;
  background: rgba(255,255,255,.76);
  color: #39475c;
  cursor: pointer;
}
.lightning-placement-settings input { margin: 2px 0 0; accent-color: #0e7490; }
.lightning-placement-settings b { display: block; font-size: 9.5px; }
.lightning-placement-settings small { display: block; margin-top: 2px; color: #66758a; font-size: 8.5px; line-height: 1.3; }
.lightning-placement-settings label:has(input:checked) {
  border-color: rgba(14,116,144,.55);
  background: rgba(207,250,254,.72);
}
.lightning-placement-settings label:has(input:disabled) { opacity: .55; cursor: not-allowed; }


/* v6.29.10 — compact, colour-scaled and interactive surface observations. */
.factual-data-button-icon {
  width: 29px; height: 29px; overflow: visible; border: 0; border-radius: 0;
  background: transparent; font-size: 24px; line-height: 1; filter: none;
}
.factual-data-button-icon img { display: none; }

.weather-observations-controls { max-height: 680px; }
.observation-render-control {
  min-width: 0; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr 1fr; gap: 6px; border: 0;
}
.observation-render-control legend {
  grid-column: 1 / -1; margin: 0 0 3px; padding: 0; color: #64748b;
  font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase;
}
.observation-render-control label { min-width: 0; cursor: pointer; }
.observation-render-control input { position: absolute; opacity: 0; pointer-events: none; }
.observation-render-control label > span {
  min-height: 34px; padding: 5px 7px; display: grid; place-items: center;
  border: 1px solid rgba(148,163,184,.28); border-radius: 9px;
  background: #f8fafc; color: #526076; font-size: 9px; font-weight: 780; text-align: center;
}
.observation-render-control input:checked + span {
  border-color: #0d9488; background: #ecfdf5; color: #0f766e;
  box-shadow: inset 0 0 0 1px rgba(13,148,136,.14);
}
.observation-render-control input:focus-visible + span {
  outline: 3px solid rgba(59,130,246,.24); outline-offset: 1px;
}
.observation-weather-style-control {
  padding: 7px; border: 1px solid rgba(148,163,184,.2); border-radius: 10px;
  background: rgba(248,250,252,.55); transition: border-color .16s ease, background .16s ease;
}
.observation-weather-style-control.is-relevant {
  border-color: rgba(13,148,136,.38); background: rgba(236,253,245,.75);
}

.synop-plot-card:not(.is-large) {
  width: 82px; height: 72px; border-radius: 8px; box-shadow: 0 3px 10px rgba(15,23,42,.24);
}
.synop-plot-card:not(.is-large) .plot-value { font-size: 8px; }
.synop-plot-card:not(.is-large) .plot-value small { margin-top: 1px; font-size: 4.5px; }
.synop-plot-card:not(.is-large) .plot-temperature,
.synop-plot-card:not(.is-large) .plot-pressure { top: 6px; }
.synop-plot-card:not(.is-large) .plot-temperature,
.synop-plot-card:not(.is-large) .plot-visibility,
.synop-plot-card:not(.is-large) .plot-dew-point { left: 6px; }
.synop-plot-card:not(.is-large) .plot-pressure,
.synop-plot-card:not(.is-large) .plot-tendency,
.synop-plot-card:not(.is-large) .plot-precipitation { right: 6px; }
.synop-plot-card:not(.is-large) .plot-visibility,
.synop-plot-card:not(.is-large) .plot-tendency { top: 29px; }
.synop-plot-card:not(.is-large) .plot-dew-point,
.synop-plot-card:not(.is-large) .plot-precipitation { bottom: 5px; }
.synop-plot-card:not(.is-large) .synop-plot-symbol { width: 44px; height: 44px; }
.synop-plot-card:not(.is-large) .plot-cloud-ring,
.synop-plot-card:not(.is-large) .plot-calm,
.synop-plot-card:not(.is-large) .plot-variable-wind,
.synop-plot-card:not(.is-large) .plot-cloud-missing,
.synop-plot-card:not(.is-large) .plot-wind { stroke-width: 2.4; }

.observation-value-marker {
  min-width: 34px; max-width: 58px; min-height: 19px; height: 19px; padding: 1px 5px;
  display: grid; place-items: center; border: 1px solid #fff; border-radius: 6px;
  background: var(--parameter-colour); color: var(--parameter-text, #fff);
  box-shadow: 0 0 0 1px rgba(15,23,42,.58), 0 2px 6px rgba(15,23,42,.26);
  font-size: 9.5px; font-weight: 900; line-height: 1; text-align: center;
}
.observation-value-marker span {
  width: 100%; max-width: 48px; overflow: hidden; text-align: center; text-overflow: ellipsis;
}
.observation-value-marker small { display: none; }
.observation-value-text {
  min-width: 32px; height: 21px; display: grid; place-items: center;
  color: var(--parameter-colour); font-size: 11px; font-weight: 950; line-height: 1;
  text-align: center; white-space: nowrap; paint-order: stroke fill;
  -webkit-text-stroke: .65px #080b10;
  text-shadow: 0 1px 1px rgba(255,255,255,.75), 0 1px 3px rgba(0,0,0,.36);
}
.observation-missing-marker {
  width: 22px; height: 22px; border-width: 1px; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(15,23,42,.55), 0 2px 6px rgba(15,23,42,.24);
}
.observation-missing-marker span { font-size: 14px; }
.weather-sticker-marker,
.weather-wmo-marker {
  width: 35px; height: 35px; position: relative; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.98); border-radius: 11px; background: rgba(255,255,255,.96);
  box-shadow: 0 0 0 1px rgba(15,23,42,.52), 0 3px 8px rgba(15,23,42,.26);
}
.weather-sticker-marker span {
  display: block; font-size: 24px; line-height: 1; transform: translateY(-1px);
  filter: drop-shadow(0 1px 1px rgba(15,23,42,.18));
}
.weather-sticker-marker.is-thunder { background: linear-gradient(145deg,#fef3c7,#fde68a); }
.weather-sticker-marker.is-rain,
.weather-sticker-marker.is-shower,
.weather-sticker-marker.is-drizzle { background: linear-gradient(145deg,#eff6ff,#bfdbfe); }
.weather-sticker-marker.is-snow,
.weather-sticker-marker.is-hail { background: linear-gradient(145deg,#f8fafc,#dbeafe); }
.weather-sticker-marker.is-fog { background: linear-gradient(145deg,#f8fafc,#d1d5db); }
.weather-wmo-marker { border-radius: 50%; }
.weather-wmo-marker svg { width: 27px; height: 27px; overflow: visible; }
.weather-wmo-marker svg path,
.weather-wmo-marker svg circle {
  fill: none; stroke: #0b1220; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round;
}
.weather-wmo-marker svg circle { fill: #0b1220; }
.weather-wmo-marker small {
  position: absolute; right: -4px; bottom: -4px; min-width: 16px; height: 13px; padding: 0 2px;
  display: grid; place-items: center; border: 1px solid #0f172a; border-radius: 5px;
  background: #fff; color: #111827; font-size: 7px; font-weight: 900; line-height: 1;
}

.observation-metric-grid { gap: 5px; }
.observation-metric { min-height: 49px; padding: 6px 8px; gap: 3px; border-radius: 9px; }
.observation-metric > span { font-size: 7.5px; }
.observation-metric strong { font-size: 11.5px; text-align: center; }
.observation-metric strong small { font-size: 7.5px; }

.observation-history-section > header { align-items: flex-start; }
.observation-history-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.observation-history-actions > #observationHistoryRange {
  color: #8da7c8; font-size: 8px; font-weight: 700; letter-spacing: .035em;
}
.observation-history-view {
  display: inline-flex; overflow: hidden; border: 1px solid #2b3a52; border-radius: 6px;
  background: #101a2a;
}
.observation-history-view button {
  min-width: 48px; height: 23px; padding: 0 8px; border: 0; border-right: 1px solid #2b3a52;
  background: transparent; color: #8da7c8; cursor: pointer; font-size: 8px; font-weight: 850;
  letter-spacing: .04em; text-transform: uppercase;
}
.observation-history-view button:last-child { border-right: 0; }
.observation-history-view button.active { background: #183b66; color: #67b7ff; }
.observation-chart-tabs.is-hidden,
.observation-chart.is-hidden,
.observation-history-table.is-hidden { display: none !important; }

.chart-series { animation: observationSeriesIn .46s cubic-bezier(.22,.7,.25,1) both; }
.chart-series:nth-of-type(2) { animation-delay: .06s; }
.chart-series:nth-of-type(3) { animation-delay: .12s; }
@keyframes observationSeriesIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.observation-chart svg { touch-action: none; }
.chart-hover-line {
  opacity: 0; stroke: #dbeafe; stroke-width: 1; stroke-dasharray: 3 3;
  pointer-events: none; transition: opacity .1s ease;
}
.chart-hover-line.is-visible { opacity: .7; }
.chart-hover-point {
  opacity: 0; stroke: #e2e8f0; stroke-width: 2.5; pointer-events: none;
  transition: opacity .08s ease, r .08s ease;
}
.chart-hover-point.is-visible { opacity: 1; }
.observation-chart-tooltip {
  position: absolute; z-index: 8; max-width: 220px; padding: 8px 9px; display: grid; gap: 3px;
  border: 1px solid #475569; border-radius: 7px; background: rgba(24,24,22,.96); color: #e5e7eb;
  box-shadow: 0 8px 22px rgba(0,0,0,.34); opacity: 0; transform: translateY(3px);
  pointer-events: none; transition: opacity .1s ease, transform .1s ease;
  font-size: 8.5px; line-height: 1.25;
}
.observation-chart-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.observation-chart-tooltip time { margin-bottom: 2px; color: #cbd5e1; font-size: 8px; }
.observation-chart-tooltip span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.observation-chart-tooltip span i {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--series-colour);
}
.observation-chart-tooltip b { color: #f8fafc; }

.observation-history-table {
  max-height: 310px; overflow: auto; border: 1px solid #223149; border-radius: 10px;
  background: #0f1828; scrollbar-width: thin; scrollbar-color: #64748b #111c2e;
}
.observation-history-table table {
  width: 100%; min-width: 710px; border-collapse: collapse; color: #dce7f7;
  font-size: 9px; line-height: 1.2;
}
.observation-history-table th {
  position: sticky; z-index: 2; top: 0; padding: 8px 9px; border-bottom: 1px solid #334155;
  background: #111c2e; color: #8da7c8; font-size: 8px; font-weight: 850; text-align: left;
  white-space: nowrap;
}
.observation-history-table td {
  height: 31px; padding: 4px 9px; border-bottom: 1px solid #2b3a52; white-space: nowrap;
}
.observation-history-table tbody tr:hover { background: #17243a; }
.observation-history-table time { color: #f1f5f9; font-weight: 800; }
.history-weather-mini { width: 25px; height: 25px; display: grid; place-items: center; }
.history-weather-mini .weather-sticker-marker,
.history-weather-mini .weather-wmo-marker {
  width: 22px; height: 22px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(15,23,42,.45);
}
.history-weather-mini .weather-sticker-marker span { font-size: 16px; }
.history-weather-mini .weather-wmo-marker svg { width: 17px; height: 17px; }
.history-weather-mini .weather-wmo-marker small { right: -5px; bottom: -3px; transform: scale(.75); }

@media (max-width: 620px) {
  .observation-history-actions { align-items: flex-end; flex-direction: column; gap: 4px; }
  .observation-history-table { max-height: 270px; }
  .observation-chart-tooltip { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .chart-series { animation: none !important; }
  .observation-chart-tooltip,
  .chart-hover-line,
  .chart-hover-point { transition: none !important; }
}

/* v6.29.10 — scalable markers, exact WMO reference symbols and wrapped tools. */
@media (min-width: 821px) {
  .tools-button {
    height: auto; min-height: 58px; padding-top: 7px; padding-bottom: 7px;
    grid-template-columns: 29px minmax(0,1fr) auto;
  }
  .tools-button:has(> .tool-chevron) { grid-template-columns: 29px minmax(0,1fr) auto 13px; gap: 7px; }
  .tools-button:has(> .tool-chevron) > .tool-button-label { grid-column: 2; }
  .tools-button:has(> .tool-chevron) > .tool-status { grid-column: 3; }
  .tools-button:has(> .tool-chevron) > .tool-chevron { grid-column: 4; }
}
.tool-button-label,
.factual-action-copy strong,
.factual-action-copy small,
.observation-source-control label b,
.observation-source-control label small,
.observation-render-control label > span {
  overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere;
}
.tool-button-label { line-height: 1.12; }
.factual-action { min-height: 62px; height: auto; }
.factual-action-copy strong { line-height: 1.15; }
.factual-action .tool-status { flex-shrink: 0; }

.factual-data-button-icon {
  width: 29px; height: 29px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid rgba(14,116,144,.18); border-radius: 50%;
  background: #e0f2fe; font-size: 17px; line-height: 1; filter: none;
}
.factual-data-button.is-enabled {
  border-color: rgba(34,197,94,.46); background: rgba(220,252,231,.97);
}
.factual-data-button.is-enabled .factual-data-button-icon {
  border-color: rgba(22,163,74,.32); background: #bbf7d0;
}
.factual-data-button.is-enabled .tool-status { color: #15803d; }

.weather-observations-controls { max-height: 940px; }
.observation-size-controls {
  display: grid; gap: 7px; padding: 8px;
  border: 1px solid rgba(148,163,184,.22); border-radius: 10px; background: rgba(248,250,252,.72);
}
.observation-size-controls > label:not(.observation-check-row) { display: grid; gap: 4px; }
.observation-size-controls > label > span {
  min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: #526076; font-size: 9px; line-height: 1.2;
}
.observation-size-controls b { min-width: 0; overflow-wrap: anywhere; }
.observation-size-controls output { flex: 0 0 auto; color: #0f766e; font-size: 9px; font-weight: 900; }
.observation-size-controls input[type="range"] { width: 100%; margin: 0; accent-color: #0d9488; }
.observation-check-row {
  min-height: 38px; padding-top: 6px; display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 8px; border-top: 1px solid rgba(148,163,184,.2); opacity: .55;
}
.observation-check-row.is-relevant { opacity: 1; }
.observation-check-row input { position: absolute; opacity: 0; pointer-events: none; }
.observation-check-row i {
  position: relative; width: 36px; height: 21px; border-radius: 999px; background: #cbd5e1;
}
.observation-check-row i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.25); transition: transform .16s ease;
}
.observation-check-row input:checked + i { background: #0d9488; }
.observation-check-row input:checked + i::after { transform: translateX(15px); }
.observation-airport-switch { background: #eff6ff; }

.observation-user-scale {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center;
}
.observation-user-scale > :not(.observation-airport-badge) {
  transform: scale(var(--observation-user-scale, 1)); transform-origin: center;
  transition: transform .12s ease;
}
.observation-leaflet-icon.is-text-value .observation-user-scale > :not(.observation-airport-badge) {
  --observation-user-scale: var(--observation-text-scale, 1.2);
}
.observation-leaflet-icon.is-box-value .observation-user-scale > :not(.observation-airport-badge) {
  --observation-user-scale: var(--observation-box-scale, 1);
}
.observation-leaflet-icon.is-weather-marker .observation-user-scale > :not(.observation-airport-badge) {
  --observation-user-scale: var(--observation-weather-scale, 1);
}
.observation-airport-badge {
  position: absolute; z-index: 9; right: -5px; top: -6px; width: 15px; height: 15px;
  display: grid; place-items: center; border: 1px solid #0f172a; border-radius: 50%;
  background: #dbeafe; color: #1d4ed8; box-shadow: 0 1px 3px rgba(15,23,42,.3);
  font-size: 8px; line-height: 1;
}
.observation-leaflet-icon.is-derived-station .synop-plot-card { border-style: dashed; border-color: #0d9488; }
.synop-plot-card:not(.is-large) .plot-value small { font-size: 5.7px; font-weight: 800; }

.observation-value-text {
  font-size: 13px; -webkit-text-stroke: .72px #05070a;
  text-shadow: 0 1px 0 #fff, 0 1px 3px rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.35);
}
.weather-sticker-marker.is-boxless,
.is-sticker-boxless .weather-sticker-marker {
  border-color: transparent !important; background: transparent !important; box-shadow: none !important;
}
.weather-sticker-marker.is-boxless span,
.is-sticker-boxless .weather-sticker-marker span { filter: drop-shadow(0 2px 2px rgba(15,23,42,.42)); }

.weather-wmo-marker {
  width: 61px; height: 36px; overflow: visible; border: 0; border-radius: 0;
  background: transparent; box-shadow: 0 2px 6px rgba(15,23,42,.34);
}
.wmo-symbol-sprite {
  width: 60.33px; height: 33px; display: block; overflow: hidden;
  background-image: url("/static/wmo-weather-symbols.png?build=6.29.10-observation-weather");
  background-repeat: no-repeat; background-size: 603.26px 631.78px;
  background-position:
    calc(var(--wmo-column) * -60.326px)
    calc((var(--wmo-row) * -60.14px) - 32.24px);
  outline: 1px solid rgba(15,23,42,.88); outline-offset: -1px;
}
.wmo-symbol-unavailable { font-size: 24px; font-weight: 900; }
.weather-wmo-marker small {
  right: -3px; bottom: -5px; min-width: 17px; height: 14px; font-size: 8px;
}
.history-weather-mini .weather-wmo-marker {
  width: 22px; height: 22px; box-shadow: none; transform: scale(.37); transform-origin: center;
}
.history-weather-mini .weather-wmo-marker small { right: -4px; bottom: -5px; transform: none; }

.observation-chart-empty.is-no-data {
  color: #fca5a5; font-size: clamp(13px,2vw,18px); font-weight: 950; letter-spacing: .08em;
}

/* v6.29.10 interaction fast path: all national observations are painted into
   one padded canvas.  Leaflet moves that bitmap during a gesture and the
   layer reprojects once at the end, so station count no longer affects pan or
   zoom frame time. */
.leaflet-observations-pane {
  backface-visibility: hidden;
  pointer-events: none !important;
}
.observation-canvas-layer {
  display: block;
  pointer-events: none !important;
  contain: strict;
  backface-visibility: hidden;
}
.observation-canvas-layer.is-map-interacting { will-change: transform; }
.observation-leaflet-icon { contain: layout style; }
.leaflet-observations-pane.is-map-interacting { pointer-events: none !important; }
.leaflet-observations-pane.is-map-interacting .observation-user-scale > *,
.leaflet-observations-pane.is-map-interacting .observation-leaflet-icon {
  transition: none !important;
}
.leaflet-observations-pane.is-map-interacting .synop-plot-card,
.leaflet-observations-pane.is-map-interacting .observation-value-marker,
.leaflet-observations-pane.is-map-interacting .observation-missing-marker,
.leaflet-observations-pane.is-map-interacting .weather-sticker-marker,
.leaflet-observations-pane.is-map-interacting .weather-wmo-marker,
.leaflet-observations-pane.is-map-interacting .observation-airport-badge {
  box-shadow: none !important;
}
.leaflet-observations-pane.is-map-interacting .observation-value-text {
  text-shadow: none !important;
}
.leaflet-observations-pane.is-map-interacting .weather-sticker-marker span {
  filter: none !important;
}
.observation-chart-empty.is-loading {
  color: #8da7c8;
}
.observation-chart-empty.is-loading::before {
  content: ""; width: 13px; height: 13px; margin-right: 7px; display: inline-block;
  border: 2px solid rgba(96,165,250,.28); border-top-color: #60a5fa; border-radius: 50%;
  vertical-align: -3px; animation: observationHistorySpin .7s linear infinite;
}
@keyframes observationHistorySpin { to { transform: rotate(360deg); } }
.chart-point.is-direction { stroke: #d1fae5; stroke-width: 1.2; }

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .factual-data-button-icon { width: 26px; height: 26px; font-size: 15px; }
  .factual-data-menu.is-mobile-portal { overflow-y: auto !important; }
}
@media (max-width: 420px) {
  .factual-data-heading strong { font-size: 13px; line-height: 1.15; }
  .factual-action { grid-template-columns: 31px minmax(0,1fr) auto; }
  .observation-source-control label > span { min-height: 60px; }
}

/* v6.29.10 — warnings and surface observations are independent tools. */
.warnings-overview-control > .factual-data-menu,
.weather-observations-control > .factual-data-menu {
  width: 420px;
  max-height: min(780px, calc(100vh - 120px));
  padding: 11px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}
.warnings-overview-button.is-enabled {
  border-color: rgba(239,68,68,.38);
  background: rgba(255,247,247,.97);
}
.warnings-overview-button.is-enabled .warnings-overview-icon {
  background: #dc2626;
  box-shadow: 0 0 0 4px rgba(220,38,38,.11);
}
.warnings-overview-button.is-enabled .tool-status { color: #b91c1c; }
.weather-observations-overview-button.is-enabled {
  border-color: rgba(34,197,94,.46);
  background: rgba(220,252,231,.97);
}
.weather-observations-overview-button.is-enabled .weather-observations-icon {
  border-color: rgba(22,163,74,.34);
  background: #dcfce7;
  box-shadow: 0 0 0 4px rgba(34,197,94,.10);
}
.weather-observations-overview-button.is-enabled .tool-status { color: #15803d; }
.weather-observations-overview-button > .weather-observations-icon {
  width: 29px;
  height: 29px;
  border-radius: 9px;
}
.weather-observations-overview-button > .weather-observations-icon img {
  width: 41px;
  height: 41px;
}
.weather-observations-menu .weather-observations-controls {
  max-height: none;
  margin-top: 0;
  padding-top: 0;
  overflow: visible;
  border-top: 0;
}
.observation-network-summary {
  min-height: 60px;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(13,148,136,.27);
  border-radius: 12px;
  background: rgba(236,253,245,.86);
}
.observation-network-summary > span { min-width: 0; display: grid; gap: 3px; }
.observation-network-summary b {
  color: #115e59;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.observation-network-summary small {
  color: #52716f;
  font-size: 8.5px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.observation-network-summary > div {
  display: grid;
  grid-template-columns: repeat(3,auto);
  gap: 3px;
}
.observation-network-summary i {
  padding: 4px 5px;
  border-radius: 999px;
  background: #0f766e;
  color: #fff;
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .03em;
}

@media (max-width: 820px), (max-height: 600px) and (max-width: 960px) {
  .tools-wrap .weather-observations-icon {
    grid-column: 1;
    grid-row: 1;
    width: 27px;
    height: 27px;
    border-radius: 9px;
  }
  .tools-wrap .weather-observations-icon img { width: 39px; height: 39px; }
  .warnings-overview-control > .factual-data-menu.is-mobile-portal,
  .weather-observations-control > .factual-data-menu.is-mobile-portal {
    width: auto;
    max-height: min(74dvh, 650px) !important;
    padding: 10px !important;
  }
}

@media (max-width: 420px) {
  .observation-network-summary { grid-template-columns: 1fr; gap: 7px; }
  .observation-network-summary > div { justify-content: start; }
}

/* v6.29.10 station-plot readability and optional transparent plotting card. */
.plot-value,
.plot-value small {
  paint-order: stroke fill;
  -webkit-text-stroke-width: .42px;
  -webkit-text-stroke-color: rgba(255,255,255,.98);
  text-shadow: 0 1px 1px rgba(15,23,42,.14);
}
.synop-plot-card:not(.is-large) .plot-value {
  -webkit-text-stroke-color: var(--plot-outline, #05070a);
}
.synop-plot-card:not(.is-large) .plot-value small {
  -webkit-text-stroke-color: var(--plot-unit-outline, #fff);
}
.plot-value.is-missing { color: #000 !important; }
.synop-plot-card.is-boxless {
  overflow: visible;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.synop-plot-card.is-boxless .plot-value,
.synop-plot-card.is-boxless .plot-value small {
  -webkit-text-stroke-width: .82px;
  text-shadow: 0 1px 2px rgba(15,23,42,.22);
}
.synop-plot-card:not(.is-large) {
  width: 96px;
  height: 80px;
}
.synop-plot-card:not(.is-large) .plot-value { font-size: 10px; font-weight: 900; }
.synop-plot-card:not(.is-large) .plot-value small { font-size: 7px; font-weight: 850; }
.weather-sticker-marker.is-night,
.weather-sticker-marker.is-night-cloud {
  background: linear-gradient(145deg,#e0e7ff,#c7d2fe);
}

/* v6.29.10 — transparent SYNOP symbols and adjustable station-plot sizing. */
.synop-plot-card.is-boxless .plot-value small {
  color: #fff;
  -webkit-text-stroke-width: 0;
  text-shadow: none;
}
.synop-plot-card.is-boxless .plot-cloud-ring,
.synop-plot-card.is-boxless .plot-calm,
.synop-plot-card.is-boxless .plot-cloud-missing {
  stroke: #fff;
}
.synop-plot-card.is-boxless .plot-cloud-fill {
  fill: #fff;
}