/* MotoRev web. Dark only. House palette. Inter. Flat hairlines, yellow as a tint. */
/* Following: one flat hairline row above the feed when followed riders have posted since
   the page loaded. Nothing inserts itself; the row loads the new posts on click. */
.new-posts { display: block; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--yellow-line); background: none; color: var(--yellow); font: inherit; font-size: 15px; font-weight: 600; text-align: center; cursor: pointer; }
.new-posts:hover { color: var(--t1); }
.new-posts:disabled { color: var(--t3-text); cursor: default; }
.new-posts + .posts { border-top: 0; }
/* Settings: muted and blocked rider rows, hairline divided, with a quiet button at the end. */
.riders-manage .rider { display: flex; align-items: center; gap: 12px; }
.riders-manage .rider-link { flex: 1; min-width: 0; align-items: center; }
.riders-manage .act { margin: 0; }
.riders-manage .btn { min-height: 36px; padding: 0 12px; font-size: 14px; }
:root {
  color-scheme: dark;
  --asphalt: #0C1014;
  --carbon: #12161F;
  --slate: #1E2430;
  --yellow: #F5B800;
  --green: #19C58F;
  --red: #F04452;
  --t1: #F4F6F8;
  --t2: #A8B0BD;
  --t3: #5F6B7A;
  /* Tertiary for text: #5F6B7A is 3.3:1 on Carbon, below WCAG AA for body
     sizes. --t3 stays for hairline hovers and icons; text uses this. */
  --t3-text: #858F9E;
  /* Field edges: 3.9:1 on Carbon, 3.4:1 on Slate (WCAG 1.4.11). The --hair line is
     1.2:1 and left text fields invisible; every field edge uses this instead. */
  --field-line: #6B7686;
  --hair: rgba(255, 255, 255, 0.08);
  --yellow-bg: rgba(245, 184, 0, 0.12);
  --yellow-line: rgba(245, 184, 0, 0.7);
  --wrap: 1120px;
  --gutter: 24px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--asphalt); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--asphalt); color: var(--t1);
  font: 400 17px/1.55 var(--font); font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--t1); }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: 44px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
small { font-size: 14px; }
time { white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--carbon); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }

/* type helpers */
.overline {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3-text);
}
.overline-yellow, .overline-yellow a { color: var(--yellow); }
.lede { font-size: 20px; line-height: 1.45; color: var(--t2); max-width: 46em; }
.muted { color: var(--t3-text); }
.empty { color: var(--t3-text); padding: 48px 0; text-align: center; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.empty-rich { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 16px; }
.empty-rich p { max-width: 44ch; color: var(--t2); line-height: 1.5; }
.empty-title { color: var(--t1); font-size: 19px; font-weight: 600; }
.actions-center { justify-content: center; margin-top: 8px; }
.empty-rich .actions { margin-top: 8px; }
.dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: currentColor; vertical-align: middle; margin: 0 2px; opacity: 0.7; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 8px; border: 1px solid var(--hair); background: var(--slate); color: var(--t1);
  font-weight: 600; font-size: 15px; white-space: nowrap;
}
.btn:hover { border-color: var(--t3-text); }
.btn-on-quiet { background: none; color: var(--t2); }
.btn-tint { background: var(--yellow-bg); border-color: var(--yellow-line); color: var(--yellow); }
.btn-tint:hover { background: rgba(245, 184, 0, 0.18); color: var(--yellow); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.chip, .chips a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--slate); color: var(--t2); font-size: 14px; font-weight: 500;
}
.chip:hover, .chips a:hover { border-color: var(--t3-text); color: var(--t1); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; overflow: visible; max-height: none; }
.page-head .chips { margin-bottom: 8px; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head-row h1 { margin-bottom: 0; }
.page-head-row form { padding-bottom: 4px; }
.badge {
  display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; border: 1px solid var(--slate); color: var(--t2);
}
.badge-pro { border-color: var(--yellow-line); background: var(--yellow-bg); color: var(--yellow); }
.rbadge { display: inline-block; vertical-align: -2px; margin-left: 4px; flex: none; }
.handle { display: inline-flex; flex-direction: row; align-items: center; gap: 2px; font-weight: 600; white-space: nowrap; }
.handle .badge { margin-left: 6px; }
.handle-h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.handle-h1 .rbadge { width: 22px; height: 22px; margin-left: 2px; }
.handle-h1 .badge { font-size: 12px; }
.handle-h1 .pro-mark { margin-left: 4px; position: relative; top: 1px; }
.display-name { margin-top: 4px; font-size: 18px; color: var(--t2); }

/* app screens: the mark, the screen title, the segmented selector */
.screen { padding-top: 24px; }
.screen-tight { padding-bottom: 0; }
.screen-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.screen-head h1 { font-size: 28px; letter-spacing: -0.025em; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 20px; }
.seg::-webkit-scrollbar { display: none; }
.seg a { flex: none; min-height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 5px; color: var(--t2); font-size: 14px; font-weight: 600; white-space: nowrap; }
.seg a:hover { color: var(--t1); }
.seg a[aria-current] { background: var(--yellow-bg); color: var(--yellow); outline: 1px solid var(--yellow-line); outline-offset: -1px; }
.screen .chips-interest { margin: 0 0 12px; }
.screen .chips-makes { margin: 0 0 20px; }
.screen .search-big { margin: 0 0 16px; max-width: none; }
.screen .search-big input { font-size: 16px; padding: 10px 14px; }
.screen .split { margin-top: 8px; }
.screen .rows { margin-bottom: 8px; }
.screen .section-head { margin-top: 20px; }

/* mobile bottom tab bar and the app strip; both hidden on desktop */
.tabbar { display: none; }
.app-strip { display: none; }
[hidden] { display: none !important; }
.app-strip[hidden] { display: none; }

/* header */
.top { border-bottom: 1px solid var(--hair); position: sticky; top: 0; background: var(--asphalt); z-index: 5; }
.top-row { display: flex; align-items: center; gap: 28px; min-height: 64px; }
/* The section lockup: bike mark, MotoRev in bold, the section in regular. */
/* A fixed width fits the longest section word, so the tabs never move between sections. */
.lockup { display: inline-flex; align-items: center; gap: 9px; flex: none; min-width: 204px; color: var(--t1); font-size: 19px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.lockup img { width: auto; height: 20px; display: block; }
/* The mark and the word go home; the section word only says where you are. */
.lockup-home { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.lockup-home b { font-weight: 800; }
.lockup-word { font-weight: 400; letter-spacing: -0.01em; color: var(--t1); margin-left: -4px; }
/* Section tabs run the full header height; the current one carries a yellow bar on the header hairline. */
.nav { display: flex; align-items: stretch; align-self: stretch; gap: 2px; flex: 1; }
.nav a { position: relative; display: inline-flex; align-items: center; padding: 0 14px; color: var(--t2); font-weight: 500; font-size: 15px; }
.nav a:hover { color: var(--t1); }
.nav a[aria-current] { color: var(--t1); font-weight: 600; }
.nav a[aria-current]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--yellow); }
.top-cta { min-height: 38px; }
.back { display: none; }

/* sections */
.section { padding-top: 28px; padding-bottom: 8px; }
.section-tight { padding-top: 20px; padding-bottom: 8px; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0 0 16px; margin-bottom: 24px; border-bottom: 1px solid var(--hair);
}
.section-head a, .section-head span { color: var(--t3-text); font-size: 14px; font-weight: 500; }
.section-head a:hover { color: var(--yellow); }
.page-head { padding-top: 32px; padding-bottom: 8px; }
.page-head h1 { margin: 8px 0 12px; }
.hero-small { padding-top: 96px; padding-bottom: 48px; }
.hero-small h1 { margin: 12px 0 16px; }
.tabs { display: flex; gap: 2px; overflow-x: auto; margin-top: 28px; border-bottom: 1px solid var(--hair); scrollbar-width: none; }
.tabs a { padding: 12px 14px; color: var(--t2); font-weight: 500; font-size: 15px; white-space: nowrap; margin-bottom: -1px; }
.tabs a[aria-current] { color: var(--t1); border-bottom: 2px solid var(--yellow); }
.grid { display: grid; gap: 24px 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-tight { gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.rail .section-head { margin-top: 0; }
.rail > .section-head:not(:first-child) { margin-top: 28px; }

/* feature */
.feature { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 8px; }
.feature-media img, .card-media img, .row-thumb img, .card-blank { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; background: var(--carbon); }
.feature-media { aspect-ratio: 8 / 5; display: block; }
.feature-title { font-size: 38px; margin: 12px 0 14px; }
.feature-title a:hover { color: var(--t2); }
.card-blank { position: relative; display: block; border: 1px solid var(--hair); aspect-ratio: 8 / 5; }
.card-blank-route { background: var(--carbon); }
.card-blank:empty::after, .card-blank-route::after, .pcard-blank:empty::after { content: ""; position: absolute; inset: 0; background: url(/static/mark.png) center / auto 28% no-repeat; opacity: 0.2; }

/* cards */
.card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-body { display: flex; flex-direction: column; flex: 1; }
.card-body .byline { margin-top: auto; padding-top: 10px; }
.card-title { min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .card-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-media { display: block; aspect-ratio: 8 / 5; }
.card-media-tall { aspect-ratio: 4 / 3; }
.card-title { margin: 6px 0 6px; line-height: 1.2; }
.card-title a:hover { color: var(--t2); }
.card-sub { color: var(--t2); font-size: 15px; line-height: 1.45; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--t3-text); font-size: 14px; margin-top: 10px; }
.byline a { color: var(--t2); }
.byline a:hover { color: var(--t1); }
.byline-who { display: inline-flex; align-items: center; gap: 8px; }
.byline-big { font-size: 15px; margin-top: 24px; gap: 8px 20px; }
.byline-big b { color: var(--t1); }
.avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--slate); flex: none; }
.avatar-mark { display: inline-grid; place-items: center; background: var(--slate); overflow: hidden; }
.avatar-mark img { width: 58%; height: 58%; object-fit: contain; }
.avatar-text { display: inline-flex; align-items: center; justify-content: center; font-size: 0.4em; font-weight: 700; color: var(--t2); line-height: 1; }
.byline-who .avatar { width: 20px; height: 20px; font-size: 8px; }
.byline-big .avatar { width: 40px; height: 40px; font-size: 14px; }

.rows { border-top: 1px solid var(--hair); }
.row { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.row-thumb { flex: none; width: 160px; aspect-ratio: 8 / 5; }
.rows-compact .row-thumb { width: 96px; }
.post-row { gap: 14px; padding: 14px 0; }
.post-row .row-thumb { border-radius: 6px; overflow: hidden; }
.post-row .row-thumb img, .post-row .card-blank { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-row .row-body { min-width: 0; }
.post-row-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.4; color: var(--t1); }
.post-row-text:hover { color: var(--t2); }
.post-row .byline { margin-top: 4px; font-size: 12px; }
.row-title { margin: 4px 0 2px; }
.row-title a:hover { color: var(--t2); }

/* posts */
.posts { border-top: 1px solid var(--hair); }
.post { padding: 22px 0; border-bottom: 1px solid var(--hair); }
.posts .post { padding: 18px 0 10px; margin: 0; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none; }
.posts .post .acts { margin-top: 8px; }
.post-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.post-head > .byline-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.post-who b a:hover { color: var(--t2); }
.post-head .avatar { width: 48px; height: 48px; font-size: 16px; }
.post-head .avatar-text { font-size: 16px; }
.post-who { display: flex; flex-direction: column; line-height: 1.25; }
.post-who b { font-weight: 600; }
.post-who small { color: var(--t3-text); }
.post-riding { font-weight: 400; color: var(--t2); }
.post-riding a { color: var(--t1); font-weight: 600; }
.post-riding a:hover { color: var(--t2); }
.post-time { color: var(--t3-text); font-size: 14px; }
.post-end { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.pmenu { position: relative; }
.pmenu > summary { list-style: none; padding: 6px; }
.pmenu > summary::-webkit-details-marker { display: none; }
.pmenu[open] > summary { color: var(--t1); background: var(--carbon); }
.pmenu > summary.btn { padding: 0 18px; cursor: pointer; }
.pmenu-sheet { position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; padding: 6px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; display: flex; flex-direction: column; z-index: 6; }
.pmenu-sheet form { display: contents; line-height: inherit; }
.pmenu-sheet a, .pmenu-sheet button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 6px; color: var(--t2); font: inherit; font-size: 15px; font-weight: 500; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.pmenu-sheet a:hover, .pmenu-sheet button:hover { color: var(--t1); background: var(--slate); }
.pmenu-sheet .is-danger { color: var(--red); }
.tool-plus { border: 1px solid var(--hair); background: var(--slate); color: var(--t1); border-radius: 50%; width: 36px; height: 36px; cursor: pointer; }
.tool-plus:hover { border-color: var(--t3-text); color: var(--t1); }
.menu-create { position: relative; }
.menu-create[open] .tool-plus { background: rgba(245, 184, 0, 0.18); }
.menu-sheet form { display: contents; }
.menu-h { padding: 8px 12px 4px; color: var(--t3-text); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.menu-h:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--hair); }
.menu-sheet-create { width: 220px; }
.pmenu-h { padding: 8px 12px 4px; margin-top: 4px; border-top: 1px solid var(--hair); color: var(--t3-text); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.pmenu-vis button.is-on { color: var(--yellow); }
.pmenu-vis button.is-on::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); margin-left: 8px; vertical-align: middle; }
.pmenu-staff { display: none; }
.is-staff .pmenu-staff { display: contents; }
.pmenu-boost { display: none; }
.can-boost .pmenu-boost { display: contents; }
.pmenu-sheet .pmenu-sub { display: block; color: var(--t3-text); font-size: 13px; font-weight: 400; margin-top: 2px; }
.official-line { margin: 4px 0 0; color: var(--yellow); font-size: 14px; font-weight: 600; }
.official-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 10px 0 0; font-size: 15px; font-weight: 500; }
.official-links a { color: var(--t1); }
.official-links a:hover { color: var(--yellow); }
.post-official { border-top: 1px solid rgba(245, 184, 0, 0.4); }
.post-kicker { margin: 0 0 8px; color: var(--yellow); font-size: 13px; font-weight: 600; }
.post-kicker-boost { display: none; color: var(--t3-text); }
.is-staff .post-kicker-boost { display: block; }
.pmenu-sheet .is-danger:hover { color: var(--red); background: rgba(240, 68, 82, 0.1); }
.pmenu-sheet .is-armed { color: var(--t1); background: rgba(240, 68, 82, 0.18); }
/* Staff Remove Post inside the post menu: a row that opens a small form in the same sheet. */
.rmv-menu > summary { list-style: none; display: block; padding: 10px 12px; border-radius: 6px; font-size: 15px; font-weight: 500; cursor: pointer; }
.rmv-menu > summary::-webkit-details-marker { display: none; }
.rmv-menu > summary:hover, .rmv-menu[open] > summary { background: rgba(240, 68, 82, 0.1); }
.pmenu-sheet .rmv-form { display: flex; flex-direction: column; gap: 12px; width: 300px; max-width: 100%; padding: 6px 12px 10px; white-space: normal; }
.rmv-sub { margin: 0; color: var(--t3-text); font-size: 13px; line-height: 1.45; }
.rmv-l { display: flex; flex-direction: column; gap: 6px; }
.rmv-l > span { color: var(--t3-text); font-size: 12px; font-weight: 600; }
.rmv-l select, .rmv-l textarea { width: 100%; background: var(--asphalt); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 14px; padding: 9px 10px; outline: none; }
.rmv-l textarea { resize: vertical; min-height: 4.5em; line-height: 1.4; }
.rmv-l select:focus, .rmv-l textarea:focus { border-color: var(--yellow-line); }
.rmv-l textarea::placeholder { color: var(--t3-text); }
.rmv-check { display: flex; align-items: center; gap: 8px; color: var(--t2); font-size: 14px; cursor: pointer; }
.rmv-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--red); }
.pmenu-sheet .rmv-form .btn { display: inline-flex; justify-content: center; text-align: center; width: 100%; min-height: 36px; padding: 0 12px; font-size: 14px; font-weight: 600; color: var(--red); border: 1px solid rgba(240, 68, 82, 0.5); }
.pmenu-sheet .rmv-form .btn:hover { color: var(--red); border-color: var(--red); background: rgba(240, 68, 82, 0.1); }
.comment-head .pmenu > summary { padding: 4px; }
.comment-head .pmenu > summary svg { width: 16px; height: 16px; }
.post-body { font-size: 16px; font-weight: 500; line-height: 1.48; overflow-wrap: anywhere; }
.post-body a { color: var(--yellow); }
/* Disclosures under a byline: one quiet line of labels, no box, no pill, no fill.
   Each label opens a popover quoting the Community Guidelines and the author's note. */
.disc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: -2px 0 10px; font-size: 13px; line-height: 1.4; color: var(--t3-text); }
.article-head .disc-line { margin: 14px 0 0; }
.pmenu-disc { display: inline-block; }
.pmenu-disc > summary.disc-label { padding: 0; border-radius: 0; color: var(--t3-text); font-weight: 500; cursor: pointer; }
.pmenu-disc > summary.disc-label:hover, .pmenu-disc[open] > summary.disc-label { color: var(--t1); background: none; text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.pmenu-disc > summary.disc-label:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.pmenu-sheet-disc { left: 0; right: auto; width: 340px; max-width: calc(100vw - 32px); padding: 14px 16px; gap: 8px; cursor: auto; }
.disc-h { font-size: 14px; font-weight: 600; color: var(--t1); }
.disc-q { font-size: 14px; line-height: 1.5; color: var(--t2); }
.disc-note { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.45; color: var(--t1); overflow-wrap: anywhere; }
.disc-note small { font-size: 12px; font-weight: 600; color: var(--t3-text); }
.pmenu-sheet a.disc-more { display: inline; width: auto; padding: 0; margin-top: 2px; font-size: 13px; color: var(--t3-text); }
.pmenu-sheet a.disc-more:hover { background: none; color: var(--t1); }
/* The composer's and the editor's Disclose control: a button in the action row whose
   panel opens under the row, at the composer's width. */
.compose-row { position: relative; }
.dcl { display: inline-block; }
.dcl > summary { list-style: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 6px; color: var(--t2); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.dcl > summary::-webkit-details-marker { display: none; }
.dcl > summary:hover, .dcl[open] > summary, .dcl.is-set > summary { color: var(--t1); border-color: var(--yellow-line); }
.dcl > summary:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.dcl-sheet { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 6; max-width: 480px; padding: 2px 16px 12px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; }
.dcl-sheet .check { border-bottom: 1px solid var(--hair); }
.dcl-sheet .check small { display: block; margin-top: 2px; }
.dcl-sheet .disclose-field { margin: 10px 0 12px; }
.dcl-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; font-size: 13px; }
.dcl-foot a { color: var(--t3-text); }
.dcl-foot a:hover { color: var(--t1); }
.compose-row .dcl-foot .btn { margin-left: 0; }
/* Back: a flat link at the top left of the content column. */
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 14px -4px; padding: 4px; color: var(--t2); font-size: 14px; font-weight: 600; }
.back-link:hover { color: var(--t1); }
.split > div > .back-link { margin-top: -4px; }
/* Editing a post: in place on the card, and the no-script page at a reading width. */
.wrap.post-edit-page { max-width: calc(680px + 2 * var(--gutter)); margin-inline: auto; }
.post-edit textarea { display: block; width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px; background: none; border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; line-height: 1.5; }
.post-edit textarea:focus { outline: none; border-color: var(--yellow-line); }
.post-edit select { min-height: 32px; padding: 6px 10px; background: var(--asphalt); color: var(--t2); border: 1px solid var(--hair); border-radius: 6px; font: inherit; font-size: 14px; }
.post-edit .post-edit-row { margin-top: 10px; padding-top: 0; border-top: 0; }
.post-edit-note { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--t3-text); }
.post-edit .check { margin-top: 10px; }
.post-edit .actions { margin-top: 16px; }
.post-edit .form-error { margin: 0 0 10px; }
.post-edit-inline { margin: 2px 0 12px; }
.post-edit-inline > .muted { margin: 0 0 8px; font-size: 13px; }
@media (max-width: 720px) {
  .pmenu .pmenu-sheet-disc { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); gap: 10px; }
  .pmenu-sheet a.disc-more { min-height: 0; display: inline; font-size: 14px; }
  .dcl > summary, .post-edit select { min-height: 44px; }
  .dcl-sheet { max-width: none; }
  body:has(.top .back) .back-link { display: none; }
}
.disclose { margin-top: 10px; border-top: 1px solid var(--hair); }
.disclose summary { cursor: pointer; list-style: none; padding: 10px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }
.disclose summary::-webkit-details-marker { display: none; }
.disclose summary::after { content: "+"; float: right; }
.disclose[open] summary::after { content: "\2013"; }
.disclose .check { border-bottom: 1px solid var(--hair); }
.disclose .check:last-of-type { border-bottom: 0; }
.disclose-field { margin: 0 0 12px; }
.disclose-field[hidden] { display: none; }
.disclose-open { border-top: 0; margin-top: 24px; }
.disclose-open .overline { margin-bottom: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.post-media { display: grid; gap: 4px; margin-top: 12px; border-radius: 12px; overflow: hidden; }
.post-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; background: var(--carbon); }
.post-media-1 img { aspect-ratio: 16 / 9; }
/* A video on a post plays whole, sized like a phone clip rather than stretched across the column. */
.post-video { display: block; width: min(100%, 420px); max-height: 560px; margin-top: 12px; border-radius: 12px; background: #07090c; }
.post-video.vid-box { aspect-ratio: 9 / 16; max-height: 420px; width: min(100%, 260px); }
.post-media-2, .post-media-4 { grid-template-columns: 1fr 1fr; }
.post-media-3 { grid-template-columns: 2fr 1fr; }
.post-media-3 img:first-child { grid-row: span 2; aspect-ratio: auto; }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.post-foot { display: flex; gap: 20px; margin-top: 14px; font-size: 14px; color: var(--t3-text); }
.post-foot a:hover { color: var(--t1); }
.posts-single .post { padding-top: 40px; }
.posts-single .post-body { font-size: 20px; }
.counts { color: var(--t3-text); font-size: 14px; margin-top: 24px; }
.counts a { color: var(--yellow); }

/* riders */
.riders { border-top: 1px solid var(--hair); }
.rider { border-bottom: 1px solid var(--hair); }
.rider-link { display: flex; gap: 14px; padding: 16px 0; align-items: flex-start; }
.rider-link:hover .rider-name { color: var(--yellow); }
.rider .avatar { width: 48px; height: 48px; font-size: 16px; }
.rider-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rider-name { font-weight: 600; }
.rider-handle { color: var(--t3-text); font-size: 14px; }
.rider-bio { color: var(--t2); font-size: 15px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.riders-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 56px; border-top: 0; }
.riders-grid .rider { border-top: 1px solid var(--hair); border-bottom: 0; }

/* events */
.events { border-top: 1px solid var(--hair); }
.event { border-bottom: 1px solid var(--hair); }
.event-link { display: flex; gap: 18px; padding: 16px 0; align-items: flex-start; }
.event-link:hover .event-title { color: var(--yellow); }
.event-date { flex: none; width: 56px; text-align: center; padding: 6px 0; border-radius: 8px; background: var(--yellow-bg); border: 1px solid var(--yellow-line); color: var(--yellow); line-height: 1.1; }
.event-date b { display: block; font-size: 22px; font-weight: 700; }
.event-date small { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; }
.event-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.event-title { font-weight: 600; font-size: 17px; }
.event-sub { color: var(--t3-text); font-size: 14px; }
.events-page .event-title { font-size: 20px; }
.events-page .event-link { padding: 24px 0; }

/* article */
.article-head { padding-top: 56px; max-width: 820px; }
.article-head h1 { margin: 10px 0 16px; font-size: 48px; }
.article-cover { margin: 32px auto 0; max-width: 820px; }
.article-cover img { width: 100%; aspect-ratio: 2 / 1; max-height: 360px; object-fit: cover; border-radius: 10px; background: var(--carbon); }
.prose { max-width: 720px; padding-top: 40px; font-size: 19px; line-height: 1.7; }
.prose-sm { font-size: 17px; padding-top: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote, .prose pre, .prose table { margin: 0 0 1.3em; }
.prose h2 { font-size: 28px; margin: 2.2em 0 0.7em; }
.prose h3 { font-size: 22px; margin: 1.8em 0 0.6em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose a { color: var(--yellow); text-decoration: underline; text-decoration-color: var(--yellow-line); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 0.4em; }
.prose blockquote { border-left: 2px solid var(--yellow-line); padding-left: 1.2em; color: var(--t2); }
.prose img { border-radius: 10px; margin: 1.6em 0; }
.prose code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--carbon); padding: 2px 6px; border-radius: 4px; }
.prose pre { background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; padding: 16px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--hair); margin: 2.5em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
.prose th { color: var(--t3-text); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.article-foot { max-width: 720px; padding-top: 32px; display: grid; gap: 32px; }
.author-box { display: flex; gap: 20px; padding: 28px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.author-box .avatar { width: 64px; height: 64px; font-size: 22px; }
.author-box h2 { margin: 4px 0 8px; font-size: 22px; }
.author-box p { color: var(--t2); }

/* profile */
.profile-head { display: flex; gap: 32px; align-items: flex-start; padding-top: 56px; padding-bottom: 8px; }
.profile-head .avatar { width: 96px; height: 96px; font-size: 32px; }
.profile-text h1 { margin: 8px 0 12px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; color: var(--t3-text); font-size: 15px; }
.stats b { color: var(--t1); font-weight: 600; }

/* spec and mods */
.spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 32px; border-top: 1px solid var(--hair); }
.spec div { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.spec dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3-text); }
.spec dd { margin: 4px 0 0; font-size: 19px; font-weight: 600; }
.mods { border-top: 1px solid var(--hair); margin-bottom: 40px; }
.mods li { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.mod-name { font-weight: 600; margin-top: 4px; }
.mods .muted { font-size: 15px; margin-top: 2px; font-weight: 400; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 40px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--carbon); }
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 1px solid var(--hair); margin-bottom: 56px; }
.spec-grid li { padding: 24px 0; border-bottom: 1px solid var(--hair); }
.spec-grid p + p { margin-top: 8px; color: var(--t2); }
.welcome .spec-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 32px; }
.welcome-mark { display: block; width: 56px; height: 56px; margin-bottom: 20px; }
.welcome-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 56px; }
/* An AdSense ad between hairlines, as the app's ad card. Unfilled slots collapse. */
.ad-card { padding: 12px 0 16px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 0 0 -1px; }
.ad-card-head { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--t3-text); }
.ad-card-head a { color: var(--yellow); text-decoration: none; }
.ad-card ins { display: block; }
/* Nothing shows until Google fills the slot. The slot keeps its width so AdSense can size the ad. */
.ad-card:not(:has(ins[data-ad-status="filled"])) { padding: 0; border: 0; }
.ad-card:not(:has(ins[data-ad-status="filled"])) .ad-card-head { display: none; }
.ad-card:has(ins[data-ad-status="unfilled"]) { display: none; }
.ride-share-actions ~ .ad-card, .actions ~ .ad-card { margin-top: 24px; }
.ad-card-article:has(ins[data-ad-status="filled"]) { margin: 24px 0; }
.ad-card-article ins { text-align: center; }
/* In a grid of cards the ad takes one card's cell, with no rules of its own. */
.ad-card-cell { border: 0; padding: 0; margin: 0; min-width: 0; }
.rail .ad-card { margin: 0 0 24px; }
.ad-card-article + .prose > :first-child { margin-top: 0; }

/* app hand off */
.handoff {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 32px 0; margin-bottom: 32px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.handoff h2 { margin: 8px 0 8px; }
.handoff p { color: var(--t2); max-width: 54em; }
.rail .handoff { flex-direction: column; align-items: flex-start; padding: 24px 0; }

/* footer */
.foot { margin-top: 64px; border-top: 1px solid var(--hair); padding: 48px 0 40px; color: var(--t3-text); font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.foot-grid a { display: block; padding: 6px 0; color: var(--t2); }
.foot-grid a:hover { color: var(--t1); }
.foot-grid .brand a, .foot-grid .brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: var(--t1); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.foot-grid .overline { margin-bottom: 8px; }
.foot-tag { margin-top: 14px; max-width: 32em; }
.foot-copy { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hair); }

/* Top bar: search, tools, account menu */
.top-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 38px; border: 1px solid var(--hair); border-radius: 8px; color: var(--t3-text); background: var(--carbon); width: 220px; }
.top-search:focus-within { border-color: var(--yellow-line); color: var(--t2); }
.top-search input { flex: 1; min-width: 0; background: none; border: 0; color: var(--t1); font: inherit; font-size: 15px; outline: none; }
.top-search input::placeholder { color: var(--t3-text); }
/* Discover keeps the header search's space so the tabs do not shift between pages. */
.top-search-hold, .tool-search[data-hold] { visibility: hidden; }
.top-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; color: var(--t2); }
.tool:hover { color: var(--t1); background: var(--carbon); }
.tool[aria-current] { color: var(--t1); border-bottom: 2px solid var(--yellow); border-radius: 0; padding-top: 2px; }
.pip { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 3px; background: var(--asphalt); border: 1px solid var(--yellow-line); color: var(--yellow); font-size: 11px; font-weight: 700; line-height: 14px; text-align: center; }
.tool-text { color: var(--t2); font-weight: 500; font-size: 15px; padding: 10px 12px; }
.tool-text:hover { color: var(--t1); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; display: flex; border-radius: 50%; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary .avatar { width: 32px; height: 32px; font-size: 12px; }
.menu[open] summary .avatar { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.menu-sheet { position: absolute; right: 0; top: calc(100% + 10px); width: 240px; padding: 6px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; display: flex; flex-direction: column; z-index: 6; }
.menu-sheet a, .menu-sheet button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 6px; color: var(--t2); font: inherit; font-size: 15px; font-weight: 500; background: none; border: 0; cursor: pointer; }
.menu-sheet a:hover, .menu-sheet button:hover { color: var(--t1); background: var(--slate); }
.menu-who { padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; line-height: 1.3; }
.menu-who small { color: var(--t3-text); }

/* Actions: react, reply, save */
.acts { display: flex; align-items: center; gap: 4px; margin-top: 14px; margin-left: -10px; }
.acts form { display: contents; }
.act, .act-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; color: var(--t3-text); font: inherit; font-size: 14px; font-weight: 500; background: none; border: 0; cursor: pointer; line-height: 1; }
.act:hover, .act-btn:hover { color: var(--t1); background: var(--carbon); }
.act svg, .act-btn svg { width: 18px; height: 18px; }
.act-btn.is-on { color: var(--yellow); }
.act-btn.is-on svg { fill: currentColor; }
.acts-sm .act, .acts-sm .act-btn { font-size: 13px; padding: 4px 8px; }
.acts-sm .act svg, .acts-sm .act-btn svg { width: 16px; height: 16px; }

/* Composer */
.compose { border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none; padding: 14px 0; margin-top: 24px; }
.compose-head { display: flex; gap: 12px; align-items: flex-start; }
.compose-head .avatar { width: 36px; height: 36px; font-size: 13px; margin-top: 4px; }
.compose textarea { flex: 1; width: 100%; min-width: 0; resize: none; field-sizing: content; min-height: 4.5em; max-height: 50vh; background: none; border: 0; color: var(--t1); font: inherit; font-size: 17px; line-height: 1.5; outline: none; padding: 6px 0; }
.compose textarea::placeholder { color: var(--t3-text); }
.compose-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.compose-row .btn { margin-left: auto; }
.compose-note { color: var(--t3-text); font-size: 13px; }
.compose select, .field select, .search-big select { background: var(--asphalt); color: var(--t2); border: 1px solid var(--hair); border-radius: 6px; padding: 6px 10px; font: inherit; font-size: 14px; }
.compose-sm { margin-top: 10px; padding: 10px 12px; }
.compose-sm textarea { font-size: 15px; }
.compose-chat { display: flex; gap: 10px; align-items: flex-end; margin-top: 16px; }
.compose-chat textarea { flex: 1; min-width: 0; resize: none; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; line-height: 1.45; padding: 10px 12px; min-height: 44px; max-height: 40vh; outline: none; }
.compose-chat textarea:focus { border-color: var(--yellow-line); }
.compose-chat .photo-pick { flex: none; width: 44px; height: 44px; cursor: pointer; }
.compose-chat .btn { flex: none; min-height: 44px; }
.compose-chat.is-busy .btn, .compose-chat button:disabled { opacity: 0.6; pointer-events: none; }

/* Comments */
.thread { margin-top: 40px; }
.thread > .section-head { margin-top: 0; }
.comments { border-top: 1px solid var(--hair); }
.comment { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-head .avatar { width: 28px; height: 28px; font-size: 11px; }
.comment-head b { font-weight: 600; font-size: 15px; }
.comment-head time, .comment-head small { color: var(--t3-text); font-size: 13px; }
.comment-body { font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.comment-body a { color: var(--yellow); }
.comments-nested { margin-left: 38px; border-left: 1px solid var(--hair); padding-left: 16px; margin-top: 12px; }
.comments-nested .comment { border-bottom: 0; padding: 12px 0; }
.reply summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 6px; color: var(--t3-text); font-size: 14px; font-weight: 500; line-height: 1; }
.reply summary::-webkit-details-marker { display: none; }
.reply summary:hover { color: var(--t1); background: var(--carbon); }
.reply summary svg { width: 18px; height: 18px; }
.comment-reply .acts { margin-top: 10px; }

/* Interest chips, compact posts, visitor note */
.chips-interest { margin: 4px 0 24px; }
.chips-interest .is-on { border-color: var(--yellow-line); background: var(--yellow-bg); color: var(--yellow); }
.posts-compact .post { padding: 16px 0; }
.posts-compact .post-body { font-size: 15px; }
.posts-compact .post-media img { aspect-ratio: 16 / 9; }
.tabs-flush { margin-top: 0; }
.visitor { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px 0; margin-top: 8px; border-bottom: 1px solid var(--hair); }
.visitor p { color: var(--t2); font-size: 15px; }
.visitor p b { color: var(--t1); font-weight: 600; }
.visitor .actions { margin: 0; flex: none; }
.more { margin-top: 24px; text-align: center; }
.narrow { max-width: 760px; }
.social .compose { margin-top: 24px; }
.social .posts { margin-top: 24px; }
.card-wrap .chips { margin-top: 10px; }

/* Forms: auth, settings, editor */
.auth { display: flex; justify-content: center; padding: 72px var(--gutter) 96px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-size: 32px; margin: 8px 0 20px; }
.auth-note { color: var(--t2); margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--yellow-line); background: var(--yellow-bg); border-radius: 8px; font-size: 15px; }
.auth-alt { color: var(--t3-text); font-size: 14px; margin-top: 20px; line-height: 1.5; }
.auth-alt a { color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.auth-age { margin: 4px 0 12px; }
.auth-age small { color: var(--t2); font-size: 14px; line-height: 1.5; }
.auth-age a { color: var(--yellow); font-weight: 600; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > span { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }
.field input, .field textarea { width: 100%; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; padding: 11px 12px; outline: none; }
.field input:focus, .field textarea:focus, .editor input:focus, .editor textarea:focus { border-color: var(--yellow-line); }
.field textarea { resize: vertical; }
.btn-wide { width: 100%; justify-content: center; min-height: 44px; margin-top: 4px; }
.form-error { color: var(--red); border: 1px solid rgba(240, 68, 82, 0.5); background: rgba(240, 68, 82, 0.1); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 15px; }
.form-ok { color: var(--green); border: 1px solid rgba(25, 197, 143, 0.5); background: rgba(25, 197, 143, 0.1); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; font-size: 15px; }
.settings h2 { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); font-weight: 600; margin: 32px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.settings h2:first-of-type { margin-top: 0; }
.choices { display: flex; flex-direction: column; }
.choice { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.choice input { appearance: none; -webkit-appearance: none; margin: 3px 0 0; width: 20px; height: 20px; flex: none; border: 1.5px solid var(--t3); border-radius: 50%; background: var(--carbon); accent-color: var(--yellow); cursor: pointer; display: inline-grid; place-content: center; }
.choice input[type="checkbox"] { border-radius: 5px; }
.choice input::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); transform: scale(0); transition: transform 0.12s; }
.choice input[type="checkbox"]::before { width: 12px; height: 7px; border-radius: 0; background: none; border: solid var(--yellow); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); }
.choice input:checked { border-color: var(--yellow); }
.choice input:checked::before { transform: scale(1); }
.choice input[type="checkbox"]:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.choice input:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.field textarea { min-height: 9em; }
.choice span { display: flex; flex-direction: column; gap: 2px; }
.choice small { color: var(--t3-text); }
.editor-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 16px; border-bottom: 1px solid var(--hair); margin-bottom: 24px; flex-wrap: wrap; }
.editor-bar .actions { margin: 0; }
.editor-lead { display: flex; align-items: center; gap: 16px; min-width: 0; }
.editor-lead .overline { margin: 0; }
.editor-lead .post-as { position: relative; }
.editor-lead .post-as > summary { min-height: 36px; padding: 0 12px; border-radius: 8px; font-size: 14px; }
.editor-lead .post-as .dcl-sheet { left: 0; right: auto; width: 380px; max-width: calc(100vw - 32px); }
.editor-bar .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); vertical-align: middle; margin: 0 2px 2px 6px; }
.editor-title, .editor-sub, .editor-body { width: 100%; display: block; background: none; border: 0; border-bottom: 1px solid var(--hair); color: var(--t1); font: inherit; outline: none; padding: 10px 0; margin-bottom: 8px; }
.editor-title { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
/* Title and subtitle are textareas that grow with their text, so a long title wraps instead of clipping. */
.editor-title, .editor-sub { resize: none; overflow: hidden; min-height: 0; }
.editor-sub { font-size: 20px; color: var(--t2); margin-bottom: 24px; line-height: 1.3; }
.editor-body { font-size: 17px; line-height: 1.6; resize: vertical; min-height: 480px; border: 1px solid var(--hair); border-radius: 8px; padding: 16px; background: var(--carbon); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; }
.muted { color: var(--t3-text); font-size: 14px; margin-top: 12px; }

/* Notifications, messages */
.notes { border-top: 1px solid var(--hair); }
.note { border-bottom: 1px solid var(--hair); }
.note-link { display: flex; gap: 14px; padding: 14px 0; align-items: center; }
.note-link:hover .note-title { color: var(--t1); }
.note .avatar, .note .emblem { width: 36px; height: 36px; font-size: 13px; flex: none; }
.emblem { display: inline-grid; place-items: center; border-radius: 50%; background: var(--slate); border: 1px solid var(--hair); color: var(--t2); }
.emblem svg, .emblem img { display: block; }
.emblem-mark { background: var(--carbon); }
.note-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.note-title { color: var(--t2); font-size: 15px; line-height: 1.35; }
.note-title b { color: var(--t1); font-weight: 600; }
.is-unread .note-title { color: var(--t1); }
.is-unread .note-link::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); flex: none; order: 3; }
.note-body { color: var(--t3-text); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.note time { color: var(--t3-text); font-size: 13px; flex: none; margin-left: auto; white-space: nowrap; }
.note-tabs { margin-bottom: 8px; }
.tab-count { color: var(--t3-text); font-weight: 500; margin-left: 2px; }
.note { display: flex; flex-wrap: wrap; align-items: center; }
.note > .note-link { flex: 1; min-width: 0; }
.note > .note-actions { flex: 1 1 100%; }
.note-del { margin: 0 0 0 8px; flex: none; }
.note-del .act-btn { color: var(--t3-text); opacity: 0; }
.note:hover .note-del .act-btn, .note-del .act-btn:focus-visible { opacity: 1; }
.note-del .act-btn:hover { color: var(--t1); }
@media (hover: none) { .note-del .act-btn { opacity: 1; } }
.notes-menu > summary.btn { padding: 0 12px; }
.note-actions { display: flex; align-items: center; gap: 8px; padding: 0 0 14px 50px; }
.note-actions form { margin: 0; }
.note-actions .btn { min-width: 112px; justify-content: center; }
.note-state { color: var(--t3-text); font-size: 14px; font-weight: 600; }
.convos { border-top: 0; }
.chat-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 12px; border-bottom: 1px solid var(--hair); }
.chat-list-head h2 { margin: 0; font-size: 20px; }
.convo-names { display: flex; align-items: baseline; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.convo-names .who-name { overflow: hidden; text-overflow: ellipsis; }
.who-handle { color: var(--t3-text); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.convo-muted { color: var(--t3-text); font-weight: 600; }
.convos-empty { padding: 16px 0; font-size: 14px; }
.convo { border-bottom: 1px solid var(--hair); }
.convo-link { display: flex; gap: 14px; align-items: center; padding: 14px 0; position: relative; }
.convo .avatar, .chat-find-list .avatar { width: 44px; height: 44px; font-size: 15px; }
.convo-text { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.convo-who { display: flex; justify-content: space-between; gap: 12px; }
.convo-who b { font-weight: 600; }
.convo-who time { color: var(--t3-text); font-size: 13px; }
.convo-preview { color: var(--t3-text); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo.is-unread .convo-preview, .convo.is-unread .convo-who b { color: var(--t1); }
.convo .pip { position: static; flex: none; }
.convo.is-current .convo-link { background: var(--carbon); padding-left: 12px; padding-right: 12px; }
.convo.is-current .convo-who b { color: var(--t1); }
.chat { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: start; }

.chat-list .avatar { width: 36px; height: 36px; font-size: 12px; }
.chat-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.chat-head .avatar { width: 36px; height: 36px; font-size: 13px; margin-right: 12px; }
.msgs { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; min-height: 320px; }
.msg { max-width: 72%; align-self: flex-start; display: flex; flex-direction: column; gap: 4px; }
.msg.is-mine { align-self: flex-end; align-items: flex-end; }
.msg-body { padding: 9px 12px; border-radius: 8px; background: var(--carbon); border: 1px solid var(--hair); font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.msg.is-mine .msg-body { background: var(--slate); border-color: var(--slate); }
.msg.is-run { margin-bottom: -6px; }
.msg.is-failed .msg-body { opacity: 0.7; border-style: dashed; border-color: var(--red); }
.msg-failed { color: var(--red); font-size: 13px; padding: 0 4px; }
.msgs-older { align-self: center; list-style: none; }
.msgs-older a { display: inline-block; padding: 6px 12px; color: var(--t2); font-size: 14px; font-weight: 600; }
.msgs-older a:hover { color: var(--t1); }
.chat-closed { flex: none; margin: 0; padding: 14px 0 4px; border-top: 1px solid var(--hair); color: var(--t2); font-size: 15px; text-align: center; }
.chat-head-end { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.chat-head .chat-calls { display: inline-flex; gap: 4px; }
.chat-who { flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.chat-who .who-handle { font-size: 14px; }
.chat-menu .pmenu-sheet { z-index: 8; }
.chat-find { border-left: 1px solid var(--hair); padding-left: 40px; overflow-y: auto; }
.chat-find-title { font-size: 24px; margin: 0 0 16px; }
.chat-find-form { display: flex; gap: 10px; max-width: 720px; }
.chat-find-note { margin: 16px 0 0; }
.chat-find-list { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 32px; }
.chat-find-list li { border-bottom: 1px solid var(--hair); }
.chat-find-go { flex: none; color: var(--t2); font-size: 14px; font-weight: 600; }
.convo-link:hover .chat-find-go { color: var(--t1); }
.msg-body a { color: var(--yellow); }
.msg-img { max-width: 320px; border-radius: 12px; }
.msg time { color: var(--t3-text); font-size: 12px; padding: 0 4px; }
.msg-system { align-self: center; text-align: center; font-size: 13px; margin: 4px 0; }
.request { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.request p { margin: 0; }
.request-actions { display: flex; gap: 8px; flex: none; }
.request-actions form { margin: 0; }
.request-sent { font-size: 14px; }

/* Search */
.search-big { display: flex; gap: 10px; margin: 8px 0 8px; max-width: 760px; }
.search-count { color: var(--t2); font-size: 16px; margin: 10px 0 0; }
.search-bikes { margin-bottom: 8px; }
.search-hint { color: var(--t2); font-size: 14px; margin: 4px 0 0; }
.search-hint b { color: var(--t1); }
.search-tabs { margin-bottom: 8px; }
.search-tabs .lbl-n { margin-left: 4px; }
.search-tabs a[aria-current] .lbl-n { color: var(--t2); }
.search-more { margin: 0 0 8px; font-size: 14px; }
.search-more a { color: var(--yellow); }
.search-empty { padding: 32px 0 16px; }
.search-empty > p { color: var(--t2); line-height: 1.5; margin: 6px 0 0; }
.search-empty > .empty-title { color: var(--t1); margin: 0; }
.search-suggest { margin-top: 20px; }
.search-suggest .row a { display: block; padding: 4px 0; }
.search-empty > .search-trending-lbl { margin-top: 28px; }
.search-empty > .search-trending { display: flex; margin-top: 10px; flex-wrap: wrap; gap: 8px 16px; }
.search-trending a { color: var(--t2); }
.search-trending a:hover { color: var(--t1); }
.row-hit { gap: 0; }
.row-hit .byline { margin: 0 0 6px; }
.hit-body { font-size: 16px; line-height: 1.5; color: var(--t1); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.hit-body a:hover { color: var(--t2); }
.new-article { margin-top: 12px; }
.new-article input { font-size: 16px; padding: 10px 14px; }
.search-big input { flex: 1; min-width: 0; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 18px; padding: 12px 14px; outline: none; }
.search-big input:focus { border-color: var(--yellow-line); }
.avatar-square { border-radius: 8px; }

@media (max-width: 1080px) {
  .top-search { width: 160px; }
  .chat { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }

  h1 { font-size: 36px; }
  .article-head h1 { font-size: 38px; }
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature-title { font-size: 32px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .menu-sheet-notes { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
    :root { --gutter: 16px; }
  body { font-size: 16px; }
  h1 { font-size: 30px; }
  .article-head h1 { font-size: 30px; }
  .feature-title { font-size: 26px; }
  .lede { font-size: 17px; }
  .top-row { gap: 12px; min-height: 56px; }
  .lockup { font-size: 17px; gap: 8px; min-width: 0; }
  .lockup img { height: 18px; }
  .lockup-word { margin-left: -4px; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .top-row { flex-wrap: nowrap; }
  .nav { display: none; }
  .top-cta { margin-left: auto; min-height: 34px; padding: 0 12px; font-size: 14px; }
  body { padding-bottom: 72px; }
  .screen { padding-top: 16px; }
  .screen-head { margin-bottom: 14px; }
  .screen-head h1 { font-size: 24px; }
  .seg { display: flex; margin: 0 calc(-1 * var(--gutter)) 16px; padding: 4px var(--gutter); border-radius: 0; border-width: 0 0 1px; background: none; }
  .seg a { flex: 1 1 auto; justify-content: center; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); background: var(--asphalt); border-top: 1px solid var(--hair); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 2px; color: var(--t3-text); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
  .tabbar a[aria-current] { color: var(--yellow); }
  .app-strip:not([hidden]) { position: fixed; left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 7; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 12px; }
  .app-strip p { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; font-size: 14px; }
  .app-strip small { color: var(--t3-text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-strip .btn { min-height: 34px; padding: 0 12px; font-size: 14px; flex: none; }
  .app-strip-x { background: none; border: 0; color: var(--t3-text); font-size: 22px; line-height: 1; padding: 4px; cursor: pointer; }
  body.has-app-strip { padding-bottom: calc(144px + env(safe-area-inset-bottom)); }
  /* Ride Forecast before it has a location: one row (title and Use My Location), so the
     first posts reach the first phone screen. It opens to the full card once it is live. */
  .wx-feed:not(.is-live) { padding: 10px 0; margin-bottom: 12px; }
  .wx-feed:not(.is-live) .wx-top { flex-wrap: nowrap; align-items: center; }
  .wx-feed:not(.is-live) .wx-sum { flex: 1 1 auto; }
  .wx-feed:not(.is-live) .overline { margin: 0; }
  .wx-feed:not(.is-live) .wx-head, .wx-feed:not(.is-live) .wx-notes { display: none; }
  .foot { padding-bottom: 32px; }
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid-3 .card-title, .grid-3 h3 { font-size: 15px; }
  .grid-3 .card-sub, .grid-3 .byline { font-size: 13px; }
  .social .rail, .screen .rail { display: none; }
  .riders-grid { grid-template-columns: 1fr; }
  .spec, .spec-grid, .welcome .spec-grid { grid-template-columns: 1fr 1fr; }
  .profile-head { gap: 20px; }
  .profile-head .avatar { width: 64px; height: 64px; font-size: 22px; }
  .handoff { flex-direction: column; align-items: flex-start; }
  .row-thumb { width: 104px; }
  .foot-grid { grid-template-columns: 1fr; }
  .page-head, .hero-small, .article-head, .profile-head { padding-top: 36px; }
  .prose { font-size: 18px; }
  .top-search { display: none; }
  .top-tools { gap: 4px; }
  .top-tools .top-cta { display: none; }
  .chat { grid-template-columns: 1fr; }
  .chat-list { display: none; }
  .msg { max-width: 88%; }
  .visitor { flex-direction: column; align-items: flex-start; }
  .editor-title { font-size: 28px; }
  .auth { padding-top: 40px; }
  .split .rail .grid { grid-template-columns: 1fr 1fr; }
  .pro-status, .plans { grid-template-columns: 1fr; }
  .perks { grid-template-columns: 1fr 1fr; }
  .plan-price b { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* admin: the staff console. Same tokens, a sidebar instead of the top nav. */
.chip-role { cursor: default; font-size: 11px; }
.con-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 12px 14px; font-size: 15px; font-weight: 700; color: var(--t1); }
.bglyph { display: inline-flex; flex: none; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--hair); background: var(--carbon); }
.bglyph .rbadge { width: 16px; height: 16px; margin: 0; }
.con { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 56px); }
.con-side { border-right: 1px solid var(--hair); padding: 20px 12px 40px; position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--slate) transparent; overscroll-behavior: contain; }
.con-side nav { display: flex; flex-direction: column; gap: 1px; }
.con-side .overline { margin: 20px 12px 6px; }
.con-side .overline:first-child { margin-top: 0; }
.con-side nav a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 8px; color: var(--t2); font-size: 15px; font-weight: 500; }
.con-side nav a:hover { color: var(--t1); background: var(--carbon); }
.con-side nav a[aria-current] { color: var(--yellow); background: var(--yellow-bg); outline: 1px solid var(--yellow-line); outline-offset: -1px; }
.con-side .pip { position: static; display: inline-block; margin-left: 6px; vertical-align: 1px; }
.con-side .overline .pip { margin-left: 8px; }
.pip-red { background: var(--red); color: #fff; }
.con-main { padding: 24px var(--gutter) 64px; max-width: 1040px; min-width: 0; }
.con-head { margin-bottom: 20px; }
.con-head h1 { font-size: 26px; }
.con-note { margin: -8px 0 20px; font-size: 15px; max-width: 60em; }
.con-cat { margin: 22px 0 6px; font-size: 13px; font-weight: 600; color: var(--t2); }
.con-pager { margin-top: 20px; }
.con-big { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; margin: 8px 0 4px; }

.figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); margin: 10px 0 26px; }
.figure { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--t1); }
.figure b { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.figure span { font-size: 13px; color: var(--t2); font-weight: 500; }
.figure small { font-size: 12px; color: var(--t3-text); }
a.figure:hover { background: var(--carbon); }

.rows-flat { margin-bottom: 8px; }
.row-tight { padding: 12px 0; gap: 14px; align-items: center; }
.row-link { align-items: center; color: inherit; }
.row-link:hover { background: var(--carbon); margin: 0 calc(-1 * var(--gutter) / 2); padding-left: calc(var(--gutter) / 2); padding-right: calc(var(--gutter) / 2); }
.row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.row-sub { display: block; font-size: 13px; color: var(--t3-text); }
.row-n { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--hair); color: var(--t2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.row-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; align-items: center; }
.row time, .row-tight > b { flex: none; color: var(--t3-text); font-size: 13px; font-variant-numeric: tabular-nums; }
.row-tight > b { color: var(--t1); font-size: 16px; font-weight: 600; }
.row-tight > b.is-yellow { color: var(--yellow); }
.row-tight > b.is-red { color: var(--red); }
.row form { flex: none; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Hashtags read as text, never chips: posts, articles, tag pages. Same look as the app's HashtagLink. */
.htag, .post-body a.htag { color: var(--yellow); font-weight: 500; }
.htag:hover { text-decoration: underline; text-underline-offset: 3px; }
/* @mentions in descriptions and notes, the same yellow as in posts. */
a.mtag, .from-comment a { color: var(--yellow); }
a.mtag:hover, .from-comment a:hover { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }
.from-comment { display: block; margin: 16px 0 -4px; }
.hashtags { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 15px; }
.binfo-tags { margin-top: 16px; }
.ghead-tags { margin-top: 10px; }
.phead-tags { margin-top: 10px; }
.tag { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--hair); color: var(--t2); font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; vertical-align: middle; }
.tag-yellow { color: var(--yellow); border-color: var(--yellow-line); background: var(--yellow-bg); }
.tag-green { color: var(--green); border-color: rgba(25, 197, 143, 0.5); background: rgba(25, 197, 143, 0.1); }
.tag-red { color: var(--red); border-color: rgba(240, 68, 82, 0.5); background: rgba(240, 68, 82, 0.1); }
/* A state as plain text with a small dot (Overdue, Due Soon, OK): no box, no fill. The console uses the same. */
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--t2); white-space: nowrap; font-weight: 500; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t3-text); flex: none; }
.st-green::before { background: var(--green); }
.st-yellow::before { background: var(--yellow); }
.st-red::before { background: var(--red); }
.st-red, .st-yellow { color: var(--t1); }
a.st:hover { color: var(--t1); }
.bdot { width: 12px; height: 12px; border-radius: 50%; flex: none; }

.btn-small { min-height: 30px; padding: 0 10px; font-size: 13px; }
.btn-danger { color: var(--red); border-color: rgba(240, 68, 82, 0.5); }
.btn-danger:hover { background: rgba(240, 68, 82, 0.1); border-color: var(--red); }
.btn.is-armed { color: var(--t1); background: rgba(240, 68, 82, 0.25); border-color: var(--red); }
.btn-on { color: var(--green); border-color: rgba(25, 197, 143, 0.5); background: rgba(25, 197, 143, 0.1); }

.con-filters, .con-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.con-filters input[type="search"], .con-inline input[type="text"], .con-filters select, .con-inline select, .con-resolve select, .con-resolve input, .con-reject input { background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 15px; padding: 8px 12px; min-height: 38px; outline: none; }
.con-filters input:focus, .con-inline input:focus, .con-filters select:focus, .con-inline select:focus, .con-resolve input:focus, .con-reject input:focus { border-color: var(--yellow-line); }
.con-filters input[type="search"] { flex: 1 1 220px; min-width: 0; }
.con-inline input[type="text"] { flex: 1 1 180px; min-width: 0; }
.con-filters select, .con-inline select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A8B0BD' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
.con-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--t2); font-size: 14px; }
.con-toggle input, .con-check input { accent-color: var(--yellow); }
.con-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.con-stack input, .con-stack textarea, .con-stack select { background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 15px; padding: 9px 12px; outline: none; }
.con-stack input:focus, .con-stack textarea:focus { border-color: var(--yellow-line); }
.con-stack .btn { align-self: flex-start; }
.con-form { max-width: 560px; margin-bottom: 28px; }
.con-form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.con-form-row .field { flex: 1 1 160px; }
.con-form-row .choice { border: 0; padding: 6px 0 14px; }
.con-check { cursor: pointer; }
.con-check input { flex: none; margin-top: 3px; }
.con-check input:disabled + .row-main { opacity: 0.55; }

.con-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
.con-grid .overline { margin: 22px 0 8px; }
.con-grid section > .overline:first-child { margin-top: 0; }
.con-profile { display: flex; gap: 18px; align-items: center; margin: 8px 0 20px; }
.con-profile-main { flex: 1 1 auto; min-width: 0; }
.con-profile h1 { font-size: 26px; display: flex; align-items: center; gap: 8px; }
.con-profile .muted { margin: 4px 0 8px; font-size: 14px; }
.con-profile .row-tags { justify-content: flex-start; }
.av-32 { width: 32px; height: 32px; font-size: 13px; }
.av-64 { width: 64px; height: 64px; font-size: 24px; }
.facts { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hair); margin: 0 0 12px; }
.facts div { display: flex; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.facts dt { flex: 0 0 96px; color: var(--t3-text); }
.facts dd { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.con-bio { margin: 0 0 8px; font-size: 14px; white-space: pre-line; }
.con-user { display: inline-flex; align-items: center; gap: 6px; color: var(--t1); flex: none; }
.con-user:hover .handle { color: var(--yellow); }

.con-report { flex-wrap: wrap; align-items: flex-start; padding: 16px 0; }
.con-report .row-main { gap: 6px; }
.con-report .row-main p { margin: 0; font-size: 15px; }
.con-report .row-main .muted { font-size: 13px; margin: 0; }
.con-report-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.con-quote { margin: 0; padding: 8px 12px; border-left: 2px solid var(--hair); color: var(--t2); font-size: 14px; }
.con-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; background: var(--slate); flex: none; }
.con-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: none; }
.con-actions-wide { margin-top: 20px; }
.con-resolve { flex-basis: 100%; }
.con-flags { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 13px; color: var(--t2); }
.con-report .row-main p.con-flags { font-size: 13px; }
.con-flags-lead { color: var(--yellow); font-weight: 600; }
.con-reject { display: inline-flex; gap: 6px; }
.con-reject input { min-height: 30px; padding: 0 10px; font-size: 13px; width: 160px; }
.con-resolve select, .con-resolve input { min-height: 30px; padding: 0 10px; font-size: 13px; }
.con-resolve input { flex: 1 1 160px; }
.con-fb-form textarea { flex: 1 1 100%; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 14px; padding: 8px 10px; resize: vertical; outline: none; }
.con-fb-form textarea:focus { border-color: var(--yellow-line); }
.con-shots { display: flex; flex-wrap: wrap; gap: 8px; }
.con-pre { white-space: pre-line; }
.build-features { margin: 6px 0 4px; padding-left: 18px; color: var(--t1); font-size: 14px; line-height: 1.5; }

.con-announce { border-bottom: 1px solid var(--hair); padding: 0 0 14px; margin: 0 0 8px; }
.con-announce summary { cursor: pointer; font-weight: 600; color: var(--t1); padding: 6px 0; }
.con-announce .muted { font-size: 13px; margin: 4px 0 10px; }
.con-ids { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; }
.con-ids figure { margin: 0; }
.con-ids img { width: 100%; border-radius: 10px; border: 1px solid var(--hair); background: var(--carbon); }
.con-ids figcaption { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }

@media (max-width: 1080px) {
  .con { grid-template-columns: 1fr; }
  .con-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--hair); padding: 10px var(--gutter); overflow-x: auto; }
  .con-side nav { flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }
  .con-side .overline { margin: 0 6px 0 14px; }
  .con-title { margin: 0 10px 0 0; }
  .con-side nav a { padding: 6px 10px; font-size: 14px; }
  .con-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .con-main { padding: 18px 16px 48px; }
  .con-head h1 { font-size: 22px; }
  .figures { grid-template-columns: 1fr 1fr; }
  .row-link:hover { margin: 0; padding-left: 0; padding-right: 0; }
  .con-actions { flex-basis: 100%; }
  .con-profile { align-items: flex-start; }
  .con-profile > .btn { display: none; }
}


/* App parity components: make tiles, labels, stats, pills */
.mk { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--slate); color: var(--t2); border-radius: 8px; overflow: hidden; font-weight: 800; line-height: 1; }
/* The logo's own square fills the tile edge to edge, so the tile always takes the logo's colour;
   a hairline on top keeps dark logos defined against the dark page. */
.mk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk img.mk-house { inset: 22%; width: 56%; height: 56%; object-fit: contain; opacity: 0.55; }
.mk::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(244, 246, 248, 0.1); pointer-events: none; }
.mk-24 { width: 24px; height: 24px; font-size: 11px; border-radius: 6px; }
.mk-28 { width: 28px; height: 28px; font-size: 12px; border-radius: 7px; }
.mk-48 { width: 48px; height: 48px; font-size: 20px; border-radius: 12px; }
.mk-56 { width: 56px; height: 56px; font-size: 22px; border-radius: 12px; }
.lbl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 24px 0 12px; }
.lbl:first-child { margin-top: 0; }
.lbl .overline { margin: 0; }
.lbl-n { color: var(--t3-text); font-weight: 600; margin-left: 4px; }
.lbl-more { display: inline-flex; align-items: center; gap: 2px; color: var(--yellow); font-size: 14px; font-weight: 600; }
.lbl-more:hover { color: var(--yellow); opacity: 0.85; }
.lbl-more svg { width: 14px; height: 14px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.stat b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { color: var(--t3-text); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.stats-card { display: flex; justify-content: space-between; gap: 8px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: 16px; max-width: 560px; }
.stats-center { margin: 16px auto 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(12, 16, 20, 0.9); border: 1px solid var(--hair); color: var(--t1); }
.pill-yellow { background: var(--yellow-bg); border-color: var(--yellow-line); color: var(--yellow); }
.pro-mark { display: inline-flex; align-items: center; gap: 4px; color: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; }
.pro-mark svg { width: 14px; height: 14px; }
.chip-tint { background: var(--yellow-bg); border-color: var(--yellow-line); color: var(--yellow); }
.chip svg { width: 14px; height: 14px; margin-right: 4px; }
.chips-row { margin: 14px 0 0; }

/* Bike card (app GarageCard / build tile) */
.bcard { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid var(--hair); padding-bottom: 12px; }
.bcard-media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }
.bcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No photo: the house placeholder, the MotoRev mark on a plate hashed from the bike.
   The plate is square with the mark centred, so cover keeps the mark whole at any ratio. */
/* No photo yet: an empty studio stage with the maker's mark in the light. /logo/:domain
   serves the mark cut out of its square; without one the MotoRev mark stands in. */
.bcard-blank, .bphoto-blank { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #07090c url(/static/bike-stage-1.jpg) center / cover no-repeat; overflow: hidden; }
/* Classed so a photo frame's own "img { object-fit: cover }" never stretches the mark. */
.bcard-blank img.stage-mark, .bphoto-blank img.stage-mark { display: block; width: 34%; max-width: 180px; aspect-ratio: 1; height: auto; margin-top: -6%; object-fit: contain; opacity: 0.9; transition: opacity .25s; }
.bcard-blank img.stage-house, .bphoto-blank img.stage-house { width: 22%; max-width: 120px; opacity: 0.5; }
.bcard:hover .bcard-blank img, .gfeat-cover:hover .bcard-blank img { opacity: 1; }
.bcard-n { position: absolute; right: 10px; bottom: 10px; }
.bcard-body { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0 0; }
.bcard-text { min-width: 0; flex: 1; line-height: 1.25; }
.bcard-name { display: flex; align-items: flex-start; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.bcard-name a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bcard-name svg { width: 14px; height: 14px; color: var(--yellow); flex: none; }
.bcard-name a:hover { color: var(--t2); }
.bcard-sub { color: var(--t2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcard-mods { flex: none; color: var(--t3-text); font-size: 12px; font-weight: 600; }
.bcard-owner { display: flex; align-items: center; gap: 8px; padding: 6px 0 0; color: var(--t3-text); font-size: 13px; }
.bcard-owner .avatar { width: 20px; height: 20px; font-size: 8px; }
.bcard-owner a:hover { color: var(--t1); }
.bcard-vis { position: absolute; right: 10px; top: 10px; z-index: 1; display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(12, 16, 20, 0.9); border: 1px solid var(--hair); color: var(--t1); }
.card-wrap { position: relative; min-width: 0; }
.rail-x { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-snap-type: x proximity; }
.rail-x::-webkit-scrollbar { display: none; }
.rail-x > * { flex: 0 0 220px; scroll-snap-align: start; }
.rail-x .bcard-media { aspect-ratio: 4 / 3; }

/* Photo card (routes, events, garages) */
.pcard { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); background: var(--carbon); color: var(--t1); }
.pcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.pcard:hover img { transform: scale(1.03); }
.pcard-blank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--t3-text); background: var(--carbon); }
.pcard-blank svg { width: 40px; height: 40px; }
.pcard-blank-route { background: var(--carbon); }
/* The title sits on a flat dark plate along the bottom of the photo. */
.pcard-scrim { display: none; }
.pcard-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px 12px; background: rgba(12, 16, 20, 0.84); display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.pcard-text b { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.pcard-text small { color: var(--t2); font-size: 13px; }
.pcard-badge { position: absolute; left: 12px; top: 12px; }
.pcard-date { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: center; min-width: 44px; padding: 6px 8px; border-radius: 10px; background: var(--asphalt); border: 1px solid var(--hair); line-height: 1.1; }
.pcard-date b { font-size: 18px; font-weight: 700; }
.pcard-date small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t2); }
.pcard-going { position: absolute; right: 12px; bottom: 14px; }
.pcard-logos { position: absolute; left: 12px; top: 12px; display: flex; gap: 6px; }
.pcard-garage { aspect-ratio: 16 / 9; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack .pcard { aspect-ratio: 16 / 9; }

/* Rider rings (trending riders / riders near you) */
.rail-rings > * { flex: 0 0 76px; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ring-av { display: inline-flex; padding: 3px; border-radius: 50%; border: 2px solid var(--yellow); }
.ring-av .avatar { width: 52px; height: 52px; font-size: 18px; }
.ring-name { font-size: 12px; font-weight: 500; color: var(--t2); max-width: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ring:hover .ring-name { color: var(--t1); }
.rail-rings-top { margin-bottom: 4px; }

/* Post attachments */
.attach { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--hair); background: var(--asphalt); color: var(--t1); }
.attach:hover { border-color: var(--t3-text); color: var(--t1); }
.attach-compact { gap: 10px; padding: 8px 10px; border-radius: 10px; }
.attach-compact .attach-thumb { width: 44px; height: 44px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--t3-text); }
.attach-compact .attach-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.attach-compact .attach-thumb svg { width: 22px; height: 22px; }
.attach-thumb { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--slate); flex: none; }
.attach-thumb-blank { display: inline-flex; align-items: center; justify-content: center; color: var(--t3-text); }
.attach-thumb-blank svg { width: 24px; height: 24px; }
.attach-release .attach-thumb { display: inline-flex; align-items: center; justify-content: center; }
.attach-release .attach-thumb img { width: 60%; height: auto; }
.attach-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.attach-text b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attach-text small { color: var(--t3-text); font-size: 13px; }
.attach-chev { color: var(--t3-text); flex: none; }
.attach-chev svg { width: 16px; height: 16px; }
.kicker { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3-text); }
.kicker-green { color: var(--green); }
.attach-ride { display: block; padding: 0; overflow: hidden; }
.ride-strip { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--carbon); border-bottom: 1px solid var(--hair); }
.ride-tag { flex: none; }
.ride-where { position: relative; color: var(--t2); font-size: 13px; }
.ride-stats { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--hair); }
.ride-stats .stat { flex: 1; align-items: flex-start; }
.ride-stats .stat b { font-size: 18px; }
.ride-go { display: inline-flex; align-items: center; gap: 2px; align-self: center; color: var(--yellow); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ride-go svg { width: 14px; height: 14px; }

/* Profile and garage covers */
.cover { position: relative; height: 230px; overflow: hidden; background: var(--carbon); }
.cover-short { height: 200px; }
.cover-empty { height: 150px; }
.cover-img, .strip img { width: 100%; height: 100%; object-fit: cover; }
/* Garage filmstrip: phone-sized tiles (primary 58% of a phone, the rest 34%)
   centred in the content width on the flat carbon cover. No blur, no
   scrolling and no stretching on wide screens. */
.strip { position: relative; display: flex; gap: 3px; height: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); overflow: hidden; justify-content: flex-start; }
.strip img { flex: 0 0 240px; width: 240px; }
.strip img:first-child { flex-basis: 420px; width: 420px; }
.strip-1 img:first-child { flex-basis: 640px; width: 640px; }
.strip-2 img:last-child { flex-basis: 300px; width: 300px; }
.cover::after { content: ""; position: absolute; inset: 0; background: rgba(12, 16, 20, 0.18); pointer-events: none; }
.cover-fade { z-index: 1; }
/* No cover photo: a plain carbon band with the mark placeholder avatars use. */
.cover-blank { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--carbon); }
.cover-blank img { width: auto; height: 34%; max-height: 64px; opacity: 0.22; }
.cover-empty .cover-fade, .cover-empty::after { display: none; }
/* The cover ends on a flat asphalt band the avatar overlaps, no fade. */
.cover-fade { position: absolute; inset: auto 0 0; height: 48px; background: var(--asphalt); pointer-events: none; }
.phead { position: relative; margin-top: -48px; z-index: 1; }
.phead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ring-big { display: inline-flex; padding: 3px; border-radius: 50%; border: 1px solid var(--hair); background: var(--asphalt); flex: none; }
.ring-big .avatar { width: 96px; height: 96px; font-size: 32px; }
.phead-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 6px; }
.tool-ring { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hair); background: var(--carbon); }
.phead .handle-h1 { margin-top: 12px; font-size: 32px; }
.phead .display-name { margin-top: 2px; font-size: 17px; }
.phead-id { min-width: 0; }
.phead-nums { min-width: 0; }
@media (min-width: 1024px) {
  .phead-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 46%); gap: 48px; align-items: start; }
  .phead-nums .stats-card { max-width: none; margin-top: 16px; }
  .phead-nums .stats-more { justify-content: flex-end; }
}
.pbio { margin-top: 8px; color: var(--t2); line-height: 1.4; max-width: 60ch; font-size: 15px; white-space: pre-line; }
.pbio-center { margin: 8px auto 0; text-align: center; }
.chips-facts { margin: 12px 0 0; }
.chips-facts { gap: 4px 18px; }
.chips-facts .chip { cursor: default; min-height: 0; padding: 0; border: 0; color: var(--t3-text); font-size: 14px; }
.chips-facts .chip:hover { color: var(--t3-text); }
.pgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; margin-top: 24px; padding-bottom: 40px; }
.pmain { min-width: 0; }
.pmain .lbl:first-child { margin-top: 0; }
.pmain .rail-x { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; scrollbar-width: thin; scrollbar-color: var(--slate) transparent; padding-bottom: 10px; }
.pmain .rail-x::-webkit-scrollbar { display: block; height: 4px; }
.pmain .rail-x::-webkit-scrollbar-thumb { background: var(--slate); border-radius: 2px; }
.pmain .rail-x > * { flex-basis: 200px; }
.pmain .rail-x > *:last-child { margin-right: 48px; }
.ghead { position: relative; margin-top: -60px; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ghead h1 { font-size: 30px; letter-spacing: -0.5px; margin-top: 4px; }
.logos { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
.ghead-by { margin-top: 12px; color: var(--t2); font-size: 15px; }
.ghead-by .avatar { width: 28px; height: 28px; font-size: 11px; }
.actions-center { justify-content: center; margin-top: 14px; }
.actions-center .btn { min-height: 36px; }

/* Bike detail */
.bpage { padding-top: 16px; padding-bottom: 40px; }
.bhero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; min-width: 0; }
/* Photo and the bike's identity side by side: the photo keeps its own shape, the info column
   takes the rest so there is no dead space beside it. */
.btop { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 32px; align-items: start; }
.binfo { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.binfo .btitle { margin: 0; }
.binfo .btitle h1 { font-size: 28px; }
.binfo .btitle-owner { align-self: flex-start; }
.binfo-facts { margin: 0; }
.binfo .chips-row { margin: 0; }
/* The whole photo, never cropped and never letterboxed: the frame takes the photo's own shape,
   capped in height so it sits in proportion with the page. */
.bphoto { position: relative; margin: 0; width: fit-content; max-width: 100%; justify-self: start; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); background: var(--carbon); }
.bphoto-main { display: block; width: auto; height: auto; max-width: 100%; max-height: min(64vh, 560px); }
.bphoto:has(.bphoto-blank) { width: 100%; aspect-ratio: 16 / 9; max-height: 460px; }
/* With several photos the frame stays put while the rider steps through them. */
.bphoto-many { width: 100%; }
.bphoto-many .bphoto-main { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #07090c; }
.bphoto-blank { position: absolute; inset: 0; }
.bphoto-blank svg { width: 48px; height: 48px; }
.bthumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.bthumbs::-webkit-scrollbar { display: none; }
.bthumbs button { flex: 0 0 120px; height: 80px; padding: 0; border-radius: 10px; border: 1px solid var(--hair); background: var(--carbon); overflow: hidden; cursor: pointer; opacity: 0.6; transition: opacity .15s, border-color .15s; }
.bthumbs button:hover, .bthumbs button.is-on { opacity: 1; }
.bthumbs button.is-on { border-color: var(--yellow-line); }
.bthumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.btitle { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.btitle-text { flex: 1; min-width: 0; line-height: 1.2; }
.btitle h1 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.btitle-make { color: var(--t2); font-size: 15px; margin-top: 4px; }
.btitle-owner { flex: none; gap: 10px; color: var(--t2); font-size: 14px; }
.btitle-owner > span { display: flex; flex-direction: column; line-height: 1.25; }
.btitle-owner b { color: var(--t1); font-weight: 600; }
.btitle-owner small { color: var(--t3-text); font-size: 12px; }
.btitle-owner .avatar { width: 36px; height: 36px; font-size: 13px; }
.tabs-bike { margin: 16px 0 20px; }
.split-bike { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
.panel { padding: 0 0 20px; border-bottom: 1px solid var(--hair); margin-bottom: 20px; }
.panel-h { font-size: 17px; margin-bottom: 12px; display: flex; align-items: baseline; }
.panel-empty { color: var(--t3-text); font-size: 15px; }
.panel-notes { margin-top: 12px; color: var(--t2); font-size: 15px; line-height: 1.5; }
.cells { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.cell { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--asphalt); border: 1px solid var(--hair); }
.cell-ic { display: inline-flex; color: var(--yellow); flex: none; }
.cell span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cell small { color: var(--t3-text); font-size: 12px; }
.cell b { font-size: 15px; font-weight: 600; }
.facts-wide { margin: 0; }
.facts-wide div:last-child { border-bottom: 0; }
.panel .mods { margin: 0; }
.panel .mods li { padding: 12px 0; border-top: 1px solid var(--hair); }
.panel .mods li:first-child { border-top: 0; padding-top: 0; }
.panel .muted { margin-top: 4px; }
.panel-h .lbl-more { margin-left: auto; font-size: 14px; }
.panel-foot { display: inline-flex; align-items: center; gap: 2px; margin-top: 12px; color: var(--t2); font-size: 14px; font-weight: 500; }
.panel-foot:hover { color: var(--t1); }
.panel-foot svg { width: 14px; height: 14px; }
.tabs-bike .lbl-n { margin-left: 4px; }

/* Bike tabs other than Overview: a compact identity row instead of the hero */
.bhead { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.bhead-media { flex: none; display: block; width: 88px; height: 66px; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); background: var(--carbon); display: grid; place-items: center; }
.bhead-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bhead-text { flex: 1; min-width: 0; }
.bhead-text h1 { font-size: 24px; line-height: 1.15; letter-spacing: -0.02em; }
.bhead-text h1 a { color: var(--t1); }
.bhead .btitle-owner .avatar { width: 32px; height: 32px; font-size: 12px; }

/* Modifications tab */
.bstats { margin: 0 0 24px; max-width: 640px; }
.mgroup { margin-bottom: 28px; }
.mgroup-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.mgroup-h .overline { margin: 0; }
.mgroup-cost { color: var(--t2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mrow { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.mrow-main { min-width: 0; }
.mrow-brand { color: var(--t3-text); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.mrow .mod-name { margin-top: 2px; font-size: 16px; }
.mrow-notes { color: var(--t2); font-size: 14px; line-height: 1.5; margin-top: 4px; }
.mrow-lines { white-space: pre-line; }
.mrow-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.mrow-meta b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mrow-meta span { color: var(--t3-text); font-size: 13px; white-space: nowrap; }
.mrow-edit { color: var(--t2); font-size: 13px; font-weight: 600; margin-top: 4px; }
.mrow-edit:hover { color: var(--t1); }
/* Owner extras on the bike page's Service tab: intervals, recalls (expandable) and fuel. */
.mgroup > .panel-empty { padding: 14px 0; border-bottom: 1px solid var(--hair); }
.mgroup > .rail-note { margin-top: 10px; }
.mrow-meta .tag { color: var(--t2); }
.mrow-meta .tag-red, .mgroup-h .tag-red { color: var(--red); }
.mrow-meta .tag-yellow { color: var(--yellow); }
.mrow-meta .tag-green { color: var(--green); }
.recall { width: 100%; }
.recall > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.recall > summary::-webkit-details-marker { display: none; }
.recall > summary .mrow-notes { flex-basis: 100%; margin-top: 0; }
.recall .overline { margin-top: 12px; }
.recall-p { color: var(--t1); font-size: 14px; line-height: 1.5; margin-top: 2px; }
.recall .lbl-more { display: inline-block; margin-top: 12px; }
.recall-done > summary { cursor: pointer; color: var(--yellow); font-size: 14px; font-weight: 600; padding: 12px 0; }
.log-actions { margin: 0 0 16px; display: flex; justify-content: flex-end; }
/* Interval rows: state, Log Service and a More menu (Mark Done Today, Edit Interval). */
.ival-row .mod-name .st { margin-left: 8px; vertical-align: 2px; }
.ival-meta { flex-direction: row; align-items: center; gap: 10px; }
.ival-meta .pmenu > summary { color: var(--t2); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.ival-meta .pmenu > summary:hover { color: var(--t1); }
.ival-due { color: var(--t1); }
.ival-due.is-overdue { color: var(--red); }
@media (max-width: 640px) {
  .ival-row { flex-direction: column; gap: 10px; }
  .ival-meta { justify-content: flex-start; flex-wrap: wrap; }
  .ival-meta .pmenu-sheet { left: 0; right: auto; }
}
.rec-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rec-thumbs img { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--hair); }
.rec-media { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.rec-media[hidden] { display: none; }
.rec-pick { margin-top: 10px; align-self: flex-start; }
.rec-pick[hidden] { display: none; }

/* Posts and build updates across the page, columns divided by hairlines */
.post-cols { columns: 3 300px; column-gap: 32px; column-rule: 1px solid var(--hair); border-top: 1px solid var(--hair); }
.post-cols .post { break-inside: avoid; padding: 18px 0 12px; margin: 0; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none; }
.post-cols .post-body { font-size: 15px; }

/* Build Log tab */
.blog { border-top: 1px solid var(--hair); margin-bottom: 8px; }
.blog-row { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.blog-title { font-size: 20px; letter-spacing: -0.01em; margin-top: 6px; }
.blog-sum { color: var(--t2); font-size: 15px; line-height: 1.55; margin-top: 6px; max-width: 72ch; }

/* Discover search pill */
.search-pill { display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 44px; border-radius: 8px; border: 1px solid var(--hair); background: var(--carbon); color: var(--t3-text); margin: 0 0 16px; }
.search-pill:focus-within { border-color: var(--yellow-line); }
.search-pill input { flex: 1; min-width: 0; background: none; border: 0; color: var(--t1); font: inherit; font-size: 16px; outline: none; }
.search-pill input::placeholder { color: var(--t3-text); }
.screen .tabs { margin-bottom: 16px; }

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .pgrid, .split-bike { grid-template-columns: 1fr; gap: 24px; }
  .btop { grid-template-columns: 1fr; gap: 20px; }
  .bphoto { justify-self: center; }
}
@media (max-width: 720px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cover { height: 190px; }
  .cover-short { height: 170px; }
  .strip { padding: 0; }
  .strip img { flex-basis: 34%; width: 34%; }
  .strip img:first-child { flex-basis: 58%; width: 58%; }
  .strip-1 img:first-child { flex-basis: 100%; width: 100%; }
  .strip-2 img:last-child { flex-basis: 42%; width: 42%; }
  .phead { margin-top: -40px; }
  .ring-big .avatar { width: 80px; height: 80px; font-size: 26px; }
  .phead .handle-h1 { font-size: 26px; }
  .phead-tools .btn { min-height: 36px; padding: 0 12px; font-size: 14px; }
  .stats-card { max-width: none; padding: 12px 10px; }
  .stat b { font-size: 19px; }
  .pgrid { padding-bottom: 24px; }
  .pmain .rail-x { margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; }
  .pmain .rail-x > * { flex-basis: 180px; }
  .bphoto { width: 100%; }
  .bphoto-main { width: 100%; max-height: 70vh; object-fit: cover; }
  .bphoto:has(.bphoto-blank) { aspect-ratio: 4 / 3; }
  .btitle h1 { font-size: 20px; }
  .bhead { flex-wrap: wrap; gap: 12px; }
  .bhead-media { width: 64px; height: 48px; }
  .bhead-text h1 { font-size: 20px; }
  .bhead .btitle-owner { flex-basis: 100%; }
  .mrow { flex-direction: column; gap: 6px; }
  .mrow-meta { flex-direction: row; align-items: baseline; gap: 10px; }
  .cells { grid-template-columns: 1fr 1fr; }
  .ghead { margin-top: -50px; }
  .ghead h1 { font-size: 24px; }
  .mk-48 { width: 40px; height: 40px; }
  .pcard-text b { font-size: 15px; }
  .posts .post { padding: 14px 0 8px; }
  .post-head .avatar { width: 40px; height: 40px; font-size: 14px; }
  .back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: -8px; border-radius: 8px; color: var(--t1); flex: none; }
  .back:hover { background: var(--carbon); }
  .lockup-after-back .lockup-word { display: none; }
  .visitor { flex-direction: row; align-items: center; gap: 12px; padding: 10px 0; }
  .visitor p { font-size: 14px; flex: 1; min-width: 0; }
  .visitor .actions .btn { min-height: 34px; padding: 0 12px; font-size: 14px; }
  .visitor .actions a:last-child { display: none; }
  .page-head-row .btn { min-height: 36px; padding: 0 12px; font-size: 14px; }
  .pgrid .rail { display: block; }
}

.strip a { display: contents; }
.strip a img { transition: filter 0.2s; }
.strip a:hover img { filter: brightness(1.12); }
.ghead-left { align-items: flex-start; text-align: left; margin-top: 0; padding-top: 24px; }
.ghead-left .logos { justify-content: flex-start; }
.ghead-left .stats-card { margin-top: 16px; }
.ghead-left .ghead-by { margin-top: 10px; }
.ghead-left .actions { margin-top: 16px; }
.screen-after-cover { padding-top: 28px; }
.lbl-pick .menu summary { border-radius: 8px; padding: 4px 8px; margin-left: -8px; align-items: center; gap: 6px; color: var(--t2); }
.lbl-pick .menu summary:hover, .lbl-pick .menu[open] summary { background: var(--slate); color: var(--t1); }
.lbl-pick .menu summary svg { width: 14px; height: 14px; transform: rotate(90deg); }
.menu-sheet-garage { left: 0; right: auto; width: 240px; }
.menu-sheet-garage a { display: flex; justify-content: space-between; align-items: center; }
.menu-sheet-garage a small { color: var(--t3-text); font-size: 12px; }
.menu-sheet-garage a.is-on { color: var(--yellow); }
.muted { color: var(--t3-text); font-size: 14px; margin-top: 10px; }

/* Article editor toolbar: stays under the site header while the body scrolls. Groups are
   separated by hairlines; a pressed tool shows what the text at the caret already is. */
.fmt { position: sticky; top: 56px; z-index: 4; display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center; margin: 12px 0 0; padding: 8px 0; background: var(--asphalt); border-bottom: 1px solid var(--hair); }
.fmt-grp { display: flex; align-items: center; gap: 2px; padding: 0 5px; border-right: 1px solid var(--hair); }
.fmt-grp:first-child { padding-left: 0; }
.fmt-grp-history, .fmt-grp-end { border-right: 0; }
.fmt-grp-end { margin-left: auto; padding-right: 0; }
.fmt button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--t2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fmt button svg { display: block; }
.fmt button:hover { color: var(--t1); background: var(--slate); }
.fmt button[aria-pressed="true"] { color: var(--yellow); background: var(--yellow-bg); border-color: var(--yellow-line); }
.fmt-style select { height: 32px; padding: 0 28px 0 10px; border-radius: 6px; border: 1px solid var(--hair); background: var(--carbon); color: var(--t1); font: inherit; font-size: 13px; font-weight: 600; min-width: 120px; }
.fmt-note { padding: 0 8px; color: var(--t3-text); font-size: 13px; white-space: nowrap; }
.fmt .fmt-source { width: auto; padding: 0 8px; color: var(--t3-text); font-weight: 500; }
.fmt .fmt-source[aria-pressed="true"] { color: var(--yellow); background: var(--yellow-bg); border-color: var(--yellow-line); }
.fmt-pop { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.fmt-pop .field { flex: 1 1 240px; margin: 0; }
.fmt-pop .actions { margin: 0 0 2px; }
/* The formatted body: the article as readers will see it, editable in place. */
.editor-rich { min-height: 480px; margin-top: 16px; padding: 24px 28px 48px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); outline: none; max-width: none; font-size: 18px; line-height: 1.65; caret-color: var(--yellow); }
.editor-rich.prose { padding-top: 24px; }
.editor-rich:focus, .editor-rich.is-drop { border-color: var(--yellow-line); }
.editor-rich.is-empty::before { content: attr(data-placeholder); color: var(--t3-text); pointer-events: none; }
.editor-rich > :first-child { margin-top: 0; }
.editor-rich h2, .editor-rich h3 { margin-top: 1.4em; }
.editor-rich img { max-width: 100%; height: auto; display: block; border-radius: 6px; }
.editor-rich p > img:only-child { margin: 0; }
.editor-rich a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; cursor: text; }
.editor-rich code { background: var(--slate); }
.editor-rich pre { background: var(--slate); }
.editor-rich .img-up { padding: 24px; border: 1px solid var(--hair); border-radius: 6px; text-align: center; color: var(--t3-text); font-size: 14px; }
.editor.is-rich .editor-body { display: none; }
.editor.is-source .editor-rich { display: none; }
.editor.is-rich .editor-help { display: none; }
@media (max-width: 700px) {
  .fmt { top: 0; }
  .fmt-note { display: none; }
  .fmt-grp { padding: 0 4px; }
  .editor-rich { padding: 16px; font-size: 17px; }
}

/* Badge detail: the app's badge sheet. Flat Carbon panel, hairline rules, no shadow. */
.rbadge[data-badge] { cursor: pointer; }
.bsheet { background: var(--carbon); color: var(--t1); border: 1px solid var(--hair); border-radius: 16px; padding: 28px 24px 20px; width: min(400px, calc(100vw - 32px)); text-align: center; }
.bsheet::backdrop { background: rgba(12, 16, 20, 0.8); }
.bsheet-icon { display: block; margin: 0 auto 12px; }
.bsheet-title { font-size: 22px; font-weight: 700; margin: 0 0 12px; }
.bsheet-desc { color: var(--t2); font-size: 15px; line-height: 1.45; margin: 0; padding: 0 0 16px; border-bottom: 1px solid var(--hair); }
.bsheet-req { text-align: left; padding: 16px 0; border-bottom: 1px solid var(--hair); margin-bottom: 16px; }
.bsheet-h { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.bsheet-req-text { color: var(--t2); font-size: 14px; line-height: 1.4; margin: 0; }
.bsheet-help { display: block; text-align: left; color: var(--yellow); font-size: 14px; font-weight: 600; margin: -4px 0 16px; text-decoration: none; }
.bsheet-help:hover { text-decoration: underline; }
.bsheet-help[hidden] { display: none; }
.bsheet-done { width: 100%; justify-content: center; min-height: 44px; }

/* Visually hidden, still read by screen readers. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Follower lists and places. */
.place-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--t2); font-size: 15px; margin: 8px 0 16px; }
.place-meta .star { color: var(--yellow); }
.place-amen { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 16px; padding: 0; list-style: none; font-size: 15px; color: var(--t2); }
.place-amen li + li::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px; border-radius: 50%; background: var(--t3); vertical-align: middle; }
.review { padding: 14px 0; border-top: 1px solid var(--hair); list-style: none; }
.review-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.review p { margin: 6px 0 0; color: var(--t1); }
.reviews { margin: 0; padding: 0; border-bottom: 1px solid var(--hair); }
.field-hint { color: var(--t3-text); font-size: 14px; margin: -6px 0 16px; line-height: 1.45; }
/* Interest suggestions under the field: plain hashtag text, a tap adds one. */
.tag-suggest .linkish { color: var(--yellow); text-decoration: none; margin-left: 10px; }
.tag-suggest .linkish:hover { color: var(--t1); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--t2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.stat-link { color: inherit; text-decoration: none; border-radius: 8px; }
.stat-link:hover b { color: var(--yellow); }
.seg-scroll { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }

/* Accessibility: visible focus on borderless fields, skip link target. */
main:focus { outline: none; }
.compose:focus-within { border-bottom-color: var(--yellow-line); }
.editor-title:focus, .editor-sub:focus, .editor-body:focus { border-bottom-color: var(--yellow-line); }
.skip:focus { color: var(--t1); outline: 2px solid var(--yellow); outline-offset: 2px; }
h1.overline, h2.overline { line-height: 1.55; text-wrap: wrap; }

/* Chat: an app-style screen. The page never scrolls; the inbox and the thread
   scroll inside their own panes and the composer stays pinned at the bottom. */
body:has(.chat) { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box; }
body:has(.chat) > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body:has(.chat) > .foot { display: none; }
.chat { flex: 1; min-height: 0; width: 100%; box-sizing: border-box; align-items: stretch; padding-bottom: 20px; }
.chat-list { display: flex; flex-direction: column; min-height: 0; }
.chat-list .convos { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-list .convos ul { list-style: none; margin: 0; padding: 0; }
.convos-label { margin: 16px 0 4px; font-size: 13px; font-weight: 600; color: var(--t2); }
.convos-label span { color: var(--t3-text); font-weight: 500; margin-left: 4px; }
.chat-main { display: flex; flex-direction: column; min-height: 0; }
.chat-main .chat-head, .chat-main .request, .chat-main .compose-chat { flex: none; }
.chat-main .msgs { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 24px 4px; list-style: none; }
.chat-main .compose-chat { margin-top: 0; padding-top: 14px; border-top: 1px solid var(--hair); border-bottom: 0; }
@media (max-width: 720px) {
  .chat-list { display: none; }
  .chat-index .chat-list { display: flex; }
  .chat-index .chat-main { display: none; }
  .chat-index { grid-template-columns: 1fr; }
  .chat { padding-bottom: 8px; }
}

/* RSVP: the segmented control as buttons in a form. */
.rsvp { margin: 0 0 24px; }
.rsvp .seg { margin-bottom: 8px; }
.seg button { flex: none; min-height: 34px; padding: 0 16px; display: inline-flex; align-items: center; border: 0; border-radius: 5px; background: none; color: var(--t2); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.seg button:hover { color: var(--t1); }
.seg button[aria-pressed="true"] { background: var(--yellow-bg); color: var(--yellow); outline: 1px solid var(--yellow-line); outline-offset: -1px; }
.seg button:disabled { color: var(--t3-text); cursor: not-allowed; }
.rsvp-note { color: var(--t2); padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.cap { display: block; height: 3px; margin-top: 8px; background: var(--slate); border-radius: 2px; overflow: hidden; }
.cap > span { display: block; height: 100%; background: var(--yellow-line); }

/* Place review: five stars, then the optional text. */
.review-form { padding: 16px 0 8px; border-bottom: 1px solid var(--hair); margin-bottom: 8px; }
.rate { border: 0; margin: 0 0 12px; padding: 0; }
.rate legend { padding: 0; margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }
.rate-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.rate-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-stars label { color: var(--t3-text); cursor: pointer; padding: 4px; line-height: 0; border-radius: 6px; }
.rate-stars input:checked ~ label, .rate-stars label:hover, .rate-stars label:hover ~ label { color: var(--yellow); }
.rate-stars input:focus-visible + label { outline: 2px solid var(--yellow); outline-offset: 2px; }
.review-del { margin: 0 0 16px; }
.review-cta { margin: 0 0 16px; }

/* Composer photos: a row of square thumbnails, each with a thin upload bar. */
.compose-media { list-style: none; margin: 12px 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 360px; }
.compose-media[hidden] { display: none; }
.cm { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--carbon); border: 1px solid var(--hair); }
.cm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--slate); }
.cm-bar > span { display: block; height: 100%; width: 0; background: var(--yellow-line); transition: width 0.2s; }
.cm.done .cm-bar { display: none; }
.cm.failed { border-color: var(--red); }
.cm-state { position: absolute; left: 6px; bottom: 8px; font-size: 11px; font-weight: 600; color: var(--t1); }
.cm.failed img { opacity: 0.4; }
.cm-retry { position: absolute; left: 6px; right: 6px; top: 50%; transform: translateY(-50%); min-height: 30px; border: 1px solid var(--hair); border-radius: 6px; background: var(--asphalt); color: var(--t1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cm-retry:hover { border-color: var(--t3-text); }
.cm-x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: 50%; background: var(--asphalt); color: var(--t1); cursor: pointer; padding: 0; }
.compose-photos { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 6px; color: var(--t2); font-size: 14px; font-weight: 600; cursor: pointer; }
.compose-photos[hidden] { display: none; }
.compose-photos { gap: 6px; }
.compose-photos svg { width: 18px; height: 18px; }
.compose-vis select { min-height: 32px; }
.compose-more { margin-left: auto; }
.compose-more > summary { gap: 6px; }
.compose-more > summary svg { width: 16px; height: 16px; }
.compose-row .compose-more ~ .btn { margin-left: 0; }
/* Bike and Garage pickers in the composer row: the rider's own bikes and garages as flat rows. */
.compose-pick > summary { gap: 6px; max-width: 220px; }
.compose-pick > summary svg { width: 18px; height: 18px; flex: none; }
.compose-pick > summary span { overflow: hidden; text-overflow: ellipsis; }
.pick-sheet { max-height: 360px; overflow-y: auto; }
.pick-row { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.pick-row:last-child { border-bottom: 0; }
.pick-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-thumb { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; border: 1px solid transparent; background: var(--slate); color: var(--t3-text); }
.pick-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pick-thumb svg { width: 22px; height: 22px; }
.pick-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pick-text b { color: var(--t2); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-text small { color: var(--t3-text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-text small:empty { display: none; }
.pick-row:hover b, .pick-row:has(input:checked) b { color: var(--t1); }
.pick-row:has(input:checked) .pick-thumb { border-color: var(--yellow-line); }
.pick-row:has(input:focus-visible) { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.dcl-h { margin: 12px 0 4px; color: var(--t3-text); font-size: 12px; font-weight: 600; }
.dcl-sheet .field { margin: 8px 0; }
.dcl-sheet .field select { width: 100%; min-height: 40px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); padding: 8px 10px; font-size: 15px; }
.compose-photos:hover, .compose-photos:focus-within { color: var(--t1); border-color: var(--yellow-line); }
.compose-photos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.compose-error { margin: 10px 0 0 48px; }
@media (max-width: 480px) { .compose-media, .compose-error { margin-left: 0; } }

/* ---- Pro (membership and pricing) ---- */
.pro .section-head h2 { font-size: 20px; margin: 0; }
.pro-status { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.pro-status .figure { padding: 18px 20px 20px; gap: 6px; }
.pro-status .figure span { order: -1; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3-text); }
.pro-status .figure b { font-size: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pro-status .figure small { font-size: 14px; line-height: 1.45; color: var(--t2); }
.pro-status .pill { font-size: 11px; }
.pro-status b.is-green { color: var(--green); }
.pro-status b.is-red { color: var(--red); }
.pro-status b.is-dim { color: var(--t2); }
.perks { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.perk:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.perk { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 22px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.perk-ic { display: inline-flex; color: var(--yellow); margin-bottom: 6px; }
.perk b { font-size: 16px; font-weight: 600; }
.perk span:not(.perk-ic) { font-size: 14px; line-height: 1.45; color: var(--t2); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.plan { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 28px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.plan-best { border-top: 2px solid var(--yellow); margin-top: -1px; }
.plan .kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--t1); font-size: 12px; }
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.plan-price b { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--t3-text); font-size: 14px; font-weight: 500; }
.plan-sub { color: var(--t2); font-size: 14px; line-height: 1.45; min-height: 2.9em; }
.plan form, .plan .plan-cta { margin-top: 18px; }
.plan .btn { width: 100%; justify-content: center; }
.pro .rows-flat .row-sub { white-space: normal; }

/* Edited label and edit history */
.post-edited { color: var(--t3-text); }
.post-edited:hover { color: var(--t1); }
.pmenu-history { display: inline-block; vertical-align: baseline; }
.pmenu-history > summary { padding: 0; border-radius: 0; cursor: pointer; }
.pmenu-history[open] > summary { background: none; }
.comment-edited { font-size: 13px; margin-left: 8px; }
.post-end .pmenu-history { margin-left: 8px; font-size: 13px; }
.pmenu-sheet-history { left: 0; right: auto; width: 440px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px; cursor: auto; }
.post-end .pmenu-sheet-history { left: auto; right: 0; }
.history-pop { border-top: 0; }
.history-pop .version { padding: 12px 0; }
.history-pop .version:last-child { border-bottom: 0; }
.history-pop .version-meta { font-size: 13px; margin-bottom: 6px; }
.history-pop .version-meta b { font-size: 14px; }
.history-pop .post-body { font-size: 15px; }
.history { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.version { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.version-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; font-size: 14px; color: var(--t3-text); }
.version-meta b { color: var(--t1); font-size: 15px; }
.version-meta a { color: var(--t2); }
.version-meta time { margin-left: auto; white-space: nowrap; }
.version.is-hidden .post-body { color: var(--t2); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; cursor: pointer; }
.check input { margin-top: 4px; accent-color: var(--yellow); width: 18px; height: 18px; flex: none; }
.check span { display: flex; flex-direction: column; gap: 3px; }
.check b { color: var(--t1); font-weight: 600; }
.check small { color: var(--t3-text); font-size: 13px; line-height: 1.4; }

/* Notifications popover */
.menu-notes summary { border-radius: 8px; }
.menu-notes[open] summary { color: var(--t1); background: var(--carbon); }
.menu-sheet-notes { width: 380px; max-width: calc(100vw - 32px); padding: 6px 6px 0; max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
.notes-panel { border-top: 0; }
.notes-panel .note-link { padding: 10px 8px; gap: 10px; border-radius: 6px; }
.notes-panel .note-link:hover { background: var(--slate); }
.notes-panel .note-link { display: flex; align-items: center; }
.notes-panel .note .avatar, .notes-panel .note .emblem { width: 28px; height: 28px; font-size: 11px; }
.notes-panel .note .emblem svg { width: 14px; height: 14px; }
.notes-panel .note .emblem img { width: 16px; height: 16px; }
.notes-panel .note-title { font-size: 14px; }
.notes-panel .note-body { font-size: 13px; }
.notes-panel .note time { font-size: 12px; }
.notes-empty { padding: 20px 12px 24px; color: var(--t3-text); font-size: 14px; text-align: center; }
.menu-sheet .notes-all { position: sticky; bottom: 0; margin-top: 4px; padding: 12px; border-top: 1px solid var(--hair); background: var(--carbon); border-radius: 0; text-align: center; color: var(--yellow); font-weight: 600; }

/* Edit Garage: cover photo field, live web address, delete disclosure */
.photo-field { margin-bottom: 8px; }
.photo-frame { position: relative; aspect-ratio: 2 / 1; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.photo-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-frame.is-empty img { display: none; }
.photo-empty { display: none; position: absolute; inset: 0; padding: 24px; place-items: center; text-align: center; color: var(--t3-text); font-size: 14px; line-height: 1.45; }
.photo-frame.is-empty .photo-empty { display: grid; }
.photo-frame .cm-bar { display: none; }
.photo-frame.is-busy .cm-bar { display: block; }
.photo-frame.is-busy img { opacity: 0.5; }
.photo-actions { margin-top: 12px; }
.photo-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.addr { color: var(--t2); margin-top: -8px; word-break: break-all; }
.addr b { color: var(--t1); }
.danger { margin-top: 40px; border-top: 1px solid var(--hair); padding-top: 16px; }
.danger summary { color: var(--red); font-weight: 600; cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.danger summary::-webkit-details-marker { display: none; }
.danger summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-top: -3px; }
.danger[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.danger p { color: var(--t3-text); font-size: 14px; line-height: 1.5; margin: 12px 0; max-width: 520px; }

/* Edit Garage: form on the left, a live preview and the garage's bikes on the right */
.ge-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 40px; padding-bottom: 28px; }
.ge-head h1 { margin: 0; }
.ge-head .overline { margin-bottom: 8px; }
.ge-head-actions { display: flex; gap: 10px; }
.ge { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; padding-bottom: 72px; }
.ge-form { max-width: none; }
.ge-cover { margin-bottom: 32px; }
.ge-cover .photo-frame { aspect-ratio: 21 / 9; border-radius: 10px; }
.ge-cover .photo-empty { gap: 6px; align-content: center; }
.ge-cover .photo-empty b { display: block; color: var(--t1); font-size: 16px; }
.ge-cover-actions { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: flex; gap: 8px; }
.ge-cover-actions .btn { background: rgba(12, 16, 20, 0.78); border-color: rgba(255, 255, 255, 0.16); }
.ge-cover-actions .btn:hover { background: rgba(12, 16, 20, 0.92); }
.ge-cover .photo-frame.is-empty .photo-empty { padding-bottom: 84px; }
.ge-cover .photo-frame.is-empty .ge-cover-actions { left: 0; right: 0; bottom: auto; top: calc(50% + 18px); justify-content: center; }
.ge-form .field > span { display: flex; align-items: baseline; gap: 8px; }
.ge-form .field > span i { font-style: normal; font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--t3-text); }
.ge-count { margin-left: auto; font-style: normal; font-weight: 500; letter-spacing: 0; color: var(--t3-text); font-variant-numeric: tabular-nums; }
.ge-count.is-low { color: var(--yellow); }
.field > .ge-addr { font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--t1); }
.ge-cover-actions [hidden] { display: none; }
.ge-addr { display: flex; align-items: stretch; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.ge-addr:focus-within { border-color: var(--yellow-line); }
.ge-addr-pre { display: flex; align-items: center; padding: 0 0 0 12px; color: var(--t3-text); font-size: 15px; white-space: nowrap; }
.field .ge-addr input { border: 0; border-radius: 0; padding-left: 1px; min-width: 0; }
.ge-save { margin-top: 28px; }
.ge-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 28px; }
.ge-panel .overline { margin: 0 0 12px; }
.ge-panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.ge-panel-head a { font-size: 14px; font-weight: 600; color: var(--yellow); }
.ge-preview { display: block; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--carbon); color: inherit; }
.ge-preview:hover { border-color: rgba(255, 255, 255, 0.16); }
.ge-preview-cover { position: relative; display: block; aspect-ratio: 2 / 1; background: var(--slate); }
.ge-preview-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ge-preview-cover .ge-preview-mark { display: none; }
.ge-preview-cover.is-empty img { display: none; }
.ge-preview-cover.is-empty .ge-preview-mark { display: block; position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; object-fit: contain; opacity: 0.25; }
.ge-preview-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.ge-preview-body > b { font-size: 18px; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ge-preview-desc { color: var(--t2); font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ge-preview-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--t3-text); font-size: 13px; }
.ge-preview-meta span + span::before { content: "·"; margin-right: 12px; color: var(--t3-text); }
.ge-preview-url { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--hair); color: var(--t3-text); font-size: 13px; overflow-wrap: anywhere; }
.ge-preview-url b { color: var(--t1); font-weight: 600; }
.ge-bikes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.ge-bikes li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.ge-bike-thumb { width: 56px; height: 42px; flex: none; border-radius: 6px; overflow: hidden; background: var(--slate); }
.ge-bike-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ge-bike-thumb.is-empty img { object-fit: contain; padding: 9px; opacity: 0.3; }
.ge-bike-name { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--t1); }
.ge-bike-name b, .ge-bike-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ge-bike-name small { color: var(--t3-text); font-size: 13px; }
.ge-bike-edit { font-size: 14px; font-weight: 600; color: var(--t2); padding: 8px 4px; }
.ge-bike-edit:hover { color: var(--yellow); }
.ge-none { font-size: 14px; margin: 0; }
.ge-note { color: var(--t3-text); font-size: 13px; margin: 12px 0 0; }
.ge-side .danger { margin-top: 0; }
@media (max-width: 960px) {
  .ge { grid-template-columns: 1fr; gap: 36px; }
  .ge-side { position: static; }
}
@media (max-width: 640px) {
  .ge-head { padding-top: 24px; padding-bottom: 20px; }
  .ge-head-actions { display: none; }
  .ge-cover .photo-frame { aspect-ratio: 16 / 10; }
  .ge-cover .photo-frame.is-empty { aspect-ratio: 4 / 3; }
  .ge-cover-actions { right: 10px; bottom: 10px; }
  .ge-addr-pre { font-size: 13px; }
}

/* Documents: the library on the left, Add a Document beside it */
.ge-sub { color: var(--t2); max-width: 620px; margin: 12px 0 0; line-height: 1.5; }
.dl-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-bottom: 36px; }
.dl-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; }
.dl-stats > div + div { padding-left: 20px; border-left: 1px solid var(--hair); }
.dl-stats b { font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dl-stats span { font-size: 13px; color: var(--t3-text); }
.dl-stats .is-expiring b { color: var(--yellow); }
.dl-stats .is-expired b { color: var(--red); }
.dl-group + .dl-group { margin-top: 36px; }
.dl-group-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.dl-group-head h2 { margin: 0; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); font-weight: 600; }
.dl-group-head span { color: var(--t3-text); font-size: 14px; font-variant-numeric: tabular-nums; }
.dl-empty { color: var(--t3-text); font-size: 15px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.dl-tile { flex: none; width: 44px; height: 54px; border-radius: 6px; background: var(--slate); border: 1px solid var(--hair); display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: var(--t2); }
.dl-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dl-title { color: var(--t1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-title:hover { color: var(--yellow); }
.dl-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; color: var(--t3-text); }
.dl-meta span + span::before { content: "·"; margin-right: 10px; color: var(--t3-text); }
.is-expiring .dl-exp { color: var(--yellow); }
.is-expired .dl-exp { color: var(--red); }
.dl-kept { color: var(--t2); }
.dl-notes { font-size: 13px; color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-actions { flex: none; display: flex; gap: 8px; }
.dl-actions form { margin: 0; }
.dl-delete:hover { color: var(--red); border-color: rgba(240, 68, 82, 0.4); }
.dl-add { max-width: none; }
.dl-add .field-row { gap: 0 12px; }
.dl-add select { width: 100%; min-height: 46px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 15px; padding: 0 10px; }
.dl-add select:focus { border-color: var(--yellow-line); outline: none; }
.dl-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; margin-bottom: 18px; border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 10px; background: var(--carbon); text-align: center; cursor: pointer; }
.dl-drop:hover, .dl-drop:focus-within { border-color: var(--yellow-line); }
.dl-drop b { color: var(--yellow); font-size: 15px; }
.dl-drop small { color: var(--t3-text); font-size: 13px; }
.dl-drop .doc-name { color: var(--t1); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.dl-drop .doc-name:empty { display: none; }
.dl-add .doc-bar { margin: -10px 0 16px; }
@media (max-width: 640px) {
  .dl-stats > div + div { padding-left: 14px; }
  .dl-stats b { font-size: 22px; }
  .dl-row { flex-wrap: wrap; }
  .dl-actions { width: 100%; padding-left: 58px; }
  .dl-add .field-row { grid-template-columns: 1fr; }
}

/* Routes: the signed-in rider's own corner, above the explorer */
.rx-mine { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 0 0 32px; }
.rx-mine a { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; color: var(--t1); text-decoration: none; border-left: 1px solid var(--hair); min-height: 44px; transition: background .15s; }
.rx-mine a:first-child { border-left: 0; padding-left: 0; }
.rx-mine a:hover { background: var(--carbon); }
.rx-mine a:first-child:hover { padding-left: 12px; }
.rx-mine b { font-size: 15px; font-weight: 600; }
.rx-mine span { font-size: 13px; color: var(--t2); }
.rx-mine .rx-mine-plan b { color: var(--yellow); }
@media (max-width: 720px) {
  .rx-mine { grid-template-columns: 1fr 1fr; }
  .rx-mine a { padding: 14px 12px; }
  .rx-mine a:nth-child(odd) { border-left: 0; padding-left: 0; }
  .rx-mine a:nth-child(n+3) { border-top: 1px solid var(--hair); }
}

/* /routes/mine: the rider's own routes, in the Routes section rather than on the profile */
.mine-tabs { margin: 8px 0 24px; }
.mine-tabs .lbl-n { margin-left: 6px; }
.mine-tabs a[aria-current] .lbl-n { color: var(--t2); }
.mine-note { margin: 0 0 16px; max-width: 64ch; font-size: 14px; }
.mine-body .rx-none { border-top: 0; padding-top: 16px; }

/* Settings: profile photo first, the plate only as the fallback */
.avatar-field { display: flex; gap: 20px; align-items: center; margin-bottom: 8px; }
.avatar-frame { position: relative; width: 96px; height: 96px; flex: none; border-radius: 50%; overflow: hidden; background: var(--carbon); border: 1px solid var(--hair); }
.avatar-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar-frame .cm-bar { display: none; }
.avatar-frame.is-busy .cm-bar { display: block; }
.avatar-frame.is-busy img { opacity: 0.5; }
.avatar-side { flex: 1; min-width: 0; }
.avatar-side .avatar-note { margin: 0; }
.avatar-side .photo-actions { margin-top: 10px; }
.plate-picker { margin-top: 20px; }
.plate-picker h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; color: var(--t1); }
.plate-picker > .field-hint { margin: 0 0 16px; }
.badge-choice b, .pro-choice { display: inline-flex; align-items: center; gap: 8px; }
.choice .pro-mark { display: inline-flex; flex-direction: row; gap: 4px; }
@media (max-width: 480px) { .avatar-field { flex-direction: column; align-items: flex-start; } }

/* Your Look: placeholder plates */
.plates { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 4px 0 8px; }
.plate { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; position: relative; }
.plate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plate img { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 50%; border: 2px solid transparent; display: block; }
.plate input:checked + img { border-color: var(--yellow); }
.plate input:focus-visible + img { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.plate span { font-size: 12px; color: var(--t3-text); }
.plate input:checked ~ span { color: var(--t1); }
@media (max-width: 640px) { .plates { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Bike page: the garage it sits in */
.btitle-garage { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; color: var(--t2); font-size: 14px; text-decoration: none; }
.btitle-garage > svg { width: 22px; height: 22px; color: var(--t3-text); flex: none; }
.btitle-garage > span { display: flex; flex-direction: column; line-height: 1.25; }
.btitle-garage small { color: var(--t3-text); font-size: 12px; }
.btitle-garage b { color: var(--t1); font-weight: 600; }
.btitle-garage:hover b { color: var(--yellow); }
.rail .pcard-garage { margin-bottom: 8px; }
.rail-note { margin: 0 0 20px; font-size: 14px; }

/* Bike editor */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field-row-items { grid-template-columns: 3fr 1.4fr 0.7fr 1fr; }
.field-row-items .field { margin-bottom: 10px; }
.svc-verify { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 720px) { .field-row-items { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.choice-check { margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 14px; }
.bphotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 14px; }
@media (max-width: 560px) { .bphotos { grid-template-columns: repeat(2, 1fr); } }
.bphoto { position: relative; margin: 0; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.bphoto.is-cover { border-color: var(--yellow); }
.bphoto img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bphoto-tag { position: absolute; top: 8px; left: 8px; }
.bphoto figcaption { display: flex; border-top: 1px solid var(--hair); }
.bphoto figcaption form { flex: 1; display: flex; }
.bphoto figcaption form + form { border-left: 1px solid var(--hair); }
.bphoto figcaption button { flex: 1; background: none; border: 0; color: var(--t2-text); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 4px; cursor: pointer; }
.bphoto figcaption button:hover { color: var(--text); background: var(--slate); }
.bphoto figcaption button.is-danger { color: var(--red); }
.photo-add .photo-progress { flex: 1; align-self: center; height: 3px; background: var(--slate); border-radius: 2px; overflow: hidden; }
.photo-add .photo-progress .cm-bar { display: block; height: 100%; }
.photo-add .photo-progress .cm-bar > span { display: block; height: 100%; width: 0; background: var(--yellow); transition: width 0.2s; }

/* Writer's desk */
.desk { border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); padding: 18px 20px 14px; margin-bottom: 24px; }
.desk-field { display: block; }
.desk-field .overline { display: block; margin-bottom: 8px; }
.desk-field input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--hair); color: var(--t1); font: inherit; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; padding: 4px 0 12px; outline: none; }
.desk-field input:focus { border-bottom-color: var(--yellow); }
.desk-field input::placeholder { color: var(--t3-text); font-weight: 500; }
.desk-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.desk-starters { gap: 6px; }
.desk-starters .chip { background: transparent; font: inherit; cursor: pointer; }
.desk .field-hint { margin: 12px 0 0; }
.desk-figures { grid-template-columns: repeat(5, 1fr); margin-top: 0; }
@media (max-width: 640px) { .desk-figures { grid-template-columns: repeat(3, 1fr); } }
.desk-row-item { align-items: center; }
.desk-actions { display: flex; flex-direction: column; gap: 8px; flex: none; align-self: center; }
.rows .row-body .is-dim { color: var(--t3-text); }

/* Route Studio: the planner at /routes/new and /@handle/r/<slug>/edit. Desktop: the map runs
   full bleed under the site header with the planner floating over its left edge. Phone (720px and under):
   a full screen map with the planner in a bottom sheet that rests at peek, half or full.
   Map controls follow the app's HUD: 48pt Carbon circles with a Slate hairline, yellow tint
   only when a control is on. */
body:has(#studio) .foot, body:has(#studio) .app-strip:not([hidden]) { display: none; }
.studio { --panel-w: clamp(340px, 28vw, 400px); --sheet-vis: 0px; --loc: #0A84FF; display: block; height: calc(100dvh - 65px); min-height: 480px; position: relative; background: var(--asphalt); overflow: hidden; }
.studio:fullscreen { height: 100vh; }
.studio-stage { position: absolute; inset: 0; background: var(--carbon); }
/* mapbox-gl.css loads later and sets .mapboxgl-map { position: relative }, so pin with the id. */
#studio-map { position: absolute; inset: 0; }
.studio-map:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; border-radius: 0; }
.studio-map .mapboxgl-canvas:focus { outline: none; }
.studio-map.is-grab .mapboxgl-canvas-container { cursor: grab; }
.studio-map.is-grabbing .mapboxgl-canvas-container, .studio-map.is-grabbing .mapboxgl-canvas-container * { cursor: grabbing; }
#studio-map .mapboxgl-ctrl-scale { background: rgba(12, 16, 20, 0.85); border-color: var(--t2); color: var(--t2); font: 600 11px/1.4 var(--font); }
#studio-map .mapboxgl-ctrl-attrib, #studio-map .mapboxgl-ctrl-attrib.mapboxgl-compact { background: rgba(12, 16, 20, 0.85); color: var(--t3-text); }
#studio-map .mapboxgl-ctrl-attrib.mapboxgl-compact { border: 1px solid var(--slate); }
#studio-map .mapboxgl-ctrl-attrib a { color: var(--t3-text); }
#studio-map .mapboxgl-ctrl-attrib-button { background-color: transparent; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 9v5M10 6.2v.1' stroke='%23A7AFBC' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); }
.studio-map .mapboxgl-ctrl-logo { opacity: 0.7; }

/* HUD buttons, matching the app's HudButton */
.hud { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--slate); background: rgba(18, 22, 31, 0.95); color: var(--t1); display: grid; place-content: center; cursor: pointer; padding: 0; transition: border-color 0.12s, color 0.12s, opacity 0.2s; }
.hud svg { width: 20px; height: 20px; display: block; }
.hud:hover { border-color: var(--t3); }
.hud:disabled { opacity: 0.4; cursor: default; border-color: var(--slate); }
.hud[aria-expanded="true"], .hud.is-on, .hud[aria-pressed="true"] { background: rgba(18, 22, 31, 0.95); border-color: var(--yellow-line); color: var(--yellow); }
.hud.is-on { background: var(--yellow-bg); }
.hud.is-busy svg { animation: studio-spin 1s linear infinite; }
.hud-rail { position: absolute; right: 16px; display: flex; flex-direction: column; gap: 10px; z-index: 3; }
.hud-rail-top { top: 16px; }
.hud-rail-bottom { bottom: 44px; align-items: center; }
.hud-zoom { display: flex; flex-direction: column; gap: 10px; }
.hud-compass svg { transition: transform 0.1s linear; }
.hud-back { display: none; position: absolute; z-index: 3; }
.hud[hidden], .hud-desk[hidden], .hud svg[hidden] { display: none; }

.studio-busy { position: absolute; bottom: 24px; left: calc(50% + var(--panel-w) / 2 + 8px); transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(18, 22, 31, 0.95); border: 1px solid var(--slate); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--t2); white-space: nowrap; }
.studio-busy[hidden] { display: none; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--slate); border-top-color: var(--yellow); animation: studio-spin 0.8s linear infinite; flex: none; }
@keyframes studio-spin { to { transform: rotate(360deg); } }
.studio-hint { position: absolute; left: calc(var(--panel-w) + 32px); top: 16px; z-index: 2; max-width: min(360px, calc(100% - 96px)); padding: 8px 12px; background: rgba(18, 22, 31, 0.95); border: 1px solid var(--slate); border-radius: 8px; font-size: 14px; color: var(--t2); pointer-events: none; }
.studio-hint:empty { display: none; }

/* Map layers sheet: flat rows of choices */
.studio-layers { position: absolute; top: 16px; right: 72px; z-index: 4; width: 300px; max-height: calc(100% - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px 10px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 12px; }
.studio-layers[hidden] { display: none; }
.layers-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; }
.layers-sub { margin-top: 14px; }
.studio-layers .choice:last-child { border-bottom: 0; }
.studio-layers .choice { padding: 10px 0; }
.studio-layers .choice small { font-size: 13px; }

/* Context menu: long press, right click, line and marker taps */
.studio-pop { position: absolute; z-index: 5; min-width: 210px; max-width: 280px; padding: 6px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; display: flex; flex-direction: column; }
.studio-pop[hidden] { display: none; }
.studio-pop .pop-h { padding: 8px 12px 6px; font-size: 13px; color: var(--t3-text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
.studio-pop button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 6px; background: none; color: var(--t1); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; }
.studio-pop button:hover, .studio-pop button:focus-visible { background: var(--slate); outline: none; }
.studio-pop button.is-danger { color: var(--red); }
.studio-pop svg { width: 16px; height: 16px; flex: none; color: var(--t3-text); }

/* Map markers */
.smk { width: 28px; height: 28px; border-radius: 50%; background: var(--asphalt); border: 2px solid var(--yellow); color: var(--yellow); font: 700 12px/1 var(--font); display: grid; place-content: center; cursor: grab; touch-action: none; }
.smk:active { cursor: grabbing; }
.smk svg { width: 14px; height: 14px; display: block; }
.smk-from { border-color: var(--green); color: var(--green); }
.smk-to { border-color: var(--red); color: var(--red); }
.smk.is-hot { outline: 2px solid var(--t1); outline-offset: 2px; }
.smk-shape { width: 16px; height: 16px; border-radius: 50%; background: var(--asphalt); border: 2.5px solid var(--t1); cursor: grab; touch-action: none; }
.smk-shape:hover { border-color: var(--yellow); }
.smk-shape::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
.smk-ghost { width: 16px; height: 16px; border-radius: 50%; background: var(--asphalt); border: 2.5px solid var(--yellow); pointer-events: none; }
.smk-avoid { width: 22px; height: 22px; border-radius: 50%; background: var(--asphalt); border: 2px solid var(--red); color: var(--red); display: grid; place-content: center; cursor: pointer; }
.smk-avoid svg { width: 12px; height: 12px; }
.smk-scrub { width: 14px; height: 14px; border-radius: 50%; background: var(--asphalt); border: 3px solid var(--yellow); pointer-events: none; }
.smk-me { width: 18px; height: 18px; position: relative; pointer-events: none; }
.smk-me::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--loc); border: 3px solid #FFFFFF; }
.smk-me::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--loc); animation: studio-pulse 2s ease-out infinite; }
.smk-me.is-stale::before { background: var(--t3); }
.smk-me.is-stale::after { display: none; }
/* mapbox-gl.css gives every marker pointer events; these must never catch the pointer. */
#studio-map .smk-ghost, #studio-map .smk-scrub, #studio-map .smk-me { pointer-events: none; }
@keyframes studio-pulse { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }

/* Planner panel */
.studio-panel { position: absolute; top: 16px; left: 16px; width: var(--panel-w); max-height: calc(100% - 32px); display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--asphalt); z-index: 6; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; }
.studio.is-collapsed .studio-panel { transform: translateX(calc(-100% - 24px)); opacity: 0; pointer-events: none; }
.hud-panel { position: absolute; top: 16px; left: 16px; z-index: 5; display: none; }
.studio.is-collapsed .hud-panel { display: grid; }
.sheet-grab { display: none; }
.studio-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--hair); }
.studio-title { flex: 1; min-width: 0; }
/* Back out of the planner: history when the rider came from a page on the site (data-back), else the page's parent. */
.studio-back { display: inline-flex; align-items: center; gap: 2px; margin: -6px 0 8px -6px; padding: 4px 8px 4px 2px; border-radius: 6px; color: var(--t2); font-size: 14px; font-weight: 600; }
.studio-back svg { width: 18px; height: 18px; flex: none; }
.studio-back:hover { color: var(--t1); }
.studio-head h1 { font-size: 26px; margin: 6px 0 4px; }
.studio-sum { font-size: 15px; color: var(--t2); font-variant-numeric: tabular-nums; min-height: 1.45em; }
.studio-sum b { color: var(--t1); font-weight: 600; }
.studio-head-tools { display: flex; gap: 4px; padding-top: 18px; }
.studio-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 40px; scrollbar-width: thin; scrollbar-color: var(--slate) transparent; }

.icon-btn { width: 36px; height: 36px; flex: none; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--t2); display: grid; place-content: center; cursor: pointer; padding: 0; }
.icon-btn svg { width: 18px; height: 18px; display: block; }
.icon-btn:hover { color: var(--t1); border-color: var(--hair); }
.icon-btn:disabled { opacity: 0.35; cursor: default; border-color: transparent; color: var(--t2); }
.link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--yellow); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.link-btn svg { width: 16px; height: 16px; }
.link-btn:hover { color: var(--t1); }
.link-btn:disabled { color: var(--t3-text); cursor: default; }
.link-btn-quiet { color: var(--t2); }
.link-btn[hidden] { display: none; }

.studio-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.studio-row[hidden] { display: none; }
.studio-row p { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 15px; }
.studio-row small { color: var(--t3-text); font-size: 13px; line-height: 1.4; }
.studio-row .btn { min-height: 36px; padding: 0 14px; font-size: 14px; }
.studio-row-acts { display: flex; gap: 8px; flex: none; }

/* From, stops and To */
.studio-points { padding: 12px 0 4px; }
.pts-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.pts { position: relative; }
.pt { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; background: var(--asphalt); }
.pt + .pt::before { content: ""; position: absolute; left: 13px; top: -8px; height: 14px; border-left: 2px dotted var(--slate); }
.pt.is-dragging { z-index: 2; opacity: 0.96; }
.pt.is-dragging .pt-input { border-color: var(--yellow-line); }
.pt.is-target-gap { transition: transform 0.15s; }
.pts.is-sorting .pt:not(.is-dragging) { transition: transform 0.15s; }
.pt-dot { width: 24px; height: 24px; margin: 0 2px; border-radius: 50%; border: 2px solid var(--yellow); color: var(--yellow); font: 700 11px/1 var(--font); display: grid; place-content: center; background: var(--asphalt); }
.pt-dot svg { width: 12px; height: 12px; }
.pt-from .pt-dot { border-color: var(--green); color: var(--green); }
.pt-to .pt-dot { border-color: var(--red); color: var(--red); }
.pt-field { position: relative; min-width: 0; }
.pt-input { width: 100%; min-height: 44px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; padding: 10px 36px 10px 12px; outline: none; text-overflow: ellipsis; }
.pt-input::placeholder { color: var(--t3-text); }
.pt-input:focus { border-color: var(--yellow-line); }
.pt-input.is-pending { color: var(--t2); }
.pt-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: var(--t3-text); display: grid; place-content: center; cursor: pointer; border-radius: 6px; padding: 0; }
.pt-clear svg { width: 14px; height: 14px; }
.pt-clear:hover { color: var(--t1); }
.pt-tools { display: flex; align-items: center; }
.pt-grip { cursor: grab; touch-action: none; color: var(--t3-text); }
.pt-grip:active { cursor: grabbing; }
.pt-remove:hover { color: var(--red); }
.pts-swap { align-self: center; }
.pts-tools { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 0 4px 34px; }
.studio-note { margin: 4px 0 6px 38px; font-size: 14px; color: var(--t2); line-height: 1.45; }
.studio-note.is-error { color: var(--red); }
.studio-note[hidden] { display: none; }

/* Place suggestions: an ARIA listbox under the focused field */
.sugg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20; max-height: min(340px, 50vh); overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; }
.sugg[hidden] { display: none; }
.sugg li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; cursor: pointer; min-height: 44px; }
.sugg li[aria-selected="true"], .sugg li:hover { background: var(--slate); }
.sugg li svg { width: 16px; height: 16px; flex: none; color: var(--t3-text); }
.sugg li.is-loc svg, .sugg li.is-loc b { color: var(--yellow); }
.sugg li span { display: flex; flex-direction: column; min-width: 0; }
.sugg b { font-weight: 500; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg small { color: var(--t3-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg .sugg-empty { color: var(--t3-text); font-size: 14px; cursor: default; }
.sugg .sugg-empty:hover { background: none; }

.studio-alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; padding: 10px 12px; border: 1px solid rgba(240, 68, 82, 0.5); background: rgba(240, 68, 82, 0.1); border-radius: 8px; color: var(--red); font-size: 14px; line-height: 1.4; }
.studio-alert[hidden] { display: none; }
.studio-alert .btn { flex: none; color: var(--t1); }

/* Tabs: flat, the chosen one in yellow over a hairline */
.studio-tabs { display: flex; gap: 22px; margin: 12px 0 0; border-bottom: 1px solid var(--hair); }
.studio-tabs button { padding: 12px 0 11px; margin-bottom: -1px; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--t3-text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.studio-tabs button:hover { color: var(--t1); }
.studio-tabs button[aria-selected="true"] { color: var(--yellow); border-bottom-color: var(--yellow-line); }
.studio-tabpanel { padding-top: 6px; }
.studio-tabpanel[hidden] { display: none; }

.spec-studio { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 4px; border-top: 0; }
.spec-studio div { padding: 12px 0; }
.spec-studio dt { font-size: 11px; letter-spacing: 0.1em; }
.spec-studio dd { font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spec-studio dd small { font-size: 12px; color: var(--t3-text); font-weight: 500; margin-left: 2px; }
.spec-studio.is-loading dd { color: var(--t3-text); }

.elev { margin: 14px 0 0; }
.elev-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.elev-read { font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.elev-plot { position: relative; height: 120px; touch-action: pan-y; cursor: crosshair; }
.elev-plot:empty { display: none; }
.elev-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.elev-plot .ax { font: 500 10px var(--font); fill: var(--t3-text); }
.elev-empty { font-size: 14px; padding: 4px 0 8px; }
.elev-empty[hidden] { display: none; }

.studio-block { margin-top: 22px; }
.studio-block[hidden] { display: none; }
.studio-block > .overline, .studio-block > h2.overline { margin-bottom: 4px; font-size: 12px; }
.studio-fine { font-size: 13px; line-height: 1.45; margin-top: 8px; }
.studio-fine[hidden] { display: none; }
.choice-tight { padding: 10px 0; }
.choice-tight small { font-size: 13px; line-height: 1.4; }
.alts .choice span { flex: 1; min-width: 0; }
.alts .alt-top { display: flex; justify-content: space-between; gap: 8px; flex-direction: row; }
.alts .alt-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3-text); }
.alts .alt-tag.is-pick { color: var(--yellow); }
.alts small { font-variant-numeric: tabular-nums; }
.avoids { margin-top: 6px; }
.avoids[hidden] { display: none; }
.avoids li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--t2); }
.avoids li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depart { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.depart .field { flex: 1; margin-bottom: 0; }
.depart input { color-scheme: dark; min-height: 44px; }
.depart .link-btn { margin-bottom: 4px; }

.studio-keys { margin-top: 26px; border-top: 1px solid var(--hair); }
.studio-keys summary { padding: 14px 0 10px; cursor: pointer; list-style: none; }
.studio-keys summary::-webkit-details-marker { display: none; }
.studio-keys dl { margin: 0; }
.studio-keys dl div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.studio-keys dt { color: var(--t1); }
.studio-keys dd { margin: 0; color: var(--t3-text); text-align: right; }
kbd { display: inline-block; min-width: 22px; padding: 1px 6px; border: 1px solid var(--slate); border-radius: 5px; background: var(--carbon); font: 600 12px/1.5 var(--font); color: var(--t2); text-align: center; }

/* Directions */
.turns li { border-bottom: 1px solid var(--hair); }
.turns button { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 11px 0; border: 0; background: none; color: var(--t1); font: inherit; font-size: 15px; line-height: 1.35; text-align: left; cursor: pointer; }
.turns button:hover .turn-text, .turns button.is-on .turn-text { color: var(--yellow); }
.turns svg { width: 22px; height: 22px; color: var(--t2); }
.turns .turn-dist { font-size: 13px; color: var(--t3-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.turns .turn-leg { padding: 14px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3-text); }
.turns-empty { padding: 16px 0; font-size: 14px; }
.turns-empty[hidden] { display: none; }

/* Save and share */
.studio-form { margin-top: 14px; }
.studio-form h2:first-of-type { margin-top: 0; }
.studio-form .field select, .ge-form .field select { width: 100%; min-height: 44px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; padding: 10px 12px; }
.studio-share { margin-top: 28px; }
.share-rows li { border-bottom: 1px solid var(--hair); }
.share-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0; border: 0; background: none; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.share-row svg { width: 20px; height: 20px; flex: none; color: var(--yellow); }
.share-row span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.share-row b { font-size: 15px; font-weight: 600; }
.share-row small { font-size: 13px; color: var(--t3-text); }
.share-row:hover b { color: var(--yellow); }
.share-row[aria-disabled="true"] { cursor: default; }
.share-row[aria-disabled="true"] svg, .share-row[aria-disabled="true"] b { color: var(--t3-text); }

/* Hover readout on the line: where, when and how high */
.studio-tip { position: absolute; left: 0; top: 0; z-index: 4; display: flex; flex-direction: column; gap: 2px; max-width: 260px; padding: 7px 10px; background: var(--carbon); border: 1px solid var(--slate); border-radius: 8px; pointer-events: none; font-variant-numeric: tabular-nums; will-change: transform; }
.studio-tip[hidden] { display: none; }
.studio-tip b { font-size: 13px; font-weight: 600; color: var(--t1); white-space: nowrap; }
.studio-tip span { font-size: 12px; color: var(--t2); line-height: 1.4; }

/* Ride timer card, in the free map area */
.studio-ride { position: absolute; left: calc(var(--panel-w) + 32px); bottom: 24px; z-index: 4; width: min(400px, calc(100% - var(--panel-w) - 120px)); min-width: 300px; padding: 12px 14px; background: var(--carbon); border: 1px solid var(--slate); border-radius: 12px; }
.studio-ride[hidden] { display: none; }
.studio.is-collapsed .studio-ride { left: 16px; width: min(400px, calc(100% - 104px)); }
.ride-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ride-cells div { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 10px; }
.ride-cells div:first-child { padding-left: 0; }
.ride-cells div + div { border-left: 1px solid var(--hair); }
.ride-cells span { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3-text); }
.ride-cells b { font-size: 17px; font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ride-cells div:first-child b { color: var(--yellow); }
.ride-bar { height: 3px; margin: 12px 0 8px; background: var(--slate); border-radius: 2px; overflow: hidden; }
.ride-bar span { display: block; height: 100%; width: 0; background: var(--yellow); transition: width 0.6s; }
.ride-note { margin: 0; font-size: 13px; color: var(--t2); line-height: 1.45; min-height: 1.45em; }
.ride-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.ride-acts .btn[hidden] { display: none; }
.studio.is-riding .studio-busy { top: 16px; bottom: auto; }
.studio.is-riding .studio-hint { display: none; }
.ride-row .btn { flex: none; }

/* Legs: one flat row per stretch between stops */
.legs { list-style: none; margin: 0; padding: 0; }
.legs li { border-bottom: 1px solid var(--hair); }
.leg { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 10px 0; border: 0; background: none; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.leg-num { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--slate); color: var(--t2); font: 700 11px/1 var(--font); display: grid; place-content: center; }
.leg-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.leg-text b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leg-text small { font-size: 13px; color: var(--t3-text); font-variant-numeric: tabular-nums; }
.leg-at { font-size: 13px; color: var(--t2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.leg:hover b, .leg:focus-visible b { color: var(--yellow); }
.leg:hover .leg-num, .leg:focus-visible .leg-num { border-color: var(--yellow-line); color: var(--yellow); }

/* Figures follow the line while it is dragged */
.spec-studio.is-live dd[data-stat="distance"], .spec-studio.is-live dd[data-stat="duration"] { color: var(--yellow); }

/* Rich place results, as wide as the point row */
.pt-field .sugg { left: -38px; right: -84px; }
.sugg li .sugg-text { flex: 1; }
.sugg .sugg-dist { flex: none; margin-left: auto; font-size: 12px; color: var(--t3-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sugg li.is-poi svg { color: var(--t2); }
.sugg.is-loading { opacity: 0.85; }
.hud.is-off { color: var(--t3-text); }
.studio.is-collapsed .studio-hint { left: 76px; }
.studio.is-collapsed .studio-busy { left: 50%; }

@media (max-width: 1080px) and (min-width: 721px) {
  .studio { --panel-w: 340px; }
  .studio-head h1 { font-size: 22px; }
  .spec-studio dd { font-size: 16px; }
}

/* Phone: full screen map, the planner in a bottom sheet with peek, half and full stops. */
@media (max-width: 720px) {
  body:has(#studio) { padding-bottom: 0; overflow: hidden; overscroll-behavior: none; }
  body:has(#studio) .top, body:has(#studio) .tabbar { display: none; }
  .studio { position: fixed; inset: 0; display: block; height: auto; min-height: 0; z-index: 8; }
  .studio-stage { position: absolute; inset: 0; }
  .hud { width: 48px; height: 48px; }
  .hud svg { width: 21px; height: 21px; }
  .hud-desk, .hud-desk-block { display: none !important; }
  .hud-back { display: grid; left: calc(12px + env(safe-area-inset-left)); top: calc(12px + env(safe-area-inset-top)); }
  .hud-rail { right: calc(12px + env(safe-area-inset-right)); transition: opacity 0.2s; }
  .hud-rail-top { top: auto; bottom: calc(var(--sheet-vis) + 48px); }
  .hud-rail-bottom { bottom: auto; top: calc(12px + env(safe-area-inset-top)); }
  .hud-zoom { display: none; }
  .studio[data-sheet="full"] .hud-rail-top, .studio.is-sheet-moving .hud-rail-top { opacity: 0; pointer-events: none; }
  .studio-busy { top: calc(16px + env(safe-area-inset-top)); bottom: auto; left: 50%; }
  .studio.is-collapsed .hud-panel { display: none; }
  .studio-hint { left: 72px; right: 72px; top: calc(14px + env(safe-area-inset-top)); max-width: none; text-align: center; font-size: 13px; }
  .studio-map .mapboxgl-ctrl-bottom-left, .studio-map .mapboxgl-ctrl-bottom-right { bottom: var(--sheet-vis); transition: bottom 0.28s; }
  .studio.is-sheet-moving .studio-map .mapboxgl-ctrl-bottom-left, .studio.is-sheet-moving .studio-map .mapboxgl-ctrl-bottom-right { transition: none; }
  .studio-layers { position: fixed; top: auto; right: 0; left: 0; bottom: 0; width: auto; max-height: 80dvh; border-radius: 14px 14px 0 0; border-bottom: 0; padding: 6px calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); z-index: 30; }
  .studio-pop { position: fixed; min-width: 220px; z-index: 30; }
  .studio-pop button { min-height: 46px; }
  .studio-panel, .studio.is-collapsed .studio-panel { position: absolute; left: 0; right: 0; bottom: 0; top: calc(env(safe-area-inset-top) + 40px); width: auto; max-height: none; opacity: 1; pointer-events: auto; border-width: 1px 0 0; border-top: 1px solid var(--hair); border-radius: 14px 14px 0 0; transform: translateY(var(--sheet-y, 50%)); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; z-index: 10; }
  .studio.is-sheet-moving .studio-panel { transition: none; }
  .sheet-grab { display: grid; place-content: center; height: 22px; flex: none; cursor: grab; touch-action: none; }
  .sheet-grab span { width: 38px; height: 4px; border-radius: 2px; background: var(--t3); }
  .sheet-grab:focus-visible { outline-offset: -4px; }
  .studio-head { padding: 0 16px 12px; touch-action: none; border-bottom-color: transparent; }
  .studio[data-sheet="full"] .studio-head, .studio[data-sheet="half"] .studio-head { border-bottom-color: var(--hair); }
  .studio-crumb { display: none; }
  /* Phones keep the Back button on the map, top left, above every sheet height. */
  .studio-back { display: none; }
  .studio-head h1 { font-size: 19px; margin: 2px 0 2px; }
  .studio-sum { font-size: 14px; }
  .studio-head-tools { padding-top: 0; }
  .icon-btn { width: 44px; height: 44px; }
  .studio-scroll { padding: 0 calc(16px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  .studio[data-sheet="peek"] .studio-scroll { overflow: hidden; }
  .spec-studio dd { font-size: 16px; }
  .studio-tabs { position: sticky; top: 0; z-index: 4; background: var(--asphalt); }
  .sugg { max-height: 42dvh; }
}
@media (max-width: 720px) {
  .studio-ride, .studio.is-collapsed .studio-ride { left: calc(12px + env(safe-area-inset-left)); right: calc(12px + env(safe-area-inset-right)); top: calc(70px + env(safe-area-inset-top)); bottom: auto; width: auto; min-width: 0; padding: 10px 12px; }
  .ride-cells div { padding: 0 8px; }
  .ride-cells b { font-size: 15px; }
  .studio.is-riding .studio-busy { top: auto; bottom: calc(var(--sheet-vis) + 16px); }
  .studio-tip { display: none; }
  .pt-field .sugg { left: -38px; right: auto; width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) {
  .studio-panel, .hud-rail, .studio-map .mapboxgl-ctrl-bottom-left, .studio-map .mapboxgl-ctrl-bottom-right { transition: none; }
  .smk-me::after { animation: none; display: none; }
  .ride-bar span { transition: none; }
  .spin, .hud.is-busy svg { animation-duration: 2.4s; }
}
.actions-head { margin-top: 0; padding-bottom: 6px; }

/* Builds filter bar: the console filter inputs, outside the console. */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.filter-bar input[type="search"], .filter-bar select { background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 15px; padding: 8px 12px; min-height: 38px; outline: none; }
.filter-bar input:focus, .filter-bar select:focus { border-color: var(--yellow-line); }
.filter-bar input[type="search"] { flex: 1 1 200px; min-width: 0; }
.filter-bar select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A8B0BD' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }
.filter-clear { color: var(--t2); font-size: 14px; padding: 0 4px; }
.filter-clear:hover { color: var(--t1); }

/* Article editor: autosave status, cover upload, revisions. Flat rows, no fills. */
.editor-status { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: baseline; margin: 0; }
.editor-status .pending-note { color: var(--yellow); }
.editor-status .save-status { color: var(--t3-text); text-transform: none; letter-spacing: 0; font-weight: 500; }
.editor-status .save-status.is-error { color: var(--red); }
.cover-field { margin-bottom: 16px; }
.cover-field .field { margin-bottom: 8px; }
.cover-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cover-preview { width: 96px; height: 54px; object-fit: cover; border: 1px solid var(--hair); border-radius: 4px; background: var(--carbon); }
.editor-body.is-drop { border-color: var(--yellow-line); }
.discard-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--hair); margin-top: 8px; font-size: 14px; }
.revisions-wrap { margin-top: 24px; border-top: 1px solid var(--hair); }
/* The editor uses the desktop width: the writing column grows, and the cover and disclosures
   sit in a sticky side column from 1200px up. Below that everything stacks in one column. */
.editor-grid { display: grid; gap: 0 56px; }
@media (min-width: 1200px) {
  .wrap.narrow.editor-wrap > * { max-width: none; }
  .editor-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .editor-side { position: sticky; top: 88px; }
  .editor-side .cover-field { margin-top: 10px; }
  .editor-side .disclose-open { margin-top: 20px; }
  .editor-main .editor-body, .editor-main .editor-rich { min-height: 640px; }
}
@media (min-width: 1920px) {
  .editor-grid { grid-template-columns: minmax(0, 1fr) 460px; gap: 0 72px; }
  .editor-main .editor-body, .editor-main .editor-rich { min-height: 800px; }
  .editor-main .editor-rich { font-size: 20px; padding: 32px 40px 64px; }
}
.revisions-summary { cursor: pointer; padding: 14px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); list-style: none; }
.revisions-summary::-webkit-details-marker { display: none; }
.revisions-wrap[open] .revisions-summary { color: var(--t1); }
.revisions .revision-title { margin: 0 0 6px; font-size: 15px; color: var(--t1); }
.revisions .revision-view summary { cursor: pointer; font-size: 13px; color: var(--t2); padding: 4px 0; }
.revisions .revision-view[open] summary { color: var(--t1); }
.revisions .revision-cover { display: block; max-width: 320px; margin: 8px 0; border: 1px solid var(--hair); border-radius: 4px; }
.revisions .version > .btn { margin-top: 8px; }
/* Documents vault: flat hairline rows, Red only for an expired date, a thin yellow bar while a file uploads. */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-row { align-items: center; }
.doc-row .row-main a { color: var(--t1); font-weight: 600; }
.doc-row .row-main a:hover { color: var(--t2); }
.doc-row form { flex: none; margin: 0; }
.doc-expired { color: var(--red); }
.doc-field { margin-bottom: 8px; }
.doc-actions { margin-top: 0; align-items: center; }
.doc-bar { display: none; position: relative; margin-top: 10px; border-radius: 2px; overflow: hidden; }
.doc-field.is-busy .doc-bar { display: block; }
/* Follow a bike: flat text, yellow once following. */
.bfollow { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; }
.bfollow-head { margin: 0; }
.bfollow .act { padding: 0; }
.btn-bfollow { padding: 6px 0; border: 0; background: none; color: var(--t2); font-weight: 600; }
.btn-bfollow:hover { color: var(--t1); background: none; }
.btn-bfollow.is-on { color: var(--yellow); }
.btn-bfollow .act-count { color: var(--t3-text); font-weight: 500; margin-left: 4px; }
.bfollow-n { color: var(--t3-text); font-size: 14px; }
.panel-lead { font-size: 15px; margin: 0 0 12px; }
.peers-h { margin: 16px 0 0; }
.mods-peers { margin-bottom: 0; }
.mods-peers li a { display: block; color: inherit; text-decoration: none; }
.mods-peers li a:hover .mod-name { color: var(--yellow); }
.builds-narrow { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 15px; }

/* Bike page specs: a flat two column list with hairline rows. */
.specs-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin: 0; }
.specs-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.specs-list dt { color: var(--t3-text); font-weight: 500; }
.specs-list dd { margin: 0; text-align: right; font-weight: 600; }
.specs-note { margin-top: 12px; font-size: 13px; color: var(--t3-text); }
@media (max-width: 640px) { .specs-list { grid-template-columns: 1fr; } }
.not-listed { margin-top: 32px; }
.not-listed summary { cursor: pointer; font-weight: 600; }

/* Inline comment edit: the edit form drops in where the comment text was. */
.comment-edit { margin: 8px 0 4px; }
.comment-edit textarea { width: 100%; }
.comment-edit .actions { margin-top: 12px; }

/* Console: edge to edge. The header and the work area use the whole window;
   only forms keep a readable measure. */
.is-console .top .wrap { max-width: none; }
.is-console .con-main { max-width: none; padding-left: 32px; padding-right: 32px; }
.is-console .con-main form.settings { max-width: 760px; }

/* ===================================================================
   Mobile web pass. Phones get the app's shape: a compact top bar (search,
   notifications, messages, account), a bottom tab bar with Create in the
   middle, bottom sheets for menus and a full-screen notifications sheet.
   Everything here is additive: safe areas, 44px targets, 16px inputs so iOS
   never zooms, snap scrollers and touch states.
   ========================================================================== */

/* Safe areas on every width (notched phones in landscape land on the desktop layout). */
.wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
.top { padding-top: env(safe-area-inset-top); }
.tool-search { display: none; }
.tab-create { display: none; }
.notes-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.notes-x, .menu-sheet .notes-x { display: none; }
/* Single-column layouts never grow past the screen to fit a long unbroken line or a scroller. */
@media (max-width: 1080px) {
  .split, .pgrid, .split-bike { grid-template-columns: minmax(0, 1fr); }
}
/* Message photos hold their box while they load, so the thread does not jump. A tap opens the full photo. */
.msg-img { width: min(320px, 100%); aspect-ratio: 4 / 3; object-fit: cover; background: var(--carbon); border: 1px solid var(--hair); }
.msg > a { display: block; max-width: 100%; }
/* Wide content never pushes the page sideways. */
.prose pre, .post-body pre { overflow-x: auto; max-width: 100%; }
.top-row { min-width: 0; }

@media (max-width: 720px) {
  /* Top bar: brand on the left, four 44px tools on the right. */
  .top-row { gap: 8px; }
  .top-tools { gap: 0; margin-right: -6px; }
  .tool { width: 44px; height: 44px; }
  .tool[aria-current] { border-bottom: 0; padding-top: 0; border-radius: 8px; color: var(--yellow); }
  .tool-search { display: inline-flex; }
  .top-tools .menu-create { display: none; }
  .top-tools > .menu > summary:not(.tool) { width: 44px; height: 44px; align-items: center; justify-content: center; }
  .pip { top: 5px; right: 3px; }
  .lockup { overflow: hidden; }
  .lockup-word { overflow: hidden; text-overflow: ellipsis; }
  .back { width: 44px; height: 44px; margin-left: -10px; }
  .tool-text { min-height: 44px; display: inline-flex; align-items: center; }

  /* Account menu: a dropdown that never runs off the screen, with 48px rows. */
  .top-tools .menu-sheet:not(.menu-sheet-notes) { width: min(280px, calc(100vw - 32px)); max-height: calc(100dvh - 80px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; }
  .menu-sheet a, .menu-sheet button { min-height: 48px; display: flex; align-items: center; font-size: 16px; }

  /* Bottom tab bar: Social, Discover, Create, Garage, Profile. */
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .tabbar { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  .tabbar a, .tab-create > summary { min-height: 48px; justify-content: center; -webkit-tap-highlight-color: transparent; }
  .tab-create { display: block; position: static; }
  .tab-create > summary { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 2px; border-radius: 0; color: var(--t3-text); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
  .tab-create[open] > summary { color: var(--t1); }
  .tab-create[open] > summary::before { content: ""; position: fixed; inset: 0; background: rgba(12, 16, 20, 0.6); }
  .menu-sheet-tab { position: absolute; left: 0; right: 0; top: auto; bottom: 100%; width: auto; max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); border-width: 1px 0 0; border-radius: 14px 14px 0 0; }
  .menu-sheet-tab .menu-h { padding-top: 12px; }
  .tabbar .menu-sheet-tab a, .tabbar .menu-sheet-tab button { flex-direction: row; justify-content: flex-start; align-items: center; gap: 0; padding: 0 12px; color: var(--t2); font-size: 16px; font-weight: 500; letter-spacing: 0; }
  /* While a sheet is up the app strip waits underneath. */
  body:has(.tab-create[open]) .app-strip, body:has(.pmenu[open]) .app-strip, body:has(.menu-notes[open]) .app-strip { display: none; }

  /* The keyboard owns the bottom of the screen while typing: the tab bar and app strip step aside. */
  body:has(:is(textarea, select, [contenteditable="true"], input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="range"], [type="hidden"])):focus) .tabbar,
  body:has(:is(textarea, select, [contenteditable="true"], input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], [type="range"], [type="hidden"])):focus) .app-strip { display: none; }

  /* Notifications: a full-screen sheet under the top bar. The bell or Close puts it away. */
  body:has(.menu-notes[open]) { overflow: hidden; }
  body:has(.menu-notes[open]) .top { z-index: 10; }
  .menu-sheet-notes { position: fixed; top: calc(57px + env(safe-area-inset-top)); left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: none; padding: 0 max(8px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left)); border-radius: 0; border-width: 1px 0 0; background: var(--asphalt); }
  .notes-top { position: sticky; top: 0; z-index: 1; padding: 4px 0 4px 8px; background: var(--asphalt); border-bottom: 1px solid var(--hair); }
  .notes-top .menu-h { padding: 0; font-size: 12px; }
  .menu-sheet .notes-x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--t2); cursor: pointer; }
  .menu-sheet-notes .notes-panel .note-link { padding: 14px 8px; gap: 12px; border-radius: 0; }
  .menu-sheet-notes .notes-panel .note { border-bottom: 1px solid var(--hair); }
  .menu-sheet-notes .notes-panel .note .avatar, .menu-sheet-notes .notes-panel .note .emblem { width: 36px; height: 36px; font-size: 13px; }
  .menu-sheet-notes .notes-panel .note-title { font-size: 15px; }
  .menu-sheet-notes .notes-panel .note-body { font-size: 14px; }
  .menu-sheet-notes .notes-all { min-height: 52px; justify-content: center; background: var(--asphalt); }

  /* Post, comment and Edited menus: bottom sheets over a flat scrim. A tap on the scrim closes them. */
  .pmenu[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 8; background: rgba(12, 16, 20, 0.6); cursor: default; }
  /* The profile header is its own layer over the cover; lift it above the tab bar while its More sheet is open. */
  .phead:has(.pmenu[open]) { z-index: 10; }
  .pmenu-sheet, .pmenu-sheet-history, .post-end .pmenu-sheet-history { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 9; width: auto; min-width: 0; max-width: none; max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain; padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); border-width: 1px 0 0; border-radius: 14px 14px 0 0; }
  .pmenu-sheet a, .pmenu-sheet button { min-height: 48px; display: flex; align-items: center; font-size: 16px; white-space: normal; }
  .pmenu-sheet-history { padding-left: 16px; padding-right: 16px; }

  /* 44px tap targets on the feed, posts and comments. */
  .acts { gap: 0; margin-left: -12px; }
  .act-btn, .acts-sm .act-btn { min-height: 44px; min-width: 44px; justify-content: center; padding: 0 10px; }
  .reply summary { min-height: 44px; padding: 0 10px; }
  .seg a, .seg button { min-height: 44px; }
  a.chip, button.chip, .chips a { min-height: 44px; }
  .tabs a { display: inline-flex; align-items: center; min-height: 48px; }
  .compose-photos { min-height: 44px; }
  .fmt button { height: 44px; }
  .btn-small { min-height: 40px; }
  .lbl-more { min-height: 44px; display: inline-flex; align-items: center; }
  .note-link, .convo-link { min-height: 56px; }

  /* Composer: the row wraps cleanly and every control is a full target. */
  .compose-row { gap: 8px; }
  .compose-row select { min-height: 44px; max-width: 100%; }
  .compose-row .btn { min-width: 88px; }
  .compose-media { margin-left: 0; max-width: none; }

  /* Inputs at 16px so iOS Safari never zooms the page on focus. */
  .top-search input, .compose select, .field select, .search-big select, .compose-sm textarea,
  .filter-bar input[type="search"], .filter-bar select,
  .con-filters input[type="search"], .con-inline input[type="text"], .con-filters select, .con-inline select,
  .con-resolve select, .con-resolve input, .con-reject input,
  .con-stack input, .con-stack textarea, .con-stack select { font-size: 16px; }
  .filter-bar input[type="search"], .filter-bar select,
  .con-filters input[type="search"], .con-inline input[type="text"], .con-filters select, .con-inline select,
  .con-resolve select, .con-resolve input, .con-reject input { min-height: 44px; }
  .con-reject input { width: 100%; }
  .search-big { flex-wrap: wrap; }
  .search-big input { flex-basis: 100%; }
  .search-big .btn { flex: 1 1 auto; }

  /* Profile header: buttons wrap beside or under the avatar as full targets. */
  .phead-row { flex-wrap: wrap; }
  .phead-tools { flex: 1 1 auto; gap: 8px; }
  .phead-tools .btn { min-height: 44px; }
  .phead-tools .tool-ring { width: 44px; height: 44px; }
  .stats-card { gap: 4px; }
  .stats-card > * { min-width: 0; }

  /* Horizontal scrollers snap to the next card and bleed to the screen edge. */
  .rail-x { scroll-padding-left: var(--gutter); overscroll-behavior-x: contain; }
  .bthumbs { scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding-left: var(--gutter); overscroll-behavior-x: contain; }
  .bthumbs button { scroll-snap-align: start; flex-basis: 104px; height: 78px; }
  .tabs, .seg { scroll-snap-type: x proximity; overscroll-behavior-x: contain; scroll-padding-inline: var(--gutter); }
  .tabs a, .seg a, .seg button { scroll-snap-align: start; }
  .tabs { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 0 var(--gutter); scroll-padding-left: var(--gutter); }

  /* Messages: the inbox is the list, a thread is its own screen with the composer at the bottom. */
  body:has(.chat-main:not([data-thread-index]) .compose-chat) .tabbar, body:has(.chat-main) .app-strip { display: none; }
  body:has(.chat-main:not([data-thread-index]) .compose-chat) { padding-bottom: env(safe-area-inset-bottom); }
  .chat-find { border-left: 0; padding-left: 0; }
  .chat-find-list { grid-template-columns: 1fr; }
  .chat, .chat-index { grid-template-columns: minmax(0, 1fr); }
  .chat-main .chat-head { padding-bottom: 10px; }
  .chat-main .msgs { padding: 16px 0; }
  .chat-main .compose-chat { gap: 8px; padding-top: 10px; }
  .chat-main .compose-chat textarea { min-height: 44px; max-height: 30dvh; }
  .chat-main .compose-chat .btn { flex: none; }
  .chat-main .compose-chat .photo-pick { width: 40px; }
  .msg-img { width: min(260px, 100%); }
  .request { flex-wrap: wrap; }
  .request-actions { flex: 1 1 100%; }
  .request-actions form { flex: 1; display: flex; }
  .request-actions .btn { flex: 1; }

  /* Footer: two columns of 44px links above the tab bar. */
  .foot { margin-top: 40px; padding: 32px 0 24px; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .foot-grid > div:first-child { grid-column: 1 / -1; margin-bottom: 8px; }
  .foot-grid a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .foot-copy { margin-top: 24px; }

  /* Staff console: the section list is a snap scroller with 44px links; tables scroll inside themselves. */
  .con-side { scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .con-side::-webkit-scrollbar { display: none; }
  .con-side nav a { min-height: 44px; scroll-snap-align: start; }
  .con-main table, .prose table { display: block; max-width: 100%; overflow-x: auto; }
  .figure { padding: 14px 12px; min-width: 0; }
  .figure b { font-size: 22px; }
}

@media (max-width: 480px) {
  .lockup-word { display: none; }
}
@media (max-width: 400px) {
  /* With a back button the mark alone carries the brand. */
  .lockup-after-back .lockup-home b { display: none; }
}

/* Touch screens: no sticky hover states, a quiet pressed state instead. */
@media (hover: none) {
  .pcard:hover img { transform: none; }
  .strip a:hover img { filter: none; }
  .act-btn:hover, .act:hover, .tool:hover, .reply summary:hover, .back:hover { background: none; }
  .act-btn:active, .act:active, .tool:active, .reply summary:active, .back:active, .notes-x:active,
  .menu-sheet a:active, .menu-sheet button:active, .pmenu-sheet a:active, .pmenu-sheet button:active,
  .note-link:active, .convo-link:active, .tabbar a:active, .tab-create > summary:active { background: var(--carbon); }
  .btn:active { border-color: var(--t3-text); }
  .pcard:active, .bcard:active { opacity: 0.85; }
  a, button, summary, label { -webkit-tap-highlight-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .pcard img, .pcard:hover img { transform: none; }
}

/* ---- Routes: map cards, the explorer, the route page, profile Routes and Rides ---- */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rcard { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--hair); border-radius: 10px; background: var(--carbon); overflow: hidden; }
.rcard:hover { border-color: rgba(255, 255, 255, 0.16); }
.rcard-map { position: relative; display: block; aspect-ratio: 5 / 3; background: var(--asphalt); border-bottom: 1px solid var(--hair); }
.rcard-map img, .rcard-map .card-blank { width: 100%; height: 100%; object-fit: cover; border: 0; aspect-ratio: auto; }
.rcard-flag { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 4px; background: var(--asphalt); border: 1px solid var(--yellow-line); color: var(--yellow); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.rcard-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 6px; min-width: 0; }
.rcard-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }
.rcard-title { margin-top: 6px; font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.rcard-title a:hover { color: var(--yellow); }
.rcard-place { margin-top: 4px; color: var(--t2); font-size: 14px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard .rstats { margin-top: 12px; }
.rcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding: 8px 0 4px; border-top: 1px solid var(--hair); min-width: 0; }
.rcard-foot .byline-who { min-width: 0; color: var(--t2); font-size: 14px; overflow: hidden; }
.rcard-foot .byline-who .avatar { width: 22px; height: 22px; flex: none; }
.rcard-foot .handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard-foot .act { padding: 0; }
.rcard-foot .act-btn { margin-right: -8px; }
.rcard-links { flex-wrap: wrap; justify-content: flex-start; gap: 4px 16px; padding: 10px 0 8px; }
.rcard-links a { color: var(--yellow); font-size: 14px; font-weight: 600; }
.rstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--hair); }
.rstats div { padding: 10px 0; min-width: 0; }
.rstats div + div { padding-left: 12px; border-left: 1px solid var(--hair); }
.rstats dt { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3-text); }
.rstats dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.diff-easy { color: var(--green); }
.diff-moderate { color: var(--yellow); }
.diff-hard, .diff-expert { color: var(--red); }
.rstack { gap: 16px; }

/* Plan a Route */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin: 32px 0; padding: 28px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.plan h2 { margin: 8px 0 10px; }
.plan-text > p:not(.overline):not(.actions) { color: var(--t2); max-width: 46ch; }
.plan .actions { margin-top: 20px; }
.plan-big { margin-top: 8px; padding: 40px 0; border-top: 1px solid var(--yellow-line); }
.plan-big h2 { font-size: 34px; }
.plan-steps { border-top: 1px solid var(--hair); }
.plan-steps li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.plan-steps b { flex: none; width: 28px; color: var(--yellow); font-size: 15px; font-variant-numeric: tabular-nums; }
.plan-steps span { color: var(--t2); font-size: 15px; line-height: 1.45; }
.plan-steps strong { display: block; color: var(--t1); font-weight: 600; }

/* The explorer */
.rx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.rx-title { font-size: 28px; }
.rx-head p { margin-top: 6px; }
.rx-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-bottom: 24px; }
.rx-explain div { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.rx-explain b { display: block; font-weight: 600; }
.rx-explain span { display: block; margin-top: 4px; color: var(--t2); font-size: 15px; line-height: 1.45; }
.rx-filters { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.rx-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; min-width: 0; }
.rx-search { display: flex; align-items: center; gap: 10px; flex: 1 1 280px; min-width: 0; padding: 0 12px; min-height: 44px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); color: var(--t3-text); }
.rx-search:focus-within { border-color: var(--yellow-line); }
.rx-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--t1); font: inherit; font-size: 16px; outline: none; }
.rx-sel { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 4px 0 12px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); color: var(--t3-text); font-size: 13px; font-weight: 600; }
.rx-sel select { min-height: 38px; max-width: 160px; border: 0; background: var(--carbon); color: var(--t1); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.rx-sel[hidden] { display: none; }
.rx-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); color: var(--t2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.rx-check input { accent-color: var(--yellow); width: 16px; height: 16px; margin: 0; }
.rx-check:has(input:checked), .rx-check.is-on { color: var(--yellow); border-color: var(--yellow-line); }
.rx-check[hidden] { display: none; }
.rx-apply { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.rx-apply .btn { min-height: 40px; }
.rx-apply a { font-size: 14px; }
.rx-note { color: var(--t3-text); font-size: 14px; }
.rx-note[hidden] { display: none; }
.rx-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; }
.rx-count { color: var(--t3-text); font-size: 14px; }
.rx-view { display: inline-flex; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; }
.rx-view[hidden] { display: none; }
.rx-view button { min-height: 34px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--t2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rx-view button + button { border-left: 1px solid var(--hair); }
.rx-view button[aria-pressed="true"] { background: var(--slate); color: var(--t1); border-bottom-color: var(--yellow); }
.rx-map { position: relative; height: min(68vh, 620px); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--carbon); }
.rx-map[hidden] { display: none; }
.rx-map-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--t3-text); font-size: 14px; }
.rx-list[hidden] { display: none; }
.rx-sec { margin-top: 32px; }
.rx-sec[hidden] { display: none; }
.rx-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.rx-ask p { color: var(--t2); max-width: 60ch; }
.rx-ask .actions { margin-top: 0; }
.rx-ask .btn svg { margin-right: 6px; }
.rx-none { padding: 40px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.rx-none p { margin-top: 8px; color: var(--t2); max-width: 56ch; }
.rx-none .actions { margin-top: 20px; }
.mapboxgl-popup-content { background: var(--carbon) !important; color: var(--t1); border: 1px solid var(--hair); border-radius: 8px !important; padding: 12px 28px 12px 14px !important; font: 400 14px/1.4 var(--font); box-shadow: none !important; }
.mapboxgl-popup-tip { display: none; }
.mapboxgl-popup-content a { color: var(--t1); font-weight: 600; }
.mapboxgl-popup-content a:hover { color: var(--yellow); }
.mapboxgl-popup-content span { display: block; margin-top: 2px; color: var(--t3-text); font-size: 13px; }
.mapboxgl-popup-close-button { color: var(--t3-text); font-size: 18px; }

/* The route page */
.rd-head { padding-top: 40px; }
.rd-head h1 { margin: 10px 0 12px; font-size: 44px; max-width: 900px; overflow-wrap: anywhere; }
.rd-review { margin: 0 0 12px; font-size: 14px; color: var(--yellow); max-width: 900px; }
.rd-review-no { color: var(--red); }
.rd-stage { margin-top: 28px; }
.rd-map { position: relative; height: min(64vh, 560px); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--carbon); }
.rd-map-still { width: 100%; height: 100%; object-fit: cover; }
.rd-map.is-live .rd-map-still { display: none; }
.rd-map-none { display: flex; align-items: center; justify-content: center; height: 220px; }
.rd-cover img { width: 100%; border-radius: 10px; }
.rd-elev { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair); }
.rd-elev[hidden] { display: none; }
.rd-elev figcaption { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rd-elev-read { color: var(--t2); font-size: 13px; font-variant-numeric: tabular-nums; }
.rd-elev-plot { position: relative; height: 110px; cursor: crosshair; touch-action: pan-y; }
.rd-elev-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rd-elev-plot .el-line { fill: none; stroke: var(--yellow); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rd-elev-plot .el-base { stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rd-elev-plot .el-cursor { stroke: var(--t2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rd-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; margin-top: 28px; padding-bottom: 24px; }
.rstats-big { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 0; }
.rstats-big div, .rstats-big div + div { padding: 14px 0 14px 16px; border-bottom: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.rstats-big div:nth-child(4n + 1) { padding-left: 0; border-left: 0; }
.rstats-big div:nth-child(-n + 4) { border-top: 1px solid var(--hair); }
.rstats-big dd { font-size: 20px; }
.rd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; }
.rd-actions form.act { padding: 0; }
.rd-actions form.act:hover { background: none; }
.rd-actions .btn svg { margin-right: 6px; }
.rd-actions .btn.act-btn { min-height: 44px; padding: 0 18px; border: 1px solid var(--hair); background: var(--slate); color: var(--t1); font-size: 15px; font-weight: 600; line-height: normal; }
.rd-actions .btn.act-btn.is-on { color: var(--yellow); border-color: var(--yellow-line); }
.rd-more > summary.btn { padding: 0 18px; cursor: pointer; }
.rd-more .pmenu-sheet { left: 0; right: auto; }
.rd-actions + .field-hint, .rd-actions ~ dialog + .field-hint { margin-top: 10px; }
/* Ride This Route on a computer: the page as a QR code beside how to use it. */
.rd-ride { display: flex; gap: 20px; align-items: center; margin-top: 12px; }
.rd-ride .gr-qr-code { flex: none; width: 168px; }
.rd-ride p { margin: 0; color: var(--t2); font-size: 15px; line-height: 1.5; }
@media (max-width: 560px) { .rd-ride { flex-direction: column; align-items: flex-start; } }
/* Road Guide: flat hairline rows, label left, fact right. */
.rd-guide { margin-top: 32px; }
.rd-guide dl { margin: 10px 0 0; border-top: 1px solid var(--hair); }
.rd-guide dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.rd-guide dt { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); padding-top: 2px; }
.rd-guide dd { margin: 0; color: var(--t1); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 560px) { .rd-guide dl > div { grid-template-columns: 1fr; gap: 4px; } }
.rd-desc { margin-top: 28px; }
.rd-stops { margin-top: 32px; }
.rd-stops ol { margin-top: 10px; border-top: 1px solid var(--hair); }
.rd-stop { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.rd-stop b { flex: none; width: 56px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); font-variant-numeric: tabular-nums; }
.rd-stop-start b { color: var(--green); }
.rd-stop-finish b { color: var(--red); }
.rd-stop span { min-width: 0; overflow-wrap: anywhere; }
.rd-body .thread { margin-top: 40px; }
.rd-own { padding: 0 0 20px; border-bottom: 1px solid var(--hair); }
.rd-own p:not(.overline):not(.actions) { margin-top: 8px; color: var(--t2); font-size: 15px; }
.rd-own .actions { margin-top: 16px; }
.rd-rail .handoff { padding-top: 20px; }
.rd-pin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--asphalt); background: var(--yellow); }
.rd-pin-start { background: var(--green); }
.rd-pin-end { background: var(--red); }

/* Profile tabs */
.ptabs { margin-top: 24px; }

/* Profile Posts / Comments: one filter row over one list */
.pfeed-tabs { margin: 24px 0 0; scroll-margin-top: 80px; }
.pmain > .pfeed-tabs:first-child { margin-top: 0; }
.pfeed-tabs .lbl-n { margin-left: 4px; }
.pfeed-tabs + .posts, .pfeed-tabs + .empty { border-top: 0; }
.pcomments { list-style: none; margin: 0; padding: 0; }
.pcomment { padding: 16px 0; border-bottom: 1px solid var(--hair); }
.pcomment-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; color: var(--t3-text); font-size: 14px; }
.pcomment-ctx a { color: var(--t2); }
.pcomment-ctx a:hover { color: var(--t1); }
.pcomment-post { display: block; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: 8px; color: var(--t2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.pcomment-post:hover { color: var(--t1); border-color: var(--slate); }
.pcomment-more { margin: 16px 0 0; }

@media (max-width: 1080px) {
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .rgrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .plan { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .plan-big h2 { font-size: 26px; }
  .rx-explain { grid-template-columns: minmax(0, 1fr); }
  .rx-title { font-size: 24px; }
  .rx-apply { margin-left: 0; width: 100%; }
  .rx-sel { flex: 1 1 calc(50% - 6px); justify-content: space-between; min-width: 0; }
  .rx-sel select { max-width: none; flex: 1; min-width: 0; }
  .rx-map { height: 60vh; }
  .rd-head { padding-top: 24px; }
  .rd-head h1 { font-size: 32px; }
  .rd-map { height: 52vh; border-radius: 0; border-left: 0; border-right: 0; margin: 0 calc(-1 * var(--gutter)); }
  .rstats-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rstats-big div:nth-child(4n + 1) { padding-left: 16px; border-left: 1px solid var(--hair); }
  .rstats-big div:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
  .rstats-big div:nth-child(-n + 4) { border-top: 0; }
  .rstats-big div:nth-child(-n + 2) { border-top: 1px solid var(--hair); }
  .rd-actions .btn { flex: 1 1 auto; }
}

/* Log a Past Ride */
[data-ride-log] [hidden] { display: none; }
.stats-more { margin: 10px 0 0; }
.log-list { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid var(--hair); }
.log-row { cursor: pointer; }
.log-row input { flex: none; width: 18px; height: 18px; margin: 0; }
.log-when { color: var(--t1); font-weight: 600; }
.log-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 16px 0 6px; }
.log-pick .btn { flex: none; cursor: pointer; }
.log-pick .doc-name { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.log-pick .doc-name:empty { display: none; }
.log-file .log-found { margin-top: 18px; }
.log-seed { margin: 0 0 12px; color: var(--t2); }
.log-next { margin: 14px 0 0; }
.log-next .btn { width: 100%; }
.log-from { display: flex; align-items: flex-end; gap: 10px; }
.log-from .field { flex: 1 1 auto; min-width: 0; margin-bottom: 10px; }
.log-from select { width: 100%; text-overflow: ellipsis; }
.log-from .btn { flex: none; margin-bottom: 10px; min-height: 44px; }
.log-form .field-row { grid-template-columns: 1fr 1fr; gap: 0 12px; }
.log-timing { margin: 4px 0 12px; }
.log-pace { margin: 0 0 18px; padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--t2); font-size: 14px; line-height: 1.45; }
.log-pace-warn { color: var(--red); }
.log-ends { border-top: 1px solid var(--hair); margin-bottom: 8px; }
[data-timing-for][hidden] { display: none; }
.ride-notes { margin: 22px 0 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.actions + .field-hint { margin-top: 12px; }
.ride-notes p { margin-top: 8px; color: var(--t2); line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.ride-source { color: var(--t3-text); }

/* notification settings: categories against Push, Email and In-App */
.ns-grid { display: flex; flex-direction: column; border-top: 1px solid var(--hair); }
.ns-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 72px); align-items: center; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.ns-head { padding: 10px 0; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }
.ns-head span:not(:first-child) { text-align: center; }
.ns-group { padding: 18px 0 6px; font-size: 13px; font-weight: 600; color: var(--t2); border-bottom: 1px solid var(--hair); }
.ns-cat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ns-cat small { color: var(--t3-text); font-size: 14px; line-height: 1.4; }
.ns-switch { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; }
.ns-switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 20px; height: 20px; border: 1.5px solid var(--t3); border-radius: 5px; background: var(--carbon); display: inline-grid; place-content: center; cursor: pointer; }
.ns-switch input::before { content: ""; width: 12px; height: 7px; border: solid var(--yellow); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 0.12s; }
.ns-switch input:checked { border-color: var(--yellow); }
.ns-switch input:checked::before { transform: translateY(-1px) rotate(-45deg) scale(1); }
.ns-switch input:disabled { opacity: 0.45; cursor: not-allowed; }
.ns-switch input:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.ns-label { display: none; font-size: 11px; color: var(--t3-text); }
.ns-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 560px) {
  .ns-row { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
  .ns-row .ns-cat { grid-column: 1 / -1; }
  .ns-head { display: none; }
  .ns-label { display: block; }
}

/* Settings: a rail (who you are, search, the sections) beside the one open section,
   each scrolling on its own like Messages. The section's groups of flat hairline rows
   flow into two columns from about 1000px of pane and three from 1600px. On a phone
   /settings is the rail and each section is its own page with a back link. */
@media (min-width: 721px) {
  body:has(.set) { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
  body:has(.set) > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  body:has(.set) > .foot { display: none; }
}
.set { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; padding-top: 28px; }
.set-nav { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 32px; scrollbar-width: thin; }
.set-title { font-size: 28px; margin: 0 0 18px; }
.set-me { display: flex; align-items: center; gap: 14px; padding: 0 0 18px; border-bottom: 1px solid var(--hair); }
.set-me-photo { flex: none; }
.set-me-photo img { display: block; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--carbon); }
.set-me-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.set-me-name { color: var(--t1); font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-me-name:hover { color: var(--yellow); }
.set-me-handle { color: var(--t2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-me-plan { display: flex; align-items: center; color: var(--t2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.set-me-plan .pro-mark { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 700; }
.set-me-email { color: var(--t3-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-find { position: relative; margin: 16px 0 10px; }
.set-find svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--t3-text); pointer-events: none; }
.set-find input { width: 100%; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 15px; padding: 10px 12px 10px 36px; outline: none; -webkit-appearance: none; appearance: none; }
.set-find input:focus { border-color: var(--yellow-line); }
.set-find input::placeholder { color: var(--t3-text); }
.set-find input::-webkit-search-cancel-button { filter: grayscale(1); opacity: 0.6; }
.set-group { margin: 22px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }
.set-links { list-style: none; margin: 0; padding: 0; }
.set-links a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 12px; border-radius: 6px; color: var(--t2); }
.set-link-text { display: flex; flex-direction: column; gap: 1px; }
.set-link-text b { font-size: 15px; font-weight: 500; }
.set-link-text small { display: none; color: var(--t3-text); font-size: 13px; line-height: 1.4; }
.set-results .set-link-text small { display: block; }
.set-links a:hover { color: var(--t1); background: var(--carbon); }
.set-links a[aria-current] { color: var(--t1); background: var(--carbon); }
.set-links a[aria-current] .set-link-text b { font-weight: 600; }
.set-links a > span { flex: 1; min-width: 0; }
.set-results .set-links a:hover .set-link-text b { color: var(--yellow); }
.set-results .set-empty { padding: 12px; border: 0; }
.set-count { font-size: 13px; font-weight: 700; color: var(--yellow); }
.set-chev { flex: none; color: var(--t3); }
.set-nav .set-chev { display: none; }
.set-pane { position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 25vh 0; container-type: inline-size; }
.set-sec { display: none; padding-bottom: 40px; }
.set-sec.is-current { display: block; }
.set-page { max-width: 1040px; }
.set-head { margin: 0 0 26px; }
.set-blurb { margin: 0; color: var(--t3-text); font-size: 15px; }
.set-grp { scroll-margin-top: 12px; }
.set-grp > .set-sub + .field-hint { margin: 12px 0 4px; }
.set-grp .choices + .field-hint, .set-grp form > .field-hint:last-child, .set-grp > .field-hint:last-child { margin-top: 12px; }
.set-grp.is-found > .set-sub { animation: set-found 1.6s ease; }
@keyframes set-found { 0%, 40% { color: var(--yellow); } 100% { color: var(--t2); } }
@container (min-width: 860px) {
  .set-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 64px; align-items: start; }
  .set-body > form.settings { display: contents; }
  .set-body > :not(.set-grp):not(form.settings), .set-body > form.settings > :not(.set-grp), .set-grp-wide { grid-column: 1 / -1; }
  .set-body .set-grp > .set-sub:first-child { margin-top: 0; }
  .set-body > form.settings > .set-lede, .set-body > form.settings > .form-ok, .set-body > form.settings > .form-error { margin: 0; }
  .set-grp-end { order: 1; }
  /* site.js places each group under the one above it in its column on 4px rows. */
  .set-body.is-packed { grid-auto-rows: 4px; row-gap: 0; }
  .set-grp-wide .plates { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .set-page .riders-manage { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); column-gap: 48px; }
}
.set-head h2 { font-size: 26px; margin: 0 0 4px; }
/* "Saved!" beside the section title after an autosave; it fades in, holds, then goes. */
.set-saved { display: inline-block; margin-left: 12px; vertical-align: 3px; font-size: 14px; font-weight: 500; color: var(--t3-text); opacity: 0; animation: set-saved 2.4s ease forwards; }
@keyframes set-saved { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.set-back { display: none; }
.set-back.is-up { display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 4px -4px; color: var(--t3-text); font-size: 14px; font-weight: 600; }
.set-back.is-up:hover { color: var(--yellow); }
.set-back::before { content: ""; width: 7px; height: 7px; margin: 0 6px 0 7px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg); }
.set-note { color: var(--t3-text); font-size: 14px; margin: 0 0 16px; }
.set-sub { font-size: 15px; font-weight: 600; color: var(--t2); margin: 32px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.set-head + .set-sub, .set-sub-first { margin-top: 0; }
.set-sub + .avatar-field, .settings .set-sub + .field, .settings .set-sub + .muted { margin-top: 16px; }
.set-lede { color: var(--t2); font-size: 15px; margin: 0 0 14px; }
.set-sub + .set-lede { margin-top: 12px; }
.set-sub-links { display: flex; flex-wrap: wrap; gap: 18px; margin: -6px 0 4px; font-size: 14px; }
.set-sub-links a { color: var(--yellow); font-weight: 600; }
.set-rows + .field-hint { margin-top: 10px; }
.set-empty { margin: 0; padding: 16px 0; color: var(--t3-text); font-size: 15px; border-bottom: 1px solid var(--hair); }
.set-rows { list-style: none; margin: 0; padding: 0; }
.set-row { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 12px 0; border-bottom: 1px solid var(--hair); color: inherit; }
label.set-row { cursor: pointer; }
.set-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-row-text b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.set-row-text small { color: var(--t3-text); font-size: 14px; line-height: 1.45; }
.set-row-link:hover b { color: var(--yellow); }
/* Account Status: standing, restrictions, warnings and removed posts as flat hairline rows. */
.acst-standing { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: 8px; }
.acst-standing b { font-size: 17px; font-weight: 600; }
.acst-standing span { color: var(--t3-text); font-size: 14px; }
.acst-restricted { border-color: var(--red); }
.acst-restricted b { color: var(--red); }
.acst-h { font-size: 15px; font-weight: 600; color: var(--t2); margin: 32px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--hair); }
.acst-list { list-style: none; margin: 0; padding: 0; }
.acst-row { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.acst-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--t3-text); font-size: 14px; line-height: 1.45; }
.acst-main b { color: var(--t1); font-size: 16px; font-weight: 600; }
.acst-main small { font-size: 12px; font-weight: 600; }
.acst-main a { color: var(--yellow); font-weight: 600; }
.acst-quote { font-style: italic; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acst-date { flex: none; text-align: right; color: var(--t3-text); font-size: 13px; line-height: 1.45; }
.acst-restr { padding-top: 12px; border-bottom: 1px solid var(--hair); }
.acst-restr b { display: block; font-size: 16px; font-weight: 600; }
.acst-restr p { margin: 3px 0 0; color: var(--t3-text); font-size: 14px; line-height: 1.45; }
.acst-facts { margin: 10px 0 0; }
.acst-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.acst-facts dt { color: var(--t3-text); }
.acst-facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.acst-standing + .acst-h, .acst-restr + .acst-h { margin-top: 28px; }
.set-memorial svg { flex: none; color: var(--red); }
.ride-perfect { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--t2); font-size: 15px; }
.ride-perfect svg { flex: none; color: var(--green); }
.set-memorial .set-row-text b { font-size: 14px; font-weight: 500; color: var(--t2); }
.set-ok, .set-warn { font-size: 13px; font-weight: 600; }
.set-ok { color: var(--green); }
.set-warn { color: var(--yellow); }
.set-row-text b .set-ok { margin-left: 6px; }
.set-form { margin: 0; }
.set-form .field { margin: 16px 0 0; }
.set-form .field + .field-hint { margin-top: 6px; }
.set-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 14px 0 0; }
.set-act { display: flex; align-items: center; gap: 10px; flex: none; }
.set-act .set-status { order: -1; margin: 0; }
.set-status { margin: 8px 0 0; font-size: 14px; color: var(--t3-text); }
.set-status:empty { display: none; }
.set-status.is-ok { color: var(--green); }
.set-status.is-err { color: var(--red); }
.set-actions .set-status { margin: 0; }
.set-step { padding: 4px 0 16px; border-bottom: 1px solid var(--hair); }
/* Back By: the countdown row, then I'm OK, the Extend steps and Turn Off on one line. */
.set-backby { padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.set-backby .set-row { border-bottom: 0; }
.set-backby [data-back-by-left] { color: var(--t1); font-variant-numeric: tabular-nums; }
.set-backby-label { color: var(--t3-text); font-size: 14px; font-weight: 600; }
.set-backby-time .field { max-width: 240px; }
.set-more { border-bottom: 1px solid var(--hair); }
.set-more > summary { list-style: none; display: flex; align-items: center; gap: 16px; min-height: 52px; cursor: pointer; color: var(--t2); font-size: 15px; font-weight: 600; }
.set-more > summary::-webkit-details-marker { display: none; }
.set-more > summary::after { content: ""; flex: none; width: 7px; height: 7px; margin: 0 6px 4px auto; border: solid var(--t3-text); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s; }
.set-more[open] > summary::after { transform: translateY(3px) rotate(-135deg); }
.set-more > summary:hover { color: var(--t1); }
.set-more[open] { padding-bottom: 18px; }
.set-more-row > summary { min-height: 60px; padding: 12px 0; color: inherit; font-weight: inherit; }
.set-more-row > summary::after { margin-left: 0; }
.set-edit { color: var(--t3-text); font-size: 14px; font-weight: 500; }
.set-danger > summary, .set-danger > summary:hover { color: var(--red); }
.set-select { background: var(--carbon); color: var(--t1); border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 15px; max-width: 50%; }
.set-select:focus { border-color: var(--yellow-line); outline: none; }
.switch { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0; border-radius: 14px; border: 1px solid var(--hair); background: var(--slate); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.switch::before { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--t2); transition: transform 0.15s, background 0.15s; }
.switch:checked { background: var(--yellow-bg); border-color: var(--yellow-line); }
.switch:checked::before { transform: translateX(18px); background: var(--yellow); }
/* Show Pro: a quiet secondary toggle set apart under the badge list, not one of its choices. */
.set-pro-row { min-height: 0; margin-top: 18px; padding: 14px 0 12px; border-top: 1px solid var(--hair); border-bottom: 0; cursor: pointer; }
.set-pro-row .set-row-text b { font-size: 14px; font-weight: 500; color: var(--t2); display: inline-flex; align-items: center; gap: 8px; }
.set-pro-row .set-row-text small { font-size: 13px; }
.set-pro-row .pro-mark { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-size: 11px; }
.set-pro-row .switch { width: 38px; height: 22px; border-radius: 11px; }
.set-pro-row .switch::before { top: 3px; left: 3px; width: 14px; height: 14px; }
.set-pro-row .switch:checked::before { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.switch:disabled { opacity: 0.5; cursor: default; }
.set-badge { display: inline-flex; align-items: center; gap: 6px; }
.set-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 18px; letter-spacing: 0.08em; }
.set-link { font-size: 15px; font-weight: 500; color: var(--t2); }
.set .settings h2 { margin-top: 0; }
.set .settings h2 ~ h2 { margin-top: 28px; }
.set-requests .act { margin: 0; }
.set-dialog { width: calc(100% - 32px); max-width: 440px; padding: 24px; border: 1px solid var(--hair); border-radius: 12px; background: var(--carbon); color: var(--t1); }
.set-dialog::backdrop { background: rgba(12, 16, 20, 0.8); }
.set-dialog h3 { margin: 0 0 8px; font-size: 20px; }
.set-dialog p { margin: 0 0 12px; color: var(--t2); font-size: 15px; }
.set-dialog-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
/* Places: the save sheet, "Is It This One?" and Set Home / Set Work (site.js MRPlaces). */
.pl-sheet { max-width: 480px; max-height: calc(100vh - 48px); overflow-y: auto; }
.pl-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pl-sheet-head h3 { margin: 0; }
.pl-sheet-x { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: -8px; border: 0; background: none; color: var(--t3-text); cursor: pointer; }
.pl-sheet-x:hover { color: var(--t1); }
.pl-sheet-place { display: flex; flex-direction: column; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.pl-sheet-place b { color: var(--t1); font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.pl-sheet-place span { color: var(--t3-text); font-size: 14px; }
.pl-form { margin: 0; }
.pl-fs { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.pl-fs legend { padding: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }
.pl-fs .choice:last-child { border-bottom: 0; }
.pl-fs .choice b { font-weight: 600; color: var(--t1); }
.pl-fs .choice.is-off { cursor: default; }
.pl-fs .choice.is-off b, .pl-fs .choice.is-off input { opacity: 0.5; }
.pl-form .field { margin: 14px 0 0; }
.pl-form .field textarea { min-height: 4.5em; }
.pl-sheet-vis { margin: 14px 0 0; color: var(--t3-text); font-size: 14px; }
.pl-sheet-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pl-sheet-acts .btn { min-height: 42px; padding: 0 18px; }
.pl-remove { display: block; margin-top: 16px; font-size: 14px; color: var(--t3-text); }
.pl-remove:hover { color: var(--red); }
.pl-err { margin: 14px 0 0; }
.pl-pick { list-style: none; margin: 4px 0 0; padding: 0; }
.pl-pick li { border-bottom: 1px solid var(--hair); }
.pl-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 12px 0; border: 0; background: none; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.pl-pick-row > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-pick-row b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pick-row small { color: var(--t3-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-pick-row:hover b { color: var(--yellow); }
.pl-pick-go { flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); }
.pl-here { border-bottom: 1px solid var(--hair); }
.pl-here b { color: var(--yellow); }
.pl-none { padding: 16px 0; color: var(--t3-text); font-size: 14px; }
.pl-notice { display: flex; align-items: center; gap: 14px; }
.pl-undo { padding: 0; border: 0; background: none; color: var(--yellow); font: inherit; font-weight: 700; cursor: pointer; }
.pl-undo:hover { color: var(--t1); }
.pl-review { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); color: var(--t2); font-size: 15px; line-height: 1.5; }
.pl-review b { display: block; color: var(--t1); }
@media (prefers-reduced-motion: reduce) { .switch, .switch::before, .set-more > summary::after { transition: none; } }
@media (max-width: 720px) {
  .set { display: block; padding-top: 8px; }
  .set-pane { overflow: visible; padding: 0; }
  .set-at-index .set-pane { display: none; }
  .set:not(.set-at-index) .set-nav { display: none; }
  .set-sec { padding-bottom: 32px; }
  .set-title { margin-top: 12px; }
  .set-group { margin-top: 26px; }
  .set-find { margin: 16px 0 6px; }
  .set-find input { font-size: 16px; }
  .set-links a { min-height: 60px; padding: 10px 2px; border-radius: 0; border-bottom: 1px solid var(--hair); color: var(--t1); }
  .set-link-text b { font-size: 16px; }
  .set-link-text small { display: block; }
  .set-links a:hover, .set-links a[aria-current] { background: none; }
  .set-links a[aria-current] .set-link-text b { font-weight: 500; }
  .set-nav .set-chev { display: block; }
  .set-back, .set-back.is-up { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 0 0 0 -4px; color: var(--yellow); font-size: 15px; font-weight: 600; }
  .set-back::before { width: 8px; height: 8px; margin: 0 4px 0 6px; }
  .set-head { margin-bottom: 28px; }
  .set-head h2 { font-size: 26px; margin: 4px 0 4px; }
  .set-blurb { font-size: 14px; }
  .set-select { max-width: 55%; }
}

/* Ride detail: planned versus ridden map, legend, embeds. */
.ride-map-wrap { padding-top: 8px; }
.ride-map { height: 460px; border-radius: 10px; overflow: hidden; background: var(--carbon); border: 1px solid var(--hair); }
.ride-map .mapboxgl-ctrl-group { background: var(--carbon); border: 1px solid var(--hair); box-shadow: none; border-radius: 8px; }
.ride-map .mapboxgl-ctrl-group button + button { border-top-color: var(--hair); }
.ride-map .mapboxgl-ctrl-icon { filter: invert(1); }
.ride-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.ride-key { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; color: var(--t2); font: 500 14px/1 var(--font); cursor: pointer; }
.ride-key:hover { color: var(--t1); }
.ride-key[aria-pressed="false"] { color: var(--t3-text); }
.ride-key[aria-pressed="false"] .ride-swatch { opacity: 0.3; }
.ride-swatch { width: 22px; height: 0; border-top: 4px solid var(--yellow); border-radius: 2px; }
.ride-swatch-planned { border-top: 3px dashed #8B95A7; }
.ride-swatch-off { border-top-color: var(--red); }
.ride-swatch-skipped { border-top: 3px dotted var(--red); }
.ride-legend-note { margin-left: auto; color: var(--t3-text); font-size: 13px; }
.ride-unit { margin-left: 4px; font-size: 13px; font-weight: 500; }
.ride-head { margin-bottom: 0; }
.ride-head h2 { font-size: 19px; }
.ride-followed { color: var(--green); }
.ride-links { margin-bottom: 24px; }
.ride-links .row { padding: 14px 0; }
.ride-links .row-title { font-size: 17px; }
.attach-map { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--carbon); border-bottom: 1px solid var(--hair); }
@media (max-width: 720px) {
  .ride-map { height: 320px; border-radius: 8px; }
  .ride-legend-note { margin-left: 0; width: 100%; }
}
.ride-followed-note { margin-left: auto; color: var(--green); }
.ride-name { min-width: 0; color: var(--t1); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* ---- Frame ----
   One frame for every motorev.app page. The top bar's row and every page's content sit in
   the same box: fluid gutters (16px on a phone, about 48px on a desktop, 64px from 1600px)
   and a 1680px cap, centred together, so the logo, titles, tabs, cards and covers all start
   on one left edge. Below the cap the frame fills the window. Reading surfaces keep their
   measure inside it and map pages stay full bleed. */

:root { --frame: 1680px; --gutter: clamp(16px, 4vw, 64px); --wrap: calc(var(--frame) + 2 * var(--gutter)); --measure: 680px; }
@media (max-width: 720px) { :root { --gutter: 16px; } }

/* The wordmark stands alone on public pages; the console's label sits apart from it
   behind a hairline, so the two never read as one word. */
.lockup { min-width: 0; }

/* Rhythm: 32px from the top bar to the first thing on every page, covers included
   (map pages excepted). Sections are 48px apart; inside them, 16 to 24px. */
main > :first-child:not(.studio):not(.cover):not(article:not(.wrap)),
main > article:not(.wrap):first-child > :first-child:not(.cover) { padding-top: 32px; margin-top: 0; }
.section { padding-top: 48px; }
main > .section:first-child { padding-top: 32px; }
.screen .section-head, .pmain .lbl, .rail .lbl { margin-top: 0; }
.screen > .section-head:not(:first-child), .screen > .rx:not(:first-child) { margin-top: 48px; }

/* Reading measure: body copy stops near 680px; buttons size to their label. */
.lede, .page-head > p:not(.overline):not(.chips):not(.actions), .hero-small > p:not(.overline):not(.actions), p.empty { max-width: var(--measure); }
.btn { max-width: 100%; }

/* Articles, events and rides: the head, cover, body and foot start on the frame's left edge
   and keep their reading measure (820px for the head, 720px for the body). */
.wrap.article-head, .wrap.article-cover, .wrap.prose, .wrap.article-foot { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.wrap.article-head > * { max-width: 820px; }
.wrap.article-cover img { display: block; max-width: 820px; }
.wrap.prose > *, .wrap.article-foot > * { max-width: 720px; }

/* Forms and lists that are narrow on purpose keep their width inside the frame, flush left. */
.wrap.narrow { max-width: var(--wrap); }
.wrap.narrow > * { max-width: 760px; }

/* Route Studio's call to action: two columns that stop at their measure, buttons at their
   own width (the Pro plans' full width buttons stay with the plans). */
.plan:has(.plan-text) { grid-template-columns: minmax(0, 680px) minmax(0, 560px); justify-content: space-between; border-right: 0; }
.plan-text .btn { width: auto; }

@media (min-width: 721px) {
  /* Top bar: the nav keeps its room, the search field gives way first. */
  .top-row { gap: clamp(12px, 1.8vw, 32px); }
  .nav { min-width: 0; gap: 0; }
  .nav a { padding: 0 clamp(8px, 1vw, 14px); }
  .nav a[aria-current]::after { left: clamp(8px, 1vw, 14px); right: clamp(8px, 1vw, 14px); }
  .top-search { flex: 0 1 320px; width: auto; min-width: 140px; }
  .top-tools { flex: none; gap: clamp(4px, 0.6vw, 10px); }

  /* Covers: the frame's width under the top bar, the photos sharing it (the first a little
     wider) so the strip always reaches the right gutter. */
  .cover { width: calc(100% - 2 * var(--gutter)); max-width: var(--frame); margin: 32px auto 0; border-radius: 12px; }
  .strip { max-width: none; padding: 0; }
  .strip img, .strip img:first-child, .strip-1 img:first-child, .strip-2 img:last-child { flex: 1 1 0; width: auto; min-width: 0; }
  .strip img:first-child { flex-grow: 1.7; }
  /* A garage cover is taller so its photos are not cut to slivers, and spans the frame like
     the profile banner; a click opens the whole photo in the viewer. */
  .cover-short { height: clamp(240px, 17vw, 380px); }

  /* Grids: as many columns as fit, one more each time the window widens. */
  .grid-4, .grid-3, .rgrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .riders-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: clamp(24px, 3vw, 56px); }
  .grid { column-gap: clamp(16px, 1.4vw, 24px); }
  .rail .grid-2 { grid-template-columns: 1fr 1fr; }

  /* Body and rail pages: the body takes the room, the rail ends at the right gutter. */
  .split { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); column-gap: clamp(40px, 4vw, 72px); }
  /* A single post reads at the feed's measure. */
  .wrap.split:has(.posts-single) { grid-template-columns: minmax(0, 760px) minmax(300px, 360px); justify-content: space-between; }

}

@media (max-width: 1080px) and (min-width: 721px) {
  .split, .wrap.split:has(.posts-single) { grid-template-columns: minmax(0, 1fr); }
}

/* Between the phone layout and a full desktop: the search field folds into its icon. */
@media (min-width: 721px) and (max-width: 960px) {
  .top-search { display: none; }
  .tool-search { display: inline-flex; }
}

/* ---- Social ----
   The feed keeps ~720px with the Riders to Follow rail beside it. From 1400px the page spans
   the frame: a sticky left rail (the feed tabs, the rider's crews and shortcuts) starts on
   the logo's edge, the feed sits in the middle and the right rail ends at the right gutter.
   Narrower, the left rail folds away and the tabs sit above the feed. */
.lrail { display: none; }
.lrail-sec { display: flex; flex-direction: column; }
.lrail-sec + .lrail-sec { margin-top: 32px; }
.lrail-sec .overline { margin: 0 0 8px; }
.lrail-sec a { display: block; padding: 10px 0; border-bottom: 1px solid var(--hair); color: var(--t2); font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrail-sec .overline + a { border-top: 1px solid var(--hair); }
.lrail-sec a:hover { color: var(--t1); }
.lrail-sec a[aria-current] { color: var(--yellow); font-weight: 600; }
.lrail-sec .lrail-more { color: var(--t3-text); font-size: 14px; }
.social > .feed { min-width: 0; }
/* Articles and Builds share the rail; their cards take the rest of the frame. */
.social-browse > .browse { min-width: 0; }
.social-browse .browse-body { padding-left: 0; padding-right: 0; }
.feed-link { margin: 28px 0 0; color: var(--t3-text); font-size: 14px; }
.feed-link a { color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1081px) {
  .wrap.social { grid-template-columns: minmax(0, 720px) minmax(300px, 360px); justify-content: space-between; }
}
@media (min-width: 1400px) {
  .wrap.social { grid-template-columns: minmax(200px, 260px) minmax(0, 720px) minmax(300px, 360px); }
  .lrail { display: block; position: sticky; top: calc(64px + 32px); align-self: start; }
  .social > .feed > .seg { display: none; }
  .social > .feed > .compose, .social > .feed > .visitor { margin-top: 0; padding-top: 0; }
  .wrap.social-browse { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); column-gap: clamp(40px, 4vw, 72px); align-items: start; }
  .social-browse > .browse > .seg { display: none; }
  .social-browse .browse-body { padding-top: 24px; }
}

/* ---- Crews, the Social garage and Saved ----
   Crews sit in the Social shell: a search line, then sections of flat cards with a hairline
   frame, the plate, the place and style, what the crew is up to and the join button. */
.crew-find { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.crew-find input[type="search"], .crew-find select { background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 15px; padding: 8px 12px; min-height: 38px; outline: none; }
.crew-find input:focus, .crew-find select:focus { border-color: var(--yellow-line); }
.crew-find input[type="search"] { flex: 1 1 220px; min-width: 0; }
.crew-find select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A8B0BD' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; max-width: 100%; }
.crew-sec + .crew-sec { margin-top: 36px; }
.crew-sec > .lbl { margin-top: 0; }
.crew-locate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 24px; color: var(--t3-text); font-size: 14px; }
.crew-locate[hidden] { display: none; }
.crews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.crew { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; border: 1px solid var(--hair); border-radius: 10px; background: var(--carbon); scroll-margin-top: 96px; }
.crew-head { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--t1); }
.crew-plate { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; background: var(--slate); }
.crew-plate-lg { width: 72px; height: 72px; }
.crew-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crew-name { font-size: 17px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-head:hover .crew-name { color: var(--yellow); }
.crew-where { font-size: 13px; color: var(--t3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-desc { margin: 0; color: var(--t2); font-size: 15px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crew-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 13px; color: var(--t3-text); font-variant-numeric: tabular-nums; }
.crew-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--t2); }
.crew-next-k { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yellow); }
.crew-next-t { color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-next:hover .crew-next-t { color: var(--yellow); }
.crew-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; }
.crew-form { margin: 0; }
.crew-state { font-size: 13px; font-weight: 600; color: var(--t3-text); }
.crew-on { color: var(--yellow); border-color: var(--yellow-line); }
.crew-open { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font-size: 14px; font-weight: 500; color: var(--t2); }
.crew-open:hover { color: var(--t1); }
.crides { border-top: 1px solid var(--hair); }
.cride { border-bottom: 1px solid var(--hair); }
.cride-link { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "when title" "when sub"; column-gap: 16px; row-gap: 2px; padding: 12px 0; color: var(--t1); }
.cride-when { grid-area: when; font-size: 13px; font-weight: 600; color: var(--yellow); font-variant-numeric: tabular-nums; padding-top: 2px; }
.cride-title { grid-area: title; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cride-sub { grid-area: sub; font-size: 14px; color: var(--t3-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cride-link:hover .cride-title { color: var(--yellow); }
.crew-title { display: flex; align-items: center; gap: 16px; }
.crew-title + .lede { margin-top: 16px; }
.crew-title h1 { margin: 0; }
.crew-actions { margin-top: 16px; }
.crew-actions .crew-form { display: inline-flex; }
/* The page heading inside the shell for Garage and Saved: the title and its actions on one line. */
.browse-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 24px; }
.browse-head h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.browse-head .lede { font-size: 16px; margin-top: 6px; }
.browse-head .actions { margin: 0; }
.bstats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 0; border-top: 1px solid var(--hair); }
.bstats div { padding: 10px 0; min-width: 0; border-bottom: 1px solid var(--hair); }
.bstats div:nth-last-child(-n + 2) { border-bottom: 0; }
.bstats div:nth-child(2n) { padding-left: 12px; border-left: 1px solid var(--hair); }
.bstats dt { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3-text); }
.bstats dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.saved-posts .posts { max-width: 720px; }
@media (max-width: 640px) {
  .crew-find select, .crew-find .btn { flex: 1 1 auto; }
  .cride-link { grid-template-columns: 1fr; grid-template-areas: "when" "title" "sub"; }
  .browse-head h1 { font-size: 24px; }
  .garage-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Profile ----
   The rider's header across the frame, the tabs under it, then the garage strip and posts
   with the articles and routes rail beside them. The posts keep a reading measure; the rail
   widens a little with the window once it sits beside them. */
@media (min-width: 721px) {
  .pgrid .pmain > .posts { max-width: 760px; }
  /* The tab row's hairline spans the frame, the same width as the cover above it. */
  .wrap.ptabs { width: calc(100% - 2 * var(--gutter)); max-width: var(--frame); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
}
/* Phones: the tab row is already as wide as the screen, so it does not bleed past it. */
@media (max-width: 720px) {
  .wrap.ptabs { margin-left: 0; margin-right: 0; }
}
@media (min-width: 1081px) {
  .pgrid { grid-template-columns: minmax(0, 1fr) clamp(340px, 24vw, 440px); gap: clamp(32px, 3vw, 56px); }
}

/* ---- View as Public ----
   A slim hairline bar under the top bar while the owner previews their own profile or garage
   as a visitor sees it, with the way back. */
.preview-bar { border-bottom: 1px solid var(--hair); background: var(--asphalt); }
.preview-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; font-size: 14px; color: var(--t2); }
.preview-row a { color: var(--t1); font-weight: 600; white-space: nowrap; }
.preview-row a:hover { text-decoration: underline; }
/* Acting as @MotoRev: the same bar, with Switch Back. Account rows in the menu. */
.preview-row form { display: contents; }
.preview-row button { color: var(--t1); font: inherit; font-weight: 600; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.preview-row button:hover { text-decoration: underline; }
.acting-bar span { color: var(--t1); }
.menu-sheet .menu-account { display: flex; align-items: center; gap: 10px; }
.menu-account .avatar { width: 20px; height: 20px; flex: none; }
/* Social ban: the notice that stands in for a composer. */
.posting-paused { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; margin: 0 0 20px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.posting-paused p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.posting-paused b { color: var(--t1); font-size: 15px; font-weight: 600; }
.posting-paused span { color: var(--t2); font-size: 14px; }
.posting-paused .btn { flex: none; }

/* Primary nav centers in the space between the logo and the search field. The logo keeps
   one width across sections so the tabs hold still as the section name changes, and the
   tabs get more air between them as the window widens. */
@media (min-width: 721px) {
  .nav { justify-content: safe center; }
  .nav a { padding: 0 clamp(8px, 1.4vw, 22px); }
  .nav a[aria-current]::after { left: clamp(8px, 1.4vw, 22px); right: clamp(8px, 1.4vw, 22px); }
}
@media (min-width: 721px) and (max-width: 819px) {
  .lockup-word { display: none; }
}
@media (min-width: 900px) {
  .lockup { min-width: 200px; }
}
@media (min-width: 961px) and (max-width: 1279px) {
  .top-search { display: none; }
  .tool-search { display: inline-flex; }
}

/* ---- Article reader ----
   One DOM for every width. From 1400px: the Social rail on the logo's edge, the article at a
   reading measure in the middle and a sticky aside (author, actions, On This Page, linked
   routes and bikes, More From, Related) ending at the right gutter. 1081 to 1399px: the rail
   folds away and the article and aside share the frame. Narrower: one column, the aside's
   pieces dropping in under the article in reading order and the contents left out (the
   headings are right there). site.js keeps a tall aside scrolling until its end shows. */
.article-page { display: flex; flex-direction: column; }
.article-page > .lrail { order: 0; }
.article-main { order: 1; min-width: 0; }
.article-side { display: contents; }
.aside-acts { order: 2; }
.aside-author { order: 3; }
.aside-linked { order: 4; }
.article-comments { order: 5; min-width: 0; }
.aside-more { order: 6; }
.aside-related { order: 7; }
.aside-toc { order: 8; display: none; }
.aside-block { margin-top: 40px; min-width: 0; }
.aside-acts { margin-top: 24px; }

.article-page .article-head { padding-top: 0; max-width: none; }
.article-page .article-head > * { max-width: 760px; }
.article-page .article-cover { margin: 32px 0 0; max-width: none; }
.article-page .article-cover img { display: block; width: 100%; max-width: none; max-height: 440px; }
.article-page .prose { max-width: none; }
.article-tags { margin: 8px 0 0; }

.aside-author .overline { margin: 0 0 12px; }
.aside-author-row { display: flex; align-items: center; gap: 14px; }
.aside-author-row .avatar { width: 56px; height: 56px; }
.aside-author-who { min-width: 0; }
.aside-author-who h2 { margin: 0 0 4px; font-size: 19px; }
.aside-author-who h2 a:hover { color: var(--t2); }
.aside-bio { margin: 14px 0 0; color: var(--t2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.aside-since { margin: 10px 0 0; }
.aside-join { margin: 14px 0 0; color: var(--t3-text); font-size: 14px; line-height: 1.5; }
.aside-join a { color: var(--t2); text-decoration: underline; text-underline-offset: 3px; }
.aside-author .actions { margin-top: 16px; }
.aside-author .actions .act { padding: 0; }

.aside-acts { padding: 4px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.aside-acts .acts { margin-top: 0; }

.article-side .section-head { margin: 0; padding-bottom: 12px; }
.article-side .section-head h2 { font-size: 18px; }
.article-side .section-head a { white-space: nowrap; }

.aside-toc ol { list-style: none; margin: 0; padding: 0; }
.aside-toc a { display: block; padding: 9px 0; border-bottom: 1px solid var(--hair); color: var(--t2); font-size: 14px; font-weight: 500; line-height: 1.35; }
.aside-toc .toc-l3 a { padding-left: 16px; color: var(--t3-text); font-size: 13px; }
.aside-toc a:hover { color: var(--t1); }
.aside-toc a[aria-current] { color: var(--yellow); font-weight: 600; }
.prose [id^="sec-"] { scroll-margin-top: calc(64px + 24px); }

.aside-rows { list-style: none; margin: 0; padding: 0; }
.aside-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.aside-thumb { flex: none; width: 72px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--carbon); }
.aside-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aside-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aside-text b { color: var(--t1); font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aside-text small { color: var(--t3-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aside-kicker { color: var(--t3-text); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aside-kicker.is-section { color: var(--yellow); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.aside-row:hover b { color: var(--t2); }

@media (min-width: 1081px) {
  .wrap.article-page { display: grid; grid-template-columns: minmax(0, 720px) minmax(300px, 340px); grid-template-areas: "main side" "comments side"; grid-template-rows: auto 1fr; justify-content: space-between; column-gap: clamp(40px, 4vw, 72px); align-items: start; }
  .article-main { grid-area: main; }
  .article-comments { grid-area: comments; }
  .article-side { grid-area: side; display: flex; flex-direction: column; position: sticky; top: calc(64px + 32px); align-self: start; }
  .article-side > .aside-block { order: 0; margin-top: 36px; }
  .article-side > .aside-block:first-child { margin-top: 0; }
  .article-side > .aside-acts { margin-top: 20px; }
  .aside-toc { display: block; }
}
@media (min-width: 1400px) {
  .wrap.article-page { grid-template-columns: minmax(200px, 260px) minmax(0, 720px) minmax(300px, 360px); grid-template-areas: "rail main side" "rail comments side"; }
  .article-page > .lrail { grid-area: rail; }
}
@media (max-width: 720px) {
  .aside-block { margin-top: 32px; }
  .aside-acts { margin-top: 20px; }
}

/* ---- Wide garage ----
   The garage header is a band: name, makes, owner and description on the left; the numbers
   and owner controls on the right from 961px. A garage with one or two bikes shows each bike
   large (photo and thumbnails beside its facts, specs, mods and recent rides) instead of one
   small card in a mostly empty grid. Phones stack everything in one column. */
.ghead-band { align-items: stretch; }
.ghead-band .back-link { align-self: flex-start; }
.ghead-nocover { padding-top: 32px; }
.ghead-grid { display: block; width: 100%; }
.ghead-main { min-width: 0; }
.ghead-side { min-width: 0; }
.ghead-side .stats-card { margin-top: 16px; }
.ghead-side .actions { margin-top: 16px; }
.ghead-side .muted { margin-top: 12px; }
/* Owner controls: two buttons and a More menu, not a wall of buttons. */
.ghead-acts { align-items: center; gap: 10px; }
.ghead-acts .pmenu > summary.btn { padding: 0 18px; cursor: pointer; }
.ghead-acts .pmenu[open] > summary.btn { background: var(--carbon); border-color: var(--t3-text); }
.ghead-acts .btn-bfollow { min-height: 44px; padding: 0 18px; border: 1px solid var(--yellow-line); border-radius: 8px; background: var(--yellow-bg); color: var(--yellow); }
.ghead-acts .btn-bfollow.is-on { border-color: var(--hair); background: var(--slate); color: var(--t1); }
.gfeat-list { display: grid; gap: 40px; }
.gfeat { display: grid; gap: 20px; padding-bottom: 32px; border-bottom: 1px solid var(--hair); }
.gfeat:last-child { border-bottom: 0; padding-bottom: 0; }
.gfeat-media { min-width: 0; }
@media (min-width: 961px) { .gfeat-media { position: sticky; top: 84px; } }
.gfeat-cover { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; background: var(--slate); border: 1px solid var(--hair); }
.gfeat-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.2s; }
.gfeat-cover:hover img { filter: brightness(1.08); }
.gfeat-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.gfeat-thumbs a { display: block; aspect-ratio: 3 / 2; border-radius: 8px; overflow: hidden; border: 1px solid var(--hair); background: var(--slate); }
.gfeat-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gfeat-body { min-width: 0; }
.gfeat-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.gfeat-title { font-size: 26px; letter-spacing: -0.4px; margin-top: 2px; }
.gfeat-title a { color: inherit; }
.gfeat-title a:hover { text-decoration: underline; }
.gfeat-sub { color: var(--t2); font-size: 15px; margin-top: 2px; }
.gfeat-facts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: 24px; }
.gfeat-facts dt { flex-basis: 72px; }
.gfeat-notes { color: var(--t2); line-height: 1.55; max-width: var(--measure); margin: 4px 0 16px; }
.gfeat-cols { display: grid; gap: 0 32px; margin-top: 8px; font-size: 15px; }
.gfeat-cols .panel { margin-bottom: 0; border-bottom: 0; }
.gfeat-cols .mods { margin-bottom: 0; }
.specs-one { grid-template-columns: 1fr; }
.gfeat-rides a { display: block; color: inherit; }
.gfeat-rides a:hover .mod-name { text-decoration: underline; }
.gfeat .actions { margin-top: 16px; }
@media (min-width: 961px) {
  .ghead-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: 24px clamp(32px, 4vw, 80px); align-items: end; }
  .ghead-side .stats-card { margin-top: 0; max-width: none; }
  .ghead-side .actions { justify-content: flex-start; }
  .gfeat { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
  .gfeat-cols { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (min-width: 1400px) {
  .gfeat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gfeat-title { font-size: 30px; }
}
@media (max-width: 720px) {
  .gfeat-title { font-size: 22px; }
  .gfeat-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Wide event and place pages ----
   Event and place detail use the page split: the event's header, cover, RSVP and details (or
   the place's header, amenities and reviews) on the left; the hosting community and more
   events (or the map and nearby stops) in a side panel beside it from 1081px.
   The Places list runs in columns on wide screens instead of one long left-hugging list. */
.ev-page, .pl-page { padding-top: 32px; padding-bottom: 56px; }
.ev-head h1 { margin: 10px 0 16px; font-size: clamp(32px, 3.4vw, 48px); }
.ev-head .lede { max-width: var(--measure); }
.ev-cover { margin: 28px 0 28px; }
.ev-cover img { display: block; width: 100%; aspect-ratio: 2 / 1; max-height: 520px; object-fit: cover; border-radius: 10px; background: var(--carbon); }
.ev-main .rsvp { margin-top: 24px; }
.ev-main .prose { max-width: var(--measure); }
.ev-panel { margin-bottom: 28px; }
.ev-panel .section-head, .pl-near .section-head { display: flex; align-items: baseline; justify-content: space-between; }
.ev-crew { display: block; color: inherit; padding-bottom: 16px; border-bottom: 1px solid var(--hair); }
.ev-crew img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 10px; margin-bottom: 12px; background: var(--carbon); }
.ev-crew-name { display: block; font-size: 18px; font-weight: 700; color: var(--t1); }
.ev-crew:hover .ev-crew-name { text-decoration: underline; }
.ev-crew-sub { display: block; margin-top: 4px; font-size: 14px; color: var(--t3-text); }
.ev-crew-desc { display: block; margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--t2); }
.ev-rail .events .event-link { padding-top: 14px; padding-bottom: 14px; }
.pl-main { min-width: 0; }
.pl-main .lede, .pl-main .reviews { max-width: 820px; }
.pl-main .review-form { max-width: 820px; }
/* The place band: the photo and a live map side by side at one modest height, so neither
   dominates the page. No photo and the map takes the whole band. */
.pl-page { padding-top: 32px; }
.pl-head h1 { margin: 10px 0 12px; font-size: clamp(32px, 3.4vw, 48px); }
.pl-head .actions { margin-top: 18px; }
.pl-stage { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; height: clamp(280px, 30vw, 440px); margin-top: 28px; }
.pl-stage-map { grid-template-columns: minmax(0, 1fr); }
.pl-hero { display: block; min-height: 0; border-radius: 10px; overflow: hidden; background: var(--carbon); cursor: zoom-in; }
.pl-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-credit { margin-top: 8px; font-size: 12px; color: var(--t3-text); }
.pl-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pl-map { position: relative; min-height: 0; height: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); background: var(--carbon); }
.pl-map-still { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-map.is-live .pl-map-still { display: none; }
/* A place with no location: a flat row where the map would be. */
.pl-noloc { display: flex; align-items: center; gap: 10px; margin: 28px 0 0; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--t2); font-size: 15px; }
.pl-noloc svg { flex: none; width: 18px; height: 18px; color: var(--t3-text); }
.pl-noloc b { color: var(--t1); font-weight: 600; }

.pl-pin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--asphalt); background: var(--yellow); }
.pl-pin-near { width: 12px; height: 12px; border-width: 2px; background: var(--t2); cursor: pointer; }
.pl-pop a { color: var(--asphalt); font-weight: 600; }
.pl-pop small { display: block; color: #555; }
.pl-body { margin-top: 32px; }
.pl-facts { margin: 0 0 8px; border-top: 1px solid var(--hair); }
.pl-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.pl-facts dt { color: var(--t3-text); }
.pl-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--t1); }
.pl-facts dd a { color: inherit; }
.pl-facts dd a:hover { text-decoration: underline; }
@media (max-width: 720px) {
  .pl-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: 240px 220px; height: auto; }
  .pl-stage-map { grid-template-rows: 260px; }
}
.pl-addr { margin: 10px 0 0; font-size: 14px; color: var(--t2); }
.pl-near { margin-top: 28px; }
/* Place photos: a square thumb on each Places row, a strip under the place header that
   scrolls sideways past three photos. */
.row-thumb-sq, .rows-compact .row-thumb-sq { width: 96px; aspect-ratio: 1; }
.row-thumb-sq img { display: block; }
.pl-photos { display: flex; gap: 8px; margin: 0 0 24px; overflow-x: auto; scrollbar-width: none; }
.pl-photos::-webkit-scrollbar { display: none; }
.pl-photos a { flex: 0 0 160px; display: block; cursor: zoom-in; }
.pl-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--carbon); }
@media (max-width: 720px) {
  .row-thumb-sq { width: 72px; }
  .pl-photos a { flex-basis: 120px; }
}
.pl-near .row { padding: 14px 0; }
.pl-near .row-title { font-size: 17px; }
@media (min-width: 961px) {
  .places-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); column-gap: 40px; border-top: 0; }
}
@media (min-width: 1081px) {
  .split.pl-body { grid-template-columns: minmax(0, 1fr) minmax(360px, 540px); gap: clamp(40px, 4vw, 80px); }
}

/* ---- Wide profile and back links ----
   A rider with no articles or routes gets their garage in the side panel from 1081px,
   so the panel carries real content instead of sitting empty. Below that the panel
   stacks under the posts, so the garage stays as the strip at the top of the page. */
.pgarage-side { display: none; }
.phead-back { padding-top: 16px; }
.phead-back .back-link { margin-bottom: 8px; }
@media (min-width: 1081px) {
  .pgarage-main.is-moved { display: none; }
  .pgarage-side { display: block; margin-bottom: 32px; }
  .pgarage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .pgarage-grid > * { min-width: 0; }
}
@media (min-width: 1081px) {
  .pgarage-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Single post ----
   The post and its comments take the middle; More From sits on the right. From 1400px the
   Social rail joins on the left, so a wide screen holds rail, post and aside with no gap. */
.post-page > .post-main { min-width: 0; }
@media (min-width: 1081px) {
  .wrap.split.post-page { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); justify-content: stretch; }
}
@media (min-width: 1400px) {
  .wrap.split.post-page { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) minmax(320px, 420px); }
}

/* ---- Crew page ----
   A header band across the frame: the plate, name, place and style and the description on the
   left; members, join policy, the owner and Join or Leave on the right from 1081px. Below it the
   crew's threads and its members' posts take the main column, and a side column with the crew's
   rides, members, routes and related crews stays in view while the main column scrolls. */
.crew-page { padding-top: 32px; padding-bottom: 56px; }
.crew-band { display: grid; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--hair); }
.crew-band h1 { margin: 6px 0 0; font-size: clamp(30px, 3.2vw, 46px); }
.crew-band .lede { max-width: var(--measure); }
.crew-band .stats { margin-top: 0; }
.crew-band .byline-big { margin-top: 18px; }
.crew-band .crew-actions { margin-top: 20px; }
.crew-cover { margin: 28px 0 0; }
.crew-cover img { display: block; width: 100%; aspect-ratio: 8 / 3; max-height: 440px; object-fit: cover; border-radius: 10px; background: var(--carbon); }
.split.crew-split { margin-top: 32px; }
.crew-main { min-width: 0; }
.crew-block + .crew-block { margin-top: 40px; }
.crew-main .posts { max-width: none; }
.crew-page .section-head + .posts, .crew-page .section-head + .events { border-top: 0; }
.cthreads { list-style: none; margin: 0; padding: 0; }
.cthread { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.cthread .overline { margin: 0; }
.cthread-pin { color: var(--yellow); }
.cthread-title { margin: 6px 0 0; font-size: 18px; line-height: 1.35; color: var(--t1); }
.cthread-body { margin: 6px 0 0; max-width: var(--measure); color: var(--t2); font-size: 15px; line-height: 1.55; }
.cthread .byline { margin-top: 10px; }
.crew-quiet { max-width: var(--measure); }
.crew-panel + .crew-panel { margin-top: 32px; }
.crew-panel .section-head { display: flex; align-items: baseline; justify-content: space-between; }
.crew-panel-empty { margin: 0; padding: 14px 0; }
.crew-panel-more { margin: 10px 0 0; color: var(--t3-text); font-size: 14px; }
.crew-rail .events .event-link { padding-top: 14px; padding-bottom: 14px; }
.cmembers { list-style: none; margin: 0; padding: 0; }
.cmembers li { border-bottom: 1px solid var(--hair); }
.cmember { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: inherit; }
.cmember:hover .cmember-name { color: var(--yellow); }
.cmember-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.cmember-name { color: var(--t1); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmember-id small { color: var(--t3-text); font-size: 13px; }
.crew-routes { list-style: none; margin: 0; padding: 0; }
.crew-routes .row { gap: 14px; padding: 14px 0; }
.crew-routes .row-thumb { width: 96px; }
.crew-routes .row-title { font-size: 16px; }
.crew-mini { list-style: none; margin: 0; padding: 0; }
.crew-mini li { border-bottom: 1px solid var(--hair); }
.crew-mini-link { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: inherit; }
.crew-mini-link .crew-plate { width: 40px; height: 40px; }
.crew-mini-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.crew-mini-name { color: var(--t1); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crew-mini-link:hover .crew-mini-name { color: var(--yellow); }
.crew-mini-sub { color: var(--t3-text); font-size: 13px; }
/* Crew Talk: the crew page's thread list links to each thread; a thread page reads the
   thread and its replies in the main column with the crew and its other threads beside it. */
.crew-block .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cthread-title a { color: inherit; }
.cthread-title a:hover { color: var(--yellow); }
.ct-page .back-link { margin-bottom: 8px; }
.ct-page .split.crew-split { margin-top: 16px; }
.ct .overline { margin: 0; }
.ct-headline { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 8px; }
.ct-headline h1 { margin: 0; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.2; overflow-wrap: anywhere; }
.ct-flags { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 12px 0 0; font-size: 13px; color: var(--t3-text); }
.ct-flag-on { color: var(--yellow); }
.ct .byline { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--t3-text); font-size: 14px; }
.ct-body.prose { max-width: none; padding: 20px 0 24px; font-size: 17px; border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; }
.ct-body.prose > * { max-width: 860px; }
.ct-replies { margin-top: 32px; }
.ct-empty { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.ct-note p { margin: 0 0 12px; color: var(--t2); }
.ct-crew { padding-top: 0; }
.ct-crew .crew-plate { width: 48px; height: 48px; }
.ct-crew-actions { margin-top: 4px; }
.ct-others { list-style: none; margin: 0; padding: 0; }
.ct-others li { border-bottom: 1px solid var(--hair); }
.ct-other { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; color: inherit; }
.ct-other-title { color: var(--t1); font-weight: 600; font-size: 15px; line-height: 1.35; }
.ct-other:hover .ct-other-title { color: var(--yellow); }
.ct-other-sub { color: var(--t3-text); font-size: 13px; }
@media (min-width: 1081px) {
  .crew-band { grid-template-columns: minmax(0, 1fr) minmax(320px, auto); column-gap: clamp(40px, 5vw, 96px); align-items: end; }
  .crew-band-side { justify-self: end; }
  .split.crew-split { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); column-gap: clamp(40px, 4vw, 80px); }
  .crew-rail { position: sticky; top: calc(64px + 24px); align-self: start; max-height: calc(100vh - 64px - 48px); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
}
@media (min-width: 1600px) {
  .split.crew-split { grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); }
}

/* ---- Region pages: /rides/regions, /rides/:state, /rides/:state/:metro ----
   Search landing pages built from public routes. Main column of route cards that
   fills the frame, and a sticky aside of areas, places, crews and nearby regions
   from 1081px. Flat hairline rows, no fills. */
.rg-page, .rg-hub { padding-top: 24px; padding-bottom: 64px; }
.rg-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; color: var(--t3-text); font-size: 13px; font-weight: 500; }
.rg-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--t3-text); }
.rg-crumbs a { color: var(--t2); }
.rg-crumbs a:hover { color: var(--t1); }
.rg-head { padding-bottom: 8px; }
.rg-head h1 { margin: 8px 0 12px; }
.rg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 24px 0 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); max-width: 720px; }
.rg-stats div { padding: 14px 16px 14px 0; }
.rg-stats div + div { padding-left: 16px; border-left: 1px solid var(--hair); }
.rg-stats dt { color: var(--t3-text); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.rg-stats dd { margin: 4px 0 0; color: var(--t1); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rg-sec { margin-top: 36px; }
/* Every route on the page in one live map band, the static map until it loads. */
.rg-map { position: relative; margin-top: 28px; height: clamp(280px, 46vh, 520px); border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--carbon); }
.rg-map-still { width: 100%; height: 100%; object-fit: cover; }
.rg-map.is-live .rg-map-still { display: none; }
.rg-seasons a { flex-direction: column; align-items: flex-start; gap: 4px; }
.rg-seasons small { flex: initial; line-height: 1.45; }
.rgrid.rg-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.rg-side { margin-top: 48px; }
.rg-block + .rg-block { margin-top: 32px; }
.rg-block > .overline { margin: 0 0 6px; }
.rg-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.rg-links li { border-bottom: 1px solid var(--hair); }
.rg-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; color: var(--t1); }
.rg-links a:hover b { color: var(--t2); }
.rg-links b { font-size: 15px; font-weight: 600; line-height: 1.3; min-width: 0; }
.rg-links small { flex: none; color: var(--t3-text); font-size: 13px; }
.rg-crews a { justify-content: flex-start; }
.rg-crews a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rg-crews small { flex: initial; }
.rg-crews img, .rg-crew-blank { flex: none; width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--carbon); border: 1px solid var(--hair); }
.rg-app p { color: var(--t2); font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.rg-app .btn { width: 100%; justify-content: center; }
.rg-more { display: block; margin-top: 12px; color: var(--yellow); font-size: 14px; font-weight: 600; }
.rg-tiles { list-style: none; margin: 24px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: clamp(24px, 3vw, 48px); border-top: 1px solid var(--hair); }
.rg-tile { padding: 20px 0; border-bottom: 1px solid var(--hair); }
.rg-tile h2 { margin: 0; font-size: 22px; }
.rg-tile h2 a { color: var(--t1); }
.rg-tile h2 a:hover { color: var(--yellow); }
.rg-tile-meta { margin: 4px 0 0; color: var(--t3-text); font-size: 14px; }
.rg-tile-areas { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; }
.rg-tile-areas a { color: var(--t2); font-weight: 600; }
.rg-tile-areas a:hover { color: var(--t1); }
.rg-tile-areas small { color: var(--t3-text); }
.rx-region-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); border-top: 1px solid var(--hair); column-gap: 24px; }
.rx-region-links li { display: flex; justify-content: space-between; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.rx-region-links a { color: var(--t1); font-weight: 600; }
.rx-region-links small { color: var(--t3-text); }
@media (min-width: 1081px) {
  .wrap.rg-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 320px); column-gap: clamp(40px, 4vw, 72px); align-items: start; }
  .rg-side { margin-top: 0; position: sticky; top: calc(64px + 32px); }
}
@media (min-width: 1400px) {
  .wrap.rg-page { grid-template-columns: minmax(0, 1fr) minmax(320px, 360px); }
}
@media (max-width: 720px) {
  .rg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rg-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .rg-stats div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .rg-stats dd { font-size: 19px; }
}

/* Create Crew and Edit Crew: a square crew photo beside its actions, and a live crew row preview */
.crew-new { margin-left: auto; }
.crew-photo { display: flex; gap: 24px; align-items: center; margin-bottom: 8px; }
.crew-photo .photo-frame { width: 200px; flex: none; aspect-ratio: 1 / 1; border-radius: 12px; }
.crew-photo .photo-empty { gap: 6px; align-content: center; padding: 16px; font-size: 13px; }
.crew-photo .photo-empty b { display: block; color: var(--t1); font-size: 15px; }
.crew-photo.is-missing .photo-frame { border-color: var(--red); }
.crew-photo-side { min-width: 0; }
.crew-photo-side .field-hint { margin: 0; max-width: 44ch; }
.crew-preview { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.crew-preview-photo { position: relative; width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; background: var(--slate); }
.crew-preview-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.crew-preview-photo .ge-preview-mark { display: none; }
.crew-preview-photo.is-empty img { display: none; }
.crew-preview-photo.is-empty .ge-preview-mark { display: block; position: absolute; inset: 0; margin: auto; width: 28px; height: 28px; object-fit: contain; opacity: 0.25; }
.crew-preview-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crew-preview-id b { font-size: 17px; overflow-wrap: anywhere; }
.crew-preview-id small { color: var(--t3-text); font-size: 13px; }
@media (max-width: 480px) {
  .crew-photo { flex-direction: column; align-items: flex-start; }
  .crew-photo .photo-frame { width: 100%; max-width: 280px; }
  .crew-new { margin-left: 0; }
}

/* Crew page: the owner's prompt to add a photo to a crew made before photos were required */
.crew-photo-prompt { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.crew-photo-prompt h2 { margin: 0 0 4px; font-size: 17px; }
.crew-photo-prompt p { margin: 0; color: var(--t2); line-height: 1.5; max-width: var(--measure); }

/* Report and block menu on a crew or group ride page */
.owned-menu { display: inline-block; }
.owned-menu > summary.btn { padding: 0 14px; cursor: pointer; }
/* Your Circle */
.circle-page { padding-top: 16px; padding-bottom: 64px; }
.circle-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 16px 0 24px; flex-wrap: wrap; }
.circle-head h1 { margin: 4px 0 8px; }
.circle-head .lede { font-size: 17px; }
.circle-grid { display: grid; grid-template-columns: 1fr; gap: 0 48px; }
.circle-sec { margin-bottom: 32px; }
.circle-lbl { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--hair); }
.circle-empty, .circle-hint { color: var(--t3-text); line-height: 1.5; font-size: 15px; margin: 0 0 12px; }
.circle-empty { padding: 12px 0; }
.circle-sec .riders { border-top: 0; }
.circle-col { container-type: inline-size; min-width: 0; }
.circle-members .rider { flex-wrap: wrap; padding: 4px 0; }
.circle-member-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 12px 60px; }
.circle-level .set-select { font-size: 14px; padding: 6px 8px; }
/* A narrow column: the buttons drop under the rider instead of squeezing the name. */
@container (max-width: 440px) {
  .circle-sec .riders-manage .rider { flex-wrap: wrap; column-gap: 8px; padding-bottom: 12px; }
  .circle-sec .riders-manage .rider-link { flex: 1 0 100%; }
  .circle-sec .riders-manage .rider { row-gap: 4px; }
  .circle-member-tools { padding-left: 0; gap: 6px; }
}
.circle-level { display: flex; align-items: center; gap: 6px; }
.circle-level .set-select { max-width: none; }
.is-enhanced .circle-level-save { display: none; }
.circle-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; vertical-align: middle; }
.circle-rides { list-style: none; margin: 0; padding: 0; }
.circle-rides li { border-bottom: 1px solid var(--hair); }
.circle-rides a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--t1); }
.circle-rides .avatar { width: 32px; height: 32px; flex: none; }
.circle-ride-text { display: flex; flex-direction: column; min-width: 0; }
.circle-ride-text b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.circle-ride-text small { color: var(--t3-text); font-size: 13px; }
.circle-settings .choice:last-of-type { margin-bottom: 8px; }
.circle-settings .actions { margin-top: 8px; }
.circle-zones { list-style: none; margin: 0 0 12px; padding: 0; }
.circle-zones li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.circle-zones span { display: flex; flex-direction: column; }
.circle-zones small { color: var(--t3-text); font-size: 13px; }
.circle-zone-form { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.circle-zone-form .set-select { max-width: none; flex: 1; min-width: 0; }
.circle-input { flex: 1; min-width: 0; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 15px; padding: 8px 10px; outline: none; }
.circle-input:focus { border-color: var(--yellow-line); }
.circle-invite { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.circle-code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; padding: 8px 10px; font-size: 14px; color: var(--t1); }
.circle-around { margin-bottom: 40px; }
.circle-map-box { position: relative; height: 320px; border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; background: var(--carbon); }
.circle-map { position: absolute; inset: 0; }
.circle-map-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; }
.circle-map-cover .circle-hint { margin: 0; max-width: 420px; }
.circle-map-cover[hidden] { display: none; }
.circle-map-key { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 10px 0 0; padding: 0; color: var(--t3-text); font-size: 13px; }
.circle-map-key li { display: flex; align-items: center; gap: 8px; }
.cm-key { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.cm-key-exact { background: var(--slate); border: 2px solid var(--yellow); }
.cm-key-ghost { background: rgba(133, 143, 158, 0.22); border: 1px solid rgba(133, 143, 158, 0.45); }
.cm-pin { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; }
.cm-pin-face { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--yellow); background: var(--slate); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cm-pin-face img { width: 100%; height: 100%; object-fit: cover; }
.cm-pin-face img.cm-mark { width: 70%; height: auto; object-fit: contain; }
.cm-pin-name { font-size: 11px; font-weight: 600; color: var(--t1); background: rgba(12, 16, 20, 0.8); border-radius: 4px; padding: 1px 4px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-ghost { width: 56px; height: 56px; border-radius: 50%; background: rgba(133, 143, 158, 0.16); border: 1px solid rgba(133, 143, 158, 0.38); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; opacity: 0.8; }
.cm-ghost img { width: 26px; height: auto; opacity: 0.45; filter: grayscale(1); }
.cm-me { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--yellow); background: var(--asphalt, #0C1014); }
.cm-pop { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--t1); }
.cm-pop b { font-weight: 700; }
.cm-pop small { color: var(--t3-text); font-size: 13px; }
@media (min-width: 900px) {
  .circle-map-box { height: 440px; }
}
@media (min-width: 1400px) {
  .circle-map-box { height: 520px; }
}
.circle-join { max-width: 720px; }
.circle-join h1 { margin: 8px 0 12px; }
.circle-join-who { display: flex; align-items: center; gap: 16px; margin: 12px 0; }
.circle-join-who h1 { margin: 0; }
.circle-join .actions { margin-top: 20px; }
@media (min-width: 900px) {
  .circle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  .circle-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 40px; }
}

/* Ride forecast (Social) and weather along a route (route page, Route Studio). weather.js fills them. */
.wx { padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 0 0 20px; }
.wx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.wx-sum { min-width: 0; flex: 1 1 280px; }
.wx .overline { margin: 0 0 6px; }
.wx-head { margin: 0; font-size: 19px; font-weight: 700; color: var(--t1); line-height: 1.3; }
.wx-head:empty { display: none; }
.wx-tone-warn { color: #5B9CF5; }
.wx-tone-alert { color: var(--red); }
.wx-notes { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.wx-notes:empty { display: none; }
.wx-status { margin: 10px 0 0; font-size: 14px; }
.wx-depart { margin: 0; flex: 0 1 240px; }
.wx-hours { list-style: none; margin: 14px 0 0; padding: 0; display: flex; overflow-x: auto; scrollbar-width: thin; border-top: 1px solid var(--hair); }
.wx-h { flex: 1 0 88px; display: flex; flex-direction: column; gap: 2px; padding: 10px 10px 4px; border-left: 1px solid var(--hair); font-size: 13px; color: var(--t2); }
.wx-h:first-child { border-left: 0; padding-left: 0; }
.wx-h-t { font-weight: 600; color: var(--t1); white-space: nowrap; }
.wx-h-sub { color: var(--t3-text); white-space: nowrap; }
.wx-h-temp { font-size: 16px; color: var(--t1); }
.wx-h-rain, .wx-h-gust { white-space: nowrap; }
.wx-risk-chance .wx-h-rain { color: #5B9CF5; }
.wx-risk-likely .wx-h-rain { color: #5B9CF5; font-weight: 700; }
.wx-risk-storm .wx-h-rain { color: var(--red); font-weight: 700; }
.wx-h.is-dark .wx-h-t { color: var(--t3-text); }
.wx-ride { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: 24px; }
.wx-ride-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.wx-ride-row b { color: var(--t1); font-weight: 600; }
.wx-ride-warn b { color: #5B9CF5; }
.wx-route { margin-top: 24px; }
.wx-route .field-hint { margin: 10px 0 0; }
.wx-studio { margin: 0; padding: 14px 0; border-top: 0; }
.wx-studio .wx-head { font-size: 16px; }
.wx-studio .wx-h { flex-basis: 80px; }

/* Share Trip Progress: the page a rider's contacts follow (/trip/:token) */
.trip-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.trip-grid[hidden] { display: none; }
.trip-map { position: relative; height: min(70vh, 720px); min-height: 320px; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--carbon); }
.trip-map-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; color: var(--t2); font-size: 15px; }
.trip-map-note[hidden] { display: none; }
.trip-rows { margin: 0; border-top: 1px solid var(--hair); }
.trip-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.trip-rows div[hidden] { display: none; }
.trip-rows dt { color: var(--t2); font-weight: 500; }
.trip-rows dd { margin: 0; font-weight: 600; text-align: right; }
.trip-fine { margin: 0; color: var(--t3-text); font-size: 14px; line-height: 1.5; }
.trip-pin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--asphalt); background: var(--yellow); }
/* Reaching the rider: the flag line (No Update, Reconnecting) and one or two actions. */
.trip-act { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: 4px; padding-bottom: 20px; }
.trip-act[hidden] { display: none; }
.trip-flag { flex: 1 1 320px; margin: 0; color: var(--yellow); font-size: 16px; font-weight: 600; }
.trip-flag[hidden] { display: none; }
.trip[data-status="incident"] .trip-flag { color: var(--red); }
.trip-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.trip-btns:empty { display: none; }
@media (max-width: 900px) {
  .trip-grid { grid-template-columns: 1fr; gap: 24px; }
  .trip-map { height: 56vh; }
  .trip-flag { flex-basis: 100%; }
  .trip-btns { width: 100%; }
  .trip-btns > .btn { flex: 1; justify-content: center; min-height: 48px; }
}

/* An alert a contact opens from a text or email (/alert/:token). Red only while it is open. */
.alert-head { padding-top: 40px; padding-bottom: 8px; }
.alert-head h1 { margin: 10px 0 12px; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; letter-spacing: -0.02em; max-width: 18em; }
.alert-over { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t3-text); }
.alert-pg.is-open .alert-over { color: var(--red); }
.alert-pg.is-test .alert-over { color: var(--yellow); }
.alert-live { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: alert-live 1.6s ease-in-out infinite; }
@keyframes alert-live { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .alert-live { animation: none; } }
.alert-ack { padding-top: 12px; padding-bottom: 8px; }
.alert-ack-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 28px; padding: 20px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.alert-ack-row[hidden] { display: none; }
.alert-ack-copy { flex: 1 1 320px; min-width: 0; }
.alert-ack-copy h2 { margin: 0; font-size: 22px; line-height: 1.25; }
.alert-ack-copy p { margin: 4px 0 0; color: var(--t2); font-size: 15px; }
.alert-ack-row.is-done h2 { color: var(--t1); }
.alert-check { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); }
.alert-btns { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.alert-btns .btn { min-height: 46px; padding-left: 22px; padding-right: 22px; font-size: 16px; }
.alert-err { flex-basis: 100%; margin: 0; color: var(--red); font-size: 15px; font-weight: 600; }
.alert-err[hidden] { display: none; }
.alert-grid.section { padding-top: 28px; }
.alert-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: 40px; align-items: start; }
.alert-grid.is-nomap { grid-template-columns: minmax(0, 640px); }
.alert-map { height: min(68vh, 760px); }
.alert-side { display: flex; flex-direction: column; gap: 28px; }
.alert-status.is-open { color: var(--red); }
.alert-status.is-ok { color: var(--green); }
.alert-status.is-test { color: var(--yellow); }
.alert-coords { font-variant-numeric: tabular-nums; }
.alert-sub { margin: 0 0 -14px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3-text); }
.alert-steps { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.alert-steps li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.alert-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--hair-2, rgba(255,255,255,0.16)); border-radius: 50%; font-size: 13px; font-weight: 700; color: var(--t2); }
.alert-steps b { display: block; font-size: 17px; font-weight: 600; }
.alert-steps b a { color: var(--yellow); }
.alert-steps p { margin: 3px 0 0; color: var(--t2); font-size: 15px; line-height: 1.45; }
@media (max-width: 900px) {
  .alert-head { padding-top: 24px; }
  .alert-grid { grid-template-columns: 1fr; gap: 28px; }
  .alert-ack-row.is-done { align-items: flex-start; }
  .alert-ack-row.is-done .alert-ack-copy { flex: 1 1 0; }
  .alert-check { width: 36px; height: 36px; }
  .alert-map { height: 46vh; min-height: 280px; }
  .alert-btns { width: 100%; }
  .alert-btns > .btn { flex: 1; justify-content: center; min-height: 52px; }
  .alert-btns > .btn-tint { flex-basis: 100%; }
}

/* ---- The MotoRev Map (/map): search, saved places and routes beside a full width map ---- */
body:has(#mp) .foot, body:has(#mp) .app-strip:not([hidden]) { display: none; }
.act-inline { display: contents; }
.mp { --mp-panel: clamp(340px, 24vw, 460px); display: grid; grid-template-columns: var(--mp-panel) minmax(0, 1fr); height: calc(100dvh - 65px); min-height: 520px; background: var(--asphalt); }
.mp-panel { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--hair); background: var(--asphalt); }
.mp-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--hair); flex: none; }
.mp-tab { min-height: 48px; padding: 0 8px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--t3-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.mp-tab:hover { color: var(--t1); }
.mp-tab.is-on { color: var(--t1); border-bottom-color: var(--yellow); }
.mp-pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mp-search { padding: 16px 16px 12px; border-bottom: 1px solid var(--hair); position: sticky; top: 0; background: var(--asphalt); z-index: 1; }
.mp-search input { width: 100%; min-height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--hair); background: var(--carbon); color: var(--t1); font: inherit; font-size: 15px; }
.mp-search input:focus { outline: none; border-color: var(--yellow-line); }
.mp-group { padding: 14px 16px 6px; }
.mp-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.mp-row:hover, .mp-row:focus-visible { background: var(--carbon); outline: none; }
.mp-row b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-row small { display: block; margin-top: 2px; font-size: 13px; color: var(--t3-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ico { width: 32px; height: 32px; display: block; }
.mp-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3-text); white-space: nowrap; }
.mp-tag-mr { color: var(--yellow); }
.mp-vis { display: inline-flex; vertical-align: -1px; margin-right: 6px; color: var(--t3-text); }
.mp-none { padding: 24px 16px; color: var(--t3-text); font-size: 14px; }
.mp-show { padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.mp-legend-h { margin-top: 18px; }
.mp-legend { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.mp-legend li { display: flex; align-items: center; gap: 8px; min-height: 32px; font-size: 13px; color: var(--t2); }
.mp-legend canvas { width: 22px; height: 22px; flex: none; }
.mp-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--t3-text); }
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--hair); }
.mp-list li .mp-row { border-bottom: 0; }
.mp-x { min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--t3-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mp-x:hover { color: var(--red); }
.mp-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 16px; color: var(--t2); font-size: 14px; line-height: 1.5; }
.mp-empty b { color: var(--t1); font-size: 16px; }
.mp-empty .btn { margin-top: 6px; }
.mp-list li.mp-empty { display: flex; border-bottom: 0; }
.mp-slot b { color: var(--t1); }
.mp-slot .mp-set { color: var(--yellow); }
.mp-clear { display: block; padding: 12px 16px; border: 0; background: none; color: var(--t3-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mp-clear:hover { color: var(--t1); }
.mp-more { position: relative; }
.mp-more > summary { list-style: none; display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; color: var(--t3-text); cursor: pointer; }
.mp-more > summary::-webkit-details-marker { display: none; }
.mp-more > summary:hover { color: var(--t1); }
.mp-more-sheet { position: absolute; right: 8px; top: 40px; z-index: 5; min-width: 200px; padding: 6px 0; border: 1px solid var(--slate); border-radius: 8px; background: var(--carbon); }
.mp-more-sheet button { display: block; width: 100%; padding: 10px 14px; border: 0; background: none; color: var(--t1); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mp-more-sheet a { display: block; padding: 10px 14px; color: var(--t1); font-size: 14px; text-decoration: none; }
.mp-more-sheet button:hover, .mp-more-sheet a:hover { background: var(--slate); }
.mp-more-sheet button.is-danger { color: var(--red); }
.mp-card-acts .mp-more > summary { min-height: 40px; border: 1px solid var(--slate); border-radius: 8px; }
.mp-card-acts .mp-more-sheet { right: 0; top: auto; bottom: 48px; }
.mp-stage { position: relative; min-width: 0; background: var(--carbon); }
/* Two classes so this outranks mapbox-gl.css, which loads later and sets .mapboxgl-map to relative. */
.mp-stage .mp-map { position: absolute; inset: 0; }
.mp-map .mapboxgl-canvas:focus { outline: none; }
.mp-status { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--slate); background: rgba(18, 22, 31, 0.95); color: var(--t2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.mp-radar { position: absolute; top: 64px; left: 16px; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px 0 0; border-radius: 8px; border: 1px solid var(--slate); background: rgba(18, 22, 31, 0.95); color: var(--t2); font-size: 13px; font-weight: 600; }
.mp-radar[hidden] { display: none; }
.mp-radar-play { min-height: 38px; min-width: 64px; padding: 0 12px; border: 0; border-right: 1px solid var(--slate); border-radius: 8px 0 0 8px; background: none; color: var(--yellow); font: inherit; cursor: pointer; }
.mp-radar-play:hover { background: var(--slate); }
.mp-radar-name { color: var(--t1); }
.mp-radar-time { min-width: 9ch; font-variant-numeric: tabular-nums; }
.mp-card { position: absolute; left: 16px; bottom: 16px; z-index: 3; width: min(420px, calc(100% - 32px)); padding: 16px; border-radius: 10px; border: 1px solid var(--slate); background: var(--carbon); color: var(--t1); }
.mp-card-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.mp-card-head canvas { width: 40px; height: 40px; }
.mp-card h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.25; }
.mp-card .mp-cat { margin-top: 2px; font-size: 13px; color: var(--t3-text); }
.mp-card .mp-addr { margin-top: 10px; font-size: 14px; color: var(--t2); line-height: 1.45; }
.mp-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 13px; color: var(--t2); }
.mp-stats b { color: var(--t1); font-weight: 600; }
.mp-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.mp-card-acts .btn { min-height: 40px; padding: 0 14px; font-size: 14px; }
.mp-card-acts .btn.is-on { color: var(--yellow); border-color: var(--yellow-line); }
.mp-close { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 6px; background: none; color: var(--t3-text); cursor: pointer; }
.mp-close:hover { color: var(--t1); background: var(--slate); }
.mp-close svg { width: 18px; height: 18px; }
/* Hazards, Report Hazard and Your Bike on the map: the same wording as the app. */
.mp-card { max-height: calc(100% - 32px); overflow-y: auto; overscroll-behavior: contain; }
.mp-hz-ico { display: inline-flex; flex: none; }
.mp-hz-ico svg { display: block; }
.mp-legend .mp-hz-ico svg { width: 22px; height: 22px; }
.mp-card-head .mp-hz-ico svg { width: 40px; height: 40px; }
.mp-bike { border-bottom: 1px solid var(--hair); }
.mp-bike[hidden] { display: none; }
.mp-bike .mp-row { border-bottom: 0; }
/* Map Layers and Report Hazard sit together on the map, top left. */
.mp-tools { position: absolute; top: 16px; left: 16px; z-index: 3; display: flex; align-items: flex-start; gap: 8px; }
.mp-report { min-height: 40px; padding: 0 14px; font-size: 14px; background: var(--carbon); }
.mp-layers { position: relative; }
.mp-layers > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font-size: 14px; background: var(--carbon); cursor: pointer; }
.mp-layers > summary::-webkit-details-marker { display: none; }
.mp-layers[open] > summary { border-color: var(--yellow-line); color: var(--yellow); }
.mp-layers-sheet { position: absolute; top: 48px; left: 0; width: 280px; padding: 4px 0; border: 1px solid var(--slate); border-radius: 8px; background: var(--carbon); }
.mp-layer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 14px; border-bottom: 1px solid var(--hair); font-size: 14px; font-weight: 600; color: var(--t1); cursor: pointer; }
.mp-layer:last-child { border-bottom: 0; }
.mp-layer small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--t3-text); }
.mp-report.is-on { color: var(--yellow); border-color: var(--yellow-line); }
.mp-undo { margin-left: 12px; padding: 0; border: 0; background: none; color: var(--yellow); font: inherit; font-weight: 700; cursor: pointer; }
.mp-undo:hover { color: var(--t1); }
.mp-hz-note { width: 100%; min-height: 44px; margin-top: 12px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--hair); background: var(--asphalt); color: var(--t1); font: inherit; font-size: 14px; }
.mp-hz-note:focus { outline: none; border-color: var(--yellow-line); }
.mp-hz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mp-hz-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 8px 6px; border: 1px solid var(--hair); border-radius: 8px; background: none; color: var(--t1); font: inherit; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; cursor: pointer; }
.mp-hz-btn:hover, .mp-hz-btn:focus-visible { border-color: var(--slate); background: var(--asphalt); outline: none; }
.mp-hz-btn:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 900px) {
  .mp { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 55dvh) auto; height: auto; min-height: 0; }
  .mp-stage { grid-row: 1; min-height: 320px; }
  .mp-panel { grid-row: 2; border-right: 0; border-top: 1px solid var(--hair); }
  .mp-pane { overflow: visible; }
  .mp-card { left: 8px; bottom: 8px; width: calc(100% - 16px); }
  .mp-tools { top: 8px; left: 8px; }
  .mp-radar { top: 56px; left: 8px; }
  .mp-status { top: 56px; max-width: calc(100% - 16px); white-space: normal; }
}

/* Group Rides (/rides/group) in the Social shell: browse with pace filters, the create form,
   and the ride page: RSVP while planned, then read only with the riders, Open in App, a QR
   code, the Rider Down banner and the ride chat log. Signals are sent from the app. */
.gr { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; padding-bottom: 72px; }
.gr h2 { font-size: 17px; margin: 28px 0 12px; }
.gr-side { position: sticky; top: 88px; }
.gr-form h2:first-child { margin-top: 0; }
.gr-filters { margin: 0 0 16px; }
.gr-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.gr-row a { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--hair); color: var(--t1); }
.gr-row a:hover b { color: var(--yellow); }
.gr-row-top { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.gr-row-top b { font-size: 16px; }
.gr-row-top small, .gr-when, .gr-meta { color: var(--t3-text); font-size: 13px; }
.gr-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.gr-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; border: 1px solid var(--slate); color: var(--t2); font-size: 12px; font-weight: 600; }
.gr-facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0 0; font-size: 14px; }
.gr-facts dt { color: var(--t3-text); }
.gr-facts dd { margin: 0; color: var(--t1); }
.gr-down { border: 1px solid var(--red); border-radius: 8px; padding: 16px 18px; margin-bottom: 20px; }
.gr-down .overline { color: var(--red); margin: 0 0 6px; }
.gr-down-name { font-size: 18px; font-weight: 700; margin: 0; }
.gr-down-meta { color: var(--t3-text); font-size: 13px; margin: 4px 0 0; }
.gr-down .actions { margin-top: 14px; }
.gr-chat { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.gr-msg { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.gr-msg b { flex: none; }
.gr-msg-body { flex: 1; min-width: 0; color: var(--t2); overflow-wrap: anywhere; }
.gr-msg time { flex: none; color: var(--t3-text); font-size: 12px; }
.gr-msg.is-signal .gr-msg-body { color: var(--yellow); font-weight: 600; }
.gr-msg-body .msg-video, .gr-msg-body .msg-img { margin-top: 6px; }
.gr-signal-tag { flex: none; color: var(--yellow); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.gr-riders { list-style: none; margin: 0 0 8px; padding: 0; border-top: 1px solid var(--hair); }
.gr-riders a { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); color: var(--t1); font-size: 15px; min-width: 0; }
.gr-riders a:hover .handle { color: var(--yellow); }
.gr-riders .avatar { width: 32px; height: 32px; flex: none; }
.gr-riders span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-riders small { flex: none; color: var(--t3-text); font-size: 13px; }
.gr-app-note { margin: 16px 0 0; color: var(--t2); font-size: 14px; line-height: 1.5; }
.gr-qr { margin: 20px 0 0; }
.gr-qr-code { width: 200px; max-width: 100%; padding: 12px; background: #FFFFFF; border-radius: 8px; }
.gr-qr-code svg { display: block; width: 100%; height: auto; }
.gr-qr figcaption { margin-top: 10px; color: var(--t3-text); font-size: 13px; }
.gj-on { color: var(--t1); font-size: 14px; font-weight: 600; }
.gj-ride-act { align-items: center; }
/* Ride Clips: one media set above the riders. The stage keeps 16:9 and stops at
   min(64vh, 560px) tall, so on a wide screen the clip sits at a sensible size instead of
   stretching into a band. Clips play contained on near-black. */
.gr-clips { margin-bottom: 32px; }
.gr-clips-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.gr-clips-head h2 { margin: 0; }
.gr-clips-head h2 small { color: var(--t3-text); font-size: 15px; font-weight: 600; margin-left: 6px; }
.gr-clips-head label { cursor: pointer; }
.gr-clip-status { margin: 0 0 12px; color: var(--t2); font-size: 14px; }
.gr-clip-status[hidden] { display: none; }
.clipset { display: grid; gap: 10px; width: min(100%, calc(min(64vh, 560px) * 16 / 9)); }
.clip-stage { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: #07090c; }
.clip-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #07090c; }
.clip-video[hidden] { display: none; }
.clip-stage:hover .gal-arrow, .clip-stage:focus-within .gal-arrow { opacity: 1; }
.clip-stage .gal-arrow { top: calc(50% - 24px); }
.clip-stage .clip-expand { top: 12px; right: 12px; margin-top: 0; width: 38px; height: 38px; opacity: 1; }
.clip-count { right: auto; left: 12px; top: 12px; bottom: auto; }
.clip-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 10px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.clip-meta[hidden] { display: none; }
.clip-meta span { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.clip-meta a { color: var(--t1); font-weight: 600; }
.clip-meta a:hover { color: var(--yellow); }
.clip-meta small { color: var(--t3-text); font-size: 13px; font-variant-numeric: tabular-nums; }
.clip-meta .pmenu-sheet { right: 0; left: auto; }
.clip-thumbs button { position: relative; flex-basis: 128px; height: 72px; background: #07090c; }
.clip-thumbs img, .clip-thumbs video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.clip-len { position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(12, 16, 20, 0.72); color: var(--t1); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-video { display: block; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 6px; background: #000; }
.pv-video[hidden], .pv-img[hidden] { display: none; }
@media (max-width: 720px) { .pv-video { max-height: calc(100vh - 160px); border-radius: 0; } }
/* A clip sent in a message plays in the bubble at a phone-sized width. */
.msg-video { display: block; width: min(100%, 360px); max-height: 420px; border-radius: 10px; background: #07090c; }
/* A video that can't play yet: Processing while its playable version is made, or Couldn't
   Process This Video with Try Again and Remove. Same box as the player it stands in for. */
.vid-box { display: flex; align-items: center; justify-content: center; border: 1px solid var(--hair); }
.msg-video.vid-box { aspect-ratio: 9 / 16; max-height: 360px; width: min(100%, 220px); }
.clip-video.vid-box { border: 0; }
.clip-video.vid-box[hidden] { display: none; }
.vid-state { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; text-align: center; color: var(--t2); font-size: 14px; }
.vid-state b { color: var(--t1); font-size: 15px; font-weight: 600; }
.vid-state small { color: var(--t3-text); font-size: 13px; }
.vid-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.vid-spin { width: 22px; height: 22px; border: 2px solid var(--hair); border-top-color: var(--t2); border-radius: 50%; animation: vid-spin 0.9s linear infinite; }
@keyframes vid-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vid-spin { animation: none; } }
.clip-wait { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 6px; color: var(--t2); font-size: 12px; text-align: center; }
/* Photo or Clip in the conversation composer: upload progress above the box. */
.msg-status { flex: none; margin: 0; padding-top: 10px; color: var(--t2); font-size: 14px; }
.msg-status[hidden] { display: none; }
.compose-chat.is-busy .photo-pick { opacity: .5; pointer-events: none; }
/* On wide screens rides and riders flow into as many columns as fit; auto-fit lets a short
   list span the column. Each row carries its own top hairline, overlapped by a pixel so
   stacked rows share one line. */
@media (min-width: 1400px) {
  .gr-list.gr-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); column-gap: 48px; border-top: 0; padding-top: 1px; }
  .gr-riders { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); column-gap: 40px; border-top: 0; padding-top: 1px; }
  .gr-cols > li, .gr-riders > li { margin-top: -1px; border-top: 1px solid var(--hair); }
}
@media (max-width: 900px) {
  .gr { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .gr-side { position: static; }
}
/* Report a Bug and the Updates board (feedback_pages.rs). Flat hairline rows. */
.fb-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1100px) { .fb-page { grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 56px; } }
.fb-form { margin-top: 20px; }
.fb-steps input { margin-bottom: 8px; }
.fb-note { margin: 12px 0 0; }
.fb-side .overline, .fb-cols .overline { margin-bottom: 4px; }
.fb-none { padding: 12px 0; border-top: 1px solid var(--hair); }
.fb-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.fb-row { padding: 14px 0; border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; }
.fb-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fb-row-head b { font-weight: 600; color: var(--t1); overflow-wrap: anywhere; }
.fb-status { flex: none; font-size: 13px; font-weight: 600; color: var(--yellow); }
.fb-status.fb-resolved { color: var(--green); }
.fb-status.fb-closed { color: var(--t3-text); }
.fb-meta { color: var(--t3-text); font-size: 13px; }
.fb-desc { color: var(--t2); white-space: pre-line; line-height: 1.5; }
.fb-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fb-shots img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--hair); display: block; }
.fb-reply { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--hair); }
.fb-reply p:last-child { color: var(--t1); white-space: pre-line; line-height: 1.5; }
.fb-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 20px; }
@media (min-width: 1100px) { .fb-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.fb-foot { margin-top: 24px; }
.fb-foot a { color: var(--yellow); font-weight: 600; }
/* What's New: one flat row per version, version and date beside the notes on wide screens. */
.releases { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.release { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 1100px) { .release { grid-template-columns: minmax(260px, 22%) minmax(0, 1fr); gap: 48px; } }
.release-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 0; }
.release-version { font-weight: 600; color: var(--t1); }
.release { scroll-margin-top: 88px; }
.release:target .release-version { color: var(--yellow); }
.release-version.release-current { color: var(--yellow); }
.release-meta { color: var(--t3-text); font-size: 13px; }
.release-badge { font-size: 13px; font-weight: 600; color: var(--yellow); }
.release-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.release-notes li { position: relative; padding-left: 16px; color: var(--t1); line-height: 1.5; }
.release-notes li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 4px; height: 4px; border-radius: 50%; background: var(--yellow); }
.release > .muted { margin: 0; }
/* Fuel Range and Tire Pressure panels on the owner's bike page. */
.rr-facts dt { flex-basis: 132px; }
.rr-facts .is-low dd { color: var(--red); }
.rr-note { font-size: 13px; margin: 0 0 12px; }
.rr-actions { margin: 0; }
.rr-list { margin-bottom: 16px; }
.rr-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rr-p + .rr-p { margin-left: 16px; }
.rr-low, .rr-high { color: var(--red); }
.rr-ok { color: var(--green); }
.rr-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.rr-form .field { margin-bottom: 0; }
.rr-form .btn { min-height: 46px; }
@media (max-width: 560px) { .rr-form { grid-template-columns: 1fr 1fr; } .rr-form .btn { grid-column: 1 / -1; } }
/* ---- Tag pages ----
   One tab per kind under the tag. Grids fill the frame; places sit in hairline rows that
   flow into as many columns as fit; the posts tab keeps the feed's measure with riders and
   more tags in the rail. */
.tag-tabs { margin-top: 8px; }
.tag-body > .actions, .tag-split .actions { margin-top: 32px; }
.tag-more { padding-top: 32px; }
@media (min-width: 721px) {
  .tag-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); column-gap: clamp(24px, 3vw, 56px); border-top: 0; }
  .tag-places .row { border-top: 1px solid var(--hair); border-bottom: 0; }
}

/* Ride Statistics, Year in Review and the profile Map tab. Flat hairline rows; the month
   chart uses Slate bars with a thin yellow top line, never a solid yellow block. */
.stats-more { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rs-page { padding-bottom: 56px; }
.rs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 32px 0 8px; }
.rs-head .actions { margin: 0; }
.rs-title { font-size: 32px; margin-top: 4px; }
.rs-years { margin: 8px 0 8px; }
.rs-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 48px; align-items: start; }
.rs-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rs-spec dd { font-variant-numeric: tabular-nums; }
.rs-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; padding: 8px 0 0; border-bottom: 1px solid var(--hair); margin-bottom: 32px; }
.rs-col { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.rs-col-val { min-height: 16px; color: var(--t3-text); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rs-track { position: relative; height: 180px; }
.rs-bar { position: absolute; left: 0; right: 0; bottom: 0; background: var(--slate); border-top: 2px solid var(--yellow); }
.rs-bar[style="height: 0%"] { border-top-color: transparent; }
.rs-col-lbl { padding: 6px 0 8px; color: var(--t2); font-size: 12px; text-align: center; }
.rs-row { align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; }
.rs-row-name { min-width: 0; color: var(--t1); }
.rs-row-name a, .rs-row-name b { display: block; margin-top: 2px; color: var(--t2); font-weight: 500; }
.rs-row-name a:hover { color: var(--t1); }
.rs-row-val { flex: none; color: var(--t2); font-variant-numeric: tabular-nums; }
.rs-bike { flex-direction: column; gap: 8px; padding: 16px 0; }
.rs-bike-name { font-weight: 600; }
.rs-bike-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.rs-bike-stats dt { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3-text); }
.rs-bike-stats dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.rs-next { padding: 4px 0 16px; border-bottom: 1px solid var(--hair); }
.rs-next-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.rs-next-head span { color: var(--t2); }
.rs-progress { height: 4px; background: var(--slate); border-radius: 2px; overflow: hidden; }
.rs-progress span { display: block; height: 100%; background: var(--yellow-line); }
.rs-empty { margin: 0 0 24px; }
.rs-map { height: 440px; margin-bottom: 24px; }
.rs-map-big { height: min(72vh, 860px); }
.ride-share-actions { margin-bottom: 12px; }
@media (min-width: 721px) { .ride-share-actions .pmenu-sheet { left: 0; right: auto; } }
@media (max-width: 1080px) {
  .rs-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 720px) {
  .rs-spec { grid-template-columns: 1fr 1fr; }
  .rs-track { height: 120px; }
  .rs-chart { gap: 3px; }
  .rs-col-val { display: none; }
  .rs-bike-stats { grid-template-columns: 1fr 1fr; }
  .rs-map, .rs-map-big { height: 360px; }
}
/* Create Event, Submit a Place, My Submissions and Support */
.photo-pick[hidden], .photo-clear[hidden], .photo-frame[hidden] { display: none; }
.photo-empty b { display: block; color: var(--t1); font-size: 16px; margin-bottom: 4px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.ev-review-note { color: var(--t1); border: 1px solid var(--yellow-line); background: var(--yellow-bg); border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-size: 15px; line-height: 1.45; }
.ev-owner { margin: 16px 0 0; }

.ps-intro { margin: 0 0 20px; }
.ps-notice { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; margin: 0 0 20px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); font-size: 15px; line-height: 1.45; }
.ps-notice b { color: var(--t1); font-weight: 600; }
.ps-notice span { color: var(--t2); }
.ps-notice-bad { border-color: rgba(240, 68, 82, 0.5); }
.ps-notice-bad b { color: var(--red); }
.ps-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 8px; }
.ps-cat { position: relative; }
.ps-cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ps-cat span { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); color: var(--t2); font-size: 15px; font-weight: 500; cursor: pointer; }
.ps-cat span:hover { border-color: rgba(255, 255, 255, 0.16); color: var(--t1); }
.ps-cat input:checked + span { border-color: var(--yellow-line); background: var(--yellow-bg); color: var(--t1); }
.ps-cat input:focus-visible + span { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.ps-pin { position: relative; }
.ps-pin-search { position: relative; z-index: 3; }
.ps-pin-search input { width: 100%; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; padding: 11px 12px; outline: none; }
.ps-pin-search input:focus { border-color: var(--yellow-line); }
.ps-pin-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 0; background: var(--carbon); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; max-height: 320px; overflow-y: auto; }
.ps-pin-results[hidden] { display: none; }
.ps-pin-results li + li { border-top: 1px solid var(--hair); }
.ps-pin-results button { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 10px 12px; background: none; border: 0; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.ps-pin-results button:hover, .ps-pin-results button:focus-visible { background: var(--slate); outline: none; }
.ps-pin-results b { font-size: 15px; font-weight: 600; }
.ps-pin-results small { color: var(--t3-text); font-size: 13px; }
.ps-pin-none { padding: 10px 12px; color: var(--t3-text); font-size: 14px; }
.ps-pin-map { margin-top: 10px; height: clamp(300px, 40vh, 480px); border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--carbon); }
.ps-pin-map[hidden] { display: none; }
.ps-pin-label { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 0; }
.ps-pin-label b { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ps-pin:not(.is-pinned) .ps-pin-label b { color: var(--t2); }
.ps-pin-label small { color: var(--t3-text); font-size: 13px; font-variant-numeric: tabular-nums; }
.settings h2.ps-photos-head { display: flex; align-items: baseline; }
.ps-photos-head .ge-count { text-transform: none; }
.ps-photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.ps-photo, .ps-photo-add { position: relative; aspect-ratio: 1; border: 1px solid var(--hair); border-radius: 8px; overflow: hidden; background: var(--carbon); }
.ps-photo-add[hidden] { display: none; }
.ps-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-photo .cm-bar { display: none; }
.ps-photo.is-busy .cm-bar { display: block; }
.ps-photo.is-busy img { opacity: 0.5; }
.ps-photo.failed { border-color: rgba(240, 68, 82, 0.6); }
.ps-photo.failed img { opacity: 0.35; }
.ps-photo-x { position: absolute; top: 6px; right: 6px; padding: 4px 8px; background: rgba(12, 16, 20, 0.82); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; color: var(--t1); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ps-photo-x:hover { border-color: var(--t3-text); }
.ps-photo-add label { display: grid; place-items: center; width: 100%; height: 100%; color: var(--t2); font-size: 14px; font-weight: 600; cursor: pointer; }
.ps-photo-add label:hover { background: var(--slate); color: var(--t1); }
.ps-photo-add:focus-within { border-color: var(--yellow-line); }
.ps-photo-add input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ps-subs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.ps-sub { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.ps-sub-photo { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--slate); }
.ps-sub-photo img { width: 100%; height: 100%; object-fit: cover; }
.ps-sub-photo.is-empty img { width: 28px; height: 28px; object-fit: contain; opacity: 0.25; }
.ps-sub-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ps-sub-body b { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.ps-sub-body b a { color: inherit; }
.ps-sub-body b a:hover { color: var(--yellow); }
.ps-sub-body small { color: var(--t3-text); font-size: 14px; }
.ps-sub-note { color: var(--t2); font-size: 14px; line-height: 1.45; }
.ps-status { flex: none; font-size: 13px; font-weight: 600; }
.ps-status-ok { color: var(--green); }
.ps-status-bad { color: var(--red); }
.ps-status-wait { color: var(--yellow); }

.sup-actions { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.sup-empty b { display: block; color: var(--t1); font-size: 16px; margin-bottom: 4px; }
.sup-empty p { margin: 0; }
.sup-row:hover b { color: var(--yellow); }
.sup-row.is-unread .set-row-text small { color: var(--t2); }
.sup-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; color: var(--t3-text); font-size: 13px; }
.sup-status { font-size: 13px; font-weight: 600; color: var(--yellow); }
.sup-status.is-closed { color: var(--t3-text); }
.sup-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.sup-main { min-width: 0; }
.sup-msgs { list-style: none; margin: 0; padding: 0 0 24px; min-height: 0; }
.sup-from { display: flex; align-items: center; gap: 6px; padding: 0 4px; color: var(--t2); font-size: 13px; }
.sup-from b { color: var(--t1); font-weight: 600; }
.sup-event { max-width: 80%; color: var(--t3-text); }
.sup-anchor { height: 0; }
.sup-older, .sup-resolved { text-align: center; margin: 0 0 12px; }
.sup-compose { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 16px; background: var(--asphalt); border-top: 1px solid var(--hair); }
.sup-compose .compose-chat { margin-top: 0; }
.sup-compose textarea { flex: 1; min-width: 0; min-height: 44px; padding: 10px 12px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; resize: vertical; outline: none; }
.sup-compose textarea:focus { border-color: var(--yellow-line); }
.sup-photo { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; }
.sup-photo .photo-frame { width: 160px; aspect-ratio: 4 / 3; margin-bottom: 10px; }
.sup-photo .photo-clear { margin-bottom: 10px; }
.sup-photo .photo-error { flex-basis: 100%; }
#sup-new .photo-frame { width: min(320px, 100%); aspect-ratio: 4 / 3; margin-bottom: 4px; }
.sup-facts { margin: 0; }
.sup-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.sup-facts dt { color: var(--t3-text); }
.sup-facts dd { margin: 0; font-weight: 600; }
@media (max-width: 720px) {
  .field-pair { grid-template-columns: 1fr; }
  .ps-sub { flex-wrap: wrap; }
  .ps-sub .btn { margin-left: 80px; }
  .sup-compose .photo-pick { padding: 0 10px; }
}

/* Leaderboard, Bikes You Follow, Find Garages */
.lb-filters { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 14px; }
.lb-opts { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.lb-opts a { padding: 6px 0; color: var(--t2); font-size: 14px; font-weight: 600; border-bottom: 1px solid transparent; }
.lb-opts a:hover { color: var(--t1); }
.lb-opts a[aria-current] { color: var(--yellow); border-bottom-color: var(--yellow-line); }
.lb-top { display: grid; gap: 16px; margin-bottom: 28px; }
.lb-you { border: 1px solid var(--yellow-line); border-radius: 12px; background: var(--carbon); padding: 16px 20px; }
.lb-you-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0; }
.lb-you-head b { color: var(--yellow); font-size: 22px; font-weight: 700; }
.lb-you-stats { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lb-you-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.lb-you-stats .stat b { font-size: 20px; }
.lb-you-stats .stat span { font-size: 13px; color: var(--t3-text); }
.lb-podium { list-style: none; margin: 0; padding: 24px 8px 16px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; border: 1px solid var(--hair); border-radius: 12px; background: var(--carbon); }
.lb-spot a { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--t1); min-width: 0; }
.lb-spot-face { position: relative; display: inline-flex; padding: 2px; border: 1px solid var(--t3); border-radius: 50%; margin-bottom: 14px; }
.lb-spot .avatar { width: 52px; height: 52px; }
.lb-spot.is-first .lb-spot-face { border: 2px solid var(--yellow); }
.lb-spot.is-first .avatar { width: 68px; height: 68px; }
.lb-spot-rank { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); min-width: 22px; padding: 0 6px; border: 1px solid var(--t3); border-radius: 6px; background: var(--carbon); font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
.lb-spot.is-first .lb-spot-rank { border-color: var(--yellow); color: var(--yellow); }
.lb-spot-name { font-weight: 600; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-spot-value { font-size: 14px; font-weight: 600; color: var(--t2); }
.lb-spot.is-first .lb-spot-value { color: var(--yellow); }
.lb-spot small { font-size: 12px; color: var(--t3-text); }
.lb-spot a:hover .lb-spot-name { color: var(--yellow); }
.lb-rows { list-style: none; margin: 0; padding: 0; }
.lb-row { break-inside: avoid; border-bottom: 1px solid var(--hair); }
.lb-row a { display: flex; align-items: center; gap: 12px; padding: 12px 4px; color: var(--t1); }
.lb-row a:hover .lb-who b { color: var(--yellow); }
.lb-row .avatar { width: 36px; height: 36px; }
.lb-rank { width: 28px; flex: none; text-align: center; font-weight: 700; color: var(--t2); }
.lb-row.is-you .lb-rank { color: var(--yellow); }
.lb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lb-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-who small, .lb-val small { font-size: 13px; color: var(--t3-text); }
.lb-val { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.lb-val b { font-size: 17px; font-weight: 700; }
.lb-rows-you { margin-top: 12px; border: 1px solid var(--yellow-line); border-radius: 12px; padding: 0 12px; }
.lb-rows-you .lb-row { border-bottom: 0; }
.lb-foot { text-align: center; margin-top: 20px; }
.gf-search { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.gf-search input { width: 100%; min-height: 42px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 8px; background: var(--carbon); color: var(--t1); font: inherit; font-size: 16px; outline: none; }
.gf-search input:focus { border-color: var(--yellow-line); }
.gf-rows { list-style: none; margin: 0; padding: 0; }
.gf-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--hair); break-inside: avoid; }
.gf-cover { flex: none; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: var(--slate); display: grid; place-items: center; color: var(--t3); }
.gf-cover img { width: 100%; height: 100%; object-fit: cover; }
.gf-cover svg { width: 26px; height: 26px; }
.gf-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gf-name { color: var(--t1); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.gf-name:hover, .gf-bike:hover .gf-name { color: var(--yellow); }
.gf-meta { color: var(--t3-text); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gf-owner { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 12px; color: var(--t3-text); }
.gf-owner a { display: inline-flex; align-items: center; gap: 6px; color: var(--t2); min-width: 0; }
.gf-owner .avatar { width: 18px; height: 18px; }
.gf-more { margin-top: 20px; }
.gf-bike { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; color: var(--t1); }
.gf-bikes .gf-cover { width: 56px; height: 56px; }
.gf-bikes .gf-name { font-size: 16px; }
.gf-chev { flex: none; color: var(--t3-text); display: inline-flex; }
@media (min-width: 700px) {
  .gf-search { grid-template-columns: 2fr 1fr auto; max-width: 960px; }
}
@media (min-width: 900px) {
  .lb-top { grid-template-columns: minmax(280px, 1fr) 2fr; }
  .lb-top .lb-podium:only-child { grid-column: 1 / -1; }
  .lb-you { display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 1100px) {
  .lb-rows:not(.lb-rows-you), .gf-rows { columns: 2; column-gap: 48px; }
}
@media (min-width: 1600px) {
  .gf-rows { columns: 3; }
}

/* Group Rides: Your Rides, Join, Join with Code and Ride Invites */
.ge-head > .actions { margin: 0; }
.gj-count { margin-left: 6px; color: var(--yellow); font-weight: 600; font-variant-numeric: tabular-nums; }
.gr h2.gj-head { margin-top: 0; }
.gj-mine + .gj-head { margin-top: 32px; }
.gj-row { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--hair); }
.gj-row > a { flex: 1; min-width: 0; border-bottom: 0; }
.gj-act { flex: none; display: flex; align-items: center; gap: 8px; }
.gj-act form, .gj-ride-act form { margin: 0; }
.gj-off { color: var(--t3-text); font-size: 14px; font-weight: 600; }
.gj-code { margin-bottom: 32px; padding-bottom: 28px; border-bottom: 1px solid var(--hair); }
.gj-code input[name="invite_code"] { font-size: 20px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; }
.gj-ride-act { margin-top: 20px; }
.gj-invites { padding-bottom: 72px; }
.gj-invite { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.gj-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.gj-title { margin: 0; }
.gj-title b { color: var(--t1); font-size: 16px; font-weight: 600; }
.gj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; color: var(--t3-text); font-size: 13px; }
.gj-leader { margin: 4px 0 0; font-size: 13px; }
.gj-leader a { display: inline-flex; align-items: center; gap: 8px; color: var(--t2); min-width: 0; }
.gj-leader .avatar { width: 28px; height: 28px; }
.gj-leader small { display: block; color: var(--t3-text); font-size: 12px; }
@media (min-width: 1440px) {
  .gj-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 0; }
  .gj-invite:nth-child(-n+2) { border-top: 1px solid var(--hair); }
}
@media (max-width: 600px) {
  .gj-invite { flex-wrap: wrap; }
  .gj-invite .gj-act { width: 100%; }
}

/* Brand pages: /makes and /makes/:slug. Every make tile links here. */
.mk-link { display: inline-flex; flex: none; border-radius: 12px; }
.mk-link:hover .mk::after { border-color: rgba(244, 246, 248, 0.32); }
.mk-72 { width: 72px; height: 72px; font-size: 28px; border-radius: 14px; }
.overline-red, .overline-red a { color: var(--red); }
.mhead { display: flex; align-items: center; gap: 18px; }
.mhead h1 { margin: 2px 0 0; }
.mcols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 40px; }
.mfacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0 0 24px; border-top: 1px solid var(--hair); }
.mfacts div { padding: 14px 0; border-bottom: 1px solid var(--hair); min-width: 0; }
.mfacts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3-text); }
.mfacts dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.mfacts dd a { color: var(--t1); }
.mfacts dd a:hover { color: var(--yellow); }
.mtext { color: var(--t2); line-height: 1.65; font-size: 16px; max-width: 76ch; white-space: pre-line; }
.mclassified { padding: 20px 0; border-top: 1px solid rgba(240, 68, 82, 0.5); border-bottom: 1px solid var(--hair); }
.mclassified .mtext { margin-top: 12px; }
.mquote { margin: 20px 0 0; }
.mquote p { color: var(--t1); font-size: 18px; font-style: italic; font-weight: 600; }
.mquote footer { margin-top: 6px; color: var(--t3-text); font-size: 14px; }
.mmodels ul { border-top: 1px solid var(--hair); }
.mmodels a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--t1); font-weight: 600; }
.mmodels a b { color: var(--t3-text); font-weight: 500; font-size: 14px; }
.mmodels a:hover, .mmodels a.is-on { color: var(--yellow); }
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 32px; border-top: 1px solid var(--hair); }
.brands a { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); color: var(--t1); }
.brands a:hover .brand-name { color: var(--yellow); }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-weight: 600; font-size: 16px; }
.brand-sub { color: var(--t3-text); font-size: 14px; }
@media (min-width: 1081px) {
  .mcols { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: clamp(32px, 4vw, 80px); }
  .mcols.mcols-one { grid-template-columns: minmax(0, 1fr); }
  .mfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Photos: the inline viewer (arrows and a counter on the main photo) and the fullscreen
   viewer every photo set opens into. Flat controls on a dark plate, no shadows. */
[data-lb] img, [data-viewer-main] { cursor: zoom-in; }
[data-viewer] { outline: none; }
[data-viewer]:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.gal-arrow, .pv-arrow, .pv-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--hair); border-radius: 50%; background: rgba(12, 16, 20, 0.72); color: var(--t1); cursor: pointer; transition: background .15s, border-color .15s; }
.gal-arrow:hover, .pv-arrow:hover, .pv-close:hover { background: var(--slate); border-color: rgba(255, 255, 255, 0.2); }
.gal-arrow:focus-visible, .pv-arrow:focus-visible, .pv-close:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.gal-arrow { position: absolute; top: 50%; margin-top: -22px; z-index: 2; opacity: 0; transition: opacity .15s, background .15s; }
.gal-prev { left: 12px; }
.gal-next { right: 12px; }
[data-viewer]:hover .gal-arrow, [data-viewer]:focus-within .gal-arrow { opacity: 1; }
@media (hover: none) { .gal-arrow { opacity: 1; width: 38px; height: 38px; margin-top: -19px; } }
.gal-count { position: absolute; right: 12px; bottom: 12px; z-index: 2; padding: 3px 9px; border-radius: 6px; background: rgba(12, 16, 20, 0.72); color: var(--t1); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.gal-count:empty { display: none; }
html.pv-open { overflow: hidden; }
.pv { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(6, 8, 11, 0.96); }
.pv[hidden] { display: none; }
.pv-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); }
.pv-img { display: block; max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.pv-cap { color: var(--t2); font-size: 15px; text-align: center; max-width: 720px; }
.pv-count { position: absolute; top: 22px; left: 24px; margin: 0; color: var(--t2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-close { position: absolute; top: 14px; right: 16px; }
.pv-arrow { position: absolute; top: 50%; margin-top: -22px; width: 52px; height: 52px; }
.pv-prev { left: 24px; }
.pv-next { right: 24px; }
.pv-one .pv-arrow { display: none; }
@media (max-width: 720px) {
  .pv-stage { max-width: 100vw; }
  .pv-img { max-height: calc(100vh - 160px); border-radius: 0; }
  .pv-arrow { top: auto; bottom: 22px; margin-top: 0; width: 44px; height: 44px; }
  .pv-prev { left: calc(50% - 56px); }
  .pv-next { right: calc(50% - 56px); }
}

/* @mention autocomplete under the composer and comment boxes: flat hairline rows. */
.mention-list { position: absolute; z-index: 40; margin: 0; padding: 0; list-style: none; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; max-height: 300px; overflow-y: auto; }
.mention-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--hair); cursor: pointer; }
.mention-list li:first-child { border-top: 0; }
.mention-list li[aria-selected="true"], .mention-list li:hover { background: var(--slate); }
.mention-list .avatar { width: 32px; height: 32px; }
.mention-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.mention-text b { font-weight: 600; font-size: 15px; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-text small { font-size: 13px; color: var(--t3-text); }
/* Finished @mentions drawn as profile links over the composer (site.js mirrors the text). */
.mention-box { position: relative; display: block; flex: 1; min-width: 0; width: 100%; }
.mention-box > textarea { position: relative; z-index: 0; }
.mention-live { color: transparent !important; }
.mention-live::placeholder { color: var(--t3-text); opacity: 1; }
.mention-mirror { position: absolute; left: 0; top: 0; z-index: 1; box-sizing: border-box; overflow: hidden; pointer-events: none; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; background: none; border-style: solid; border-color: transparent; margin: 0; }
.mention-mirror a { pointer-events: auto; color: var(--yellow); font-weight: 600; text-decoration: none; }
.mention-mirror a:hover { text-decoration: underline; }

/* Like, Liked By, Save and the Report and Admin menu on every detail page (_subject.html). */
form.act:has(> .btn.act-btn) { padding: 0; }
.pmenu-likers > summary { padding: 6px 10px; }
/* The like count is the Liked By control: it sits tight against the heart and opens the list. */
.acts .act-likers, .actions .act-likers { position: relative; margin-left: -8px; }
.act-likers > summary { list-style: none; min-width: 28px; justify-content: flex-start; }
.act-likers > summary::-webkit-details-marker { display: none; }
.act-likers > summary:hover .act-count, .act-likers[open] > summary .act-count { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.actions .act-likers { margin-left: -4px; }
.actions .act-likers > summary { padding: 8px 6px; }
.pmenu-sheet-likers { left: 0; right: auto; min-width: 260px; max-height: 360px; overflow-y: auto; }
.likers { list-style: none; margin: 0; padding: 0; }
.likers li + li { border-top: 1px solid var(--hair); }
.pmenu-sheet .likers-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; white-space: nowrap; }
.likers-who { display: flex; flex-direction: column; min-width: 0; }
.likers-who small { color: var(--t3-text); font-size: 13px; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.subject-extra, .ct-acts, .ev-acts { margin-top: 12px; gap: 8px; align-items: center; }
.bfollow .pmenu, .bfollow .act { margin: 0; }

/* Saved and Liked: the kind filter is flat text links, the current one underlined. */
.sv-kinds { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 4px 0 12px; }
.sv-kinds a { color: var(--t3-text); font-size: 14px; font-weight: 600; padding: 4px 0; border-bottom: 2px solid transparent; }
.sv-kinds a:hover { color: var(--t1); }
.sv-kinds a[aria-current="page"] { color: var(--t1); border-bottom-color: var(--yellow); }
.sv-rows .overline { margin: 0 0 2px; }
.sv-more { justify-content: center; }

/* ---- Discover ----
   One screen: the search on top (it stays put under the top bar), flat type tabs, then
   the filters rail, one mixed grid of results and a live map band that follows the list.
   Phones fold the rail into a Filters panel and the band into a Map toggle. Discover runs
   wider than the frame so the map gets real room at 1920 and 2560. */
.dx { --dx-top: 65px; padding: 0 var(--gutter) 64px; max-width: 2560px; margin: 0 auto; }
/* 32px to the search, counting the sticky bar's own padding. */
main > .dx:first-child:not(.studio):not(.cover):not(article) { padding-top: 16px; }
@media (max-width: 720px) { main > .dx:first-child:not(.studio):not(.cover):not(article) { padding-top: 22px; } }
.dx-top { position: sticky; top: var(--dx-top); z-index: 4; background: var(--asphalt); padding: 16px 0 12px; }
.dx-search { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 14px; max-width: 880px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t3-text); }
.dx-search:focus-within { border-color: var(--yellow-line); color: var(--t2); }
.dx-search svg { flex: none; }
.dx-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--t1); font: inherit; font-size: 16px; padding: 12px 0; }
.dx-search input::placeholder { color: var(--t3-text); }
.dx-search input::-webkit-search-cancel-button { display: none; }
.dx-clear { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 6px; background: none; color: var(--t3-text); cursor: pointer; }
.dx-clear:hover { color: var(--t1); background: var(--slate); }

/* The panel under an empty, focused search: recent searches, trending tags, riders. */
.dx-suggest { position: absolute; left: 0; top: calc(100% - 4px); width: min(880px, 100%); max-height: min(70vh, 640px); overflow-y: auto; padding: 8px 16px 16px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; z-index: 6; }
.dx-sug-sec { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.dx-sug-sec .overline { margin: 0 0 8px; }
.dx-sug-head { display: flex; align-items: center; justify-content: space-between; }
.dx-sug-head .overline { margin: 0; }
.dx-link-btn { background: none; border: 0; padding: 4px 0; color: var(--t2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dx-link-btn:hover { color: var(--t1); }
.dx-recent li { display: flex; align-items: center; border-bottom: 1px solid var(--hair); }
.dx-recent li:last-child { border-bottom: 0; }
.dx-recent a { flex: 1; min-width: 0; padding: 10px 0; color: var(--t1); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-x { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--t3-text); cursor: pointer; }
.dx-x:hover { color: var(--t1); background: var(--slate); }
.dx-tags { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.dx-tags a { color: var(--t2); font-size: 15px; font-weight: 500; }
.dx-tags a:hover { color: var(--yellow); }
.dx-sug-riders li a { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; font-weight: 500; }
.dx-sug-riders .avatar { width: 32px; height: 32px; border-radius: 50%; }
.dx-hint { padding-top: 12px; color: var(--t3-text); font-size: 13px; }

/* The bar: what is showing, Filters, Map and More. */
.dx-bar { display: flex; align-items: center; gap: 4px; min-height: 48px; border-bottom: 1px solid var(--hair); }
.dx-chosen { flex: 1; min-width: 0; color: var(--t3-text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-bar-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--t1); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.dx-bar-btn:hover, .dx-bar-btn[aria-pressed="true"], .dx-bar-btn[aria-expanded="true"], .dx-more[open] > .dx-bar-btn { background: var(--slate); }
.dx-bar-btn::-webkit-details-marker { display: none; }
.dx-more { margin-left: auto; }
.dx-chosen + .dx-bar-btn, .dx-chosen ~ .dx-more { margin-left: 0; }
.dx-more summary { border-radius: 6px; }

/* Rail: Type, that type's filters, then the shortcuts. */
.dx-rail { display: none; }
.dx-filters { padding: 20px 0 8px; }
.dx-filters .overline, .dx-links .overline { margin: 0 0 12px; }
.dx-field { margin-bottom: 14px; }
.dx-field select, .dx-field input { width: 100%; min-height: 44px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 15px; padding: 10px 12px; outline: none; }
.dx-field select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A8B0BD' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; }
.dx-field select:focus, .dx-field input:focus { border-color: var(--yellow-line); }
.dx-apply { display: flex; gap: 8px; margin: 0; }
.dx-types { display: flex; flex-direction: column; margin: 0 0 20px; }
.dx-types a { display: flex; align-items: center; min-height: 36px; padding: 0 0 0 12px; border-left: 2px solid var(--hair); color: var(--t2); font-size: 15px; font-weight: 500; }
.dx-types a:hover { color: var(--t1); }
.dx-types a[aria-current] { border-left-color: var(--yellow); color: var(--t1); font-weight: 600; }
.dx-links-more summary { padding: 8px 0; color: var(--t3-text); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
.dx-links-more summary::-webkit-details-marker { display: none; }
.dx-links-more summary:hover { color: var(--t1); }
.dx-links-more[open] summary { border-bottom: 1px solid var(--hair); }
.dx-links-more a { display: block; }
.dx-suggested-head { margin: 8px 0 14px; }
.dx-dym { margin: 0 0 14px; color: var(--t2); }
.dx-dym a { color: var(--t1); text-decoration: underline; text-underline-offset: 3px; }
.dx-links { display: flex; flex-direction: column; padding: 20px 0; }
.dx-links a { padding: 8px 0; color: var(--t2); font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--hair); }
.dx-links a:last-child { border-bottom: 0; }
.dx-links a:hover { color: var(--t1); }
.dx.is-filters .dx-rail { display: block; border-bottom: 1px solid var(--hair); }
.dx.is-filters .dx-links { display: none; }

/* Results: one grid of every kind. */
.dx-results { min-width: 0; padding-top: 20px; }
.dx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: 28px 20px; }
.dx-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; border-radius: 10px; }
.dx-card.is-hot .dx-media { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.dx-card.is-hot .dx-title a { color: var(--yellow); }
.dx-media { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--carbon); border: 1px solid var(--hair); }
.dx-media > img { width: 100%; height: 100%; object-fit: cover; }
.dx-m-plate > img, .dx-m-map > img { object-fit: contain; }
.dx-k-place .dx-m-map > img { object-fit: cover; }
.dx-media > .bcard-blank { align-self: stretch; justify-self: stretch; }
.dx-m-avatar > img { width: 46%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.dx-media > .avatar-mark { width: 46%; height: auto; aspect-ratio: 1; border-radius: 50%; }
.dx-media > .avatar-mark img { width: 58%; height: auto; }
.dx-date { display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--t1); }
.dx-date b { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; }
.dx-date small { margin-top: 6px; color: var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dx-blank { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--carbon); }
.dx-blank img.stage-mark { width: 22%; max-width: 120px; aspect-ratio: 1; height: auto; object-fit: contain; opacity: 0.5; }
.dx-kind-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.dx-kind-row .dx-kind { flex: 1; min-width: 0; }
.dx-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dx-kind { color: var(--t3-text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-why { color: var(--t2); font-weight: 600; letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
.dx-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dx-title a:hover { color: var(--yellow); }
.dx-sub { color: var(--t2); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dx-meta { color: var(--t3-text); font-size: 13px; line-height: 1.4; }
.dx-act { flex: none; }
.dx-act .act { margin: 0; padding: 0; }
.dx-act .act:hover { background: none; }
.dx-act .btn { min-height: 28px; padding: 0 10px; font-size: 13px; border-radius: 6px; }
.dx-more-row { display: flex; justify-content: center; padding: 32px 0 8px; }
.dx-results .empty { margin-top: 8px; }
.dx.is-loading .dx-results { opacity: 0.55; transition: opacity 0.15s; }

/* Map band. */
.dx-map { display: none; position: relative; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--carbon); }
.dx-map-canvas, .dx-map > .dx-map-canvas.mapboxgl-map { position: absolute; inset: 0; }
.dx-map-note { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; padding: 12px 14px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t2); font-size: 14px; }
.dx-pin { box-sizing: border-box; width: 16px; height: 16px; padding: 0; appearance: none; border-radius: 50%; background: var(--asphalt); border: 3px solid var(--t1); cursor: pointer; }
.dx-pin.is-hot { border-color: var(--yellow); transform: scale(1.35); z-index: 3; }
.dx-map .mapboxgl-popup-content { background: var(--carbon); color: var(--t1); border: 1px solid var(--hair); border-radius: 8px; padding: 10px 12px; font: 600 14px/1.35 var(--font); }
.dx-map .mapboxgl-popup-content small { display: block; color: var(--t3-text); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dx-map .mapboxgl-popup-tip { display: none; }

/* Phones: Map shows the band in place of the list. */
@media (max-width: 1199px) {
  .dx.is-map .dx-map { display: block; height: calc(100vh - 230px); min-height: 360px; margin-top: 16px; }
  .dx.is-map .dx-results { display: none; }
}
@media (max-width: 720px) {
  .dx-top { padding: 10px 0 8px; }
  .dx-cards { grid-template-columns: 1fr; gap: 0; }
  .dx-card { flex-direction: row; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
  .dx-media { flex: none; width: 104px; aspect-ratio: 1; }
  .dx-date b { font-size: 30px; }
  .dx-title { font-size: 16px; }
  .dx-results { padding-top: 4px; }
}

/* Desktop: the rail opens beside the results. */
@media (min-width: 960px) {
  .dx-cols { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 clamp(28px, 2.6vw, 56px); }
  .dx-rail { display: block; position: sticky; top: calc(var(--dx-top) + 76px); align-self: start; max-height: calc(100vh - var(--dx-top) - 92px); overflow-y: auto; scrollbar-width: none; }
  .dx-bar .dx-chosen, .dx-bar [data-dx-filters], .dx-more { display: none; }
  .dx-bar { border-bottom: 0; min-height: 0; justify-content: flex-end; }
  .dx-bar:not(:has(> :not([hidden]):not(.dx-chosen):not([data-dx-filters]):not(.dx-more))) { display: none; }
  .dx.is-filters .dx-links { display: flex; }
  .dx.is-filters .dx-rail { border-bottom: 0; }
}
/* Wide: the live map band sits beside the list and stays in view. */
@media (min-width: 1200px) {
  .dx-main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(360px, 30vw, 860px); gap: clamp(24px, 2vw, 48px); align-items: start; }
  .dx-list { min-width: 0; }
  .dx-search { max-width: none; }
  .dx-suggest { width: min(880px, 100%); }
  .dx-map { display: block; position: sticky; top: calc(var(--dx-top) + 16px); height: calc(100vh - var(--dx-top) - 32px); margin-top: 16px; }
  .dx-bar { display: none; }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .dx-main { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* The foot-of-screen notice (mrNotice in site.js), the web's snackbar. Flat, hairline. */
.site-notice { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 12px 16px; background: var(--carbon); border: 1px solid var(--slate); border-radius: 8px; color: var(--t1); font-size: 15px; line-height: 1.4; }
.site-notice.is-error { background: #2A1418; border-color: rgba(240, 68, 82, 0.5); }
.site-notice-act { margin-left: 12px; padding: 0; background: none; border: 0; color: var(--yellow); font: inherit; font-weight: 600; cursor: pointer; }
.site-notice-act:hover { text-decoration: underline; }
@media (max-width: 720px) { .site-notice { bottom: calc(76px + env(safe-area-inset-bottom)); } }

/* Voice (voice.js): the group ride Voice Channel bar and rider calls, the app's controls.
   Flat hairline rows; green means on air, red means muted or end. */
.gr-voice { margin-bottom: 32px; padding: 14px 16px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 10px; }
.vb-row { display: flex; align-items: center; gap: 12px; }
.vb-row > .vb-status { flex: 1; min-width: 0; }
.vb-status { font-size: 15px; font-weight: 600; color: var(--t1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-status.muted { color: var(--t2); font-weight: 500; }
.vb-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.vb-top { flex: 1 1 280px; min-width: 0; }
.vb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--t3-text); }
.gr-voice.is-live .vb-top > .vb-dot { background: var(--green); }
.vb-dot.is-on { background: var(--green); }
.vb-air { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--t3-text); }
.vb-air.is-on { color: var(--green); }
.vb-air svg { width: 16px; height: 16px; }
.vb-controls { display: flex; align-items: center; gap: 8px; }
.vb-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--hair); background: var(--slate); color: var(--t1); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; }
.vb-btn:hover { border-color: var(--t3-text); }
.vb-btn.is-muted { color: var(--red); border-color: rgba(240, 68, 82, 0.45); }
.vb-ptt { min-width: 150px; justify-content: center; }
.vb-ptt.is-talking { color: var(--green); border-color: rgba(25, 197, 143, 0.6); background: rgba(25, 197, 143, 0.12); }
.vb-more > summary.vb-btn { padding: 0 12px; }
.vb-more[open] > summary.vb-btn { background: var(--slate); border-color: var(--t3-text); }
.vb-riders-wrap { margin-top: 12px; border-top: 1px solid var(--hair); }
.vb-vol-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 14px; }
.vb-vol-head .gj-head { margin: 0; font-size: 15px; }
.vb-sub { margin: 2px 0 0; font-size: 13px; }
.vb-quick { display: flex; gap: 8px; padding: 10px 0 4px; }
.btn.is-red, .vb-mute-one.is-red { color: var(--red); }
.vb-riders { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 32px; }
.vb-rider { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.vb-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vb-who .avatar { width: 32px; height: 32px; }
.vb-rider.is-speaking .avatar { outline: 2px solid var(--green); outline-offset: 1px; }
.vb-who b { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-talking { color: var(--green); font-size: 12px; font-weight: 600; }
.vb-pct { color: var(--t2); font-size: 13px; font-variant-numeric: tabular-nums; }
.vb-vol { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.vb-mute-one { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 8px; border: 1px solid var(--hair); background: none; color: var(--t2); cursor: pointer; }
.vb-mute-one:hover { color: var(--t1); border-color: var(--t3-text); }
.vb-empty { margin: 0; padding: 12px 0 2px; font-size: 14px; }
.vb-video { margin-top: 14px; }
.vb-video-h { margin: 0 0 8px; color: var(--t3-text); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.gr-voice .vgrid { height: clamp(220px, 32vw, 520px); }

/* The site's range input: a hairline track with a flat round thumb. */
input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 28px; margin: 0; background: none; cursor: pointer; accent-color: var(--yellow); }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--slate); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--slate); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--yellow); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--t1); border: 0; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--t1); border: 0; }
input[type="range"]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }

/* Video grid: one tile fills, two split, three or four make a 2x2, more scroll in two columns. */
.vgrid { display: grid; gap: 6px; height: 100%; min-height: 0; }
.vgrid-1 { grid-template-columns: 1fr; }
.vgrid-2 { grid-template-columns: 1fr 1fr; }
.vgrid-3, .vgrid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.vgrid-5 { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(160px, 1fr); overflow-y: auto; }
.vtile { position: relative; min-height: 0; overflow: hidden; border-radius: 8px; background: var(--asphalt); border: 1px solid var(--hair); }
.vtile.is-speaking { border-color: var(--yellow); }
.vtile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtile.is-self video { transform: scaleX(-1); }
.vtile-name { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(12, 16, 20, 0.72); color: var(--t1); font-size: 13px; font-weight: 600; }

/* Call buttons in the conversation header. */
.chat-calls { margin-left: auto; display: inline-flex; gap: 2px; }
.chat-calls .tool { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.chat-calls .tool:disabled { opacity: 0.4; cursor: default; }

/* Notices: microphone or camera blocked. */
.vnotice { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(240, 68, 82, 0.45); border-radius: 8px; background: #2A1418; }
.vnotice-i { color: var(--red); flex: none; padding-top: 1px; }
.vnotice b { display: block; font-size: 15px; color: var(--t1); }
.vnotice p { margin: 2px 0 0; color: var(--t2); font-size: 14px; line-height: 1.4; }

/* The call overlay: the incoming prompt (bottom right), a docked voice call, a video stage. */
.vcall { position: fixed; z-index: 40; }
.vcall.is-ringing, .vcall.is-voice { right: 24px; bottom: 24px; width: 380px; }
.vcall.is-video { inset: 0; padding: 24px; background: var(--asphalt); }
.vcall-card, .vcall-panel { background: var(--carbon); border: 1px solid var(--slate); border-radius: 12px; color: var(--t1); }
.vcall-card { padding: 18px; }
.vcall-who { display: flex; align-items: center; gap: 14px; }
.vcall-who b { display: block; font-size: 17px; }
.vcall-status { display: block; color: var(--t2); font-size: 14px; font-variant-numeric: tabular-nums; }
.vcall-status.is-live { color: var(--green); }
.vcall-answer { display: flex; justify-content: space-around; margin-top: 18px; }
.vcall-panel { display: flex; flex-direction: column; padding: 20px; }
.vcall.is-video .vcall-panel { height: 100%; background: var(--asphalt); padding: 16px; }
.vcall-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; text-align: center; }
.vcall-ring { display: inline-block; padding: 4px; border-radius: 50%; border: 2px solid transparent; }
.vcall-ring.is-speaking { border-color: var(--green); }
.vcall-name { font-size: 20px; margin-top: 6px; }
.vcall-stage { position: relative; flex: 1; min-height: 0; }
.vcall-stage > .vgrid { height: 100%; }
.vpip { position: absolute; right: 12px; top: 12px; width: clamp(120px, 16vw, 260px); aspect-ratio: 4 / 3; z-index: 1; }
.vcall-chrome { position: absolute; left: 12px; top: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(12, 16, 20, 0.72); }
.vcall-chrome b { display: block; font-size: 15px; }
.vcall-controls { display: flex; justify-content: center; gap: 28px; padding-top: 18px; }
.vround { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: var(--t2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.vround-i { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--slate); color: var(--t1); border: 1px solid var(--hair); }
.vround:hover .vround-i { border-color: var(--t3-text); }
.vround.is-on .vround-i { background: var(--t1); color: var(--asphalt); }
.vround.is-red .vround-i { background: var(--red); border-color: var(--red); color: #fff; }
.vround.is-green .vround-i { background: var(--green); border-color: var(--green); color: #fff; }
.vcall .vnotice { margin: 12px 0 0; }
/* Why a call did not go ahead: a full-width hairline row with what to do next. */
.vcall-error { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.vcall-error p { margin: 0 0 12px; color: var(--t1); font-size: 15px; }
.vcall-error-acts { display: flex; gap: 10px; }
.vcall-error-acts .btn { flex: 1; justify-content: center; }
/* Speaker picker opens upward from the call controls. */
.vcall-speaker > summary.vround { padding: 0; background: none; }
.vcall-speaker[open] > summary.vround { background: none; }
.vcall-speaker[open] > summary .vround-i { border-color: var(--t3-text); }
.vcall-speaker .pmenu-sheet { top: auto; bottom: calc(100% + 8px); right: 50%; transform: translateX(50%); max-width: min(320px, 90vw); }
.vcall-speaker .pmenu-sheet button { overflow: hidden; text-overflow: ellipsis; }
.vcall-speaker .pmenu-sheet button.is-on { color: var(--t1); }
/* "Leaving This Page Ends the Call": asked in the page before a link takes the rider away. */
.vleave { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(12, 16, 20, 0.72); }
.vleave-card { width: min(420px, 100%); padding: 20px; background: var(--carbon); border: 1px solid var(--slate); border-radius: 12px; color: var(--t1); }
.vleave-card b { display: block; font-size: 17px; }
.vleave-card p { margin: 8px 0 18px; font-size: 14px; }
.vleave-acts { display: flex; gap: 10px; }
.vleave-acts .btn { flex: 1; justify-content: center; }

@media (max-width: 720px) {
  .gr-voice { margin-bottom: 24px; padding: 12px; }
  .vb-head { gap: 10px; }
  .vb-top { flex-basis: 100%; }
  .vb-controls { width: 100%; }
  .vb-controls > .vb-btn { flex: 1; justify-content: center; min-height: 48px; }
  .vb-more > summary.vb-btn { min-height: 48px; }
  .vb-riders { grid-template-columns: 1fr; }
  .gr-voice .vgrid { height: 60vw; }
  /* The incoming prompt is a bottom sheet; a call takes the whole screen. */
  .vcall.is-ringing { left: 0; right: 0; bottom: 0; width: auto; }
  .vcall.is-ringing .vcall-card { border-radius: 14px 14px 0 0; border-width: 1px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .vcall.is-voice, .vcall.is-video { inset: 0; width: auto; padding: 0; }
  .vcall.is-voice .vcall-panel, .vcall.is-video .vcall-panel { height: 100%; border: 0; border-radius: 0; background: var(--asphalt); padding: calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
  .vcall.is-voice .vcall-body { flex: 1; justify-content: center; }
  .vcall-controls { padding-top: 16px; }
  .vpip { width: 104px; }
}

/* Protect (/protect): status first. Contacts, Back By and the trip link side by side on a
   desktop, each its state on top and its controls under it; stacked on a phone. The
   saving is the settings script's, so the section keeps .set-sec but always shows. */
.prot-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.prot-head h1 { font-size: 36px; }
.prot-head p { margin: 0; color: var(--t2); font-size: 15px; max-width: 70ch; }
.prot .set-sec { display: block; max-width: none; padding: 0 0 48px; }
.prot-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
.prot-col { min-width: 0; padding: 24px 32px 28px; border-left: 1px solid var(--hair); }
.prot-col:first-child { padding-left: 0; border-left: 0; }
.prot-col:last-child { padding-right: 0; }
.prot-k { margin: 0 0 6px; color: var(--t3-text); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.prot-v { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--t1); font-variant-numeric: tabular-nums; }
.prot-v.is-ok { color: var(--green); }
.prot-v.is-warn { color: var(--yellow); }
.prot-v.is-err { color: var(--red); }
.prot-note { margin: 6px 0 14px; color: var(--t2); font-size: 14px; line-height: 1.5; }
.prot-note.is-err { color: var(--red); }
.prot-left { color: var(--t1); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prot-rows { border-top: 1px solid var(--hair); }
.prot .field select { width: 100%; min-height: 44px; appearance: none; -webkit-appearance: none; background: var(--carbon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23A8B0BD' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; padding: 10px 36px 10px 12px; outline: none; }
.prot .field select:focus { border-color: var(--yellow-line); }
.prot-backby-set { max-width: 360px; }
.prot-backby-set .field { margin-bottom: 12px; }
.prot-backby-set .set-actions { margin-top: 4px; }
.prot-more .pmenu-sheet { left: 0; right: auto; }
.prot-story { border-top: 1px solid var(--hair); padding: 20px 0; }
.prot-story .set-form { max-width: 640px; }
.prot-story .field { margin-bottom: 12px; }
.prot-story-body { max-width: 640px; color: var(--t1); white-space: pre-line; }
.prot-foot { border-top: 1px solid var(--hair); }
.prot-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 15px; color: var(--t2); }
.prot-line > b { flex: none; width: 140px; color: var(--t1); font-weight: 600; }
.prot-line > span { flex: 1; min-width: 0; }
.prot-line em { font-style: normal; color: var(--t1); font-weight: 600; }
.prot-tip .btn { margin-left: auto; }

/* Active Alert: one open incident, at the top of every page. Flat: a red hairline and
   red words, no fill. */
.alert-band { border-bottom: 1px solid var(--red); background: var(--asphalt); }
.ab-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 12px 40px; padding-top: 16px; padding-bottom: 16px; }
.ab-kicker { margin: 0 0 2px; color: var(--red); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.ab-head h2 { font-size: 22px; }
.ab-sum { margin: 4px 0 0; font-size: 15px; color: var(--t2); }
.ab-sum b { color: var(--t1); font-variant-numeric: tabular-nums; }
.ab-sum.is-ok, .ab-state.is-ok { color: var(--green); }
.ab-sum.is-bad, .ab-state.is-bad { color: var(--red); }
.ab-sum.is-pending, .ab-state.is-pending { color: var(--t2); }
.ab-rows { list-style: none; margin: 0; padding: 0; }
.ab-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 14px; }
.ab-rows li:last-child { border-bottom: 0; }
.ab-who { min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.ab-who small { color: var(--t3-text); font-size: 13px; }
.ab-state { flex: none; font-weight: 600; }
.ab-actions { grid-column: -2 / -1; display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.ab-status { flex-basis: 100%; margin: 0; text-align: right; font-size: 14px; color: var(--t3-text); }
.ab-status:empty { display: none; }
.ab-status.is-err { color: var(--red); }
.alert-band.is-closed { border-bottom-color: var(--green); }
.alert-band.is-closed .ab-kicker { color: var(--green); }

@media (max-width: 1100px) {
  .prot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prot-col:nth-child(3) { grid-column: 1 / -1; padding-left: 0; padding-right: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .prot-col:nth-child(2) { padding-right: 0; }
  .ab-in { grid-template-columns: minmax(0, 1fr) auto; }
  .ab-rows { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 720px) {
  .prot-head { padding-top: 8px; }
  .prot-head h1 { font-size: 30px; }
  .prot-grid { grid-template-columns: minmax(0, 1fr); }
  .prot-col, .prot-col:first-child, .prot-col:nth-child(3) { padding: 20px 0 22px; border-left: 0; border-top: 1px solid var(--hair); }
  .prot-col:first-child { border-top: 0; }
  .prot-backby-set { max-width: none; }
  .prot-line > b { width: 100%; }
  .prot-tip .btn { margin-left: 0; }
  .ab-in { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-rows { grid-row: auto; }
  .ab-actions { justify-content: stretch; }
  .ab-actions .btn { flex: 1; justify-content: center; min-height: 48px; }
  .ab-status { text-align: left; }
}
.plan-best-note { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: var(--yellow); }

/* Liked By inside a place's More menu: opens in place, under the item. */
.pl-likers > summary { list-style: none; display: block; padding: 10px 12px; border-radius: 6px; color: var(--t2); font-size: 15px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.pl-likers > summary::-webkit-details-marker { display: none; }
.pl-likers > summary:hover { color: var(--t1); background: var(--slate); }
.pl-likers[open] > summary { color: var(--t1); }
.pl-likers-list { max-height: 280px; overflow-y: auto; margin: 0 0 4px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.pmenu-sheet button.is-on { color: var(--yellow); }
/* Fuel Finder (/fuel) and the map's Fuel Prices layer (fuel.js). Flat hairline rows. */
.fu-bar { display: grid; grid-template-columns: minmax(0, 1fr) 200px auto; gap: 16px; align-items: end; }
.fu-bar .field { margin-bottom: 0; }
.fu-where { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.fu-where .btn { min-height: 46px; }
.fu-grade select { width: 100%; min-height: 46px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; padding: 10px 12px; }
.fu-hits { position: absolute; top: 100%; left: 0; right: 0; z-index: 4; margin-top: 4px; border: 1px solid var(--slate); border-radius: 8px; background: var(--carbon); overflow: hidden; }
.fu-hits[hidden] { display: none; }
.fu-hit { display: flex; flex-direction: column; width: 100%; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.fu-hit:last-child { border-bottom: 0; }
.fu-hit:hover, .fu-hit:focus-visible { background: var(--slate); }
.fu-hit small { color: var(--t3-text); font-size: 13px; }
.fu-sort { display: flex; gap: 2px; border-bottom: 1px solid var(--hair); }
.fu-sort button { min-height: 46px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--t2); font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.fu-sort button[aria-current] { color: var(--t1); border-bottom-color: var(--yellow); }
.fu-area { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); font-size: 15px; }
.fu-area[hidden] { display: none; }
.fu-area p { margin: 0; }
.fu-move { color: var(--yellow); font-weight: 600; }
.fu-avg { color: var(--t2); }
.fu-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 34%); gap: 40px; align-items: start; margin-top: 8px; }
.fu-list { list-style: none; margin: 0; padding: 0; columns: 1; }
.fu-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--hair); background: none; color: var(--t1); font: inherit; text-align: left; cursor: pointer; }
.fu-row:hover { background: rgba(255, 255, 255, 0.02); }
.fu-row.is-open { background: var(--carbon); }
.fu-row-main { display: flex; flex-direction: column; min-width: 0; }
.fu-row-main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-row-main small { color: var(--t3-text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-cheap { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow); }
.fu-row-price { display: flex; flex-direction: column; align-items: flex-end; min-width: 84px; font-variant-numeric: tabular-nums; }
.fu-row-price b { font-size: 18px; font-weight: 700; }
.fu-row-price small { color: var(--t3-text); font-size: 12px; }
.fu-row-price.is-avg b, .fu-row-price.is-old b { color: var(--t2); font-weight: 500; }
.fu-empty { padding: 32px 4px; color: var(--t3-text); border-bottom: 1px solid var(--hair); }
.fu-detail { position: sticky; top: 88px; padding: 0 0 8px; }
.fu-detail[hidden] { display: none; }
.fu-tile { display: block; margin-bottom: 16px; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; aspect-ratio: 640 / 260; background: var(--carbon); }
.fu-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fu-detail h2 { margin: 0; font-size: 22px; letter-spacing: -0.015em; }
.fu-detail-meta { margin: 4px 0 0; color: var(--t3-text); font-size: 14px; }
.fu-detail-addr { margin: 6px 0 0; color: var(--t2); font-size: 15px; }
.fu-prices { margin-top: 16px; }
.fu-price-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.fu-price-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.fu-price-grade { font-weight: 600; }
.fu-price-meta { color: var(--t3-text); font-size: 13px; }
.fu-price-num { font-size: 17px; font-variant-numeric: tabular-nums; }
.fu-price-row.is-old .fu-price-num, .fu-price-row.is-avg .fu-price-num { color: var(--t2); font-weight: 500; }
.fu-price-row.is-avg .fu-price-grade { color: var(--t2); font-weight: 500; }
.fu-none { margin: 0; padding: 10px 0; color: var(--t3-text); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.fu-report { margin-top: 14px; }
.fu-ask { margin: 0 0 10px; font-weight: 600; }
.fu-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.fu-report .fu-acts { margin-top: 0; }
.fu-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.fu-form .field { margin-bottom: 0; }
.fu-form .field select { width: 100%; min-height: 46px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; padding: 10px 12px; }
.fu-msg { margin: 10px 0 0; color: var(--t2); font-size: 14px; }
.fu-msg:empty { display: none; }
.fu-foot { margin: 20px 0 0; max-width: var(--measure); color: var(--t3-text); font-size: 13px; line-height: 1.5; }
@media (min-width: 1800px) { .fu-body { grid-template-columns: minmax(0, 1fr) 560px; } }
@media (max-width: 959px) {
  .fu-bar { grid-template-columns: 1fr; }
  .fu-body { grid-template-columns: 1fr; gap: 24px; }
  .fu-detail { position: static; order: -1; }
  .fu-form { grid-template-columns: 1fr; }
  .fu-where { grid-template-columns: 1fr; }
}
.mp-fuel { position: absolute; right: 16px; bottom: 40px; z-index: 2; display: flex; flex-direction: column; gap: 2px; max-width: min(360px, calc(100% - 32px)); padding: 10px 14px; border-radius: 8px; border: 1px solid var(--slate); background: rgba(18, 22, 31, 0.95); font-size: 13px; }
.mp-fuel[hidden] { display: none; }
.mp-fuel p { margin: 0; }
.mp-fuel-move { color: var(--yellow); font-weight: 600; }
.mp-fuel-line { color: var(--t2); }
.mp-fuel-link { margin-top: 4px; color: var(--t1); font-weight: 600; }
.mp-fuel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.mp-fuel-x { border: 0; background: none; color: var(--t3-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.mp-fuel-x:hover { color: var(--t1); }
.mp-fuel-card .fu-form { grid-template-columns: 1fr 1fr; }
.mp-fuel-card .fu-form .btn { grid-column: 1 / -1; }
@media (max-width: 720px) { .mp-fuel { bottom: auto; top: 64px; right: 16px; left: 16px; max-width: none; } }

/* The official App Store and Google Play badges, one height side by side. */
.store-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.store-badge { display: inline-flex; height: 52px; border-radius: 9px; }
.store-badge:hover { opacity: 0.88; }
.store-badge:focus-visible { outline: 2px solid var(--yellow, #F5B800); outline-offset: 3px; }
.store-badge img { height: 100%; width: auto; display: block; }


/* Gate: a short, centered stop (Staff Only) instead of a hero stretched across the page. */
.gate { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 360px); padding-top: 48px; padding-bottom: 48px; }
.gate-card { width: 100%; max-width: 440px; padding: 32px; border: 1px solid var(--hair); border-radius: 12px; background: var(--carbon); }
.gate-mark { display: block; width: 40px; height: auto; margin-bottom: 20px; opacity: .9; }
.gate-card h1 { font-size: 28px; line-height: 1.2; margin: 4px 0 10px; }
.gate-card p:not(.overline) { margin: 0 0 24px; color: var(--t2); line-height: 1.5; }
.gate-card p b { color: var(--t1); font-weight: 600; }
.gate-actions { display: flex; flex-direction: column; gap: 10px; }
.gate-actions form { margin: 0; }
.gate-actions .btn { width: 100%; justify-content: center; }
/* Post As (staff): who the composer posts as, with a rider lookup in its sheet. */
.post-as > summary { gap: 6px; max-width: 240px; }
.post-as-lbl { color: var(--t3-text); font-weight: 600; }
.post-as-face { display: inline-flex; flex: none; }
.post-as-face .avatar { width: 20px; height: 20px; }
.post-as-who { overflow: hidden; text-overflow: ellipsis; }
.post-as-links { margin: 0 0 2px; font-size: 13px; color: var(--t3-text); }
.post-as-links a { color: var(--t1); }
.post-as-links a:hover { color: var(--yellow); }
.post-as-sheet .field { margin: 8px 0 4px; }
.post-as-sheet .field input { font-size: 15px; padding: 9px 12px; }
.post-as-list .pick-row { width: 100%; background: none; border-width: 0 0 1px; border-style: solid; border-color: var(--hair); border-radius: 0; color: inherit; font: inherit; text-align: left; }
.post-as-list .pick-thumb .avatar { width: 40px; height: 40px; border-radius: 8px; }
.post-as-list .pick-row:hover b, .post-as-list .pick-row.is-on b { color: var(--t1); }
.post-as-list .pick-row.is-on .pick-thumb { border-color: var(--yellow-line); }
.post-as-list .pick-row:focus-visible { outline: 2px solid var(--yellow-line); outline-offset: 2px; }
.post-as-note { margin: 6px 0 0; font-size: 13px; }
.post-as-note:empty { display: none; }

/* Help Center (/help). The front page: a calm "How can we help?" with one big search
   that suggests articles as you type, topic cards with Popular Questions beside them, and
   Contact Support. A search or topic: the topic rail and one list. Articles use the shared
   document layout (.doc). Same wording as Help Center in the app. */
.hc { max-width: 2560px; margin: 0 auto; padding: 0 var(--gutter) 72px; }
.hc-hero { padding: 28px 0 20px; border-bottom: 1px solid var(--hair); }
.hc-hero .overline { margin: 0 0 10px; }
.hc-hero .overline a { color: inherit; }
.hc-hero h1 { margin: 0; font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; }
.hc-hero-lede { margin: 10px 0 0; max-width: 640px; color: var(--t2); font-size: 17px; line-height: 1.5; }
.hc-landing .hc-hero { padding: 48px 0 40px; }
.hc-ask { position: relative; display: flex; align-items: center; gap: 12px; max-width: 760px; min-height: 60px; margin-top: 24px; padding: 0 8px 0 18px; background: var(--carbon); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; color: var(--t3-text); }
.hc-hero .overline + .hc-ask { margin-top: 4px; }
.hc-ask:focus-within { border-color: var(--yellow-line); color: var(--t2); }
.hc-ask svg { flex: none; }
.hc-ask input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--t1); font: inherit; font-size: 18px; padding: 16px 0; }
.hc-ask input::placeholder { color: var(--t3-text); }
.hc-ask input::-webkit-search-cancel-button { display: none; }
.hc-ask .btn { flex: none; }
.hc-suggest { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px 0; list-style: none; background: var(--carbon); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; }
.hc-suggest[hidden] { display: none; }
.hc-suggest a { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; color: var(--t1); }
.hc-suggest a small { color: var(--t3-text); font-size: 13px; }
.hc-suggest a:hover, .hc-suggest a[aria-selected="true"] { background: var(--slate); }
.hc-suggest .hc-suggest-all a { flex-direction: row; color: var(--t2); font-size: 14px; border-top: 1px solid var(--hair); }
.hc-suggest .hc-suggest-none { padding: 10px 16px; color: var(--t2); font-size: 14px; }

.hc-land { display: grid; grid-template-columns: 1fr; gap: 36px; padding-top: 32px; }
.hc-land .overline { margin: 0 0 14px; }
.hc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hc-card { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border: 1px solid var(--hair); border-radius: 10px; color: var(--t1); }
.hc-card:hover { border-color: rgba(255,255,255,0.2); background: var(--carbon); }
.hc-card-icon { margin-bottom: 8px; color: var(--yellow); }
.hc-card b { font-size: 16px; font-weight: 600; }
.hc-card span { color: var(--t2); font-size: 14px; line-height: 1.5; }
.hc-card small { margin-top: auto; padding-top: 8px; color: var(--t3-text); font-size: 13px; }
.hc-pop { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hair); }
.hc-pop li { border-bottom: 1px solid var(--hair); }
.hc-pop a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 0; color: var(--t1); font-size: 15px; font-weight: 500; }
.hc-pop a svg { flex: none; color: var(--t3-text); }
.hc-pop a:hover span { color: var(--yellow); }
.hc-all { margin: 12px 0 0; font-size: 14px; }
.hc-all a { color: var(--t2); }
.hc-all a:hover { color: var(--t1); }

.hc-cols { display: grid; grid-template-columns: 1fr; gap: 20px; padding-top: 16px; }
.hc-rail .overline { margin: 8px 0 12px; }
.hc-topics { display: flex; gap: 0 18px; overflow-x: auto; margin: 0; scrollbar-width: none; }
.hc-topics a { display: flex; align-items: center; gap: 8px; flex: none; min-height: 40px; color: var(--t2); font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; }
.hc-topics a small { color: var(--t3-text); font-size: 13px; font-weight: 500; }
.hc-topics a:hover { color: var(--t1); }
.hc-topics a[aria-current] { color: var(--t1); font-weight: 600; border-bottom-color: var(--yellow); }
.hc-contact { margin-top: 28px; padding: 20px; border: 1px solid var(--hair); border-radius: 10px; }
.hc-contact b { display: block; color: var(--t1); font-size: 16px; }
.hc-contact p { margin: 6px 0 14px; color: var(--t2); font-size: 14px; line-height: 1.5; }
.hc-results .hc-contact { max-width: 640px; }
.hc-chosen { display: flex; align-items: baseline; gap: 10px; min-height: 40px; margin: 0; color: var(--t1); font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--hair); }
.hc-chosen span { color: var(--t3-text); font-weight: 500; font-size: 14px; }
.hc-list { display: grid; grid-template-columns: 1fr; column-gap: 40px; margin: 0; padding: 0; list-style: none; }
.hc-list li { border-bottom: 1px solid var(--hair); }
.hc-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; color: var(--t1); }
.hc-row b { font-size: 16px; font-weight: 600; }
.hc-row span { color: var(--t2); font-size: 14px; line-height: 1.5; }
.hc-row small { color: var(--t3-text); font-size: 13px; }
.hc-row:hover b { color: var(--yellow); }
.hc-empty { max-width: 640px; padding: 28px 0 4px; }
.hc-empty b { color: var(--t1); font-size: 18px; }
.hc-empty p { margin: 8px 0 0; color: var(--t2); font-size: 15px; line-height: 1.55; }
.hc-empty-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px !important; }
.hc-empty + .hc-contact { display: none; }
@media (max-width: 640px) {
  .hc-landing .hc-hero { padding: 28px 0 28px; }
  .hc-hero h1 { font-size: 28px; }
  .hc-ask { min-height: 54px; padding-left: 14px; }
  .hc-ask input { font-size: 16px; }
  .hc-ask .btn { display: none; }
  .hc-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hc-card { padding: 16px 14px; }
  .hc-card span { display: none; }
}
@media (min-width: 960px) {
  .hc-landing .hc-hero { padding: 64px 0 48px; }
  .hc-landing .hc-hero h1 { font-size: 44px; }
  .hc-land { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; padding-top: 40px; }
  .hc-aside { position: sticky; top: 88px; align-self: start; }
  .hc-cols { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; }
  .hc-rail { position: sticky; top: 88px; align-self: start; }
  .hc-topics { flex-direction: column; overflow: visible; }
  .hc-topics a { justify-content: space-between; min-height: 36px; padding: 0 0 0 12px; border-bottom: 0; border-left: 2px solid var(--hair); }
  .hc-topics a[aria-current] { border-left-color: var(--yellow); }
}
@media (min-width: 1440px) {
  .hc-land { grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; }
  .hc-results .hc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 2100px) {
  .hc-land { grid-template-columns: minmax(0, 1fr) 480px; }
  .hc-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .hc-results .hc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* New Conversation categories and suggested articles. */
.sup-cats { margin: 8px 0 0; }
.sup-picked { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.sup-picked b { color: var(--t1); font-size: 16px; }
.sup-picked a { color: var(--t2); font-size: 14px; font-weight: 600; }
.sup-suggest { margin: 4px 0 8px; }
.sup-suggest .overline { margin: 12px 0 4px; }
.sup-context { margin: 0; color: var(--t3-text); font-size: 13px; }
.sup-cat { color: var(--t2); font-size: 13px; font-weight: 500; }


/* Model pages: /makes/:make/:model. The Add This Bike to Your Garage row sits under the head;
   specs fill the left column, recalls, maintenance and mods the right. */
.mmodel-years { margin-top: 4px; color: var(--t3-text); font-size: 14px; }
.mcta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.mcta form { display: inline-flex; margin: 0; }
.mcta .mcta-year { align-items: center; gap: 10px; margin-left: auto; }
.mcta-year .overline { margin: 0; }
.mcta-year select { min-height: 44px; }
.is-jump .mcta-year .btn { display: none; }
.mspec-h { margin: 18px 0 8px; }
.mnote { color: var(--t2); font-size: 14px; line-height: 1.5; margin: 0 0 20px; }
.mside > div { margin-bottom: 28px; }
.mside .mlist { border-top: 1px solid var(--hair); }
.mside .mfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mside .row-tight > span, .mmake-extra .row-tight > span { flex: 1 1 auto; min-width: 0; color: var(--t1); }
a.row-tight.is-on > span, a.row-tight:hover > span { color: var(--yellow); }
.mrecall-years { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.mrecall-years a { color: var(--t2); font-size: 15px; }
.mrecall-years a b { color: var(--red); font-weight: 600; margin-left: 4px; }
.mrecall-years a:hover { color: var(--yellow); }
.mcta .mcta-year.filter-bar { margin: 0 0 0 auto; flex-wrap: nowrap; }
.mposts, .mrelated, .mmodels-all, .mmake-extra { margin-top: 40px; }
.mposts .post { max-width: 760px; }
.mmodel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 32px; border-top: 1px solid var(--hair); }
.mmodel-grid a { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--hair); color: var(--t1); min-width: 0; }
.mmodel-grid a:hover b { color: var(--yellow); }
.mmodel-grid b { font-size: 16px; font-weight: 600; }
.mmodel-make { color: var(--t3-text); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mmodel-meta { color: var(--t3-text); font-size: 14px; }
.mnext { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 16px 0; margin-top: 16px; border-top: 1px solid var(--yellow-line); border-bottom: 1px solid var(--hair); }
.mnext p { margin: 0 auto 0 0; color: var(--t1); font-weight: 600; }
@media (min-width: 1081px) {
  .mside .mfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .mcta .mcta-year { margin-left: 0; width: 100%; }
}
.mnext form { display: inline-flex; margin: 0; }
.filter-bar .mcta-join { margin-left: auto; }
.mjoin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 20px; padding-bottom: 20px; margin-top: 32px; border-top: 1px solid var(--hair); }
.mjoin p { margin: 0 auto 0 0; color: var(--t1); font-weight: 600; }
/* Upkeep: the Maintenance panel, the meter form, recall actions, the service record and /tools. */
.upkeep-recall { margin: 0 0 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upkeep-recall a { color: var(--t1); font-weight: 600; font-size: 14px; }
.upkeep-list { margin-bottom: 16px; }
.upkeep-start { margin: 0 0 16px; }
.meter-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 0 0 16px; }
.meter-form .field { margin-bottom: 0; }
.meter-form .btn { min-height: 46px; }
@media (max-width: 560px) { .meter-form { grid-template-columns: 1fr 1fr; } .meter-form .btn { grid-column: 1 / -1; } }
.panel-foot-links { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-foot-links a { color: var(--t2); font-weight: 600; }
.panel-foot-links a:hover { color: var(--t1); }
.recall-actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.recall-actions form, .mrow-meta form { margin: 0; }
.btn-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.record-panel .actions { margin-bottom: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.field-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .field-row-3 { grid-template-columns: 1fr; } }
.tools-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.tools-list li { border-bottom: 1px solid var(--hair); }
.tools-list a { display: block; padding: 20px 0; color: var(--t1); }
.tools-list a:hover .tools-name { color: var(--yellow); }
.tools-name { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.tools-list p { color: var(--t2); margin: 0; max-width: 72ch; line-height: 1.5; }
.tool-split { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 960px) { .tool-split { grid-template-columns: 1fr; gap: 24px; } }
.tool-form .field-row { grid-template-columns: 1fr; }
.tool-form .field select { width: 100%; min-height: 46px; background: var(--carbon); border: 1px solid var(--hair); border-radius: 8px; color: var(--t1); font: inherit; font-size: 16px; padding: 10px 12px; }
.tool-form .field select:disabled { color: var(--t3-text); }
.tool-form > .btn { width: 100%; justify-content: center; min-height: 46px; }
.tool-points { list-style: none; margin: 20px 0 0; padding: 0; color: var(--t2); font-size: 14px; line-height: 1.5; }
.tool-points li { border-top: 1px solid var(--hair); padding: 10px 0; }
.tool-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); padding-bottom: 16px; }
.tool-head h2 { font-size: 28px; margin: 4px 0 0; letter-spacing: -0.01em; }
.tool-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); column-gap: 32px; }
.tool-rows li { border-bottom: 1px solid var(--hair); padding: 16px 0; }
.tool-row-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.tool-row-top b { font-size: 16px; }
.tool-row-top span { color: var(--yellow); font-weight: 600; font-size: 14px; white-space: nowrap; }
.tool-rows .mrow-notes { margin: 4px 0 0; }
.tool-specs { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; font-size: 13px; }
.tool-specs dt { display: inline; color: var(--t3-text); }
.tool-specs dd { display: inline; margin: 0 0 0 4px; color: var(--t1); }
.tool-basis { color: var(--t3-text); font-size: 14px; line-height: 1.5; margin: 16px 0 0; max-width: 80ch; }
.tool-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 20px 0; margin-top: 24px; }
.tool-cta p { margin: 0; color: var(--t2); max-width: 64ch; line-height: 1.5; }
.tool-cta b { color: var(--t1); display: block; font-size: 18px; margin-bottom: 4px; }
.garage-upkeep { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; font-size: 13px; color: var(--t2); }
.garage-upkeep a { color: var(--t2); }
.garage-upkeep a:hover { color: var(--t1); }

/* Make page: one screen. The brand up top, the models as photo tiles, then the riders' bikes
   with recalls and mods in a rail beside them on wide screens. */
.mkp-head { padding-top: 8px; }
.mkp-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-top: 8px; }
.mkp-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.mkp-name h1 { margin: 2px 0 0; }
.mkp-facts { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 6px 0 0; color: var(--t2); font-size: 15px; }
.mkp-facts > * + *::before { content: "\00b7"; margin: 0 10px; color: var(--t3-text); }
.mkp-facts a { color: var(--t2); }
.mkp-facts a:hover { color: var(--yellow); }
.mkp-stats { display: flex; gap: 40px; flex: none; }
@media (min-width: 1100px) { .mkp-top { flex-wrap: nowrap; } .mkp-id { flex: 1 1 auto; } }
.mkp-stats .stat { align-items: flex-start; text-align: left; }
.mkp-story { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
.mkp-story-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 48px; }
.mkp-story-cols .overline { margin: 0 0 6px; }
.mkp-story-cols .mtext { margin: 0; max-width: 80ch; }
@media (min-width: 1100px) { .mkp-story-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mkp-body { padding-top: 36px; }
.mkp-models { margin-bottom: 40px; }
.mkp-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px 16px; }
.mkp-tile { display: flex; flex-direction: column; gap: 2px; color: var(--t1); min-width: 0; }
.mkp-ph { display: block; aspect-ratio: 4 / 3; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; background: var(--carbon); margin-bottom: 8px; }
.mkp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.mkp-tile:hover .mkp-ph img { transform: scale(1.03); }
.mkp-tile b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkp-tile:hover b, .mkp-tile.is-on b { color: var(--yellow); }
.mkp-tile.is-on .mkp-ph { border-color: var(--yellow-line); }
.mkp-line { color: var(--t3-text); font-size: 13px; line-height: 1.4; }
.mkp-count { color: var(--t2); font-size: 13px; font-weight: 600; }
.mkp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1200px) { .mkp-main.has-rail { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (min-width: 1900px) { .mkp-main.has-rail { grid-template-columns: minmax(0, 1fr) 400px; } }
.mkp-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 14px; }
.mkp-bar h2 { margin: 0; }
.mkp-filter { margin: 0; }
.mkp-filter select { min-width: 150px; }
.mkp-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.mkp-rail > div + div { margin-top: 32px; }
@media (max-width: 720px) {
  .mkp-top { align-items: flex-start; }
  .mkp-facts { flex-direction: column; }
  .mkp-facts > * + *::before { content: none; }
  .mkp-stats { gap: 28px; }
  .mkp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .mkp-filter { width: 100%; }
  .mkp-filter select { flex: 1 1 0; min-width: 0; }
}

/* Maintenance tool: popular bikes before a pick. */
.tool-picks-lede { color: var(--t2); margin: 0 0 16px; }
.tool-picks { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* ---- Download: the pitch beside real app screens, then one row per part of the app ---- */
.dl-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 56px; }
.dl-hero h1 { margin: 12px 0 16px; }
.dl-qr { display: flex; align-items: center; gap: 18px; margin-top: 32px; padding: 16px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); max-width: 520px; }
.dl-qr-code { flex: none; width: 112px; height: 112px; padding: 6px; background: #fff; border-radius: 8px; }
.dl-qr-code svg { display: block; width: 100%; height: 100%; }
.dl-qr-h { font-weight: 700; font-size: 16px; margin: 0 0 4px; }
.dl-qr-p { color: var(--t2); font-size: 14px; margin: 0; }
.dl-facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; max-width: 720px; }
.dl-facts li { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 1px solid var(--hair); }
.dl-facts b { font-size: 15px; }
.dl-facts span { color: var(--t2); font-size: 13px; }
.dl-screens { display: flex; justify-content: center; align-items: flex-start; gap: 28px; }
.dl-phone { width: min(280px, 42%); aspect-ratio: 603 / 1311; padding: 8px; background: #050506; border: 1px solid var(--slate); border-radius: 40px; }
.dl-phone img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 32px; background: var(--carbon); }
.dl-phone-low { margin-top: 72px; }
.dl-parts { padding-bottom: 72px; }
.dl-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--hair); }
.dl-part { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 22px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--hair); }
.dl-shot { aspect-ratio: 603 / 1311; padding: 4px; background: #050506; border: 1px solid var(--slate); border-radius: 20px; }
.dl-shot img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 16px; background: var(--carbon); }
.dl-txt h2 { font-size: 20px; margin: 6px 0 8px; }
.dl-txt p:not(.overline) { color: var(--t2); margin: 0; }
@media (min-width: 1900px) {
  .dl-phone { width: min(320px, 42%); }
  .dl-part { grid-template-columns: 160px minmax(0, 1fr); }
}
@media (max-width: 1200px) { .dl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .dl-hero { grid-template-columns: minmax(0, 1fr); padding-top: 36px; gap: 36px; }
  .dl-qr { display: none; }
  .dl-screens { gap: 16px; }
  .dl-phone-low { margin-top: 40px; }
  .dl-grid { grid-template-columns: minmax(0, 1fr); }
  .dl-part { grid-template-columns: 104px minmax(0, 1fr); }
}
@media (max-width: 560px) { .dl-facts { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* Policies, Contact Us and Help Center articles: one layout (templates/_doc.html), the same
   classes as the marketing site draws in its own look (web/marketing/css/page.css).
   Breadcrumbs, title, date, In Short, a sticky On This Page list that folds into a box on
   phones, the full text, then Other Policies and Still Need Help on the right. */
.doc { padding-bottom: 32px; }
.doc-head { padding-bottom: 28px; border-bottom: 1px solid var(--hair); }
.doc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 20px; color: var(--t3-text); font-size: 14px; }
.doc-crumbs a { color: var(--t2); }
.doc-crumbs a:hover { color: var(--t1); }
.doc-crumbs [aria-current] { color: var(--t3-text); }
.doc-eyebrow { margin: 0 0 10px; color: var(--yellow); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.doc-head h1 { font-size: 44px; }
.doc-lede { max-width: 44em; margin-top: 14px; color: var(--t2); font-size: 19px; line-height: 1.5; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 16px; color: var(--t3-text); font-size: 14px; }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 32px; }
.doc-toc { border: 1px solid var(--hair); border-radius: 10px; background: var(--carbon); }
.doc-toc summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; color: var(--t1); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.doc-toc summary::-webkit-details-marker { display: none; }
.doc-toc summary svg { color: var(--t3-text); transition: transform 0.15s; }
.doc-toc[open] summary svg { transform: rotate(180deg); }
.doc-toc ol { padding: 0 16px 12px; }
.doc-toc a { display: block; padding: 7px 0 7px 12px; border-left: 2px solid var(--hair); color: var(--t2); font-size: 15px; line-height: 1.35; }
.doc-toc a:hover { color: var(--t1); }
.doc-toc a[aria-current] { color: var(--t1); border-left-color: var(--yellow); }
.doc-toc .doc-toc-sub a { padding-left: 24px; font-size: 14px; }
.doc-main { min-width: 0; }
.doc-short { margin-bottom: 40px; padding: 22px 24px; border: 1px solid var(--hair); border-radius: 12px; background: var(--carbon); }
.doc-short h2 { margin: 0 0 12px; color: var(--t3-text); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.doc-short li { position: relative; padding: 10px 0 10px 26px; border-top: 1px solid var(--hair); color: var(--t1); font-size: 17px; line-height: 1.5; }
.doc-short li:first-child { border-top: 0; padding-top: 0; }
.doc-short li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 11px; height: 6px; border-left: 1.6px solid var(--yellow); border-bottom: 1.6px solid var(--yellow); transform: rotate(-45deg); }
.doc-short li:first-child::before { top: 0.4em; }
.doc-short p { margin-top: 12px; color: var(--t3-text); font-size: 14px; }
.doc-body { max-width: 760px; color: var(--t2); font-size: 17px; line-height: 1.7; }
.doc-body > * + * { margin-top: 1.1em; }
.doc-body h2 { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--hair); color: var(--t1); font-size: 26px; scroll-margin-top: 88px; }
.doc-body > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-body h3 { margin-top: 32px; color: var(--t1); font-size: 19px; scroll-margin-top: 88px; }
.doc-body h4 { margin-top: 24px; color: var(--t1); font-size: 17px; }
.doc-body h2 + *, .doc-body h3 + *, .doc-body h4 + * { margin-top: 12px; }
.doc-body strong { color: var(--t1); font-weight: 600; }
.doc-body a { color: var(--yellow); text-decoration: underline; text-decoration-color: var(--yellow-line); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc-body ul, .doc-body ol { padding-left: 1.3em; }
.doc-body ul { list-style: disc; }
.doc-body ol { list-style: decimal; }
.doc-body li + li { margin-top: 6px; }
.doc-body li::marker { color: var(--t3-text); }
.doc-body blockquote { margin: 28px 0; padding: 18px 20px; border: 1px solid var(--hair); border-left: 2px solid var(--yellow-line); border-radius: 0 10px 10px 0; background: var(--carbon); color: var(--t2); }
.doc-body blockquote > * + * { margin-top: 10px; }
.doc-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.doc-body th, .doc-body td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; }
.doc-body th { color: var(--t3-text); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.doc-body img { max-width: 100%; height: auto; border-radius: 10px; }
.doc-body code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--carbon); padding: 2px 6px; border-radius: 4px; }
.doc-body hr { border: 0; border-top: 1px solid var(--hair); }
.doc-side { min-width: 0; }
.doc-side-title { margin-bottom: 4px; color: var(--t3-text); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.doc-links li { border-bottom: 1px solid var(--hair); }
.doc-links a { display: grid; gap: 2px; padding: 12px 0; }
.doc-links b { color: var(--t1); font-size: 15px; font-weight: 600; }
.doc-links span { color: var(--t3-text); font-size: 14px; line-height: 1.45; }
.doc-links a:hover b { color: var(--yellow); }
.doc-help { display: grid; gap: 10px; margin-top: 32px; padding: 20px; border: 1px solid var(--hair); border-radius: 12px; }
.doc-help b { color: var(--t1); font-size: 17px; }
.doc-help p { color: var(--t2); font-size: 15px; }
.doc-help .btn { justify-self: start; }
.doc-help-links { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-feedback { max-width: 760px; margin-top: 48px; padding: 18px 20px; border: 1px solid var(--hair); border-radius: 12px; }
.doc-feedback form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.doc-feedback b { color: var(--t1); font-size: 16px; }
.doc-feedback-btns { display: flex; gap: 8px; }
.doc-feedback-btns .btn { min-width: 72px; justify-content: center; }
.doc-feedback p { color: var(--t2); }
@media (min-width: 1080px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
  .doc-grid.has-toc { grid-template-columns: 240px minmax(0, 1fr) 320px; }
  .doc-toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 112px); overflow: auto; border: 0; border-radius: 0; background: none; }
  .doc-toc summary { min-height: 0; padding: 0 0 12px; color: var(--t3-text); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; pointer-events: none; }
  .doc-toc summary svg { display: none; }
  .doc-toc ol { padding: 0; }
  .doc-side { position: sticky; top: 88px; align-self: start; }
}
@media (min-width: 1440px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 72px; }
  .doc-grid.has-toc { grid-template-columns: 260px minmax(0, 1fr) 360px; }
  .doc-body, .doc-feedback { max-width: 800px; }
}
@media (max-width: 720px) {
  .doc-head h1 { font-size: 34px; }
  .doc-lede { font-size: 17px; }
  .doc-short { padding: 18px; }
}

/* The Policies page (templates/_policies.html), one quiet screen: title, lede, a search
   across every policy with two plain links under it, a flat hairline row per document, then
   What Matters Most. The marketing site draws the same classes in its road-sign look
   (web/marketing/css/page.css). */
.pol { padding-bottom: 48px; }
.pol-head { padding-bottom: 32px; border-bottom: 1px solid var(--hair); }
.pol-head h1 { font-size: 56px; letter-spacing: -0.03em; }
.pol-lede { max-width: 36em; margin-top: 14px; color: var(--t2); font-size: 19px; line-height: 1.5; }
.pol-search { display: flex; align-items: center; gap: 12px; max-width: 640px; min-height: 56px; margin: 28px 0 0; padding: 0 18px; background: var(--carbon); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; color: var(--t3-text); }
.pol-search[hidden] { display: none; }
.pol-search:focus-within { border-color: var(--yellow-line); color: var(--t2); }
.pol-search svg { flex: none; }
.pol-search input { flex: 1; min-width: 0; padding: 14px 0; background: none; border: 0; outline: none; color: var(--t1); font: inherit; font-size: 17px; }
.pol-search input::placeholder { color: var(--t3-text); }
.pol-search input::-webkit-search-cancel-button { display: none; }
.pol-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.pol-links a { color: var(--t2); }
.pol-links a:hover { color: var(--yellow); }

.pol-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
.pol-tiles[hidden] { display: none; }
.pol-tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 16px; min-width: 0; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.pol-tile h2 { font-size: 20px; letter-spacing: -0.01em; }
.pol-tile h2 a { color: var(--t1); }
.pol-tile h2 a::after { content: ""; position: absolute; inset: 0; }
.pol-tile h2 a:focus-visible { outline: 0; }
.pol-tile:focus-within h2 a, .pol-tile:hover h2 a { color: var(--yellow); }
.pol-sum { margin-top: 6px; color: var(--t2); font-size: 15px; line-height: 1.5; }
.pol-foot { margin-top: 10px; color: var(--t3-text); font-size: 13px; }
.pol-foot i { margin: 0 8px; font-style: normal; }
.pol-go { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--t3-text); }
.pol-tile:hover .pol-go { color: var(--t1); }

.pol-results { padding-top: 32px; }
.pol-results[hidden] { display: none; }
.pol-count { color: var(--t2); font-size: 15px; }
.pol-hits { margin-top: 12px; border-top: 1px solid var(--hair); }
.pol-hits li { border-bottom: 1px solid var(--hair); }
.pol-hits a { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: baseline; gap: 4px 24px; padding: 16px 0; }
.pol-hits small { color: var(--t3-text); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.pol-hits span { display: grid; gap: 4px; min-width: 0; }
.pol-hits b { color: var(--t1); font-size: 17px; font-weight: 600; }
.pol-hits em { color: var(--t2); font-size: 15px; font-style: normal; line-height: 1.5; }
.pol-hits mark { padding: 0 2px; border-radius: 3px; background: var(--yellow-bg); color: var(--t1); }
.pol-hits svg { align-self: center; color: var(--t3-text); }
.pol-hits a:hover b { color: var(--yellow); }
.pol-hits a:hover svg { color: var(--t1); }
.pol-none { padding: 16px 0; color: var(--t2); }
.pol-none a { color: var(--yellow); }

.pol-promises { margin-top: 48px; }
.pol-label { color: var(--t3-text); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.pol-promises ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; margin-top: 4px; }
.pol-promises li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.pol-promises b { color: var(--t1); font-size: 16px; font-weight: 600; line-height: 1.35; }
.pol-promises span { color: var(--t2); font-size: 15px; line-height: 1.5; }
.pol-note { margin-top: 16px; color: var(--t3-text); font-size: 13px; }

@media (min-width: 680px) {
  .pol-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pol-promises ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .pol-promises ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pol-promises li { padding: 20px 0; }
}
@media (min-width: 1500px) {
  .pol-head h1 { font-size: 64px; }
  .pol-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 64px; }
  .pol-promises ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 28px; }
  .pol-promises li { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 720px) {
  .pol-head h1 { font-size: 40px; }
  .pol-lede { font-size: 17px; }
  .pol-tile { padding: 18px 0; }
  .pol-tile h2 { font-size: 18px; }
  .pol-hits a { grid-template-columns: minmax(0, 1fr) auto; }
  .pol-hits small { grid-column: 1; }
  .pol-hits span { grid-column: 1; }
  .pol-hits svg { grid-column: 2; grid-row: 1 / span 2; }
}

/* Footer: the shared columns from src/web/footer.rs. */
.foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(6, minmax(0, 1fr)); gap: 32px 24px; }
.foot-grid a[aria-current] { color: var(--t1); }
.foot-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (max-width: 1280px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
/* Field edges (A1): every text field, select and search box, in pages, menus and the
   console, shows a 3:1 edge against its fill and the page. Focus keeps its yellow line;
   controls drawn without a border keep none. */
html :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="submit"], [type="button"], [type="color"], [type="image"], [type="reset"]), select, textarea):not(:focus) { border-color: var(--field-line); }
html :is(.top-search, .search-pill, .rx-search, .dx-search):not(:focus-within) { border-color: var(--field-line); }