/* ========================================================================
   BEYOND CARE v149 — MOBILE PASS FOR THE SIGNED-IN PLATFORM
   Loaded last on platform.html. Phone and small-tablet fixes only: nothing
   here applies above 760px, so the desktop composition is untouched.
   The selectors are deliberately specific because the earlier layers use
   !important throughout.
   ======================================================================== */

@media (max-width:760px){
  /* Nothing on the platform may push the page sideways. */
  html,body{overflow-x:hidden}
  html body #mainContent,
  html body #mainContent > .screen{max-width:100%;min-width:0}

  /* Kicker labels use wide letter-spacing; let long ones wrap. */
  html body #mainContent .welcome-eyebrow,
  html body #mainContent .journey-dashboard-v63__eyebrow{white-space:normal!important;max-width:100%!important}
  html body #mainContent .welcome-eyebrow::after,
  html body #mainContent .journey-dashboard-v63__eyebrow::after{max-width:100%!important}

  /* ---- Welcome screen ---------------------------------------------------
     On desktop the portrait and pinned quote are positioned over the intro.
     On a phone there is no room for that, so they drop into the flow below
     the introduction instead of sitting behind the text. */
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__intro{
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    padding-bottom:12px!important;
  }
  html body #mainContent .journey-dashboard-v114 h1{font-size:clamp(40px,12vw,51px)!important}
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__copy{max-width:100%!important;margin-top:22px!important}
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__portrait{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:min(100%,340px)!important;
    height:auto!important;
    aspect-ratio:1/1;
    margin:6px auto 0!important;
    transform:none!important;
  }
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__portrait img{
    width:100%!important;height:100%!important;object-fit:contain!important;
  }
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__quote{
    position:relative!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;
    margin:-34px 0 0!important;
    min-height:0!important;
    padding:22px 20px 22px 70px!important;
    font-size:18px!important;
  }
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__courses{padding-top:84px!important}
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__aside-note{right:12px!important;max-width:calc(100% - 24px)}
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__aside-note i{display:none!important}

  /* Course cards: number, title, artwork and status in a simple column, so
     long titles no longer run into the artwork and the empty band at the top
     of each card goes. */
  html body #mainContent .journey-dashboard-v114 .course-paper-card-v63{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    min-height:0!important;height:auto!important;padding:26px 22px 18px!important;text-align:left!important;
  }
  html body #mainContent .journey-dashboard-v114 .course-paper-card-v63 > *{margin-top:0!important}
  html body #mainContent .journey-dashboard-v114 .course-paper-card-v63 h3{margin:6px 0 0!important;max-width:100%!important}
  html body #mainContent .journey-dashboard-v114 .course-paper-card-v63__art{
    position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;
    width:100%!important;height:96px!important;margin:10px 0 8px!important;
  }
  html body #mainContent .journey-dashboard-v114 .course-paper-card-v63__status{
    position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;width:100%!important;
  }

  /* Progress strip: stack the meter above full-width buttons. */
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__footer{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    padding:18px 18px 20px!important;
  }
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__progress{width:100%!important;min-width:0!important}
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__footer .bc63-btn{
    width:100%!important;justify-content:center!important;white-space:normal!important;
  }

  /* ---- Lesson pages -----------------------------------------------------
     The lesson grid tracks were sized to their widest child, which pushed
     the activity cards ~60px off the right of the screen. */
  html body #mainContent .unit-page,
  html body #mainContent .unit-body,
  html body #mainContent .unit-main,
  html body #mainContent .unit-rail,
  html body #mainContent .bc-stage-grid,
  html body #mainContent .bc-journey-strip{grid-template-columns:minmax(0,1fr)!important}
  html body #mainContent .unit-page > *,
  html body #mainContent .unit-body > *,
  html body #mainContent .unit-main > *,
  html body #mainContent .bc-stage-grid > *,
  html body #mainContent .bc-journey-strip > *{min-width:0!important;max-width:100%!important}
  html body #mainContent .bc-lesson-journey-head > span{display:block!important;white-space:normal!important}
  html body #mainContent .unit-card-head{flex-wrap:wrap!important;gap:6px 12px!important}
  html body #mainContent .unit-card-meta{white-space:normal!important}
  html body #mainContent .bc-journey-copy,
  html body #mainContent .bc-stage-card h3,
  html body #mainContent .bc-stage-card p{overflow-wrap:anywhere}

  /* ---- Tables (admin, organisation, reporting) --------------------------
     Wide tables scroll inside their panel rather than being cut off. */
  html body #mainContent .admin-table-wrap{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    max-width:100%!important;
  }
  html body #mainContent .dashboard-bottom-grid,
  html body #mainContent .report-panel{min-width:0!important;max-width:100%!important}
  html body #mainContent .dashboard-bottom-grid{grid-template-columns:minmax(0,1fr)!important}
  html body #mainContent .compact-panel-head{flex-wrap:wrap!important;gap:8px!important}

  /* ---- Forms -----------------------------------------------------------
     16px stops iOS zooming into a field when it is focused. */
  html body input:not([type=checkbox]):not([type=radio]):not([type=range]),
  html body select,
  html body textarea{font-size:16px!important;max-width:100%}

  /* Search fields: keep the icon clear of the placeholder text. */
  html body #mainContent .resource-command-box-v123 .resource-command-input-v123{padding-left:44px!important}

  /* Modals fit the screen and scroll. */
  html body .modal,
  html body .modal-card{max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 24px);overflow-y:auto}

  /* Leave room for the fixed bottom navigation. */
  html body #mainContent{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}
}

@media (max-width:380px){
  html body #mainContent .journey-dashboard-v114 .journey-dashboard-v114__quote{padding-left:60px!important;font-size:17px!important}
}

/* Small laptops and landscape tablets: the desktop top bar reserved fixed
   minimum widths for the brand and tools, so the account button ran off the
   right edge. Let the middle shrink and keep only the avatar for the account. */
@media (min-width:901px) and (max-width:1100px){
  html body #journeyNav{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:16px!important;
    padding:0 24px!important;
  }
  html body #journeyNav .journey-links{gap:16px!important;justify-content:center!important;min-width:0!important;overflow-x:auto;scrollbar-width:none}
  html body #journeyNav .journey-links::-webkit-scrollbar{display:none}
  html body #journeyNav .journey-tools{gap:10px!important;min-width:0!important}
  html body #journeyAccount > span,
  html body #journeyAccount > i{display:none!important}
  html body #journeyAccount{grid-template-columns:auto!important;padding:0!important;width:auto!important}
}