/* CarNerd Garage - large touch targets, short lists, quiet chrome.
   Designed to be read at arm's length under a hood.

   Light by default, with a dark switch in the menu. Every component below
   reads its colour from a semantic token, so the two themes are the two token
   blocks and nothing else. Brand colours (red, navy) are fixed in both.

   Every colour used for text was checked against its own background for WCAG
   AA (4.5:1). The raw brand red only clears AA-large, so it carries buttons,
   rules and the brand - never small type. */

:root {
  /* Brand, straight from the logo. Identical in both themes. */
  --cn-red: #e10e11;
  --cn-red-hover: #b3121a;
  --cn-navy: #092c57;
  --cn-navy-deep: #071a3d;
  --cn-chrome: #d6dbe4;   /* on the navy navbar, which never changes */
}

/* -- Light, the default --------------------------------------------------- */
:root,
[data-bs-theme="light"] {
  --garage-page: #eef1f7;
  --garage-card: #ffffff;
  --garage-row-alt: #f6f8fc;
  --garage-hover: #eef3fb;

  --garage-input: #ffffff;
  --garage-input-focus: #ffffff;
  --garage-input-border: #c3cbd9;
  --garage-disabled-bg: #eceff5;
  --garage-disabled-ink: #7c879b;

  --garage-line: #d8dfeb;
  --garage-line-strong: #c3cbd9;

  --garage-ink-strong: #0f1830;   /* titles and values     17.6:1 */
  --garage-ink: #16203a;          /* body                  16.1:1 */
  --garage-ink-muted: #55627d;    /* labels and subtitles   6.1:1 */
  --garage-ink-faint: #7c879b;    /* placeholders           4.5:1 */

  --garage-link: #1c5fb0;
  --garage-accent: #1c5fb0;
  --garage-copper: #a1521c;
  --garage-warning: #8a5a00;
  --garage-ok: #1d7a3c;
  --garage-cached-edge: #7bb98f;
  --garage-shadow: 0 1px 2px rgb(16 26 51 / 8%), 0 4px 14px rgb(16 26 51 / 7%);

  --bs-body-color: var(--garage-ink);
  --bs-secondary-color: var(--garage-ink-muted);
  --bs-border-color: var(--garage-line);
  --bs-link-color-rgb: 28, 95, 176;
  --bs-link-hover-color-rgb: 19, 71, 135;
  --bs-danger-rgb: 192, 34, 34;
}

/* -- Dark ----------------------------------------------------------------- */
[data-bs-theme="dark"] {
  --garage-page: #131926;
  --garage-card: #1e2637;
  --garage-row-alt: #232c40;
  --garage-hover: #2b3750;

  --garage-input: #2b3750;
  --garage-input-focus: #33405c;
  --garage-input-border: #46557a;
  --garage-disabled-bg: #232c40;
  --garage-disabled-ink: #8e99ad;

  --garage-line: #3a4863;
  --garage-line-strong: #4a5b7d;

  --garage-ink-strong: #ffffff;
  --garage-ink: #e8ecf2;
  --garage-ink-muted: #b8c2d4;
  --garage-ink-faint: #9aa6bb;

  --garage-link: #6aa8ea;
  --garage-accent: #6aa8ea;
  --garage-copper: #e8823f;
  --garage-warning: #ffca6a;
  --garage-ok: #6ec07a;
  --garage-cached-edge: #2f5d3a;
  --garage-shadow: 0 1px 3px rgb(0 0 0 / 55%);

  --bs-body-color: var(--garage-ink);
  --bs-secondary-color: var(--garage-ink-muted);
  --bs-border-color: var(--garage-line);
  --bs-link-color-rgb: 106, 168, 234;
  --bs-link-hover-color-rgb: 154, 199, 245;
  --bs-danger-rgb: 255, 107, 107;
}

/* One dial for the whole interface. Everything below is sized in rem, so type,
   padding and control heights all scale from here. A percentage rather than a
   px value, so a reader who has raised their browser's default still wins. */
html {
  font-size: 106.25%;  /* 17px against the usual 16px default */
}

body {
  background: var(--garage-page);
  color: var(--garage-ink);
  -webkit-text-size-adjust: 100%;
}

/* -- Forms ---------------------------------------------------------------- */

.form-control,
.form-select {
  background-color: var(--garage-input);
  border-color: var(--garage-input-border);
  color: var(--garage-ink);
}

/* Not yet available - the Make and Model pickers before a year is chosen.
   Muted within the palette rather than Bootstrap's unrelated grey. */
.form-control:disabled,
.form-select:disabled {
  background-color: var(--garage-disabled-bg);
  border-color: var(--garage-line);
  color: var(--garage-disabled-ink);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--garage-input-focus);
  border-color: var(--garage-accent);
  color: var(--garage-ink-strong);
  box-shadow: 0 0 0 0.25rem rgb(28 95 176 / 20%);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  box-shadow: 0 0 0 0.25rem rgb(106 168 234 / 25%);
}

.form-control::placeholder {
  color: var(--garage-ink-faint);
  opacity: 1;
}

/* The file-picker button inside the control, which Bootstrap tints separately. */
.form-control::file-selector-button {
  background-color: var(--garage-row-alt);
  color: var(--garage-ink);
  border-color: var(--garage-input-border);
}

.form-label {
  color: var(--garage-ink-muted);
  font-weight: 500;
}

/* -- Buttons -------------------------------------------------------------- */

/* Primary actions wear the brand red. White on #e10e11 is 4.9:1, so the
   oversized labels stay legible in daylight through a windscreen. */
.btn-primary {
  --bs-btn-bg: var(--cn-red);
  --bs-btn-border-color: var(--cn-red);
  --bs-btn-hover-bg: var(--cn-red-hover);
  --bs-btn-hover-border-color: var(--cn-red-hover);
  --bs-btn-active-bg: var(--cn-red-hover);
  --bs-btn-active-border-color: var(--cn-red-hover);
  --bs-btn-disabled-bg: var(--cn-red);
  --bs-btn-disabled-border-color: var(--cn-red);
}

/* Bootstrap's own greys sit at 4.1:1 or vanish entirely on white, so both
   outline styles are re-pointed at the theme's ink and rules. */
.btn-outline-secondary,
.btn-outline-light {
  --bs-btn-color: var(--garage-ink);
  --bs-btn-border-color: var(--garage-line-strong);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--cn-navy);
  --bs-btn-hover-border-color: var(--cn-navy);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--cn-navy);
  --bs-btn-active-border-color: var(--cn-navy);
}

/* The "spend an OLP request" actions. Bootstrap's cyan manages 1.7:1 on white,
   so they follow the theme's link colour instead of glowing. */
.btn-outline-info {
  --bs-btn-color: var(--garage-link);
  --bs-btn-border-color: var(--garage-link);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--garage-link);
  --bs-btn-hover-border-color: var(--garage-link);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--garage-link);
  --bs-btn-active-border-color: var(--garage-link);
  --bs-btn-disabled-color: var(--garage-ink-faint);
  --bs-btn-disabled-border-color: var(--garage-line);
}

.btn:focus-visible {
  box-shadow: 0 0 0 0.25rem rgb(28 95 176 / 35%);
}

[data-bs-theme="dark"] .btn:focus-visible {
  box-shadow: 0 0 0 0.25rem rgb(106 168 234 / 40%);
}

/* Primary actions are deliberately oversized for gloved hands. */
.btn-garage {
  min-height: 58px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-photo {
  min-height: 52px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* The two primary actions: stacked, centred and narrower than the page so
   they read as a pair rather than as two banners. */
.home-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.home-actions .btn {
  width: 100%;
  max-width: 280px;
}

/* -- Navbar. Always flag navy, in both themes: it is the badge's outer ring
      and the one fixed point on the page. -------------------------------- */

.garage-nav {
  background: var(--cn-navy);
  border-bottom: 2px solid var(--cn-red);
}

.navbar-brand,
.navbar-brand:hover,
.navbar-brand:focus {
  color: #fff;
  letter-spacing: 0.06em;
}

/* The badge is detailed artwork, so it needs a good deal more room than a
   typical navbar icon before the car and the lettering turn to mush - which
   is exactly what happened at the icon sizes this started out at. */
.brand-logo {
  width: 3.1rem;
  height: 3.1rem;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Badge sign-off at the foot of every page. Quiet enough to ignore, present
   enough that the brand is not confined to the top bar. */
.garage-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.6rem 1rem 2.2rem;
  margin-top: 1rem;
  border-top: 1px solid var(--garage-line);
  color: var(--garage-ink-muted);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-mark {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  opacity: 0.85;
}

.footer-version {
  font-weight: 400;
  opacity: 0.75;
}

/* Sign-in and first-run: the badge is the page, so it gets room. At this size
   the artwork's own lettering is legible, which is why the heading beside it
   is carried for screen readers only rather than repeated on screen. */
.brand-hero {
  width: 208px;
  height: 208px;
  object-fit: contain;
  display: block;
  margin: 0 auto 1.4rem;
}

/* Fallback garage glyph, still used as the photo placeholder. */
.brand-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--garage-accent);
  flex: 0 0 auto;
}

/* Icon-only nav controls: no border, but a full 44px tap target. Fixed
   colours because the bar behind them is navy in both themes. */
.btn-nav {
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cn-chrome);
}

.btn-nav svg {
  width: 22px;
  height: 22px;
}

.btn-nav:hover,
.btn-nav:focus,
.btn-nav[aria-expanded="true"] {
  color: #fff;
}

.dropdown-menu {
  background: var(--garage-card);
  border: 1px solid var(--garage-line);
  box-shadow: var(--garage-shadow);
}

.dropdown-item {
  color: var(--garage-ink);
  padding: 0.6rem 1rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--cn-navy);
  color: #fff;
}

/* Dark-mode switch: its state sits right-aligned in the menu row. */
.theme-state {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--garage-ink-muted);
}

.dropdown-item:hover .theme-state,
.dropdown-item:focus .theme-state {
  color: var(--cn-chrome);
}

/* -- Structure and titles ------------------------------------------------- */

.garage-main {
  max-width: 45rem;
}

/* Section headings lead with a short red rule so the eye finds the breaks in
   a long screen without reading a word. */
.section-label {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--garage-ink-strong);
  margin: 1.9rem 0 0.7rem;
  padding-left: 0.6rem;
  border-left: 3px solid var(--cn-red);
  line-height: 1.25;
}

/* The heading inside a panel. Underscored, so the panel reads as a block with
   a header rather than as an undifferentiated stack of fields. */
.panel-title {
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--garage-ink-muted);
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--garage-line);
}

/* Panels read as distinct surfaces: lifted clear of the page, with a defined
   edge and enough shadow to sit above it. Tabular figures throughout, so
   mileages, dates and capacities line up down every list. */
.garage-card {
  background: var(--garage-card);
  border: 1px solid var(--garage-line);
  border-radius: 0.85rem;
  box-shadow: var(--garage-shadow);
  font-variant-numeric: tabular-nums;
}

/* -- Tiles and lists ------------------------------------------------------ */

.btn-tile {
  min-height: 66px;
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--garage-card);
  border: 1px solid var(--garage-line);
  color: var(--garage-ink);
  font-variant-numeric: tabular-nums;
}

.btn-tile:hover,
.btn-tile:focus {
  border-color: var(--garage-accent);
  background: var(--garage-hover);
  color: var(--garage-ink-strong);
}

.btn-tile .tile-sub {
  display: block;
  font-size: 0.8rem;
  color: var(--garage-ink-muted);
  font-weight: 400;
}

.upcoming-item {
  border-bottom: 1px solid var(--garage-line);
  padding: 0.7rem 0;
}

.upcoming-item:last-child {
  border-bottom: 0;
}

.upcoming-vehicle {
  font-size: 0.82rem;
  color: var(--garage-ink-muted);
}

.upcoming-title {
  font-weight: 600;
  color: var(--garage-ink-strong);
}

.upcoming-due {
  font-size: 0.88rem;
  color: var(--garage-ink-muted);
}

.history-row {
  border-bottom: 1px solid var(--garage-line);
  padding: 0.75rem 0;
}

.history-row:last-child {
  border-bottom: 0;
}

.vehicle-context {
  border-bottom: 1px solid var(--garage-line);
  padding: 0.8rem 0 0.6rem;
}

.vehicle-context-name {
  letter-spacing: 0.02em;
  color: var(--garage-ink-strong);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  display: block;
}

/* Nickname leads the name, tinted copper so the two read as separate facts. */
.vh-nick {
  color: var(--garage-copper);
}

.min-w-0 {
  min-width: 0;
}

/* -- The tabular rows ----------------------------------------------------- */

/* Label left, value right, one rule between. Everything that reads as a table
   in this app is one of these. */
.jr-row {
  display: flex;
  /* Wraps rather than letting a long value squeeze the label to nothing. */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.15rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--garage-line);
  line-height: 1.35;
}

.jr-row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.jr-row:last-of-type {
  border-bottom: 0;
}

/* Specs: name, value, source, delete. Striped instead of ruled - at this
   density the stripes carry the eye across a row better than lines do.

   On a phone the value goes on its own line under the name. Sizing the value
   column `auto` let a long one ("Hyundai/Kia SP-IV or SP-IV-RR ATF") take
   max-content and crush the name to a single letter per line, so no column
   here is content-sized: the name always gets its share. */
.spec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.6rem 1rem;
  grid-template-areas:
    "name  source delete"
    "value value  value";
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  padding: 0.5rem;
  margin: 0 -0.5rem;
  border-radius: 0.35rem;
}

.spec-row > .spec-name { grid-area: name; }
.spec-row > .spec-value { grid-area: value; }
.spec-row > .spec-source { grid-area: source; }
.spec-row > form { grid-area: delete; }

/* Once there is room, back to one line with the values in a column. */
@media (min-width: 576px) {
  .spec-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 2.6rem 1rem;
    grid-template-areas: "name value source delete";
    gap: 0.6rem;
  }

  .spec-row > .spec-value {
    text-align: right;
  }
}

.spec-row.jr-row {
  border-bottom: 0;
}

.spec-row:nth-of-type(even) {
  background: var(--garage-row-alt);
}

.spec-name {
  color: var(--garage-ink-muted);
  min-width: 0;
}

.spec-value {
  font-weight: 700;
  color: var(--garage-ink-strong);
  min-width: 0;
  overflow-wrap: anywhere;
}

.spec-source {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--garage-ink-muted);
  border: 1px solid var(--garage-line-strong);
  border-radius: 0.3rem;
  padding: 0.1rem 0.25rem;
  text-align: center;
}

.spec-section-head {
  cursor: pointer;
  list-style: none;
  color: var(--garage-ink-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
}

.spec-section-head::-webkit-details-marker {
  display: none;
}

.spec-section-head::before {
  content: "\25B6";
  font-size: 0.7em;
  margin-right: 0.5rem;
  color: var(--garage-ink-muted);
}

.spec-section[open] .spec-section-head::before {
  content: "\25BC";
}

.jr-warning {
  color: var(--garage-warning);
  font-size: 0.92rem;
}

/* Past maintenance groups are muted, never alarming (Rule 7). */
.group-past > summary {
  color: var(--garage-ink-muted);
}

.group-past {
  opacity: 0.72;
}

details.mileage-group {
  border-bottom: 1px solid var(--garage-line);
  padding: 0.55rem 0;
}

details.mileage-group > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

details.mileage-group > summary::-webkit-details-marker {
  display: none;
}

details.mileage-group > summary::before {
  content: "\25B6";
  font-size: 0.7em;
  margin-right: 0.5rem;
  color: var(--garage-ink-muted);
}

details.mileage-group[open] > summary::before {
  content: "\25BC";
}

.match-yes { color: var(--garage-ok); }
.match-none { color: var(--garage-ink-muted); }

/* Cached OLP data: green edge so "already have it" reads at a glance and
   nobody spends requests they do not need to. */
.cached-card {
  border-color: var(--garage-cached-edge);
}

/* Pencil / red X row actions. Sized up for a thumb without adding visual
   weight to the list. */
.row-actions .btn-link {
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
  color: var(--garage-ink-muted);
  min-width: 28px;
}

.row-actions .btn-link:hover {
  color: var(--garage-ink-strong);
}

/* -- VIN capture ---------------------------------------------------------- */

/* Field, camera, Decode. One line where there is room; on a narrow phone the
   buttons drop below so all 17 characters stay visible at once - the whole
   point of the panel is checking them against the plate. */
.vin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vin-field {
  flex: 1 1 14rem;
  min-width: 0;
}

.vin-row .btn {
  flex: 1 1 auto;
}

/* Camera sits between the VIN field and Decode. Square and full height so it
   is a real target with a glove on, and never squeezes the field. The wrapper
   is the dropdown that offers camera or photo library. */
.vin-camera-wrap {
  flex: 0 0 auto;
  display: flex;
}

.btn-vin-camera {
  width: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.btn-vin-camera svg {
  width: 24px;
  height: 24px;
}

/* Reading a plate takes a few seconds over the network, so the button itself
   has to show that something is happening. */
.vin-spinner {
  display: none;
}

.btn-vin-camera.is-busy svg {
  display: none;
}

.btn-vin-camera.is-busy .vin-spinner {
  display: inline-block;
}

/* Status lines that need to be noticed rather than skimmed. */
.is-notice {
  color: var(--garage-warning);
  font-weight: 600;
}

.is-working {
  color: var(--garage-link);
  font-weight: 600;
}

/* Job notes hold appended code assessments, which are many lines. */
.notes-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Code type-ahead. Served from the local table, so it can be instant. */
.code-matches {
  border: 1px solid var(--garage-line);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--garage-card);
}

.code-match {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--garage-line);
  background: transparent;
  color: var(--garage-ink);
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.3;
}

.code-match:last-child {
  border-bottom: 0;
}

.code-match:hover,
.code-match:focus {
  background: var(--garage-hover);
}

.code-match strong {
  color: var(--garage-ink-strong);
  margin-right: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.code-confirm {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--garage-ok);
}

.code-confirm.is-unknown {
  color: var(--garage-ink-muted);
  font-weight: 400;
}

/* The composite read takes a few seconds, so the button says so. */
.diagnose-spinner {
  display: none;
}

#diagnose-run.is-busy .diagnose-spinner {
  display: inline-block;
  margin-right: 0.4rem;
}

.vin-plate-thumb {
  width: 56px;
  height: 42px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid var(--garage-line);
}

/* Job title: reads as a heading, edits as a field. Driven by a data attribute
   so it renders correctly with JS disabled (a new job shows the input). */
.job-title[data-editing="0"] .js-title-input,
.job-title[data-editing="1"] .js-title-display {
  display: none;
}

/* -- Photos --------------------------------------------------------------- */

/* The hero is capped so a portrait shot cannot push the vehicle's actions
   below the fold on a phone. */
.vehicle-hero {
  width: 100%;
  max-height: 190px;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid var(--garage-line);
  display: block;
}

/* Empty state doubles as the upload affordance, so the placeholder is not a
   dead end. */
.vehicle-hero-empty {
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--garage-row-alt);
  border-style: dashed;
  color: var(--garage-ink-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.vehicle-hero-empty:hover {
  color: var(--garage-ink-strong);
  border-color: var(--garage-accent);
}

.vehicle-hero-empty .brand-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: inherit;
}

/* Divider between the two ways to identify a vehicle. */
.quick-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.1rem 0 0.9rem;
  color: var(--garage-ink-muted);
  font-size: 0.85rem;
}

.quick-or::before,
.quick-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--garage-line);
}

.vehicle-tile {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.vehicle-tile-text {
  min-width: 0;
}

.vehicle-thumb {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--garage-line);
}

.vehicle-thumb-lg {
  width: 84px;
  height: 84px;
}

/* Vehicle screen: big enough to recognise the car, small enough that the
   title, mileage and actions all stay above the fold. */
.vehicle-thumb-xl {
  width: 104px;
  height: 78px;
  border-radius: 0.6rem;
}

.vehicle-thumb-add {
  flex-direction: column;
  gap: 0.15rem;
  border-style: dashed;
  font-size: 0.75rem;
  text-align: center;
  text-decoration: none;
  line-height: 1.1;
}

.vehicle-thumb-add:hover {
  color: var(--garage-ink-strong);
  border-color: var(--garage-accent);
}

/* Placeholder keeps tiles aligned whether or not a photo exists. */
.vehicle-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--garage-row-alt);
  color: var(--garage-ink-muted);
}

.vehicle-thumb-empty .brand-icon {
  width: 1.35rem;
  height: 1.35rem;
  color: inherit;
}

.photo-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 1px solid var(--garage-line);
}

.chip {
  border-radius: 999px;
  font-size: 0.85rem;
  padding: 0.3rem 0.85rem;
}