/* Map visuals owned by the map module (map.js / route-draw.js / map3d.js).
 * Loaded after style.css. Uses the style.css tokens with literal fallbacks
 * so the map still renders if a token is missing. No backdrop-filter on
 * anything floating over the map: iOS WebKit silently drops that layer. */

/* ── Attribution (Mapbox + OpenStreetMap terms) ─────────────────────── */
.leaflet-container .leaflet-control-attribution {
    margin: 0;
    padding: 1px 6px;
    border-radius: 6px 0 0 0;
    background: rgba(10, 10, 12, 0.62);
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    transition: color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                background var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.leaflet-container .leaflet-control-attribution:hover {
    background: rgba(10, 10, 12, 0.85);
    color: rgba(255, 255, 255, 0.8);
}

.leaflet-container .leaflet-control-attribution a {
    color: inherit;
    text-decoration: none;
}

.leaflet-container .leaflet-control-attribution a:hover,
.leaflet-container .leaflet-control-attribution a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.leaflet-container .leaflet-control-attribution .ts-attr-improve {
    font-weight: 600;
}

/* Phones: keep the credit on one short line so it never crowds the map. */
@media (max-width: 480px) {
    .leaflet-container .leaflet-control-attribution {
        max-width: calc(100vw - 96px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 9px;
    }

    /* Tap to read the full credit line. */
    .leaflet-container .leaflet-control-attribution:hover,
    .leaflet-container .leaflet-control-attribution:focus-within {
        white-space: normal;
    }
}

/* ── Route reveal (route-draw.js) ──────────────────────────────────── */
/* Comet head riding the tip of a line as it draws on. Positioned with an
 * SVG transform attribute, so only opacity is animated here. */
.ts-comet {
    opacity: 1;
    animation: ts-comet-in var(--motion-base, 200ms) var(--ease-out, ease-out) both;
    transition: opacity var(--motion-slow, 360ms) var(--ease-out, ease-out);
}

.ts-comet.is-done {
    opacity: 0;
}

.ts-comet-halo {
    opacity: 0.55;
    filter: blur(4px);
}

.ts-comet-core {
    fill: #fff;
    filter: drop-shadow(0 0 3px rgba(var(--accent-rgb, 245, 98, 0), 0.9));
}

@keyframes ts-comet-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Waypoint markers wait for their route to finish drawing, then settle in
 * one after another (route-draw.js sets --ts-settle-delay per marker). The
 * marker element itself is positioned by Leaflet's transform, so the
 * animation runs on its child. */
.ts-marker-await > * {
    opacity: 0;
    transform: scale(0.4);
}

.ts-marker-settle > * {
    animation: ts-marker-settle var(--motion-slow, 360ms) var(--ease-spring, ease-out) both;
    animation-delay: var(--ts-settle-delay, 0ms);
}

@keyframes ts-marker-settle {
    from { opacity: 0; transform: translateY(4px) scale(0.4); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ts-comet { display: none; }
    .ts-marker-await > * { opacity: 1; transform: none; }
}

/* ── Map toolbar (#map-controls) ───────────────────────────────────── */
/* One row of grouped pills: route tools, view, clear/more. map-toolbar.js
 * sets data-density (full / icons / overflow / tight) so the row always
 * fits beside the zoom control; overflowed buttons move to the More menu.
 * Solid backgrounds only (no backdrop-filter, see the iOS note above).
 * The 1px gap over the group's border color draws the dividers. */
#map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 6px;
    white-space: nowrap;
}

#map-controls .map-ctrl-group {
    display: inline-flex;
    align-items: stretch;
    flex: none;
    gap: 1px;
    background: var(--surface-border, #2a2a2a);
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
    box-shadow: var(--elev-control, 0 4px 14px -6px rgba(0, 0, 0, 0.7));
    transition: box-shadow var(--motion-base, 200ms) var(--ease-out, ease-out);
}

#map-controls .map-ctrl-group[hidden],
#map-controls .map-btn[hidden] {
    display: none;
}

#map-controls .map-ctrl-group:has(.map-btn.active, .map-btn.pin-mode-active) {
    box-shadow: var(--glow-accent-strong, 0 0 0 1px rgba(245, 98, 0, 0.55), 0 6px 22px -6px rgba(245, 98, 0, 0.6));
}

#map-controls .map-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: var(--control-h, 34px);
    height: var(--control-h, 34px);
    padding: 0 11px;
    border: 0;
    border-radius: 0;
    background: var(--float-bg, rgba(18, 18, 20, 0.96));
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: var(--text-ui, 12.5px);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                color var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

#map-controls .map-btn:hover:not(:disabled) {
    background: var(--surface-3, #222225);
}

#map-controls .map-btn:active:not(:disabled) {
    background: rgba(40, 40, 44, 0.98);
}

#map-controls .map-btn:active:not(:disabled) .map-btn-icon {
    transform: scale(0.92);
}

#map-controls .map-btn:disabled {
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    cursor: default;
}

#map-controls .map-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb, 245, 98, 0), 0.85);
}

#map-controls .map-btn-icon,
#map-controls .map-btn-caret {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#map-controls .map-btn-icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
    opacity: 0.85;
    transition: opacity var(--motion-fast, 120ms) var(--ease-out, ease-out),
                filter var(--motion-fast, 120ms) var(--ease-out, ease-out),
                transform var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

#map-controls .map-btn:hover .map-btn-icon {
    opacity: 1;
}

#map-controls .map-btn-caret {
    width: 12px;
    height: 12px;
    margin: 0 -3px 0 -1px;
    stroke-width: 2;
    opacity: 0.55;
    transition: transform var(--motion-base, 200ms) var(--ease-out, ease-out),
                opacity var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

#map-controls .map-btn.is-open {
    background: var(--surface-3, #222225);
}

#map-controls .map-btn.is-open .map-btn-caret {
    transform: rotate(180deg);
    opacity: 0.9;
}

/* Emissive active state: lit accent face, a soft inner highlight, and a
 * glowing icon. The group carries the outer glow (see :has above) because
 * the pill clips its children. */
#map-controls .map-btn.active,
#map-controls .map-btn.pin-mode-active {
    background: var(--accent, #F56200);
    color: var(--on-accent, #0b0b0b);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
                inset 0 -10px 18px -10px rgba(0, 0, 0, 0.35);
}

#map-controls .map-btn.active .map-btn-icon,
#map-controls .map-btn.pin-mode-active .map-btn-icon {
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}

#map-controls .map-btn.active:hover:not(:disabled),
#map-controls .map-btn.pin-mode-active:hover:not(:disabled) {
    background: var(--accent-hover, #FF7020);
}

#map-controls .map-btn.active:focus-visible,
#map-controls .map-btn.pin-mode-active:focus-visible {
    box-shadow: inset 0 0 0 2px var(--on-accent, #0b0b0b), inset 0 0 0 3px rgba(255, 255, 255, 0.5);
}

/* Clear Map reads as a quiet, slightly dangerous action. */
#map-controls .map-btn--quiet {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

#map-controls .map-btn--quiet:hover:not(:disabled) {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.14);
}

/* More: only when something has overflowed. A lit dot means a toggle
 * inside it (3D, say) is on. */
#map-controls .map-btn--more,
#map-controls #btn-map-fullscreen {
    display: none;
}

#map-controls .map-btn--more.has-active::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #F56200);
    box-shadow: 0 0 6px rgba(var(--accent-rgb, 245, 98, 0), 0.9);
}

/* Densities */
#map-controls:not([data-density="full"]) .map-btn:not(.map-btn--style) .map-btn-label,
#map-controls[data-density="overflow"] .map-btn-label,
#map-controls[data-density="tight"] .map-btn-label {
    display: none;
}

#map-controls:not([data-density="full"]) .map-btn:not(.map-btn--style) {
    padding: 0;
}

#map-controls[data-density="overflow"] .map-btn[data-overflow="1"],
#map-controls[data-density="tight"] .map-btn[data-overflow] {
    display: none;
}

#map-controls[data-density="overflow"] .map-btn--more,
#map-controls[data-density="tight"] .map-btn--more {
    display: inline-flex;
}

/* Phones and the stacked tablet layout: 40px touch targets, and the
 * full-screen toggle (the chat stacks above the map there). */
@media (max-width: 768px) {
    #map-controls {
        --control-h: 40px;
        gap: 5px;
    }

    #map-controls #btn-map-fullscreen {
        display: inline-flex;
    }

    #map-controls .map-btn-icon {
        width: 18px;
        height: 18px;
    }
}

/* ── Elevation profile drawer (elevation.js) ───────────────────────── */
/* Docked along the bottom of the map pane, under the toolbar. Solid
 * background, no backdrop-filter. Collapses to a small pill at the
 * bottom left. */
.ts-elev {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 950;
    display: flex;
    flex-direction: column;
    background: rgba(12, 12, 14, 0.97);
    border-top: 1px solid var(--surface-border, #2a2a2a);
    box-shadow: 0 -10px 28px -14px rgba(0, 0, 0, 0.85);
    color: var(--text-primary, #fff);
    user-select: none;
    -webkit-user-select: none;
    transition: transform var(--motion-slow, 360ms) var(--ease-out, ease-out),
                opacity var(--motion-base, 200ms) var(--ease-out, ease-out),
                right var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-elev[hidden] {
    display: none;
}

.ts-elev.is-entering {
    transform: translateY(14px);
    opacity: 0;
    transition: none;
}

.ts-elev-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 30px;
    padding: 0 10px 0 4px;
    font-size: 11.5px;
    white-space: nowrap;
}

.ts-elev-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 8px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--motion-fast, 120ms) var(--ease-out, ease-out),
                color var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-elev-toggle:hover {
    background: var(--surface-3, #222225);
    color: var(--text-primary, #fff);
}

.ts-elev-toggle:focus-visible,
.ts-elev-tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb, 245, 98, 0), 0.85);
}

.ts-elev-icon {
    width: 14px;
    height: 14px;
    fill: var(--elev-route-c, var(--accent, #F56200));
    filter: drop-shadow(0 0 3px var(--elev-route-c, rgba(245, 98, 0, 0.6)));
}

.ts-elev-chevron {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(180deg);
    transition: transform var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-elev.is-collapsed .ts-elev-chevron {
    transform: none;
}

.ts-elev-tabs {
    display: flex;
    flex: 0 1 auto;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.ts-elev-tabs::-webkit-scrollbar {
    display: none;
}

.ts-elev-tabs[hidden] {
    display: none;
}

.ts-elev-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: 999px;
    background: var(--surface-2, #1a1a1a);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                box-shadow var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-elev-tab::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tab-c, #F56200);
}

.ts-elev-tab:hover {
    color: var(--text-primary, #fff);
    background: var(--surface-3, #222225);
}

.ts-elev-tab[aria-selected="true"] {
    color: var(--text-primary, #fff);
    border-color: var(--tab-c, #F56200);
    box-shadow: 0 0 10px -3px var(--tab-c, #F56200);
}

.ts-elev-stats {
    flex: 0 1000 auto;
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-variant-numeric: tabular-nums;
}

.ts-elev-legend {
    display: flex;
    flex: 0 1000 auto;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
}

.ts-elev-key,
.ts-elev-tip-surface {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ts-elev-key::before,
.ts-elev-tip-surface::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--key-c, #6B7280);
}

.ts-elev-body {
    position: relative;
    height: 104px;
}

.ts-elev-body[hidden] {
    display: none;
}

.ts-elev-base,
.ts-elev-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Drag to scrub on touch without the page or map taking the gesture. */
.ts-elev-overlay {
    touch-action: none;
    cursor: crosshair;
    outline: none;
}

.ts-elev-overlay.is-clickable {
    cursor: pointer;
}

.ts-elev-overlay:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb, 245, 98, 0), 0.7);
}

.ts-elev-tip {
    position: absolute;
    top: 2px;
    left: 0;
    display: flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    background: rgba(6, 6, 8, 0.88);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.8);
}

.ts-elev-tip[hidden] {
    display: none;
}

.ts-elev-tip strong {
    color: var(--text-primary, #fff);
    font-weight: 600;
}

.ts-elev-tip-sep {
    margin: 0 5px;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
}

/* Collapsed: a small pill at the bottom left. */
.ts-elev.is-collapsed {
    right: auto;
    left: 8px;
    bottom: 8px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: 999px;
    box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.7);
}

.ts-elev.is-collapsed .ts-elev-bar {
    gap: 6px;
    min-height: 30px;
    padding: 0 12px 0 2px;
}

.ts-elev.is-collapsed .ts-elev-toggle {
    border-radius: 999px;
}

.ts-elev.is-collapsed .ts-elev-tabs,
.ts-elev.is-collapsed .ts-elev-legend {
    display: none;
}

/* Leaflet's bottom controls (attribution) ride above the open drawer. */
.ts-elev-docked .leaflet-bottom {
    bottom: var(--ts-elev-h, 0px);
}

.ts-elev-pill .leaflet-bottom.leaflet-left {
    bottom: 46px;
}

/* ── Segment detail in the drawer (segments.js) ─────────────────────── */
/* A compact card between the drawer bar and the chart: surface badge,
 * name and stats on one line, actions on the next, and one expandable
 * panel (evidence or feedback) under them. */
.ts-elev-detail {
    container-type: inline-size;
    max-height: min(42vh, 260px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    user-select: text;
    -webkit-user-select: text;
}

.ts-elev-detail[hidden] {
    display: none;
}

.ts-seg {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 8px 10px 9px 12px;
    animation: ts-seg-in var(--motion-base, 200ms) var(--ease-out, ease-out);
}

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

.ts-seg-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ts-seg-badge {
    --seg-c: var(--road-unknown, #6B7280);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    height: 20px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border: 1px solid color-mix(in srgb, var(--seg-c) 45%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    background: color-mix(in srgb, var(--seg-c) 16%, transparent);
    color: var(--text-primary, #e4e4e7);
    color: color-mix(in srgb, var(--seg-c) 55%, #fff);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ts-seg-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--seg-c);
}

.ts-seg-badge--paved { --seg-c: var(--road-paved, #8A94A6); }
.ts-seg-badge--gravel { --seg-c: var(--road-gravel, #C9A44C); }
.ts-seg-badge--dirt { --seg-c: var(--road-dirt, #A5522F); }

.ts-seg-conf {
    flex: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 10.5px;
    font-style: italic;
}

.ts-seg-conf[hidden] {
    display: none;
}

.ts-seg-name {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ts-seg-stats {
    flex: none;
    margin-left: auto;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ts-seg-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 26px;
    height: 26px;
    margin-right: -4px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    cursor: pointer;
}

.ts-seg-close svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.ts-seg-close:hover {
    background: var(--surface-3, #222225);
    color: var(--text-primary, #fff);
}

.ts-seg-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ts-seg-spacer {
    flex: 1;
}

.ts-seg-btn,
.ts-seg-chip,
.ts-seg-send {
    flex: none;
    height: 26px;
    padding: 0 10px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: 999px;
    background: var(--surface-2, #1a1a1a);
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                background var(--motion-fast, 120ms) var(--ease-out, ease-out),
                transform var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-seg-btn:hover,
.ts-seg-chip:hover {
    border-color: rgba(var(--accent-rgb, 245, 98, 0), 0.7);
    background: rgba(var(--accent-rgb, 245, 98, 0), 0.08);
}

.ts-seg-btn:active,
.ts-seg-chip:active,
.ts-seg-send:active {
    transform: scale(0.97);
}

.ts-seg-link {
    flex: none;
    height: 26px;
    white-space: nowrap;
    padding: 0 4px;
    border: 0;
    background: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.18);
    text-underline-offset: 3px;
}

.ts-seg-link:hover,
.ts-seg-link[aria-expanded="true"] {
    color: var(--text-primary, #fff);
    text-decoration-color: rgba(var(--accent-rgb, 245, 98, 0), 0.8);
}

.ts-seg-more {
    padding-top: 7px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 11.5px;
}

.ts-seg-more[hidden] {
    display: none;
}

.ts-seg-evidence {
    margin: 0;
    padding-left: 16px;
    line-height: 1.55;
}

.ts-seg-tags {
    margin-top: 6px;
}

.ts-seg-tags summary {
    width: max-content;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    cursor: pointer;
}

.ts-seg-tags table {
    margin-top: 4px;
    border-collapse: collapse;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 10.5px;
}

.ts-seg-tags td {
    padding: 2px 10px 2px 0;
    vertical-align: top;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ts-seg-tags td:first-child {
    color: var(--text-primary, #fff);
    white-space: nowrap;
}

.ts-seg-tags p {
    margin: 4px 0 0;
}

.ts-seg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ts-seg-chip {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-weight: 500;
}

.ts-seg-note {
    display: flex;
    gap: 6px;
    margin-top: 7px;
}

.ts-seg-note input {
    flex: 1;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: 8px;
    background: var(--surface-1, #141414);
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 12px;
}

.ts-seg-note input:focus-visible {
    outline: none;
    border-color: rgba(var(--accent-rgb, 245, 98, 0), 0.8);
}

.ts-seg-send {
    height: 28px;
    border-color: transparent;
    background: var(--accent, #F56200);
    color: var(--on-accent, #0b0b0b);
}

.ts-seg-send:hover {
    background: var(--accent-hover, #FF7020);
}

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

@media (max-width: 768px) {
    .ts-elev-body {
        height: 86px;
    }

    .ts-elev-legend {
        display: none;
    }
}

/* Narrow card: stats wrap under the name; actions scroll sideways. */
@container (max-width: 560px) {
    .ts-seg-head {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .ts-seg-name {
        flex: 1;
    }

    .ts-seg-stats {
        order: 5;
        width: 100%;
        margin-left: 0;
    }

    .ts-seg-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: -10px;
        padding-right: 10px;
    }

    .ts-seg-actions::-webkit-scrollbar {
        display: none;
    }

    .ts-seg-spacer {
        flex: none;
        width: 0;
    }
}

@media (max-width: 480px) {
    .ts-elev.has-detail .ts-elev-body {
        height: 64px;
    }

    .ts-elev.is-collapsed .ts-elev-stats {
        display: none;
    }

    .ts-elev.is-collapsed .ts-elev-bar {
        padding-right: 4px;
    }

    .ts-elev-pill .leaflet-container .leaflet-control-attribution {
        max-width: calc(100vw - 190px);
    }
}

/* Map dot that follows the chart cursor. */
.ts-scrub-icon {
    pointer-events: none;
}

.ts-scrub-dot {
    box-sizing: border-box;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--scrub-c, var(--accent, #F56200));
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35), 0 0 14px 2px var(--scrub-c, rgba(245, 98, 0, 0.7));
}

/* ── 3D terrain view (map3d.js) ─────────────────────────────────────── */
/* Sits over the Leaflet map inside #map-pane, under the toolbar (1000)
 * and the elevation drawer (950). Solid backgrounds, no backdrop-filter. */
.ts-map3d {
    position: absolute;
    inset: 0;
    z-index: 900;
    background: var(--surface-0, #0b0b0d);
    opacity: 0;
    transition: opacity var(--motion-slow, 360ms) var(--ease-out, ease-out);
}

.ts-map3d.is-shown {
    opacity: 1;
}

/* Beats mapbox-gl.css's .mapboxgl-map { position: relative }, which is
 * injected later and would otherwise collapse the canvas to 0 px tall. */
.ts-map3d > .ts-map3d-canvas {
    position: absolute;
    inset: 0;
}

/* Leaflet's own controls would show through above the 3D layer. */
#map-pane.is-3d .leaflet-control-container {
    display: none;
}

/* The compass sits under the Exit bar, in the same pill as the toolbar. */
.ts-map3d .mapboxgl-ctrl-top-left {
    top: calc(48px + var(--ts3d-stack, 0px) + env(safe-area-inset-top, 0px));
}

.ts-map3d .mapboxgl-ctrl-top-left .mapboxgl-ctrl-group {
    margin: 4px 0 0 12px;
    overflow: hidden;
    background: var(--float-bg, rgba(18, 18, 20, 0.96));
    border: var(--hairline, 1px solid #2a2a2a);
    border-radius: var(--radius-lg, 10px);
    box-shadow: var(--elev-control, 0 4px 14px -6px rgba(0, 0, 0, 0.7));
}

.ts-map3d .mapboxgl-ctrl-top-left .mapboxgl-ctrl-group button {
    width: var(--control-h, 34px);
    height: var(--control-h, 34px);
    transition: background-color var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-map3d .mapboxgl-ctrl-top-left .mapboxgl-ctrl-group button:not(:disabled):hover {
    background-color: var(--surface-3, #222225);
}

/* Light glyph on the dark pill; the hue turn keeps the north tip red. */
.ts-map3d .mapboxgl-ctrl-top-left .mapboxgl-ctrl-icon {
    filter: invert(1) hue-rotate(180deg);
}

/* Mapbox logo and attribution ride above the elevation drawer. */
.ts-map3d .mapboxgl-ctrl-bottom-left,
.ts-map3d .mapboxgl-ctrl-bottom-right {
    bottom: var(--ts-elev-h, 0px);
    transition: bottom var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-map3d .mapboxgl-ctrl-attrib {
    background: rgba(10, 10, 12, 0.62);
    font-size: 10px;
}

.ts-map3d .mapboxgl-ctrl-attrib a {
    color: rgba(255, 255, 255, 0.7);
}

.ts-map3d-veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--surface-0, #0b0b0d);
    color: var(--text-muted, #9aa0a6);
    font-size: 13px;
    transition: opacity var(--motion-slow, 360ms) var(--ease-out, ease-out);
}

.ts-map3d.is-ready .ts-map3d-veil {
    opacity: 0;
    pointer-events: none;
}

.ts-map3d-spinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    border-top-color: var(--accent, #F56200);
    animation: ts-map3d-spin 0.9s linear infinite;
}

@keyframes ts-map3d-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ts-map3d-spinner { animation: none; }
}

/* Exit, top left (the main toolbar is top right). */
/* --ts3d-stack: set on #map-pane by map-toolbar.js when the toolbar
 * needs the whole top row, so the bar drops below it. */
.ts-map3d-bar {
    position: absolute;
    top: calc(12px + var(--ts3d-stack, 0px) + env(safe-area-inset-top, 0px));
    left: calc(12px + env(safe-area-inset-left, 0px));
    z-index: 2;
    display: flex;
    gap: 1px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: var(--radius-lg, 10px);
    overflow: hidden;
    background: var(--surface-border, #2a2a2a);
    box-shadow: var(--elev-control, 0 4px 14px -6px rgba(0, 0, 0, 0.7));
}

.ts-map3d-btn {
    min-height: var(--control-h, 34px);
    padding: 0 12px;
    border: 0;
    background: var(--float-bg, rgba(18, 18, 20, 0.96));
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: var(--text-ui, 12.5px);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast, 120ms) var(--ease-out, ease-out),
                color var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-map3d-btn:hover {
    background: var(--surface-3, #24242a);
}

.ts-map3d-btn:focus-visible,
.ts-map3d-relief-btn:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb, 245, 98, 0), 0.85);
}

/* Relief toggle, bottom right above the drawer and the attribution. */
.ts-map3d-relief {
    position: absolute;
    right: 12px;
    bottom: calc(var(--ts-elev-h, 0px) + 30px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 2px;
    height: var(--control-h, 34px);
    padding: 0 4px 0 10px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: var(--radius-lg, 10px);
    background: var(--float-bg, rgba(18, 18, 20, 0.96));
    box-shadow: var(--elev-control, 0 4px 14px -6px rgba(0, 0, 0, 0.7));
    transition: bottom var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-map3d-relief-label {
    margin-right: 4px;
    color: var(--text-muted, #9aa0a6);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ts-map3d-relief-btn {
    min-width: 30px;
    height: 26px;
    padding: 0 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background var(--motion-fast, 120ms) var(--ease-out, ease-out),
                color var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-map3d-relief-btn:hover {
    background: var(--surface-3, #24242a);
    color: var(--text-primary, #fff);
}

.ts-map3d-relief-btn[aria-checked="true"] {
    background: rgba(var(--accent-rgb, 245, 98, 0), 0.16);
    color: var(--accent, #F56200);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb, 245, 98, 0), 0.45);
}

/* Markers reuse .ts-marker-pin / .ts-marker-dot from style.css. */
.ts-map3d-marker {
    cursor: pointer;
}

.ts-map3d-dot {
    pointer-events: none;
}

.ts-map3d-popup .mapboxgl-popup-content {
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--surface-1, #141416);
    color: var(--text-primary, #fff);
    font-size: 12px;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.9);
}

.ts-map3d-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.ts-map3d-popup.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.ts-map3d-popup.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: var(--surface-1, #141416);
}

.ts-map3d-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.ts-map3d-popup.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.ts-map3d-popup.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: var(--surface-1, #141416);
}

.ts-map3d-popup.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: var(--surface-1, #141416);
}

.ts-map3d-popup.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: var(--surface-1, #141416);
}

/* ── Follow-me mode (follow-me.js) ──────────────────────────────────── */
/* Chase cam over the 3D view: rider puck, speed HUD, Recenter pill. Built
 * for a handlebar mount in sunlight: solid near-black plates, white type,
 * 48 px+ glove targets on touch screens. Never backdrop-filter (iOS WebKit
 * drops the layer under memory pressure); the puck's shadow is a plain
 * filter on the SVG. */

/* Bar buttons carry an icon next to their label. */
.ts-map3d-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ts-map3d-btn[hidden] {
    display: none;
}

.ts-map3d-btn-icon {
    flex: none;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.ts-map3d-follow-btn .ts-map3d-btn-icon path {
    fill: currentColor;
    stroke: none;
}

.ts-map3d-follow-btn[aria-pressed="true"] {
    color: var(--accent, #F56200);
    background: rgba(var(--accent-rgb, 245, 98, 0), 0.16);
}

.ts-map3d-follow-btn[aria-pressed="true"]:hover {
    background: rgba(var(--accent-rgb, 245, 98, 0), 0.24);
}

.ts-orient-needle {
    fill: var(--accent, #F56200);
    stroke: none;
}

.ts-follow-orient.is-north .ts-orient-needle {
    fill: var(--danger, #ef4444);
}

/* Phones: the follow buttons drop to icons so the bar leaves the toolbar room. */
@media (max-width: 520px) {
    .ts-map3d-follow-btn .ts-map3d-btn-label,
    .ts-follow-orient .ts-map3d-btn-label {
        display: none;
    }
}

/* Glove targets while riding. */
@media (pointer: coarse) {
    .ts-map3d.is-following .ts-map3d-btn {
        min-width: 48px;
        min-height: 48px;
        padding: 0 16px;
        font-size: 14px;
    }

    .ts-map3d.is-following .ts-map3d-btn-icon {
        width: 20px;
        height: 20px;
    }

    /* The compass (shown while paused) clears the taller bar. */
    .ts-map3d.is-following .mapboxgl-ctrl-top-left {
        top: calc(62px + var(--ts3d-stack, 0px) + env(safe-area-inset-top, 0px));
    }
}

/* The compass would fight heading-up; it returns while paused so a
 * rotated map can be reset. Relief is fixed at street level while following. */
.ts-map3d.is-following:not(.is-follow-paused) .mapboxgl-ctrl-top-left,
.ts-map3d.is-following .ts-map3d-relief {
    display: none;
}

/* Rider puck: dark disc, white ring, orange chevron. Reads on satellite,
 * snow, desert and dark styles alike. Faces the screen; the arrow turns. */
.ts-follow-puck {
    z-index: 3;
    width: 56px;
    height: 56px;
    pointer-events: none;
}

.ts-follow-halo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(var(--accent-rgb, 245, 98, 0), 0.45);
    border-radius: 50%;
    background: rgba(var(--accent-rgb, 245, 98, 0), 0.1);
    transform: translate(-50%, -50%);
    transition: width var(--motion-slow, 360ms) var(--ease-out, ease-out),
                height var(--motion-slow, 360ms) var(--ease-out, ease-out);
}

.ts-follow-halo[hidden] {
    display: none;
}

.ts-follow-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb, 245, 98, 0), 0.6);
    animation: ts-locate-pulse 1.6s ease-out infinite;
}

.ts-follow-puck.is-heading .ts-follow-pulse {
    display: none;
}

.ts-follow-arrow {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 48px;
    height: 48px;
    overflow: visible;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
    transform-origin: 50% 50%;
}

.ts-follow-disc {
    fill: var(--surface-0, #0d0d0d);
    stroke: #fff;
    stroke-width: 3;
}

.ts-follow-chevron {
    fill: var(--accent, #F56200);
    stroke: var(--on-accent, #0b0b0b);
    stroke-width: 1.5;
    stroke-linejoin: round;
    display: none;
}

.ts-follow-center {
    fill: var(--accent, #F56200);
}

.ts-follow-puck.is-heading .ts-follow-chevron {
    display: inline;
}

.ts-follow-puck.is-heading .ts-follow-center {
    display: none;
}

.ts-follow-puck.is-stale .ts-follow-chevron,
.ts-follow-puck.is-stale .ts-follow-center {
    fill: var(--road-unknown, #6B7280);
}

.ts-follow-puck.is-stale .ts-follow-arrow {
    opacity: 0.7;
}

.ts-follow-puck.is-stale .ts-follow-pulse {
    display: none;
}

/* Speed HUD, bottom left above the Mapbox logo and the drawer. */
.ts-follow-hud {
    position: absolute;
    z-index: 2;
    left: calc(12px + env(safe-area-inset-left, 0px));
    bottom: calc(var(--ts-elev-h, 0px) + 36px + env(safe-area-inset-bottom, 0px));
    min-width: 96px;
    min-height: 56px;
    padding: 6px 14px 8px;
    border: var(--hairline, 1px solid #2a2a2a);
    border-radius: var(--radius-xl, 12px);
    background: rgba(10, 10, 12, 0.92);
    box-shadow: var(--elev-control, 0 4px 14px -6px rgba(0, 0, 0, 0.7));
    color: #fff;
    pointer-events: none;
    transition: bottom var(--motion-base, 200ms) var(--ease-out, ease-out);
}

/* Clear of the collapsed elevation pill, which sits bottom left too. */
.ts-elev-pill .ts-follow-hud {
    bottom: calc(52px + env(safe-area-inset-bottom, 0px));
}

.ts-follow-speed-row {
    display: flex;
    align-items: baseline;
}

.ts-follow-speed {
    font: 800 34px/1 'Barlow Condensed', Inter, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.ts-follow-speed-unit {
    margin-left: 4px;
    color: rgba(255, 255, 255, 0.72);
    font: 700 12px/1 Inter, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ts-follow-meta {
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.72);
    font: 600 var(--text-meta, 11.5px)/1.3 Inter, sans-serif;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ts-follow-hud.is-stale .ts-follow-meta {
    color: var(--warn, #facc15);
}

/* Recenter: bottom centre, the one bright control on the screen. */
.ts-follow-recenter {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: calc(var(--ts-elev-h, 0px) + 40px + env(safe-area-inset-bottom, 0px));
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 22px 0 18px;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--accent, #F56200);
    color: var(--on-accent, #0b0b0b);
    font: 700 15px/1 Inter, sans-serif;
    box-shadow: var(--elev-popover, 0 16px 40px -14px rgba(0, 0, 0, 0.85)), var(--glow-accent, none);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity var(--motion-base, 200ms) var(--ease-out, ease-out),
                transform var(--motion-base, 200ms) var(--ease-spring, ease-out),
                bottom var(--motion-base, 200ms) var(--ease-out, ease-out),
                visibility 0s linear var(--motion-base, 200ms);
    -webkit-tap-highlight-color: transparent;
}

.ts-follow-recenter.is-shown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.ts-follow-recenter:hover {
    background: var(--accent-hover, #FF7020);
}

.ts-follow-recenter:active {
    transform: translate(-50%, 0) scale(0.97);
}

.ts-follow-recenter:focus-visible {
    outline: none;
    box-shadow: var(--glow-focus, 0 0 0 3px rgba(245, 98, 0, 0.8));
}

.ts-follow-recenter-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Phones: the HUD owns the bottom left, so Recenter moves to the right
 * thumb (Relief is hidden while following). */
@media (max-width: 520px) {
    .ts-follow-recenter {
        left: auto;
        right: calc(12px + env(safe-area-inset-right, 0px));
        transform: translateY(8px);
    }

    .ts-follow-recenter.is-shown {
        transform: none;
    }

    .ts-follow-recenter:active {
        transform: scale(0.97);
    }
}

.ts-follow-live {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ── Route emphasis (map.js highlightRoute) ───────────────────────── */
/* Width and opacity ease when a route is emphasized or dimmed. The
 * motion tokens drop to 0ms under prefers-reduced-motion. */
.ts-route-part {
    transition: stroke-opacity var(--motion-slow, 360ms) var(--ease-out, ease-out),
                stroke-width var(--motion-slow, 360ms) var(--ease-out, ease-out);
}

/* Phones: the Relief control drops its label to stay compact. */
@media (max-width: 480px) {
    .ts-map3d-relief {
        padding-left: 4px;
    }

    .ts-map3d-relief-label {
        display: none;
    }
}

/* ── Discover: community routes on the map (discover.js) ─────────────── */
/* Faint lines in their own pane under the rider's routes, plus a compact
 * panel (filters, ranked list, route card, rating form) docked at the
 * bottom left above the elevation drawer. Solid backgrounds only, no
 * backdrop-filter (see the iOS note above). Line colors mirror
 * LINE_COLORS in discover.js. */
.ts-disc-pane path.ts-disc-line {
    animation: ts-disc-line-in var(--motion-slow, 360ms) var(--ease-out, ease-out);
    transition: stroke-opacity var(--motion-base, 200ms) var(--ease-out, ease-out),
                stroke-width var(--motion-base, 200ms) var(--ease-out, ease-out);
}

@keyframes ts-disc-line-in {
    from { stroke-opacity: 0; }
}

.ts-disc-pane.has-focus path.ts-disc-line {
    stroke-opacity: 0.26;
}

.ts-disc-pane path.ts-disc-line.is-hot,
.ts-disc-pane path.ts-disc-line.is-selected {
    stroke-opacity: 1;
    stroke-width: 4px;
}

.ts-disc-pane path.ts-disc-halo {
    animation: ts-disc-line-in var(--motion-slow, 360ms) var(--ease-out, ease-out);
}

.ts-disc-pane path.is-loaded {
    display: none;
}

/* Hover tooltip on a line. */
.leaflet-tooltip.ts-disc-tip {
    padding: 6px 9px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: 8px;
    background: rgba(12, 12, 14, 0.97);
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.9);
    color: var(--text-primary, #e4e4e7);
    font: 500 11.5px/1.35 "Inter", sans-serif;
    white-space: nowrap;
}

.leaflet-tooltip-top.ts-disc-tip::before {
    border-top-color: rgba(12, 12, 14, 0.97);
}

.leaflet-tooltip-bottom.ts-disc-tip::before {
    border-bottom-color: rgba(12, 12, 14, 0.97);
}

.leaflet-tooltip-left.ts-disc-tip::before {
    border-left-color: rgba(12, 12, 14, 0.97);
}

.leaflet-tooltip-right.ts-disc-tip::before {
    border-right-color: rgba(12, 12, 14, 0.97);
}

.ts-disc-tip-body {
    display: flex;
    flex-direction: column;
    max-width: 240px;
}

.ts-disc-tip-name {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
}

.ts-disc-tip-meta {
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-variant-numeric: tabular-nums;
}

/* Panel */
.ts-disc {
    --disc-bottom: calc(var(--ts-elev-h, 0px) + 12px);
    position: absolute;
    left: 12px;
    bottom: var(--disc-bottom);
    z-index: 960;
    display: flex;
    flex-direction: column;
    width: 312px;
    max-width: calc(100% - 24px);
    max-height: calc(100% - var(--disc-top, 12px) - var(--disc-bottom));
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: var(--radius-xl, 12px);
    background: rgba(12, 12, 14, 0.97);
    box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.9), var(--inner-hi, inset 0 1px 0 rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #e4e4e7);
    font-size: 12.5px;
    animation: ts-disc-in var(--motion-base, 200ms) var(--ease-out, ease-out);
    transition: bottom var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-disc[hidden] {
    display: none;
}

/* The collapsed drawer pill sits at the bottom left: ride above it. */
.ts-elev-pill .ts-disc {
    --disc-bottom: 48px;
}

@keyframes ts-disc-in {
    from { opacity: 0; transform: translateY(6px); }
}

.ts-disc-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
    padding: 4px 4px 4px 2px;
}

/* Thin sweep under the header while a request is in flight. */
.ts-disc-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb, 245, 98, 0), 0.85), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-disc.is-loading .ts-disc-head::after {
    opacity: 1;
    animation: ts-disc-sweep 1.1s var(--ease-in-out, ease-in-out) infinite;
}

@keyframes ts-disc-sweep {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

.ts-disc-collapse {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ts-disc-collapse:hover {
    background: rgba(255, 255, 255, 0.04);
}

.ts-disc-compass,
.ts-disc-chevron,
.ts-disc-x svg,
.ts-disc-back-icon {
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ts-disc-compass {
    width: 16px;
    height: 16px;
    color: var(--accent, #F56200);
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb, 245, 98, 0), 0.45));
}

.ts-disc-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ts-disc-count {
    min-width: 0;
    margin-left: auto;
    overflow: hidden;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ts-disc-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    transition: transform var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-disc.is-collapsed .ts-disc-chevron {
    transform: rotate(180deg);
}

.ts-disc-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    cursor: pointer;
}

.ts-disc-x svg {
    width: 13px;
    height: 13px;
}

.ts-disc-x:hover {
    background: var(--surface-3, #222225);
    color: var(--text-primary, #fff);
}

.ts-disc-collapse:focus-visible,
.ts-disc-x:focus-visible,
.ts-disc-row:focus-visible,
.ts-disc-chip:focus-visible,
.ts-disc-btn:focus-visible,
.ts-disc-back:focus-visible,
.ts-disc-link:focus-visible,
.ts-disc-star:focus-visible,
.ts-disc-retry:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb, 245, 98, 0), 0.85);
}

/* Filters */
.ts-disc-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
    flex-wrap: wrap;
    padding: 0 10px 8px;
}

.ts-disc-filters[hidden] {
    display: none;
}

.ts-disc-seg,
.ts-disc-answers {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ts-disc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: 999px;
    background: var(--surface-2, #1a1a1a);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font: inherit;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                background var(--motion-fast, 120ms) var(--ease-out, ease-out),
                color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                transform var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-disc-seg .ts-disc-chip[data-surface]:not([data-surface=""])::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--disc-c);
}

.ts-disc-chip:hover {
    border-color: rgba(var(--accent-rgb, 245, 98, 0), 0.6);
    color: var(--text-primary, #fff);
}

.ts-disc-chip.is-on {
    border-color: rgba(var(--accent-rgb, 245, 98, 0), 0.75);
    background: rgba(var(--accent-rgb, 245, 98, 0), 0.14);
    color: var(--text-primary, #fff);
    box-shadow: 0 0 10px -4px rgba(var(--accent-rgb, 245, 98, 0), 0.6);
}

.ts-disc-chip:active,
.ts-disc-btn:active:not(:disabled),
.ts-disc-star:active {
    transform: scale(0.96);
}

/* Distance filter: a chip that opens a TsMenu listbox. */
.ts-disc-dist {
    flex: none;
    gap: 4px;
    padding-right: 6px;
}

.ts-disc-caret {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
    transition: transform var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-disc-dist.is-open {
    border-color: rgba(var(--accent-rgb, 245, 98, 0), 0.6);
    color: var(--text-primary, #fff);
}

.ts-disc-dist.is-open .ts-disc-caret {
    transform: rotate(180deg);
}

/* Body: status, list or card */
.ts-disc-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.ts-disc-body[hidden] {
    display: none;
}

.ts-disc-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 14px 15px;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

.ts-disc-status[hidden] {
    display: none;
}

.ts-disc-status[data-kind="unavailable"],
.ts-disc-status[data-kind="zoom"] {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
}

.ts-disc-retry,
.ts-disc-link,
.ts-disc-back {
    padding: 2px 4px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.ts-disc-retry {
    color: var(--accent, #F56200);
    font-weight: 600;
}

.ts-disc-link {
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.18);
    text-underline-offset: 3px;
}

.ts-disc-link:hover,
.ts-disc-back:hover {
    color: var(--text-primary, #fff);
}

.ts-disc-list {
    margin: 0;
    padding: 4px 0;
    list-style: none;
}

.ts-disc-list[hidden] {
    display: none;
}

.ts-disc-row {
    --disc-c: #8B93A1;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    animation: ts-disc-row-in var(--motion-base, 200ms) var(--ease-out, ease-out) both;
    animation-delay: calc(var(--i, 0) * 18ms);
    transition: background var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

@keyframes ts-disc-row-in {
    from { opacity: 0; transform: translateY(3px); }
}

.ts-disc-row:hover,
.ts-disc-row.is-hot {
    background: rgba(255, 255, 255, 0.045);
}

.ts-disc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--disc-c);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--disc-c) 18%, transparent);
    transition: box-shadow var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-disc-row.is-hot .ts-disc-dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--disc-c) 35%, transparent), 0 0 8px var(--disc-c);
}

.ts-disc-row-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ts-disc-row-name,
.ts-disc-row-meta {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ts-disc-row-name {
    font-weight: 600;
}

.ts-disc-row-meta {
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 11px;
}

.ts-disc-score {
    color: var(--accent, #F56200);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ts-disc-score-n {
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 10.5px;
    font-weight: 500;
}

.ts-disc-score.is-new,
.ts-disc-new {
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ts-disc-more {
    padding: 6px 12px 8px;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 11px;
    text-align: center;
}

/* Route card */
.ts-disc-card {
    --disc-c: #8B93A1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 12px;
    user-select: text;
    -webkit-user-select: text;
    animation: ts-seg-in var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-disc-card[hidden] {
    display: none;
}

.ts-disc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-left: -4px;
}

.ts-disc-back {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 24px;
}

.ts-disc-back-icon {
    width: 13px;
    height: 13px;
}

.ts-disc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    height: 20px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border: 1px solid color-mix(in srgb, var(--disc-c) 45%, transparent);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    background: color-mix(in srgb, var(--disc-c) 16%, transparent);
    color: var(--text-primary, #e4e4e7);
    color: color-mix(in srgb, var(--disc-c) 55%, #fff);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ts-disc-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--disc-c);
}

.ts-disc-name {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.ts-disc-meta {
    margin: -5px 0 0;
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.ts-disc-card .surface-mix.ts-disc-mix {
    margin: 0;
}

.ts-disc-rating {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.ts-disc-stars {
    color: rgba(255, 255, 255, 0.16);
    font-size: 13px;
    letter-spacing: 1px;
}

.ts-disc-stars .is-on {
    color: var(--accent, #F56200);
    text-shadow: 0 0 8px rgba(var(--accent-rgb, 245, 98, 0), 0.45);
}

.ts-disc-rating-val {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.ts-disc-muted {
    color: var(--text-muted, rgba(255, 255, 255, 0.46));
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.ts-disc-fb {
    display: grid;
    grid-template-columns: auto minmax(40px, 1fr);
    align-items: center;
    gap: 3px 10px;
}

.ts-disc-fb-label {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 11.5px;
}

.ts-disc-fb-bar {
    display: flex;
    gap: 2px;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
}

.ts-disc-fb-bar > span {
    flex-basis: 0;
    min-width: 3px;
}

.ts-disc-fb-yes { background: var(--success, #22c55e); }
.ts-disc-fb-partly { background: var(--warn, #facc15); }
.ts-disc-fb-no { background: var(--danger, #ef4444); }

.ts-disc-fb .ts-disc-muted {
    grid-column: 1 / -1;
    font-size: 10.5px;
}

.ts-disc-notes {
    display: -webkit-box;
    margin: 0;
    padding-left: 9px;
    overflow: hidden;
    border-left: 2px solid rgba(255, 255, 255, 0.14);
    border-left: 2px solid color-mix(in srgb, var(--disc-c) 55%, transparent);
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 12px;
    font-style: italic;
    line-height: 1.45;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.ts-disc-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 2px;
}

.ts-disc-btn {
    flex: none;
    height: 28px;
    padding: 0 11px;
    border: 1px solid var(--surface-border, #2a2a2a);
    border-radius: 999px;
    background: var(--surface-2, #1a1a1a);
    color: var(--text-primary, #fff);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                background var(--motion-fast, 120ms) var(--ease-out, ease-out),
                box-shadow var(--motion-fast, 120ms) var(--ease-out, ease-out),
                transform var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-disc-btn:hover:not(:disabled) {
    border-color: rgba(var(--accent-rgb, 245, 98, 0), 0.7);
    background: rgba(var(--accent-rgb, 245, 98, 0), 0.08);
}

.ts-disc-btn[aria-expanded="true"] {
    border-color: rgba(var(--accent-rgb, 245, 98, 0), 0.7);
}

.ts-disc-btn--primary {
    border-color: transparent;
    background: var(--accent, #F56200);
    color: var(--on-accent, #0b0b0b);
    box-shadow: var(--inner-hi, inset 0 1px 0 rgba(255, 255, 255, 0.08));
}

.ts-disc-btn--primary:hover:not(:disabled) {
    border-color: transparent;
    background: var(--accent-hover, #FF7020);
    box-shadow: var(--glow-accent, 0 0 14px -4px rgba(245, 98, 0, 0.45));
}

.ts-disc-btn:disabled {
    cursor: default;
    opacity: 0.55;
}

/* Rating form */
.ts-disc-rate {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    animation: ts-seg-in var(--motion-base, 200ms) var(--ease-out, ease-out);
}

.ts-disc-rate.is-busy {
    opacity: 0.7;
}

.ts-disc-rate-label {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 11.5px;
}

.ts-disc-rate-stars {
    display: flex;
    gap: 2px;
    margin: -2px 0 4px -3px;
}

.ts-disc-star {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: rgba(255, 255, 255, 0.18);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--motion-fast, 120ms) var(--ease-out, ease-out),
                transform var(--motion-fast, 120ms) var(--ease-spring, ease-out),
                text-shadow var(--motion-fast, 120ms) var(--ease-out, ease-out);
}

.ts-disc-star.is-on {
    color: var(--accent, #F56200);
    text-shadow: 0 0 10px rgba(var(--accent-rgb, 245, 98, 0), 0.55);
}

.ts-disc-star:hover {
    transform: scale(1.12);
}

.ts-disc-rate-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .ts-disc,
    .ts-disc-row,
    .ts-disc-card,
    .ts-disc-rate,
    .ts-disc-pane path.ts-disc-line,
    .ts-disc-pane path.ts-disc-halo {
        animation: none;
    }

    .ts-disc.is-loading .ts-disc-head::after {
        animation: none;
        background-size: 100% 100%;
        opacity: 0.5;
    }

    .ts-disc-star:hover {
        transform: none;
    }
}

/* Phones and the stacked layout: a full-width sheet along the bottom. */
@media (max-width: 768px) {
    .ts-disc {
        --disc-bottom: calc(var(--ts-elev-h, 0px) + 8px);
        left: 8px;
        right: 8px;
        width: auto;
        max-width: none;
        /* The stacked map is short: never cover more than ~60% of it. */
        max-height: min(calc(100% - var(--disc-top, 8px) - var(--disc-bottom)), 60%);
    }

    .ts-elev-pill .ts-disc {
        --disc-bottom: 46px;
    }

    /* The card needs the room more than the filters do. */
    .ts-disc.is-card .ts-disc-filters {
        display: none;
    }

    /* One swipeable filter row instead of two wrapped ones. */
    .ts-disc-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ts-disc-filters::-webkit-scrollbar {
        display: none;
    }

    .ts-disc-seg {
        flex: none;
        flex-wrap: nowrap;
    }

    .ts-disc-collapse,
    .ts-disc-x {
        height: 36px;
    }

    .ts-disc-x {
        width: 36px;
    }

    .ts-disc-chip {
        height: 28px;
    }

    .ts-disc-row {
        padding: 9px 12px;
    }

    .ts-disc-btn {
        height: 32px;
    }

    .ts-disc-star {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }
}