/* ============================================
   RUN MAD MAPS — Map Page Styles
   ============================================ */

/* --- Full-page map container --- */
#map-container {
    position: fixed;
    top: var(--nav-height, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

/* --- Panel embed mode --- */
.map-panel-embed {
    position: relative;
    width: 100%;
    height: 100%;
}

/* --- Navigation controls — brand colours --- */
.mapboxgl-ctrl-group {
    background: #171A14;
    border: 1px solid #2a2e24;
    border-radius: 0;
    box-shadow: none;
}

.mapboxgl-ctrl-group button {
    background: #171A14;
    color: #FFFFFF;
    border-radius: 0;
}

.mapboxgl-ctrl-group button:hover {
    background: #1f2219;
}

.mapboxgl-ctrl-group button + button {
    border-top: 1px solid #2a2e24;
}

.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon,
.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon {
    filter: invert(1);
}

/* --- Error state --- */
.map-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #171A14;
    color: #FFFFFF;
    font-family: 'Space Mono', monospace;
    text-align: center;
    gap: 16px;
}

.map-error-state p {
    color: #6b7560;
    font-size: 14px;
}

/* ============================================
   Email Signup Overlay
   ============================================ */

/* Backdrop */
.rmm-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(23, 26, 20, 0.6);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rmm-overlay-backdrop.hidden {
    display: none;
}

/* Card */
.rmm-overlay-card {
    background: #171A14;
    border: 1px solid #2a2e24;
    border-radius: 12px;
    padding: 40px 36px 32px;
    max-width: 400px;
    width: calc(100% - 32px);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rmm-overlay-eyebrow {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7560;
    margin: 0;
}

.rmm-overlay-headline {
    font-family: 'Space Mono', monospace;
    font-size: 1.35rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    margin: 0;
}

.rmm-overlay-body {
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    color: #a8b09e;
    line-height: 1.6;
    margin: 0;
}

/* Form fields */
.rmm-overlay-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rmm-overlay-field input {
    background: #1e2419;
    border: 1px solid #2a2e24;
    border-radius: 6px;
    color: #FFFFFF;
    font-family: 'Space Mono', monospace;
    font-size: 0.82rem;
    padding: 10px 14px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.rmm-overlay-field input::placeholder {
    color: #4a5240;
}

.rmm-overlay-field input:focus {
    border-color: #4a5a3a;
}

/* Submit button */
.rmm-overlay-submit {
    background: #FF4E50;
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 12px 24px;
    cursor: pointer;
    width: 100%;
    letter-spacing: 0.05em;
}

.rmm-overlay-submit:hover {
    background: #e83d3f;
}

.rmm-overlay-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Consent */
.rmm-overlay-consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.rmm-overlay-consent input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: #FF4E50;
}

.rmm-overlay-consent label {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    color: #6b7560;
    line-height: 1.5;
}

.rmm-overlay-consent label a {
    color: #a8b09e;
    text-decoration: underline;
}

/* Error / Success messages */
.rmm-overlay-error {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: #FF4E50;
    margin: 0;
    min-height: 1em;
}

.rmm-overlay-success {
    font-family: 'Space Mono', monospace;
    font-size: 0.85rem;
    color: #a8b09e;
    text-align: center;
    margin: 8px 0 0;
}

/* CTA link variant (live mode — <a> styled as button) */
.rmm-overlay-cta-link {
    text-decoration: none;
    display: block;
    text-align: center;
    box-sizing: border-box;
}

/* Dismiss link */
.rmm-overlay-dismiss {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    color: #4a5240;
    text-align: center;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.rmm-overlay-dismiss:hover {
    color: #6b7560;
}

/* --- Mobile — sheet from bottom --- */
@media (max-width: 480px) {
    .rmm-overlay-backdrop {
        align-items: flex-end;
    }

    .rmm-overlay-card {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        width: 100%;
        padding: 32px 24px 40px;
    }
}

/* ============================================
   Route Info Popup
   ============================================ */

.rmm-route-popup .mapboxgl-popup-content {
    background: #171A14;
    border: 1px solid rgba(255, 78, 80, 0.3);
    border-radius: 8px;
    padding: 14px 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.rmm-route-popup .mapboxgl-popup-tip {
    border-top-color: #171A14;
}

.rmm-route-card-grade {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #FF4E50;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.rmm-route-card-name {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.rmm-route-card-stats {
    display: flex;
    gap: 12px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: #F5ECD7;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(245, 236, 215, 0.15);
    flex-wrap: wrap;
}

.rmm-route-card-action {
    display: block;
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    color: #FF4E50;
    text-align: center;
    text-decoration: none;
    margin-top: 6px;
    cursor: pointer;
}

.rmm-route-card-action:hover {
    text-decoration: underline;
}

.rmm-route-card-meta {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.rmm-route-card-event {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(245, 236, 215, 0.4);
}

.rmm-route-card-surface {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    color: rgba(245, 236, 215, 0.3);
}

/* ============================================
   Route Pulse Animation Dot
   ============================================ */

.rmm-pulse-dot {
    width: 10px;
    height: 10px;
    background: #FF4E50;
    border-radius: 50%;
    box-shadow: 0 0 12px 4px rgba(255, 78, 80, 0.6),
                0 0 24px 8px rgba(255, 78, 80, 0.3);
    pointer-events: none;
}

/* ============================================
   Cluster Start Markers

   Structure:
     .rmm-cluster-primary-wrap   ← Mapbox positions this (carries translate)
       └ .rmm-cluster-primary    ← inner circle, scales on hover
     .rmm-cluster-secondary-wrap ← Mapbox positions this
       └ .rmm-cluster-secondary  ← inner circle, fan-in animation

   The wrap/inner split is required because Mapbox writes inline `transform:
   translate(...)` on the marker element. If we transformed the same element
   for the shrink animation we'd overwrite the position. The wrap holds the
   translate; the inner holds the scale.
   ============================================ */

/* Wrap — sized to the inner's total visible footprint so flex doesn't shrink
   the inner on its main axis (which previously made it oval: 14 wide × 18 tall
   from a 14×14 box plus the 2px border). 18px = 14 content + 2px border each
   side. Also acts as the hit area, which stays stable when the inner scales. */
.rmm-cluster-primary-wrap,
.rmm-cluster-secondary-wrap {
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Primary — sits at the shared start coord; hover expands secondaries.
   Brief 1.1: trail markers are simple, clean circles — same look as a single
   (non-cluster) start marker.
   --rmm-cluster-scale is set on <html> by syncClusterScale() so the DOM
   primary tracks the visible size of the GL singletons (rmm-route-starts) at
   the current zoom level. Without this the primary would be a fixed 18px and
   look noticeably bigger than the singletons at low zoom. */
.rmm-cluster-primary {
    width: 14px;
    height: 14px;
    background: #FF4E50;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    opacity: 0.9;
    pointer-events: none; /* events are handled on the wrap */
    transform-origin: center;
    transform: scale(var(--rmm-cluster-scale, 1));
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brief 1.2: parent shrinks ~30% on expand. Composes with the zoom scale so
   the shrink stays proportional whatever the current zoom is. */
.rmm-cluster-primary-wrap.is-expanded .rmm-cluster-primary {
    transform: scale(calc(var(--rmm-cluster-scale, 1) * 0.7));
    opacity: 0.75;
}

/* Secondary — radiated around the primary on hover, one per trail.
   Brief 1.2: children sit at the original (full) marker size — same as a
   single-trail start so all event markers read as the same primitive. The
   zoom scale also applies here so secondaries match the singletons at every
   zoom level, not just at the maximum-radius zoom. */
.rmm-cluster-secondary {
    width: 14px;
    height: 14px;
    background: #FF4E50;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
    opacity: 0.9;
    pointer-events: none; /* events are handled on the wrap */
    transform-origin: center;
    transform: scale(var(--rmm-cluster-scale, 1)); /* steady-state after fan-in */
    animation: rmm-cluster-secondary-in 220ms cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Children fan in from a small scale with a slight overshoot, evoking the
   "radiating from the parent" feel. The keyframes multiply by the zoom scale
   so the entrance lands on the correct steady-state size. animation-delay is
   set per-index in JS so they appear to pop out one after another. */
@keyframes rmm-cluster-secondary-in {
    0%   { opacity: 0;   transform: scale(calc(var(--rmm-cluster-scale, 1) * 0.4)); }
    60%  { opacity: 1;   transform: scale(calc(var(--rmm-cluster-scale, 1) * 1.06)); }
    100% { opacity: 0.9; transform: scale(var(--rmm-cluster-scale, 1)); }
}

/* Respect the user's motion preference — disable bouncy entrances and the
   parent shrink transition; the geometry still works, just without the
   animation. */
@media (prefers-reduced-motion: reduce) {
    .rmm-cluster-primary { transition: none; }
    .rmm-cluster-secondary { animation: none; }
}

/* ============================================
   Filter Sidebar
   ============================================ */

/* Toggle button — top-left of map */
.rmm-filter-toggle {
    position: fixed;
    top: calc(var(--nav-height, 64px) + 12px);
    left: 12px;
    z-index: 10;
    width: 36px;
    height: 36px;
    background: #171A14;
    border: 1px solid #2a2e24;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s;
}

.rmm-filter-toggle:hover {
    background: #1f2219;
}

.rmm-filter-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Panel */
.rmm-filter-panel {
    position: fixed;
    top: var(--nav-height, 64px);
    left: 0;
    bottom: 0;
    width: 240px;
    background: #171A14;
    border-right: 1px solid #2a2e24;
    z-index: 9;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    font-family: 'Space Mono', monospace;
    scrollbar-width: thin;
    scrollbar-color: #2a2e24 transparent;
}

.rmm-filter-panel.open {
    transform: translateX(0);
}

/* Panel header */
.rmm-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #2a2e24;
}

.rmm-filter-title {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rmm-filter-close {
    background: none;
    border: none;
    color: #6b7560;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s;
}

.rmm-filter-close:hover {
    color: #FFFFFF;
}

.rmm-filter-close svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* Section grouping */
.rmm-filter-section {
    padding: 14px 16px 6px;
}

.rmm-filter-section-label {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7560;
    margin-bottom: 10px;
}

/* Individual toggle row */
.rmm-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
}

.rmm-filter-row-label {
    font-size: 12px;
    color: #a8b09e;
    user-select: none;
}

.rmm-filter-row.disabled .rmm-filter-row-label {
    color: #3a3e34;
}

/* Toggle switch */
.rmm-toggle {
    position: relative;
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}

.rmm-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.rmm-toggle-track {
    position: absolute;
    inset: 0;
    background: #2a2e24;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s;
}

.rmm-toggle input:checked + .rmm-toggle-track {
    background: #FF4E50;
}

.rmm-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: transform 0.2s;
}

.rmm-toggle input:checked + .rmm-toggle-track::after {
    transform: translateX(14px);
}

/* Disabled toggle */
.rmm-filter-row.disabled .rmm-toggle-track {
    background: #1e2219;
    cursor: not-allowed;
}

.rmm-filter-row.disabled .rmm-toggle-track::after {
    background: #3a3e34;
}

/* Divider between sections */
.rmm-filter-divider {
    height: 1px;
    background: #2a2e24;
    margin: 4px 16px;
}

/* Hide cluster markers when routes are toggled off.
   Targets the wraps (which Mapbox positions) so the entire DOM marker is
   removed from layout. The inner-class fallbacks keep behaviour stable in
   case any caller still writes the legacy class names. */
.rmm-clusters-hidden .rmm-cluster-primary-wrap,
.rmm-clusters-hidden .rmm-cluster-secondary-wrap,
.rmm-clusters-hidden .rmm-cluster-primary,
.rmm-clusters-hidden .rmm-cluster-secondary {
    display: none !important;
}

/* --- Mobile --- */
@media (max-width: 768px) {
    #map-container {
        top: var(--nav-height, 64px);
    }

    .mapboxgl-ctrl-top-right {
        top: 8px;
        right: 8px;
    }

    .rmm-filter-panel {
        width: 220px;
    }

    .rmm-filter-toggle {
        top: calc(var(--nav-height, 64px) + 8px);
        left: 8px;
    }
}