/* .garage-header composes with .page-header from /styles.css for
   layout + h1 sizing. Identity block lives inside so the tagline
   wraps under the h1. */

/* Hide the in-page Sign-out button inside the native Android/iOS shell —
   the native side drawer already owns Sign in / out. !important wins
   over the JS toggles in garage.js (showSignedOut clears `hidden` to
   un-hide on sign-in; without !important that would re-show the button
   inside the shell). Web stays unchanged because the class only ever
   gets set when navigator.userAgent contains `CardbShell`. */
html.cardb-native-shell .garage-signout {
  display: none !important;
}

.garage-name-input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  min-width: 200px;
  font-family: inherit;
}

.garage-name-input:focus {
  outline: none;
  border-color: var(--accent);
}

.garage-name-error {
  color: var(--accent);
  font-size: 13px;
  margin: 0;
  flex-basis: 100%;
}


.garage-tagline {
  color: var(--muted);
  margin: 4px 0 0;
  font-size: 13px;
}

.user-follow-counts {
  display: flex;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.user-follow-counts strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.garage-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.garage-signout {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}

.garage-signout:hover {
  color: var(--text);
  border-color: var(--accent);
}

.garage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 0 0 28px;
  padding: 0;
}

.garage-stats > div {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}

.garage-stats dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
}

.garage-stats dd {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 600;
}

.garage-stat-month {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Phones: stat tiles dominate the page since each is a bordered box.
   Drop to 2 columns, kill the per-tile chrome, and tighten spacing so
   the whole block reads as a compact summary instead of taking up a
   third of the viewport. */
@media (max-width: 700px) {
  .garage-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 16px;
  }

  .garage-stats > div {
    padding: 8px 10px;
  }

  .garage-stats dt {
    font-size: 10px;
  }

  .garage-stats dd {
    margin-top: 2px;
    font-size: 18px;
  }

  .garage-stat-month {
    font-size: 10px;
  }

  /* Extend the tablist underline to the screen edges. Negative side
     margins break out of <main>'s 16px padding; matching horizontal
     padding keeps the tab buttons at their original position. */
  .garage-tabs {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

.garage-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
}

.garage-tab {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
}

.garage-tab:hover:not(.is-active) {
  color: var(--text);
}

.garage-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent, #6ea8ff);
}

.garage-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.garage-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.garage-car-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.garage-car-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.garage-car-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.garage-car-title-link,
.garage-mycar-title-link {
  color: inherit;
  text-decoration: none;
}

.garage-car-title-link:hover,
.garage-mycar-title-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.garage-car-meta {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.garage-car-captures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.garage {
  max-width: 1040px;
  margin: 0 auto;
}

/* Paint the garage illustration as a backdrop on <main> for both
   /garage/ (#garage-loaded) and the read-only /u/ profile
   (#user-loaded) — same look regardless of whether the user has
   captures yet. The :not([hidden]) check keeps the bg from flashing
   in before the loaded-section is unhidden by JS. background-size:
   cover fills the whole <main> (which now stretches to the footer
   via flex-grow) while preserving the image's aspect ratio. The
   page-bg overlay on top of the image dims it to ~30% opacity (alpha
   0.70 of #0e1116 leaves 0.30 of the image showing through against
   the same page bg) so the foreground UI stays readable. */
main:has(#garage-loaded:not([hidden])),
main:has(#user-loaded:not([hidden])) {
  /* Drop the global `main { max-width: 1400px }` so the backdrop runs
     edge-to-edge on wide viewports. `.garage` keeps its own 1040px cap
     so the foreground content still centers. */
  max-width: none;
  background-image:
    linear-gradient(rgba(14, 17, 22, 0.70), rgba(14, 17, 22, 0.70)),
    url(/garage/empty-garage.png);
  background-repeat: no-repeat;
  background-position: center center;
  /* `fixed` pins the image to the viewport (so percentages in
     background-size are viewport-relative and it doesn't scroll). `auto
     100%` locks the image to the full viewport height while letting the
     width scale naturally — preserves aspect ratio, no stretching. */
  background-size: auto 100%;
  background-attachment: fixed;
}

#edit-capture-modal .modal-panel {
  border-radius: 10px;
  padding: 20px;
  width: min(420px, calc(100vw - 32px));
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The trim-search dropdown is absolutely-positioned inside the modal
   panel; the default `.modal-panel { overflow-y: auto }` clips it. The
   add-a-car modal is short enough that we don't need scroll, so let the
   dropdown overflow. */
#add-mycar-modal .modal-panel {
  overflow: visible;
}

#edit-capture-modal .modal-panel h2 {
  margin: 0;
  font-size: 18px;
}

/* Three-column grid (label | status | input/select) shared across
   every pref row. .garage-pref uses `display: contents` so its
   children land directly in the grid, which keeps the label column
   aligned across rows ("Display name" / "Driving persona" / "Units"
   inputs sit at the same x). The status (saved-✓ / saving-spinner)
   column sits between the label and the input so the indicator hugs
   the left edge of the input rather than floating off to the row's
   right end where the eye has to track past the value to find it. */
.garage-prefs {
  display: grid;
  grid-template-columns: max-content auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  margin-bottom: 18px;
}

.garage-pref {
  display: contents;
}

/* Full-width children that span all three grid columns: the
   per-row error message and the global prefs-status footer. */
.garage-pref > .garage-name-error,
.garage-prefs-status {
  grid-column: 1 / -1;
}

.garage-pref label,
.garage-pref-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.garage-pref select {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 15px;
  font-family: inherit;
  min-width: 200px;
}

.garage-pref select:focus {
  outline: none;
  border-color: var(--accent);
}

.garage-pref-link {
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
}

.garage-pref-link:hover {
  text-decoration: underline;
}

.garage-prefs-status {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.garage-prefs-status.is-error {
  color: var(--accent);
}

.garage-pref-status {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: relative;
}

.garage-pref-status.is-saving::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: garage-pref-spin 0.7s linear infinite;
}

.garage-pref-status.is-saved::before {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--good);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  animation: garage-pref-fade 1.8s ease forwards;
}

@keyframes garage-pref-spin {
  to { transform: rotate(360deg); }
}

@keyframes garage-pref-fade {
  0%, 55% { opacity: 1; }
  100% { opacity: 0; }
}

/* Locality picker uses the shared browse-filter `.checklist` styles so the
   summary + options match the browse page's multi-select look. The grid
   column it lives in sets the width via minmax(0, 1fr), but the other prefs
   in column 2 have `min-width: 200px` (.garage-pref select); apply the same
   floor to the checklist so the picker doesn't collapse narrower than the
   neighboring rows. */
.garage-pref details.checklist {
  min-width: 200px;
}

/* Spans all three grid columns and sits directly under the persona
   select, mirroring the per-suggestion card in /browse/'s intro
   placeholder so the picker doubles as a preview of what /browse/
   will prefill. The persona portrait floats on the right with the
   same gradient mask + fade-in the browse intro uses, so the text
   reads against the page bg on the left and dissolves into the
   image on the right. */
.garage-persona-preview {
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 120px;
  margin-top: 4px;
}
.garage-persona-preview[hidden] {
  display: none;
}
.garage-persona-preview-img {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 35%, black 75%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 35%, black 75%);
}
.garage-persona-preview-img.loaded {
  opacity: 1;
}
.garage-persona-preview-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  min-width: 0;
  /* Cap the text column at 55% (the image starts at 45% from the
     left); the gradient mask makes the overlap look intentional but
     the strings stay legible against the page bg on the left. */
  max-width: 55%;
}
.garage-persona-preview-summary {
  margin: 0;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.garage-persona-preview-why {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

/* My-cars (real garage) — rows of cars the user owns, distinct from
   captures. Rendered as the third tab panel beside captures/drives. */
.garage-mycars {
  margin: 24px 0;
}
.garage-mycars-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.garage-mycars-head h2 {
  margin: 0;
  font-size: 18px;
}
.garage-mycars-help {
  margin: 0 0 12px;
  font-size: 13px;
}
.garage-mycars-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
/* .garage-mycar piggybacks on .usermedia for the tile chrome (border,
   radius, hover). The is-default modifier just swaps the border colour
   so the user's pinned event car stands out. */
.garage-mycar.is-default {
  border-color: var(--accent);
}
.garage-mycar-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.garage-mycar-title {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}
.garage-mycar-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.garage-mycar-default-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
}
/* Stock-photo hint: tiny pill in the top-left of the image so users
   know the photo isn't theirs yet. Mirrors the video badge's
   pointer-events handling so clicks fall through to the tile. */
.garage-mycar-stock-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(14, 17, 22, 0.78);
  color: var(--muted);
  pointer-events: none;
}
.garage-mycars-status {
  margin: 8px 0 0;
  font-size: 13px;
}
.garage-mycars-status.is-error {
  color: var(--accent);
}
.modal-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  font-size: 14px;
}

/* Crews tab: header mirrors My Cars (title + primary CTA), the list
   below is a simple stack of single-line rows that link out to each
   crew detail page — the full directory chrome lives at /crews/. */
.garage-crews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.garage-crews-head h2 {
  margin: 0;
  font-size: 18px;
}
.garage-crews-list {
  display: grid;
  gap: 8px;
}
.garage-crew-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  transition: border-color 120ms ease;
}
.garage-crew-row:hover {
  border-color: var(--accent);
}
.garage-crew-name {
  font-weight: 600;
  overflow-wrap: anywhere;
  min-width: 0;
}
/* Shared crew role badge — duplicated from /crews/styles.css so the
   garage Crews tab renders the Owner/Member tag without pulling in
   the whole crews stylesheet. */
.garage-crew-row .crew-role-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.garage-follow-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.garage-follow-name:hover {
  color: var(--accent);
}

.garage-unfollow-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
}