/* Duskline — weather redesign, sky FX, detail, sheets */
/* ═══ Weather app redesign (Apple-inspired) ═══ */
body.page-tools .weather-root.tools-page {
  max-width: min(720px, 100%);
  margin: 0 auto;
  padding-top: 8px;
}
.weather-root .tools-app-header { display: none; } /* title lives in app bar */
.weather-page { max-width: none; margin: 0; }
.weather-search-wrap {
  flex: 1 1 auto;
  position: relative;
  display: block;
  width: 100%;
  z-index: 2;
}
.weather-search {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  background: color-mix(in srgb, #0a1628 55%, transparent);
  color: #fff;
  padding: 12px 50px 12px 42px;
  padding-inline: 42px 50px;
  font-size: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.weather-search::placeholder { color: rgba(255,255,255,.5); }
.weather-search:focus {
  outline: none;
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(120,180,255,.2);
}
.weather-search-icon {
  position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.55); pointer-events: none; z-index: 1;
}
.weather-search-clear {
  position: absolute; inset-inline-end: 2px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  line-height: 1; display: none; align-items: center; justify-content: center;
}
.weather-search-clear svg { width: 16px; height: 16px; }
.weather-search-clear.show { display: inline-flex; }
.weather-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.weather-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px 0; list-style: none;
  border-radius: 14px;
  background: color-mix(in srgb, #121c2e 92%, #000);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  max-height: min(50vh, 360px); overflow: auto;
  z-index: 20;
  display: none;
}
.weather-suggest.open { display: block; }
.weather-suggest button {
  display: block; width: 100%; text-align: left;
  border: 0; background: transparent; color: rgba(255,255,255,.92);
  padding: 12px 16px; font: inherit; cursor: pointer;
}
.weather-suggest button.is-active,
.weather-suggest button:hover,
.weather-suggest button:focus-visible {
  background: rgba(255,255,255,.1); outline: none;
}
.weather-suggest .s-name { font-weight: 600; }
.weather-suggest .s-meta { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 2px; }
.weather-suggest .s-empty { padding: 14px 16px; color: rgba(255,255,255,.55); font-size: 14px; }
.weather-suggest .s-result { display: flex; align-items: stretch; gap: 2px; }
.weather-suggest .s-result [data-place-choice] { flex: 1 1 auto; width: auto; min-width: 0; border-radius: 10px; }
.weather-suggest .s-add {
  flex: 0 0 44px;
  width: 44px;
  align-self: center;
  height: 44px;
  margin-inline-end: 8px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.weather-suggest .s-add[aria-pressed="true"] { color: #a7f0cf; }
.weather-suggest .s-add .weather-save-icon { width: 19px; height: 19px; }
.weather-suggest .s-loading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px 14px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}
.weather-suggest .s-loading .loader { --size: .7px; margin: 2px 0 6px; }
.weather-btn {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.weather-btn:hover {
  border-color: rgba(255,255,255,.4);
}
.weather-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-color: #fff;
}
.weather-btn:disabled { opacity: .55; cursor: default; }
.weather-btn-icon {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.weather-status-row { position: relative; min-height: 16px; margin: 0 0 8px; }
.weather-updated { min-height: 16px; font-size: 12px; color: var(--text-mute); margin: 0; }
.weather-mode-loading {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 8px;
  color: var(--wx-content-muted, var(--text-mute)); font-size: 12px; line-height: 16px;
}
.weather-mode-loading[hidden] { display: none !important; }
.weather-mode-loading .loader { --size: .55px; margin: 0; }
.weather-section-label {
  font-size: 13px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
  margin: 14px 4px 8px;
}
.weather-shell {
  --wx-sky-1: #1a3a5c;
  --wx-sky-2: #0c1a2e;
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 200px;
  position: relative;
  overflow: visible;
}
.weather-shell::before { display: none; }
.weather-list {
  display: flex; flex-direction: column; gap: 12px;
  list-style: none; margin: 0; padding: 0;
}
.weather-list > li,
.weather-row-cluster {
  position: relative;
}
.weather-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, var(--wx-sky-1, #3d8fd1), var(--wx-sky-2, #1a5a9c));
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  cursor: pointer;
  text-align: left;
  color: #fff;
  width: 100%;
  font: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  height: 132px;
  box-sizing: border-box;
  padding-inline-end: 58px;
}
.weather-row::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--wx-fx-bg, none);
  opacity: var(--wx-fx-opacity, 0.3);
  pointer-events: none;
}
.weather-row > * { position: relative; z-index: 1; }
.weather-row:hover { box-shadow: 0 14px 36px rgba(0,0,0,.3); }
.weather-row:active { transform: scale(0.985); }
html[data-motion-effective="off"] .weather-row:active { transform: none; }
.weather-row-main {
  min-width: 0;
  overflow: hidden;
}
.weather-row-city {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
}
.weather-row-city-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}
.weather-row-meta,
.weather-row-updated {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-row-meta { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 2px; }
.weather-row-cond {
  font-size: 14px; color: rgba(255,255,255,.9); margin-top: 4px;
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.weather-row-cond > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-row-insight {
  display: -webkit-box;
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(255,255,255,.94);
  font-size: 12px;
  font-weight: 550;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.42);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.weather-row-icon { width: 22px; height: 22px; flex-shrink: 0; opacity: .95; }
.weather-row-temps {
  text-align: right;
  flex-shrink: 0;
  align-self: center;
  min-width: 4.75rem;
}
.weather-row-temp {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.weather-row-temp--loading {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 2.4rem;
}

/* Indeterminate weather loader (list, detail, hero) */
.loader {
  --color-1: color-mix(in srgb, var(--wx-content, #fff) 22%, transparent);
  --color-2: var(--wx-content, #fff);
  --size: 1px;
  width: calc(160 * var(--size));
  height: calc(8 * var(--size));
  border-radius: calc(4 * var(--size));
  display: block;
  margin: calc(20 * var(--size)) auto;
  position: relative;
  background: var(--color-1);
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}
.loader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(70 * var(--size));
  border-radius: inherit;
  background: var(--color-2);
  box-sizing: border-box;
  animation: wx-loader-slide 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.weather-row-temp--loading .loader {
  --size: 0.7px;
  margin: 0;
}
.weather-detail-loading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}
.weather-detail-loading .loader {
  --size: 0.85px;
  margin: 0;
}
.weather-detail-loading-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 180px;
}
.weather-detail-loading-panel .loader {
  --size: 1px;
  margin: 0 auto;
}
.weather-hourly-loading {
  flex: 1 1 auto;
  min-height: 98px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--wx-content, #fff);
  font-size: 13px;
  text-align: center;
}
.weather-hourly-loading .loader { --size: .85px; width: min(180px, 56vw); margin: 0; }
@keyframes wx-loader-slide {
  0% { transform: translateX(calc(-70 * var(--size))); }
  100% { transform: translateX(calc(160 * var(--size))); }
}
html[data-motion-effective="reduced"] .loader::after,
html[data-motion-effective="off"] .loader::after {
  animation: none;
  left: 28%;
  width: calc(44 * var(--size));
  opacity: 0.85;
}
.weather-row-hl {
  font-size: 12px;
  color: rgba(255,255,255,.82);
  margin-top: 4px;
  white-space: nowrap;
}
.weather-row-updated {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.58);
  margin-top: 4px;
  letter-spacing: 0.01em;
}
.weather-row-updated--fail {
  color: rgba(255, 200, 160, 0.88);
}
.weather-row-save {
  position: absolute;
  inset-inline-end: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,.15);
  color: rgba(255,255,255,.75);
  cursor: pointer;
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.weather-row-save[aria-pressed="true"] { color: #a7f0cf; background: rgba(46,196,132,.16); }
.weather-row-save--location { color: rgba(255,255,255,.72); background: rgba(0,0,0,.1); }
.weather-row-save:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.weather-attribution {
  display: block;
  width: 100%;
  max-width: min(520px, 92%);
  margin: 18px auto 0;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-mute);
  text-align: center;
  text-wrap: balance;
}
.weather-error { color: #ffb4b4; font-size: 13px; padding: 12px; }
.weather-empty { color: rgba(255,255,255,.75); font-size: 14px; padding: 28px; text-align: center; }

/* Detail — true full-viewport shell (never leave side gutters of the page theme) */
.weather-detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* inset alone — avoid 100vw (scrollbar gutter / side seams) */
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  z-index: 10050;
  display: flex;
  flex-direction: column;
  /* Opaque base so no page chrome / gold theme edges bleed through */
  background: var(--wx-sky-1, #1a3a5c);
  background-image: linear-gradient(165deg, var(--wx-sky-1, #1a3a5c), var(--wx-sky-2, #0c1a2e));
  color: #fff;
  overflow: hidden;
  /* Shell does not bounce; the inner .weather-detail-scroll does */
  overscroll-behavior: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* No scale transforms — they reveal the underlying page on L/R edges */
  transform: none;
  /* Exit is quick (list already visible underneath). Enter is slightly longer. */
  transition:
    opacity .16s ease-out,
    visibility 0s linear .16s;
  box-shadow: none;
  will-change: opacity;
}
.weather-detail.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  /* Show immediately; fade opacity in */
  transition:
    opacity .36s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
}
/* Closing: snappy dissolve over the city list — not a solid void */
.weather-detail.is-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .16s ease-out,
    visibility 0s linear .16s;
}
/* Soft content fade on enter only — opacity only (no transform on scroll:
   transform would break position:sticky on the detail bar). */
.weather-detail.open.wx-detail-enter .weather-detail-hero,
.weather-detail.open.wx-detail-enter .weather-modules {
  animation: wxDetailContentIn .4s cubic-bezier(.22, 1, .36, 1) both;
}
.weather-detail.open.wx-detail-enter .weather-modules {
  animation-delay: .04s;
}
html[data-motion-effective="reduced"] .weather-detail,
html[data-motion-effective="off"] .weather-detail {
  transform: none !important;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
html[data-motion-effective="reduced"] .weather-detail.open,
html[data-motion-effective="off"] .weather-detail.open {
  transition: opacity .18s ease, visibility 0s linear 0s;
}
html[data-motion-effective="reduced"] .weather-detail.open.wx-detail-enter .weather-detail-hero,
html[data-motion-effective="reduced"] .weather-detail.open.wx-detail-enter .weather-modules,
html[data-motion-effective="off"] .weather-detail.open.wx-detail-enter .weather-detail-hero,
html[data-motion-effective="off"] .weather-detail.open.wx-detail-enter .weather-modules {
  animation: none;
}
/* When detail is open: hide page chrome, keep scroller bounce intact */
html.weather-detail-open,
body.weather-detail-open {
  overflow: hidden !important;
  /* Do NOT set overscroll-behavior:none on html/body — it kills rubber-band
     on the nested detail scroller in Safari/macOS. */
  background: var(--wx-sky-2, #0c1a2e) !important;
}
html.weather-detail-open body,
body.weather-detail-open {
  /* Avoid position:fixed lock (causes side gutters with fixed children) */
  position: static !important;
  top: auto !important;
  width: auto !important;
}
/* Only hide chrome — never blanket-disable pointer-events under #main
   (that broke module taps when node order / hoist varied). */
body.weather-detail-open .gallery-app-bar,
body.weather-detail-open .gallery-app-footer,
body.weather-detail-open .weather-page-sky,
body.weather-detail-open #navbar {
  visibility: hidden !important;
  pointer-events: none !important;
}
body.weather-detail-open .weather-page {
  visibility: hidden !important;
  /* page list is under detail; keep pointer-events none so stray hits don’t land here */
  pointer-events: none !important;
}
.weather-detail-sky {
  position: absolute;
  /* Bleed past edges so gradient/clouds never leave a 1px seam */
  inset: -2px;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.weather-detail-sky .wx-layer {
  position: absolute; inset: -10%;
  opacity: 0.45;
  background-image: var(--wx-fx-bg, none);
  background-size: cover;
}
.weather-detail-sky .wx-layer-base {
  animation: none;
}
.weather-detail-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 16px 8px;
  gap: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,.25), transparent);
}
.weather-detail-hero {
  text-align: center;
  padding: 8px 16px 20px;
  position: relative; z-index: 1;
}
.weather-detail-hero h2 {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.weather-detail-temp {
  font-family: var(--ff-display);
  font-size: clamp(4.5rem, 18vw, 6.5rem);
  font-weight: 200;
  line-height: 0.95;
  letter-spacing: -.04em;
  margin: 4px 0;
}
.weather-detail-cond { font-size: 1.15rem; opacity: .95; margin-top: 2px; }
.weather-detail-hl { font-size: .95rem; opacity: .85; margin-top: 6px; }
.weather-detail-updated {
  font-size: 12px; opacity: .7; margin-top: 10px;
}
.weather-modules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 14px max(28px, env(safe-area-inset-bottom));
  position: relative; z-index: 1;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  min-width: 0;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* 2-col: sun takes the full row so a 9th tile does not leave a hole.
   3-col / 4-col overrides live in the min-width queries below (must win). */
.weather-mod[data-sheet="sun"] {
  grid-column: 1 / -1;
}
.weather-detail-hero {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
/* Tablet: keep 2-col, comfortable width — not a phone strip */
/* Toolbar is always full-bleed (no max-width) — only content columns are capped.
   A max-width bar left dark “edges” where the sticky gradient ended. */
.weather-detail-bar {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}
.weather-detail-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: min(1180px, 94vw);
  margin: 0 auto;
}
@media (min-width: 700px) {
  .weather-modules {
    max-width: min(720px, 94vw);
    gap: 12px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .weather-detail-hero {
    max-width: min(720px, 94vw);
  }
  .weather-detail-attrib {
    max-width: min(720px, 94vw);
    margin-left: auto;
    margin-right: auto;
  }
}
/* Desktop: real multi-column layout (not a mobile simulator in the middle) */
@media (min-width: 960px) {
  .weather-modules {
    max-width: min(1000px, 92vw);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding-left: 28px;
    padding-right: 28px;
    padding-bottom: max(36px, env(safe-area-inset-bottom));
  }
  .weather-detail-hero {
    max-width: min(1000px, 92vw);
    padding-top: 12px;
    padding-bottom: 28px;
  }
  .weather-detail-temp {
    font-size: clamp(5rem, 7vw, 6.5rem);
  }
  .weather-detail-attrib {
    max-width: min(1000px, 92vw);
  }
  .weather-mod {
    min-height: 128px;
    padding: 14px 16px 16px;
  }
  .weather-mod-wide {
    grid-column: 1 / -1;
  }
  /* 3-col: 8 squares + 1×1 sun = 9, no leftover cell. Compact clock + mini path. */
  .weather-mod[data-sheet="sun"] {
    grid-column: auto;
    min-height: 168px;
  }
}
/* Wide desktop: 4-up module grid */
@media (min-width: 1280px) {
  .weather-modules {
    max-width: min(1180px, 90vw);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  /* Full row so the path + stats fill the width instead of two empty cells. */
  .weather-mod[data-sheet="sun"] {
    grid-column: 1 / -1;
    min-height: 0;
    padding: 14px 20px 14px;
  }
  .weather-detail-hero {
    max-width: min(1180px, 90vw);
  }
  .weather-detail-attrib {
    max-width: min(1180px, 90vw);
  }
}
.weather-mod {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(14, 26, 44, 0.58);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-radius: 18px;
  padding: 12px 14px 14px;
  color: #fff;
  text-align: left;
  font: inherit;
  cursor: default;
  /* Apple tile: label → value → sub → foot viz */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 118px;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
button.weather-mod {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
button.weather-mod:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
button.weather-mod .weather-hourly { width: 100%; }
.weather-mod-wide { grid-column: 1 / -1; }
.weather-mod-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; opacity: .72; margin-bottom: 6px;
  flex-shrink: 0;
}
button.weather-mod-label {
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
  width: 100%;
}
button.weather-mod-label:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}
.weather-mod-value {
  font-family: var(--ff-display);
  font-size: clamp(1.55rem, 5.5vw, 1.9rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  flex-shrink: 0;
}
.weather-mod-sub {
  font-size: 13px;
  opacity: .88;
  margin-top: 4px;
  line-height: 1.35;
  flex-shrink: 0;
}
.weather-mod-foot {
  margin-top: auto;
  padding-top: 10px;
  min-width: 0;
  overflow: hidden;
}
.weather-hourly {
  display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.weather-hourly-item {
  flex: 0 0 auto; text-align: center; min-width: 52px; font-size: 12px;
}
.weather-hourly-item .t {
  font-family: var(--ff-display); font-size: 17px; margin-top: 6px; font-weight: 500;
}
.weather-hourly-item .ic { width: 24px; height: 24px; margin: 4px auto 0; opacity: .95; }
.weather-hourly-item .p { font-size: 11px; opacity: .7; margin-top: 4px; }
.weather-daily { display: flex; flex-direction: column; gap: 11px; }
/* Apple order: day · icon · low · track · high */
.weather-daily-row {
  display: grid;
  grid-template-columns: 2.75rem 2rem 2.5rem minmax(0,1fr) 2.5rem;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 8px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, transform .16s ease, opacity .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.weather-daily-row:hover .weather-daily-day { text-decoration: underline; text-underline-offset: 3px; }
.weather-daily-row:active { transform: scale(.996); opacity: .82; }
.weather-daily-row:focus-visible { outline: 2px solid rgba(255,255,255,.9); outline-offset: 2px; }
html[data-motion-effective="reduced"] .weather-daily-row,
html[data-motion-effective="off"] .weather-daily-row { transition: none; }
html[data-motion-effective="off"] .weather-daily-row:active { transform: none; }
.weather-daily-day {
  font-weight: 600;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-daily-row--today .weather-daily-day { font-weight: 700; }
.weather-daily-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  line-height: 1;
}
.weather-daily-icon .wx-cond-icon,
.weather-daily-icon svg {
  width: 22px;
  height: 22px;
}
.weather-daily-pop {
  font-size: 10px;
  font-weight: 700;
  color: #5ac8fa;
  letter-spacing: -0.02em;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.weather-daily-track {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: visible; /* allow current-temp dot to sit on track */
}
.weather-daily-bar {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 99px;
  /* Fallback only — real color is inline from temp °C */
  background: linear-gradient(90deg, #70c8ff, #ffd56a);
  min-width: 8px;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.12) inset;
}
.weather-daily-now {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.28);
  z-index: 2;
  pointer-events: none;
}
.weather-daily-hi {
  text-align: right;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.weather-daily-lo {
  text-align: right;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.weather-sheet {
  --wx-sheet-backdrop: 1;
  position: fixed; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0, calc(0.42 * var(--wx-sheet-backdrop, 1)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  z-index: 0;
  padding: 0 !important;
  transition: opacity .32s ease, visibility .32s ease, background .2s linear;
  overflow: hidden;
}
.weather-sheet.open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 10150 !important; /* above .weather-detail (10050) */
  background: rgba(0, 0, 0, calc(0.56 * var(--wx-sheet-backdrop, 1))) !important;
}
.weather-sheet.open.is-leaving {
  opacity: 0 !important;
  pointer-events: none !important;
}
.weather-sheet:not(.open) {
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: 0;
}
.weather-sheet-panel {
  --sheet-radius: 16px;
  --wx-sheet-ink: #f4f7fb;
  --wx-sheet-muted: rgba(244, 247, 251, 0.68);
  --wx-sheet-line: rgba(255, 255, 255, 0.12);
  --wx-chart-line: rgba(255, 255, 255, 0.95);
  --wx-chart-past: rgba(255, 255, 255, 0.42);
  --wx-chart-grid: rgba(255, 255, 255, 0.12);
  --wx-chart-guide: rgba(255, 255, 255, 0.7);
  --wx-chart-dot: #fff;
  --wx-chart-dot-ring: rgba(255, 255, 255, 0.4);
  --wx-chart-axis: rgba(255, 255, 255, 0.5);
  --wx-chart-fill-top: #ffffff;
  --wx-chart-fill-mid: #7ec8ff;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  max-height: min(92svh, 760px);
  overflow: hidden;
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
  background: linear-gradient(180deg, rgba(28, 34, 48, 0.94), rgba(12, 16, 26, 0.97));
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14);
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  color: var(--wx-sheet-ink);
  padding: 0;
  box-shadow: 0 -12px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.16);
  transform: translate3d(0, 100%, 0);
  transition: transform .4s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform, opacity;
  box-sizing: border-box;
}
.weather-sheet.open:not(.is-leaving) .weather-sheet-panel {
  transform: translate3d(0, 0, 0);
}
.weather-sheet.open.is-leaving .weather-sheet-panel {
  transform: translate3d(0, 100%, 0);
}
.weather-sheet-panel.is-dragging {
  transition: none !important;
}
/* Fill gap below sheet when rubber-banding upward */
.weather-sheet-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 100dvh;
  background: rgba(18, 24, 38, 0.99);
  pointer-events: none;
  z-index: -1;
}
/* Drag zone = grabber + title (about hub Preferences stretch) */
.wx-sheet-dragzone {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  /* Keep title clear of the close control (44px hit target + margin) */
  padding: 0 52px 8px 18px;
  padding-inline: 18px 52px;
  margin: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
.wx-sheet-dragzone:active { cursor: grabbing; }
.wx-sheet-grab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  pointer-events: none; /* whole zone handles drag */
}
.wx-sheet-grab::after {
  content: "";
  width: 36px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.34);
  opacity: 0.85;
  pointer-events: none;
}
.wx-sheet-title-host {
  pointer-events: none; /* title is part of drag hit target, not interactive */
  min-width: 0;
}
.wx-sheet-dragzone .wx-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  pointer-events: none;
  min-width: 0;
}
.wx-sheet-dragzone .wx-sheet-title {
  margin: 0 !important;
  font-family: var(--ff-display);
  font-size: 1.2rem !important;
  font-weight: 650;
  letter-spacing: -0.02em;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.wx-sheet-surface {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  min-height: 0; /* critical: allow flex child to scroll inside max-height panel */
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Bottom pad so last About line isn’t clipped under home indicator / panel edge */
  padding: 0 14px max(40px, calc(16px + env(safe-area-inset-bottom, 0px)));
  box-sizing: border-box;
  max-width: 100%;
}
@media (min-width: 480px) {
  .wx-sheet-surface {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (max-width: 719px) {
  .weather-sheet.open {
    background: rgba(0, 0, 0, calc(0.72 * var(--wx-sheet-backdrop, 1))) !important;
  }
  .weather-sheet-panel {
    max-height: min(92svh, 100%);
    min-height: 0;
    height: auto;
    width: 100% !important;
    max-width: none !important;
  }
}
.wx-sheet-surface .wx-sheet-about {
  padding-bottom: 8px;
}
.wx-sheet-surface .wx-sheet-about p {
  /* Avoid last-line clip from tight overflow + subpixel rounding */
  padding-bottom: 2px;
}
.weather-sheet-panel h3 { margin: 0 0 10px; font-family: var(--ff-display); font-size: 1.2rem; }
.weather-sheet-panel p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.88); }
/* Sheet close — match modal/settings craft; always above drag zone */
.weather-sheet-close {
  position: absolute;
  top: 12px;
  right: 14px;
  inset-inline-end: 14px;
  inset-inline-start: auto;
  z-index: 20;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  line-height: 0;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.weather-sheet-close:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #fff;
}
.weather-sheet-close:focus-visible {
  outline: 2px solid rgba(110, 198, 255, 0.9);
  outline-offset: 2px;
}
.weather-sheet-close:active {
  background: rgba(255, 255, 255, 0.18);
}
.weather-sheet-close svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
  stroke: currentColor;
  overflow: visible;
}
.weather-units-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.weather-units-row button {
  border: 1px solid rgba(255,255,255,.2); background: transparent; color: #fff;
  border-radius: 999px; padding: 6px 10px; font-size: 11px; cursor: pointer;
}
.weather-units-row button.active {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45);
}
@media (max-width: 540px) {
  .weather-modules { grid-template-columns: 1fr 1fr; gap: 8px; padding-left: 10px; padding-right: 10px; }
  .weather-row-temp { font-size: 2.1rem; }
}

/* Weather page dark canvas so glass tiles read well */
body.page-tools:has(.weather-root) {
  background: #07101c;
}
body.page-tools:has(.weather-root) .gallery-app-footer {
  position: relative;
  z-index: 2;
  background: transparent;
}


/* Hybrid tablets (keyboard/mouse): treat as desktop pointer once mouse is seen */
html.has-fine-pointer .gallery-item:hover,
html.has-fine-pointer .gallery-item:focus-visible {
  border-color: var(--border-med);
  outline: none;
}
html.has-fine-pointer .gallery-item:hover .gallery-zoom-hint,
html.has-fine-pointer .gallery-item:focus-visible .gallery-zoom-hint { opacity: 1; }
html.has-fine-pointer .region-card:hover .region-desc {
  max-height: 140px;
  opacity: 1;
}
html.has-fine-pointer .region-card:hover .region-spot:hover {
  border-color: var(--accent-1);
  color: var(--text-inv);
  background: var(--accent-1);
}
html.has-fine-pointer .dest-filter-btn:hover { border-color: var(--border-med); color: var(--text-main); }
html.has-fine-pointer .tools-hub-card:hover {
  border-color: color-mix(in srgb, var(--accent-1) 45%, var(--border-light));
  transform: translateY(-2px);
}
html.has-fine-pointer .weather-row:hover { box-shadow: 0 14px 36px rgba(0,0,0,.3); }
html.has-fine-pointer .weather-mod:hover {
  border-color: rgba(255,255,255,.28);
  background: rgba(28, 36, 54, 0.55);
}
/* Undo hover:none forced-open region blurbs when mouse is present */
html.has-fine-pointer .region-desc {
  max-height: 0;
  opacity: 0;
  display: block;
  -webkit-line-clamp: unset;
}
html.has-fine-pointer .region-card:hover .region-desc {
  max-height: 140px;
  opacity: 1;
}
/* Unified pill buttons — toolbar + detail bar share one style */
.weather-btn-pill,
.weather-btn-label {
  white-space: nowrap;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  min-height: 40px !important;
  border-radius: 999px !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.weather-btn-pill:hover,
.weather-btn-pill:focus-visible,
.weather-btn-label:hover,
.weather-btn-label:focus-visible {
  border-color: rgba(255,255,255,.5) !important;
  background: rgba(255,255,255,.24) !important;
  color: #fff !important;
  outline: none;
}
.weather-btn-pill:active { transform: scale(0.97); }
.weather-btn-pill:disabled { opacity: .55; cursor: default; transform: none; }
/* Busy = in-flight refresh; control stays clickable so manual refresh is always available */
.weather-btn-pill.is-busy,
.weather-btn-pill[aria-busy="true"] {
  opacity: .82;
  cursor: progress;
}
.weather-btn-pill.weather-btn-icon {
  /* Refresh keeps its hit target while the icon indicates network activity. */
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}
@keyframes wx-refresh-spin { to { transform: rotate(360deg); } }
#weatherRefresh.is-busy svg,
#weatherDetailRefresh.is-busy svg {
  animation: wx-refresh-spin .85s linear infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  #weatherRefresh.is-busy svg, #weatherDetailRefresh.is-busy svg { animation: none; }
}
.weather-btn-done {
  /* Same glass family as Refresh — slightly brighter, not solid white */
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.weather-btn-done:hover,
.weather-btn-done:focus-visible {
  background: rgba(255,255,255,.32) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.55) !important;
}
.weather-detail-bar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-inline-start: auto;
  flex: 0 0 auto;
}
.weather-save-icon,
.weather-star-icon,
.weather-loc-icon,
.weather-mod-icon,
.weather-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
  flex-shrink: 0;
}
.weather-mod-icon { width: 15px; height: 15px; opacity: .9; }
.weather-row-icon { width: 22px; height: 22px; }
.weather-save-icon,
.weather-star-icon { width: 19px; height: 19px; }
.weather-row-loc { display: inline-flex; flex-shrink: 0; }
/* White pin + shadow so it stays visible on pale daytime sky cards (not only dark nights) */
.weather-loc-icon {
  width: 16px;
  height: 16px;
  color: #fff !important;
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
.weather-row--myloc { box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(126,200,255,.25); }
.weather-mod-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
}
.weather-search {
  color: #fff !important;
  border-color: rgba(255,255,255,.2) !important;
  background: rgba(8, 16, 32, 0.45) !important;
}
.weather-search::placeholder { color: rgba(255,255,255,.55) !important; }
.weather-section-label { color: rgba(255,255,255,.65) !important; }
.weather-updated { color: rgba(255,255,255,.65) !important; }
.weather-attribution { color: rgba(255,255,255,.45) !important; }

@media (max-width: 640px) {
  .weather-search-icon {
    /* Pin to 48px input height — not 50% of a stretched wrap */
    top: 24px !important;
    transform: translateY(-50%) !important;
  }
  .weather-search-clear {
    top: 24px !important;
  }
}
.weather-chart {
  width: 100%;
  height: 140px;
  display: block;
  margin: 8px 0 4px;
  touch-action: pan-y;
}
.weather-chart-readout {
  font-family: var(--ff-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
.weather-chart-sub {
  font-size: 12px;
  opacity: .75;
  margin-bottom: 8px;
}
.weather-gauge {
  width: 100%;
  height: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, #3ddc84, #ffd56a, #ff8a4c, #ff4d6d, #c44dff);
  position: relative;
  margin: 10px 0 6px;
}
.weather-gauge-dot {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px; margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}
/* Apple Weather-inspired wind compass (direction ring + TO arrow) */
.weather-compass {
  --wx-wind-from: 0deg;
  --wx-wind-to: 180deg;
  position: relative;
  border-radius: 50%;
  margin: 0 auto;
  flex-shrink: 0;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 38%, transparent 39%),
    rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.22);
}
.weather-compass--full {
  width: 132px;
  height: 132px;
  margin: 12px auto 4px;
}
.weather-compass--mini {
  width: 72px;
  height: 72px;
  margin: 0;
}
@media (max-width: 400px) {
  .weather-compass--mini {
    width: 64px;
    height: 64px;
  }
}
.wx-compass-ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.18);
  pointer-events: none;
}
.wx-compass-tick {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.55);
  line-height: 1;
  pointer-events: none;
}
.weather-compass--full .wx-compass-tick { font-size: 11px; }
.wx-compass-tick--n { top: 6px; left: 50%; transform: translateX(-50%); }
.wx-compass-tick--s { bottom: 6px; left: 50%; transform: translateX(-50%); }
.wx-compass-tick--e { right: 7px; top: 50%; transform: translateY(-50%); }
.wx-compass-tick--w { left: 7px; top: 50%; transform: translateY(-50%); }
.weather-compass--mini .wx-compass-tick { font-size: 9px; opacity: .75; font-weight: 700; }
.weather-compass--mini .wx-compass-tick--n { top: 5px; }
.weather-compass--mini .wx-compass-tick--s { bottom: 5px; }
.weather-compass--mini .wx-compass-tick--e { right: 6px; }
.weather-compass--mini .wx-compass-tick--w { left: 6px; }
.weather-compass--mini .wx-compass-arrow {
  width: 14px;
  height: 40%;
  margin-left: -7px;
  margin-top: -40%;
}
.weather-compass--mini .wx-compass-arrow-shaft { width: 2.5px; margin-left: -1.25px; }
.weather-compass--mini .wx-compass-arrow-head {
  margin-left: -6px;
  border-left-width: 6px;
  border-right-width: 6px;
  border-bottom-width: 11px;
}
.weather-compass--mini .wx-compass-hub {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}
/* Arrow: origin at compass center, points "up" then rotates to wind TO */
.wx-compass-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 38%;
  margin-left: -6px;
  margin-top: -38%;
  transform: rotate(var(--wx-wind-to, 180deg));
  transform-origin: 50% 100%;
  pointer-events: none;
}
.weather-compass--full .wx-compass-arrow {
  width: 16px;
  height: 40%;
  margin-left: -8px;
  margin-top: -40%;
}
.wx-compass-arrow-shaft {
  position: absolute;
  left: 50%;
  top: 22%;
  bottom: 8%;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: linear-gradient(180deg, #9fd4ff, rgba(126,200,255,.25));
}
.weather-compass--full .wx-compass-arrow-shaft { width: 3px; margin-left: -1.5px; }
.wx-compass-arrow-head {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 9px solid #9fd4ff;
  filter: drop-shadow(0 0 4px rgba(126,200,255,.55));
}
.weather-compass--full .wx-compass-arrow-head {
  margin-left: -7px;
  border-left-width: 7px;
  border-right-width: 7px;
  border-bottom-width: 12px;
}
.wx-compass-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(126,200,255,.35);
}
.weather-compass--full .wx-compass-hub {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}
.weather-compass-caption {
  text-align: center;
  margin-top: 6px !important;
}
/* legacy needle class — unused but keep harmless */
.weather-compass-needle { display: none; }
.weather-sun-arc {
  width: 100%;
  height: 72px;
  display: block;
  margin: 6px 0;
  color: rgba(255, 255, 255, 0.55);
}
.weather-sun-arc .wx-sun-horizon { stroke: rgba(255, 255, 255, 0.28); }
.weather-sun-arc .wx-sun-area { fill: rgba(255, 210, 120, 0.16); }
.weather-sun-arc .wx-sun-line { stroke: currentColor; }
.weather-sun-arc .wx-sun-axis { fill: rgba(255, 255, 255, 0.35); }
.weather-sun-arc .wx-sun-now {
  fill: #fff;
  stroke: rgba(255, 220, 140, 0.9);
  transform-box: fill-box;
  transform-origin: center;
  animation: wxSunNowGlow 3.6s ease-in-out infinite alternate;
}
@keyframes wxSunNowGlow {
  from { opacity: 0.82; }
  to { opacity: 1; }
}
html[data-motion-effective="reduced"] .weather-sun-arc .wx-sun-now,
html[data-motion-effective="off"] .weather-sun-arc .wx-sun-now {
  animation: none;
}
.weather-detail.wx-mods-light .weather-sun-arc { color: rgba(22, 52, 79, 0.45); }
.weather-detail.wx-mods-light .weather-sun-arc .wx-sun-horizon { stroke: rgba(22, 52, 79, 0.22); }
.weather-detail.wx-mods-light .weather-sun-arc .wx-sun-axis { fill: rgba(22, 52, 79, 0.4); }
.weather-detail.wx-mods-light .weather-sun-arc .wx-sun-now { fill: #f0c14a; stroke: rgba(180, 120, 40, 0.55); }
.weather-detail.wx-mods-light .weather-daily-track { background: rgba(22, 52, 79, 0.14); }
.weather-detail.wx-mods-light .weather-daily-now {
  background: #16344f;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(22, 52, 79, 0.28);
}
.weather-detail.wx-mods-light .weather-daily-pop { text-shadow: none; color: #0a84ff; }
.weather-detail.wx-mods-light .weather-compass {
  background: radial-gradient(circle at 50% 50%, rgba(22, 52, 79, 0.06) 0 38%, transparent 39%), rgba(22, 52, 79, 0.04);
  border-color: rgba(22, 52, 79, 0.2);
}
.weather-detail.wx-mods-light .wx-compass-ring { border-color: rgba(22, 52, 79, 0.18); }
.weather-detail.wx-mods-light .wx-compass-tick { color: rgba(22, 52, 79, 0.55); }
.weather-detail.wx-mods-light .wx-compass-hub {
  background: #16344f;
  box-shadow: 0 0 0 2px rgba(22, 52, 79, 0.2);
}
.weather-detail.wx-mods-light .wx-metric-bar,
.weather-detail.wx-mods-light .wx-aqi-scale-track {
  background: rgba(22, 52, 79, 0.12);
}
.weather-mod { cursor: pointer; }
.weather-mod[data-sheet] { cursor: pointer; }
button.weather-mod, .weather-mod.is-tappable { cursor: pointer; }
/* sheet panel height owned by block above + .wx-sheet-surface */
.weather-icon-lg {
  width: 28px; height: 28px;
  display: inline-block;
  vertical-align: -6px;
  margin-right: 6px;
}

.weather-chart [data-guide],
.weather-chart [data-dot] {
  transition: none; /* follow pointer immediately */
}
.weather-chart-readout {
  font-variant-numeric: tabular-nums;
}


/* Weather temp / title readability on bright or low-contrast skies */
.weather-row-temp,
.weather-detail-temp {
  text-shadow:
    0 1px 2px rgba(0,0,0,.55),
    0 2px 12px rgba(0,0,0,.4),
    0 0 1px rgba(0,0,0,.5) !important;
}
.weather-row-city,
.weather-detail-hero h2 {
  text-shadow:
    0 1px 2px rgba(0,0,0,.45),
    0 2px 10px rgba(0,0,0,.28);
}
.weather-row-meta,
.weather-row-cond,
.weather-row-hl,
.weather-detail-cond,
.weather-detail-hl,
.weather-detail-updated {
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.weather-detail-hero {
  position: relative;
}
.weather-detail-hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -48%);
  width: min(320px, 88%);
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.weather-detail-hero > * { position: relative; z-index: 1; }

/* NWS active alerts — Apple Weather–style chips (collapsed by default) */
.weather-alerts {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.weather-alerts-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
  padding: 0 4px 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.weather-alert {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 69, 58, 0.48);
  /* Solid glass — no backdrop-filter (cheaper on battery) */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  color: #fff;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/* Expand/collapse: pixel height driven by JS (smooth open + close) */
.weather-alert-collapse {
  height: 0;
  overflow: hidden;
  will-change: height;
  transition: height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.weather-alert-collapse > .weather-alert-body {
  min-height: 0;
  /* Content always painted while panel height animates — no opacity flash */
  opacity: 1;
}
html[data-motion-effective="reduced"] .weather-alert-collapse,
html[data-motion-effective="off"] .weather-alert-collapse {
  transition: none !important;
}
.weather-alert--severe {
  background: linear-gradient(135deg, rgba(255, 59, 48, 0.62), rgba(255, 45, 85, 0.48));
  border-color: rgba(255, 255, 255, 0.24);
}
.weather-alert--moderate {
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.58), rgba(255, 69, 58, 0.42));
}
.weather-alert--minor {
  background: linear-gradient(135deg, rgba(255, 214, 10, 0.72), rgba(255, 159, 10, 0.55));
  color: #1c1400;
}
.weather-alert--minor .weather-alert-badge {
  background: rgba(0, 0, 0, 0.16);
  color: #1c1400;
}
.weather-alert--minor .weather-alert-chevron {
  border-color: rgba(28, 20, 0, 0.45);
}
.weather-alert-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.weather-alert-summary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: -2px;
  border-radius: 12px;
}
.weather-alert-badge {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.22);
  line-height: 1;
}
.weather-alert-icon { width: 14px; height: 14px; display: block; }
.weather-alert-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-alert-until {
  flex: 0 1 auto;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.88;
  max-width: 34%;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-alert-chevron {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2px solid rgba(255, 255, 255, 0.75);
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: 0.85;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.weather-alert.is-open .weather-alert-chevron {
  transform: rotate(225deg);
  margin-top: 3px;
}
.weather-alert-body {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 14px 14px;
  font-size: 13px;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-y: hidden;
  max-height: min(42vh, 320px);
  -webkit-overflow-scrolling: touch;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  contain: inline-size;
}
.weather-alert.is-open .weather-alert-body {
  overflow-y: auto;
}
.weather-alert-headline {
  display: block;
  width: 100%;
  margin: 0 0 10px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.4;
}
.weather-alert-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
.weather-alert-section {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
  box-sizing: border-box;
}
.weather-alert--minor .weather-alert-section {
  background: rgba(0, 0, 0, 0.08);
}
.weather-alert-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
  margin: 0 0 4px;
}
.weather-alert-section-body,
.weather-alert-desc {
  display: block;
  width: 100%;
  margin: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
}
.weather-alert-action {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}
.weather-alert-action-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin: 0 0 4px;
}
.weather-alert-instruction {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.weather-alert-area,
.weather-alert-source {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  font-size: 11px;
  opacity: 0.75;
  overflow-wrap: anywhere;
}
.weather-alert-source {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.weather-alert--minor .weather-alert-source {
  border-top-color: rgba(0, 0, 0, 0.1);
}
.weather-alert.is-open .weather-alert-summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.weather-alert--minor.is-open .weather-alert-summary {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

/* Live “Using °C · km” line under Settings units */
.settings-units-resolved {
  margin: 10px 2px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.72;
  line-height: 1.35;
}

/* List-row brief alert (home view) */
.weather-row-status {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}
.weather-row-status .weather-row-cond {
  flex: 1 1 auto;
  margin-top: 0;
}
.weather-row-alert {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto;
  max-width: min(48%, 148px);
  margin-top: 0;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 216, 107, .72);
  border-radius: 9px;
  background: rgba(22, 32, 46, .92);
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  color: #fff3ce;
  min-width: 0;
  white-space: nowrap;
}
.weather-row-alert span:last-child {
  display: block;
  max-width: none;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.weather-row-alert-icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: block;
}
.weather-row-alert--severe {
  color: #ffe7e4;
  border-color: rgba(255, 174, 166, .82);
  background: rgba(96, 27, 26, .96);
}
.weather-row-alert--moderate {
  color: #fff0cb;
  border-color: rgba(255, 206, 114, .84);
  background: rgba(91, 56, 13, .97);
}
.weather-row-alert--minor {
  color: #fff5cc;
  border-color: rgba(255, 223, 105, .82);
  background: rgba(73, 59, 13, .97);
}
body.weather-sky-light .weather-row-alert--severe { color: #741915; border-color: #8f1d18; background: #ffe3df; }
body.weather-sky-light .weather-row-alert--moderate { color: #563600; border-color: #805100; background: #fff0d0; }
body.weather-sky-light .weather-row-alert--minor { color: #4e3d00; border-color: #786000; background: #fff4bd; }

/* Weather bootstrap — single hero progress (no multi-list thrash) */
.weather-load-panel {
  margin: 8px 0 16px;
  padding: 0 2px;
}
.weather-load-panel[hidden] { display: none !important; }
.weather-load-panel--hero {
  margin: 28px auto 40px;
  padding: 0 12px;
  max-width: 400px;
}
.weather-load-card {
  position: relative;
  padding: 28px 24px 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  text-align: left;
}
.weather-load-orb {
  position: absolute;
  right: -20px;
  top: -28px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 220, 120, 0.55),
    rgba(110, 198, 255, 0.28) 45%,
    transparent 70%);
  pointer-events: none;
  animation: wxLoadOrb 2.8s ease-in-out infinite;
}
.weather-load-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
  z-index: 1;
}
.weather-load-pct {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 600;
}
.weather-load-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}
.weather-load-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6ec6ff, #a8e0ff 40%, #ffd56a 100%);
  box-shadow: 0 0 12px rgba(110, 198, 255, 0.45);
  transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.weather-load-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
  position: relative;
  z-index: 1;
}
html[data-motion-effective="reduced"] .weather-load-orb,
html[data-motion-effective="off"] .weather-load-orb {
  animation: none;
}
@keyframes wxLoadOrb {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}
.weather-skeleton-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.weather-skeleton-row {
  height: 88px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.08);
}

/* World clock search */
.clock-search-wrap {
  position: relative;
  margin-bottom: 14px;
}
.clock-search {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  background: var(--surface-1, color-mix(in srgb, var(--bg) 92%, #fff 8%));
  color: var(--text-main);
  padding: 10px 14px 10px 40px;
  font: inherit;
  font-size: 15px;
}
.clock-search:focus {
  outline: none;
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 22%, transparent);
}
.clock-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .5;
  pointer-events: none;
  display: flex;
}
.clock-empty {
  text-align: center;
  padding: 28px 12px;
  color: var(--text-mute);
  font-size: 14px;
}

/* ── Weather page sky canvas (list) ── */
body.page-tools:has(.weather-root) {
  background: #0a1628;
}
html[data-theme="minimal"] body.page-tools:has(.weather-root) {
  background: #e9f2fb;
}
body.page-tools:has(.weather-root) #main {
  position: relative;
  /* no isolation — weather-detail is fixed and must stack above the app bar */
}
.weather-page-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(165deg,
    var(--wx-page-1, #1a4a7a) 0%,
    var(--wx-page-2, #3d8fd1) 48%,
    var(--wx-page-3, #0a1628) 100%);
  opacity: 0;
  transition: opacity .78s cubic-bezier(.2,.7,.2,1), background 1s ease;
}
.weather-page-sky.is-ready {
  opacity: 1;
}
.weather-page-sky::before,
.weather-page-sky::after {
  content: '';
  position: absolute;
  inset: -25%;
  pointer-events: none;
  opacity: var(--wx-page-fx-o, 0.45);
  background-image: var(--wx-page-fx, none);
  background-size: 140% 140%;
}
.weather-page-sky::before {
  animation: wxCloudA 18s ease-in-out infinite alternate;
}
.weather-page-sky::after {
  animation: wxCloudB 24s ease-in-out infinite alternate;
  opacity: calc(var(--wx-page-fx-o, 0.45) * 0.75);
}
@keyframes wxCloudA {
  from { transform: translate3d(-6%, -2%, 0) scale(1.08); }
  to { transform: translate3d(8%, 4%, 0) scale(1.18); }
}
@keyframes wxCloudB {
  from { transform: translate3d(5%, 2%, 0) scale(1.12); }
  to { transform: translate3d(-9%, -3%, 0) scale(1.05); }
}
/* Quiet page ornaments — one cloud, a still sun/moon, no blob stack */
.wx-page-live {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.wx-page-cloud {
  position: absolute;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  opacity: 0.42;
  animation: wxCloudDrift 48s ease-in-out infinite alternate;
  box-shadow: 0 0 20px 10px rgba(255,255,255,.18);
}
.wx-page-cloud-a {
  width: min(30vw, 240px); height: min(8vw, 52px);
  left: 10%; top: 16%;
  box-shadow: 44px 8px 0 -6px rgba(255,255,255,.26), 78px -6px 0 -12px rgba(255,255,255,.18);
}
.wx-page-sun {
  position: absolute;
  left: var(--wx-page-sun-left, 72%);
  top: var(--wx-page-sun-top, 14%);
  width: var(--wx-page-sun-size, 140px);
  height: var(--wx-page-sun-size, 140px);
  margin-left: calc(var(--wx-page-sun-size, 140px) / -2);
  margin-top: calc(var(--wx-page-sun-size, 140px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffef5 0%, #ffe08a 26%, rgba(255,190,80,.45) 52%, transparent 72%);
  box-shadow: 0 0 90px 36px rgba(255,210,100,.38);
  opacity: 0.95;
  transition: left 1.6s ease, top 1.6s ease, width .9s ease, height .9s ease, opacity .8s ease;
  z-index: 1;
}
.wx-page-sun::after {
  content: '';
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 140, 0.28) 0%, transparent 68%);
  animation: wxSunCorona 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.wx-page-sky.wx-page--night .wx-page-sun { opacity: 0; }
.wx-page-sky.wx-page--night .wx-page-cloud { opacity: 0.12; }
.wx-page-moon {
  position: absolute;
  left: var(--wx-page-sun-left, 78%);
  top: var(--wx-page-sun-top, 16%);
  width: var(--wx-page-sun-size, 52px);
  height: var(--wx-page-sun-size, 52px);
  margin-left: calc(var(--wx-page-sun-size, 52px) / -2);
  margin-top: calc(var(--wx-page-sun-size, 52px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #ffffff 0%, #f0f3fa 28%, #d0d8ec 62%, #a8b4d0 100%);
  box-shadow:
    0 0 40px 14px rgba(180, 200, 255, 0.28),
    inset -8px -6px 16px rgba(40, 50, 80, 0.18);
  opacity: 0;
  z-index: 1;
  transition: left 1.6s ease, top 1.6s ease, opacity .8s ease;
}
.wx-page-sky.wx-page--night .wx-page-moon { opacity: 0.88; }
.wx-page-sky.wx-page--night .wx-page-sun { opacity: 0 !important; }
.wx-page-sky.wx-page--night .wx-page-sun::after { animation: none; opacity: 0; }
.wx-page-glow {
  position: absolute;
  inset: -10%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.16), transparent 52%);
  opacity: 0.7;
}
@keyframes wxCloudDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(5%, 2%, 0); }
}
@keyframes wxSunCorona {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
body.weather-sky-light .wx-page-cloud {
  background: rgba(255,255,255,.62);
  opacity: 0.55;
  filter: blur(6px);
}
body.weather-sky-light .weather-page-sky.wx-page--night .wx-page-cloud,
.weather-page-sky.wx-page--night .wx-page-cloud {
  background: rgba(255,255,255,.2);
  opacity: 0.14;
  filter: blur(10px);
}
body.weather-sky-light .wx-page-sun {
  opacity: 1;
  box-shadow: 0 0 100px 40px rgba(255,200,80,.42);
}
html[data-motion-effective="reduced"] .weather-page-sky::before,
html[data-motion-effective="reduced"] .weather-page-sky::after,
html[data-motion-effective="reduced"] .wx-page-cloud,
html[data-motion-effective="reduced"] .wx-page-sun::after,
html[data-motion-effective="off"] .weather-page-sky::before,
html[data-motion-effective="off"] .weather-page-sky::after,
html[data-motion-effective="off"] .wx-page-cloud,
html[data-motion-effective="off"] .wx-page-sun::after {
  animation: none !important;
}
html[data-motion-effective="off"] .weather-page-sky {
  background: var(--wx-page-flat, #0e1a2c) !important;
  filter: none !important;
  transition: none;
}
html[data-motion-effective="off"] .weather-page-sky::before,
html[data-motion-effective="off"] .weather-page-sky::after,
html[data-motion-effective="off"] .wx-page-live {
  opacity: 0 !important;
  display: none !important;
}
html[data-motion-effective="reduced"] .wx-page-sun { opacity: 0.7; }
html[data-motion-effective="reduced"] .weather-page-sky {
  transition-duration: .38s, .38s;
}
html[data-motion-effective="off"] .weather-page-sky {
  opacity: 1;
}
.weather-page-sky.wx-page--night .wx-page-sun { opacity: 0 !important; }
.weather-root, .weather-page {
  position: relative;
  z-index: 1;
}
/* Do NOT touch .gallery-app-bar here — it must stay position:fixed */
body.page-tools:has(.weather-root) .gallery-app-bar {
  background: color-mix(in srgb, #07101c 55%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
body.page-tools:has(.weather-root) .gallery-app-footer {
  position: relative;
  z-index: 2; /* above fixed weather-page-sky */
  background: transparent;
  border-top-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}
body.page-tools:has(.weather-root) .gallery-app-footer a {
  color: rgba(255,255,255,.88);
}
body.page-tools:has(.weather-root) .gallery-app-footer .gallery-app-footer-copy,
body.page-tools:has(.weather-root) .gallery-app-footer .footer-legal-links a {
  color: rgba(255,255,255,.55);
}
body.page-tools:has(.weather-root) .gallery-app-footer .footer-legal-links {
  border-top-color: rgba(255,255,255,.12);
}
body.weather-sky-light.page-tools:has(.weather-root) .gallery-app-footer {
  color: rgba(234, 243, 255, 0.75);
  border-top-color: rgba(255,255,255,.12);
}
body.weather-sky-light.page-tools:has(.weather-root) .gallery-app-footer a {
  color: rgba(234, 243, 255, 0.88);
}
body.weather-sky-light.page-tools:has(.weather-root) .gallery-app-footer .gallery-app-footer-copy,
body.weather-sky-light.page-tools:has(.weather-root) .gallery-app-footer .footer-legal-links a {
  color: rgba(234, 243, 255, 0.62);
}
body.wx-page-canvas-light.page-tools:has(.weather-root) .gallery-app-footer {
  color: #1a3348 !important;
  border-top-color: rgba(26, 51, 72, 0.16) !important;
}
body.wx-page-canvas-light.page-tools:has(.weather-root) .gallery-app-footer a,
body.wx-page-canvas-light.page-tools:has(.weather-root) .gallery-app-footer .gallery-app-footer-copy,
body.wx-page-canvas-light.page-tools:has(.weather-root) .gallery-app-footer .footer-legal-links a {
  color: #1a3348 !important;
}
body.wx-page-canvas-light .weather-attribution {
  color: rgba(26, 51, 72, 0.62) !important;
}

/* Detail sky layers — Full motion */
.weather-detail-sky {
  position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
  transform: translateZ(0);
}
/* Precip in front of glass cards so backdrop-filter does not re-blur falling rain */
.weather-detail-fx {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
}
.weather-detail-fx .wx-precip {
  position: absolute;
  inset: 0;
}
.weather-detail:not(.open) .weather-detail-fx,
.weather-detail:not(.open) .wx-ornaments,
.weather-detail:not(.open) .weather-detail-sky .wx-layer-a,
.weather-detail:not(.open) .weather-detail-sky .wx-layer-b {
  display: none !important;
}
.weather-detail-sky .wx-layer {
  position: absolute; inset: -20%;
}
.weather-detail-sky .wx-layer-base {
  inset: 0;
  background: linear-gradient(165deg, var(--wx-sky-1, #3d8fd1), var(--wx-sky-2, #1a5a9c));
  transition: background 1s ease, opacity .6s ease;
}
.weather-detail-sky .wx-layer-a {
  background-image: var(--wx-fx-bg, none);
  opacity: var(--wx-fx-opacity, 0.4);
  animation: wxDrift 56s linear infinite;
  will-change: transform;
}
.weather-detail-sky .wx-layer-b {
  background-image: var(--wx-fx-bg-2, none);
  opacity: calc(var(--wx-fx-opacity, 0.4) * 0.55);
  animation: wxDriftRev 72s linear infinite;
  will-change: transform;
}
@keyframes wxDrift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-2.5%, 1.5%, 0); }
}
@keyframes wxDriftRev {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(2%, -1.2%, 0); }
}
html[data-motion-effective="reduced"] .weather-detail-sky .wx-layer-a,
html[data-motion-effective="reduced"] .weather-detail-sky .wx-layer-b {
  animation: none !important;
  opacity: 0.22;
}
html[data-motion-effective="off"] .weather-detail-sky .wx-layer-a,
html[data-motion-effective="off"] .weather-detail-sky .wx-layer-b {
  display: none !important;
}
html[data-motion-effective="off"] .weather-detail-sky .wx-layer-base {
  background: var(--wx-flat, #1a3a5c) !important;
  transition: none;
}

/* Detail shell polish toward Apple Weather */
.weather-detail {
  /* MUST be opaque + full-bleed — list / theme must never show as side edges */
  background-color: var(--wx-sky-1, #1a4a7a) !important;
  background-image: linear-gradient(165deg, var(--wx-sky-1, #1a4a7a), var(--wx-sky-2, #0a1628)) !important;
  z-index: 10050 !important;
  /* Kill any residual scale from older rules */
  transform: none !important;
}
.weather-detail.open {
  transform: none !important;
}
.weather-detail > .weather-detail-scroll {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
}
/* Content only — shell fade is CSS transition on .weather-detail */
@keyframes wxDetailContentIn {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

.weather-detail-hero h2 {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.weather-detail-temp {
  font-size: clamp(5rem, 18vw, 7rem) !important;
  font-weight: 200 !important;
  text-shadow: 0 4px 40px rgba(0,0,0,.2);
}
.weather-mod {
  background: linear-gradient(180deg, rgba(16, 32, 58, 0.42), rgba(10, 20, 38, 0.32)) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  backdrop-filter: blur(36px) saturate(155%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(155%) !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.weather-detail.wx-mods-light .weather-mod {
  background: rgba(213, 227, 240, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(36px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(165%) !important;
  box-shadow: 0 10px 28px rgba(18, 42, 72, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* "No alerts" is low-priority information — keep it visually quiet next to forecast cards. */
.weather-detail.wx-mods-light .weather-alert-status {
  background: rgba(220, 233, 244, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px;
  box-shadow: none;
}
.weather-detail.wx-mods-light .weather-detail-updated { opacity: .85; }
/* Keep the glass finish on phones while limiting the blur cost on small GPUs. */
html[data-mobile-lite="true"] .weather-detail .weather-mod {
  backdrop-filter: blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
}
html[data-mobile-lite="true"] .weather-detail.wx-mods-light .weather-mod {
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
html[data-motion-effective="off"] .weather-mod {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(16, 28, 46, 0.88) !important;
}
html[data-motion-effective="off"] .weather-detail.wx-mods-light .weather-mod {
  background: rgba(213, 227, 240, 0.94) !important;
}
@media (hover: hover), (any-hover: hover) {
  .weather-mod:hover {
    background: linear-gradient(180deg, rgba(20, 38, 66, 0.52), rgba(12, 24, 44, 0.4)) !important;
    border-color: rgba(255,255,255,0.28) !important;
  }
  .weather-detail.wx-mods-light .weather-mod:hover {
    background: #e0ebf5 !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
  }
}
html.has-fine-pointer .weather-mod:hover {
  background: linear-gradient(180deg, rgba(20, 38, 66, 0.52), rgba(12, 24, 44, 0.4)) !important;
  border-color: rgba(255,255,255,0.28) !important;
}
html.has-fine-pointer .weather-detail.wx-mods-light .weather-mod:hover {
  background: #e0ebf5 !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}
.weather-row {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .22s cubic-bezier(.2,.85,.25,1), box-shadow .22s ease !important;
}
html[data-motion-effective="full"] .weather-row:active {
  transform: scale(0.98);
}
html[data-motion-effective="off"] .weather-row {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none !important;
}
.weather-row::after {
  transition: opacity .6s ease;
}
/* List rows: soft enter */
.weather-list li {
  animation: wxRowIn .45s cubic-bezier(.2,.85,.25,1) both;
}
.weather-list li:nth-child(1) { animation-delay: .02s; }
.weather-list li:nth-child(2) { animation-delay: .05s; }
.weather-list li:nth-child(3) { animation-delay: .08s; }
.weather-list li:nth-child(4) { animation-delay: .11s; }
.weather-list li:nth-child(5) { animation-delay: .14s; }
.weather-list li:nth-child(n+6) { animation-delay: .16s; }
@keyframes wxRowIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
html[data-motion-effective="reduced"] .weather-list li {
  animation: wxRowInSoft .25s ease both;
}
@keyframes wxRowInSoft {
  from { opacity: 0; }
  to { opacity: 1; }
}
html[data-motion-effective="off"] .weather-list li {
  animation: none !important;
}

/* Mini visuals on modules */
.weather-mod-viz {
  margin-top: 10px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.weather-mod-viz-bar {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #3ddc84, #ffd56a, #ff8a4c, #ff4d6d, #c44dff);
  opacity: .9;
}
.weather-mod-viz-dot {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px; margin-left: -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2);
}
/* Mini compass lives in .weather-mod-foot via .weather-compass--mini */

/* Interactive PE only when detail is OPEN — closed shell must never steal list taps.
   Nuclear: kill the entire closed subtree (children default to PE:auto and can steal hits). */
.weather-detail:not(.open),
.weather-detail:not(.open) * {
  pointer-events: none !important;
}
.weather-sheet:not(.open),
.weather-sheet:not(.open) * {
  pointer-events: none !important;
}
.weather-detail:not(.open) .weather-detail-bar,
.weather-detail:not(.open) .weather-detail-bar .weather-btn,
.weather-detail:not(.open) .weather-detail-scroll,
.weather-detail:not(.open) .weather-modules,
.weather-detail:not(.open) .weather-mod {
  pointer-events: none !important;
}
.weather-detail.open .weather-detail-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}
.weather-detail.open .weather-detail-bar .weather-btn {
  pointer-events: auto !important;
  position: relative;
  z-index: 6;
}

/* Sky ornaments — slow, physical, sparse (Apple Weather–like) */
.wx-ornaments {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1;
  contain: layout style paint;
}
.wx-ornament { position: absolute; pointer-events: none; }
.wx-sun {
  width: var(--wx-sun-size, 72px);
  height: var(--wx-sun-size, 72px);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fffef0 0%, #ffd56a 32%, rgba(255,180,60,.2) 62%, transparent 72%);
  left: var(--wx-sun-left, 72%);
  top: var(--wx-sun-top, 18%);
  margin-left: calc(var(--wx-sun-size, 72px) / -2);
  margin-top: calc(var(--wx-sun-size, 72px) / -2);
  box-shadow: 0 0 40px 14px rgba(255,210,100,.32);
  opacity: 0;
  transition: opacity .8s ease, left 1.6s ease, top 1.6s ease, width .8s ease, height .8s ease;
}
.wx-sun::before {
  content: '';
  position: absolute;
  inset: -70%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 18deg,
    rgba(255, 220, 140, 0.0) 0deg 12deg,
    rgba(255, 220, 140, 0.1) 13deg 15deg,
    rgba(255, 220, 140, 0.0) 16deg 28deg);
  opacity: calc(var(--wx-corona-op, 0.7) * 0.55);
  pointer-events: none;
  z-index: -1;
}
.wx-sun::after {
  content: '';
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 140, 0.38) 0%, transparent 70%);
  animation: wxSunCorona 18s ease-in-out infinite alternate;
  opacity: var(--wx-corona-op, 0.7);
  pointer-events: none;
}
.wx-sky--rain .wx-sun::before,
.wx-sky--storm .wx-sun::before,
.wx-sky--snow .wx-sun::before,
.wx-sky--fog .wx-sun::before,
.wx-sky--overcast .wx-sun::before { opacity: 0; }
.wx-moon {
  width: var(--wx-sun-size, 52px);
  height: var(--wx-sun-size, 52px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 58%, rgba(90, 100, 130, 0.22) 0 8%, transparent 9%),
    radial-gradient(circle at 38% 44%, rgba(70, 80, 110, 0.18) 0 5%, transparent 6%),
    radial-gradient(circle at 52% 30%, rgba(80, 90, 120, 0.14) 0 4%, transparent 5%),
    radial-gradient(circle at 34% 32%, #ffffff 0%, #f0f3fa 28%, #d0d8ec 62%, #a8b4d0 100%);
  left: var(--wx-sun-left, 70%);
  top: var(--wx-sun-top, 20%);
  margin-left: calc(var(--wx-sun-size, 52px) / -2);
  margin-top: calc(var(--wx-sun-size, 52px) / -2);
  box-shadow:
    0 0 40px 14px rgba(180, 200, 255, 0.32),
    inset -8px -6px 16px rgba(40, 50, 80, 0.18),
    inset 4px 4px 10px rgba(255, 255, 255, 0.45);
  opacity: 0;
  overflow: visible;
  transition: opacity .8s ease, left 1.6s ease, top 1.6s ease, width .8s ease, height .8s ease;
}
.wx-moon::before {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 215, 255, 0.4) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.wx-moon::after { display: none !important; content: none !important; }

.wx-stars {
  position: absolute; inset: 0; opacity: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 28% 48%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 44% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 62% 36%, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 78% 14%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 86% 52%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 18% 68%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 52% 72%, rgba(255,255,255,.75), transparent);
  transition: opacity .9s ease;
}
.wx-stars-b {
  background-image:
    radial-gradient(1.1px 1.1px at 22% 30%, rgba(255,255,255,.7), transparent),
    radial-gradient(0.9px 0.9px at 58% 14%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 74% 62%, rgba(255,255,255,.65), transparent),
    radial-gradient(1px 1px at 8% 80%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 91% 28%, rgba(255,255,255,.8), transparent);
}
.wx-stars-c {
  background-image:
    radial-gradient(1.6px 1.6px at 33% 12%, rgba(255,255,255,.95), transparent),
    radial-gradient(0.8px 0.8px at 71% 41%, rgba(200, 220, 255, .8), transparent),
    radial-gradient(1px 1px at 15% 56%, rgba(255,255,255,.6), transparent),
    radial-gradient(0.7px 0.7px at 93% 73%, rgba(255,255,255,.5), transparent);
}
.wx-cloud {
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  opacity: 0;
  transition: opacity .9s ease;
  box-shadow: 28px 4px 18px 6px rgba(255,255,255,.12);
}
.wx-cloud::before, .wx-cloud::after {
  content: ''; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.wx-cloud-1 { width: 170px; height: 46px; top: 20%; left: calc(-4% + var(--wx-cloud-1-x, 0%)); }
.wx-cloud-1::before { width: 72px; height: 72px; top: -34px; left: 28px; }
.wx-cloud-1::after { width: 52px; height: 52px; top: -22px; left: 78px; }
.wx-cloud-2 { width: 210px; height: 52px; top: 34%; right: calc(-6% + var(--wx-cloud-2-x, 0%)); left: auto; }
.wx-cloud-2::before { width: 84px; height: 84px; top: -38px; left: 44px; }
.wx-cloud-2::after { width: 58px; height: 58px; top: -24px; left: 108px; }
.wx-cloud-3 { width: 150px; height: 40px; top: 52%; left: calc(22% + var(--wx-cloud-3-x, 0%)); }
.wx-cloud-3::before { width: 56px; height: 56px; top: -24px; left: 30px; }
.wx-cloud-3::after { width: 46px; height: 46px; top: -18px; left: 74px; }

.wx-sky--row .wx-cloud-1 { width: 90px; height: 28px; top: 18%; }
.wx-sky--row .wx-cloud-1::before { width: 36px; height: 36px; top: -16px; left: 14px; }
.wx-sky--row .wx-cloud-1::after { width: 28px; height: 28px; top: -10px; left: 40px; }
.wx-sky--row .wx-cloud-2 { width: 110px; height: 32px; top: 48%; }
.wx-sky--row .wx-cloud-2::before { width: 42px; height: 42px; top: -18px; left: 22px; }
.wx-sky--row .wx-cloud-2::after { width: 32px; height: 32px; top: -12px; left: 54px; }
.wx-sky--row .wx-cloud-3 { display: none; }
.wx-sky--row .wx-sun { box-shadow: 0 0 22px 8px rgba(255,210,100,.35); }

/* Mode visibility */
.wx-sky--day .wx-sun { opacity: 1; }
.wx-sky--night .wx-moon { opacity: 1; }
.wx-sky--night .wx-stars { opacity: .82; }
.wx-sky--night .wx-stars-b { opacity: .55; }
.wx-sky--day .wx-cloud { opacity: 0; }
.wx-sky--cloud .wx-cloud { opacity: var(--wx-cloud-op, 0.72); }
.wx-sky--cloud .wx-cloud-3 { opacity: 0; }
.wx-sky--cloud .wx-sun { opacity: 0.38; filter: brightness(0.96); }
.wx-sky--overcast .wx-cloud {
  opacity: 0.88;
  background: rgba(186, 198, 214, 0.42);
}
.wx-sky--overcast .wx-sun,
.wx-sky--overcast .wx-moon { opacity: 0 !important; }
.wx-sky--rain .wx-cloud,
.wx-sky--storm .wx-cloud,
.wx-sky--snow .wx-cloud { opacity: 0.9; }
.wx-sky--storm .wx-cloud {
  background: rgba(48, 42, 68, 0.5);
  top: 14%;
}
.wx-sky--storm .wx-cloud-1 {
  animation: wxCloudRumble calc(18s / var(--wx-cloud-drift, 1)) ease-in-out infinite alternate;
}
.wx-sky--storm .wx-cloud-2 {
  animation: wxCloudRumble calc(24s / var(--wx-cloud-drift, 1)) ease-in-out infinite alternate-reverse;
}
.wx-sky--storm .wx-cloud-3 {
  animation: wxCloudRumble calc(21s / var(--wx-cloud-drift, 1)) ease-in-out infinite alternate;
}
.wx-sky-flash .wx-cloud {
  opacity: 1;
}
@keyframes wxCloudRumble {
  from { transform: translate3d(0, 0, 0); }
  35% { transform: translate3d(3%, 1.4%, 0); }
  65% { transform: translate3d(1.2%, -0.8%, 0); }
  to { transform: translate3d(8%, 1.2%, 0); }
}
.wx-sky--night .wx-cloud { opacity: var(--wx-cloud-op, 0); }
.wx-sky--rain .wx-sun,
.wx-sky--storm .wx-sun,
.wx-sky--snow .wx-sun,
.wx-sky--fog .wx-sun,
.wx-sky--rain .wx-moon,
.wx-sky--storm .wx-moon,
.wx-sky--snow .wx-moon,
.wx-sky--fog .wx-moon {
  opacity: 0 !important;
  pointer-events: none;
}
.wx-sky--rain .wx-stars,
.wx-sky--storm .wx-stars,
.wx-sky--fog .wx-stars,
.wx-sky--overcast .wx-stars,
.wx-sky--snow .wx-stars { opacity: 0 !important; }

/* Rain — discrete drops (never full-width gradient tiles — those become scanlines) */
.wx-rain {
  position: absolute;
  inset: -40% -20%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    radial-gradient(1.05px 8px at 12% 18%, rgba(255,255,255,.5), transparent 72%),
    radial-gradient(0.9px 7px at 38% 42%, rgba(230,242,255,.38), transparent 72%),
    radial-gradient(1.15px 9px at 64% 8%, rgba(255,255,255,.44), transparent 72%),
    radial-gradient(0.95px 7.5px at 88% 55%, rgba(220,235,255,.34), transparent 72%),
    radial-gradient(0.85px 7px at 22% 72%, rgba(240,248,255,.32), transparent 72%),
    radial-gradient(1.1px 8.5px at 52% 28%, rgba(255,255,255,.46), transparent 72%),
    radial-gradient(0.9px 7px at 76% 80%, rgba(225,238,255,.3), transparent 72%),
    radial-gradient(1px 8px at 6% 48%, rgba(235,245,255,.4), transparent 72%);
  background-size:
    118px 155px,
    138px 175px,
    128px 165px,
    150px 190px,
    108px 148px,
    142px 180px,
    132px 170px,
    158px 198px;
  background-repeat: repeat;
  transform: skewX(var(--wx-rain-skew, -7deg));
  transition: opacity .4s ease;
}
.wx-rain-far {
  z-index: 1;
  opacity: 0;
  background-size:
    170px 210px,
    190px 235px,
    180px 220px,
    205px 250px,
    160px 200px,
    195px 240px,
    185px 225px,
    215px 260px;
}
.wx-rain-near {
  z-index: 3;
  opacity: 0;
  background-image:
    radial-gradient(1.2px 11px at 30% 20%, rgba(255,255,255,.52), transparent 70%),
    radial-gradient(1px 9px at 70% 48%, rgba(240,248,255,.4), transparent 70%),
    radial-gradient(1.25px 12px at 48% 78%, rgba(255,255,255,.46), transparent 70%),
    radial-gradient(0.95px 8px at 12% 60%, rgba(230,242,255,.34), transparent 70%);
  background-size: 200px 240px, 230px 270px, 215px 255px, 245px 285px;
}
.wx-sky--rain .wx-rain,
.wx-sky--storm .wx-rain {
  opacity: var(--wx-rain-opacity, 0.48);
  animation: wxRainFall var(--wx-rain-dur, 1.15s) linear infinite;
  will-change: transform;
}
.wx-sky--rain .wx-rain-far,
.wx-sky--storm .wx-rain-far {
  opacity: calc(var(--wx-rain-opacity, 0.48) * 0.4);
  animation-duration: calc(var(--wx-rain-dur, 1.15s) * 1.45);
}
.wx-sky--rain .wx-rain-near,
.wx-sky--storm .wx-rain-near {
  opacity: calc(var(--wx-rain-opacity, 0.48) * 0.55);
  animation-duration: calc(var(--wx-rain-dur, 1.15s) * 0.82);
}
.wx-sky--storm .wx-rain {
  opacity: calc(var(--wx-rain-opacity, 0.5) * 1.08);
  background-size:
    100px 138px,
    115px 155px,
    108px 145px,
    125px 168px,
    95px 132px,
    120px 160px,
    110px 150px,
    130px 175px;
}
@keyframes wxRainFall {
  from { transform: skewX(var(--wx-rain-skew, -7deg)) translate3d(0, -20%, 0); }
  to { transform: skewX(var(--wx-rain-skew, -7deg)) translate3d(3%, 20%, 0); }
}
[data-wx-intensity="heavy"] .wx-rain {
  opacity: calc(var(--wx-rain-opacity, 0.55) * 1.1);
  background-size:
    88px 122px,
    100px 138px,
    94px 128px,
    108px 148px,
    84px 118px,
    102px 140px,
    96px 132px,
    112px 152px;
}
[data-wx-intensity="light"] .wx-rain {
  opacity: calc(var(--wx-rain-opacity, 0.42) * 0.9);
  background-size:
    145px 190px,
    165px 210px,
    155px 200px,
    175px 225px,
    138px 182px,
    168px 215px,
    158px 205px,
    180px 230px;
}
.wx-rain-splash {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 12%;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  background-image:
    radial-gradient(1.2px 1.2px at 14% 40%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 36% 70%, rgba(230,242,255,.28), transparent),
    radial-gradient(1.3px 1.3px at 58% 35%, rgba(255,255,255,.3), transparent),
    radial-gradient(0.9px 0.9px at 82% 62%, rgba(220,235,255,.25), transparent);
  background-size: 120px 36px, 150px 40px, 135px 34px, 160px 42px;
}
.wx-sky--rain .wx-rain-splash,
.wx-sky--storm .wx-rain-splash {
  opacity: calc(var(--wx-rain-opacity, 0.42) * 0.4);
}

/* Snow — independent layers, drift + fall */
.wx-snow {
  position: absolute;
  inset: -20%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    radial-gradient(2px 2px at 12% 20%, rgba(255,255,255,.92), transparent),
    radial-gradient(1.4px 1.4px at 40% 55%, rgba(255,255,255,.7), transparent),
    radial-gradient(2.2px 2.2px at 68% 30%, rgba(255,255,255,.88), transparent),
    radial-gradient(1.2px 1.2px at 85% 70%, rgba(255,255,255,.62), transparent),
    radial-gradient(1.8px 1.8px at 25% 80%, rgba(255,255,255,.78), transparent),
    radial-gradient(1.3px 1.3px at 55% 10%, rgba(255,255,255,.7), transparent);
  background-size: 180px 180px, 220px 220px, 160px 160px, 240px 240px, 200px 200px, 170px 170px;
  transition: opacity .5s ease;
}
.wx-snow-far {
  z-index: 1;
  opacity: 0;
  background-size: 260px 260px, 300px 300px, 240px 240px, 320px 320px, 280px 280px, 250px 250px;
}
.wx-sky--snow .wx-snow {
  opacity: var(--wx-rain-opacity, 0.5);
  animation: wxSnowNear 14s linear infinite;
  will-change: transform;
}
.wx-sky--snow .wx-snow-far {
  opacity: calc(var(--wx-rain-opacity, 0.5) * 0.55);
  animation: wxSnowFar 20s linear infinite;
}
.wx-snow-haze {
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 38%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(230, 238, 248, 0.22));
}
.wx-sky--snow .wx-snow-haze { opacity: 0.7; }
@keyframes wxSnowNear {
  0% { transform: translate3d(0, -14%, 0); }
  22% { transform: translate3d(5%, -4%, 0); }
  48% { transform: translate3d(-7%, 8%, 0); }
  73% { transform: translate3d(4%, 16%, 0); }
  100% { transform: translate3d(-9%, 26%, 0); }
}
@keyframes wxSnowFar {
  0% { transform: translate3d(0, -12%, 0); }
  40% { transform: translate3d(-5%, 6%, 0); }
  100% { transform: translate3d(9%, 22%, 0); }
}

/* Fog */
.wx-fog {
  position: absolute;
  inset: 8% -15% 0;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, transparent 0%, rgba(220, 228, 236, 0.28) 38%, rgba(200, 210, 220, 0.4) 68%, rgba(190, 200, 212, 0.18) 100%);
}
.wx-fog-b {
  inset: 28% -20% -8%;
  background:
    linear-gradient(180deg, transparent, rgba(210, 218, 226, 0.35) 40%, rgba(186, 196, 208, 0.3) 100%);
}
.wx-sky--fog .wx-fog {
  opacity: var(--wx-fog-op, 1);
  background:
    linear-gradient(180deg, rgba(214, 222, 232, 0.2) 0%, rgba(198, 208, 220, 0.55) 42%, rgba(186, 196, 208, 0.38) 100%);
  animation: wxFogDrift 32s ease-in-out infinite alternate;
}
.wx-sky--fog .wx-fog-b {
  opacity: calc(var(--wx-fog-op, 1) * 0.92);
  animation: wxFogDrift 40s ease-in-out infinite alternate-reverse;
}
.wx-fog-c {
  inset: 42% -25% -12%;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(210, 218, 228, 0.4), transparent 60%),
    linear-gradient(180deg, transparent, rgba(196, 206, 216, 0.28));
}
.wx-sky--fog .wx-fog-c {
  opacity: calc(var(--wx-fog-op, 1) * 0.7);
  animation: wxFogDrift 26s ease-in-out infinite alternate;
}
@keyframes wxFogDrift {
  from { transform: translate3d(-6%, 0, 0) scale(1); }
  to { transform: translate3d(7%, 3%, 0) scale(1.06); }
}

/* Lightning — thin filament, upper sky only (does not cut through glass cards) */
.wx-lightning {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: min(38vh, 360px);
  bottom: auto;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
}
.wx-lightning::before,
.wx-lightning::after { content: none; display: none; }
.wx-lightning-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(ellipse 48% 70% at var(--wx-bolt-x, 42%) 6%,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(180, 210, 255, 0.16) 28%,
    transparent 62%);
}
.wx-lightning-bolt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.wx-bolt-glow,
.wx-bolt-core {
  vector-effect: non-scaling-stroke;
}
.wx-bolt-glow {
  stroke: rgba(186, 214, 255, 0.42);
  stroke-width: 2px;
}
.wx-bolt-core {
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 0.85px;
}
.wx-bolt-glow.wx-bolt-fork {
  stroke-width: 1.15px;
  stroke: rgba(186, 214, 255, 0.28);
}
.wx-bolt-core.wx-bolt-fork {
  stroke-width: 0.55px;
}
.wx-lightning.is-leader {
  opacity: 0.38;
}
.wx-lightning.is-leader .wx-lightning-flash { opacity: 0.12; }
.wx-lightning.is-leader .wx-bolt-core { stroke-width: 0.5px; opacity: 0.7; }
.wx-lightning.is-flash {
  opacity: 1;
}
.wx-lightning.is-flash .wx-lightning-flash { opacity: 1; }
.wx-lightning.is-flash .wx-bolt-core { stroke-width: 1.05px; }
.wx-lightning.is-flash-2 {
  opacity: 0.5;
}
.wx-lightning.is-flash-2 .wx-lightning-flash { opacity: 0.28; }

html[data-motion-effective="reduced"] .wx-rain,
html[data-motion-effective="reduced"] .wx-snow,
html[data-motion-effective="reduced"] .wx-fog,
html[data-motion-effective="reduced"] .wx-rain-splash,
html[data-motion-effective="reduced"] .wx-sun::after,
html[data-motion-effective="reduced"] .wx-sun::before {
  animation: none !important;
}
html[data-motion-effective="reduced"] .wx-sky--rain .wx-rain,
html[data-motion-effective="reduced"] .wx-sky--storm .wx-rain {
  opacity: calc(var(--wx-rain-opacity, 0.4) * 0.55);
}
html[data-motion-effective="reduced"] .wx-sky--snow .wx-snow {
  opacity: calc(var(--wx-rain-opacity, 0.5) * 0.55);
}
html[data-motion-effective="reduced"] .wx-lightning {
  display: none !important;
}
html[data-motion-effective="off"] .wx-rain,
html[data-motion-effective="off"] .wx-snow,
html[data-motion-effective="off"] .wx-snow-haze,
html[data-motion-effective="off"] .wx-fog,
html[data-motion-effective="off"] .wx-rain-splash,
html[data-motion-effective="off"] .wx-lightning {
  display: none !important;
}

.wx-cloud-1 { animation: wxCloudDrift1 calc(28s / var(--wx-cloud-drift, 1)) ease-in-out infinite alternate; }
.wx-cloud-2 { animation: wxCloudDrift2 calc(36s / var(--wx-cloud-drift, 1)) ease-in-out infinite alternate; }
.wx-cloud-3 { animation: wxCloudDrift1 calc(32s / var(--wx-cloud-drift, 1)) ease-in-out infinite alternate-reverse; }
.wx-sky--night .wx-stars { animation: wxTwinkleA 11s ease-in-out infinite alternate; }
.wx-sky--night .wx-stars-b { animation: wxTwinkleB 14s ease-in-out infinite alternate; }
.wx-sky--night .wx-stars-c { animation: wxTwinkleA 7.5s ease-in-out infinite alternate-reverse; opacity: .75; }
@keyframes wxCloudDrift1 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(8%, 3%, 0); }
}
@keyframes wxCloudDrift2 {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-7%, 2.5%, 0); }
}
@keyframes wxTwinkleA {
  from { opacity: .7; }
  to { opacity: .92; }
}
@keyframes wxTwinkleB {
  from { opacity: .35; }
  to { opacity: .7; }
}
html[data-motion-effective="reduced"] .wx-sun,
html[data-motion-effective="reduced"] .wx-moon,
html[data-motion-effective="reduced"] .wx-cloud,
html[data-motion-effective="reduced"] .wx-stars {
  animation: none !important;
}
html[data-motion-effective="off"] .wx-ornaments {
  display: none !important;
}
.weather-row::after {
  animation: none;
}

/* Sheet z-index is controlled by .open / :not(.open) above — do not force 10100 when closed */
.weather-detail-sky {
  z-index: 0 !important;
  opacity: 1 !important;
}
.weather-detail-sky .wx-layer-base {
  opacity: 1 !important;
}
.weather-detail-bar {
  z-index: 20 !important;
}
.weather-detail-bar #weatherDetailBack {
  width: 44px;
  min-width: 44px;
  min-height: 40px;
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}

/* ═══ Weather detail: stable fullscreen above site chrome ═══ */
html.weather-detail-open body.weather-detail-open .gallery-app-bar,
body.weather-detail-open .gallery-app-bar,
body.weather-detail-open .gallery-app-footer,
body.weather-detail-open .weather-page-sky,
body.weather-detail-open #navbar {
  visibility: hidden !important;
  pointer-events: none !important;
}
html.weather-detail-open,
body.weather-detail-open {
  overflow: hidden !important;
  background: var(--wx-sky-2, #0a1628) !important;
}
.weather-detail {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Prefer inset over 100vw — 100vw can exceed layout width and expose side gutters */
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 10050 !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--wx-sky-1, #1a4a7a) !important;
  background-image: linear-gradient(165deg, var(--wx-sky-1, #1a4a7a), var(--wx-sky-2, #0a1628)) !important;
  color: #fff !important;
  /* IMPORTANT: do not scroll this node — sky + rain live here and must stay full-bleed */
  overflow: hidden !important;
  overscroll-behavior: none !important;
  /* Closed defaults — opacity MUST NOT use !important (kills transitions) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* No scale — scale leaves theme “edges” on left/right of wide viewports */
  transform: none !important;
  box-shadow: none !important;
  /* Default = exit timing (fast). .open overrides for enter. */
  transition:
    opacity .16s ease-out,
    visibility 0s linear .16s;
}
.weather-detail.open {
  /* Never !important opacity — that blocked enter/exit animations */
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
  transform: none !important;
  transition:
    opacity .36s cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear 0s;
}
.weather-detail.is-closing {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
  transition:
    opacity .16s ease-out,
    visibility 0s linear .16s;
}
.weather-detail-sky {
  position: absolute !important;
  inset: -4px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
/* Scroll surface: restore iOS/macOS rubber-band bounce at ends */
.weather-detail-scroll {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: none;
  overscroll-behavior-y: auto; /* bounce restored */
  background: transparent !important;
  border-radius: 0 !important;
  /* Default none — only open detail enables interaction (avoids ghost layer over list) */
  pointer-events: none !important;
}
.weather-detail.open .weather-detail-scroll {
  pointer-events: auto !important;
}
/* Modules must always receive taps when detail is open */
.weather-detail.open .weather-modules,
.weather-detail.open .weather-mod,
.weather-detail.open .weather-mod *,
.weather-detail.open .weather-detail-bar,
.weather-detail.open .weather-detail-bar .weather-btn,
.weather-detail.open .weather-detail-hero,
.weather-detail.open .weather-detail-scroll {
  pointer-events: auto !important;
}
/* Decorative foot viz should not swallow taps from the parent button */
.weather-detail.open .weather-mod-foot,
.weather-detail.open .weather-mod-viz,
.weather-detail.open .weather-compass,
.weather-detail.open .weather-mod-foot * {
  pointer-events: none !important;
}
/* Tappable tiles are buttons — keep cursor honest */
.weather-detail.open button.weather-mod.is-tappable {
  cursor: pointer !important;
}
/* 10-day block is display-only (not a sheet) — do not look clickable */
.weather-detail.open .weather-mod-wide:not([data-sheet]):not(button) {
  cursor: default !important;
}
.weather-detail-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px !important;
  background: linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 70%, transparent) !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
  border-radius: 0 !important;
  box-sizing: border-box !important;
}
.weather-detail.open .weather-detail-bar {
  pointer-events: auto !important;
}
.weather-detail-bar .weather-btn,
.weather-detail-bar .weather-btn-pill {
  position: relative !important;
  z-index: 31 !important;
  pointer-events: none !important;
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.14) !important;
  color: #fff !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.weather-detail.open .weather-detail-bar .weather-btn,
.weather-detail.open .weather-detail-bar .weather-btn-pill {
  pointer-events: auto !important;
}
.weather-detail-bar #weatherDetailBack,
.weather-detail-bar .weather-btn-done {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  font-weight: 700 !important;
  min-width: 76px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.18) !important;
}
.weather-detail-bar #weatherDetailBack:hover,
.weather-detail-bar .weather-btn-done:hover {
  background: rgba(255,255,255,.32) !important;
}
.weather-detail-bar .weather-btn-icon {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}
.weather-detail-bar .weather-btn-icon[aria-pressed="true"] {
  color: #a7f0cf !important;
}
.weather-detail-hero,
.weather-modules {
  position: relative !important;
  z-index: 2 !important;
}
/* CRITICAL: sheet must sit ABOVE detail when open.
   Never force a single z-index on .weather-sheet that is lower than detail
   (that made sheets open invisibly under the detail → “unclickable cards”). */
.weather-sheet:not(.open) {
  z-index: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.weather-sheet.open {
  z-index: 10150 !important;
  pointer-events: auto !important;
  visibility: visible !important;
  isolation: isolate;
}
/* Sheet is a modal over city detail — hero/title must not steal taps
   (children with pointer-events:auto otherwise punch through a none parent). */
html:has(#weatherSheet.open) .weather-detail.open,
html:has(#weatherSheet.open) .weather-detail.open * {
  pointer-events: none !important;
}
html:has(#weatherSheet.open) .weather-sheet.open,
html:has(#weatherSheet.open) .weather-sheet-panel,
html:has(#weatherSheet.open) .weather-sheet-close,
html:has(#weatherSheet.open) .wx-sheet-dragzone,
html:has(#weatherSheet.open) .wx-sheet-surface {
  pointer-events: auto !important;
}
/* Phones: freeze covered sky FX while a sheet is up (compositor still otherwise). */
@media (max-width: 900px), (pointer: coarse) {
  html.wx-sheet-open #weatherDetailFx,
  html.wx-sheet-open #weatherDetailFx *,
  html.wx-sheet-open #weatherDetailSky .wx-ornaments,
  html.wx-sheet-open #weatherDetailSky .wx-ornaments *,
  html.wx-sheet-open #weatherDetailSky .wx-layer-a,
  html.wx-sheet-open #weatherDetailSky .wx-layer-b {
    animation-play-state: paused !important;
  }
}

/* Detail attribution footer (Apple “Weather for …”) */
.weather-detail-attrib {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin: 8px 0 4px;
  padding: 12px 8px max(8px, env(safe-area-inset-bottom));
  letter-spacing: 0.01em;
}
.wx-sun-mod-times {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.weather-chart-card,
.weather-chart-wrap {
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  padding: 12px 12px 8px;
  margin: 8px 0 4px;
  /* Prevent scrub / first-touch from expanding card width */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
  contain: layout;
}
.weather-chart-wrap .weather-chart {
  height: 168px;
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.wx-sheet-compass-row {
  max-width: 100%;
  overflow: hidden;
  margin: 8px 0;
}
.wx-sun-day-card { padding-bottom: 4px; }
.wx-sun-metrics {
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 4px;
}
.wx-sun-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
}
.wx-sun-metric:last-child { border-bottom: 0; }
.wx-sun-metric span { opacity: .75; }
.wx-sun-metric strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.weather-sun-arc--compact { height: 56px; margin-top: 4px; }

.weather-detail .wx-sun {
  filter: drop-shadow(0 0 24px rgba(255,210,100,.45));
}

/* ── AQI / metric bars (module previews + sheets) ── */
.wx-aqi-bar {
  position: relative;
  margin-top: 10px;
  height: 28px;
}
.wx-aqi-bar--compact { height: 22px; }
.wx-aqi-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 99px;
  background: linear-gradient(90deg, #34c759, #ffd60a 20%, #ff9f0a 40%, #ff453a 60%, #bf5af2 80%, #9b2335);
  opacity: .55;
  overflow: hidden;
}
.wx-aqi-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  opacity: 0; /* track already shows full scale; fill optional */
}
.wx-aqi-dot {
  position: absolute;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px; margin-left: -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}
.wx-aqi-scale {
  position: relative;
  margin-top: 14px;
  padding-bottom: 4px;
}
.wx-aqi-scale-track {
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  gap: 0;
}
.wx-aqi-seg { flex: 1; }
.wx-aqi-marker {
  position: absolute;
  top: -3px;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.3);
  border: 2px solid rgba(0,0,0,.15);
}
.wx-aqi-labels {
  position: relative;
  display: block;
  height: 14px;
  font-size: 10px;
  opacity: .65;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.wx-aqi-labels span { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; }
.wx-aqi-labels span.is-start { transform: none; }
.wx-aqi-labels span.is-end { transform: translateX(-100%); }
.wx-aqi-outlook { margin-top: 18px; }
.wx-aqi-outlook-status { display: flex; align-items: center; gap: 9px; margin: 8px 0 0; font-size: 14px; opacity: .7; }
.wx-aqi-outlook-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.wx-aqi-outlook-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(38px, 1fr));
  gap: 8px;
  min-width: 390px;
  margin: 0;
  padding: 4px 0 8px;
  list-style: none;
}
.wx-aqi-outlook-item {
  display: grid;
  grid-template-rows: auto auto 54px;
  justify-items: center;
  align-items: end;
  gap: 4px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.wx-aqi-outlook-time { font-size: 10px; white-space: nowrap; opacity: .68; }
.wx-aqi-outlook-value { font-size: 12px; font-weight: 650; }
.wx-aqi-outlook-track { display: flex; align-items: end; width: 12px; height: 50px; border-radius: 8px; background: rgba(128,144,160,.13); overflow: hidden; }
.wx-aqi-outlook-track > span { display: block; width: 100%; min-height: 4px; border-radius: 8px 8px 2px 2px; }
.wx-metric-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.16);
  margin-top: 10px;
  overflow: hidden;
}
.wx-metric-bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #5ac8fa, #0a84ff);
}

/* ── Apple-inspired info sheets ── */
.wx-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
/* Title lives in drag zone now — hide any stray head inside surface */
.wx-sheet-surface > .wx-sheet-head { display: none; }
.wx-sheet-icon {
  width: 36px; height: 36px;
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wx-sheet-icon .weather-mod-icon {
  width: 20px; height: 20px; opacity: 1;
}
.wx-sheet-title {
  margin: 0 !important;
  font-family: var(--ff-display);
  font-size: 1.35rem !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.wx-sheet-hero {
  margin: 4px 0 12px;
}
.wx-sheet-hero .weather-chart-readout {
  font-size: clamp(2.4rem, 10vw, 3.2rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.wx-sheet-sun-times {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.wx-sheet-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 4px;
}
.wx-sheet-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 12px 14px;
}
.wx-sheet-stat-lab {
  display: block;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: 4px;
}
.wx-sheet-stat-val {
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 500;
}
.wx-sheet-aqi-description {
  margin-top: 14px !important;
  margin-bottom: 10px !important;
  line-height: 1.45;
}
.wx-air-detail {
  margin-top: 16px;
}
.wx-air-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
}
.wx-air-main-label,
.wx-air-list-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
  opacity: .68;
}
.wx-air-main strong {
  font-size: 14px;
  font-weight: 650;
}
.wx-air-main-score {
  color: var(--wx-aqi-color, currentColor);
  font-family: var(--ff-display);
  font-size: 1.15rem;
  font-weight: 650;
}
.wx-air-list-title {
  margin: 17px 0 8px;
}
.wx-air-list {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
}
.wx-air-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.wx-air-row:last-child { border-bottom: 0; }
.wx-air-name {
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}
.wx-air-amount {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  text-align: right;
  opacity: .9;
}
.wx-air-contribution {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--wx-air-color, currentColor);
  font-size: 12px;
}
.wx-air-contribution span { opacity: .72; }
.wx-air-contribution strong {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
}
.wx-air-contribution.is-elevated strong {
  text-shadow: 0 0 10px color-mix(in srgb, var(--wx-air-color) 48%, transparent);
}
.wx-aqi-readout { color: var(--wx-aqi-color, currentColor); }
.weather-sheet.wx-sheet-light .wx-aqi-readout,
.weather-sheet.wx-sheet-light .wx-air-main-score,
.weather-sheet.wx-sheet-light .wx-air-contribution strong {
  color: var(--wx-aqi-light, #40556a) !important;
  text-shadow: none;
}
.wx-sheet-about {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.wx-sheet-about-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: .72;
}
.wx-sheet-about p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: rgba(255,255,255,.82) !important;
}

/* Light sky themes — readable chrome on pale gradients */
body.weather-sky-light .weather-btn-pill:not(.weather-btn-done),
body.weather-sky-light .weather-btn-label {
  color: #1d1d1f !important;
  border-color: rgba(0,0,0,.14) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
body.weather-sky-light .weather-btn-pill:not(.weather-btn-done):hover,
body.weather-sky-light .weather-btn-label:hover {
  background: rgba(255,255,255,.95) !important;
  color: #1d1d1f !important;
}
body.weather-sky-light .weather-search {
  color: #1d1d1f !important;
  border-color: rgba(0,0,0,.12) !important;
  background: rgba(255,255,255,.82) !important;
}
body.weather-sky-light .weather-search::placeholder { color: rgba(0,0,0,.48) !important; }
body.weather-sky-light .weather-search-icon { color: rgba(0,0,0,.5) !important; }
/* Weather canvas stays atmospheric (dark rows / night sky). Do not switch
   in-canvas labels to dark ink just because OS appearance is light. */
body.weather-sky-light .weather-section-label {
  color: rgba(234, 243, 255, 0.78) !important;
  letter-spacing: 0.05em;
}
body.weather-sky-light .weather-updated {
  color: rgba(234, 243, 255, 0.7) !important;
}
body.weather-sky-light .weather-attribution {
  color: rgba(234, 243, 255, 0.55) !important;
}
body.weather-sky-light .gallery-app-bar {
  background: color-mix(in srgb, #f5f5f7 78%, transparent) !important;
  color: #1d1d1f;
}
body.weather-sky-light .gallery-app-title,
body.weather-sky-light .gallery-app-back,
body.weather-sky-light .gallery-app-back-label {
  color: #1d1d1f !important;
}
body.weather-sky-light .gallery-app-back {
  background: rgba(255,255,255,.75) !important;
  border-color: rgba(0,0,0,.1) !important;
}
body.weather-sky-light .weather-row-city,
body.weather-sky-light .weather-row-temp {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
body.weather-sky-light .weather-row-meta,
body.weather-sky-light .weather-row-hl,
body.weather-sky-light .weather-row-cond {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
}
body.weather-sky-light .weather-load-card {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12) !important;
}
body.weather-sky-light .weather-load-status {
  color: #1d1d1f !important;
}
body.weather-sky-light .weather-load-status #weatherLoadLabel,
body.weather-sky-light .weather-load-card #weatherLoadLabel {
  color: #1d1d1f !important;
}
/* Percentage was stuck on pale white — force high-contrast */
body.weather-sky-light .weather-load-pct,
body.weather-sky-light #weatherLoadPct {
  color: #0071e3 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
body.weather-sky-light .weather-load-hint,
body.weather-sky-light #weatherLoadHint {
  color: rgba(0, 0, 0, 0.55) !important;
}
body.weather-sky-light .weather-load-track {
  background: rgba(0, 0, 0, 0.1) !important;
}
body.weather-sky-light .weather-detail.wx-mods-light .loader {
  --color-1: rgba(22, 52, 79, 0.16);
  --color-2: #16344f;
}
/* Page sky: animate only when Full motion; otherwise static wash */
html[data-motion-effective="reduced"] body.page-tools:has(.weather-root) .weather-page-sky,
html[data-motion-effective="off"] body.page-tools:has(.weather-root) .weather-page-sky {
  animation: none !important;
  filter: none !important;
}
html[data-motion-effective="reduced"] body.page-tools:has(.weather-root) .weather-page-sky::before,
html[data-motion-effective="off"] body.page-tools:has(.weather-root) .weather-page-sky::before,
html[data-motion-effective="reduced"] body.page-tools:has(.weather-root) .weather-page-sky::after,
html[data-motion-effective="off"] body.page-tools:has(.weather-root) .weather-page-sky::after,
html[data-motion-effective="reduced"] body.page-tools:has(.weather-root) .wx-page-live *,
html[data-motion-effective="off"] body.page-tools:has(.weather-root) .wx-page-live * {
  animation: none !important;
  will-change: auto !important;
  transform: none !important;
}

/* Sun module: compact clock on 1×1 tiles; path + stats grow with card width. */
.weather-mod[data-sheet="sun"] {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  container-name: wx-sun;
}
.wx-sun-tile {
  width: 100%;
  min-width: 0;
}
.wx-sun-tile-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.wx-sun-tile-compact .weather-mod-value {
  margin: 0;
}
.wx-sun-tile-compact .weather-mod-sub {
  margin-top: 6px;
}
.wx-sun-tile-wide {
  display: none;
}
.wx-sun-tile-hero {
  text-align: left;
  min-width: 0;
}
.wx-sun-mod-hero-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}
.wx-sun-mod-hero-time {
  font-family: var(--ff-display);
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.wx-sun-tile-remain {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.78;
  line-height: 1.3;
}
.wx-sun-tile-stats {
  display: none;
}
.wx-sun-tile-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.wx-sun-tile-stat span {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.62;
}
.wx-sun-tile-stat strong {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wx-sun-tile-stat--extra { display: none; }
.weather-sun-arc--tile,
.weather-sun-arc--compact {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
/* Phone full-row (~360px): clock + path, no empty band. */
@container wx-sun (min-width: 300px) {
  .weather-mod-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .wx-sun-tile-compact {
    display: none;
  }
  .wx-sun-tile-wide {
    display: grid;
    grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1.6fr);
    column-gap: 16px;
    align-items: center;
    min-height: 108px;
  }
  .wx-sun-mod-hero-time { font-size: clamp(1.55rem, 5.5vw, 1.95rem); }
  .weather-sun-arc--tile { height: 72px; }
}
/* Tablet / 2-col wide: add the 6-stat grid. */
@container wx-sun (min-width: 520px) {
  .wx-sun-tile-wide {
    grid-template-columns: minmax(132px, 0.85fr) minmax(160px, 1.5fr) minmax(140px, 1fr);
    column-gap: 20px;
    min-height: 0;
  }
  .wx-sun-mod-hero-time { font-size: clamp(1.65rem, 2.4vw, 2.05rem); }
  .weather-sun-arc--tile { height: 84px; }
  .wx-sun-tile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin: 0;
  }
}
/* Desktop full-row: large path + stats as a strip so the card is filled. */
@container wx-sun (min-width: 720px) {
  .wx-sun-tile-wide {
    grid-template-columns: minmax(200px, 0.7fr) minmax(0, 1.9fr);
    grid-template-rows: auto auto;
    column-gap: 22px;
    row-gap: 6px;
    min-height: 0;
    align-items: center;
  }
  .wx-sun-tile-hero { grid-column: 1; grid-row: 1; }
  .weather-sun-arc--tile {
    grid-column: 2;
    grid-row: 1;
    height: 88px;
  }
  .wx-sun-tile-stats {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px 16px;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--wx-mod-ink, #fff) 14%, transparent);
  }
  .wx-sun-mod-hero-time { font-size: clamp(1.85rem, 2.6vw, 2.35rem); }
  .wx-sun-tile-stat strong { font-size: 13px; }
}
@container wx-sun (min-width: 980px) {
  .wx-sun-tile-stats {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .wx-sun-tile-stat--extra { display: flex; }
  .weather-sun-arc--tile { height: 96px; }
}

html[data-theme="glass"] .weather-page-sky {
  background: linear-gradient(165deg,
    var(--wx-page-1, #000) 0%,
    var(--wx-page-2, #0a3a68) 50%,
    var(--wx-page-3, #000) 100%) !important;
}

/* Module value + foot viz spacing (Apple UV tile pattern) */
.weather-mod-foot .wx-aqi-bar,
.weather-mod-foot .wx-metric-bar,
.weather-mod-foot .weather-mod-viz {
  margin-top: 0;
}
/* Wind: large compass sits to the right of value/sub (not a tiny corner icon) */
.weather-mod:has(.weather-compass--mini) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  align-items: start;
}
.weather-mod:has(.weather-compass--mini) .weather-mod-label {
  grid-column: 1 / -1;
}
.weather-mod:has(.weather-compass--mini) .weather-mod-value {
  grid-column: 1;
  grid-row: 2;
}
.weather-mod:has(.weather-compass--mini) .weather-mod-sub {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
}
.weather-mod:has(.weather-compass--mini) .weather-mod-foot {
  grid-column: 2;
  grid-row: 2 / span 2;
  margin-top: 0;
  padding-top: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
}
.weather-mod-foot .weather-compass--mini {
  margin-left: 0;
  margin-right: 0;
}
.weather-mod .weather-sun-arc {
  height: auto;
  min-height: 0;
  margin-top: 0;
}
.wx-sun-tile-compact .weather-sun-arc--compact {
  height: 52px;
  margin-top: 8px;
}
/* Chart axis labels (SVG .wx-chart-axis) */
.weather-chart text.wx-chart-axis {
  fill: var(--wx-chart-axis, rgba(255, 255, 255, 0.5));
  font-variant-numeric: tabular-nums;
  paint-order: stroke fill;
  stroke: var(--wx-chart-axis-halo, rgba(10, 16, 28, 0.58));
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

/* Apple-style weather charts — full sheet width, tall plot, 1:1 scrub mapping */
.weather-chart-card,
.weather-chart-wrap {
  background: transparent !important;
  border: none !important;
  padding: 2px 0 6px !important;
  margin: 2px 0 10px !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  min-width: 0 !important;
}
.wx-sheet-surface .weather-chart-wrap {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.weather-chart-wrap .weather-chart-readout {
  font-family: var(--ff-display);
  font-size: clamp(2.75rem, 12vw, 3.6rem) !important;
  font-weight: 300 !important;
  letter-spacing: -0.03em;
  line-height: 1.05;
  min-height: 1.1em;
  margin: 0 0 2px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
}
html[data-motion-effective="reduced"] .wx-units-pill,
html[data-motion-effective="off"] .wx-units-pill {
  transition: none !important;
}
.weather-chart-wrap .weather-chart-sub {
  font-size: 13px;
  opacity: .72;
  margin-bottom: 8px !important;
  min-height: 1.35em;
}
.weather-chart {
  width: 100% !important;
  /* Fixed plot height so mobile chrome / scrubbing cannot resize the sheet. */
  aspect-ratio: 400 / 200;
  height: 200px !important;
  min-height: 200px;
  max-height: 200px;
  display: block;
  touch-action: pan-y;
  cursor: default;
  overflow: visible;
}
.weather-chart-wrap[data-pts] .weather-chart {
  cursor: ew-resize;
}
.weather-chart.weather-sun-day {
  aspect-ratio: 340 / 190;
  height: auto !important;
  min-height: 0;
  max-height: none;
  cursor: default;
  pointer-events: none;
}
.weather-chart [data-hit] {
  cursor: ew-resize;
}
.weather-chart [data-guide],
.weather-chart [data-dot] {
  transition: none !important;
}
/* Units row under charts — compact, not stealing vertical space from the plot */
.wx-sheet-surface .weather-units-row {
  position: relative;
  margin: 8px 0 14px !important;
  gap: 3px !important;
  display: inline-flex;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
  padding: 3px;
  min-height: 38px;
  box-sizing: border-box;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
.wx-units-pill {
  position: absolute;
  top: 3px;
  height: calc(100% - 6px);
  left: 0;
  width: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  z-index: 0;
  transition: left 0.4s cubic-bezier(0.65, 0, 0.35, 1),
              width 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.wx-sheet-surface .weather-units-row button {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent !important;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}
.wx-sheet-surface .weather-units-row button.active {
  background: transparent !important;
  border-color: transparent;
}
.wx-sheet-surface .wx-sheet-about {
  margin-top: 12px !important;
}
.wx-sheet-context {
  margin: 0 0 4px;
  font-size: 14px;
  opacity: .78;
}
.wx-day-mode button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.wx-day-condition {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: inherit;
  font-weight: 600;
}
.wx-day-condition svg { width: 22px; height: 22px; flex: 0 0 auto; }
.wx-day-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 18px;
}
.wx-day-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  min-width: 0;
}
.wx-day-fact > span { min-width: 0; font-size: 11px; line-height: 1.25; opacity: .72; }
.wx-day-fact strong { font: 600 17px/1.1 var(--ff-display); font-variant-numeric: tabular-nums; text-align: right; }
.wx-day-fact small { grid-column: 1 / -1; justify-self: end; margin-top: 4px; font-size: 11px; opacity: .66; }
.wx-day-mode {
  display: flex;
  gap: 4px;
  width: 100%;
  padding: 4px;
  margin: 0 0 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.09);
}
.wx-day-mode button {
  flex: 1 1 0;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: 600 13px/1.2 var(--ff-body);
  cursor: pointer;
}
.wx-day-mode button.active { background: rgba(255,255,255,.22); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.wx-day-chart-label { margin: 14px 0 2px; }
.wx-day-about { margin-top: 8px; }
.weather-sheet.wx-sheet-light .wx-day-fact { border-color: rgba(22,52,79,.1); background: rgba(22,52,79,.035); }
.weather-sheet.wx-sheet-light .wx-day-mode { background: rgba(22,52,79,.08); }
.weather-sheet.wx-sheet-light .wx-day-mode button.active { background: rgba(22,52,79,.12); }
.wx-sheet-compass-row {
  margin: 10px 0 6px;
  opacity: .9;
}
.wx-sheet-compass-row .weather-compass {
  margin: 6px auto;
}
.weather-sheet-panel {
  background: linear-gradient(180deg, rgba(28, 34, 48, 0.94), rgba(12, 16, 26, 0.97)) !important;
}
.weather-sheet-panel .wx-sheet-title {
  font-size: 1.22rem !important;
  font-weight: 650;
  letter-spacing: -0.03em;
  opacity: .98;
}

/* Desktop: centered card — fade/scale in place, never slide from the bottom. */
@media (min-width: 720px) {
  .weather-sheet {
    align-items: center;
    justify-content: center;
    padding: 28px 20px !important;
  }
  .weather-sheet.open {
    background: rgba(0, 0, 0, calc(0.58 * var(--wx-sheet-backdrop, 1))) !important;
  }
  .weather-sheet-panel {
    width: min(540px, 92vw) !important;
    max-width: 540px;
    max-height: min(86svh, 720px);
    border-radius: 26px !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    transform: scale(0.96);
    opacity: 0;
    transition:
      transform .34s cubic-bezier(0.22, 1, 0.36, 1),
      opacity .28s ease;
    box-shadow:
      0 28px 80px rgba(0, 0, 0, 0.42),
      0 2px 8px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  .weather-sheet.open:not(.is-leaving) .weather-sheet-panel {
    transform: scale(1);
    opacity: 1;
  }
  .weather-sheet.open.is-leaving .weather-sheet-panel {
    transform: scale(0.96);
    opacity: 0;
  }
  .wx-sheet-grab {
    display: none;
  }
  .wx-sheet-dragzone {
    padding-top: 20px;
    padding-bottom: 12px;
  }
  .wx-sheet-surface {
    padding-left: 22px;
    padding-right: 22px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* Day-sky sheet: frosted white glass to match the tiles. */
.weather-sheet.wx-sheet-light .weather-sheet-panel {
  --wx-sheet-ink: #16344f;
  --wx-sheet-muted: #3f5d75;
  --wx-sheet-line: rgba(22, 52, 79, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(236, 243, 252, 0.9)) !important;
  border-color: rgba(255, 255, 255, 0.7);
  color: #16344f;
  box-shadow:
    0 24px 64px rgba(18, 42, 72, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.wx-share-link {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  border: 1px solid var(--wx-sheet-line);
  border-radius: 12px;
  background: rgba(255,255,255,.1);
  color: var(--wx-sheet-ink);
  font: 500 14px/1.4 var(--ff-body);
}
.weather-sheet.wx-sheet-light .wx-share-link { background: rgba(22,52,79,.06); }
.weather-sheet.wx-sheet-light .wx-sheet-grab::after {
  background: rgba(22, 52, 79, 0.28);
}
.weather-sheet.wx-sheet-light .weather-sheet-close {
  background: rgba(22, 52, 79, 0.1);
  color: #16344f;
}
.weather-sheet.wx-sheet-light .weather-sheet-close:hover {
  background: rgba(22, 52, 79, 0.16);
  color: #16344f;
}
.weather-sheet.wx-sheet-light .wx-sheet-title,
.weather-sheet.wx-sheet-light .wx-sheet-head,
.weather-sheet.wx-sheet-light .weather-chart-readout:not(.wx-aqi-readout),
.weather-sheet.wx-sheet-light .weather-chart-sub,
.weather-sheet.wx-sheet-light .wx-sheet-context,
.weather-sheet.wx-sheet-light .wx-sheet-about-title,
.weather-sheet.wx-sheet-light .wx-sheet-about p,
.weather-sheet.wx-sheet-light .wx-sun-metric,
.weather-sheet.wx-sheet-light .wx-sun-metric strong,
.weather-sheet.wx-sheet-light .wx-sheet-stat-val,
.weather-sheet.wx-sheet-light .weather-mod-label {
  color: #16344f !important;
  text-shadow: none !important;
}
.weather-sheet.wx-sheet-light .weather-chart-sub,
.weather-sheet.wx-sheet-light .wx-sheet-context,
.weather-sheet.wx-sheet-light .wx-sheet-about p,
.weather-sheet.wx-sheet-light .wx-sheet-stat-lab,
.weather-sheet.wx-sheet-light .wx-sun-metric span {
  color: #3f5d75 !important;
}
.weather-sheet.wx-sheet-light .wx-sheet-icon {
  background: rgba(22, 52, 79, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.weather-sheet.wx-sheet-light .wx-sheet-about {
  border-top-color: rgba(22, 52, 79, 0.12);
}
.weather-sheet.wx-sheet-light .wx-sun-metric {
  border-bottom-color: rgba(22, 52, 79, 0.1);
}
.weather-sheet.wx-sheet-light .wx-sheet-stat {
  background: rgba(22, 52, 79, 0.05);
  border-color: rgba(22, 52, 79, 0.08);
}
.weather-sheet.wx-sheet-light .wx-air-main,
.weather-sheet.wx-sheet-light .wx-air-list {
  border-color: rgba(22, 52, 79, .13);
}
.weather-sheet.wx-sheet-light .wx-air-main,
.weather-sheet.wx-sheet-light .wx-air-row {
  background: rgba(22, 52, 79, .035);
}
.weather-sheet.wx-sheet-light .wx-air-row {
  border-bottom-color: rgba(22, 52, 79, .1);
}
.weather-sheet.wx-sheet-light .wx-air-main-label,
.weather-sheet.wx-sheet-light .wx-air-list-title,
.weather-sheet.wx-sheet-light .wx-air-name,
.weather-sheet.wx-sheet-light .wx-air-amount,
.weather-sheet.wx-sheet-light .wx-air-contribution span {
  color: #16344f;
}
.weather-sheet.wx-sheet-light .wx-sheet-surface .weather-units-row {
  background: rgba(22, 52, 79, 0.08);
}
.weather-sheet.wx-sheet-light .wx-units-pill {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 4px rgba(18, 42, 72, 0.1);
}
.weather-sheet.wx-sheet-light .wx-sheet-surface .weather-units-row button {
  color: #16344f;
  background: transparent !important;
}
.weather-sheet.wx-sheet-light .wx-sheet-surface .weather-units-row button.active {
  background: transparent !important;
  color: #16344f;
  box-shadow: none;
}
.weather-sheet.wx-sheet-light .weather-sheet-panel {
  --wx-chart-line: #16344f;
  --wx-chart-past: rgba(22, 52, 79, 0.42);
  --wx-chart-grid: rgba(22, 52, 79, 0.14);
  --wx-chart-guide: rgba(22, 52, 79, 0.55);
  --wx-chart-dot: #16344f;
  --wx-chart-dot-ring: rgba(22, 52, 79, 0.28);
  --wx-chart-axis: #16344f;
  --wx-chart-axis-halo: rgba(255, 255, 255, 0.92);
  --wx-chart-fill-top: #16344f;
  --wx-chart-fill-mid: #4d7ea8;
}
.weather-sheet.wx-sheet-light .weather-sheet-panel p {
  color: rgba(22, 52, 79, 0.78);
}
.weather-sheet.wx-sheet-light .weather-compass {
  background:
    radial-gradient(circle at 50% 50%, rgba(22, 52, 79, 0.06) 0 38%, transparent 39%),
    rgba(22, 52, 79, 0.05);
  border-color: rgba(22, 52, 79, 0.22);
}
.weather-sheet.wx-sheet-light .wx-compass-ring { border-color: rgba(22, 52, 79, 0.2); }
.weather-sheet.wx-sheet-light .wx-compass-tick { color: rgba(22, 52, 79, 0.58); }
.weather-sheet.wx-sheet-light .wx-compass-arrow-shaft {
  background: linear-gradient(180deg, #16344f, rgba(22, 52, 79, 0.35));
}
.weather-sheet.wx-sheet-light .wx-compass-arrow-head {
  border-bottom-color: #16344f;
  filter: none;
}
.weather-sheet.wx-sheet-light .wx-compass-hub {
  background: #16344f;
  box-shadow: 0 0 0 2px rgba(22, 52, 79, 0.2);
}
.weather-chart .wx-chart-grid { stroke: var(--wx-chart-grid, rgba(255,255,255,.12)); }
.weather-chart .wx-chart-past { stroke: var(--wx-chart-past, rgba(255,255,255,.42)); }
.weather-chart .wx-chart-future { stroke: var(--wx-chart-line, rgba(255,255,255,.95)); }
.weather-chart .wx-chart-guide { stroke: var(--wx-chart-guide, rgba(255,255,255,.7)); }
.weather-chart .wx-chart-dot {
  fill: var(--wx-chart-dot, #fff);
  stroke: var(--wx-chart-dot-ring, rgba(255,255,255,.4));
}
.weather-chart .wx-chart-fill-a { stop-color: var(--wx-chart-fill-top, #ffffff); }
.weather-chart .wx-chart-fill-b { stop-color: var(--wx-chart-fill-mid, #7ec8ff); }
.weather-sun-day .wx-sun-area { fill: url(#wxSunDayFill); }
.weather-sun-day .wx-sun-line { stroke: #f4f7fb; }
.weather-sun-day .wx-sun-horizon { stroke: rgba(255,255,255,.27); }
.weather-sun-day .wx-sun-axis { fill: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.weather-sun-day .wx-sun-halo { fill: url(#wxSunNowGlow); }
.weather-sun-day .wx-sun-now {
  fill: #fff;
  stroke: #e2b84d;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.7));
}
.weather-sheet.wx-sheet-light .weather-sun-day .wx-sun-line { stroke: #16344f; }
.weather-sheet.wx-sheet-light .weather-sun-day .wx-sun-horizon { stroke: rgba(22, 52, 79, 0.24); }
.weather-sheet.wx-sheet-light .weather-sun-day .wx-sun-axis { fill: rgba(22, 52, 79, 0.66); }
.weather-sheet.wx-sheet-light .weather-sun-day .wx-sun-now {
  fill: #fffdf6;
  stroke: #bd8b22;
  filter: drop-shadow(0 0 3px rgba(22, 52, 79, 0.25));
}
html[data-motion-effective="off"] .weather-sheet-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #1a2232 !important;
}
html[data-motion-effective="off"] .weather-sheet.wx-sheet-light .weather-sheet-panel {
  background: #eef3f9 !important;
}

/* Mode switch and greeting above the city search. */
.weather-greeting-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  margin: 2px 0 16px;
}
.weather-greeting-title {
  position: relative;
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 4vw, 2.35rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.16;
}
.weather-greeting-text {
  display: block;
  white-space: normal;
}
.weather-greeting-title[data-font-preparing="true"] .weather-greeting-text { visibility: hidden; }
.weather-greeting-sizer { position: absolute; visibility: hidden; pointer-events: none; }
.weather-typewriter-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  color: transparent;
  text-shadow: none;
}
.weather-typewriter-word::before {
  content: attr(data-text);
  position: absolute;
  inset: 0 auto auto 0;
  color: var(--wx-typewriter-ink, currentColor);
  text-shadow: var(--wx-typewriter-shadow, none);
  white-space: nowrap;
  clip-path: var(--wx-typewriter-clip, inset(0 100% 0 0));
  pointer-events: none;
}
.weather-greeting-title[data-typing="true"]::after {
  content: '';
  position: absolute;
  left: var(--wx-greeting-caret-x, 0px);
  top: var(--wx-greeting-caret-y, 0px);
  width: .075em;
  height: .82em;
  background: currentColor;
  animation: wx-greeting-caret 1s steps(2, jump-none) infinite;
}
@keyframes wx-greeting-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .weather-greeting-title[data-typing="true"]::after { animation: none; }
}
.weather-greeting-place {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: 500 12px/1.3 var(--ff-body);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 3px;
  cursor: pointer;
}
.weather-greeting-place:hover,
.weather-greeting-place:focus-visible { color: #fff; }
.weather-greeting-place[hidden] { display: none; }
.weather-my-sky-empty {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}
.weather-attribution-air { margin-top: 4px; }
.weather-attribution a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 2px;
}
.weather-attribution a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.weather-my-sky-empty[hidden] { display: none; }
.weather-my-sky-empty-mark {
  color: #ffdc91;
  font-size: 28px;
  line-height: 1;
}
.weather-my-sky-empty p {
  max-width: 28em;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--ff-display);
  font-size: 1.1rem;
  line-height: 1.45;
}
.weather-my-sky-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
body.weather-sky-light .weather-greeting-title { color: #16344f; }
body.weather-sky-light .weather-greeting-place { color: rgba(22, 52, 79, 0.7); text-decoration-color: rgba(22, 52, 79, 0.3); }
body.weather-sky-light .weather-greeting-place:hover,
body.weather-sky-light .weather-greeting-place:focus-visible { color: #16344f; }
.weather-ui-icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex: none; }
.wx-sheet-icon > svg { width: 20px; height: 20px; }
.weather-greeting-source-list { display: grid; gap: 8px; margin: 12px 0 2px; }
.weather-greeting-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  color: #fff;
  text-align: start;
  font: inherit;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .15s ease;
}
.weather-greeting-source:hover { background: rgba(255, 255, 255, .1); }
.weather-greeting-source:active { transform: scale(.99); }
.weather-greeting-source:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.weather-greeting-source.active {
  border-color: rgba(142, 205, 255, .56);
  background: rgba(85, 159, 222, .16);
}
.weather-greeting-source-copy { display: grid; gap: 3px; min-width: 0; }
.weather-greeting-source-name { overflow: hidden; font-size: 15px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.weather-greeting-source-meta { overflow: hidden; color: rgba(255, 255, 255, .62); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.weather-greeting-source-check { width: 20px; flex: none; color: #a7d8ff; font-size: 18px; font-weight: 700; text-align: center; }
.weather-greeting-source-empty { margin: 10px 0 14px; color: rgba(255, 255, 255, .76); font-size: 14px; line-height: 1.5; }
.weather-greeting-source-search {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #a7d8ff;
  font: 600 13px/1.3 var(--ff-body);
  text-align: center;
  cursor: pointer;
}
.weather-greeting-source-search:hover,
.weather-greeting-source-search:focus-visible { background: rgba(255, 255, 255, .07); outline-offset: 2px; }
.weather-sheet.wx-sheet-light .weather-greeting-source {
  border-color: rgba(22, 52, 79, .12);
  background: rgba(22, 52, 79, .035);
  color: #16344f;
}
.weather-sheet.wx-sheet-light .weather-greeting-source:hover { background: rgba(22, 52, 79, .07); }
.weather-sheet.wx-sheet-light .weather-greeting-source.active {
  border-color: rgba(43, 113, 168, .38);
  background: rgba(72, 145, 203, .12);
}
.weather-sheet.wx-sheet-light .weather-greeting-source-meta { color: rgba(22, 52, 79, .62); }
.weather-sheet.wx-sheet-light .weather-greeting-source-check { color: #286a9d; }
.weather-sheet.wx-sheet-light .weather-greeting-source-empty { color: rgba(22, 52, 79, .76); }
.weather-sheet.wx-sheet-light .weather-greeting-source-search { color: #286a9d; }
.weather-sheet.wx-sheet-light .weather-greeting-source-search:hover,
.weather-sheet.wx-sheet-light .weather-greeting-source-search:focus-visible { background: rgba(22, 52, 79, .06); }

/* Keep rain/ornaments covering full sky host while detail content scrolls */
.weather-detail-sky .wx-ornaments,
.weather-detail .wx-ornaments {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   Weather MAIN LIST only: static visuals (performance)
   City detail (#weatherDetail / .weather-detail-sky) keeps full animated FX.
   ═══════════════════════════════════════════════════════════════════ */
/* Page canvas: still gradient + one slow cloud. No hue-filter / blob stack. */
body.page-tools:has(.weather-root) .weather-page-sky,
body.page-tools:has(.weather-root) .weather-page-sky::before,
body.page-tools:has(.weather-root) .weather-page-sky::after,
body.page-tools:has(.weather-root) .weather-page-sky .wx-page-glow {
  animation: none !important;
  will-change: auto !important;
}
body.page-tools:has(.weather-root) .weather-page-sky::before,
body.page-tools:has(.weather-root) .weather-page-sky::after {
  transform: none !important;
}
/* City list cards — static gradients, no particle rain/snow/lightning */
body.page-tools:has(.weather-root) .weather-row,
body.page-tools:has(.weather-root) .weather-row.wx-sky--row,
body.page-tools:has(.weather-root) .weather-row .wx-ornament,
body.page-tools:has(.weather-root) .weather-row .wx-cloud,
body.page-tools:has(.weather-root) .weather-row .wx-sun,
body.page-tools:has(.weather-root) .weather-row .wx-moon,
body.page-tools:has(.weather-root) .weather-row .wx-stars {
  animation: none !important;
  will-change: auto !important;
}
body.page-tools:has(.weather-root) .weather-row .wx-rain,
body.page-tools:has(.weather-root) .weather-row .wx-snow,
body.page-tools:has(.weather-root) .weather-row .wx-snow-haze,
body.page-tools:has(.weather-root) .weather-row .wx-fog,
body.page-tools:has(.weather-root) .weather-row .wx-rain-splash,
body.page-tools:has(.weather-root) .weather-row .wx-lightning {
  opacity: 0 !important;
  display: none !important;
  animation: none !important;
}
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail .wx-rain,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail-sky .wx-rain,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail .wx-snow,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail-sky .wx-snow,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail .wx-snow-haze,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail-sky .wx-snow-haze,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail .wx-fog,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail-sky .wx-fog,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail .wx-rain-splash,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail-sky .wx-rain-splash,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail .wx-lightning,
html:not([data-motion-effective="off"]) body.page-tools:has(.weather-root) .weather-detail-sky .wx-lightning {
  display: block;
}