/* MOONVIEW app.css — globe viewport, legend, mission cards; on the Gridtop skin (SATVIEW's) */

/* Gridtop-style scrollbars for menu + modal bodies */
.sv-menu::-webkit-scrollbar, .sv-modal-body::-webkit-scrollbar { width: 10px; }
.sv-menu::-webkit-scrollbar-track, .sv-modal-body::-webkit-scrollbar-track { background: #ECECEC; }
.sv-menu::-webkit-scrollbar-thumb, .sv-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #F4F4F4, #D9D9D9);
    border: 1px solid #C4C4C4;
    border-radius: 2px;
}

/* ---------- the globe: three stacked canvases (stars / WebGL / markers) ---------- */
.mv-host { position: absolute; inset: 0; }
.mv-globe { position: absolute; inset: 0; background: #10131C; touch-action: none; cursor: grab; }
.mv-globe:active { cursor: grabbing; }
.mv-globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mv-stars { z-index: 1; }
.mv-gl { z-index: 2; }
.mv-overlay { z-index: 3; }

/* the HUD, top-left this time (the legend lives at the foot) */
.sv-hud { left: 12px; top: 12px; bottom: auto; }

/* ---------- the legend — a silver chip row at the foot of the viewport ---------- */
.mv-legend {
    position: absolute;
    left: 12px; bottom: 12px; right: 12px;
    z-index: 850;
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px;
    padding: 5px 12px;
    background: linear-gradient(180deg, rgba(253, 253, 253, 0.94), rgba(232, 232, 232, 0.94));
    border: 1px solid var(--sv-btn-stroke);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 8px rgba(0, 0, 0, 0.4);
    user-select: none;
    font-size: 11px;
    color: var(--gt-ink);
}
.mv-lg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; }
.mv-lg.is-off { opacity: 0.38; text-decoration: line-through; }
.mv-lg-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #A99FFC; border: 1px solid rgba(29, 7, 14, 0.55);
}
.mv-lg[data-cls="crewed"] .mv-lg-dot { background: #FFEC64; }
.mv-lg-ring {
    width: 9px; height: 9px; border-radius: 50%;
    border: 1.8px solid #B9B1EA; background: transparent;
}
.mv-lg-x { font-size: 10px; line-height: 1; color: #FF6A6A; font-weight: 700; width: 9px; text-align: center; }
.mv-lg-diamond {
    width: 8px; height: 8px; transform: rotate(45deg);
    background: rgba(253, 253, 253, 0.92); border: 1px dashed #7F78C5;
}
.mv-lg-diamond.mv-lg-station { background: #CFC08A; border: 1px solid #7A6F1E; }

/* ---------- mission card ---------- */
.mv-card .mv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.mv-chip {
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
    padding: 2.5px 8px; border-radius: 2px;
    background: #F4F3FA; border: 1px solid var(--sv-btn-stroke); color: var(--gt-ink);
}
.mv-chip-cls { background: #FFF7C4; }
.mv-card p em { font-size: 12px; }

/* ---------- phones: the legend collapses to a toggle row ---------- */
@media (max-width: 760px) {
    .sv-topbar { gap: 5px; padding: 6px 8px; flex-wrap: wrap; }
    .sv-tb-divider { display: none; }
    .sv-dd-label { display: none; }
    .sv-dd { padding: 0 7px; gap: 5px; }
    .sv-dd-value { max-width: 92px; overflow: hidden; text-overflow: ellipsis; }
    .sv-cond-btn { padding: 0 8px; }
    .sv-status-right { display: none; }
    .mv-legend { gap: 3px 10px; font-size: 10px; padding: 4px 9px; }
    .sv-hud { top: auto; bottom: 44px; left: 8px; padding: 4px 8px; font-size: 10.5px; max-width: calc(100% - 16px); }
}

/* ---------- country chips: the filter at the top of the missions menu ---------- */
.mv-cc-strip {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 6px 10px 7px;
    border-bottom: 1px solid rgba(68, 70, 94, 0.14);
    background: linear-gradient(180deg, #FFFFFF, #F1F1F3);
}
.mv-cc {
    height: 20px; min-width: 34px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font: 700 9.5px/1 'Afacad', sans-serif; letter-spacing: 0.8px;
    color: var(--gt-ink);
    background: linear-gradient(180deg, #FFFFFF, #F0F0F0 45%, #D5D5D5);
    border: 1px solid var(--sv-btn-stroke); border-radius: 2px;
    box-shadow: inset 1px 1px 0 var(--sv-btn-hi), inset -1px -1px 0 var(--sv-btn-lo);
    cursor: pointer;
}
.mv-cc:hover { border-color: var(--gt-purple); color: #2E3050; }
.mv-cc.is-on {
    color: #6B5A12;
    background: linear-gradient(180deg, var(--sv-active-top), var(--sv-active-bot));
    border-color: var(--sv-active-stroke);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.08);
}

/* ---------- minimize: slim header bar + the window as a tab beneath it ---------- */
.mv-shadebar[hidden] { display: none; }
.mv-shadebar {
    position: fixed; top: 0; left: 0; right: 0; height: 26px; z-index: 9600;
    display: flex; align-items: center;
    padding: 0 12px;
    background: linear-gradient(180deg, var(--sv-face-top), var(--sv-face-bot));
    border-bottom: 1px solid #BDBDBD;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
    user-select: none;
}
.mv-shadebar::after {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9) 20%,
        rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0.85) 85%, transparent);
}
.mv-shadebar-title {
    font-size: 9.5px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--gt-ink-soft);
}
.mv-tab { position: fixed; top: 34px; left: 8px; z-index: 9600; }
.mv-tab-btn {
    height: 28px; display: inline-flex; align-items: center; gap: 8px;
    padding: 0 12px 0 10px;
    font: 600 12px/1 'Afacad', sans-serif; letter-spacing: 0.4px; color: var(--gt-ink);
    background: linear-gradient(180deg, #FFFFFF, #F0F0F0 45%, #D5D5D5);
    border: 1px solid var(--sv-btn-stroke); border-radius: 2px 2px 0 0;
    box-shadow: inset 1px 1px 0 var(--sv-btn-hi), inset -1px -1px 0 var(--sv-btn-lo), 0 2px 8px rgba(10, 11, 16, 0.45);
    cursor: pointer;
}
.mv-tab-btn:hover { border-color: var(--gt-purple); color: #2E3050; }
.mv-tab-btn:active { background: linear-gradient(180deg, var(--sv-active-top), var(--sv-active-bot)); }
.mv-tab-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: radial-gradient(circle at 34% 32%, #F4F4F6 0 18%, #B9B1EA 45%, #6F68A8 100%);
    border: 1px solid rgba(29, 7, 14, 0.4);
}
.mv-tab-restore { font-size: 9px; color: var(--gt-ink-soft); }