/* Motorfiction -- design system v3
   Direction: cinematic, premium, dark, minimal. Inspired by Apple designing
   a luxury automotive platform. Glass materials, strong type hierarchy,
   generous negative space, restrained use of colour.
   Type: SF Pro / Inter system stack for everything. Saira Condensed reserved
         for select brand moments and small mechanical labels.
   Colour: layered dark surfaces with warm undertones, blaze orange accent
         used sparingly, near-white numerics for data figures. */

/* ======================================================================== */
/*  DESIGN TOKENS                                                           */
/* ======================================================================== */

:root {
  /* Horizontal page padding. Declared once so full-bleed rows can cancel it
     exactly instead of hard-coding the same number in two places. */
  --page-gutter: 16px;

  /* -- Surfaces: layered dark palette with warm charcoal undertones -------- */
  --bg: #09090b;
  --surface: #111114;
  --surface-2: #18181c;
  --surface-3: #222228;
  --line: #2a2a33;
  --line-soft: #1e1e25;

  /* -- Text ---------------------------------------------------------------- */
  --text: #f0f0f5;
  --muted: #8e8e9a;
  --dim: #5a5a68;

  /* -- Accent: brand blaze orange, used sparingly for key actions ---------- */
  --blaze: #ff4500;
  --blaze-text: #ff4500;
  /* -- Data figures: near-white with strong weight instead of coloured ----- */
  --volt: #f0f0f5;
  --on-volt: #09090b;
  --volt-wash: rgba(240,240,245,.06);

  /* -- Structural --------------------------------------------------------- */
  --topbar-bg: rgba(9,9,11,.82);
  --photo-bg: #000;

  /* -- Glass material: reusable surface for premium translucent panels ---- */
  --glass-bg: rgba(17,17,20,.72);
  --glass-border: rgba(255,255,255,.08);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.04);
  --glass-blur: blur(20px);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.28);

  /* -- Radii -------------------------------------------------------------- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* -- Typography --------------------------------------------------------- */
  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --ui: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* -- Layout ------------------------------------------------------------- */
  --shell: 640px;
  --ease: cubic-bezier(.22,.8,.28,1);
}

/* ------------------------------ light theme --------------------------------
 * Same structure, inverted ground. The brand red survives on white. Data
 * figures use dark text instead of the near-white dark-theme treatment.
 * Glass adapts to light translucency. */
[data-theme='light'] {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #f0f0f3;
  --surface-3: #e5e5eb;
  --line: #d4d4dc;
  --line-soft: #e8e8ee;

  --text: #0b0b0f;
  --muted: #5a5a68;
  --dim: #8e8e9a;

  --blaze: #ff4500;
  /* Deeper shade for small text on white, reaching 4.5:1 contrast ratio. */
  --blaze-text: #c2340b;
  --volt: #0b0b0f;
  --on-volt: #ffffff;
  --volt-wash: rgba(11,11,15,.06);

  --topbar-bg: rgba(255,255,255,.82);
  --photo-bg: #e5e5eb;

  --glass-bg: rgba(255,255,255,.72);
  --glass-border: rgba(0,0,0,.06);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,.5);
  --glass-shadow: 0 8px 32px rgba(0,0,0,.08);
}

@media (prefers-color-scheme: light) {
  [data-theme='system'] {
    --bg: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #f0f0f3;
    --surface-3: #e5e5eb;
    --line: #d4d4dc;
    --line-soft: #e8e8ee;

    --text: #0b0b0f;
    --muted: #5a5a68;
    --dim: #8e8e9a;

    --blaze: #ff4500;
    --blaze-text: #c2340b;
    --volt: #0b0b0f;
    --on-volt: #ffffff;
    --volt-wash: rgba(11,11,15,.06);

    --topbar-bg: rgba(255,255,255,.82);
    --photo-bg: #e5e5eb;

    --glass-bg: rgba(255,255,255,.72);
    --glass-border: rgba(0,0,0,.06);
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,.5);
    --glass-shadow: 0 8px 32px rgba(0,0,0,.08);
  }
}

/* ======================================================================== */
/*  RESET AND BASE                                                          */
/* ======================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ui);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--blaze); color: #fff; }

/* ======================================================================== */
/*  TYPOGRAPHY                                                              */
/* ======================================================================== */

/* Display family reserved for brand moments: section headings, stat figures,
   segment controls, and the brand wordmark. Everything else uses the system
   UI stack for clean Apple-like readability. */
.h1, .h2, .eyebrow, .brand, .spec-card .v, .rating-score, .stat b, .seg button {
  font-family: var(--display);
}

.h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 12px;
  line-height: 1.05;
}

.h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

.muted { color: var(--muted); font-size: 13.5px; }

/* ======================================================================== */
/*  TOP BAR -- glass navigation header                                      */
/* ======================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar-bg);
  backdrop-filter: saturate(1.6) blur(24px);
  -webkit-backdrop-filter: saturate(1.6) blur(24px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 1px 0 rgba(255,255,255,.02);
}

.topbar-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---- Brand mark and wordmark ------------------------------------------- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-end: auto;
  min-width: 0;
  overflow: hidden;
}

/* The wordmark is real artwork, not type approximation. Wrapped in a span so
   theme swap display rules do not conflict with responsive visibility. */
.brand-word { display: block; flex: none; }
.brand-word img { height: 20px; width: auto; display: block; }
.brand-mark { height: 28px; width: auto; display: block; }

/* Theme-aware logo swaps. Qualified with `img` at (0,1,1) to outrank
   .brand-word img rules and prevent the hidden variant from still showing. */
img.on-light { display: none; }
[data-theme='light'] img.on-dark { display: none; }
[data-theme='light'] img.on-light { display: block; }
@media (prefers-color-scheme: light) {
  [data-theme='system'] img.on-dark { display: none; }
  [data-theme='system'] img.on-light { display: block; }
}

@media (max-width: 420px) { .brand-mark { height: 24px; } }

/* Monogram on phones and tablets, wordmark on desktop. The swap sits above
   1024px so tablets (iPad landscape) stay on the monogram. */
@media (max-width: 1024px) { .brand-word { display: none; } }
/* (0,2,1) specificity to outrank [data-theme] img.on-* swaps. */
@media (min-width: 1025px) { .brand img.brand-mark { display: none; } }

/* ---- Nav links and actions --------------------------------------------- */
.nav { display: flex; align-items: center; gap: 3px; }
.nav a, .nav button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.nav a:hover, .nav button:hover {
  background: var(--surface-2);
  color: var(--text);
}
.nav a.active { color: var(--text); background: var(--surface-2); }

/* Buttons inside the nav keep button styling, not link styling. */
.nav .btn {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 9px 18px;
  color: #fff;
  background: var(--blaze);
  border: 1px solid var(--blaze);
}
.nav .btn:hover { background: var(--blaze); color: #fff; }
.nav .btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.nav .btn.ghost:hover { background: var(--surface-2); color: var(--text); }

/* ---- Header structure: destinations group and actions group ------------- */
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

@media (min-width: 1025px) {
  .nav { flex: 1; gap: 14px; }
  .nav-links { margin-inline-start: 20px; }
  .nav-actions {
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--line-soft);
  }
}

/* Active nav indicator: subtle accent underline so you always know where
   you are without flooding the bar with colour. */
.nav a.active { color: var(--text); background: var(--surface-2); position: relative; }
.nav a.active::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--blaze);
}

/* Language toggle is a utility, not a destination. */
.lang-toggle {
  padding: 7px 11px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  color: var(--dim);
  background: var(--surface-2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding-inline: 9px 11px;
  transition: color .18s var(--ease), background .18s var(--ease);
}
.lang-toggle svg { width: 15px; height: 15px; flex: none; }
.lang-toggle:hover { color: var(--text); background: var(--surface-3); border-color: transparent; }

.nav-cta { margin-inline-start: 6px; }

/* Avatar in the nav: a subtle ring makes it a tappable control. */
.nav-avatar {
  padding: 0;
  border-radius: 50%;
  line-height: 0;
  display: inline-flex;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .2s var(--ease);
}
.nav-avatar:hover { box-shadow: 0 0 0 2px var(--blaze); }
.nav-avatar .avatar { width: 30px; height: 30px; }

/* ======================================================================== */
/*  LAYOUT                                                                  */
/* ======================================================================== */

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px var(--page-gutter) 100px;
}

.cols {
  display: grid;
  grid-template-columns: minmax(0, var(--shell)) 280px;
  gap: 32px;
  justify-content: center;
}

.shell { max-width: var(--shell); margin: 0 auto; width: 100%; }

@media (max-width: 1024px) {
  .cols { grid-template-columns: minmax(0, var(--shell)); }
  .side { display: none; }
}

/* ======================================================================== */
/*  CONTROLS                                                                */
/* ======================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--r-pill);
  border: 1px solid var(--blaze);
  background: var(--blaze);
  color: #fff;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), opacity .18s var(--ease);
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(255,69,0,.4);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn.ghost:hover {
  background: var(--surface-2);
  border-color: var(--surface-3);
  box-shadow: none;
}
.btn.volt {
  background: var(--volt);
  border-color: var(--volt);
  color: var(--on-volt);
}
.btn.volt:hover { box-shadow: 0 8px 24px -8px rgba(240,240,245,.2); }
.btn.sm { padding: 9px 16px; font-size: 13px; }
.btn.block { width: 100%; }

/* ---- Form fields: clean, generous, glass-backed ------------------------ */
.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select, .picker-btn {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  font-size: 16px; /* Prevents iOS zoom on focus */
  transition: border-color .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field textarea:focus, .field select:focus, .picker-btn:focus-visible {
  border-color: var(--blaze);
  background: var(--surface-3);
  box-shadow: 0 0 0 3px rgba(255,69,0,.12);
}
.field textarea { resize: vertical; min-height: 90px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

/* ---- Cards: clean, less nested, glass-touched -------------------------- */
.card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.card + .card { margin-top: 16px; }
.card-pad { padding: 22px; }

/* ---- Avatars ----------------------------------------------------------- */
.avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  object-fit: cover;
  background: var(--surface-3);
  flex: none;
  border: 1px solid var(--glass-border);
}
.avatar.lg { width: 88px; height: 88px; }
.avatar.sm { width: 28px; height: 28px; }
.avatar-fallback {
  display: grid;
  place-items: center;
  font-family: var(--ui);
  font-weight: 700;
  color: var(--muted);
  font-size: 15px;
}

/* ---- Chips: small tag-like controls ------------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.chip.solid { background: var(--blaze); border-color: var(--blaze); color: #fff; }
.chip.volt { background: var(--volt); border-color: var(--volt); color: var(--on-volt); }

/* ======================================================================== */
/*  POSTS                                                                   */
/* ======================================================================== */

.post {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
  transition: border-color .2s var(--ease);
}

/* ---- Post header: avatar, name, car, date ------------------------------ */
.post-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}
.post-head .who { min-width: 0; }
.post-head .name {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
}
.post-head .sub {
  font-family: var(--ui);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-head .spacer { margin-inline-start: auto; }

/* ---- Post media: full-bleed photography and video ---------------------- */
.post-media { position: relative; background: var(--photo-bg); }
.post-media .frames {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.post-media .frames::-webkit-scrollbar { display: none; }
.post-media .frames > figure {
  margin: 0;
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* Uploads arrive at every aspect ratio. The frame takes the post's own ratio
   and the image is fitted inside, so no part of a car is ever cropped. */
.post-media .frames > figure { aspect-ratio: var(--ratio, 1); }
.post-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Carousel dots: large enough to see over any photo. */
.frame-dots {
  position: absolute;
  bottom: 12px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.frame-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.4);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.frame-dots button.on {
  background: #fff;
  transform: scale(1.3);
}

/* Carousel arrows: solid circles that stay legible on any image. */
.frame-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(9,9,11,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  transition: background .18s var(--ease), opacity .18s var(--ease);
  z-index: 2;
}
.frame-nav:hover { background: rgba(9,9,11,.88); }
.frame-nav svg { width: 19px; height: 19px; }
.frame-nav.prev { inset-inline-start: 10px; }
.frame-nav.next { inset-inline-end: 10px; }
/* At either end the arrow dims rather than vanishing, preventing layout jump. */
.frame-nav[disabled] { opacity: .25; cursor: default; }

/* Frame counter badge. */
.frame-count {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(9,9,11,.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}

/* Car tag overlay on media. Glass pill anchored bottom-left. */
.car-tag {
  position: absolute;
  inset-inline-start: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(9,9,11,.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-pill);
  padding: 8px 14px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

/* ======================================================================== */
/*  SPEC AND MOD CARDS -- glass tiles with strong numeric hierarchy         */
/* ======================================================================== */

.spec-strip {
  display: flex;
  gap: 8px;
  padding: 14px 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.spec-strip::-webkit-scrollbar { display: none; }

/* Fixed footprint for consistent tile rendering regardless of label length.
   Glass material: translucent bg, subtle border, soft inner highlight. */
.spec-card {
  flex: 0 0 136px;
  width: 136px;
  height: 80px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 11px 14px 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-highlight);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  position: relative;
  overflow: hidden;
}
.spec-card.in { animation: cardIn .45s var(--ease) forwards; }
@keyframes cardIn { to { opacity: 1; transform: none; } }

.spec-card .k {
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
  font-family: var(--ui);
}
.spec-card .v {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.spec-card .v small {
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
  margin-inline-start: 3px;
}
.spec-card .d {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Performance figures: the single most important number gets the accent. */
.spec-card:not(.is-mod):not(.is-stock) .v { color: var(--blaze); }
/* Mods are the product's reason for being: warm accent border. */
.spec-card.is-mod {
  border-color: rgba(255,69,0,.3);
  background: rgba(255,69,0,.06);
}
.spec-card.is-mod .k { color: var(--blaze-text); }
.spec-card.is-stock .v { font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .spec-card, .spec-card.in { opacity: 1; transform: none; animation: none; }
  html { scroll-behavior: auto; }
}

/* ======================================================================== */
/*  POST ACTIONS                                                            */
/* ======================================================================== */

.post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px 4px;
}
.act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--ease);
}
.act:hover {
  background: var(--surface-2);
  color: var(--text);
  transform: scale(1.02);
}
.act svg { width: 21px; height: 21px; }
.act.on { color: var(--blaze); }
.act.on svg { fill: var(--blaze); stroke: var(--blaze); }
.act.pop svg { animation: pop .4s var(--ease); }
@keyframes pop { 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* Share sits with other actions but carries no count. */
.post-actions .act.share { margin-inline-start: auto; }

.post-body { padding: 6px 16px 16px; }
.caption { font-size: 14.5px; margin: 6px 0 0; line-height: 1.55; }
.caption b { font-weight: 600; margin-inline-end: 6px; }

/* ======================================================================== */
/*  RATING                                                                  */
/* ======================================================================== */

.rating-box {
  margin: 12px 16px 16px;
  padding: 14px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--glass-highlight);
}
.rating-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.rating-score {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.rating-score span { font-size: 13px; color: var(--dim); }

/* Ten columns so the scale always fits one row at any width. */
.rating-scale {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.rating-scale button {
  width: 100%;
  height: 36px;
  border-radius: var(--r-sm);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: transform .16s var(--ease), background .16s var(--ease),
              color .16s var(--ease), border-color .16s var(--ease);
}
.rating-scale button:hover {
  color: var(--text);
  border-color: var(--blaze);
  transform: translateY(-2px);
}
.rating-scale button.picked {
  background: var(--blaze);
  border-color: var(--blaze);
  color: #fff;
}
.rating-note { font-size: 12px; color: var(--dim); margin: 10px 0 0; }

/* ======================================================================== */
/*  COMMENTS                                                                */
/* ======================================================================== */

.comments {
  border-top: 1px solid var(--line-soft);
  padding: 16px;
}
.comment {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.comment .body { font-size: 14px; line-height: 1.5; }
.comment .meta { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.comment.reply { margin-inline-start: 38px; }
.comment-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}
.comment-form input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  outline: none;
  font-size: 16px; /* Prevents iOS zoom */
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.comment-form input:focus {
  border-color: var(--blaze);
  box-shadow: 0 0 0 3px rgba(255,69,0,.1);
}

/* Inline comments panel within a post. */
.comments-panel {
  padding: 6px 16px 16px;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.comments-panel .comment { margin-bottom: 12px; }
.comments-panel .comment-form { margin-top: 10px; }

/* Nested replies. Indentation capped by --depth. */
.comment { margin-inline-start: calc(var(--depth, 0) * 22px); }
.comment[style*="--depth:0"] { border-inline-start: 0; }
.comment:not([style*="--depth:0"]) {
  border-inline-start: 2px solid var(--line);
  padding-inline-start: 12px;
}
@media (max-width: 480px) {
  .comment { margin-inline-start: calc(var(--depth, 0) * 13px); }
}

/* ======================================================================== */
/*  PROFILE                                                                 */
/* ======================================================================== */

.profile-head {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 24px;
  flex-wrap: wrap;
}
.stat-row { display: flex; gap: 24px; margin: 12px 0 8px; }
.stat b {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.stat span {
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/* Photo grid on profile pages. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.grid a {
  position: relative;
  aspect-ratio: 1;
  background: var(--surface-2);
  overflow: hidden;
}
.grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.grid a:hover img { transform: scale(1.04); }

/* Garage car list item. */
.garage-car {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  background: var(--surface-2);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.garage-car:hover { border-color: var(--line); transform: translateY(-1px); }
.garage-car img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--r-sm);
  flex: none;
}
.garage-car .ph {
  width: 80px;
  height: 60px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  flex: none;
}

/* ======================================================================== */
/*  LOBBIES                                                                 */
/* ======================================================================== */

.lobby-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px) { .lobby-grid { grid-template-columns: 1fr; } }

/* A lobby card: photograph with an info plate beneath. Clean, no gradients
   on the info area. */
.lobby-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.lobby-card:hover {
  border-color: var(--line);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
}

.lobby-card .cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-3);
  border-bottom: 2px solid var(--lobby-accent);
}
.lobby-card .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  transition: transform .5s var(--ease);
}
.lobby-card:hover .cover img { transform: scale(1.03); }

/* Flat tint over cover photo for text readability. */
.lobby-card .cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 11, .3);
}

/* No cover photo: dark plate with monogram in lobby accent. */
.lobby-card .cover.block {
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
.lobby-card .cover.block::after { content: none; }
.lobby-card .cover.block .mono {
  font-family: var(--display);
  font-weight: 800;
  font-size: 68px;
  line-height: .9;
  color: var(--lobby-accent);
  transform: skewX(-9deg);
}
.lobby-card .cover.block .logo.solo {
  position: static;
  width: 56px;
  height: 56px;
  border-radius: 15px;
}

/* Lobby logo badge: accent plate top-left. */
.lobby-card .logo {
  position: absolute;
  inset-inline-start: 12px;
  top: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--lobby-accent);
  color: #0b0d10;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}
.lobby-card .logo img { width: 100%; height: 100%; object-fit: cover; }

.lobby-card .body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.lobby-card h3 {
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.lobby-card .desc {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lobby-card .meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.lobby-card .meta b {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lobby-card .meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line);
}

/* Lobby page banner. */
.lobby-banner {
  position: relative;
  aspect-ratio: 3 / 1;
  overflow: hidden;
  border-bottom: 2px solid var(--lobby-accent);
  background: var(--surface-3);
}
.lobby-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92);
}
.lobby-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9,9,11,.38);
}
@media (max-width: 620px) { .lobby-banner { aspect-ratio: 5 / 2; } }

/* Lobby member list item. */
.lobby-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.lobby-item:last-child { border-bottom: 0; }
.lobby-item .ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  flex: none;
}
.lobby-item .ico img { width: 100%; height: 100%; object-fit: cover; }

.lobby-card-logo { /* Render uses this class; keep the selector alive. */ }

/* ======================================================================== */
/*  VIDEO                                                                   */
/* ======================================================================== */

.video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}
.video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sound toggle: glass circle bottom-right. */
.video-sound {
  position: absolute;
  inset-inline-end: 12px;
  bottom: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(9,9,11,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .18s var(--ease), background .18s var(--ease);
}
.video-sound:hover { transform: scale(1.06); background: rgba(9,9,11,.8); }
.video-sound svg { width: 18px; height: 18px; }
.video-sound .sound-waves { display: none; }
.sound-on .video-sound .muted-slash { display: none; }
.sound-on .video-sound .sound-waves { display: block; }

/* Duration badge: glass pill top-right. */
.video-time {
  position: absolute;
  inset-inline-end: 12px;
  top: 12px;
  z-index: 3;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(9,9,11,.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}

/* Paused state: play affordance so the video never looks broken. */
.video-wrap.paused::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  background: rgba(9,9,11,.55) no-repeat center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.12);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5.5v13l11-6.5z'/></svg>");
  background-size: 24px;
}

/* Composer thumbnail marker for chosen video. */
.thumbs figure { position: relative; }
.thumb-video {
  position: absolute;
  inset-inline-start: 5px;
  bottom: 5px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(9,9,11,.7);
  color: #fff;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ======================================================================== */
/*  GARAGE GRID                                                             */
/* ======================================================================== */

.garage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 620px) {
  .garage-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.garage-tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.garage-tile:hover {
  border-color: var(--line);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.garage-tile .shot {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-3);
  overflow: hidden;
}
.garage-tile .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.garage-tile:hover .shot img { transform: scale(1.03); }
.garage-tile .shot .rank {
  position: absolute;
  inset-inline-start: 8px;
  top: 8px;
}
.garage-tile .shot .verified {
  position: absolute;
  inset-inline-end: 8px;
  top: 8px;
}
.garage-tile .meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 12px 13px;
}
.garage-tile .name {
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.garage-tile .year {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.garage-tile .figs {
  font-size: 11px;
  color: var(--blaze);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.garage-tile .figs.warn { color: var(--blaze-text); }

/* ======================================================================== */
/*  HEART ANIMATION (double-tap)                                            */
/* ======================================================================== */

.tap-heart {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 4;
  pointer-events: none;
  width: 92px;
  height: 92px;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1.1 1L12 21l7.7-7.6 1.1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
  animation: tapHeart .75s var(--ease) forwards;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.45));
}
@keyframes tapHeart {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: .95; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .tap-heart { animation-duration: .01s; } }

/* ======================================================================== */
/*  FIELD VALIDATION                                                        */
/* ======================================================================== */

.field-hint { margin: 6px 0 0; font-size: 12px; color: var(--dim); }
.field-hint.bad { color: var(--blaze-text); }
.field-hint.good { color: #46d06a; }

/* ======================================================================== */
/*  MOBILE MENU                                                             */
/* ======================================================================== */

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  place-items: center;
}
.menu-btn svg { width: 19px; height: 19px; }
@media (max-width: 1024px) { .menu-btn { display: grid; } }

.menu-list { display: flex; flex-direction: column; padding: 4px 0 8px; }
.menu-list a, .menu-list button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  color: var(--text);
  text-align: start;
  font-family: inherit;
  transition: background .15s var(--ease);
}
.menu-list a:hover, .menu-list button:hover { background: var(--surface-2); }
.menu-list svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.menu-list .danger { color: var(--blaze-text); }
.menu-sep { height: 1px; background: var(--line-soft); margin: 6px 0; }

/* ======================================================================== */
/*  BACK CONTROL                                                            */
/* ======================================================================== */

.backbar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  padding-block: 9px;
  padding-inline: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease);
}
.backbar:hover {
  color: var(--text);
  border-color: var(--surface-3);
  transform: translateX(-2px);
}
[dir='rtl'] .backbar:hover { transform: translateX(2px); }
.backbar svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 720px) { .backbar { margin-bottom: 12px; } }

/* ======================================================================== */
/*  FEED FILTER                                                             */
/* ======================================================================== */

/* One compact button and a drop-down. Replaced the old multi-chip row that
   was wider than a phone screen. */
.filter-bar { display: flex; align-items: center; margin-bottom: 16px; }
.filter-menu { position: relative; }

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.filter-btn::-webkit-details-marker { display: none; }
.filter-btn:hover { border-color: var(--surface-3); background: var(--surface-2); }
.filter-btn svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.filter-btn svg:last-child {
  width: 13px;
  height: 13px;
  transition: transform .2s var(--ease);
}
[open] > .filter-btn svg:last-child { transform: rotate(180deg); }

/* When a filter is active, the button shows the accent so the user knows
   the feed is not showing everything. */
.filter-menu:has(.on:not([href="/"])) > .filter-btn,
.filter-menu.is-filtered > .filter-btn {
  border-color: var(--blaze);
  color: var(--blaze-text);
}
.filter-menu:has(.on:not([href="/"])) > .filter-btn svg:first-child {
  color: var(--blaze);
}

/* Filter dropdown panel: glass material. */
.filter-panel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}
.filter-panel a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text);
  transition: background .15s var(--ease);
}
.filter-panel a:hover { background: var(--surface-2); }
.filter-panel a.on { color: var(--blaze-text); font-weight: 600; }
.filter-panel .tick { width: 15px; height: 15px; flex: none; color: var(--blaze); }
.filter-panel .tick svg { width: 15px; height: 15px; display: block; }
.filter-panel .clear { color: var(--dim); font-weight: 500; }
.filter-panel .clear:hover { color: var(--blaze-text); }
.filter-sep { height: 1px; margin: 5px 7px; background: var(--line-soft); }

@media (max-width: 420px) {
  .filter-panel {
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-width: min(280px, calc(100vw - var(--page-gutter) * 2));
  }
}

/* ======================================================================== */
/*  DISCIPLINE CHIPS                                                        */
/* ======================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .chips a {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              background .18s var(--ease), transform .18s var(--ease);
}
.chips button:hover, .chips a:hover {
  color: var(--text);
  border-color: var(--surface-3);
  transform: translateY(-1px);
}
.chips button.on, .chips a.on {
  background: var(--blaze);
  border-color: var(--blaze);
  color: #fff;
}

/* ======================================================================== */
/*  LOBBY BOARD                                                             */
/* ======================================================================== */

.board-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.board-bar .seg { flex: none; }
.board-bar .btn { margin-inline-start: auto; }

.board {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.thread {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .18s var(--ease);
}
.thread:last-child { border-bottom: 0; }
.thread:hover { background: var(--surface-2); }

/* Upvote only. Deliberately no public downvote. */
.thread .vote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: none;
  width: 46px;
  padding: 7px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: color .18s var(--ease), border-color .18s var(--ease),
              transform .18s var(--ease);
}
.thread .vote svg { width: 17px; height: 17px; }
.thread .vote:hover {
  color: var(--text);
  border-color: var(--lobby-accent, var(--blaze));
  transform: translateY(-1px);
}
.thread .vote.on {
  color: var(--blaze);
  border-color: var(--blaze);
  background: rgba(255,69,0,.08);
}

.thread-main { min-width: 0; flex: 1; display: block; }
.thread-kicker {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lobby-accent, var(--blaze-text));
  margin-bottom: 5px;
}
.thread-kicker i { font-style: normal; color: var(--dim); margin: 0 5px; }
.thread-main h3 {
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 5px;
  text-transform: none;
  letter-spacing: -0.01em;
}
.thread-preview {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.thread-foot { font-size: 11.5px; color: var(--dim); }
.thread-foot b { color: var(--muted); font-weight: 600; }
.thread-foot i { font-style: normal; margin: 0 5px; }
.thread-thumb {
  width: 78px;
  height: 62px;
  flex: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
}
.thread-thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 480px) {
  .thread { padding: 13px; gap: 10px; }
  .thread .vote { width: 40px; }
  .thread-main h3 { font-size: 15px; }
  .thread-thumb { width: 62px; height: 52px; }
}

/* Discussion shown in the main feed. */
.discussion-post .discussion-body {
  display: block;
  padding: 2px 16px 14px;
}
.discussion-post .discussion-body h2 {
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 7px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.discussion-post .discussion-body p {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}
.discussion-full p {
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 14px;
}

/* ======================================================================== */
/*  NEWS (rendered as a feed)                                               */
/* ======================================================================== */

.news-post .news-caption { margin: 8px 0 0; }
.news-post .news-caption h2 {
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.news-post .news-caption p {
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 11px;
}
.news-post .news-caption p:last-child { margin-bottom: 0; }

/* Arabic copy needs more line height for readability. */
.news-post .news-caption[dir='rtl'] p { line-height: 1.95; }
.news-post .news-caption[dir='rtl'] h2 { letter-spacing: 0; }

.news-avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.news-avatar img { width: 24px; height: auto; }

.news-source { margin: 14px 0 0; }
.news-source a {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .15s var(--ease);
}
.news-source a:hover { color: var(--blaze-text); }

/* ---- News index page --------------------------------------------------- */
.news-lead {
  display: block;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .2s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
.news-lead:hover {
  border-color: var(--line);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.news-lead .shot {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
  border-bottom: 2px solid var(--blaze);
  overflow: hidden;
}
.news-lead .shot img { width: 100%; height: 100%; object-fit: cover; }
.news-lead .meta { display: block; padding: 20px 22px 22px; }
.news-lead h2 {
  font-family: var(--ui);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  margin: 6px 0 10px;
  text-transform: none;
  letter-spacing: -0.02em;
}

.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-card {
  display: flex;
  gap: 16px;
  align-items: stretch;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.news-card:hover {
  border-color: var(--line);
  transform: translateY(-1px);
}
.news-card .shot {
  width: 104px;
  flex: none;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-3);
  aspect-ratio: 1;
}
.news-card .shot img { width: 100%; height: 100%; object-fit: cover; }
.news-card .meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-card h3 {
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  margin: 4px 0 6px;
  text-transform: none;
  letter-spacing: -0.01em;
}

.news-card .kicker, .news-lead .kicker {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blaze-text);
}
.news-card .sum, .news-lead .sum {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card .sum { -webkit-line-clamp: 2; }
.news-lead .sum { -webkit-line-clamp: 3; }

.news-hero {
  aspect-ratio: 16 / 10;
  background: var(--surface-3);
  border-bottom: 2px solid var(--blaze);
}
.news-hero img { width: 100%; height: 100%; object-fit: cover; }
.news-standfirst {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 20px;
}
.news-body p { font-size: 16px; line-height: 1.8; margin: 0 0 16px; }

/* Arabic needs right alignment and more line height. */
[dir='rtl'] { text-align: start; }
.news-body[dir='rtl'] p, .news-standfirst[dir='rtl'] { line-height: 1.95; }

@media (max-width: 480px) {
  .news-card .shot { width: 84px; }
  .news-card h3 { font-size: 14px; }
  .news-lead h2 { font-size: 19px; }
}

/* ======================================================================== */
/*  VERIFICATION AND RANKING                                                */
/* ======================================================================== */

.verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding-block: 4px;
  padding-inline: 8px 10px;
  border-radius: var(--r-pill);
  background: var(--blaze);
  color: #fff;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.verified svg { width: 11px; height: 11px; }
.verified.compact {
  padding: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  justify-content: center;
  flex: none;
}
.verified.compact svg { width: 10px; height: 10px; }

/* Automatic position badge. Claimed entries look provisional. */
.rank {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rank i { font-style: normal; opacity: .5; font-size: 11px; }
.rank em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
  margin-inline-start: 6px;
}
.rank.is-verified {
  border-color: var(--blaze);
  color: var(--blaze);
  background: rgba(255,69,0,.06);
}
.rank.compact { padding: 4px 9px; font-size: 13px; flex: none; }

.post-media .rank {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  z-index: 2;
  background: rgba(9,9,11,.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,.12);
}

/* Verification panel. */
.verify-panel {
  margin: 0 22px 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.verify-panel.ok { border-color: #46d06a; }
.verify-panel.ok .eyebrow { color: #46d06a; }
.verify-panel.bad { border-color: var(--blaze); }
.verify-panel.bad .eyebrow { color: var(--blaze); }
.verify-panel .dropzone { padding: 22px 18px; }

.verify-review {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 14px;
  background: var(--surface-2);
}

/* ======================================================================== */
/*  CLAIM FIGURES                                                           */
/* ======================================================================== */

.claim-figs { display: flex; gap: 20px; flex-wrap: wrap; margin: 12px 0 14px; }
.claim-figs span { display: flex; flex-direction: column; gap: 2px; }
.claim-figs em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.claim-figs b {
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 800;
  color: var(--blaze);
  font-variant-numeric: tabular-nums;
}
.review-note {
  width: 100%;
  padding: 12px 14px;
  margin: 4px 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-3);
  color: var(--text);
  outline: none;
  font-size: 16px; /* Prevents iOS zoom */
  transition: border-color .2s var(--ease);
}
.review-note:focus { border-color: var(--blaze); }

/* ======================================================================== */
/*  LEADERBOARD -- premium automotive performance index                     */
/* ======================================================================== */

.lb { display: flex; flex-direction: column; }
.lb-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .18s var(--ease);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--surface-2); }

/* Position number: strong hierarchy through size and weight. */
.lb-row .pos {
  width: 32px;
  flex: none;
  text-align: end;
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 800;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
/* Verified entries get their position in the accent colour. */
.lb-row.is-verified .pos { color: var(--blaze); }

.lb-row .shot {
  width: 64px;
  height: 44px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface-3);
}
.lb-row .who {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lb-row .name {
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb-row .figs {
  text-align: end;
  flex: none;
  display: flex;
  flex-direction: column;
}
/* The main performance figure must be immediately visible and prominent. */
.lb-row .figs b {
  font-family: var(--ui);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.lb-row .figs > span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.lb-row .figs em {
  font-style: normal;
  font-size: 11px;
  color: var(--dim);
  margin-top: 3px;
}

/* Cars with no position yet. Visually held back so they never read as ranked. */
.lb-waiting .lb-row .pos-none { color: var(--line); font-weight: 700; }
.lb-waiting .lb-row .shot { opacity: .55; }
.lb-row .figs-missing b {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}
.lb-row .figs-missing em { font-size: 10.5px; }

@media (max-width: 480px) {
  .lb-row .figs em { display: none; }
  .lb-row .shot { width: 52px; height: 38px; }
  .lb-row { gap: 10px; padding: 11px 12px; }
}

/* Segmented control: link variant used on the leaderboard. */
.seg a {
  padding: 9px 20px;
  border-radius: var(--r-pill);
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  text-transform: none;
  letter-spacing: 0;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.seg a.on { background: var(--blaze); color: #fff; }

/* ======================================================================== */
/*  SHEETS AND MODALS -- glass-backed overlays                              */
/* ======================================================================== */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(4,5,7,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  animation: fade .24s var(--ease) forwards;
}
@keyframes fade { to { opacity: 1; } }

.sheet {
  position: fixed;
  z-index: 91;
  background: var(--surface);
  border: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(520px, calc(100vw - 24px));
  max-height: min(78vh, 640px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  animation: sheetIn .28s var(--ease);
}
@keyframes sheetIn {
  from { opacity: 0; transform: translate(-50%,-46%) scale(.97); }
}

@media (max-width: 620px) {
  .sheet {
    inset-inline: 0;
    bottom: 0;
    top: auto;
    transform: none;
    width: 100%;
    max-height: 86vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-bottom: 0;
    animation: sheetUp .3s var(--ease);
  }
  @keyframes sheetUp { from { transform: translateY(100%); } }
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.sheet-head h3 {
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  text-transform: none;
  margin: 0;
  flex: 1;
}
.sheet-close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  flex: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--muted);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.sheet-close:hover { color: var(--text); background: var(--surface-3); }
.sheet-search {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  flex: none;
}
.sheet-search input {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  font-size: 16px; /* Prevents iOS zoom */
  transition: border-color .2s var(--ease);
}
.sheet-search input:focus { border-color: var(--blaze); }
.sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0 16px;
}

.opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: start;
  font-size: 15px;
  color: var(--text);
  transition: background .12s var(--ease);
}
.opt:hover, .opt:focus-visible { background: var(--surface-2); outline: none; }
.opt .count {
  margin-inline-start: auto;
  font-size: 11.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.opt .initial {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  flex: none;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
}
.sheet-group {
  padding: 14px 18px 5px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--dim);
  text-transform: uppercase;
}

/* Picker button (inside fields). */
.picker-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-align: start;
  gap: 10px;
}
.picker-btn .ph { color: var(--dim); }
.picker-btn .caret { color: var(--dim); flex: none; }
.picker-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ======================================================================== */
/*  AUTH GATE PROMPT                                                        */
/* ======================================================================== */

.gate { text-align: center; padding: 30px 24px 28px; }
.gate .mark { display: block; margin: 0 auto 18px; height: 26px; width: auto; }
.gate .mark.on-light { display: none; }
.gate h3 {
  font-family: var(--ui);
  font-size: 21px;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.gate p { color: var(--muted); font-size: 14px; margin: 0 0 22px; line-height: 1.5; }
.gate .btn { width: 100%; margin-bottom: 10px; }

/* ======================================================================== */
/*  STATES                                                                  */
/* ======================================================================== */

.empty { text-align: center; padding: 48px 24px; }
.empty h3 {
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  margin: 0 0 8px;
}
.empty p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }

/* Figures form: owner-only editor for ranking data. Set apart as a control. */
.figures-form {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.figures-form .row { margin-bottom: 10px; }
.figures-form .btn { margin-top: 4px; }

.notice {
  padding: 13px 16px;
  border-radius: var(--r-md);
  font-size: 13.5px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.notice.err { border-color: var(--blaze); color: var(--blaze-text); }
.notice.ok { border-color: #46d06a; color: #46d06a; }

.skel {
  background: var(--surface-2);
  border-radius: var(--r-md);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

.spinner {
  width: 17px;
  height: 17px;
  border-radius: var(--r-pill);
  border: 2px solid var(--line);
  border-top-color: currentColor;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ======================================================================== */
/*  COMPOSER                                                                */
/* ======================================================================== */

.dropzone {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  background: var(--surface-2);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.dropzone:hover { border-color: var(--blaze); color: var(--text); }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.thumbs figure { margin: 0; position: relative; }
.thumbs img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--r-sm);
}
.thumbs button {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}

.mod-row {
  display: grid;
  grid-template-columns: 122px 1fr 1fr 34px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.mod-row select, .mod-row input {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  width: 100%;
  outline: none;
  font-size: 16px; /* Prevents iOS zoom */
}
.mod-row button {
  border: 1px solid var(--line);
  background: var(--surface-3);
  color: var(--muted);
  border-radius: var(--r-pill);
  height: 34px;
  cursor: pointer;
}
@media (max-width: 620px) {
  .mod-row { grid-template-columns: 1fr 1fr 34px; }
  .mod-row select { grid-column: 1 / -1; }
}

/* Segmented control (button variant). */
.seg {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  gap: 4px;
  background: var(--surface-2);
}
.seg button {
  border: 0;
  background: transparent;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  text-transform: none;
  letter-spacing: 0;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.seg button.on { background: var(--blaze); color: #fff; }

.swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.swatches label { cursor: pointer; position: relative; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatches i {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.swatches input:checked + i {
  border-color: var(--text);
  transform: scale(1.1);
}

/* ======================================================================== */
/*  MOBILE BOTTOM BAR -- premium dark glass tab bar                         */
/* ======================================================================== */

/* The tabbar is hidden on desktop. On mobile it becomes the primary
   navigation: 5 icon slots including a raised centre "+" button. */
.tabbar { display: none; }

@media (max-width: 1024px) {
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    /* Glass material for the bottom bar: translucent dark with blur. */
    background: rgba(9,9,11,.78);
    backdrop-filter: saturate(1.5) blur(24px);
    -webkit-backdrop-filter: saturate(1.5) blur(24px);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -4px 24px rgba(0,0,0,.2);
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    align-items: center;
  }

  .tabbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 6px;
    border-radius: var(--r-md);
    color: var(--dim);
    font-size: 12px;
    font-weight: 600;
    transition: color .18s var(--ease), background .18s var(--ease);
  }
  .tabbar a.active { color: var(--blaze); background: none; }
  .tabbar a.accent { color: var(--blaze); background: none; }
  .tabbar svg { width: 24px; height: 24px; flex: none; }
  .tabbar .avatar { width: 24px; height: 24px; flex: none; }

  /* Active tab: accent colour with a soft filled icon variant. */
  .tabbar a.active svg { fill: currentColor; fill-opacity: .15; }

  /* Hide destination links in the header on mobile. The tabbar and menu
     carry navigation. Hiding the container prevents new destinations from
     leaking into the header. */
  body:has(.tabbar) .nav > a[href^="/@"] { display: none; }
  body:has(.tabbar) { padding-bottom: 78px; }

  :root { --page-gutter: 12px; }
  .page { padding: 14px var(--page-gutter) 28px; }
  .card, .post { border-radius: var(--r-md); }
  .h1 { font-size: 24px; }
}

/* The raised composer button: accent circle, lifted above the bar. */
.tabbar .plus {
  width: 52px;
  height: 52px;
  margin: -14px auto 0;
  border-radius: 50%;
  background: var(--blaze);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(255,69,0,.3), 0 0 0 4px var(--bg);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tabbar .plus:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255,69,0,.4), 0 0 0 4px var(--bg);
}
.tabbar .plus svg { width: 26px; height: 26px; }

@media (max-width: 400px) {
  .rating-scale { gap: 3px; }
  .rating-scale button { height: 32px; font-size: 13px; border-radius: 9px; }
}

/* On the narrowest phones, drop labels so a clipped word does not appear. */
@media (max-width: 380px) {
  .tabbar a span { display: none; }
  .tabbar a { gap: 0; }
}

/* ======================================================================== */
/*  FOOTER AND SIDEBAR                                                      */
/* ======================================================================== */

.footer-note {
  text-align: center;
  color: var(--dim);
  font-size: 11.5px;
  padding: 24px 16px;
}
.side .card-pad { padding: 18px; }

/* ======================================================================== */
/*  LANGUAGE                                                                */
/* ======================================================================== */

/* Directional glyphs point the other way in Arabic. */
[dir='rtl'] .backbar svg,
[dir='rtl'] .frame-nav svg { transform: scaleX(-1); }

/* ======================================================================== */
/*  NEWS DESK (composer interface)                                          */
/* ======================================================================== */

.compose-assets { margin: 0 0 18px; }
.compose-assets .thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.compose-assets figure {
  position: relative;
  margin: 0;
  width: 96px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.compose-assets figure img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  display: block;
}
.compose-assets figure select {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 11px;
  padding: 4px 6px;
}
.compose-assets figure .x {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 0;
  cursor: pointer;
  line-height: 1;
  background: rgba(9,9,11,.75);
  color: #fff;
}

.news-list { margin-top: 22px; border-top: 1px solid var(--line); }
.news-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

/* News state badges. */
.news-state {
  display: inline-block;
  border-radius: var(--r-pill);
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.news-state.is-visible   { background: rgba(52,199,89,.12); color: #46d06a; }
.news-state.is-scheduled { background: rgba(255,159,10,.12); color: #ffab2e; }
.news-state.is-draft     { background: var(--surface-3); color: var(--muted); }
.news-state.is-hidden    { background: var(--surface-3); color: var(--dim); }
.news-preview { padding: 4px 0 10px; }
.news-preview .post { border: 0; }

/* Any class that sets `display` outranks [hidden]. Settling once here. */
[hidden] { display: none !important; }

/* ======================================================================== */
/*  TOAST                                                                   */
/* ======================================================================== */

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(84px + env(safe-area-inset-bottom));
  margin-inline: auto;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--glass-shadow);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 90;
}
.toast.on { opacity: 1; transform: translateY(0); }
@media (min-width: 1025px) { .toast { bottom: 28px; } }

/* ======================================================================== */
/*  READ MORE                                                               */
/* ======================================================================== */

[data-clamp].clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.more-btn {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 2px 0;
  color: var(--dim);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: color .15s var(--ease);
}
.more-btn:hover { color: var(--text); }

/* ======================================================================== */
/*  PHASE 3 UI                                                              */
/* ======================================================================== */

.garage-tile.add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 132px;
  border-radius: var(--r-md);
  border: 1.5px dashed var(--line);
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 600;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.garage-tile.add:hover { border-color: var(--blaze); color: var(--text); }
.garage-tile.add .plus { font-size: 28px; line-height: 1; font-weight: 400; }

/* Segmented control (link variant). Duplicated from .seg button variant
   because the two share selectors but differ slightly. Both must exist. */
.seg { display: flex; gap: 4px; margin: 0 0 14px; }
.seg a {
  flex: 1;
  text-align: center;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
}
.seg a.on {
  background: var(--surface-3);
  color: var(--text);
  border-color: var(--surface-3);
}

.danger-zone {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.btn.danger { background: #c0392b; color: #fff; border-color: #c0392b; }
.btn.danger:hover { background: #a93226; }

.field-note { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; }
.field-note.ok { color: #46d06a; }
.field-note.bad { color: #ff6b5a; }

/* ======================================================================== */
/*  EVENTS                                                                  */
/* ======================================================================== */

.event-row {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}
.event-row:last-child { border-bottom: 0; }
.event-row .poster {
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--surface-2);
  display: block;
}
.event-row .poster.ph { background: var(--surface-2); }

/* ======================================================================== */
/*  STORIES                                                                 */
/* ======================================================================== */

.story-tray {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 2px 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.story-tray::-webkit-scrollbar { display: none; }

.story-item {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 68px;
  flex: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  transition: transform .2s var(--ease);
}
.story-item:hover { transform: scale(1.04); }
.story-item .ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  overflow: hidden;
  /* Active story ring: accent gradient effect. */
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--blaze);
}
/* A watched story loses the accent ring. */
.story-item.seen .ring {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line);
}
.story-item .ring img { width: 100%; height: 100%; object-fit: cover; }
.story-item .ring .ph {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 20px;
  color: var(--dim);
}
.story-item.add .ring {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--line);
}
.story-item .who {
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Story viewer: full-screen overlay. */
.story-viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(4,5,7,.94);
  display: grid;
  place-items: center;
}
.story-stage {
  position: relative;
  width: min(430px, 100vw);
  height: min(92vh, 860px);
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
}
.story-media, .story-media img, .story-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.story-bars {
  position: absolute;
  top: 10px;
  inset-inline: 10px;
  display: flex;
  gap: 4px;
  z-index: 3;
}
.story-bars .bar {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255,255,255,.25);
  overflow: hidden;
}
.story-bars .bar.done { background: rgba(255,255,255,.85); }
.story-bars .bar i {
  display: block;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
[dir='rtl'] .story-bars .bar i { transform-origin: right; }

.story-head {
  position: absolute;
  top: 22px;
  inset-inline: 14px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}
.story-head .who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}
.story-head .who img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}
.story-close {
  margin-inline-start: auto;
  border: 0;
  background: none;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.story-cta {
  position: absolute;
  inset-inline: 18px;
  bottom: 20px;
  z-index: 4;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
  text-align: center;
}
.story-cta.in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.story-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.story-nav.prev { inset-inline-start: 0; }
.story-nav.next { inset-inline-end: 0; width: 68%; }

@media (prefers-reduced-motion: reduce) {
  .story-cta { transition: none; }
}

/* ======================================================================== */
/*  TOPICS                                                                  */
/* ======================================================================== */

/* Duplicate selector for .chips is intentional: both the discipline chips
   section and the topics section render the same markup. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-block;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}
.chip:hover { color: var(--text); border-color: var(--surface-3); }
.chip.on { background: var(--surface-3); color: var(--text); }
a.tag { color: var(--blaze); font-weight: 600; }
a.tag:hover { text-decoration: underline; }

/* On phones and tablets the rail becomes a chip row under the tray. */
@media (max-width: 1024px) {
  .rail { display: block; }
  .rail .card {
    border: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .rail .card-pad { padding: 0 0 14px; }
  .rail .chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .rail .chips::-webkit-scrollbar { display: none; }
}

/* ======================================================================== */
/*  FEDERATED SIGN-IN                                                       */
/* ======================================================================== */

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #fff;
  color: #1f1f1f;
  border-color: #dadce0;
}
.google-btn:hover { background: #f5f6f7; color: #1f1f1f; }
.google-btn svg { flex: none; }
.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--dim);
  font-size: 12px;
}
.or::before, .or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ======================================================================== */
/*  HEADER STRUCTURE (revised, two groups)                                  */
/* ======================================================================== */

/* Destinations and actions are separated for visual clarity:
   brand / navigation / actions instead of one long right-aligned run. */

/* ---- Small screens ----------------------------------------------------- */
@media (max-width: 1024px) {
  .topbar-inner { height: 56px; gap: 10px; }

  /* Destinations live in the menu, not the header. */
  .nav-links { display: none; }

  /* "Post a car" is in the bottom bar already. */
  .nav .nav-cta { display: none; }

  /* Sign in lives in the menu on phones; sign up is worth the space. */
  @media (max-width: 460px) { .nav-signin { display: none; } }

  /* Globe icon alone is enough once the label has nowhere to go. */
  .lang-toggle span { display: none; }
  .lang-toggle { padding: 9px; }

  /* Touch targets: 44px minimum. */
  .menu-btn { width: 44px; height: 44px; }
  .nav-actions .btn { min-height: 40px; }
}

/* Scroll-hide on mobile: bar tucks away going down, returns on scroll up. */
@media (max-width: 1024px) {
  .topbar { transition: transform .24s var(--ease); }
  body.nav-hidden .topbar { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
  body.nav-hidden .topbar { transform: none; }
}

/* Mobile header keeps the bell and nothing else from the actions group.
 *
 * Notifications are checked often, so they earn a permanent affordance with a
 * count on it. Everything else in that group is already a tab: the compose CTA
 * is the raised plus, and the profile menu is the garage tab. Surfacing the
 * bell here is what lets two more rows leave the menu sheet. */
@media (max-width: 1024px) {
  .nav-actions {
    display: flex;
    margin-inline-start: auto;
    margin-inline-end: 8px;
    gap: 0;
  }

  .nav-actions > *:not(.nav-bell) { display: none; }
}

/* ======================================================================== */
/*  PROFILE DROPDOWN (desktop)                                              */
/* ======================================================================== */

.pmenu { position: relative; }
.pmenu summary { list-style: none; cursor: pointer; }
.pmenu summary::-webkit-details-marker { display: none; }
.pmenu-list {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 10px);
  z-index: 80;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow);
}
.pmenu-list a, .pmenu-list button {
  text-align: start;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s var(--ease);
}
.pmenu-list a:hover, .pmenu-list button:hover { background: var(--surface-2); }
.pmenu-list .danger { color: #ff6b5a; }

/* ======================================================================== */
/*  REDUCED MOTION                                                          */
/* ======================================================================== */

/* Wrap all motion in a single media query so users who prefer reduced motion
   get a calm, functional interface with no animation at all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Motorfiction — design system v3: "glass"
   ==========================================================================
   Direction: if Apple built a premium automotive social platform. Dark,
   cinematic, minimal, tactile.

   This layer sits on top of v2 rather than replacing it. Every selector below
   already exists above, so nothing can be left unstyled if a rule here is
   wrong. It restyles only; it adds no elements and changes no behaviour.

   Three ideas carry the whole thing:
     1. Ground is never flat. Subtle warm gradients give the page depth.
     2. Chrome is glass. Anything that floats over content gets translucency
        plus blur, so the content underneath stays felt but never competes.
     3. Orange is punctuation, not paint. It marks the one thing that matters
        in a given view and is otherwise held back.
   ========================================================================== */

:root {
  /* Apple's stack first. Saira is kept for brand moments only, further down. */
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
        'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Graphite ground rather than pure black. Pure black flattens photography
     and makes the glass edges disappear. */
  --bg: #08090a;
  --surface: rgba(255, 255, 255, .035);
  --surface-2: rgba(255, 255, 255, .055);
  --surface-3: rgba(255, 255, 255, .075);
  --line: rgba(255, 255, 255, .09);
  --line-soft: rgba(255, 255, 255, .055);

  --text: #f5f6f8;
  --muted: #9ba1ab;
  --dim: #6e747e;

  /* Glass recipe. Saturation is what stops blur looking grey and dead. */
  --glass-blur: saturate(180%) blur(20px);
  --glass-bg: rgba(18, 19, 22, .72);
  --glass-bg-strong: rgba(14, 15, 17, .86);
  --glass-line: rgba(255, 255, 255, .1);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, .07);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45);

  /* Softer, more generous radii read as more expensive. */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;

  --page-gutter: 16px;
  --shell: 680px;

  /* One easing for everything. Consistency is most of what reads as polish. */
  --ease: cubic-bezier(.32, .72, 0, 1);
  --fast: .18s;
  --med: .28s;
}

/* Ambient warmth. Two very low-opacity pools, fixed so they do not scroll,
   which keeps the page feeling lit rather than papered. */
body {
  font-family: var(--ui);
  background:
    radial-gradient(80rem 50rem at 12% -8%, rgba(255, 69, 0, .05), transparent 60%),
    radial-gradient(70rem 45rem at 92% 8%, rgba(120, 160, 255, .028), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.011em;
}

/* --------------------------------- type ---------------------------------- */

h1, .h1 {
  font-family: var(--ui);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
  font-size: clamp(1.55rem, 4.5vw, 2.1rem);
}

/* Condensed survives only as a brand voice: small all-caps labels. It is a
   signature in small doses and shouting at paragraph length. */
.eyebrow, .thread-kicker, .rank {
  font-family: var(--display);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--dim);
  font-weight: 600;
}

.brand-word { letter-spacing: -.02em; }
.muted { color: var(--muted); }
.sm { font-size: .875rem; }

/* Figures are the reason people visit a car site. Tabular so columns of
   numbers line up, tight so they feel engineered. */
.stat b, .figs b, .rating-score, .claim-figs b, .lb-row .k {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  font-weight: 700;
}

/* ------------------------------- materials ------------------------------- */

/* Cards lose their hard border and gain a lifted, layered surface. */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}

.card:hover { border-color: var(--line); }
.card-pad { padding: 18px; }

/* Posts are the hero. Media goes edge to edge and the frame gets out of
   the way, so photography carries the page. */
.post {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), var(--glass-highlight);
  overflow: hidden;
}

.post-media { border-radius: 0; }
.post-head { padding: 14px 16px 12px; }
.post-head .name { font-weight: 650; letter-spacing: -.015em; }
.post-head .sub { color: var(--dim); font-size: .8rem; }
.post-body { padding: 4px 18px 18px; line-height: 1.55; }

/* ------------------------------ navigation ------------------------------- */

/* The header floats over content instead of sitting on a slab. */
.topbar {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: var(--glass-highlight);
}

@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: rgba(10, 11, 13, .97); }
}

/* Mobile bottom bar: the most-touched surface on the site, so it gets the
   strongest glass and the most careful safe-area handling. */
.tabbar {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-line);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .05), 0 -8px 32px rgba(0, 0, 0, .5);
  padding-bottom: max(env(safe-area-inset-bottom), 6px);
}

@supports not (backdrop-filter: blur(1px)) {
  .tabbar { background: rgba(10, 11, 13, .98); }
}

/* Nav items: generous tap area, quiet until active. */
.tabbar a, .tabbar button {
  min-height: 46px;
  border-radius: 14px;
  color: var(--dim);
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.tabbar a:active, .tabbar button:active { transform: scale(.94); }
.tabbar a.on, .tabbar .on { color: var(--blaze); }

/* ------------------------------- controls -------------------------------- */

.btn {
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: -.012em;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease),
              background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

/* Physical feedback: press in, never bounce. */
.btn:active { transform: scale(.97); }
.btn:not(.ghost):not(.danger):hover { filter: brightness(1.07); }

.btn.ghost {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--text);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.btn.ghost:hover { background: var(--surface-3); border-color: var(--line); }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: .84rem; }

/* Chips and segmented controls: pill glass, orange only when chosen. */
.chip, .seg > * {
  border-radius: var(--r-pill);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  min-height: 38px;
  font-weight: 550;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.chip:hover, .seg > *:hover { background: var(--surface-2); border-color: var(--line); }

.chip.on, .seg > .on {
  background: var(--blaze);
  border-color: var(--blaze);
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 69, 0, .3);
}

.seg {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Horizontal chip rows scroll on small screens rather than wrapping into a
   tall block that pushes content off-screen. */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.chips::-webkit-scrollbar { display: none; }
.chips > * { flex: 0 0 auto; }

/* --------------------------------- forms --------------------------------- */

.field {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  min-height: 46px;
  padding: 12px 14px;
  color: var(--text);
  /* 16px keeps iOS from zooming the viewport when a field takes focus. */
  font-size: 16px;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease);
}

.field::placeholder { color: var(--dim); }

.field:focus, .field:focus-visible {
  outline: none;
  border-color: var(--blaze);
  background: var(--surface-2);
  box-shadow: 0 0 0 3.5px rgba(255, 69, 0, .16);
}

/* Keyboard users must always see where they are. */
a:focus-visible, button:focus-visible, .chip:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--blaze);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------- specs and figures --------------------------- */

/* Spec tiles: small glass modules where the number leads and the label
   recedes. Scrollable on mobile so nothing gets crushed. */
.spec-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.spec-strip::-webkit-scrollbar { display: none; }

.spec-card {
  /* Fixed width is deliberate: equal tiles make a scannable row. */
  flex: 0 0 132px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  box-shadow: var(--glass-highlight);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 10px 13px;
}

/* ------------------------------ leaderboard ------------------------------ */

/* Reads as a performance index: rank, car, then the figure that matters.
   On mobile each row stays a list item rather than a squeezed table. */
.lb-row {
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
  min-height: 64px;
}

.lb-row:hover { background: var(--surface-2); border-color: var(--line); }
.rank { font-size: 1rem; color: var(--muted); font-weight: 700; }

/* -------------------------------- overlays ------------------------------- */

.sheet, .filter-panel, .filter-menu, .comments-panel, .rating-box, .verify-panel {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--glass-highlight);
}

.scrim { background: rgba(0, 0, 0, .55); backdrop-filter: blur(3px); }

.toast {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
}

/* -------------------------------- stories -------------------------------- */

.story-item { transition: transform var(--fast) var(--ease); }
.story-item:active { transform: scale(.95); }
.story-tray { gap: 12px; }

/* ------------------------------ interactions ----------------------------- */

.act {
  min-height: 44px;
  min-width: 44px;
  border-radius: var(--r-pill);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease),
              color var(--fast) var(--ease);
}

.act:hover { background: var(--surface-2); }
.act:active { transform: scale(.9); }
.act.on { color: var(--blaze); }

.avatar { border-radius: 50%; box-shadow: var(--glass-highlight); }

/* -------------------------------- garage --------------------------------- */

/* Full-width blocks on phones. Two-up only when there is genuinely room. */
.garage-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .garage-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

.garage-tile, .garage-car {
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--glass-highlight);
  overflow: hidden;
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease);
}

.garage-tile:hover, .garage-car:hover { border-color: var(--line); }

/* ------------------------------ responsive ------------------------------- */

/* Phones: media earns the full width, chrome gets out of the way. */
@media (max-width: 640px) {
  :root { --page-gutter: 14px; }

  /* Posts used to bleed edge to edge with a negative margin equal to the
     gutter. The shell's padding also honours the safe-area inset, so the two
     never matched and the card sat visibly offset from everything above it.
     Aligning with the other cards is both correct and calmer. */
  .post { border-radius: var(--r-md); }

  .card-pad { padding: 15px; }
  .cols { grid-template-columns: 1fr; }
  .stat-row { gap: 16px; }
}

/* Very small phones: nothing may overflow horizontally. */
@media (max-width: 380px) {
  :root { --page-gutter: 12px; }
  .btn { padding: 0 16px; }
}

/* Desktop: more room to breathe, and the reading column stays comfortable. */
@media (min-width: 1024px) {
  :root { --shell: 720px; }
  .card-pad { padding: 22px; }
}

@media (min-width: 1440px) {
  :root { --shell: 760px; }
}

/* ------------------------------- motion ---------------------------------- */

/* Everything above is fast and small on purpose. If the reader has asked for
   less movement, all of it stops: no exceptions, no "subtle" leftovers. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Admin console
   ==========================================================================
   The admin area is a tool, not a feed. It shares the design language but
   changes posture: wider, denser, cooler, and visibly a different room from
   the public site so nobody confuses the two.

   Scoped entirely to body.admin-shell. Every rule here is presentational and
   reuses the existing markup, so admin keeps working exactly as before.
   ========================================================================== */

.admin-shell {
  /* Cooler, flatter ground. The warm orange ambience belongs to the public
     site; a console should feel like instrumentation. */
  background:
    radial-gradient(70rem 40rem at 50% -10%, rgba(120, 150, 200, .045), transparent 65%),
    #07080a;
}

/* The console runs wide. The reading column exists for prose, and there is no
   prose here: there are records, figures and controls. */
.admin-shell .shell {
  max-width: min(1180px, 100%) !important;
  padding-inline: clamp(16px, 3vw, 32px);
}

/* A quiet rule under the header marks the change of context. */
.admin-shell .topbar {
  background: rgba(10, 12, 15, .88);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 1px 0 rgba(120, 150, 200, .12);
}

/* ------------------------------- headings -------------------------------- */

.admin-shell .h1 {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  letter-spacing: -.024em;
  margin-bottom: 4px;
}

/* Section labels become the console's spine: small, spaced, unmistakable. */
.admin-shell .eyebrow {
  color: #7d8798;
  letter-spacing: .13em;
  font-size: .64rem;
}

/* -------------------------------- panels --------------------------------- */

/* Panels, not cards. Squarer corners read as tooling; soft pills read as
   consumer. The difference is small and does most of the work. */
.admin-shell .card {
  border-radius: 14px;
  background: rgba(255, 255, 255, .028);
  border: 1px solid rgba(255, 255, 255, .075);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.admin-shell .card:hover { border-color: rgba(255, 255, 255, .11); }
.admin-shell .card-pad { padding: 16px 18px; }

/* Panels tile across the width instead of stacking in a single column, which
   is what made admin feel like a page rather than a console. */
@media (min-width: 900px) {
  .admin-shell .shell > .card,
  .admin-shell .shell > section > .card { margin-bottom: 14px; }
}

/* ------------------------------- records --------------------------------- */

/* Review rows are the main working surface: tighter, scannable, with a clear
   hit state so the eye can track across a long list. */
.admin-shell .verify-review,
.admin-shell .review-note {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
  transition: background .16s var(--ease), border-color .16s var(--ease);
}

.admin-shell .verify-review:hover {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}

/* Figures carry the decisions here, so they get real presence and align in
   columns rather than drifting. */
.admin-shell .stat-row { gap: 28px; }

.admin-shell .stat b,
.admin-shell .claim-figs b {
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  letter-spacing: -.022em;
}

.admin-shell .stat { color: var(--muted); }

/* Evidence thumbnails matter when verifying a claim, so give them room. */
.admin-shell .thumbs img {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .1);
}

/* ------------------------------- controls -------------------------------- */

/* Console buttons are squarer and more compact than the public site's pills.
   Destructive and approving actions must never look interchangeable. */
.admin-shell .btn {
  border-radius: 10px;
  min-height: 38px;
  font-size: .875rem;
  letter-spacing: -.006em;
}

.admin-shell .btn.sm { min-height: 34px; border-radius: 9px; }

.admin-shell .field {
  border-radius: 10px;
  min-height: 42px;
  background: rgba(255, 255, 255, .035);
}

/* ------------------------------- responsive ------------------------------ */

/* On a phone the console stays a single readable column. Admin work is rare
   on mobile, but it must never be broken or overflowing when it happens. */
@media (max-width: 720px) {
  .admin-shell .shell { padding-inline: 14px; }
  .admin-shell .stat-row { gap: 16px; flex-wrap: wrap; }
  .admin-shell .card-pad { padding: 14px; }
}

/* --------------------------- admin: console shell -------------------------
 * A navigation rail on the left, the work area on the right. This is what
 * makes it read as a tool rather than a long page: you can see the whole
 * scope of the console at a glance instead of scrolling to discover it.
 * ------------------------------------------------------------------------ */

.admin-shell .admin-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

@media (min-width: 900px) {
  .admin-shell .admin-layout { grid-template-columns: 216px minmax(0, 1fr); gap: 26px; }

  /* The rail follows you down a long audit log rather than scrolling away. */
  .admin-shell .admin-rail {
    position: sticky;
    top: 76px;
  }
}

.admin-rail {
  background: rgba(255, 255, 255, .026);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.admin-rail-title {
  margin: 2px 6px 10px;
  color: #7d8798;
}

.admin-rail-nav { display: flex; flex-direction: column; gap: 2px; }

.admin-rail-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 40px;
  padding: 0 11px;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 550;
  letter-spacing: -.008em;
  border: 1px solid transparent;
  transition: background .16s var(--ease), color .16s var(--ease),
              border-color .16s var(--ease);
}

.admin-rail-link:hover {
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  border-color: rgba(255, 255, 255, .08);
}

/* :target lights the rail item you jumped to, so the console always shows
   where you are without any JavaScript. */
.admin-rail-link:active { background: rgba(255, 255, 255, .08); }

.admin-rail-link:focus-visible {
  outline: 2px solid var(--blaze);
  outline-offset: 2px;
}

/* Counts are the reason to look at the rail: pending work, visible at rest. */
.admin-rail-count {
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.admin-main > .card { margin: 0; }

/* A jumped-to section briefly declares itself, so a long console does not
   leave you hunting for what just moved. */
.admin-main > .card:target {
  border-color: rgba(255, 69, 0, .5);
  box-shadow: 0 0 0 3px rgba(255, 69, 0, .12);
  scroll-margin-top: 84px;
}

/* On phones the rail becomes a scrolling chip row above the work area: same
   destinations, no wasted vertical space, still thumb-friendly. */
@media (max-width: 899px) {
  .admin-rail { padding: 10px; position: static; }
  .admin-rail-title { display: none; }

  .admin-rail-nav {
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .admin-rail-nav::-webkit-scrollbar { display: none; }

  .admin-rail-link {
    flex: 0 0 auto;
    min-height: 40px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .07);
  }
}

/* ==========================================================================
   Mobile corrections
   ==========================================================================
   Reported from a real phone: the page slid left and right, both bars
   vanished while scrolling, and content sat off-centre. Each fix below
   targets one of those, in that order.
   ========================================================================== */

/* The sideways drift. Something wider than the viewport was pushing the page
   out. Clamping the document is the reliable fix, and min-width:0 stops flex
   and grid children from refusing to shrink, which is the usual culprit. */
/* overflow-x: hidden on html makes the document a scroll container, which
   broke vertical scrolling entirely and killed position: sticky. clip stops
   sideways drift without creating a scroll container, which is the whole
   reason it exists. Applied to body only; html is left alone. */
html { max-width: 100%; }

body {
  max-width: 100%;
  overflow-x: clip;
}

/* Older browsers without clip support still need the drift stopped, but only
   where sticky is not in play. */
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

.shell, .cols, .post, .card, .admin-layout { min-width: 0; max-width: 100%; }
.cols > *, .shell > *, .post > * { min-width: 0; }

/* Long unbroken strings (URLs, usernames) are the other common cause. */
.post-body, .caption, .comment, .muted, .name { overflow-wrap: anywhere; }

/* Media must never exceed its container. */
img, video, iframe { max-width: 100%; height: auto; }

@media (max-width: 900px) {
  /* The disappearing bars. Both need an explicit stacking context on mobile,
     otherwise transformed ancestors detach them while scrolling. */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    width: 100%;
  }

  .tabbar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 70;
    width: 100%;
  }

  /* Room for the fixed bar plus the home indicator, so the last post is not
     trapped underneath it. */
  body {
    padding-bottom: calc(62px + max(env(safe-area-inset-bottom), 8px));
  }

  /* Alignment. The page column should centre and honour the notch on
     landscape iPhones rather than sitting hard against one edge. */
  .shell {
    margin-inline: auto;
    padding-inline: max(var(--page-gutter), env(safe-area-inset-left), env(safe-area-inset-right));
  }

  /* Single column: the rail belongs beside content only when there is room. */
  .cols { display: block; }
  .side { margin-top: 16px; }
}

/* --------------------------- garage grid on mobile ------------------------
 * Vehicles are a grid, not a list: two across and two down reads as a garage
 * at a glance and matches the four-vehicle cap.
 * ------------------------------------------------------------------------ */

@media (max-width: 899px) {
  .garage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* Tiles stack image over caption so two fit across a phone without the
     text being squeezed into a sliver beside the photo. */
  .garage-car {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .garage-car img, .garage-car .ph {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
  }

  .garage-car > div { padding: 9px 10px 11px; }
  .garage-car .muted { font-size: .78rem; }
}

/* Very small phones keep two across; the tiles simply get tighter. */
@media (max-width: 380px) {
  .garage-grid { gap: 8px; }
  .garage-car > div { padding: 8px 9px 10px; }
}

/* --------------------------- sheets on phones -----------------------------
 * Reported: opening "Select brand" and typing showed the results clipped off
 * the bottom of the screen, hidden behind the browser toolbar.
 *
 * Cause: 86vh. On mobile Safari and Chrome, vh measures the viewport as if
 * the browser chrome were not there, so a bottom-anchored sheet sized in vh
 * extends underneath the URL bar and takes its content with it.
 *
 * dvh tracks the chrome as it shows and hides, which is exactly what a
 * bottom sheet needs. vh stays first as the fallback for older browsers.
 * ------------------------------------------------------------------------ */

@media (max-width: 620px) {
  .sheet {
    max-height: 86vh;
    max-height: 86dvh;
    /* Clear the home indicator so the last result is never half-covered. */
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* When the keyboard opens it covers the bottom of the screen, taking a
     bottom-anchored sheet with it. interactive-widget tells the browser to
     shrink the viewport instead, and dvh then follows it down so the search
     field and the first results stay visible above the keys. */
  .sheet:focus-within {
    max-height: 60vh;
    max-height: 60dvh;
  }

  /* The body must be allowed to shrink before it can scroll: without an
     explicit min-height a flex child refuses to go below its content size,
     which is the other half of why the list was unreachable. */
  .sheet-body {
    min-height: 0;
    flex: 1 1 auto;
    overscroll-behavior: contain;
  }

  /* The search field stays put while results scroll under it. */
  .sheet-head, .sheet-search { flex: none; }

  /* Comfortable, thumb-sized rows in a long brand list. */
  .opt { min-height: 48px; }
}

/* The same trap applies to the story viewer, which is full-screen by design. */
.story-stage, .story-viewer {
  height: 100vh;
  height: 100dvh;
}

/* ------------------------- admin: overview surface ------------------------
 * KPIs and the attention panel. The rule here is that every figure is a real
 * count from a real table. No projections, no sparkline shaped like data that
 * does not exist. A number an admin cannot trust is worse than no number.
 * ------------------------------------------------------------------------ */

.admin-section { display: flex; flex-direction: column; gap: 14px; }

.kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.kpi {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 15px 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}

.kpi:hover { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .045); }

.kpi-label {
  margin: 0 0 8px;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7d8798;
  font-weight: 600;
}

/* The figure is the point of the card, so it gets the weight and the width. */
.kpi-value {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kpi-note { margin: 8px 0 0; font-size: .78rem; color: var(--dim); }

.kpi-delta {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: var(--muted);
}

/* Green reads as growth without shouting. Orange is reserved for things that
   need a decision, not things that are merely going well. */
.kpi-delta.up { color: #56d364; }

/* ------------------------------- attention ------------------------------- */

.attention.is-live { border-color: rgba(255, 69, 0, .28); }

.attention-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: 11px;
  color: inherit;
  text-decoration: none;
  transition: background .16s var(--ease);
}

.attention-row:hover { background: rgba(255, 255, 255, .045); }
.attention-row + .attention-row { border-top: 1px solid rgba(255, 255, 255, .05); }

.attention-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--muted);
}

/* Amber for waiting, which is the honest colour for "a human must look at
   this". Red would imply something is broken; it is not. */
.attention-dot.is-pending {
  background: #e3b341;
  box-shadow: 0 0 0 3px rgba(227, 179, 65, .14);
}

.attention-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.attention-title { font-weight: 600; letter-spacing: -.01em; }
.attention-body .muted { font-size: .8rem; }

.attention-count {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .95rem;
  min-width: 30px;
  text-align: end;
  color: var(--blaze);
}

/* --------------------------- rail: live counts --------------------------- */

/* A count only turns orange when it represents work waiting. A neutral total,
   such as how many lobbies exist, stays grey so the eye is not pulled to it. */
.admin-rail-count.is-live {
  background: rgba(255, 69, 0, .16);
  color: var(--blaze);
}

.admin-rail-who {
  margin: 12px 6px 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.admin-rail-name { font-size: .85rem; font-weight: 600; letter-spacing: -.01em; }

.admin-rail-role {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blaze);
  font-weight: 650;
}

@media (max-width: 899px) {
  .admin-rail-who { display: none; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
  .kpi { padding: 13px 14px 14px; }
}

/* --------------------------- admin: data rows -----------------------------
 * Not a table element: rows need to reflow into stacked cards on a phone, and
 * a real table fights that. Grid gives the same column alignment on desktop
 * with none of the responsive pain.
 * ------------------------------------------------------------------------ */

.admin-table { display: flex; flex-direction: column; }

.admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  margin: 0 -10px;
  border-radius: 11px;
  transition: background .14s var(--ease);
}

.admin-row:hover { background: rgba(255, 255, 255, .04); }
.admin-row + .admin-row { border-top: 1px solid rgba(255, 255, 255, .05); }

.admin-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }

.admin-row-title {
  font-weight: 600;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.admin-row-meta { font-size: .8rem; font-variant-numeric: tabular-nums; }

.admin-row-actions { display: flex; align-items: center; gap: 7px; flex: none; }

.admin-thumb {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  object-fit: cover;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .09);
  background: #000;
}

.admin-thumb.ph { background: rgba(255, 255, 255, .05); }

/* A compact select that still clears the 44px touch target on a phone. */
.admin-mini {
  min-height: 34px;
  padding: 4px 8px;
  font-size: .8rem;
  width: auto;
  min-width: 104px;
}

/* Status pills. Muted on purpose: a suspended member should be obvious at a
   glance without the row shouting. */
.pill {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.pill.is-role { background: rgba(255, 69, 0, .14); color: var(--blaze); border-color: rgba(255, 69, 0, .28); }
.pill.is-suspended, .pill.is-banned { background: rgba(248, 81, 73, .14); color: #f85149; border-color: rgba(248, 81, 73, .3); }
.pill.is-hidden { background: rgba(227, 179, 65, .14); color: #e3b341; border-color: rgba(227, 179, 65, .3); }
/* Deleted, not gone. Read as heavier than hidden without shouting. */
.pill.is-removed { background: rgba(248, 81, 73, .14); color: #f85149; border-color: rgba(248, 81, 73, .3); }

/* Destructive actions are quiet until hovered: present, never inviting. */
.admin-row .btn.danger {
  background: transparent;
  border-color: rgba(248, 81, 73, .32);
  color: #f85149;
}

.admin-row .btn.danger:hover { background: rgba(248, 81, 73, .12); border-color: rgba(248, 81, 73, .5); }

/* On a phone each row becomes a stacked card with full-width actions, rather
   than a squeezed line with unreachable buttons. */
@media (max-width: 720px) {
  .admin-row {
    flex-wrap: wrap;
    padding: 12px 10px;
    row-gap: 10px;
  }

  .admin-row-main { flex-basis: calc(100% - 58px); }

  .admin-row-actions {
    flex-basis: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .admin-row-actions .btn { min-height: 40px; }
  .admin-mini { min-height: 40px; flex: 1; min-width: 120px; }
}

/* --------------------------- admin: panel switching -----------------------
 * One job on screen at a time. The console previously stacked every queue on
 * one page, so reaching the audit log meant scrolling past three others.
 * ------------------------------------------------------------------------ */

.admin-panel { display: none; }
.admin-panel.is-active { display: flex; flex-direction: column; gap: 14px; }

/* The workspace scrolls independently on desktop so the rail stays put and
   the page itself never moves. */
@media (min-width: 900px) {
  .admin-shell .admin-layout { height: calc(100dvh - 108px); }
  .admin-main { overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; }
  .admin-main::-webkit-scrollbar { width: 8px; }
  .admin-main::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    border-radius: 99px;
  }
}

/* Rail items are buttons now, so they need the anchor styling back. */
.admin-rail-link {
  width: 100%;
  font-family: inherit;
  font-size: .9rem;
  text-align: start;
  cursor: pointer;
  background: none;
}

.admin-rail-link.is-active {
  background: rgba(255, 69, 0, .1);
  border-color: rgba(255, 69, 0, .22);
  color: var(--text);
  font-weight: 620;
  position: relative;
}

/* A short bar rather than a filled block: it marks position without turning
   the item into a button that looks pressed. */
.admin-rail-link.is-active::before {
  content: "";
  position: absolute;
  inset-inline-start: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--blaze);
}

.admin-rail-group {
  margin: 14px 6px 5px;
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 650;
}

.admin-rail-group:first-of-type { margin-top: 10px; }

/* ---------------------------- inline preview ------------------------------ */

.admin-preview {
  margin: 2px 0 10px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .08);
  animation: previewIn .18s var(--ease);
}

@keyframes previewIn { from { opacity: 0; transform: translateY(-4px); } }

.admin-preview-media {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-preview-media::-webkit-scrollbar { display: none; }

.admin-preview-media img,
.admin-preview-media video {
  height: 190px;
  width: auto;
  max-width: 100%;
  border-radius: 9px;
  flex: none;
  background: #000;
  object-fit: contain;
}

.admin-preview-caption {
  margin: 10px 2px 0;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
  .admin-preview { animation: none; }
}

@media (max-width: 899px) {
  .admin-rail-group { display: none; }
  .admin-rail-link.is-active::before { display: none; }
  .admin-preview-media img, .admin-preview-media video { height: 150px; }
}

/* ------------------------- admin: analytics and audit --------------------- */

/* A polyline, not a charting library. It scales to any width, needs no
   dependency, and the shape is all a 30-day trend has to convey. */
.chart {
  width: 100%;
  height: 46px;
  margin: 12px 0 4px;
  display: block;
  overflow: visible;
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.audit-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  align-items: center;
}

.audit-filters .field { min-height: 40px; width: auto; flex: 1 1 170px; margin: 0; }
.audit-filters .btn { flex: none; }

.audit-action {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem;
  color: var(--blaze);
  letter-spacing: -.01em;
}

/* -------------------------- roles and permissions ------------------------- */

.perm-scroll { overflow-x: auto; scrollbar-width: thin; }

.perm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .86rem;
  min-width: 560px;
}

.perm-table th, .perm-table td {
  padding: 9px 10px;
  text-align: start;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.perm-table thead th {
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7d8798;
  font-weight: 650;
  position: sticky;
  top: 0;
  background: #0d0e11;
}

.perm-table td:not(:first-child), .perm-table th:not(:first-child) { text-align: center; width: 84px; }
.perm-table tbody tr:hover { background: rgba(255, 255, 255, .03); }

/* Words, not just colour: a red and green dot alone fails for anyone who
   cannot distinguish them. */
.tick { color: #56d364; font-weight: 650; font-size: .78rem; }
.cross { color: #6b7280; font-size: .78rem; }

@media (max-width: 720px) {
  .audit-filters .field { flex: 1 1 100%; }
}

/* Two controls sitting together without one looking like the other's caption. */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-row .btn { flex: 0 0 auto; }
@media (max-width: 480px) { .btn-row .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------------------------- account actions -----------------------------
 * One row of controls. The two destructive ones unfold their form in place
 * rather than sitting open, which previously made this the longest section on
 * the settings page for actions almost nobody takes.
 * ------------------------------------------------------------------------ */

.account-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.account-detail { position: relative; }

/* The summary is the button. list-style removal needs the webkit pseudo too,
   or Safari keeps its own disclosure triangle. */
.account-detail > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
}

.account-detail > summary::-webkit-details-marker { display: none; }
.account-detail > summary::marker { content: ''; }

.account-detail > summary.is-danger {
  color: #f85149;
  border-color: rgba(248, 81, 73, .32);
}

.account-detail > summary.is-danger:hover {
  background: rgba(248, 81, 73, .1);
  border-color: rgba(248, 81, 73, .5);
}

.account-detail[open] > summary {
  background: var(--surface-3);
  border-color: var(--line);
}

/* The panel drops below the whole row, not beside the button, so it never
   collides with the controls next to it. */
.account-panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  z-index: 5;
  width: min(380px, calc(100vw - 48px));
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-lg);
  animation: previewIn .16s var(--ease);
}

.account-panel .field { margin-bottom: 10px; }

/* On a phone there is no room to float: the panel becomes a normal block so
   it can never sit off the edge of the screen. */
@media (max-width: 560px) {
  .account-detail { width: 100%; }
  .account-detail > summary { width: 100%; justify-content: center; }
  .account-panel {
    position: static;
    width: 100%;
    margin-top: 8px;
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) { .account-panel { animation: none; } }

/* A post without media still carries its vehicle tag, just without a frame to
   sit on. Previously this case rendered a skeleton loader that never resolved,
   which read as a broken black rectangle. */
.post-cartag-bare {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px 0;
}

/* The car tag is absolutely positioned so it can float over a photo. With no
   media there is no frame to float over, and without a positioned ancestor it
   escaped and anchored itself to the page corner. In this context it is just
   an inline chip. */
.post-cartag-bare .car-tag,
.post-cartag-bare .rank {
  position: static;
  inset: auto;
}

/* The spec strip was running off the right edge of the card. It scrolls, so
   it must be allowed to shrink and must cancel the card padding cleanly. */
.spec-strip {
  max-width: 100%;
  padding-inline: 16px;
  scroll-padding-inline: 16px;
}

.post .spec-strip { margin-top: 12px; }
.spec-strip > * { scroll-snap-align: start; }

/* -------------------------------- the bell --------------------------------
 * Quiet until there is something to see. A permanently lit badge trains people
 * to ignore it, so the dot only exists when the count is above zero.
 * ------------------------------------------------------------------------ */

.nav-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  color: var(--muted);
  flex: none;
  transition: color .16s var(--ease), background .16s var(--ease);
}

.nav-bell:hover { color: var(--text); background: var(--surface-2); }
.nav-bell svg { width: 21px; height: 21px; }

.bell-dot {
  position: absolute;
  top: 3px;
  inset-inline-end: 3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--blaze);
  color: #fff;
  font-size: .64rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
  border: 2px solid var(--bg);
  line-height: 1;
}

/* ---------------------------- notification rows --------------------------- */

.notif-row { text-decoration: none; color: inherit; }

/* Unread carries a bar rather than a filled row: still scannable at a glance,
   but the list does not become a wall of orange after a busy week. */
.notif-row.is-unread {
  background: rgba(255, 69, 0, .05);
  position: relative;
}

.notif-row.is-unread::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--blaze);
}

.notif-row .admin-row-title { font-weight: 500; }
.notif-row .admin-row-title a { font-weight: 650; }

@media (max-width: 720px) {
  .nav-bell { width: 44px; height: 44px; }
}

/* Settings uses the same rail as the console: one job on screen, no hunting
   through five stacked cards for the one control you came for. */
.settings-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
  max-width: 980px;
}

@media (min-width: 900px) {
  .settings-layout { grid-template-columns: 208px minmax(0, 1fr); gap: 26px; }
  .settings-layout .admin-rail { position: sticky; top: 76px; }
}

/* --------------------------- profile header on phones ---------------------
 * Four stats plus an action button do not fit across a 390px screen. The row
 * was overflowing, so the last stat sat off the edge and the button crowded
 * whatever remained.
 * ------------------------------------------------------------------------ */

/* Stats wrap onto a second line rather than running off the card. */
.stat-row {
  flex-wrap: wrap;
  row-gap: 10px;
  min-width: 0;
}

.stat { min-width: 0; }

@media (max-width: 620px) {
  .profile-head {
    padding: 18px;
    gap: 14px;
    align-items: flex-start;
  }

  /* Avatar and identity share the top line; the action drops beneath so it
     never competes with the name for width. */
  .profile-head .avatar.lg { width: 72px; height: 72px; flex: none; }

  /* Superseded by .flex-fill: an attribute selector could never beat the
     inline style it was trying to override. */
  .profile-head > .flex-fill { flex: 1 1 100%; min-width: 0; }

  .profile-head .h1 {
    font-size: clamp(1.25rem, 6vw, 1.5rem);
    overflow-wrap: anywhere;
  }

  /* Four equal columns could not work here: "FOLLOWERS" and "FOLLOWING" are
     single words that cannot wrap, so they overflowed their track and ran
     into each other. Each stat sizes to its own label instead and the row
     spreads what is left; if the four no longer fit they wrap to a second
     line rather than overlapping. */
  .stat-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 12px;
    row-gap: 12px;
    width: 100%;
  }

  .stat {
    flex: 0 0 auto;
    text-align: start;
  }

  .stat b { font-size: 17px; display: block; }
  .stat span {
    display: block;
    font-size: .6rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }

  /* The action button goes full width under the details rather than floating
     beside them. */
  .profile-head > .btn,
  .profile-head > button.btn,
  .profile-head > a.btn {
    flex: 1 1 100%;
    justify-content: center;
    margin-top: 2px;
  }
}

/* Only the very smallest screens split the stats. Once the identity column
   runs the full width of the card, all four labels fit on one line down to
   about 360px; below that they go two and two rather than breaking 3 + 1. */
@media (max-width: 359px) {
  /* Two per line on the narrowest phones, each one wide enough for its word. */
  .stat { flex: 0 0 calc(50% - 8px); }
  .stat-row { justify-content: flex-start; column-gap: 16px; }
}

/* ------------------------- scrollable rows on phones ----------------------
 * A row that scrolls needs to look like it scrolls. Cutting a tile in half at
 * the edge reads as a layout bug; a soft fade reads as "there is more".
 * ------------------------------------------------------------------------ */

.spec-strip, .chips, .story-tray {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

@media (max-width: 899px) {
  .spec-strip {
    /* Fade the trailing edge instead of slicing a tile. */
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    padding-inline-end: 28px;
  }

  [dir="rtl"] .spec-strip {
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
  }
}

/* --------------------------- tablet proportions ---------------------------
 * Between 640 and 900 the layout was one column at full width, so a 4:3 photo
 * became nearly a metre tall on an iPad. The reading column stays measured and
 * the page centres instead.
 * ------------------------------------------------------------------------ */

@media (min-width: 641px) and (max-width: 1023px) {
  .shell { max-width: 560px; margin-inline: auto; }
  .post-media,
  .post-media .frames > figure { max-height: 70vh; }
  .post-media img, .post-media video { height: 100%; object-fit: contain; }
}

/* ------------------------- desktop media proportions ----------------------
 * mf-media-cap-640: a portrait phone photo used to grow with the column, so a
 * 1200x1600 upload rendered 1421px tall on a laptop and the whole car could
 * never be seen at once. Media now sits in a capped box, the way a feed post
 * does on a desktop browser. Photos are fitted inside rather than cropped, so
 * nothing is lost from a news slide that carries its own headline.
 * ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  .post-media,
  .post-media .frames > figure { max-height: 640px; }
  .post-media img, .post-media video { height: 100%; object-fit: contain; }

  /* A garage photo has no sidebar to sit beside, so the card itself is the
     thing that has to stop growing. */
  .card:has(.car-shot) { max-width: 680px; margin-inline: auto; }
  .car-shot { max-height: 640px; overflow: hidden; }
  .car-shot img { max-height: 640px; object-fit: cover; }
}

/* Consistent vertical rhythm. Cards were spaced by whatever margin each block
   happened to carry, which is why some sections felt cramped and others loose. */
@media (max-width: 899px) {
  .shell > .card + .card,
  .admin-main > .card + .card { margin-top: 12px; }
  .card-pad { padding: 16px; }
  .post-body { padding: 8px 16px 16px; }
  .post-actions { padding-inline: 6px; }
}

/* ------------------------------- mobile menu ------------------------------
 * The sheet used to list twelve destinations, nine of which were already a tap
 * away in the bottom bar. Fewer rows means each can be smaller without being
 * harder to hit, so the whole thing fits without scrolling.
 * ------------------------------------------------------------------------ */

.menu-list a,
.menu-list button {
  min-height: 52px;
  font-size: 1.02rem;
  padding-block: 0;
}

.menu-sep { margin: 6px 0; }

/* The sheet now holds a handful of rows, so it should size to them rather than
   reserving most of the screen. */
@media (max-width: 620px) {
  .sheet { max-height: min(86dvh, 460px); }
  .sheet:focus-within { max-height: min(60dvh, 460px); }
}

/* The active rail item was carrying a tinted fill, an orange border and the
   focus ring all at once, which read as an error state. Position is already
   conveyed by the bar and the weight; the border can go. */
.admin-rail-link.is-active {
  border-color: transparent;
  background: rgba(255, 69, 0, .08);
}

/* Keep a real focus ring for keyboard users, but only when focus came from the
   keyboard, so clicking an item does not leave it ringed. */
.admin-rail-link:focus-visible {
  outline: 2px solid var(--blaze);
  outline-offset: 2px;
}

.admin-rail-link:focus:not(:focus-visible) { outline: none; }

/* A small, honest status next to the save button. Green when stored, amber
   while a preview is showing that has not been committed. */
.save-state {
  font-size: .8rem;
  font-weight: 600;
  padding-inline-start: 2px;
}

.save-state.is-saved { color: #56d364; }
.save-state.is-dirty { color: #e3b341; }

/* ======================================================================== */
/*  QUIET BUTTON                                                            */
/* ======================================================================== */
/* A faded action that should be findable without competing with the primary
   one next to it: replacing a car photo sits beside Edit and Remove, and it
   is not the thing a member came to the page to do. Reaches full contrast on
   hover and focus so it never becomes a guess. */
.btn.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--dim);
  box-shadow: none;
}
.btn.quiet:hover,
.btn.quiet:focus-visible {
  background: var(--surface-2);
  border-color: var(--line-soft);
  color: var(--text);
  box-shadow: none;
  transform: none;
}
.btn.quiet:disabled { opacity: .45; }

/* ======================================================================== */
/*  GARAGE SLOTS                                                            */
/* ======================================================================== */
/* An empty slot has to read as the same object as a filled one, just waiting.
   The dashed tile carried a fixed 132px height while a car tile is a 4:3
   photo plus its details, so a garage with one car showed mismatched boxes.
   Stretching to the row, and matching the photo's shape, lines them up at any
   column count. */
.garage-grid > .garage-tile.add {
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}
/* Every row the same height, not just every tile in a row: with four slots
   and one car, the second row used to sit shorter than the first. */
.garage-grid { align-items: stretch; grid-auto-rows: 1fr; }
.garage-grid > .garage-tile { height: 100%; }
.garage-grid > .garage-tile .meta { flex: 1; justify-content: flex-start; }

/* ======================================================================== */
/*  NOTIFICATION LIST                                                       */
/* ======================================================================== */
/* The list is read in one vertical scan, so every row is the same height and
   the timestamp is pinned to the end rather than wrapping under the text.
   Rows used to break apart entirely because the actor's name was a link
   inside the row's own link; the markup is flat now and this keeps it tidy. */
.notif-row {
  align-items: center;
  padding-inline-start: 14px;
  min-height: 58px;
}
.notif-row .admin-row-title {
  /* Plain text, so "Name did a thing" wraps as one sentence at any width. */
  display: block;
  font-weight: 500;
  white-space: normal;
}
.notif-row .admin-row-title b { margin-inline-end: 4px; }
.notif-row .admin-row-title b { font-weight: 650; }
.notif-row > .admin-row-meta {
  flex: none;
  align-self: center;
  color: var(--dim);
  white-space: nowrap;
}
.notif-row .avatar.sm { width: 34px; height: 34px; }
@media (max-width: 620px) {
  .notif-row { min-height: 54px; padding-inline-start: 12px; }
  .notif-row .admin-row-title { font-size: 14px; }
}

/* ======================================================================== */
/*  NEWS HEADLINES                                                          */
/* ======================================================================== */
/* A card carries a headline, one quiet standfirst line, then the body. The
   headline used to be the whole Instagram caption opener, two sentences and an
   emoji set solid in bold, which competed with the artwork directly above it.
   Restraint rather than more type: one idea in bold, the rest stepped down. */
.news-post .news-caption h2 {
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 6px;
  text-wrap: balance;
}
.news-post .news-caption .news-dek {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  margin: 0 0 10px;
  font-weight: 500;
}
.news-post .news-caption[dir='rtl'] .news-dek { line-height: 1.6; }
@media (max-width: 620px) {
  .news-post .news-caption h2 { font-size: 17.5px; }
  .news-post .news-caption .news-dek { font-size: 13.5px; }
}

/* ======================================================================== */
/*  BOTTOM TAB LABELS                                                       */
/* ======================================================================== */
/* The current tab says its own name. Every tab carries the text so the bar
   keeps one height, but only the active one is visible: five labels at once
   is a menu, none at all is a guessing game. */
@media (max-width: 1024px) {
  .tabbar a { flex-direction: column; gap: 3px; }
  .tabbar .tab-label {
    font-family: var(--ui);
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .01em;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .18s var(--ease), transform .18s var(--ease);
  }
  .tabbar a.active .tab-label { opacity: 1; transform: none; }
  .tabbar .plus .tab-label { display: none; }
  .tabbar { padding-top: 7px; }
}

/* ======================================================================== */
/*  REQUIRED FIELDS AND FIRST-RUN PROMPT                                    */
/* ======================================================================== */
/* "Required" in words beside the label. An asterisk is a convention people
   have to already know, and the first members through the car form did not
   spot it, then could not tell why the car would not save. */
.field > span .req {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blaze);
  margin-inline-start: 6px;
  vertical-align: 1px;
}

/* The first thing a new account sees. Quiet card, one instruction, one button. */
.welcome-card {
  border-color: rgba(255, 69, 0, .28);
  background: linear-gradient(180deg, rgba(255, 69, 0, .07), transparent 70%);
}

/* ======================================================================== */
/*  NOTIFICATION ROWS ON PHONE AND TABLET                                   */
/* ======================================================================== */
/* Admin tables wrap on a phone so their action buttons get a full-width row
   of their own. A notification has no buttons, so that same rule only pushed
   the timestamp onto a second line and made each item twice as tall as it
   needed to be. One line per notification: avatar, what happened, when. */
@media (max-width: 1024px) {
  .notif-row {
    flex-wrap: nowrap;
    row-gap: 0;
    align-items: center;
  }
  .notif-row .admin-row-main {
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
  }
  .notif-row > .admin-row-meta {
    flex: 0 0 auto;
    align-self: center;
    margin-inline-start: 10px;
    font-size: .75rem;
  }
  /* One sentence, not two flex items. The title is a flex row by default,
     which made the name and the rest of the line wrap as separate blocks and
     left a ragged edge on a narrow screen. As plain text it just wraps. */
  .notif-row .admin-row-title { display: block; white-space: normal; }
}

/* ======================================================================== */
/*  FLEXIBLE COLUMN                                                         */
/* ======================================================================== */
/* Was an inline style="min-width:0;flex:1" repeated across profile, lobby and
   comment rows. Inline styles outrank the stylesheet, so the phone rule that
   was supposed to drop this column onto its own line never took effect and
   the profile stats stayed crushed into a ~250px column beside the avatar.
   As a class it can be overridden where it needs to be. */
.flex-fill { min-width: 0; flex: 1; }

@media (max-width: 900px) {
  /* Name, stats and bio take the full width under the avatar. Four stat
     labels need the room, and the avatar does not need a column of its own
     once the screen is this narrow. */
  .profile-head > .flex-fill { flex: 1 1 100%; }
}

/* ======================================================================== */
/*  PAGE HEADER                                                             */
/* ======================================================================== */
/* A title on the left, its actions on the right. This was an inline style, so
   no media query could reach it: on a phone the heading shrank until "YOUR
   GARAGE" broke across two lines and collided with the buttons beside it.
   As a class, the phone case can be stated properly. */
.page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* The title column only takes the whole row when there is not enough width
   for the actions beside it. Above that it shares the line as before. */
@media (max-width: 720px) {
  /* The title and its supporting line are one block with air under them, then
     the actions. Without the row gap the buttons sat tight against the text
     and read as part of the sentence above them. */
  .page-head { row-gap: 16px; column-gap: 10px; }
  .page-head > .flex-fill { flex: 1 1 100%; }

  /* Actions share the next line evenly, at a real tap size. */
  .page-head > .btn,
  .page-head > a.btn,
  .page-head > button.btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 44px;
    padding-inline: 14px;
    white-space: nowrap;
  }

  .page-head .h1 { font-size: clamp(1.35rem, 6.5vw, 1.7rem); line-height: 1.1; }
}

/* ======================================================================== */
/*  CAR PHOTO SLOT                                                          */
/* ======================================================================== */
/* The owner can change or clear the photo from the car's own page, not only
   from manage mode. The controls sit over the image, quiet until you look for
   them, so they never compete with the car itself. */
.car-shot { position: relative; }
.car-shot img { width: 100%; display: block; }

.car-shot-empty {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
}

.car-shot-actions {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Over a photo the quiet button needs its own backing to stay readable. */
.car-shot:not(.is-empty) .car-shot-actions .btn.quiet {
  background: rgba(10, 10, 12, .62);
  border-color: rgba(255, 255, 255, .14);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.car-shot:not(.is-empty) .car-shot-actions .btn.quiet:hover,
.car-shot:not(.is-empty) .car-shot-actions .btn.quiet:focus-visible {
  background: rgba(10, 10, 12, .85);
  border-color: rgba(255, 255, 255, .3);
}

@media (max-width: 620px) {
  .car-shot-actions { inset-inline: 10px; justify-content: center; }
  .car-shot-actions .btn { flex: 1 1 auto; }
}

/* ======================================================================== */
/*  ADMIN CONSOLE ON PHONE AND TABLET                                       */
/* ======================================================================== */
/* The section switcher was meant to be a scrolling chip row, but a later
   `width: 100%` rule made every chip as wide as the rail, so the strip ran to
   2,232px and showed exactly one section at a time with nothing to suggest it
   scrolled. From a phone the console looked like it only had an Overview:
   the verification queue, members, content, lobbies, analytics and the audit
   log were all off-screen.
   
   Sideways scrolling is not the answer here. Every section is laid out as a
   wrapping grid, so all seven are on screen and reachable with a thumb. */
@media (max-width: 899px) {
  .admin-rail-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
    overflow: visible;
  }

  .admin-rail-link {
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding: 0 12px;
    font-size: .85rem;
    gap: 8px;
  }

  /* The count is the point of several of these, so it must not be the thing
     that gets clipped when a label is long. */
  .admin-rail-link > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-rail-count { flex: none; }
}

/* Tall, narrow screens: two per row reads better than three squeezed ones. */
@media (max-width: 430px) {
  .admin-rail-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Admin actions are real decisions -- approving a car, suspending a member --
   and they were sitting at 34px on a phone. Anything that changes state gets a
   proper target. */
@media (max-width: 899px) {
  /* .admin-shell .btn.sm caps these at 34px, so the phone rule has to match
     that specificity to win. Approving a car or suspending a member is not a
     34px decision. */
  .admin-shell .btn,
  .admin-shell .btn.sm {
    min-height: 42px;
  }

  .admin-panel .btn.sm { padding-inline: 16px; }

  /* Approve and Reject sit as a pair; give them the row rather than leaving
     them stranded at the end of a line of text. */
  .verify-review .verify-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .verify-review .verify-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Decision buttons sit as a row on every screen; the phone rule above lets
   them share the width. */
.verify-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===================== Guess the Car — daily challenge =====================
   Preview surface at /preview/challenge. Everything is scoped to .ch- so it
   cannot leak into the feed if the card is promoted later. Logical properties
   throughout, because Arabic is a mirrored layout and not a right-aligned one.
   Build marker: mf-challenge-20260922
   ========================================================================= */
.ch-hidden { display: none !important; }
.ch-card { overflow: hidden; }
.ch-h1 { margin: 8px 0 8px; }
.ch-lede { margin: 0; line-height: 1.65; }
.ch-fine { font-size: 12.5px; margin: 14px 0 0; }
.ch-center { text-align: center; }

.ch-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.ch-chip {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 5px 11px;
  font-size: 11.5px; font-weight: 600; color: var(--text);
}
.ch-chip-dark { background: rgba(9, 9, 11, .72); backdrop-filter: blur(10px); }
.ch-chip-hot { background: var(--blaze); border-color: transparent; color: #fff; }

.ch-btn { width: 100%; margin-top: 18px; }
.ch-btn-ghost {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line);
}

/* ------------------------------- stage --------------------------------- */
.ch-stage { position: relative; aspect-ratio: 16 / 10; background: var(--photo-bg); overflow: hidden; }
.ch-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: filter, transform;
}
.ch-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 9, 11, .85) 0%, rgba(9, 9, 11, 0) 42%);
}
.ch-tags { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; display: flex; gap: 6px; }
.ch-pts {
  position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 3;
  font-family: var(--display); font-size: 28px; font-weight: 800; color: var(--blaze);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .7); font-variant-numeric: tabular-nums;
}

.ch-rail { height: 3px; background: var(--line-soft); position: relative; overflow: hidden; }
.ch-rail i {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 100%; background: var(--blaze);
  /* transform-origin takes no logical keywords, so the mirror is explicit.
     The bar always drains away from the side the reader starts on. */
  transform-origin: left center;
}
[dir="rtl"] .ch-rail i { transform-origin: right center; }

/* ------------------------------ options -------------------------------- */
.ch-opts { display: grid; gap: 9px; padding: 16px; }
.ch-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 15px; color: var(--text); font: inherit; font-size: 15.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .16s var(--ease);
}
.ch-opt:hover:not(:disabled) { border-color: var(--blaze); }
.ch-opt:active:not(:disabled) { transform: scale(.99); }
.ch-opt:disabled { cursor: default; }
.ch-key {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: 7px; background: var(--surface-3); color: var(--muted);
  font-size: 12px; font-weight: 700;
}
.ch-opt.ch-right { border-color: #16b364; background: rgba(22, 179, 100, .12); }
.ch-opt.ch-right .ch-key { background: #16b364; color: #fff; }
.ch-opt.ch-wrong { border-color: #e5484d; background: rgba(229, 72, 77, .12); }
.ch-opt.ch-wrong .ch-key { background: #e5484d; color: #fff; }
.ch-opt.ch-mute { opacity: .42; }

/* ------------------------------ verdict -------------------------------- */
.ch-verdict {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-top: 1px solid var(--line-soft);
}
.ch-verdict-lab { font-family: var(--display); font-size: 22px; font-weight: 800; }
.ch-ok .ch-verdict-lab { color: #16b364; }
.ch-no .ch-verdict-lab { color: #e5484d; }
.ch-verdict-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ch-next {
  flex: none; background: var(--surface-3); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-pill); padding: 10px 18px; font: inherit; font-weight: 700;
  font-size: 14px; cursor: pointer;
}
.ch-next:hover { border-color: var(--blaze); }

/* ------------------------------ result --------------------------------- */
.ch-score {
  font-family: var(--display); font-size: 76px; line-height: .92; font-weight: 800;
  font-variant-numeric: tabular-nums; margin: 6px 0 4px;
}
.ch-score small { font-size: 22px; color: var(--dim); font-weight: 700; }
.ch-recap { display: grid; gap: 8px; margin: 18px 0 4px; }
.ch-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: 9px 11px; font-size: 13.5px;
}
.ch-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ch-dot-ok { background: #16b364; }
.ch-dot-no { background: #e5484d; }
.ch-row-name { flex: 1; font-weight: 600; }
.ch-row-pts { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.ch-actions { display: grid; gap: 9px; margin-top: 16px; }
.ch-actions .ch-btn { margin-top: 0; }
.ch-credit { font-size: 11px; text-align: center; padding: 16px 8px 4px; line-height: 1.7; }

@media (max-width: 420px) {
  .ch-score { font-size: 64px; }
  .ch-pts { font-size: 24px; }
}

/* A member who prefers less motion still gets the game, just without the
   fifteen second animated reveal doing the work. */
@media (prefers-reduced-motion: reduce) {
  .ch-stage img, .ch-rail i { transition-duration: .01ms !important; }
}

/* ---------------- daily challenge entry card ----------------------------
   Shown at the top of Discover. A card so it reads as a sibling of the
   filters and the feed rather than a banner dropped on top of them.

   The row is a grid, not a flex line: at phone width the text cannot share a
   line with a tile and a button. On a phone the text takes the full width
   underneath and the button stays up beside the tile, which measured 65px
   shorter than stacking the button full width.
   Build marker: mf-security-20260922
   ---------------------------------------------------------------------- */
.ch-row-link {
  display: grid; align-items: center; gap: 4px 13px; text-decoration: none;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "icon stats action";
  color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 13px 14px;
  transition: border-color .18s var(--ease);
}
.ch-row-link:hover { border-color: rgba(255, 69, 0, .45); }
.ch-row-live {
  background:
    linear-gradient(135deg, rgba(255, 69, 0, .12), rgba(24, 24, 28, .9) 58%),
    var(--surface-2);
}
.ch-row-icon {
  grid-area: icon; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; font-size: 17px;
  background: rgba(255, 69, 0, .14); border: 1px solid rgba(255, 69, 0, .3);
}
.ch-row-live .ch-row-icon { background: var(--blaze); border-color: transparent; }
.ch-row-stats {
  grid-area: stats; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px;
}
.ch-row-stat { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.ch-row-stat i { font-style: normal; color: var(--muted); font-weight: 500; }
.ch-row-stat em { font-style: normal; font-variant-numeric: tabular-nums; }
.ch-row-stat em.hot { color: var(--blaze); }
.ch-row-stat s { text-decoration: none; color: var(--dim); }
.ch-row-cta { color: var(--text); }
.ch-row-action { grid-area: action; display: flex; align-items: center; }
.ch-row-dots { display: flex; gap: 4px; }
.ch-row-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.ch-row-dots i.ok { background: #16b364; }
.ch-row-dots i.no { background: #e5484d; }
.ch-row-btn {
  background: var(--blaze); color: #fff; border-radius: var(--r-pill);
  padding: 9px 20px; font-weight: 700; font-size: 13.5px;
}

@media (max-width: 520px) {
  .ch-row-link {
    gap: 9px 11px; padding: 12px 13px;
    grid-template-areas:
      "icon  .     action"
      "stats stats stats";
  }
  .ch-row-icon { width: 32px; height: 32px; font-size: 15px; border-radius: 9px; }
  .ch-row-stats { gap: 0 14px; }
  .ch-row-stat { font-size: 13.5px; }
  .ch-row-btn { padding: 8px 17px; font-size: 13px; }
}

/* --------- what follows the day's round -------------------------------
   Revealed with the result. A round that ends on a score and nothing else
   is a dead end; this gives the member the way back and three reasons to
   stay. Deliberately a compact list and not full news cards, which would
   turn the result screen into a second feed to scroll. */
.ch-after { display: block; margin-top: 16px; }
.ch-back { margin-top: 0; }
.ch-after-head { margin: 22px 0 10px; }
.ch-news { display: grid; gap: 9px; }
.ch-news-item {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--r-md); padding: 9px 11px;
  transition: border-color .18s var(--ease);
}
.ch-news-item:hover { border-color: rgba(255, 69, 0, .45); }
.ch-news-thumb {
  width: 62px; height: 46px; flex: none; border-radius: 8px; overflow: hidden;
  background: var(--surface-3); display: block;
}
.ch-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-news-text { min-width: 0; display: block; }
.ch-news-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.4;
}
.ch-news-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

@media (max-width: 520px) {
  .ch-news-thumb { width: 54px; height: 40px; }
  .ch-news-title { font-size: 13px; }
}