/* STEP46 mobile stability: layout-only fixes for launch QA. */
@media (max-width: 760px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  main,
  .app,
  .screen,
  .container,
  .trPlatformCard,
  .p17Card,
  .trPayCard,
  .sl-portfolio,
  .sl-student-detail {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  #payments,
  #kidsnote,
  #portfolio,
  #album,
  #students {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  #payments input,
  #payments select,
  #payments textarea,
  #payments button,
  #kidsnote input,
  #kidsnote select,
  #kidsnote textarea,
  #kidsnote button,
  #portfolio input,
  #portfolio select,
  #portfolio textarea,
  #portfolio button,
  #album input,
  #album select,
  #album textarea,
  #album button {
    min-height: 44px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

  .trPayHero,
  .trPayCard,
  .p17ParentBox,
  .p17Card,
  .sl-portfolio-panel,
  .sl-student-detail {
    border-radius: 18px;
    padding: 14px;
  }

  .trPayHero h2,
  .p17Card h3,
  .trPayCard h3 {
    font-size: 22px;
    line-height: 1.2;
  }

  .trPayGrid,
  .trPayGrid3,
  .trPayForm,
  .p17Grid,
  .p17Grid3,
  .p17Form,
  .p17StatGrid,
  .p17AlbumGrid,
  .p17TopMenu {
    grid-template-columns: 1fr !important;
  }

  .trPayActions,
  .p17Tabs,
  .p17CommentForm,
  .sl-portfolio-actions,
  .sl-portfolio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .trPayActions button,
  .p17Tabs button,
  .p17CommentForm button,
  .sl-portfolio-actions button,
  .sl-portfolio-filters button {
    flex: 1 1 130px;
    min-width: 0;
  }

  .trPayTableWrap,
  .trPayTable,
  .p17Chat,
  .sl-portfolio-timeline {
    max-width: 100%;
  }

  .trPayTableWrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .trPayTable {
    min-width: 680px;
  }

  .trPayOrder,
  .trPayLinkBox,
  .trPayItem small,
  .p17ChatBubble,
  .sl-portfolio-card,
  .sl-portfolio-card * {
    overflow-wrap: anywhere;
    word-break: keep-all;
  }

  .p17Timeline:before {
    left: 10px;
  }

  .p17TimelineItem {
    margin-left: 30px;
    padding-left: 14px;
  }

  .p17TimelineItem:before {
    left: -28px;
  }

  .bottomDock,
  .dock,
  .navDock,
  .tkdPremiumDock {
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
}