/* Garage on a tablet such as an iPad (screens of 600 to 1023px; base.html loads this file only there).
   Material 3 calls this the medium width: a navigation rail on the left with icons and their names, the content
   in two columns where it fits. The actions stay in the header of a page, there is room for them here.
   app.css holds what all designs share: colours, type and the parts such as buttons, cards and the plate. */

/* the navigation rail */
body:has(> .topbar.signed) { padding-left: 88px; }
.topbar.signed { position: fixed; inset: 0 auto 0 0; width: 88px; border: 0; background: var(--bg-2); z-index: 20; }
.topbar.signed .wrap { height: 100%; max-width: none; padding: 12px 0 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.topbar.signed .logo { height: 56px; gap: 0; font-size: 0; margin-bottom: 8px; }  /* the mark only, the name does not fit */
.topbar.signed .nav { flex-direction: column; margin: 0; gap: 12px; }
.topbar.signed .nav a { width: 80px; height: auto; flex-direction: column; gap: 4px; padding: 0; border-radius: 0;
  background: none !important; font-size: .75rem; color: var(--muted); }
.topbar.signed .nav a > span:not(.pill) { display: block; }
.topbar.signed .nav .pill { width: 56px; height: 32px; border-radius: 16px; transition: background-color .2s var(--ease); }
.topbar.signed .nav a:not(.active):hover .pill { background: var(--state); }
.topbar.signed .nav a.active { color: var(--text); }
.topbar.signed .nav a.active .pill { background: var(--accent-soft); animation: pill-in .3s var(--ease); }
.topbar.signed .account-menu { margin-top: auto; }
.topbar.signed .account-menu summary { width: 56px; height: 56px; padding: 0; justify-content: center; border-radius: 28px; }
.topbar.signed .account-menu .menu { top: auto; bottom: 0; left: calc(100% + 8px); right: auto; }
.wrap { padding: 0 24px; }

/* the vehicle page: the photo next to the name, the vehicle itself in a narrow column on the right */
.vgrid { grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; }

/* a small tablet or a phone on its side: one column, the photo on top */
@media (max-width: 719.98px) {
  .vgrid { grid-template-columns: minmax(0, 1fr); }
  .vside, .vmain { grid-column: 1; grid-row: auto; }
  .vhead.band { grid-template-columns: minmax(0, 1fr); }
  .band .viewer { order: -1; min-height: 0; aspect-ratio: 16 / 9; }
}