/* ═════════════════════════════════════════════════════════════════════
   SHIP TRACKING — editorial overlays for the MapLibre map.
   Pairs with /js/ship-map.js + /assets/map-styles/reserve.json.

   Look: ivory paper, soft graphite landmasses, oxblood vessels and
   chokepoints — mirrors the Reserve-Edition SVG mockup while running
   on real MapLibre + AIS data.
   ════════════════════════════════════════════════════════════════════ */

/* The MapLibre canvas itself */
.ship-map,
#ship-map {
    width: 100%;
    height: 100%;
    background: #f0e9dd;
    transition: background 0.3s ease;
}
.map-stage {
    background: #f0e9dd;
    position: relative;
    transition: background 0.3s ease;
}
html[data-theme="dark"] .ship-map,
html[data-theme="dark"] #ship-map,
html[data-theme="dark"] .map-stage { background: #0e0c0a; }
html[data-theme="dark"] .rm-cp-label {
    color: var(--accent, #7f1d1d);
    text-shadow: 0 0 2px #0e0c0a, 0 0 4px #0e0c0a, 0 0 6px #0e0c0a;
}
html[data-theme="dark"] .rm-cp-ring { background: rgba(14, 12, 10, 0.6); }
html[data-theme="dark"] .ship-map:empty::before,
html[data-theme="dark"] #ship-map:empty::before { color: rgba(243, 237, 226, 0.4); }
html[data-theme="dark"] .maplibregl-ctrl-attrib,
html[data-theme="dark"] .mapboxgl-ctrl-attrib {
    background: rgba(243, 237, 226, 0.06) !important;
    color: rgba(243, 237, 226, 0.65) !important;
}
html[data-theme="dark"] .maplibregl-ctrl-attrib a { color: rgba(243, 237, 226, 0.85) !important; }
html[data-theme="dark"] .maplibregl-ctrl-group,
html[data-theme="dark"] .mapboxgl-ctrl-group {
    background: rgba(26, 24, 20, 0.85) !important;
    border-color: rgba(243, 237, 226, 0.14) !important;
}
html[data-theme="dark"] .maplibregl-ctrl-group button { filter: invert(1) hue-rotate(180deg); }

/* ── MapLibre default UI tweaks — quiet the controls for light paper ── */
.maplibregl-ctrl-attrib,
.mapboxgl-ctrl-attrib {
    background: rgba(26, 20, 16, 0.06) !important;
    color: rgba(26, 20, 16, 0.55) !important;
    font-family: var(--font-mono);
    font-size: 9px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 4px 8px !important;
}
.maplibregl-ctrl-attrib a { color: rgba(26, 20, 16, 0.8) !important; }
.maplibregl-ctrl-group,
.mapboxgl-ctrl-group {
    background: rgba(255, 252, 246, 0.85) !important;
    border: 1px solid rgba(26, 20, 16, 0.14) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}

/* ── Vessel marker — oxblood triangle, oriented by course ── */
.rm-vessel {
    --rm-rot: 0deg;
    width: 14px;
    height: 14px;
    color: var(--accent, #7f1d1d);
    cursor: pointer;
    transform: rotate(var(--rm-rot));
    transform-origin: center;
    transition: transform 0.3s ease, color 0.2s;
    position: relative;
    pointer-events: auto;
}
.rm-vessel-arrow {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 0 2px rgba(122, 22, 32, 0.25));
}
.rm-vessel-pulse {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent, #7f1d1d) 0%, transparent 60%);
    opacity: 0;
    transform: scale(0.6);
    transform-origin: center;
    pointer-events: none;
    animation: rmPulse 3s ease-in-out infinite;
}
@keyframes rmPulse {
    0%, 100% { opacity: 0;    transform: scale(0.6); }
    50%      { opacity: 0.35; transform: scale(1.4); }
}
.rm-vessel:hover { color: #1a1410; }
.rm-vessel.is-selected {
    color: #1a1410;
    transform: rotate(var(--rm-rot)) scale(1.4);
}
.rm-vessel.is-selected .rm-vessel-pulse {
    animation-duration: 1.4s;
    opacity: 0.55;
}

/* Vessel type variants — colour by class */
.rm-vessel[data-type="container"] { color: var(--accent, #7f1d1d); }
.rm-vessel[data-type="tanker"]    { color: #a67c2e; }
.rm-vessel[data-type="bulker"]    { color: #3f5a78; }
.rm-vessel[data-type="lng"]       { color: #3a7757; }
/* Default for unmatched types: muted graphite triangle */
.rm-vessel:not([data-type]),
.rm-vessel[data-type=""] { color: #1a1410; }
.rm-vessel:not([data-type]) .rm-vessel-pulse,
.rm-vessel[data-type=""] .rm-vessel-pulse { display: none; }

/* ── Chokepoint marker — annotated ring with horizontal label ── */
.rm-chokepoint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--accent, #7f1d1d);
    pointer-events: none;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.rm-cp-ring {
    width: 12px; height: 12px;
    border: 1.4px solid var(--accent, #7f1d1d);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 8px rgba(122, 22, 32, 0.18);
    background: rgba(240, 233, 221, 0.6);
}
.rm-cp-ring::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px solid var(--accent, #7f1d1d);
    opacity: 0.45;
    animation: rmCpPulse 3.5s ease-out infinite;
}
@keyframes rmCpPulse {
    0%   { transform: scale(0.6); opacity: 0.5; }
    100% { transform: scale(1.7); opacity: 0;   }
}
.rm-cp-dot {
    position: absolute;
    width: 4px; height: 4px;
    background: var(--accent, #7f1d1d);
    border-radius: 50%;
    pointer-events: none;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}
.rm-cp-label {
    color: var(--accent, #7f1d1d);
    text-shadow: 0 0 2px #f0e9dd, 0 0 4px #f0e9dd, 0 0 6px #f0e9dd;
    background: transparent;
    padding: 2px 0;
}

/* ── Map panel: the floating dark info card (bottom-left) ── */
.map-stage .map-panel {
    background: #1a1814;
    color: rgba(243, 237, 226, 0.96);
    border: 1px solid rgba(26, 20, 16, 0.18);
}

/* When the map is loading, gentle placeholder */
.ship-map:empty::before,
#ship-map:empty::before {
    content: "Initialising map…";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(26, 20, 16, 0.4);
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Mobile: shrink chokepoint labels so they don't crowd a small map */
@media (max-width: 720px) {
    .rm-chokepoint { font-size: 8.5px; gap: 5px; }
    .rm-cp-ring   { width: 10px; height: 10px; }
    .rm-vessel    { width: 12px; height: 12px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rm-vessel-pulse,
    .rm-cp-ring::after { animation: none; }
}

/* ──────────────────────────────────────────────────────────
   Vessel search — floating premium chip, top-left of map
   ────────────────────────────────────────────────────────── */
.rm-search {
    position: absolute; top: 18px; left: 18px; z-index: 5;
    width: 320px; max-width: calc(100% - 36px);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.rm-search-bar {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 252, 246, 0.92);
    border: 1px solid rgba(26, 20, 16, 0.16);
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 4px 14px rgba(20, 16, 12, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rm-search-bar:focus-within {
    border-color: var(--accent, #7f1d1d);
    box-shadow: 0 4px 18px rgba(127, 29, 29, 0.18);
}
.rm-search-icon {
    color: var(--ink-muted, rgba(26, 20, 16, 0.55));
    font-size: 14px; line-height: 1;
}
.rm-search-input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
    font: 400 13px/1.4 var(--font-mono, monospace);
    color: var(--ink, #1a1410);
    padding: 2px 0;
}
.rm-search-input::placeholder {
    color: var(--ink-muted, rgba(26, 20, 16, 0.45));
}
.rm-search-clear {
    border: 0; background: transparent; cursor: pointer;
    font-size: 18px; line-height: 1;
    color: var(--ink-muted, rgba(26, 20, 16, 0.42));
    padding: 0 2px;
    opacity: 0; pointer-events: none;
    transition: opacity 0.15s;
}
.rm-search-input:not(:placeholder-shown) ~ .rm-search-clear {
    opacity: 1; pointer-events: auto;
}
.rm-search-results {
    display: none;
    margin-top: 6px;
    background: rgba(255, 252, 246, 0.96);
    border: 1px solid rgba(26, 20, 16, 0.16);
    border-radius: 6px;
    box-shadow: 0 12px 32px rgba(20, 16, 12, 0.14);
    max-height: 280px; overflow-y: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.rm-search-results.is-open { display: block; }
.rm-search-item {
    display: flex; flex-direction: column; gap: 2px;
    width: 100%; text-align: left;
    padding: 10px 14px;
    background: transparent; border: 0; border-bottom: 1px solid rgba(26, 20, 16, 0.06);
    cursor: pointer; color: inherit;
}
.rm-search-item:last-child { border-bottom: 0; }
.rm-search-item:hover, .rm-search-item.is-active {
    background: rgba(127, 29, 29, 0.06);
}
.rm-search-name {
    font: 500 13px/1.3 var(--font-serif, 'Newsreader', serif);
    color: var(--ink, #1a1410);
}
.rm-search-meta {
    font: 400 10.5px/1.4 var(--font-mono, monospace);
    color: var(--ink-muted, rgba(26, 20, 16, 0.55));
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rm-search-empty {
    padding: 18px 14px; text-align: center;
    font: italic 12px/1.4 var(--font-serif, serif);
    color: var(--ink-muted, rgba(26, 20, 16, 0.45));
}

/* Dark-theme variant — uses the same colour vocabulary, flipped */
html[data-theme="dark"] .rm-search-bar,
html[data-theme="dark"] .rm-search-results {
    background: rgba(20, 18, 16, 0.92);
    border-color: rgba(243, 237, 226, 0.14);
}
html[data-theme="dark"] .rm-search-input { color: #f3ede2; }
html[data-theme="dark"] .rm-search-input::placeholder { color: rgba(243, 237, 226, 0.4); }
html[data-theme="dark"] .rm-search-icon { color: rgba(243, 237, 226, 0.55); }
html[data-theme="dark"] .rm-search-clear { color: rgba(243, 237, 226, 0.45); }
html[data-theme="dark"] .rm-search-item { border-bottom-color: rgba(243, 237, 226, 0.06); }
html[data-theme="dark"] .rm-search-name { color: #f3ede2; }
html[data-theme="dark"] .rm-search-meta { color: rgba(243, 237, 226, 0.55); }
html[data-theme="dark"] .rm-search-item:hover,
html[data-theme="dark"] .rm-search-item.is-active { background: rgba(127, 29, 29, 0.20); }

/* ──────────────────────────────────────────────────────────
   External deep-link row inside the info panel
   ────────────────────────────────────────────────────────── */
.map-panel .rm-ext-row {
    display: flex; flex-wrap: wrap; gap: 14px;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(243, 237, 226, 0.10);
}
.map-panel .rm-ext {
    font: 500 10.5px/1.4 var(--font-mono, monospace);
    letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(243, 237, 226, 0.78);
    text-decoration: none;
    border-bottom: 1px solid rgba(243, 237, 226, 0.22);
    padding-bottom: 1px;
    transition: color 0.15s, border-color 0.15s;
}
.map-panel .rm-ext:hover {
    color: var(--accent, #7f1d1d);
    border-color: var(--accent, #7f1d1d);
}

/* Mobile: search becomes full-width below the map controls */
@media (max-width: 720px) {
    .rm-search { top: 10px; left: 10px; right: 10px; width: auto; }
    .rm-search-input { font-size: 16px; } /* prevent iOS zoom */
}

/* ──────────────────────────────────────────────────────────
   Info-panel vessel silhouette — type-based editorial placeholder
   (no third-party photo fetch, no privacy concerns)
   ────────────────────────────────────────────────────────── */
.rm-vessel-silhouette {
    display: block;
    width: 100%; height: auto;
    margin: 10px 0 14px;
    padding: 12px 14px;
    background: rgba(243, 237, 226, 0.04);
    border-top: 1px solid rgba(243, 237, 226, 0.08);
    border-bottom: 1px solid rgba(243, 237, 226, 0.08);
}