/* Shared map UI. Geometry follows the existing search / legend / weather rail.
   Keep this stylesheet after home-v2-preview.css and city-weather-v2.css. */
/* Values are the existing unit/search controls in home-v2-preview.css
   (3449–3481, final radius/height locks at 4610+), shared by old and new UI. */
.city-search-mobile,
.mw-card {
  --wn-map-control-surface: rgba(8, 15, 20, .80);
  --wn-map-control-border: rgba(225, 241, 248, .17);
  --wn-map-control-radius: 14px;
  --wn-map-control-inner-radius: 10px;
  --wn-map-control-height: 50px;
  --wn-map-control-inner-height: 42px;
  --wn-map-control-ink: #a8b7c0;
  --wn-map-control-selected-surface: #edf4f6;
  --wn-map-control-selected-ink: #101519;
  --wn-map-control-weight: 650;
  --wn-map-control-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 6px 16px rgba(0, 0, 0, .14);
  --wn-map-control-selected-shadow: 0 1px 5px rgba(0, 0, 0, .15);
  --wn-map-control-blur: blur(14px) saturate(110%);
  --wn-map-control-hover: rgba(159, 202, 255, .10);
}

/* Legacy unit controls retain their actual existing theme rather than
   importing the modern page's white selection into the older weather rail. */
body:not(.home-v2) .mw-card {
  --wn-map-control-surface: #0f1a30;
  --wn-map-control-border: transparent;
  --wn-map-control-radius: 999px;
  --wn-map-control-inner-radius: 0px;
  --wn-map-control-height: 44px;
  --wn-map-control-inner-height: 34px;
  --wn-map-control-ink: rgba(231, 238, 252, .78);
  --wn-map-control-selected-surface: #1a2f53;
  --wn-map-control-selected-ink: #fff;
  --wn-map-control-weight: 800;
  --wn-map-control-shadow: none;
  --wn-map-control-selected-shadow: none;
  --wn-map-control-blur: none;
}

/* Bind the existing units and search frame to these same values. Their
   geometry remains owned by the original stylesheets and responsive locks. */
body.home-v2 .mw-card .mw-head :is(.unit-toggle, #searchForm) {
  background: var(--wn-map-control-surface) !important;
  border-color: var(--wn-map-control-border) !important;
  border-radius: var(--wn-map-control-radius) !important;
  box-shadow: var(--wn-map-control-shadow) !important;
  backdrop-filter: var(--wn-map-control-blur) !important;
  -webkit-backdrop-filter: var(--wn-map-control-blur) !important;
}
body.home-v2 .mw-card .mw-head .unit-toggle button {
  border-radius: var(--wn-map-control-inner-radius) !important;
  color: var(--wn-map-control-ink) !important;
  font-weight: var(--wn-map-control-weight) !important;
}
body.home-v2 .mw-card .mw-head .unit-toggle button.active {
  background: var(--wn-map-control-selected-surface) !important;
  color: var(--wn-map-control-selected-ink) !important;
  box-shadow: var(--wn-map-control-selected-shadow) !important;
}

.wn-map-controls,
.wn-map-wind-toggle {
  font-family: inherit;
  color: var(--wn-map-control-ink);
  box-sizing: border-box;
}
.wn-map-controls {
  position: absolute;
  z-index: 730;
  top: 12px;
  bottom: 64px;
  left: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: none;
  /* Keep physical map controls clear of the right-hand navigation in RTL. */
  direction: ltr;
}
.map-wrap:dir(rtl) :is(.wn-map-source-switch, .wn-map-data-status) { direction: rtl; }
.wn-map-source-switch,
.wn-map-wind-toggle,
.wn-map-data-status {
  border: 1px solid var(--wn-map-control-border);
  border-radius: var(--wn-map-control-radius);
  background: var(--wn-map-control-surface);
  box-shadow: var(--wn-map-control-shadow);
  backdrop-filter: var(--wn-map-control-blur);
  -webkit-backdrop-filter: var(--wn-map-control-blur);
}
.wn-map-source-switch {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  height: var(--wn-map-control-height);
  padding: 3px;
  gap: 2px;
  max-width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
}
.wn-map-source-switch [data-weather-source],
.wn-map-wind-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  margin: 0;
  border: 0;
  border-radius: var(--wn-map-control-inner-radius);
  padding: 0 12px;
  background: transparent;
  color: var(--wn-map-control-ink);
  font: inherit;
  font-size: 13px;
  font-weight: var(--wn-map-control-weight);
  line-height: normal;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
/* The visible selection matches the native unit button's 42/36px face,
   while the actual button remains a 44px target on every screen. */
.wn-map-source-switch [data-weather-source]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  top: 50%;
  height: var(--wn-map-control-inner-height);
  transform: translateY(-50%);
  border-radius: var(--wn-map-control-inner-radius);
  pointer-events: none;
}
.wn-map-source-switch [data-weather-source] {
  isolation: isolate;
}
.wn-map-source-switch :is([aria-pressed="true"], [aria-selected="true"], .is-active),
.wn-map-wind-toggle[aria-pressed="true"] {
  color: var(--wn-map-control-selected-ink);
}
.wn-map-source-switch :is([aria-pressed="true"], [aria-selected="true"], .is-active)::before,
.wn-map-wind-toggle[aria-pressed="true"]::before {
  background: var(--wn-map-control-selected-surface);
  box-shadow: var(--wn-map-control-selected-shadow);
}
@media (hover: hover) {
  .wn-map-source-switch [data-weather-source]:not([aria-pressed="true"]):not([aria-selected="true"]):not(.is-active):hover::before,
  .wn-map-wind-toggle[aria-pressed="false"]:hover::before {
    background: var(--wn-map-control-hover);
  }
}
.wn-map-source-switch [data-weather-source]:focus-visible,
.wn-map-wind-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.wn-map-source-switch [data-weather-source]:disabled,
.wn-map-wind-toggle:disabled {
  opacity: .65;
  cursor: wait;
}
.wn-map-wind-toggle {
  position: absolute;
  z-index: 735;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wn-map-control-height);
  height: var(--wn-map-control-height);
  padding: 3px;
  border: 1px solid var(--wn-map-control-border);
  border-radius: var(--wn-map-control-radius);
  background: var(--wn-map-control-surface);
  pointer-events: auto;
}
body.home-v2 .mw-card .wn-map-wind-toggle {
  border-color: var(--wn-map-control-border) !important;
}
.wn-map-wind-toggle::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: var(--wn-map-control-inner-radius);
  pointer-events: none;
}
.wn-map-wind-toggle svg {
  position: relative;
  z-index: 1;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Legacy pages have no unit-control header; keep their wind button in flow. */
.wn-map-controls > .wn-map-wind-toggle {
  position: relative;
  inset: auto;
  align-self: flex-start;
  order: 2;
}

/* Legacy Android pages keep units inside the weather header, beside the city.
   Their wind button shares that header instead of escaping from search. */
.mw-card .wx-top:has(> .wn-map-wind-toggle) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-rows: 44px 44px;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
}
.mw-card .wx-top:has(> .wn-map-wind-toggle) > .wx-place {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
}
.mw-card .wx-top:has(> .wn-map-wind-toggle) > .unit-toggle {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
.mw-card .wx-top > .wn-map-wind-toggle {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

/* Legacy maps inherit light text from the page, so MapLibre's default white
   popup and attribution surfaces need the same dark treatment as map UI. */
body:not(.home-v2) .mw-card .map-wrap .maplibregl-popup-content {
  background: #26343d;
  color: #edf4f6;
  border: 1px solid rgba(205, 224, 232, .28);
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .24);
}
body:not(.home-v2) .mw-card .map-wrap .maplibregl-popup-close-button {
  color: #edf4f6;
}
body:not(.home-v2) .mw-card .map-wrap :is(.maplibregl-popup-anchor-bottom, .maplibregl-popup-anchor-bottom-left, .maplibregl-popup-anchor-bottom-right) .maplibregl-popup-tip {
  border-top-color: #26343d;
}
body:not(.home-v2) .mw-card .map-wrap :is(.maplibregl-popup-anchor-top, .maplibregl-popup-anchor-top-left, .maplibregl-popup-anchor-top-right) .maplibregl-popup-tip {
  border-bottom-color: #26343d;
}
body:not(.home-v2) .mw-card .map-wrap .maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: #26343d;
}
body:not(.home-v2) .mw-card .map-wrap .maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: #26343d;
}
body:not(.home-v2) .mw-card .map-wrap .maplibregl-ctrl-attrib {
  background: #26343d;
  color: #edf4f6;
}
body:not(.home-v2) .mw-card .map-wrap .maplibregl-ctrl-attrib a {
  color: #b7e2f8;
  text-decoration: underline;
}
body:not(.home-v2) .mw-card .map-wrap .maplibregl-ctrl-attrib-button {
  background-color: #edf4f6;
  border-radius: 50%;
}
body:not(.home-v2) .mw-card .map-wrap :is(.maplibregl-popup-close-button, .maplibregl-ctrl-attrib a, .maplibregl-ctrl-attrib-button):focus-visible {
  outline: 2px solid #b7e2f8;
  outline-offset: 2px;
}

.wn-map-data-status {
  order: 3;
  max-width: 240px;
  margin: 0;
  padding: 6px 10px;
  color: var(--wn-map-control-ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
  text-align: left;
  pointer-events: auto;
}

/* Multi-line dates use the legacy chart-card corner, not the unit pill. */
body:not(.home-v2) .wn-map-data-status {
  border-radius: 14px;
}

body .mw-card .map-wrap .maplibregl-ctrl-group button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
body .mw-card .map-wrap .maplibregl-ctrl-group button:focus-visible {
  outline: 2px solid #b7e2f8;
  outline-offset: 2px;
}
body .mw-card .map-wrap .maplibregl-popup-content {
  box-sizing: border-box;
  min-height: 44px;
  padding-right: 44px !important;
}
body .mw-card .map-wrap .maplibregl-popup-close-button {
  top: 50% !important;
  right: 0 !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  line-height: 44px;
  transform: translateY(-50%) !important;
}
body .mw-card .map-wrap .maplibregl-popup-close-button:focus-visible {
  outline: 2px solid #b7e2f8;
  outline-offset: 2px;
}
/* Preserve the legacy 31px unit face while enlarging its transparent hit area. */
body:not(.home-v2) .mw-card .unit-toggle {
  height: 33px;
  align-items: center;
  overflow: visible;
}
body:not(.home-v2) .mw-card .unit-toggle button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  background: transparent !important;
}
body:not(.home-v2) .mw-card .unit-toggle button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  top: 50%;
  height: 31px;
  transform: translateY(-50%);
  border-radius: inherit;
  pointer-events: none;
}
body:not(.home-v2) .mw-card .unit-toggle button:is(.active, [aria-pressed="true"])::before {
  background: #1a2f53;
}
body:not(.home-v2) .mw-card .unit-toggle button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Modern unit faces stay 42/36px; their transparent buttons remain 44px. */
body.home-v2 .mw-card .mw-head .unit-toggle:not([hidden]) {
  min-width: 100px !important;
  width: 100px !important;
  overflow: visible !important;
  align-items: center !important;
}
body.home-v2 .mw-card .unit-toggle button {
  position: relative;
  isolation: isolate;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  background: transparent !important;
}
body.home-v2 .mw-card .unit-toggle button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  top: 50%;
  height: var(--wn-map-control-inner-height);
  transform: translateY(-50%);
  border-radius: inherit;
  pointer-events: none;
}
body.home-v2 .mw-card .unit-toggle button:is(.active, [aria-pressed="true"])::before {
  background: var(--wn-map-control-selected-surface);
}
body.home-v2 .mw-card .unit-toggle button:focus-visible {
  outline: 2px solid #b7e2f8;
  outline-offset: 2px;
}

body.home-v2 .mw-card .dashboard-legend {
  height: auto !important;
  min-height: 54px !important;
}
body.home-v2 .mw-card .dashboard-legend .legend-group {
  grid-template-rows: minmax(14px, auto) minmax(22px, auto) !important;
  gap: 4px !important;
}
body.home-v2 .mw-card .dashboard-legend :is(h3, h4) {
  font-size: 11px !important;
  line-height: 14px !important;
}
body.home-v2 .mw-card .dashboard-legend .legend-row {
  grid-template-rows: 5px minmax(12px, auto) !important;
  gap: 5px !important;
}
body.home-v2 .mw-card .dashboard-legend .scale { height: 5px !important; }
body.home-v2 .mw-card .dashboard-legend .labels,
body.home-v2 .mw-card .dashboard-legend .labels span {
  font-size: 10px !important;
  line-height: 12px !important;
}
body.home-v2 .mw-card .dashboard-legend .labels {
  gap: 6px !important;
  align-items: flex-start !important;
  white-space: normal !important;
}
body.home-v2 .mw-card .dashboard-legend .labels span {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
body.home-v2 .mw-card .wx-current-panel .wx-desc {
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
@media (max-width: 680px) {
  body.home-v2 .mw-card .wn-map-controls { top: 80px; }
}
@media (max-width: 360px) {
  body.home-v2 .mw-card .dashboard-legend {
    width: min(170px, calc(100% - 124px)) !important;
    padding-block: 5px !important;
  }
  body.home-v2 .mw-card .dashboard-legend :is(h3, h4) {
    font-size: 10px !important;
    letter-spacing: -.01em !important;
  }
  body.home-v2 .mw-card .wn-map-controls { top: 88px; }
}
body .mw-card .map-wrap:dir(rtl) .dashboard-legend .scale { scale: -1 1 !important; }
/* Long translated solar labels must stay inside their own rail column. */
html body.home-v2 .mw-card .sun-card .sun-stat:not([hidden]) {
  min-width: 0;
}
html body.home-v2 .mw-card .sun-card .sun-stat:not([hidden]) > span {
  max-width: 100%;
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.1 !important;
}
html body.home-v2 .mw-card .sun-card .sun-stat.sun-stat--daylight:not([hidden]) > strong {
  max-width: 100%;
  min-width: 0;
  font-size: 13px !important;
  line-height: 14px !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.wn-map-data-status:empty,
.wn-map-data-status[hidden],
.wn-map-controls[hidden],
.wn-map-wind-toggle[hidden] { display: none; }

@media (min-width: 981px) {
  body.home-v2 .wn-map-controls {
    top: 76px;
    left: calc(1.5% + 304px);
    max-width: calc(98.5% - 420px);
  }
  body.home-v2 .mw-head > .wn-map-wind-toggle {
    top: 76px;
    right: 1.14%;
  }
}

@media (max-width: 980px) {
  body.home-v2 .mw-card {
    --wn-map-control-height: 44px;
    --wn-map-control-inner-height: 36px;
  }
}

@media (min-width: 681px) and (max-width: 980px) {
  body.home-v2 .wn-map-controls {
    top: 68px;
    left: 266px; /* 278px rail at .88 scale, plus its outside gutter. */
    max-width: calc(100% - 374px);
  }
  body.home-v2 .mw-head > .wn-map-wind-toggle {
    top: calc(100% + 68px);
    right: 0;
  }
  body.city-weather-home-dashboard .city-weather-home-component .mw-head > .wn-map-wind-toggle {
    top: 60px;
    right: 0;
  }
}

@media (max-width: 680px) {
  .wn-map-controls {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
  }
  .wn-map-data-status {
    box-sizing: border-box;
    max-width: min(240px, calc(100vw - 120px));
  }
  body.home-v2 .wn-map-controls {
    top: 72px;
    left: 12px;
    max-width: calc(100% - 116px);
  }
  body.home-v2 .wn-map-source-switch [data-weather-source] {
    padding-inline: 8px;
  }
  body.home-v2 .wn-map-data-status { max-width: 100%; }
  body.home-v2 .mw-head > .wn-map-wind-toggle {
    top: calc(100% + 85px);
    right: 0;
  }
  body.city-weather-home-dashboard .city-weather-home-component .mw-head > .wn-map-wind-toggle {
    top: 62px;
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wn-map-source-switch [data-weather-source],
  .wn-map-wind-toggle { transition: none; }
}

/* Only legacy cards whose missing weather key is supplied by the shared core. */
body:not(.home-v2) .mw-card .map-wrap > .dashboard-legend[data-wn-generated-legend] {
  position: absolute;
  z-index: 720;
  top: 12px;
  right: 12px;
  bottom: auto;
  left: auto;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: min(270px, calc(100% - 24px));
  padding: 10px 12px;
  border: 1px solid var(--wn-map-control-border);
  border-radius: 14px;
  background: var(--wn-map-control-surface);
  box-shadow: var(--wn-map-control-shadow);
  backdrop-filter: var(--wn-map-control-blur);
  color: var(--wn-map-control-ink);
  font-family: inherit;
  pointer-events: none;
}
body:not(.home-v2) .dashboard-legend[data-wn-generated-legend] .legend-group {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 5px;
}
body:not(.home-v2) .dashboard-legend[data-wn-generated-legend] h4 {
  margin: 0;
  color: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.25;
  text-align: start;
  overflow-wrap: anywhere;
}
body:not(.home-v2) .dashboard-legend[data-wn-generated-legend] .legend-row {
  display: grid;
  min-width: 0;
  gap: 5px;
}
body:not(.home-v2) .dashboard-legend[data-wn-generated-legend] .scale {
  width: 100%;
  height: 6px;
  border-radius: 3px;
}
body:not(.home-v2) .dashboard-legend[data-wn-generated-legend] .labels {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  margin: 0;
  color: #b9c9da;
  font-size: 11px;
  line-height: 1.3;
  white-space: normal;
}
body:not(.home-v2) .dashboard-legend[data-wn-generated-legend] .labels span {
  min-width: 0;
  overflow-wrap: anywhere;
}
body:not(.home-v2) .dashboard-legend[data-wn-generated-legend] .labels span:nth-child(2) {
  display: none;
}
@media (max-width: 680px) {
  body:not(.home-v2) .mw-card .map-wrap > .dashboard-legend[data-wn-generated-legend] {
    top: 68px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* Native compact attribution: closed information button, expandable full
   provider/license credits. Stack navigation above it instead of pinning
   zoom to a fixed 34px clearance that only fitted the old one-line credit. */
body .mw-card .map-wrap .maplibregl-ctrl-bottom-right:has(.maplibregl-ctrl-attrib.maplibregl-compact) {
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  direction: ltr;
  gap: 8px;
  width: auto !important;
  min-height: 0 !important;
  max-width: calc(100% - 24px);
}
body .mw-card .map-wrap .maplibregl-ctrl-bottom-right:has(.maplibregl-compact) > :is(.maplibregl-ctrl-group, .maplibregl-ctrl-attrib) {
  position: relative !important;
  inset: auto !important;
  float: none !important;
  margin: 0 !important;
}
body .mw-card .map-wrap .maplibregl-ctrl-bottom-right:has(.maplibregl-compact) > .maplibregl-ctrl-group {
  order: 0;
}
body .mw-card .map-wrap .maplibregl-ctrl-bottom-right:has(.maplibregl-compact) > .maplibregl-ctrl-attrib {
  order: 1;
}
body .mw-card .map-wrap .maplibregl-ctrl-attrib.maplibregl-compact {
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 0 !important;
  border-radius: 14px !important;
  background: var(--wn-map-control-surface) !important;
  color: #edf4f6;
  box-shadow: var(--wn-map-control-shadow);
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body .mw-card .map-wrap .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) {
  width: 44px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body .mw-card .map-wrap .maplibregl-ctrl-attrib.maplibregl-compact-show {
  width: 440px !important;
  max-width: min(440px, calc(100vw - 48px)) !important;
  padding: 10px 54px 10px 12px !important;
}
body .mw-card .map-wrap .maplibregl-ctrl-attrib-inner {
  font-size: 12px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
body .mw-card .map-wrap .maplibregl-ctrl-attrib-inner a {
  color: #b7e2f8 !important;
  text-decoration: underline;
}
/* One small information glyph, with an invisible touch target. */
body .mw-card .map-wrap .maplibregl-ctrl-attrib-button {
  appearance: none;
  -webkit-appearance: none;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  box-shadow: none !important;
  outline: none !important;
}
body .mw-card .map-wrap .maplibregl-compact-show .maplibregl-ctrl-attrib-button {
  filter: invert(1);
}
body .mw-card .map-wrap .maplibregl-ctrl-attrib-button:focus-visible::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 14px;
  width: 16px;
  height: 2px;
  background: #111;
}
body .mw-card .map-wrap .maplibregl-ctrl-attrib-inner a:focus-visible {
  outline: 2px solid #b7e2f8;
  outline-offset: 2px;
}
.map-wrap:has(.maplibregl-compact-show) .wn-map-controls {
  bottom: 124px;
}
.map-wrap:dir(rtl) .maplibregl-ctrl-attrib { direction: rtl; }
@media (max-width: 680px) {
  body .mw-card .map-wrap .maplibregl-ctrl-attrib.maplibregl-compact-show {
    width: calc(100vw - 64px) !important;
    max-width: calc(100vw - 64px) !important;
  }
}

@media (max-width: 680px) {
  body .mw-card .wn-map-data-status {
    box-sizing: border-box;
    max-width: min(240px, calc(100vw - 120px));
  }
}

@media (forced-colors: active) {
  .wn-map-source-switch,
  .wn-map-data-status,
  .wn-map-wind-toggle { border-color: ButtonText; }
  .wn-map-source-switch [aria-pressed="true"],
  .wn-map-source-switch [aria-selected="true"],
  .wn-map-wind-toggle[aria-pressed="true"] {
    border-color: Highlight;
    color: HighlightText;
    background: Highlight;
  }
}

/* Resolve the older absolute-position legend rules before laying out translations. */
html body.home-v2 .mw-card .map-wrap > .dashboard-legend .legend-group {
  display: grid !important;
  position: static !important;
  height: auto !important;
  align-content: start !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(14px, auto) auto !important;
  gap: 4px !important;
}
html body.home-v2 .mw-card .map-wrap > .dashboard-legend :is(h3, h4) {
  position: static !important;
  inset: auto !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
html body.home-v2 .mw-card .map-wrap > .dashboard-legend .legend-row {
  display: grid !important;
  position: static !important;
  height: auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 5px auto !important;
  gap: 5px !important;
  align-items: start !important;
}
html body.home-v2 .mw-card .map-wrap > .dashboard-legend .scale {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}
html body.home-v2 .mw-card .map-wrap > .dashboard-legend .labels {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}
html body.home-v2 .mw-card .sun-card .sun-values {
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
html body.home-v2 .mw-card .sun-card .sun-stat:not([hidden]) {
  width: 100% !important;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-self: stretch !important;
}
html body.home-v2 .mw-card .sun-card .sun-stat:not([hidden]) > span {
  display: block;
  width: 100%;
  hyphens: auto;
}

/* Layer times are available only inside the native, expandable information control. */
.maplibregl-ctrl-attrib .wn-map-layer-info {
  display: none;
  margin: 6px 0 0;
  font: inherit;
  white-space: normal;
}
.maplibregl-ctrl-attrib.maplibregl-compact-show .wn-map-layer-info { display: block; }
@media (max-width: 680px) {
  .wn-map-controls > .wn-map-data-status {
    position: absolute;
    left: 0;
    bottom: 28px;
  }
}

/* Give both mini-chart timelines clear, equal spacing inside the existing rail. */
body .mw-card .rain-card .chart-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font-size: 12px !important;
  line-height: 18px !important;
}
body .mw-card .rain-card .chart-head > :first-child { min-width: 0; }
body .mw-card .rain-card .ch-unit { flex: 0 0 auto; white-space: nowrap; }
@media (min-width: 681px) {
  html body.home-v2 .mw-card .wx-main {
    grid-template-rows: 224px 92px 133px 117px !important;
  }
  html body.home-v2 .mw-card .wx-main > .temperature-card { height: 133px !important; }
  html body.home-v2 .mw-card .wx-main > .rain-card { height: 117px !important; }
  html body.home-v2 .mw-card .wx-main > .temperature-card #tempChart { height: 93px !important; }
  html body.home-v2 .mw-card .wx-main > .rain-card #rainChart { height: 72px !important; }
}
/* Archived cards also keep a real 72px drawing area rather than stretching a larger buffer. */
body:not(.home-v2) .chart-card:has(#rainChart) #rainChart { height: 72px !important; }

@media (min-width: 681px) {
  html body.home-v2 .mw-card .wx-main > :is(.temperature-card, .rain-card) {
    padding: 9px 16px 8px !important;
  }
  html body.home-v2 .mw-card .wx-main > :is(.temperature-card, .rain-card) .chart-head {
    margin: 0 0 3px !important;
    height: 18px !important;
    min-height: 18px !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  html body.home-v2 .mw-card .wx-main > :is(.temperature-card, .rain-card) :is(#tempChart, #rainChart) {
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: block !important;
  }
}

/* Source icons share the wind button's physical right-hand axis.
   Core positions the source switch after reading the wind button's rectangle:
   --wn-map-source-left = wind.left - wrap.left + wind.width / 2 - 25px
   --wn-map-source-top  = wind.bottom - wrap.top + 8px
   Set these on .wn-map-controls (or the switch) after layout and on resize.
   The group is 50 x 96 CSS px: two genuine 44px targets, a 2px gap,
   2px padding and the existing 1px border. No extra visual frame. */
html body .mw-card .map-wrap .wn-map-controls {
  position: absolute;
  inset: 0;
  width: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  direction: ltr;
}
html body .mw-card .map-wrap .wn-map-controls[hidden] { display: none; }
html body .mw-card .map-wrap .wn-map-source-switch {
  position: absolute;
  left: var(--wn-map-source-left, calc(100% - 62px));
  top: var(--wn-map-source-top, 126px);
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;
  height: 96px;
  min-width: 50px;
  max-width: 50px;
  padding: 2px;
  gap: 2px;
  box-sizing: border-box;
  border-radius: 14px;
  pointer-events: auto;
}
html body .mw-card .map-wrap .wn-map-source-switch [data-weather-source] {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 10px;
}
html body .mw-card .map-wrap .wn-map-source-switch [data-weather-source]::before {
  inset: 0;
  width: auto;
  height: 44px;
  transform: none;
  border-radius: 10px;
}
html body .mw-card .map-wrap .wn-map-source-switch svg {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
html body .mw-card .map-wrap .wn-map-animation-toggle {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  left: var(--wn-map-source-left, calc(100% - 62px));
  top: calc(var(--wn-map-source-top, 126px) + 104px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  width: 50px;
  height: 50px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--wn-map-control-border);
  border-radius: 14px;
  box-sizing: border-box;
  background: var(--wn-map-control-surface);
  box-shadow: var(--wn-map-control-shadow);
  backdrop-filter: var(--wn-map-control-blur);
  -webkit-backdrop-filter: var(--wn-map-control-blur);
  color: var(--wn-map-control-ink);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.wn-map-animation-toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  border-radius: 10px;
}
html body .mw-card .map-wrap .wn-map-animation-toggle[aria-pressed="true"] { color: var(--wn-map-control-selected-ink); }
.wn-map-animation-toggle[aria-pressed="true"]::before {
  background: var(--wn-map-control-selected-surface);
  box-shadow: var(--wn-map-control-selected-shadow);
}
.wn-map-animation-toggle svg {
  width: 38px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.8;
  pointer-events: none;
}
.wn-map-animation-toggle[aria-pressed="true"] .wn-animation-off { display: none; }
.wn-map-animation-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) {
  .wn-map-animation-toggle[aria-pressed="false"]:hover::before { background: var(--wn-map-control-hover); }
}
/* Legacy maps append wind directly to this container. */
html body .mw-card .map-wrap .wn-map-controls > .wn-map-wind-toggle {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  bottom: auto;
}
html body .mw-card .map-wrap .wn-map-controls > .wn-map-data-status {
  position: absolute;
  top: auto;
  left: 12px;
  right: auto;
  bottom: 92px;
  max-width: min(240px, calc(100% - 88px));
}
@media (min-width: 981px) {
  html body.home-v2 .mw-card .map-wrap .wn-map-controls > .wn-map-data-status {
    left: calc(1.5% + 304px);
    max-width: calc(98.5% - 380px);
  }
}
@media (min-width: 681px) and (max-width: 980px) {
  html body.home-v2 .mw-card .map-wrap .wn-map-controls > .wn-map-data-status {
    left: 266px;
    max-width: calc(100% - 342px);
  }
}

/* Three modes share the same button and the same native scalar speed palette. */
.wn-map-wind-toggle[data-wind-mode="color"] svg path:nth-child(1) { stroke: #278aca; }
.wn-map-wind-toggle[data-wind-mode="color"] svg path:nth-child(2) { stroke: #d59a10; }
.wn-map-wind-toggle[data-wind-mode="color"] svg path:nth-child(3) { stroke: #ce497c; }
html body .mw-card .dashboard-legend .legend-group[hidden] { display: none !important; }
html body .mw-card .dashboard-legend[data-wind-mode="color"] { grid-template-columns: minmax(0, 1fr) !important; }
html body .mw-card .dashboard-legend .legend-wind { grid-column: 1 / -1 !important; }
html body .mw-card .dashboard-legend .legend-wind .labels { display: flex !important; justify-content: space-between !important; direction: ltr !important; gap: 4px !important; }
html body .mw-card .dashboard-legend .legend-wind .labels span { display: block !important; flex: 0 0 auto; white-space: nowrap !important; }
html body .mw-card .dashboard-legend .legend-wind .wind-scale { scale: 1 1 !important; }
html body .mw-card .dashboard-legend .wind-scale[hidden] { visibility: hidden; }
html body.home-v2 .mw-card .map-wrap > .dashboard-legend .legend-group[hidden],
html body:not(.home-v2) .mw-card .map-wrap > .dashboard-legend .legend-group[hidden] { display: none !important; }
html body.home-v2 .mw-card .map-wrap > .dashboard-legend[data-wind-mode="color"],
html body:not(.home-v2) .mw-card .map-wrap > .dashboard-legend[data-wind-mode="color"] { grid-template-columns: minmax(0, 1fr) !important; }
html body.home-v2 .mw-card .map-wrap > .dashboard-legend[data-wind-mode="color"],
html body:not(.home-v2) .mw-card .map-wrap > .dashboard-legend[data-wind-mode="color"] { grid-template-rows: auto !important; gap: 0 !important; }
html body .mw-card .map-wrap > .dashboard-legend[data-wind-mode="color"] .legend-separator { display: none !important; }
html body .mw-card .map-wrap > .dashboard-legend[data-wind-mode="color"]::before,
html body .mw-card .map-wrap > .dashboard-legend[data-wind-mode="color"]::after { display: none !important; }
html body .mw-card .map-wrap > .dashboard-legend[data-wind-mode="color"] .legend-wind { grid-row: 1 !important; }

html body:not(.home-v2) .mw-card .map-wrap > .dashboard-legend[data-wn-generated-legend] {
  right: 76px !important;
  width: min(270px, calc(100% - 88px)) !important;
  max-width: calc(100% - 88px) !important;
}
/* Speed numbers run low-to-high left-to-right in every language. */
html body .mw-card .map-wrap:dir(rtl) .dashboard-legend .legend-wind .wind-scale { scale: 1 1 !important; }
@media (max-width: 680px) {
  html body .mw-card .map-wrap .weather-location-popup { max-width: min(240px, calc(100% - 132px)) !important; }
  html body .mw-card .map-wrap .weather-location-popup .globe-popup-label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}

/* Owner: zoom at the bottom right; larger information glyph to its left. */
html body .mw-card .map-wrap .maplibregl-ctrl-bottom-right:has(.maplibregl-ctrl-attrib.maplibregl-compact) {
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  direction: ltr !important;
  gap: 8px !important;
  width: max-content !important;
  max-width: calc(100% - 24px) !important;
  min-height: 0 !important;
}
html body .mw-card .map-wrap .maplibregl-ctrl-bottom-right:has(.maplibregl-compact) > .maplibregl-ctrl-group {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  order: 0 !important;
  float: none !important;
  margin: 0 !important;
}
html body .mw-card .map-wrap .maplibregl-ctrl-bottom-right:has(.maplibregl-compact) > .maplibregl-ctrl-attrib {
  position: relative !important;
  inset: auto !important;
  flex: 0 1 auto !important;
  order: 1 !important;
  float: none !important;
  margin: 0 !important;
}
html body .mw-card .map-wrap .maplibregl-ctrl-attrib.maplibregl-compact:not(.maplibregl-compact-show) {
  width: 44px !important;
  height: 44px !important;
}
/* Flex shrinks the expanded credits within this map's width while zoom stays fixed. */
html body .mw-card .map-wrap .maplibregl-ctrl-attrib.maplibregl-compact-show {
  width: 440px !important;
  max-width: 440px !important;
  min-width: 44px !important;
  height: auto !important;
  padding: 10px 54px 10px 12px !important;
}
html body .mw-card .map-wrap .maplibregl-ctrl-attrib-button {
  width: 44px !important;
  height: 44px !important;
  background-size: 24px 24px !important;
  top: auto !important;
  bottom: 0 !important;
  right: 0 !important;
  left: auto !important;
}
html body .mw-card .map-wrap .maplibregl-ctrl-attrib-button:focus-visible::after {
  left: 10px !important;
  width: 24px !important;
}

/* Keep open provider credits readable alongside error messages. */
html body .mw-card .map-wrap:has(.maplibregl-compact-show) .wn-map-controls > .wn-map-data-status { bottom: calc(var(--wn-map-credits-height, 140px) + 20px) !important; }

/* Search feedback belongs to the search control, never the map centre. */
#searchForm{position:relative;}
#searchForm .city-search-status{position:absolute;inset-inline-start:0;top:100%;z-index:40;margin:6px 0 0;padding:8px 12px;max-width:100%;box-sizing:border-box;border-radius:12px;background:#34464f;color:#eef5f7;font:500 14px/1.4 system-ui,sans-serif;text-align:start;box-shadow:0 3px 12px #0003;}
#searchForm .city-search-status[hidden]{display:none;}

/* Legacy search feedback sits above the map and leaves its right controls clear. */
body .mw-head:has(#citySearchStatus){position:relative;z-index:800;overflow:visible;}
#searchForm .city-search-status{max-width:calc(100% - 56px);}
.city-search-mobile[hidden]{display:none;}
@media(max-width:980px){
 body.city-weather-home-dashboard .city-weather-home-component{height:auto!important;min-height:0!important;}
 body.city-weather-home-dashboard .city-search-mobile{position:relative;margin:0 0 8px;}
 body.city-weather-home-dashboard .city-search-mobile #searchForm{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:100%!important;max-width:none!important;height:auto!important;min-height:48px;margin:0!important;padding:6px 8px!important;box-sizing:border-box;background:var(--wn-map-control-surface,#34464f)!important;border:1px solid var(--wn-map-control-border,#ffffff26)!important;border-radius:16px!important;pointer-events:auto!important;}
 body.city-weather-home-dashboard .city-search-mobile .city-search-field{display:flex;align-items:center;gap:8px;min-width:0;min-height:36px;padding:0;border:0;}
 body.city-weather-home-dashboard .city-search-mobile #cityInput{min-height:36px!important;font-size:16px!important;}
 body.city-weather-home-dashboard .city-search-mobile #searchForm button{min-width:44px;min-height:44px;padding:0 12px;font-size:12px;font-weight:var(--wn-map-control-weight);background:var(--wn-map-control-selected-surface);color:var(--wn-map-control-selected-ink);border:0;border-radius:var(--wn-map-control-inner-radius);}
 body.city-weather-home-dashboard .city-search-mobile #citySearchStatus{position:static;grid-column:1/-1;max-width:100%;margin:0;padding:4px 2px;background:transparent;box-shadow:none;}
}

/* Legacy mobile templates clip the form itself, independently of the header. */
#searchForm:has(#citySearchStatus){overflow:visible!important;}
/* Readable weather symbols on the shared home, localized and city dashboard.
   Reserve the icon's full height so larger glyphs never overlap metric values. */
html body.home-v2 .mw-card .wx-current-panel .wx-grid > * {
  grid-template-rows: 24px auto auto !important;
}
html body.home-v2 .mw-card .wx-current-panel .kv-ico,
html body.home-v2 .mw-card .wx-current-panel .kv-ico svg {
  width: 24px !important;
  height: 24px !important;
}
html body.home-v2 .mw-card .sun-card .sun-stat {
  grid-template-rows: 24px auto auto !important;
}
html body.home-v2 .mw-card .sun-card .sun-stat svg {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 2 !important;
}
html body.home-v2 .mw-card .wx-current-panel .wx-hero {
  grid-template-columns: auto minmax(0, 1fr) 72px !important;
}
html body.home-v2 .mw-card .wx-current-panel .wx-icon {
  width: 72px !important;
  height: 72px !important;
  overflow: visible !important;
}
html body.home-v2 .mw-card .wx-current-panel .wx-icon img {
  position: static !important;
  width: 88px !important;
  height: 88px !important;
  max-width: none !important;
  transform: translate(-8px, -8px) !important;
}
/* On home mobile/tablet, feedback expands the search row before the map. */
@media(max-width:980px){
 body.home-v2:not(.city-weather-home-dashboard) .mw-head:has(#citySearchStatus:not([hidden])){height:auto!important;min-height:44px!important;}
 body.home-v2:not(.city-weather-home-dashboard) #searchForm:has(#citySearchStatus:not([hidden])){display:grid!important;grid-template-columns:minmax(0,1fr) auto;height:auto!important;gap:6px 10px;}
 body.home-v2:not(.city-weather-home-dashboard) #citySearchStatus{position:static;grid-column:1/-1;max-width:100%;margin:0;padding:6px 2px;background:transparent;box-shadow:none;}
}