/* Toolbar and mode-control contracts, consolidated from the layered cascade. */
.weather-mode-switch[aria-busy="true"] {
  cursor: progress;
}
.weather-toolbar {
  display: flex !important;
  flex-direction: row !important;
  gap: 10px 12px !important;
  margin-bottom: 10px;
  position: relative;
  z-index: 30;
  flex-wrap: wrap;
  align-items: center;
}
.weather-toolbar-actions {
  display: flex !important;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
}
.weather-toolbar .weather-search-wrap {
  flex: 1 1 220px;
  min-width: min(100%, 200px);
}
@media (max-width: 640px) {
.weather-toolbar {
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}
}
@media (max-width: 640px) {
.weather-toolbar .weather-search-wrap {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  align-self: stretch;
}
}
@media (max-width: 640px) {
.weather-toolbar-actions {
  width: 100%;
  justify-content: flex-start !important;
  flex-wrap: wrap;
  flex: 0 0 auto !important;
}
}
.weather-mode-switch button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
body.weather-sky-light .weather-mode-switch {
  border-color: rgba(22, 52, 79, 0.2);
  background: rgba(255, 255, 255, 0.44);
}
body.weather-sky-light .weather-mode-switch button {
  color: rgba(22, 52, 79, 0.76);
}
body.weather-sky-light .weather-mode-switch button[aria-pressed="true"] {
  color: #16344f;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
body.weather-sky-light .weather-mode-switch button:focus-visible {
  outline-color: #16344f;
}
.weather-toolbar-actions [hidden] {
  display: none !important;
}
.weather-toolbar-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex: none;
}
html[dir="rtl"] body.duskline .weather-toolbar-actions {
  flex-direction: row-reverse;
}
@media (max-width: 640px) {
body.duskline .weather-toolbar {
  padding-inline: 0;
}
}
.weather-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(8, 16, 32, 0.3);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  position: relative;
}
.weather-mode-switch button {
  min-height: 32px;
  padding: 6px 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font: 600 12px/1 var(--ff-body);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.weather-mode-switch button[aria-pressed="true"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(8,17,31,.18);
}
@media (max-width: 640px) {
body.duskline .weather-toolbar-actions {
  gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.weather-mode-switch button {
  transition: none;
}
}
@media (any-pointer: coarse) {
.weather-mode-switch button {
  min-height: 44px;
  min-width: 44px;
}
}

/* Fixed-size round controls must not inherit pill padding or asymmetric min sizes. */
body.duskline #weatherDetailBack, body.duskline #weatherDetailFav,
body.duskline #weatherDetailShare, body.duskline #weatherDetailRefresh,
body.duskline #weatherSheetClose, body.duskline #weatherMapClose {
  box-sizing: border-box !important; width: 48px !important; height: 48px !important;
  min-width: 48px !important; min-height: 48px !important; max-width: 48px !important; max-height: 48px !important;
  padding: 0 !important; border-radius: 50% !important; flex: 0 0 48px;
  display: inline-flex; align-items: center; justify-content: center;
}
body.duskline #weatherUnitsBtn { box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border-radius: 50%; flex: 0 0 44px; }
body.duskline #weatherUnitsBtn svg { width: 20px; height: 20px; }

body.duskline .weather-detail-loading-panel { grid-column: 1 / -1; min-height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }

/* Search and actions share the same inline start; controls never orphan Refresh. */
body.duskline .weather-toolbar { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 8px !important; width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; }
body.duskline .weather-toolbar .weather-search-wrap { flex: 0 0 auto !important; min-width: 0 !important; width: 100% !important; margin-inline: 0; }
body.duskline .weather-toolbar-actions { flex-wrap: nowrap; justify-content: flex-start !important; gap: 8px; width: 100%; }
html[dir="rtl"] body.duskline .weather-toolbar-actions { flex-direction: row; }
@media (max-width: 480px) {
  body.duskline .weather-toolbar-actions { gap: 6px; }
  body.duskline .weather-mode-switch { box-sizing: border-box; width: 120px; flex: 0 0 120px; }
  body.duskline .weather-mode-switch button { flex: 1 1 0; min-width: 44px; min-height: 44px; padding: 4px; white-space: normal; overflow-wrap: anywhere; line-height: 1.1; }
  body.duskline #weatherMapOpen { box-sizing: border-box; width: 44px; min-width: 44px; max-width: 44px; height: 44px; padding: 0; border-radius: 50%; flex: 0 0 44px; }
  body.duskline #weatherMapOpen span { display: none; }
}
@media (max-width: 359px) {
  body.duskline .weather-toolbar-actions { gap: 1.5px; }
  body.duskline .weather-mode-switch { width: 98px; flex-basis: 98px; }
  body.duskline .weather-mode-switch button { font-size: 11px; padding-inline: 2px; }
}

/* One glass treatment for all four city controls, independent of appearance.
   Pressed saves use the check icon; loading refresh keeps its existing spinner. */
body.duskline .weather-detail-bar :is(#weatherDetailBack, #weatherDetailFav, #weatherDetailShare, #weatherDetailRefresh) {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.18) !important;
  flex: 0 0 48px !important;
  width: 48px !important; height: 48px !important;
  min-width: 48px !important; min-height: 48px !important;
  max-width: 48px !important; max-height: 48px !important;
}
body.duskline .weather-detail-bar :is(#weatherDetailBack, #weatherDetailFav, #weatherDetailShare, #weatherDetailRefresh):hover {
  background: rgba(255,255,255,.32) !important;
}
body.duskline .weather-detail-bar :is(#weatherDetailBack, #weatherDetailFav, #weatherDetailShare, #weatherDetailRefresh) svg {
  width: 20px; height: 20px; color: inherit;
}

/* iOS taps go to a plain label; the native switch stays hidden in Shadow DOM.
   Rounded clipping applies to hit testing as well as paint. No layout wrapper. */
.wx-ios-haptic-relative { position: relative; }
.wx-ios-haptic-hit { position: absolute; inset: 0; display: block; border-radius: inherit; clip-path: border-box; cursor: inherit; z-index: 5; }
button:disabled .wx-ios-haptic-hit,
button[aria-disabled="true"] .wx-ios-haptic-hit,
html[data-motion-effective="off"] .wx-ios-haptic-hit { display: none !important; }

/* Interactive forecast surfaces preserve scrolling and never select UI text. */
.weather-row, .weather-hourly-item, .weather-daily-row, .weather-chart-wrap,
.weather-mode-switch, .weather-map-stage, .wx-sheet-dragzone,
.weather-mod-label, .wx-day-choices, .wx-day-mode, .weather-place-order {
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.weather-alert-body, .wx-share-link, input, textarea { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }
button.weather-hourly-item { border: 0; color: inherit; background: transparent; font: inherit; padding: 2px; border-radius: 10px; text-align: center; cursor: pointer; }
button.weather-hourly-item:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
button.weather-hourly-item:hover { background: rgba(127,153,175,.12); }
.weather-hourly-open { border: 0; padding: 0; color: inherit; background: transparent; font: inherit; text-align: start; cursor: pointer; }
.weather-hourly-open:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.weather-home-caption { display: block; font-size: 12px; font-weight: 600; color: var(--home-secondary); margin-bottom: 12px; }
body.duskline .weather-chart { font-family: var(--ff-body); }
.weather-alert-status { min-height: 0; }
@media (max-width:480px) {
  body.duskline .weather-mode-switch { width: auto; flex: 1 1 120px; max-width: 204px; }
  body.duskline .weather-mode-switch button { font-size: 13px; }
}
@media (max-width:359px) {
  body.duskline .weather-mode-switch { flex-basis: 98px; }
  body.duskline .weather-mode-switch button { font-size: 11px; }
}

.weather-manage-places { margin-inline-start:auto; border:0; padding:8px 0; background:transparent; color:inherit; font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:3px; min-height:44px; cursor:pointer; }
.weather-manage-places[hidden] { display:none; }
.wx-insight-reveal {animation:wx-insight-reveal .18s ease both;}
@keyframes wx-insight-reveal {from{opacity:.65}to{opacity:1}}
html[data-motion-effective="off"] .wx-insight-reveal,html[data-motion-effective="reduced"] .wx-insight-reveal {animation:none;}
.weather-chart text {font-family:var(--ff-body);font-size:11px;}
.weather-place-order-row .weather-ui-icon {width:18px;height:18px;}
.weather-place-order-row span {min-width:0;overflow-wrap:anywhere;}

.weather-home-plan {display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;}
.weather-home-plan span {font-size:12px;flex-basis:100%;}
.weather-home-plan strong {font-weight:600;}
.weather-home-plan small {font-size:13px;}

.weather-install-action {min-height:44px;font-size:12px;padding:6px 12px;}
.weather-install-action[hidden] {display:none;}

.weather-inline-notice {margin-top:16px;padding:12px;border:1px solid rgba(127,153,175,.3);border-radius:12px;font-size:14px;line-height:1.5;}
.weather-inline-notice button {margin-inline-start:12px;min-height:44px;border:0;border-radius:8px;padding:8px 12px;font:inherit;color:inherit;background:rgba(127,153,175,.16);cursor:pointer;}

.weather-sheet.wx-sheet-light :is(.weather-chart-sub,.wx-sheet-about-title,.wx-sheet-about p,.wx-sun-metric span) {opacity:1;}

/* Keep the current forecast visible on short, wide screens without removing actions. */
.weather-status-row {display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;}
@media (min-width:760px) and (max-height:620px) {
 .weather-greeting-wrap {display:flex;flex-direction:row;align-items:baseline;gap:16px;margin-bottom:10px;}
 body.duskline .weather-greeting-title {flex:1;min-width:0;width:auto;font-size:22px;margin-bottom:0;}
 .weather-greeting-place {flex:0 0 auto;margin:0;}
 body.duskline .weather-toolbar {flex-direction:row !important;align-items:center !important;gap:12px !important;}
 body.duskline .weather-toolbar .weather-search-wrap {flex:1 1 240px !important;width:auto !important;min-width:180px !important;}
 body.duskline .weather-toolbar-actions {flex:0 0 auto;width:auto;gap:6px;}
 .weather-status-row {margin-bottom:8px;}
 body.duskline .weather-start {padding:12px;gap:12px;margin-bottom:14px;}
 body.duskline .weather-start-copy h3 {font-size:17px;}
 body.duskline .weather-start-copy p {font-size:12px;}
}