/* ============================================================
   DRIVE — 80s Japanese city pop / vaporwave theme
   Neon sunset, chrome type, perspective grid. English only.
   ============================================================ */
:root {
  --pink:   #ff5fa2;
  --hot:    #ff2d95;
  --cyan:   #34f5ff;
  --purple: #7a5cff;
  --gold:   #ffd166;
  --orange: #ff7a3d;
  --ink:    #f4ecff;
  --muted:  #ccc0f2;
  --panel:  rgba(28, 16, 54, 0.72);
  --line:   rgba(255, 95, 162, 0.45);
  --err:    #ff4d6d;
  --ok:     #2ce6a8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.6 "Avenir Next", "Segoe UI", Helvetica, Arial, sans-serif;
  letter-spacing: .01em;
  /* Midnight-to-sunset sky. The solid colour is the safety net: iOS Safari's
     fixed-attachment quirks (and overscroll) must never expose white under
     light text. */
  background-color: #1a0033;
  background-image: linear-gradient(180deg, #1a0033 0%, #3a0f5e 38%, #7a1e6e 62%, #ff5f6d 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

/* --- Background scene: retro sun + perspective grid --- */
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* Soft neon horizon glow (replaces the literal retro sun) */
.bg-glow {
  position: absolute;
  left: 50%; bottom: 40vh;
  width: 120vw; height: 40vh;
  transform: translateX(-50%);
  background: radial-gradient(
    60% 100% at 50% 100%,
    rgba(255, 90, 150, .35) 0%,
    rgba(122, 92, 255, .18) 45%,
    transparent 75%
  );
}

.bg-grid {
  position: absolute;
  left: -25%; right: -25%; bottom: 0; height: 46vh;
  background-image:
    linear-gradient(var(--cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--cyan) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .35;
  transform: perspective(320px) rotateX(68deg);
  transform-origin: bottom center;
}

/* --- Top bar --- */
.topbar {
  position: relative;
  /* backdrop-filter forces a stacking context; without an explicit z-index the
     whole topbar (Account dropdown included) paints BELOW later page content
     on WebKit — the iPhone "menu breaks the page" bug. */
  z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  gap: 14px;
  background: rgba(12, 4, 30, .55);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* --- Account/overflow menu (native <details> dropdown; JS only adds closing) --- */
.nav-menu { position: relative; }
.nav-menu > summary {
  cursor: pointer; list-style: none; color: var(--cyan);
  padding: 4px 6px; border-radius: 6px; white-space: nowrap;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { color: #fff; }
.nav-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 220px; padding: 10px 0;
  display: flex; flex-direction: column;
  background: rgba(18, 8, 40, .97); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .5);
}
.nav-menu-panel a, .nav-menu-panel button.link {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 8px 16px; color: var(--ink); font: inherit;
  text-transform: none; letter-spacing: 0;
}
.nav-menu-panel a:hover, .nav-menu-panel button.link:hover {
  background: rgba(122, 92, 255, .18); text-shadow: none;
}
.nav-menu-panel hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.nav-menu-panel form { display: block; }
@media (max-width: 620px) {
  /* Phones: brand on top, one tidy centered nav row under it. */
  .topbar { flex-direction: column; align-items: center; gap: 8px; padding: 10px 12px; }
  .topbar nav { justify-content: center; flex-wrap: nowrap; gap: 8px; width: 100%; font-size: .88rem; }
  .topbar nav > a, .nav-menu > summary {
    display: inline-flex; align-items: center; min-height: 40px; padding: 4px 2px;
  }
  /* Feedback is already in Account. Keeping both copies made the primary row
     wrap on real iPhones, turning a two-level header into three cramped rows. */
  .topbar nav > .nav-feedback { display: none; }
  /* The panel stays anchored to the Account trigger (never static — that put it
     in-flow over the hero). Its right edge follows the trigger while its width
     is capped, so even a rightmost Account item cannot push it off-screen. */
  .nav-menu-panel {
    right: 0; left: auto; transform: none;
    top: calc(100% + 8px);
    width: min(300px, calc(100vw - 24px));
    max-height: 70vh; overflow-y: auto;
    background: #120828;
  }
}
@media (max-width: 360px) {
  .topbar nav { gap: 4px; font-size: .78rem; }
  .topbar nav > a, .nav-menu > summary { white-space: nowrap; }
  /* Admin remains one click on larger screens and is duplicated in Account on
     very narrow phones, where the extra top-level label cannot fit safely. */
  .topbar nav > .nav-admin { display: none; }
}

/* --- Pagination (Explore) --- */
.pager { display: flex; gap: 14px; align-items: center; justify-content: center;
  margin: 22px 0 6px; flex-wrap: wrap; }

/* --- Legal / policy pages: quiet long-form reading, no neon shouting --- */
.legal-page { line-height: 1.6; }
.legal-page h1 { text-transform: none; letter-spacing: 0; }
.legal-page h2 { font-size: 1.05rem; margin-top: 1.4em; text-transform: none; letter-spacing: 0; }
.legal-page ul { padding-left: 1.2em; }
.legal-page li { margin: .35em 0; }

.brand {
  font-weight: 800; font-style: italic; font-size: 1.25rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  padding: 2px 6px; white-space: nowrap;   /* breathing room so "Vehicled" isn't choked */
  text-shadow: 0 0 8px var(--hot), 0 0 20px var(--purple);
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-shadow: 0 0 10px var(--cyan); }

.container { position: relative; max-width: 780px; margin: 0 auto; padding: 24px 16px 80px; }

.footer { text-align: center; color: var(--muted); padding: 28px; font-style: italic; }
.footer a { color: var(--cyan); }

/* --- Accessibility (WCAG 2.0 AA / Israeli Standard 5568) --- */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--gold); color: #170a2e; padding: 10px 16px;
  border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 8px; }
/* Always-visible keyboard focus (the neon theme must never hide it). */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px;
}
main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* --- Hero --- */
.hero { text-align: center; padding: 42px 6px 24px; }
.hero h1 {
  font-size: clamp(1.5rem, 6.2vw, 3.4rem);
  font-style: italic; font-weight: 800;
  text-transform: uppercase; letter-spacing: .01em;
  overflow-wrap: break-word;
  margin: 0 0 14px;
  /* Chrome + neon */
  background: linear-gradient(180deg, #fff 0%, #ffd166 45%, #ff5fa2 55%, #7a5cff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(255,45,149,.55));
}
.lede { color: var(--ink); max-width: 48ch; margin: 0 auto 24px; font-size: 1.05rem;
  text-shadow: 0 1px 10px rgba(0,0,0,.65); }

/* Search-first landing hero. Named .home-search (NOT .hero-search — that's the Browse-page
   pill) so the two don't collide. Clean vertical stack: question, one wide input, chips. */
.home-search { max-width: 40rem; margin: 6px auto 18px; }
.home-search .hero-q {
  display: block; text-align: center; font-weight: 700; font-size: 1.15rem; margin: 0 0 14px;
  color: var(--cyan); letter-spacing: .04em; text-transform: uppercase;
}
.home-search-row { position: relative; display: block; }
.home-search-row input {
  width: 100%; box-sizing: border-box; font-size: 1.15rem;
  padding: 18px 62px 18px 22px; border-radius: 16px;
  border: 1.5px solid rgba(122,92,255,.55); color: var(--ink);
  background: linear-gradient(180deg, rgba(28,18,52,.72), rgba(16,8,34,.72));
  box-shadow: 0 10px 34px rgba(122,92,255,.18), inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.home-search-row input::placeholder { color: rgba(230,230,245,.5); }
.home-search-row input:focus {
  outline: none; border-color: var(--cyan);
  box-shadow: 0 12px 42px rgba(82,245,255,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
/* the "+" reads as a tappable accent, not just a glyph */
.home-search-plus {
  position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 1.3rem; font-weight: 700; color: #12071f; pointer-events: none;
  background: linear-gradient(135deg, var(--gold), var(--hot));
  box-shadow: 0 2px 12px rgba(255,45,149,.45);
}
.home-search .results { margin-top: 8px; border: 1px solid rgba(122,92,255,.3); text-align: left; }
.home-quick { text-align: center; margin: 14px 0 4px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 8px; }
.home-quick-label { opacity: .8; }
.home-quick .chip {
  background: rgba(122,92,255,.16); border: 1px solid rgba(122,92,255,.4); color: var(--ink);
  border-radius: 999px; padding: 7px 15px; cursor: pointer; font-size: .9rem; margin: 0;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.home-quick .chip:hover {
  background: rgba(122,92,255,.4); border-color: var(--cyan); transform: translateY(-2px);
}
.js-hero-hint { text-align: center; min-height: 1.1em; }
.hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
.hero-cta .btn { font-size: 1.02rem; padding: 12px 22px; }
.hero-signin { margin-top: 6px; }

.features { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 640px) { .features { grid-template-columns: repeat(3, 1fr); } }

/* --- Panels --- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin: 16px 0;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(52,245,255,.08), 0 12px 40px rgba(0,0,0,.35);
}
.card h2, .card h3, section > h2 {
  /* Keep the city-pop identity but stop every heading glowing at once — the
     full neon treatment stays reserved for the hero/brand. */
  font-style: italic; text-transform: uppercase; letter-spacing: .04em;
  color: #fff; text-shadow: 0 0 6px rgba(122, 92, 255, .35);
}

/* Vertical rhythm for the garage hierarchy: clear separation between the four
   zones (add → vehicles → life/share → wishlist/tools). */
#garage-list, #wishlist-list, .share-cta-block { margin-top: 34px; }
.card h3 { margin: 0 0 6px; }

/* --- Forms --- */
.stack { display: flex; flex-direction: column; gap: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--cyan); }

input, select, button, textarea {
  font: inherit; color: var(--ink);
  background: rgba(10, 4, 26, .75);
  border: 1px solid rgba(52,245,255,.35);
  border-radius: 10px; padding: 11px 13px;
}
input::placeholder, textarea::placeholder { color: rgba(210,198,240,.8); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--hot);
  box-shadow: 0 0 0 2px rgba(255,45,149,.35), 0 0 16px rgba(255,45,149,.4);
}

.btn { cursor: pointer; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.btn:hover { box-shadow: 0 0 18px rgba(52,245,255,.5); }
.btn.primary {
  border: none; color: #1a0033; font-weight: 800;
  background: linear-gradient(90deg, var(--gold), var(--orange) 40%, var(--hot));
  box-shadow: 0 0 22px rgba(255,45,149,.55);
}
.btn.primary:hover { filter: brightness(1.08); }

button.link {
  background: none; border: none; color: var(--cyan); cursor: pointer;
  padding: 6px 8px; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem;
}
button.link:hover { text-shadow: 0 0 10px var(--cyan); }
button.link.danger { color: var(--err); }
button.link.danger:hover { text-shadow: 0 0 10px var(--err); }
.inline { display: inline; }

/* --- Flash --- */
.flash { padding: 11px 14px; border-radius: 10px; margin: 14px 0; backdrop-filter: blur(6px); }
.flash.ok { background: rgba(44,230,168,.15); border: 1px solid var(--ok); color: #d7fff0; }
.flash.error { background: rgba(255,77,109,.15); border: 1px solid var(--err); color: #ffe0e6; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.year-note { display: block; margin-top: .2rem; }
.year-note.year-warn { color: #e0872b; }   /* model wasn't made in the entered year */

/* Inline "?" help — hover/focus reveals the explanation, so forms stay uncluttered. */
.help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; margin-left: 6px; vertical-align: middle;
  border: 1px solid var(--muted); color: var(--muted);
  font-size: .7rem; font-weight: 700; font-style: normal; cursor: help; user-select: none;
}
.help:hover, .help:focus { color: var(--ink); border-color: var(--ink); outline: none; }

/* --- Autocomplete results --- */
.results { list-style: none; margin: 0; padding: 0; border-radius: 10px; overflow: hidden; }
.results li {
  padding: 11px 13px; cursor: pointer;
  border-bottom: 1px solid rgba(52,245,255,.18);
  background: rgba(10,4,26,.85);
}
.results li:hover, .results li.active { background: rgba(122,92,255,.35); }
.results .type { color: var(--gold); font-size: .8rem; font-style: italic; }
/* Miss state: tell the user it's not in the catalog + a "request it" button. Not a row. */
.results li.veh-empty { cursor: default; padding: 12px 13px; line-height: 1.5; }
.results li.veh-empty:hover { background: rgba(10,4,26,.85); }
.results li.veh-empty .report-missing {
  display: inline-block; margin-top: 4px; padding: 4px 10px; border-radius: 8px;
  background: rgba(122,92,255,.30); border: 1px solid rgba(122,92,255,.55);
  color: var(--ink); cursor: pointer; font-size: .85rem;
}
.results li.veh-empty .report-missing:hover { background: rgba(122,92,255,.5); }

/* "Which generation?" visual chooser — photo cards for an unsure user. */
.gen-choices { margin: 6px 0 4px; }
.gen-choices .gen-head { margin: 0 0 6px; }
.gen-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.gen-card {
  flex: 1 1 120px; max-width: 180px; padding: 0; cursor: pointer;
  border: 1px solid rgba(52,245,255,.25); border-radius: 10px; overflow: hidden;
  background: rgba(10,4,26,.85); color: inherit; font: inherit; text-align: center;
}
.gen-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.gen-card .gen-years { display: block; padding: 6px 4px; font-size: .85rem; font-weight: 600; }
.gen-card:hover, .gen-card:focus-visible { border-color: var(--gold); background: rgba(122,92,255,.35); }

/* --- Garage header row --- */
.garage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.garage-head h1 { margin: 0 0 4px; font-style: italic; }
.garage-head .btn { text-decoration: none; padding: 11px 16px; white-space: nowrap; }

/* --- Big, fun hero search (Browse) --- */
.hero-search {
  display: flex; align-items: center; gap: 10px;
  margin: 22px auto; max-width: 640px; padding: 8px 10px 8px 18px;
  background: var(--card, #14121f); border-radius: 999px;
  border: 2px solid transparent;
  background-image:
    linear-gradient(var(--card, #14121f), var(--card, #14121f)),
    linear-gradient(90deg, #ff5db1, #4f8cff, #4dffd2);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  transition: box-shadow .15s ease, transform .15s ease;
}
.hero-search:focus-within { box-shadow: 0 10px 40px rgba(79,140,255,.45); transform: translateY(-1px); }
.hero-search-icon { font-size: 1.4rem; line-height: 1; }
.hero-search input[type="search"] {
  flex: 1; border: 0; background: transparent; outline: none;
  font-size: 1.25rem; padding: 12px 4px; color: inherit; min-width: 0;
}
.hero-search input::placeholder { opacity: .55; }
.hero-search .btn { border-radius: 999px; padding: 12px 22px; font-size: 1.05rem; white-space: nowrap; }
.hero-search-clear {
  flex: 0 0 auto; text-decoration: none; font-size: 1.1rem; opacity: .6;
  padding: 0 8px; color: inherit;
}
.hero-search-clear:hover { opacity: 1; }

/* --- Browse catalog: photo grid --- */
.browse-grid {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.browse-card { display: flex; flex-direction: column; }
.browse-photo {
  display: block; border-radius: 10px; overflow: hidden; margin: -4px -4px 10px;
  aspect-ratio: 3 / 2; background: rgba(255,255,255,.04);
}
.browse-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.browse-photo-none {
  width: 100%; height: 100%; display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center; opacity: .6;
}
.browse-card .btn { margin-top: auto; }

/* --- Community section on the landing page --- */
.community-home { margin: 32px 0; }
.community-home .ch-sub { margin: 24px 0 12px; font-size: 1.05rem; }
.community-home .chips a.chip { text-decoration: none; }
.community-home .chips a.chip:hover { background: rgba(255,255,255,.12); }
.community-home .ch-cta { margin-top: 16px; }

/* Compact poster strip on the landing — one horizontally-scrolling row, doesn't dominate */
.ch-sub-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* Full poster gallery (/posters) */
.posters-grid {
  list-style: none; padding: 0; margin: 18px 0;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.posters-grid li { display: flex; flex-direction: column; gap: 4px; }
.posters-grid img {
  width: 100%; border-radius: 12px; display: block;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

/* Most-logged models — the hero feature of the community section */
.popular-grid {
  list-style: none; padding: 0; margin: 0 0 8px;
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.popular-card a {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit;
}
.popular-photo {
  position: relative; display: block; border-radius: 14px; overflow: hidden;
  aspect-ratio: 3 / 2; background: rgba(255,255,255,.05);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease;
}
.popular-card a:hover .popular-photo { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.popular-photo img { width: 100%; height: 100%; object-fit: cover; }
.popular-count {
  position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px;
  font-weight: 700; font-size: .85rem; color: #fff; background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}
.popular-name { font-weight: 700; font-size: 1.02rem; margin-top: 6px; }

/* --- Model page (car detail) --- */
.model-hero {
  border-radius: 14px; overflow: hidden; margin: 6px 0 18px;
  aspect-ratio: 16 / 9; max-height: 420px; background: rgba(255,255,255,.04);
}
.model-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.model-facts {
  list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 10px;
}
.model-facts li {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 14px;
  background: rgba(255,255,255,.04); border-radius: 10px; min-width: 90px;
}
.model-facts .stat-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.model-facts .stat-v { font-size: 1.15rem; font-weight: 700; }
.gen-h { margin: 16px 0 8px; font-size: 1rem; font-weight: 700; }
.photo-grid {
  list-style: none; padding: 0; margin: 0 0 6px;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.photo-grid li { display: flex; flex-direction: column; gap: 4px; }
.photo-grid a { display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 2; background: rgba(255,255,255,.04); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gen-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gen-list li { padding: 6px 12px; background: rgba(255,255,255,.04); border-radius: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 5px 12px; background: rgba(20,10,44,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; font-size: .9rem; }

/* --- Tour / walkthrough --- */
.tour { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.tour > li { display: flex; gap: 16px; align-items: flex-start; }
.tour .tour-n {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 1.1rem;
  background: var(--accent, #4f8cff); color: #fff;
}
.tour h2 { margin: 0 0 6px; font-size: 1.15rem; }
.tour p { margin: 0; }
.tour-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* --- Collapsible add panel --- */
.add-panel { margin-top: 22px; }
.add-panel > summary {
  list-style: none; cursor: pointer;
  font-style: italic; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; text-shadow: 0 0 10px var(--purple);
  padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px;
  background: rgba(28,16,54,.5);
}
.add-panel > summary::-webkit-details-marker { display: none; }
.add-panel > summary:hover { border-color: var(--hot); box-shadow: 0 0 14px rgba(255,45,149,.3); }
.add-panel[open] > summary { border-style: solid; margin-bottom: 6px; }

/* "Change the make/model" disclosure on the edit form */
.change-vehicle > summary {
  cursor: pointer; padding: 10px 12px; border: 1px dashed var(--line);
  border-radius: 10px; background: rgba(28,16,54,.4); color: var(--muted);
}
.change-vehicle > summary:hover { border-color: var(--hot); color: #fff; }
.change-vehicle > summary strong { color: #fff; }
.change-vehicle[open] > summary { border-style: solid; margin-bottom: 8px; }

/* --- Maker badge (self-hosted monogram "logo") --- */
.logo {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem; letter-spacing: .02em;
  color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.35);  /* AA contrast on every swatch */
  box-shadow: 0 0 14px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.25);
}
.logo-c0 { background: #ff5fa2; }
.logo-c1 { background: #34f5ff; }
.logo-c2 { background: #7a5cff; }
.logo-c3 { background: #ffd166; }
.logo-c4 { background: #ff7a3d; }
.logo-c5 { background: #2ce6a8; }
.logo-c6 { background: #ff2d95; }
.logo-c7 { background: #4f8cff; }
/* Real brand logo sits on a clean white tile (how logos are normally shown),
   so both dark monochrome marks and full-color logos read well. */
.logo-tile { background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.logo-tile img { width: 28px; height: 28px; object-fit: contain; display: block; }

/* --- Ownership + duration meta --- */
.drive-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 2px 0 10px 50px; }
.tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line);
}
.tag.owned { color: #170a2e; background: var(--gold); border-color: var(--gold); }
.tag.drove { color: var(--cyan); background: rgba(52,245,255,.12); border-color: rgba(52,245,255,.5); }
/* Currently-owned/driven: a live green ring so "Owning"/"Driving" reads as present. */
.tag.current { box-shadow: 0 0 0 2px rgba(53,243,106,.5); }
.drive-meta .dur { color: var(--muted); font-size: .85rem; font-style: italic; }
.drive-color {
  display: flex; align-items: flex-start; gap: 7px;
  margin: -2px 0 10px 50px; color: var(--ink); font-size: .85rem; line-height: 1.35;
}
.drive-color strong { color: var(--muted); font-weight: 600; }

/* --- Drive list --- */
.drive-list { list-style: none; padding: 0; margin: 0; }
.drive-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.drive-head strong { font-style: italic; font-size: 1.05rem; }
.note-form { display: flex; gap: 8px; }
.note-form input { flex: 1; }

/* Consistent action footer: rate on the left, Edit/Delete grouped on the right,
   every control the same text-button look. */
.drive-actions {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line);
}
.drive-actions .rate { margin-right: auto; }          /* pushes Edit/Delete to the right edge */
.drive-actions a.link {
  color: var(--cyan); text-decoration: none; cursor: pointer;
  padding: 6px 8px; text-transform: uppercase; letter-spacing: .05em; font-size: .82rem;
}
.drive-actions a.link:hover { text-shadow: 0 0 10px var(--cyan); }

/* Colour picker: a swatch + free-text field + a ▾ toggle, and a compact dropdown of
   every colour the model comes in (each with its own swatch). Re-openable any time. */
.color-picker { position: relative; }
.color-row { display: flex; align-items: center; gap: 8px; }
.color-row .js-color-input { flex: 1; }
.color-swatch { width: 22px; height: 22px; border-radius: 5px; border: 1px solid var(--line);
                flex: 0 0 auto; background: transparent; }
.color-toggle { flex: 0 0 auto; cursor: pointer; padding: 6px 11px; font-size: .9rem; line-height: 1;
                color: var(--ink); background: rgba(255, 255, 255, .04);
                border: 1px solid var(--line); border-radius: 6px; }
.color-toggle:hover { background: rgba(255, 255, 255, .1); }
.color-swatch { background-size: cover !important; background-position: center !important; }
/* Visual colour grid: pick by looking at the real photo we have, not by typing a name. */
.color-menu {
  list-style: none; margin: 8px 0 0; padding: 0; display: none;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;
  max-height: 320px; overflow-y: auto;
}
.color-menu.open { display: grid; }
.color-menu .color-opt {
  display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  padding: 4px; border-radius: 8px; border: 1px solid transparent; font-size: .72rem;
  color: var(--muted); text-align: center;
}
.color-menu .color-opt:hover { background: rgba(255, 255, 255, .06); }
.color-menu .color-opt.on { border-color: var(--gold); background: rgba(255,209,102,.08); color: var(--ink); }
.color-menu .swatch-img { width: 100%; height: 52px; object-fit: cover; border-radius: 6px;
                          border: 1px solid var(--line); display: block; background: rgba(0,0,0,.2); }
.color-menu .swatch { width: 100%; height: 52px; border-radius: 6px; border: 1px solid var(--line); }
.color-menu .swatch-name { line-height: 1.15; }

.ad-slot { max-width: 970px; margin: 8px auto 0; padding: 6px 16px; text-align: center; overflow: hidden; }
.ad-slot .ad-label { display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
                     color: var(--muted); opacity: .6; margin-bottom: 4px; }

.switch-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.switch-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }

.badge {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 10px; border-radius: 999px; font-weight: 700;
}
.badge.car { color: #041b1f; background: var(--cyan); box-shadow: 0 0 12px rgba(52,245,255,.6); }
.badge.motorcycle { color: #2a0a1a; background: var(--gold); box-shadow: 0 0 12px rgba(255,209,102,.6); }

code { color: var(--gold); background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 5px; }
.token-field { font-family: monospace; cursor: pointer; }

/* --- Clickable vehicle titles (link to the "who's driven it" page) --- */
.veh-link { color: inherit; text-decoration: none; }
.veh-link:hover, .veh-link:focus { text-decoration: underline; text-decoration-color: var(--cyan); }

/* Admin: who's online now */
.online-list { list-style: none; padding: 0; margin: .4rem 0; display: flex; flex-direction: column; gap: .35rem; }
.online-list li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.online-dot { width: 9px; height: 9px; border-radius: 50%; background: #35f36a; flex: none;
  box-shadow: 0 0 0 3px rgba(53,243,106,.18); }
.online-ago { margin-left: auto; }
.pill { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px;
  border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }

/* --- Empty-garage state --- */
.empty-garage { text-align: center; padding: 22px 0 6px; }
.empty-garage .btn { margin-top: 8px; }
.welcome { padding: 30px 0 10px; }
.welcome h2 { margin-bottom: 6px; }

/* --- Small utility classes (CSP-safe; no inline styles) --- */
.card-gold { border-color: var(--gold); }
.tag-locked { background: var(--err); color: #fff; }
/* --- Admin system dashboard --- */
.alert-list { list-style: none; padding: 0; margin: 0; }
.alert { padding: 8px 12px; border-radius: 8px; margin: 6px 0; border: 1px solid var(--line); }
.alert.warning { border-color: var(--gold); background: rgba(255,196,0,.08); }
.alert.critical { border-color: var(--err); background: rgba(255,60,90,.1); }
.alert strong { text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.metric-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.metric-table th, .metric-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.metric-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.metric-table tr.slow { color: var(--gold); }

.badge-count {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--hot); color: #fff; font-size: .72rem; font-weight: 700; text-align: center;
}
.row-actions { display: flex; gap: 14px; align-items: center; margin-top: 6px; }

/* --- Stock photo credit (Wikimedia attribution) --- */
.photo.stock img { opacity: .97; }
.credit { font-size: .68rem; opacity: .7; margin: 4px 0 0; }
.color-match-note {
  margin: 7px 0 0; padding: 7px 9px; border-left: 3px solid var(--gold);
  border-radius: 4px; background: rgba(255, 209, 102, .1);
  color: var(--ink); font-size: .76rem; line-height: 1.35;
}

/* --- In-place actions: inline delete confirm + busy state --- */
.confirm-inline { display: inline-flex; gap: 10px; align-items: center; }
.drive.busy { opacity: .5; pointer-events: none; }
.drive.just-added { animation: just-added 2.4s ease-out; }
@keyframes just-added {
  0%, 30% { box-shadow: 0 0 0 2px var(--gold), 0 0 26px rgba(255, 209, 102, .6); }
  100% { box-shadow: none; }
}
.muted-panel > summary { color: var(--muted); }

/* --- Explore public garages --- */
.explore-search input[type="search"] { flex: 1 1 220px; }
.garage-grid { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .garage-grid { grid-template-columns: repeat(2, 1fr); } }
.garage-card { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.garage-card .btn { margin-top: auto; }

/* --- Not-found garage graphic (subtle) --- */
.notfound-art {
  display: block; width: 180px; max-width: 55%; height: auto; margin: 0 auto 18px;
  color: var(--cyan); opacity: .45;
  filter: drop-shadow(0 0 12px rgba(52, 245, 255, .3));
}

/* --- Sharing / recap / who-else --- */
.head-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.copy-link { cursor: pointer; white-space: nowrap; }
.recap {
  font-size: 1.05rem; font-style: italic; color: var(--ink);
  margin: 6px 0 16px; text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.recap strong { color: #fff; }
.others {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--cyan); text-decoration: none; padding: 2px 8px;
  border: 1px solid rgba(52,245,255,.4); border-radius: 999px;
}
.others:hover { background: rgba(52,245,255,.12); text-decoration: none; }

/* --- Photos --- */
.photo { margin: 6px 0 10px; position: relative; }
.ai-tag-corner { position: absolute; top: 8px; right: 8px; font-size: .62rem; letter-spacing: .04em;
  background: rgba(52,245,255,.85); color: #04121a; padding: 2px 7px; border-radius: 999px; }
.photo img {
  width: 100%; height: auto; object-fit: contain;        /* show the whole car, never crop */
  border-radius: 12px; border: 1px solid var(--line); display: block;
  background: rgba(0, 0, 0, .15);
}
.photo-add { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px; flex-wrap: wrap; }
.photo-add input[type=file] { font-size: .82rem; max-width: 100%; }
.check.small { font-size: .78rem; opacity: .85; display: inline-flex; align-items: center; gap: 4px; margin: 0; }

/* A row of extra user photos + the AI render, beneath the cover photo. */
.photo-strip { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; padding: 0; margin: 4px 0 8px; }
.photo-strip li { position: relative; width: 88px; height: 66px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(0,0,0,.15); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-strip .inline { position: absolute; top: 2px; right: 2px; margin: 0; }
.photo-strip .inline .link.danger { background: rgba(0,0,0,.55); color: #fff; border-radius: 6px;
  padding: 0 5px; line-height: 1.4; font-size: .72rem; }
.photo-strip .ai-shot { border-color: rgba(52,245,255,.5); }
.photo-strip .ai-tag { position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-size: .62rem; letter-spacing: .04em; background: rgba(52,245,255,.85); color: #04121a; padding: 1px 0; }

/* --- Sharing --- */
label.check { flex-direction: row; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0; color: var(--ink); font-size: .95rem; }
label.check input { width: auto; }

/* --- Public garage note --- */
.pub-note { margin: 8px 0 0; font-style: italic; color: var(--ink); }

/* --- Driving-life stats --- */
.stats-card { border-color: rgba(52,245,255,.4); }
.stat-grid {
  display: grid; gap: 10px; margin: 10px 0 4px;
  grid-template-columns: repeat(3, minmax(0, 1fr));  /* mobile: fixed 3-up, no overflow */
}
@media (min-width: 560px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-l { overflow-wrap: normal; word-break: keep-all; text-align: center; font-size: clamp(.62rem, 2.6vw, .8rem); }
.stat {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 12px 6px; border-radius: 12px;
  background: rgba(10,4,26,.55); border: 1px solid var(--line);
}
.stat-n {
  font-size: 1.7rem; font-weight: 800; font-style: italic; line-height: 1;
  background: linear-gradient(180deg, #fff, var(--gold) 60%, var(--hot));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-l { margin-top: 4px; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); }
.stat-line { margin: 10px 0 0; color: var(--ink); }
.stat-line strong { color: #fff; }

/* "Driving life" decade timeline — reuses the .spark bar pattern (fixed-height
   flex row, direct-child bars) with a labelled axis underneath. */
.timeline { margin: 16px 0 2px; }
.timeline .spark { height: 56px; gap: 6px; }
.spark-bar.tl-peak { background: linear-gradient(180deg, var(--gold), var(--hot)); }
.tl-axis { display: flex; gap: 6px; margin-top: 6px; }
.tl-tick { flex: 1; text-align: center; font-size: .68rem; color: var(--muted); white-space: nowrap; }
.tl-tick b { display: block; color: var(--gold); font-size: .78rem; font-weight: 800; }

/* Achievement badges. */
.badges-card { border-color: rgba(122,92,255,.5); }
.badge-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; }
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(10,4,26,.55); border: 1px solid var(--line);
}
.badge-emoji { font-size: 1.1rem; line-height: 1; }
.badge-label { font-size: .82rem; font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Share button (X/Twitter). */
.btn.share-x { background: #000; border-color: #333; color: #fff; }

/* Community pulse (Explore). */
.pulse-card { border-color: rgba(255,209,102,.45); }
.pulse-cols { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 560px) { .pulse-cols { grid-template-columns: 1fr 1fr; } }
.pulse-h { margin: 0 0 6px; font-size: .95rem; }
.pulse-list { list-style: none; margin: 0; padding: 0; }
.pulse-list li { padding: 3px 0; }

/* Garage face-off. */
.vs-pick { align-items: center; }
.vs-x { font-weight: 800; font-style: italic; color: var(--muted); }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; text-align: center; }
.vs-side { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(10,4,26,.5); }
.vs-side.win { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.vs-crown { display: block; margin-top: 4px; color: var(--gold); font-weight: 800; }
.vs-tie { text-align: center; color: var(--muted); margin: 10px 0 0; }
.vs-table { width: 100%; border-collapse: collapse; margin: 14px 0 0; }
.vs-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  text-align: center; padding: 8px 6px; font-weight: 700; }
.vs-table td { text-align: center; font-size: 1.3rem; font-weight: 800; width: 38%; padding: 8px 6px; }
.vs-table td.vs-w { color: var(--gold); }

/* --- Filter bar --- */
.list-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.filter-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-bar select, .filter-bar button { padding: 7px 10px; font-size: .85rem; }
.filter-bar .check { flex-direction: row; gap: 6px; font-size: .82rem; color: var(--muted); }
.wish { opacity: .96; }

/* --- Admin --- */
.admin-nav { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.admin-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.export-bar { margin: 10px 0 4px; }
.help-toc { columns: 2; list-style: none; padding-left: 0; margin: 0; }
.help-toc li { margin: 3px 0; break-inside: avoid; }
@media (max-width: 620px) { .help-toc { columns: 1; } }
.cov-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.cov-table th, .cov-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.cov-table th { color: var(--muted); font-weight: 600; font-size: .85rem; }
.cov-table tr.cov-total td { border-top: 2px solid var(--line); font-size: 1.05rem; }
.countries-line { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.country-chip { font-size: .85rem; padding: 2px 9px; border: 1px solid var(--line);
  border-radius: 999px; background: rgba(28,16,54,.45); white-space: nowrap; }
.action-list, .event-list { list-style: none; padding: 0; margin: 0; }
.action-list li { display: flex; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--line); }
.action-list .cnt { color: var(--gold); font-weight: 700; }
.event-list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--line); }
.event-list .act, .action-list .act { color: var(--cyan); font-family: monospace; }
.event-list .who { color: var(--ink); }
.event-list .when { margin-left: auto; }

/* --- Admin dashboard grid + behavior --- */
.admin-grid { list-style: none; padding: 0; margin: 6px 0 20px;
  display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .admin-grid { grid-template-columns: repeat(4, 1fr); } }
.admin-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  padding: 14px; border-radius: 12px; background: rgba(28,16,54,.5);
  border: 1px solid var(--line); color: var(--ink); }
.admin-tile:hover { border-color: var(--hot); box-shadow: 0 0 14px rgba(255,45,149,.3); }
.admin-tile strong { color: #fff; font-style: italic; }
.admin-cols { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .admin-cols { grid-template-columns: 1fr 1fr; } }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 8px 0; }
.spark-bar { flex: 1; background: linear-gradient(180deg, var(--cyan), var(--purple));
  border-radius: 2px 2px 0 0; min-height: 2px; }
.spark-h0{height:2px}.spark-h1{height:6px}.spark-h2{height:10px}.spark-h3{height:14px}
.spark-h4{height:18px}.spark-h5{height:22px}.spark-h6{height:26px}.spark-h7{height:30px}
.spark-h8{height:34px}.spark-h9{height:38px}.spark-h10{height:42px}
.demo-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 10px; margin: 12px 0;
  background: rgba(255,196,0,.12); border: 1px solid var(--gold); }
.demo-banner .btn { padding: 7px 14px; }
.site-notice { padding: 10px 14px; border-radius: 10px; margin: 12px 0;
  background: rgba(52,245,255,.1); border: 1px solid rgba(52,245,255,.5); color: var(--ink); }

/* --- Would-drive-again star --- */
button.link.star { color: var(--muted); }
button.link.star.on { color: var(--gold); text-shadow: 0 0 10px rgba(255,209,102,.6); }
.tag.star-tag { color: #170a2e; background: var(--gold); border-color: var(--gold); }

/* --- Small screens: keep the big italic type inside the viewport --- */
@media (max-width: 460px) {
  .container { overflow-x: hidden; }
  .hero { padding: 34px 10px 20px; }
  .hero h1 { font-size: 1.35rem; letter-spacing: 0; overflow-wrap: anywhere; word-break: break-word; }
  .lede { font-size: .96rem; max-width: 100%; }
}

/* --- Admin catalog: brand groups + model gallery --- */
.gal-summary { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0 1rem; }
.gal-summary .chip { border: 1px solid var(--line, #333); border-radius: 6px; padding: .35rem .7rem; font-size: .82rem; }
.gal-summary .chip b { font-size: 1.05rem; }
.gal-summary .chip.ok b { color: var(--ok, #2a6); }
.gal-summary .chip.warn b { color: var(--gold, #c90); }
.gal-summary .chip.hot b { color: var(--hot, #c33); }
.gal-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin: .4rem 0 1rem; }
.gal-filters label { display: flex; flex-direction: column; font-size: .8rem; color: var(--muted); gap: .2rem; }
.gal-filters select, .gal-filters input { padding: .35rem .5rem; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.gal-card { border: 1px solid var(--line, #333); border-radius: 8px; padding: .6rem; }
.gal-card h3 { margin: 0 0 .1rem; font-size: 1rem; }
.gal-card .sub { color: var(--muted); font-size: .78rem; margin-bottom: .5rem; }
.badge.b-complete { background: color-mix(in srgb, var(--ok, #2a6) 25%, transparent); color: var(--ok, #2a6); }
.badge.b-incomplete { background: color-mix(in srgb, var(--gold, #c90) 25%, transparent); color: var(--gold, #c90); }
.badge.b-none { background: color-mix(in srgb, var(--hot, #c33) 25%, transparent); color: var(--hot, #c33); }
.badge.b-untargeted { background: #8883; color: var(--muted); }
.gal-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .35rem; }
.gal-photo { text-align: center; font-size: .62rem; color: var(--muted); }
.gal-photo img { width: 100%; height: 60px; object-fit: cover; border-radius: 4px; background: #1113; display: block; }
.gal-photo .cap { display: block; line-height: 1.15; margin-top: .12rem; word-break: break-word; }
.gal-missing { font-size: .68rem; color: var(--gold, #c90); margin-top: .4rem; }
.gal-pager { display: flex; gap: .4rem; align-items: center; margin: 1.2rem 0; flex-wrap: wrap; }
.gal-pager a, .gal-pager span { padding: .3rem .6rem; border: 1px solid var(--line, #333); border-radius: 5px; }
.gal-pager .cur { background: var(--accent, #2a6); color: #fff; }
.brand { border: 1px solid var(--line, #333); border-radius: 8px; margin: .6rem 0; }
.brand > summary { cursor: pointer; padding: .6rem .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 600; list-style: none; }
.brand > summary::-webkit-details-marker { display: none; }
.brand > summary::before { content: "\25B8"; color: var(--muted); font-weight: 400; }
.brand[open] > summary::before { content: "\25BE"; }
.brand > summary .muted { font-weight: 400; font-size: .8rem; }
.brand-body { padding: .2rem .8rem .8rem; }
.edit-row { border-top: 1px solid var(--line, #333); padding-top: .6rem; margin-top: .6rem; }
.gal-filters a.clear { align-self: center; }

/* --- Admin catalog: per-model collapsible rows inside a brand --- */
.model { border: 1px solid var(--line, #333); border-radius: 6px; margin: .35rem 0; }
.model > summary { cursor: pointer; padding: .4rem .6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; list-style: none; }
.model > summary::-webkit-details-marker { display: none; }
.model > summary::before { content: "\25B8"; color: var(--muted); font-weight: 400; }
.model[open] > summary::before { content: "\25BE"; }
.model > summary .muted { font-weight: 400; font-size: .76rem; }
.model > summary a { margin-left: auto; }
.model-body { padding: .2rem .6rem .6rem; }

/* Private-alpha access gate (alpha_gate.html) */
.gate-card{max-width:26rem;margin:11vh auto 0;text-align:center}
.gate-tag{font-weight:700;color:var(--gold);letter-spacing:.02em;margin:.25rem 0 1rem}
.gate-error{color:var(--hot);font-weight:600}
.gate-form{display:flex;flex-direction:column;gap:.7rem;margin:1.3rem 0 .8rem}
.gate-form input{padding:.65rem .85rem;font-size:1.15rem;text-align:center;letter-spacing:.12em}

/* Field hint text + the from–to "when did you drive it" range */
.hint{display:block;text-transform:none;letter-spacing:normal;font-weight:400;margin-top:2px}
fieldset.year-range{border:1px solid rgba(52,245,255,.22);border-radius:10px;padding:.55rem .7rem;margin:0}
fieldset.year-range legend{padding:0 .35rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cyan)}
.range-row{display:flex;align-items:flex-end;gap:.5rem}
.range-row .range-field{flex:1}
.range-dash{padding-bottom:.55rem;color:var(--muted)}

/* Share your driving life — CTA + forum-signature copy panel */
.share-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;justify-content:space-between}
.share-cta p{margin:0}
.share-panel{margin:.6rem 0 1rem}
.share-panel summary{cursor:pointer;font-weight:600;color:var(--cyan)}
.share-body{margin-top:.7rem;display:flex;flex-direction:column;gap:.55rem}
.sig-text{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;
  resize:vertical;background:rgba(10,4,26,.75);color:var(--ink);border:1px solid rgba(52,245,255,.22);
  border-radius:8px;padding:.55rem .7rem}
.share-card-preview{max-width:100%;width:420px;border-radius:12px;border:1px solid rgba(52,245,255,.22)}
/* Garage poster previews (the shareable image) */
.poster-previews{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:.6rem}
.poster-thumb{width:200px;max-width:45vw;border-radius:12px;border:1px solid rgba(52,245,255,.25);display:block}
.poster-thumb.story{width:120px}
.share-moment{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;background:rgba(122,92,255,.16);border-color:rgba(122,92,255,.5)}
.share-moment p{margin:0}
.qr-thumb{width:150px;border-radius:10px;background:#fff;padding:6px}
.notif{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.notif.unread{border-color:rgba(122,92,255,.7);background:rgba(122,92,255,.12)}
.share-cta-block p{margin:0 0 .6rem}
.share-cta-block .head-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.8rem}
/* Poster panel: two side-by-side choices (your photos vs AI renders) */
.poster-view-link{display:block;max-width:420px;margin:.4rem 0 .2rem}
.poster-view{width:100%;border-radius:14px;border:1px solid rgba(52,245,255,.25);display:block;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.poster-scope{display:flex;gap:.4rem;margin:.2rem 0 .6rem;flex-wrap:wrap}
.poster-scope .chip{font-size:.82rem;padding:.28rem .7rem;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);text-decoration:none}
.poster-scope .chip.on{background:rgba(52,245,255,.14);border-color:rgba(52,245,255,.5);color:#eaffff}
.poster-choices{display:flex;flex-wrap:wrap;gap:1.4rem;margin:.4rem 0 .2rem}
.poster-choice{margin:0;display:flex;gap:.7rem;align-items:flex-start}
.poster-choice figcaption{display:flex;flex-direction:column;gap:.35rem;padding-top:.2rem}
.poster-choice-actions{display:flex;flex-wrap:wrap;gap:.4rem}
.btn.small{padding:.28rem .6rem;font-size:.82rem}
/* Small, crisp poster thumbnail (served at ~its display size, not a scaled-up preview). */
.poster-thumb-link{display:block;flex:none}
.poster-thumb{height:150px;width:auto;border-radius:10px;display:block;
  border:1px solid rgba(52,245,255,.25);box-shadow:0 4px 14px rgba(0,0,0,.3)}
.poster-thumb:hover{border-color:rgba(52,245,255,.6)}
.share-preview{margin-top:.7rem}
.share-preview summary{cursor:pointer}
.share-preview .sig-text{margin-top:.5rem}

/* Community: 👍 reactions + follow buttons */
.community-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.5rem}
.react-btn,.follow-btn{display:inline-flex;align-items:center;gap:.3rem;padding:4px 11px;border-radius:999px;
  font-size:.85rem;line-height:1.4;cursor:pointer;background:rgba(10,4,26,.6);
  border:1px solid rgba(52,245,255,.28);color:var(--ink)}
.react-btn:hover,.follow-btn:hover{background:rgba(122,92,255,.28)}
.react-btn.on{background:rgba(122,92,255,.45);border-color:rgba(122,92,255,.8)}
.follow-btn.on{background:rgba(52,245,255,.22);border-color:rgba(52,245,255,.6)}
.react-btn.static,.follow-btn.static{cursor:default;background:transparent;border-color:rgba(52,245,255,.18)}
.react-btn[disabled],.follow-btn[disabled]{opacity:.6;cursor:progress}
.followers-pop{display:inline-block}
.followers-pop summary{cursor:pointer;display:inline}
.followers-list{list-style:none;margin:.4rem 0 0;padding:.4rem .6rem;display:flex;flex-wrap:wrap;gap:.5rem;
  background:rgba(10,4,26,.6);border:1px solid rgba(52,245,255,.2);border-radius:8px}
.followers-list li a{white-space:nowrap}

/* "Sample" badge for demo/mock garages — amber so it clearly reads as not-a-real-user */
.sample-badge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.72rem;
  font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle;
  background:rgba(255,176,32,.18);color:#ffb020;border:1px solid rgba(255,176,32,.5)}

/* --- Compact garage cards (2026-08): the per-card photo/note editors are collapsed
   <details>; on phones the cover photo is height-capped so a long garage stays
   scrollable. The full image is one tap away (the card links to the model page). --- */
.card-more { margin: 4px 0; }
.card-more summary { cursor: pointer; list-style: none; }
.card-more summary::-webkit-details-marker { display: none; }
.card-more[open] summary { color: var(--muted); }
@media (max-width: 620px) {
  .container { padding: 18px 12px calc(104px + env(safe-area-inset-bottom)); }
  #garage-list { margin-top: 28px; }
  .list-head { align-items: stretch; }
  .list-head h2 { width: 100%; margin-bottom: 0; }
  .filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; gap: 8px; }
  .filter-bar select, .filter-bar button { width: 100%; min-width: 0; height: 44px; min-height: 44px; }
  .filter-bar .check { min-height: 44px; margin: 0; justify-content: center; }
  .drive.card { padding: 14px; }
  .drive-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; }
  .drive-head strong { line-height: 1.25; min-width: 0; }
  .drive-meta { margin: 8px 0 12px; gap: 6px 8px; }
  .drive-color { margin: -4px 0 12px; }
  .drive .photo img { max-height: 190px; object-fit: cover; object-position: center 62%; }
  .drive-meta { font-size: .78rem; }
  .card-more > summary { display: flex; align-items: center; min-height: 44px; padding: 4px 2px; box-sizing: border-box; }
  .drive-actions { flex-wrap: nowrap; gap: 0; }
  .drive-actions button.link, .drive-actions a.link {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 5px; box-sizing: border-box; font-size: .72rem; white-space: nowrap;
  }
}

/* Dream-garage Reading panel + forum flair line */
.taste-reading { border-left: 3px solid var(--accent, #ff2d95); margin-bottom: 14px; }
.taste-reading h3 { margin: 0 0 6px; font-size: 1rem; }
.reading-line { margin: 4px 0; font-size: 1.02rem; }
.reading-gap { margin: 8px 0 2px; font-style: italic; }
.flair-line { word-break: break-word; padding: 4px 6px; }

/* Garage verdict chips + judge panel */
.verdict-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip.verdict { cursor: pointer; }
.chip.verdict.static { cursor: default; }
.chip.verdict.on { border-color: var(--accent, #ff2d95); font-weight: 600; }
.chip.verdict .vc:empty { display: none; }
.judge-panel .judge-line { margin: 6px 0; }

/* Garage jump bar + collapsible vehicle list */
.jump-bar { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.veh-collapse > summary.list-summary { cursor: pointer; list-style: revert; }
.veh-collapse > summary.list-summary h2 { display: inline; margin: 0; }

/* Garage highlights band (compact stats + badge shelf up top) */
.highlights .hl-stats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge-more { margin-top: 6px; }
.badge-more > summary { cursor: pointer; }

/* 2026-08 garage redesign: six uniform collapsible sections (.sec) + header chips */
details.sec { margin-top: 18px; }
details.sec > summary {
  list-style: none; cursor: pointer;
  font-style: italic; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; text-shadow: 0 0 10px var(--purple);
  padding: 12px 14px; border: 1px dashed var(--line); border-radius: 12px;
  background: rgba(28,16,54,.5);
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: "▸ "; font-style: normal; }
details.sec[open] > summary::before { content: "▾ "; }
details.sec > summary:hover { border-color: var(--hot); box-shadow: 0 0 14px rgba(255,45,149,.3); }
details.sec[open] > summary { border-style: solid; margin-bottom: 8px; }
.meta-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 4px; }
.meta-chips .chip { text-decoration: none; }
.chip-pop { position: relative; display: inline-block; }
.chip-pop > summary { list-style: none; cursor: pointer; }
.chip-pop > summary::-webkit-details-marker { display: none; }
.chip-pop[open] > .followers-list {
  position: absolute; z-index: 30; margin-top: 6px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  min-width: 180px; list-style: none;
}
/* Inner disclosures (e.g. "+ Add to wishlist") read as secondary, not as siblings
   of the top-level sections. */
details.sec details.add-panel > summary {
  font-style: normal; text-transform: none; letter-spacing: 0;
  color: var(--muted); text-shadow: none; font-size: .9rem; padding: 8px 12px;
}

/* Design-review wave: two-tier sections, heading-in-summary, link chips, badge chips */
details.sec > summary h2 { display: inline; font: inherit; margin: 0; text-transform: inherit; }
details.sec.sec--primary > summary {
  border-style: solid; font-style: normal; color: #fff;
  border-color: var(--purple);
}
.chip-link { text-decoration: underline; }
.badge-chip { border-color: var(--gold, #ffd166); }
.garage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }

/* Landing: the signed-in "Go to my garage" CTA is THE action — make it read that way. */
.hero-cta .hero-garage-btn { font-size: 1.25rem; padding: 16px 34px; }

/* Reddit kit: numbered share steps */
.reddit-kit { margin: 14px 0 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.reddit-kit h3 { margin: 0 0 4px; font-size: 1rem; }
.kit-steps { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 10px; }
.kit-steps li > .btn { margin-right: 6px; }

/* Share sheet (dialog) — app-style: preview on top, destinations, copy-with-preview */
dialog.share-sheet {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 16px;
  width: min(560px, calc(100vw - 24px)); max-height: 88vh; overflow-y: auto;
  padding: 16px 18px 20px; margin: auto;
}
dialog.share-sheet::backdrop { background: rgba(8, 2, 22, .7); }
.sheet-close-row { display: flex; justify-content: flex-end; margin: 0; }
.share-sheet h2 { margin: 0 0 10px; }
/* Preview spans the card edge-to-edge and gets more height — it IS the content.
   The card reserves a top strip so the corner controls never overlap the preview. */
.share-cta-block { padding-top: 54px; }
.sheet-preview { margin: 0 -8px 0; }
.sheet-preview img { display: block; width: 100%; max-height: 460px; object-fit: contain; border-radius: 12px; background: rgba(0,0,0,.25); }
.artifact-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.artifact-tabs .chip { cursor: pointer; }
.artifact-tabs .chip.on { border-color: var(--hot); font-weight: 600; }
.sheet-reading { border-left: 3px solid var(--accent, #ff2d95); padding-left: 10px; margin: 12px 0; }
.sheet-reading h3 { margin: 0 0 4px; font-size: .95rem; }
.sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.sheet-copy-row { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.copy-preview { word-break: break-all; padding: 6px 8px; background: rgba(0,0,0,.3); border-radius: 8px; flex: 1; min-width: 180px; }
.sheet-foot { margin-top: 12px; }
@media (max-width: 620px) {
  dialog.share-sheet { width: calc(100vw - 12px); max-height: 92vh; }
}

/* Header share menu (YouTube-style rows) */
.share-menu { position: relative; display: inline-block; }
.share-menu > summary { list-style: none; cursor: pointer; display: inline-block; }
.share-menu > summary::-webkit-details-marker { display: none; }
.share-menu-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 230px; padding: 8px; border-radius: 14px;
  background: rgb(18, 8, 40); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  display: flex; flex-direction: column;
}
.menu-row {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 12px 14px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font: inherit; cursor: pointer; text-decoration: none;
}
.menu-row:hover { background: rgba(255,255,255,.08); }
.menu-row + .menu-row { border-top: 1px solid rgba(255,255,255,.07); border-radius: 0 0 10px 10px; }


/* Share section: corner copy-link icon, artifact dropdown, copy-icon text boxes */
.share-cta-block { position: relative; }
.card-corner-copy { position: absolute; top: 10px; right: 10px; padding: 6px 10px; }
.copybox { position: relative; }
.copybox .sig-text { width: 100%; box-sizing: border-box; }
.box-corner-copy { position: absolute; top: 6px; right: 6px; padding: 4px 8px; }
.artifact-menu .share-menu-panel { left: 0; }
.artifact-menu .menu-row.on { background: rgba(255,45,149,.15); }

/* Share card corner icons — one design language for all corner controls */
.card-corner { position: absolute; z-index: 5; }
.card-corner .btn, .card-corner.btn { padding: 6px 10px; font-size: .85rem; }
.card-corner-copy { top: 10px; right: 10px; }
.card-corner-vis { top: 10px; left: 10px; }
.menu-row[disabled] { opacity: .45; cursor: not-allowed; }
.copybox { margin-top: 10px; }

/* "+ Add a vehicle": a real button in the page's design language, with air
   between it and the filter bar below. */
details.sec details.add-panel { margin: 4px 0 18px; }
details.sec details.add-panel > summary.btn {
  display: inline-block; width: auto;
  font-style: normal; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; font-size: .95rem; color: var(--ink); text-shadow: none;
  background: rgba(10, 4, 26, .75);
  border: 1px solid rgba(52,245,255,.35); border-radius: 10px;
  padding: 11px 13px; cursor: pointer;
}
details.sec details.add-panel > summary.btn:hover { box-shadow: 0 0 18px rgba(52,245,255,.5); border-color: var(--hot); }
details.sec details.add-panel[open] > summary.btn { border-color: var(--hot); }

/* Admin launch pulse */
#launch-pulse .row-new td { background: rgba(46, 204, 113, .07); }
.chip.danger { border-color: var(--err); color: var(--err); }