/* Garage on a phone (screens narrower than 600px; base.html loads this file only there).
   Its own design, after the Material 3 and Apple guidelines for a phone: a bar at the top, the navigation at the
   bottom and the main action floating within reach of your thumb, text of 16px, everything you tap at least 44px,
   the save button fixed at the bottom of a form and a menu that slides up from the bottom.
   app.css holds what all designs share: colours, type and the parts such as buttons, cards and the plate. */

/* the app shell: a bar at the top, the navigation at the bottom within reach of your thumb */
.topbar.signed .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0; gap: 0;
  height: calc(80px + env(safe-area-inset-bottom, 0px)); padding: 0 max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px));
  background: var(--card); justify-content: space-around; }
.topbar.signed .nav a { flex: 1; flex-direction: column; justify-content: center; gap: 4px; height: auto; 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: 64px; height: 32px; border-radius: 16px; transition: background-color .2s var(--ease); }
.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-left: auto; }
body:has(> .topbar.signed) main.wrap { padding-bottom: 120px; }

/* the vehicle page: one column, the main action floats at the bottom right */
.vgrid { grid-template-columns: minmax(0, 1fr); }
.vside, .vmain { grid-column: 1; grid-row: auto; }
/* the odometer first (noting the km is what you do most), then the tabs with the planning; the data and the costs
   below them, instead of three cards to scroll past before you see what needs doing */
.vside { display: contents; }
.vside > .kmcard { order: -1; }
.vside > :not(.kmcard) { order: 1; }
.vhead .actions { display: none; }  /* the floating button takes over */
.fab { display: inline-flex; position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 24;
  height: 56px; padding: 0 20px 0 16px; gap: 12px; align-items: center; border-radius: 16px; background: var(--accent); color: var(--on-accent);
  font-weight: 500; box-shadow: var(--float); }
.fab:hover { color: var(--on-accent); text-decoration: none; background: var(--button-hover); }

/* idea 1: the band with the photo on top */
.vhead.band { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.band .viewer { order: -1; min-height: 0; aspect-ratio: 16 / 10; }
.band .vhead-text { padding: 20px; }

/* sizes for a thumb (Apple: tap at least 44pt, text 17pt; Material: 48dp): tighter spacing, but text and buttons
   do not shrink. Fields stay at 16px or more, or Safari on an iPhone zooms in as soon as you tap one. */
body { font-size: 16px; }
input, select, textarea { font-size: 16px; }
main.wrap { padding-top: 16px; }
h1 { font-size: 1.75rem; }
.header { margin-bottom: 16px; gap: 12px; }
.back { min-height: 44px; margin-bottom: 0; }
.card { padding: 16px; }
.section { margin-top: 28px; }
.btn { height: 44px; padding: 0 20px; }
.btn.small { height: 40px; padding: 0 16px; }

/* vehicle page */
.vhead.band { border-radius: 20px; }
.band .viewer { aspect-ratio: 16 / 9; }
.band .vhead-text { padding: 14px 16px 16px; gap: 4px; }
.band h1 { font-size: 1.5rem; line-height: 1.15; }
.band .eyebrow { font-size: .8125rem; }
.band .viewer-actions { left: 10px; bottom: 10px; }
.vgrid { gap: 12px; margin-top: 12px; }
.vside { gap: 12px; }
.tabs { margin-top: 4px; }
.tabs a { padding: 0 16px; }
.tabs a[aria-current="page"]::after { left: 16px; right: 16px; }
.kmcard { gap: 6px; }
.odometer .drum { width: 19px; height: 28px; font-size: 16px; }
.odometer .roll span { height: 28px; line-height: 28px; }
.stat { gap: 12px; }
.stat .icon { width: 36px; height: 36px; }
.stat strong { font-size: 1.25rem; }
.specs-list div { padding: 6px 0; }
.plan { padding: 14px 16px; }
.recent-row { grid-template-columns: 76px 1fr auto; gap: 10px; padding: 10px 16px; min-height: 56px; }
.tiles { gap: 8px; }
.tile { min-height: 64px; padding: 10px 12px; gap: 12px; }
.tile > .i { width: 36px; height: 36px; padding: 8px; }
.tile small { font-size: .875rem; }
.hint { padding: 14px 16px; gap: 12px; }
.hint .btn { width: 100%; }
.timeline { padding-left: 48px; }
.timeline::before { left: 16px; }
.moment-icon { left: -48px; width: 34px; height: 34px; }
.moment .card { padding: 12px 14px; }

/* start page: what needs doing on top, your vehicles as compact rows you tap as a whole; adding one floats at the bottom */
.hide-phone { display: none !important; }
/* the counts as one low row (number and word side by side), so the list starts higher on the screen */
.overview { gap: 10px; margin-bottom: 16px; }
.counts .count { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding: 8px 12px; }
.counts .count strong { font-size: 1.25rem; }
.next-row { min-height: 56px; padding: 8px 4px; }
.next-row .when { font-size: .875rem; }
.garage { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* every row the same height: the photo, the name with its status as a small badge at the end, plate and km below */
.vehicle-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 16px; min-height: 102px; padding: 12px 0;
  background: none; border-radius: 0; border-bottom: 1px solid var(--line); }
.vehicle-card:hover { transform: none; box-shadow: none; }
.vehicle-card .image { margin: 0; aspect-ratio: 4 / 3; border-radius: 12px; }
.vehicle-card .image > .i { width: 36px; height: 36px; }
.vehicle-card .info { padding: 0; gap: 8px; }
.vehicle-card .title { flex-wrap: nowrap; gap: 8px; }
.vehicle-card h3 { font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the status as a round badge with only its icon; the word stays for a screen reader */
.vehicle-card .title .chip { flex: none; width: 28px; padding: 0; justify-content: center; border-radius: 14px; font-size: 0; gap: 0; }
.vehicle-card .title .chip .i { width: 16px; height: 16px; }
.vehicle-card .meta { font-size: .875rem; flex-wrap: nowrap; }
.vehicle-card .meta > span:nth-child(n+3) { display: none; }  /* the plate and the km; the rest is on the vehicle page */
.new-card { display: none; }

/* forms: save and cancel stay at the bottom, just above the navigation, however long the form is */
.form-card > .row:last-child { position: sticky; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 5;
  margin: 16px -16px -16px; padding: 12px 16px; flex-wrap: nowrap; background: var(--card); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r) var(--r); }
.form-card > .row:last-child .btn { flex: 1; }
.form-card > .row:last-child .btn[type=submit] { flex: 2; }

/* the account menu slides up from the bottom as a sheet, within reach of your thumb; a tap next to it closes it */
.account-menu[open] summary::before { content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(30,26,21,.32); cursor: default; }
.account-menu .menu { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 30; min-width: 0; max-width: none;
  padding: 36px 8px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; animation: sheet-in .25s var(--ease); }
.account-menu .menu::before { content: ""; position: absolute; top: 16px; left: 50%; width: 32px; height: 4px; margin-left: -16px;
  border-radius: 2px; background: var(--line-2); }
.account-menu .menu-email { padding: 0 16px 12px; }
.account-menu .menu a, .account-menu .menu button { min-height: 56px; padding: 0 16px; gap: 16px; border-radius: 12px; }
@keyframes sheet-in { from { transform: translateY(100%); } }

/* the trash: a row per item instead of a table of five columns; what it is on top, kind, vehicle and date below it,
   restore and delete as two buttons on the right */
.card.table-wrap:has(> .trash-list) { padding: 0; }
.trash-list, .trash-list tbody { display: block; }
.trash-list thead { display: none; }
.trash-list tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "label label label actions" "kind vehicle date actions";
  gap: 2px 0; align-items: center; padding: 12px 8px 12px 16px; border-bottom: 1px solid var(--line); }
.trash-list tr:last-child { border-bottom: 0; }
.trash-list td { display: block; padding: 0; border: 0; }
.trash-list td:nth-child(1) { grid-area: label; font-weight: 500; }
.trash-list td:nth-child(2) { grid-area: kind; }
.trash-list td:nth-child(3) { grid-area: vehicle; }
.trash-list td:nth-child(4) { grid-area: date; color: var(--muted); }
.trash-list td:nth-child(2), .trash-list td:nth-child(3), .trash-list td:nth-child(4) { font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-list td:nth-child(2):not(:empty)::after, .trash-list td:nth-child(3):not(:empty)::after { content: " · "; white-space: pre; }
.trash-list td:nth-child(5) { grid-area: actions; flex-wrap: nowrap; gap: 0; margin-left: 8px; }
.trash-list .btn.small, .trash-list .link-button { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border-radius: 22px; background: none; }
.trash-list td:nth-child(5) form { margin: 0; }