/* Mobile optimisation overrides for the Clarity guided demo screens.
   Loaded after each page's inline <style>, so these rules win. */

@media (max-width: 1050px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Shells are desktop side-by-side flex rows: stack them. */
  .app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .app > main,
  main,
  .main,
  .left,
  .right,
  .chat,
  .side,
  .aside,
  .panel {
    min-width: 0;
    max-width: 100%;
  }

  .nav {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  .body {
    flex-direction: column;
  }

  .wrap,
  .top {
    max-width: 100%;
  }

  /* Nothing should force horizontal scroll of the page itself. */
  img,
  svg,
  canvas,
  video {
    max-width: 100%;
    height: auto;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Grids that are still multi-column at phone sizes. */
  .grid,
  .lanes,
  .cards,
  .cols,
  .two,
  .three {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.18 !important;
  }

  h2 {
    font-size: clamp(16px, 4.6vw, 20px) !important;
  }

  /* Floating helpers should not cover the content on small screens. */
  .coach,
  .fab,
  .float {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    transform: none !important;
  }
}

@media (max-width: 700px) {
  /* Guided-demo launcher: keep it on screen, out of the way. */
  .demo {
    right: 12px !important;
    left: auto !important;
    bottom: 12px !important;
    max-width: calc(100vw - 24px);
  }
}