/* =============================================================================
   MyRoomiz — mobile app experience
   =============================================================================
   Loaded after style.css on every public page. Everything here is scoped to
   phone widths (≤767px) plus a few touch-capability rules, so desktop and
   tablet are untouched.

   The goal is that a phone visitor gets an application, not a narrow website:
   sheets that rise from the bottom edge, touch feedback instead of hover, and
   no browser-ish dead space around the content.

   Loading order matters — several rules below override single-class
   declarations in style.css at equal specificity and only win by coming later.
   ========================================================================== */

/* ---- touch behaviour (any touch device) ---------------------------------- */
@media (hover: none) {
  /* The grey flash Safari/Chrome paint on tap looks nothing like a native
     press. Removed here and replaced with real :active states below. */
  a, button, .card, .cat-item, .pricing-card {
    -webkit-tap-highlight-color: transparent;
  }
  /* Hover styling on a touch screen sticks after the finger lifts, leaving
     elements looking permanently focused. */
  .card:hover .card-media img { transform: none; }
  .car-nav { display: none; }   /* arrows are pointless where you can swipe */
}

@media (max-width: 767px) {

  /* ---- app shell -------------------------------------------------------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    /* Stops the whole page rubber-banding behind fixed chrome, which is the
       single most "this is a web page" tell on iOS. */
    overscroll-behavior-y: none;
  }

  /* Home-indicator inset only — there is no bottom bar. */
  body { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* ---- header ----------------------------------------------------------- */
  .topbar {
    position: sticky; top: 0; z-index: 120;
    padding-top: env(safe-area-inset-top, 0px);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
  }

  /* ---- density ---------------------------------------------------------- */
  /* "See all cities" was dropping onto its own line under every heading,
     which pushed real content down the screen on the smallest viewport. */
  .section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; flex-wrap: nowrap;
  }
  .section-head h2 { font-size: 17px; white-space: normal; }
  .section-head .see-all { font-size: 12.5px; white-space: nowrap; flex: none; }
  .section-head .see-all svg { width: 14px; height: 14px; }

  /* ---- touch targets ---------------------------------------------------- */
  /* 44px is the smallest reliably tappable size; several controls were under
     it, which is what makes a web page feel fiddly on a phone. */
  .btn, .cat-item, .card-fav, .msg-icon-btn, .account-nav-item {
    min-height: 44px;
  }
  .card-fav { width: 40px; height: 40px; }

  /* Press feedback in place of hover. */
  .btn:active, .card:active, .pricing-card:active,
  .cat-item:active, .account-nav-item:active { transform: scale(.985); }
  .btn, .card, .pricing-card, .cat-item, .account-nav-item { transition: transform .12s ease; }

  /* ---- sheets ----------------------------------------------------------- */
  /* Dialogs rise from the bottom edge and fill the width, the way a native
     sheet does, instead of floating in the middle of the screen. */
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
    /* Above the RoomieAI launcher (150), which would otherwise float on top of
       the form you are filling in. */
    z-index: 200;
  }

  /* Belt and braces for the launcher: it is fixed-position with its own
     stacking context, so raising the backdrop is not always enough.

     Test the BACKDROP, not the modal. .ai-modal has no hidden attribute — it
     lives inside #aiModalBackdrop, which is the element that carries it — so
     matching on .ai-modal:not([hidden]) was true on every page load and hid
     the RoomieAI button on mobile permanently. */
  body:has(.modal-backdrop:not([hidden])) #roomieRoot,
  body:has(.ai-modal-backdrop:not([hidden])) #roomieRoot {
    display: none;
  }
  .auth-modal,
  .msg-host-modal,
  .region-modal {
    width: 100%;
    max-width: none;
    border-radius: 22px 22px 0 0;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh;
    overflow-y: auto;
    animation: mrSheetUp .26s cubic-bezier(.2, .8, .2, 1);
  }
  @keyframes mrSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* The grab handle that tells you a sheet is a sheet. */
  .auth-modal::before,
  .msg-host-modal::before {
    content: '';
    display: block; width: 38px; height: 4px; border-radius: 999px;
    background: var(--line); margin: -18px auto 16px;
  }
  @media (prefers-reduced-motion: reduce) {
    .auth-modal, .msg-host-modal, .region-modal { animation: none; }
  }

  /* ---- carousels -------------------------------------------------------- */
  /* Snap each card to the left edge so swiping lands cleanly rather than
     stopping halfway between two cards. */
  .listing-scroll, .cat-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 20px;
  }
  .listing-scroll > .card { scroll-snap-align: start; }
}

/* ---- standalone (installed to the home screen) ---------------------------- */
/* When launched from the home screen there is no browser UI, so the header can
   sit flush against the status bar. */
@media (display-mode: standalone) {
  .topbar { padding-top: max(env(safe-area-inset-top, 0px), 8px); }
  /* A back gesture is not available in standalone, so in-page back links
     matter more — make sure they are never hidden on mobile. */
  .pd-back, .msg-back-link { display: inline-flex !important; }
}