/* EnduroLab v58 | mobile quality and consistency pass
 * Layered AFTER existing mobile CSS, leaving training logic and desktop intact.
 * New side drawer is the single route picker. Pages retain their local controls.
 */
@media (max-width:820px){
 /* Eliminate the old, duplicate section-chip strip. The v55 drawer already
    contains every primary/secondary route and tracks per-user visibility. */
 body.v55-ready .v53-context{display:none!important}
 body.v55-ready .main{
  width:100%;max-width:100%;min-width:0;
  padding-bottom:calc(29px + env(safe-area-inset-bottom))!important;
 }
 body.v55-ready .main>.view.active{width:100%;min-width:0}
 body.v55-ready .main>.view.active :is(.grid,.settings-grid,.plan-intro,.panel,.panel-pad,
  .formgrid,.v20-card,.v20-widget-grid,.v32-week-metrics,.device-grid,.se-grid){min-width:0;max-width:100%}
 body.v55-ready .main>.view.active :is(h1,h2,h3,p,small,label,strong,.hint,.muted){
  overflow-wrap:break-word;
 }
 /* One visual rhythm across old and new screens. Keep forms at their
    original location, never move or duplicate bound controls. */
 body.v55-ready .main>.view.active>.page-head{margin:4px 0 19px}
 body.v55-ready .main>.view.active>.page-head h1{
  font-size:clamp(28px,7.5vw,36px);line-height:1.13;letter-spacing:-1.15px;
  margin-bottom:9px;max-width:100%
 }
 body.v55-ready .main>.view.active>.page-head p{font-size:13px;line-height:1.55}
 body.v55-ready .main>.view.active :is(.panel,.v20-card,.v32-week-freedom,.device-top,
  .device-feature,.device-import-panel,.insights-studio){
  border-radius:16px;box-shadow:none;max-width:100%;min-width:0
 }
 body.v55-ready .main>.view.active :is(.panel-pad,.v20-card){padding:clamp(15px,4.4vw,20px)}
 body.v55-ready .main>.view.active .panel-header{
  flex-wrap:wrap;align-items:flex-start;row-gap:10px
 }
 body.v55-ready .main>.view.active :is(.panel-header h2,.v32-section-head h2){
  font-size:clamp(17px,4.8vw,21px);line-height:1.3
 }
 body.v55-ready .main>.view.active .grid{gap:13px;margin-bottom:15px}
 body.v55-ready .main>.view.active :is(.notice,.hint,.footnote,.chart-note){
  font-size:12px;line-height:1.6
 }
 /* Phone Safari auto-zooms inputs below 16px. Use readable controls and
    consistent heights without changing input values, handlers, or constraints. */
 body.v55-ready .main>.view.active :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select,textarea){
  min-width:0;max-width:100%;font-size:16px;line-height:1.3;
  border-radius:11px;min-height:44px
 }
 body.v55-ready .main>.view.active textarea{min-height:100px;resize:vertical}
 body.v55-ready .main>.view.active :is(.formgrid,.v27-form-grid,.v32-zwo-form){
  grid-template-columns:minmax(0,1fr);gap:12px
 }
 body.v55-ready .main>.view.active .field{min-width:0}
 body.v55-ready .main>.view.active :is(.btn,.checkbtn){
  min-height:42px;line-height:1.3;white-space:normal;text-align:center
 }
 body.v55-ready .main>.view.active .btn.sm{min-height:39px}
 body.v55-ready .main>.view.active :is(.btn,.checkbtn,button,summary){
  touch-action:manipulation
 }
 body.v55-ready .main>.view.active :is(.toolbar,.filter-group,.v27-actions,.dialog-footer){
  row-gap:9px
 }
 body.v55-ready .main>.view.active :is(.toolbar,.import-panel,.device-import-top){
  min-width:0;max-width:100%
 }
 /* Dedicated horizontal-scroll regions, rather than widening the entire
    screen on pages with long historical tables or chart comparisons. */
 body.v55-ready .main>.view.active :is(.chart-wrap,.is-plot,.wd-compare-scroll,
  .cal-history-wrap,.preview-scroll,.is-table-scroll){
  max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch
 }
 body.v55-ready .main>.view.active :is(.is-chart-shell,.wd-graph-card,.v20-widget-grid){
  min-width:0;max-width:100%
 }
 body.v55-ready .main>.view.active :is(.chart-wrap svg,.is-plot svg,.wd-svg){
  max-width:100%;height:auto
 }
 body.v55-ready .main>.view.active :is(.cal-history,.is-table,.wd-compare-table){
  border-collapse:collapse
 }
 /* Training calendar: preserve v28's native swipeable day rail, while making
    controls easy to tap and avoiding adjacent action collisions. */
 body.v55-ready #view-calendar .cal-top{min-width:0;padding:17px 14px!important;border-radius:17px}
 body.v55-ready #view-calendar .cal-toolbar{gap:12px;align-items:flex-start}
 body.v55-ready #view-calendar .cal-toolbar h2{font-size:20px}
 body.v55-ready #view-calendar .cal-toolbar .cal-actions{
  width:100%;display:flex;flex-wrap:wrap;gap:7px
 }
 body.v55-ready #view-calendar .cal-toolbar .cal-actions .btn{
  flex:1 1 85px;padding:10px 7px;min-height:42px;
  white-space:normal;font-size:12px
 }
 body.v55-ready #view-calendar .v28-day-rail button{min-height:44px}
 body.v55-ready #view-calendar .cal-grid{
  min-width:0;max-width:100%;grid-auto-flow:column;
  grid-auto-columns:minmax(220px,81vw);overflow-x:auto;overflow-y:hidden;
  gap:10px;scroll-snap-type:x proximity;padding:3px 3px 14px;
 }
 body.v55-ready #view-calendar .cal-day{
  min-width:0;min-height:200px;max-height:480px;scroll-snap-align:start;
  border-radius:15px;padding:13px
 }
 body.v55-ready #view-calendar .cal-session{border-radius:10px}
 body.v55-ready #view-calendar .cal-session .cal-mini{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px
 }
 body.v55-ready #view-calendar .cal-session .cal-mini button{
  min-width:0;width:100%;min-height:34px;padding:7px 5px;font-size:11px;
  white-space:normal;line-height:1.25
 }
 body.v55-ready #view-calendar .cal-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px
 }
 body.v55-ready #view-calendar .cal-stat{min-width:0}
 body.v55-ready #view-calendar .week-main-actions{gap:8px}
 /* Progress screens: small readable KPI cards and charts that scale rather
    than forcing tiny labels or sideways page scrolling. */
 body.v55-ready #view-insights .is-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 body.v55-ready #view-insights .is-controls>.is-control:last-child{grid-column:1/-1}
 body.v55-ready #view-insights .is-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 body.v55-ready #view-insights .is-kpi{padding:14px;min-width:0}
 body.v55-ready #view-insights .is-kpi strong{font-size:clamp(21px,6vw,27px)}
 body.v55-ready #view-insights .is-chart-shell{padding:15px 10px 12px}
 body.v55-ready #view-insights .is-plot{min-height:160px}
 body.v55-ready #view-insights .is-control select{width:100%;font-size:16px;min-height:44px}
 /* Activities: retain the existing detail/edit semantics, remove cramped
    controls and preserve horizontal scrolling inside comparisons. */
 body.v55-ready #view-activities .activity-card{
  border-radius:15px;padding:15px 13px;column-gap:10px;row-gap:11px
 }
 body.v55-ready #view-activities .activity-card :is(.wd-details-action,.btn){
  min-height:42px
 }
 body.v55-ready #view-activities :is(.activity-meta,.source){overflow-wrap:anywhere}
 body.v55-ready #view-activities .activity-numbers{min-width:0}
 body.v55-ready #view-activities .wd-compare-scroll{
  border-radius:11px;scrollbar-width:thin
 }
 /* Account hub: keep its useful second-level setting sections, but show
    comfortable tap targets rather than tiny chips. */
 body.v55-ready #view-settings .acct-hero{padding-top:1px;margin-bottom:17px}
 body.v55-ready #view-settings .acct-hero h1{
  font-size:clamp(29px,7.5vw,35px);letter-spacing:-1px;margin-bottom:8px
 }
 body.v55-ready #view-settings .acct-hero p{font-size:13px;line-height:1.6}
 body.v55-ready #view-settings .acct-nav{
  top:0;padding:8px 2px 11px;gap:8px;scroll-padding-inline:8px;
  -webkit-overflow-scrolling:touch
 }
 body.v55-ready #view-settings .acct-nav button{
  min-height:44px;padding:10px 14px;scroll-snap-align:start
 }
 body.v55-ready #view-settings .acct-stack{gap:13px}
 body.v55-ready #view-settings .acct-stack>.panel{min-width:0}
 body.v55-ready #view-settings .acct-subdetails>summary{
  min-height:52px;align-items:center;line-height:1.4
 }
 body.v55-ready #view-settings .acct-quick{min-height:84px}
 /* Floating overlays must fit both iPhone SE and the software keyboard.
    Dynamic vh avoids Safari's expanding/collapsing address bar. */
 .dialog-backdrop.open{
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
 }
 .dialog-backdrop .dialog{
  width:100%;max-width:min(760px,100%);max-height:calc(100dvh - 28px);
  overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px;border-radius:16px
 }
 .dialog-backdrop .dialog-head h2{font-size:clamp(20px,5.5vw,26px)}
 .dialog-backdrop .dialog-close{min-width:43px;min-height:43px}
 .dialog-backdrop :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  font-size:16px;max-width:100%
 }
 .dialog-backdrop .formgrid{grid-template-columns:minmax(0,1fr)}
 .dialog-backdrop .dialog-footer .btn{min-height:44px}
 .v27-inbox{
  left:12px;right:12px;top:calc(60px + env(safe-area-inset-top));
  width:auto;max-width:none;
  max-height:calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y:auto;border-radius:16px
 }
 .v58-build-label{margin-left:auto;border:1px solid var(--el-border,var(--border));padding:3px 7px;border-radius:999px;font-size:10px;color:var(--muted);font-weight:800}
 .toast{bottom:calc(17px + env(safe-area-inset-bottom));left:12px;right:12px;
  max-width:none;width:auto;text-align:center;z-index:75
 }
 /* Clear, consistent keyboard focus wherever a UI control appears. */
 body.v55-ready :is(.v55-hamburger,.v54-brand,.v55-close,.v55-sub-link,
  .acct-nav button,.v54-jumps button,.cal-day button):focus-visible{
  outline:3px solid var(--el-accent,var(--lime));outline-offset:2px
 }
}
@media(max-width:390px){
 body.v55-ready .main{padding-inline:12px}
 body.v55-ready #view-calendar .cal-grid{grid-auto-columns:minmax(220px,87vw)}
 body.v55-ready #view-insights .is-control{min-width:0}
 body.v55-ready #view-settings .acct-nav button{padding-inline:11px}
 body.v55-ready .main>.view.active .panel-pad{padding:15px 13px}
}
@media(prefers-reduced-motion:reduce){
 body.v55-ready .main>.view.active *{scroll-behavior:auto}
}