/* Enhanced Amazon-Aligned Space Theme CSS */
/* Self-hosted KDS Ember brand fonts (woff2 vendored from
   @amzn/kds-web-design-system, which doesn't ship fonts in its tarball). */
@import url("./fonts/kds-fonts.bb670a9dd534.css");

:root {
    /* Amazon Brand Colors - Enhanced for Space Theme */
    --amazon-orange: #FF9900;
    --amazon-orange-dark: #E37900;
    --amazon-orange-darker: #C76400;

    --golden-hour-yellow: #fff07a;
    --golden-hour-orange: #ff6200;

    --krypton-glow: #b499ff;
    --krypton-thruster: #9d7dff;
    --krypton-base: #8750ff;
    --krypton-deep: #5c00d3;

    --white: #ffffff;
    --off-white: #f5f3ef;
    --off-white-shade-1: #e0dbd9;
    --off-white-shade-2: #aeaaa9;

    --dark-squid-ink: #0f141a;
    --squid-ink-tint-1: #454a51;
    --squid-ink-tint-2: #888b91;
    
    /* Enhanced Space Colors */
    --deep-space: #0A0E1A;        /* Darker than squid ink for main background */
    --void-black: #000000;
    --stellar-blue: #1A2332;      /* Slightly lighter than squid ink */
    --nebula-purple: #2D1B3D;     /* Dark purple for depth */
    --cosmic-gray: #2C3E50;
    
    /* Satellite & UI Colors */
    --satellite-active: #00D4FF;   /* Bright cyan for active satellites */
    --satellite-selected: #FFD700; /* Gold for selected */
    --satellite-inactive: #7A8B99; /* Muted for inactive */
    --orbital-path: rgba(180, 153, 255, 0.3); /* Translucent purple */
    
    /* Text Colors — the KDS Web dark-theme token VALUES, transcribed here.
       KDS ships its tokens as JS only (@amzn/kds-web-design-system/tokens),
       which the MUI theme consumes; this plain stylesheet can't import them,
       so the hex is inlined with the source token name in each comment. */
    --text-primary: #FCFBFA;    /* kds-color-text-icon-primary */
    --text-secondary: #E0DBD9;  /* kds-color-text-icon-secondary */
    --text-accent: #B499FF;     /* kds-color-text-icon-brand-primary (krypton) */
    --text-muted: #696969;      /* kds-color-text-icon-disabled */
    --text-success: #3F9A1F;    /* kds-color-status-success-element */
    --text-warning: #E08322;    /* kds-color-status-warning-element */
    --text-error: #D84A57;      /* kds-color-status-error-element */
    --text-info: #2D74FF;       /* kds-color-status-info-element */

    /* UI Element Colors */
    --border-primary: rgba(180, 153, 255, 0.5);
    --border-secondary: rgba(255, 255, 255, 0.1);
    --background-panel: rgba(15, 20, 26, 0.95); /* KDS Squid Ink (squid900 #0F141A) — kds-color-surface-primary */
    --background-hover: rgba(255, 153, 0, 0.1);
    --background-active: rgba(255, 153, 0, 0.2);
    
    /* Shadows & Effects */
    --shadow-orange: 0 0 20px rgba(255, 153, 0, 0.3);
    --shadow-blue: 0 0 15px rgba(0, 212, 255, 0.2);
    --glow-leo: 0 0 10px rgba(180, 153, 255, 0.5);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: var(--void-black, #0a0a0f);
}

body {
    font-family: "Amazon Ember", Verdana, Geneva, Tahoma, sans-serif;
    background: linear-gradient(135deg, var(--deep-space) 0%, var(--void-black) 50%, var(--nebula-purple) 100%);
    color: var(--text-primary);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
}

/* The header is a solid squid-ink bar occupying the first grid row; the earth
   view starts BELOW it (no overlap). */
.container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    height: 100dvh;
    gap: 0;
    /* Respect iOS safe areas (notch, home indicator) when viewport-fit=cover.
       Applied here rather than on body so the container keeps its viewport-
       based height and doesn't break percentage-height chains on desktop. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    /* Animate ONLY the grid track sizes (panel/sidebar toggles). `transition:
       all` also animated width/height on viewport resize, so the grid lagged
       the instantly-resized canvas buffer and flashed at the edges. */
    transition:
        grid-template-columns 0.3s ease,
        grid-template-rows 0.3s ease;
}

.container.with-sidebar {
    grid-template-columns: 1fr 300px;
}

.container.with-launch-panel {
    grid-template-rows: auto 1fr 265px;
}

.container.with-sidebar.with-launch-panel {
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto 1fr 265px;
}

/* Header — solid squid-ink bar in the first grid row over the globe column
   only (not the sidebar column), so the Active Satellites sidebar runs full
   height beside it with its heading at the very top. */
.header {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    min-height: 0;
}

/* Left Section */
.left-section {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Right Section — SELECTED satellite stat sits to the LEFT of the clock box,
   on the same row (never stacked/overlapping). */
.right-section {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 24px;
}

/* The SELECTED figure can be a long name (KUIPER-000013); keep it from
   pushing the clock and let it show in full on the right. */
.stat-item-selected {
    text-align: right;
}

.logo {
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, rgb(135, 80, 255), rgb(233, 224, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.header img {
    height: 40px;
    object-fit: contain;
}

/* Constellation Toggle */
.constellation-toggle {
    display: flex;
    gap: 2px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    padding: 2px;
}

.constellation-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: "Amazon Ember", Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.constellation-btn:hover {
    background: var(--background-hover);
    color: var(--text-primary);
}

.constellation-btn.active {
    background: var(--krypton-glow);
    color: var(--squid-ink);
}

/* Stats */
.stats {
    display: flex;
    align-items: center;
    gap: 30px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* Metric numbers: white, Ember Modern Display Light (from the h2 variant).
   Sized ~2:1 against the label below so the figure leads without dwarfing it. */
.stat-value {
    font-size: 26px;
    color: var(--text-primary);
    line-height: 1.15;
}

.stat-item h6,
.stat-item div:last-child {
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 0;
}

/* Clock Container — one inline datetime readout (date · time tz). */
/* Layout only — panel surface applied via panelSurface in ClockContainer.tsx. */
.clock-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    height: fit-content;
    width: fit-content;
    white-space: nowrap;
}

/* Header clock readout: white, standard (Ember) type, one continuous line. */
.clock-date,
.clock-time,
.clock-timezone,
.clock-datetime-sep {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1;
}

.clock-time {
    font-weight: bold;
    letter-spacing: 0.5px;
}

.clock-datetime-sep {
    color: var(--text-muted);
    user-select: none;
}

.clock-timezone {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.speed-indicator {
    font-size: 11px;
    color: var(--satellite-active);
    font-weight: bold;
    padding: 2px 6px;
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 3px;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.speed-indicator.fast {
    color: var(--text-warning);
    background: rgba(255, 193, 7, 0.1);
    border-color: var(--krypton-deep);
}

.speed-indicator.paused {
    color: var(--text-error);
    background: rgba(244, 67, 54, 0.1);
    border-color: var(--krypton-deep);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Earth View */
.earth-view {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    background: radial-gradient(circle at center, var(--stellar-blue) 0%, var(--deep-space) 70%);
    overflow: hidden;
    /* No size transition — the grid cell it fills is what animates on panel
       toggle; animating the earth-view too made it lag the canvas on viewport
       resize (edge flash). */
}

.container:not(.with-sidebar) .earth-view {
    grid-column: 1 / -1;
}

.container:not(.with-launch-panel) .earth-view {
    grid-row: 2 / -1;
}

#earth-canvas, #map-canvas {
    /* Both canvases mount simultaneously and toggle visibility via
     * `display`. Stack them by absolutely positioning inside the
     * `.earth-view` (position: relative) so the inactive one doesn't
     * push the active one out of the visible area. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: pan-x pan-y pinch-zoom; /* Allow scrolling and pinch zoom while still enabling custom controls */
    user-select: none; /* Prevent text selection on touch */
}

/* Mobile touch interaction hint - only visible on touch devices */
@media (hover: none) and (pointer: coarse) {
    #earth-canvas::before {
        content: '';
        position: absolute;
        top: 10%;
        left: 15%;
        right: 15%;
        bottom: 10%;
        border: 2px dashed rgba(255, 153, 0, 0.3);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1;
    }
    
    /* Show hint briefly on page load for mobile users */
    #earth-canvas.show-touch-hint::before {
        opacity: 1;
        animation: fadeInOut 3s ease-in-out;
    }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    20%, 80% { opacity: 0.6; }
}

/* (Legacy: `#map-canvas { display: none }` lived here so the gamma JS
 * could lazily reveal it after switching to flat view. The React app
 * mounts both canvases simultaneously and drives visibility via inline
 * `display` on each canvas, so this rule must NOT apply or it would
 * permanently hide the map.) */

/* Debug Info */
.debug-info-link {
    position: absolute;
    top: 10px;
    left: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.debug-info-link:hover .debug-info {
    transform: scale(1.05);
    border-color: var(--krypton-deep);
    box-shadow: 0 0 10px rgba(255, 153, 0, 0.5);
    cursor: pointer;
}

.debug-info {
    font-size: 13px;
    color: var(--text-success);
    background: var(--background-panel);
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid var(--border-primary);
    backdrop-filter: blur(10px);
    display: none;
}

/* Controls */
.controls-compact {
    /* Anchor inside the .earth-view (position: relative) so the toolbar always
     * hugs the bottom-right of the canvas, regardless of the launch-panel's
     * actual rendered height. */
    position: absolute !important;
    right: 10px !important;
    bottom: 10px !important;
    z-index: 1998 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    /* Wrap onto multiple rows when the buttons can't fit the canvas width,
       instead of overflowing off the left edge (cutoff). Bounded to the
       available width minus the left/right insets. */
    flex-wrap: wrap;
    gap: 6px;
    padding: 5px;
    max-width: calc(100% - 20px);
    height: fit-content;
    width: fit-content;
}

/* Sidebar lives in its own grid column, so the .earth-view box already
 * stops at the sidebar's left edge — no extra offset needed for the
 * absolutely-positioned controls inside it. */

/* Visual moved to ControlsCompact.tsx sx; layout kept. */
.control-btn-compact {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* :hover/:active now handled in ControlsCompact.tsx sx. */
.control-btn-compact:active {
    transform: scale(0.95);
}

/* Altitude Indicator */
/* Layout only — panel surface applied via panelSurface token in
   AltitudeIndicator.tsx. */
.altitude-indicator {
    position: absolute;
    bottom: 20px;
    left: 20px;
    max-width: 200px;
    transition: bottom 0.3s ease;
}

.container.with-launch-panel .altitude-indicator {
    bottom: 20px;
}

/* Type from MUI h3 (Ember Modern Display Light); layout + tuning only. */
.altitude-indicator h3 {
    margin-bottom: 8px;
    font-size: 22px; /* explicit — KDS h-variant ladder is non-monotonic */
    color: var(--text-primary);
}

.altitude-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.altitude-marker {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.altitude-590 {
    background: var(--krypton-base);
}
.altitude-610 {
    background: var(--krypton-thruster);
}
.altitude-630 {
    background: var(--krypton-glow);
}

/* Satellite Info */
/* Layout only — the panel surface (bg/border/blur/glow) is applied via
   the shared `panelSurface` theme token in SatelliteInfoPanel.tsx. */
.satellite-info {
    position: absolute;
    top: 108px;
    right: 10px;
    min-width: 280px;
    display: block;
    font-size: 12px;
}

/* #sat-info-name type + color + margin now set on the KDS <Typography>. */

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 2px 0;
}

.info-label {
    color: var(--text-primary);
}

.info-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Status Indicator */
/* Layout only — panel surface applied via panelSurface in StatusIndicator.tsx. */
.status-indicator {
    position: absolute;
    /* Docked to the right of the Deployment Status panel (which sits at
       left: 20px with max-width: 200px), so the two live side by side at the
       bottom of the earth view instead of stacking / overlapping. */
    bottom: 20px;
    left: 240px;
    z-index: 1100;
}

.status-dot {
    width: 8px;
    height: 8px;
    /* Krypton gradient to match the LIVE TRACKING Tag (was solid green). */
    background: linear-gradient(90deg, rgb(135, 80, 255), rgb(233, 224, 255));
    border-radius: 50%;
    animation: pulse 2s infinite;
    box-shadow: 0 0 8px var(--krypton-glow);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Sidebar */
/* Layout only — glass surface + border applied via panelDock in App.tsx. */
.sidebar {
    grid-column: 2;
    /* Full height beside the header so ACTIVE SATELLITES sits at the very top. */
    grid-row: 1 / -1;
    padding: 20px;
    /* Flex column so the SidebarHeader stays pinned at the top and only the
       satellite list scrolls underneath it ("ACTIVE SATELLITES" is sticky). */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sidebar.hidden {
    display: none;
}

/* Font family from the h3 <Typography> variant; size pinned here (the KDS
   h-variant ladder is non-monotonic, so name-based sizing isn't reliable). */
.sidebar h2 {
    margin-bottom: 15px;
    font-size: 22px;
}

.satellite-header-link {
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    display: inline-block;
}

.satellite-header-link:hover {
    color: var(--krypton-glow);
    transform: scale(1.05);
    cursor: pointer;
}

/* Satellite List — the only scrolling region in the sidebar; the header
   above it stays pinned. */
.sat-list {
    list-style: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.sat-item {
    padding: 12px;
    margin-bottom: 6px;
    border: 1px solid var(--border-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
    border-radius: 6px;
}

.sat-item:hover {
    border-color: var(--border-primary);
    transform: translateX(2px);
}

.sat-item.selected {
    border-color: var(--krypton-deep);
    box-shadow: var(--glow-leo);
    border-left: 4px solid var(--krypton-deep);
}

/* Name renders as a KDS <Tag variant="gradient"> (krypton pill) — a visual
   divider heading each row. This wrapper is layout only: the pill's own inset
   fixes its height, and the bottom margin sets it apart from the details. */
.sat-name {
    margin-bottom: 8px;
}

.sat-details {
    color: var(--text-secondary);
    margin-top: 3px;
}

/* Launch Panel */
/* Layout only — glass surface + border applied via panelDock in App.tsx. */
.launch-panel {
    /* Column 1 only (the globe column); the sidebar owns column 2 full-height. */
    grid-column: 1;
    grid-row: 3;
    padding: 15px 20px;
    /* Cards scroll horizontally within #launch-list; the panel itself is a
       fixed-height row (grid track) and must not scroll vertically. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Satellite visibility notice within launch panel */
#satellite-visibility-notice {
    position: relative;
    z-index: 1001; /* Ensure it doesn't interfere with controls */
    margin: 10px 0;
    padding: 8px;
    background: rgba(45, 116, 255, 0.18);
    border-left: 3px solid var(--text-info);
    font-size: 11px;
    color: var(--text-primary); /* light text for contrast; info blue = accent */
}

.launch-panel.hidden {
    display: none;
}

/* Top header row: title on the left, NEXT LAUNCH countdown to its right. */
.launch-panel-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 12px;
}

/* Font family from the h3 <Typography> variant; size pinned here (the KDS
   h-variant ladder is non-monotonic, so name-based sizing isn't reliable). */
.launch-panel h3 {
    font-size: 22px;
}

.countdown-timer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px;
    border: 1px solid var(--border-primary);
    border-radius: 25px;
}

.countdown-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.countdown-value {
    font-size: 16px;
    font-weight: bold;
    font-family: 'Amazon Ember', monospace;
    color: var(--text-primary);
}

#launch-list {
    display: flex;
    gap: 15px;
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: flex-start;
    padding-bottom: 5px;
}

/* Now a MUI <Card> styled with the kdsCard token (fill/border/radius/padding);
   keep layout + sizing only. */
.launch-item {
    /* Auto-width to the card's content (mission name + status pill) so long
       mission names never word-wrap. min-width keeps short cards from looking
       cramped; max-width caps a pathologically long line. flex-shrink: 0 so
       the horizontal strip doesn't squeeze cards narrower than their content. */
    min-width: 320px;
    width: max-content;
    max-width: 480px;
    flex-shrink: 0;
    font-size: 13px;
    transition: all 0.3s ease;
}

/* Same hover as the sidebar .sat-item: krypton border highlight + a small
   nudge right. */
.launch-item:hover {
    border-color: var(--border-primary);
    transform: translateX(2px);
}

.launch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

/* Type from KDS heading variant (kdsTypographyTitleBoldSmall); color only.
   The card is content-width now, so keep the name on one line (no wrap); the
   pill keeps its intrinsic width (flex-shrink: 0). */
.launch-name {
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
}

/* Scale the KDS status Tag down a touch — its internal padding/type are
   token-fixed, so shrink the whole pill from the wrapper. */
.launch-status {
    flex-shrink: 0;
    transform: scale(0.85);
    transform-origin: right center;
}

.launch-date {
    color: var(--off-white);
}

.launch-provider {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    color: var(--void-black);
    font-weight: 500;
}

.launch-mission {
    font-size: 12px;
    margin-bottom: 4px;
    color: var(--off-white);
}

.satellite-count {
    color: var(--text-primary);
    font-weight: bold;
}

.launch-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.2s ease;
}

.launch-link:hover .launch-item {
    border-color: var(--border-primary);
    transform: translateX(2px);
    cursor: pointer;
}

.launch-location {
    font-size: 11px;
    color: var(--off-white-shade-1);
    margin-bottom: 4px;
}

/* Status now rendered as a KDS <Tag> (owns its own type/color/pill). */

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(35, 47, 62, 0.3);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--krypton-glow) 0%, var(--krypton-deep) 100%);
    border-radius: 5px;
    border: 1px solid var(--border-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--krypton-glow) 0%, var(--krypton-deep) 100%);
}

/* Upcoming Launches + Active Satellites + Assign Satellite modal + Settings
   modal scrollbars: neutral white, not krypton. */
#launch-list::-webkit-scrollbar-thumb,
.sat-list::-webkit-scrollbar-thumb,
.assign-satellite-modal::-webkit-scrollbar-thumb,
.settings-modal::-webkit-scrollbar-thumb {
    background: rgba(252, 251, 250, 0.5); /* --text-primary @ 50% */
    border: 1px solid var(--border-secondary);
}

#launch-list::-webkit-scrollbar-thumb:hover,
.sat-list::-webkit-scrollbar-thumb:hover,
.assign-satellite-modal::-webkit-scrollbar-thumb:hover,
.settings-modal::-webkit-scrollbar-thumb:hover {
    background: rgba(252, 251, 250, 0.75);
}

/* Mobile Responsiveness */
/* Mobile layout flips at 900px to match the KDS responsive typography
   breakpoint (web900), so type and layout change together. */
@media (max-width: 899px) {
    /* Single column on mobile; header row on top, globe fills below, and the
       satellite list + launch panel collapse into one tabbed .mobile-dock
       bottom row (rendered by MobileDock). */
    .container {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto 1fr !important;
    }

    .container.with-mobile-dock {
        /* Header, globe (hero), then a FIXED-height dock row sized for the
           taller tab (Upcoming Launches) so switching tabs never moves the
           bottom edge. Tall enough that a launch card (tabs + header row +
           name/date/mission/location) isn't clipped at the bottom. */
        grid-template-rows: auto 1fr 280px !important;
    }

    .sidebar {
        display: none !important;
    }

    /* Globe fills row 2 (below the header). Pinned explicitly so the
       `:not(.with-launch-panel) .earth-view` desktop rule (row 2 / -1) doesn't
       span it over the dock. */
    .container.with-mobile-dock .earth-view {
        grid-row: 2;
    }

    /* Tabbed bottom dock in the fixed bottom row (row 3). Both tabs occupy the
       same box; the shorter (Satellites) just has empty space rather than
       resizing the dock. */
    .mobile-dock {
        grid-column: 1 / -1;
        grid-row: 3;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    /* The active tab's panel holds one horizontally-scrolling row of cards;
       tight padding so the dock hugs the content and the globe stays the hero. */
    .mobile-dock-panel {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 8px 12px;
    }

    /* Section headings inside the dock don't need the desktop bottom margins. */
    .mobile-dock .launch-panel-header,
    .mobile-dock #satellite-status {
        margin-bottom: 6px;
    }
    .mobile-dock h2,
    .mobile-dock h3 {
        margin-bottom: 6px;
    }

    /* In the mobile dock the satellite list reads left-to-right (a horizontal
       card strip like the launches), instead of a tall full-height column. */
    .mobile-dock .sat-list {
        display: flex;
        flex: 1;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        align-items: stretch;
    }

    .mobile-dock .sat-item {
        flex: 0 0 auto;
        min-width: 220px;
        margin-bottom: 0;
    }


    /* Header wraps if the logo + stats + clock don't fit on one line. */
    .header {
        flex-wrap: wrap;
        gap: 6px 12px;
        padding: 8px 14px;
    }

    .left-section {
        gap: 16px;
    }

    .stats {
        gap: 16px;
    }

    .stat-value {
        font-size: 20px;
    }

    /* Header stat labels + clock shrink so the bar stays compact. */
    .stat-item h6,
    .stat-item div:last-child {
        font-size: 10px;
    }

    .controls-compact {
        position: absolute !important;
        bottom: 10px !important;
        right: 5px !important;
        z-index: 9999 !important;
    }

    .control-btn-compact {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Selected-satellite popup fits a narrow viewport instead of overflowing. */
    .satellite-info {
        right: 5px;
        left: 5px;
        min-width: 0;
        max-width: none;
    }

    /* Mobile strategy: the globe is the hero. Hide the desktop "cockpit"
       overlays that crowd a small viewport — Deployment Status panel,
       LIVE TRACKING pill, and the altitude legend. Essentials stay: the
       controls toolbar, the header, and the tap-to-select satellite popup.
       (Deployment counts remain reachable via the satellite list / future
       mobile drawer.) */
    .altitude-indicator,
    .status-indicator {
        display: none !important;
    }
}

/* Additional Enhancements */
.glow-text {
    text-shadow: 0 0 10px currentColor;
}

.panel-glow {
    box-shadow: 0 0 20px rgba(255, 153, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Satellite-specific enhancements */
.satellite-active-marker {
    color: var(--satellite-active);
}

.satellite-selected-marker {
    color: var(--satellite-selected);
}

.satellite-inactive-marker {
    color: var(--satellite-inactive);
    opacity: 0.6;
}

/* Celestrak link button in settings */
.celestrak-link-btn {
    background: rgba(180, 153, 255, 0.1);
    border: 1px solid rgba(130, 80, 255, 0.3);
    color: var(--krypton-glow);
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
    width: 50%;
    font-size: 13px;
    transition: all 0.2s ease;
}

.celestrak-link-btn:hover {
    background: rgba(180, 153, 255, 0.2);
    border-color: rgba(130, 80, 255, 0.5);
}

.celestrak-link-btn:active {
    background: rgba(0, 255, 255, 0.15);
}

/* Layout only — panel surface applied via panelSurface in SettingsModal.tsx.
   (Body font now comes from the theme, not the old monospace override.) */
.settings-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-height: 80vh;
    overflow-y: auto;
    /* Never scroll horizontally in a settings dialog. Without this, `overflow-y:
       auto` makes the browser compute `overflow-x` to `auto` too (CSS spec:
       visible + non-visible → auto), so a MUI Slider overflowing by even 1px
       shows a horizontal scrollbar — which steals height and forces a spurious
       vertical scrollbar (visible on the short Performance tab). */
    overflow-x: hidden;
    z-index: 2000;
    display: none;
}

.settings-modal.open {
    display: block;
}

.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    display: none;
}

.settings-overlay.open {
    display: block;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(130, 80, 255, 0.3);
}

/* Type from KDS <Typography variant="h2">; keep layout + brand treatment. */
.settings-header h2 {
    margin: 0;
    letter-spacing: 2px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.settings-modal .close-button {
    background: transparent;
    border: 1px solid rgba(180, 153, 255, 0.3);
    color: var(--text-primary);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.settings-modal .close-button:hover {
    background: rgba(135, 80, 255, 0.2);
    border-color: var(--krypton-glow);
}

/* Tab nav (React-only — gamma never had tabs in settings). */
.settings-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(130, 80, 255, 0.2);
    flex-wrap: wrap;
}

.settings-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: 'Amazon Ember', monospace;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.settings-tab:hover {
    color: var(--text-primary);
    background: rgba(135, 80, 255, 0.08);
}

.settings-tab.active {
    color: var(--krypton-glow);
    border-bottom-color: var(--krypton-glow);
}

.settings-tab-content {
    min-height: 200px;
}

.settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(130, 80, 255, 0.2);
}

.settings-footer button {
    background: linear-gradient(135deg, var(--dark-squid-ink) 0%, var(--stellar-blue) 100%);
    border: 1px solid rgba(180, 153, 255, 0.3);
    color: var(--text-primary);
    font-family: 'Amazon Ember', monospace;
    font-size: 11px;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.settings-footer button:hover {
    background: rgba(135, 80, 255, 0.25);
    border-color: var(--krypton-glow);
}

.settings-section {
    margin-bottom: 20px;
}

/* Type from KDS (kdsTypographyTitleBoldSmall); keep layout + uppercase treatment.
   White section headings (UI Panels, Visual Settings, Location Pins, Time &
   Date Settings, Performance) — matches the white SETTINGS title. */
.settings-section h3 {
    color: var(--text-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 0;
}

.setting-toggle {
    position: relative;
    width: 40px;
    height: 20px;
    background: rgba(180, 153, 255, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s;
}

.setting-toggle.active {
    background: rgba(135, 80, 255, 0.3);
}

.setting-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.setting-toggle.active::after {
    transform: translateX(20px);
}

.setting-slider {
    width: 150px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    outline: none;
}

.setting-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    background: var(--krypton-base);
    border-radius: 50%;
    cursor: pointer;
}

.setting-select {
    width: 150px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    outline: none;
}

.setting-select:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(0, 255, 255, 0.3);
}

.setting-select option {
    background: #1a1a1a;
    color: #fff;
}

.location-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.location-item input[type="text"] {
    flex: 1;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(130, 80, 255, 0.3);
    color: #fff;
    padding: 5px;
    border-radius: 3px;
}

.location-item .remove-location-btn {
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.3);
    color: #ff4444;
    padding: 2px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.location-item .remove-location-btn:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.5);
    color: #ff6666;
}

.close-button {
    background: none;
    border: none;
    color: var(--krypton-thruster);
    font-size: 20px;
    cursor: pointer;
}

/* Now a KDS <Button variant="outlined">; keep only top-margin layout. */
.add-location-btn {
    margin-top: 10px;
}

.decayed-satellites-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100001;
}

.decayed-satellites-modal {
    background: rgba(180, 153, 255, 0.1);
    border: 1px solid rgba(130, 80, 255, 0.3);
    border-radius: 5px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.decayed-satellites-header {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(130, 80, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.decayed-satellites-header h3 {
    margin: 0;
    color: #5c00d3;
    font-size: 18px;
}

.decayed-satellites-content {
    padding: 20px;
    overflow-y: auto;
    color: #fff;
    font-size: 14px;
}

.decayed-satellites-content::-webkit-scrollbar {
    width: 8px;
}

.decayed-satellites-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.decayed-satellites-content::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 255, 0.3);
    border-radius: 4px;
}

.decayed-satellites-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 255, 255, 0.5);
}

/* Skymark Button & Modal */
.skymark-btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(135, 80, 255, 0.15);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--krypton-glow);
    font-family: "Amazon Ember", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.skymark-btn:hover {
    background: rgba(135, 80, 255, 0.3);
    border-color: var(--krypton-glow);
    box-shadow: var(--glow-leo);
}

.skymark-btn:active {
    background: rgba(135, 80, 255, 0.4);
}

.skymark-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1999;
    display: none;
}

.skymark-overlay.open {
    display: block;
}

/* Surface aligned to the panelSurface theme token (squid-ink glass, krypton
   border, blur). Kept in CSS because the drag container stays a plain div. */
.skymark-modal {
    position: fixed;
    top: 108px;
    left: auto;
    background: var(--background-panel);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 20px;
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 2000;
    color: var(--text-primary);
    backdrop-filter: blur(15px);
    box-shadow: 0 0 10px rgba(180, 153, 255, 0.33);
    display: none;
}

.skymark-modal.open {
    display: block;
}

.skymark-drag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(130, 80, 255, 0.3);
    cursor: grab;
    user-select: none;
}

.skymark-drag-header:active {
    cursor: grabbing;
}

.skymark-content {
    margin-top: 16px;
}

.skymark-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--krypton-glow);
    margin: 0 0 12px 0;
    letter-spacing: 1px;
}

.skymark-story {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
    white-space: pre-line;
}

.skymark-loading {
    color: var(--text-muted);
    font-style: italic;
}

.skymark-error {
    color: var(--text-error);
}

/* Assign Satellite Modal — Full Screen */
.assign-satellite-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

/* Surface aligned to the panelSurface theme token. */
.assign-satellite-modal {
    background: var(--background-panel);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 20px 24px;
    width: 100%;
    max-width: 440px;
    max-height: 85vh;
    overflow-y: auto;
    color: var(--text-primary);
    backdrop-filter: blur(15px);
    box-shadow: 0 0 10px rgba(180, 153, 255, 0.33);
}

.assign-satellite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(130, 80, 255, 0.3);
}

.assign-satellite-header h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    text-transform: uppercase;
}

.assign-satellite-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.assign-satellite-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assign-satellite-field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.assign-satellite-field input,
.assign-satellite-field textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(180, 153, 255, 0.3);
    border-radius: 6px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-family: 'Amazon Ember', sans-serif;
    font-size: 14px;
    transition: border-color 0.2s ease;
}

.assign-satellite-field input:focus,
.assign-satellite-field textarea:focus {
    outline: none;
    border-color: var(--krypton-glow);
    box-shadow: 0 0 8px rgba(135, 80, 255, 0.3);
}

.assign-satellite-field input[readonly] {
    opacity: 0.7;
    cursor: not-allowed;
}

.assign-satellite-field textarea {
    resize: vertical;
    min-height: 100px;
}

.field-hint {
    font-size: 10px;
    color: var(--text-muted);
}

.assign-satellite-error {
    color: var(--text-error);
    font-size: 13px;
    margin: 0;
}

.assign-satellite-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.assign-satellite-cancel {
    background: transparent;
    border: 1px solid rgba(180, 153, 255, 0.3);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 6px;
    font-family: 'Amazon Ember', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assign-satellite-cancel:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.assign-satellite-submit {
    background: var(--krypton-base);
    border: none;
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    font-family: 'Amazon Ember', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.assign-satellite-submit:hover {
    background: var(--krypton-thruster);
    box-shadow: var(--glow-leo);
}

.assign-satellite-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Skymark Edit Button */
.skymark-edit-btn {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 14px;
    background: rgba(135, 80, 255, 0.15);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--krypton-glow);
    font-family: "Amazon Ember", Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.skymark-edit-btn:hover {
    background: rgba(135, 80, 255, 0.3);
    border-color: var(--krypton-glow);
    box-shadow: var(--glow-leo);
}

.skymark-edit-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}