/* R81: one mobile work area; station, action and observed result stay together. */
#more-understand{display:none}.bottle-observation{padding:10px 12px;background:#fff3da;border:1px solid #c8a568;border-radius:8px;font-size:13px;line-height:1.4}.bottle-observation button{margin-top:8px;min-height:44px;font-size:13px}.mobile-scenario{display:none}
@media(max-width:820px),(max-height:560px){
 html{height:auto;overflow-x:hidden}body{height:auto;min-height:100svh;overflow:visible;display:block;padding-bottom:env(safe-area-inset-bottom)}
 .topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;padding:9px max(12px,env(safe-area-inset-left));min-height:64px}
 .topbar .brand{font-size:22px;border:0;padding:0;letter-spacing:-.7px}.topbar .brand .r31-back-label{display:block;font-size:10px;letter-spacing:0;margin-top:4px;line-height:1.35}
 .topbar .title{display:block}.topbar .title h1{font-size:14px;line-height:1.25;margin:0;letter-spacing:-.3px}.topbar .title .eyebrow{display:none}
 .topbar .controls{display:contents}.topbar .controls #pause{font-size:13px;min-width:78px;min-height:44px}.mobile-tabs{display:none}
 .workspace,.workspace[data-mobile=plant],.workspace[data-mobile=actions]{display:flex;flex-direction:column;height:auto;overflow:visible;gap:0;min-height:0}
 .workspace .plant,.workspace[data-mobile=actions] .plant{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto clamp(330px,48svh,470px) auto;grid-template-areas:"stations" "stage" "metrics";height:auto;overflow:visible}
 .station-rail{grid-area:stations;padding:5px 9px;gap:4px}.station-rail button{min-height:46px}.station-rail button strong{font-size:12px}
 .stage{grid-area:stage;min-height:330px}.workspace .metrics{grid-area:metrics;padding:7px 12px;gap:9px;border-top:1px solid #c0cfc5}.workspace .metrics span{max-width:none;font-size:11px}.workspace .metrics strong{font-size:21px}.workspace .metrics>div+div{padding-left:9px}
 .workspace .plant-foot{display:none}.workspace .stage-caption,.workspace[data-mobile=actions] .stage-caption{display:flex;top:8px;max-width:calc(100% - 20px);padding:5px 8px}.stage-caption strong{font-size:11px;line-height:1.3}.stage-caption #render-mode{display:none}
 .workspace .stage-toolbar,.workspace[data-mobile=actions] .stage-toolbar{display:flex;left:10px;right:10px;bottom:8px;gap:6px}.stage-toolbar button{min-height:44px;font-size:12px;padding:8px 10px}.stage-toolbar span{display:none}
 .workspace .inspector,.workspace[data-mobile=actions] .inspector,.workspace[data-mobile=plant] .inspector{display:flex;flex-direction:column;align-items:stretch;min-width:0;min-height:0;height:auto;max-width:none;margin:0;padding:15px max(16px,env(safe-area-inset-left)) 22px;border:0;border-top:1px solid #c2d0c6;border-radius:0;overflow:visible;box-shadow:none}
 .station-selector{display:none}.panel-heading h2{font-size:21px;line-height:1.2;margin:0 0 5px;letter-spacing:-.35px}.panel-heading p{font-size:15px;line-height:1.45;margin-top:8px}
 .panel-live{margin:4px 0 10px;padding:5px 0 8px;border-top:0;gap:4px}.panel-live>span{font-size:13px}.panel-live>strong{font-size:19px}.meter{height:3px}
 .panel-main{flex:none;gap:10px}.station-setting{order:-1;padding:9px 12px}.station-setting label{font-size:14px}.station-setting output{font-size:17px}.station-setting input{min-height:44px}
 #panel-actions button{min-height:46px;font-size:15px;line-height:1.3;padding:11px 13px}.feedback{font-size:13px;line-height:1.4;padding:8px 10px}.bottle-observation{font-size:14px}.bottle-observation button{font-size:14px;min-height:44px;width:100%}
 #more-understand{display:block;min-height:44px;text-align:left;font-size:14px;background:transparent;border-color:#bdcdc4}#more-understand::after{content:' +';float:right}.inspector[data-details=true] #more-understand::after{content:' −'}
 .inspector[data-details=false] #panel-copy,.inspector[data-details=false] #next-step,.inspector[data-details=false] .secondary-action,.inspector[data-details=false] #effect,.inspector[data-details=false] .panel-foot,.inspector[data-details=false] .mobile-scenario{display:none}
 #next-step{font-size:14px;line-height:1.45}.effect strong{font-size:14px}.effect p{font-size:13px}.panel-foot{display:flex}.panel-foot button{min-height:44px;font-size:14px}
 .mobile-scenario{display:flex;align-items:end;gap:8px;border-top:1px solid #ccd6cc;padding-top:12px}.mobile-scenario label{display:grid;gap:5px;flex:1;min-width:0;font-size:13px}.mobile-scenario select{min-height:44px;max-width:100%;width:100%;font-size:16px;padding:8px;border:1px solid #adbfb3;border-radius:7px;background:white}.mobile-scenario #reset{min-height:44px;font-size:13px}
 #macro{left:10px;bottom:115px;width:116px;height:154px;z-index:5}#macro #macro-caption{font-size:10px;min-height:28px;padding:4px 6px}
 .workspace .tracking,.workspace[data-mobile=actions] .tracking{left:10px;right:10px;bottom:59px;max-width:none;padding:6px 9px;min-height:49px;gap:8px}.tracking>div{min-width:0;flex:1}.tracking strong{font-size:12px}.tracking span{font-size:11px;line-height:1.3}.tracking #track-close{min-width:60px;min-height:44px;font-size:12px;border:1px solid #c2ad83;border-radius:6px;background:#fffaf0;padding:6px}
}
@media(max-height:560px) and (min-width:700px){
 .workspace,.workspace[data-mobile=actions]{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,40%);align-items:start}.workspace .plant,.workspace[data-mobile=actions] .plant{grid-template-rows:auto minmax(320px,60svh) auto}.workspace .inspector,.workspace[data-mobile=actions] .inspector{border-left:1px solid #c2d0c6;border-top:0}.stage{min-height:320px}
}
@media(prefers-reduced-motion:reduce){.meter i{transition:none}}