/* City pages render the exact live-weather component used on the homepage. */
body.city-weather-home-dashboard {
  padding-top: 92px !important;
}

body.city-weather-home-dashboard .city-weather-home-component {
  position: relative;
  left: 50%;
  width: min(1320px, calc(100vw - 40px)) !important;
  max-width: none !important;
  height: 620px !important;
  min-height: 620px !important;
  margin: 28px 0 34px !important;
  transform: translateX(-50%);
}

body.city-weather-home-dashboard .city-weather-home-component .mw-body,
body.city-weather-home-dashboard .city-weather-home-component .map-wrap,
body.city-weather-home-dashboard .city-weather-home-component .wx-wrap,
body.city-weather-home-dashboard .city-weather-home-component #map {
  height: 620px !important;
  min-height: 620px !important;
}

body.city-weather-home-dashboard .city-weather-home-component .map-wrap {
  overflow: hidden;
  border-radius: 18px !important;
}

body.city-weather-home-dashboard .city-weather-home-component .mw-card,
body.city-weather-home-dashboard .city-weather-home-component #map {
  border-radius: 18px !important;
}

body.city-weather-home-dashboard .city-weather-home-component .maplibregl-canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Cooperative gestures still keep one-finger swipes available to the page,
   but MapLibre's full-map instructional veil is intentionally suppressed. */
body.city-weather-home-dashboard .city-weather-home-component .maplibregl-cooperative-gesture-screen {
  display: none !important;
}

/* These are the homepage's final, post-stylesheet dashboard locks. */
body.city-weather-home-dashboard .city-weather-home-component .mw-card {
  --weather-card-inset-x: 16px;
  --weather-card-inset-y: 12px;
}

/* City pages do not inherit the homepage's inline base rule that makes the
   search input fill its label. Without it Safari keeps the native input at
   its intrinsic width, leaving the clear control stranded in the middle of
   the search bar instead of next to the submit button. */
body.city-weather-home-dashboard .city-weather-home-component #searchForm input[type="search"] {
  flex: 1 1 auto !important;
  width: auto !important;
}

@media (min-width: 981px) {
  body.city-weather-home-dashboard .city-weather-home-component .mw-head #searchForm {
    left: calc(1.5% + 304px) !important;
    right: calc(27.2% + 32px) !important;
    width: auto !important;
    max-width: none !important;
  }
}

body.city-weather-home-dashboard .city-weather-home-component .wx-main > .wx-current-panel,
body.city-weather-home-dashboard .city-weather-home-component .wx-main > .sun-card,
body.city-weather-home-dashboard .city-weather-home-component .wx-main > .temperature-card,
body.city-weather-home-dashboard .city-weather-home-component .wx-main > .rain-card {
  width: 278px !important;
  min-width: 278px !important;
  box-sizing: border-box !important;
  background: rgba(54, 66, 72, .94) !important;
  background-image: none !important;
  border: 1px solid rgba(205, 224, 232, .22) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(18px) saturate(105%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(105%) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-main > .wx-current-panel {
  height: 224px !important;
  grid-template-rows: 54px 86px minmax(0, 1fr) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-main > .sun-card {
  height: 92px !important;
  padding: var(--weather-card-inset-y) var(--weather-card-inset-x) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-main > .temperature-card {
  height: 149px !important;
  padding: var(--weather-card-inset-y) var(--weather-card-inset-x) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-main > .rain-card {
  height: 101px !important;
  padding: var(--weather-card-inset-y) var(--weather-card-inset-x) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .temperature-card #tempChart { height: 122px !important; }
body.city-weather-home-dashboard .city-weather-home-component .rain-card #rainChart { height: 56px !important; }

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-top,
body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-hero {
  padding-left: var(--weather-card-inset-x) !important;
  padding-right: var(--weather-card-inset-x) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-top {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-hero {
  padding-top: var(--weather-card-inset-y) !important;
  padding-bottom: var(--weather-card-inset-y) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-grid {
  padding-left: var(--weather-card-inset-x) !important;
  padding-right: var(--weather-card-inset-x) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-grid > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-place .name {
  font-size: 14px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-place .meta {
  font-size: 12px !important;
  line-height: 1.35 !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-temp {
  font-size: 46px !important;
  line-height: .9 !important;
  letter-spacing: -.045em !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-desc {
  font-size: 14px !important;
  line-height: 1.2 !important;
  transform: translateY(5px) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-feels {
  font-size: 11px !important;
  line-height: 1.2 !important;
  transform: translateY(-4px) !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-icon {
  overflow: visible !important;
  /* Avoid a child compositing layer that iOS Safari can drop while the
     backdrop-filtered weather card moves during a page scroll. */
  filter: none !important;
}
body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-icon img {
  width: 72px !important;
  height: 72px !important;
  max-width: none !important;
  position: relative !important;
  top: -6px !important;
  left: -6px !important;
  transform: none !important;
}

body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .kv-val strong { font-size: 15px !important; line-height: 1.05 !important; }
body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .kv-val span,
body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .kv-label { font-size: 10px !important; line-height: 1.15 !important; }
body.city-weather-home-dashboard .city-weather-home-component .chart-head,
body.city-weather-home-dashboard .city-weather-home-component .ch-unit { font-size: 12px !important; line-height: 1.6 !important; letter-spacing: .015em !important; }
body.city-weather-home-dashboard .city-weather-home-component .chart-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
body.city-weather-home-dashboard .city-weather-home-component .sun-stat span { font-size: 12px !important; line-height: 1 !important; }
body.city-weather-home-dashboard .city-weather-home-component .sun-stat strong { font-size: 15px !important; line-height: 1.05 !important; }

/* Fold-sized viewports use the homepage's exact in-map weather rail.  Keep
   every original card at 278px and stack the four surfaces inside the 620px
   map instead of creating a second dashboard below it. */
@media (min-width: 681px) and (max-width: 980px) {
  body.city-weather-home-dashboard .city-weather-home-component,
  body.city-weather-home-dashboard .city-weather-home-component .mw-card {
    height: 682px !important;
    min-height: 682px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-card {
    overflow: hidden !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-body,
  body.city-weather-home-dashboard .city-weather-home-component .map-wrap,
  body.city-weather-home-dashboard .city-weather-home-component .wx-wrap,
  body.city-weather-home-dashboard .city-weather-home-component #map {
    height: 620px !important;
    min-height: 620px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-body {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .map-wrap {
    position: absolute !important;
    inset: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component #map {
    position: absolute !important;
    inset: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-wrap {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main {
    position: absolute !important;
    inset: 14px auto auto 16px !important;
    width: 278px !important;
    height: 593px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 278px !important;
    grid-template-rows: 224px 92px 149px 101px !important;
    grid-template-areas: "current" "sun" "temperature" "rain" !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .wx-current-panel,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .sun-card,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .temperature-card,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .rain-card {
    position: static !important;
    inset: auto !important;
    width: 278px !important;
    min-width: 278px !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .wx-current-panel {
    grid-area: current !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .sun-card {
    grid-area: sun !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .temperature-card {
    grid-area: temperature !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .rain-card {
    grid-area: rain !important;
    grid-column: 1 !important;
    grid-row: 4 !important;
  }
}

@media (max-width: 680px) {
  body.city-weather-home-dashboard {
    padding-top: 74px !important;
  }

  body.city-weather-home-dashboard .wn-v2-header {
    background: #030506 !important;
  }

  body.city-weather-home-dashboard .wn-v2-header__inner {
    background: rgba(6, 10, 13, .96) !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component {
    left: auto;
    width: calc(100vw - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 20px calc((100% - (100vw - 24px)) / 2) 32px !important;
    transform: none;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-card {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-body {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .map-wrap {
    position: relative !important;
    height: 460px !important;
    min-height: 460px !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component #map {
    position: absolute !important;
    height: 458px !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    overflow: visible !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main {
    position: relative !important;
    width: 100% !important;
    height: 596px !important;
    min-height: 0 !important;
    margin: 12px 0 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 224px 92px 149px 101px !important;
    grid-template-areas: "current" "sun" "temperature" "rain" !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .wx-current-panel,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .sun-card,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .temperature-card,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .rain-card {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    isolation: isolate !important;
    border-radius: 16px !important;
  }
}

/* Stretch only the card surfaces.  Their established 278px content measure is
   retained and centred, so charts and condition typography do not get distorted. */
@media (max-width: 980px) {
  body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-top,
  body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-hero,
  body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-grid {
    width: min(278px, 100%) !important;
    margin-inline: auto !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-hero,
  body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-grid {
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-current-panel .wx-grid > *:last-child {
    border-right: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .sun-card .sun-values,
  body.city-weather-home-dashboard .city-weather-home-component .chart-card .chart-head,
  body.city-weather-home-dashboard .city-weather-home-component .chart-card canvas,
  body.city-weather-home-dashboard .city-weather-home-component .temp-chart-readings {
    width: min(246px, 100%) !important;
    margin-inline: auto !important;
  }
}

/* Fold and other wide-mobile screens open directly on a complete radar.
   SEO headings remain in the document and follow the map instead of pushing
   the product view below the fold. */
@media (min-width: 681px) and (max-width: 980px) {
  body.city-weather-home-dashboard > .wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 0 12px 48px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.city-weather-home-dashboard > .wrap > * {
    order: 2;
  }

  body.city-weather-home-dashboard .city-weather-home-component {
    --fold-city-map-height: clamp(540px, calc(100svh - 104px), 620px);
    order: 1 !important;
    left: auto !important;
    width: calc(100vw - 24px) !important;
    height: var(--fold-city-map-height) !important;
    min-height: var(--fold-city-map-height) !important;
    margin: 4px auto 20px !important;
    transform: none !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-card,
  body.city-weather-home-dashboard .city-weather-home-component .mw-body,
  body.city-weather-home-dashboard .city-weather-home-component .map-wrap,
  body.city-weather-home-dashboard .city-weather-home-component .wx-wrap,
  body.city-weather-home-dashboard .city-weather-home-component #map {
    height: var(--fold-city-map-height) !important;
    min-height: var(--fold-city-map-height) !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-card {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-head {
    position: absolute !important;
    inset: 8px 8px auto auto !important;
    z-index: 740 !important;
    width: 92px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component #searchForm {
    display: none !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-head .unit-toggle {
    position: static !important;
    width: 92px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    pointer-events: auto !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-head .unit-toggle button {
    height: 36px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-body {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .map-wrap,
  body.city-weather-home-dashboard .city-weather-home-component #map,
  body.city-weather-home-dashboard .city-weather-home-component .wx-wrap {
    position: absolute !important;
    inset: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-wrap {
    width: 100% !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    pointer-events: none !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main {
    position: absolute !important;
    inset: 8px auto auto 8px !important;
    width: 278px !important;
    height: 593px !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 278px !important;
    grid-template-rows: 224px 92px 149px 101px !important;
    grid-template-areas: "current" "sun" "temperature" "rain" !important;
    gap: 8px !important;
    overflow: visible !important;
    transform: scale(.88) !important;
    transform-origin: top left !important;
    pointer-events: none !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .wx-current-panel,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .sun-card,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .temperature-card,
  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .rain-card {
    position: static !important;
    inset: auto !important;
    width: 278px !important;
    min-width: 278px !important;
    margin: 0 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .map-wrap > .dashboard-legend,
  body.city-weather-home-dashboard .city-weather-home-component .map-wrap > .dashboard-legend.is-open {
    position: absolute !important;
    inset: 8px auto auto 65% !important;
    width: min(220px, calc(100% - 24px)) !important;
    transform: translateX(-50%) !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .maplibregl-ctrl-bottom-right {
    right: 8px !important;
    bottom: 8px !important;
  }

  body.city-weather-home-dashboard > .wrap > .crumbs {
    margin-top: 8px !important;
  }

  body.city-weather-home-dashboard > .wrap > h1 {
    margin-top: 14px !important;
  }
}

@media (max-width: 680px) {
  body.city-weather-home-dashboard > .wrap {
    width: 100% !important;
    max-width: none !important;
    padding: 0 12px 48px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.city-weather-home-dashboard > .wrap > * {
    order: 2;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-card {
    position: relative !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component {
    order: 1 !important;
    margin-top: 4px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-head {
    position: absolute !important;
    inset: 10px 10px auto auto !important;
    z-index: 740 !important;
    width: 92px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component #searchForm {
    display: none !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .mw-head .unit-toggle {
    width: 92px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .map-wrap > .dashboard-legend,
  body.city-weather-home-dashboard .city-weather-home-component .map-wrap > .dashboard-legend.is-open {
    inset: 10px auto auto 12px !important;
    width: min(220px, calc(100% - 128px)) !important;
    transform: none !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main {
    height: 685px !important;
    grid-template-rows: 224px 92px 200px 138px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .temperature-card {
    height: 200px !important;
    padding: 12px 16px 10px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .wx-main > .rain-card {
    height: 138px !important;
    padding: 12px 16px 10px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .chart-card .chart-head,
  body.city-weather-home-dashboard .city-weather-home-component .chart-card canvas {
    width: 100% !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .temperature-card #tempChart {
    top: 0 !important;
    height: 154px !important;
    margin-bottom: 0 !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .rain-card #rainChart {
    height: 96px !important;
  }

  body.city-weather-home-dashboard .city-weather-home-component .temp-chart-readings {
    display: none !important;
  }
}