#garage .modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#garage .modes>a{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;min-width:44px;min-height:56px;border:1px solid #63819066;background:linear-gradient(140deg,#263b45,#172a33);border-radius:9px;color:#e6c48e;text-decoration:none;font:700 10px Arial,sans-serif;letter-spacing:.05em}#garage .modes>a i{font:8px monospace;opacity:.65}#garage .modes>a:hover{border-color:#e6c48e}#garage .modes>a:focus-visible{outline:2px solid #e6c48e;outline-offset:3px}@media(max-width:700px){#garage .modes{gap:3px}#garage .modes button,#garage .modes>a{font-size:8px;min-height:48px;padding:8px 2px}}
/* Three labels, and two of them are two words. At 320 px the row was forcing
   345 px because each cell sized to its longest word; let them wrap and keep
   the grid honest. */
.modes{min-width:0}
.modes>*{min-width:0}
.modes>a span,.modes button span{display:block;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.15}
/* `1fr` is minmax(auto,1fr), so the garage column was sized by its widest
   child's min-content - 372 px inside a 284 px container at 320 px wide - and
   anything in it stuck out of the screen. That was already true; three longer
   mode labels are just what made it visible. */
@media(max-width:650px){#garage .garage-bottom{grid-template-columns:minmax(0,1fr)}}
#garage .garage-actions,#garage .sled-info{min-width:0}