/* Multitap Global Leaderboard — mobile-first dark timing-screen design system.
   One dark surface family, tabular numerals on every time, one restrained
   accent for interaction/emphasis, gold/silver/bronze reserved for ranks.
   System font stack only — no external fonts/assets. Breakpoints: base (mobile),
   640px (tablet), 960px (two-column home). prefers-reduced-motion respected. */

/* ---------------------------------------------------------------- reset + tokens */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
:root {
  --bg: #0b0d10; --panel: #14181d; --panel2: #1b2027; --line: #262d36;
  --line2: #333c47;
  --text: #f2f5f8; --sub: #93a0ad; --prose: #cbd3db;
  --accent: #e8542f; --accent-soft: rgba(232, 84, 47, .16);
  --gold: #d4a017; --silver: #9aa3ad; --bronze: #a05a2c; --green: #2fbf5f;
  --blue: #4a9be0; --amber: #e0b23a; --orange: #e0822f; --red: #e5484d;
  --radius: 12px;
  --topbar-h: 52px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .38);
}
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  /* belt, not the fix: the topbar/nav overflow below is the actual cause of
     the mobile right-edge clipping and is fixed at the source (nav scrolls
     internally instead of forcing the page wider). This just stops any other
     stray wide element from ever being able to force a page-level horizontal
     scrollbar again. */
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* every rendered lap time / counter is tabular */
.time, .gap, .stat .n, .laphero .bigtime, .sector, .secbar b,
.board-card .r, .board-card .rec, .kv .num, .num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- topbar */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: stretch; justify-content: space-between; gap: 10px;
  min-height: var(--topbar-h); padding: 0 14px;
  background: rgba(11, 13, 16, .72);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .topbar { background: #0e1116; }
}
.brand {
  display: flex; align-items: center; flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 800; font-size: 11.5px; letter-spacing: .09em; color: var(--sub);
}
.brand-tap { color: var(--accent); margin-right: .35em; }
/* ≤479px: drop the " GLOBAL LEADERBOARD" tail so the wordmark alone (which
   already ellipsis-shrinks via .brand) doesn't have to fight nav for space. */
.brand-full { display: none; }
@media (min-width: 480px) { .brand-full { display: inline; } }
/* nav must never be the reason the page grows wider than the viewport: it's
   allowed to shrink (min-width:0) and, once its 4 links no longer fit even
   fully squeezed against a shrunk .brand, it scrolls internally instead of
   pushing the topbar (and body) wider. Same overflow-x idiom as .chips. */
.topbar nav {
  display: flex; align-items: stretch; flex: 0 1 auto; min-width: 0; gap: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  display: flex; align-items: center; flex: 0 0 auto; padding: 0 9px;
  color: var(--sub); font-weight: 700; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 8px;
}
.topbar nav a:hover { color: var(--text); }
.topbar nav a:active { background: var(--panel2); }
@media (min-width: 640px) {
  .topbar { padding: 0 22px; gap: 18px; }
  .brand { font-size: 13px; letter-spacing: .11em; }
  .topbar nav { gap: 4px; }
  .topbar nav a { font-size: 12px; padding: 0 13px; }
}

/* ---------------------------------------------------------------- shell + headings */
#app { flex: 1 0 auto; width: 100%; max-width: 960px; margin: 0 auto; padding: 18px 14px 40px; }
h1 { font-size: 22px; line-height: 1.14; letter-spacing: -.01em; font-weight: 800; margin: 2px 0 6px; }
h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sub); font-weight: 700; margin: 26px 0 12px;
}
h3 { font-size: 16px; font-weight: 700; margin: 18px 0 8px; }
.subtitle { color: var(--sub); font-size: 13px; margin: 0 0 14px; }
@media (min-width: 640px) {
  #app { padding: 24px 22px 60px; }
  h1 { font-size: 26px; }
}

/* ---------------------------------------------------------------- hero */
.hero { padding: 6px 0 2px; }
.hero h1 { font-size: 27px; max-width: 17ch; }
.pitch { color: var(--sub); font-size: 15px; line-height: 1.5; max-width: 48ch; margin: 8px 0 18px; }
@media (min-width: 640px) { .hero h1 { font-size: 36px; } .pitch { font-size: 16px; } }
@media (min-width: 960px) { .hero h1 { font-size: 42px; } }

/* ---------------------------------------------------------------- stat tiles */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px;
}
.stat .n { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; }
.stat .l {
  display: block; color: var(--sub); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; margin-top: 3px;
}
@media (min-width: 640px) {
  .stats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .stat { padding: 15px 16px; }
  .stat .n { font-size: 30px; }
  /* venue page has 3 tiles (Laps/Drivers/Records), not the home page's 4 */
  .stats.stats-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------- search */
.search-wrap { position: relative; margin: 4px 0 6px; }
.search-wrap input {
  width: 100%; height: 50px; padding: 0 16px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font-size: 16px; font-weight: 500; /* 16px avoids iOS focus-zoom */
  -webkit-appearance: none; appearance: none;
}
.search-wrap input::placeholder { color: var(--sub); }
.search-wrap input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 25;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden auto; max-height: min(62vh, 460px);
}
.search-results[hidden] { display: none; }
.sr-group { border-top: 1px solid var(--line); }
.sr-group:first-child { border-top: 0; }
.sr-head {
  padding: 11px 14px 5px; color: var(--sub); font-weight: 700;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.sr-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 8px 14px;
}
.sr-row:hover, .sr-row:focus { background: var(--panel); outline: none; }
.sr-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-kind { flex: 0 0 auto; color: var(--sub); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.sr-empty { padding: 16px 14px; color: var(--sub); font-size: 14px; }

/* ---------------------------------------------------------------- home two-column */
/* minmax(0,...) floors keep a child's min-content (esp. the nested record grid)
   from propping the track open past a narrow viewport. */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 26px; }
.home-feed, .home-side { min-width: 0; }
@media (min-width: 960px) {
  .home-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
}

/* ---------------------------------------------------------------- cards + row lists */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.rowlist .row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.rowlist .row:last-child { border-bottom: 0; }
.rowlist a.row { transition: background .12s ease; }
.rowlist a.row:hover { background: var(--panel2); }
.rowlist .row:active { background: var(--panel2); }
.rank {
  flex: 0 0 auto; min-width: 24px; text-align: center;
  color: var(--sub); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
}
.rank.p1 { color: var(--gold); }
.rank.p2 { color: var(--silver); }
.rank.p3 { color: var(--bronze); }
.who { flex: 1 1 auto; min-width: 0; }
.who br { display: none; }
.who .name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who .meta {
  display: block; color: var(--sub); font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
}
.time { flex: 0 0 auto; font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.gap { flex: 0 0 auto; color: var(--sub); font-size: 12px; min-width: 58px; text-align: right; }
.date { display: none; flex: 0 0 auto; color: var(--sub); font-size: 12px; min-width: 78px; text-align: right; }
@media (min-width: 640px) { .date { display: block; } }

/* feed enter animation (subtle; disabled for reduced motion) */
@keyframes rowin { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
#feed .row { animation: rowin .26s ease both; }

/* ---------------------------------------------------------------- activity feed: typed events (P2.5 T11) */
/* left border = color cue per event type; scoped under .rowlist so it beats
   .rowlist .row's `padding: 11px 14px` shorthand at equal specificity (this
   rule comes later in the cascade) rather than losing to it. The global
   box-sizing:border-box reset means the 3px border doesn't change the row's
   outer box, so no other row metric needs to move. */
.rowlist .event-row { border-left: 3px solid transparent; padding-left: 11px; }
.event-row.ev-record_set,
.event-row.ev-venue_joined      { border-left-color: var(--accent); }
.event-row.ev-podium_entry      { border-left-color: var(--gold); }
.event-row.ev-first_global_lap  { border-left-color: var(--green); }
.event-row.ev-venue_first_track { border-left-color: var(--blue); }
.event-text { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.4; color: var(--text); }
.event-text b { font-weight: 700; }
/* record_set rows only: a role="button" SPAN, not a real <button> — a real
   interactive element can't nest inside the row's own <a>. app.js stops
   propagation on activation so it can never fall through to the row's link. */
.event-share {
  flex: 0 0 auto; display: inline-flex; align-items: center; cursor: pointer;
  min-height: 26px; padding: 0 10px; margin-left: 2px; border-radius: 999px;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--sub);
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.event-share:hover, .event-share:focus-visible { color: var(--text); border-color: var(--accent); }

/* ---------------------------------------------------------------- board / record cards */
/* min(100%,240px) lets a card shrink below 240 on very narrow parents instead of
   forcing a 240px track (which would overflow a phone or the record sidebar). */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.board-card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
.board-card:hover { border-color: var(--line2); }
.board-card:active { background: var(--panel2); }
.board-card .c { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.board-card .t { font-weight: 700; font-size: 15px; margin-top: 3px; }
.board-card .r { color: var(--sub); font-size: 12px; margin-top: 6px; }
.board-card .rec { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.board-card .rec .time { font-size: 19px; }
.board-card .rec .by { min-width: 0; color: var(--sub); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) and (min-width: 960px) {
  .board-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* ---------------------------------------------------------------- period tabs (sticky under topbar) */
.tabs {
  display: flex; gap: 8px; margin: 12px 0 14px;
  position: sticky; top: var(--topbar-h); z-index: 15;
  background: var(--bg); padding: 8px 0;
}
.tabs button {
  flex: 1; min-height: 44px; padding: 0 6px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--sub);
  font-weight: 700; font-size: 13px; transition: background .12s, color .12s, border-color .12s;
}
.tabs button:hover { color: var(--text); }
.tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------------------------------------------------------------- chips (scroll row on mobile) */
.chips {
  display: flex; gap: 8px; margin: 12px 0; overflow-x: auto; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 36px;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--sub); font-size: 12px; font-weight: 700;
  white-space: nowrap; transition: color .12s, border-color .12s;
}
.chip:hover { color: var(--text); }
.chip.on { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- lap hero + sectors */
.laphero { text-align: center; padding: 30px 16px 26px; }
.laphero .bigtime { font-size: 46px; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.laphero .class-chip {
  display: inline-block; margin-top: 10px; color: var(--accent); font-weight: 800;
  letter-spacing: .1em; font-size: 12px; text-transform: uppercase;
}
.sectors { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 18px 0 2px; }
.sector {
  min-width: 84px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 700;
}
.sector .lbl { display: block; color: var(--sub); font-size: 10px; letter-spacing: .12em; margin-bottom: 2px; }
/* proportional sector bars primitive (S1/S2/S3 color-coded top borders) */
.secbar { display: flex; align-items: stretch; gap: 4px; height: 36px; margin: 12px 0; }
.secbar b {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  min-width: 0; font-size: 12px; font-weight: 700;
  background: var(--panel2); border-radius: 6px; border-top: 3px solid var(--line);
}
.secbar .s1 { border-top-color: #e0b23a; }
.secbar .s2 { border-top-color: #4a9be0; }
.secbar .s3 { border-top-color: #7bd88f; }

/* ---------------------------------------------------------------- kv cards */
.kv { padding: 2px 14px 6px; }
.kv div {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 46px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.kv div:last-child { border-bottom: 0; }
.kv .k { flex: 0 0 auto; color: var(--sub); }
.kv a { color: var(--text); font-weight: 700; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.kv b { font-weight: 700; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: block; width: 100%; margin-top: 16px; min-height: 50px; padding: 14px;
  border-radius: var(--radius); background: var(--accent); border: 1px solid var(--accent);
  color: #fff; font-weight: 800; font-size: 15px; text-align: center; transition: filter .12s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(.94); }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line2); }
.btn.ghost:hover { filter: none; background: var(--panel); border-color: var(--sub); }

/* ---------------------------------------------------------------- live dot */
.live-dot {
  display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 191, 95, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(47, 191, 95, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 191, 95, 0); }
}

/* ---------------------------------------------------------------- venue directory group heads */
.country-head {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 10px;
  color: var(--sub); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
}
.country-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.venue-card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  transition: border-color .14s ease, background .14s ease;
}
.venue-card:hover { border-color: var(--line2); }
.venue-card:active { background: var(--panel2); }
.venue-card .t { font-weight: 700; font-size: 15px; }
.venue-card .loc { color: var(--sub); font-size: 12px; margin-top: 3px; }
.venue-card .cnt { color: var(--sub); font-size: 12px; margin-top: 8px; }

/* ---------------------------------------------------------------- driver profile: favorites cards */
.fav-grid { display: grid; gap: 10px; margin: 4px 0 16px; }
@media (min-width: 640px) { .fav-grid { grid-template-columns: 1fr 1fr; } }
.fav-card {
  display: block; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  transition: border-color .14s ease, background .14s ease;
}
a.fav-card:hover { border-color: var(--line2); }
a.fav-card:active { background: var(--panel2); }
.fav-card .fav-l {
  color: var(--sub); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 700;
}
.fav-card .fav-n { font-weight: 700; font-size: 15px; margin-top: 4px; }
.fav-card .fav-s { color: var(--sub); font-size: 12px; margin-top: 6px; }
.fav-card .fav-empty { color: var(--sub); font-size: 13px; margin-top: 4px; }

/* ---------------------------------------------------------------- prose (/standard, /join) */
.prose { max-width: 64ch; }
.prose h2 { display: block; text-transform: none; letter-spacing: -.01em; color: var(--text); font-size: 21px; margin: 28px 0 10px; }
.prose h3 { font-size: 16px; margin: 22px 0 6px; }
.prose p { color: var(--prose); margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; }
.prose li { color: var(--prose); margin: 6px 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--text); }
.prose table {
  width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.prose th { color: var(--sub); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.prose tbody tr:last-child td { border-bottom: 0; }
/* /join: shared vs never-shared two-column list, stacked on mobile */
.prose-cols { display: grid; gap: 4px 24px; }
@media (min-width: 640px) { .prose-cols { grid-template-columns: 1fr 1fr; } }
/* /join: SaaS-venue vs everyone-else CTA cards, stacked on mobile */
.cta-grid { display: grid; gap: 12px; margin: 14px 0 22px; }
@media (min-width: 640px) { .cta-grid { grid-template-columns: 1fr 1fr; } }
.cta-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.cta-card h3 { margin-top: 0; color: var(--text); }
.cta-card p { color: var(--prose); margin-bottom: 0; }

/* ---------------------------------------------------------------- footer */
.foot {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: center;
  text-align: center; color: var(--sub); font-size: 12px;
  padding: 24px 16px; border-top: 1px solid var(--line); margin-top: 24px;
}
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.foot-links a { color: var(--sub); }
.foot-links a:hover { color: var(--text); }
@media (min-width: 640px) { .foot { flex-direction: row; justify-content: space-between; text-align: left; } }

/* ---------------------------------------------------------------- loading / empty / skeleton */
.loading, .empty { color: var(--sub); padding: 40px 16px; text-align: center; font-size: 14px; }
.skel { position: relative; overflow: hidden; background: var(--panel); }
.skel::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .06), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skel-tile { height: 64px; border: 1px solid var(--line); border-radius: var(--radius); }
.skel-card { height: 98px; border: 1px solid var(--line); border-radius: var(--radius); }
.skel-row { height: 56px; border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------- board header + actions */
.board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.board-head-main { min-width: 0; }
.board-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-top: 3px; }
.unit-toggle, .filters-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 13px;
  border: 1px solid var(--line2); border-radius: 999px; background: var(--panel);
  color: var(--text); font-weight: 700; font-size: 12px; white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.unit-toggle { letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.unit-toggle:hover, .filters-btn:hover { border-color: var(--sub); }
.unit-toggle:active, .filters-btn:active { background: var(--panel2); }
.filters-btn svg { display: block; }
.filters-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}

/* ---------------------------------------------------------------- active filter chips */
.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 2px; }
.active-chips:empty { display: none; }
.chip.removable {
  cursor: pointer; border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.chip.removable:hover { filter: brightness(1.12); }
.chip.removable .x { margin-left: 7px; font-size: 15px; line-height: 1; }
.chip.clear-all { cursor: pointer; color: var(--sub); border-color: var(--line2); background: transparent; }
.chip.clear-all:hover { color: var(--text); border-color: var(--sub); }

/* ---------------------------------------------------------------- driver filter (board) */
.board-search { margin: 12px 0 4px; }
.board-search input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  font-size: 16px; font-weight: 500; /* 16px avoids iOS focus-zoom */
  -webkit-appearance: none; appearance: none;
}
.board-search input::placeholder { color: var(--sub); }
.board-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.board-search-meta { color: var(--sub); font-size: 12px; margin: 9px 2px 0; }
.board-search-meta[hidden] { display: none; }

/* ---------------------------------------------------------------- board row: tyre + speed */
.tyre-badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; max-width: 92px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-height: 20px; padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--line2); background: var(--panel2); color: var(--sub);
  font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
/* right-aligned speed cell; hidden on the narrowest phones (brief: <480px) */
.speed {
  display: none; flex: 0 0 auto; min-width: 62px; text-align: right;
  color: var(--sub); font-size: 12px; font-variant-numeric: tabular-nums;
}
@media (min-width: 480px) { .speed { display: block; } }

/* ---------------------------------------------------------------- driver profile: history filters */
.hist-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.hist-filters select {
  flex: 1 1 140px; min-width: 120px; height: 40px; padding: 0 30px 0 12px;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  color: var(--text); font-size: 13px; font-weight: 600;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2393a0ad' fill='none' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.hist-filters select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hist-filters .unit-toggle { flex: 0 0 auto; }
.hist-date { flex: 0 0 auto; color: var(--sub); font-size: 12px; min-width: 70px; }
@media (min-width: 480px) { .hist-date { min-width: 84px; } }

/* ---------------------------------------------------------------- overlay sheet (filters / share) */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: flex-end; justify-content: center;              /* mobile: bottom */
  background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .22s ease;
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  width: 100%; max-height: 86vh; overflow-y: auto;
  background: var(--panel2); border-top: 1px solid var(--line2);
  border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
  padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.sheet-backdrop.open .sheet { transform: none; }
.sheet::before {   /* grab handle (mobile bottom sheet only) */
  content: ""; display: block; width: 36px; height: 4px; margin: 4px auto 8px;
  border-radius: 999px; background: var(--line2);
}
@media (max-width: 640px) { body.has-sheet { overflow: hidden; } }
@media (min-width: 641px) {   /* tablet/desktop: right-side panel */
  .sheet-backdrop { align-items: stretch; justify-content: flex-end; }
  .sheet {
    width: 380px; max-width: 92vw; height: 100%; max-height: none;
    border-radius: 0; border-top: 0; border-left: 1px solid var(--line2);
    padding: 10px 20px 24px; transform: translateX(100%);
  }
  .sheet::before { display: none; }
}
.sheet-head {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 8px 0 10px;
  background: var(--panel2); border-bottom: 1px solid var(--line);
}
.sheet-head h3 { font-size: 17px; font-weight: 800; margin: 0; }
.sheet-close {
  flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 8px;
  background: transparent; color: var(--sub); font-size: 26px; line-height: 1;
}
.sheet-close:hover { color: var(--text); background: var(--panel); }
.sheet-group { margin: 4px 0 8px; }
.sheet-group-title {
  color: var(--sub); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; margin: 14px 0 8px;
}
.sheet-opts { display: flex; flex-direction: column; gap: 6px; }
.sheet-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 46px; padding: 10px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  color: var(--text); font-weight: 600; font-size: 14px;
  transition: border-color .12s, color .12s;
}
.sheet-opt:hover { border-color: var(--line2); }
.sheet-opt.on { border-color: var(--accent); color: var(--accent); }
.sheet-opt .tick { flex: 0 0 auto; color: var(--accent); font-weight: 800; }

/* ---------------------------------------------------------------- share sheet (format picker + actions) */
.share-formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 18px; }
.share-fmt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0; border: 0; background: none; color: var(--sub);
}
.share-fmt img {
  display: block; width: 100%; height: 96px; object-fit: cover;
  border-radius: 10px; border: 2px solid var(--line); background: var(--panel);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.share-fmt span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.share-fmt.on img { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.share-fmt.on span { color: var(--accent); }
.share-download {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin-top: 6px;
  color: var(--sub); font-weight: 700; font-size: 13px; border-radius: 10px;
  transition: color .12s ease, background .12s ease;
}
.share-download:hover { color: var(--text); background: var(--panel); }
.btn:disabled { opacity: .55; }

/* ---------------------------------------------------------------- toast */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 90;
  max-width: min(92vw, 360px); transform: translate(-50%, 10px);
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 10px;
  padding: 12px 18px; color: var(--text); font-size: 13px; font-weight: 700;
  text-align: center; box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 641px) { .toast { bottom: 28px; } }

/* ---------------------------------------------------------------- rankings (/rankings) */
.explainer {
  margin: 4px 0 18px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2px 16px;
}
.explainer summary { cursor: pointer; padding: 14px 4px; font-weight: 700; font-size: 14px; }
.explainer summary:hover { color: var(--accent); }
.explainer .prose { padding: 2px 4px 16px; max-width: none; }
.explainer .prose > :last-child { margin-bottom: 0; }

/* rank column widened vs the shared .rank (board rows) to fit a 3-digit rank
   plus the P1 trophy emoji without the flex item growing row-to-row. */
.rank-list .rank { flex: 0 0 40px; min-width: 40px; }
.rank-score { flex: 0 0 auto; min-width: 40px; text-align: right; font-weight: 800; font-size: 15px; }
.rank-sub {
  display: none; flex: 0 0 auto; min-width: 34px; text-align: right;
  color: var(--sub); font-size: 12px;
}
@media (min-width: 640px) { .rank-sub { display: block; } }
.rank-head {
  display: none; align-items: center; gap: 12px; padding: 0 14px 8px;
  color: var(--sub); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.rank-head .who { flex: 1 1 auto; min-width: 0; }
@media (min-width: 640px) { .rank-head { display: flex; } }

/* activity badge: colored dot + label, one CSS class per server-whitelisted
   bucket (never a raw string interpolated into style/class) */
.activity-badge {
  flex: 0 0 92px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
}
.activity-badge .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.act-active { color: var(--green); } .act-active .dot { background: var(--green); }
.act-recent { color: var(--amber); } .act-recent .dot { background: var(--amber); }
.act-inactive { color: var(--orange); } .act-inactive .dot { background: var(--orange); }
.act-dormant { color: var(--red); } .act-dormant .dot { background: var(--red); }
.act-unknown { color: var(--sub); } .act-unknown .dot { background: var(--sub); }

/* ---------------------------------------------------------------- venue logos (P3 T3) */
.vlogo { width: 44px; height: 44px; object-fit: contain; border-radius: 8px;
         background: rgba(255,255,255,.04); flex: 0 0 auto; }
.venue-card.has-logo { display: flex; align-items: flex-start; gap: 12px; }
.venue-card-body { min-width: 0; flex: 1 1 auto; }
h1 .vlogo { width: 56px; height: 56px; border-radius: 10px; vertical-align: middle; margin-right: 10px; }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #feed .row { animation: none; }
  .live-dot { animation: none; }
  .skel::after { animation: none; }
  .board-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- /join application form (P4 T6) */
.join-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; text-align: left; }
.join-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; opacity: .9; }
.join-form input[type="text"], .join-form input:not([type]), .join-form input[type="email"] {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 10px; color: var(--text); font: inherit; }
.jf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.jf-sims { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 13px; }
.jf-sims label { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; }
.jf-msg { min-height: 1.2em; font-size: 13px; opacity: .9; }