/* Motorfiction — design system v2
   Direction: sporty, aggressive, technical. Mobile-first.
   Type: Saira Condensed for display (motorsport condensed caps),
         Saira for UI. Chosen over Orbitron, which reads as sci-fi cliché.
   Colour: carbon ground, blaze orange-red for action, volt lime for data. */

: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: 12px;

  --bg: #08090b;
  --surface: #0f1115;
  --surface-2: #15181e;
  --surface-3: #1c2027;
  --line: #262a33;
  --line-soft: #1a1d24;

  --text: #f3f5f8;
  --muted: #99a0ad;
  --dim: #666d7a;

  --blaze: #ff4500;       /* brand: action, likes, primary CTA */
  --blaze-text: #ff4500;  /* accent used as small text */
  --volt: #c8ff2e;        /* data, scores, telemetry */
  --on-volt: #0b0d07;     /* text placed on a volt fill */
  --volt-wash: rgba(200,255,46,.08);

  --topbar-bg: rgba(8,9,11,.86);
  --photo-bg: #000;       /* letterbox behind photography */

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --ui: 'Saira', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shell: 620px;
  --ease: cubic-bezier(.22,.8,.28,1);
}

/* ------------------------------ light theme -------------------------------
 * Same structure, inverted ground. The brand red survives on white; the volt
 * lime does not, so data figures shift to a deep lime that still reads as the
 * same accent family but passes contrast on a white surface.
 * ------------------------------------------------------------------------ */
[data-theme='light'] {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e7eaef;
  --line: #dde1e8;
  --line-soft: #eaedf2;

  --text: #0b0d10;
  --muted: #59606c;
  --dim: #838a96;

  --blaze: #ff4500;
  /* #FF4500 on white is 3.4:1, fine for fills and icons but thin for small
     text, so accent copy uses a deeper shade of the same hue. */
  --blaze-text: #c2340b;
  --volt: #3f6212;
  --on-volt: #ffffff;
  --volt-wash: rgba(63,98,18,.10);

  --topbar-bg: rgba(255,255,255,.88);
  --photo-bg: #e7eaef;
}

@media (prefers-color-scheme: light) {
  [data-theme='system'] {
    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-2: #f2f4f7;
    --surface-3: #e7eaef;
    --line: #dde1e8;
    --line-soft: #eaedf2;

    --text: #0b0d10;
    --muted: #59606c;
    --dim: #838a96;

    --blaze: #ff4500;
    --blaze-text: #c2340b;
    --volt: #3f6212;
    --on-volt: #ffffff;
    --volt-wash: rgba(63,98,18,.10);

    --topbar-bg: rgba(255,255,255,.88);
    --photo-bg: #e7eaef;
  }
}

* { 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.5;
  -webkit-font-smoothing: antialiased;
  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; }

/* --------------------------------- type ---------------------------------- */
.h1, .h2, .eyebrow, .brand, .spec-card .v, .rating-score, .stat b, .seg button {
  font-family: var(--display);
}
.h1 {
  font-size: 30px; font-weight: 800; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 0 0 8px; line-height: 1.02;
}
.h2 { font-size: 19px; font-weight: 700; text-transform: uppercase; margin: 0 0 12px; }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim);
}
.muted { color: var(--muted); font-size: 13.5px; }

/* -------------------------------- top bar -------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--topbar-bg);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.topbar-inner {
  max-width: 1060px; margin: 0 auto; padding: 0 14px;
  height: 56px; display: flex; align-items: center; gap: 10px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  margin-inline-end: auto;
  /* A flex item can be squeezed narrower than its contents, and without this
     they simply paint over whatever sits next to them. */
  min-width: 0; overflow: hidden;
}

/* The wordmark is the real artwork rather than type, so the header carries the
   actual logo instead of an approximation of it. Wrapped in a span because the
   theme swap below sets display on the images, which would otherwise out-rank
   the rule that hides the wordmark on small screens. */
.brand-word { display: block; flex: none; }
/* The wordmark stands alone on desktop rather than sitting beside the mark, so
   it carries the bar on its own and is set larger than it was as a pairing. */
.brand-word img { height: 20px; width: auto; display: block; }
/* Supplied brand mark. Height-locked so the bar never shifts.
   The stock logo is white-on-black, so light mode uses an ink variant. */
/* The mark is a solid MF monogram. Being filled rather than outlined it holds
   up better when small than the outline artwork it replaced, but 28px in a
   56px bar is kept as the set height so the bar never shifts. */
.brand-mark { height: 28px; width: auto; display: block; }
/* Qualified with `img` so these are (0,1,1) and out-rank `.brand-word img`.
   Without that the hidden variant kept its `display: block`, so the wordmark
   box was two lines tall and the visible artwork sat half a line above the
   centre of the bar. Every .on-dark/.on-light in the app is an <img>. */
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; } }
/* One logo at a time, never both. The monogram is the phone and tablet mark;
   the wordmark takes the bar on desktop and TV.

   The swap sits just above 1024px because that is the widest common tablet
   (iPad landscape), which keeps tablets on the monogram. It also clears the
   old constraint that a signed-in bar, holding up to eight destinations, had
   no room for the wordmark until 1000px. */
@media (max-width: 1024px) { .brand-word { display: none; } }
/* Written as (0,2,1) and placed after the theme rules above so it out-ranks
   the `[data-theme] img.on-*` swaps, which would otherwise put the mark back
   on screen in whichever theme was active. */
@media (min-width: 1025px) { .brand img.brand-mark { display: none; } }
.nav { display: flex; align-items: center; gap: 3px; }
.nav a, .nav button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-pill);
  border: 0; background: transparent; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  transition: color .18s var(--ease), background .18s 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 must keep button styling, not link styling. */
.nav .btn {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 9px 17px; 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); }

/* -------------------------------- layout --------------------------------- */
.page { max-width: 1060px; margin: 0 auto; padding: 16px var(--page-gutter) 90px; }
.cols { display: grid; grid-template-columns: minmax(0,var(--shell)) 292px; gap: 24px; 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 22px; border-radius: var(--r-pill);
  border: 1px solid var(--blaze); background: var(--blaze); color: #fff;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  text-transform: uppercase; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -10px var(--blaze); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; 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 22px -10px var(--volt); }
.btn.sm { padding: 9px 16px; font-size: 13px; }
.btn.block { width: 100%; }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 7px; }
.field input, .field textarea, .field select, .picker-btn {
  width: 100%; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text); outline: none;
  transition: border-color .16s var(--ease), background .16s 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);
}
.field textarea { resize: vertical; min-height: 84px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .row { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden;
}
.card + .card { margin-top: 14px; }
.card-pad { padding: 20px; }

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

/* The single .chip lived on the car tag as a "stock" / "N mods" badge. That
   badge is gone, so these are kept only because .chip is a generic primitive
   worth having; if nothing claims it by the next pass, delete it. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.chip.solid { background: var(--blaze); border-color: var(--blaze); color: #fff; }
.chip.volt { background: var(--volt); border-color: var(--volt); color: var(--on-volt); }

/* --------------------------------- post ---------------------------------- */
.post {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px;
}
.post-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; }
.post-head .who { min-width: 0; }
.post-head .name { font-weight: 650; font-size: 14px; }
.post-head .sub {
  font-family: var(--display); font-size: 12.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.post-head .spacer { margin-inline-start: auto; }

.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 shape a phone can produce. The frame takes the
   post's own aspect ratio and the image is fitted inside it, so no part of a
   car is ever cropped away. Mixed-ratio carousels letterbox rather than cut. */
.post-media .frames > figure { aspect-ratio: var(--ratio, 1); }
.post-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
/* Dots are a position readout and a control. Bigger than the old 5px marks,
   which were easy to miss entirely on a bright photo. */
.frame-dots { position: absolute; bottom: 10px; 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,.45); cursor: pointer; transition: background .2s, transform .2s;
}
.frame-dots button.on { background: #fff; transform: scale(1.25); }

/* Explicit arrows, because swiping alone left people unable to reach the rest
   of a post's photos. Solid circles so they stay legible on any image. */
.frame-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: var(--r-pill);
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(10,11,13,.72); color: #fff;
  transition: background .16s var(--ease), opacity .16s var(--ease);
  z-index: 2;
}
.frame-nav:hover { background: rgba(10,11,13,.9); }
.frame-nav svg { width: 19px; height: 19px; }
.frame-nav.prev { inset-inline-start: 8px; }
.frame-nav.next { inset-inline-end: 8px; }
/* At either end the arrow is dimmed rather than removed, so the control does
   not jump around as the carousel moves. */
.frame-nav[disabled] { opacity: .28; cursor: default; }

.frame-count {
  position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(10,11,13,.72); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
}

.car-tag {
  position: absolute; inset-inline-start: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(8,9,11,.72); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-pill); padding: 7px 13px;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}

/* ---------------------- animated spec / mod cards ----------------------- */
.spec-strip {
  display: flex; gap: 8px; padding: 12px 14px 2px;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.spec-strip::-webkit-scrollbar { display: none; }

/* Fixed footprint so every spec and mod tile renders identically,
   whatever the label length. Overflow is clipped, not stretched. */
.spec-card {
  flex: 0 0 132px; width: 132px; height: 78px; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 13px 11px; background: var(--surface-2);
  opacity: 0; transform: translateY(12px) scale(.97);
  position: relative; overflow: hidden;
}
.spec-card.in { animation: cardIn .5s 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: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 4px;
}
.spec-card .v {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 19px; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; line-height: 1.05;
}
.spec-card .v small { font-size: 11px; font-weight: 600; color: var(--dim); margin-inline-start: 3px; }
.spec-card .d {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Performance figures read as telemetry. */
.spec-card:not(.is-mod):not(.is-stock) .v { color: var(--volt); }
/* Mods are the point of the product, so they carry the brand colour. */
.spec-card.is-mod { border-color: rgba(255,69,0,.42); background: rgba(255,69,0,.09); }
.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; }
}

/* ------------------------------- actions --------------------------------- */
.post-actions { display: flex; align-items: center; gap: 4px; padding: 8px 10px 2px; }
.act {
  display: inline-flex; align-items: center; gap: 7px;
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 10px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 650; color: var(--muted);
  font-variant-numeric: tabular-nums;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.act:hover { background: var(--surface-2); color: var(--text); }
.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.32); } 100% { transform: scale(1); } }

.post-body { padding: 4px 14px 14px; }
.caption { font-size: 14.5px; margin: 6px 0 0; }
.caption b { font-weight: 650; margin-inline-end: 6px; }

/* -------------------------------- rating --------------------------------- */
.rating-box {
  margin: 10px 14px 14px; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
}
.rating-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rating-score {
  font-size: 27px; font-weight: 800; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: var(--volt); 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: 34px; border-radius: 11px; padding: 0;
  border: 1px solid var(--line); background: var(--surface-3);
  cursor: pointer; font-family: var(--display); font-size: 14px; font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums;
  transition: transform .14s var(--ease), background .14s var(--ease), color .14s var(--ease);
}
.rating-scale button:hover { color: var(--text); border-color: var(--volt); transform: translateY(-2px); }
.rating-scale button.picked { background: var(--volt); border-color: var(--volt); color: var(--on-volt); }
.rating-note { font-size: 12px; color: var(--dim); margin: 9px 0 0; }

/* ------------------------------- comments -------------------------------- */
.comments { border-top: 1px solid var(--line-soft); padding: 14px; }
.comment { display: flex; gap: 10px; margin-bottom: 12px; }
.comment .body { font-size: 14px; }
.comment .meta { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.comment.reply { margin-inline-start: 38px; }
.comment-form { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.comment-form input {
  flex: 1; padding: 11px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2); outline: none;
}
.comment-form input:focus { border-color: var(--blaze); }

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

.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.06); }

.garage-car {
  display: flex; gap: 13px; align-items: center;
  padding: 12px; border: 1px solid var(--line-soft); border-radius: var(--r-md);
  margin-bottom: 9px; background: var(--surface-2);
  transition: border-color .18s var(--ease);
}
.garage-car:hover { border-color: var(--line); }
.garage-car img { width: 78px; height: 58px; object-fit: cover; border-radius: 10px; flex: none; }
.garage-car .ph { width: 78px; height: 58px; border-radius: 10px; background: var(--surface-3); flex: none; }

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

/* A lobby card is a photograph with a solid plate under it. No gradients:
   the cover is a real image, the overlay is a flat tint, the logo is a solid
   block of the lobby accent. */
.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 .2s var(--ease);
}
.lobby-card:hover { border-color: var(--line); transform: translateY(-2px); }

.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.04); }
/* Flat tint, not a gradient, so text stays readable on any photo. */
.lobby-card .cover::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(8, 9, 11, .34);
}
/* No cover photo: a dark plate with the monogram in the lobby accent and the
   same accent stripe the photo cards carry. Restrained, not a colour field. */
.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;
}

/* Solid accent plate carrying the lobby monogram or uploaded logo.
   Sits top-left, clear of the accent stripe along the bottom edge. */
.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: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.lobby-card h3 {
  font-family: var(--display); font-size: 19px; font-weight: 800;
  text-transform: uppercase; margin: 0 0 5px; letter-spacing: .01em;
}
.lobby-card .desc {
  font-size: 12.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.45;
  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: .1em;
}
.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: photograph with a flat tint and the accent stripe. */
.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(8,9,11,.42); }
@media (max-width: 620px) { .lobby-banner { aspect-ratio: 5 / 2; } }

.lobby-item { display: flex; gap: 12px; align-items: center; padding: 12px 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; }

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

/* Sound is off by default, so the control shows a muted speaker until enabled. */
.video-sound {
  position: absolute; inset-inline-end: 10px; bottom: 10px; z-index: 3;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(8,9,11,.66); backdrop-filter: blur(10px);
  color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: transform .16s var(--ease);
}
.video-sound:hover { transform: scale(1.06); }
.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; }

.video-time {
  position: absolute; inset-inline-end: 10px; top: 10px; z-index: 3;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(8,9,11,.66); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-family: var(--display); font-size: 11.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
}

/* Paused state gets a play affordance so it never looks broken. */
.video-wrap.paused::after {
  content: ''; position: absolute; inset: 0; z-index: 2; margin: auto;
  width: 62px; height: 62px; border-radius: var(--r-pill);
  background: rgba(8,9,11,.6) no-repeat center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  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 a chosen video. */
.thumbs figure { position: relative; }
.thumb-video {
  position: absolute; inset-inline-start: 5px; bottom: 5px;
  padding: 2px 7px; border-radius: var(--r-pill);
  background: rgba(8,9,11,.72); color: #fff;
  font-family: var(--display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}

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

.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 .18s var(--ease), transform .18s var(--ease);
}
.garage-tile:hover { border-color: var(--line); transform: translateY(-2px); }
.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; }
.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: 2px; padding: 10px 11px 12px; }
.garage-tile .name {
  font-family: var(--display); font-size: 15px; font-weight: 800;
  text-transform: uppercase; line-height: 1.15;
  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(--volt); font-variant-numeric: tabular-nums; margin-top: 2px;
}
.garage-tile .figs.warn { color: var(--blaze-text); }

/* ---------------------------- inline comments ------------------------------ */
.comments-panel { padding: 4px 14px 14px; border-top: 1px solid var(--line-soft); margin-top: 8px; }
.comments-panel .comment { margin-bottom: 10px; }
.comments-panel .comment-form { margin-top: 10px; }

/* Heart flashed by a double-tap on a photo. */
.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: var(--volt); }

/* ------------------------------ mobile menu ------------------------------- */
.menu-btn {
  display: none; width: 38px; height: 38px; 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: 12px; width: 100%;
  padding: 14px 18px; border: 0; background: transparent; cursor: pointer;
  font-size: 15.5px; color: var(--text); text-align: start; font-family: inherit;
}
.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: 6px;
  margin: 0 0 12px; padding-block: 8px; padding-inline: 11px 15px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--muted);
  font-family: var(--display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s 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: 10px; } }

/* ------------------------------ feed filter ------------------------------- */
/* One compact button and a drop-down. This replaced a nine-chip row that was
   wider than a phone screen, so options were permanently cut off. */
.filter-bar { display: flex; align-items: center; margin-bottom: 14px; }
.filter-menu { position: relative; }

.filter-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-family: var(--display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
  cursor: pointer; list-style: none;
  transition: border-color .16s var(--ease), background .16s 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 .18s var(--ease); }
[open] > .filter-btn svg:last-child { transform: rotate(180deg); }
/* An active filter is stated in the brand colour, so it is obvious that 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-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); inset-inline-start: 0;
  min-width: 232px; padding: 5px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); box-shadow: 0 14px 34px rgba(0,0,0,.34);
}
.filter-panel a {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
}
.filter-panel a:hover { background: var(--surface-2); }
.filter-panel a.on { color: var(--blaze-text); }
.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: 600; }
.filter-panel .clear:hover { color: var(--blaze-text); }
.filter-sep { height: 1px; margin: 5px 7px; background: var(--line-soft); }

/* The panel is anchored to the button, which sits at the page gutter, so on a
   narrow screen it is pinned to the viewport instead of overflowing it. */
@media (max-width: 420px) {
  .filter-panel { inset-inline-start: 0; inset-inline-end: auto; min-width: min(272px, calc(100vw - var(--page-gutter) * 2)); }
}

/* ---------------------------- discipline chips ---------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips button, .chips a {
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  font-family: var(--display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.chips button:hover, .chips a:hover { color: var(--text); border-color: var(--surface-3); }
.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: 10px; flex-wrap: wrap;
  margin: 0 0 12px;
}
.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: 12px; align-items: flex-start;
  padding: 14px 15px; border-bottom: 1px solid var(--line-soft);
  transition: background .16s var(--ease);
}
.thread:last-child { border-bottom: 0; }
.thread:hover { background: var(--surface-2); }

/* Upvote only. There is deliberately no public downvote. */
.thread .vote {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: none; width: 46px; padding: 6px 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--muted);
  cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 14px;
  font-variant-numeric: tabular-nums;
  transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s 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,.11); }

.thread-main { min-width: 0; flex: 1; display: block; }
.thread-kicker {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  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(--display); font-size: 18px; font-weight: 700; line-height: 1.2;
  margin: 0 0 5px; text-transform: uppercase;
}
.thread-preview {
  font-size: 13px; color: var(--muted); margin: 0 0 7px; 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: 11px;
  overflow: hidden; background: var(--surface-3);
}
.thread-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 480px) {
  .thread { padding: 12px; gap: 10px; }
  .thread .vote { width: 40px; }
  .thread-main h3 { font-size: 16px; }
  .thread-thumb { width: 62px; height: 52px; }
}

/* Discussion shown in the main feed. */
.discussion-post .discussion-body { display: block; padding: 2px 14px 12px; }
.discussion-post .discussion-body h2 {
  font-family: var(--display); font-size: 20px; font-weight: 700;
  text-transform: uppercase; margin: 0 0 7px; line-height: 1.18;
}
.discussion-post .discussion-body p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }
.discussion-full p { font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }

/* Nested replies. Indentation is 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: 11px;
}
@media (max-width: 480px) { .comment { margin-inline-start: calc(var(--depth, 0) * 13px); } }

/* ------------------------- news, rendered as a feed ------------------------ */
.news-post .news-caption { margin: 8px 0 0; }
.news-post .news-caption h2 {
  font-family: var(--display); font-size: 19px; font-weight: 800; line-height: 1.18;
  text-transform: uppercase; margin: 0 0 9px;
}
.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 a little more air between lines. */
.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: 13px 0 0; }
.news-source a {
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.news-source a:hover { color: var(--blaze-text); }

/* ---------------------------------- news ---------------------------------- */
.news-lead {
  display: block; margin-bottom: 12px; overflow: hidden;
  border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.news-lead:hover { border-color: var(--line); transform: translateY(-2px); }
.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: 18px 20px 20px; }
.news-lead h2 {
  font-family: var(--display); font-size: 25px; font-weight: 800; line-height: 1.08;
  margin: 6px 0 8px; text-transform: uppercase;
}

.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-card {
  display: flex; gap: 14px; align-items: stretch; padding: 12px;
  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(-2px); }
.news-card .shot {
  width: 104px; flex: none; border-radius: 11px; 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(--display); font-size: 17px; font-weight: 700; line-height: 1.15;
  margin: 4px 0 5px; text-transform: uppercase;
}

.news-card .kicker, .news-lead .kicker {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  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.6; margin: 0 0 18px; }
.news-body p { font-size: 16px; line-height: 1.75; margin: 0 0 15px; }

/* Arabic copy needs right alignment and a little 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: 15.5px; }
  .news-lead h2 { font-size: 21px; }
}

/* ------------------------ verification + ranking -------------------------- */
.verified {
  display: inline-flex; align-items: center; gap: 5px;
  padding-block: 4px; padding-inline: 8px 10px; border-radius: var(--r-pill);
  background: var(--volt); color: var(--on-volt);
  font-family: var(--display); font-size: 11.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; 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. Claimed entries look deliberately provisional. */
.rank {
  display: inline-flex; align-items: baseline; gap: 1px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted);
  font-family: var(--display); 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: 700; letter-spacing: .12em;
  text-transform: uppercase; opacity: .6; margin-inline-start: 6px;
}
.rank.is-verified { border-color: var(--volt); color: var(--volt); background: var(--volt-wash); }
.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(8,9,11,.72); backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,.14);
}

.verify-panel {
  margin: 0 20px 20px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2);
}
.verify-panel.ok { border-color: var(--volt); }
.verify-panel.ok .eyebrow { color: var(--volt); }
.verify-panel.bad { border-color: var(--blaze); }
.verify-panel.bad .eyebrow { color: var(--blaze); }
.verify-panel .dropzone { padding: 20px 16px; }

.verify-review {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 15px; margin-bottom: 12px; background: var(--surface-2);
}
.claim-figs { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 12px; }
.claim-figs span { display: flex; flex-direction: column; gap: 2px; }
.claim-figs em {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.claim-figs b {
  font-family: var(--display); font-size: 17px; font-weight: 800;
  color: var(--volt); font-variant-numeric: tabular-nums;
}
.review-note {
  width: 100%; padding: 10px 13px; margin: 4px 0 10px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-3); color: var(--text); outline: none;
}
.review-note:focus { border-color: var(--blaze); }

/* ------------------------------ leaderboard ------------------------------- */
.lb { display: flex; flex-direction: column; }
.lb-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  transition: background .16s var(--ease);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--surface-2); }
.lb-row .pos {
  width: 30px; flex: none; text-align: end;
  font-family: var(--display); font-size: 19px; font-weight: 800;
  color: var(--dim); font-variant-numeric: tabular-nums;
}
.lb-row.is-verified .pos { color: var(--volt); }
.lb-row .shot {
  width: 60px; height: 42px; flex: none; border-radius: 9px;
  object-fit: cover; background: var(--surface-3);
}
.lb-row .who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.lb-row .name {
  font-weight: 650; 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; }
.lb-row .figs b {
  font-family: var(--display); font-size: 19px; font-weight: 800;
  color: var(--volt); font-variant-numeric: tabular-nums; line-height: 1;
}
.lb-row .figs > span { font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  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. Listed so an owner can see their car is on the board
   and what it needs, but held back visually so they never read as a ranking. */
.lb-waiting .lb-row .pos-none { color: var(--line); font-weight: 700; }
.lb-waiting .lb-row .shot { opacity: .62; }
.lb-row .figs-missing b {
  font-family: var(--ui); font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em; 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: 48px; height: 36px; }
  .lb-row { gap: 9px; padding: 10px 11px; }
}

/* Segmented control used as links on the leaderboard. */
.seg a {
  padding: 9px 20px; border-radius: var(--r-pill);
  font-family: var(--display); font-size: 14px; font-weight: 700;
  color: var(--dim); text-transform: uppercase; letter-spacing: .05em;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.seg a.on { background: var(--blaze); color: #fff; }

/* --------------------------- sheets and modals ---------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4,5,7,.72); backdrop-filter: blur(6px);
  opacity: 0; animation: fade .22s var(--ease) forwards;
}
@keyframes fade { to { opacity: 1; } }

.sheet {
  position: fixed; z-index: 91; background: var(--surface);
  border: 1px solid var(--line); 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;
  animation: sheetIn .26s 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: 10px; padding: 15px 16px;
  border-bottom: 1px solid var(--line-soft); flex: none;
}
.sheet-head h3 { font-family: var(--display); font-size: 18px; font-weight: 800;
  text-transform: uppercase; 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);
}
.sheet-close:hover { color: var(--text); }
.sheet-search { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); flex: none; }
.sheet-search input {
  width: 100%; padding: 12px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text); outline: none;
}
.sheet-search input:focus { border-color: var(--blaze); }
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 14px; }

.opt {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; border: 0; background: transparent; cursor: pointer;
  text-align: start; font-size: 15px; color: var(--text);
}
.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: 10px; flex: none;
  background: var(--surface-3); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 14px; color: var(--muted);
}
.sheet-group {
  padding: 12px 16px 5px; font-family: var(--display); font-size: 12px;
  font-weight: 700; letter-spacing: .18em; color: var(--dim); text-transform: uppercase;
}

.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: 26px 22px 24px; }
.gate .mark { display: block; margin: 0 auto 16px; height: 26px; width: auto; }
.gate .mark.on-light { display: none; }
.gate h3 { font-family: var(--display); font-size: 23px; font-weight: 800;
  text-transform: uppercase; margin: 0 0 6px; }
.gate p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
.gate .btn { width: 100%; margin-bottom: 9px; }

/* -------------------------------- states --------------------------------- */
.empty { text-align: center; padding: 44px 22px; }
.empty h3 { font-family: var(--display); font-size: 20px; font-weight: 800;
  text-transform: uppercase; margin: 0 0 7px; }
.empty p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

/* Owner-only editor for the figures that decide ranking. Set apart from the
   car's own details so it reads as a control rather than more content. */
.figures-form {
  padding: 14px; 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: 2px; }

.notice { padding: 12px 15px; border-radius: var(--r-md); font-size: 13.5px;
  margin-bottom: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.notice.err { border-color: var(--blaze); color: var(--blaze-text); }
.notice.ok { border-color: var(--volt); color: var(--volt); }

.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: 28px 18px; text-align: center; cursor: pointer;
  color: var(--muted); font-size: 14px; background: var(--surface-2);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.dropzone:hover { border-color: var(--blaze); color: var(--text); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.thumbs figure { margin: 0; position: relative; }
.thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 12px; }
.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: 7px; margin-bottom: 7px; align-items: center; }
.mod-row select, .mod-row input {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--text); width: 100%; outline: none;
}
.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; } }

.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: 14px; font-weight: 700; color: var(--dim);
  text-transform: uppercase; letter-spacing: .05em;
  transition: background .18s var(--ease), color .18s 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: 10px;
  border: 2px solid transparent; transition: transform .16s var(--ease);
}
.swatches input:checked + i { border-color: var(--text); transform: scale(1.12); }

/* --------------------- phone and tablet bottom bar ------------------------ */
/* Two slots by decision, not five: the garage and the composer are the only
   destinations that earn a permanent place under the thumb. Everything else
   is reached from the header menu, which keeps both targets wide enough to
   hit rather than cramming five icons across a narrow screen. */
.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;
    background: var(--topbar-bg); backdrop-filter: blur(16px);
    border-top: 1px solid var(--line-soft);
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    align-items: center;
  }
  .tabbar a {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 44px; padding: 0 6px;
    border-radius: 14px; color: var(--dim);
    font-size: 12.5px; font-weight: 650;
    transition: color .16s var(--ease), background .16s var(--ease);
  }
  .tabbar a.active { color: var(--text); background: var(--surface-2); }
  .tabbar a.accent { color: var(--blaze); background: var(--surface-2); }
  .tabbar svg { width: 24px; height: 24px; flex: none; }
  .tabbar .avatar { width: 24px; height: 24px; flex: none; }

  /* The tab bar and the menu carry navigation on small screens; the top bar
     keeps only the brand and the account actions.

     This hides every destination link instead of naming them one by one. The
     old rule was an allowlist, so /news -- added after it was written -- stayed
     visible, widened the nav past the viewport and overlapped the wordmark.
     Stated as "hide links, keep buttons", a new destination can never leak
     into the top bar again. */
  /* Destinations are hidden on small screens in the header block further down,
     which is where .nav-links is defined. Doing it here as well would lose to
     that later rule and read as though it worked. */
  body:has(.tabbar) .nav > a[href^="/@"] { display: none; }
  body:has(.tabbar) { padding-bottom: 74px; }
  :root { --page-gutter: 10px; }
  .page { padding: 12px var(--page-gutter) 26px; }
  .card, .post { border-radius: var(--r-md); }
  .h1 { font-size: 26px; }
}
@media (max-width: 400px) {
  .rating-scale { gap: 3px; }
  .rating-scale button { height: 31px; font-size: 13px; border-radius: 9px; }
}

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

/* ------------------------------- language --------------------------------- */
/* A plain link, so switching works with no JavaScript. The server returns the
   visitor to the page they were on. */
.lang-toggle {
  padding: 7px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--muted);
  font-size: 12.5px; font-weight: 650; line-height: 1;
  display: inline-flex; align-items: center; min-height: 32px;
}
.lang-toggle:hover { color: var(--text); border-color: var(--surface-3); }
.nav-cta { margin-inline-start: 6px; }
.nav-avatar { padding: 4px 6px; display: inline-flex; }

/* Directional glyphs point the other way in Arabic. Everything else in the
   icon set is symmetric, so only these need flipping. */
[dir='rtl'] .backbar svg,
[dir='rtl'] .frame-nav svg { transform: scaleX(-1); }

/* ------------------------------- news desk -------------------------------- */
.compose-assets { margin: 0 0 16px; }
.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(10,11,13,.78); color: #fff;
}
.news-list { margin-top: 20px; border-top: 1px solid var(--line); }
.news-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.news-state {
  display: inline-block; border-radius: var(--r-pill);
  padding: 1px 8px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.news-state.is-visible   { background: rgba(52,199,89,.16); color: #46d06a; }
.news-state.is-scheduled { background: rgba(255,159,10,.16); 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 the [hidden] attribute, which is a
   quiet way to leave a field on screen that the markup says is off. Settling
   it once here rather than per component. */
[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(--surface-3); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 10px 18px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 8px 26px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s 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: 650;
}
.more-btn:hover { color: var(--text); }

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

/* ------------------------------ phase 3 ui -------------------------------- */
.garage-tile.add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 132px; border-radius: var(--r-md);
  border: 1.5px dashed var(--line); color: var(--dim);
  font-size: 12.5px; font-weight: 600;
}
.garage-tile.add:hover { border-color: var(--surface-3); color: var(--text); }
.garage-tile.add .plus { font-size: 26px; line-height: 1; font-weight: 400; }

.seg { display: flex; gap: 4px; margin: 0 0 12px; }
.seg a {
  flex: 1; text-align: center; padding: 9px 12px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line);
  color: var(--muted); font-size: 13.5px; font-weight: 650;
}
.seg a.on { background: var(--surface-3); color: var(--text); border-color: var(--surface-3); }

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

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

/* -------------------------------- events ---------------------------------- */
.event-row { display: flex; gap: 12px; padding: 11px 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: 12px; overflow-x: auto; padding: 4px 2px 12px;
  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: 6px;
  width: 68px; flex: none; color: var(--muted); font: inherit; font-size: 11.5px;
}
.story-item .ring {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); overflow: hidden;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--blaze);
}
/* A watched story keeps its place in the row but loses the accent ring. */
.story-item.seen .ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--line); }
.story-item .ring img { width: 100%; height: 100%; object-fit: cover; }
.story-item .ring .ph { font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--dim); }
.story-item.add .ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--line); }
.story-item .who { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray-note { margin: -6px 0 12px; font-size: 12px; text-align: center; }

.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,.28); 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: 12px; 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 --------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-block; padding: 6px 11px; border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 12.5px; font-weight: 650;
}
.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; }
  .rail .card-pad { padding: 0 0 12px; }
  .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: 10px;
  margin: 14px 0; color: var(--dim); font-size: 12px;
}
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ============================ header, revised =============================
 * The bar carried nav links, a language control, a call to action and an
 * avatar as one undifferentiated run, so the language toggle read as another
 * destination and the whole cluster crowded the right edge. It is now two
 * groups: where you can go, then what you can do.
 * ========================================================================= */
.topbar-inner { height: 60px; gap: 14px; }

/* Destinations sit together and take the free space, so the bar reads as
   brand / navigation / actions rather than one long right-aligned row. */
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }

/* A rule between the two groups, so the eye separates them without needing
   the extra whitespace a small screen cannot spare. */
@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); }
}

/* Where you are should be obvious at a glance. The old pill was almost the
   same value as the bar itself; this states it in the brand 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);
}

/* The language control is a utility, not a destination. */
.lang-toggle {
  gap: 6px; padding-inline: 9px 11px;
  color: var(--dim); border-color: transparent; background: var(--surface-2);
}
.lang-toggle svg { width: 15px; height: 15px; flex: none; }
.lang-toggle:hover { color: var(--text); background: var(--surface-3); border-color: transparent; }

/* The avatar was a bare circle with no affordance. A ring makes it a control. */
.nav-avatar {
  padding: 0; border-radius: 50%; line-height: 0;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .18s var(--ease);
}
.nav-avatar:hover { box-shadow: 0 0 0 2px var(--blaze); }
.nav-avatar .avatar { width: 30px; height: 30px; }

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

  /* Destinations live in the menu on a small screen. Hiding the container
     rather than matching individual links means a new destination can never
     leak into the bar, which is how /news once escaped an allowlist. */
  .nav-links { display: none; }

  /* "Post a car" already occupies half the bottom bar. Carrying it in the
     header as well spent the width twice and left the bar crowded.
     Written as `.nav .nav-cta` so it outranks `.nav .btn`. */
  .nav .nav-cta { display: none; }

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

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

  /* Anything tappable clears the 44px target the spec asks for. */
  .menu-btn { width: 44px; height: 44px; }
  .nav-actions .btn { min-height: 40px; }
}

/* Reading is what the screen is for. The bar steps out of the way going down
   the page and comes back the moment you scroll up, so it is never more than
   a flick away. Desktop keeps it pinned, where there is room for both. */
@media (max-width: 1024px) {
  .topbar { transition: transform .22s var(--ease); }
  body.nav-hidden .topbar { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: none; }
  body.nav-hidden .topbar { transform: none; }
}

/* Three slots fit comfortably on most phones. On the narrowest, the labels are
   dropped rather than truncated: a clipped word is worse than a clear icon. */
@media (max-width: 380px) {
  .tabbar a span { display: none; }
  .tabbar a { gap: 0; }
}

/* The raised composer button: filled 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 14px rgba(255,69,0,.35), 0 0 0 4px var(--bg);
}
.tabbar .plus svg { width: 26px; height: 26px; }
/* Active tab: accent colour, with a soft fill standing in for a filled variant. */
.tabbar a.active { color: var(--blaze); background: none; }
.tabbar a.active svg { fill: currentColor; fill-opacity: .18; }

/* The profile dropdown, desktop only (the actions group hides on mobile). */
.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: 190px; padding: 6px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.pmenu-list a, .pmenu-list button {
  text-align: start; padding: 10px 12px; border-radius: var(--r-sm);
  border: 0; background: none; color: var(--text); font: inherit;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.pmenu-list a:hover, .pmenu-list button:hover { background: var(--surface-2); }
.pmenu-list .danger { color: #ff6b5a; }

/* Mobile header carries the logo and the menu only. */
@media (max-width: 1024px) { .nav-actions { display: none; } }