/**
 * Compact-phone shell (html.mh-compact-phone, CSS width ≤ 480px).
 * Fills the visible screen with small gutters. Loaded last so it wins over
 * older Galaxy S23 packing (overflow:hidden + 4px sides).
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html.mh-compact-phone,
html.mh-compact-phone body {
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}

html.mh-compact-phone body {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
}

@media (max-width: 480px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
    min-height: 100dvh;
  }

  html body #landing.landing-optimized,
  html body #landing,
  body #landing.landing-optimized,
  body #landing,
  #landing.landing-optimized,
  #landing {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  html body #landing .landing-content,
  body #landing .landing-content,
  #landing .landing-content,
  .landing-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html body #hostDashboardContainer,
  #hostDashboardContainer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* —— Home / landing —— */
html.mh-compact-phone body #landing.landing-optimized,
html.mh-compact-phone body #landing,
html.mh-compact-phone #landing.landing-optimized,
html.mh-compact-phone #landing {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
  padding-right: max(8px, env(safe-area-inset-right, 0px), clamp(8px, 2.5vw, 14px)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(8px, env(safe-area-inset-left, 0px), clamp(8px, 2.5vw, 14px)) !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  min-height: 100svh !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: 100svh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  max-height: 100svh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html.mh-compact-phone body #landing .landing-content,
html.mh-compact-phone #landing .landing-content,
html.mh-compact-phone .landing-content {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

html.mh-compact-phone #landing .copyright,
html.mh-compact-phone body #landing .copyright {
  margin-top: auto !important;
}

html.mh-compact-phone #landing .main-buttons {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-evenly !important;
  gap: clamp(10px, 2.2vh, 22px) !important;
  margin-top: clamp(4px, 1vh, 10px) !important;
  margin-bottom: clamp(4px, 1vh, 10px) !important;
}

html.mh-compact-phone #landing .helper-section,
html.mh-compact-phone #landing .host-section {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(10px, 1.8vh, 18px) clamp(8px, 2.5vw, 14px) !important;
}

html.mh-compact-phone #landing .helper-buttons,
html.mh-compact-phone #landing .host-buttons,
html.mh-compact-phone #landing .action-button,
html.mh-compact-phone #landing .register-button {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.mh-compact-phone #landing .action-button {
  min-height: clamp(48px, 7vh, 56px) !important;
  height: auto !important;
}

html.mh-compact-phone #landing .housekeeping,
html.mh-compact-phone #landing .host-registration,
html.mh-compact-phone #landing .footer-links {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Helper / Edit Profile / volunteer screens on the home page */
html.mh-compact-phone #volunteerMode:not(.hidden),
html.mh-compact-phone #completionMode:not(.hidden),
html.mh-compact-phone #adminMode:not(.hidden) {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-height: 100dvh !important;
  min-height: 100svh !important;
  padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
  padding-right: max(8px, env(safe-area-inset-right, 0px), clamp(8px, 2.5vw, 14px)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(8px, env(safe-area-inset-left, 0px), clamp(8px, 2.5vw, 14px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.mh-compact-phone #volunteerMode:not(.hidden) .app-container,
html.mh-compact-phone #completionMode:not(.hidden) .app-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* —— Team Builder Dashboard —— */
html.mh-compact-phone.mh-results-page,
html.mh-compact-phone.mh-results-page body {
  padding-left: max(8px, env(safe-area-inset-left, 0px), clamp(8px, 2.5vw, 14px)) !important;
  padding-right: max(8px, env(safe-area-inset-right, 0px), clamp(8px, 2.5vw, 14px)) !important;
  padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

html.mh-compact-phone #team-results-v2,
html.mh-compact-phone .mh-results-v2,
html.mh-compact-phone .results-container,
html.mh-compact-phone .results-header {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.mh-compact-phone .mh-results-v2 {
  padding-left: clamp(4px, 1.5vw, 10px) !important;
  padding-right: clamp(4px, 1.5vw, 10px) !important;
}

html.mh-compact-phone .mh-results-v2 .mh-team-dashboard,
html.mh-compact-phone .mh-results-v2 .mh-recommended,
html.mh-compact-phone .mh-results-v2 .mh-activity-feed {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: clamp(6px, 2vw, 12px) clamp(8px, 2.5vw, 14px) !important;
}

html.mh-compact-phone .mh-results-v2 .mh-volunteer-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.mh-compact-phone .mh-results-v2 .mh-team-dashboard,
html.mh-compact-phone .mh-results-v2 .mh-team-dashboard h2 {
  font-size: clamp(0.85rem, 3.6vw, 1.1rem) !important;
}

html.mh-compact-phone .mh-results-v2 .mh-dash-section-title,
html.mh-compact-phone .mh-results-v2 .mh-final-team-title {
  font-size: clamp(0.9rem, 3.8vw, 1.2rem) !important;
}

/* —— Host dashboard —— */
html.mh-compact-phone.mh-host-page #hostDashboardContainer,
html.mh-compact-phone #hostDashboardContainer,
html.mh-compact-phone body #hostDashboardContainer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: max(8px, env(safe-area-inset-left, 0px), clamp(8px, 2.5vw, 14px)) !important;
  padding-right: max(8px, env(safe-area-inset-right, 0px), clamp(8px, 2.5vw, 14px)) !important;
  padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  min-height: 100dvh !important;
  min-height: 100svh !important;
  max-height: 100dvh !important;
  max-height: 100svh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

html.mh-compact-phone #hostDashboardHeaderRow,
html.mh-compact-phone.mh-host-page #hostDashboardHeaderRow {
  top: max(6px, env(safe-area-inset-top, 0px)) !important;
  z-index: 200 !important;
}
html.mh-compact-phone.host-withdraw-open #hostDashboardHeaderRow,
html.mh-compact-phone.mh-host-page.host-withdraw-open #hostDashboardHeaderRow {
  z-index: 100090 !important;
  background: #ffffff !important;
}
html.mh-compact-phone.host-withdraw-open #hostDashboardContainer > *:not(#hostDashboardHeaderRow):not(#hostWithdrawFormSection),
html.mh-compact-phone.mh-host-page.host-withdraw-open #hostDashboardContainer > *:not(#hostDashboardHeaderRow):not(#hostWithdrawFormSection) {
  visibility: hidden !important;
  pointer-events: none !important;
}
html.mh-compact-phone.host-withdraw-open #hostWithdrawFormSection,
html.mh-compact-phone.mh-host-page.host-withdraw-open #hostWithdrawFormSection {
  background: #0f172a !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.mh-compact-phone #hostDashboardContainer .project-card,
html.mh-compact-phone #projectsList {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* —— Register / simple public forms —— */
html.mh-compact-phone body.register-org-page,
html.mh-compact-phone.mh-simple-page body {
  padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  padding-right: max(8px, env(safe-area-inset-right, 0px), clamp(8px, 2.5vw, 14px)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(8px, env(safe-area-inset-left, 0px), clamp(8px, 2.5vw, 14px)) !important;
  min-height: 100dvh !important;
  min-height: 100svh !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

html.mh-compact-phone .register-shell,
html.mh-compact-phone.mh-simple-page .container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html.mh-compact-phone .register-shell {
  margin-left: auto !important;
  margin-right: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* —— Super host —— */
html.mh-compact-phone.mh-super-host-page body,
html.mh-compact-phone .super-host-container,
html.mh-compact-phone #superHostDashboard {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.mh-compact-phone.mh-super-host-page body {
  padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
  padding-right: max(8px, env(safe-area-inset-right, 0px), clamp(8px, 2.5vw, 14px)) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(8px, env(safe-area-inset-left, 0px), clamp(8px, 2.5vw, 14px)) !important;
}

/* —— Shared modals: small inset, use the visible window —— */
html.mh-compact-phone #infoModal,
html.mh-compact-phone #welcomeTourModal,
html.mh-compact-phone #hostPricingModalOverlay,
html.mh-compact-phone #helperConfirmationModal,
html.mh-compact-phone #mapModal,
html.mh-compact-phone #teamMapModal {
  padding: max(6px, env(safe-area-inset-top, 0px))
    max(8px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(8px, env(safe-area-inset-left, 0px)) !important;
  box-sizing: border-box !important;
}

html.mh-compact-phone #infoModal,
html.mh-compact-phone #infoModal > div,
html.mh-compact-phone #infoModal .modal-container,
html.mh-compact-phone #infoModalContainer,
html.mh-compact-phone #welcomeTourModal > div,
html.mh-compact-phone .pricing-modal,
html.mh-compact-phone #hostPricingModalOverlay > div,
html.mh-compact-phone #helperConfirmationModal > div,
html.mh-compact-phone #mhRecordReplyModal {
  width: calc(100% - 16px) !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 16px) !important;
  max-height: calc(100svh - 16px) !important;
  box-sizing: border-box !important;
}

/* Helper landing: gray helper box fills space above copyright; buttons grow equally. */
html.mh-compact-phone body.mh-role-helper #landing.landing-optimized,
html.mh-compact-phone #landing.mh-role-helper.landing-optimized {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  height: 100dvh !important;
  height: 100svh !important;
  min-height: 100dvh !important;
}

html.mh-compact-phone body.mh-role-helper #landing .landing-content,
html.mh-compact-phone #landing.mh-role-helper .landing-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  flex: 1 1 auto !important;
  padding-bottom: 42px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

html.mh-compact-phone body.mh-role-helper #landing .main-buttons,
html.mh-compact-phone #landing.mh-role-helper .main-buttons {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  justify-content: stretch !important;
  gap: clamp(8px, 1.6vh, 14px) !important;
  margin-top: clamp(4px, 1vh, 8px) !important;
  margin-bottom: 0 !important;
}

html.mh-compact-phone body.mh-role-helper #landing .helper-section,
html.mh-compact-phone #landing.mh-role-helper .helper-section {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  justify-content: stretch !important;
  margin-bottom: 0 !important;
}

html.mh-compact-phone body.mh-role-helper #landing .helper-buttons,
html.mh-compact-phone #landing.mh-role-helper .helper-buttons {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex: 1 1 auto !important;
  justify-content: stretch !important;
  min-height: 0 !important;
  gap: 12px !important;
}

html.mh-compact-phone body.mh-role-helper #landing .helper-buttons > .action-group-small,
html.mh-compact-phone #landing.mh-role-helper .helper-buttons > .action-group-small {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: stretch !important;
  min-height: 0 !important;
}

html.mh-compact-phone body.mh-role-helper #landing .action-button,
html.mh-compact-phone body.mh-role-helper #landing #btnVolunteer,
html.mh-compact-phone body.mh-role-helper #landing #btnCompletion,
html.mh-compact-phone #landing.mh-role-helper .action-button {
  min-height: clamp(132px, 20vh, 200px) !important;
  max-height: none !important;
  height: auto !important;
  padding: 18px 16px !important;
  flex: 1 1 0 !important;
}

html.mh-compact-phone body.mh-role-helper #landing .copyright,
html.mh-compact-phone #landing.mh-role-helper .copyright,
html.mh-compact-phone body.mh-role-helper #landing p.copyright {
  margin-top: 8px !important;
  margin-bottom: 4px !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}

html.mh-compact-phone body.mh-role-helper #landing #mhHelperChangePath,
html.mh-compact-phone #landing.mh-role-helper #mhHelperChangePath {
  flex: 0 0 auto !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

html.mh-compact-phone body.mh-role-helper #landing .footer-links,
html.mh-compact-phone #landing.mh-role-helper .footer-links {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 480px) and (max-height: 740px) {
  html.mh-compact-phone body.mh-role-helper #landing .helper-buttons {
    gap: 10px !important;
  }
  html.mh-compact-phone body.mh-role-helper #landing .helper-section {
    margin-top: 4px !important;
    padding: clamp(8px, 1.2vh, 12px) clamp(8px, 2.5vw, 14px) !important;
  }
}

/* Keep 900px desktop cap on host dashboard when not a phone */
@media (min-width: 481px) {
  #hostDashboardContainer.app-container,
  #hostDashboardContainer {
    max-width: 900px;
  }
}