/* Map page styles (templates/index.html), moved out of the inline <style> block verbatim (#98 step 3). */

body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background: #1a1a1a;
    color: white;
}

.title-box {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
    animation: fadeInDown 0.6s ease-out;
    transition: all 0.3s ease;
    background: none;
    border: none;
    padding: 0;
}

.title-box:hover {
    transform: translateY(-2px);
}

.title-box a {
    display: inline-block;
}

.logo-img {
    width: 44px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.title-link {
    color: #3498db;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
    display: inline-block;
}

.title-link:hover {
    color: #5dade2;
    text-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
    transform: scale(1.05);
}

/* Bootstrap dropdown customization for our color scheme */
.title-box .dropdown-toggle,
.title-box button {
    background: transparent !important;
    border: none !important;
    color: white !important;
    transition: all 0.3s ease;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.title-box .dropdown-toggle:hover,
.title-box .dropdown-toggle:focus,
.title-box .dropdown-toggle:active,
.title-box .dropdown-toggle.active,
.title-box button:hover,
.title-box button:focus,
.title-box button:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: translateY(-2px);
}

.title-box .dropdown-menu {
    background: rgba(22, 28, 36, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px);
    margin-top: 2px !important;
    width: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
    position: absolute;
    top: 100%;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    overflow: hidden;
}

.title-box .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.title-box .dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    background: transparent;
    color: white !important;
    text-decoration: none;
    font-size: 12px !important;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    /* Fill the menu's inside exactly (44 px minus the 1 px border each side), so the hover highlight lines up with
       the button instead of spilling 2 px off one side */
    width: 100% !important;
    height: 42px !important;
    box-sizing: border-box;
    border-radius: 0 !important;
    margin: 0 !important;
    min-height: 42px !important;
}

.title-box .dropdown-item:hover,
.title-box .dropdown-item:focus {
    background: rgba(52, 152, 219, 0.9) !important;
    color: white !important;
}

.title-box .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.2) !important;
    margin: 0 !important;
}

/* Override Bootstrap dropdown positioning */
.title-box .dropdown-menu:not(.show) {
    display: block !important;
}

.dropdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
    background: transparent;
    color: white;
    line-height: 1;
}

.dropdown-item:hover .dropdown-icon {
    background: transparent;
    color: white;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile adjustments for title box */
@media (max-width: 768px) {
    .title-box {
        top: 15px;
        left: 15px;
        padding: 6px 12px;
    }
    
    .title-box h2 {
        font-size: 12px;
    }
    
    .logo-img {
        width: 44px;
        height: auto;
    }
    
    /* Ensure flexbox centering works perfectly on mobile */
    .title-box .dropdown-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        text-align: center !important;
    }
    
    /* Reset any potential mobile text alignment issues */
    .title-box .dropdown-item img,
    .title-box .dropdown-item i {
        flex-shrink: 0;
    }
    
    /* Hide Leaflet attribution on mobile to save viewport space */
    .leaflet-control-attribution {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .title-box {
        top: 10px;
        left: 10px;
        padding: 4px 8px;
    }
    
    .title-box h2 {
        font-size: 10px;
    }
    
    .logo-img {
        width: 40px;
        height: auto;
    }
    
    .title-box .dropdown-menu {
        width: 40px !important;
        min-width: 40px !important;
    }
    
    /* Ensure flexbox centering works perfectly on mobile */
    .title-box .dropdown-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        text-align: center !important;
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
    }
    
    /* Reset any potential mobile text alignment issues */
    .title-box .dropdown-item img,
    .title-box .dropdown-item i {
        flex-shrink: 0;
    }
}

#map {
    height: 100vh;
    width: 100%;
    background: #303030; /* Default dark mode background */
}

.leaflet-control-attribution a {
    color: #3498db !important;
    text-decoration: none !important;
}

.leaflet-control-attribution a:hover {
    color: #5dade2 !important;
    text-decoration: underline !important;
}

.leaflet-container {
    background: #1a1a1a;
}

.control-box {
    position: fixed;
    bottom: 30px;
    right: 20px;
    background: rgba(22, 28, 36, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    min-width: 160px;                /* opens and closes at once: no slide or scale animation (owner, launch review) */
}

/* Hamburger menu for mobile */
.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(22, 28, 36, 0.94);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.hamburger-btn:hover {
    background: rgba(52, 152, 219, 0.9);
    color: white;
}

.hamburger-btn.active {
    background: rgba(52, 152, 219, 0.9);
    color: white;
}

/* Desktop minimize system - matches mobile hamburger pattern */
.desktop-minimize-btn {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(52, 73, 94, 0.9);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: none; /* Hidden on mobile */
    align-items: center;
    justify-content: center;
}

.desktop-minimize-btn:hover {
    background: rgba(52, 152, 219, 0.9);
    color: white;
}

.desktop-restore-btn {
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: rgba(22, 28, 36, 0.94);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
}

.desktop-restore-btn:hover {
    background: rgba(52, 152, 219, 0.9);
    color: white;
}

/* Mobile responsive design */
@media (max-width: 768px) {
    .control-box {
        transform: translateX(calc(100% + 20px));
        min-width: 240px;
        max-width: calc(100vw - 40px);
        bottom: 90px;
        right: 20px;
        opacity: 0;
        visibility: hidden;
    }
    
    .control-box.mobile-open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }
    
    .hamburger-btn {
        display: flex;
    }
    
    /* Hide desktop minimize system on mobile */
    .desktop-minimize-btn,
    .desktop-restore-btn {
        display: none !important;
    }
}

/* Desktop responsive design */
@media (min-width: 769px) {
    .hamburger-btn {
        display: none !important;
    }
    
    /* The X sits inside the open panel's bottom-right corner, clear of the auto-refresh Toggle (#209).
       The closed-panel restore button keeps the 44 px size of the other map buttons. */
    .desktop-minimize-btn {
        display: flex;
        width: 24px;
        height: 24px;
        bottom: 36px;
        right: 26px;
        border-radius: 6px;
        font-size: 12px;
        box-shadow: none;
    }

    /* Desktop minimized state */
    .control-box.desktop-minimized {
        transform: scale(0);
        opacity: 0;
        pointer-events: none;
    }
    
    .control-box.desktop-minimized + .desktop-minimize-btn {
        display: none;
    }
}

@media (max-width: 480px) {
    .control-box {
        padding: 12px;
        bottom: 80px;
    }
    
    .mode-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .mode-btn {
        flex: 1;
        min-width: calc(50% - 2px);
        padding: 6px 8px;
        font-size: 11px;
    }
}

.control-box h3 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: #3498db;
}

.mode-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mode-btn {
    padding: 8px 12px;
    background: rgba(52, 73, 94, 0.8);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
}

.mode-btn:hover {
    background: rgba(52, 152, 219, 0.9);
    transform: translateY(-1px);
}

.mode-btn.active {
    background: #3498db;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
}

/* Aircraft Intelligence (#207): the button has Daily Intelligence's old place and color; intel mode adds
   #intel-section */
.mode-btn.intel-btn {
    background: #f39c12;
    border-color: #f39c12;
    color: white;
}

.mode-btn.intel-btn.active {
    background: #d68910;
    border-color: #d68910;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.35);
}

/* 4c: the other buttons become compact rows while intel mode is open:
   [Latest | Last known] [Aircraft Intelligence] [Show Historical Paths | Area] [Labels | Clear] */
body.intel-active #control-box .mode-buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px !important;      /* the groups set 10px inline */
}

body.intel-active #control-box .mode-buttons .mode-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 4px;
    font-size: 11px;
    white-space: nowrap;
    /* .mode-btn animates "all": the switch to short names and rows must be instant, only colors may fade */
    transition: background-color 0.3s, box-shadow 0.3s;
}

body.intel-active #control-box .mode-btn.intel-btn {
    order: -1;
    flex-basis: 100%;
    padding: 7px 4px;
    font-size: 12px;
}

/* The paths button keeps its full name ("Show Historical Paths", as in Daily Intelligence), on two lines if the
   panel is narrow (phones) */
body.intel-active #control-box #paths-btn {
    white-space: normal;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

body.intel-active #control-box .mode-btn[data-short] {
    font-size: 0;                    /* the full name stays as the text, for screen readers */
}

body.intel-active #control-box .mode-btn[data-short]::after {
    content: attr(data-short);
    font-size: 11px;
}

.intel-section {
    margin-top: 10px;
    padding: 10px;
    background: rgba(243, 156, 18, 0.08);
    border: 1px solid rgba(243, 156, 18, 0.35);
    border-radius: 6px;
}

.intel-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #f5b041;
}

.intel-window {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
}

/* Window picker (#207 4b): five preset chips in one row, even in the 230 px phone panel */
.intel-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    margin-top: 8px;
}

.intel-chip {
    padding: 5px 0;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    color: inherit;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
}

.intel-chip:hover {
    background: rgba(243, 156, 18, 0.25);
}

.intel-chip.active {
    background: #f39c12;
    border-color: #f39c12;
    color: white;
}

.intel-range {
    margin-top: 8px;
    font-size: 12px;
}

.intel-range summary {
    cursor: pointer;
    color: #f5b041;
}

.intel-range-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 8px;
    align-items: center;
    margin-top: 6px;
}

.intel-range-fields input[type="date"] {
    min-width: 0;
    width: 100%;
    font-size: 12px;
    padding: 3px 4px;
}

.intel-apply {
    grid-column: 1 / -1;
    padding: 5px 0;
    font-size: 12px;
    color: white;
    background: #f39c12;
    border: 1px solid #f39c12;
    border-radius: 4px;
    cursor: pointer;
}

.intel-range-fields input[aria-invalid="true"] {
    outline: 2px solid #e74c3c;
    outline-offset: 1px;
}

.intel-error {
    grid-column: 1 / -1;
    color: #e74c3c;
    font-size: 11px;
}

.intel-error:empty {
    display: none;
}

/* Hidden unless a data refresh fails */
.status-indicator {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 15px;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.status-indicator.offline {
    display: block;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e74c3c;
    display: inline-block;
    margin-right: 8px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); }
}

/* Mobile-responsive status indicator */
@media (max-width: 768px) {
    .status-indicator {
        top: 10px !important;
        right: 10px !important;
        padding: 6px 8px !important;
        border-radius: 8px !important;
        font-size: 11px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    }
    
    .status-dot {
        width: 8px !important;
        height: 8px !important;
        margin-right: 5px !important;
    }
    
    #status-text {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .status-indicator {
        top: 8px !important;
        right: 8px !important;
        padding: 4px 6px !important;
        border-radius: 6px !important;
        font-size: 10px !important;
    }
    
    .status-dot {
        width: 6px !important;
        height: 6px !important;
        margin-right: 4px !important;
    }
    
    #status-text {
        font-size: 10px !important;
    }
}

.aircraft-popup {
    background: rgba(26, 26, 26, 0.95);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.aircraft-popup h4 {
    margin: 0 0 10px 0;
    color: #3498db;
}

.aircraft-popup p {
    margin: 5px 0;
    font-size: 14px;
}

.aircraft-popup a {
    color: #3498db;
    text-decoration: none;
}

.aircraft-popup a:hover {
    color: #5dade2;
}

/* Safari-specific popup fixes */
.custom-popup .leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    background: white;
}

.custom-popup .leaflet-popup-content {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.custom-popup .leaflet-popup-tip {
    background: #2c3e50;
}

/* Aircraft hover/tap label styles */
.aircraft-label {
    position: absolute;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
    line-height: 1.4;
}

.aircraft-label .label-registration {
    font-weight: bold;
}

.aircraft-label .label-notes {
    font-weight: normal;
    font-size: 10px;
    opacity: 0.85;
}

.aircraft-label::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.85);
}

/* Always-on map labels from the Labels button */
.leaflet-tooltip.aircraft-map-label {
    padding: 1px 5px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: none;
    border-radius: 3px;
    box-shadow: none;
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 1.3;
    white-space: nowrap;
}
.leaflet-tooltip.aircraft-map-label::before { display: none; }
.aircraft-map-label .map-label-tag { margin-left: 4px; font-weight: normal; opacity: 0.75; }
.aircraft-map-label .map-label-detail { font-weight: normal; opacity: 0.85; }
/* Labels on a fanned-out stack (#11): kept short so neighbours don't collide */
.leaflet-tooltip.aircraft-map-label.spider-label { max-width: 170px; white-space: nowrap; }
.spider-label .map-label-detail { overflow: hidden; text-overflow: ellipsis; max-width: 160px; }

/* Two smaller buttons side by side */
.mode-buttons.button-pair { flex-direction: row; }
.button-pair .mode-btn { flex: 1; min-width: 0; padding: 6px 4px; font-size: 11px; white-space: nowrap; }

/* Mobile-responsive popup styles */
@media (max-width: 768px) {
    /* Keep original popup width, just optimize content */
    .custom-popup .leaflet-popup-content-wrapper {
        font-size: 12px !important;
    }
    
    /* Compact header styling for mobile */
    .aircraft-popup h4 {
        font-size: 12px !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.2 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }
    
    /* Make N-number smaller and inline with callsign on mobile */
    .aircraft-popup h4 .n-number {
        font-size: 11px !important;
        font-weight: bold !important;
    }
    
    .aircraft-popup h4 .callsign {
        font-size: 9px !important;
        font-weight: normal !important;
        color: #95a5a6 !important;
        white-space: nowrap !important;
    }
    
    /* Tighter spacing for popup content */
    .aircraft-popup {
        padding: 10px !important;
        font-size: 11px !important;
    }
    
    .aircraft-popup p {
        font-size: 10px !important;
        margin: 2px 0 !important;
        line-height: 1.3 !important;
    }
}

@media (max-width: 480px) {
    .aircraft-popup h4 {
        font-size: 11px !important;
    }
    
    .aircraft-popup h4 .n-number {
        font-size: 10px !important;
    }
    
    .aircraft-popup h4 .callsign {
        font-size: 8px !important;
    }
    
    .aircraft-popup {
        padding: 8px !important;
        font-size: 10px !important;
    }
    
    .aircraft-popup p {
        font-size: 9px !important;
        margin: 1px 0 !important;
    }
}

.aircraft-icon {
    transition: opacity 0.3s ease;
}

.aircraft-icon:hover {
    opacity: 0.8;
}

.aircraft-icon-rotated {
    transition: opacity 0.3s ease, transform 0.5s ease;
}

.aircraft-icon-rotated:hover {
    opacity: 0.8;
}

.aircraft-icon-rotated div {
    transition: transform 0.5s ease;
}

input[type="text"] {
    transition: border-color 0.3s ease;
}

input[type="text"]:focus {
    border-color: #3498db;
    outline: none;
}

/* Map buttons, always on screen */
.nav-controls {
    position: fixed;
    bottom: 30px;
    left: 15px;
    display: flex;
    flex-direction: row;            /* one row on every screen: the panels above get the height (owner, #257) */
    background: rgba(22, 28, 36, 0.94);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1001;
}

.nav-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    box-sizing: border-box;
    border-radius: 0;
}

.nav-btn:hover {
    background: rgba(52, 152, 219, 0.9);
    color: white;
}

.nav-btn.active {
    background: #e74c3c;
    color: white;
}

/* Hide path button */
.hide-paths-btn {
    position: fixed;
    top: 20px;                      /* the top edge, level with the title box */
    right: 20px;
    background: rgba(231, 76, 60, 0.9);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    display: none;
}

.hide-paths-btn:hover {
    background: rgba(231, 76, 60, 1);
    transform: scale(1.05);
}

/* Mobile adjustments for nav controls */
@media (max-width: 768px) {
    /* Side by side so the collapsed Area Intelligence bar doesn't cover them */
    .nav-controls {
        flex-direction: row;
    }

    .nav-btn {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
    
    .hide-paths-btn {
        top: 15px;
        right: 15px;
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* Agency Legend - Rounded Rectangle Layout */
.agency-legend {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(22, 28, 36, 0.94);
    border-radius: 8px;
    padding: 0 16px;
    z-index: 1000;
    color: white;
    font-size: 11px;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.agency-legend.collapsed {
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
}

.agency-legend h4 {
    display: none; /* Hide title for compact horizontal layout */
}

.legend-content {
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.legend-item.clickable-filter {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.legend-item.clickable-filter:hover {
    background: rgba(52, 152, 219, 0.9);
    color: white;
    transform: translateY(-1px);
}

.legend-item.clickable-filter.active {
    background: rgba(52, 152, 219, 0.9);
    color: white;
    font-weight: bold;
}

.legend-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-toggle {
    position: absolute;
    top: 2px;
    right: 4px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 14px;
    padding: 2px;
    line-height: 1;
}

.agency-legend.collapsed .legend-content {
    opacity: 0;
    pointer-events: none; /* Disable all click events when collapsed */
}

.legend-expand-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    display: none;
}

.agency-legend.collapsed .legend-expand-icon {
    display: block;
}

/* Mobile adjustments for legend */
@media (max-width: 768px) {
    .agency-legend {
        font-size: 10px;
        bottom: 30px;
        /* Dynamic sizing - only expand when not collapsed */
    }
    
    .agency-legend:not(.collapsed) {
        height: auto; /* Allow height to grow for vertical stacking */
        max-height: none; /* Remove height restriction when expanded */
        padding: 6px 12px; /* Adjust padding for vertical layout */
        width: auto; /* Allow width to shrink for vertical layout */
        min-width: 120px; /* Ensure minimum width for readability */
    }
    
    .agency-legend.collapsed {
        width: 40px;
        height: 40px;
        padding: 0;
        /* Force square dimensions when collapsed */
        min-width: 40px;
        max-width: 40px;
        min-height: 40px;
        max-height: 40px;
    }
    
    /* Vertical stacking for mobile - stack filter buttons in column */
    .agency-legend:not(.collapsed) .legend-content {
        flex-direction: column; /* Stack vertically instead of horizontally */
        gap: 4px; /* Tighter spacing for vertical layout */
        align-items: stretch; /* Make items fill width */
    }
    
    .agency-legend:not(.collapsed) .legend-item {
        width: 100%; /* Fill available width */
        justify-content: flex-start; /* Left-align content */
        padding: 6px 8px; /* Increase padding for better touch targets */
        margin: 0; /* Remove margins for cleaner stacking */
        border-radius: 4px; /* Maintain rounded corners */
    }
    
    /* Mobile abbreviations for agency names - visual only, preserves filtering */
    .legend-item[data-agency="homeland"] span {
        display: none;
    }
    .legend-item[data-agency="homeland"]::after {
        content: "DHS";
        font-size: 10px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="contractor"] span {
        display: none;
    }
    .legend-item[data-agency="contractor"]::after {
        content: "Contract";
        font-size: 10px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="border"] span {
        display: none;
    }
    .legend-item[data-agency="border"]::after {
        content: "CBP";
        font-size: 10px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="immigration"] span {
        display: none;
    }
    .legend-item[data-agency="immigration"]::after {
        content: "ICE";
        font-size: 10px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="doj"] span {
        display: none;
    }
    .legend-item[data-agency="doj"]::after {
        content: "DOJ";
        font-size: 10px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="all"] span {
        display: none;
    }
    .legend-item[data-agency="all"]::after {
        content: "ALL";
        font-size: 10px;
        font-weight: bold;
    }
}

@media (max-width: 480px) {
    .agency-legend {
        font-size: 9px;
        bottom: 30px;
        /* Dynamic sizing - only expand when not collapsed */
    }
    
    .agency-legend:not(.collapsed) {
        height: auto; /* Allow height to grow for vertical stacking */
        max-height: none; /* Remove height restriction when expanded */
        padding: 4px 8px; /* Adjust padding for smaller screens */
        width: auto; /* Allow width to shrink for vertical layout */
        min-width: 100px; /* Smaller minimum width for very small screens */
    }
    
    .agency-legend.collapsed {
        width: 36px;
        height: 36px;
        padding: 0;
        /* Force square dimensions when collapsed */
        min-width: 36px;
        max-width: 36px;
        min-height: 36px;
        max-height: 36px;
    }
    
    /* Vertical stacking for small mobile - tighter spacing */
    .agency-legend:not(.collapsed) .legend-content {
        flex-direction: column; /* Stack vertically */
        gap: 2px; /* Even tighter spacing for small screens */
        align-items: stretch; /* Make items fill width */
    }
    
    .agency-legend:not(.collapsed) .legend-item {
        width: 100%; /* Fill available width */
        justify-content: flex-start; /* Left-align content */
        padding: 4px 6px; /* Smaller padding for small screens */
        margin: 0; /* Remove margins */
        border-radius: 3px; /* Slightly smaller border radius */
    }
    
    /* Mobile abbreviations for agency names - visual only, preserves filtering */
    .legend-item[data-agency="homeland"] span {
        display: none;
    }
    .legend-item[data-agency="homeland"]::after {
        content: "DHS";
        font-size: 9px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="contractor"] span {
        display: none;
    }
    .legend-item[data-agency="contractor"]::after {
        content: "Contract";
        font-size: 9px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="border"] span {
        display: none;
    }
    .legend-item[data-agency="border"]::after {
        content: "CBP";
        font-size: 9px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="immigration"] span {
        display: none;
    }
    .legend-item[data-agency="immigration"]::after {
        content: "ICE";
        font-size: 9px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="doj"] span {
        display: none;
    }
    .legend-item[data-agency="doj"]::after {
        content: "DOJ";
        font-size: 9px;
        font-weight: bold;
    }
    
    .legend-item[data-agency="all"] span {
        display: none;
    }
    .legend-item[data-agency="all"]::after {
        content: "ALL";
        font-size: 9px;
        font-weight: bold;
    }
}

/* Dark mode styles for Leaflet map (matching sister site) */
/* The raster fallback (no WebGL): darkened by this filter for the dark styles only. The OpenFreeMap vector map
   (#257) draws in a canvas, not tiles, so it is never filtered. */
body.dark-mode:not(.map-light) .leaflet-tile {
    filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

body.dark-mode .leaflet-container {
    background: #303030;
}
body.map-light #map.leaflet-container { background: #f2efe9; }   /* behind a light style while it loads (beats #map's own) */

body.dark-mode .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.7) !important;
    color: #ddd !important;
}

body.dark-mode .leaflet-control-zoom a {
    background-color: #222;
    color: #ddd;
}

body.dark-mode .leaflet-control-zoom a:hover {
    background-color: #333;
}

/* "Only N123's paths." with a way back (#207 5d) */
.intel-focus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
}

.intel-focus[hidden] {
    display: none;
}

.intel-focus-clear {
    padding: 3px 8px;
    font-size: 11px;
    color: inherit;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
}

/* Heatmap toggle (#207 5c): an optional layer, off each time intel mode opens */
.intel-heat {
    margin-top: 8px;
}

.intel-heat-toggle {
    width: 100%;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
}

.intel-heat-toggle.active {
    background: #c0392b;
    border-color: #c0392b;
    color: white;
}

.intel-heat-layers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 6px;
}

.intel-heat-layer {
    padding: 4px 0;
    font-size: 11px;
    color: inherit;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
}

.intel-heat-layer.active {
    background: rgba(192, 57, 43, 0.75);
    border-color: #c0392b;
    color: white;
}

.intel-heat-scale {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 10px;
    opacity: 0.85;
}

.intel-heat-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(255, 214, 102, 0.5), rgba(253, 141, 60, 0.75), rgb(227, 26, 28), rgb(142, 1, 82));
}

.intel-heat-status {
    width: 0;                    /* wraps to the panel's width instead of widening it (owner, launch rehearsal) */
    min-width: 100%;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
}

.intel-heat-status:empty {
    display: none;
}

/* Safari-specific CSS for better drop-shadow support on aircraft icons */
@supports (-webkit-backdrop-filter: blur(1px)) {
    /* Safari-specific styles */
    .safari-aircraft-shadow {
        /* Use multiple box-shadows instead of drop-shadow for better Safari compatibility */
        filter: none !important;
        box-shadow: 
            1px 1px 1px rgba(255, 255, 255, 0.9),
            -1px -1px 1px rgba(255, 255, 255, 0.9),
            1px -1px 1px rgba(255, 255, 255, 0.9),
            -1px 1px 1px rgba(255, 255, 255, 0.9),
            0 0 2px rgba(255, 255, 255, 0.8) !important;
    }
    
    .safari-aircraft-shadow-border {
        /* White stroke for border agency icons on Safari */
        filter: none !important;
        box-shadow: 
            0.5px 0px 0px rgba(255, 255, 255, 1),
            -0.5px 0px 0px rgba(255, 255, 255, 1),
            0px 0.5px 0px rgba(255, 255, 255, 1),
            0px -0.5px 0px rgba(255, 255, 255, 1),
            0 0 1px rgba(255, 255, 255, 0.8) !important;
    }
    
    .safari-aircraft-shadow-dark {
        /* Dark stroke for other agency icons on Safari */
        filter: none !important;
        box-shadow: 
            1px 0px 0px rgba(0, 0, 0, 0.8),
            -1px 0px 0px rgba(0, 0, 0, 0.8),
            0px 1px 0px rgba(0, 0, 0, 0.8),
            0px -1px 0px rgba(0, 0, 0, 0.8),
            0 0 1px rgba(0, 0, 0, 0.6) !important;
    }
}

/* Alternative Safari support using -webkit-filter */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .webkit-aircraft-icon {
        -webkit-filter: drop-shadow(0.5px 0px 0px rgba(255, 255, 255, 1)) 
                       drop-shadow(-0.5px 0px 0px rgba(255, 255, 255, 1)) 
                       drop-shadow(0px 0.5px 0px rgba(255, 255, 255, 1)) 
                       drop-shadow(0px -0.5px 0px rgba(255, 255, 255, 1));
        filter: drop-shadow(0.5px 0px 0px rgba(255, 255, 255, 1)) 
                drop-shadow(-0.5px 0px 0px rgba(255, 255, 255, 1)) 
                drop-shadow(0px 0.5px 0px rgba(255, 255, 255, 1)) 
                drop-shadow(0px -0.5px 0px rgba(255, 255, 255, 1));
    }
}

/* Mobile-responsive notification styles */
@media (max-width: 768px) {
    #notification {
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        right: 10px !important;
        padding: 6px 8px !important;
        font-size: 12px !important;
        max-width: calc(100vw - 20px) !important;
        width: auto !important;
        text-align: center !important;
        border-radius: 3px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }
    
    #notification-text {
        font-size: 12px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: calc(100% - 30px) !important;
        display: inline-block !important;
    }
    
    #notification button {
        margin-left: 6px !important;
        font-size: 14px !important;
        padding: 0 !important;
        width: 20px !important;
        height: 20px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Session callouts: per-session analysis on the map while sessions are shown (#168 follow-up).
   Same dark look as the mission panel; the border takes the session path's color. */
.leaflet-tooltip.session-callout {
    background: rgba(44, 62, 80, 0.92);
    color: #ecf0f1;
    border: 2px solid #3498db;
    border-radius: 6px;
    padding: 5px 7px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
}
/* The pole (#208): a line from the card to an arrow whose tip touches the path's edge. --pole is set by the script. */
.leaflet-tooltip.session-callout { --pole: 30px; }
.leaflet-tooltip.session-callout.leaflet-tooltip-right::before { border-right-color: inherit; margin-left: calc(-1 * var(--pole) - 8px); }
.leaflet-tooltip.session-callout.leaflet-tooltip-left::before { border-left-color: inherit; margin-right: calc(-1 * var(--pole) - 8px); }
.leaflet-tooltip.session-callout::after {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -1px;
    width: calc(var(--pole) - 4px);
    border-top: 2px solid;
    border-top-color: inherit;
    pointer-events: none;
}
.leaflet-tooltip.session-callout.leaflet-tooltip-right::after { right: 100%; }
.leaflet-tooltip.session-callout.leaflet-tooltip-left::after { left: 100%; }
.leaflet-tooltip.session-callout.leaflet-tooltip-top::before { border-top-color: inherit; margin-bottom: calc(-1 * var(--pole) - 8px); }
.leaflet-tooltip.session-callout.leaflet-tooltip-bottom::before { border-bottom-color: inherit; margin-top: calc(-1 * var(--pole) - 8px); }
.leaflet-tooltip.session-callout.leaflet-tooltip-top::after,
.leaflet-tooltip.session-callout.leaflet-tooltip-bottom::after {
    top: auto;
    left: 50%;
    margin: 0 0 0 -1px;
    width: 0;
    height: calc(var(--pole) - 4px);
    border-top: none;
    border-left: 2px solid;
    border-left-color: inherit;
}
.leaflet-tooltip.session-callout.leaflet-tooltip-top::after { top: 100%; }
.leaflet-tooltip.session-callout.leaflet-tooltip-bottom::after { bottom: 100%; }
.session-callout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: bold;
    color: #3498db;
}
.session-callout-buttons { display: flex; gap: 3px; flex-shrink: 0; }
.session-callout-buttons button {
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #7f8c8d;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
}
.session-callout-buttons button:last-child { background: #e74c3c; }
.session-callout-body { margin-top: 3px; }
.session-callout-body b { color: #f39c12; }
@media (max-width: 768px) {
    .leaflet-tooltip.session-callout { max-width: 200px; font-size: 12px; }
    .session-callout-buttons button { width: 22px; height: 22px; line-height: 22px; font-size: 14px; }
}

/* Day-view aircraft card (Daily Intelligence): same look as the Daily Intelligence panel */
.day-card-popup .leaflet-popup-content-wrapper {
    background: rgba(26, 26, 26, 0.95);
    border: 2px solid #f39c12;
    border-radius: 8px;
    color: #ecf0f1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.day-card-popup .leaflet-popup-tip { background: #f39c12; }
.day-card-popup a.leaflet-popup-close-button { color: #bdc3c7; top: 6px; right: 6px; }
.day-card-popup a.leaflet-popup-close-button:hover { color: #fff; }
.day-card {
    min-width: 290px;
    max-width: 360px;
    padding: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
}
.day-card-head { border-bottom: 1px solid rgba(243, 156, 18, 0.5); padding: 0 18px 6px 0; margin-bottom: 8px; }
.day-card-title { font-family: 'Courier New', monospace; font-size: 16px; font-weight: bold; color: #f39c12; }
.day-card-notes { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 12px; font-weight: normal; font-style: italic; color: #ecf0f1; opacity: 0.9; }
.day-card-agency { font-size: 11px; color: #95a5a6; margin-top: 2px; }
.day-card-facts { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.day-card-facts th { text-align: left; font-weight: normal; color: #95a5a6; padding: 1px 8px 1px 0; white-space: nowrap; vertical-align: top; }
.day-card-facts td { color: #ecf0f1; padding: 1px 0; }
.day-card-label { font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; letter-spacing: 0.5px; color: #f39c12; margin-bottom: 3px; }
.day-card-label span { font-weight: normal; letter-spacing: 0; color: #bdc3c7; }
.day-card-analysis, .day-card-sessions {
    font-family: 'Courier New', monospace;
    font-size: 11px;
    border-radius: 4px;
    padding: 7px 8px;
    margin-bottom: 8px;
}
.day-card-analysis { background: rgba(243, 156, 18, 0.1); border-left: 3px solid #f39c12; }
.day-card-analysis strong, .day-card-session strong { color: #f8c471; }
.day-card-analysis b, .day-card-session b { color: #f39c12; }
.day-card-sessions { background: rgba(44, 62, 80, 0.45); }
.day-card-session-buttons { margin: 4px 0 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.day-card-session-buttons button, .day-card-actions button {
    border: none;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
}
.day-card-session-buttons button { background: #17a2b8; padding: 3px 8px; font-size: 11px; min-width: 30px; }
.day-card-session-buttons button.all { background: #6c757d; }
.day-card-session { margin: 3px 0; color: #d5dbdb; }
.day-card-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 8px; }
.day-card-actions button { background: #34495e; padding: 6px 10px; font-size: 12px; }
.day-card-actions button:hover, .day-card-session-buttons button:hover { filter: brightness(1.15); }
.day-card-links { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.day-card-links a, .day-card-links span {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    border: 1px solid #5d6d7e;
    color: #5dade2;
    text-decoration: none;
}
.day-card-links a:hover { background: rgba(93, 173, 226, 0.15); }
.day-card-links span.off { color: #7f8c8d; border-color: #4d5656; }
/* Collapsible sections (#208): open on desktop, closed on phones */
.day-card-section { margin-bottom: 8px; }
.day-card-section > summary {
    cursor: pointer;
    list-style: none;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #f39c12;
    padding: 4px 0;
    -webkit-user-select: none;
    user-select: none;
}
.day-card-section > summary::-webkit-details-marker { display: none; }
.day-card-section > summary::before { content: '▸'; display: inline-block; width: 12px; transition: transform 0.15s; }
.day-card-section[open] > summary::before { transform: rotate(90deg); }
.day-card-section > .day-card-facts, .day-card-section > .day-card-analysis { margin: 3px 0 0; }
.day-card-sessions .day-card-section { margin: 0; }
.day-card-sessions .day-card-section > summary { color: #bdc3c7; font-weight: normal; letter-spacing: 0; }
/* Aircraft Intelligence summary panel (#207 PR 6): the Daily Intelligence frame */
.intel-summary {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 640px;
    max-width: calc(100vw - 40px);
    max-height: min(70vh, 800px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    color: #ecf0f1;
    background: rgba(26, 26, 26, 0.95);
    border: 2px solid #f39c12;
    border-radius: 8px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.35;
    z-index: 2100;
}
.intel-summary.minimized {
    width: auto;
    padding: 0;
    overflow: visible;
    border-radius: 18px;
}
.intel-sum-bar {
    padding: 8px 16px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: bold;
    color: #f39c12;
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.intel-sum-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 2px solid #f39c12;
}
.intel-sum-title { font-size: 17px; font-weight: bold; color: #f39c12; }
.intel-sum-sub { font-size: 13px; color: #95a5a6; margin-top: 2px; }
.intel-sum-buttons { display: flex; gap: 6px; flex-shrink: 0; }
.intel-sum-buttons button {
    padding: 7px 13px;
    font-size: 13px;
    color: white;
    background: #34495e;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.intel-sum-buttons button.close { background: #e74c3c; }
.intel-sum-paragraph {
    margin-bottom: 10px;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.45;
    background: rgba(243, 156, 18, 0.1);
    border-left: 3px solid #f39c12;
    border-radius: 0 4px 4px 0;
}
.intel-sum-paragraph .intel-sum-tail, .intel-sum-spot {
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: #5dade2;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}
.intel-sum-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 6px; }
.intel-sum-tile { min-width: 0; padding: 8px 6px; text-align: center; overflow-wrap: anywhere;
                  background: rgba(52, 152, 219, 0.1); border-radius: 4px; }
.intel-sum-tile .value { font-size: 20px; font-weight: bold; color: #3498db; }
.intel-sum-tile .label { font-size: 12px; color: #ecf0f1; }
.intel-sum-tile .delta { font-size: 11px; color: #bdc3c7; margin-top: 2px; }
.intel-sum-tile.inline { display: flex; flex-direction: column; justify-content: center; }
.intel-sum-tile .lead { font-size: 11px; color: #bdc3c7; line-height: 1.3; margin-bottom: 2px; }
/* #207 P3: time of day, categories, places, alerts */
.intel-sum-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; height: 42px;
                   border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.intel-sum-hour { display: flex; align-items: flex-end; height: 100%; }
.intel-sum-hour > span { display: block; width: 100%; background: #3498db; border-radius: 2px 2px 0 0; }
.intel-sum-hour.peak > span { background: #f39c12; }
.intel-sum-hours-axis { display: flex; justify-content: space-between; font-size: 10px; color: #95a5a6; margin-top: 2px; }
.intel-sum-cats { margin-top: 8px; }
.intel-sum-places tr.elsewhere td { color: #95a5a6; }
.intel-sum-place { padding: 0; font: inherit; color: #f8c471; text-align: left; background: none; border: none;
                   cursor: pointer; text-decoration: underline dotted; }
.intel-sum-place:hover { color: #f39c12; }
.intel-sum-alerts { margin: 0; padding-left: 18px; line-height: 1.45; }
.intel-sum-alerts li { margin: 2px 0; }
.intel-sum-alerts li strong { color: #f8c471; font-weight: normal; }
.intel-sum-more { display: inline; }
.intel-sum-circling { display: block; font-size: 11px; color: #95a5a6; }
.intel-sum-more > summary { display: inline; cursor: pointer; color: #5dade2; list-style: none; }
.intel-sum-more > summary::-webkit-details-marker { display: none; }
.intel-sum-more[open] > summary { display: none; }
.intel-sum-more[open]::before { content: '; '; }
.intel-sum-compare { font-size: 11px; color: #95a5a6; margin-bottom: 8px; text-align: right; }
.intel-sum-section { margin-top: 6px; padding: 8px 10px; background: rgba(44, 62, 80, 0.3); border-radius: 4px; }
.intel-sum-section > summary {
    cursor: pointer;
    list-style: none;
    font-weight: bold;
    letter-spacing: 1px;
    color: #3498db;
    user-select: none;
}
.intel-sum-section > summary::-webkit-details-marker { display: none; }
.intel-sum-section > summary::before { content: '\25b8'; display: inline-block; width: 14px; transition: transform 0.15s; }
.intel-sum-section[open] > summary::before { transform: rotate(90deg); }
.intel-sum-groups { width: 100%; margin-top: 6px; border-collapse: collapse; font-size: 13px; }
.intel-sum-groups th { text-align: right; font-weight: normal; color: #95a5a6; padding: 2px 4px; }
.intel-sum-groups td { text-align: right; padding: 3px 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.intel-sum-groups th:first-child, .intel-sum-groups td:first-child { text-align: left; }
.intel-sum-groups td.delta { color: #bdc3c7; font-size: 12px; }
.intel-sum-groups tr.intel-sum-drifting td { border-top: 3px double rgba(255, 255, 255, 0.35); }
.intel-sum-legend.intel-sum-above { margin: 4px 0 0; }
.intel-sum-note { margin-top: 8px; font-size: 12px; color: #bdc3c7; }
.intel-sum-empty { padding: 10px 0; color: #bdc3c7; }
.intel-sum-scope { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 10px; }
.intel-sum-scope button {
    padding: 5px 0;
    font-family: inherit;
    font-size: 12px;
    color: #ecf0f1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
}
.intel-sum-scope button.active { background: #f39c12; border-color: #f39c12; color: white; }
/* Day strip (#207 6b): one bar per day, height = flight hours; hatched = feed degraded or out; faint = partial day */
.intel-sum-strip-scale { margin-top: 6px; font-size: 11px; color: #95a5a6; }
.intel-sum-strip {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--days), minmax(0, 1fr));
    gap: 2px;
    align-items: end;
    height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.intel-sum-day {
    display: flex;
    align-items: flex-end;
    height: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}
.intel-sum-day:disabled { cursor: default; }
.intel-sum-day span { display: block; width: 100%; background: #3498db; border-radius: 2px 2px 0 0; }
.intel-sum-day:hover:not(:disabled) span { background: #5dade2; }
.intel-sum-day.partial span { opacity: 0.45; }
.intel-sum-day.flagged span, .intel-sum-legend .hatch {
    background: repeating-linear-gradient(135deg, #3498db 0 3px, rgba(230, 126, 34, 0.9) 3px 6px);
}
.intel-sum-legend .hatch { display: inline-block; width: 14px; height: 10px; vertical-align: middle; border-radius: 2px; }
.intel-sum-avg {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed rgba(236, 240, 241, 0.7);
    pointer-events: none;
}
.intel-sum-avg span {
    position: absolute;
    right: 0;
    bottom: 1px;
    padding: 0 3px;
    font-size: 10px;
    color: #ecf0f1;
    background: rgba(26, 26, 26, 0.85);
    border-radius: 2px;
}
.intel-sum-groups th { white-space: normal; }
.intel-sum-strip-axis { display: flex; justify-content: space-between; font-size: 11px; color: #95a5a6; margin-top: 2px; }
.intel-sum-legend { margin-top: 4px; font-size: 11px; color: #95a5a6; }
.intel-sum-shapes { margin-top: 6px; }
.intel-sum-shapes .row { display: grid; grid-template-columns: 9.5em 1fr 5.5em; gap: 8px; align-items: center; margin: 3px 0; font-size: 12px; }
.intel-sum-shapes .bar { height: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 0 4px 4px 0; }
.intel-sum-shapes .bar span { display: block; height: 100%; background: #3498db; border-radius: 0 4px 4px 0; }
.intel-sum-shapes .n { text-align: right; }
.intel-sum-shapes small { color: #95a5a6; }
.intel-sum-tail {
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: #5dade2;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}
/* The window's aircraft list (#207 PR 7) */
.intel-sum-find {
    width: 100%;
    margin: 6px 0 4px;
    padding: 6px 8px;
    font-family: inherit;
    font-size: 13px;
    color: #ecf0f1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    box-sizing: border-box;
}
.intel-sum-sort {
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    text-align: inherit;
}
.intel-sum-active th[aria-sort="ascending"] .intel-sum-sort,
.intel-sum-active th[aria-sort="descending"] .intel-sum-sort { color: #f39c12; }
.intel-sum-active.all tbody { font-size: 12px; }
.intel-sum-active td.col-last_seen { white-space: nowrap; color: #bdc3c7; }
.intel-sum-list-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.intel-sum-more, .intel-sum-more-places {
    margin-right: 8px;
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12px;
    color: #ecf0f1;
    background: #34495e;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.intel-sum-find-none { margin-top: 4px; font-size: 12px; color: #bdc3c7; }
.intel-sum-rule { margin-top: 4px; }
.intel-sum-rule summary { cursor: pointer; color: #95a5a6; }
.intel-sum-actions { display: flex; justify-content: center; margin-top: 10px; }
.intel-sum-export {
    padding: 7px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    color: white;
    background: #27ae60;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.intel-sum-export:hover { filter: brightness(1.1); }
.intel-summary-toggle {
    width: 100%;
    margin-top: 8px;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 600;
    color: inherit;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
}
.intel-summary-toggle.active { background: #f39c12; border-color: #f39c12; color: white; }
@media (max-width: 768px) {
    .intel-summary { bottom: 10px; padding: 10px; font-size: 13px; max-height: 60vh; max-height: 60dvh; }
    .intel-sum-tiles { grid-template-columns: repeat(2, 1fr); }
    .intel-sum-title { font-size: 15px; }
    .intel-sum-tile .value { font-size: 18px; }
    .intel-sum-section > summary { padding: 4px 0; }   /* a comfortable tap target */
    .intel-sum-shapes .row { grid-template-columns: 7.5em 1fr 4.5em; }
    .intel-sum-active .col-days, .intel-sum-active .col-last_seen { display: none; }
}

/* Pinned path label (#245): tail, what the line is, View aircraft */
.path-label-popup .leaflet-popup-content-wrapper {
    background: #2c3e50;
    color: #ecf0f1;
    border-left: 3px solid #f39c12;
    border-radius: 6px;
}
.path-label-popup .leaflet-popup-tip { background: #2c3e50; }
.path-label-popup .leaflet-popup-content { margin: 10px 12px; }
.path-label-popup a.leaflet-popup-close-button { color: #bdc3c7; }
.path-label { font-size: 12px; line-height: 1.35; min-width: 170px; }
.path-label-title { font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; color: #f39c12; padding-right: 14px; }
.path-label-title span { margin-left: 6px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 11px; font-weight: normal; color: #bdc3c7; }
.path-label-what { color: #d5dbdb; margin: 2px 0 8px; }
.path-label-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.path-label-actions button {
    flex: 1 1 auto;
    padding: 6px 8px;
    font-size: 12px;
    color: #fff;
    background: #34495e;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.path-label-actions button.primary { background: #f39c12; }
.path-label-actions button:hover { filter: brightness(1.12); }

/* Aircraft Intelligence window card (#207 5d): its active days, each opening that day */
.intel-card-days { display: grid; grid-template-columns: 1fr; gap: 3px; margin-top: 3px; }
.intel-card-day {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: #ecf0f1;
    background: rgba(44, 62, 80, 0.45);
    border: 1px solid rgba(243, 156, 18, 0.25);
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
}
.intel-card-day:hover:not(:disabled) { background: rgba(243, 156, 18, 0.2); }
.intel-card-day:disabled { cursor: default; opacity: 0.75; }
.intel-card-day span:last-child { color: #f8c471; white-space: nowrap; }
.intel-card-note { color: #bdc3c7; }
/* P1: flight rows and F1/F2/All open that flight on the map */
button.day-card-session.intel-card-flight-row {
    display: block;
    width: 100%;
    margin: 3px 0;
    padding: 3px 4px;
    font: inherit;
    color: #d5dbdb;
    text-align: left;
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
button.day-card-session.intel-card-flight-row:hover { background: rgba(243, 156, 18, 0.15); }
.intel-flight-buttons { display: flex; gap: 4px; flex-shrink: 0; }
/* P2: a flight's typical altitude and speed, under its row */
.intel-card-flight-detail { display: block; color: #95a5a6; font-size: 0.92em; }

/* The trail (#207): where you are and the way back out, top right; the clear-paths button moves below it */
.intel-trail {
    position: fixed;
    top: 20px;                      /* the top edge, level with the title box */
    right: 20px;
    z-index: 1002;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(560px, calc(100vw - 120px));
    padding: 5px 6px 5px 5px;
    font-size: 12px;
    color: #ecf0f1;
    background: rgba(26, 26, 26, 0.92);
    border: 1px solid #f39c12;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.intel-trail-back {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background: #f39c12;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.intel-trail-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; }
.intel-trail-crumbs .crumb {
    padding: 0;
    font: inherit;
    color: #5dade2;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
}
.intel-trail-crumbs .sep { color: #95a5a6; }
.intel-trail-crumbs .here { font-weight: bold; color: #f8c471; }
body.intel-trail-on .hide-paths-btn { top: calc(var(--intel-trail-bottom, 60px) + 6px); }
@media (max-width: 768px) {
    .intel-trail { top: 15px; right: 10px; left: calc(var(--title-box-right, 70px) + 8px); max-width: none; font-size: 11px; }
    /* The summary sits above the bottom button row (the row ends 74 px up), and its bar wraps rather than spilling */
    .intel-summary { bottom: 84px; max-height: calc(100dvh - 170px); }
    .intel-summary.minimized { left: 16px; right: 16px; transform: none; width: auto; max-width: none; }
    .intel-sum-bar { width: 100%; white-space: normal; text-align: center; line-height: 1.35; padding: 7px 12px; }
}
.day-card-actions button.intel-card-back { background: #f39c12; }

/* A long day scrolls inside the card instead of running off the screen */
.day-card-popup .leaflet-popup-content {
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
    .day-card-popup .leaflet-popup-content { max-height: 60vh; max-height: 60dvh; }
    .day-card-section > summary { padding: 7px 0; font-size: 12px; }   /* a comfortable tap target */
    .day-card { min-width: 260px; max-width: 300px; padding: 10px; }
    .day-card-title { font-size: 15px; }
}

/* Search (#172): magnifier bubble beside the view buttons, expanding box, active-search chip above it */
.map-search {
    position: fixed;
    left: 201px;                /* right of the row of four map buttons (15 + 4 x 44 + 2 + 8) */
    bottom: 30px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    max-width: calc(100vw - 67px - 16px);
}
.map-search-row {
    display: flex;
    align-items: center;
    background: rgba(22, 28, 36, 0.94);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.map-search.open #map-search-btn { background: rgba(52, 152, 219, 0.9); }
.search-field { position: relative; width: 0; transition: width 0.2s ease; overflow: hidden; }
.map-search.open .search-field { width: 230px; }
.search-field #aircraft-search {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    padding: 0 32px 0 8px;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    font-size: 16px;            /* 16px or more: iPhone Safari doesn't zoom in on focus */
}
.search-field #aircraft-search::placeholder { color: #95a5a6; font-size: 14px; }
#search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #7f8c8d;
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
}
#search-clear:hover { background: #e74c3c; }
#search-chip {
    max-width: 100%;
    padding: 6px 12px;
    background: rgba(26, 26, 26, 0.92);
    color: #ecf0f1;
    border: 2px solid #3498db;
    border-radius: 18px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
#search-chip .search-chip-term { color: #5dade2; }
#search-chip .search-chip-count { font-weight: normal; color: #bdc3c7; }
#search-chip .search-chip-x {
    display: inline-block;
    margin-left: 6px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
}
@media (max-width: 768px) {
    /* View buttons (globe, fit, filters) sit side by side on phones (15..147), so the search starts after them and
       stops before the controls button on the right */
    .map-search { left: 155px; max-width: calc(100vw - 155px - 74px); }
    .map-search.open .search-field { width: calc(100vw - 155px - 44px - 74px); }
    /* The magnifier is right below the chip, so the chip drops its own icon to fit the term and count */
    #search-chip { font-size: 13px; padding: 6px 10px; }
    #search-chip > i { display: none; }
    /* Area Intelligence's bottom sheet and its collapsed bar take this corner on phones */
    body:has(#my-area-panel) .map-search { display: none; }
    /* The control panel only needs to be as wide as its widest button now that search lives on the map */
    #control-box.control-box { min-width: 0; width: 230px; box-sizing: border-box; }
}
/* Desktop: an open Area Intelligence panel covers the bottom-left corner */
body:has(#my-area-panel:not(.collapsed)) .map-search { display: none; }

/* Filters live in the view-button group (#172 follow-up): the funnel button opens the agency legend straight above the
   group, as a vertical list, on every screen size. The old floating bottom-centre legend and its collapsed square
   are gone. */
.agency-legend.collapsed { display: none !important; }
#agency-legend:not(.collapsed) {
    z-index: 1002;               /* the open filter menu sits over the docked card (1001) and the phone sheet */
    left: 15px;
    right: auto;
    transform: none;
    bottom: 84px;                /* above the row of map buttons (30 + 46 + 8) */
    height: auto;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 8px 10px;
    white-space: nowrap;
}
#agency-legend:not(.collapsed) .legend-content { flex-direction: column; align-items: stretch; gap: 2px; }
#agency-legend:not(.collapsed) .legend-item { justify-content: flex-start; padding: 5px 8px; margin: 0; }
#agency-legend .legend-toggle { display: none; }   /* the funnel button closes it */
#filter-btn { position: relative; }
#filter-btn.active { background: rgba(52, 152, 219, 0.9); }   /* same open highlight as the magnifier */
#filter-btn.has-filters::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f39c12;
    box-shadow: 0 0 0 2px rgba(22, 28, 36, 0.94);
}
@media (max-width: 768px) {
    /* Phones: the view buttons are a row, so the legend opens above the row, at the left edge */
    #agency-legend:not(.collapsed) {
        left: 8px !important;
        bottom: 84px !important;
        min-width: 0 !important;
        max-width: 112px;          /* ends before the 230 px control panel (left edge at 100vw - 250) */
        padding: 6px 4px !important;
        max-height: calc(100vh - 120px);
    }
    #agency-legend:not(.collapsed) .legend-item { padding: 5px 6px; }
    /* An active search's chip sits above the bottom row: the open control panel starts above it */
    body.search-active #control-box.control-box { bottom: 126px; }
}
/* Too narrow for both (e.g. 320 px): the open legend steps out of view until the control panel closes */
@media (max-width: 359px) {
    body:has(#control-box.mobile-open) #agency-legend:not(.collapsed) { display: none !important; }
}

/* Card headers show the aircraft's own marker glyph (#212). The icon-font glyphs run small next to text. */
.aircraft-glyph { margin-right: 2px; }
.aircraft-glyph-helicopter, .aircraft-glyph-drone, .aircraft-glyph-balloon { font-size: 1.3em; vertical-align: -0.18em; line-height: 1; }

/* Small phones: the top-right pieces level with the title box's 10px (after the 768px rules, so these win) */
@media (max-width: 480px) {
    .hide-paths-btn { top: 10px; }
    .intel-trail { top: 10px; }
}

/* ---- The card dock (#262 D1, desktop): cards on the left, earlier levels folded behind, a line to the aircraft ---- */
body.intel-dock .leaflet-popup.day-card-popup { visibility: hidden; }     /* the popup only triggers the dock */
.card-dock {
    position: fixed;
    top: 92px;                      /* under the title box */
    left: 20px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 370px;                   /* room for the summary as the root card (D2) */
    max-height: calc(100vh - 92px - 92px);    /* clear of the bottom-left row of map buttons (30 + 46 + 16) */
    font-family: 'Courier New', monospace;
}
.card-dock[hidden] { display: none; }
/* The path's pop-ups in Aircraft Intelligence: the historical card's look (its inline light styles overridden) */
.intel-path-popup .leaflet-popup-content-wrapper {
    background: rgba(26, 26, 26, 0.95);
    border: 2px solid #f39c12;
    border-radius: 8px;
    color: #ecf0f1;
}
.intel-path-popup .leaflet-popup-tip { background: #f39c12; }
.intel-path-popup a.leaflet-popup-close-button { color: #bdc3c7; }
.intel-path-popup .leaflet-popup-content > div { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important; }
.intel-path-popup td { color: #ecf0f1; }
.intel-path-popup .path-analysis {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(243, 156, 18, 0.35) !important;
    color: #d5dbdb !important;
}
/* The card's path toggles: the one that's on reads as pressed */
.day-card-actions button.intel-card-paths.on { background: #1b2631; color: #f8c471; box-shadow: inset 0 0 0 1px #f39c12; }
.dock-edges { display: flex; flex-direction: column; }
.dock-edge {
    position: relative;
    margin: 0 calc(var(--depth, 1) * 4px) -8px;      /* deeper levels sit further behind, a little narrower */
    padding: 6px 12px 14px;
    font: inherit;
    font-size: 12px;
    color: #d5dbdb;
    text-align: left;
    background: #22313f;
    border: 1px solid rgba(243, 156, 18, 0.45);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.35);
}
.dock-edge:hover { color: #f8c471; background: #2c3e50; }
.dock-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(26, 26, 26, 0.95);          /* the historical card's background */
    color: #ecf0f1;                              /* and its text colour: the page's is dark in light mode */
    border: 2px solid #f39c12;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
.dock-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.dock-title { flex: 1; min-width: 0; overflow: hidden; font-weight: bold; color: #f8c471; text-overflow: ellipsis; white-space: nowrap; }
.dock-head button {
    padding: 3px 8px;
    font: inherit;
    font-size: 12px;
    color: #ecf0f1;
    background: #34495e;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.dock-head button:hover { background: #46627f; }
.dock-head .dock-back { background: #f39c12; color: #1b2631; font-weight: bold; }
.dock-body { min-height: 0; overflow-y: auto; }
.dock-body .day-card { max-height: none; margin: 0; border: none; box-shadow: none; }
.dock-tab {
    display: none;
    align-self: flex-start;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    color: #1b2631;
    background: #f39c12;
    border: none;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.card-dock.minimized { left: 0; }
.card-dock.minimized .dock-edges,
.card-dock.minimized .dock-card { display: none; }
.card-dock.minimized .dock-tab { display: block; }
#card-dock-line { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100vh; pointer-events: none; }
.dock-flight .day-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- D2: the summary as the dock's root card ---- */
.intel-summary.docked {
    position: static;
    width: auto;
    max-width: none;
    max-height: none;
    padding: 10px 12px 12px;
    overflow: visible;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    transform: none;
    font-size: 13px;
}
.intel-summary.docked .intel-sum-title,
.intel-summary.docked .intel-sum-buttons { display: none; }      /* the dock's head has the title, minimize and close */
.intel-summary.docked .intel-sum-head { margin-bottom: 6px; }
.intel-summary.docked .intel-sum-tiles { grid-template-columns: repeat(2, 1fr); }
.intel-summary.docked .intel-sum-groups { font-size: 12px; }
.intel-summary.docked .intel-sum-active .col-days,
.intel-summary.docked .intel-sum-active .col-last_seen { display: none; }   /* the narrow list keeps the essentials */

/* ---- D2: the flight card ---- */
.dock-flight-row { margin: 2px 0 6px; line-height: 1.5; }
.dock-flight-row:last-child { margin-bottom: 0; }
.dock-flight-row .swatch { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; vertical-align: -1px; }
.dock-analysis { margin: 0 0 8px; padding: 7px 8px; font-size: 12px; line-height: 1.5; color: #d5dbdb;
                 background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(243, 156, 18, 0.35); border-radius: 4px; }

/* ---- One type scale for Aircraft Intelligence's cards and summary (#262 D2, from #200): body 13 px, nothing under 12 ---- */
.card-dock .day-card { font-size: 13px; }
.card-dock .day-card-analysis, .card-dock .day-card-sessions { font-size: 12.5px; line-height: 1.5; }
.card-dock .day-card-agency, .card-dock .day-card-label, .card-dock .intel-card-note,
.card-dock .day-card-session-buttons button, .card-dock .day-card-actions button { font-size: 12px; }
.intel-summary .intel-sum-tile .delta, .intel-summary .intel-sum-tile .lead, .intel-summary .intel-sum-compare,
.intel-summary .intel-sum-strip-scale, .intel-summary .intel-sum-strip-axis, .intel-summary .intel-sum-hours-axis,
.intel-summary .intel-sum-legend { font-size: 12px; }

/* ---- D3: the card dock as a bottom sheet on phones (card-dock.js adds .sheet under 768 px) ---- */
.dock-grip, .dock-more { display: none; }
.card-dock.sheet {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 84px;                   /* above the bottom button row */
    z-index: 999;                   /* under the opened control panel */
    width: auto;
    max-height: none;
}
.card-dock.sheet.full { top: 80px; }   /* under the title box */
.card-dock.sheet .dock-card {
    height: 40vh;
    height: 40dvh;                  /* the first block runs past the fold: a hint that it scrolls */
    border: 1px solid rgba(243, 156, 18, 0.55);    /* no thick frame on a phone (owner) */
    border-radius: 12px 12px 8px 8px;
}
.card-dock.sheet.full .dock-card { flex: 1; height: auto; }
.card-dock.sheet .dock-grip {
    display: block;
    flex-shrink: 0;
    height: 14px;
    cursor: ns-resize;
    touch-action: none;
}
.card-dock.sheet .dock-grip::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    margin: 5px auto 0;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
}
.card-dock.sheet .dock-head { gap: 6px; padding: 0 8px 6px; }
.card-dock.sheet .dock-title { font-size: 14px; }
.card-dock.sheet .dock-head button { min-width: 32px; min-height: 32px; padding: 5px 9px; font-size: 12px; }
.card-dock.sheet .dock-body .day-card { min-width: 0; max-width: none; padding: 8px 10px; }   /* the sheet's full width */
.card-dock.sheet .dock-edge { display: none; margin-bottom: -6px; padding: 9px 14px 14px; font-size: 13px; }
.card-dock.sheet .dock-edges.open .dock-edge { display: block; }
.card-dock.sheet .dock-more {
    display: block;
    align-self: flex-start;
    margin: 0 0 -4px 6px;
    padding: 6px 12px 9px;
    font: inherit;
    font-size: 13px;
    color: #f8c471;
    background: #1b2631;
    border: 1px solid rgba(243, 156, 18, 0.45);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
}
.card-dock.sheet .dock-edges.open .dock-more { color: #bdc3c7; }
.card-dock.sheet.minimized { left: 8px; right: var(--sheet-right, 8px); }   /* beside the open control panel */
.card-dock.sheet.minimized .dock-card { display: flex; height: auto; }
.card-dock.sheet.minimized .dock-body,
.card-dock.sheet.minimized .dock-edges,
.card-dock.sheet.minimized .dock-tab { display: none; }
.card-dock.sheet.minimized .dock-title { cursor: pointer; }
/* Narrowed beside the open control panel: just the title (tap it, or the grip, to open the sheet) */
.card-dock.sheet.minimized.beside-panel .dock-head button { display: none; }
#card-dock-line.sheet { z-index: 998; }
.card-dock.sheet .intel-summary.docked .intel-sum-tiles { grid-template-columns: repeat(2, 1fr); }


/* ---- Map style (#257): the layers button and its short list. Desktop: the last of the map buttons (bottom left),
   the list opening above them. Phones: the button sits alone at the top right, as map apps do. ---- */
.map-style-btn-phone { display: none; }
.map-style-menu {
    position: fixed;
    left: 15px;                       /* above the row of map buttons, from their left edge */
    bottom: 84px;
    z-index: 1003;
    min-width: 170px;
    padding: 6px;
    background: rgba(22, 28, 36, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    color: #ecf0f1;
    font-size: 13px;
}
.map-style-menu[hidden] { display: none; }
.map-style-title { padding: 2px 6px 6px; font-size: 11px; color: #95a5a6; letter-spacing: 0.5px; text-transform: uppercase; }
.map-style-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 5px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.map-style-option:hover { background: rgba(255, 255, 255, 0.08); }
.map-style-option.active { background: #34495e; box-shadow: inset 0 0 0 1px #5dade2; }
.map-style-shade { font-size: 11px; color: #95a5a6; }
body.map-style-fixed .map-style-btn, body.map-style-fixed .map-style-menu { display: none !important; }
@media (max-width: 768px) {
    #nav-controls .map-style-btn { display: none; }
    .map-style-btn-phone {
        display: flex;
        position: fixed;
        top: 15px;
        right: 15px;
        width: 44px;
        height: 44px;
        z-index: 1001;
        border-radius: 8px;
        background: rgba(22, 28, 36, 0.94);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .map-style-menu { left: auto; right: 15px; bottom: auto; top: 66px; }
}

/* Floating map controls share the control panel's near-black and thin edge (owner, #257: they had kept the older
   slate blue). Buttons inside the panels keep their own colours. */
.hamburger-btn, .desktop-restore-btn, .nav-controls, .map-search-row, .map-style-btn-phone {
    border: 1px solid rgba(255, 255, 255, 0.2);
}