/*
 * Rider map — warm paper background, apple-green primary (Apple's system
 * green; --primary-text is its darker, readable-on-white variant for links
 * and coloured text), Inter body + Fraunces display.
 */
:root {
  --background: oklch(0.975 0.012 85);
  --foreground: oklch(0.22 0.02 55);
  --card: oklch(0.99 0.008 85);
  --primary: #34c759;
  --primary-text: #248a3d;
  --primary-foreground: #fff;
  --secondary: oklch(0.92 0.025 80);
  --muted-foreground: oklch(0.48 0.025 60);
  --border: oklch(0.88 0.02 80);
  --ring: #34c759;
  --green: #22c55e;
  --radius: 0.375rem;
  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rm { position: fixed; inset: 0; overflow: hidden; }
/* z-index 0 makes the map its own stacking layer, so rider pins (and their
   z-indexes) always stay beneath the floating panels. */
.rm-map { position: absolute; inset: 0; z-index: 0; }

/* Loading / empty message */
.rm-status {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  padding: 6px 12px; border-radius: 9999px; background: var(--card); box-shadow: var(--shadow);
  font-size: 13px; color: var(--muted-foreground);
}
.rm-status-loading::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px;
  border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%;
  animation: rm-spin 0.8s linear infinite;
}
@keyframes rm-spin { to { transform: rotate(360deg); } }

/* Floating panels */
.rm-panel, .rm-basemap {
  position: absolute; top: 16px; z-index: 10;
  border: 1px solid var(--border); background: oklch(0.975 0.012 85 / 0.9);
  box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rm-panel {
  left: 16px; right: 80px; max-width: 24rem;
  display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 0.5rem;
}
.rm-topright { position: absolute; top: 16px; right: 16px; z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rm-topright .rm-basemap { position: static; }
.rm-basemap {
  right: 16px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9999px;
  color: var(--muted-foreground);
}

/* Search bar */
.rm-search { position: relative; }
.rm-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.rm-input {
  width: 100%; height: 36px; padding: 4px 64px 4px 32px;
  border: 1px solid var(--border); border-radius: var(--radius); background: transparent;
  font: inherit; font-size: 14px; color: var(--foreground); outline: none;
}
.rm-input::placeholder { color: var(--muted-foreground); }
.rm-input:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 3px rgb(52 199 89 / 0.25); }
.rm-search-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
.rm-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: 0; border-radius: var(--radius); background: none; color: var(--muted-foreground); cursor: pointer;
}
.rm-icon-btn:hover { color: var(--foreground); background: var(--secondary); }
.rm-country-btn.rm-picker-selected { background: var(--secondary); font-size: 16px; line-height: 1; }
.rm-picker { position: relative; }

/* Country dropdown */
.rm-popover {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 16rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  overflow: hidden;
}
.rm-popover-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.rm-popover-search input { flex: 1; height: 40px; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--foreground); }
.rm-options { max-height: 300px; overflow-y: auto; padding: 4px; }
.rm-option {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 6px 8px;
  border: 0; border-radius: calc(var(--radius) - 2px); background: none; text-align: left; font-size: 14px; cursor: pointer;
}
.rm-option[data-highlighted="true"] { background: var(--secondary); }
.rm-option-flag { font-size: 16px; line-height: 1; }
.rm-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-option-count { font-size: 12px; color: var(--muted-foreground); }
.rm-empty { padding: 24px 8px; text-align: center; font-size: 14px; }

/* Row under the search */
.rm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }

/* Switch (shadcn look) */
.rm-switch {
  position: relative; width: 32px; height: 18px; padding: 0; flex-shrink: 0;
  border: 0; border-radius: 9999px; background: var(--border); cursor: pointer; transition: background 0.15s;
}
.rm-switch span {
  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--background); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 0.15s;
}
.rm-switch[aria-checked="true"] { background: var(--primary); }
.rm-switch[aria-checked="true"] span { transform: translateX(14px); }
.rm-switch:focus-visible, .rm-icon-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Avatar markers */
.rm-pin { position: relative; width: 0; height: 0; cursor: pointer; }
.rm-pin-box { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.rm-pin[data-selected] .rm-pin-box { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45)); }
.rm-pin-img {
  position: relative; display: block; width: 100%; height: 100%; border-radius: 9999px; object-fit: cover;
  box-shadow: var(--shadow);
}
.rm-pin-active { box-shadow: 0 0 0 2px var(--green), var(--shadow); }
.rm-pin-home { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.8), var(--shadow); opacity: 0.9; filter: grayscale(0.35); }
.rm-fallback { display: flex; align-items: center; justify-content: center; line-height: 1; }
.rm-pin-halo {
  position: absolute; inset: 0; border: 2px solid #4ade80; border-radius: 9999px; pointer-events: none;
  animation: rm-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes rm-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.rm-pin-flag {
  position: absolute; right: -3px; bottom: -3px; display: flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); line-height: 1;
}

/* Hover popup ("liquid glass", always dark) */
.wp-avatar-popup { z-index: 10000; }
.wp-avatar-popup .maplibregl-popup-tip { display: none; }
.wp-avatar-popup .maplibregl-popup-content {
  padding: 7px 9px; color: #fff; border-radius: 10px;
  background: color-mix(in oklch, black 68%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid color-mix(in oklch, white 22%, transparent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 color-mix(in oklch, white 14%, transparent);
}
.rm-popup {
  display: flex; align-items: center; gap: 8px; min-width: 150px; max-width: 220px; margin: -7px -9px; padding: 7px 9px;
  border: 0; border-radius: 10px; background: none; color: #fff; font-family: var(--font-sans); line-height: 1.3;
  text-align: left; cursor: pointer; transition: background 0.15s;
}
.rm-popup:hover, .rm-popup:focus-visible { background: rgb(255 255 255 / 0.12); outline: none; }
.rm-popup-thumb { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9999px; object-fit: cover; font-size: 14px; }
.rm-popup-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rm-popup-name, .rm-popup-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-popup-name { font-weight: 700; font-size: 12px; }
.rm-popup-meta { margin-top: 1px; font-size: 10.5px; color: rgb(255 255 255 / 0.7); }
.rm-popup-chevron { flex-shrink: 0; font-size: 20px; line-height: 1; color: rgb(255 255 255 / 0.6); transition: transform 0.15s, color 0.15s; }
.rm-popup:hover .rm-popup-chevron { transform: translateX(2px); color: #4ade80; }

/* Compact attribution */
.wp-compact-attrib {
  display: flex; align-items: center; padding: 2px 4px; border-radius: 12px;
  background: oklch(0.98 0.01 85 / 0.85) !important; font-family: var(--font-sans); font-size: 10px;
}
.wp-attrib-btn {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0;
  border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: var(--foreground);
  font-family: serif; font-weight: 700; font-size: 12px; line-height: 1; cursor: pointer;
}
.wp-attrib-panel { display: none; padding: 0 6px; white-space: nowrap; }
.wp-attrib-panel.wp-attrib-open { display: block; }

/* Left column: search panel, and the selected rider's card right under it */
.rm-left {
  position: absolute; top: 16px; left: 16px; right: 80px; z-index: 10; max-width: 24rem; max-height: calc(100% - 32px);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.rm-left > * { pointer-events: auto; }
.rm-left .rm-panel { position: static; max-width: none; }

/* Selected rider card: floating blurry white card */
.rm-card {
  position: relative; min-height: 0; overflow-y: auto; padding: 14px;
  border: 1px solid rgb(255 255 255 / 0.6); border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 30px -8px rgb(0 0 0 / 0.25);
  opacity: 0; transform: translateY(-6px); transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}
.rm-card.rm-drawer-open { opacity: 1; transform: none; }
.rm-card-body { display: flex; flex-direction: column; gap: 8px; }
.rm-card-header { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.rm-card-avatar { width: 48px; height: 48px; flex-shrink: 0; border-radius: 9999px; }
.rm-card-avatar-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green); }
.rm-card-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 9999px; object-fit: cover; font-size: 22px; }
.rm-card-titles { min-width: 0; }
.rm-card-name { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 18px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-card-line { margin-top: 2px; font-size: 13px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-on-road { display: flex; align-items: center; gap: 6px; font-weight: 500; color: #15803d; }
.rm-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--green); animation: rm-pulse 2s infinite; }
@keyframes rm-pulse { 50% { opacity: 0.5; } }
.rm-card-bio {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rm-card-label { margin-top: 2px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.rm-flag-row { display: flex; align-items: center; padding: 2px 0 2px 4px; overflow-x: auto; scrollbar-width: none; }
.rm-flag-bubble {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0;
  margin-left: -4px; border: 2px solid #fff; border-radius: 9999px; background: var(--secondary); font-size: 15px;
}
.rm-flag-bubble:first-child { margin-left: 0; }
.rm-journeys { display: flex; flex-direction: column; gap: 4px; }
.rm-journey {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 10px;
  border-radius: var(--radius); background: rgb(255 255 255 / 0.6); color: inherit; text-decoration: none;
}
.rm-journey-meta { font-size: 12px; color: var(--muted-foreground); }
.rm-more {
  align-self: flex-start; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--primary-text);
}
.rm-more:hover { text-decoration: underline; }
.rm-journey:hover .rm-journey-title { color: var(--primary-text); }
.rm-journey-title { min-width: 0; font-family: var(--font-serif); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phones & tablets: the card becomes a compact preview docked at the bottom */
@media (max-width: 1023px) {
  .rm-card {
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 30;
    max-width: 32rem; margin: 0 auto; padding: 12px; transform: translateY(16px);
  }
  .rm-preview { gap: 6px; }
  .rm-preview .rm-card-avatar { width: 40px; height: 40px; }
  .rm-preview .rm-card-name { font-size: 16px; }
  .rm-preview .rm-card-label { display: none; }
  .rm-preview }

/* Account button (top right, above the basemap switch) */
.rm-account {
  display: flex; align-items: center; gap: 8px; max-width: 220px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--border); border-radius: 9999px; background: oklch(0.975 0.012 85 / 0.9);
  box-shadow: var(--shadow); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--foreground); font-size: 13px; font-weight: 600; text-decoration: none;
}
.rm-account > svg { margin-left: 6px; }
.rm-account span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rm-account:hover { border-color: var(--primary); }
.rm-account-avatar { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9999px; object-fit: cover; font-size: 14px; }

.rm-toast {
  position: absolute; left: 50%; bottom: 24px; z-index: 40; transform: translateX(-50%);
  padding: 8px 14px; border-radius: 9999px; background: var(--foreground); color: var(--background);
  font-size: 13px; box-shadow: var(--shadow); animation: rm-fade 4s forwards;
}
@keyframes rm-fade { 0%, 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* Modal (native <dialog>) */
.rm-modal {
  width: min(28rem, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 24px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 0.75rem; background: var(--background); color: var(--foreground);
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.rm-modal::backdrop { background: rgb(0 0 0 / 0.35); backdrop-filter: blur(2px); }
.rm-modal[open] { animation: rm-pop 0.18s ease-out; }
@keyframes rm-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.rm-modal-close { position: absolute; top: 12px; right: 12px; }
.rm-modal-alt { display: flex; justify-content: center; gap: 16px; margin: 16px 0 0; font-size: 13px; color: var(--muted-foreground); }
.rm-modal-alt a, .rm-link { color: var(--primary-text); font-weight: 600; }
.rm-link { padding: 0; border: 0; background: none; cursor: pointer; font-size: 13px; }
.rm-danger { color: oklch(0.55 0.22 27); }

/* Wizard */
.rm-wizard { display: flex; flex-direction: column; gap: 6px; }
.rm-wizard-head h2 { margin: 0 32px 10px 0; font-family: var(--font-serif); font-size: 22px; font-weight: 600; }
.rm-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.rm-dots span { flex: 1; height: 4px; border-radius: 9999px; background: var(--border); transition: background 0.2s; }
.rm-dots span.rm-dot-done { background: var(--primary); }
.rm-step { display: flex; flex-direction: column; gap: 6px; }
.rm-step h3 { margin: 0 0 4px; font-size: 16px; }
.rm-step h3 small { font-weight: 400; font-size: 12px; color: var(--muted-foreground); }
.rm-step fieldset { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rm-hint { margin: 0 0 6px; font-size: 13px; color: var(--muted-foreground); }
.rm-label { margin-top: 8px; font-size: 13px; font-weight: 600; }
.rm-wizard .rm-input { padding: 4px 12px; }
.rm-field-error { margin: 2px 0 0; font-size: 12px; color: oklch(0.55 0.22 27); }
.rm-wizard-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 16px;
  border: 1px solid transparent; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground);
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.rm-btn:hover { background: rgb(52 199 89 / 0.9); }
.rm-btn-ghost { background: none; color: var(--foreground); margin-right: auto; }
.rm-btn-ghost:hover { background: var(--secondary); }
.rm-btn-outline { background: var(--card); color: var(--foreground); border-color: var(--border); }
.rm-btn-outline:hover { background: var(--secondary); }
.rm-btn:focus-within, .rm-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rm-visually-hidden, .rm-picker-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rm-picker-input { left: 50%; bottom: 0; }

.rm-avatar-pick { display: flex; align-items: center; gap: 16px; }
.rm-avatar-preview-wrap {
  display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex-shrink: 0;
  border: 2px dashed var(--border); border-radius: 9999px; font-size: 30px;
}
.rm-avatar-preview-wrap:has(img:not([src]))::before { content: "🚴"; }
.rm-avatar-preview:not([src]) { display: none; }
.rm-avatar-preview { width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 3px var(--card), var(--shadow); }
.rm-cap { position: relative; cursor: pointer; }
.rm-cap input { position: absolute; opacity: 0; }
.rm-cap img { display: block; width: 56px; height: 56px; border-radius: 9999px; box-shadow: 0 0 0 2px var(--border); transition: transform 0.15s, box-shadow 0.15s; }
.rm-cap:hover img { transform: translateY(-2px); }
.rm-cap input:checked + img { box-shadow: 0 0 0 3px var(--primary); }
.rm-cap input:focus-visible + img { outline: 2px solid var(--ring); outline-offset: 3px; }

.rm-picker-field { display: flex; align-items: center; gap: 8px; height: 36px; text-align: left; cursor: pointer; background: var(--card); }

.rm-picker-field svg { margin-left: auto; color: var(--muted-foreground); }
.rm-placeholder { color: var(--muted-foreground); }
.rm-picker .rm-popover { left: 0; right: auto; }
.rm-search .rm-picker .rm-popover { left: auto; right: 0; }

.rm-choice { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.rm-choice label {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); font-size: 14px; cursor: pointer;
}
.rm-choice label:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.rm-choice input { accent-color: var(--primary); }
.rm-place { position: relative; }
.rm-place-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Just-pinned avatar: drops in with a bounce, then a ripple */
.rm-pin-drop .rm-pin-box { animation: rm-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes rm-drop {
  0% { transform: translate(-50%, -400%) scale(0.4); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.rm-pin-ripple {
  position: absolute; inset: -4px; border: 3px solid var(--primary); border-radius: 9999px; pointer-events: none;
  animation: rm-ripple 1.2s 0.7s ease-out 3 both;
}
@keyframes rm-ripple { from { transform: scale(0.8); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }



/* Wizard: compact avatar row (preview · photo button · three caps) */
.rm-avatar-pick { flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.rm-avatar-pick .rm-avatar-preview-wrap, .rm-avatar-pick .rm-avatar-preview { width: 52px; height: 52px; font-size: 22px; }
.rm-avatar-pick .rm-hint { margin: 0; }
.rm-btn-sm { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.rm-cap img { width: 36px; height: 36px; }

/* Country grid: flag tiles in a panel that expands inside the dialog */
.rm-picker-grid .rm-popover { position: static; width: auto; margin-top: 6px; box-shadow: none; }
.rm-flag-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px;
  max-height: 176px; padding: 6px;
}
.rm-flag-tile {
  display: flex; align-items: center; justify-content: center; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius); background: none; font-size: 22px; cursor: pointer;
}
.rm-flag-tile[data-highlighted="true"] { background: var(--secondary); }
.rm-flag-tile[aria-selected="true"] { border-color: var(--primary); background: rgb(52 199 89 / 0.1); }
.rm-flag-grid .rm-empty { grid-column: 1 / -1; }
.rm-picker-flag-emoji { font-size: 18px; line-height: 1; }

/* Base camp: flag button inline with the city search; the grid wraps below */
.rm-inline-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rm-inline-row > .rm-picker { display: contents; }
.rm-inline-row .rm-popover { order: 1; flex-basis: 100%; margin-top: 0; }
.rm-inline-row .rm-place { flex: 1; min-width: 0; }
.rm-picker-flag { width: auto; flex-shrink: 0; gap: 4px; padding: 0 8px; }
.rm-picker-flag .rm-placeholder { font-size: 16px; }

/* Follow links: network icon + field (+ Paste on phones) */
.rm-link-field { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rm-link-icon { display: flex; flex-shrink: 0; width: 20px; justify-content: center; color: var(--muted-foreground); }
.rm-link-icon svg { width: 20px; height: 20px; }
.rm-link-field:focus-within .rm-link-icon { color: var(--primary-text); }
.rm-link-field .rm-input { flex: 1; min-width: 0; }
.rm-paste {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 36px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); font-size: 13px; cursor: pointer;
}
.rm-touch-only { display: none !important; }
@media (pointer: coarse) { .rm-touch-only { display: revert !important; } .rm-paste.rm-touch-only { display: inline-flex !important; } }

/* Rider card: social links */
.rm-card-links { display: flex; gap: 6px; }
.rm-card-link {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9999px; background: rgb(255 255 255 / 0.7); color: var(--foreground); box-shadow: 0 0 0 1px var(--border);
}
.rm-card-link:hover { color: var(--primary-text); box-shadow: 0 0 0 1px var(--primary); }

/* Right column: vertical map style switch and zoom, stacked under the account */
.rm-topright .rm-basemap, .rm-zoom {
  flex-direction: column; gap: 6px; padding: 8px 6px; border-radius: 9999px;
  border: 1px solid var(--border); background: oklch(0.975 0.012 85 / 0.9); box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.rm-zoom { display: flex; gap: 2px; padding: 4px; }
.rm-topright .rm-basemap, .rm-zoom { width: 40px; align-items: center; }
.rm-switch-vertical { width: 18px; height: 32px; }
.rm-switch-vertical[aria-checked="true"] span { transform: translateY(14px); }
.rm-account-in-search { display: none; }

/* Phones: account moves into the search bar; switch + zoom sit under the search */
@media (max-width: 639px) {
  .rm-left { right: 16px; }
  .rm-account-top { display: none; }
  .rm-account.rm-account-in-search {
    display: flex; width: 28px; height: 28px; max-width: none; padding: 0; margin-left: 2px; justify-content: center;
    border: 0; box-shadow: none; background: none; backdrop-filter: none;
  }
  .rm-account-in-search > span:not(.rm-account-avatar) { display: none; }
  .rm-account-in-search > svg { margin: 0; }
  .rm-account-in-search .rm-account-avatar { width: 26px; height: 26px; font-size: 13px; }
  .rm-search .rm-input { padding-right: 96px; }
  .rm-topright { top: calc(var(--panel-bottom, 140px) + 8px); } /* set by the map controller */
}

/* Top-left panel: white frosted card, Inter throughout, color-coded stats */
.rm-left .rm-panel {
  gap: 10px; padding: 10px; border-radius: 14px; border-color: rgb(255 255 255 / 0.7);
  background: rgb(255 255 255 / 0.78); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.25); font-family: var(--font-sans);
}
.rm-panel .rm-input {
  height: 38px; border: 1px solid transparent; border-radius: 10px; background: oklch(0.95 0.01 80); font-size: 14px;
  transition: background 0.15s, border-color 0.15s;
}
.rm-panel .rm-input:focus-visible { background: #fff; border-color: var(--ring); box-shadow: 0 0 0 3px rgb(52 199 89 / 0.15); }
.rm-panel .rm-row { padding: 0 2px; }

/* Riders in view: a slider of thumbnails (photo, name, country) */
.rm-strip { min-width: 0; padding: 8px 0 0; border-top: 1px solid oklch(0.9 0.015 80); }
.rm-strip-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px; padding: 0 2px 4px; }
.rm-strip-nav { display: flex; gap: 2px; }
.rm-strip-nav[hidden] { display: none; }
.rm-strip-nav .rm-icon-btn { width: 24px; height: 24px; font-size: 16px; line-height: 1; }
.rm-strip-list {
  display: flex; gap: 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  margin: 0 -4px; padding: 2px 4px 4px; overscroll-behavior-x: contain;
}
.rm-strip-list::-webkit-scrollbar { display: none; }
.rm-strip-empty { margin: 6px 2px; font-size: 12.5px; color: var(--muted-foreground); }
.rm-thumb {
  flex: 0 0 72px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 6px 4px;
  border: 0; border-radius: 12px; background: none; font: inherit; text-align: center; cursor: pointer; scroll-snap-align: start;
  transition: background 0.15s;
}
.rm-thumb:hover { background: rgb(255 255 255 / 0.75); }
.rm-thumb:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.rm-thumb[aria-current] { background: #fff; box-shadow: 0 0 0 1.5px var(--primary); }
.rm-thumb-img {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 9999px; object-fit: cover; font-size: 20px; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgb(0 0 0 / 0.2);
}
.rm-thumb-road .rm-thumb-img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green, #16a34a); }
.rm-thumb-name, .rm-thumb-country { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rm-thumb-name { margin-top: 2px; font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--foreground); }
.rm-thumb-country { font-size: 10.5px; line-height: 1.2; color: var(--muted-foreground); }

/* "All · 21 | ● Riding · 9" segmented toggle, continent beside it */
.rm-panel .rm-row { gap: 8px; }
.rm-segment { display: inline-flex; flex-shrink: 0; padding: 3px; border-radius: 10px; background: oklch(0.95 0.01 80); }
.rm-segment button {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--muted-foreground); font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.rm-segment button::after { content: " · " attr(data-count); font-weight: 500; opacity: 0.75; }
.rm-segment button[aria-checked="true"] { background: #fff; color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.rm-segment button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.rm-segment .rm-dot { animation: none; }
.rm-segment button[aria-checked="true"] .rm-dot { animation: rm-pulse 2s infinite; }
.rm-continent { min-width: 0; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Phones: the riders slider becomes a bar docked at the bottom of the screen
   (the panel drops its backdrop blur, which would otherwise trap the fixed bar). */
@media (max-width: 639px) {
  .rm-left .rm-panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(255 255 255 / 0.94); }
  .rm-strip {
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20;
    padding: 6px 8px; border: 1px solid rgb(255 255 255 / 0.7); border-radius: 14px;
    background: rgb(255 255 255 / 0.8); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.3);
  }
  .rm-strip-nav { display: none; }
  .rm:has(.rm-drawer-open) .rm-strip { display: none; }
  .rm .maplibregl-ctrl-bottom-right { bottom: 132px; }
}

/* Rider page */
.rp { max-width: 44rem; min-height: 100%; margin: 0 auto; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 12px; }
body:has(.rp) { overflow-y: auto; background: linear-gradient(oklch(0.95 0.02 80), var(--background) 320px); }
.rp-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-back { font-size: 14px; font-weight: 600; color: var(--foreground); text-decoration: none; }
.rp-back:hover { color: var(--primary-text); }
.rp-actions { display: flex; gap: 8px; }
.rp-actions form { display: contents; }
.rp-card {
  padding: 18px; border: 1px solid rgb(255 255 255 / 0.7); border-radius: 16px;
  background: rgb(255 255 255 / 0.85); box-shadow: 0 10px 30px -14px rgb(0 0 0 / 0.25);
}
.rp-hero { display: flex; align-items: center; gap: 20px; }
.rp-avatar { width: 96px; height: 96px; flex-shrink: 0; border-radius: 9999px; font-size: 40px; }
.rp-hero-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rp-hero h1 { margin: 0; font-family: var(--font-serif); font-size: 28px; font-weight: 600; line-height: 1.15; }
.rp-line { margin: 0; font-size: 14px; color: var(--muted-foreground); }
.rp-line.rm-on-road { color: #15803d; }
.rp-map-link { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--primary-text); text-decoration: none; }
.rp-map-link:hover { text-decoration: underline; }
.rp-bio { margin: 0; font-size: 15px; line-height: 1.6; color: var(--foreground); white-space: pre-line; }
.rp-card h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font-size: 16px; }
.rp-card h2 span { font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.rp .rm-journey { padding: 10px 12px; background: oklch(0.97 0.01 80); }
.rp .rm-journey-title { font-size: 15px; white-space: normal; }
@media (max-width: 639px) {
  .rp-hero { flex-direction: column; text-align: center; }
  .rp-hero-text { align-items: center; }
  .rp-map-link { align-self: center; }
}
a.rm-btn { text-decoration: none; }
.rp-avatar .rm-card-img { font-size: 44px; }

/* Share button + desktop link popover */
.rm-share { position: relative; display: inline-flex; }
.rm-share-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border);
  border-radius: 9999px; background: rgb(255 255 255 / 0.8); font-size: 13px; font-weight: 600; cursor: pointer;
}
.rm-share-btn:hover { border-color: var(--primary); color: var(--primary-text); }
.rm-share-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: flex; gap: 6px; width: 20rem; padding: 8px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.3);
}
.rm-share-pop input {
  flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px;
  background: oklch(0.97 0.01 80); font: inherit; font-size: 13px;
}

/* Rider page: last position mini map, header actions */
.rp-minimap { height: 240px; margin-bottom: 10px; border-radius: 12px; overflow: hidden; }
.rp-minimap-pin {
  width: 44px; height: 44px; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 4px 10px rgb(0 0 0 / 0.3);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.rp-minimap-pin-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--green), 0 4px 10px rgb(0 0 0 / 0.3); }
.rp-h2-action { margin-left: auto; }
.rp-actions .rm-share-pop { left: auto; right: 0; }

/* Journey form */
.rm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rm-two > div { display: flex; flex-direction: column; gap: 6px; }
.rm-textarea { height: auto; padding: 8px 12px; resize: vertical; font: inherit; font-size: 14px; }
.rm-segment-field { align-self: flex-start; }
.rm-segment-field label { position: relative; cursor: pointer; }
.rm-segment-field input { position: absolute; opacity: 0; }
.rm-segment-field span { display: inline-block; padding: 5px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted-foreground); }
.rm-segment-field input:checked + span { background: #fff; color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.rm-segment-field input:focus-visible + span { outline: 2px solid var(--ring); }
.rm-file { align-self: flex-start; }
.rm-file[data-file]:not([data-file=""])::after { content: "· " attr(data-file); font-weight: 400; color: var(--muted-foreground); }
.rm-picker-field [data-country-picker-target="flag"] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Map: numbered bubbles for crowded riders */
.rm-cluster-wrap { z-index: 50; }
.rm-cluster {
  display: flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); padding: 0;
  border: 3px solid #fff; border-radius: 9999px; background: #34c759; color: #fff; cursor: pointer;
  font: 700 14px/1 var(--font-sans); box-shadow: 0 0 0 4px rgb(52 199 89 / 0.25), 0 4px 12px rgb(0 0 0 / 0.3);
  transition: transform 0.12s;
}
.rm-cluster:hover { transform: scale(1.08); }
.rm-cluster-road { box-shadow: 0 0 0 3px var(--green), 0 4px 12px rgb(0 0 0 / 0.3); }

/* Rider card: name links to the page; footer with page link + share */
a.rm-card-name { display: block; color: inherit; text-decoration: none; }
a.rm-card-name:hover { color: var(--primary-text); }
.rm-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; }
.rm-card-page { font-size: 13px; font-weight: 600; color: var(--primary-text); text-decoration: none; }
.rm-card-page:hover { text-decoration: underline; }
.rm-card-footer .rm-share-pop { left: auto; right: 0; top: auto; bottom: calc(100% + 6px); }

/* Faster pin drop to match the quicker camera */
.rm-pin-drop .rm-pin-box { animation-duration: 0.5s; }

/* Admin portal */
body:has(.ad) { overflow-y: auto; }
.ad { max-width: none; margin: 0 auto; padding: 16px 24px 48px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; } /* full width, narrow side margins */
.ad-nav { display: flex; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ad-nav a { color: var(--foreground); text-decoration: none; font-weight: 600; }
.ad-nav a:hover { color: var(--primary-text); }
.ad-nav form { display: contents; }
.ad-spacer { flex: 1; }
.ad-flash { margin: 0; padding: 8px 12px; border-radius: 8px; background: oklch(0.48 0.08 145 / 0.12); color: oklch(0.35 0.08 145); }
.ad-login { max-width: 22rem; margin: 10vh auto 0; padding: 24px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.ad-login h1, .ad-head h1 { margin: 0; font-family: var(--font-serif); font-size: 24px; }
.ad-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ad-head h1 small { font-family: var(--font-sans); font-size: 14px; color: var(--muted-foreground); }
.ad-head > a:not(.rm-btn) { margin-left: auto; color: var(--primary-text); }
.ad-search { margin-left: auto; }
.ad-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ad-stat { display: flex; flex-direction: column; padding: 14px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ad-stat strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.ad-stat span { font-size: 12px; color: var(--muted-foreground); }
.ad-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ad-card { padding: 16px; border-radius: 12px; background: #fff; box-shadow: var(--shadow); }
.ad-card h2 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px; font-size: 16px; }
.ad-line { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.ad-line:hover span { color: var(--primary-text); }
.ad-line small { color: var(--muted-foreground); }
.ad-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.ad-table th, .ad-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.ad-table th { font-size: 12px; color: var(--muted-foreground); background: oklch(0.97 0.01 80); }
.ad-actions { display: flex; gap: 12px; justify-content: flex-end; }
.ad-actions a { color: var(--primary-text); font-weight: 600; }
.ad-actions form { display: contents; }
.ad-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 16px; }
.ad-form > .rm-field-error, .ad-form > footer, .ad-form .ad-field:has(textarea) { grid-column: 1 / -1; }
.ad-field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.ad-field small { font-weight: 400; color: var(--muted-foreground); }
.ad-field-check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 8px; }

/* Journey page: full-screen map, details card on the left, link cards bottom-right */
.jm { position: fixed; inset: 0; }
.jm-map { position: absolute; inset: 0; z-index: 0; }
.jm-map.jm-adding canvas { cursor: crosshair; }
.jm-panel {
  position: absolute; top: 16px; left: 16px; z-index: 10; width: 24rem; max-height: calc(100% - 32px);
  display: flex; flex-direction: column; gap: 8px;
}
.jm-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jm-title { margin: 0; font-family: var(--font-serif); font-size: 22px; line-height: 1.2; }
.jm-meta { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--muted-foreground); }
.jm-description { -webkit-line-clamp: 5; }
.jm-owner { display: flex; gap: 8px; flex-wrap: wrap; }
.jm-owner [aria-pressed="true"] { background: var(--foreground); }
.jm-stops { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.jm-stops li { display: flex; align-items: center; gap: 4px; }
.jm-stops form { display: contents; }
.jm-stop-row {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 6px; border: 0; border-radius: 8px;
  background: none; text-align: left; font-size: 13px; cursor: pointer;
}
.jm-stop-row:hover { background: rgb(255 255 255 / 0.7); }
.jm-stop-row small { color: var(--muted-foreground); }
.jm-stop {
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0;
  border: 2px solid #fff; border-radius: 9999px; background: #34c759; color: #fff;
  font: 700 12px/1 var(--font-sans); box-shadow: 0 2px 6px rgb(0 0 0 / 0.3);
}
.jm-stop-sm { width: 22px; height: 22px; font-size: 11px; box-shadow: none; }
.jm-popup .maplibregl-popup-content { padding: 12px; border-radius: 12px; }
.jm-stop-form { display: flex; flex-direction: column; gap: 6px; }
.jm-stop-form .rm-input { height: 34px; padding: 4px 10px; font-size: 13px; }

.jm-links {
  position: absolute; right: 16px; bottom: 16px; z-index: 10; width: 20rem;
  display: flex; flex-direction: column; gap: 8px;
}
.jm-link {
  display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; color: inherit; text-decoration: none;
  background: rgb(255 255 255 / 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.3);
}
.jm-link:hover { box-shadow: 0 0 0 2px var(--primary), 0 10px 30px -10px rgb(0 0 0 / 0.3); }
.jm-thumb { position: relative; width: 96px; height: 60px; flex-shrink: 0; border-radius: 10px; overflow: hidden; background: oklch(0.95 0.01 80); }
.jm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.jm-thumb-video::after {
  content: "▶"; position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 12px;
}
.jm-thumb-icon { display: flex; align-items: center; justify-content: center; color: var(--primary-text); }
.jm-thumb-icon svg { width: 26px; height: 26px; }
.jm-link-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.jm-link-text small { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--muted-foreground); }
.jm-link-text small svg { width: 12px; height: 12px; }

@media (max-width: 1023px) {
  .jm-panel { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 45dvh; }
  .jm-links { top: 12px; right: 12px; left: 12px; bottom: auto; width: auto; }
  .jm-link { padding: 6px; }
  .jm-thumb { width: 64px; height: 40px; }
}
.ad-tabs { align-self: flex-start; }
.ad-tabs a { padding: 5px 12px; border-radius: 8px; color: var(--muted-foreground); font-weight: 600; font-size: 13px; text-decoration: none; }
.ad-tabs a span { font-weight: 500; opacity: 0.7; }
.ad-tabs a[aria-current="page"] { background: #fff; color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }

/* Journey page: building the route */
.jm-stops li { gap: 2px; }
.jm-stops .sortable-ghost { opacity: 0.4; }
.jm-handle { padding: 4px 2px; color: var(--muted-foreground); cursor: grab; user-select: none; letter-spacing: -2px; }
.jm-stop { cursor: pointer; }
.jm-stop-pending { background: #fff; color: var(--primary-text); border-color: #34c759; font-size: 16px; }
.jm-owner [aria-pressed="true"] { background: var(--green); }
.jm-stop-form-actions { display: flex; justify-content: flex-end; gap: 6px; }
.jm-stop-form-actions .rm-btn-ghost { margin-right: 0; }

/* Links: a 50×50 "+" square that opens the form above it */
.jm-links { align-items: flex-end; }
.jm-links > .jm-link { align-self: stretch; }
.jm-links-edit { position: relative; }
.jm-add-link {
  display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; list-style: none; cursor: pointer;
  border-radius: 14px; background: var(--primary); color: #fff; box-shadow: 0 10px 24px -8px rgb(0 0 0 / 0.45);
  transition: transform 0.12s;
}
.jm-add-link::-webkit-details-marker { display: none; }
.jm-add-link svg { width: 26px; height: 26px; stroke-width: 2.5; }
.jm-add-link:hover { transform: scale(1.05); }
.jm-links-edit[open] .jm-add-link svg { transform: rotate(45deg); }
.jm-links-form {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: 20rem; display: flex; flex-direction: column; gap: 6px;
  padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.35); font-size: 13px;
}
.jm-links-form small { font-weight: 400; color: var(--muted-foreground); }
.jm-links-form .rm-input { height: 34px; padding: 4px 10px; font-size: 13px; }
.jm-links-form .rm-btn { align-self: flex-end; }
@media (max-width: 1023px) {
  .jm-links-form { top: calc(100% + 8px); bottom: auto; width: min(20rem, calc(100vw - 24px)); }
}

/* Journey panel: fixed header, only the stops list scrolls */
.jm-panel { overflow: hidden; }
.jm-panel > * { flex-shrink: 0; }
.jm-panel .jm-stops { flex: 1 1 auto; flex-shrink: 1; min-height: 0; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
.jm-nav-actions { display: flex; align-items: center; gap: 6px; }
.jm-rider {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 12px 3px 3px; border-radius: 9999px;
  background: #fff; box-shadow: 0 0 0 1px var(--border), 0 2px 6px rgb(0 0 0 / 0.08); color: var(--foreground);
  font-size: 13px; font-weight: 600; text-decoration: none; transition: box-shadow 0.15s;
}
.jm-rider:hover { box-shadow: 0 0 0 2px var(--primary), 0 2px 6px rgb(0 0 0 / 0.08); color: var(--primary-text); }
.jm-rider span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jm-rider-avatar { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9999px; object-fit: cover; font-size: 14px; }
.jm-stops-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jm-stop-label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jm-date { flex-shrink: 0; margin-left: auto; font-size: 12px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
input.jm-date {
  height: 26px; padding: 0 4px; border: 1px solid transparent; border-radius: 6px; background: transparent;
  font: inherit; font-size: 12px; color: var(--muted-foreground); cursor: pointer;
}
input.jm-date:hover, input.jm-date:focus { border-color: var(--border); background: #fff; color: var(--foreground); outline: none; }

/* Links: "+" in the top-right corner, cards under it, form opens below */
.jm-links { top: 16px; bottom: auto; }
.jm-links-form { top: calc(100% + 8px); bottom: auto; }

/* Draft / published */
.jm-visibility {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 10px;
  background: oklch(0.48 0.08 145 / 0.1); font-size: 12.5px; font-weight: 600;
}
.jm-visibility form { display: contents; }
.jm-visibility-draft { background: oklch(0.8 0.12 85 / 0.25); }
.rp-draft { display: flex; align-items: center; gap: 8px; }
.rp-draft .rm-journey { flex: 1; min-width: 0; }
.rp-draft form { display: contents; }
.rp-drafts { margin-bottom: 8px; }
.rp-badge { margin-left: 6px; padding: 1px 8px; border-radius: 9999px; background: oklch(0.8 0.12 85 / 0.35); font-family: var(--font-sans); font-size: 11px; font-weight: 700; vertical-align: middle; }

/* Journey map: smaller pins, highlighted stop */
.jm-stop { width: 20px; height: 20px; font-size: 10px; border-width: 1.5px; transition: transform 0.12s, box-shadow 0.12s; }
.jm-stop-active { z-index: 5; transform: scale(1.35); background: var(--foreground); box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgb(52 199 89 / 0.45); }
.jm-stops .jm-stop-sm { width: 20px; height: 20px; font-size: 10px; transform: none; }
.jm-row-active > .jm-stop-row { background: rgb(52 199 89 / 0.12); }
.jm-row-active .jm-stop-sm { background: var(--foreground); }

/* Stop dates: "6 Oct 2025"; for the owner a button over a native date input */
.jm-date-btn { padding: 2px 6px; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.jm-date-btn:hover { background: #fff; color: var(--foreground); box-shadow: 0 0 0 1px var(--border); }
.jm-date-input { width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Stops grouped by country */
.jm-stops-actions { display: flex; align-items: center; gap: 10px; }
.jm-group { border-radius: 8px; }
.jm-group-head {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600;
}
.jm-group-head::-webkit-details-marker { display: none; }
.jm-group-head::before { content: "▸"; color: var(--muted-foreground); transition: transform 0.15s; }
.jm-group[open] > .jm-group-head::before { transform: rotate(90deg); }
.jm-group-head:hover { background: rgb(255 255 255 / 0.7); }
.jm-group-flag { font-size: 16px; line-height: 1; }
.jm-group-range { font-weight: 500; color: var(--muted-foreground); }
.jm-stops-inner { display: flex; flex-direction: column; gap: 2px; margin: 0 0 4px 18px; padding: 0; list-style: none; }
.jm-stops-inner li { display: flex; align-items: center; gap: 2px; }

/* Country flags: instant name tooltip */
.jm-flags { flex-wrap: wrap; overflow: visible; gap: 2px 0; }
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 20;
  padding: 3px 8px; border-radius: 6px; background: var(--foreground); color: #fff; font: 600 11px/1.4 var(--font-sans);
  white-space: nowrap; pointer-events: none;
}

/* Journey map pins are a map layer now; these style the list and the pending pin */
.jm-pending { width: 28px; height: 40px; opacity: 0.75; pointer-events: none; }
.jm-pending svg { width: 100%; height: 100%; }
.jm-stops .jm-kind-start { background: #16a34a; }
.jm-stops .jm-kind-end { background: #111827; }
.jm-stops .jm-kind-last { background: #2563eb; }
.jm-stops .jm-kind-fav { background: #e11d48; }
.jm-fav { flex-shrink: 0; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--muted-foreground); font-size: 15px; line-height: 1; cursor: pointer; }
span.jm-fav { cursor: default; }
.jm-fav-on { color: #e11d48; }
button.jm-fav:hover { color: #e11d48; transform: scale(1.15); }

/* Rider page: ⅓ profile + bio | ⅔ last position (map + flags) + journeys */
.rp-grid { display: grid; gap: 12px; }
.rp-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1024px) {
  .rp { max-width: 76rem; }
  .rp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .rp-col-side { position: sticky; top: 16px; }
  .rp-col-side .rp-hero { flex-direction: column; align-items: flex-start; }
  .rp-minimap { height: 320px; }
}
.rp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rp-card-head h2 { margin: 0; }
.rp-card-head .rp-map-link { flex-shrink: 0; }
.rp-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.rp-flags .rm-flag-bubble { margin-left: 0; }
.rp-flags-count { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.rp-card-head { flex-wrap: wrap; row-gap: 4px; }
.rp-card-head h2 { flex: 1 1 14rem; flex-wrap: wrap; }
.rp-card-head h2 span { white-space: nowrap; }

/* Stop list: flag, whole-row selection */
.jm-stop-flag { flex-shrink: 0; font-size: 14px; line-height: 1; }
.jm-stops li { border-radius: 8px; }
.jm-stops li.jm-row-active { background: rgb(52 199 89 / 0.12); }
.jm-stops li.jm-row-active > .jm-stop-row { background: none; }

/* Legs between stops (list rows + map menu) */
.jm-leg {
  display: flex; align-items: center; gap: 6px; margin-left: 30px; padding: 1px 0 1px 10px;
  border-left: 2px dashed rgb(52 199 89 / 0.35); font-size: 12px; color: var(--muted-foreground);
}
.jm-leg-mode { padding: 1px 2px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; cursor: pointer; }
select.jm-leg-mode:hover { background: #fff; box-shadow: 0 0 0 1px var(--border); }
.jm-leg-route { padding: 1px 6px; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; cursor: pointer; }
.jm-leg-route:hover { background: #fff; box-shadow: 0 0 0 1px var(--border); }
.jm-leg-route-on { color: var(--primary-text); font-weight: 600; }
.jm-leg .rm-link { font-size: 12px; }
.jm-leg-km { font-weight: 600; font-variant-numeric: tabular-nums; }
.jm-leg-route { margin-left: auto; }
.jm-leg-active { border-left-style: solid; border-left-color: var(--primary); border-radius: 0 8px 8px 0; background: rgb(52 199 89 / 0.12); color: var(--foreground); }
.jm-leg-active .jm-leg-mode, .jm-leg-active .jm-leg-route { background: #fff; box-shadow: 0 0 0 1px var(--primary); }
.jm-leg-menu { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.jm-leg-options { display: flex; gap: 4px; }
.jm-leg-option {
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: 18px; line-height: 1; cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
}
.jm-leg-option:hover { border-color: var(--primary); transform: translateY(-1px); }
.jm-leg-option-on { border-color: var(--primary); background: rgb(52 199 89 / 0.12); box-shadow: 0 0 0 1px var(--primary); }
.jm-leg-menu .jm-leg-route { align-self: flex-start; margin-left: 0; border: 1px solid var(--border); padding: 4px 10px; font-size: 12px; }
.jm-leg-menu .jm-leg-route-on { border-color: var(--primary); background: rgb(52 199 89 / 0.1); }
.jm-via-drag { width: 12px; height: 12px; border: 2px solid #34c759; border-radius: 9999px; background: #fff; pointer-events: none; }
.jm-routing canvas { cursor: progress !important; }

/* Map: smaller numbered bubbles */
.rm-cluster { border-width: 2px; font-size: 11px; box-shadow: 0 0 0 3px rgb(52 199 89 / 0.22), 0 3px 8px rgb(0 0 0 / 0.28); }
.rm-cluster-road { box-shadow: 0 0 0 2px var(--green), 0 3px 8px rgb(0 0 0 / 0.28); }

/* Rider card: actions on the name's line, countries title, current country */
.rm-card-header { align-items: flex-start; }
.rm-card-titles { flex: 1; }
.rm-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.rm-card-actions .rm-share-btn { height: 28px; padding: 0 10px; font-size: 12px; }
.rm-card-actions .rm-share-pop { left: auto; right: 0; }
.rm-card-place { color: var(--muted-foreground); font-weight: 400; }
.rm-card-flags { flex-wrap: wrap; overflow: visible; gap: 2px 0; }
.rm-preview .rm-card-label-countries { display: block; }
.rm-flag-here { box-shadow: 0 0 0 2px var(--green); z-index: 1; }
@media (max-width: 1023px) {
  .rm-card-header { padding-right: 0; }
  .rm-preview .rm-card-line { white-space: normal; }
}
.rm-card-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rm-card-name-row .rm-card-name { flex: 1; min-width: 0; }
.rm-preview .rm-card-line.rm-on-road { display: block; }
.rm-preview .rm-on-road .rm-dot { display: inline-block; margin-right: 6px; vertical-align: 2px; }

/* Card actions: labelled when there's room, icon-only when the name needs it */
.rm-card-page {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 9999px;
  border: 1px solid var(--border); background: rgb(255 255 255 / 0.8); font-size: 12px; white-space: nowrap;
}
.rm-card-page svg { width: 14px; height: 14px; }
.rm-card-actions .rm-share-btn svg { width: 14px; height: 14px; }
.rm-icons-only .rm-act-label { display: none; }
.rm-icons-only .rm-card-page, .rm-icons-only .rm-share-btn { width: 28px; padding: 0; justify-content: center; }
.rm-card-header { padding-right: 0; }
.rm-modal-alt { flex-wrap: wrap; align-items: center; }
.rm-modal-alt form { display: contents; }

/* Admin: tabbed edit pages (riders, journeys) */
.ad-head > .ad-head-link { margin-left: auto; }
.ad-head > .ad-head-link + a { margin-left: 0; }
.ad-tabbed { display: flex; flex-direction: column; gap: 14px; }
.ad-tabbed [role="tabpanel"][hidden] { display: none; }
/* The form (and its Save button) only shows with one of its own panels. */
.ad-tabbed-form:not(:has(> [role="tabpanel"]:not([hidden]))) { display: none; }
.ad-tabbed-form { display: flex; flex-direction: column; gap: 12px; }
.ad-subtabs { align-self: flex-start; }
.ad-subtabs button {
  padding: 5px 12px; border: 0; border-radius: 8px; background: none; color: var(--muted-foreground);
  font: 600 13px var(--font-sans); cursor: pointer;
}
.ad-subtabs button::after { content: none; }
.ad-subtabs button span { margin-left: 2px; font-weight: 500; opacity: 0.7; }
.ad-subtabs button[aria-selected="true"] { background: #fff; color: var(--foreground); box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); }
.ad-subtabs button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.ad-form .ad-field-wide { grid-column: 1 / -1; }
.ad-label { font-weight: 600; font-size: 13px; }

.ad-location { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.ad-location-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ad-location-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ad-location-fields[hidden] { display: none; }
.ad-location-map { height: 360px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.ad-location-pin { width: 28px; height: 40px; cursor: grab; }
.ad-location-pin svg { width: 100%; height: 100%; }
.ad-location-hint { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0; }
.ad-location-hint span:last-child { font-variant-numeric: tabular-nums; }

.ad-links { display: flex; flex-direction: column; gap: 4px; }
.ad-links .rm-hint { margin: 0 0 4px; }
.ad-links .rm-link { flex-shrink: 0; }

.ad-stops { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 14px; }
.ad-stops > .rm-hint { grid-column: 1 / -1; }
.ad-stops-map { position: relative; height: 580px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--border); }
.ad-stops-map.jm-adding canvas { cursor: crosshair; }
.ad-stops-panel { display: flex; flex-direction: column; gap: 8px; height: 580px; min-height: 0; }
.ad-stops-panel > * { flex-shrink: 0; }
.ad-stops-panel .jm-stops { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ad-stops-panel .jm-stops-head { justify-content: flex-end; }
@media (max-width: 800px) {
  .ad-stops { grid-template-columns: 1fr; }
  .ad-stops-map { height: 380px; }
  .ad-stops-panel { height: auto; }
}

/* Admin journey: tabs, save status and draft / published on one row */
.ad-subtabs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ad-save-status { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.ad-save-status[data-state="saved"] { color: oklch(0.48 0.1 145); }
.ad-save-status[data-state="saving"] { color: var(--muted-foreground); }
.ad-save-status[data-state="dirty"] { color: oklch(0.6 0.13 70); }
.ad-save-status[data-state="failed"] { color: #dc2626; }
.ad-visibility button::after { content: none; }
.jm-save-status { font-size: 12px; font-weight: 600; color: var(--muted-foreground); }
.jm-save-status[data-state="failed"] { color: #dc2626; }

/* Stop list, calmer: number = favourite toggle, click the name to rename,
   handle / empty date / × appear on hover; legs read "41 km · 🛣 · 🚲". */
.jm-stops-head .rm-card-label { white-space: nowrap; }
.jm-stops-actions { gap: 8px; }
.jm-save-status { white-space: nowrap; }
.jm-stop-item { gap: 6px; padding: 1px 4px 1px 0; }
.jm-stop-item > .jm-stop-row {
  flex: 1; min-width: 0; padding: 4px 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;
}
.jm-stop-unnamed { color: var(--muted-foreground); }
button.jm-stop { padding: 0; font: 700 11px/1 var(--font-sans); transition: transform 0.1s, box-shadow 0.1s; }
button.jm-stop:hover { transform: scale(1.12); box-shadow: 0 0 0 2px #e11d48; }
.jm-stop.jm-stop-fav { position: relative; box-shadow: 0 0 0 2px #e11d48; }
.jm-stop.jm-stop-fav::after {
  content: "♥"; position: absolute; right: -5px; top: -6px; font-size: 10px; line-height: 1; color: #e11d48;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
}
.jm-name-input { flex: 1; min-width: 0; height: 28px; padding: 2px 8px; border: 1px solid var(--primary); border-radius: 6px; font: inherit; font-size: 13px; outline: none; }
.jm-date-empty { color: var(--muted-foreground); opacity: 0.8; }
@media (hover: hover) {
  .jm-stop-item .jm-handle, .jm-stop-item .jm-remove, .jm-stop-item .jm-date-empty { opacity: 0; transition: opacity 0.12s; }
  .jm-stop-item:hover .jm-handle, .jm-stop-item:hover .jm-remove, .jm-stop-item:hover .jm-date-empty,
  .jm-stop-item:focus-within .jm-handle, .jm-stop-item:focus-within .jm-remove, .jm-stop-item:focus-within .jm-date-empty { opacity: 1; }
  .jm-stop-item:not(:has(.jm-handle)) { padding-left: 4px; }
}
.jm-remove { width: 24px; height: 24px; font-size: 16px; }

.jm-leg { gap: 4px; min-height: 24px; }
.jm-leg .jm-leg-route { margin-left: 0; padding: 1px 6px; font-size: 11.5px; }
.jm-leg-km { padding: 1px 4px; border: 0; border-radius: 6px; background: none; font: inherit; font-weight: 600; color: var(--foreground); cursor: pointer; }
.jm-leg-km:hover { background: #fff; box-shadow: 0 0 0 1px var(--border); }
.jm-leg select.jm-leg-mode { font-size: 12px; }
.jm-leg-menu .jm-leg-options { flex-wrap: wrap; }

/* Stop date picker: D+1…D+5 after the previous stop, then the month */
.dp {
  position: fixed; z-index: 1000; width: 17.5rem; padding: 12px; border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 1px var(--border), 0 16px 40px -12px rgb(0 0 0 / 0.35); font-size: 13px;
}
.dp-label { margin-bottom: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted-foreground); text-transform: uppercase; }
.dp-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 10px; }
.dp-chip {
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; cursor: pointer; font: inherit;
}
.dp-chip strong { font-size: 12px; color: var(--primary-text); }
.dp-chip small { font-size: 10.5px; color: var(--muted-foreground); white-space: nowrap; }
.dp-chip:hover, .dp-chip:focus-visible { border-color: var(--primary); outline: none; }
.dp-chip.dp-on { border-color: var(--primary); background: rgb(52 199 89 / 0.12); }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { font-size: 13px; }
.dp-nav { width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; font-size: 18px; line-height: 1; cursor: pointer; }
.dp-nav:hover { background: var(--secondary); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-weekday { padding: 2px 0 4px; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--muted-foreground); }
.dp-day {
  height: 32px; border: 0; border-radius: 8px; background: none; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
}
.dp-day:hover, .dp-day:focus-visible { background: var(--secondary); outline: none; }
.dp-today { font-weight: 700; color: var(--primary-text); }
.dp-base { box-shadow: inset 0 0 0 1px var(--border); }
.dp-day.dp-on { background: var(--primary); color: #fff; font-weight: 700; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* Stop list, round 3: 5px rhythm, plain stops as white rings, an empty
   heart on every number (click = favourite), dates always shown, bare selects. */
.jm-stops li.jm-stop-item { gap: 5px; }
.jm-stops .jm-kind-stop:not(.jm-stop-fav) { background: #fff; color: var(--primary-text); border: 1.5px solid #34c759; }
.jm-stops .jm-row-active .jm-kind-stop:not(.jm-stop-fav) { background: #34c759; color: #fff; }
.jm-stop-heart { position: relative; overflow: visible; }
.jm-stop-heart::after, .jm-stop.jm-stop-fav::after {
  content: "♡"; position: absolute; right: -6px; top: -7px; font-size: 11px; line-height: 1; color: #e11d48;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff;
}
.jm-stop.jm-stop-fav::after { content: "♥"; }
@media (hover: hover) { .jm-stop-item .jm-date-empty { opacity: 1; } }
.jm-date-empty { font-style: italic; }
.jm-leg select.jm-leg-mode { appearance: none; -webkit-appearance: none; padding: 1px 4px; background: none; }
.jm-remove.jm-remove-confirm {
  width: auto; height: 22px; padding: 0 8px; border-radius: 6px; background: #dc2626; color: #fff;
  font-size: 12px; font-weight: 600; opacity: 1 !important;
}
.jm-visibility { gap: 8px; }
.jm-visibility .jm-save-status { margin-left: auto; }
.jm-visibility form { flex-shrink: 0; }

/* Rider map search bar: [country ⌄] [search rider…] [×] [All | ● Riding] (+ account on phones) */
.rm-left { max-width: 30rem; }
.rm-searchbar {
  display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px; border: 1px solid transparent; border-radius: 12px;
  background: oklch(0.95 0.01 80); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.rm-searchbar:focus-within { background: #fff; border-color: var(--ring); box-shadow: 0 0 0 3px rgb(52 199 89 / 0.15); }
.rm-searchbar .rm-picker { flex-shrink: 0; }
.rm-searchbar .rm-popover { left: -4px; right: auto; top: calc(100% + 10px); }
.rm-country-btn {
  display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 4px 0 8px; border: 0; border-radius: 9px;
  background: none; color: var(--muted-foreground); font-size: 18px; line-height: 1; cursor: pointer;
}
.rm-country-btn:hover, .rm-country-btn[aria-expanded="true"] { background: rgb(0 0 0 / 0.06); color: var(--foreground); }
.rm-country-btn.rm-picker-selected { background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); font-size: 18px; }
.rm-country-btn > svg:last-child { width: 14px; height: 14px; opacity: 0.7; }
.rm-country-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.rm-search-input {
  flex: 1 1 0; min-width: 0; height: 34px; padding: 0 4px; border: 0; outline: none; background: none;
  font: inherit; font-size: 14px; color: var(--foreground);
}
.rm-search-input::placeholder { color: var(--muted-foreground); }
.rm-searchbar .rm-icon-btn { flex-shrink: 0; }
.rm-searchbar .rm-segment { background: rgb(0 0 0 / 0.05); border-radius: 9px; }
.rm-searchbar .rm-segment button { border-radius: 7px; }
.rm-scope-select {
  display: none; flex-shrink: 0; height: 30px; padding: 0 20px 0 8px; border: 0; border-radius: 8px;
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--foreground);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6257' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 5px center / 12px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12); cursor: pointer;
}
.rm-scope-select:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* Account (top right): a clear call to action, or the rider's own chip */
.rm-account {
  min-height: 44px; max-width: 260px; padding: 6px 16px 6px 8px; border-radius: 12px; font-size: 14px; font-weight: 700;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}
.rm-account:not(:has(.rm-account-avatar)) {
  padding: 6px 18px 6px 14px; border-color: transparent; background: var(--primary); color: #fff;
  box-shadow: 0 8px 20px -6px rgb(52 199 89 / 0.6);
}
.rm-account:not(:has(.rm-account-avatar)) > svg { margin-left: 0; width: 20px; height: 20px; }
.rm-account:not(:has(.rm-account-avatar)):hover { background: #2db14e; transform: translateY(-1px); }
.rm-account .rm-account-avatar { width: 32px; height: 32px; }
.rm-account:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Map style switch: one button, icons included; squarer like the account and zoom */
button.rm-basemap { font: inherit; cursor: pointer; color: var(--muted-foreground); }
button.rm-basemap:hover { color: var(--foreground); border-color: var(--primary); }
button.rm-basemap:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rm-topright .rm-basemap, .rm-zoom { width: 44px; border-radius: 12px; }
.rm-topright .rm-basemap { padding: 10px 6px; }
.rm-basemap .rm-switch { pointer-events: none; }
.rm-basemap[aria-checked="true"] .rm-switch { background: var(--primary); }
.rm-basemap[aria-checked="true"] .rm-switch-vertical span { transform: translateY(14px); }
.rm-zoom .rm-icon-btn { width: 34px; height: 34px; border-radius: 9px; }

@media (max-width: 639px) {
  .rm-left { max-width: none; }
  .rm-account.rm-account-in-search {
    flex-shrink: 0; width: 34px; height: 34px; min-height: 0; margin-left: 0; padding: 0; border-radius: 9px; transform: none;
  }
  .rm-account-in-search:not(:has(.rm-account-avatar)) { background: var(--primary); color: #fff; box-shadow: none; }
  .rm-account-in-search .rm-account-avatar { width: 30px; height: 30px; border-radius: 8px; }
}

/* Phones and tablets: All / Riding is a compact dropdown, sized to its
   chosen option by the map controller (fitScopeSelect). */
@media (max-width: 1023px) {
  .rm-searchbar .rm-segment { display: none; }
  .rm-scope-select { display: block; }
}

/* My location: button under the zoom, blue dot on the map */
.rm-locate {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 12px;
  border: 1px solid var(--border); background: oklch(0.975 0.012 85 / 0.9); box-shadow: var(--shadow);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--muted-foreground); cursor: pointer;
}
.rm-locate svg { width: 22px; height: 22px; }
.rm-locate:hover { color: var(--foreground); border-color: var(--primary); }
.rm-locate:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.rm-locate-on { color: #1a73e8; }
.rm-locate-busy svg { animation: rm-pulse 1s infinite; }
.rm-me {
  width: 16px; height: 16px; border: 3px solid #fff; border-radius: 9999px; background: #1a73e8;
  box-shadow: 0 0 0 6px rgb(26 115 232 / 0.2), 0 1px 4px rgb(0 0 0 / 0.35);
}

/* Map credits: a © icon instead of MapLibre's "i" (rider map's own control and the built-in one) */
.wp-compact-attrib { padding: 3px; }
.wp-attrib-btn { width: 24px; height: 24px; background: none; color: var(--muted-foreground); font: inherit; }
.wp-attrib-btn svg { width: 16px; height: 16px; }
.wp-attrib-btn:hover, .wp-attrib-btn[aria-expanded="true"] { color: var(--foreground); background: rgb(0 0 0 / 0.06); }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button {
  background-color: transparent; background-size: 16px; background-position: center; background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6257' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M14.8 14.8a4 4 0 1 1 0-5.6'/%3E%3C/svg%3E");
}

/* Admin Stops tab: the journey's real page, embedded, with the Override switch */
.ad-tabbed .ad-stops { display: flex; flex-direction: column; gap: 10px; }
.ad-tabbed .ad-stops[hidden] { display: none; }
.ad-stops-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ad-stops-bar .rm-hint { flex: 1 1 20rem; margin: 0; }
.ad-stops-bar .rm-btn[aria-pressed="true"] { background: var(--foreground); }
.ad-stops-frame { display: block; width: 100%; height: min(78vh, 760px); border: 0; border-radius: 12px; box-shadow: 0 0 0 1px var(--border); background: var(--background); }

/* Journey page: banner while an admin edits someone else's journey */
.jm-override {
  padding: 6px 10px; border-radius: 10px; background: oklch(0.8 0.12 85 / 0.3); color: var(--foreground);
  font-size: 12.5px; font-weight: 600;
}

/* Claim page (invite link from the admin) */
.cl { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.cl-card { width: 100%; max-width: 26rem; padding: 24px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); }
.cl-head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; text-align: center; }
.cl-head h1 { margin: 4px 0 0; font-family: var(--font-serif); font-size: 24px; }
.cl-head p { margin: 0; }
.cl-avatar { width: 72px; height: 72px; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 3px #fff, var(--shadow); }

/* Admin: avatars in lists, rider account / invite link */
@media (max-width: 639px) { .ad { padding: 12px 12px 40px; } }
.ad-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ad-who small { color: var(--muted-foreground); }
.ad-avatar { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 1px var(--border); }
.ad-avatar-lg { width: 44px; height: 44px; }
.ad-line { align-items: center; }
.ad-account { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ad-account p { flex: 1 1 18rem; margin: 0; }
.ad-account small { color: var(--muted-foreground); }
.ad-account form { display: contents; }
.ad-invite { display: flex; gap: 6px; flex-basis: 100%; }
.ad-invite .rm-input { flex: 1; padding-left: 10px; font-family: ui-monospace, monospace; font-size: 12.5px; }

/* Rider map: smaller numbered bubbles with a thin ring, so more riders show sooner */
.rm-cluster { border-width: 1.5px; font-size: 10.5px; box-shadow: 0 0 0 2px rgb(52 199 89 / 0.2), 0 2px 6px rgb(0 0 0 / 0.25); }
.rm-cluster-road { box-shadow: 0 0 0 1.5px var(--green), 0 2px 6px rgb(0 0 0 / 0.25); }

/* WeBikepack wordmark, above the search */
.rm-brand { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 0 2px; color: var(--foreground); text-decoration: none; }
.rm-brand-mark {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgb(52 199 89 / 0.45);
}
.rm-brand-mark svg { width: 20px; height: 20px; stroke-width: 2.2; }
.rm-brand-name { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.rm-brand-name span { color: var(--primary-text); }
.rm-brand:hover .rm-brand-mark { transform: rotate(-6deg); }
.rm-brand-mark { transition: transform 0.15s; }
@media (max-width: 639px) {
  .rm-brand-mark { width: 24px; height: 24px; border-radius: 7px; }
  .rm-brand-mark svg { width: 16px; height: 16px; }
  .rm-brand-name { font-size: 17px; }
}

/* Desktop: the selected rider's card sits in the bottom-left corner, the
   search panel stays at the top of the same column */
@media (min-width: 1024px) {
  .rm-left { bottom: 16px; max-height: none; }
  .rm-left .rm-drawer { margin-top: auto; max-height: 60%; transform: translateY(8px); }
  .rm-left .rm-drawer.rm-drawer-open { transform: none; }
}

/* Riders in view, round 2: flag badge on the photo, no country line, room for
   the selection ring, and a hover that lifts the card and the rider's pin */
.rm-strip-list { margin: 0 -8px; padding: 6px 8px 6px; scroll-padding-inline: 8px; }
.rm-thumb { gap: 5px; padding: 8px 4px 6px; transition: background 0.15s, box-shadow 0.15s, transform 0.15s; }
.rm-thumb-avatar { position: relative; display: block; width: 44px; height: 44px; flex-shrink: 0; transition: transform 0.15s; }
.rm-thumb-avatar .rm-thumb-img { width: 100%; height: 100%; }
.rm-thumb-flag {
  position: absolute; right: -4px; bottom: -3px; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 9999px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  font-size: 12px; line-height: 1;
}
.rm-thumb-country { display: none; }
.rm-thumb:hover { background: #fff; box-shadow: 0 4px 12px -4px rgb(0 0 0 / 0.25); transform: translateY(-2px); }
.rm-thumb:hover .rm-thumb-avatar { transform: scale(1.06); }
.rm-thumb:hover .rm-thumb-name { color: var(--primary-text); }
.rm-pin.rm-pin-hover { z-index: 200 !important; }
.rm-pin-hover .rm-pin-box { transform: translate(-50%, -50%) scale(1.3); filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.4)); }
.rm-pin-box { transition: transform 0.15s; }

/* Logo: the cycling cap and the name in black */
.rm-brand img.rm-brand-mark { display: block; padding: 0; background: none; object-fit: cover; box-shadow: 0 1px 4px rgb(0 0 0 / 0.2); }
.rm-brand-name, .rm-brand-name span { color: var(--foreground); }

/* Claim pages: the riders map behind, dimmed, and the card in front */
.cl-map { position: fixed; inset: 0; z-index: 0; }
.cl-dim { position: fixed; inset: 0; z-index: 1; background: rgb(17 24 39 / 0.38); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.cl { position: relative; z-index: 2; }
.cl-card { box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.55); }
.rb-pin {
  width: 30px; height: 30px; border-radius: 9999px; object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(0 0 0 / 0.35);
}
.rb-pin-road { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green), 0 2px 6px rgb(0 0 0 / 0.35); }

/* Rider map: a light circle marks the rider hovered in "riders in view", and
   stays around the selected rider, whose pin also stays a little larger */
.rm-pin-box::before {
  content: ""; position: absolute; inset: -5px; z-index: -1; border-radius: 9999px; pointer-events: none;
  background: rgb(52 199 89 / 0.2); box-shadow: 0 0 0 1.5px rgb(52 199 89 / 0.6);
  opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.2s;
}
.rm-pin-hover .rm-pin-box::before, .rm-pin[data-selected] .rm-pin-box::before { opacity: 1; transform: none; }
.rm-pin[data-selected] .rm-pin-box { transform: translate(-50%, -50%) scale(1.15); }
.rm-pin.rm-pin-hover .rm-pin-box { transform: translate(-50%, -50%) scale(1.3); }

/* Claim pages: logo above the card (back to the map), "log in instead" note */
.cl { flex-direction: column; gap: 14px; }
.rm-brand.cl-brand { align-self: center; padding: 6px 14px 6px 6px; border-radius: 9999px; background: #fff; box-shadow: 0 6px 20px -6px rgb(0 0 0 / 0.45); }
.rm-brand.cl-brand:hover { box-shadow: 0 0 0 2px var(--primary), 0 6px 20px -6px rgb(0 0 0 / 0.45); }
.cl-existing { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: rgb(52 199 89 / 0.12); font-size: 13px; }
.cl-existing[hidden], .cl-card [hidden] { display: none; }