/* Only the existing phone breakpoint. Desktop tracks and pagination are untouched. */
@media(max-width:759px), (max-height:500px) and (max-width:999px){
 body:has(#app.phone){height:auto;min-height:100dvh;overflow:visible}
 #app.phone{height:auto;min-height:100dvh;grid-template-rows:auto auto auto;align-content:start}
 #app.phone #stage-viewport:not(.route-stage),#app.phone #board.content-stage{height:auto;min-height:0;overflow:visible}
 #app.phone #stage-viewport.route-stage{height:min(calc(100vw - 24px),560px);min-height:0}
 #app.phone .content-stage>.center{height:auto;min-height:0;display:flex;flex-direction:column}
 #app.phone .content-stage .panel,#app.phone .content-stage .panel.catalog-panel{height:auto;max-height:none;overflow:visible;flex:none;justify-content:flex-start}
 #app.phone .content-stage .panel>.content-unit{flex:none;min-height:0}
 #app.phone #screen-footer,#app.phone #panel-actions{position:static;flex:none}
 #app.phone #screen-footer{padding-bottom:env(safe-area-inset-bottom)}
 #app.phone .content-stage .panel.split>.content-unit:has(>.art-container){flex:0 0 auto;height:auto}
 #app.phone .capacity-layout .art-container{height:160px;max-height:none;contain:none}
 #app.phone .capacity-layout .event-illustration{width:100%;height:100%;max-height:160px}
 #app.phone .metrics,#app.phone .capacity-panel>.metrics{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
 #app.phone .metrics>div{min-width:0}
 #app.phone .metrics strong{font-size:24px;line-height:1.5}
 #app.phone .metrics span{font-size:16px;line-height:1.5}
 #app.phone .mobile-unit,#app.phone .metrics strong .mobile-unit{display:inline;white-space:nowrap;font:inherit;color:inherit;margin:0}
 #app.phone .capacity-selection{display:grid;grid-template-columns:1fr;gap:12px}
 #app.phone .capacity-selection>.metrics{min-width:0}
 #app.phone .content-stage .actions{display:flex;flex-wrap:wrap;gap:12px}
 #app.phone .content-stage .actions>button,#app.phone .content-stage .actions>.button-link{flex:1 1 145px;min-width:0;min-height:48px;height:auto;line-height:1.5;padding:10px 12px}
 #app.phone .content-stage .actions>button:has(.mobile-unit){flex-basis:100%}
 #app.phone .option-card{--option-art:80px}
 #app.phone .option-card .option-copy{gap:6px}
 #app.phone .option-card h3{line-height:1.5}
 #app.phone .chart-detail-values>span,#app.phone .chart-detail-values>strong{white-space:nowrap}
 /* The demo and coach are consecutive content, not competing fixed-height panels. */
 body.tutorial-mode:has(#app.phone){display:block;height:auto;min-height:100dvh;padding:0}
 .tutorial-mode #app.phone{height:auto;min-height:0;flex:none;grid-template-rows:auto auto auto;padding:8px 12px;gap:8px}
 .tutorial-mode #app.phone .center{height:auto;min-height:0}
 .tutorial-mode:has(#app.phone) #tutorial-rail{position:relative;max-height:none;padding:12px 12px max(16px,env(safe-area-inset-bottom));width:100%}
 .tutorial-mode:has(#app.phone) .tutorial-dialog{gap:12px;padding:16px;grid-template-columns:1fr}
 .tutorial-mode:has(#app.phone) .tutorial-dialog>*{grid-column:1!important;margin:0}
 .tutorial-mode:has(#app.phone) .tutorial-dialog p{font-size:16px;line-height:1.6}
 .tutorial-mode:has(#app.phone) .tutorial-dialog .tutorial-progress,.tutorial-mode:has(#app.phone) .tutorial-dialog .tutorial-scenario,.tutorial-mode:has(#app.phone) .tutorial-dialog .tutorial-extra{font-size:14px;line-height:1.6}
 .tutorial-mode:has(#app.phone) .tutorial-dialog h2{font-size:22px;line-height:1.5}
 .tutorial-mode:has(#app.phone) .tutorial-dialog button{font-size:16px;min-height:48px}
 .tutorial-mode #app.phone .stats{grid-template-columns:1fr 1fr;gap:10px 0;padding:10px 0}
 .tutorial-mode #app.phone .stats>div:last-child{grid-column:1/-1}
 .tutorial-mode #app.phone .stats span{font-size:14px}.tutorial-mode #app.phone .stats strong{font-size:21px}
 .tutorial-mode #app.phone .content-stage .panel{overflow:visible;padding:12px 16px 18px}
 .tutorial-mode #app.phone .content-stage .screen-heading{padding:16px 16px 8px}
 .tutorial-mode #app.phone .screen-heading #phase{font-size:14px}
 .tutorial-mode #app.phone .metrics{grid-template-columns:1fr}
 .tutorial-mode #app.phone .metrics strong{font-size:24px}
 .tutorial-mode #app.phone #stage-viewport.route-stage{height:360px;min-height:360px}
}