/* ============================================================
   tonights_sky.css — Tonight's Sky shared + page-specific CSS
   ============================================================ */

/* ── Reset & CSS Variables ─────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --sky-deep:     #060b1a;
    --sky-card:     #111827;
    --sky-border:   rgba(100, 149, 237, 0.15);
    --sky-border-h: rgba(100, 149, 237, 0.4);
    --blue:         #6495ed;
    --blue-dim:     rgba(100, 149, 237, 0.12);
    --blue-glow:    rgba(100, 149, 237, 0.25);
    --gold:         #f0c060;
    --gold-dim:     rgba(240, 192, 96, 0.12);
    --green:        #4ade80;
    --red:          #f87171;
    --text:         #dde4f0;
    --text-dim:     #7a8aaa;
    --text-dimmer:  #4a5570;
    --radius:       12px;
    --radius-sm:    8px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
    font-family: 'Outfit', sans-serif;
    background: var(--sky-deep);
    color: var(--text);
    min-height: 100vh;
    padding: 24px 16px 60px;
    background-image:
        radial-gradient(1px 1px at 15% 12%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 38% 7%,  rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 62% 19%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 81% 4%,  rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 14%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 7%  28%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 47% 31%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 73% 25%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(600px 400px at 30% 0%, rgba(100,149,237,0.06) 0%, transparent 70%),
        radial-gradient(400px 300px at 80% 5%, rgba(180,100,255,0.04) 0%, transparent 70%),
        linear-gradient(180deg, #060b1a 0%, #0a1020 40%, #0d1530 100%);
    background-attachment: fixed;
}

.container { max-width: 860px; margin: 0 auto; }

/* ── Header ────────────────────────────────────────────────────────────── */
header { text-align: center; padding: 32px 0 40px; }

.logo-mark {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.logo-icon {
    width: 48px; height: 48px;
    border-radius: 6px;
    flex-shrink: 0;
    overflow: hidden;
    /* Subtle blue glow to match the header's cornflower-blue palette */
    box-shadow: 0 0 18px rgba(100,149,237,0.35), 0 0 40px rgba(100,149,237,0.12);
}
.logo-icon img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.logo-text {
    font-size: 2.1em;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #fff;
    text-shadow: 0 0 30px rgba(100,149,237,0.4);
}
.logo-text span { color: var(--gold); }
.tagline { color: var(--text-dim); font-size: 1em; font-weight: 300; letter-spacing: 0.02em; }

/* ── Cards ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--sky-card);
    border: 1px solid var(--sky-border);
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.card:focus-within { border-color: var(--sky-border-h); }

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}
.card-header:hover { background: rgba(100,149,237,0.04); }

.card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1em;
    font-weight: 600;
    color: #fff;
}
.card-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: var(--blue-dim);
    border-radius: 8px;
    font-size: 1em;
    flex-shrink: 0;
}
.card-chevron {
    color: var(--text-dimmer);
    font-size: 0.75em;
    transition: transform 0.25s;
    flex-shrink: 0;
}
.card.collapsed .card-chevron { transform: rotate(-90deg); }
.card-body {
    padding: 4px 20px 20px;
    border-top: 1px solid var(--sky-border);
}
.card.collapsed .card-body { display: none; }

/* ── Map ───────────────────────────────────────────────────────────────── */
#map {
    height: 200px;
    border-radius: var(--radius-sm);
    margin-bottom: 14px;
    border: 1px solid var(--sky-border);
}

/* ── Form controls ─────────────────────────────────────────────────────── */
label.field-label {
    display: block;
    font-size: 0.75em;
    font-weight: 500;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 5px;
}
.label-row {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}
.label-row .field-label { margin-bottom: 0; }

input[type="text"],
input[type="number"],
input[type="date"],
select {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--sky-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 9px 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92em;
    transition: border-color 0.2s, background 0.2s;
    -webkit-appearance: none;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--blue);
    background: rgba(100,149,237,0.06);
}
select option { background: #1a2040; }

input.sqm-estimated {
    color: var(--text-dim);
    border-style: dashed;
}

.coords-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
@media (max-width: 500px) { .coords-row { grid-template-columns: 1fr 1fr; } }

/* ── Tooltips ──────────────────────────────────────────────────────────── */
.tip-wrap { position: relative; display: inline-flex; align-items: center; }
.tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: rgba(100,149,237,0.2);
    color: var(--blue);
    font-size: 0.65em;
    font-weight: 700;
    cursor: help;
    margin-left: 6px;
    flex-shrink: 0;
}
.tip-box {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #1a2540;
    border: 1px solid var(--sky-border-h);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text);
    width: 240px;
    line-height: 1.5;
    z-index: 2000;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.tip-wrap:hover .tip-box { display: block; }

/* ── Sliders ───────────────────────────────────────────────────────────── */
.slider-wrap { margin-bottom: 18px; }
.slider-wrap:last-child { margin-bottom: 0; }
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.slider-val {
    font-family: 'Space Mono', monospace;
    font-size: 0.85em;
    color: var(--blue);
    background: var(--blue-dim);
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 64px;
    text-align: center;
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(100,149,237,0.2);
    border-radius: 2px;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 8px var(--blue-glow);
    cursor: pointer;
    transition: transform 0.15s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

/* ── Equipment cards ───────────────────────────────────────────────────── */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
@media (max-width: 500px) { .equipment-grid { grid-template-columns: 1fr; } }

.equip-card {
    border: 2px solid var(--sky-border);
    border-radius: var(--radius-sm);
    padding: 14px 10px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}
.equip-card:hover { border-color: var(--sky-border-h); background: var(--blue-dim); }
.equip-card.active {
    border-color: var(--blue);
    background: var(--blue-dim);
    box-shadow: 0 0 12px var(--blue-glow);
}
.equip-card input { display: none; }
.equip-icon { font-size: 1.6em; margin-bottom: 6px; display: block; }
.equip-name { font-size: 0.85em; font-weight: 600; color: #fff; }
.equip-sub  { font-size: 0.72em; color: var(--text-dim); margin-top: 2px; }
.equip-detail { display: none; }
.equip-detail.visible { display: block; }

/* ── Object cards ──────────────────────────────────────────────────────── */
.section-label {
    font-size: 0.72em;
    font-weight: 600;
    color: var(--text-dimmer);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 18px 0 10px;
}
.section-label:first-child { margin-top: 0; }

.object-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}
@media (max-width: 600px) { .object-grid { grid-template-columns: repeat(2, 1fr); } }

.obj-card {
    border: 2px solid var(--sky-border);
    border-radius: var(--radius-sm);
    padding: 14px 12px 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
    user-select: none;
    position: relative;
}
.obj-card:hover { border-color: var(--sky-border-h); background: rgba(100,149,237,0.05); transform: translateY(-1px); }
.obj-card.active { border-color: var(--blue); background: var(--blue-dim); }
.obj-card input { display: none; }
.obj-emoji { font-size: 1.5em; display: block; margin-bottom: 6px; }
.obj-name  { font-size: 0.85em; font-weight: 600; color: #fff; display: block; }
.obj-sub   { font-size: 0.72em; color: var(--text-dim); margin-top: 2px; display: block; line-height: 1.3; }
.obj-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--blue);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.65em;
    color: #fff;
}
.obj-card.active .obj-check { display: flex; }

/* Solar pills */
.solar-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.solar-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    border: 2px solid var(--sky-border);
    border-radius: 100px;
    padding: 8px 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
    font-size: 0.85em;
    font-weight: 500;
}
.solar-pill:hover { border-color: var(--sky-border-h); background: var(--blue-dim); }
.solar-pill.active { border-color: var(--blue); background: var(--blue-dim); }
.solar-pill input { display: none; }

/* ── Depth cards ───────────────────────────────────────────────────────── */
.depth-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 6px;
}
@media (max-width: 480px) { .depth-row { grid-template-columns: 1fr; } }

.depth-card {
    border: 2px solid var(--sky-border);
    border-radius: var(--radius-sm);
    padding: 16px 14px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}
.depth-card:hover { border-color: var(--sky-border-h); }
.depth-card.active { border-color: var(--gold); background: var(--gold-dim); }
.depth-card input { display: none; }
.depth-dots { display: flex; gap: 3px; margin-bottom: 8px; }
.depth-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sky-border); }
.depth-card.active .depth-dot { background: var(--gold); }
.depth-name { font-size: 0.95em; font-weight: 700; color: #fff; margin-bottom: 5px; }
.depth-desc { font-size: 0.78em; color: var(--text-dim); line-height: 1.45; }
.depth-card.active .depth-desc { color: var(--text); }

/* ── Catalog override chips ────────────────────────────────────────────── */
.power-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dim);
    font-size: 0.82em;
    cursor: pointer;
    padding: 10px 0 0;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: color 0.2s;
}
.power-toggle:hover { color: var(--blue); }
.power-toggle-icon { transition: transform 0.25s; }
.power-toggle.open .power-toggle-icon { transform: rotate(90deg); }

.power-panel {
    display: none;
    margin-top: 14px;
    padding: 16px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--sky-border);
    border-radius: var(--radius-sm);
}
.power-panel.open { display: block; }

.catalog-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
    font-size: 0.75em;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid var(--sky-border);
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    font-family: 'Space Mono', monospace;
}
.cat-chip:hover { border-color: var(--sky-border-h); }
.cat-chip.only    { border-color: rgba(74,222,128,0.5);  background: rgba(74,222,128,0.1);  color: var(--green); }
.cat-chip.excluded{ border-color: rgba(248,113,113,0.5); background: rgba(248,113,113,0.1); color: var(--red); }

/* ── Toggle switch ─────────────────────────────────────────────────────── */
.toggle-switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { display: none; }
.toggle-track {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid var(--sky-border);
}
.toggle-track::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--blue); border-color: var(--blue); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }

/* ── Remember row ──────────────────────────────────────────────────────── */
.remember-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0 0;
}
.remember-label { font-size: 0.88em; color: var(--text-dim); cursor: pointer; }

/* ── Submit button ─────────────────────────────────────────────────────── */
.submit-btn {
    width: 100%;
    padding: 16px;
    margin-top: 20px;
    background: linear-gradient(135deg, #2a4a9f 0%, #1a3070 100%);
    border: 1px solid rgba(100,149,237,0.4);
    border-radius: var(--radius);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05em;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(100,149,237,0.2);
}
.submit-btn:hover {
    background: linear-gradient(135deg, #3a5abf 0%, #2a4090 100%);
    box-shadow: 0 4px 30px rgba(100,149,237,0.35);
    transform: translateY(-1px);
}
.submit-btn:active { transform: translateY(0); }

/* ── Error banner ──────────────────────────────────────────────────────── */
.error-banner {
    color: var(--red);
    font-size: 0.85em;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 8px;
    display: none;
}
.error-banner.visible { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   results.php specific styles
   ══════════════════════════════════════════════════════════════════════════ */

/* Override container width for results page */
.results-page .container { max-width: 1400px; }
.results-page body { padding: 20px; }

.loading {
    text-align: center;
    padding: 40px;
    font-size: 1.2em;
    color: #6495ff;
}

.error-box {
    background: rgba(200, 50, 50, 0.2);
    border: 1px solid rgba(200, 50, 50, 0.5);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    color: #ffaaaa;
}

/* ── Top bar (back + red screen toggle) ────────────────────────────────── */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}

.back-button {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(100, 150, 255, 0.12);
    border: 1px solid rgba(100, 150, 255, 0.25);
    border-radius: 8px;
    color: #6495ff;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}
.back-button:hover {
    background: rgba(100, 150, 255, 0.22);
    border-color: rgba(100, 150, 255, 0.45);
}

/* ── Red screen toggle ─────────────────────────────────────────────────── */
.red-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 60, 30, 0.3);
    background: rgba(255, 60, 30, 0.08);
    color: #ff6644;
    font-size: 0.88em;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
}
.red-toggle-wrap:hover {
    background: rgba(255, 60, 30, 0.15);
    border-color: rgba(255, 60, 30, 0.5);
}
.red-toggle-wrap input { display: none; }

.red-toggle-box {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255, 80, 40, 0.4);
    border-radius: 100px;
    transition: background 0.2s;
}
.red-toggle-box::after {
    content: '';
    position: absolute;
    width: 14px; height: 14px;
    background: #ff6644;
    border-radius: 50%;
    top: 2px; left: 2px;
    transition: transform 0.2s;
}
.red-toggle-wrap input:checked + .red-toggle-box {
    background: rgba(255, 40, 0, 0.5);
    border-color: #ff4400;
}
.red-toggle-wrap input:checked + .red-toggle-box::after {
    transform: translateX(16px);
    background: #ff2200;
}

/* ── Red screen mode overrides ─────────────────────────────────────────── */
body.redmode {
    background: #0a0000 !important;
    background-image: none !important;
    color: #aa2200 !important;
}
body.redmode * {
    color: #aa2200 !important;
    border-color: #3a0800 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.redmode .results-grid,
body.redmode .summary-bar,
body.redmode .export-overlay .export-modal,
body.redmode .detail-panel,
body.redmode table th {
    background-color: #0a0000 !important;
}
body.redmode table th { color: #881100 !important; }
body.redmode table tbody tr:hover { background-color: #1a0400 !important; }
body.redmode .filter-input,
body.redmode .filter-select {
    background-color: #0a0000 !important;
    color: #aa2200 !important;
}
body.redmode .filter-input::placeholder { color: #441100 !important; }
body.redmode .detail-panel { background-color: #060000 !important; }
body.redmode a { color: #882200 !important; }
body.redmode .red-toggle-wrap { border-color: #441100 !important; color: #882200 !important; }

/* ── Summary bar ───────────────────────────────────────────────────────── */
.summary-bar {
    background: rgba(30, 35, 55, 0.8);
    border: 1px solid rgba(100, 150, 255, 0.2);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
}
.summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
    gap: 12px;
}
.summary-header:hover { background: rgba(100,150,255,0.05); }
.summary-quick {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.summary-quick-item {
    display: flex;
    align-items: baseline;
    gap: 5px;
    white-space: nowrap;
}
.summary-quick-label { color: #888; font-size: 0.75em; text-transform: uppercase; letter-spacing: 0.04em; }
.summary-quick-value { color: #6495ff; font-size: 0.95em; font-weight: 600; }
.summary-toggle-icon { color: #555; font-size: 0.75em; flex-shrink: 0; transition: transform 0.25s; }
.summary-toggle-icon.open { transform: rotate(180deg); }

.summary {
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    padding: 0 16px 14px;
    border-top: 1px solid rgba(100,150,255,0.1);
}
.summary.open { display: grid; }
.summary-item { text-align: center; }
.summary-label { color: #888; font-size: 0.8em; margin-bottom: 3px; }
.summary-value { color: #6495ff; font-size: 1.1em; font-weight: 600; }

/* ── Results table ─────────────────────────────────────────────────────── */
.results-grid {
    background: rgba(30, 35, 55, 0.8);
    border: 1px solid rgba(100, 150, 255, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.table-scroll-wrapper {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
}

table { width: 100%; border-collapse: collapse; }

th {
    background: #1a2040;
    color: #6495ff;
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid rgba(100, 150, 255, 0.3);
    position: sticky;
    top: 0;
    z-index: 10;
}

td {
    padding: 10px 8px;
    border-bottom: 1px solid rgba(100, 150, 255, 0.1);
}

tr:hover { background: rgba(100, 150, 255, 0.05); }

/* RA/Dec toggle columns */
.coords-columns { display: none; }
.coords-columns.visible { display: table-cell; }

/* ── Object name cell ──────────────────────────────────────────────────── */
.object-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.primary-designation { font-weight: 600; color: #fff; }
.common-name { font-size: 0.85em; color: #aaa; font-style: italic; }

.distance-value { font-family: 'Courier New', monospace; }
.distance-unit  { color: #888; font-size: 0.85em; margin-left: 2px; }

.no-results {
    text-align: center;
    padding: 40px;
    color: #888;
    font-size: 1.1em;
}

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 14px;
}
.toolbar-left  { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }

.filter-input {
    background: rgba(20, 25, 40, 0.8);
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    padding: 7px 12px;
    font-size: 0.9em;
    outline: none;
    transition: border-color 0.2s;
}
.filter-input:focus { border-color: rgba(100, 150, 255, 0.7); }
.filter-input::placeholder { color: #555; }
#search-input { min-width: 200px; }

.filter-select {
    background: rgba(20, 25, 40, 0.8);
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-radius: 6px;
    color: #e0e0e0;
    padding: 7px 10px;
    font-size: 0.9em;
    outline: none;
    cursor: pointer;
    max-width: 160px;
    width: auto;
}
.filter-select option { background: #1a1f3a; }

.clear-btn {
    background: rgba(100, 150, 255, 0.1);
    border: 1px solid rgba(100, 150, 255, 0.2);
    border-radius: 6px;
    color: #6495ff;
    padding: 7px 14px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.clear-btn:hover { background: rgba(100, 150, 255, 0.2); }

.export-btn {
    background: rgba(100, 200, 130, 0.12);
    border: 1px solid rgba(100, 200, 130, 0.3);
    border-radius: 6px;
    color: #6dcf96;
    padding: 7px 14px;
    font-size: 0.85em;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-weight: 500;
}
.export-btn:hover {
    background: rgba(100, 200, 130, 0.22);
    border-color: rgba(100, 200, 130, 0.5);
}

.result-count { color: #888; font-size: 0.85em; white-space: nowrap; }
.result-count span { color: #6495ff; font-weight: 600; }

/* ── Sortable column headers ───────────────────────────────────────────── */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { background: #222a50; }
th.sortable::after { content: ' ⇅'; color: #444; font-size: 0.8em; }
th.sort-asc::after  { content: ' ↑'; color: #6495ff; }
th.sort-desc::after { content: ' ↓'; color: #6495ff; }

/* ── Coords toggle ─────────────────────────────────────────────────────── */
.coords-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: #6495ff;
    font-size: 0.9em;
    padding: 4px 8px;
    background: rgba(100, 150, 255, 0.1);
    border-radius: 4px;
    transition: all 0.2s;
}
.coords-toggle:hover { background: rgba(100, 150, 255, 0.2); }

/* ── Info icon ─────────────────────────────────────────────────────────── */
.info-icon {
    cursor: pointer;
    font-size: 1.1em;
    opacity: 0.7;
    transition: opacity 0.2s;
    margin-left: 6px;
    flex-shrink: 0;
}
.info-icon:hover { opacity: 1; }

/* ── Export modal ──────────────────────────────────────────────────────── */
.export-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 200;
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
}
.export-overlay.open { display: flex; }
.export-modal {
    background: #0e1428;
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-radius: 14px;
    padding: 28px;
    width: min(420px, 92vw);
    position: relative;
}
.export-modal h3 { color: #fff; font-size: 1.15em; margin-bottom: 6px; }
.export-modal p  { color: #888; font-size: 0.85em; margin-bottom: 20px; line-height: 1.5; }
.export-format-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.export-format-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px;
    background: rgba(100, 150, 255, 0.07);
    border: 2px solid rgba(100, 150, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    color: #e0e0e0;
}
.export-format-btn:hover {
    background: rgba(100, 150, 255, 0.15);
    border-color: rgba(100, 150, 255, 0.5);
}
.export-format-icon { font-size: 1.8em; }
.export-format-name { font-weight: 600; font-size: 0.95em; color: #fff; }
.export-format-desc { font-size: 0.78em; color: #888; text-align: center; line-height: 1.3; }
.export-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none; border: none;
    color: #888; font-size: 1.4em;
    cursor: pointer; padding: 4px 8px;
}
.export-close:hover { color: #fff; }
.export-count-note { text-align: center; color: #6495ff; font-size: 0.82em; margin-top: -8px; }

/* ── Detail panel ──────────────────────────────────────────────────────── */
.detail-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    backdrop-filter: blur(2px);
}
.detail-overlay.open { display: block; }

.detail-panel {
    position: fixed;
    background: #0e1428;
    border: 1px solid rgba(100, 150, 255, 0.25);
    z-index: 101;
    overflow-y: auto;
    transition: transform 0.3s ease;
}

@media (max-width: 767px) {
    .detail-panel {
        bottom: 0; left: 0; right: 0;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        padding: 20px 16px;
    }
    .detail-panel.open { transform: translateY(0); }
    .detail-drag-handle {
        width: 40px; height: 4px;
        background: rgba(100,150,255,0.4);
        border-radius: 2px;
        margin: 0 auto 16px;
    }
}

@media (min-width: 768px) {
    .detail-panel {
        top: 0; right: 0; bottom: 0;
        width: 360px;
        border-radius: 0;
        transform: translateX(100%);
        padding: 24px;
        border-left: 1px solid rgba(100,150,255,0.25);
        border-top: none; border-right: none; border-bottom: none;
    }
    .detail-panel.open { transform: translateX(0); }
    .detail-drag-handle { display: none; }
}

.detail-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none; border: none;
    color: #888; font-size: 1.4em;
    cursor: pointer; line-height: 1;
    padding: 4px 8px;
}
.detail-close:hover { color: #fff; }

.detail-title { font-size: 1.3em; font-weight: 700; color: #fff; margin-bottom: 2px; padding-right: 30px; }
.detail-subtitle { color: #6495ff; font-size: 0.9em; margin-bottom: 16px; }

.detail-section {
    margin-bottom: 16px;
    border-top: 1px solid rgba(100,150,255,0.1);
    padding-top: 12px;
}
.detail-section:first-of-type { border-top: none; padding-top: 0; }
.detail-section-title {
    color: #6495ff;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    font-weight: 600;
}

.detail-props { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.detail-prop  { display: flex; flex-direction: column; gap: 2px; }
.detail-prop-label { color: #888; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.04em; }
.detail-prop-value { color: #e0e0e0; font-size: 0.95em; }

/* Designations */
.detail-designations { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.detail-desig-badge {
    background: rgba(100,150,255,0.12);
    border: 1px solid rgba(100,150,255,0.25);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.85em;
    color: #a0b8ff;
}

/* Designation grouped list */
.desig-list { display: flex; flex-direction: column; gap: 4px; }
.desig-group { display: flex; gap: 8px; align-items: baseline; font-size: 0.88em; }
.desig-prefix {
    color: #6495ff;
    font-weight: 600;
    min-width: 40px;
    font-family: 'Space Mono', monospace;
    font-size: 0.9em;
}
.desig-values { color: #c0cce0; line-height: 1.5; }
.desig-loading { color: var(--text-dimmer); font-style: italic; font-size: 0.88em; }

/* External links */
.detail-links  { display: flex; flex-direction: column; gap: 8px; }
.detail-link {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: rgba(100,150,255,0.07);
    border: 1px solid rgba(100,150,255,0.15);
    border-radius: 8px;
    color: #a0b8ff;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.2s;
}
.detail-link:hover {
    background: rgba(100,150,255,0.15);
    border-color: rgba(100,150,255,0.35);
    color: #fff;
}
.detail-link-icon { font-size: 1.1em; flex-shrink: 0; }
.detail-link-text { display: flex; flex-direction: column; gap: 1px; }
.detail-link-name { font-weight: 600; }
.detail-link-desc { font-size: 0.8em; color: #888; }

/* Dreyer description */
.detail-dreyer {
    font-style: italic;
    color: #aaa;
    font-size: 0.88em;
    line-height: 1.5;
    background: rgba(100,150,255,0.05);
    border-left: 2px solid rgba(100,150,255,0.3);
    padding: 8px 12px;
    border-radius: 0 4px 4px 0;
}

/* Altitude graph */
.alt-graph-wrap { margin-top: 12px; }
.alt-graph-loading { color: var(--text-dimmer); font-size: 0.85em; font-style: italic; }
#alt-graph-svg { width: 100%; border-radius: 4px; }

/* ── Mobile responsive ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body { padding: 10px; }

    .mobile-hidden { display: none !important; }

    .toolbar { flex-direction: column; gap: 6px; }
    .toolbar-left { flex-wrap: wrap; }
    #search-input { min-width: 0; width: 100%; }

    tr.expandable { cursor: pointer; }
    tr.expandable td:first-child::before {
        content: '▶ ';
        font-size: 0.7em;
        color: #6495ff;
        transition: transform 0.2s;
        display: inline-block;
    }
    tr.expandable.expanded td:first-child::before { content: '▼ '; }

    .row-detail-tr { background: rgba(20, 30, 60, 0.95); }
    .row-detail-tr td {
        padding: 10px 14px;
        border-bottom: 2px solid rgba(100, 150, 255, 0.2);
    }
    .row-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        font-size: 0.9em;
    }
    .row-detail-item { display: flex; flex-direction: column; gap: 2px; }
    .row-detail-label { color: #888; font-size: 0.8em; text-transform: uppercase; letter-spacing: 0.05em; }
    .row-detail-value { color: #e0e0e0; font-weight: 500; }
}
/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    margin-top: 60px;
    padding: 28px 16px;
    border-top: 1px solid var(--sky-border);
    text-align: center;
}
.site-footer nav {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.site-footer nav a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.88em;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}
.site-footer nav a:hover { color: var(--blue); }
.site-footer .footer-copy {
    color: var(--text-dimmer);
    font-size: 0.78em;
}
.site-footer .footer-legacy {
    font-size: 0.78em;
    color: var(--text-dimmer);
    margin-bottom: 6px;
}
.site-footer .footer-legacy a {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-dimmer);
}
.site-footer .footer-legacy a:hover {
    color: var(--blue);
    border-bottom-color: var(--blue);
}
.site-footer .footer-legacy span {
    color: var(--text-dimmer);
    font-style: italic;
}

/* ── Footer PayPal support button ───────────────────────────────────────── */
.footer-support-form { display: inline; }
.footer-support-btn {
    background: none;
    border: none;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 0.88em;
    letter-spacing: 0.04em;
    color: var(--gold);
    cursor: pointer;
    transition: color 0.2s;
}
.footer-support-btn:hover { color: #fff; }

/* ── Header support button ───────────────────────────────────────────────── */
/* Header becomes a flex row: logo-mark left, support right                  */
header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
/* Re-center the logo+tagline block as before */
.header-brand {
    flex: 1;
    text-align: center;
}
.header-support-form { display: inline; }
.header-support-btn {
    background: none;
    border: 1px solid rgba(240,192,96,0.3);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.8em;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--gold);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
    margin-top: 6px;   /* align roughly with logo top */
}
.header-support-btn:hover {
    background: var(--gold-dim);
    border-color: var(--gold);
}
/* Spacer div mirrors the support button width on the left so the
   brand block stays visually centred */
.header-spacer {
    flex: 0 0 auto;
    min-width: 120px;   /* approximate button width */
}