/* MOTION v2.6 · mobile layout guard
   Stand 26.09.2026 · 13:58 Uhr */

/* Viewport containment */
html,body,#app{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}
body{overscroll-behavior-x:none}
.shell,.workout{
  width:100%;
  max-width:560px;
  min-width:0;
  overflow-x:hidden;
}

/* Flex/grid children must be allowed to shrink without pushing the viewport */
.shell > *,
.workout > *,
.section,.section-head,.card,.hero,.hero-top,.hero-actions,
.program-list,.program-card,.program-body,
.exercise-list,.exercise-card,.exercise-main,
.list-row,.row-body,.detail-visual,
.form-grid,.field,.field-pair,
.workout-top,.workout-summary,.workout-picker-head,
.focus-hero,.exercise-focus,.set-row,.set-controls,
.cardio-box,.cardio-head,.cardio-metrics,
.report,.report-sheet,.progress-card,.trend-row,.trend-main{
  min-width:0;
  max-width:100%;
}
.grid-2,.field-pair,.form-actions,.workout-actions,.finish-secondary,.cardio-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

/* iPhone filter chips: never compress into each other */
.chips{
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:12px 0 7px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  scroll-snap-type:x proximity;
  touch-action:pan-x;
}
.chips::-webkit-scrollbar{display:none}
.chips > .chip,
.chips > button{
  flex:0 0 auto !important;
  flex-shrink:0 !important;
  width:max-content !important;
  min-width:max-content !important;
  max-width:78vw;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
  scroll-snap-align:start;
}

/* Prevent text/content from widening cards */
.program-name,.program-meta,.exercise-name,.exercise-meta,.exercise-value,
.row-title,.row-sub,.hero-title,.hero-meta,.focus-title,.focus-sub,
.detail-visual-title,.detail-visual-sub,.note-box,.question{
  max-width:100%;
}
.row-sub,.exercise-meta,.exercise-value,.note-box,.question{
  overflow-wrap:anywhere;
}
img,video,canvas{max-width:100%;height:auto}
svg{max-width:100%}
button,input,select,textarea{min-width:0;max-width:100%}

/* Intentional horizontal scrollers remain horizontal */
.setting-strip,.workout-picker{
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
}
.setting-chip,.workout-pick{flex:0 0 auto}

/* Modals stay inside the device width */
.modal-wrap{width:100%;max-width:100%;overflow-x:hidden}
.modal{width:100%;max-width:560px;min-width:0;overflow-x:hidden}

/* Reports and tables */
.report-sheet{overflow:hidden}
.report-table{width:100%;max-width:100%;table-layout:fixed}
.report-table th,.report-table td{overflow-wrap:anywhere;word-break:break-word}

/* Mobile-specific layout */
@media(max-width:430px){
  .shell{
    padding-left:max(14px,env(safe-area-inset-left,0px));
    padding-right:max(14px,env(safe-area-inset-right,0px));
  }
  .workout{
    padding-left:max(12px,env(safe-area-inset-left,0px));
    padding-right:max(12px,env(safe-area-inset-right,0px));
  }
  .chips{padding-right:1px}
  .chips > .chip,.chips > button{max-width:72vw}
  .search input{font-size:16px}
  .hero-top{flex-wrap:wrap}
  .hero-title{max-width:100%}
  .hero-badge{max-width:100%;white-space:normal}
  .hero-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .hero-actions .btn{width:100%;min-width:0;padding-left:12px;padding-right:12px}
  .nav{width:100%;max-width:560px;overflow:hidden}
  .nav-inner,.nav-btn{min-width:0}
  .set-row{grid-template-columns:34px minmax(0,1fr) 42px;gap:6px}
  .set-controls{min-width:0;gap:6px}
  .stepper{grid-template-columns:28px minmax(46px,1fr) 28px;max-width:100%}
  .stepper strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .interval-plan-row{grid-template-columns:22px minmax(0,1fr) auto}
  .interval-plan-row em{display:none}
  .report-head{flex-direction:column;gap:8px}
  .report-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
}

/* Very narrow devices */
@media(max-width:350px){
  .grid-2,.field-pair,.form-actions,.workout-actions,.finish-secondary,.cardio-actions,.hero-actions{
    grid-template-columns:1fr;
  }
  .report-grid{grid-template-columns:1fr}
}