/* Wellness A\ — mobile overlay (WLA-SITE-003).
   Loaded AFTER wellness-site.css on every page. EVERY rule that could move a
   desktop pixel must be scoped to mobile media queries (enforced by
   scripts/desktop-guard.mts). The base design files are read-only — fixes
   live here. Docs: docs/wellness-ai-mobile/PLAN.md */

/* Mobile-nav elements exist in the markup on all pages but render nowhere
   on desktop. (New elements — hiding them cannot affect the base design.) */
.wm-burger,
.wm-panel {
  display: none;
}

@media (max-width: 899.98px) {
  /* ---- Navigation -------------------------------------------------------
     The dist intends .nav__links to hide under 900px (wellness-site.css:1051)
     but an unscoped later rule (:1364) wins the cascade and pushes the
     Log in / Book demo actions off-viewport. Re-assert the design's intent. */
  .nav__links {
    display: none !important;
  }
  /* The hover mega-menu is visually hidden but still LAID OUT inside the
     fixed nav — at 663px wide it stretched the layout viewport. The wm-panel
     replaces it on touch. */
  .megamenu {
    display: none !important;
  }

  .wm-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .wm-burger svg {
    width: 22px;
    height: 22px;
  }

  .nav__right {
    align-items: center;
    gap: 6px;
  }
  /* 44px effective touch targets for the inline nav actions. */
  .nav__login,
  .nav__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .tsg__btn {
    min-width: 44px;
    min-height: 44px;
  }

  .wm-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid rgba(10, 49, 67, 0.1);
    box-shadow: 0 18px 30px rgba(10, 18, 24, 0.12);
    padding: 6px 24px calc(18px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wm-panel.wm-open {
    display: block;
  }
  /* When the nav slides away on scroll, take the open panel with it. */
  .nav--dark .wm-panel {
    background: #0f1417;
  }

  .wm-group {
    padding: 10px 0 4px;
    border-bottom: 1px solid rgba(10, 49, 67, 0.08);
  }
  .wm-group:last-child {
    border-bottom: 0;
  }
  .wm-group__head {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
  }
  .wm-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    color: inherit;
    opacity: 0.75;
  }

  /* Body scroll lock while the panel is open (set by wellness-mobile.js). */
  body.wm-lock {
    overflow: hidden;
  }

  /* ---- Forms: kill the iOS focus-zoom (16px floor on controls) ---------- */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  /* ---- Footer & legal tap targets --------------------------------------- */
  .foot3__col ul li a,
  .foot3__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
  .foot3__legal {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
  }
  .foot3__social a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Paired form fields go single-column on phones (placeholders truncate
     at ~170px otherwise). */
  .bd__row {
    grid-template-columns: 1fr !important;
  }

  /* ---- Checkbox rows (book-demo / contact) ------------------------------ */
  .bd__checks label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
  .bd__checks input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }

  /* ---- Landing hero (choreography untouched — only the positioned text
          blocks reflow: the 34vw side columns can't coexist with the card on
          a phone, so they anchor full-width in the dark zone above it). ---- */
  .hpos2,
  .hpos3 {
    left: 24px !important;
    right: 24px !important;
    width: auto !important;
    top: 13vh !important;
    bottom: auto !important;
    transform: none !important;
  }
  /* On desktop hpos2/hpos3 sit on opposite sides, so their crossfade never
     collides; sharing one anchor on mobile needs the outgoing block to clear
     quickly or the texts ghost over each other. */
  .hpos2:not(.on),
  .hpos3:not(.on) {
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .hpos__eyebrow {
    font-size: 12px !important;
  }
  .hpos__p {
    font-size: 16px !important;
  }

  /* The index choreography animates the testimonial panel margins from
     110px -> 24px via inline styles; at phone width that crushes the quote
     to ~120px until fully in view. Static margins on mobile (stylesheet
     !important beats inline styles). */
  .tsg__panel {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }

  /* Quote attribution contrast on the slate panel (Lighthouse mobile). */
  .bd__attr span {
    color: #ffffff !important;
  }

  /* ---- Recurring tiny text ---------------------------------------------- */
  .tsg__role {
    font-size: 12px !important;
  }
  .blg-card__meta span,
  .blg-row__meta span,
  .bl2-row__meta {
    font-size: 12px !important;
  }
  .dflag span,
  .blg-card__tag {
    font-size: 12px !important;
  }
  /* Standalone-page marks/links (login, setup-profile). */
  .lg__mark,
  .su2__mark,
  .lg__back {
    display: inline-flex;
    align-items: center;
    min-width: 44px;
    min-height: 44px;
  }

  /* Demo-card micro text (product pages + index + ask-anything). */
  .dchip,
  .drow__chip,
  .dcard__count,
  .dcard__date,
  .dstep em,
  .dscore > span,
  .dmono {
    font-size: 12px !important;
  }

  /* Closing-statement lines are nowrap-forced for desktop line-breaking. */
  .sp-state__t span {
    white-space: normal !important;
  }

  /* The footer wordmark at 19vw overflows ~7px past the right edge — this
     single element stretched the layout viewport to 397px on EVERY page
     (subtle whole-site zoom-out on phones). */
  .foot3__wordmark {
    font-size: 16vw !important;
  }

  /* Two-column grids the dist never stacks below 900px: the bib lead+cards
     (platform/personal) rendered side-by-side pushing cards past 530px, and
     the sp-diag lead+diagram squeezed diagrams into a thin strip. */
  .bib__grid,
  .sp-diag__grid {
    grid-template-columns: 1fr !important;
  }
  .bib__cards {
    grid-template-columns: 1fr !important;
  }
  .bib__card {
    min-height: 0 !important;
  }

  /* login / setup-profile boxes are fixed-width (400px / 340px) — wider
     than small phones once page padding is added. */
  .lg__box {
    width: auto !important;
  }
  .su2__box {
    width: auto !important;
    align-self: stretch;
  }

  /* sp-row media boxes have a fixed desktop height (280px at phone width);
     the taller wrapped demo cards overflow it and collide with the copy
     below. Natural height on mobile. */
  .sp-row__media {
    height: auto !important;
  }
  /* Inbox rows: chip + approve on the first line, message text full-width
     below (instead of three crushed columns). */
  .drow {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .drow__t {
    order: 4;
    flex-basis: 100%;
  }
}