/* Keep essential legal destinations visible on compact phones. */

@media (max-width: 720px) {
  /* Welcome regression correction: keep the primary controls in their
     familiar order and return Privacy / Terms to the quiet footer below the
     form and any status message. Sign-up and verification keep their
     purpose-built layouts. */
  html body .auth-gate .auth-card:not(.signup-mode):not(.verify-mode) {
    grid-template-areas:
      "mascot brand"
      "form form"
      "message message"
      "legal legal" !important;
  }

  html body .auth-gate .auth-card:not(.signup-mode):not(.verify-mode) > .auth-legal-links {
    grid-area: legal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 44px !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    pointer-events: auto !important;
  }

  html body .auth-gate .auth-card:not(.signup-mode):not(.verify-mode) > .auth-legal-links > span {
    display: inline !important;
  }

  html body .auth-gate .auth-card:not(.signup-mode):not(.verify-mode) > .auth-legal-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #08736e !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.74rem !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
  }

  html body .auth-gate .auth-card:not(.signup-mode):not(.verify-mode) > .auth-legal-links a:focus-visible {
    outline: 2px solid rgba(18, 164, 142, 0.78) !important;
    outline-offset: 2px !important;
  }

  /* Keep the hamburger's legal row outside its shorter help scroller. This
     prevents Privacy and Terms from disappearing below the menu viewport. */
  html body .app-shell .category-rail.app-main-menu,
  html body main.app-shell .category-rail.app-main-menu {
    grid-template-areas:
      "menu-heading"
      "menu-navigation"
      "menu-help"
      "menu-legal" !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  html body .app-shell .category-rail.app-main-menu > .app-menu-heading,
  html body main.app-shell .category-rail.app-main-menu > .app-menu-heading {
    grid-area: menu-heading !important;
  }

  html body .app-shell .category-rail.app-main-menu > .app-menu-section:first-of-type,
  html body main.app-shell .category-rail.app-main-menu > .app-menu-section:first-of-type {
    grid-area: menu-navigation !important;
  }

  html body .app-shell .category-rail.app-main-menu > .app-menu-help-section,
  html body main.app-shell .category-rail.app-main-menu > .app-menu-help-section {
    grid-area: menu-help !important;
    min-height: 0 !important;
    padding-right: 2px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  html body .app-shell .category-rail.app-main-menu > .app-menu-legal,
  html body main.app-shell .category-rail.app-main-menu > .app-menu-legal {
    grid-area: menu-legal !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
    box-sizing: border-box !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 8px 0 0 !important;
    gap: 8px !important;
    overflow: visible !important;
    border-top: 1px solid rgba(214, 250, 240, 0.1) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  html body .app-shell .category-rail.app-main-menu > .app-menu-legal > span,
  html body main.app-shell .category-rail.app-main-menu > .app-menu-legal > span {
    display: none !important;
  }

  html body .app-shell .category-rail.app-main-menu > .app-menu-legal a,
  html body main.app-shell .category-rail.app-main-menu > .app-menu-legal a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(151, 233, 207, 0.13) !important;
    border-radius: 999px !important;
    color: rgba(239, 255, 249, 0.9) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
    font-size: 0.72rem !important;
    font-weight: 790 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  html body .app-shell .category-rail.app-main-menu > .app-menu-legal a:focus-visible,
  html body main.app-shell .category-rail.app-main-menu > .app-menu-legal a:focus-visible {
    outline: 2px solid rgba(116, 229, 195, 0.82) !important;
    outline-offset: 2px !important;
  }
}