/* Phase 473 — Global UX upgrades.
   1. Theme toggle: always visible (icon-only) on small screens instead of hidden.
   2. (moved) Forecast full-bleed + .weatherLiveRead now live in
      css/weather-app.bundle.css, which owns the forecast page.
   3. Header: subtle refinements to the mobile control stack. */

/* =========================================================================
   1. THEME TOGGLE — keep visible as icon-only on small screens
   The header bundle hides .tgz411ThemeButton at <=460px and in the narrow
   control stack. Override: show it as a compact icon button so dark/light is
   always one tap away, scaled to fit beside the lang/currency pickers.
   ========================================================================= */
@media (max-width:460px){
  .tgz411HeaderTools > .tgz411ThemeButton,
  .tgz411Header > .tgz411ThemeButton{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    min-width:38px !important;
    width:38px !important;
    height:40px !important;
    padding:0 !important;
    border-radius:13px !important;
    gap:0 !important;
    flex:0 0 auto !important;
    overflow:hidden;
  }
  .tgz411ThemeButton .tgzThemeIcon{
    font-size:16px;
    line-height:1;
  }
  /* The label text is already visually hidden (sr-only) in the header bundle;
     ensure it stays accessible but not laid out on narrow screens */
  .tgz411ThemeButton [data-tgz-theme-label]{
    position:absolute !important;
    width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}
@media (max-width:360px){
  .tgz411HeaderTools > .tgz411ThemeButton,
  .tgz411Header > .tgz411ThemeButton{
    min-width:35px !important;
    width:35px !important;
    height:38px !important;
    border-radius:11px !important;
  }
  .tgz411ThemeButton .tgzThemeIcon{font-size:15px}
}