/* Compact controls on narrow or short screens retain target sizes and behavior. */
#mobileRideOptions{margin:0 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
#mobileRideOptions h3{font-size:16px;margin:0 0 12px}
.mobile-ride-settings{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:14px}
.mobile-ride-settings select{width:100%;min-height:44px;font-size:14px}
.mobile-ride-settings .effort{display:flex;gap:12px;font-size:12px}
.mobile-ride-settings input{flex:1;min-width:0;min-height:44px}
.mobile-ride-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mobile-ride-actions button{min-height:44px;font-size:13px}
@media(max-width:1100px), (max-height:760px){
 #guestPanel.mobile-compact{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"speed modes modes" "steer actions pedals";gap:12px;align-items:end}
 #guestPanel.mobile-compact .ride-control{display:flex;flex-direction:column;max-width:none;width:100%;gap:6px}
 #guestPanel.mobile-compact .ride-control>label{width:100%}
 #guestPanel.mobile-compact #movementStatus[data-routine="true"]{display:none}
 #guestPanel.mobile-compact .ride-buttons{display:grid;grid-template-columns:1fr;max-width:none;width:100%;gap:6px;align-self:end}
 #guestPanel.mobile-compact .ride-buttons button{min-height:44px;padding:6px;font-size:11px}
 #guestPanel.mobile-compact .host-locator{background:#14262be8;border-radius:8px;padding:7px 9px}
 #guestPanel.mobile-compact #joystick{align-self:end}
}
@media(max-height:500px) and (min-width:521px) and (max-width:1100px){
 #guestPanel.mobile-compact{left:16px;right:16px;bottom:20px;grid-template-columns:44px minmax(170px,320px) minmax(0,1fr) 64px auto 84px;grid-template-areas:"speed modes gap steer pedals actions";gap:10px}
 #guestPanel.mobile-compact .ride-buttons{width:84px}
 #guestPanel.mobile-compact .ride-control{align-self:end}
 #guestPanel.mobile-compact .host-locator small{display:block;margin:2px 0 0}
 #guestPanel.mobile-compact .speedometer{align-self:end}
 body:has(#guestPanel.mobile-compact) .ride-top{top:72px;left:16px;right:16px;align-items:center;gap:8px}
 body:has(#guestPanel.mobile-compact) #ridePresence{margin:0;padding:0}
 body:has(#guestPanel.mobile-compact) #guestConversation{flex-basis:auto;width:auto;max-width:none;margin:0}
}
@media(max-width:360px){
 #guestPanel.mobile-compact{grid-template-columns:58px minmax(0,1fr) auto;gap:9px}
 #guestPanel.mobile-compact .ride-buttons button{font-size:10px}
}

/* Phone help belongs with Setup options, keeping the forward scene clear. */
#mobileRideOptions .ride-control-guidance{position:static;display:block;margin-top:16px;max-width:none;font-size:13px;text-shadow:none}
#mobileRideOptions .ride-control-help summary{min-height:44px;font-size:13px}
#mobileRideOptions .ride-control-instructions{position:static;width:auto;max-height:none;margin-top:8px;box-shadow:none}
#mobileRideOptions .ride-control-cue{display:block;max-width:none;margin-top:8px;background:none;padding:0;line-height:1.5}

/* A short desktop window needs compact controls, not full-width control bars. */
@media(min-width:1101px) and (max-height:760px){
 #guestPanel.mobile-compact{max-width:760px;margin-left:auto;margin-right:0}
}