/* ============================================================
   LaunchDetect Mobile CSS
   Scoped to ≤899px (portrait phones + narrow tablets) OR
   landscape phones (orientation:landscape AND max-height:500px).
   This ensures phones rotated to landscape still get mobile UI
   instead of falling through to the desktop grid layout.
   Desktop at >=900px portrait is UNTOUCHED.
   ============================================================ */

@media (max-width: 899px), (orientation: landscape) and (max-height: 500px) {

  /* ─────────────────────────────────────────────────────────
     1. FOUNDATION — Globe is fixed full-viewport, chrome floats above
     ───────────────────────────────────────────────────────── */
  .command-post {
    display: block !important;
    height: 100vh !important;
    height: 100dvh !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
  }
  #cesiumContainer {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1 !important;
  }
  .theater-panel {
    position: static !important;
    grid-column: auto !important;
  }

  /* Hide panels that don't belong on mobile (moved to sheets/drawer) */
  .notso-panel { display: none !important; }
  .stream-panel { display: none !important; }
  .timeline-panel { display: none !important; }
  .theater-toggle-bar { display: none !important; }
  .schema-sidebar { display: none !important; }
  .view-tabs { display: none !important; }
  #baseline-toggles { display: none !important; }
  #live-raster-status { display: none !important; }

  /* Hide the old buggy bottom sheet entirely — replaced by Phase 3 sheets */
  .mobile-bottom-sheet { display: none !important; }

  /* Hide the quick-fix detail panel overlay — replaced by Phase 4 detail sheet */
  .detail-panel { display: none !important; }

  /* ─────────────────────────────────────────────────────────
     2. HEADER — 44px, hamburger + logo + ARTEMIS II + clock
     ───────────────────────────────────────────────────────── */
  .header {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(6, 10, 20, 0.92) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--bulkhead);
  }
  .header-brand { flex-shrink: 1; min-width: 0; }
  .header-title-main { font-size: 13px !important; letter-spacing: 0.5px !important; }
  /* Hide desktop clutter */
  .header-socials { display: none !important; }
  #viewer-count { display: none !important; }
  .lang-toggle { display: none !important; }
  .clock-date { display: none !important; }
  .clock-segment-utc { display: none !important; }
  .header-clock > .clock-dot { display: none !important; }
  .header-clock { font-size: 10px !important; flex-shrink: 0; margin-left: 4px; }

  /* Hamburger — mobile-only, 44×44 touch target */
  .notso-toggle-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid var(--bulkhead);
    border-radius: 6px;
    color: var(--platinum);
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
  }
  .notso-toggle-btn:hover,
  .notso-toggle-btn:active { border-color: var(--command); color: var(--command); }

  /* ARTEMIS II button — compact but still prominent */
  #tour-trigger-btn {
    padding: 6px 10px !important;
    font-size: 10px !important;
    margin-right: 0 !important;
    margin-left: auto !important;
    letter-spacing: 0.3px !important;
  }

  /* ─────────────────────────────────────────────────────────
     3. BOTTOM STRIP — persistent, 56px, pull-up to events
     ───────────────────────────────────────────────────────── */
  #mobile-strip {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    background: rgba(6, 10, 20, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--bulkhead);
    z-index: 90;
    cursor: pointer;
    color: var(--platinum);
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: 0.3px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-strip:active { background: rgba(11, 17, 32, 0.98); }
  .mobile-strip-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
  .mobile-strip-chevron {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(74, 158, 255, 0.12);
    color: var(--command); font-size: 12px;
    flex-shrink: 0;
  }
  .mobile-strip-live {
    color: var(--nominal);
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .mobile-strip-divider { color: var(--slate); margin: 0 6px; }
  .mobile-strip-next { color: var(--steel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-strip-count {
    color: var(--command);
    font-weight: 600;
    font-size: 11px;
  }

  /* ─────────────────────────────────────────────────────────
     4. COMMON SHEET STYLING
     ───────────────────────────────────────────────────────── */
  .m-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: rgba(6, 10, 20, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--bulkhead);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.6);
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .m-sheet.m-open { transform: translateY(0); }
  .m-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
  }
  .m-sheet-handle {
    position: absolute;
    top: 6px; left: 50%;
    transform: translateX(-50%);
    width: 36px; height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
  }
  .m-sheet-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--platinum);
    text-transform: uppercase;
  }
  .m-sheet-close {
    min-width: 44px; min-height: 44px;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--bulkhead);
    border-radius: 8px;
    color: var(--platinum);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .m-sheet-back {
    min-width: 44px; min-height: 44px;
    background: transparent;
    border: none;
    color: var(--command);
    font-family: var(--font-data);
    font-size: 13px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .m-sheet-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px 14px 90px;
  }

  /* ─────────────────────────────────────────────────────────
     5. EVENTS SHEET
     ───────────────────────────────────────────────────────── */
  #mobile-events-sheet {
    display: flex !important;
    max-height: 78vh;
    max-height: 78dvh;
  }
  .m-events-filters {
    display: flex;
    gap: 8px;
    padding: 10px 14px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
  }
  .m-filter-chip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--steel);
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.15s;
  }
  .m-filter-icon { font-size: 16px; line-height: 1; }
  .m-filter-chip.active {
    background: rgba(74, 158, 255, 0.12);
    border-color: rgba(74, 158, 255, 0.4);
    color: #60A5FA;
  }
  .m-filter-chip[data-m-filter="live"].active {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.4);
    color: #F87171;
  }
  .m-filter-chip[data-m-filter="past"].active {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.4);
    color: #34D399;
  }
  .m-filter-chip-count {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 11px;
    font-family: var(--font-data);
    font-weight: 700;
  }
  .m-filter-chip.active .m-filter-chip-count {
    background: rgba(255, 255, 255, 0.1);
  }
  #m-events-list {
    padding: 8px 10px;
  }
  #m-events-list .notso-card {
    margin-bottom: 8px;
    min-height: 64px;
  }
  #m-events-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--slate);
    font-family: var(--font-data);
    font-size: 12px;
    display: none;
  }
  .m-empty-title { color: #CBD5E1; font-family: var(--font-display); font-weight: 700; }
  .m-empty-cta { color: #60A5FA; font-size: 11px; }
  @keyframes m-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
  }
  #m-events-list:empty + #m-events-empty { display: block; }

  /* ─────────────────────────────────────────────────────────
     6. DETAIL SHEET
     ───────────────────────────────────────────────────────── */
  #mobile-detail-sheet {
    display: flex !important;
    max-height: 62vh;
    max-height: 62dvh;
  }
  .m-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 14px 12px;
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--steel);
  }
  .m-detail-meta strong { color: var(--platinum); font-weight: 600; }
  .m-detail-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: rgba(74, 158, 255, 0.14);
    color: var(--command);
    border: 1px solid rgba(74, 158, 255, 0.3);
  }
  .m-detail-status.status-contact { background: rgba(16, 185, 129, 0.14); color: var(--nominal); border-color: rgba(16, 185, 129, 0.3); }
  .m-detail-status.status-sensors { background: rgba(245, 158, 11, 0.14); color: #F59E0B; border-color: rgba(245, 158, 11, 0.3); }

  /* The scrubber/chart are moved from #site-explorer-session into #mobile-detail-host */
  #mobile-detail-host {
    padding: 0;
  }
  /* Make sure moved desktop panels render full-width in the sheet */
  #mobile-detail-host > * { max-width: 100% !important; width: 100% !important; }
  /* Bigger tap targets for scrubber controls inside the sheet */
  #mobile-detail-host .scan-arrow {
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 18px !important;
  }
  #mobile-detail-host .scan-scrubber { padding: 10px 8px !important; }

  /* ─────────────────────────────────────────────────────────
     7. LAYERS FAB + SHEET
     ───────────────────────────────────────────────────────── */
  #mobile-layers-fab {
    display: flex !important;
    position: fixed;
    right: 16px;
    bottom: 72px; /* above the 56px strip + 16px gap */
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(74, 158, 255, 0.92);
    color: white;
    border: none;
    box-shadow: 0 4px 18px rgba(74, 158, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 95;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-layers-fab:active { transform: scale(0.95); }
  #mobile-layers-fab svg { width: 24px; height: 24px; }

  #mobile-layers-sheet {
    display: flex !important;
    max-height: 58vh;
    max-height: 58dvh;
  }
  .m-layers-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
  }
  .m-layer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--bulkhead);
    border-radius: 10px;
    cursor: pointer;
  }
  .m-layer-row:active { background: rgba(255, 255, 255, 0.06); }
  .m-layer-label {
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--platinum);
    flex: 1;
  }
  .m-layer-toggle {
    width: 44px; height: 26px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .m-layer-toggle::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: white;
    transition: transform 0.2s;
  }
  .m-layer-row.active .m-layer-toggle {
    background: var(--command);
  }
  .m-layer-row.active .m-layer-toggle::after {
    transform: translateX(18px);
  }

  /* Chevron for rows that drill into a sub-view (e.g. Satellites → categories) */
  .m-layer-chevron {
    font-size: 14px;
    color: var(--slate);
    padding: 0 4px;
    min-width: 24px;
    text-align: right;
    flex-shrink: 0;
  }

  /* ─────────────────────────────────────────────────────────
     7b. SATELLITES DRILL-DOWN — CelesTrak category filters
     ───────────────────────────────────────────────────────── */
  .m-sheet-header .m-sheet-back {
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: var(--command);
    font-family: var(--font-data);
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 8px 10px 8px 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .m-sheet-header .m-sheet-back:active { color: var(--platinum); }

  .m-sat-master {
    border-color: rgba(74, 158, 255, 0.35) !important;
    background: rgba(74, 158, 255, 0.05) !important;
    margin-bottom: 6px;
  }

  /* Community drill-down segmented control (Off / Pins / Heat / Both) */
  .m-cf-row {
    min-height: 56px;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .m-cf-row .m-sat-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .m-cf-row .m-sat-cat-count {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--slate);
    min-width: 24px;
    text-align: right;
    flex-shrink: 0;
  }
  .m-cf-seg {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: rgba(11, 20, 40, 0.65);
    border: 1px solid rgba(74, 158, 255, 0.2);
    border-radius: 8px;
    flex-shrink: 0;
  }
  .m-cf-seg-btn {
    background: transparent;
    border: 0;
    color: var(--steel, #98a4b6);
    font-family: var(--font-data, inherit);
    font-size: 10px;
    font-weight: 700;
    padding: 7px 10px;
    min-width: 38px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: 0.3px;
  }
  .m-cf-seg-btn.active {
    background: rgba(74, 158, 255, 0.26);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(74, 158, 255, 0.45);
  }
  .m-cf-seg-btn:active { transform: scale(0.95); }

  /* Category row: row tap toggles, "Only" chip solos */
  .m-sat-cat-row {
    min-height: 56px;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
  .m-sat-cat-row .m-sat-swatch {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .m-sat-cat-row .m-sat-cat-count {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--slate);
    min-width: 42px;
    text-align: right;
    flex-shrink: 0;
  }
  .m-sat-cat-row .m-sat-solo-chip {
    min-width: 44px;
    min-height: 44px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--bulkhead);
    border-radius: 8px;
    color: var(--steel);
    font-family: var(--font-data);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .m-sat-cat-row .m-sat-solo-chip:active {
    background: rgba(74, 158, 255, 0.15);
    border-color: var(--command);
    color: var(--command);
  }

  /* Free-tier upgrade call-to-action inside the Satellites sub-sheet */
  .m-sat-locked-cta {
    margin: 16px 4px 4px;
    padding: 20px 18px 18px;
    border: 1px solid rgba(74, 158, 255, 0.35);
    border-radius: 12px;
    background: rgba(74, 158, 255, 0.06);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .m-sat-locked-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 2px;
  }
  .m-sat-locked-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--platinum);
    text-transform: uppercase;
  }
  .m-sat-locked-body {
    font-family: var(--font-data);
    font-size: 12px;
    line-height: 1.45;
    color: var(--steel);
    max-width: 320px;
  }
  .m-sat-locked-btn {
    min-height: 48px;
    padding: 0 22px;
    margin-top: 6px;
    background: var(--command);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-sat-locked-btn:active { opacity: 0.85; transform: scale(0.98); }

  /* ─────────────────────────────────────────────────────────
     8. DELIVERED TO ORBIT — Mobile detail sheet section
     ───────────────────────────────────────────────────────── */
  .m-d2o-container {
    padding: 0 14px 20px;
  }
  .m-d2o-container:empty { display: none; }
  .m-d2o-inner {
    margin-top: 14px;
    padding: 12px 14px 14px;
    border: 1px solid var(--bulkhead);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
  }
  .m-d2o-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 10px;
  }
  .m-d2o-title {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--command);
  }
  .m-d2o-confidence {
    font-family: var(--font-data);
    font-size: 10px;
    color: var(--slate);
  }
  .m-d2o-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0;
    color: var(--slate);
    font-family: var(--font-data);
    font-size: 12px;
  }
  .m-d2o-loader::before {
    content: '';
    width: 14px; height: 14px;
    border: 1.5px solid var(--bulkhead);
    border-top-color: var(--command);
    border-radius: 50%;
    animation: m-d2o-spin 0.8s linear infinite;
  }
  @keyframes m-d2o-spin { to { transform: rotate(360deg); } }

  .m-d2o-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0 10px;
  }
  .m-d2o-count {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 800;
    color: var(--nominal);
    line-height: 1;
    min-width: 60px;
    text-align: center;
  }
  .m-d2o-count-label {
    flex: 1;
    font-family: var(--font-data);
    font-size: 14px;
    font-weight: 600;
    color: var(--platinum);
    line-height: 1.3;
  }
  .m-d2o-count-label span {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--steel);
    margin-top: 3px;
  }

  .m-d2o-toggle-row {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 8px 0;
    margin: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .m-d2o-toggle-label {
    flex: 1;
    font-family: var(--font-data);
    font-size: 13px;
    color: var(--platinum);
  }
  .m-d2o-switch {
    width: 44px; height: 26px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.12);
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-d2o-switch::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: white;
    transition: transform 0.2s;
  }
  .m-d2o-switch.on { background: var(--command); }
  .m-d2o-switch.on::after { transform: translateX(18px); }

  .m-d2o-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
  }
  .m-d2o-payload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--bulkhead);
    border-radius: 8px;
  }
  .m-d2o-payload-name {
    flex: 1;
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    color: var(--platinum);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-d2o-payload-norad {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--slate);
    min-width: 56px;
    text-align: right;
    flex-shrink: 0;
  }
  .m-d2o-track-btn {
    min-width: 56px;
    min-height: 44px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid var(--bulkhead);
    color: var(--command);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .m-d2o-track-btn:active {
    background: rgba(74, 158, 255, 0.15);
    border-color: var(--command);
  }
  .m-d2o-more {
    font-family: var(--font-data);
    font-size: 11px;
    color: var(--slate);
    text-align: center;
    padding: 8px 0;
    font-style: italic;
  }

  .m-d2o-state {
    padding: 14px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
  }
  .m-d2o-state-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  .m-d2o-state-reason {
    font-family: var(--font-data);
    font-size: 12px;
    color: var(--steel);
    line-height: 1.4;
  }
  .m-d2o-state--catalog-pending { border-left: 3px solid var(--threat-warning); }
  .m-d2o-state--catalog-pending .m-d2o-state-title { color: var(--threat-warning); }
  .m-d2o-state--beyond-earth { border-left: 3px solid #A78BFA; }
  .m-d2o-state--beyond-earth .m-d2o-state-title { color: #A78BFA; }
  .m-d2o-state--classified { border-left: 3px solid #EF4444; }
  .m-d2o-state--classified .m-d2o-state-title { color: #EF4444; }
  .m-d2o-state--not-found { border-left: 3px solid var(--slate); }
  .m-d2o-state--not-found .m-d2o-state-title { color: var(--slate); }

  .m-d2o-locked {
    padding: 22px 18px;
    text-align: center;
    background: rgba(74, 158, 255, 0.05);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 10px;
  }
  .m-d2o-locked-icon { font-size: 28px; line-height: 1; margin-bottom: 8px; }
  .m-d2o-locked-title {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--platinum);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .m-d2o-locked-body {
    font-family: var(--font-data);
    font-size: 12px;
    line-height: 1.45;
    color: var(--steel);
    margin-bottom: 14px;
  }
  .m-d2o-locked-btn {
    min-height: 48px;
    padding: 0 24px;
    background: var(--command);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-d2o-locked-btn:active { opacity: 0.85; transform: scale(0.98); }

  /* ─────────────────────────────────────────────────────────
     8. TABS DRAWER (left slide-out)
     ───────────────────────────────────────────────────────── */
  #mobile-tabs-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 299;
    pointer-events: none;
    transition: background 0.25s;
  }
  #mobile-tabs-backdrop.m-open {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
  }
  #mobile-tabs-drawer {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 280px;
    max-width: 86vw;
    background: rgba(6, 10, 20, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-right: 1px solid var(--bulkhead);
    z-index: 300;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-direction: column;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  #mobile-tabs-drawer.m-open { transform: translateX(0); }
  .m-drawer-header {
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .m-drawer-brand {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    color: white;
    letter-spacing: 1.5px;
  }
  .m-drawer-close {
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid var(--bulkhead);
    border-radius: 6px;
    color: var(--platinum);
    font-size: 18px;
    cursor: pointer;
  }
  .m-drawer-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
  }
  .m-drawer-section-label {
    font-family: var(--font-data);
    font-size: 9px;
    font-weight: 600;
    color: var(--slate);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 10px 6px 4px;
  }
  .m-drawer-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--platinum);
    font-family: var(--font-data);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    margin-bottom: 2px;
  }
  .m-drawer-tab:active { background: rgba(255, 255, 255, 0.05); }
  .m-drawer-tab.active {
    background: rgba(74, 158, 255, 0.12);
    color: var(--command);
    font-weight: 600;
  }
  .m-drawer-tab-icon { font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
  .m-drawer-footer {
    padding: 14px 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .m-drawer-socials {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  .m-drawer-socials a {
    width: 32px; height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C7D1DE;
    border: 1px solid var(--bulkhead);
    border-radius: 6px;
    text-decoration: none;
  }
  .m-drawer-socials a:hover { color: #FFFFFF; border-color: rgba(199, 209, 222, 0.4); }
  .m-drawer-socials svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
    fill: currentColor;
  }
  .m-drawer-socials svg path { fill: currentColor; }

  /* ─────────────────────────────────────────────────────────
     9. .stm-view PANELS — scrollable fixed overlay between header and strip
     ─────────────────────────────────────────────────────────
     Desktop puts these panels into the .command-post CSS grid via
     `grid-column: 1 / -1; grid-row: 4 / 6;`. On mobile we forced
     .command-post to display: block, so the grid positioning is dead
     and the panels become natural-height block children with no scroll
     context. Result: tabs like Account / Launch Sites / Predictions
     would not scroll. Fix: make active stm-view panels a fixed overlay
     that fills the area between the 44px header and the 56px strip.
   */
  .stm-view {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .stm-view.stm-view--active {
    position: fixed !important;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 56px;
    width: 100% !important;
    height: auto !important;
    padding: 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    background: var(--void) !important;
    z-index: 50; /* above Cesium (1), below strip (90), FAB (95), header (100), sheets (200), drawer (300) */
  }

  /* ─────────────────────────────────────────────────────────
     9b. VIEW-HEADER — hide on mobile (user already knows which tab they tapped)
     ───────────────────────────────────────────────────────── */
  .view-header {
    display: none;
  }

  /* ─────────────────────────────────────────────────────────
     10. TOUR (Artemis II demo) — TOR-02: tour supersedes ALL mobile chrome
     ───────────────────────────────────────────────────────── */
  body.tour-active #mobile-strip,
  body.tour-active #mobile-events-sheet,
  body.tour-active #mobile-detail-sheet,
  body.tour-active #mobile-layers-fab,
  body.tour-active #mobile-layers-sheet,
  body.tour-active #mobile-tabs-drawer,
  body.tour-active #mobile-tabs-backdrop {
    display: none !important;
  }

  /* Mobile-only tour HUD collapse toggle. Injected by mobile.js into
     #tour-overlay when body.tour-active. Lives at bottom-right corner so it
     sits in the same horizontal band as the centered #tour-nav (back / step /
     next), which is bottom:12 on mobile. Stays available even on the first
     and last steps where #tour-nav is hidden by guided-tour.js. */
  #mobile-tour-collapse {
    position: absolute;
    bottom: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: rgba(6, 10, 20, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: white;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: auto;
  }
  #mobile-tour-collapse:active {
    background: rgba(74, 158, 255, 0.4);
    border-color: var(--command);
  }

  /* Collapsed state — hide the HUD text + nav + step label, leaving only
     the close button and the collapse toggle. The overlay's existing
     `pointer-events: none` rule means once the HUD is hidden the user can
     tap straight through to the globe behind. */
  body.tour-active #tour-overlay.mobile-collapsed .tour-hud,
  body.tour-active #tour-overlay.mobile-collapsed #tour-nav {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────────
     Account profile bar — prevent SIGN OUT button overflow
     ─────────────────────────────────────────────────────────
     Bug: Cognito username (sub UUID) is long and pushes the
     SIGN OUT button off the right edge of its parent flex row,
     causing the button text to wrap and clip. Fix by forcing
     the name column to shrink/ellipsis and pinning the button
     to its intrinsic width. Works in both light and dark mode.
     ───────────────────────────────────────────────────────── */
  #acct-profile > div {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }
  /* The name+email wrapper is the flex:1 child — let it shrink */
  #acct-profile > div > div:nth-child(2) {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #acct-profile #acct-name,
  #acct-profile #acct-email {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }
  /* Tier badge + sign-out button: never shrink, never wrap */
  #acct-profile #acct-tier-badge,
  #acct-profile #acct-logout-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  /* On very narrow screens tighten the gap + button padding so both
     the GOLD badge and SIGN OUT button still fit beside a truncated
     name without wrapping the row. */
  @media (max-width: 420px) {
    #acct-profile > div {
      gap: 10px !important;
      padding: 16px 16px !important;
    }
    #acct-profile #acct-logout-btn {
      padding: 8px 12px !important;
    }
    #acct-profile #acct-tier-badge {
      padding: 6px 12px !important;
    }
  }

}

/* ============================================================
   LANDSCAPE PHONES — tighter chrome to reclaim vertical space.
   Portrait: 44px header + 56px strip = 100px chrome.
   Landscape: 34px header + 44px strip = 78px chrome (saves 22px).
   ============================================================ */
@media (orientation: landscape) and (max-height: 500px) {
  .header {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
  }
  .header-title-main { font-size: 11px !important; }
  .header-clock { font-size: 9px !important; }
  .notso-toggle-btn { width: 34px; height: 34px; font-size: 16px; }
  #tour-trigger-btn { padding: 4px 8px !important; font-size: 9px !important; }

  #mobile-strip {
    height: 44px;
    padding: 0 12px;
    font-size: 11px;
  }
  .mobile-strip-chevron { width: 24px; height: 24px; font-size: 10px; }

  /* Adjust fixed panel positioning for shorter chrome */
  .stm-view.stm-view--active {
    top: 34px;
    bottom: 44px;
  }

  /* Layers FAB closer to shorter strip */
  #mobile-layers-fab {
    bottom: 56px;
    width: 48px; height: 48px;
  }
  #mobile-layers-fab svg { width: 20px; height: 20px; }

  /* Sheets: cap shorter since viewport is only ~380px tall */
  #mobile-events-sheet { max-height: 72vh; max-height: 72dvh; }
  #mobile-detail-sheet { max-height: 56vh; max-height: 56dvh; }
  #mobile-layers-sheet { max-height: 52vh; max-height: 52dvh; }

  /* Sheet content: less bottom padding */
  .m-sheet-content { padding-bottom: 50px; }
}

/* Default hide of mobile-only elements on desktop */
#mobile-strip { display: none; }
#mobile-events-sheet { display: none; }
#mobile-detail-sheet { display: none; }
#mobile-layers-sheet { display: none; }
#mobile-layers-fab { display: none; }
#mobile-tabs-drawer { display: none; }
#mobile-tabs-backdrop { display: none; }