:root {
  --bg: #0a0c0f;
  --surface: #11151a;
  --surface-2: #181d24;
  --border: #232a33;
  --border-soft: #1c222a;
  --text: #ebeff4;
  --text-2: #c7cfd9;
  --muted: #8590a0;
  --accent: #2dd4a4;
  --accent-soft: rgba(45, 212, 164, 0.12);
  --max: 1180px;
  --radius: 18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }

img { display: block; }

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 12, 15, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.topbar__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (min-width: 700px) {
  .topbar__inner { padding: 14px 24px; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--text);
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent);
  color: #0a0c0f;
  font-weight: 800;
  font-size: 15px;
}

@media (min-width: 700px) {
  .brand__mark { width: 28px; height: 28px; font-size: 16px; }
}

.brand__mark--sm {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 13px;
}

.brand__word {
  font-size: 15px;
  letter-spacing: -0.005em;
}

@media (min-width: 700px) {
  .brand__word { font-size: 16px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  background: var(--surface);
}

.hero--empty {
  aspect-ratio: auto;
  padding: 72px 24px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10, 12, 15, 0) 40%,
    rgba(10, 12, 15, 0.55) 75%,
    rgba(10, 12, 15, 0.95) 100%);
}

.hero__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px 36px;
}

.hero__inner--centered {
  position: static;
  text-align: center;
  padding: 0;
}

.hero__owner {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.hero__owner strong {
  color: var(--text);
  font-weight: 600;
}

.hero__title {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800;
  margin: 0 0 8px;
  letter-spacing: -0.025em;
  line-height: 1;
}

.hero__subtitle {
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--text-2);
  margin: 0;
  font-weight: 500;
}

/* ---------- Spec strip ---------- */

.strip {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface);
}

.strip__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px 24px;
  display: grid;
  /* auto-fit so the strip looks balanced whether there are 4 or 5 cells
     (Invested only shows when build cost is set). */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
}

.strip__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--border-soft);
  padding-right: 12px;
}

.strip__item:last-child { border-right: none; }

.strip__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.strip__value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}

.strip__item--accent .strip__value {
  color: var(--accent);
}

/* ---------- Layout ---------- */

.layout {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 32px;
    padding: 48px 24px 96px;
  }
}

.main-col, .side-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (min-width: 900px) {
  .side-col {
    position: sticky;
    top: 80px;
    align-self: start;
  }
}

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
}

.card__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.card__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}

.card__empty {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}

/* ---------- Mods ---------- */

.mods {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mod {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}

.mod:first-child { padding-top: 0; }
.mod:last-child { border-bottom: none; padding-bottom: 0; }

.mod__category {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.mod__name {
  display: inline;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.mod__cost {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: 2px;
}

.mod__desc {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
}

.mod__pn {
  display: inline-block;
  margin-left: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.01em;
  vertical-align: 2px;
}

/* --- Itemized components inside a mod ----------------------------------- */

.mod-components {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  border-left: 2px solid var(--border);
}

.mod-component {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 4px 0 4px 12px;
  font-size: 13px;
  color: var(--text-2);
}

.mod-component + .mod-component {
  border-top: 1px dashed var(--border);
}

.mod-component__name {
  color: var(--text-1);
  font-weight: 500;
}

.mod-component__pn {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.mod-component__cost {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
}

.mod-row__pn {
  margin: 4px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.mod-row__components {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  border-left: 2px solid var(--border);
}

.mod-row__components li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  padding: 4px 0 4px 12px;
  font-size: 13px;
  color: var(--text-2);
}

.mod-row__components li + li {
  border-top: 1px dashed var(--border);
}

.mod-row__component-name {
  color: var(--text-1);
  font-weight: 500;
}

.mod-row__component-pn {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.mod-row__component-cost {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent);
}

/* --- Mod edit form: component editor rows --------------------------------- */

.components-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.component-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
  background: var(--surface);
}

.component-row .form-field {
  margin: 0;
}

.component-row__field--name { min-width: 0; }
.component-row__field--cost { max-width: 140px; }

.component-row__remove {
  align-self: end;
}

.component-add {
  margin-top: 0;
}

@media (max-width: 640px) {
  .component-row {
    grid-template-columns: 1fr;
  }
  .component-row__field--cost { max-width: none; }
  .component-row__remove { justify-self: end; }
}

/* ---------- Gallery ---------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-2);
  position: relative;
}

.gallery__item--feature {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery__item:hover .gallery__img {
  transform: scale(1.04);
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--border-soft);
  margin-top: 24px;
}

.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

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

/* ---------- Specs (Overview card) ---------- */

.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}

@media (min-width: 600px) {
  .specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.spec__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.spec__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  /* Long engine strings ("2.0L H4 Turbo Direct Injection") shouldn't clip;
     they wrap inside the cell instead. */
  overflow-wrap: anywhere;
}

.card__footnote {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Landing page ---------- */

.topbar__inner--landing {
  justify-content: space-between;
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

@media (min-width: 700px) {
  .landing-nav { gap: 8px; }
}

.landing-nav__link {
  color: var(--text-2);
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.landing-nav__link:hover {
  color: var(--text);
}

.landing-nav__cta {
  background: var(--accent);
  color: var(--bg);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.landing-nav__cta:hover {
  filter: brightness(1.05);
}

.landing-hero {
  padding: 64px 24px 80px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(45, 212, 164, 0.10) 0%, transparent 50%),
    var(--bg);
}

@media (min-width: 700px) {
  .landing-hero { padding: 96px 24px 112px; }
}

.landing-hero__inner {
  max-width: 820px;
  margin: 0 auto;
}

.landing-hero__badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(45, 212, 164, 0.35);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.landing-hero__title {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  font-weight: 800;
  color: var(--text);
}

@media (min-width: 700px) {
  .landing-hero__title { font-size: 64px; }
}

.landing-hero__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0 auto 32px;
  max-width: 620px;
}

@media (min-width: 700px) {
  .landing-hero__lede { font-size: 19px; }
}

.landing-hero__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.landing-hero__primary {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
}

.landing-hero__primary:hover { filter: brightness(1.05); }

.landing-hero__secondary {
  display: inline-block;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 13px 22px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
}

.landing-hero__secondary:hover { border-color: var(--text-2); }

.landing-section {
  padding: 64px 24px;
  border-top: 1px solid var(--border-soft);
}

.landing-section--alt {
  background: var(--surface);
}

.landing-section__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.landing-section__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
  margin: 0 0 12px;
}

.landing-section__title {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 36px;
  color: var(--text);
  max-width: 720px;
}

@media (min-width: 700px) {
  .landing-section__title { font-size: 36px; }
}

.landing-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 800px) {
  .landing-steps { grid-template-columns: repeat(3, 1fr); }
}

.landing-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 24px 28px;
}

.landing-section--alt .landing-step {
  background: var(--surface-2);
}

.landing-step__num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 14px;
}

.landing-step__title {
  font-size: 19px;
  margin: 0 0 8px;
  color: var(--text);
}

.landing-step__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

.landing-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 700px) {
  .landing-features { grid-template-columns: repeat(2, 1fr); }
}

.landing-feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.landing-feature__title {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text);
}

.landing-feature__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
}

.landing-cta {
  padding: 80px 24px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 100%, rgba(45, 212, 164, 0.10) 0%, transparent 60%),
    var(--bg);
  border-top: 1px solid var(--border-soft);
}

.landing-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}

.landing-cta__title {
  font-size: 30px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--text);
}

@media (min-width: 700px) {
  .landing-cta__title { font-size: 40px; }
}

.landing-cta__body {
  font-size: 16px;
  color: var(--text-2);
  margin: 0 0 24px;
}

.footer__links {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
}

.footer__links a:hover { color: var(--text-2); }

/* ---------- Auth (login / signup) ---------- */

.auth-shell {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
}

.auth-card__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.auth-card__title {
  margin: 0 0 6px;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.auth-card__lede {
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 14px;
}

.auth-card__error {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #fca5a5;
  font-size: 14px;
}

.auth-field {
  display: block;
  margin-bottom: 16px;
}

.auth-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}

.auth-field__input {
  display: block;
  width: 100%;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 0.12s ease;
}

.auth-field__input:focus {
  border-color: var(--accent);
}

.auth-field__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.auth-submit {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 13px 16px;
  background: var(--accent);
  color: #052017;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.auth-submit:hover { filter: brightness(1.05); }

.auth-card__foot {
  margin: 22px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.auth-card__foot a {
  color: var(--accent);
  font-weight: 600;
}

.auth-card__foot a:hover { filter: brightness(1.1); }

.auth-card__legal {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--text-2);
}

.auth-card__legal a {
  color: var(--text-2);
  text-decoration: none;
  margin: 0 4px;
}

.auth-card__legal a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* ---------- Logout form (lives inside .landing-nav) ---------- */

.logout-form { display: inline; }

.logout-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.landing-nav__who {
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Garage (authenticated dashboard) ---------- */

.garage {
  padding: 56px 20px 80px;
}

.garage__inner {
  max-width: var(--max);
  margin: 0 auto;
}

.garage__header {
  margin-bottom: 32px;
}

.garage__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.garage__title {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.garage__lede {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 560px;
}

.garage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.garage-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

/* Registration-expiry pill overlaid on the card media. Sibling of the
   card link so it owns its own href (clicking opens the documents page
   for that vehicle, not the edit form). Tier colours mirror the Android
   RegistrationBadge: info (8-30d), warn (1-7d), urgent (today/expired). */
.garage-card__reg-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter 0.12s ease, transform 0.12s ease;
}

.garage-card__reg-badge:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.garage-card__reg-badge--info {
  background: rgba(234, 179, 8, 0.18);
  color: #fde047;
  border-color: rgba(234, 179, 8, 0.35);
}

.garage-card__reg-badge--warn {
  background: rgba(249, 115, 22, 0.22);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.42);
}

.garage-card__reg-badge--urgent {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.42);
}

.garage-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.garage-card__link {
  display: block;
  color: inherit;
}

.garage-card__media {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  overflow: hidden;
}

.garage-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.garage-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.garage-card__body {
  padding: 16px 18px 18px;
}

.garage-card__nickname {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: -0.005em;
}

.garage-card__sub {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.garage-card__chip {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.garage-empty {
  padding: 48px 24px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.garage-empty__body {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Legal pages (privacy / terms) ---------- */

.legal {
  padding: 56px 20px 96px;
}

.legal__inner {
  max-width: 760px;
  margin: 0 auto;
}

.legal__lede {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 15px;
}

.legal__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.legal__section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.legal__section-title {
  margin: 0 0 6px;
  font-size: 17px;
  letter-spacing: -0.005em;
}

.legal__section-body {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.legal__updated {
  margin: 32px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- Termly-embedded policy overrides ----------
   The Termly JS SDK injects rendered policy HTML inside the
   <div name="termly-embed"> element. Two problems by default:

   1. Termly ships its own (light-theme) styles that don't match our
      dark theme — headings and body text can read as dark-on-dark.
   2. Termly's container can apply max-height + overflow:auto, which
      traps wheel scrolling inside the embed so the page won't scroll
      when the cursor is over the policy text.

   These rules override both behaviours and re-apply our site theme. */

.legal__inner--embed div[name="termly-embed"],
.legal__inner--embed div[name="termly-embed"] * {
  /* Defeat any height/overflow Termly applies so wheel events bubble up
     to the page scroll container instead of being captured here. */
  max-height: none !important;
  overflow: visible !important;
}

.legal__inner--embed div[name="termly-embed"] {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.legal__inner--embed div[name="termly-embed"] h1,
.legal__inner--embed div[name="termly-embed"] h2,
.legal__inner--embed div[name="termly-embed"] h3,
.legal__inner--embed div[name="termly-embed"] h4,
.legal__inner--embed div[name="termly-embed"] h5,
.legal__inner--embed div[name="termly-embed"] h6 {
  color: var(--text);
  letter-spacing: -0.005em;
  font-weight: 600;
}

.legal__inner--embed div[name="termly-embed"] h1 {
  font-size: 28px;
  margin: 0 0 16px;
}

.legal__inner--embed div[name="termly-embed"] h2 {
  font-size: 20px;
  margin: 32px 0 10px;
}

.legal__inner--embed div[name="termly-embed"] h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}

.legal__inner--embed div[name="termly-embed"] h4,
.legal__inner--embed div[name="termly-embed"] h5,
.legal__inner--embed div[name="termly-embed"] h6 {
  font-size: 15px;
  margin: 18px 0 6px;
}

.legal__inner--embed div[name="termly-embed"] p,
.legal__inner--embed div[name="termly-embed"] li,
.legal__inner--embed div[name="termly-embed"] td {
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.legal__inner--embed div[name="termly-embed"] strong,
.legal__inner--embed div[name="termly-embed"] b {
  color: var(--text);
  font-weight: 600;
}

.legal__inner--embed div[name="termly-embed"] a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal__inner--embed div[name="termly-embed"] a:hover {
  color: var(--text);
}

.legal__inner--embed div[name="termly-embed"] ul,
.legal__inner--embed div[name="termly-embed"] ol {
  padding-left: 22px;
  margin: 8px 0 16px;
}

.legal__inner--embed div[name="termly-embed"] hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin: 32px 0;
}

.legal__inner--embed div[name="termly-embed"] table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.legal__inner--embed div[name="termly-embed"] th,
.legal__inner--embed div[name="termly-embed"] td {
  border: 1px solid var(--border);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.legal__inner--embed div[name="termly-embed"] th {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
}

/* Termly sometimes wraps things in <span> with inline color styles —
   override those too so dark-on-dark doesn't happen. */
.legal__inner--embed div[name="termly-embed"] span[style*="color"] {
  color: inherit !important;
}

/* ---------- Not-found landing (private/missing vehicle) ---------- */

.not-found {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 20px;
}

.not-found__inner {
  max-width: 540px;
  text-align: center;
}

.not-found__title {
  margin: 8px 0 14px;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.not-found__body {
  margin: 0 0 28px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}

.not-found__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Form shell (add/edit vehicle, future mod forms) ---------- */

.form-shell {
  padding: 40px 20px 80px;
}

.form-shell__inner {
  max-width: 760px;
  margin: 0 auto;
}

.form-shell__header {
  margin-bottom: 28px;
}

.form-shell__lede {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  max-width: 560px;
}

.garage__header--row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.garage__add {
  flex-shrink: 0;
}

.garage-card__public {
  display: block;
  padding: 10px 18px 14px;
  font-size: 13px;
  color: var(--accent);
  border-top: 1px solid var(--border-soft);
}

.garage-card__public:hover { filter: brightness(1.1); }

/* Banners ---------------------------------------------------- */

.form-banner {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid var(--border);
}

.form-banner--ok {
  background: rgba(45, 212, 164, 0.10);
  border-color: rgba(45, 212, 164, 0.40);
  color: #9ce5cb;
}

.form-banner--error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.30);
  color: #fca5a5;
}

.form-banner--info {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text-2);
}

/* Sections --------------------------------------------------- */

.vehicle-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}

.form-section__title {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* Stack of cards outside a single <form> wrapper. Used on /account where
   each section has its own form. */
.section-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section__hint {
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 13px;
}

/* Rows ------------------------------------------------------- */

.form-row {
  display: grid;
  gap: 14px;
}

@media (min-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
  .form-row--3 { grid-template-columns: 1fr 1.4fr 1.4fr; }
  .form-row--vin {
    grid-template-columns: 1fr auto;
    align-items: stretch;
    gap: 12px;
  }
}

/* Fields ----------------------------------------------------- */

.form-field {
  display: block;
  margin-bottom: 14px;
}

.form-field:last-child { margin-bottom: 0; }

.form-row .form-field { margin-bottom: 0; }

.form-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}

.form-field__input {
  display: block;
  width: 100%;
  padding: 11px 13px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  outline: none;
  transition: border-color 0.12s ease;
}

.form-field__input:focus { border-color: var(--accent); }

.form-field__input--mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

.form-field__input--area {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
}

.form-field__hint {
  display: block;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

select.form-field__input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238590a0' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 36px;
}

/* Toggles ---------------------------------------------------- */

.form-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
}

.form-toggle:last-child { margin-bottom: 0; }

.form-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

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

.form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: filter 0.12s ease, border-color 0.12s ease, background 0.12s ease;
  white-space: nowrap;
}

.form-btn--primary {
  background: var(--accent);
  color: #052017;
  font-weight: 700;
}
.form-btn--primary:hover { filter: brightness(1.05); }

.form-btn--secondary {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
.form-btn--secondary:hover { border-color: var(--text-2); }

/* Quick-suggestion chips on the maintenance form. Compact pills that fill
   the service name + category in one tap. */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.suggestion-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}

.suggestion-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.suggestion-chip:active {
  background: rgba(22, 163, 74, 0.08);
}

.form-btn--ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.form-btn--ghost:hover { color: var(--text); border-color: var(--text-2); }

.form-btn--danger {
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.40);
}
.form-btn--danger:hover {
  background: rgba(239, 68, 68, 0.20);
  border-color: rgba(239, 68, 68, 0.70);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding-top: 4px;
}

/* Danger zone (edit vehicle delete) -------------------------- */

.danger-zone {
  margin-top: 36px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid rgba(239, 68, 68, 0.30);
  border-radius: var(--radius);
}

.danger-zone__title {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fca5a5;
}

.danger-zone__body {
  margin: 0 0 14px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- Sub-nav (Specs / Mods tabs) ---------- */

.sub-nav {
  margin-top: 18px;
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.sub-nav__item {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  transition: background 0.12s ease, color 0.12s ease;
}

.sub-nav__item:hover {
  color: var(--text);
}

.sub-nav__item--active {
  background: var(--surface-2);
  color: var(--text);
}

.form-shell__back {
  color: var(--accent);
  font-size: 14px;
}

.form-shell__back:hover { filter: brightness(1.1); }

/* ---------- Mods list ---------- */

.mods-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}

.mods-toolbar__count {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.mod-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mod-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.mod-row__body {
  flex: 1;
  min-width: 0;
}

.mod-row__category {
  display: inline-block;
  padding: 3px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
}

.mod-row__name {
  margin: 8px 0 4px;
  font-size: 17px;
  letter-spacing: -0.005em;
}

.mod-row__description {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.5;
}

.mod-row__meta {
  margin-top: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.mod-row__cost {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.mod-row__chip {
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.mod-row__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.form-btn--sm {
  padding: 7px 14px;
  font-size: 13px;
}

@media (max-width: 560px) {
  .mod-row { flex-direction: column; align-items: stretch; }
  .mod-row__actions { flex-direction: row; }
  .mod-row__actions > .form-btn,
  .mod-row__actions > form { flex: 1; }
  .mod-row__actions > form button { width: 100%; }
}

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

.upload-card {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 24px;
}

.upload-form { display: block; }

.upload-field { margin: 0; }

.upload-field__row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex-wrap: wrap;
}

.upload-field__row > .form-field__input { flex: 1; min-width: 240px; }

.upload-field .form-field__input {
  padding: 9px 13px;
}

.upload-field .form-field__input[type="file"] {
  cursor: pointer;
}

.upload-field .form-field__input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.upload-field .form-field__input[type="file"]::file-selector-button:hover {
  border-color: var(--text-2);
}

.photos-toolbar__count {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--muted);
}

.photos-toolbar__warn {
  color: var(--accent);
}

.photo-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.photo-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.photo-tile--cover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.photo-tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}

.photo-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-tile__cover-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: var(--accent);
  color: #052017;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
}

.photo-tile__actions {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-soft);
}

.photo-tile__actions > form,
.photo-tile__actions > .form-btn {
  flex: 1;
}

.photo-tile__actions form button {
  width: 100%;
}

/* --- Social links: public profile row ------------------------------------- */

.social-row {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.social-row__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.social-row__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.social-row__link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(45, 212, 164, 0.08);
}

.social-row__icon {
  display: inline-flex;
  width: 18px;
  height: 18px;
}

.social-row__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Social links: account-page settings form ---------------------------- */

.social-field {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.social-field:last-of-type {
  border-bottom: 0;
}

.social-field__icon {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  margin-top: 24px; /* nudges icon to align with input, not label */
}

.social-field__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.social-field__body {
  flex: 1;
  min-width: 0;
}

.social-field__input-wrap {
  margin-bottom: 8px;
}

.social-field__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}

.social-field__toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.social-field__toggle-label {
  line-height: 1;
}

.form-field__error {
  display: block;
  margin-top: 6px;
  color: #fca5a5;
  font-size: 13px;
}

/* --- Collapsible form section (<details>/<summary>) ---------------------- */

.collapsible {
  /* The browser-default <details> styles do nothing visible here — we let the
     parent .form-section provide the card chrome. The <summary> below is the
     interactive header. */
}

.collapsible__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  /* Remove the browser's default disclosure triangle so we can render our own
     chevron and rotate it via CSS. WebKit and Firefox use different selectors,
     so we cover both. */
}

.collapsible__summary::-webkit-details-marker { display: none; }
.collapsible__summary::marker { display: none; content: ""; }

.collapsible__title-wrap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.collapsible__title {
  margin: 0;
}

.collapsible__count {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}

.collapsible__chevron {
  font-size: 18px;
  line-height: 1;
  color: var(--text-2);
  transition: transform 160ms ease;
}

.collapsible[open] > .collapsible__summary .collapsible__chevron {
  transform: rotate(180deg);
}

.collapsible__body {
  padding-top: 16px;
}

/* --- Public profile: "see more from this owner" discovery link ----------- */

.owner-more {
  border-top: 1px solid var(--border-soft);
  margin-top: 8px;
}

.owner-more__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: center;
}

.owner-more__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.owner-more__link strong {
  color: var(--text);
  font-weight: 600;
  margin-left: 2px;
}

.owner-more__link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(45, 212, 164, 0.08);
}

.owner-more__link:hover strong {
  color: var(--accent);
}

.owner-more__arrow {
  display: inline-block;
  transition: transform 120ms ease;
}

.owner-more__link:hover .owner-more__arrow {
  transform: translateX(2px);
}

/* --- Account page: public garage share-link row ------------------------- */

.public-garage-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.public-garage-link__url {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.public-garage-link__url:hover {
  text-decoration: underline;
}

.public-garage-link__copy {
  flex: 0 0 auto;
}

/* --- Account page: danger zone (account deletion) ---------------------- */

.form-section--danger {
  border-top: 1px solid rgba(239, 68, 68, 0.30);
  padding-top: 20px;
  margin-top: 12px;
}

.form-section__title--danger {
  color: #fca5a5;
}

/* --- Footer legal links on the account page ---------------------------- */

.form-legal-links {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-2);
}

.form-legal-links a {
  color: var(--text-2);
  text-decoration: none;
  margin: 0 6px;
}

.form-legal-links a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Password visibility toggle — used on every <input type="password"> across
   login / signup / reset-password / account. Pairs with /password-toggle.js
   which finds [data-password-toggle] buttons and wires the click handler. */
.password-input {
  position: relative;
}

.password-input .auth-field__input,
.password-input .form-field__input {
  padding-right: 44px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.password-toggle:hover {
  color: var(--text);
  background: var(--surface-2);
}

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

.password-toggle svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Photo gallery drag-and-drop reorder visual states.
   Pairs with /photo-reorder.js — see the photos page for usage. */
.photo-grid [data-photo-id] {
  cursor: grab;
  transition: transform 120ms ease, opacity 120ms ease, border-color 120ms ease;
}

.photo-grid [data-photo-id]:active {
  cursor: grabbing;
}

.photo-tile--dragging {
  opacity: 0.4;
}

.photo-tile--drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.photo-grid--saving {
  /* Subtle pulse so the user knows a save is in flight without blocking
     them from continuing to drag. */
  opacity: 0.85;
}

.photo-grid--saved::after {
  content: 'Order saved';
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  pointer-events: none;
  z-index: 1000;
  animation: photo-grid-saved-fade 800ms ease forwards;
}

@keyframes photo-grid-saved-fade {
  0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
  20% { opacity: 1; transform: translateX(-50%) translateY(0); }
  80% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px); }
}

.photo-tile__drag-handle {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.photo-tile__drag-handle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* In-page photo lightbox for the public vehicle page. Pairs with
   /lightbox.js — see the public garage/vehicle pages for usage. */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox--open {
  display: flex;
}

.lightbox-lock-scroll {
  overflow: hidden;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox__nav,
.lightbox__close {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}

.lightbox__nav:hover,
.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.lightbox__nav:focus-visible,
.lightbox__close:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.lightbox__nav svg,
.lightbox__close svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.lightbox__nav--prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__nav--next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__close {
  top: 16px;
  right: 16px;
}

.lightbox__counter {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  letter-spacing: 0.5px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 12px;
  pointer-events: none;
}

@media (max-width: 600px) {
  .lightbox {
    padding: 0;
  }
  .lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .lightbox__nav--prev {
    left: 8px;
  }
  .lightbox__nav--next {
    right: 8px;
  }
}

/* Hero on the public vehicle page becomes a click target when the lightbox
   is enabled. Marker class + cursor/affordance only; the data-lightbox-trigger
   attribute drives the actual behavior in JS. */
.hero--clickable {
  cursor: pointer;
}

.hero--clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}

/* Convert the gallery <a> styling to work on <button> too. Reset button
   defaults so the existing .gallery__item layout rules apply unchanged. */
button.gallery__item {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}