/* ============================================================================
   EarthCARE Analysis Platform — "Aerospace Mission Console" design system
   ----------------------------------------------------------------------------
   Light, premium, atmospheric. Deep teal-cyan brand (replaces the default
   indigo via the Tailwind runtime config in base.html), Sora / IBM Plex type,
   glassy depth, and restrained motion.

   IMPORTANT: every selector the templates/JS depend on is preserved
   (.tab-btn/.tab-active, .ectools-plot, .cursor-zoom-in, #cvResultImage,
   .upload-*, .plot-doc-*, all .gp-*). New polish is layered on top, scoped to
   .ec-app so the admin console (separate shell) is untouched apart from fonts.
   Fonts load progressively; the system fallback stack renders if a restricted
   network blocks Google Fonts.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root {
    --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Sora", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Brand — deep "aerospace" teal-cyan */
    --brand-50:  #ecfdfb;
    --brand-100: #cffbf6;
    --brand-200: #a0f4ee;
    --brand-300: #67e8e2;
    --brand-400: #2dd1cf;
    --brand-500: #13b3b5;
    --brand-600: #0a8f95;
    --brand-700: #0c7176;
    --brand-800: #0f5a60;
    --brand-900: #114a50;
    --brand-950: #042e33;

    /* Ink / neutrals */
    --ink-900: #0b1f24;
    --ink-700: #294349;
    --ink-500: #5a747b;
    --ink-400: #87a0a7;

    --line: rgba(11, 143, 149, 0.14);
    --line-strong: rgba(11, 143, 149, 0.28);

    /* Amber — the platform's second voice: step numbers, slider thumbs, and
       any control that is actively tuning what the user sees. */
    --amber-50:  #fff9eb;
    --amber-100: #fdefc8;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --accent-amber: var(--amber-500);

    --success: #0f9d6b;
    --danger: #dc2626;

    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 8px;

    --shadow-sm: 0 1px 2px rgba(8, 40, 45, 0.06), 0 1px 3px rgba(8, 40, 45, 0.05);
    --shadow-md: 0 4px 12px -4px rgba(8, 40, 45, 0.12), 0 14px 30px -18px rgba(8, 40, 45, 0.20);
    --shadow-lg: 0 10px 24px -8px rgba(8, 40, 45, 0.20), 0 34px 60px -26px rgba(8, 40, 45, 0.32);
    --shadow-glow: 0 8px 22px -8px rgba(10, 143, 149, 0.55);

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─────────────────────────────────────────────────────────────────────────
   Base
   ───────────────────────────────────────────────────────────────────────── */

body { font-family: var(--font-body); color: var(--ink-700); }

.ec-app {
    font-family: var(--font-body);
    color: var(--ink-700);
    background:
        radial-gradient(1150px 560px at 10% -10%, rgba(45, 209, 207, 0.12), transparent 60%),
        radial-gradient(1000px 520px at 102% -4%, rgba(56, 130, 246, 0.07), transparent 55%),
        radial-gradient(1000px 620px at 85% 112%, rgba(251, 191, 36, 0.08), transparent 60%),
        radial-gradient(900px 700px at 20% 110%, rgba(13, 179, 181, 0.06), transparent 60%),
        linear-gradient(180deg, #f5f9f9 0%, #edf4f2 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ultra-subtle grain so large flat areas read as a surface, not a void. */
.ec-app::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.ec-app main { position: relative; z-index: 1; }

::selection { background: rgba(19, 179, 181, 0.22); color: var(--ink-900); }

/* Refined scrollbars */
.ec-app *::-webkit-scrollbar { width: 11px; height: 11px; }
.ec-app *::-webkit-scrollbar-thumb {
    background: rgba(12, 113, 118, 0.30);
    border-radius: 20px;
    border: 3px solid transparent;
    background-clip: content-box;
}
.ec-app *::-webkit-scrollbar-thumb:hover { background: rgba(12, 113, 118, 0.50); background-clip: content-box; }
.ec-app *::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   Mission header (nav)
   ───────────────────────────────────────────────────────────────────────── */

.ec-nav {
    padding: 0.85rem 1.5rem;
    color: #dffaf8;
    background:
        radial-gradient(820px 240px at 16% -60%, rgba(45, 209, 207, 0.30), transparent 60%),
        linear-gradient(118deg, #042e33 0%, #0a585f 52%, #0c7176 100%);
    box-shadow: 0 14px 34px -16px rgba(4, 46, 51, 0.7);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
/* Faint drifting star/scan field */
.ec-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.4px 1.4px at 20% 30%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.2px 1.2px at 60% 70%, rgba(167, 244, 238, 0.5), transparent),
        radial-gradient(1.2px 1.2px at 85% 20%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 42% 80%, rgba(255, 255, 255, 0.4), transparent);
    background-size: 240px 120px;
    opacity: 0.55;
    animation: ec-stars 24s linear infinite;
}
/* Glowing scan line along the bottom edge */
.ec-nav::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(45, 209, 207, 0.85), transparent);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: ec-scan 6.5s var(--ease) infinite;
    z-index: 15;
}
@keyframes ec-stars { to { background-position: 240px 0, -240px 0, 240px 0, -240px 0; } }
@keyframes ec-scan {
    0%   { background-position: -60% 0; }
    100% { background-position: 160% 0; }
}

.ec-nav-inner { gap: 1rem; }

.ec-brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.sp-logo {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    filter: drop-shadow(0 0 9px rgba(56, 189, 248, 0.45));
    transition: filter 0.25s var(--ease);
}
.ec-brand:hover .sp-logo { filter: drop-shadow(0 0 13px rgba(56, 189, 248, 0.7)); }

.ec-brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.24rem;
    letter-spacing: 0.005em;
    color: #fff;
    line-height: 1;
    display: block;
}
.ec-brand-tag {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(167, 244, 238, 0.72);
}

.ec-nav-link {
    color: rgba(207, 251, 246, 0.78);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.3rem 0.55rem;
    border-radius: var(--radius-xs);
    transition: color 0.2s, background 0.2s;
}
.ec-nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.ec-nav-link-admin {
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.ec-nav-link-admin:hover { background: rgba(255, 255, 255, 0.2); }
.ec-user {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(223, 250, 248, 0.92);
    font-family: var(--font-mono);
}

.ec-chip {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    color: #d7fbf7;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.16);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.ec-chip:hover {
    background: rgba(45, 209, 207, 0.28);
    box-shadow: 0 0 0 3px rgba(45, 209, 207, 0.18);
    transform: translateY(-1px);
}

/* ─────────────────────────────────────────────────────────────────────────
   Cards / surfaces (scoped to main so modals & nav are unaffected)
   ───────────────────────────────────────────────────────────────────────── */

.ec-app main .bg-white.rounded-lg {
    background: linear-gradient(180deg, #ffffff 0%, #f8fdfd 100%) !important;
    border: 1px solid var(--line);
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-md) !important;
    transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease), border-color 0.32s var(--ease);
}
.ec-app main .bg-white.rounded-lg:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--line-strong);
}

/* Section headings inside cards get the display face + an accent tick */
.ec-app main .bg-white.rounded-lg > h2 {
    font-family: var(--font-display);
    color: var(--ink-900);
    letter-spacing: -0.015em;
}
.ec-app main .bg-white.rounded-lg > h2:not(.text-center) {
    position: relative;
    padding-left: 0.8rem;
}
.ec-app main .bg-white.rounded-lg > h2:not(.text-center)::before {
    content: "";
    position: absolute;
    left: 0; top: 0.12em; bottom: 0.12em;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--amber-400), var(--brand-600));
    box-shadow: 0 0 10px rgba(19, 179, 181, 0.4);
}

/* Intro / hint gradient card */
.ec-app main .bg-gradient-to-br {
    border-radius: var(--radius) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
   Form controls (scoped to .ec-app — covers app + auth pages)
   ───────────────────────────────────────────────────────────────────────── */

.ec-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.ec-app select,
.ec-app textarea {
    font-family: var(--font-body);
    color: var(--ink-900);
    background: #fff;
    border-color: var(--line-strong);
    border-radius: var(--radius-sm) !important;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
}
.ec-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
.ec-app select:hover,
.ec-app textarea:hover { border-color: var(--brand-400); }
.ec-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
.ec-app select:focus,
.ec-app textarea:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(19, 179, 181, 0.16);
}
.ec-app ::placeholder { color: var(--ink-400); }

/* Dropdown caret: the native arrow hugs the rounded corner, so selects paint
   their own chevron with a clear inset from the right edge. The padding keeps
   option text from running underneath it. */
.ec-app select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7176' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 0.85em auto;
    padding-right: 2.4rem !important;
}

/* Numeric / coordinate inputs read as data */
.ec-app input[type="number"], .ec-app input[type="date"] { font-family: var(--font-mono); }

/* Range sliders — quiet teal track, warm amber thumb */
.ec-app input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 22px;
    background: transparent;
    cursor: pointer;
}
.ec-app input[type="range"]::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 999px;
    background: rgba(11, 143, 149, 0.18);
}
.ec-app input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 19px;
    height: 19px;
    margin-top: -6px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
    border: 2.5px solid #fff;
    box-shadow: 0 1px 5px rgba(120, 70, 5, 0.35);
}
.ec-app input[type="range"]::-moz-range-track {
    height: 7px;
    border-radius: 999px;
    background: rgba(11, 143, 149, 0.18);
}
.ec-app input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--amber-400), var(--amber-500));
    border: 2.5px solid #fff;
    box-shadow: 0 1px 5px rgba(120, 70, 5, 0.35);
}

/* File input button */
.ec-app input[type="file"]::file-selector-button {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--brand-700);
    background: var(--brand-50);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-xs);
    padding: 0.4rem 0.8rem;
    margin-right: 0.7rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.ec-app input[type="file"]::file-selector-button:hover { background: var(--brand-100); color: var(--brand-800); }

.ec-app input[type="checkbox"] { accent-color: var(--brand-600); }

/* ─────────────────────────────────────────────────────────────────────────
   Buttons & button-like links (scoped to main / auth surfaces)
   ───────────────────────────────────────────────────────────────────────── */

.ec-app main button,
.ec-app main a[class*="bg-"],
.ec-app form button {
    position: relative;
    overflow: hidden;
    font-family: var(--font-body);
    transition: transform 0.16s var(--ease), box-shadow 0.26s var(--ease), filter 0.2s;
}
.ec-app main button:not(:disabled):hover,
.ec-app main a[class*="bg-"]:hover,
.ec-app form button:hover { transform: translateY(-1px); filter: saturate(1.06) brightness(1.03); }
.ec-app main button:not(:disabled):active,
.ec-app main a[class*="bg-"]:active,
.ec-app form button:active { transform: translateY(0) scale(0.99); }
.ec-app main button:disabled { filter: grayscale(0.2); }

/* Gradient fills replacing flat brand/utility backgrounds */
.ec-app .bg-indigo-600,
.ec-app .bg-indigo-700,
.ec-app form button[type="submit"] {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-glow);
}
.ec-app .bg-amber-500, .ec-app .bg-amber-600 {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #422006 !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 20px -8px rgba(245, 158, 11, 0.55);
}
.ec-app .bg-emerald-600, .ec-app .bg-green-600, .ec-app .bg-green-700 {
    background: linear-gradient(135deg, #14b88a 0%, #0f9d6b 100%) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 20px -8px rgba(15, 157, 107, 0.5);
}
.ec-app .bg-blue-600, .ec-app .bg-blue-700 {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.5);
}

/* Sheen sweep on primary CTAs (scoped so pseudo can't leak outside content) */
.ec-app main .bg-indigo-600::after,
.ec-app form button[type="submit"]::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 70%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s var(--ease);
}
.ec-app main .bg-indigo-600:hover::after,
.ec-app form button[type="submit"]:hover::after { left: 130%; }

/* Subtle pill buttons in the My-Files / globe trigger areas keep their look */

/* ─────────────────────────────────────────────────────────────────────────
   Tabs — sliding underline indicator
   ───────────────────────────────────────────────────────────────────────── */

.tab-btn {
    position: relative;
    border-bottom-color: transparent !important;
    transition: color 0.2s var(--ease), background 0.2s;
    border-top-left-radius: var(--radius-xs);
    border-top-right-radius: var(--radius-xs);
}
.tab-btn:hover { color: var(--brand-700); background: rgba(19, 179, 181, 0.06); }
.tab-btn::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: -1px;
    height: 2.5px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand-400), var(--brand-700));
    transition: left 0.28s var(--ease), right 0.28s var(--ease);
}
.tab-active { color: var(--brand-700) !important; }
.tab-active::after { left: 0; right: 0; box-shadow: 0 0 10px rgba(19, 179, 181, 0.5); }

/* ─────────────────────────────────────────────────────────────────────────
   Progress bars — animated gradient + shimmer
   ───────────────────────────────────────────────────────────────────────── */

#progressBar, #qlProgressBar, #icProgressBar, #cvProgressBar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, var(--brand-400), var(--brand-600)) !important;
    box-shadow: 0 0 12px rgba(19, 179, 181, 0.5);
}
#progressBar::after, #qlProgressBar::after, #icProgressBar::after, #cvProgressBar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: ec-shimmer 1.3s linear infinite;
}
@keyframes ec-shimmer {
    0%   { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}

/* Progress track */
.ec-app .h-2.bg-gray-200 { background: rgba(11, 143, 149, 0.12) !important; border-radius: 999px; overflow: hidden; }

/* ─────────────────────────────────────────────────────────────────────────
   Result images & error panels
   ───────────────────────────────────────────────────────────────────────── */

.cursor-zoom-in { cursor: zoom-in; }

#cvResultImage {
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--radius-xs);
}

/* ectools plots are often very large (25x35 inch figures) */
.ectools-plot { max-height: 80vh; object-fit: contain; }

.ec-app main .overflow-auto.border.rounded {
    border-color: var(--line) !important;
    border-radius: var(--radius-sm) !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        repeating-linear-gradient(45deg, #f1f6f6, #f1f6f6 8px, #eef4f4 8px, #eef4f4 16px) border-box;
    box-shadow: inset 0 1px 3px rgba(8, 40, 45, 0.05);
}

/* Error card with collapsible technical details (see renderErrorInto in app.js) */
.ec-app [id$="ErrorCard"], #errorCard {
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
}
.ec-app [id$="ErrorText"] summary { list-style: none; }
.ec-app [id$="ErrorText"] summary::-webkit-details-marker { display: none; }
.ec-app [id$="ErrorText"] summary::before { content: "▸ "; }
.ec-app [id$="ErrorText"] details[open] summary::before { content: "▾ "; }

/* ─────────────────────────────────────────────────────────────────────────
   Entrance motion — staggered card reveal on load & tab switch
   ───────────────────────────────────────────────────────────────────────── */

@keyframes ec-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.ec-app .tab-panel:not(.hidden) .space-y-4 > * { animation: ec-rise 0.5s var(--ease) both; }
.ec-app .tab-panel:not(.hidden) .space-y-4 > *:nth-child(1) { animation-delay: 0.03s; }
.ec-app .tab-panel:not(.hidden) .space-y-4 > *:nth-child(2) { animation-delay: 0.09s; }
.ec-app .tab-panel:not(.hidden) .space-y-4 > *:nth-child(3) { animation-delay: 0.15s; }
.ec-app .tab-panel:not(.hidden) .space-y-4 > *:nth-child(4) { animation-delay: 0.21s; }
.ec-app .tab-panel:not(.hidden) .space-y-4 > *:nth-child(5) { animation-delay: 0.27s; }
.ec-app .tab-panel:not(.hidden) .space-y-4 > *:nth-child(6) { animation-delay: 0.33s; }
.ec-app .tab-panel:not(.hidden) .space-y-4 > *:nth-child(7) { animation-delay: 0.39s; }
.ec-app .tab-panel:not(.hidden) .space-y-4 > *:nth-child(n+8) { animation-delay: 0.45s; }

/* Auth cards drop in */
.ec-app main > .flex > .bg-white { animation: ec-rise 0.5s var(--ease-spring) both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   My-Files modal polish
   ───────────────────────────────────────────────────────────────────────── */

#mf-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#mf-backdrop > div {
    border-radius: 18px !important;
    box-shadow: 0 40px 90px -30px rgba(4, 46, 51, 0.6), 0 0 0 1px rgba(11, 143, 149, 0.10);
    animation: ec-rise 0.32s var(--ease-spring) both;
}
.mf-filter { transition: background 0.18s, color 0.18s, transform 0.12s; }
.mf-filter:hover { transform: translateY(-1px); }

/* Sortable column headers */
.mf-th { user-select: none; }
.mf-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-xs);
    padding: 0.1rem 0.35rem;
    margin-left: -0.35rem;
    transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.mf-sort:hover { color: var(--brand-700); background: var(--brand-50); }
.mf-sort:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; }

.mf-caret {
    width: 0.55rem;
    height: 0.55rem;
    border-left: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(135deg) translate(-1px, 1px);
    opacity: 0;
    transition: opacity 0.16s var(--ease), transform 0.2s var(--ease);
}
.mf-sort:hover .mf-caret { opacity: 0.35; }
.mf-th-active .mf-sort { color: var(--brand-700); font-weight: 600; }
.mf-th-active .mf-caret { opacity: 1; }
.mf-th-desc .mf-caret { transform: rotate(-45deg) translate(-1px, 1px); }

/* Selection checkboxes */
.mf-check {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand-600);
    cursor: pointer;
    vertical-align: middle;
}
.mf-check:disabled { cursor: default; opacity: 0.4; }
.mf-th-check, .mf-td-check { width: 1px; padding-right: 0 !important; }

.mf-row { transition: background 0.14s var(--ease); }
.mf-row:hover { background: #f9fafb; }
.mf-row-selected,
.mf-row-selected:hover { background: var(--brand-50); }
.mf-row-selected td:first-child { box-shadow: inset 3px 0 0 var(--brand-500); }

/* Bulk action bar — appears once at least one row is marked */
.mf-selectbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.65rem 1.5rem;
    background: linear-gradient(180deg, var(--brand-50) 0%, #ffffff 100%);
    border-bottom: 1px solid var(--line);
    animation: ec-rise 0.22s var(--ease) both;
}
.mf-selectbar[hidden] { display: none; }
.mf-selcount {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--brand-800);
}
.mf-selectbar-actions { display: flex; align-items: center; gap: 0.5rem; }

.mf-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.34rem 0.75rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.16s var(--ease), box-shadow 0.16s var(--ease),
                transform 0.12s var(--ease), color 0.16s var(--ease);
}
.mf-btn svg { width: 0.85rem; height: 0.85rem; }
.mf-btn:hover:not(:disabled) { transform: translateY(-1px); }
.mf-btn:disabled { opacity: 0.55; cursor: progress; transform: none; }
.mf-btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }

.mf-btn-primary { background: var(--brand-600); color: #fff; }
.mf-btn-primary:hover:not(:disabled) { background: var(--brand-700); box-shadow: var(--shadow-glow); }

.mf-btn-danger { background: #fff; color: var(--danger); border-color: rgba(220, 38, 38, 0.32); }
.mf-btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }

.mf-btn-ghost { background: transparent; color: var(--ink-500); }
.mf-btn-ghost:hover:not(:disabled) { color: var(--ink-900); background: rgba(11, 143, 149, 0.08); }

/* ─────────────────────────────────────────────────────────────────────────
   Inline upload progress card — rendered by app.js (_uploadWithProgress)
   into the status element directly under the dropzone, so progress shows
   exactly where the upload was started.
   ───────────────────────────────────────────────────────────────────────── */

.ec-upload {
    margin-top: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.ec-upload-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.ec-upload-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--ink-900);
}
.ec-upload-pct {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--brand-700);
}
.ec-upload-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(11, 143, 149, 0.12);
    overflow: hidden;
}
.ec-upload-fill {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
    transition: width 0.25s ease;
}
.ec-upload-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: ec-shimmer 1.3s linear infinite;
}
.ec-upload-meta {
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--ink-500);
}
.ec-upload-done .ec-upload-fill { background: #0f9d6b; }
.ec-upload-done .ec-upload-fill::after { animation: none; opacity: 0; }
.ec-upload-done .ec-upload-pct { color: #0f9d6b; }

/* ─────────────────────────────────────────────────────────────────────────
   Plot documentation slide-over modal
   ───────────────────────────────────────────────────────────────────────── */

.plot-doc-backdrop { opacity: 0; transition: opacity 0.25s ease-out; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.plot-doc-backdrop.active { opacity: 1; }
.plot-doc-panel { transform: translateX(100%); transition: transform 0.3s var(--ease); box-shadow: -30px 0 60px -20px rgba(4, 46, 51, 0.4); }
.plot-doc-panel.active { transform: translateX(0); }

/* ─────────────────────────────────────────────────────────────────────────
   Globe Picker (retuned accents to the new brand)
   ───────────────────────────────────────────────────────────────────────── */

.gp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 12, 14, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.gp-backdrop.gp-hidden { display: none; }
.gp-backdrop.gp-active { opacity: 1; visibility: visible; }

.gp-modal {
    width: 100%;
    max-width: 620px;
    background: #061319;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: scale(0.88) translateY(24px);
    opacity: 0;
    transition: transform 0.38s var(--ease-spring), opacity 0.26s ease;
}
.gp-backdrop.gp-active .gp-modal { transform: scale(1) translateY(0); opacity: 1; }

.gp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: linear-gradient(135deg, #042e33 0%, #0a585f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.gp-title { display: flex; align-items: center; gap: 10px; color: #e0fffb; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; font-family: var(--font-display); }
.gp-title svg { width: 20px; height: 20px; color: #5eead4; }
.gp-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.65);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.gp-close svg { width: 15px; height: 15px; }
.gp-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.gp-canvas-wrap { background: #020607; position: relative; display: flex; align-items: center; justify-content: center; padding: 16px; }
#gp-canvas { display: block; max-width: 100%; height: auto; cursor: grab; border-radius: 50%; touch-action: none; user-select: none; }
#gp-canvas:active { cursor: grabbing; }

.gp-loading {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px;
    background: rgba(2, 6, 7, 0.82);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.gp-loading.hidden { opacity: 0; pointer-events: none; }
.gp-spinner {
    width: 34px; height: 34px;
    border: 3px solid rgba(19, 179, 181, 0.2);
    border-top-color: var(--brand-400);
    border-radius: 50%;
    animation: gp-spin 0.75s linear infinite;
}
@keyframes gp-spin { to { transform: rotate(360deg); } }

.gp-hint { text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.3); padding: 5px 20px 8px; letter-spacing: 0.03em; }

.gp-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 14px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    flex-wrap: wrap;
}
.gp-coords { flex: 1; min-width: 0; font-size: 13px; min-height: 22px; display: flex; align-items: center; gap: 2px; }
.gp-coord-placeholder { color: rgba(255, 255, 255, 0.3); font-style: italic; font-size: 12px; }
.gp-coord-val { color: #fbbf24; font-weight: 700; font-size: 15px; font-family: var(--font-mono); letter-spacing: -0.02em; }
.gp-coord-sep { color: rgba(255, 255, 255, 0.3); margin: 0 4px; }

.gp-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gp-clear-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    background: transparent;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gp-clear-btn svg { width: 13px; height: 13px; }
.gp-clear-btn:hover { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.22); }
.gp-confirm-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 20px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(19, 179, 181, 0.45);
    letter-spacing: 0.01em;
}
.gp-confirm-btn svg { width: 13px; height: 13px; }
.gp-confirm-btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--brand-500), var(--brand-400)); box-shadow: 0 6px 22px rgba(19, 179, 181, 0.55); transform: translateY(-1px); }
.gp-confirm-btn:active:not(:disabled) { transform: translateY(0); }
.gp-confirm-btn:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }

/* ════════════════════════════════════════════════════════════════════
   Control deck (.ec-deck) — the horizontal mission-setup console that
   sits above the full-width results zone on the four analysis tabs
   (ATLID / Quicklook / Intercomparison / Cal/Val). Step columns are
   separated by hairlines (1px grid gaps over a tinted backdrop); the
   primary action lives in the footer bar. The Download Data console
   (.dl-*) below is unrelated and unaffected.
   ════════════════════════════════════════════════════════════════════ */

.ec-deck {
    background: linear-gradient(180deg, #ffffff 0%, #f8fdfd 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.ec-app .tab-panel:not(.hidden) > .ec-deck { animation: ec-rise 0.5s var(--ease) both; }

.ec-deck-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: rgba(11, 143, 149, 0.16);
}
.ec-deck-col {
    min-width: 0;
    padding: 16px 18px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfefe 100%);
}

@media (min-width: 768px) and (max-width: 1179.98px) {
    .ec-deck-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 3-column decks would leave a bare grid cell at this width — let the
       acquisition column span the full first row instead. */
    .ec-deck-3 > .ec-deck-col:first-child,
    .ec-deck-3w > .ec-deck-col:first-child { grid-column: span 2; }
}
@media (min-width: 768px) {
    .ec-deck-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
    .ec-deck-4  { grid-template-columns: 1.22fr 1fr 1fr 1fr; }
    .ec-deck-3  { grid-template-columns: 1.15fr 1fr 1fr; }
    .ec-deck-3w { grid-template-columns: 1.55fr 1fr 1fr; }
    .ec-deck-2  { grid-template-columns: 1.08fr 1fr; }
}

/* Steps stacked inside one column */
.ec-step + .ec-step { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }

.ec-step-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.ec-step-n {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-amber);
}
.ec-step-h h2 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink-900);
}

.ec-step-p { font-size: 0.76rem; line-height: 1.5; color: var(--ink-500); margin: -2px 0 10px; }
.ec-step-p.ec-step-p-after { margin: 8px 0 0; }
.ec-step-opt {
    font-family: var(--font-body); font-size: 0.66rem; font-weight: 600;
    letter-spacing: 0.02em; color: var(--ink-400);
}

/* Ground point: three numeric fields on one row, labels stacked above. */
.ec-point-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ec-point-grid label {
    display: flex; flex-direction: column; gap: 3px; min-width: 0;
    font-size: 0.62rem; color: var(--ink-500);
}
/* The Tailwind preflight zeroes border-width, so bare fields need one set. */
.ec-point-grid input {
    width: 100%; min-width: 0; box-sizing: border-box;
    padding: 5px 7px !important; font-size: 0.78rem !important;
    border: 1px solid var(--line-strong);
}
.ec-point-hint { font-size: 0.68rem; line-height: 1.45; color: var(--ink-400); margin: 7px 0 0; }
.ec-point-hint.ec-point-bad { color: #b91c1c; }

/* Readiness of an overlay's source granule, fetched on demand from ESA MAAP */
.ec-met-status { font-size: 0.68rem; line-height: 1.5; color: var(--ink-500); margin: 8px 0 0; }
.ec-met-status.is-busy { color: var(--brand-700); }
.ec-met-status.is-ok { color: var(--success); font-weight: 600; }
.ec-met-status.is-err { color: var(--danger); }

/* Overlay switches: a checkbox on the same baseline as its label. */
.ec-check {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 0.78rem; color: var(--ink-600);
}
.ec-check input { width: 15px; height: 15px; margin: 0; cursor: pointer; }

/* Says why a file picker is empty when the platform is not. */
.ec-file-hint {
    font-size: 0.7rem; line-height: 1.45; color: var(--ink-500);
    background: var(--brand-50); border-left: 2px solid var(--brand-300);
    border-radius: 0 6px 6px 0; padding: 6px 8px; margin-top: 8px;
}

/* Field labels inside the deck — small-caps console voice */
.ec-fl {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-700);
    margin-bottom: 4px;
}

/* ── Data acquisition accordion (Upload / ESA catalogue are alternative
      ways to obtain the active file, so they fold away until needed).
      Native <details name="…"> keeps the two mutually exclusive. ── */
.ec-acq {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
}
.ec-acq + .ec-acq { margin-top: 7px; }
.ec-acq > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-700);
    user-select: none;
    transition: background 0.15s, color 0.15s;
    border-radius: calc(var(--radius-sm) - 1px);
}
.ec-acq > summary::-webkit-details-marker { display: none; }
.ec-acq > summary:hover { background: var(--brand-50); color: var(--brand-800); }
.ec-acq > summary svg { width: 14px; height: 14px; flex: none; color: var(--brand-600); }
.ec-acq-x {
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.6px solid var(--ink-400);
    border-bottom: 1.6px solid var(--ink-400);
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s var(--ease);
    flex: none;
}
.ec-acq[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.ec-acq[open] > summary {
    color: var(--brand-800);
    background: var(--brand-50);
    border-bottom: 1px solid var(--line);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.ec-acq[open] .ec-acq-x { transform: rotate(225deg) translateY(-1px); }
.ec-acq-body { padding: 12px; }

/* ── Dropzone file input (.ec-drop) — replaces the native file control.
      The real <input type="file"> stays inside (visually hidden) so all
      existing change-listener wiring keeps working; drag & drop and the
      filename readout are wired by the dropzone module in app.js. ── */
.ec-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 16px 12px 13px;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fbfefe;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.ec-drop:hover, .ec-drop.ec-drop-over {
    border-color: var(--brand-500);
    background: var(--brand-50);
}
.ec-drop.ec-drop-over { box-shadow: 0 0 0 4px rgba(19, 179, 181, 0.14); }
.ec-drop:focus-within { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.ec-drop-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    overflow: hidden;
    clip-path: inset(50%);
}
.ec-drop-ic { width: 22px; height: 22px; color: var(--brand-600); }
.ec-drop-t { font-size: 0.8rem; font-weight: 600; color: var(--ink-700); }
.ec-drop-t em {
    font-style: normal;
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ec-drop-f {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-500);
}
.ec-drop.ec-drop-filled {
    border-style: solid;
    border-color: var(--brand-400);
    background: var(--brand-50);
}
.ec-drop.ec-drop-filled .ec-drop-f { color: var(--brand-800); font-weight: 600; }

/* ── Styled dropdown (dropdown.js) — a button trigger + a floating listbox.
      The listbox lives on <body>: the deck cards animate with transforms and
      clip their overflow, either of which would trap or misplace an in-card
      menu. `.ec-dd-btn-on` is the amber "this filter is narrowing" state. ── */
.ec-dd { display: inline-flex; max-width: 100%; min-width: 0; }
.ec-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fbfdfd;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease),
                color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
/* The app-wide button hover lifts and saturates — right for actions, wrong for
   a form control that anchors a menu. */
.ec-app main .ec-dd-btn:not(:disabled):hover {
    transform: none;
    filter: none;
    border-color: var(--brand-400);
}
.ec-dd-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.ec-dd-btn[aria-expanded="true"] {
    background: #fff;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(19, 179, 181, 0.14);
}
.ec-dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-dd-chev {
    display: inline-flex;
    flex: none;
    margin-left: auto;
    color: var(--ink-400);
    transition: transform 0.18s var(--ease), color 0.15s var(--ease);
}
.ec-dd-chev svg { width: 12px; height: 12px; }
.ec-dd-btn[aria-expanded="true"] .ec-dd-chev { transform: rotate(180deg); color: var(--brand-600); }
.ec-dd-btn-on {
    background: var(--amber-50);
    border-color: var(--amber-400);
    color: var(--amber-700);
}
.ec-app main .ec-dd-btn-on:not(:disabled):hover { border-color: var(--amber-500); }
.ec-dd-btn-on .ec-dd-chev { color: var(--amber-500); }

/* Full-width variant for the deck's form rows (variable, plot type). */
.ec-dd-wide { display: flex; width: 100%; }
.ec-dd-wide .ec-dd-btn {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    font-size: 0.82rem;
}

.ec-dd-menu {
    position: fixed;
    z-index: 120;
    display: none;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 5px;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 6px 16px -8px rgba(4, 46, 51, 0.18), 0 18px 42px -12px rgba(4, 46, 51, 0.3);
    font-family: var(--font-body);
}
.ec-dd-menu[data-open] { display: block; animation: ec-dd-pop 0.16s var(--ease) both; }
.ec-dd-menu-up[data-open] { animation-name: ec-dd-pop-up; }
@keyframes ec-dd-pop { from { opacity: 0; transform: translateY(-5px); } }
@keyframes ec-dd-pop-up { from { opacity: 0; transform: translateY(5px); } }
.ec-dd-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 7px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink-700);
    cursor: pointer;
    user-select: none;
}
.ec-dd-opt + .ec-dd-opt { margin-top: 1px; }
.ec-dd-opt-act { background: var(--brand-50); color: var(--brand-800); }
.ec-dd-opt[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ec-dd-opt[aria-selected="true"] { color: var(--ink-900); }
.ec-dd-check { display: inline-flex; flex: none; width: 13px; color: transparent; }
.ec-dd-check svg { width: 13px; height: 13px; }
.ec-dd-opt[aria-selected="true"] .ec-dd-check { color: var(--amber-500); }
.ec-dd-opt-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-dd-count {
    flex: none;
    margin-left: 6px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ink-500);
    background: rgba(11, 143, 149, 0.08);
    border-radius: 999px;
    padding: 1px 6px;
}
.ec-dd-opt[aria-selected="true"] .ec-dd-count { color: var(--amber-700); background: var(--amber-100); }

/* ── Platform-library file picker (.ec-pick) — one framed console: a header
      strip with the live count, one filter row (instrument · level · X-MET ·
      search), and the granule list. Rendered by file-picker.js; the value
      lives in a hidden <select> beside it. ── */
.ec-pick {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Header strip */
.ec-pick-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #f2fafa, #e9f5f5);
    border-bottom: 1px solid var(--line);
}
.ec-pick-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-display);
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-800);
}
.ec-pick-title-ic { display: inline-flex; }
.ec-pick-title-ic svg { width: 13px; height: 13px; color: var(--brand-600); }
.ec-pick-top-r { display: inline-flex; align-items: center; gap: 8px; }
.ec-pick-count {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    color: var(--ink-500);
    white-space: nowrap;
}
.ec-pick-count b { color: var(--amber-600); font-weight: 700; }
/* Only offered once a filter is actually narrowing the list. */
.ec-pick-clear {
    display: none;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: var(--brand-700);
    padding: 4px 8px;
    border: 1px solid var(--brand-200);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ec-pick-clear:hover { background: var(--brand-50); border-color: var(--brand-400); }
.ec-pick-clear.ec-pick-clear-on { display: inline-block; }

/* Filter row — instrument · data level · X-MET · search, in that order. Every
   control narrows the list the moment it changes. All controls share one 32px
   height; the search sits apart on the right and gives up room first, so the
   row breaks cleanly when the column is too narrow to hold it. */
.ec-pick-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    padding: 10px 10px 0;
}

/* Each filter is a hidden <select> (the state) faced by an ECDropdown trigger. */
.ec-pick-fw { display: flex; flex: 0 0 auto; min-width: 0; }

/* X-MET opt-in — the auxiliary meteorology is additive, so it rides a tick
   rather than a value, exactly as in Download Data. The badge is how many
   granules it would add. */
.ec-pick-xmet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fbfdfd;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ink-700);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease),
                background 0.15s var(--ease), color 0.15s var(--ease);
}
.ec-pick-xmet:hover { border-color: var(--amber-400); }
.ec-pick-xmet:focus-within {
    border-color: var(--amber-500);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16);
}
.ec-pick-xmet input {
    width: 13px;
    height: 13px;
    flex: none;
    margin: 0;
    accent-color: var(--amber-500);
    cursor: pointer;
}
.ec-pick-xmet b {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--ink-500);
    background: rgba(11, 143, 149, 0.09);
    border-radius: 999px;
    padding: 1px 6px;
}
.ec-pick-xmet-on {
    color: var(--amber-700);
    background: var(--amber-50);
    border-color: var(--amber-400);
}
.ec-pick-xmet-on b { color: var(--amber-700); background: var(--amber-100); }

/* Search — apart on the right, capped so it reads as one control among equals
   rather than the whole row. The orbit lives in the granule name, so it is
   found here too. */
.ec-pick-qwrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 150px;
    min-width: 140px;
    max-width: 250px;
    margin-left: auto;
}
.ec-pick-in-ic {
    position: absolute;
    left: 10px;
    display: inline-flex;
    color: var(--ink-400);
    pointer-events: none;
    transition: color 0.15s var(--ease);
}
.ec-pick-in-ic svg { width: 13px; height: 13px; }
.ec-pick-qwrap:focus-within .ec-pick-in-ic { color: var(--brand-600); }
.ec-pick-q {
    width: 100%;
    height: 32px;
    border: 1px solid var(--line-strong);
    background: #fbfdfd;
    font-size: 0.73rem;
    color: var(--ink-900);
    padding: 0 10px 0 29px;
}
.ec-pick-q::placeholder { color: var(--ink-400); }
.ec-pick-q::-webkit-search-cancel-button { cursor: pointer; }
.ec-pick-q:focus { background: #fff; }

/* Granule list */
.ec-pick-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 264px;
    overflow-y: auto;
    margin: 9px 10px 10px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xs);
    background: linear-gradient(180deg, #fbfefe, #f5fbfb);
    scrollbar-width: thin;
}

.ec-pick-row {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    /* Rows keep their height and the list scrolls — as flex children they would
       otherwise shrink into each other once the library outgrows the box. */
    flex: none;
    padding: 7px 9px;
    text-align: left;
    border: 1px solid transparent;
    border-radius: 7px;
    background: #fff;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.ec-pick-row:hover { border-color: var(--brand-300); }
.ec-pick-row:focus-visible {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(19, 179, 181, 0.16);
}
.ec-pick-row-on {
    border-color: var(--brand-500);
    background: var(--brand-50);
    box-shadow: inset 2px 0 0 var(--brand-600), var(--shadow-sm);
}

/* Instrument colour swatch — the same technical square the Download Data
   result rows carry, so colour stays on the data across sections. */
.ec-pick-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(8, 40, 46, 0.12);
}
.ec-pick-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ec-pick-head { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.ec-pick-code {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--brand-800);
}
.ec-pick-lvl {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--ink-500);
    background: rgba(11, 143, 149, 0.08);
    border-radius: 3px;
    padding: 1px 4px;
}
.ec-pick-scene {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--ink-400);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0 4px;
}
.ec-pick-scene b { color: var(--brand-700); font-weight: 700; }
.ec-pick-name {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--ink-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ec-pick-row-on .ec-pick-name { color: var(--ink-700); }

.ec-pick-facts {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}
.ec-pick-date { font-family: var(--font-mono); font-size: 0.6rem; color: var(--ink-400); white-space: nowrap; }
.ec-pick-size { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; }

/* Selection tick — the list is a single-choice control and says so. */
.ec-pick-tick {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    display: grid;
    place-items: center;
    color: transparent;
    transition: background 0.14s var(--ease), border-color 0.14s var(--ease),
                color 0.14s var(--ease);
}
.ec-pick-tick svg { width: 9px; height: 9px; }
.ec-pick-row:hover .ec-pick-tick { border-color: var(--brand-400); }
.ec-pick-row-on .ec-pick-tick {
    background: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}

.ec-pick-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 24px 14px;
    text-align: center;
}
.ec-pick-empty-ic { display: inline-flex; margin-bottom: 3px; }
.ec-pick-empty-ic svg { width: 24px; height: 24px; color: var(--brand-300); }
.ec-pick-empty-t { font-size: 0.74rem; font-weight: 600; color: var(--ink-500); }
.ec-pick-empty-s { font-size: 0.66rem; color: var(--ink-400); max-width: 320px; }
.ec-pick-empty-b {
    margin-top: 9px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--brand-700);
    background: #fff;
    border: 1px solid var(--brand-200);
    border-radius: 7px;
    padding: 5px 11px;
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.ec-pick-empty-b:hover { background: var(--brand-50); border-color: var(--brand-400); }

/* The filters can hide the granule that is actually selected — the section
   would then run on a file the user can no longer see. Say so, and offer it
   back. */
.ec-pick-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px 10px;
    padding: 7px 9px;
    border: 1px dashed var(--brand-300);
    border-radius: var(--radius-xs);
    background: var(--brand-50);
    font-size: 0.68rem;
    color: var(--brand-800);
}
.ec-pick-note-b {
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 700;
    color: var(--brand-700);
    background: #fff;
    border: 1px solid var(--brand-200);
    border-radius: 6px;
    padding: 3px 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.ec-pick-note-b:hover { border-color: var(--brand-400); background: var(--brand-50); }

/* ── Max-height module — one value, two hands on it: drag the slider or type
      the number. The amber fill is the chosen slice of the atmosphere. ── */
.ec-hs { display: flex; align-items: flex-start; gap: 14px; }
.ec-hs-rail { position: relative; flex: 1; min-width: 0; padding-bottom: 13px; }
.ec-app input.ec-hs-range { width: 100%; display: block; }
.ec-app input.ec-hs-range::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,
        var(--amber-400), var(--amber-500) var(--fill, 43%),
        rgba(11, 143, 149, 0.16) var(--fill, 43%));
}
.ec-app input.ec-hs-range::-moz-range-progress {
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--amber-400), var(--amber-500));
}
.ec-hs-scale {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 12px;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--ink-400);
    pointer-events: none;
}
.ec-hs-scale span { position: absolute; transform: translateX(-50%); }
.ec-hs-scale span:first-child { transform: none; }
.ec-hs-scale span:last-child { transform: translateX(-100%); }
.ec-hs-num {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 32px;
    padding-right: 9px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.ec-hs-num:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(19, 179, 181, 0.14);
}
.ec-app .ec-hs-num input {
    width: 46px;
    height: 100%;
    border: 0;
    background: transparent;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink-900);
    appearance: textfield;
    -moz-appearance: textfield;
}
/* The group carries the focus ring; the inner input must not double it. */
.ec-app .ec-hs-num input:focus { outline: none; box-shadow: none !important; }
.ec-hs-num input::-webkit-outer-spin-button,
.ec-hs-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ec-hs-num span { margin-left: 4px; font-size: 0.66rem; font-weight: 700; color: var(--ink-500); }

/* ── Run summary — pinned to the foot of the settings column, so the emptier
      the column, the more deliberately the recap fills it. Echoes exactly what
      the Run button underneath will use. ── */
.ec-col-flex { display: flex; flex-direction: column; }
.ec-brief { margin-top: auto; padding-top: 15px; }
.ec-brief-box {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, #fbfefe, #f3fafa);
    padding: 10px 12px 11px;
}
.ec-brief-h {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--brand-800);
}
.ec-brief-h::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 2px;
    background: var(--amber-500);
}
.ec-brief dl {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0;
}
.ec-brief dt { font-size: 0.64rem; font-weight: 600; color: var(--ink-400); white-space: nowrap; }
.ec-brief dd {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ink-700);
}

/* Footer action bar */
.ec-deck-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(19, 179, 181, 0.03), rgba(19, 179, 181, 0.08));
}
.ec-deck-note { font-size: 0.78rem; color: var(--ink-700); }
.ec-run {
    min-width: 230px;
    padding: 0.72rem 2.2rem;
    font-family: var(--font-display);
    font-size: 0.88rem;
    letter-spacing: 0.01em;
}
@media (max-width: 680px) {
    .ec-run { width: 100%; min-width: 0; }
}

/* Dynamic result lists stay contained inside their deck column */
#cvOrbitList { max-height: 280px; overflow-y: auto; }

/* Separator between "bring a new file" and "reuse one already on the platform" */
.cv-or {
    display: flex; align-items: center; gap: 8px;
    margin: 14px 0 8px;
    font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-500);
}
.cv-or::before, .cv-or::after {
    content: ""; flex: 1; height: 1px; background: var(--brand-200);
}

/* Station info card (Cal/Val step 01, filled after upload) */
.cv-station {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    border-radius: var(--radius-sm);
}
.cv-station-name {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--brand-800);
    margin-bottom: 6px;
}
.cv-station-rows { display: grid; gap: 3px; }
.cv-station-rows > div { display: flex; align-items: baseline; gap: 8px; }
.cv-station-rows dt {
    flex: none;
    width: 62px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-400);
}
.cv-station-rows dd {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--ink-900);
    min-width: 0;
    overflow-wrap: anywhere;
}
.cv-station-link {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--brand-600);
    cursor: pointer;
}
.cv-station-link:hover { text-decoration: underline; }

/* Cal/Val "How it works" strip (full-width intro card) */
.cv-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 18px; }
.cv-how-step { border-left: 2px solid rgba(19, 179, 181, 0.45); padding-left: 10px; }
.cv-how-step span {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-amber);
    margin-bottom: 3px;
}
.cv-how-step p { font-size: 0.78rem; line-height: 1.5; color: var(--ink-700); }

/* ════════════════════════════════════════════════════════════════════
   Intercomparison tab — file rows (.ic-file) and the recipe board
   (.ic-recipes). Every recipe stays visible with live requirement chips,
   so it is always clear which products a comparison still needs.
   ════════════════════════════════════════════════════════════════════ */

.ic-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.ic-file:hover { background: var(--brand-50); }
.ic-file:has(input:checked) { background: var(--brand-50); border-color: var(--brand-200); }
.ic-file.hidden { display: none; }
.ic-file input { width: 15px; height: 15px; flex: none; accent-color: var(--brand-600); }
.ic-file-pt {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--brand-800);
    background: var(--brand-50);
    border: 1px solid var(--brand-200);
    padding: 2px 6px;
    border-radius: 6px;
}
.ic-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-700);
}
.ic-file-size { flex: none; font-size: 0.62rem; color: var(--ink-400); }
.ic-file-unknown { opacity: 0.55; cursor: not-allowed; }
.ic-file-unknown .ic-file-pt { color: #b45309; background: #fef3c7; border-color: #fde68a; }

/* Orbit · frame tag per row — the join key a valid comparison must share */
.ic-file-of {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--ink-500);
    background: #f2f6f6;
    border: 1px solid var(--line);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.02em;
}
.ic-file-of b { color: var(--brand-700); font-weight: 700; }

/* Manual orbit-number filter above the file list.
   !important throughout because .ec-app input's global rule (style.css
   ~line 278) sets border-color AND the background shorthand at higher
   specificity than any single class here. Without it, that rule silently
   wins: border fades to the near-transparent --line-strong and the
   shorthand `background: #fff` blanks out both the tint and the icon. */
.ic-filter-row { position: relative; margin-bottom: 8px; }
.ic-orbit-input {
    width: 100%;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 9px 34px 9px 32px;
    border: 1.5px solid var(--brand-400) !important;
    border-radius: 8px;
    background-color: var(--brand-50) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c7176' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 10px center !important;
    background-size: 15px auto !important;
    color: var(--ink-900);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, opacity 0.15s;
}
.ic-orbit-input:hover { border-color: var(--brand-500) !important; }
.ic-orbit-input:focus {
    outline: none;
    border-color: var(--brand-600) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(19, 179, 181, 0.22);
}
.ic-orbit-input:disabled {
    border-color: var(--line-strong) !important;
    background-color: #f5f8f8 !important;
    color: var(--ink-400);
    cursor: not-allowed;
    opacity: 0.8;
}
.ic-orbit-clear {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border: 0; background: none; color: var(--ink-400);
    font-size: 0.7rem; cursor: pointer; border-radius: 5px; line-height: 20px;
    text-align: center; transition: background 0.15s, color 0.15s;
}
.ic-orbit-clear:hover { background: var(--brand-50); color: var(--ink-700); }

/* Lock banner — appears once a ticked file constrains the list to its scene */
.ic-lock-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 0.68rem; font-weight: 500; color: var(--brand-800);
    background: var(--brand-50); border: 1px solid var(--brand-200);
    border-radius: 8px; padding: 6px 9px; margin-bottom: 8px;
}
.ic-lock-clear {
    flex: none; font-size: 0.64rem; font-weight: 600; color: var(--brand-700);
    background: #fff; border: 1px solid var(--brand-300); border-radius: 6px;
    padding: 3px 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.ic-lock-clear:hover { background: var(--brand-100); border-color: var(--brand-500); }

/* Selection summary above the board: product chips + ready count + warnings */
.ic-selsum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-bottom: 8px;
    font-size: 0.68rem;
    color: var(--ink-500);
}
.ic-selsum:empty { display: none; }
.ic-sum-chip {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--brand-800);
    background: var(--brand-100);
    border: 1px solid var(--brand-200);
    border-radius: 6px;
    padding: 2px 6px;
}
.ic-sum-warn { flex-basis: 100%; color: #b45309; font-size: 0.66rem; margin-top: 2px; }

/* Recipe cards */
.ic-recipes { display: grid; gap: 7px; max-height: 340px; overflow-y: auto; padding-right: 2px; }
.ic-recipe {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 9px 11px;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ic-recipe-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.ic-radio {
    width: 13px; height: 13px;
    flex: none;
    border-radius: 50%;
    border: 1.6px solid var(--ink-400);
    background: #fff;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ic-recipe-label { font-size: 0.76rem; font-weight: 600; color: var(--ink-900); line-height: 1.25; }
.ic-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ic-chip {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 2px 6px;
    border-radius: 6px;
}
.ic-chip-met { color: var(--brand-800); background: var(--brand-100); border: 1px solid var(--brand-300); }
.ic-chip-miss { color: var(--ink-400); background: #f5f8f8; border: 1px dashed rgba(90, 116, 123, 0.4); }
/* Missing chip as a scene-matched MAAP fetch button (rendered when a scene is locked) */
.ic-chip-fetch { cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.ic-chip-fetch:hover:not(:disabled),
.ic-chip-fetch:focus-visible:not(:disabled) {
    color: var(--brand-800);
    background: var(--brand-100);
    border: 1px solid var(--brand-500);
}
.ic-chip-fetch:disabled { cursor: wait; opacity: 0.55; }
.ic-chip-dl { margin-left: 3px; font-weight: 700; }
.ic-fetch-status { margin-top: 8px; font-size: 0.68rem; line-height: 1.5; color: var(--ink-500); }
.ic-fetch-status.ic-fetch-ok { color: var(--success); font-weight: 600; }
.ic-fetch-status.ic-fetch-err { color: var(--danger); }
.ic-status { margin-top: 6px; font-size: 0.64rem; line-height: 1.45; }
.ic-status-ready { color: var(--success); font-weight: 600; }
.ic-status-miss { color: var(--ink-500); }

/* Complete recipes are actionable; incomplete ones stay readable but muted */
.ic-recipe-ready { cursor: pointer; border-color: var(--brand-300); box-shadow: var(--shadow-sm); }
.ic-recipe-ready:hover { border-color: var(--brand-500); }
.ic-recipe-off { background: rgba(255, 255, 255, 0.6); }
.ic-recipe-off .ic-recipe-label { color: var(--ink-500); font-weight: 500; }
.ic-recipe-chosen {
    border-color: var(--brand-500);
    background: var(--brand-50);
    box-shadow: 0 0 0 3px rgba(19, 179, 181, 0.14);
}
.ic-recipe-chosen .ic-radio {
    border-color: var(--brand-600);
    background: var(--brand-600);
    box-shadow: inset 0 0 0 2.5px #fff;
}

/* ════════════════════════════════════════════════════════════════════
   Download Data section — acquisition console (.dl-*) and the track map
   chrome (.tm-*): product-family selector on top, then map + time range
   on the left, instrument/level/orbit·frame/baseline filters in the
   middle, results grouped by product on the right. Self-contained;
   reuses the brand tokens above. Nothing here affects the other tabs.
   ════════════════════════════════════════════════════════════════════ */

/* ── Product family selector (EarthCARE ESA / EarthCARE JAXA) ── */
.dl-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dl-src {
    position: relative; display: flex; flex-direction: column; align-items: flex-start;
    gap: 2px; text-align: left; padding: 11px 16px 12px 19px; cursor: pointer;
    border: 1px solid var(--brand-200); border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fdfd 100%);
    box-shadow: 0 1px 3px rgba(15, 60, 71, 0.05);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
/* The chosen family carries the amber-to-teal tick every active heading uses. */
.dl-src::before {
    content: ""; position: absolute; left: 8px; top: 13px; bottom: 13px; width: 3px;
    border-radius: 3px; background: linear-gradient(180deg, #fbbf24, var(--brand-600));
    opacity: 0; transition: opacity .15s;
}
.dl-src:hover:not(:disabled) { border-color: var(--brand-300); box-shadow: 0 3px 12px rgba(10, 143, 149, 0.14); }
.dl-src:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.dl-src:disabled { opacity: 0.45; cursor: not-allowed; }
.dl-src-on {
    border-color: var(--brand-400);
    background: linear-gradient(180deg, #f2fefd 0%, #e7fbf9 100%);
    box-shadow: 0 4px 14px rgba(10, 143, 149, 0.16), inset 0 0 0 1px var(--brand-200);
}
.dl-src-on::before { opacity: 1; }
.dl-src-eyebrow {
    font-family: var(--font-display); font-size: 0.55rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: #94a3b8;
}
.dl-src-on .dl-src-eyebrow { color: var(--brand-600); }
.dl-src-name {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--ink-900);
}
.dl-src-on .dl-src-name { color: var(--brand-800); }
.dl-src-badge { display: inline-flex; }
.dl-src-badge .dl-lock { width: 13px; height: 13px; }
.dl-src-desc { font-size: 0.68rem; line-height: 1.45; color: #64748b; }

/* Caption under the family buttons: what the family is, or why it is locked. */
.dl-src-note {
    display: flex; align-items: flex-start; gap: 6px; margin: 7px 2px 12px;
    font-size: 0.66rem; line-height: 1.5; color: #64748b; min-height: 1.1em;
}
.dl-src-note .dl-lock { margin-top: 2px; flex: none; }
.dl-src-note-warn {
    color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 8px; padding: 6px 9px;
}

/* ── Console grid: map column, filter rail, results ── */
.dl-console {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px 344px;
    gap: 16px;
    height: calc(100vh - 306px);
    min-height: 540px;
}
.dl-left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
@media (max-width: 1100px) {
    .dl-console { grid-template-columns: 1fr; height: auto; }
    .dl-sources { grid-template-columns: 1fr; }
    .dl-left .dl-mapwrap { flex: none; height: 440px; }
}
/* Every step (01–06 + the CTA) must stay reachable without scrolling the rail,
   so short viewports trade chrome for density — never steps: slimmer family
   cards, tighter pills, and the explanatory rail hints go (state stays visible
   through the 06 status chip and the search progress/error blocks). */
@media (max-height: 900px) and (min-width: 1101px) {
    .dl-src { padding: 8px 14px 9px 17px; }
    .dl-src-desc { display: none; }
    .dl-src-note { margin: 5px 2px 9px; }
    .dl-console { height: calc(100vh - 276px); min-height: 462px; }
    .dl-filter-scroll { padding: 10px 12px; }
    .dl-filter-scroll .dl-hint { display: none; }
    .dl-group { margin-bottom: 10px; }
    .dl-group-h { margin-bottom: 5px; }
    .dl-chip { padding: 5px 10px; }
    .dl-tag { padding: 4px 9px; }
    .dl-framefig { margin-top: 6px; min-height: 48px; }
    .dl-extras { margin-bottom: 6px; }
    .dl-search-btn { padding: 9px; }
    .dl-cancel-btn { padding: 8px; margin-top: 6px; }
}

.dl-filters, .dl-results {
    display: flex; flex-direction: column; min-height: 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fdfd 100%);
    border: 1px solid var(--brand-100);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 60, 71, 0.05);
    overflow: hidden;
}
/* The rail scrolls on one axis only. `overflow-y: auto` alone would compute the
   x axis to `auto` as well, letting any over-wide control turn the filters into
   a sideways-scrolling strip that hides the checkbox column. */
.dl-filter-scroll {
    flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 14px;
    display: flex; flex-direction: column;
}

.dl-group { margin-bottom: 12px; flex: none; }
/* The orbit-frame group is the rail's flexible slot: its reference figure
   grows to absorb the spare height, so 06 Baseline always sits flush above
   the CTA instead of floating over a dead gap. */
.dl-group-frame { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.dl-group:last-child { margin-bottom: 4px; }
.dl-group-h {
    font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-800);
    margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between;
}
.dl-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: #94a3b8; }
/* Amber console index on each filter group — same voice as the deck step
   numbers (.ec-step-n), so all five tabs share one design language. */
.dl-n {
    font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
    letter-spacing: 0.08em; color: var(--accent-amber); margin-right: 7px;
}
.dl-pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* Instrument chips — quiet, monochrome controls. Colour belongs to the data
   (map tracks, legend, result rows), not the filter, so the selector reads as a
   calm control panel; the active filter is marked in the single brand teal. */
.dl-chip {
    display: inline-flex; align-items: center; cursor: pointer;
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1;
    padding: 7px 12px; border-radius: 8px;
    border: 1px solid var(--brand-200); background: #fff; color: var(--ink-700);
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.dl-chip:hover { background: var(--brand-50); border-color: var(--brand-300); }
.dl-chip:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; }
.dl-chip-on {
    color: #fff; font-weight: 700;
    background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
    border-color: var(--brand-600);
    box-shadow: 0 2px 7px rgba(10, 143, 149, 0.28);
}

/* Level tags — compact monospace technical tags (levels carry no colour). */
.dl-tag {
    cursor: pointer; padding: 5px 10px; border-radius: 7px;
    border: 1px solid var(--brand-200); background: #fff; color: var(--ink-600);
    font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
    transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.dl-tag:hover { background: var(--brand-50); border-color: var(--brand-300); }
.dl-tag:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; }
.dl-tag-on { color: var(--brand-800); background: var(--brand-50); border-color: var(--brand-400); box-shadow: inset 0 0 0 1px var(--brand-200); }
/* Baseline codes confirmed in the live MAAP catalogue carry a teal dot. */
.dl-tag-live::after {
    content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
    background: var(--brand-500); margin-left: 5px; vertical-align: 1px;
}

/* Instrument colour swatch for the data lists only (result groups + rows) —
   a small rounded technical square. Colour lives here and on the map, not on the
   filter chips. */
.dl-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 0 0 1px rgba(8,40,46,0.12); }

.dl-lock { width: 11px; height: 11px; flex: none; color: #b45309; }
.dl-agency {
    flex: none; font-family: var(--font-mono); font-size: 0.52rem; font-weight: 700;
    letter-spacing: 0.05em; color: #b45309; background: #fffbeb;
    border: 1px solid #fcd34d; border-radius: 4px; padding: 1px 4px;
}
/* Baseline group chrome */
.dl-bl-state {
    font-family: var(--font-mono); font-size: 0.58rem; font-weight: 400;
    text-transform: none; letter-spacing: 0; color: #94a3b8;
}

/* Number and date fields carry a wide intrinsic width (~170px in Chrome). An
   `auto` grid minimum honours it and widens the whole rail, so the tracks, the
   labels and the fields are all pinned to a zero minimum: they fit the rail
   rather than stretch it. */
.dl-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dl-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.dl-row2 label, .dl-row3 label { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 0.6rem; color: #64748b; }
.dl-row2 input, .dl-row2 select, .dl-row3 input {
    width: 100%; min-width: 0; box-sizing: border-box;
    padding: 5px 7px !important; font-size: 0.78rem !important;
}
/* These bare fields carry no Tailwind border class and the preflight zeroes
   border-width, so the border is set explicitly or they render as white pills. */
.dl-row2 input, .dl-row2 select, .dl-row3 input {
    border: 1px solid var(--line-strong);
}

/* 05 · Orbit-frame reference (ESA handbook figure) — a small thumbnail in the
   rail; hovering or focusing it opens the full-size preview that download.js
   floats over the map column (position: fixed, so nothing clips it). */
.dl-framefig {
    position: relative; margin: 8px 0 0; padding: 4px; cursor: zoom-in;
    display: flex; flex: 1 1 auto; min-height: 64px; max-height: 300px;
    border: 1px solid var(--brand-100); border-radius: 10px; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.dl-framefig:hover, .dl-framefig:focus-visible {
    border-color: var(--brand-300); box-shadow: 0 3px 12px rgba(10, 143, 149, 0.16); outline: none;
}
/* The left crop keeps the frame ring — the informative half — in view at
   thumbnail sizes; hovering shows the whole figure. */
.dl-framefig img {
    flex: 1; min-width: 0; width: 100%;
    object-fit: cover; object-position: left center; border-radius: 7px;
}
.dl-framefig-zoom {
    position: absolute; right: 8px; bottom: 8px; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center; border-radius: 6px;
    background: rgba(6, 34, 47, 0.74); color: #d9f3f4; pointer-events: none;
}
.dl-framefig-zoom svg { width: 12px; height: 12px; }
.dl-framepop {
    position: fixed; z-index: 80; padding: 8px; border-radius: 14px;
    background: #fff; border: 1px solid var(--brand-200);
    box-shadow: 0 18px 60px rgba(2, 16, 22, 0.35);
    opacity: 0; transform: scale(0.96); pointer-events: none;
    transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.dl-framepop-on { opacity: 1; transform: scale(1); }
.dl-framepop img { display: block; width: 100%; height: auto; border-radius: 8px; }

.dl-modes { display: flex; gap: 5px; margin-bottom: 9px; }
.dl-mode {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    cursor: pointer; font-size: 0.68rem; font-weight: 600; padding: 7px 4px;
    border-radius: 9px; border: 1px solid var(--brand-200); background: #fff;
    color: var(--ink-600); transition: all 0.15s;
}
.dl-mode svg { width: 13px; height: 13px; flex: none; }
.dl-mode:hover { background: var(--brand-50); border-color: var(--brand-300); }
.dl-mode-on {
    background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
    border-color: var(--brand-600); color: #fff;
    box-shadow: 0 2px 8px rgba(10, 143, 149, 0.28);
}
.dl-loc-fields { display: flex; flex-direction: column; gap: 8px; }

.dl-search-foot { flex: none; padding: 10px 14px 12px; border-top: 1px solid var(--brand-100); background: #fff; }
/* Final step: the SYNERGY / X-MET opt-in sits right above the CTA. */
.dl-extras {
    display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
    cursor: pointer; font-size: 0.7rem; font-weight: 600; color: var(--ink-700);
}
.dl-extras input { width: 14px; height: 14px; flex: none; accent-color: var(--brand-600); cursor: pointer; }
/* Catalogue-search CTA in the app-wide amber — matches the "Search ESA
   Catalogue" buttons on the ATLID / Quicklook / Cal-Val decks. */
.dl-search-btn {
    width: 100%; padding: 11px; border-radius: 10px; cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: #422006;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 3px 14px rgba(245, 158, 11, 0.42); transition: all 0.15s;
}
.dl-search-btn:hover:not(:disabled) { filter: brightness(1.05) saturate(1.05); box-shadow: 0 5px 20px rgba(245, 158, 11, 0.55); }
.dl-search-btn:disabled { opacity: 0.6; cursor: progress; }

/* Only on screen while a search runs — the platform's destructive idiom
   (outlined red, filling on hover), kept quieter than the amber CTA above it. */
.dl-cancel-btn {
    width: 100%; margin-top: 8px; padding: 9px; border-radius: 10px; cursor: pointer;
    font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
    color: var(--danger); background: #fff; border: 1px solid rgba(220, 38, 38, 0.34);
    transition: background 0.16s var(--ease), color 0.16s var(--ease), border-color 0.16s var(--ease);
}
.dl-cancel-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.dl-cancel-btn:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }

.dl-progress { margin-top: 10px; }
.dl-progress-bar { height: 6px; border-radius: 999px; background: var(--brand-100); overflow: hidden; }
.dl-progress-bar > div { height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); transition: width 0.3s ease; }
.dl-progress-bar > div.dl-indet { width: 38% !important; animation: dl-indet 1.1s ease-in-out infinite; }
@keyframes dl-indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.dl-progress-text { font-size: 0.66rem; color: #64748b; margin-top: 4px; font-family: var(--font-mono); }

.dl-hint { font-size: 0.66rem; color: #94a3b8; margin-top: 4px; }
.dl-warn { color: #b45309 !important; }
.dl-error { font-size: 0.72rem; color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 7px 9px; margin-top: 8px; }

/* Map column — the map owns every location control via the overlay card. */
.dl-mapwrap { flex: 1 1 auto; min-height: 0; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--brand-200); box-shadow: 0 1px 4px rgba(15, 60, 71, 0.08); }
.dl-map { position: absolute; inset: 0; }

/* 01 · Location card floating on the map — same dark glass as the map chrome,
   so the console's light form idiom doesn't punch a white hole in the scene. */
.dl-mapcard {
    position: absolute; top: 10px; left: 10px; z-index: 6; width: 202px;
    border-radius: 12px; overflow: hidden;
    background: rgba(6, 34, 47, 0.80); border: 1px solid rgba(125, 200, 205, 0.28);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 22px rgba(2, 16, 22, 0.38);
}
.dl-mapcard-h {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 7px 9px; cursor: pointer; background: transparent; border: 0;
    color: #d9f3f4; font-family: var(--font-display); font-size: 0.68rem;
    font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.dl-mapcard-h:hover { background: rgba(45, 209, 207, 0.10); }
.dl-mc-chev { width: 13px; height: 13px; flex: none; transition: transform .18s var(--ease); }
.dl-mc-closed .dl-mc-chev { transform: rotate(-90deg); }
.dl-mapcard-b { display: flex; flex-direction: column; gap: 7px; padding: 2px 9px 9px; }
.dl-mc-closed .dl-mapcard-b { display: none; }
.dl-mapcard .dl-modes { margin-bottom: 0; }
.dl-mapcard .dl-mode {
    background: rgba(10, 48, 62, 0.6); border-color: rgba(125, 200, 205, 0.3); color: #cdeef0;
}
.dl-mapcard .dl-mode:hover { background: rgba(45, 209, 207, 0.16); border-color: rgba(125, 200, 205, 0.45); }
.dl-mapcard .dl-mode-on {
    background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
    border-color: var(--brand-500); color: #fff;
}
.dl-mapcard .dl-row3 label { color: #9fc9ce; }
.dl-mapcard input {
    background: rgba(10, 48, 62, 0.75); border: 1px solid rgba(125, 200, 205, 0.32);
    color: #eafcfb; border-radius: 7px;
}
.dl-mapcard input:focus { outline: 2px solid rgba(45, 209, 207, 0.55); outline-offset: 0; }
.dl-mapcard .dl-hint { color: rgba(205, 238, 240, 0.72); margin-top: 0; }
.dl-mapcard .dl-warn { color: #fcd34d !important; }

/* 02 · Time range card under the map */
.dl-timecard {
    flex: none; padding: 11px 14px 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fdfd 100%);
    border: 1px solid var(--brand-100); border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 60, 71, 0.05);
}

/* Results column */
.dl-results-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--brand-100); }
.dl-results-count {
    position: relative; padding-left: 0.65rem;
    font-family: var(--font-display); font-weight: 700; color: var(--brand-800); font-size: 0.84rem;
}
/* Amber-to-teal tick — the same accent the result-card headings carry. */
.dl-results-count::before {
    content: ""; position: absolute; left: 0; top: 0.14em; bottom: 0.14em; width: 3px;
    border-radius: 3px; background: linear-gradient(180deg, #fbbf24, var(--brand-600));
}
.dl-results-count span { font-size: 1rem; font-family: var(--font-mono); color: var(--accent-amber); }
.dl-results-count .dl-n { font-size: 0.68rem; }
.dl-selall { font-size: 0.7rem; color: #64748b; display: flex; align-items: center; gap: 5px; cursor: pointer; }

.dl-batchbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--brand-50); border-bottom: 1px solid var(--brand-100); }
.dl-sel-info { flex: none; font-size: 0.68rem; color: var(--brand-800); font-family: var(--font-mono); }
.dl-batch-btns { display: flex; gap: 6px; }
.dl-bbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 12px; cursor: pointer;
    font-family: inherit; font-size: 0.74rem; font-weight: 600; line-height: 1;
    border-radius: 9px; border: 1px solid var(--brand-300); background: #fff; color: var(--brand-700);
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.dl-bbtn svg { width: 14px; height: 14px; flex: none; }
.dl-bbtn:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.dl-bbtn:disabled { opacity: 0.55; cursor: progress; }
/* The recommended destination: platform storage, where every section can read it. */
.dl-bbtn-primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; box-shadow: 0 1px 3px rgba(15, 60, 71, 0.16); }
.dl-bbtn-primary:hover:not(:disabled) { background: var(--brand-700); border-color: var(--brand-700); }

.dl-result-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; }

/* Product-type group header — sticky while its granules scroll under it. */
.dl-ghead {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 7px;
    margin: 8px 2px 3px; padding: 6px 8px;
    border: 1px solid var(--brand-100); border-radius: 9px;
    background: linear-gradient(180deg, #f4fbfb 0%, #eaf6f6 100%);
    box-shadow: 0 1px 4px rgba(15, 60, 71, 0.06);
}
.dl-ghead:first-child { margin-top: 0; }
.dl-ghead-tgl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; flex: none;
    border: 0; border-radius: 5px; background: transparent; color: var(--brand-700); cursor: pointer;
}
.dl-ghead-tgl:hover { background: var(--brand-100); }
.dl-ghead-tgl svg { width: 12px; height: 12px; transition: transform .15s var(--ease); }
.dl-ghead-tgl[aria-expanded="false"] svg { transform: rotate(-90deg); }
.dl-ghead-code {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-mono); font-size: 0.84rem; font-weight: 700; color: var(--brand-800);
}
.dl-ghead-lvl { flex: none; font-family: var(--font-mono); font-size: 0.68rem; color: #94a3b8; }
.dl-ghead-n {
    margin-left: auto; flex: none; min-width: 20px; text-align: center;
    padding: 1px 6px; border-radius: 999px;
    font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
    color: #fff; background: var(--brand-600);
}
.dl-ghead-chk { flex: none; width: 14px; height: 14px; }

.dl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 9px; padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; }
.dl-row:hover, .dl-row-hover { background: var(--brand-50); }
.dl-row-sel { background: var(--brand-100); border-color: var(--brand-200); }
.dl-row-chk { flex: none; width: 15px; height: 15px; }
.dl-row-main { flex: 1; min-width: 0; }
.dl-row-title { font-family: var(--font-mono); font-size: 0.88rem; font-weight: 600; color: var(--ink-900); display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; min-width: 0; }
/* Only the product code may shrink, so badges can never push into the actions. */
.dl-row-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-row-bl {
    flex: none;
    font-size: 0.66rem; font-weight: 700; color: var(--accent-amber);
    border: 1px solid #fde68a; background: #fffbeb; border-radius: 4px; padding: 0 4px;
}
.dl-row-meta { font-size: 0.74rem; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "This granule is in platform storage" — the storage cylinder, filled. */
.dl-onplat {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 5px;
    color: #fff; background: var(--brand-600);
}
.dl-onplat svg { width: 11px; height: 11px; }
/* Destination bar: its own full-width line under the granule, so each button is
   a real labelled control instead of an unexplained icon squeezed beside the text. */
.dl-row-acts { display: flex; flex-basis: 100%; gap: 6px; }
.dl-act {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 31px; padding: 0 9px; cursor: pointer;
    font-family: inherit; font-size: 0.72rem; font-weight: 600; line-height: 1;
    border-radius: 8px; border: 1px solid var(--brand-200); background: #fff; color: var(--brand-700);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Fixed slot: the outcome mark replaces the icon without resizing the button. */
.dl-act-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 14px; height: 14px; }
.dl-act-ico svg { width: 14px; height: 14px; display: block; }
.dl-act-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-act:hover:not(:disabled) { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
/* Filled only while the granule is missing from platform storage — once it is
   stored, saving again is just an overwrite and drops back to a plain button. */
.dl-act-primary { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.dl-act-primary:hover:not(:disabled) { background: var(--brand-700); border-color: var(--brand-700); }
.dl-act:disabled { opacity: 0.45; cursor: progress; }
.dl-mark { font-size: 0.86rem; line-height: 1; }
.dl-act-err { color: #b91c1c !important; border-color: #fecaca !important; background: #fff !important; }
.dl-row-busy { background: var(--brand-50); }
.dl-row-busy .dl-row-title { opacity: 0.7; }
.dl-empty { padding: 28px 18px; text-align: center; color: #94a3b8; font-size: 0.78rem; line-height: 1.5; }

/* ── flat track map (track-map.js) ── */
.tm-root { position: relative; width: 100%; height: 100%; background: #06222f; }
.tm-canvas { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.tm-canvas:active { cursor: grabbing; }
/* Camera + projection tools sit top-right: the top-left corner belongs to the
   console's Location card. */
.tm-toolbar { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 10px; background: rgba(6, 34, 47, 0.74); border: 1px solid rgba(125, 200, 205, 0.25); backdrop-filter: blur(6px); }
.tm-toolbar button { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; color: #cdeef0; background: transparent; border: 0; padding: 5px 8px; border-radius: 7px; cursor: pointer; transition: background 0.15s; }
.tm-toolbar button:hover { background: rgba(45, 209, 207, 0.18); }
.tm-armed { background: var(--brand-500) !important; color: #fff !important; }
.tm-toolbar svg { width: 14px; height: 14px; display: block; }
.tm-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.tm-sep { width: 1px; height: 18px; background: rgba(125, 200, 205, 0.25); margin: 0 2px; }
.tm-hint { position: absolute; bottom: 10px; left: 10px; font-size: 0.64rem; color: rgba(205, 238, 240, 0.85); background: rgba(6, 34, 47, 0.6); padding: 4px 9px; border-radius: 8px; pointer-events: none; }
.tm-legend { position: absolute; top: 48px; right: 10px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 58%; padding: 6px 9px; border-radius: 9px; background: rgba(6, 34, 47, 0.6); border: 1px solid rgba(125, 200, 205, 0.2); }
.tm-leg-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.65rem; color: #e2f5f6; }
.tm-leg-n { color: #8fc7cc; font-family: var(--font-mono); font-size: 0.6rem; }
.tm-tooltip { position: absolute; pointer-events: none; z-index: 5; min-width: 124px; padding: 7px 9px; border-radius: 8px; background: rgba(6, 34, 47, 0.93); border: 1px solid rgba(125, 200, 205, 0.3); color: #e2f5f6; font-size: 0.65rem; transition: opacity 0.12s; }
.tm-tt-h { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-weight: 600; margin-bottom: 2px; }
.tm-tt-r { color: #a9d6da; font-size: 0.62rem; }

/* Always-visible cursor position (lat/lon under the pointer) */
.tm-coords {
    position: absolute; bottom: 10px; right: 10px; pointer-events: none;
    font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.02em;
    color: #d9f3f4; background: rgba(6, 34, 47, 0.72); padding: 4px 9px;
    border-radius: 8px; border: 1px solid rgba(125, 200, 205, 0.25);
    white-space: pre;
}

/* Globe ⇄ Flat projection toggle (active segment) */
.tm-toolbar .tm-on { background: var(--brand-500); color: #fff; }

/* Vertical zoom slider on the right edge — up is in, same eased zoom as the
   wheel. The native range input is rotated, so it keeps keyboard support. */
.tm-zoom {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 4px; border-radius: 10px;
    background: rgba(6, 34, 47, 0.74); border: 1px solid rgba(125, 200, 205, 0.25);
    backdrop-filter: blur(6px);
}
.tm-zbtn {
    width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: #cdeef0; font-size: 0.95rem; line-height: 1; cursor: pointer;
    transition: background 0.15s;
}
.tm-zbtn:hover { background: rgba(45, 209, 207, 0.18); }
.tm-zslot { position: relative; width: 22px; height: 128px; }
.tm-zslider {
    position: absolute; left: 50%; top: 50%; width: 128px; height: 22px; margin: 0;
    transform: translate(-50%, -50%) rotate(-90deg); cursor: pointer;
}
.tm-zslider:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
/* The app-wide slider identity (amber thumb) resized for the map's slim rail,
   with a track that stays visible on the dark scene. Selector carries the
   .ec-app prefix so it outweighs the global input[type="range"] rules. */
.ec-app .tm-zoom input[type="range"]::-webkit-slider-runnable-track {
    height: 4px; border-radius: 999px; background: rgba(125, 200, 205, 0.38);
}
.ec-app .tm-zoom input[type="range"]::-webkit-slider-thumb {
    width: 14px; height: 14px; margin-top: -5px;
    border: 2px solid #06222f; box-shadow: 0 0 7px rgba(251, 191, 36, 0.55);
}
.ec-app .tm-zoom input[type="range"]::-moz-range-track {
    height: 4px; border-radius: 999px; background: rgba(125, 200, 205, 0.38);
}
.ec-app .tm-zoom input[type="range"]::-moz-range-thumb {
    width: 11px; height: 11px; border: 2px solid #06222f;
    box-shadow: 0 0 7px rgba(251, 191, 36, 0.55);
}

/* ─────────────────────────────────────────────────────────────────────────
   Coming-soon sections (CPR / Aerosol–Cloud Interaction / MSI–AERONET)
   ───────────────────────────────────────────────────────────────────────── */

.ec-tab-soondot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #f59e0b;
    margin-left: 4px;
    vertical-align: 2px;
    animation: ecSoonPulse 2.4s ease-in-out infinite;
}

.ec-soon { display: flex; justify-content: center; padding: 4.5rem 1rem 5.5rem; }

.ec-soon-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(10, 143, 149, 0.14);
    border-radius: 20px;
    padding: 3.2rem 2.8rem 2.8rem;
    box-shadow: 0 24px 60px -30px rgba(4, 46, 51, 0.35);
    overflow: hidden;
}
.ec-soon-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0a8f95, #2dd1cf 55%, #67e8e2);
}
.ec-soon-card::after {
    content: "";
    position: absolute;
    top: -120px; left: 50%;
    transform: translateX(-50%);
    width: 360px; height: 250px;
    background: radial-gradient(closest-side, rgba(45, 209, 207, 0.13), transparent);
    pointer-events: none;
}

.ec-soon-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1.4rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 18px;
    background: linear-gradient(160deg, #ecfdfb, #cffbf6);
    border: 1px solid rgba(10, 143, 149, 0.18);
    color: #0a8f95;
    position: relative;
    z-index: 1;
}
.ec-soon-icon svg { width: 32px; height: 32px; }

.ec-soon-badge {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.66rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #0c7176;
    background: #ecfdfb;
    border: 1px solid rgba(10, 143, 149, 0.25);
    border-radius: 999px;
    padding: 0.3rem 0.85rem;
    margin-bottom: 1.1rem;
}
.ec-soon-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #13b3b5;
    animation: ecSoonPulse 2.4s ease-in-out infinite;
}
@keyframes ecSoonPulse {
    0%, 100% { opacity: 1;    box-shadow: 0 0 0 0 rgba(19, 179, 181, 0.35); }
    50%      { opacity: 0.55; box-shadow: 0 0 0 5px rgba(19, 179, 181, 0); }
}

.ec-soon-title {
    font-family: var(--font-display);
    font-size: 1.55rem; font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin-bottom: 0.65rem;
}
.ec-soon-tagline {
    color: #64748b;
    font-size: 0.92rem;
    line-height: 1.65;
    max-width: 46ch;
    margin: 0 auto 1.6rem;
}
.ec-soon-points { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.ec-soon-chip {
    font-size: 0.72rem; font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 0.32rem 0.8rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Point Profiles popup (point-profiles.js — created on <body>)
   ───────────────────────────────────────────────────────────────────────── */

.pp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 12, 14, 0.66);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s ease, visibility 0.28s ease;
}
.pp-backdrop.pp-active { opacity: 1; visibility: visible; }

.pp-modal {
    width: 100%;
    max-width: 1240px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform: scale(0.92) translateY(20px);
    opacity: 0;
    transition: transform 0.38s var(--ease-spring), opacity 0.26s ease;
}
.pp-backdrop.pp-active .pp-modal { transform: scale(1) translateY(0); opacity: 1; }

.pp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 20px;
    background: linear-gradient(135deg, #042e33 0%, #0a585f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pp-heading { min-width: 0; }
.pp-title {
    display: flex; align-items: center; gap: 9px;
    color: #e0fffb; font-size: 15px; font-weight: 700;
    letter-spacing: -0.01em; font-family: var(--font-display);
}
.pp-title svg { width: 19px; height: 19px; color: #5eead4; flex-shrink: 0; }
.pp-sub {
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(224, 255, 251, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-close {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: none; cursor: pointer;
    color: rgba(255, 255, 255, 0.65);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.pp-close svg { width: 15px; height: 15px; }
.pp-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.pp-body {
    flex: 1;
    min-height: 300px;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: #f8fafc;
}
.pp-body img {
    max-width: 100%;
    /* header + footer ≈ 130px: the whole figure stays visible, no scrolling */
    max-height: calc(92vh - 130px);
    width: auto;
    height: auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 24px -10px rgba(2, 44, 49, 0.35);
}

.pp-progress {
    display: flex; flex-direction: column; align-items: center;
    gap: 14px; padding: 40px 20px;
}
.pp-progress-text { font-size: 13px; color: #64748b; }
.pp-spinner {
    width: 34px; height: 34px;
    border: 4px solid #cbd5e1; border-top-color: #0a8f95;
    border-radius: 50%;
    animation: ppSpin 0.8s linear infinite;
}
@keyframes ppSpin { to { transform: rotate(360deg); } }

.pp-error {
    max-width: 640px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 16px 18px;
}
.pp-error-head { font-size: 14px; font-weight: 600; color: #b91c1c; margin-bottom: 6px; }
.pp-error-detail {
    font-family: var(--font-mono);
    font-size: 11px;
    color: #dc2626;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 200px;
    overflow: auto;
}

.pp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 20px;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}
.pp-hint { font-size: 11px; color: #94a3b8; }
.pp-download {
    display: none;
    background: #0a8f95;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s;
}
.pp-download:hover { background: #0c7176; }
.pp-download.pp-show { display: inline-block; }

/* ─────────────────────────────────────────────────────────────────────────
   Point Profiles inline panel (ATLID Analyse, below the redrawn overview)
   ───────────────────────────────────────────────────────────────────────── */

.pp-inline {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.pp-inline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #042e33 0%, #0a585f 100%);
}
.pp-inline-heading { min-width: 0; }
.pp-inline-title {
    display: flex; align-items: center; gap: 8px;
    color: #e0fffb; font-size: 14px; font-weight: 700;
    letter-spacing: -0.01em; font-family: var(--font-display);
}
.pp-inline-title svg { width: 17px; height: 17px; color: #5eead4; flex-shrink: 0; }
.pp-inline-sub {
    margin-top: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: rgba(224, 255, 251, 0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pp-inline-download {
    display: none;
    background: rgba(255, 255, 255, 0.13);
    color: #e0fffb;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}
.pp-inline-download:hover { background: rgba(255, 255, 255, 0.24); }
.pp-inline-download.pp-show { display: inline-block; }

.pp-inline-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 14px;
    overflow-x: auto;
    background: #f8fafc;
}
.pp-inline-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 24px -12px rgba(2, 44, 49, 0.35);
}
.pp-inline-body img.pp-zoom { cursor: zoom-in; }

.pp-inline-hint {
    padding: 8px 16px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}