/* mw-legacy-native */
/* Phone Station Deck. Device-gated by myTempestPhoneLayoutActive; never applied
   to tablets or narrow desktop windows. Keep the existing live nodes/dialogs.
   The two nonmatching ID predicates deliberately outrank the weighted legacy
   wall-layout selectors. This additive sheet is not fed into that compiler. */
.mytempest-phone-only { display: none; }
body.mytempest-phone {
  --phone-safe-top: env(safe-area-inset-top, 0px);
  --phone-safe-right: env(safe-area-inset-right, 0px);
  --phone-safe-bottom: env(safe-area-inset-bottom, 0px);
  --phone-safe-left: env(safe-area-inset-left, 0px);
  --phone-header-text-reserve: max(0px, calc(3rem - 48px));
}
html.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b),
body.mytempest-display-mode.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) {
  height: auto !important; min-height: 100% !important; overflow-x: hidden !important;
  overflow-y: auto !important; background: #07131e; color: #edf7fb;
}
body.mytempest-display-mode.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay {
  position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; width: 100% !important;
  max-width: 680px !important; max-height: none !important; contain: none !important; height: auto !important; min-height: 100vh !important;
  margin: 0 auto !important; padding: 94px 16px 90px !important;
  padding-top: calc(94px + var(--phone-safe-top) + var(--phone-header-text-reserve)) !important;
  padding-right: calc(16px + var(--phone-safe-right)) !important;
  padding-bottom: calc(90px + var(--phone-safe-bottom)) !important;
  padding-left: calc(16px + var(--phone-safe-left)) !important;
  overflow: visible !important; transform: none !important;
  background: linear-gradient(165deg, #173340 0, #091823 300px, #07111c 700px) !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestScene { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; pointer-events: none; }
body.mytempest-phone.mytempest-data-dashboard-mode:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestScene { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-vignette { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-wordmark {
  position: absolute !important; top: calc(18px + var(--phone-safe-top)) !important; left: calc(16px + var(--phone-safe-left)) !important; right: auto !important;
  width: calc(100% - 100px - var(--phone-safe-left) - var(--phone-safe-right)) !important; max-width: 300px !important;
  height: 56px !important; transform: none !important; display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) !important; grid-template-rows: 34px 12px !important;
  column-gap: 6px !important; row-gap: 10px !important; align-items: center !important;
}
/* Keep the radar and name in separate columns, matching the Atlas wordmark.
   The Setup button retains its existing 44px touch target at the right.
   Larger user text settings reserve another row instead of crowding the logo. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-wordmark-name { position: static !important; grid-column: 2 !important; grid-row: 1 !important; max-width: none !important; white-space: nowrap !important; font: 700 23px/1.2 Arial, sans-serif !important; font-size: clamp(23px, 6.7vmin, 30px) !important; letter-spacing: -.7px !important; text-shadow: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-wordmark-copy { position: static !important; grid-column: 2 !important; grid-row: 2 !important; font: 600 10px/1.2 system-ui !important; letter-spacing: .5px !important; color: #b9d2de !important; text-shadow: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-wordmark-radar { position: static !important; grid-column: 1 !important; grid-row: 1 !important; width: 32px !important; height: 32px !important; transform: none !important; filter: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-wordmark-radar path { stroke-width: 6 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-location-block {
  position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important;
  flex-direction: column !important; align-items: flex-start !important; gap: 3px !important;
  width: 100% !important; max-width: none !important; padding: 0 2px 12px !important; transform: none !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPlace { font-size: 1.125rem !important; font-size: clamp(1.125rem, calc(.75rem + 1.8vmin), 1.375rem) !important; overflow-wrap: anywhere; line-height: 1.25 !important; white-space: normal !important; width: 100% !important; max-width: none !important; text-align: left !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestClock { font-size: .875rem !important; font-size: clamp(.875rem, calc(.75rem + .6vmin), 1rem) !important; color: #b4cbd6; white-space: normal !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-location-divider,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHeaderVersion,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPresence { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestSetupButton {
  position: absolute !important; top: calc(21px + var(--phone-safe-top) + var(--phone-header-text-reserve)) !important; right: calc(16px + var(--phone-safe-right)) !important; bottom: auto !important;
  left: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  height: 44px !important; min-width: 60px !important; padding: 0 10px !important; border-radius: 9px !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important; color: #e7f7ff !important;
  font: 600 .8125rem/1.2 system-ui !important;
  font: 600 clamp(.8125rem, calc(.7rem + .4vmin), .875rem)/1.2 system-ui !important; z-index: 5 !important;
}
/* Smaller painted faces retain the full 44px touch area. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestSetupButton::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; right: 0;
  border: 1px solid #426577; border-radius: 9px; background: #173340; z-index: -1; pointer-events: none;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard:not([hidden]) {
  position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: none !important;
  gap: 10px !important; width: 100% !important; height: auto !important; min-height: 0 !important;
  max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important;
  transform: none !important; background: none !important; align-content: start !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneTitle { display: block; grid-column: 1 / -1; order: 0 !important; margin: 0 0 4px; font: 650 22px/1.4 system-ui; color: #dbf3ff; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] #myTempestPhoneTitle { display: none; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-current,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDataDashboard:not([hidden]),
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestMetrics,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestMetrics .mytempest-metric-group,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestMetrics .mytempest-metric-grid { display: contents !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-section-kicker,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-current-main,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestMetrics .mytempest-metric-heading { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-topbar { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] .mytempest-topbar {
  display: block !important; grid-column: 1 / -1; order: 60 !important; position: static !important;
  padding: 16px !important; background: #102a36; border: 1px solid #35566a; border-radius: 14px;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] .mytempest-source-block,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] .mytempest-source-status-row {
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 8px;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] .mytempest-source-block > *,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] #myTempestHealth {
  position: static !important; font-size: 14px !important; white-space: normal !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric {
  display: flex !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 30 !important;
  flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important;
  grid-column: auto !important; grid-row: auto !important; width: auto !important;
  min-width: 0 !important; height: auto !important; min-height: 184px !important; max-height: none !important;
  padding: 14px 12px 14px !important; gap: 5px !important; border-radius: 14px !important;
  border: 1px solid #315568 !important; border-top: 3px solid var(--phone-card-accent, #6bc9f4) !important;
  background: linear-gradient(145deg, var(--phone-card-tint, #173643), #0c1b29) !important;
  box-shadow: none !important; transform: none !important; overflow: visible !important; text-align: left !important;
  color: #eff8fc !important; contain: none !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card::before,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card::after,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric::before,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric::after { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="wind"] { --phone-card-accent: #84dfa4; --phone-card-tint: #163c35; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="humidity"] { --phone-card-accent: #69d7da; --phone-card-tint: #173b43; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="rain-truth"] { --phone-card-accent: #5cc8ff; --phone-card-tint: #143e55; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="pressure"] { --phone-card-accent: #bda8f5; --phone-card-tint: #2b2b49; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="uv-solar"],
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="sun-moon"] { --phone-card-accent: #f1ce73; --phone-card-tint: #3d3525; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="lightning-event"],
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="heat-drying-risk"] { --phone-card-accent: #ffaa72; --phone-card-tint: #443127; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="air-quality"] { --phone-card-accent: #79d4ac; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card strong,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric > strong {
  position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important;
  display: block !important; text-shadow: none !important; text-align: left !important; font: 650 25px/1.2 system-ui !important; color: #f0f8ff !important; letter-spacing: -.7px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
  white-space: normal !important; overflow-wrap: break-word; max-width: 100% !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card > span,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric > span {
  position: static !important; transform: none !important; font: 600 13px/1.4 system-ui !important;
  color: #c1d8e2 !important; white-space: normal !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card small,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card em,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric small {
  position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; transform: none !important;
  text-align: left !important; font: 400 13px/1.45 system-ui !important; color: #b9d2de !important;
  white-space: normal !important; -webkit-line-clamp: unset !important; overflow: visible !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
  width: auto !important; max-width: 100% !important; text-overflow: clip !important; margin: 0 !important;
}
/* Undo clipped wall-instrument readouts before presenting their phone text. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric > strong,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric > small {
  height: auto !important; min-height: 0 !important; width: auto !important; clip-path: none !important;
  opacity: 1 !important; visibility: visible !important; overflow: visible !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric-value-unit { display: inline !important; font-size: 13px !important; font-weight: 400 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric-instrument,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric-readout,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-wind-console,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card-visual { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric-cue { position: absolute !important; top: 10px !important; right: 8px !important; bottom: auto !important; left: auto !important; opacity: .8; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] {
  grid-column: 1 / -1 !important; order: 10 !important; min-height: 215px !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(78px, 24vw, 100px) !important;
  grid-template-rows: auto !important; gap: 8px !important;
  padding: 18px !important; border-top-color: #83d9fd !important;
  background: linear-gradient(130deg, #22485c, #101f2b 72%) !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card-trailing { display: flex !important; position: static !important; flex-direction: column; gap: 6px; width: 100% !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] strong { font-size: clamp(48px, 16vw, 76px) !important; letter-spacing: -3px !important; line-height: 1.05 !important; color: #f4faff !important; }
/* Keep the original temperature/color instrument in its own phone column. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] > .mytempest-data-card-trailing {
  grid-column: 1 !important; grid-row: 1 !important; min-width: 0 !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] > .mytempest-data-card-visual--thermometer {
  display: block !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  grid-column: 2 !important; grid-row: 1 !important; align-self: center !important;
  width: 100% !important; min-width: 0 !important; max-width: none !important;
  height: 180px !important; min-height: 0 !important; max-height: none !important;
  padding: 0 !important; margin: 0 !important; transform: none !important; overflow: visible !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] .mytempest-data-card-visual-svg {
  display: block !important; width: 100% !important; height: 100% !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] .mytempest-data-card-visual-thermo-label {
  display: block !important; font-size: 11px !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] .is-thermo-tick { display: block !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card-now-condition { font-size: 18px !important; font-weight: 600 !important; color: #f2f8ff !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card-now-feels { font-size: 15px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card-now-feels-primary { color: #ffd0a4 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card-now-feels-primary,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card-now-feels-context { white-space: normal !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing { display: block; grid-column: 1 / -1; order: 20 !important; border: 1px solid #58636d; border-radius: 14px; background: #000; color: #fff; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing summary { display: grid; grid-template-columns: 26px minmax(0, 1fr) 12px; align-items: center; gap: 10px; min-height: 58px; padding: 14px; font: 600 16px/1.4 system-ui; cursor: pointer; list-style: none; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing summary::-webkit-details-marker { display: none; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing summary::after { content: "⌄"; font-size: 20px; color: #d6e2e8; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing[open] summary::after { transform: rotate(180deg); }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-alert-graphic { width: 26px; height: 26px; color: #ffce7b; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing[data-alert-count="0"] .mytempest-phone-alert-graphic { color: #b9d2de; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing .mytempest-next-card { display: flex !important; flex-wrap: wrap !important; height: auto !important; max-height: none !important; padding: 14px !important; border: 0 !important; border-top: 1px solid #3a454d !important; position: static !important; gap: 8px; background: #000 !important; color: #fff !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .alert-center-dialog { background: #000 !important; color: #f4f8fa !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneSensorsHeading { display: flex; grid-column: 1 / -1; order: 25 !important; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; justify-content: space-between; margin: 9px 0 1px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneSensorsHeading h2 { margin: 0; font: 650 18px/1.4 system-ui; color: #edf7fb; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneSensorsHeading > span { font: 400 12px/1.4 system-ui; color: #afc8d4; }
/* Crisp category illustrations share one visual language across all sensors. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-phone-card-graphic { display: block !important; position: absolute !important; top: 12px !important; right: 10px !important; left: auto !important; bottom: auto !important; width: 38px !important; height: 38px !important; color: var(--phone-card-accent, #8bd8fa) !important; opacity: 1 !important; transform: none !important; pointer-events: none; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history] > span:not(.mytempest-wind-console) { width: 100% !important; min-height: 38px !important; padding-right: 42px !important; font-size: 14px !important; display: flex !important; align-items: center !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-phone-card-history { display: flex; justify-content: space-between; align-items: center; width: 100%; padding-top: 10px; margin-top: auto; font: 500 12px/1.3 system-ui; color: #bbd6e3; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-card-history > span { font-size: 12px; color: var(--phone-card-accent, #8bd8fa); }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric-cue { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric-trend { display: block !important; margin-bottom: 3px; font-weight: 600; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="rain-truth"] { order: 30 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="lightning-event"] { order: 31 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="wind"] { order: 32 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="heat-drying-risk"] { order: 33 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="humidity"] { order: 34 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="pressure"] { order: 35 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestTickerViewport { order: 2 !important; flex-basis: 100% !important; height: auto !important; overflow: visible !important; mask-image: none !important; -webkit-mask-image: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestTickerTrack { display: block !important; position: static !important; width: auto !important; transform: none; animation: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRain { min-width: 0 !important; max-width: 100% !important; display: block !important; white-space: normal !important; width: auto !important; font-size: 14px !important; line-height: 1.6 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestTickerClone { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNext { display: block; grid-column: 1 / -1; order: 40 !important; border-left: 3px solid #73d1f5; padding: 6px 0 6px 12px; margin: 10px 0; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNext > span { display: block; font-size: 12px; color: #93d6ef; text-transform: uppercase; letter-spacing: 1.4px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNext strong { font: 600 16px/1.5 system-ui; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneRadarHeading { display: flex; grid-column: 1 / -1; order: 49 !important; align-items: center; justify-content: space-between; margin-top: 8px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneRadarHeading h2 { margin: 0; font-size: 18px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneRadarHeading button { min-height: 44px; border: 0 !important; background: transparent; color: #8fdaff; font-size: 14px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar { grid-column: 1 / -1 !important; order: 50 !important; grid-row: auto !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex-direction: column; width: 100% !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; border: 1px solid #426578 !important; border-radius: 14px !important; background: #091a24; padding: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-map { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 1 !important; width: 100% !important; height: 260px !important; min-height: 260px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-meta,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-source-readout,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-dbz-legend,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-attribution { position: static !important; transform: none !important; margin: 0 !important; max-width: none !important; white-space: normal !important; font: 400 12px/1.4 system-ui !important; padding: 8px 10px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-meta { order: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-dbz-legend { order: 2 !important; display: flex !important; flex-wrap: wrap; gap: 8px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-source-readout { order: 6 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-attribution { order: 7 !important; padding-right: 60px !important; min-height: 52px !important; box-sizing: border-box; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-controls { order: 3 !important; position: static !important; display: flex !important; flex-wrap: wrap; gap: 6px; padding: 8px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-playback { order: 4 !important; position: static !important; display: flex !important; flex-wrap: wrap; gap: 6px; padding: 8px; max-width: none !important; width: 100% !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar button { min-width: 44px !important; width: auto !important; min-height: 44px !important; height: 44px !important; font-size: 14px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-control--loop {
  width: 44px !important; padding: 0 !important; border: 0 !important; border-radius: 9px !important;
  background: transparent !important; box-shadow: none !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-control--loop::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; right: 4px;
  border: 1px solid #426577; border-radius: 9px; background: #0c2330; pointer-events: none;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-control--loop.is-active::before { border-color: #6ce7cf; background: #0f4f4f; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-loop-icon { transform: scale(.9); transform-origin: center; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar input[type="range"] { min-width: 90px !important; flex: 1; height: 44px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-speed { display: flex; gap: 4px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestRadar .mytempest-radar-frame-label { font-size: 12px !important; white-space: normal !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] #myTempestRadar .mytempest-radar-controls,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] #myTempestRadar .mytempest-radar-playback { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="radar"] #myTempestRadar .mytempest-radar-map { height: 340px !important; min-height: 340px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHours { grid-column: 1 / -1; order: 40 !important; grid-row: auto !important; position: static !important; height: auto !important; min-height: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack { display: flex !important; flex-direction: column !important; height: auto !important; gap: 10px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day:not([hidden]) { position: relative !important; display: flex !important; flex-direction: column; align-items: flex-start; gap: 5px; height: auto !important; min-height: 114px !important; max-height: none !important; contain: none !important; width: 100% !important; flex: none !important; padding: 14px 16px !important; border-radius: 14px !important; background: #112b3b !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day * { position: static !important; transform: none !important; white-space: normal !important; -webkit-line-clamp: unset !important; overflow: visible !important; max-height: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-scope,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-instrument,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-icon,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack svg { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day strong { font-size: 23px !important; color: #ffcb9f; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day small,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day span,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day em { font-size: 14px !important; line-height: 1.4 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestForecastRibbon { grid-column: 1 / -1 !important; order: 20 !important; grid-row: auto !important; position: static !important; display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 !important; border: 0 !important; background: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-outlook-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-outlook-heading h2 { font: 600 20px/1.4 system-ui; margin: 0; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-outlook-heading span { font-size: 12px; color: #a8cee2; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-horizons { display: flex; gap: 5px; padding: 4px; border-radius: 12px; background: #132c3a; margin-bottom: 14px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-horizons button { flex: 1; min-width: 44px; min-height: 44px; border: 0 !important; border-radius: 10px; background: transparent; color: #cde3f1; font-size: 14px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-horizons button[aria-pressed="true"] { background: #23546a; color: #fff; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneChart svg { display: block; width: 100%; height: auto; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneChart text { font: 12px system-ui; fill: #b9d2df; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneChart .phone-chart-label { font-weight: 600; fill: #e2f3fc; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-hour { padding: 12px; border-radius: 12px; background: #133c4e; font-size: 14px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-hour label { font-weight: 600; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneHour { display: block; width: 100%; min-height: 44px; accent-color: #74d3f5; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneHourSummary { margin: 0; line-height: 1.6; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-hour-details summary,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-comparison summary { cursor: pointer; min-height: 48px; padding: 14px 0; font: 500 14px/1.4 system-ui; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneHourData > div { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid #294759; padding: 10px 0; font-size: 14px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneHourData strong { max-width: 55%; text-align: right; font-weight: 500; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-observation-insights-primary { display: flex !important; flex-direction: column !important; gap: 12px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-observation-insight { position: relative !important; min-width: 0 !important; padding: 12px 56px 12px 12px !important; background: #0b202d; border-radius: 10px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-insight-graphic { position: absolute; top: 14px; right: 12px; width: 32px; height: 32px; color: #ffcb9e; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-observation-insight--pressure .mytempest-phone-insight-graphic { color: #c5b4ff; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-observation-insight > span,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-observation-insight small { font-size: 14px !important; white-space: normal !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-observation-insight strong { font-size: 21px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: 680px; margin: 0 auto; z-index: 40; padding: 8px 10px; padding-right: calc(10px + var(--phone-safe-right)); padding-bottom: calc(8px + var(--phone-safe-bottom)); padding-left: calc(10px + var(--phone-safe-left)); gap: 4px; background: #102633; border-top: 1px solid #365569; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav button { flex: 1; min-width: 44px; min-height: 48px; border: 0 !important; border-radius: 12px; background: transparent; color: #b7d0de; font: 600 14px/1.4 system-ui; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav button[aria-current="page"] { background: #20516a; color: #b4eaff; box-shadow: inset 0 2px #7fcfff; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] .mytempest-data-card:not([data-mytempest-data-card="now"]):not([data-mytempest-metric-history="rain-truth"]):not([data-mytempest-metric-history="lightning-event"]):not([data-mytempest-metric-history="heat-drying-risk"]),
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay:not([data-phone-view="now"]):not([data-phone-view="station"]) #myTempestPhoneSensorsHeading,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] .mytempest-metric[data-mytempest-metric-history="uv-solar"],
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay:not([data-phone-view="outlook"]) #myTempestForecastRibbon,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay:not([data-phone-view="outlook"]) #myTempestHours,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay:not([data-phone-view="now"]) #myTempestPhoneNext,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay:not([data-phone-view="now"]) #myTempestPhoneRadarHeading,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] [data-mytempest-data-card="now"],
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="outlook"] .mytempest-data-card,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="outlook"] .mytempest-metric,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="radar"] .mytempest-data-card,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="radar"] .mytempest-metric,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="outlook"] #myTempestRadar,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] #myTempestRadar { display: none !important; }
/* Dialogs reuse all existing history, daily, alert, OAuth and guide behavior. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; padding: 12px !important; padding-top: calc(12px + var(--phone-safe-top)) !important; padding-right: calc(12px + var(--phone-safe-right)) !important; padding-bottom: calc(12px + var(--phone-safe-bottom)) !important; padding-left: calc(12px + var(--phone-safe-left)) !important; overflow-y: auto !important; align-items: flex-start !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup-card { width: 100% !important; max-width: 600px !important; max-height: none !important; margin: 0 auto !important; padding: 18px !important; overflow: visible !important; border-radius: 18px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup-card input:not([type="checkbox"]),
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup-card select { min-height: 48px !important; font-size: 16px !important; max-width: 100% !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup-card .mytempest-setup-hint { font-size: 13px !important; line-height: 1.5 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup-actions { position: sticky; bottom: 0; background: #112431; padding: 12px 0; z-index: 2; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup-card button,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel button,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-daily-forecast-dialog-panel button,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .alert-center-dialog button { min-width: 44px !important; min-height: 44px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-daily-forecast-dialog-panel { box-sizing: border-box !important; width: 100% !important; max-width: 650px !important; max-height: 100% !important; margin: 0 !important; padding: 16px !important; overflow-y: auto !important; border-radius: 18px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-toolbar { display: flex !important; flex-wrap: wrap; gap: 6px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel small,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel p { font-size: 13px !important; line-height: 1.5 !important; }
@media (orientation: landscape) {
  body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay { padding-top: calc(84px + var(--phone-safe-top)) !important; }
  body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav { padding-top: 4px; padding-bottom: calc(4px + var(--phone-safe-bottom)); }
  body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav button { min-height: 44px; }
}

/* Phone controls leave the wall display's bottom-right positioning context. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestControls { display: contents !important; position: static !important; opacity: 1 !important; pointer-events: auto !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric-helper-copy { text-align: left !important; display: inline !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing button { min-width: 44px !important; min-height: 44px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing .mytempest-ticker-item { white-space: normal !important; }
/* Optional feed motion reuses the existing compositor-only ticker. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing [data-phone-feed-motion="true"] #myTempestTickerViewport { overflow: hidden !important; height: 32px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing [data-phone-feed-motion="true"] #myTempestTickerTrack { display: flex !important; width: max-content !important; animation: mytempest-ticker-scroll var(--mytempest-ticker-duration, 36s) linear infinite !important; transform: translateX(0); }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing [data-phone-feed-motion="true"] #myTempestRain,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing [data-phone-feed-motion="true"] #myTempestTickerClone { min-width: max-content !important; max-width: none !important; display: inline-flex !important; flex: none !important; white-space: nowrap !important; font-size: 14px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing [data-phone-feed-motion="true"] .mytempest-ticker-item { white-space: nowrap !important; }

/* Readable text feeds and the complete lunar/source footer. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing .mytempest-ticker-item-copy { max-width: 100% !important; overflow-wrap: break-word !important; white-space: normal !important; flex: 1 1 auto !important; min-width: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing .mytempest-ticker-item { min-width: 0 !important; max-width: 100% !important; display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; gap: 5px !important; margin-bottom: 10px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing .mytempest-ticker-separator { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing [data-phone-feed-motion="true"] .mytempest-ticker-item { min-width: max-content !important; max-width: none !important; display: inline-flex !important; flex-wrap: nowrap !important; margin-bottom: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing [data-phone-feed-motion="true"] .mytempest-ticker-item-copy { white-space: nowrap !important; flex: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] #myTempestLunar { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; justify-content: flex-start !important; gap: 6px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="station"] #myTempestNextNewMoon { display: block !important; }
/* Reflow the daily cards around their original text and condition symbol. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day { text-align: left !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day::before,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day::after,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-data-rails,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-touch-cue { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-topline { flex: none !important; display: flex !important; justify-content: space-between !important; width: 100% !important; padding-right: 54px !important; gap: 8px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-readout { height: auto !important; min-height: 0 !important; flex: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; gap: 6px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-readout strong,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-temps > span { font: 650 25px/1.2 system-ui !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-temps > small { font: 500 20px/1.2 system-ui !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-copy,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-copy > span { text-align: left !important; font-weight: 400 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-phone-day-icon { display: block !important; position: absolute !important; right: 12px !important; top: 10px !important; width: 44px !important; height: 44px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-phone-day-icon svg { display: block !important; width: 44px !important; height: 44px !important; }
/* History remains a full instrument, with its chart, inspector and source lens. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel { display: flex !important; flex-direction: column !important; min-height: 0 !important; gap: 14px !important; font-family: system-ui, -apple-system, sans-serif !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel > * { flex: none !important; width: 100% !important; min-width: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-hero { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 12px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-latest { display: flex !important; flex-direction: column !important; gap: 8px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-latest strong { font: 650 34px/1.2 system-ui !important; overflow-wrap: break-word; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-toolbar { width: 100% !important; padding: 3px !important; gap: 2px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-toolbar button { flex: 1 !important; padding: 8px 2px !important; font: 600 14px/1.3 system-ui !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-chart { display: block !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-chart-plot { display: block !important; height: auto !important; min-height: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-chart-svg { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-chart-svg text { font: 12px system-ui !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-readout-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-readout strong { font: 650 23px/1.2 system-ui !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-readout span,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-coverage span { font: 500 13px/1.4 system-ui !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-sensor-lens-heading { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; min-height: 48px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-sensor-lens-grid { grid-template-columns: minmax(0, 1fr) !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-sensor-lens-item { font-family: system-ui, -apple-system, sans-serif !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b).mytempest-setup-open #myTempestPhoneNav,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b).mytempest-setup-open #myTempestControls,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b).mytempest-user-guide-open #myTempestPhoneNav { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup { background: #07151f !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-setup-card { font-family: system-ui, -apple-system, sans-serif !important; }

/* Retain automatic day/night appearance without a moving background. */
body.mytempest-phone.mytempest-night-appearance:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay { background: linear-gradient(165deg, #102430, #060e17 600px) !important; }
body.mytempest-phone.mytempest-night-appearance:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card,
body.mytempest-phone.mytempest-night-appearance:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric { background: linear-gradient(145deg, var(--phone-card-tint, #102532), #070f19 85%) !important; }

/* Device notification controls share the phone's alert and setup surfaces. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationShortcut {
  display: flex; grid-column: 1 / -1; order: 21 !important; align-items: center; gap: 9px;
  width: 100%; min-height: 48px; padding: 8px 12px; border: 1px solid #345260; border-radius: 12px;
  background: #0c202c; color: #c8e6f3; font: 500 14px/1.4 system-ui; text-align: left;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationShortcut strong { margin-left: auto; color: #a8e3fb; font: 600 13px/1.4 system-ui; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay:not([data-phone-view="now"]):not([data-phone-view="station"]) #myTempestPhoneNotificationShortcut { display: none; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationSettings { display: block; padding: 16px !important; border: 1px solid #426578 !important; border-radius: 14px; background: #0b202c; scroll-margin-top: 18px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationSettings h3 { margin: 0 0 12px; font: 650 20px/1.3 system-ui; color: #eff8ff; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationSettings p { margin: 10px 0; font: 400 14px/1.5 system-ui; color: #c1d8e2; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-notification-actions { display: flex; flex-direction: column; gap: 9px; margin: 16px 0; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-notification-actions button { width: 100%; min-height: 46px; padding: 11px; border: 1px solid #578298; border-radius: 10px; background: #173d50; color: #e8f7ff; font: 600 14px/1.4 system-ui; white-space: normal; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-notification-actions button[hidden] { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationEnable { background: #215c75; border-color: #83d9fd; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-notification-actions button:disabled { opacity: .6; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationCategories summary { min-height: 48px; padding: 12px 0; font: 600 15px/1.4 system-ui; color: #d6effb; cursor: pointer; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationSettings .mytempest-phone-notification-category { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between; gap: 12px; min-height: 66px; padding: 12px 0 !important; border-top: 1px solid #355161; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-notification-category > span { min-width: 0; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-notification-category strong { display: block; font: 600 15px/1.4 system-ui; color: #eff8ff; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-notification-category small { display: block; margin-top: 4px; font: 400 13px/1.4 system-ui; color: #b9d2de; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationSettings input[type="checkbox"] { flex: 0 0 24px !important; width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; margin: 0 !important; accent-color: #80d9fa; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestSetup[data-mode="oauth-migration"] #myTempestPhoneNotificationSettings,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestSetup[data-mode="oauth-station"] #myTempestPhoneNotificationSettings { display: none; }

/* Fit the visible viewport, including installed-app notches and browser chrome. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-backdrop,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-daily-forecast-dialog-backdrop {
  display: flex !important; align-items: flex-start !important; justify-content: center !important;
  box-sizing: border-box !important; top: var(--phone-dialog-top, 0px) !important; bottom: auto !important;
  width: 100% !important; height: var(--phone-dialog-height, 100vh) !important;
  padding: calc(12px + var(--phone-safe-top)) calc(8px + var(--phone-safe-right)) calc(12px + var(--phone-safe-bottom)) calc(8px + var(--phone-safe-left)) !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-backdrop[hidden],
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-daily-forecast-dialog-backdrop[hidden] { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-header,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-daily-forecast-dialog-panel .daily-forecast-dialog-header {
  position: sticky !important; top: -16px !important; z-index: 5 !important; padding: 12px 0 !important;
  background: #081d28 !important; box-shadow: 0 4px 0 #081d28; gap: 10px !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-header h2 { font: 650 24px/1.15 system-ui !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-header .eyebrow { margin: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-close,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-daily-forecast-dialog-panel .daily-forecast-dialog-close { position: static !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-measures { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-measures button { padding: 8px !important; font: 600 14px/1.3 system-ui !important; }

body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-header .eyebrow { font: 600 11px/1.3 system-ui !important; letter-spacing: .08em !important; }

body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel[data-mytempest-history-metric="now"] .mytempest-history-latest,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel[data-mytempest-history-metric="heat-drying-risk"] .mytempest-history-latest { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; column-gap: 12px !important; row-gap: 4px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel[data-mytempest-history-metric="now"] .mytempest-history-latest strong,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel[data-mytempest-history-metric="heat-drying-risk"] .mytempest-history-latest strong { grid-column: 1 !important; grid-row: 1 / 3 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel[data-mytempest-history-metric="now"] .mytempest-history-latest span,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel[data-mytempest-history-metric="now"] .mytempest-history-latest small,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel[data-mytempest-history-metric="heat-drying-risk"] .mytempest-history-latest span,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-dialog-panel[data-mytempest-history-metric="heat-drying-risk"] .mytempest-history-latest small { grid-column: 2 !important; font-size: 13px !important; line-height: 1.4 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-chart > .mytempest-history-measure-note,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-history-chart > .mytempest-history-context { padding: 12px !important; margin: 0 !important; }

body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) button#myTempestPhoneNext { background:transparent; color:inherit; border:0; border-left:3px solid #73d1f5; text-align:left; cursor:pointer; }

/* Approved mobile display design. Scope stays on real phones; measurements,
   streams, dialogs and the non-phone Atlas layout retain their existing nodes. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay {
  padding-top: calc(73px + var(--phone-safe-top) + var(--phone-header-text-reserve)) !important;
  background: #091720 !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-wordmark {
  height: 38px !important; grid-template-rows: 38px !important; row-gap: 0 !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-location-block { padding-bottom: 10px !important; gap: 3px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPlace { font-size: 14px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestClock { font-size: 12px !important; color: #b6cdd7 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneCopyright { display: block; grid-column: 1 / -1; order: 99; padding: 12px 0 0; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneCopyright .mytempest-wordmark-copy { font-size: 11px !important; font-weight: 400 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard { gap: 9px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric {
  min-height: 142px !important; padding: 12px 11px 22px !important; gap: 4px !important;
  border: 1px solid #304a59 !important; border-radius: 15px !important;
  background: linear-gradient(125deg, #203540, #12242f) !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history]::before {
  content: "" !important; display: block !important; position: absolute !important;
  top: 13px !important; left: -1px !important; right: auto !important; bottom: auto !important;
  width: 2px !important; height: 24px !important; background: var(--phone-card-accent, #98d5ef) !important;
  border: 0 !important; transform: none !important; box-shadow: none !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-phone-card-graphic {
  width: 22px !important; height: 22px !important; top: 11px !important; right: 10px !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history] > span:not(.mytempest-wind-console) {
  min-height: 22px !important; padding-right: 25px !important; font-size: 13px !important;
  color: #c9dce5 !important; line-height: 1.3 !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card strong,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric > strong {
  font-size: 28px !important; font-weight: 600 !important; color: #eff7fa !important; letter-spacing: -.6px !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card small,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card em,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric > small {
  font-size: 12px !important; line-height: 1.4 !important; color: #b6cdd7 !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-phone-card-history {
  position: absolute; right: 10px; bottom: 5px; width: auto; padding: 0; margin: 0; justify-content: flex-end;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-phone-card-history > span { color: #b6cdd7; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="rain-truth"] { order: 30 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="wind"] { order: 31 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="humidity"] { order: 32 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="pressure"] { order: 33 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="lightning-event"] { order: 34 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay[data-phone-view="now"] [data-mytempest-metric-history="heat-drying-risk"] { order: 35 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] {
  min-height: 208px !important; padding: 12px !important; gap: 5px 10px !important;
  grid-template-columns: minmax(0, 1fr) 78px !important; grid-template-rows: auto auto auto auto !important;
  background: linear-gradient(125deg, #203b4b, #12242f 90%) !important; border-top: 2px solid #98d5ef !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"]::before { display: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-now-heading {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; align-items: baseline; color: #b6cdd7; font: 400 11px/1.4 system-ui;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-now-heading > span { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] > .mytempest-data-card-trailing { grid-row: 2 !important; justify-content: center; gap: 4px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] strong { font-size: clamp(48px, 16vw, 64px) !important; line-height: 1.05 !important; letter-spacing: -3px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] .mytempest-data-card-now-condition { font-size: 16px !important; color: #eff7fa !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] > .mytempest-data-card-visual--thermometer { grid-row: 2 !important; height: 125px !important; filter: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] .mytempest-data-card-visual-svg,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] .mytempest-data-card-visual-svg * { filter: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-now-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; grid-column: 1 / -1;
  padding-top: 7px; border-top: 1px solid #3a5360; color: #b6cdd7; font: 400 11px/1.4 system-ui;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-data-card="now"] > .mytempest-data-card-post-meta { grid-column: 1 / -1; font-size: 11px !important; padding-right: 14px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNext {
  order: 12 !important; margin: 0 !important; padding: 11px 12px !important; border: 1px solid #355568 !important;
  border-left: 3px solid #98d5ef !important; border-radius: 12px; background: #112935 !important; color: #eff7fa !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNext > span { font-size: 11px; letter-spacing: 1px; color: #b0d3e3; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNext strong { font-size: 16px; line-height: 1.4; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNext small { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; color: #b6cdd7; font: 400 12px/1.4 system-ui; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneSensorsHeading { margin: 0; order: 29 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneSensorsHeading h2 { font-size: 13px; font-weight: 500; }
/* Keep updates and alerts between Now and Next Change, even as alerts arrive. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing { order: 11 !important; border-color: #304a59; border-radius: 12px; background: #12242f; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing summary { min-height: 44px; padding: 9px 12px; font-size: 14px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNotificationShortcut { order: 65 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay:not([data-phone-view="station"]) #myTempestPhoneNotificationShortcut { display: none; }

/* Forecast explanations and rows share the display palette. Full text, wind,
   hour selection, all readings and comparison disclosures remain available. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestForecastRibbon {
  padding: 12px !important; border: 1px solid #304a59 !important; border-radius: 15px !important; background: #12242f !important;
}
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-next-change-briefing { padding: 12px !important; border: 1px solid #355568 !important; border-left: 3px solid #98d5ef !important; background: #182e3a !important; border-radius: 12px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-next-change-briefing h3 { font: 600 20px/1.3 system-ui !important; margin: 5px 0 8px !important; color: #eff7fa !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-next-change-briefing p { font: 400 13px/1.55 system-ui !important; color: #c7dae4 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-change-details summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; font: 500 12px/1.4 system-ui; cursor: pointer; color: #b8dbed; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-change-details summary::after { content: "+"; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-change-details[open] summary::after { content: "−"; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-hour { padding: 10px 0; border-radius: 0; border-top: 1px solid #304a59; background: transparent; font-size: 13px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-horizons { background: #0c1d28; border: 1px solid #304a59; border-radius: 10px; gap: 3px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-horizons button { font-size: 13px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-horizons button[aria-pressed="true"] { background: #294758; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack { gap: 0 !important; padding: 3px 12px !important; border: 1px solid #304a59; border-radius: 15px; background: #142934; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day:not([hidden]) { display: grid !important; grid-template-columns: 48px 28px minmax(0,1fr) !important; gap: 8px !important; min-height: 80px !important; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid #304a59 !important; border-radius: 0 !important; background: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day:last-child { border-bottom: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-topline { grid-column: 1; display: flex !important; flex-direction: column !important; align-items: flex-start !important; padding: 0 !important; gap: 2px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day .mytempest-hour-time { font-size: 13px !important; font-weight: 600 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day .mytempest-day-date { font-size: 11px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-phone-day-icon { grid-column: 2; grid-row: 1; position: static !important; width: 28px !important; height: 28px !important; align-self: center; color: #e5cb89; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-phone-day-icon svg { width: 28px !important; height: 28px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-readout { grid-column: 3; grid-row: 1; display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; gap: 3px 8px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-temps { grid-column: 2; grid-row: 1 / 3; align-self: center; display: flex !important; gap: 5px !important; align-items: baseline !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-temps > span { font-size: 19px !important; color: #eff7fa !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-temps > small { font-size: 14px !important; color: #b6cdd7 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day .mytempest-day-copy,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day .mytempest-day-copy > span,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day .mytempest-day-precip { grid-column: 1; font-size: 12px !important; line-height: 1.35 !important; color: #b6cdd7 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav { background: #182c39; border-color: #304a59; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav button { font-size: 13px; font-weight: 500; border-radius: 10px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav button[aria-current="page"] { background: #294758; color: #e5f4fc; box-shadow: inset 0 1px #789db0; }

/* Daily Tempest counters precede the chart. They remain distinct from the
   selected range and keep unavailable values as --, never invented zeros. */
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-days { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 9px !important; padding: 0 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-day { padding: 13px !important; border: 1px solid #304a59 !important; border-top: 2px solid #98d5ef !important; border-radius: 15px !important; background: linear-gradient(125deg,#203b4b,#12242f) !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-day h3 { font: 600 14px/1.4 system-ui !important; margin: 0 0 10px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-day dl { display: flex !important; flex-direction: column-reverse !important; gap: 10px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-day dl > div { display: flex !important; flex-direction: column !important; gap: 3px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-day dt { font: 400 12px/1.4 system-ui !important; color: #b6cdd7 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-day dd { font: 600 21px/1.3 system-ui !important; margin: 0 !important; color: #eff7fa !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-day [data-rain-amount] { font-size: 28px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-rain-days > p { grid-column: 1 / -1; margin: 0 !important; font: 400 12px/1.5 system-ui !important; color: #b6cdd7 !important; }
body.mytempest-display-mode.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay { padding-top: calc(73px + var(--phone-safe-top) + var(--phone-header-text-reserve)) !important; background: #091720 !important; }
body.mytempest-display-mode.mytempest-phone.mytempest-night-appearance:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestDisplay { background: #07131b !important; }
body.mytempest-phone.mytempest-night-appearance:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card,
body.mytempest-phone.mytempest-night-appearance:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric { background: linear-gradient(125deg,#162d38,#0c1e29) !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric-helper-copy { font-size: 12px !important; line-height: 1.4 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) .mytempest-phone-now-footer { width: 100% !important; max-width: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-phone-thermometer { border: 0 !important; background: none !important; box-shadow: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-phone-thermometer .mytempest-data-card-visual-svg { width: 78px !important; height: 125px !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-phone-thermometer .mytempest-data-card-visual-thermo-label { font: 10px Arial, sans-serif !important; stroke: none !important; paint-order: normal !important; text-shadow: none !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneNav button svg { display: block; width: 19px; height: 19px; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day { grid-template-rows: auto !important; align-content: center !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-topline { grid-row: 1 !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day-readout { grid-template-rows: auto auto !important; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestPhoneBriefing:not([data-alert-count="0"]) { background: #000; }
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-data-card *,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard .mytempest-metric *,
body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestHourTrack .mytempest-day * { text-shadow: none !important; }

body.mytempest-phone:not(#phone-layout-weight-a):not(#phone-layout-weight-b) #myTempestBoard [data-mytempest-metric-history="wind"] .mytempest-metric-helper-copy { white-space: pre-line !important; }