/* Final mobile menu contract: a true left-side drawer with its own scroll surface. */
html:has(body .app-header.is-menu-open),
body:has(.app-header.is-menu-open) {
  overflow: hidden !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header.is-menu-open {
  isolation: isolate !important;
  overflow: visible !important;
  z-index: 40000 !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header.is-menu-open::before {
  position: fixed !important;
  inset: var(--dv-menu-top, 72px) 0 0 0 !important;
  z-index: 40010 !important;
  content: "" !important;
  background: rgba(255, 253, 248, 0.94) !important;
  backdrop-filter: blur(2px) !important;
  pointer-events: auto !important;
}

html body[data-step]:has(.app-header.is-menu-open) #app.goat-console {
  pointer-events: none !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #menuToggle.menu-toggle {
  position: relative !important;
  z-index: 40040 !important;
  color: #07545d !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #menuToggle.menu-toggle span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #07545d !important;
  opacity: 1 !important;
  transform-origin: center !important;
  transition: transform 180ms ease, opacity 140ms ease !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #menuToggle.menu-toggle[aria-expanded="true"],
html body[data-step] .app-shell.app-shell .app-header.app-header #menuToggle.menu-toggle[aria-expanded="true"]:focus,
html body[data-step] .app-shell.app-shell .app-header.app-header #menuToggle.menu-toggle[aria-expanded="true"]:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #menuToggle.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #menuToggle.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0.2) !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #menuToggle.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu {
  box-sizing: border-box !important;
  position: fixed !important;
  top: var(--dv-menu-top, 72px) !important;
  right: auto !important;
  bottom: 0 !important;
  left: max(8px, env(safe-area-inset-left)) !important;
  z-index: 40030 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  gap: 8px !important;
  width: min(440px, calc(100vw - 16px - env(safe-area-inset-left))) !important;
  max-width: min(440px, calc(100vw - 16px - env(safe-area-inset-left))) !important;
  block-size: calc(100dvh - var(--dv-menu-top, 72px)) !important;
  height: calc(100dvh - var(--dv-menu-top, 72px)) !important;
  max-block-size: calc(100dvh - var(--dv-menu-top, 72px)) !important;
  max-height: calc(100dvh - var(--dv-menu-top, 72px)) !important;
  padding: 14px !important;
  border: 1px solid rgba(16, 42, 46, 0.12) !important;
  border-radius: 8px !important;
  background: #fffdf8 !important;
  background-image: none !important;
  box-shadow: 0 28px 70px rgba(16, 42, 46, 0.18) !important;
  opacity: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  pointer-events: none !important;
  scrollbar-gutter: stable !important;
  transform: translate3d(calc(-100% - 18px), 0, 0) !important;
  transform-origin: top left !important;
  visibility: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 170ms ease,
    visibility 0s linear 260ms !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header.is-menu-open #portalMenu.portal-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate3d(0, 0, 0) !important;
  visibility: visible !important;
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 170ms ease,
    visibility 0s linear 0s !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu a,
html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu button {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 68px !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu a.is-active,
html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu button.is-active,
html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu a:hover,
html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu button:hover,
html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu a:focus-visible,
html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu button:focus-visible {
  border-color: rgba(7, 84, 93, 0.16) !important;
  color: #07545d !important;
  background: #f4fbf7 !important;
  box-shadow: inset 4px 0 0 #07545d !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu .portal-menu-image-mark {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 8px !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu .portal-menu-image {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu .portal-menu-copy {
  min-width: 0 !important;
  gap: 2px !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu .portal-menu-copy strong {
  overflow: visible !important;
  color: #123238 !important;
  font-size: 0.98rem !important;
  line-height: 1.08 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu .portal-menu-copy em {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(64, 92, 97, 0.95) !important;
  font-size: 0.76rem !important;
  line-height: 1.22 !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

@media (max-width: 560px) {
  :root {
    --dv-menu-top: 70px;
  }

  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu {
    right: max(6px, env(safe-area-inset-right)) !important;
    bottom: 0 !important;
    left: max(6px, env(safe-area-inset-left)) !important;
    block-size: calc(100dvh - var(--dv-menu-top, 70px)) !important;
    height: calc(100dvh - var(--dv-menu-top, 70px)) !important;
    max-block-size: calc(100dvh - var(--dv-menu-top, 70px)) !important;
    max-height: calc(100dvh - var(--dv-menu-top, 70px)) !important;
    width: auto !important;
    max-width: none !important;
    padding: 12px !important;
  }

  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu a,
  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu button {
    grid-template-columns: 50px minmax(0, 1fr) !important;
    min-height: 68px !important;
    padding: 8px !important;
  }
}

@media (max-width: 380px) {
  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu {
    gap: 7px !important;
    padding: 10px !important;
  }

  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu a,
  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu button {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    min-height: 64px !important;
  }

  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu .portal-menu-image-mark,
  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu .portal-menu-image {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body[data-step] .app-shell.app-shell .app-header.app-header #portalMenu.portal-menu {
    transition: none !important;
  }
}