/* ============================================================
   Celestial Sim — HUD stylesheet
   Space-theme glass UI: one bottom command bar, floating glass
   popovers, soft glow accents. No decorative chrome.
   ============================================================ */

:root {
    --ui-bg: rgba(11, 17, 29, 0.6);
    --ui-bg-strong: rgba(8, 13, 23, 0.78);
    --ui-bg-input: rgba(4, 8, 16, 0.55);
    --ui-stroke: rgba(168, 205, 255, 0.14);
    --ui-stroke-bright: rgba(178, 214, 255, 0.34);
    --ui-text: #e9f1fb;
    --ui-text-dim: rgba(233, 241, 251, 0.62);
    --ui-text-faint: rgba(233, 241, 251, 0.38);
    --ui-accent: #8ed8ff;
    --ui-accent-strong: #c4ecff;
    --ui-accent-soft: rgba(142, 216, 255, 0.12);
    --ui-glow: 0 0 20px rgba(142, 216, 255, 0.22);
    --ui-warn: #ffb35c;
    --ui-danger: #ff7a6b;
    --ui-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    --ui-blur: blur(18px) saturate(150%);
    --ui-radius: 14px;
    --ui-radius-sm: 9px;
    --ui-gap: 12px;
    --ui-bar-h: 58px;
    --ui-panel-w: 336px;
    --font-ui: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
}

* {
    scrollbar-width: thin;
    scrollbar-color: rgba(142, 216, 255, 0.3) transparent;
}

body {
    margin: 0;
    overflow: hidden;
    font-family: var(--font-ui);
    color: var(--ui-text);
    background: #010409;
}

.visuallyHidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

main {
    width: 100vw;
    height: 100vh;
    display: block;
}

/* ===== Mode gating: body[data-hud-mode] decides which HUD pieces exist. ===== */
body[data-hud-mode="starmap"] .hud-system-only {
    display: none !important;
}

body:not([data-hud-mode="starmap"]) .hud-starmap-only {
    display: none !important;
}

body[data-hud-mode="starmap"] .hud-starmap-only,
body[data-hud-mode="system"] .hud-system-only {
    animation: hudModeFadeIn 0.25s ease;
}

@keyframes hudModeFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Dragging the camera hides the pointer until release. The drag captures the
   pointer, so it can travel over HUD chrome that sets its own cursor — hence
   the descendant rule, and !important to outrank it. */
body[data-camera-drag="true"],
body[data-camera-drag="true"] * {
    cursor: none !important;
}

/* ===== HUD root: overlay layer, children opt back into pointer events ===== */
#hud {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
}

#hud > * {
    pointer-events: auto;
}

/* Keep the [hidden] attribute authoritative over author display rules. */
#hud [hidden],
#settingsModal[hidden] {
    display: none !important;
}

/* ============================================================
   Shared glass surface
   ============================================================ */
.glass-panel {
    background: linear-gradient(180deg, var(--ui-bg), var(--ui-bg-strong));
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius);
    -webkit-backdrop-filter: var(--ui-blur);
    backdrop-filter: var(--ui-blur);
    box-shadow: var(--ui-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ui-stroke);
}

.panel-title {
    margin: 0;
    flex: 1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ui-text-dim);
}

.panel-close {
    margin-left: auto;
    flex: none;
}

.panel-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    min-height: 0;
}

.panel-footnote {
    margin: 0;
    font-size: 10.5px;
    letter-spacing: 0.4px;
    color: var(--ui-text-faint);
}

.panel-scroll {
    overflow-y: auto;
    min-height: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Tabs --- */
.panel-tabs {
    display: flex;
    gap: 4px;
    background: var(--ui-bg-input);
    border: 1px solid var(--ui-stroke);
    border-radius: 999px;
    padding: 3px;
}

.panel-tabs [role="tab"] {
    border: none;
    background: transparent;
    color: var(--ui-text-dim);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    padding: 5px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}

.panel-tabs [role="tab"]:hover {
    color: var(--ui-text);
}

.panel-tabs [role="tab"][aria-selected="true"] {
    background: var(--ui-accent-soft);
    color: var(--ui-accent-strong);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-bright);
}

/* ============================================================
   Popovers (navigator, target info, time)
   ============================================================ */
.popover {
    position: fixed;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    z-index: 1200;
    animation: popoverIn 0.18s ease-out;
}

@keyframes popoverIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.popover-left {
    left: var(--ui-gap);
    bottom: calc(var(--ui-bar-h) + var(--ui-gap));
    width: min(var(--ui-panel-w), calc(100vw - 2 * var(--ui-gap)));
    max-height: min(62vh, calc(100vh - var(--ui-bar-h) - 3 * var(--ui-gap)));
}

.popover-right {
    right: 25%;
    top: 50%;
    transform: translateY(-50%);
    width: min(var(--ui-panel-w), calc(100vw - 2 * var(--ui-gap)));
    max-height: min(70vh, calc(100vh - var(--ui-bar-h) - 3 * var(--ui-gap)));
    animation: popoverInRight 0.18s ease-out;
}

@keyframes popoverInRight {
    from {
        opacity: 0;
        transform: translateY(calc(-50% + 8px));
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

.popover-center {
    left: 50%;
    bottom: calc(var(--ui-bar-h) + var(--ui-gap));
    transform: translateX(-50%);
    width: min(320px, calc(100vw - 2 * var(--ui-gap)));
    max-height: min(62vh, calc(100vh - var(--ui-bar-h) - 3 * var(--ui-gap)));
    animation: popoverInCenter 0.18s ease-out;
}

@keyframes popoverInCenter {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%);
    }
}

/* Target info box: floating close button over scrolling content */
#targetInfoBox {
    padding: 0;
}

#targetInfoBox .panel-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

/* ============================================================
   Buttons: icon buttons + chips
   ============================================================ */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: none;
    padding: 0;
    background: transparent;
    color: var(--ui-text-dim);
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.icon-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.icon-btn:hover:not(:disabled) {
    color: var(--ui-accent-strong);
    background: var(--ui-accent-soft);
}

.icon-btn:focus-visible {
    outline: none;
    border-color: var(--ui-stroke-bright);
    box-shadow: var(--ui-glow);
}

.bar-btn {
    width: 38px;
    height: 38px;
    color: var(--ui-text);
    background: var(--ui-bg-input);
    border: 1px solid var(--ui-stroke);
}

.bar-btn svg {
    width: 19px;
    height: 19px;
}

.bar-btn:hover:not(:disabled) {
    border-color: var(--ui-stroke-bright);
    box-shadow: var(--ui-glow);
}

.bar-btn.is-active {
    color: var(--ui-accent-strong);
    background: var(--ui-accent-soft);
    border-color: var(--ui-stroke-bright);
    box-shadow: var(--ui-glow);
}

.bar-btn.is-busy {
    cursor: progress;
    border-color: var(--ui-warn);
}

.bar-btn.is-busy svg {
    color: var(--ui-warn);
    animation: hudPulse 1.1s ease-in-out infinite;
}

.bar-btn.is-unavailable,
.bar-btn:disabled,
.icon-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: none;
}

@keyframes hudPulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.35;
    }
}

/* --- Chips: pill buttons in the bar --- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 240px;
    height: 38px;
    padding: 0 16px;
    box-sizing: border-box;
    background: var(--ui-bg-input);
    color: var(--ui-text);
    border: 1px solid var(--ui-stroke);
    border-radius: 999px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 13px;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.chip:hover:not(:disabled) {
    border-color: var(--ui-stroke-bright);
    box-shadow: var(--ui-glow);
}

.chip:focus-visible {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: var(--ui-glow);
}

.chip[aria-expanded="true"] {
    background: var(--ui-accent-soft);
    border-color: var(--ui-stroke-bright);
    color: var(--ui-accent-strong);
}

.chip-label {
    font-weight: 600;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* --- Time chip --- */
.time-chip {
    max-width: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.4px;
}

.time-chip > * {
    pointer-events: none;
}

.time-date {
    white-space: nowrap;
}

.time-scale-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ui-accent-soft);
    color: var(--ui-accent-strong);
    font-weight: 600;
    white-space: nowrap;
}

.time-scale-badge svg {
    width: 11px;
    height: 11px;
}

.time-jd {
    color: var(--ui-text-faint);
    white-space: nowrap;
}

/* ============================================================
   Bottom command bar
   ============================================================ */
#hudBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: var(--ui-bar-h);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    box-sizing: border-box;
    background: linear-gradient(0deg, var(--ui-bg-strong), var(--ui-bg));
    border-top: 1px solid var(--ui-stroke);
    -webkit-backdrop-filter: var(--ui-blur);
    backdrop-filter: var(--ui-blur);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
}

.bar-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Explicit columns: the center cluster is display:none in map mode, and
   auto-placement would otherwise slide the right cluster into its slot. */
.bar-left {
    grid-column: 1;
    justify-self: start;
}

.bar-center {
    grid-column: 2;
    justify-self: center;
}

.bar-right {
    grid-column: 3;
    justify-self: end;
}

#cameraVelocity {
    display: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--ui-text-faint);
    white-space: nowrap;
}

#cameraVelocity[data-visible="true"] {
    display: block;
}

.xrStatusMessage {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: var(--ui-text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

.xrStatusMessage[data-tone="error"] {
    color: var(--ui-danger);
}

.xrStatusMessage[data-tone="busy"] {
    color: var(--ui-warn);
}

/* ============================================================
   In-scene target label + star map hint
   ============================================================ */
.target-label {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1100;
    will-change: transform;
    max-width: min(280px, 60vw);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: var(--ui-bg-strong);
    color: var(--ui-text);
    border: 1px solid var(--ui-stroke-bright);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), var(--ui-glow);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    opacity: 1;
    transition: color 0.16s ease, border-color 0.16s ease, opacity 0.22s ease;
}

/* The name truncates; the icon beside it never does. */
.target-label-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Marks the target chip as "there is more here" — the hover chip retargets
   instead of opening details, so it carries no icon. */
.target-label-icon {
    flex: none;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.65;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.target-label:hover .target-label-icon,
.target-label:focus-visible .target-label-icon {
    opacity: 1;
}

/* Camera drags clear the labels out of the way; they stay mounted and keep
   tracking their anchor so they fade straight back in on release. */
/* Scoped under #hud so it outranks the `#hud > *` pointer-events reset. */
#hud .target-label[data-faded="true"] {
    opacity: 0;
    pointer-events: none;
}

.target-label:hover {
    color: var(--ui-accent-strong);
    border-color: var(--ui-accent);
}

.target-label:focus-visible {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 24px rgba(142, 216, 255, 0.4);
}

/* The hover chip is a "target this" affordance, not the current target, so it
   sits a step quieter until the pointer reaches it. */
.target-label--hover {
    z-index: 1099;
    background: var(--ui-bg);
    border-color: var(--ui-stroke);
    color: var(--ui-text-dim);
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.target-label--hover:hover {
    color: var(--ui-accent-strong);
    border-color: var(--ui-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), var(--ui-glow);
}

.floating-hint {
    position: fixed;
    left: 50%;
    bottom: calc(var(--ui-bar-h) + var(--ui-gap));
    transform: translateX(-50%);
    margin: 0;
    max-width: calc(100vw - 2 * var(--ui-gap));
    box-sizing: border-box;
    padding: 8px 18px;
    background: var(--ui-bg);
    border: 1px solid var(--ui-stroke);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
    font-size: 12px;
    letter-spacing: 0.3px;
    color: var(--ui-text-dim);
    text-align: center;
    pointer-events: none;
    z-index: 1050;
}

/* ============================================================
   Shared field styling
   ============================================================ */
.hud-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hud-field-label {
    font-size: 10px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ui-text-faint);
}

#hud input[type="search"],
#hud input[type="datetime-local"] {
    background: var(--ui-bg-input);
    color: var(--ui-text);
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius-sm);
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.4px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

#hud input[type="search"]:hover:not(:disabled),
#hud input[type="datetime-local"]:hover:not(:disabled) {
    border-color: var(--ui-stroke-bright);
}

#hud input[type="search"]:focus-visible,
#hud input[type="datetime-local"]:focus-visible {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: var(--ui-glow);
}

#hud input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

#hud input[type="datetime-local"] {
    color-scheme: dark;
}

button:focus-visible {
    outline: 2px solid var(--ui-accent);
    outline-offset: 2px;
}

/* Search input with a leading icon */
.search-field {
    position: relative;
    display: flex;
}

.search-field svg {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    fill: none;
    stroke: var(--ui-text-faint);
    stroke-width: 1.5;
    stroke-linecap: round;
    pointer-events: none;
}

.search-field input {
    flex: 1;
    min-width: 0;
    padding-left: 32px !important;
    border-radius: 999px !important;
}

/* ============================================================
   Navigator panel lists
   ============================================================ */
#searchPanel .panel-section {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.datasetSelector,
.bodiesList {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.datasetSelector.is-disabled {
    opacity: 0.7;
}

.datasetResults,
.bodyResults {
    position: relative;
    flex: 1;
    min-height: 120px;
    overflow-y: auto;
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius-sm);
    background: var(--ui-bg-input);
    padding: 0;
}

.datasetResults:focus-visible,
.bodyResults:focus-visible {
    outline: none;
    border-color: var(--ui-accent);
    box-shadow: var(--ui-glow);
}

/* Option rows. .datasetOption height is load-bearing: the virtualized list
   in datasetSelector.js positions rows assuming exactly 44px each. */
.datasetOption,
.bodyOption {
    display: block;
    width: 100%;
    border: none;
    border-left: 2px solid transparent;
    background: transparent;
    color: var(--ui-text);
    text-align: left;
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 13px;
    box-sizing: border-box;
    transition: background 0.12s ease;
}

.datasetOption {
    height: 44px;
    overflow: hidden;
}

.datasetOptionLabel,
.bodyOptionLabel {
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datasetOptionDescription,
.bodyOptionDetail {
    font-size: 11px;
    color: var(--ui-text-dim);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datasetOption.is-highlighted,
.datasetOption:focus-visible,
.bodyOption.is-highlighted,
.bodyOption:focus-visible {
    outline: none;
    background: var(--ui-accent-soft);
    border-left-color: var(--ui-accent);
}

.datasetOption[aria-selected='true'],
.bodyOption[aria-selected='true'] {
    border-left-color: var(--ui-accent);
}

.datasetOption[aria-selected='true'] .datasetOptionLabel,
.bodyOption[aria-selected='true'] .bodyOptionLabel {
    color: var(--ui-accent);
}

.bodyResultsEmpty {
    margin: 0;
    padding: 14px 12px;
    font-size: 12px;
    color: var(--ui-text-faint);
}

.datasetStatus {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.4px;
    color: var(--ui-text-dim);
    min-height: 14px;
}

/* ============================================================
   System overview (inside the Systems tab)
   ============================================================ */
#systemOverviewWindow {
    display: none;
    flex: none;
    max-height: 30%;
    overflow-y: auto;
    background: var(--ui-bg-input);
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius-sm);
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.55;
}

.systemOverviewHeader {
    display: flex;
    align-items: center;
    gap: 8px;
}

.systemOverviewHeader h2 {
    flex: 1;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ui-accent);
}

.systemOverviewToggle {
    margin-left: auto;
    background: none;
    border: 1px solid var(--ui-stroke);
    border-radius: 999px;
    color: var(--ui-text-dim);
    font-family: var(--font-ui);
    font-size: 10.5px;
    letter-spacing: 0.6px;
    cursor: pointer;
    padding: 3px 10px;
    transition: border-color 0.16s ease, color 0.16s ease;
}

.systemOverviewToggle:hover,
.systemOverviewToggle:focus-visible {
    border-color: var(--ui-stroke-bright);
    color: var(--ui-accent);
}

#systemOverviewWindow:not(.isCollapsed) .systemOverviewHeader {
    margin-bottom: 6px;
}

#systemOverviewWindow.isCollapsed .systemOverviewContent {
    display: none;
}

#systemOverviewWindow p {
    margin: 0 0 8px;
    color: var(--ui-text-dim);
}

#systemOverviewWindow p:last-child {
    margin-bottom: 0;
}

#systemOverviewWindow .systemOverviewSummary {
    color: var(--ui-text);
}

/* ============================================================
   Target readout (#infoWindow content, system mode)
   ============================================================ */
#infoWindow {
    display: none;
    flex-direction: column;
    gap: 10px;
}

#infoWindow[data-populated="true"] {
    display: flex;
}

.targetHeading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding-right: 30px;
}

.targetName {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--ui-accent-strong);
    text-shadow: 0 0 16px rgba(142, 216, 255, 0.35);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.targetTypeBadge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--ui-accent);
    border: 1px solid var(--ui-stroke-bright);
    border-radius: 999px;
    padding: 2px 9px;
    background: var(--ui-accent-soft);
    white-space: nowrap;
}

.targetStats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.targetStat {
    background: var(--ui-bg-input);
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius-sm);
    padding: 7px 9px;
    min-width: 0;
}

.targetStatLabel {
    display: block;
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ui-text-faint);
    margin-bottom: 2px;
}

.targetStatValue {
    display: block;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ui-text);
    overflow-wrap: anywhere;
}

.targetBioVerdict {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ui-warn);
    letter-spacing: 0.5px;
}

/* --- Facet cards (intel, log entry, etc.) --- */
.hud-card {
    background: var(--ui-bg-input);
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius-sm);
    padding: 9px 11px;
}

.hud-card-title {
    display: block;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ui-accent);
    margin-bottom: 4px;
}

.hud-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ui-text-dim);
}

/* ============================================================
   Star info (map mode content of the target info box)
   ============================================================ */
#starInfoCard {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.starInfoName {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding-right: 30px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--ui-accent-strong);
    text-shadow: 0 0 16px rgba(142, 216, 255, 0.35);
}

.starInfoColor {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 10px currentColor;
    background: #ffffff;
}

.starInfoStats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0;
}

.starInfoStat {
    background: var(--ui-bg-input);
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius-sm);
    padding: 7px 9px;
}

.starInfoStat dt {
    margin: 0;
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ui-text-faint);
}

.starInfoStat dd {
    margin: 2px 0 0;
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--ui-text);
}

.starInfoDescription {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ui-text-dim);
}

.starInfoStatus {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.3px;
    color: var(--ui-text-faint);
    text-align: center;
}

.hud-action {
    background: linear-gradient(180deg, rgba(142, 216, 255, 0.22), rgba(142, 216, 255, 0.1));
    color: var(--ui-accent-strong);
    border: 1px solid var(--ui-stroke-bright);
    border-radius: 999px;
    padding: 9px 14px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: background 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.hud-action:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(142, 216, 255, 0.34), rgba(142, 216, 255, 0.16));
    box-shadow: var(--ui-glow);
    color: #ffffff;
}

.hud-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   Time panel
   ============================================================ */
#timeScaleOptions {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 40vh;
    overflow-y: auto;
}

.timeScaleOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--ui-text-dim);
    border-radius: var(--ui-radius-sm);
    padding: 7px 11px;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 12.5px;
    text-align: left;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.timeScaleOption:hover {
    background: var(--ui-accent-soft);
    color: var(--ui-text);
}

.timeScaleOption[aria-selected="true"] {
    background: var(--ui-accent-soft);
    border-color: var(--ui-stroke-bright);
    color: var(--ui-accent-strong);
}

.timeScaleOptionShort {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ui-text-faint);
}

.timeScaleOption[aria-selected="true"] .timeScaleOptionShort {
    color: var(--ui-accent);
}

/* ============================================================
   Settings modal
   ============================================================ */
#settingsModal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hud-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 4, 9, 0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hud-modal {
    position: relative;
    width: min(560px, calc(100vw - 32px));
    max-height: min(78vh, 720px);
    display: flex;
    flex-direction: column;
    animation: hudModalIn 0.18s ease-out;
}

@keyframes hudModalIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hud-modal-body {
    padding: 4px 16px 16px;
    overflow-y: auto;
}

/* --- Settings content (rendered by uiControls.js) --- */
.hud-modal-body .section {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--ui-bg-input);
    border: 1px solid var(--ui-stroke);
    border-radius: var(--ui-radius-sm);
}

.hud-modal-body .section h3 {
    margin: 0 0 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ui-accent);
    border-bottom: 1px solid var(--ui-stroke);
    padding-bottom: 7px;
}

.hud-modal-body .section > small {
    display: block;
    font-size: 11px;
    color: var(--ui-text-faint);
    margin-bottom: 8px;
}

.hud-modal-body .controlRow {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    align-items: center;
    padding: 8px 0;
}

.hud-modal-body .controlRow label {
    font-size: 13px;
    letter-spacing: 0.3px;
}

.hud-modal-body .controlRow small {
    grid-column: 2;
    font-size: 11px;
    color: var(--ui-text-faint);
    margin-top: 2px;
}

.hud-modal-body .lowPowerControl.is-disabled {
    opacity: 0.5;
}

.hud-modal-body .lowPowerControl.is-disabled input[type="checkbox"] {
    cursor: not-allowed;
}

.hud-modal-body input[type="checkbox"],
.hud-modal-body input[type="range"] {
    accent-color: var(--ui-accent);
}

.hud-modal-body label {
    display: block;
    margin-top: 10px;
    font-size: 13px;
}

.hud-modal-body label span {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ui-accent);
    margin-left: 6px;
}

.hud-modal-body label small {
    color: var(--ui-text-faint);
    font-size: 11px;
}

.hud-modal-body input[type="range"] {
    width: 100%;
    margin: 6px 0 2px;
}

/* ============================================================
   Overlays
   ============================================================ */
#loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(1, 4, 9, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--ui-text);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 4000;
}

.loadingFrame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ui-accent);
    text-shadow: 0 0 12px rgba(142, 216, 255, 0.4);
}

.loadingReticle {
    width: 44px;
    height: 44px;
    border: 1px solid var(--ui-stroke-bright);
    border-top-color: var(--ui-accent);
    border-radius: 50%;
    animation: hudSpin 1s linear infinite;
    box-shadow: var(--ui-glow), inset 0 0 12px rgba(142, 216, 255, 0.12);
}

@keyframes hudSpin {
    to {
        transform: rotate(360deg);
    }
}

#textureStatusOverlay {
    position: fixed;
    bottom: calc(var(--ui-bar-h) + var(--ui-gap));
    right: var(--ui-gap);
    background: var(--ui-bg-strong);
    border: 1px solid var(--ui-stroke);
    border-left: 2px solid var(--ui-warn);
    color: var(--ui-text-dim);
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border-radius: var(--ui-radius-sm);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 1900;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

/* Star map hover tooltip (element created by StarMap.js) */
.starMapTooltip {
    z-index: 2500;
    background: var(--ui-bg-strong);
    border: 1px solid var(--ui-stroke-bright);
    border-radius: 999px;
    color: var(--ui-text);
    padding: 5px 12px;
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), var(--ui-glow);
    opacity: 1;
    transition: opacity 0.22s ease;
}

.starMapTooltip[data-faded="true"] {
    opacity: 0;
}

/* ============================================================
   Motion + small screens
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    body[data-hud-mode="starmap"] .hud-starmap-only,
    body[data-hud-mode="system"] .hud-system-only,
    .popover,
    .hud-modal {
        animation: none;
    }
}

@media (max-width: 900px) {

    #cameraVelocity,
    .xrStatusMessage {
        display: none !important;
    }

    .time-jd {
        display: none;
    }
}

@media (max-width: 760px) {
    :root {
        --ui-gap: 8px;
    }

    #hudBar {
        gap: 8px;
        padding: 8px;
    }

    .chip {
        max-width: 150px;
        padding: 0 12px;
    }

    .time-date {
        display: none;
    }

    /* The layer toggles are conveniences the Settings panel still carries;
       a phone-width bar has no room for two more buttons. */
    .bar-layer-btn {
        display: none;
    }

    .popover-left,
    .popover-center {
        left: var(--ui-gap);
        right: var(--ui-gap);
        transform: none;
        width: auto;
        max-height: 55vh;
    }

    .popover-center {
        animation: popoverIn 0.18s ease-out;
    }

    .popover-right {
        top: auto;
        bottom: calc(var(--ui-bar-h) + var(--ui-gap));
        transform: none;
        left: var(--ui-gap);
        right: var(--ui-gap);
        width: auto;
        max-height: 50vh;
        animation: popoverIn 0.18s ease-out;
    }
}