/* 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;
}

/* BEHAVIOR FIX (all viewports, moves zero pixels — WLA-SITE-004): the CTA
   riser section is a transparent 260vh shell (z-index:5) overlapping the
   blog section by 100vh for its rise-over effect. The dist gave its pin
   pointer-events:none but not the SECTION itself, so every landing-page
   blog card was unclickable. The panel re-enables pointer-events:auto. */
/* Same pattern for the other two rise-over shells: .cares (z3) blocked the
   orbit's "Get started" CTA; .orbit (z2) overlaps the greenblock video.
   Each section's __panel (and orbit's center CTA) re-enables auto. */
.ctar,
.cares,
.orbit {
  pointer-events: 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: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .wm-burger svg {
    width: 22px;
    height: 22px;
  }

  .nav__right {
    align-items: center;
    gap: 6px;
  }
  /* 48px effective touch targets for the inline nav actions.
     Raised from 44 on 11 September. 44 is Apple's Human Interface figure,
     and Google's mobile guidance is 48 with 8px between adjacent controls,
     which is what a Lighthouse run and a Search Console mobile usability
     report both measure against. Scored by probing whether a 48px box
     centred on each control actually hits it: 3 of 4 at 44, 4 of 4 here.
     This file only loads for touch, so nothing on a desktop moves. */
  .nav__login,
  .nav__cta {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .nav__brand {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    min-width: 48px;
  }
  .tsg__btn {
    min-width: 48px;
    min-height: 48px;
  }

  .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: 48px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: inherit;
  }
  .wm-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    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: 48px;
    min-width: 48px;
  }
  .foot3__legal {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
  }
  .foot3__social a {
    min-width: 48px;
    min-height: 48px;
    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: 48px;
  }
  .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: 48px;
    min-height: 48px;
  }

  /* 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%;
  }
}


/* Hero legibility on phones and tablets (#783): the wide Worklist screenshot
   put bright patient rows behind the white headline. Darken the lower part of
   the scrim where the copy sits; the top of the image stays visible. */
@media (max-width: 899.98px) {
  .sp3-hero__card.is-light .sp3-hero__grad {
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 26%, rgba(0,0,0,.90) 46%, rgba(0,0,0,.95) 100%);
  }
  .sp3-hero__card.is-light .sp3-hero__h,
  .sp3-hero__card.is-light .sp3-hero__p { text-shadow: 0 1px 12px rgba(0,0,0,.45); }
}

/* The contact dock (city, regulator and funnel pages) is fixed at z-index 50,
   the same as the nav, and comes later in the page, so it painted over the
   open menu and took taps meant for its last links (25 Oct 2026). It steps
   aside while the menu is open. */
body.wm-lock .wdock {
  display: none;
}

/* Small phones, under 390px wide. The logo touched "Log in" because the two
   buttons and the menu filled the row. Tighter buttons keep 12px or more
   between the logo and the first button, down to 320px. */
@media (max-width: 389px) {
  .nav .nav__right {
    gap: 4px !important;
  }
  .nav .nav__login,
  .nav .nav__cta {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 14px;
  }
  .wm-burger {
    width: 40px;
  }
}
@media (max-width: 339px) {
  .nav .nav__login,
  .nav .nav__cta {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: 13px;
  }
}