/* Shared radar/cloud dock with independent timelines. */
:root { --imagery-player-height: 88px; --imagery-player-bottom: 18px; }
.imagery-player {
    --radar-accent: #b7a0ff;
    position: fixed;
    z-index: 1050;
    left: 94px;
    bottom: var(--imagery-player-bottom);
    width: min(480px, calc(100vw - 450px));
    box-sizing: border-box;
    padding: 8px 14px;
    color: #f3f5ff;
    border: 1px solid rgba(200, 215, 244, 0.17);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(32, 40, 62, 0.96), rgba(13, 24, 41, 0.94));
    box-shadow: 0 12px 38px rgba(0, 6, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    font-size: 14px;
}
.imagery-player .radar-timeline[hidden],
.imagery-player[hidden],
body.view-weather .imagery-player,
body.view-camera .imagery-player { display: none; }
.radar-timeline-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 24px; }
.radar-timeline-title { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; min-width: 0; margin: 0; }
.radar-timeline-title strong { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #dae2f3; white-space: nowrap; }
.radar-title-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--radar-accent); }
.radar-timezone { display: inline; margin-top: 0; color: #9eabc2; font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.radar-current-time { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.7px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.imagery-player .radar-timeline button { min-width: 0; min-height: 0; font: inherit; cursor: pointer; transition: background 160ms, box-shadow 160ms, transform 160ms; }
.imagery-player .radar-timeline button:active:not(:disabled) { transform: scale(0.94); }
.imagery-player .radar-timeline .radar-latest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 12px;
    margin-left: 0;
    border: 1px solid rgba(187, 202, 230, 0.18);
    border-radius: 999px;
    background: rgba(191, 205, 240, 0.07);
    color: #c9d5eb;
    font-size: 13px;
    font-weight: 550;
}
.radar-latest svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.imagery-player .radar-timeline[data-radar-mode="latest"] .radar-latest { color: #90e7cd; border-color: rgba(111, 213, 178, 0.24); background: rgba(77, 175, 142, 0.1); }
.radar-timeline-controls { display: flex; align-items: flex-start; gap: 10px; margin-top: 2px; }
.imagery-player .radar-timeline .radar-play {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 4px solid transparent;
    background-clip: padding-box;
    border-radius: 50%;
    background: #b9a5fa;
    color: #20213b;
    box-shadow: none;
    font-size: 0;
}
.radar-play::before { content: ''; width: 12px; height: 14px; margin-left: 3px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.radar-play[aria-pressed="true"]::before { width: 12px; height: 15px; margin-left: 0; clip-path: none; background: linear-gradient(to right, currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%); }
.radar-track-group { flex: 1; min-width: 0; }
.radar-track-wrap { position: relative; height: 28px; }
.radar-track-ticks { position: absolute; top: 11.5px; left: 10px; right: 10px; height: 5px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 3; }
.radar-track-ticks i { width: 2px; height: 2px; border-radius: 50%; background: rgba(243, 244, 255, 0.4); }
.imagery-player .radar-timeline input[type="range"] {
    position: relative;
    display: block;
    z-index: 2;
    width: 100%;
    min-width: 0;
    height: 44px;
    top: -8px;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
    accent-color: var(--radar-accent);
}
.imagery-player .radar-timeline input::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 8px;
    background: linear-gradient(to right, #b7a0ff var(--radar-progress, 100%), rgba(167, 183, 213, 0.2) var(--radar-progress, 100%));
}
.imagery-player .radar-timeline input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6.5px;
    border-radius: 50%;
    border: 3px solid #dfd5ff;
    background: #a088ed;
    box-shadow: 0 0 0 4px rgba(181, 150, 255, 0.12), 0 2px 5px rgba(0, 0, 0, 0.3);
}
.imagery-player .radar-timeline input::-moz-range-track { height: 5px; border-radius: 8px; background: rgba(167, 183, 213, 0.2); }
.imagery-player .radar-timeline input::-moz-range-progress { height: 5px; border-radius: 8px; background: #b7a0ff; }
.imagery-player .radar-timeline input::-moz-range-thumb { width: 12px; height: 12px; border: 3px solid #dfd5ff; border-radius: 50%; background: #a088ed; box-shadow: 0 0 0 4px rgba(181, 150, 255, 0.12); }
.radar-timeline-range { margin: 0; display: flex; justify-content: space-between; gap: 8px; padding-inline: 1px; color: #a2b0c9; font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.radar-timeline-footer { display: flex; align-items: baseline; justify-content: flex-end; flex: 1; min-width: 0; gap: 6px; margin: 0; }
.radar-state-dot { position: relative; top: -1px; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #b7a0ff; }
.radar-timeline-message { margin: 0; min-height: 0; min-width: 0; color: #adbbd2; font-size: 12px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imagery-player .radar-timeline[data-radar-mode="latest"] .radar-state-dot { background: #90e7cd; }
.imagery-player .radar-timeline[data-radar-mode="error"] .radar-state-dot { background: #ffbd83; }
.imagery-player .radar-timeline[data-radar-mode="error"] .radar-timeline-footer { flex-basis: 100%; justify-content: flex-start; }
.imagery-player .radar-timeline[data-radar-mode="error"] .radar-timeline-message { color: #ffcca0; white-space: normal; overflow-wrap: anywhere; }
.imagery-player .radar-timeline[aria-busy="true"] .radar-state-dot { background: #b7a0ff; animation: radar-status-pulse 1s ease-in-out infinite; }
.imagery-player .radar-timeline :disabled { opacity: 0.38; cursor: default; box-shadow: none; }
.imagery-player .radar-timeline :focus-visible { outline: 2px solid #ddd0ff; outline-offset: 4px; }
@keyframes radar-status-pulse { 50% { opacity: 0.35; } }
@media (hover: hover) {
    .imagery-player .radar-timeline .radar-play:hover:not(:disabled) { background-color: #d2c3ff; }
    .imagery-player .radar-timeline .radar-latest:hover:not(:disabled) { background: rgba(181, 159, 255, 0.15); }
}
@media (min-width: 769px) and (min-height: 601px),
       (min-width: 769px) and (pointer: fine) {
    body.imagery-open .legend-panel { bottom: calc(var(--imagery-player-bottom) + var(--imagery-player-height) + 12px); }
    body.imagery-open .rank-panel { max-height: min(720px, calc(100dvh - var(--imagery-player-bottom) - var(--imagery-player-height) - 170px)); }
}
@media (max-width: 768px),
       (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    :root { --imagery-player-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
    .imagery-player {
        left: calc(10px + env(safe-area-inset-left, 0px));
        width: calc(100vw - 20px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
        padding: 8px 12px;
        border-radius: 14px;
        z-index: 900;
    }
    .radar-timeline-heading { gap: 10px; }
    .radar-current-time { font-size: 20px; }
    .imagery-player .radar-timeline .radar-latest { padding-inline: 10px; }
    .radar-timeline-controls { gap: 10px; }
    body.imagery-open .legend-panel { bottom: calc(var(--imagery-player-bottom) + var(--imagery-player-height) + 12px); }
    body.imagery-open .ol-attribution { bottom: calc(var(--imagery-player-bottom) + var(--imagery-player-height) + 136px); }
}
@media (orientation: landscape) and (max-height: 600px) and (min-width: 769px) and (pointer: coarse) {
    .imagery-player { width: 420px; }
    body.imagery-open .legend-panel { left: auto; right: 10px; bottom: var(--imagery-player-bottom); width: min(280px, calc(100vw - 454px)); }
    body.imagery-open .ol-attribution { bottom: calc(var(--imagery-player-bottom) + 124px); }
}

.imagery-switch { display: flex; gap: 4px; width: fit-content; padding: 3px; margin: 0 0 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.2); }
.imagery-switch[hidden] { display: none; }
.imagery-switch button { min-height: 32px; padding: 4px 18px; border: 0; border-radius: 999px; background: transparent; color: #a6b5ce; font: inherit; font-size: 13px; cursor: pointer; }
.imagery-switch button[aria-pressed="true"] { background: rgba(183, 160, 255, 0.2); color: #e0d6ff; }
.imagery-switch button:focus-visible { outline: 2px solid #ddd0ff; outline-offset: 2px; }
@media (max-width: 380px) {
    .radar-timeline-heading { gap: 6px; }
    .radar-timeline-footer { flex-basis: 100%; justify-content: flex-start; }
}