/* Shared only by active supporting pages, not retired application shells. */
html { scroll-padding-top: max(1rem, env(safe-area-inset-top, 0px)); }
img, video, canvas { max-width: 100%; }
.meter-fill { max-width: 100%; }

@media (max-width: 767px) {
  /* Legacy nav rules stack every nested flex row; keep the home header horizontal. */
  nav.home-navigation { padding: 0 !important; }
  nav.home-navigation .home-navigation-row,
  nav.home-navigation .home-navigation-brand {
    flex-direction: row !important;
    align-items: center !important;
  }
  nav.home-navigation .home-navigation-row { justify-content: space-between; }
  nav.home-navigation .home-navigation-brand { padding: 0 !important; }
  nav.home-navigation #mobile-menu {
    max-height: calc(100dvh - 76px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
  }
  body:has(nav.home-navigation) #time-tracker-toggle {
    top: auto !important;
    bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 768px) {
  body {
    border-top: env(safe-area-inset-top, 0px) solid transparent;
    border-left: env(safe-area-inset-left, 0px) solid transparent;
    border-right: env(safe-area-inset-right, 0px) solid transparent;
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }

  main, section, article, header, footer, form,
  .flex > *, .grid > * { min-width: 0; }
  h1, h2, h3, p, li, a, label { overflow-wrap: anywhere; }

  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    font-size: 16px !important;
    min-height: 44px;
    max-width: 100%;
    min-width: 0;
  }

  button, .flex > button, [role="button"], .btn, a.button, nav a, header a,
  footer a, a[class*="inline-flex"], a[class*="rounded"] {
    min-width: 44px;
    min-height: 44px;
  }
  nav a, footer a { display: inline-flex; align-items: center; }
  button, .btn, a.button { white-space: normal; }
  a.whitespace-nowrap { white-space: normal; }
  label:has(input[type="checkbox"]), label:has(input[type="radio"]) {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .modal-content {
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    touch-action: pan-y pinch-zoom;
  }
  .auth-modal-close { width: 44px; height: 44px; }
  #forgot-password-link { display: inline-flex; align-items: center; min-height: 44px; }
  header > .flex, #dashboard-content > nav, .row {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  #dashboard-content > nav { overflow-x: visible; }
  .row > * { min-width: 0; overflow-wrap: anywhere; }
  #toast-container { max-width: calc(100vw - 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}