/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #4117A1;
    --secondary-color: #6b3fcf;
    --accent-color: #E74C3C;
    --background-light: #f8f5ff;
    --background-dark: #0D0D0D;
    --text-light: #FFFFFF;
    --text-dark: #1a0a2e;
    --border-color: #ddd0f5;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 4px 16px rgba(0, 0, 0, 0.15);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    background-color: var(--background-light);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

body.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-light);
}

/* App Container */
#app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
}

.btn-icon {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 10px 15px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

/* Main Container */
main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Map Container */
.map-container {
    flex: 1;
    position: relative;
    background-color: #E8EEF7;
}

.leaflet-container {
    background-color: #E8EEF7;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Remove tile grid boundaries */
.leaflet-tile {
    outline: none !important;
    border: none !important;
}

.leaflet-tile-pane canvas {
    outline: none !important;
    border: none !important;
}

/* ── Safari pinch-zoom freeze fix ───────────────────────────
   Safari fires resize + zoomend continuously during a pinch gesture.
   Setting touch-action:none on the map container tells Safari to hand
   ALL touch gestures to Leaflet/JS rather than trying to handle them
   natively — this prevents the "freeze for 10 seconds" when zooming.
   The hex canvas and tile pane get the same treatment so they don't
   intercept touches either.
   -webkit-overflow-scrolling:touch is removed from the map because
   momentum scrolling conflicts with Leaflet's own pan inertia on iOS.
────────────────────────────────────────────────────────────── */
#map {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    /* Allow the rotated map pane to extend beyond the container
       without showing the page background — overflow visible is needed
       so the scaled+rotated .leaflet-map-pane covers the viewport edges.
       Leaflet's own clipping is done via the pane, not #map, so this
       is safe and doesn't affect normal (non-rotated) operation. */
    overflow: visible;
}

#hex-overlay-canvas {
    touch-action: none;
}

/* Control Panel */
.control-panel {
    width: 320px;
    background: white;
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 999;
    max-height: 100vh;
    overflow-y: auto;
    padding: 20px 20px 0;
    display: flex;
    flex-direction: column;
}

body.dark-mode .control-panel {
    background: #2A2A2A;
    color: var(--text-light);
    border-right-color: #444;
}

.panel-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

body.dark-mode .panel-section {
    border-bottom-color: #444;
}

.panel-section:last-child {
    border-bottom: none;
}

.panel-section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--primary-color);
}

body.dark-mode .panel-section h3 {
    color: var(--secondary-color);
}

/* Info Box */
.info-box {
    background: var(--background-light);
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    margin-top: 10px;
}

body.dark-mode .info-box {
    background: #3A3A3A;
    color: var(--text-light);
}

.info-box p {
    margin-bottom: 6px;
}

.info-box p:last-child {
    margin-bottom: 0;
}

/* About Text */
.about-text {
    font-size: 12px;
    line-height: 1.5;
    color: #666;
}

body.dark-mode .about-text {
    color: #AAA;
}

/* ── Control Panel Header (site brand + settings button) ── */
.control-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 4px 14px 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--secondary-color);
}

.site-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.site-brand-icon {
    font-size: 22px;
    line-height: 1;
}

.site-brand-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.3px;
}

body.dark-mode .site-brand-name {
    color: var(--text-light);
}

body.dark-mode .site-brand-icon img {
    filter: brightness(0) invert(1);
}

body.dark-mode .control-panel-header {
    border-bottom-color: var(--secondary-color);
}

/* ── Proximity map zoom warning banner ─────────────────────────────
   Shown inside #map when the Tower Proximity layer is active but the
   current zoom is below the minimum (10). Positioned at the bottom
   centre of the map, above the OSM attribution and legend bars.
   Slides in/out with a CSS transition on the .visible class.
───────────────────────────────────────────────────────────────── */
.proximity-zoom-banner {
    position: absolute;
    bottom: 36px;          /* above OSM attribution bar (~28px) */
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    z-index: 900;          /* above tiles (400), below controls (800+) — same as watermark */
    background: rgba(30, 30, 40, 0.82);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.proximity-zoom-banner.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* On mobile: lift above bottom nav + legend */
@media (max-width: 768px) {
    .proximity-zoom-banner {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 32px);
        font-size: 11px;
        padding: 5px 12px;
        max-width: calc(100vw - 32px);
        white-space: normal;
        text-align: center;
    }
}

/* ── Layer section collapsible (Network Layers / Other Layers) ──── */
.layer-section {
    margin-bottom: 4px;
}

/* Section header — clickable, acts as the accordion trigger */
.layer-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px 6px 0;
    cursor: pointer;
    user-select: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: var(--primary-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.layer-section-header:hover {
    color: var(--secondary-color);
}

body.dark-mode .layer-section-header {
    color: #a07ee0;
}

.layer-section-chevron {
    font-size: 10px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: inherit;
    opacity: 0.7;
}

.layer-section.collapsed .layer-section-chevron {
    transform: rotate(-90deg);
}

/* The collapsible body */
.layer-section-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    max-height: 600px; /* large enough — expanded by default */
}

.layer-section.collapsed .layer-section-body {
    max-height: 0;
}

/* Suppress all transitions during initial page load to prevent flash.
   The 'js-ready' class is added to <html> by the inline sync script
   after it has set the correct active states — from that point on
   transitions are allowed. */
html:not(.js-ready) .layer-btn {
    transition: none !important;
}

/* ── Layers section title ───────────────────────────────────── */
.layers-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.layers-section-hint {
    font-size: 11px;
    font-weight: 400;
    color: #999;
}

body.dark-mode .layers-section-title {
    color: #a07ee0;
}

body.dark-mode .layers-section-hint {
    color: #666;
}

/* ── Individual layer rows — Apple iOS Settings style ──────── */
/* Each button is a flat full-width row with no box/border.
   A hairline separator appears between rows (via + selector).
   Active state shows a subtle left accent stripe + tint background.
   No rounded corners, no card — just clean flat rows. */
.layer-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 9px 8px 9px 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

/* Allow the text label part of the button to shrink/truncate
   so the action pill always stays visible on the right */
.layer-btn .layer-btn-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Hairline separator between sibling buttons */
.layer-btn + .layer-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10px;
    right: 0;
    height: 1px;
    background: #e8eaed;
}

.layer-btn:hover {
    background: #f5f5f7;
    color: #222;
}

/* Active / ON state — purple left stripe + very light tint */
.layer-btn.active {
    border-left-color: var(--secondary-color);
    background: rgba(107, 63, 207, 0.06);
    color: var(--primary-color);
    font-weight: 600;
}

.layer-btn.active:hover {
    background: rgba(107, 63, 207, 0.10);
}

/* Provider dots inside layer buttons */
.layer-btn .provider-dot {
    opacity: 0.5;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.layer-btn.active .provider-dot {
    opacity: 1;
}

/* Dark mode */
body.dark-mode .layer-btn {
    color: #8a9baa;
    background: transparent;
    border-left-color: transparent;
}

body.dark-mode .layer-btn + .layer-btn::before {
    background: #2e3440;
}

body.dark-mode .layer-btn:hover {
    background: rgba(255,255,255,0.04);
    color: #c8d8e8;
}

body.dark-mode .layer-btn.active {
    border-left-color: #9b6ee8;
    background: rgba(155, 110, 232, 0.10);
    color: #c8aaff;
}

body.dark-mode .layer-btn.active:hover {
    background: rgba(155, 110, 232, 0.16);
}

body.dark-mode .layer-btn.active .provider-dot {
    opacity: 1;
}

/* ── Layer action pill (＋ Add / ✕ Remove) ──────────────────── */
/* A small pill badge pushed to the far right of each layer row.
   CSS-only: the span text is swapped via content in CSS based on
   the .active class — no JS required for the label change. */
.layer-btn-action {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 2px 7px;
    border-radius: 10px;
    background: var(--secondary-color);
    color: #fff;
    white-space: nowrap;
    pointer-events: none; /* click target is the whole row */
    transition: background 0.15s ease, color 0.15s ease;
    /* label set via JS (innerHTML) */
}

/* Inactive state: grey "＋ Add" */
.layer-btn:not(.active) .layer-btn-action {
    content: '＋ Add';
    background: #e0e4ea;
    color: #666;
}

/* Active state: purple "✕ Remove" */
.layer-btn.active .layer-btn-action {
    background: #c0392b;
    color: #fff;
}

/* Dim inactive rows so "removed" layers look visually absent */
.layer-btn:not(.active) {
    opacity: 0.55;
}

.layer-btn:not(.active):hover {
    opacity: 1;
}

/* Dark mode overrides for the pill */
body.dark-mode .layer-btn:not(.active) .layer-btn-action {
    background: #3a4050;
    color: #8a9baa;
}

body.dark-mode .layer-btn.active .layer-btn-action {
    background: #c0392b;
    color: #fff;
}

/* ── Provider filter checkbox list ─────────────────────────── */
.provider-filter-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.provider-filter-item {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    padding: 5px 6px;
    border-radius: 6px;
    transition: background 0.15s;
    user-select: none;
}

.provider-filter-item:hover {
    background: #f0f4f8;
}

body.dark-mode .provider-filter-item:hover {
    background: #3a3a3a;
}

.provider-filter-item input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--secondary-color);
}

.provider-dot {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.15);
}

.provider-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
}

body.dark-mode .provider-label {
    color: var(--text-light);
}

/* Version + ISED date info below the panel header */
.site-version-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: -8px 0 6px 0;
    padding-left: 2px;
}
.site-version-info span {
    font-size: 9.5px;
    color: #aaa;
    line-height: 1.5;
    letter-spacing: 0.01em;
}
.site-version-info .version-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    opacity: 0.85;
}
.site-version-info .version-link:hover {
    opacity: 1;
    border-bottom-style: solid;
}
body.dark-mode .site-version-info span {
    color: #666;
}

/* Tagline below the panel header */
.site-tagline {
    font-size: 11px;
    color: #777;
    margin: 4px 0 16px 0;
    line-height: 1.4;
}

body.dark-mode .site-tagline {
    color: #999;
}

/* Settings button inside the left panel */
.btn-panel-settings {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 38px;
    height: 38px;
    font-size: 19px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

.btn-panel-settings:hover {
    background: #dce6ef;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

body.dark-mode .btn-panel-settings {
    background: #3a3a3a;
    border-color: #555;
    color: white;
}

body.dark-mode .btn-panel-settings:hover {
    background: #4a4a4a;
}

/* Info Panel */
.info-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 480px;           /* wider to fit band tables */
    max-height: 100vh;
    background: white;
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-large);
    z-index: 1050;          /* above control panel (999) and search (1100 only for search input) */
    overflow-y: auto;
    transform: translateX(0);
    transition: transform 0.3s ease;
    /* will-change promotes to its own GPU layer so the slide-in transition
       doesn't fight with map tile compositing on Safari — prevents freeze. */
    will-change: transform;
}

body.dark-mode .info-panel {
    background: #2A2A2A;
    color: var(--text-light);
    border-left-color: #444;
}

.info-panel.hidden {
    transform: translateX(100%);
}

/* ══════════════════════════════════════════════════════════════
   TOWER VIZ FEATURE — Tower Elevation Panel + Button
   To remove: delete this entire block and the matching HTML/JS.
   ══════════════════════════════════════════════════════════════ */

/* "Tower View" toggle button inside the info-panel header */
.btn-tower-viz {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.45);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease;
    line-height: 1.4;
}
.btn-tower-viz:hover  { background: rgba(255,255,255,0.30); }
.btn-tower-viz.active { background: rgba(255,255,255,0.40); }
.btn-tower-viz.hidden { display: none; }

/* Tower visualization panel — sits to the LEFT of #info-panel on desktop */
.tower-viz-panel {
    position: fixed;
    right: 480px;          /* flush against the left edge of info-panel (480px wide) */
    top: 0;
    width: 320px;
    height: 100vh;
    background: white;
    border-left: 1px solid var(--border-color);
    box-shadow: -4px 0 20px rgba(0,0,0,0.12);
    z-index: 1049;         /* just below info-panel (1050) */
    overflow-y: auto;
    transform: translateX(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform;
    display: flex;
    flex-direction: column;
}

body.dark-mode .tower-viz-panel {
    background: #232d38;
    border-left-color: #2e3a44;
    color: var(--text-light);
}

.tower-viz-panel.hidden {
    transform: translateX(calc(100% + 480px));  /* slide off screen to the right */
    opacity: 0;
    pointer-events: none;
}

/* Header bar */
.tower-viz-header {
    background: #2c3e50;
    color: white;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid #1a252f;
}

.tower-viz-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tower-viz-close {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
}
.tower-viz-close:hover { opacity: 1; }

/* SVG content area — fills remaining panel height, no scroll (SVG is sized to fit) */
.tower-viz-content {
    flex: 1;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
}

/* The SVG diagram itself — fills the content area */
.tower-viz-svg {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
}

/* Height label on the left ruler */
.tviz-height-label {
    font-size: 10px;
    fill: #6b7c8d;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Provider name label */
.tviz-provider-label {
    font-size: 10px;
    font-weight: 700;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Band chip text inside SVG */
.tviz-band-label {
    font-size: 9px;
    fill: #4a5568;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body.dark-mode .tviz-height-label  { fill: #8a9baa; }
body.dark-mode .tviz-band-label    { fill: #8a9baa; }

/* Legend row below the SVG */
.tower-viz-legend {
    width: 100%;
    max-width: 300px;
    margin-top: 12px;
    padding: 0 4px;
    font-size: 10px;
    color: #6b7c8d;
    line-height: 1.7;
}

body.dark-mode .tower-viz-legend { color: #8a9baa; }

/* ── Mobile overrides for tower viz panel ── */
@media (max-width: 768px) {
    .tower-viz-panel {
        /* On mobile: slide up from bottom (like a second sheet), full width */
        right: auto;
        left: 0;
        top: auto;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        width: 100%;
        height: 55dvh;
        border-left: none;
        border-top: 2px solid #2c3e50;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.22);
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    }

    .tower-viz-panel.hidden {
        transform: translateY(110%);
        opacity: 0;
    }

    /* Push info-panel up when viz panel is open on mobile */
    .info-panel.viz-open {
        max-height: 45dvh;
    }
}

/* ══ END TOWER VIZ FEATURE ══════════════════════════════════════ */

.panel-header {

    background: var(--primary-color);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}

.panel-header h3 {
    margin: 0;
    font-size: 16px;
}

.btn-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.panel-content {
    padding: 20px;
    font-size: 13px;
}

/* Settings Panel */
.settings-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 350px;
    max-height: 100vh;
    background: white;
    border-left: 1px solid var(--border-color);
    box-shadow: var(--shadow-large);
    z-index: 1001;
    overflow-y: auto;
    transform: translateX(0);
    transition: transform 0.3s ease;
    will-change: transform;
}

body.dark-mode .settings-panel {
    background: #2A2A2A;
    color: var(--text-light);
    border-left-color: #444;
}

.settings-panel.hidden {
    transform: translateX(100%);
}

.setting-group {
    margin-bottom: 15px;
}

.setting-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

.setting-group input[type="range"] {
    width: 100%;
    cursor: pointer;
    accent-color: var(--secondary-color);
}

.setting-group input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
}

#opacity-value {
    font-weight: 600;
    color: var(--secondary-color);
}

/* Buttons */
.btn-primary {
    background: var(--secondary-color);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #5a2cc0;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Loading Indicator — small pill in the top-right of the map */
.loading-indicator {
    position: fixed;
    top: 12px;
    right: 12px;
    background: rgba(65, 23, 161, 0.92);
    color: white;
    padding: 5px 10px 5px 8px;
    border-radius: 20px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.25);
    z-index: 1050;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
    pointer-events: none;
    transition: opacity 0.25s ease;
    /* backdrop-filter removed — causes continuous GPU recompositing on Safari iOS/Mac
       during map panning, blocking the main thread. Solid background used instead. */
}

.loading-indicator.hidden {
    opacity: 0;
}

.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    flex-shrink: 0;
}

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

/* On mobile: nudge below the top bar */
@media (max-width: 768px) {
    .loading-indicator {
        top: calc(40px + env(safe-area-inset-top, 0px) + 8px);
        right: 8px;
    }
}

/* Toast Notification */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 15px 25px;
    border-radius: 6px;
    box-shadow: var(--shadow-large);
    z-index: 997;
    max-width: 400px;
    text-align: center;
    animation: slideUp 0.3s ease;
}

/* On mobile, lift toast above the 56px bottom nav bar */
@media (max-width: 768px) {
    .toast {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    }
}

.toast.hidden {
    display: none;
}

.toast.success {
    background: #2ECC71;
}

.toast.error {
    background: #E74C3C;
}

.toast.info {
    background: #3498DB;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Leaflet Popup */
.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: var(--shadow-large);
}

.leaflet-popup-content {
    font-size: 13px;
    line-height: 1.6;
}

.leaflet-popup-tip {
    background: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .control-panel {
        width: 280px;
    }
    
    .info-panel,
    .settings-panel {
        width: 300px;
    }
}

/* ── Mobile bottom tab bar ──────────────────────────────────── */
.mobile-bottom-nav {
    display: none; /* hidden on desktop */
}

/* ── Mobile bottom sheets ───────────────────────────────────── */
.mobile-bottom-sheet {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    /* Hide the desktop header (if any) */
    .header { display: none; }

    /* ── main fills the full height minus just the bottom nav ── */
    main {
        height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
    }

    /* ── Bottom tab bar ── */
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(56px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--panel-bg, #fff);
        border-top: 1px solid var(--border-color, #e0e6ed);
        z-index: 1200;
        box-shadow: 0 -2px 12px rgba(0,0,0,0.10);
        /* Smooth hide/show when keyboard opens/closes.
           JS adds .keyboard-open on search focus → nav fades out.
           This avoids the "floating" artifact caused by per-frame
           bottom offset updates during the keyboard slide animation. */
        transition: opacity 0.15s ease, transform 0.15s ease;
        transform: translateZ(0);
    }

    /* Hide nav while the search keyboard is open.
       The user doesn't need nav tabs while typing — this is the
       standard UX used by Google Maps, Apple Maps, etc.
       pointer-events:none prevents accidental taps on the hidden bar. */
    .mobile-bottom-nav.keyboard-open {
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
    }

    body.dark-mode .mobile-bottom-nav {
        background: #1e2a32;
        border-top-color: #2e3a44;
    }

    .mobile-tab-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: none;
        cursor: pointer;
        color: #6b7c8d;
        font-size: 10px;
        font-weight: 500;
        padding: 6px 2px 4px;
        transition: color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        min-width: 0;
    }

    .mobile-tab-btn svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .mobile-tab-btn span:not(.tab-satellite-icon):not(.tab-live-icon):not(.tab-back-icon):not(.tab-bmc-icon) {
        font-size: 10px;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .tab-satellite-icon {
        font-size: 20px;
        line-height: 1;
    }

    .mobile-tab-btn:hover,
    .mobile-tab-btn:active {
        color: var(--primary-color);
    }

    body.dark-mode .mobile-tab-btn {
        color: #8a9baa;
    }

    body.dark-mode .mobile-tab-btn:hover,
    body.dark-mode .mobile-tab-btn:active {
        color: #c8d8e8;
    }

    /* Active tab highlight */
    .mobile-tab-btn.active {
        color: var(--secondary-color);
    }

    body.dark-mode .mobile-tab-btn.active {
        color: #9b6ee8;
    }

    /* Satellite tab active state (reuses .satellite-toggle-btn.active) */
    .mobile-tab-btn.satellite-toggle-btn.active {
        color: var(--secondary-color);
    }

    /* ── Bottom sheets ── */
    .mobile-bottom-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        background: var(--panel-bg, #fff);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
        z-index: 1150;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        max-height: 75dvh;
        overflow: hidden;
        /* Pre-promote to GPU layer — prevents compositing conflict with map tiles on Safari */
        will-change: transform;
    }

    body.dark-mode .mobile-bottom-sheet {
        background: #1e2a32;
    }

    .mobile-bottom-sheet.open {
        transform: translateY(0);
    }

    .mobile-sheet-handle {
        width: 36px;
        height: 4px;
        background: #c0cdd8;
        border-radius: 2px;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    body.dark-mode .mobile-sheet-handle {
        background: #3a4a55;
    }

    .mobile-sheet-content {
        padding: 8px 16px 16px;
    }

    .mobile-sheet-scrollable {
        overflow-y: auto;
        max-height: calc(75dvh - 30px);
        padding-bottom: 8px;
    }

    /* Search sheet: search input row */
    #mobile-search-sheet .mobile-search-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--input-bg, #f4f6f8);
        border: 1px solid var(--border-color, #e0e6ed);
        border-radius: 10px;
        padding: 0 10px;
        height: 44px;
    }

    body.dark-mode #mobile-search-sheet .mobile-search-wrap {
        background: #253340;
        border-color: #3a4a55;
    }

    #mobile-search-sheet .map-search-icon {
        font-size: 16px;
        flex-shrink: 0;
    }

    #mobile-search-sheet .mobile-search-input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 15px;
        color: var(--text-color, #2c3e50);
        outline: none;
        min-width: 0;
    }

    body.dark-mode #mobile-search-sheet .mobile-search-input {
        color: #c8d8e8;
    }

    #mobile-search-sheet .mobile-search-input::placeholder {
        color: #9aabb8;
    }

    #mobile-search-sheet .map-search-clear {
        background: none;
        border: none;
        cursor: pointer;
        color: #9aabb8;
        font-size: 14px;
        padding: 4px;
        flex-shrink: 0;
    }

    /* Search sheet content: reverse so results grow upward above the input */
    #mobile-search-sheet .mobile-sheet-content {
        display: flex;
        flex-direction: column-reverse;
        gap: 8px;
        padding-bottom: 12px;
    }

    /* Search results inside the sheet */
    #mobile-search-sheet .map-search-results {
        position: static;
        margin-top: 0;
        border-radius: 10px;
        max-height: 45dvh;
        overflow-y: auto;
        box-shadow: none;
        border: 1px solid var(--border-color, #e0e6ed);
    }

    body.dark-mode #mobile-search-sheet .map-search-results {
        border-color: #3a4a55;
    }

    /* ── Control panel on mobile: hidden (content shown in filters sheet) ── */
    .control-panel {
        display: none !important;
    }

    /* ── Info panel & settings panel: slide up from bottom ── */
    .info-panel,
    .settings-panel {
        width: 100%;
        right: auto;
        left: 0;
        top: auto;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        max-height: 80dvh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-bottom: 0;
    }

    .info-panel:not(.hidden),
    .settings-panel:not(.hidden) {
        transform: translateY(0);
    }

    /* Keep the panel header (with the ✕ button) always visible at the top */
    .info-panel .panel-header,
    .settings-panel .panel-header {
        position: sticky;
        top: 0;
        z-index: 10;
        border-radius: 16px 16px 0 0;
    }

    /* Hide the desktop floating search box on mobile */
    .map-search {
        display: none !important;
    }

    /* Hide desktop-only floating buttons on mobile */
    .locate-btn,
    .satellite-toggle-btn:not(.mobile-tab-btn),
    .marker-toggle-btn {
        display: none !important;
    }

    /* Hide Leaflet zoom +/- buttons on mobile — pinch-to-zoom replaces them */
    .leaflet-control-zoom {
        display: none !important;
    }
}

/* ── Site detail table (used inside info panel) ─────────── */
.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.detail-table th,
.detail-table td {
    padding: 4px 7px;
    border: 1px solid #ddd;
    text-align: left;
    vertical-align: top;
}

.detail-table th {
    background: #f0f4f8;
    font-weight: 600;
    color: #444;
    white-space: nowrap;
    width: 110px;
}

.detail-table td {
    color: #222;
    word-break: break-word;
    overflow-wrap: break-word;
}

body.dark-mode .detail-table th {
    background: #3a3a3a;
    color: #ccc;
    border-color: #555;
}

body.dark-mode .detail-table td {
    color: #ddd;
    border-color: #555;
}

/* Sector <details> expand/collapse indicator */
details > summary {
    list-style: none;
    user-select: none;
    cursor: pointer;
    /* Prevent Safari from showing its own disclosure triangle */
    -webkit-appearance: none;
    appearance: none;
}
details > summary::-webkit-details-marker { display: none; }
details > summary::marker { display: none; }
details > summary::before {
    content: '▶';
    font-size: 9px;
    margin-right: 6px;
    color: #888;
    transition: transform 0.2s;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
details[open] > summary::before {
    transform: rotate(90deg);
}

/* Band table alternating rows */
#tower-info-content tbody tr:nth-child(even) {
    background: #f7f9fb;
}
#tower-info-content tbody tr:hover {
    background: #ede5f8;
}

body.dark-mode #tower-info-content tbody tr:nth-child(even) {
    background: #2e2e2e;
}
body.dark-mode #tower-info-content tbody tr:hover {
    background: #2d0e7a;
}
body.dark-mode #tower-info-content tbody td {
    border-color: #555;
    color: #ddd;
}
body.dark-mode #tower-info-content thead th {
    background: #2d0e7a;
    color: #bbb;
    border-color: #555;
}

/* ── Map Search Box ─────────────────────────────────────── */
.map-search {
    position: fixed;
    /* vertically: 12px from top (no header) */
    top: 12px;
    /* horizontally: centred over the map area (right of the 320px panel) */
    left: calc(320px + (100vw - 320px) / 2);
    transform: translateX(-50%);
    z-index: 1100;          /* above Leaflet controls (z-index 1000) */
    width: min(500px, calc(100vw - 360px));
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    pointer-events: auto;
}

.map-search-input-wrap {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    padding: 0 12px;
    height: 46px;
    gap: 8px;
}

body.dark-mode .map-search-input-wrap {
    background: #2a2a2a;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.map-search-icon {
    font-size: 17px;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.6;
}

.map-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
    color: var(--text-dark);
    min-width: 0;
}

body.dark-mode .map-search-input {
    color: var(--text-light);
}

.map-search-input::placeholder {
    color: #aaa;
}

.map-search-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #888;
    padding: 0 2px;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s;
}

.map-search-clear:hover {
    color: #333;
}

body.dark-mode .map-search-clear:hover {
    color: #eee;
}

.map-search-results {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    overflow: hidden;
    max-height: 280px;
    overflow-y: auto;
}

body.dark-mode .map-search-results {
    background: #2a2a2a;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.map-search-results.hidden {
    display: none;
}

.map-search-results li {
    padding: 10px 14px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.4;
    color: var(--text-dark);
    transition: background 0.15s;
}

body.dark-mode .map-search-results li {
    color: var(--text-light);
    border-bottom-color: #3a3a3a;
}

.map-search-results li:last-child {
    border-bottom: none;
}

.map-search-results li:hover,
.map-search-results li.active {
    background: #ede5f8;
}

body.dark-mode .map-search-results li:hover,
body.dark-mode .map-search-results li.active {
    background: #2d0e7a;
}

.map-search-results li.search-no-results {
    color: #888;
    cursor: default;
    font-style: italic;
}

.map-search-results li.search-no-results:hover {
    background: transparent;
}

.map-search-result-name {
    font-weight: 600;
}

.map-search-result-detail {
    font-size: 11px;
    color: #777;
    margin-top: 2px;
}

body.dark-mode .map-search-result-detail {
    color: #aaa;
}

/* Desktop-only search box: hidden on mobile */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

/* ── Mobile banner search ─────────────────────────────────── */
/* The banner search row is hidden by default; shown when search is open */
.mobile-banner-search {
    display: none;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* Default banner row (hamburger + title + actions) */
.mobile-banner-default {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0;
}

/* When search is open: hide default row, show search row */
.mobile-banner.search-open .mobile-banner-default {
    display: none;
}

.mobile-banner.search-open .mobile-banner-search {
    display: flex;
}

/* Back arrow button */
.mobile-search-back {
    background: none;
    border: none;
    color: white;
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px 4px 0;
    line-height: 1;
    flex-shrink: 0;
}

/* Search input wrapper inside banner */
.mobile-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 0 10px;
    height: 36px;
    gap: 6px;
    min-width: 0;
}

.mobile-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: white;
    font-size: 15px;
    min-width: 0;
}

.mobile-search-input::placeholder {
    color: rgba(255,255,255,0.65);
}

/* Clear button inside mobile search */
.mobile-search-wrap .map-search-clear {
    color: rgba(255,255,255,0.8);
}

.mobile-search-wrap .map-search-clear:hover {
    color: white;
}

/* Results dropdown for mobile — full width, below the banner */
.mobile-search-results {
    position: fixed;
    top: calc(52px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    z-index: 1300;
    border-radius: 0 0 8px 8px;
    margin: 0;
    max-height: 50dvh;
    overflow-y: auto;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

/* Action buttons group in banner */
.mobile-banner-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}

/* Generic icon button in banner (search, etc.) */
.mobile-banner-icon-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    cursor: pointer;
    padding: 5px 7px;
    color: white;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.mobile-banner-icon-btn:hover,
.mobile-banner-icon-btn:active {
    background: rgba(255,255,255,0.3);
}

/* Hide mobile search results on desktop */
@media (min-width: 769px) {
    .mobile-search-results,
    .mobile-banner-search,
    .mobile-banner-default,
    .mobile-banner-actions,
    .mobile-banner-icon-btn {
        display: none !important;
    }
}

@media (max-width: 1024px) {
    .map-search {
        left: calc(280px + (100vw - 280px) / 2);
    }
}

/* ── My Carrier pill buttons ─────────────────────────────── */
.carrier-hint {
    font-size: 11px;
    color: #888;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

/* ── Network filter buttons (replaces old carrier-pills) ── */
.network-filter-btns {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 4px;
}

.net-filter-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 12px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    color: #444;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
    width: 100%;
    text-align: left;
}

.net-filter-btn:hover {
    background: #ede5f8;
    border-color: var(--secondary-color);
    color: var(--primary-color);
}

.net-filter-btn.active {
    background: var(--secondary-color);
    border-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.net-filter-btn.active .provider-dot {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}

body.dark-mode .net-filter-btn {
    background: #2c2c2c;
    border-color: #555;
    color: #ccc;
}

body.dark-mode .net-filter-btn:hover {
    background: #2d0e7a;
    border-color: #9b6ee8;
    color: #c8b8f8;
}

body.dark-mode .net-filter-btn.active {
    background: #5a2cc0;
    border-color: #9b6ee8;
    color: #fff;
}

/* ── GPS Locate Button (desktop, floating over map) ─────── */
.locate-btn {
    position: absolute;
    /* Align with Leaflet zoom controls: top-right of the map area */
    top: 80px;   /* below the zoom +/- controls (~74px tall) */
    right: 10px;
    z-index: 1000;
    width: 34px;
    height: 34px;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    transition: background 0.2s, box-shadow 0.2s;
    color: #333;
}

.locate-btn:hover {
    background: #f4f4f4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.locate-btn svg {
    width: 100%;
    height: 100%;
}

/* Active/locating state */
.locate-btn.locating {
    color: var(--secondary-color);
    animation: pulse-locate 1s ease-in-out infinite;
}

@keyframes pulse-locate {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

body.dark-mode .locate-btn {
    background: #2a2a2a;
    border-color: rgba(255,255,255,0.3);
    color: #eee;
}

body.dark-mode .locate-btn:hover {
    background: #3a3a3a;
}

/* Hide desktop locate btn on mobile (we use the banner button instead) */
@media (max-width: 768px) {
    .locate-btn {
        display: none;
    }
}

/* ── Share Button (desktop, floating over map) ───────────── */
.share-map-btn {
    position: absolute;
    top: 152px;   /* below satellite button (116px + 34px + 2px gap) */
    right: 10px;
    z-index: 1000;
    width: 34px;
    height: 34px;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    color: #007aff;  /* Apple blue — universally understood as "share" */
}

.share-map-btn:hover {
    background: #f0f6ff;
    border-color: #007aff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.share-map-btn svg {
    width: 100%;
    height: 100%;
    display: block;
}

body.dark-mode .share-map-btn {
    background: #2a2a2a;
    border-color: rgba(255,255,255,0.3);
    color: #5ac8fa;
}

body.dark-mode .share-map-btn:hover {
    background: #1a2a3a;
    border-color: #5ac8fa;
}

/* Hide desktop share btn on mobile (we use the bottom nav tab instead) */
@media (max-width: 768px) {
    .share-map-btn {
        display: none;
    }
}

/* ── Satellite / Street view toggle button ───────────────── */
.satellite-toggle-btn {
    position: absolute;
    top: 116px;   /* below locate button (~80px + 34px + 2px gap) */
    right: 10px;
    z-index: 1000;
    width: 34px;
    height: 34px;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    padding: 0;
}

.satellite-toggle-btn:hover {
    background: #f4f4f4;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Active state — satellite is ON */
.satellite-toggle-btn.active {
    background: var(--secondary-color);
    border-color: var(--primary-color);
    color: white;
}

.satellite-toggle-btn.active:hover {
    background: var(--primary-color);
}

body.dark-mode .satellite-toggle-btn {
    background: #2a2a2a;
    border-color: rgba(255,255,255,0.3);
}

body.dark-mode .satellite-toggle-btn:hover {
    background: #3a3a3a;
}

body.dark-mode .satellite-toggle-btn.active {
    background: var(--secondary-color);
    border-color: #9b6ee8;
}

@media (max-width: 768px) {
    /* Hide the desktop floating satellite button, but NOT the mobile tab button */
    .satellite-toggle-btn:not(.mobile-tab-btn):not(.mobile-satellite-btn) {
        display: none;
    }

    /* Mobile satellite button lives inside the banner — override the hide above */
    .satellite-toggle-btn.mobile-satellite-btn {
        display: flex;
        position: static;
        width: auto;
        height: auto;
        background: rgba(255,255,255,0.15);
        border: 1px solid rgba(255,255,255,0.4);
        border-radius: 6px;
        box-shadow: none;
        padding: 5px 7px;
        font-size: 18px;
        color: white;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: background 0.2s;
    }

    .satellite-toggle-btn.mobile-satellite-btn:hover,
    .satellite-toggle-btn.mobile-satellite-btn:active {
        background: rgba(255,255,255,0.3);
    }

    .satellite-toggle-btn.mobile-satellite-btn.active {
        background: var(--secondary-color);
        border-color: rgba(255,255,255,0.6);
        color: white;
    }
}

/* ── Mobile locate button (inside the banner) ────────────── */
.mobile-locate-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    cursor: pointer;
    padding: 5px 7px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, opacity 0.2s;
}

.mobile-locate-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.mobile-locate-btn:hover,
.mobile-locate-btn:active {
    background: rgba(255,255,255,0.3);
}

/* Pulse animation when locating on mobile */
.mobile-locate-btn.locating {
    animation: pulse-locate 1s ease-in-out infinite;
}

/* ── Explore by City (sidebar) ───────────────────────────── */
.city-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 6px;
}

.city-btn {
    background: #f4f7fa;
    border: 1px solid #dde4ec;
    border-radius: 7px;
    padding: 6px 4px;
    font-size: 11px;
    font-weight: 500;
    color: #2c3e50;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.city-btn:hover {
    background: #ede5f8;
    border-color: var(--secondary-color);
    color: var(--primary-color);
}

.city-btn:active {
    background: #c2dff5;
}

/* Dark mode city buttons */
body.dark-mode .city-btn {
    background: #253040;
    border-color: #3a4d62;
    color: #b8cfe0;
}

body.dark-mode .city-btn:hover {
    background: #2d0e7a;
    border-color: var(--secondary-color);
    color: #c8b8f8;
}

/* ── Tower Profile Panel ─────────────────────────────────── */

/* Header: address + provider badges + split-dot preview */
.tower-profile-header {
    padding: 14px 16px 12px;
    border-bottom: 2px solid #e0e6ed;
    background: #f8fafc;
}

body.dark-mode .tower-profile-header {
    background: #232d38;
    border-bottom-color: #3a4a55;
}

.tower-profile-site-id {
    font-size: 14px;
    font-weight: 700;
    color: #1a2a3a;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

body.dark-mode .tower-profile-site-id {
    color: #e0eaf4;
}

.tower-profile-address {
    font-size: 11px;
    font-weight: 400;
    color: #555;
    margin-top: 2px;
    line-height: 1.3;
}

body.dark-mode .tower-profile-address {
    color: #e0eaf4;
}

.tower-profile-meta {
    font-size: 11px;
    color: #666;
    margin-bottom: 10px;
}

body.dark-mode .tower-profile-meta {
    color: #999;
}

/* Row of provider badges in the header */
.tower-provider-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Colored pill badge for each provider */
.provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 6px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
}

.provider-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

/* ── Street View button ──────────────────────────────────── */
.sv-btn {
    display: none;   /* temporarily hidden — re-enable by switching back to inline-flex */
    align-items: center;
    gap: 5px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #1a73e8;
    background: #e8f0fe;
    border: 1px solid #c5d8fd;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.sv-btn:hover {
    background: #1a73e8;
    color: #fff;
    border-color: #1a73e8;
}

body.dark-mode .sv-btn {
    color: #8ab4f8;
    background: #1e3050;
    border-color: #2d4a7a;
}

body.dark-mode .sv-btn:hover {
    background: #8ab4f8;
    color: #0d1b2e;
    border-color: #8ab4f8;
}

.sv-btn--loading {
    opacity: 0.6;
    cursor: wait;
}

.sv-btn:disabled {
    pointer-events: none;
}

/* ── ISED data disclaimer bar ────────────────────────────── */
.ised-disclaimer {
    font-size: 10px;
    color: #888;
    background: #f9f9f9;
    border-top: 1px solid #eee;
    padding: 5px 14px;
    line-height: 1.4;
}

body.dark-mode .ised-disclaimer {
    color: #8a9baa;
    background: #1a2530;
    border-top-color: #2e3a44;
}

/* ── Tower layer list ─────────────────────────────────────── */
.tower-layers {
    padding: 0 0 12px 0;
}

/* Each height layer */
.tower-layer {
    border-bottom: 1px solid #eef0f3;
    padding: 0;
}

body.dark-mode .tower-layer {
    border-bottom-color: #2e3a44;
}

.tower-layer:last-child {
    border-bottom: none;
}

/* Height marker bar */
.layer-height-marker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 4px;
    background: #f0f4f8;
    border-top: 1px solid #dde3ea;
    border-bottom: 1px solid #dde3ea;
}

body.dark-mode .layer-height-marker {
    background: #1e2a34;
    border-top-color: #2e3a44;
    border-bottom-color: #2e3a44;
}

.layer-height-label {
    font-size: 12px;
    font-weight: 700;
    color: #2c3e50;
    white-space: nowrap;
}

body.dark-mode .layer-height-label {
    color: #a8c4d8;
}

.layer-height-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, #b0bec5, transparent);
    border-radius: 1px;
}

body.dark-mode .layer-height-line {
    background: linear-gradient(to right, #3a5060, transparent);
}

/* Owner rows inside a layer */
.layer-owners {
    padding: 4px 0;
}

/* One row per provider at this height */
.layer-owner-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 16px;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
    transition: background 0.12s;
}

.layer-owner-row:last-child {
    border-bottom: none;
}

.layer-owner-row:hover {
    background: #f0f6fc;
}

body.dark-mode .layer-owner-row {
    border-bottom-color: #2a3540;
}

body.dark-mode .layer-owner-row:hover {
    background: #1e2e3a;
}

/* Color stripe on the left of each owner row */
.owner-color-stripe {
    width: 4px;
    min-height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
}

.owner-row-main {
    flex: 1;
    min-width: 0;
}

.owner-row-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}

.owner-provider-name {
    font-size: 12px;
    font-weight: 700;
    color: #1a2a3a;
}

body.dark-mode .owner-provider-name {
    color: #d0e4f4;
}

.owner-licensee {
    font-size: 10px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

body.dark-mode .owner-licensee {
    color: #999;
}

/* Compact band chips */
.owner-bands {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.band-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    background: #e8f0f8;
    color: #2c5282;
    border: 1px solid #c3d4e8;
    white-space: nowrap;
}

body.dark-mode .band-chip {
    background: #1a2e44;
    color: #7ec8f0;
    border-color: #2a4a64;
}

/* Expand arrow */
.owner-expand-arrow {
    font-size: 11px;
    color: #aaa;
    flex-shrink: 0;
    align-self: center;
    transition: transform 0.2s;
}

.layer-owner-row.expanded .owner-expand-arrow {
    transform: rotate(90deg);
}

/* Expanded detail block */
.owner-detail-block {
    display: none;
    padding: 8px 16px 10px 30px;
    background: #fafcff;
    border-bottom: 1px solid #eef0f3;
}

body.dark-mode .owner-detail-block {
    background: #192430;
    border-bottom-color: #2e3a44;
}

.owner-detail-block.visible {
    display: block;
}

/* Sector sub-rows inside expanded detail */
.sector-detail-row {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #e0e6ed;
}

body.dark-mode .sector-detail-row {
    border-bottom-color: #2e3a44;
}

.sector-detail-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.sector-detail-title {
    font-size: 11px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 5px;
}

body.dark-mode .sector-detail-title {
    color: #a8c4d8;
}

/* ── Split-dot canvas preview in header ──────────────────── */
.tower-split-dot-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Print Styles */
@media print {
    .header,
    .control-panel,
    .info-panel,
    .settings-panel,
    .loading-indicator,
    .leaflet-control {
        display: none !important;
    }
}

/* ── User Marker Popup ─────────────────────────────────────── */
/* ── User Marker Popup ──────────────────────────────────────── */

.user-marker-popup {
    min-width: 196px;
    font-size: 12.5px;
}

/* Label input — reads like a plain editable title, not a form field */
.ump-label-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1.5px solid transparent;
    padding: 1px 0 4px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-dark);
    background: transparent;
    outline: none;
}
.ump-label-input:hover { border-bottom-color: #e3dcf3; }
.ump-label-input:focus { border-bottom-color: var(--secondary-color); }
.ump-label-input::placeholder { color: #b3a9cc; font-weight: 500; }

/* Coordinates — quiet monospace line, selectable + editable in place */
.ump-coord-input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 0;
    font-size: 11.5px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    letter-spacing: -0.01em;
    color: #6b6480;
    background: transparent;
    outline: none;
}
.ump-coord-input:focus { color: var(--text-dark); }

/* Rectangle coords — two quiet readout lines */
.ump-rect-coords {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 11px;
    color: #6b6480;
    line-height: 1.7;
    margin-bottom: 4px;
}
.ump-rect-coords span {
    display: inline-block;
    width: 22px;
    font-weight: 700;
    color: var(--secondary-color);
    font-family: inherit;
}

/* Actions — Save as the only real button, remove as a quiet text link */
.ump-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 9px;
    border-top: 1px solid #efeaf7;
}
.ump-save {
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--primary-color);
    cursor: pointer;
}
.ump-save:hover { background: #34128a; }
.ump-save:active { transform: translateY(1px); }

.ump-delete {
    border: none;
    background: none;
    padding: 0;
    font-size: 11.5px;
    font-family: inherit;
    color: #a0728f;
    cursor: pointer;
    margin-left: auto;
}
.ump-delete:hover { color: var(--accent-color); text-decoration: underline; }

/* ── Dark mode ─────────────────────────────────────────────── */
body.dark-mode .ump-label-input {
    color: #e0eaf4;
}
body.dark-mode .ump-label-input:hover { border-bottom-color: #3a4a55; }
body.dark-mode .ump-label-input::placeholder { color: #6b7c8d; }
body.dark-mode .ump-coord-input { color: #93a3b3; }
body.dark-mode .ump-coord-input:focus { color: #e0eaf4; }
body.dark-mode .ump-rect-coords { color: #93a3b3; }
body.dark-mode .ump-rect-coords span { color: #b39df0; }
body.dark-mode .ump-actions { border-top-color: #3a4a55; }
body.dark-mode .ump-delete { color: #c98ba8; }
body.dark-mode .ump-delete:hover { color: #ff7a6c; }

/* ── Marker list in left control panel ─────────────────────── */
.marker-list-empty {
    font-size: 11px;
    color: #999;
    line-height: 1.5;
    margin: 4px 0 0;
}

.marker-list-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 4px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 3px;
}

.marker-list-row:hover {
    background: #f0f4ff;
}

.marker-list-pin {
    font-size: 15px;
    flex-shrink: 0;
    line-height: 1;
}

.marker-list-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    font-family: inherit;
    background: #fff;
    color: #333;
    outline: none;
    transition: border-color 0.15s;
}

.marker-list-input:focus {
    border-color: #4117A1;
    box-shadow: 0 0 0 2px rgba(65,23,161,0.15);
}

.marker-list-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #c0392b;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s, background 0.15s;
}

.marker-list-delete:hover {
    opacity: 1;
    background: #fdecea;
}

body.dark-mode .marker-list-row:hover  { background: #2a2a2a; }
body.dark-mode .marker-list-input      { background: #1e1e1e; color: #eee; border-color: #444; }
body.dark-mode .marker-list-input:focus{ border-color: #4117A1; }
body.dark-mode .marker-list-empty      { color: #666; }
body.dark-mode .marker-list-delete:hover { background: #3a1a1a; }

/* ── Permanent marker label tooltip above pin ───────────────── */
.leaflet-tooltip.marker-label-tooltip,
.marker-label-tooltip {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1.5px solid #4117A1 !important;
    border-radius: 4px !important;
    color: #333 !important;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18) !important;
    pointer-events: none;
}
.leaflet-tooltip.marker-label-tooltip::before,
.marker-label-tooltip::before {
    display: none;
}
body.dark-mode .leaflet-tooltip.marker-label-tooltip,
body.dark-mode .marker-label-tooltip {
    background: rgba(30, 30, 30, 0.92) !important;
    border-color: #4117A1 !important;
    color: #eee !important;
}

/* ── Top-right Marker FAB Panel ─────────────────────────── */
/* Sits below locate (80px) + satellite (116px) + share (152px) buttons */
.marker-fab-panel {
    position: absolute;
    top: 196px;
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* "Add Marker" pill button — shown when no markers exist */
.marker-fab-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 2px solid rgba(0,0,0,0.2);
    border-radius: 24px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    transition: background 0.18s, box-shadow 0.18s, border-color 0.18s;
    white-space: nowrap;
    line-height: 1;
}

.marker-fab-btn:hover {
    background: #f0eaff;
    border-color: #4117A1;
    box-shadow: 0 3px 12px rgba(0,0,0,0.28);
}

.marker-fab-btn.active {
    background: #4117A1;
    border-color: #2d0e7a;
    color: white;
}

.marker-fab-btn.active:hover {
    background: #2d0e7a;
}

.marker-fab-icon {
    font-size: 16px;
    line-height: 1;
}

.marker-fab-label {
    font-size: 12px;
}

/* Marker list card — shown when markers exist */
.marker-fab-list {
    background: white;
    border: 1.5px solid rgba(0,0,0,0.15);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    min-width: 220px;
    max-width: 280px;
    overflow: hidden;
}

.marker-fab-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
}

.marker-fab-list-title {
    font-size: 12px;
    font-weight: 700;
    color: #333;
}

.marker-fab-list-actions {
    display: flex;
    gap: 4px;
}

.marker-fab-share-btn,
.marker-fab-add-btn,
.marker-fab-clear-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    padding: 2px 7px;
    font-size: 14px;
    line-height: 1.4;
    color: #555;
    transition: background 0.15s, border-color 0.15s;
}

/* Apple-style share button — same pill shape as + and 🗑, Apple blue icon */
.marker-fab-share-btn {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 3px 7px;
    color: #007aff;   /* Apple blue */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.marker-fab-share-btn svg {
    width: 13px;
    height: 13px;
    display: block;
}

.marker-fab-share-btn:hover {
    background: #e8f0fb;
    border-color: #007aff;
    color: #005ecb;
}

.marker-fab-share-btn:active {
    background: #d0e4f8;
}

/* Rectangle draw button active state — blue when drawing mode is on */
#rect-fab-add-btn.active {
    background: #2980B9;
    color: white;
    border-color: #2471a3;
}
#rect-fab-add-btn.active:hover {
    background: #1f6391;
}

.marker-fab-add-btn:hover {
    background: #e8f5e9;
    border-color: #2ecc71;
    color: #27ae60;
}

.marker-fab-clear-btn:hover {
    background: #fdecea;
    border-color: #e74c3c;
    color: #c0392b;
}

/* Scrollable list of marker rows */
.marker-fab-items {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 6px;
}

.marker-fab-empty {
    margin: 8px 4px;
    font-size: 11px;
    color: #aaa;
    text-align: center;
    font-style: italic;
}

/* Dark mode */
body.dark-mode .marker-fab-btn {
    background: #2a2a2a;
    border-color: rgba(255,255,255,0.25);
    color: #eee;
}

body.dark-mode .marker-fab-btn:hover {
    background: #3a3a3a;
    border-color: #4117A1;
}

body.dark-mode .marker-fab-btn.active {
    background: #4117A1;
    border-color: #2d0e7a;
    color: white;
}

body.dark-mode .marker-fab-list {
    background: #1e1e1e;
    border-color: rgba(255,255,255,0.15);
}

body.dark-mode .marker-fab-list-header {
    background: #2a2a2a;
    border-bottom-color: #333;
}

body.dark-mode .marker-fab-list-title { color: #eee; }

body.dark-mode .marker-fab-add-btn,
body.dark-mode .marker-fab-clear-btn {
    border-color: #444;
    color: #ccc;
}

body.dark-mode .marker-fab-add-btn:hover  { background: #1a3a1a; border-color: #2ecc71; color: #2ecc71; }
body.dark-mode .marker-fab-clear-btn:hover { background: #3a1a1a; border-color: #e74c3c; color: #e74c3c; }

/* On mobile: hide the FAB panel (markers managed via right-click/long-press + popup) */
@media (max-width: 768px) {
    .marker-fab-panel {
        display: none;
    }
}

/* ── Mobile marker mode button (inside banner) ─────────────── */
.mobile-marker-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    cursor: pointer;
    padding: 5px 7px;
    color: white;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.mobile-marker-btn:hover,
.mobile-marker-btn:active {
    background: rgba(255,255,255,0.3);
}

.mobile-marker-btn.active {
    background: #4117A1;
    border-color: #2d0e7a;
}

/* ─────────────────────────────────────────────────────────────
   Always-visible footer links — sticky at the bottom of the
   left control panel (never overlaps the map)
───────────────────────────────────────────────────────────── */
.panel-footer-links {
    background: #f5f7fa;
    border-top: 1px solid #dde3ea;
    padding: 7px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 11px;
    box-sizing: border-box;
}

.panel-footer-links a {
    color: var(--secondary-color);
    text-decoration: none;
    white-space: nowrap;
}

.panel-footer-links a:hover {
    text-decoration: underline;
}

.pfl-sep {
    color: #aaa;
    font-size: 10px;
}

body.dark-mode .panel-footer-links {
    background: #222;
    border-top-color: #444;
}

body.dark-mode .panel-footer-links a {
    color: #9b6ee8;
}

/* On mobile: hide the fixed panel footer (the control-panel itself is hidden).
   The footer links ARE shown inside the mobile filters sheet via a clone —
   the scoped override below re-enables them there. */
@media (max-width: 768px) {
    .panel-footer-links {
        display: none;
    }

    /* Re-enable the cloned footer links inside the mobile filters bottom sheet */
    #mobile-filters-content .panel-footer-links {
        display: flex !important;
        position: static;          /* not sticky — flows naturally in the sheet */
        background: transparent;
        border-top: 1px solid #dde3ea;
        margin-top: 14px;
        padding: 10px 0 4px;
        flex-wrap: wrap;
        gap: 4px 6px;
        font-size: 11px;
    }

    body.dark-mode #mobile-filters-content .panel-footer-links {
        border-top-color: #3a4a55;
    }
}

/* ─────────────────────────────────────────────────────────────
   Near Me — crosshair overlay + tower distance labels
   ───────────────────────────────────────────────────────────── */

/* Crosshair container — absolutely centered within the map-container div,
   pointer-events:none so map interactions pass straight through it.
   The map-container is position:relative (flex:1), so absolute 50%/50%
   lands exactly on map.getCenter() regardless of the left panel width. */
/* ── Desktop "Cell Towers Near Me" toggle row ───────────────── */
.nearme-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 8px 10px;
    background: #f0f4f8;
    border: 1px solid #d5dde5;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.nearme-toggle-row:hover {
    background: #e3eaf2;
}
.nearme-toggle-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #2c3e50;
}
.nearme-toggle-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--primary-color);
}
/* The pill track */
.nearme-toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    min-width: 36px;
    height: 20px;
    background: #b0a0d0;
    border-radius: 10px;
    flex-shrink: 0;
    overflow: visible;
    transition: background 0.2s;
}
/* The knob */
.nearme-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: left 0.2s;
    pointer-events: none;
}
/* Active (on nearme.celltowers.ca) */
.nearme-toggle-switch.active {
    background: var(--secondary-color);
}
.nearme-toggle-switch.active .nearme-toggle-knob {
    left: 18px;
}
/* Dark mode */
body.dark-mode .nearme-toggle-row {
    background: #2a2a2a;
    border-color: #3a3a3a;
}
body.dark-mode .nearme-toggle-row:hover {
    background: #333;
}
body.dark-mode .nearme-toggle-label {
    color: #e0e0e0;
}
body.dark-mode .nearme-toggle-switch {
    background: #555;
}
body.dark-mode .nearme-toggle-switch.active {
    background: var(--secondary-color);
}

.nearme-crosshair {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;          /* toggled to flex by JS when IS_NEARME */
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1001;          /* above Leaflet tiles (z-index 400) and controls (z-index 800) */
}

/* Horizontal bar */
.ch-h {
    position: absolute;
    width: 60px;
    height: 2px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    border-radius: 1px;
}

/* Vertical bar */
.ch-v {
    position: absolute;
    width: 2px;
    height: 60px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    border-radius: 1px;
}

/* Center dot */
.ch-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Tower distance/direction label rendered at the tower endpoint */
.nearme-tower-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #34495E;         /* overridden inline with provider colour */
    color: #fff;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    /* transform applied inline: translate(-50%,-50%) rotate(Xdeg) */
}

.nearme-label-sep {
    display: inline-block;
    width: 1px;
    height: 10px;
    background: currentColor;
    opacity: 0.4;
    border-radius: 1px;
}

.nearme-label-az {
    font-size: 10px;
    font-weight: 400;
    opacity: 0.8;
}

/* ── Map Watermark — inline SVG with logo + text, bottom-left corner ── */
.map-watermark {
    position: absolute;
    bottom: 24px;
    left: 10px;
    z-index: 900;
    pointer-events: none;
    user-select: none;
    opacity: 0.85;
    /* SVG filter for the whole watermark: soft drop-shadow */
    filter: drop-shadow(0 0 4px rgba(0,0,0,1))
            drop-shadow(0 0 2px rgba(0,0,0,1));
}

/* On mobile, nudge up above the bottom nav bar */
@media (max-width: 768px) {
    .map-watermark {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 6px);
        left: 8px;
    }
}

/* ── Live tracking button (nearme.celltowers.ca only) ────────── */
.tab-live-icon {
    font-size: 18px;
    line-height: 1;
}

/* Pulsing red glow when live tracking is active */
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.88); }
}

#tab-live.live-active {
    color: #e74c3c;
}

#tab-live.live-active .tab-live-icon {
    display: inline-block;
    animation: live-pulse 1.1s ease-in-out infinite;
}

/* ── Buy Me a Coffee — mobile top banner + desktop sidebar card ── */

/* Mobile top anchor banner (hidden on desktop) */
.bmc-top-banner { display: none; }

@media (max-width: 768px) {
    .bmc-top-banner {
        display: flex;
        align-items: center;
        position: fixed;
        top: env(safe-area-inset-top, 0px);
        left: 0; right: 0;
        z-index: 1300;
        background: linear-gradient(90deg, #6d28d9, #7c3aed);
        color: #fff;
        padding: 8px 12px;
        gap: 8px;
        height: auto;
        box-sizing: border-box;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }
    .bmc-banner-tap {
        display: flex; align-items: center; gap: 8px;
        flex: 1; color: #fff; text-decoration: none;
        min-width: 0;
    }
    .bmc-banner-icon { font-size: 18px; flex-shrink: 0; }
    .bmc-banner-text {
        flex: 1; font-size: 12px; font-weight: 500;
        white-space: normal; line-height: 1.4;
    }
    .bmc-banner-cta {
        font-size: 11px; font-weight: 700;
        background: #FFDD00;
        border: 1px solid #000;
        border-radius: 5px; padding: 3px 9px; flex-shrink: 0;
        color: #000;
    }
    .bmc-banner-close {
        background: none; border: none; color: rgba(255,255,255,0.75);
        font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 4px; flex-shrink: 0;
    }
    /* Shift positioned elements below the banner when it is visible */
    body:not(.bmc-banner-dismissed) .mobile-search-bar {
        top: calc(env(safe-area-inset-top, 0px) + 10px + 56px);
    }
    body:not(.bmc-banner-dismissed) .loading-indicator {
        top: calc(env(safe-area-inset-top, 0px) + 10px + 46px + 8px + 56px);
    }
    body:not(.bmc-banner-dismissed) .mobile-filter-pill {
        top: calc(env(safe-area-inset-top, 0px) + 10px + 56px);
    }
}

/* Always-visible bottom block — sticky to the bottom of the scrolling panel */
.sidebar-sticky-bottom {
    position: sticky;
    bottom: 0;
    margin: auto -20px 0;
    flex-shrink: 0;
    background: white;
}
body.dark-mode .sidebar-sticky-bottom {
    background: #2A2A2A;
}

/* Desktop sidebar BMC button wrapper — hidden on mobile */
.bmc-btn-sidebar {
    padding: 12px 0 8px;
    display: flex;
    justify-content: center;
    border-top: 1px solid var(--border-color);
    overflow: hidden;       /* prevent overflowing the left bar */
    box-sizing: border-box;
}
/* Constrain the generated BMC button anchor to the sidebar width */
.bmc-btn-sidebar .bmc-btn {
    font-size: 18px !important; /* emoji rendered as text at 28px by default — reduce for Windows */
}
.bmc-btn-sidebar > a,
.bmc-btn-sidebar a[href*="buymeacoffee"] {
    white-space: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
}
.bmc-btn-sidebar a[href*="buymeacoffee"] span {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    word-break: break-word !important;
}
@media (max-width: 768px) {
    .bmc-btn-sidebar { display: none; }
}

/* API inquiry button — desktop sidebar only */
.api-inquiry-btn-sidebar {
    padding: 10px 12px 4px;
    border-top: 1px solid var(--border-color);
}
.api-inquiry-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f0ebfd;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    border: 1px solid #d4c5f0;
    transition: background 0.15s;
}
.api-inquiry-link:hover {
    background: #e3d8fb;
}
body.dark-mode .api-inquiry-link {
    background: #2e1f5e;
    color: #c8aaff;
    border-color: #4d3488;
}
body.dark-mode .api-inquiry-link:hover {
    background: #3a2870;
}
@media (max-width: 768px) {
    .api-inquiry-btn-sidebar { display: none; }
}

/* ─────────────────────────────────────────────────────────────
   Hex Proximity Overlay — toggle button + legend pill
   ───────────────────────────────────────────────────────────── */

/* The hex toggle button reuses .nearme-toggle-switch styling.
   When active, flip the knob and change the track colour to
   a distinctive blue (different from the nearme purple). */
.hex-toggle-btn .nearme-toggle-switch.active {
    background: #2980B9;
}
.hex-toggle-btn .nearme-toggle-switch.active .nearme-toggle-knob {
    left: 18px;
}

/* Legend pill — bottom-left of the map, above the OSM attribution bar */
#hex-legend {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 850;
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.93);
    border-radius: 20px;
    padding: 5px 12px 5px 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(0,0,0,0.1);
    pointer-events: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    white-space: nowrap;
    max-width: calc(100vw - 360px); /* avoid overlapping the left panel */
}

body.dark-mode #hex-legend {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255,255,255,0.12);
}

.hex-legend-label {
    font-size: 11px;
    font-weight: 600;
    color: #444;
}

body.dark-mode .hex-legend-label {
    color: #bbb;
}

.hex-legend-bar {
    width: 90px;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, hsl(120,75%,45%), hsl(60,75%,45%), hsl(0,75%,45%));
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.hex-legend-disclaimer {
    font-size: 9.5px;
    color: #888;
    font-style: italic;
    border-left: 1px solid #ddd;
    padding-left: 8px;
    line-height: 1.3;
    max-width: 200px;
    white-space: normal;
}

body.dark-mode .hex-legend-disclaimer {
    color: #777;
    border-left-color: #444;
}

/* On mobile: lift above the bottom nav bar and center below the map */
@media (max-width: 768px) {
    #hex-legend {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px);
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 24px);
    }
    .hex-legend-disclaimer {
        display: none; /* too long on mobile — omit */
    }
}


/* ─────────────────────────────────────────────────────────────
   Compass Indicator
   Shown inside #map during Live tracking when compass is active.
   Positioned top-right, below the mobile search pill.
   Counter-rotated by JS so it stays upright while the map spins.
   Tapping resets the map to north-up.
───────────────────────────────────────────────────────────── */
.compass-indicator {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 66px); /* below mobile search pill (46px) + gap */
    right: 12px;
    z-index: 1205; /* above bottom nav (1200) */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 48px;
    padding: 6px 0 5px;
    background: rgba(255, 255, 255, 0.93);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
    border: 1.5px solid rgba(0, 0, 0, 0.10);
    cursor: pointer;
    /* pointer-events managed by hidden class */
    -webkit-tap-highlight-color: transparent;
    /* Smooth appearance transition */
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* transform-origin center so counter-rotation is stable */
    transform-origin: center center;
}

.compass-indicator.hidden {
    display: none;
}

.compass-indicator:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

.compass-indicator:active {
    transform: scale(0.93);
}

body.dark-mode .compass-indicator {
    background: rgba(30, 30, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

body.dark-mode .compass-indicator:hover {
    background: rgba(40, 40, 55, 1);
}

/* Wrapper keeps the needle SVG centered */
.compass-arrow-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* The needle SVG — rotated by JS to always point north.
   transform-origin center so rotation is around the needle's midpoint. */
.compass-needle {
    width: 28px;
    height: 28px;
    display: block;
    transform-origin: center center;
    /* smooth needle rotation */
    transition: transform 0.1s linear;
    /* will-change avoids repaints from JS transform updates */
    will-change: transform;
}

/* Text label below the needle: e.g. "NE 47°" */
.compass-heading-label {
    font-size: 9px;
    font-weight: 700;
    color: #2c3e50;
    letter-spacing: 0.02em;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

body.dark-mode .compass-heading-label {
    color: #c8d8e8;
}

/* On desktop: position compass below the share button in the right column */
@media (min-width: 769px) {
    .compass-indicator {
        top: 196px; /* below share btn (~152px + 34px + 10px gap) */
        right: 10px;
        width: 34px;
        padding: 5px 0 4px;
        border-radius: 4px;
        border: 2px solid rgba(0,0,0,0.2);
        gap: 2px;
    }
    .compass-arrow-wrap {
        width: 22px;
        height: 22px;
    }
    .compass-needle {
        width: 20px;
        height: 20px;
    }
    .compass-heading-label {
        font-size: 8px;
    }
}

/* ── Mobile active-filter pill ───────────────────────────────
   Discreet top-left badge that shows the active network/tech
   filter when the control panel is hidden on mobile.
   Hidden on desktop (panel is always visible there).
   Hidden when no filter is active (both slugs empty).
   Tapping the pill opens the Filters bottom sheet.
──────────────────────────────────────────────────────────── */
.mobile-filter-pill {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    .mobile-filter-pill {
        /* Always in the layout flow but invisible when inactive —
           this lets CSS transitions work (display:none kills them). */
        display: block;
        position: absolute;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: 10px;
        z-index: 820; /* above tiles (400) and leaflet controls (800), below sheets */
        /* backdrop-filter removed — it forces Safari to recomposite on every
           map pan frame, causing main-thread freezes on iOS/Mac Safari.
           A slightly more opaque solid background replaces the blur effect. */
        background: rgba(20, 20, 30, 0.84);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        padding: 5px 9px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.18);
        cursor: pointer;
        pointer-events: none; /* non-interactive when hidden */
        white-space: nowrap;
        max-width: calc(100vw - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
        box-shadow: 0 1px 4px rgba(0,0,0,0.25);
        /* slide-in from top on activation */
        transition: opacity 0.2s ease, transform 0.2s ease;
        opacity: 0;
        transform: translateY(-6px);
    }

    .mobile-filter-pill.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    body.dark-mode .mobile-filter-pill {
        background: rgba(10, 10, 20, 0.80);
        border-color: rgba(255, 255, 255, 0.14);
    }
}

/* TODO: remove settings button/panel — hidden until cleaned up
   To restore: delete this block and remove the `hidden` class from
   #settings-toggle and #settings-panel in index.html if needed. */
#settings-toggle,
#settings-panel {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   Mobile Persistent Top Search Bar
   Floats over the map like the desktop version — pill shape,
   drop-shadow, no opaque background behind it.
   Hidden on desktop (desktop uses the floating .map-search box).
───────────────────────────────────────────────────────────── */
.mobile-search-bar {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    /* Floating pill — sits above the map, inset from the edges.
       No full-width background; transparent container so only the
       pill itself is visible (matches the desktop search style). */
    .mobile-search-bar {
        display: block;
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        left: 12px;
        right: 12px;
        z-index: 1210; /* above bottom nav (1200) and sheets (1150) */
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        pointer-events: none; /* let taps pass through the transparent wrapper */
    }

    /* The pill itself — white card with rounded corners and drop-shadow */
    .mobile-search-bar-inner {
        display: flex;
        align-items: center;
        gap: 8px;
        background: white;
        border: none;
        border-radius: 24px;       /* pill shape matching desktop */
        padding: 0 14px;
        height: 46px;
        box-shadow: 0 2px 14px rgba(0,0,0,0.28);
        pointer-events: auto;      /* re-enable taps on the pill */
        transition: box-shadow 0.15s;
    }

    .mobile-search-bar-inner:focus-within {
        box-shadow: 0 3px 18px rgba(0,0,0,0.35);
    }

    body.dark-mode .mobile-search-bar-inner {
        background: #2a2a2a;
        box-shadow: 0 2px 14px rgba(0,0,0,0.6);
    }

    body.dark-mode .mobile-search-bar-inner:focus-within {
        box-shadow: 0 3px 18px rgba(0,0,0,0.7);
    }

    .mobile-search-bar .map-search-icon {
        font-size: 16px;
        flex-shrink: 0;
        line-height: 1;
        opacity: 0.55;
    }

    .mobile-search-bar .mobile-search-input {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 15px;
        color: #2c3e50;
        outline: none;
        min-width: 0;
        padding: 0;
    }

    body.dark-mode .mobile-search-bar .mobile-search-input {
        color: #e0e8f0;
    }

    .mobile-search-bar .mobile-search-input::placeholder {
        color: #aaa;
    }

    .mobile-search-bar .map-search-clear {
        background: none;
        border: none;
        cursor: pointer;
        color: #999;
        font-size: 14px;
        padding: 4px;
        flex-shrink: 0;
        line-height: 1;
        transition: color 0.15s;
        pointer-events: auto;
    }

    .mobile-search-bar .map-search-clear:hover {
        color: #333;
    }

    body.dark-mode .mobile-search-bar .map-search-clear:hover {
        color: #eee;
    }

    /* Results dropdown — below the pill, same width, rounded corners */
    .mobile-search-bar-results {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 14px;
        max-height: 50dvh;
        overflow-y: auto;
        box-shadow: 0 6px 20px rgba(0,0,0,0.22);
        background: #fff;
        z-index: 1211;
        pointer-events: auto;
    }

    body.dark-mode .mobile-search-bar-results {
        background: #232d38;
        box-shadow: 0 6px 20px rgba(0,0,0,0.55);
    }

    /* Main area: leave room above for the floating pill (~66px) + bottom nav */
    main {
        height: calc(100dvh - 56px - env(safe-area-inset-bottom, 0px));
        margin-top: 0; /* map goes full height; pill floats on top */
    }

    /* Sheets — unchanged, above bottom nav */
    .mobile-bottom-sheet {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Info/settings panels */
    .info-panel,
    .settings-panel {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Loading indicator: float below the search pill */
    .loading-indicator {
        top: calc(env(safe-area-inset-top, 0px) + 10px + 46px + 8px);
    }
}

/* ─────────────────────────────────────────────────────────────
   Search highlight — pulsing ring shown on the tower after
   a site-ID search or deep-link zoom.  Implemented as a
   Leaflet CircleMarker whose SVG element gets this class added.
   ───────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────
   Search highlight — large gold glow that fades out over 3 s.
   Applied to the Leaflet SVG <path> element via _path.
   CSS keyframe r-animation doesn't work on SVG paths; instead
   we use opacity transition which works everywhere.
   The initial opacity is set to 1 by JS, then immediately changed
   to 0 to trigger the CSS transition.
   ───────────────────────────────────────────────────────────── */
.search-highlight-circle {
    transition: opacity 3s ease-out;
    fill: rgba(255, 215, 0, 0.25);   /* semi-transparent gold fill = glow */
    stroke: #FFD700;
    stroke-width: 3;
    pointer-events: none;
}

/* ═══ Coverage Issues layer — legend + click popup ═══ */
.issues-legend {
    position: fixed;
    right: 16px;
    bottom: 78px;            /* sits directly above the report button */
    z-index: 1140;           /* just under the report button (1150) */
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 11px;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: none;
    max-width: 200px;
}
.issues-legend-title { font-weight: 700; margin-bottom: 5px; }
.issues-legend-bar { display: flex; align-items: center; gap: 5px; }
.issues-legend-bar i {
    flex: 1; height: 9px; border-radius: 3px; display: inline-block;
}
.issues-legend-note { margin-top: 4px; color: #777; font-size: 10px; line-height: 1.3; }

.issue-popup { font-size: 12.5px; color: #222; }
.issue-popup-h { font-weight: 700; margin-bottom: 6px; color: #c0392b; }
.issue-row {
    display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline;
    padding: 3px 0; border-top: 1px solid #f0f0f0;
}
.issue-row:first-of-type { border-top: none; }
.issue-prov { font-weight: 600; }
.issue-type { color: #444; }
.issue-days { color: #888; margin-left: auto; font-size: 11px; }

@media (max-width: 768px) {
    /* sit directly on top of the report button (button bottom + its height + gap) */
    .issues-legend { right: 12px; bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 44px); }
}

/* Small "beta" pill for the Reported issues layer toggle */
.beta-pill {
    display: inline-block; vertical-align: middle; margin-left: 5px;
    background: #6c5ce7; color: #fff; font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    padding: 1px 6px; border-radius: 9px; line-height: 1.5;
}

/* ═══ Coverage report flow — button, banner, modal, toast ═══ */
.report-issue-btn {
    position: fixed; right: 16px; bottom: 28px; z-index: 1150;
    background: #c0392b; color: #fff; border: none; border-radius: 24px;
    padding: 11px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
    box-shadow: 0 3px 12px rgba(192,57,43,0.45); display: flex; align-items: center; gap: 6px;
}
.report-issue-btn:hover { background: #a93226; }
.report-issue-btn:active { transform: translateY(1px); }
.report-issue-btn-label-short { display: none; }

.report-banner {
    position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
    z-index: 1200; background: #fff; border: 2px solid #c0392b; border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22); padding: 10px 14px;
    display: flex; flex-direction: column; gap: 8px; max-width: 92vw;
}
.report-banner-x {
    position: absolute; top: 3px; right: 7px; border: none; background: none;
    font-size: 15px; color: #999; cursor: pointer; line-height: 1; padding: 3px 5px;
}
.report-banner-x:hover { color: #c0392b; }
.report-banner-text { font-size: 15.5px; font-weight: 600; color: #333; text-align: center; padding: 2px 22px 0; }
.report-banner-actions { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; }
.report-banner-actions button { border: none; border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; }
.report-banner-loc { background: #c0392b; color: #fff; font-weight: 600; }
.report-banner-loc:hover { background: #a93226; }
.report-banner-count { font-size: 13px; font-weight: 700; color: #777; min-width: 42px; text-align: center; }
.report-banner-count.report-count-flash { color: #c0392b; transform: scale(1.25); transition: transform .15s; }
.report-banner-next { background: #c0392b; color: #fff; font-weight: 700; }
.report-banner-next:disabled { background: #ddd; color: #999; cursor: not-allowed; }
.report-banner-cancel { background: transparent; color: #888; }

.report-zoom-prompt {
    /* Sit ~1/3 down from the top, not dead-centre, so it doesn't block the view. */
    position: fixed; top: 30%; left: 50%; transform: translate(-50%, -50%);
    z-index: 1210;
    /* Translucent so the map shows through; blur keeps the text readable. */
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    border: 2px solid rgba(192, 57, 43, 0.85); border-radius: 14px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16); padding: 16px 24px;
    max-width: 86vw; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    /* CRITICAL: let map pan/pinch-zoom pass straight through the banner.
       Only the button below re-enables pointer events. */
    pointer-events: none;
}
.report-zoom-prompt-text { font-size: 17px; font-weight: 700; color: #222; line-height: 1.35; }
.report-zoom-prompt-loc {
    background: #c0392b; color: #fff; border: none; border-radius: 8px;
    padding: 10px 18px; font-size: 14.5px; font-weight: 600; cursor: pointer;
    pointer-events: auto;   /* the button stays tappable */
}
.report-zoom-prompt-loc:hover { background: #a93226; }

.report-modal-overlay {
    position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.report-modal {
    background: #fff; border-radius: 14px; width: 100%; max-width: 420px;
    max-height: 90vh; overflow-y: auto; padding: 22px; position: relative;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.report-modal-close {
    position: absolute; top: 12px; right: 12px; border: none; background: none;
    font-size: 18px; color: #999; cursor: pointer;
}
.report-modal h3 { margin: 0 0 2px; font-size: 18px; color: #222; }
.report-modal-sub { margin: 0 0 14px; font-size: 12.5px; color: #777; }
.report-modal label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 12px; }
.report-modal select, .report-modal textarea, .report-modal input[type=text], .report-modal input[type=email] {
    width: 100%; margin-top: 5px; padding: 9px 10px; font-size: 14px; font-weight: 400;
    border: 1px solid #ccc; border-radius: 8px; box-sizing: border-box; font-family: inherit;
}
.report-opt { font-weight: 400; color: #999; font-size: 12px; }
.report-privacy-note {
    font-size: 11.5px; color: #1e7e34; background: #eef7f0; border-radius: 7px;
    padding: 7px 9px; margin: -2px 0 14px; line-height: 1.4;
}
.report-disclaimer {
    font-size: 11px; color: #888; line-height: 1.4; text-align: center;
    margin: 2px 0 12px;
}
.report-contact { margin-bottom: 12px; }
.report-contact summary { font-size: 13px; color: #c0392b; cursor: pointer; font-weight: 600; }
.report-contact label { margin-top: 10px; }
.report-form-error { color: #c0392b; font-size: 13px; margin-bottom: 10px; }
.report-form-submit {
    width: 100%; background: #c0392b; color: #fff; border: none; border-radius: 9px;
    padding: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
}
.report-form-submit:hover { background: #a93226; }
.report-form-submit:disabled { background: #ddd; color: #999; cursor: default; }

/* ── Thank-you / share panel (post-submit) ── */
/* Sit the panel ~1/3 down from the top (like the zoom prompt), not dead-centre. */
.report-modal-overlay.report-modal-top { align-items: flex-start; }
.report-modal-overlay.report-modal-top .report-modal { margin-top: 18vh; }
.report-thankyou { text-align: center; padding: 4px 2px 2px; }
.report-ty-check {
    width: 54px; height: 54px; margin: 2px auto 12px; border-radius: 50%;
    background: #1e7e34; color: #fff; font-size: 30px; line-height: 54px; font-weight: 700;
}
.report-ty-title { margin: 0 0 4px; font-size: 20px; color: #1e7e34; }
.report-ty-sub   { margin: 0 0 18px; font-size: 14px; color: #444; }
.report-ty-sharelabel { font-size: 13px; font-weight: 600; color: #555; margin-bottom: 10px; }
.report-share-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 10px;
}
.report-share-btn {
    border: none; border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    color: #fff; cursor: pointer; line-height: 1;
}
.report-share-btn:hover { filter: brightness(1.08); }
.report-share-btn:active { transform: translateY(1px); }
.share-x  { background: #000000; }
.share-fb { background: #1877f2; }
.share-rd { background: #ff4500; }
.share-cp { background: #4a4a4a; }
.report-ty-sharemsg { min-height: 16px; font-size: 12.5px; color: #1e7e34; font-weight: 600; margin-bottom: 12px; }
.report-ty-done {
    width: 100%; background: #eee; color: #333; border: none; border-radius: 9px;
    padding: 11px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.report-ty-done:hover { background: #e2e2e2; }

.report-toast {
    position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
    z-index: 1400; background: #1e7e34; color: #fff; padding: 13px 20px; border-radius: 10px;
    font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    opacity: 0; transition: opacity .3s, transform .3s; max-width: 90vw; text-align: center;
}
.report-toast.report-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) {
    /* Compact corner pill so it tucks into the bottom-right beside the logo
       watermark (bottom-left) without overlapping it. */
    .report-issue-btn {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 6px);
        right: 12px; padding: 8px 12px; font-size: 12.5px;
        border-radius: 20px; gap: 4px; line-height: 1; white-space: nowrap;
    }
    .report-issue-btn-label { display: none; }
    .report-issue-btn-label-short { display: inline; }
    .report-modal { max-width: 100%; }
    /* banner spans the width just above the mobile bottom nav */
    .report-banner { bottom: 78px; left: 8px; right: 8px; transform: none; max-width: none; }
}