/* Keep controls in their own tracks even when web fonts are unavailable. */
#garage :is(button, label, fieldset, .garage-pages, .garage-tabs){min-width:0}
#garage .market-card{grid-template-columns:40px minmax(0,1fr)}
#garage .market-card>strong{font-size:clamp(26px,3vw,44px);overflow-wrap:anywhere}
#garage .market-card .market-selected{min-width:0}
#garage .acid-risk-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
#garage .acid-risk-metrics .specs>span{min-width:0}
#garage .acid-risk-metrics .specs>span:nth-child(2){grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px}
#garage .acid-risk-metrics .specs>span:nth-child(2) small{margin:0}
#garage .acid-risk-metrics :is(strong,b){font-size:18px;line-height:1.2}
#garage .acid-risk-presets button{font-size:16px;overflow-wrap:normal}
#garage #start .acid-launch-type{font-size:clamp(46px,4.2vw,64px);min-width:0}
#garage #start .button-label{min-width:0;overflow-wrap:anywhere}
#garage #setupPage .audio-row{grid-template-columns:max-content minmax(0,1fr);grid-template-rows:minmax(44px,auto) 44px}
#garage .acid-audio-kind{font-size:24px;line-height:1.2}
#garage #setupPage .audio-volume{grid-template-columns:minmax(0,1fr) max-content}
#garage #setupPage .audio-volume output{font-size:18px;line-height:1.3;min-width:4.5ch;white-space:nowrap}
#garage #setupPage .audio-row>label>span{min-width:0;overflow-wrap:anywhere}
#garage .vehicle-options{grid-template-columns:repeat(2,minmax(0,1fr))}
#garage .vehicle-options button{min-width:0;overflow-wrap:anywhere}
#garage .vehicle-options strong{font-size:18px;line-height:1.2}
#garage .acid-identity :is(h2,h3,legend){overflow-wrap:anywhere}
#garage .acid-finishes button{min-width:0}

@media(min-width:801px) and (min-height:501px){
 #garage .garage-heading .acid-title{font-size:clamp(34px,4.4vw,64px)}
 #garage>.garage-leaderboard{bottom:calc(var(--deck-height) + 100px);overflow:auto;scroll-padding:8px;scrollbar-width:thin}
 #garage .garage-tabs{max-width:calc(100% - var(--rail-width) - var(--grid-gap));display:grid;grid-template-columns:auto auto minmax(140px,190px);align-items:stretch}
 #garage .garage-tabs button{padding-inline:14px}
 #garage .garage-tabs #quickVehicle{width:100%;min-width:0}
 #garage.acid-setup-open .garage-heading .acid-title{font-size:36px;line-height:1.1;margin:0;gap:8px}
 #garage.acid-setup-open .garage-heading>.eyebrow{margin-bottom:8px}
 #garage.acid-setup-open .garage-tabs{top:82px;bottom:auto}
 #garage.acid-setup-open .garage-pages{top:144px;bottom:22px;max-height:none}
 #garage.acid-setup-open .garage-leaderboard{display:none}
 #garage #setupPage{scroll-padding-block:12px;padding:4px 8px 12px 4px}
}

/* Intermediate widths need the same flowing garage as phones. A fixed desktop
   deck at 801px leaves less than 150px per market and collides with the title. */
@media(min-width:801px) and (max-width:1100px) and (min-height:501px), (min-width:1101px) and (min-height:501px) and (max-height:700px){
 #garage.panel{inset:88px max(20px,env(safe-area-inset-right)) max(96px,calc(80px + env(safe-area-inset-bottom))) max(20px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:16px;overflow:auto;overscroll-behavior:contain;padding:0 0 12px;pointer-events:auto;scrollbar-width:thin;scroll-padding:12px}
 #garage>.garage-heading{order:0;position:relative;inset:auto;width:100%;min-height:clamp(220px,40dvh,440px);flex-shrink:0;padding-right:56px}
 #garage .garage-heading .acid-title{font-size:clamp(34px,5.3vw,52px);line-height:1.1;display:flex;gap:8px;margin:0 0 8px}
 #garage .garage-heading>.eyebrow,#garage .garage-heading>.intro{display:none}
 #garage .garage-heading h1{font-size:18px;visibility:visible}
 #garage .acid-aux{top:0;right:0;gap:0}
 #garage .acid-aux #menuMotion{display:none}
 #garage #marketInfo{width:44px;height:44px;padding:10px}
 #garage #marketInfo .button-label{display:none}
 #garage>.garage-leaderboard{order:1;position:relative;inset:auto;width:100%;margin:0;flex-shrink:0;box-shadow:none}
 #garage .lb-home-content{min-height:0}
 #garage .lb-home-empty{min-height:72px}
 #garage>.acid-risk-rail{order:2;position:relative;inset:auto;width:100%;margin:0;flex-shrink:0}
 #garage .acid-risk-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 24px}
 #garage .acid-risk-controls .risk{grid-column:1;grid-row:1/3}
 #garage .acid-risk-controls .acid-risk-note{grid-column:1/-1;margin:0}
 #garage>.garage-tabs,#garage.acid-setup-open>.garage-tabs{order:3;position:relative;inset:auto;width:100%;max-width:none;margin:0;grid-template-columns:1fr 1fr minmax(140px,1fr);flex-shrink:0}
 #garage>.garage-pages,#garage.acid-setup-open>.garage-pages{order:4;position:relative;inset:auto;width:100%;height:auto;max-height:none;margin:0;overflow:visible;flex-shrink:0}
 #garage .garage-launch{position:fixed;inset:auto max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));width:auto;z-index:4;padding:8px 0 0;background:#131313f5}
 #garage .garage-launch #start{height:auto;min-height:56px;padding:12px 20px;grid-template-columns:minmax(0,1fr) 24px;grid-template-rows:1fr;gap:12px}
 #garage #start .acid-launch-type{display:none}
 #garage #start .button-label{grid-column:1;grid-row:1;font-size:20px;line-height:1.4;text-align:center}
 #garage #start .control-icon{grid-column:2;grid-row:1;width:24px;height:24px}
 #garage .market-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 #garage .market-card{min-height:140px}
 #garage .market-card>strong{font-size:32px}
 #garage.acid-setup-open>.garage-heading{min-height:80px}
 #garage.acid-setup-open .garage-heading h1{display:none}
 #garage #setupPage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;height:auto;max-height:none;overflow:visible;padding:4px}
 #garage .acid-setup-display{display:none}
 #garage #setupPage .audio-controls{grid-column:2;grid-row:1;display:block;width:100%;margin:0;padding:12px}
 #garage #setupPage .audio-row{margin-bottom:12px}
 #garage .acid-setup-footer{grid-column:1/-1;grid-row:2;flex-wrap:wrap}
 #garage .acid-setup-footer .disclaimer{max-width:none}
 #garage .acid-keyhint,#garage>.acid-vehicle{display:none}
}

@media(max-width:800px){
 #garage.panel{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));scroll-padding-block:12px 90px}
 #garage .garage-launch{left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right))}
 #garage .market-card{grid-template-columns:28px minmax(0,1fr) 90px}
 #garage .market-card>strong{font-size:28px}
}
@media(max-height:500px) and (min-width:501px){
 #garage.panel{scroll-padding-block:12px}
 #garage .acid-risk-controls .acid-risk-presets{display:grid}
 #garage .garage-launch{left:auto;right:max(20px,env(safe-area-inset-right))}
 #garage .market-card{grid-template-columns:28px minmax(0,1fr) 90px}
 #garage #setupPage .audio-controls{max-width:100%}
 /* The fixed launch button owns the right rail throughout scrolling. */
 #garage.garage-competition>.garage-leaderboard{width:calc(100% - var(--mobile-rail) - 16px);display:block;padding:10px 12px}
 #garage .garage-leaderboard .lb-home-heading{padding-right:48px}
 #garage .garage-leaderboard .lb-home-scope{margin:4px 44px 6px 0;white-space:normal}
 #garage .garage-leaderboard .lb-home-environment{position:static;margin:0 0 6px}
 #garage .garage-leaderboard .lb-home-table tbody{display:block}
 #garage .garage-leaderboard .lb-home-table tr{grid-template-columns:minmax(32px,max-content) minmax(0,1fr) auto;grid-template-rows:auto;gap:8px;padding:6px 0}
 #garage .garage-leaderboard .lb-home-table .lb-rank{grid-column:1;grid-row:1}
 #garage .garage-leaderboard .lb-home-table .lb-driver{grid-column:2;grid-row:1;font-size:12px}
 #garage .garage-leaderboard .lb-home-table .lb-time{grid-column:3;grid-row:1;font-size:18px;align-self:center}
}