/* ==================================================================== */
/* Mobile visual direction — ported from Marco Castrita's work in       */
/* Altored-Health/altored-app-frontend (52f31f0, f465caa; 2026-07-12/16)*/
/*                                                                      */
/* The guided-result search/list and detail-navigation behavior is      */
/* ported separately in index.html/app.js. This file remains styling    */
/* only; the divergent repository is not the behavioral source. Two     */
/* classes of change were made while porting:                           */
/*                                                                      */
/*  1. Viewport-height and overflow defects in the original are FIXED   */
/*     here, not carried over. Each fix is commented inline. The         */
/*     original locked the app to `height: 100vh` and set               */
/*     `overflow: hidden` on the app shell, which removed the only      */
/*     vertical scroll owner and stranded content on short viewports.   */
/*                                                                      */
/*  2. Rules targeting `.unified-provider-detail` / `.unified-detail-*` */
/*     were DROPPED. Those classes belong to that repository's separate */
/*     provider-detail rewrite and do not exist in this markup, which   */
/*     uses `.provider-detail` / `.detail-shell` / `.detail-card`.      */
/*     Porting them would have been dead CSS.                           */
/* ==================================================================== */

@media (min-width: 761px) {
  .altored-search-app[data-app-stage="guided"] .guided-back::before,
  .altored-search-app[data-app-stage="coverage"] .coverage-back::before {
    --side-size: min(50px, 20vw);
    justify-content: center !important;
    content: "←";
    font-size: var(--side-size) !important;
  }
}

/* Guided "best result" trigger reads as a single pill row on wide screens. */
.altored-search-app[data-app-stage="guided"] .guided-best-result .search-trigger {
  width: 100% !important;
  max-width: min(800px, 100%) !important;
  margin: 0 auto !important;
  min-height: 78px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) auto !important;
  grid-template-rows: none !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(255, 255, 255, 0.54) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 22px 56px rgba(58, 10, 29, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: none !important;
}
.altored-search-app[data-app-stage="guided"] .guided-best-result .search-lens {
  width: 52px !important;
  height: 52px !important;
}
.altored-search-app[data-app-stage="guided"] .guided-best-result .search-lens::before {
  width: 16px !important;
  height: 16px !important;
  left: 15px !important;
  top: 14px !important;
}
.altored-search-app[data-app-stage="guided"] .guided-best-result .search-lens::after {
  width: 13px !important;
  height: 3px !important;
  right: 13px !important;
  bottom: 15px !important;
}
.altored-search-app[data-app-stage="guided"] .guided-best-result .search-copy {
  font-size: clamp(1.08rem, 2vw, 1.42rem) !important;
}
.altored-search-app[data-app-stage="guided"] .guided-best-result .search-cta {
  grid-column: auto !important;
  width: auto !important;
  min-height: 46px !important;
  padding: 0 20px !important;
  font-size: 0.84rem !important;
}

@media (max-width: 760px) {
  /* FIX: the original set `body { height: 100%; }`, which locks the page to
     the viewport and prevents content from growing. Body already carries
     `min-height: 100vh` globally. Keep native vertical overscroll as well so
     touch scrolling can hand off cleanly from controls to the page. */
  body {
    overscroll-behavior-y: auto;
  }

  /* FIX: the original set `overflow: hidden !important` on all three auth
     states here. That removed the page's only vertical scroll owner, which is
     what produced the unreachable-content and missing-scrollbar problems.
     Padding reset is the part worth keeping. */
  .altored-search-app[data-auth-state="signed-out"],
  .altored-search-app[data-auth-state="signed-in"],
  .altored-search-app[data-auth-state="checking"] {
    padding: 0 !important;
  }

  /* Details are taller than the viewport. Make the document the only vertical
     scroll owner instead of letting overflow-x:hidden implicitly turn the app
     shell into an overflow-y:auto touch scroller. */
  html:not([data-embed="phone"]) .altored-search-app[data-app-stage="details"] {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* The iframe/phone-preview layout intentionally locks the document and
     scrolls the app shell. Preserve that single internal scroll owner. */
  html[data-embed="phone"] .altored-search-app[data-app-stage="details"] {
    height: 100svh !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* FIX: `max-height: 100vh` removed — it squished the idle stage on short
     viewports instead of letting it scroll. */
  .altored-search-app[data-auth-state="signed-in"][data-app-stage="idle"] {
    padding: 0 !important;
  }

  :root {
    --side-size-mini: min(20px, 20vw);
  }
  .altored-search-app .coverage-choice {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr 1fr;
  }

  .coverage-choice span {
    grid-column: 1;
    grid-row: 1;
  }

  .coverage-choice small {
    grid-column: span 2;
    grid-row: 2;
  }

  .altored-search-app button.coverage-choice::after {
    grid-column: 2;
    grid-row:1;
    content:"→";
    font-size: var(--side-size-mini) !important;
    justify-self: end;
  }

  /* Full-bleed mobile shell.
     FIX: `height: 100vh` -> `min-height: 100dvh`. min-height lets content grow
     rather than clipping it, and dvh tracks the dynamic viewport so mobile
     browser chrome does not cut off the bottom of the layout. */
  .altored-search-app[data-auth-state="signed-in"][data-app-stage="idle"] .search-experience,
  .altored-search-app[data-auth-state="signed-out"]:is(
    [data-app-stage="idle"], [data-app-stage="guided"],[data-app-stage="coverage"], [data-app-stage="results"], [data-app-stage="details"]) .search-experience,
  .altored-search-app[data-auth-state="checking"][data-app-stage="idle"] .search-experience {
    max-width: 100vw !important;
    min-width: 100vw !important;
    height:auto !important;
    width: 100% !important;
    padding: 0 !important;
  }

  .altored-search-app[data-auth-state="signed-out"]:is(
    [data-app-stage="idle"], [data-app-stage="guided"],[data-app-stage="coverage"], [data-app-stage="results"], [data-app-stage="details"]) .dashboard-hero {
    max-width: 100vw !important;
    min-height: 100dvh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    border-radius: 0 !important;
  }

  .altored-search-app[data-auth-state="signed-in"][data-app-stage="results"] .dashboard-hero,
  .altored-search-app[data-auth-state="checking"][data-app-stage="idle"] .dashboard-hero,
  .altored-search-app[data-auth-state="signed-in"][data-app-stage="idle"] .dashboard-hero {
    max-width: 100vw !important;
    min-height: 100dvh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto 2fr !important;
    grid-template-columns: 100%;
    row-gap: clamp(8px, 2vw, 16px) !important;
    border-radius: 0 !important;
  }

  .altored-search-app[data-auth-state="signed-in"][data-app-stage="idle"] .dashboard-hero .experience-nav {
    grid-row: 1;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .altored-search-app[data-auth-state="signed-in"][data-app-stage="idle"] .dashboard-hero .auth-gate {
    grid-row: 1;
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .altored-search-app[data-auth-state="signed-in"][data-app-stage="idle"] .dashboard-hero .search-card {
    grid-row: 2;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    align-self: stretch !important;
  }

  .altored-search-app[data-auth-state="signed-in"] .dashboard-hero .nav-actions {
    min-height: 30px !important;
    min-width: clamp(180px, 50%, 320px) !important;
    height: auto !important;
    z-index: 80 !important;
  }

  .altored-search-app[data-auth-state="signed-in"] .dashboard-hero .brand-lockup {
    padding-top: min(90px, 30vh);
  }

  .altored-search-app[data-auth-state="signed-in"] .dashboard-hero .auth-chip,
  .altored-search-app[data-auth-state="signed-in"] .dashboard-hero .auth-action.auth-action-quiet,
  .altored-search-app[data-auth-state="signed-out"] .dashboard-hero .auth-action:not(.auth-action-quiet):not(.admin-action) {
    display: flex !important;
  }

  /* FIX: the original pinned `height: 124px` alongside min-height, which
     clipped the trigger once its copy wrapped to a second line. min-height
     alone keeps the intended size and lets it grow. */
  .altored-search-app[data-app-stage="idle"] .search-trigger,
  .altored-search-app[data-app-stage="choices"] .search-trigger,
  .altored-search-app[data-app-stage="guided"] .guided-best-result .search-trigger {
    min-height: 124px !important;
    padding: 8px 12px 12px !important;
    width: 100% !important;
    margin: 0 auto !important;
    gap: 12px !important;
    margin-inline: auto;
    grid-template-columns: 52px minmax(0, 1fr) auto !important;
    grid-template-rows: none !important;
    border-radius: 28px !important;
  }
  .altored-search-app[data-app-stage="guided"] .guided-best-result .search-trigger:hover {
    transform: none !important;
  }

  .guided-best-result {
    padding: 0 !important;
    justify-content: center !important;
    width: auto !important;
    border: none !important;
  }

  .altored-search-app[data-app-stage="guided"] .guided-best-result .search-cta {
    grid-row: 2;
    grid-column: span 3 !important;
    min-height: 38px !important;
  }

  .altored-search-app[data-app-stage="guided"] .guided-back::before,
  .altored-search-app[data-app-stage="coverage"] .coverage-back::before {
    display: grid !important;
    --side-size: min(50px, 20vw);
    content: "←";
    font-size: var(--side-size) !important;
  }

  .altored-search-app[data-app-stage="guided"]::before {
    background: none !important;
  }

  .altored-search-app[data-app-stage="guided"] .guided-stage {
    padding-top: 5% !important;
  }

  div.detail-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .altored-search-app,
  .altored-search-app .search-experience,
  .altored-search-app .dashboard-hero {
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  /* FIX: `height: 100%` -> `min-height: 0`. Inside the guided grid a fixed
     100% height forced the panel to overflow its row rather than grow. */
  .altored-search-app[data-app-stage="guided"] .guided-panel {
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
  }

  /* FIX: `max-height: 100vh` removed. Capping the price flow at the viewport
     squished its contents; it now grows and the page scrolls instead. */
  .altored-search-app[data-app-stage="guided"] .guided-price-flow {
    gap: min(30px, 20vh) !important;
  }

  /* FIX: `max-height: 50vh` removed for the same reason — the checking state
     was being clipped mid-content on short viewports. */
  .altored-search-app[data-app-stage="guided"] .guided-panel:has(.guided-price-flow[data-state="checking"]) {
    gap: min(30px, 20vh) !important;
  }
}