/* ---- Design tokens (M5.9c — Retro CRT phosphor terminal direction) -
 * Pure dark CRT background, single-color phosphor green ramp for text and
 * accent, full-monospace typography. WarGames / Apple ][ / DEC VT100 mood
 * — minimal, almost-naive, every glyph carries its own halo. Glow is
 * implicit, not loud; the rgb(green) is the only color identity.
 */
:root {
    /* Surfaces — pure black with the faintest green-tint stack */
    --bg-deep:        #000000;
    --bg-base:        #030a04;
    --surface-1:      rgba(8, 22, 12, 0.82);    /* primary panel */
    --surface-2:      rgba(14, 32, 18, 0.90);   /* hover / inset blocks */
    --surface-glass:  rgba(8, 30, 18, 0.12);    /* floating HUDs — frosted glass */
    --surface-glass-strong: rgba(6, 24, 14, 0.32); /* modal panels — heavier glass */
    --modal-veil:     rgba(0, 8, 4, 0.20);       /* modal-overlay — keeps starmap visible */
    --surface-edge:   rgba(51, 255, 102, 0.22); /* phosphor border */
    --surface-edge-strong: rgba(51, 255, 102, 0.48);

    /* Accent — phosphor green, the only saturated color in the system */
    --accent:         #33ff66;
    --accent-bright:  #7fff95;
    --accent-deep:    #1aa340;
    --accent-glow:    rgba(51, 255, 102, 0.42);

    /* Semantic — the terminal world only really has 'on' and 'off';
       we use desaturated tints for variety where the meaning matters. */
    --ok:             #5af75e;   /* same family, brighter */
    --warn:           #d4d433;   /* yellowish caution */
    --danger:         #ff4d4d;   /* off-spectrum alert */
    --danger-bright:  #ff9c9c;   /* alert hover / text-on-dark-red */
    --info:           #4dd4ff;   /* off-spectrum info */
    --amber:          #fbbf24;   /* in-transit / independent status */

    /* FROM THE DARK — a dead colony's still-arriving light. Cold, desaturated
       blue-grey: the colour of a signal with no one behind it. */
    --fromdark-edge:   #4a5a6a;
    --fromdark-accent: #6a8098;
    --fromdark-text:   #9fb0c0;
    --fromdark-bright: #8aa0b4;

    /* ALIEN VIOLET — a living but drifted voice (undecoded transcripts). */
    --alien-violet:        #8f7fe0;
    --alien-violet-deep:   #6f5fc0;
    --alien-violet-bright: #b8a6ff;
    --alien-violet-text:   #cfc4ff;

    /* Text — phosphor green ramp, bright down to almost-gone */
    --text-bright:    #aaffbb;
    --text-base:      #33ff66;
    --text-muted:     #1f9942;
    --text-dim:       #144d24;

    /* Typography — full monospace; the terminal speaks one tongue */
    --font-ui:        "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --font-mono:      "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* One small size for all body / descriptive / empty-state / list text,
       so no paragraph renders larger than the terminal chrome around it.
       HYBRID-UPPERCASE pass: nudged ~1px smaller for a denser console feel. */
    --font-small:     0.72rem;
}

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

html, body {
    height: 100%;
    background: var(--bg-deep);
    color: var(--text-base);
    font-family: var(--font-ui);
    overflow: hidden;
}
/* rem anchor stays at 14px (so --font-small's rem math is stable), while the
   inherited body default drops for a denser body-text feel (coherence pass:
   Peter — "indokolatlanul nagy a kenyérszöveg helyenként"). */
html { font-size: 14px; }
body { font-size: 12px; }

#app {
    display: grid;
    grid-template-columns: 1fr 64px 360px;
    height: 100vh;
}

@media (max-width: 768px) {
    #app {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto auto;
    }
}

/* ---- Tab-rail: vertical icon strip between map and aside --------- */
#tab-rail {
    background: var(--bg-base);
    border-left: 1px solid var(--surface-edge);
    border-right: 1px solid var(--surface-edge);
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    gap: 4px;
}
.rail-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    cursor: pointer;
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    transition: color 0.15s, background 0.15s;
}
.rail-btn .rail-glyph {
    font-size: 22px;
    line-height: 1;
}
.rail-btn .rail-label {
    font-size: 9px;
    letter-spacing: 0.12em;
}
.rail-btn:hover {
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.04);
}
.rail-btn.active {
    color: var(--accent);
    background: rgba(51, 255, 102, 0.08);
    text-shadow: 0 0 8px var(--accent-glow);
}
.rail-btn.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}

#map-container {
    position: relative;
    background: radial-gradient(ellipse at center, var(--bg-base) 0%, #000 80%);
    overflow: hidden;
}

#star-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ---- Top status-bar: terminal-style readout strip --------------- */
#top-bar {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    z-index: 11;
    pointer-events: none;
    box-shadow: 0 0 24px rgba(51, 255, 102, 0.10);
    white-space: nowrap;
}
#top-bar .top-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-right: 1px solid var(--surface-edge);
    white-space: nowrap;
}
#top-bar .top-cell:last-child { border-right: 0; }
#top-bar .top-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 8.5px;
}
#top-bar #top-year,
#top-bar #top-stars,
#top-bar #top-probes,
#top-bar #top-atlas,
#top-bar #top-pop,
#top-bar #top-output,
#top-bar #top-knowledge {
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px var(--accent-glow);
}

/* Fleet toggle cell — clickable inside the otherwise pointer-events:none
   top-bar. ON = phosphor bright, OFF = dimmed muted gray. */
#top-bar .top-cell--toggle {
    pointer-events: auto;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
#top-bar .top-cell--toggle:hover {
    background: rgba(51, 255, 102, 0.06);
}
#top-bar #fleet-toggle-value {
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px var(--accent-glow);
    letter-spacing: 0.06em;
}
#top-bar .top-cell--toggle.is-off #fleet-toggle-value {
    color: var(--text-dim);
    text-shadow: none;
}
#top-bar .top-cell--toggle.is-off .top-label {
    opacity: 0.5;
}

/* ---- Two-tier event alerts ----------------------------------------
   Loud alert: top-bar banner overlay — SETI events + severity=critical.
   Pulses phosphor green, click → opens TX tab and scrolls to event.
   Quiet alert: tab-rail TX badge — every new unseen event since last ack. */
#event-banner {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 640px;
    padding: 10px 16px;
    background: rgba(8, 30, 18, 0.78);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--accent);
    border-radius: 4px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    text-shadow: 0 0 6px var(--accent-glow);
    box-shadow: 0 0 28px rgba(51, 255, 102, 0.30), 0 0 60px rgba(51, 255, 102, 0.18);
    cursor: pointer;
    z-index: 12;
    animation: event-banner-pulse 1.4s ease-in-out infinite;
}
#event-banner.hidden { display: none; }
#event-banner:hover { background: rgba(10, 40, 22, 0.92); }
#event-banner .banner-prefix {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.14em;
    white-space: nowrap;
    flex-shrink: 0;
}
#event-banner #event-banner-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#event-banner #event-banner-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    flex-shrink: 0;
}
#event-banner #event-banner-close:hover {
    color: var(--accent-bright);
    text-shadow: 0 0 6px var(--accent-glow);
}
@keyframes event-banner-pulse {
    0%, 100% { box-shadow: 0 0 28px rgba(51, 255, 102, 0.30), 0 0 60px rgba(51, 255, 102, 0.18); }
    50%      { box-shadow: 0 0 38px rgba(51, 255, 102, 0.55), 0 0 90px rgba(51, 255, 102, 0.30); }
}

/* Tab-rail TX badge — small phosphor count, soft pulse for ~2 sec on new */
.rail-btn .rail-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent);
    color: #000;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 8px var(--accent-glow);
}
.rail-btn .rail-badge.hidden { display: none; }
.rail-btn .rail-badge.fresh {
    animation: rail-badge-pulse 0.9s ease-in-out 0s 3;
}
@keyframes rail-badge-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--accent-glow);   transform: scale(1.0); }
    50%      { box-shadow: 0 0 14px var(--accent-glow);  transform: scale(1.18); }
}

/* Missing severity class — SETI Tier-4 / megastructure-grade events */
.severity-critical {
    color: var(--accent-bright) !important;
    text-shadow: 0 0 8px var(--accent-glow);
    font-weight: 700;
}

/* Focus flash — banner click scrollIntoView highlight on a feed row */
.feed-item.focus-flash {
    animation: feed-focus-flash 1.2s ease-out 1;
}
@keyframes feed-focus-flash {
    0%   { box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow); background: rgba(51, 255, 102, 0.10); }
    100% { box-shadow: none; background: transparent; }
}

.settings-divider {
    margin: 18px 0 8px;
    border-top: 1px solid var(--surface-edge);
}
.settings-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--font-mono);
    color: var(--text-base);
    font-size: 11px;
}
/* Phosphor checkboxes — ONE idiom everywhere (Peter: no stock system
   boxes). appearance:none kills the native macOS widget; the box is drawn
   in console chrome: dark well, phosphor edge, glowing ✓ when lit. */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 13px; height: 13px;
    flex: none;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--accent-deep);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    vertical-align: -2px;
    margin: 0 3px 0 0;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked {
    border-color: var(--accent);
    background: rgba(51, 255, 102, 0.14);
    box-shadow: 0 0 6px var(--accent-glow);
}
input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; line-height: 1;
    color: var(--accent-bright);
    text-shadow: 0 0 4px var(--accent-glow);
}
/* The exodus consent stays amber — a different gravity of decision. */
.fleet-exodus-row input[type="checkbox"]:checked {
    border-color: var(--amber);
    background: rgba(255, 190, 80, 0.14);
    box-shadow: 0 0 6px rgba(255, 190, 80, 0.4);
}
.fleet-exodus-row input[type="checkbox"]:checked::after {
    color: var(--amber);
    text-shadow: 0 0 4px rgba(255, 190, 80, 0.5);
}
.settings-checkbox input[type="checkbox"] {
    cursor: pointer;
}

/* BB/P3 — Player-named constellations, map-integrated builder. The CFG
   panel only lists existing constellations (with a delete button);
   creation happens via the floating ✧ button on the map + on-map HUD. */
.constellation-empty { font-size: 10px; margin: 10px 0 6px; color: var(--text-muted); }

/* BB/UI — Voyager control cluster. Row of stand-alone capsule buttons
   at the bottom-center of the map: independent breathing space, subtle
   glow, glass with phosphor accent. Each pill reads as its own switch,
   not a segment in a strip. */
#fab-cluster {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    display: flex;
    gap: 14px;
    padding: 0;
    background: transparent;
    border: 0;
}
.fab-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    background: rgba(8, 16, 12, 0.72);
    border: 1px solid var(--accent);
    border-radius: 18px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(51, 255, 102, 0.18), inset 0 0 6px rgba(51, 255, 102, 0.08);
    text-shadow: 0 0 6px rgba(51, 255, 102, 0.45);
    transition: background 0.15s, box-shadow 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
.fab-pill:hover {
    background: rgba(20, 45, 30, 0.85);
    box-shadow: 0 0 18px rgba(51, 255, 102, 0.45), inset 0 0 8px rgba(51, 255, 102, 0.14);
    transform: translateY(-1px);
}
.fab-pill.is-active {
    background: rgba(60, 25, 25, 0.9);
    border-color: var(--danger-bright);
    color: var(--danger-bright);
    box-shadow: 0 0 14px rgba(255, 77, 77, 0.35), inset 0 0 6px rgba(255, 77, 77, 0.10);
    text-shadow: 0 0 6px rgba(255, 77, 77, 0.5);
}
.fab-pill.is-off {
    border-color: rgba(51, 255, 102, 0.35);
    color: rgba(51, 255, 102, 0.60);
    box-shadow: none;
    text-shadow: none;
}
.fab-pill .fab-icon {
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(51, 255, 102, 0.6);
}
.fab-pill.is-off .fab-icon { text-shadow: none; }

/* Build HUD — top-center floating panel, visible only during build mode. */
#build-hud {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    width: 340px;
    max-height: calc(100vh - 240px);
    background: rgba(10, 18, 15, 0.92);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 12px 14px;
    color: var(--text-base);
    font-family: var(--font-mono);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 0 22px rgba(51, 255, 102, 0.22);
}
.build-hud-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(51, 255, 102, 0.20);
    padding-bottom: 6px;
}
.build-hud-title {
    color: var(--accent);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
#build-hud-cancel {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
#build-hud-cancel:hover { color: var(--danger-bright); }
.build-hud-hint { font-size: 10px; color: var(--text-muted); margin: 0; }
#build-hud-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
#build-hud-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
    background: rgba(51, 255, 102, 0.06);
    border-radius: 3px;
    font-size: 11px;
}
#build-hud-list li .rank {
    color: var(--text-muted);
    font-size: 9px;
    min-width: 18px;
}
#build-hud-list li .name {
    flex: 1;
    color: var(--text-base);
}
#build-hud-list li .remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    line-height: 1;
}
#build-hud-list li .remove:hover { color: var(--danger-bright); }
.build-hud-empty {
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    padding: 10px;
    font-size: 11px;
}
.build-hud-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    padding-top: 6px;
    border-top: 1px solid rgba(51, 255, 102, 0.15);
}
#build-hud-name {
    flex: 1;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(51, 255, 102, 0.30);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 3px;
    box-sizing: border-box;
}
#build-hud-name:focus { outline: none; border-color: var(--accent); }
#build-hud-save {
    background: rgba(51, 255, 102, 0.15);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.15s, opacity 0.15s;
}
#build-hud-save:hover:not(:disabled) { background: rgba(51, 255, 102, 0.28); }
#build-hud-save:disabled { opacity: 0.35; cursor: not-allowed; }
.build-hud-status { font-size: 10px; min-height: 1em; }
.constellation-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 8px;
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    margin-top: 4px;
    background: rgba(255, 211, 61, 0.04);
    font-family: var(--font-mono);
    font-size: 11px;
}
.constellation-row-name {
    flex: 1;
    color: #ffd33d;
    text-shadow: 0 0 5px rgba(255, 211, 61, 0.40);
    font-weight: 700;
}
.constellation-row-meta { color: var(--text-muted); font-size: 9px; }
.constellation-row-del {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
}
.constellation-row-del:hover { color: var(--danger); }
.constellation-row-legend {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 0 4px;
}
.constellation-row-legend:hover { color: var(--accent); }

/* BB — Legend display + inline editor in the CFG list. */
.constellation-legend-text {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    font-style: italic;
    line-height: 1.5;
    padding: 4px 8px 6px;
    border-left: 2px solid rgba(255, 211, 61, 0.35);
    margin: 2px 0 6px 6px;
    white-space: pre-wrap;
}
.constellation-legend-edit {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 4px 0 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 211, 61, 0.35);
    border-radius: 3px;
}
.constellation-legend-input {
    width: 100%;
    min-height: 72px;
    max-height: 200px;
    resize: vertical;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--surface-edge);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 3px;
    box-sizing: border-box;
    line-height: 1.5;
}
.constellation-legend-input:focus { outline: none; border-color: #ffd33d; }
.constellation-legend-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.constellation-legend-count { font-size: 9px; flex: 1; }
.constellation-legend-cancel,
.constellation-legend-save {
    background: rgba(255, 211, 61, 0.10);
    border: 1px solid #ffd33d;
    color: #ffd33d;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}
.constellation-legend-cancel {
    background: transparent;
    border-color: var(--surface-edge);
    color: var(--text-muted);
}
.constellation-legend-save:hover { background: rgba(255, 211, 61, 0.22); }

.build-select-ring {
    width: 22px;
    height: 22px;
    border: 2px solid #ffd33d;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 10px rgba(255, 211, 61, 0.55), inset 0 0 6px rgba(255, 211, 61, 0.40);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: build-ring-pulse 1.4s ease-in-out infinite;
}
@keyframes build-ring-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1.0); box-shadow: 0 0 10px rgba(255, 211, 61, 0.55), inset 0 0 6px rgba(255, 211, 61, 0.40); }
    50%      { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 16px rgba(255, 211, 61, 0.75), inset 0 0 8px rgba(255, 211, 61, 0.55); }
}

.user-constellation-label {
    color: #b8c4d4;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-shadow: 0 0 6px rgba(184, 196, 212, 0.35);
    font-style: italic;
    opacity: 0.85;
    pointer-events: none;
    white-space: nowrap;
}
.seti-stats {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    margin: 4px 0 6px;
}
.seti-stats dt { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.seti-stats dd { color: var(--accent-bright); font-variant-numeric: tabular-nums; margin: 0; text-shadow: 0 0 6px var(--accent-glow); }

/* SETI noise waterfall — a scrolling spectrogram "listen strip". Mostly
   procedural phosphor static; detected civilizations thread through it as
   barely-brighter narrowband lines. */
.seti-wf-wrap {
    position: relative;
    margin: 2px 0 10px;
}
.seti-waterfall {
    display: block;
    width: 100%;
    height: 140px;
    background: #000;
    border: 1px solid var(--accent-deep);
    border-radius: 3px;
    box-shadow: inset 0 0 12px rgba(51, 255, 102, 0.10), 0 0 6px rgba(51, 255, 102, 0.06);
    image-rendering: pixelated;
}
/* Faint scanline + vignette overlay — keeps the CRT feel without washing out
   the static. Pointer-events off so it never eats clicks. */
.seti-wf-wrap::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 3px;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.14) 3px),
        radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
}
.seti-wf-cap {
    margin-top: 5px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: var(--text-dim);
}
.seti-wf-cap .seti-wf-cap-n { color: var(--text-muted); }

.seti-archive {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 6px 0 4px;
}
/* LIST IDIOM (coherence pass): rows are delimited entries, not boxed cards —
   hairline separators, quiet hover, a left tint only where it means something. */
.seti-archive-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    transition: background 0.15s;
}
.seti-archive-row:last-child { border-bottom: none; }
.seti-archive-row:hover {
    background: rgba(51, 255, 102, 0.06);
}
.seti-archive-row .sar-line1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.seti-archive-row .sar-name {
    color: var(--accent-bright);
    font-weight: 700;
    text-shadow: 0 0 6px var(--accent-glow);
}
.seti-archive-row .sar-tier {
    color: var(--accent);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 6px var(--accent-glow);
}
.seti-archive-row .sar-line2 {
    display: flex;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.seti-archive-row .sar-events {
    color: var(--text-base);
}

/* Intelligence readout — the recon layer. Per scouted civilization: source
   star, a light-delayed intel-level bar, and the facts decoded so far. Cooler
   and quieter than the SETI archive — this is patient watching, not a Sagan
   moment. */
.recon-intel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 6px 0 4px;
}
.recon-intel-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    background: rgba(51, 255, 102, 0.035);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.recon-intel-row:hover {
    border-color: var(--accent-deep);
    background: rgba(51, 255, 102, 0.08);
    box-shadow: 0 0 12px rgba(51, 255, 102, 0.16);
}
.recon-intel-row .ri-line1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.recon-intel-row .ri-name {
    color: var(--accent);
    font-weight: 700;
}
.recon-intel-row .ri-pct {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 10px;
}
.recon-intel-row .ri-bar {
    height: 5px;
    border-radius: 3px;
    background: rgba(51, 255, 102, 0.10);
    overflow: hidden;
}
.recon-intel-row .ri-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent-deep);
    box-shadow: 0 0 8px rgba(51, 255, 102, 0.35);
    transition: width 0.4s ease;
}
.recon-intel-row .ri-facts {
    list-style: none;
    margin: 2px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.recon-intel-row .ri-facts li {
    color: var(--text-base);
    font-size: 10px;
    line-height: 1.4;
    padding-left: 10px;
    position: relative;
}
.recon-intel-row .ri-facts li::before {
    content: "⊙";
    position: absolute;
    left: 0;
    color: var(--accent-deep);
    font-size: 9px;
}
.recon-intel-row .ri-pending {
    font-size: 10px;
    font-style: italic;
    margin: 2px 0 0;
}

/* Pale-dot postcards — the ARC archive gallery. Each thumbnail is treated
   in CSS to read as a 1970s NASA frame on a phosphor CRT: green duotone,
   scanlines, vignette. Fidelity degradation (hi/mid/lo) is deliberately
   visible — a low-res capture is blurrier, grainier, more scanline-smeared. */
.postcard-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 8px 0 4px;
    padding: 0 16px;
}
/* One postcard per row: a square Voyager thumbnail on the left, caption to
   its right. Wider rows let the world's name breathe on a single line. */
.postcard {
    margin: 0;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 12px;
    align-items: center;
}
.postcard-frame {
    position: relative;
    width: 84px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--accent-deep);
    border-radius: 4px;
    background: var(--bg-base);
    box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.5);
}
.postcard-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Green phosphor duotone — tuned toward phosphor, not lime. Per-fidelity
       overrides below re-declare the full filter (blur + contrast + brightness). */
    filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(1.6) contrast(1.05) brightness(0.95);
}
/* Scanlines — thin dark horizontal lines, multiplied over the frame. */
.postcard-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.28) 0px,
        rgba(0, 0, 0, 0.28) 1px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 3px
    );
}
/* Soft vignette — a radial dark inset toward the corners. */
.postcard-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.6) 100%);
}
.postcard-cap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}
.postcard-name {
    color: var(--accent-bright);
    text-shadow: 0 0 6px var(--accent-glow);
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.postcard-meta {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 9px;
}

/* --- Fidelity degradation: hi (crisp) → mid → lo (grainy/soft) --- */
.postcard--hi .postcard-img {
    filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(1.6) contrast(1.14) brightness(0.95) blur(0px);
}
.postcard--mid .postcard-img {
    filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(1.55) contrast(1.0) brightness(1.0) blur(0.4px);
}
.postcard--lo .postcard-img {
    filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(1.45) contrast(0.88) brightness(1.08) blur(1.2px);
}
/* Lower fidelity → stronger, tighter scanlines. */
.postcard--mid .postcard-frame::after {
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.38) 0px,
        rgba(0, 0, 0, 0.38) 1px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 3px
    );
}
.postcard--lo .postcard-frame::after {
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.52) 0px,
        rgba(0, 0, 0, 0.52) 1px,
        rgba(0, 0, 0, 0) 1px,
        rgba(0, 0, 0, 0) 2px
    );
}

/* AC/2 — Pending command HUD widget. CMD cell a top-barban + floating
   panel a futó parancsokkal. Inactive state (0 db parancs): dimmed; active
   (>=1): phosphor bright. Click → toggle panel. */
#cmd-panel {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(8, 30, 18, 0.92);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid var(--accent);
    border-radius: 4px;
    padding: 10px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-base);
    z-index: 13;
    min-width: 320px;
    max-width: 440px;
    box-shadow: 0 0 28px rgba(51, 255, 102, 0.30);
}
#cmd-panel.hidden { display: none; }
.cmd-panel-header {
    color: var(--accent-bright);
    text-shadow: 0 0 6px var(--accent-glow);
    letter-spacing: 0.16em;
    font-size: 9px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--surface-edge);
}
.cmd-panel-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    margin-top: 4px;
    background: rgba(51, 255, 102, 0.04);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cmd-panel-row:hover {
    background: rgba(51, 255, 102, 0.10);
    border-color: var(--accent);
    box-shadow: 0 0 12px rgba(51, 255, 102, 0.22);
}
.cmd-panel-row .cpr-line1 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cmd-panel-row .cpr-type {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.10em;
    text-shadow: 0 0 6px var(--accent-glow);
}
.cmd-panel-row .cpr-probe { color: var(--accent-bright); text-shadow: 0 0 5px var(--accent-glow); }
.cmd-panel-row .cpr-line2 { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.cmd-panel-row .cpr-eta { color: var(--text-base); }
.cmd-panel-empty { color: var(--text-muted); font-style: italic; padding: 10px 0; text-align: center; }

/* AB/4 — Probe command modal — overlay centered, phosphor terminal style. */
/* AC/3 — Pending command badge a mission card-on. */
.mission-cmd-badge {
    margin-top: 6px;
    padding: 4px 8px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    background: rgba(51, 255, 102, 0.08);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-shadow: 0 0 5px var(--accent-glow);
    box-shadow: 0 0 8px rgba(51, 255, 102, 0.18);
    display: inline-block;
    animation: cmd-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes cmd-badge-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(51, 255, 102, 0.18); }
    50%      { box-shadow: 0 0 16px rgba(51, 255, 102, 0.40); }
}

.mission-cmd-btn {
    align-self: flex-end;
    background: transparent;
    border: 1px solid var(--surface-edge);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 6px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.mission-cmd-btn:hover {
    color: var(--accent-bright);
    border-color: var(--accent);
    background: rgba(51, 255, 102, 0.08);
    text-shadow: 0 0 6px var(--accent-glow);
}
#probe-command-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
#probe-command-modal.hidden { display: none; }
.probe-command-content {
    width: 460px;
    max-width: 92vw;
    background: rgba(8, 30, 18, 0.92);
    border: 1px solid var(--accent);
    border-radius: 4px;
    box-shadow: 0 0 32px rgba(51, 255, 102, 0.30);
    font-family: var(--font-mono);
    color: var(--text-base);
    font-size: 11px;
}
.probe-command-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--surface-edge);
}
.probe-command-header h3 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--accent-bright);
    text-shadow: 0 0 6px var(--accent-glow);
}
#probe-command-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
}
#probe-command-close:hover { color: var(--accent-bright); }
#probe-command-body { padding: 14px 16px; }
.pc-info { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--surface-edge); }
.pc-row { display: flex; justify-content: space-between; padding: 2px 0; }
.pc-label { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.10em; font-size: 9px; }
.pc-value { color: var(--accent-bright); text-shadow: 0 0 5px var(--accent-glow); font-variant-numeric: tabular-nums; }
.pc-section { margin: 12px 0; padding: 10px; border: 1px solid var(--surface-edge); border-radius: 3px; }
.pc-section-title { color: var(--accent); letter-spacing: 0.10em; font-weight: 700; margin-bottom: 4px; text-shadow: 0 0 6px var(--accent-glow); }
.pc-section p { margin: 4px 0 8px; font-size: 10px; }
.pc-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--surface-edge);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 3px;
    margin-bottom: 4px;
    box-sizing: border-box;
}
.pc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.pc-muted { font-size: 10px; margin: 4px 0 8px; min-height: 1.2em; }
.pc-action-btn {
    background: rgba(51, 255, 102, 0.10);
    border: 1px solid var(--accent);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    text-shadow: 0 0 6px var(--accent-glow);
    transition: background 0.15s, box-shadow 0.15s;
}
.pc-action-btn:hover { background: rgba(51, 255, 102, 0.18); box-shadow: 0 0 12px var(--accent-glow); }
.pc-action-btn:disabled { color: var(--text-dim); border-color: var(--surface-edge); cursor: not-allowed; background: transparent; text-shadow: none; }
.pc-status { margin-top: 8px; min-height: 1.3em; font-size: 10px; }
.pc-status.success { color: var(--accent-bright); text-shadow: 0 0 6px var(--accent-glow); }
.pc-status.error { color: var(--danger); }

/* AA/3 — SETI ring marker: every star with a detected civilization gets
   a small phosphor ring overlay on the 3D map, always visible regardless
   of zoom. Pulsing border-glow draws the eye when scanning the slice. */
.seti-map-marker {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 8px var(--accent-glow), inset 0 0 4px rgba(51, 255, 102, 0.35);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: seti-map-marker-pulse 2.6s ease-in-out infinite;
}
@keyframes seti-map-marker-pulse {
    0%, 100% { box-shadow: 0 0 8px var(--accent-glow),  inset 0 0 4px rgba(51, 255, 102, 0.35); transform: translate(-50%, -50%) scale(1.0); }
    50%      { box-shadow: 0 0 18px rgba(51, 255, 102, 0.65), inset 0 0 6px rgba(51, 255, 102, 0.55); transform: translate(-50%, -50%) scale(1.18); }
}

/* HZ-candidate label marker — 🜨 alchemical earth glyph prefix in
   phosphor green, visible on stars where the optimistic HZ contains
   at least one terrestrial body. Discreet hint to where to look. */
.star-label.has-hz-candidate {
    color: var(--text-bright);
    text-shadow: 0 0 5px var(--accent-glow);
}
.star-label.has-hz-candidate::first-letter {
    color: var(--accent);
    text-shadow: 0 0 6px var(--accent-glow);
}

/* Probe-instrumented toggle — Voyager-felszerelt tech-tree checkbox.
   Discreet phosphor-tinted label near dispatch buttons. */
.probe-instrumented-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 6px;
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    user-select: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.probe-instrumented-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.probe-instrumented-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
    margin: 0;
}
.probe-instrumented-toggle:has(input:checked) {
    color: var(--accent-bright);
    border-color: var(--accent);
    background: rgba(51, 255, 102, 0.06);
    text-shadow: 0 0 6px var(--accent-glow);
}

/* Name-at-dispatch field — phosphor input mirroring the star-naming box. */
.probe-name-input {
    background: var(--surface-1);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    padding: 5px 8px;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    min-width: 220px;
}
.probe-name-input::placeholder {
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
.probe-name-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
#route-builder .probe-name-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
}

/* SETI events — Sagan-pillanat phosphor-emphasis a feed-listában, hogy a
   radio_burst és biomarker_anomaly sorok ne kelljen scrollolni hozzá. */
.feed-item--seti {
    border: 1px solid var(--accent) !important;
    border-left-width: 3px !important;
    background: rgba(51, 255, 102, 0.06);
    box-shadow: 0 0 14px rgba(51, 255, 102, 0.18);
    padding-left: 10px;
    border-radius: 3px;
    animation: feed-seti-pulse 2.4s ease-in-out infinite;
}
.feed-item--seti .feed-type {
    color: var(--accent-bright) !important;
    text-shadow: 0 0 6px var(--accent-glow);
    letter-spacing: 0.10em;
    font-weight: 700;
}
.feed-item--seti .feed-arrow {
    color: var(--accent) !important;
}
.feed-item--seti .feed-msg {
    color: var(--accent-bright);
}
@keyframes feed-seti-pulse {
    0%, 100% { box-shadow: 0 0 14px rgba(51, 255, 102, 0.18); }
    50%      { box-shadow: 0 0 22px rgba(51, 255, 102, 0.36); }
}

/* Signal-overdue events — a probe went quiet and home can only infer.
   The most ominous line in the game: muted caution-yellow, no glow, no
   pulse — deliberately the opposite of the celebratory SETI emphasis. */
.feed-item--overdue {
    border-left: 3px solid var(--warn) !important;
    background: rgba(212, 212, 51, 0.04);
    padding-left: 10px;
    border-radius: 3px;
}
.feed-item--overdue .feed-type {
    color: var(--warn) !important;
    letter-spacing: 0.08em;
}
.feed-item--overdue .feed-arrow {
    color: var(--warn) !important;
}
.feed-item--overdue .feed-msg {
    color: var(--text-dim);
}

/* Light older than the silence — a ghost transmission from a probe already
   lost. Hushed and elegiac: a faint, cool border, dimmed and italicised, no
   glow — light arriving from a source that is no longer there. */
.feed-item--lastlight {
    border-left: 3px solid var(--accent-deep) !important;
    background: rgba(51, 255, 102, 0.045);
    padding-left: 10px;
    border-radius: 3px;
    box-shadow: inset 2px 0 8px rgba(51, 255, 102, 0.06);
}
.feed-item--lastlight .feed-type {
    color: var(--text-muted) !important;
    letter-spacing: 0.10em;
}
.feed-item--lastlight .feed-arrow {
    color: var(--accent-deep) !important;
}
.feed-item--lastlight .feed-msg {
    color: var(--text-base);
    font-style: italic;
}

/* Light-echo anniversary — contemplative, not urgent: a quiet note that a
   moment of your past has just become visible somewhere far. Soft phosphor,
   italic, a faint dashed edge to read as "geometry" rather than "signal". */
.feed-item--echo {
    border-left: 3px dashed var(--accent-deep) !important;
    background: rgba(51, 255, 102, 0.03);
    padding-left: 10px;
    border-radius: 3px;
}
.feed-item--echo .feed-type {
    color: var(--text-muted) !important;
    letter-spacing: 0.10em;
}
.feed-item--echo .feed-arrow {
    color: var(--accent-deep) !important;
}
.feed-item--echo .feed-msg {
    color: var(--text-muted);
    font-style: italic;
}

/* From-the-dark — a dead colony's light still arriving (ghost / last light /
   aid-lost). Deliberately DIM, but a cold, scanlined "dead channel" that
   breathes so it isn't lost among the phosphor. The tint is desaturated
   blue-grey (not the living green) — the colour of a signal with no one behind
   it. Overrides the echo/lastlight base it also carries. */
.feed-item--fromdark {
    border-left: 3px solid var(--fromdark-edge) !important;
    background:
        repeating-linear-gradient(0deg, rgba(150, 170, 190, 0.05) 0px, rgba(150, 170, 190, 0.05) 1px, transparent 1px, transparent 3px),
        rgba(40, 52, 66, 0.28) !important;
    padding-left: 10px;
    border-radius: 3px;
    box-shadow: inset 2px 0 10px rgba(120, 150, 180, 0.08);
    animation: fromdark-breathe 4.5s ease-in-out infinite;
}
@keyframes fromdark-breathe {
    0%, 100% { border-left-color: #3a4756; box-shadow: inset 2px 0 10px rgba(120, 150, 180, 0.05); }
    50%      { border-left-color: var(--fromdark-accent); box-shadow: inset 2px 0 14px rgba(120, 150, 180, 0.14); }
}
.feed-item--fromdark .feed-type { color: var(--fromdark-bright) !important; letter-spacing: 0.10em; }
.feed-item--fromdark .feed-arrow { color: var(--fromdark-accent) !important; }
.feed-item--fromdark .feed-msg { color: var(--fromdark-text); font-style: italic; }
.feed-item--fromdark .feed-item-chev { color: var(--fromdark-accent); }

/* The Mind's decade letter — a warmer, more prominent missive. Brighter accent
   edge, a soft wash, and relaxed line-height so the longer reflective text
   reads like a letter set apart from the terse signal traffic around it. */
.feed-item--letter {
    border-left: 3px solid var(--accent) !important;
    background: rgba(51, 255, 102, 0.06);
    padding: 8px 10px;
    border-radius: 3px;
    box-shadow: inset 2px 0 10px rgba(51, 255, 102, 0.08);
}
.feed-item--letter .feed-type {
    color: var(--accent-bright) !important;
    letter-spacing: 0.10em;
}
.feed-item--letter .feed-arrow {
    color: var(--accent-bright) !important;
}
.feed-item--letter .feed-msg {
    color: var(--text-bright);
    line-height: 1.5;
}

/* A reply — the answer you waited years for. The most luminous, celebratory
   style in the feed: a bright double border, a warm phosphor wash, and a
   slow triumphant pulse. This is the biggest thing that can happen. */
.feed-item--reply {
    border: 1px solid var(--accent-bright) !important;
    border-left-width: 3px !important;
    background: rgba(127, 255, 149, 0.10);
    box-shadow: 0 0 20px rgba(127, 255, 149, 0.28);
    padding: 8px 10px;
    border-radius: 3px;
    animation: feed-reply-pulse 2.6s ease-in-out infinite;
}
.feed-item--reply .feed-type {
    color: var(--accent-bright) !important;
    text-shadow: 0 0 8px var(--accent-glow);
    letter-spacing: 0.12em;
    font-weight: 700;
}
.feed-item--reply .feed-arrow { color: var(--accent-bright) !important; }
.feed-item--reply .feed-msg {
    color: var(--text-bright);
    line-height: 1.5;
}
@keyframes feed-reply-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(127, 255, 149, 0.24); }
    50%      { box-shadow: 0 0 30px rgba(127, 255, 149, 0.46); }
}

/* Recon intel — a scout's steady read of a neighbour, arriving light-delayed.
   Cool and watchful (an eye/⊙ feel), NOT loud: no pulse, no banner — the quiet
   thrill of learning a neighbour's secret. A calmer teal-lean than the hot
   phosphor of a SETI detection. */
.feed-item--intel {
    border-left: 3px solid var(--accent-deep) !important;
    background: rgba(51, 255, 102, 0.05);
    padding-left: 10px;
    border-radius: 3px;
    box-shadow: inset 2px 0 8px rgba(51, 255, 102, 0.08);
}
.feed-item--intel .feed-type {
    color: var(--accent) !important;
    letter-spacing: 0.10em;
}
.feed-item--intel .feed-arrow {
    color: var(--accent-deep) !important;
}
.feed-item--intel .feed-msg {
    color: var(--text-base);
}

/* ---- Active SETI composer (the TRANSMIT section of the SETI pane) ---- */
.tx-composer .tx-mode-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.tx-mode-btn {
    flex: 1;
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tx-mode-btn:hover { color: var(--text-base); }
.tx-mode-btn.active {
    color: var(--accent-bright);
    border-color: var(--surface-edge-strong);
    background: rgba(51, 255, 102, 0.08);
    text-shadow: 0 0 6px var(--accent-glow);
}
.tx-field { margin-bottom: 10px; }
.tx-field label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.tx-select {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-base);
    background: var(--surface-2);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    padding: 5px 6px;
}
.tx-void { font-size: 11px; font-style: italic; }
.tx-components {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 10px 0;
}
.tx-readout {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 0;
    border-top: 1px solid var(--surface-edge);
    border-bottom: 1px solid var(--surface-edge);
    margin: 8px 0;
}
.tx-readout-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}
.tx-readout-row > span:first-child {
    flex: 0 0 84px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}
.tx-readout-val { margin-left: auto; color: var(--text-base); }
.tx-readout-val.tx-unaffordable { color: var(--danger); }
.tx-bar {
    flex: 1;
    height: 6px;
    background: var(--surface-2);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    overflow: hidden;
}
.tx-bar-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    transition: width 0.2s ease;
}
.tx-hint {
    font-size: 11px;
    font-style: italic;
    line-height: 1.4;
    margin: 4px 0 10px;
}
.tx-send-btn {
    width: 100%;
    padding: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.10);
    border: 1px solid var(--surface-edge-strong);
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.tx-send-btn:hover:not(:disabled) {
    background: rgba(51, 255, 102, 0.18);
    box-shadow: 0 0 12px var(--accent-glow);
}
.tx-send-btn:disabled {
    color: var(--text-dim);
    background: var(--surface-2);
    border-color: var(--surface-edge);
    cursor: not-allowed;
}
.tx-send-status {
    font-size: 11px;
    line-height: 1.4;
    margin-top: 8px;
    min-height: 1em;
}
.tx-send-status.tx-sent { color: var(--accent-bright); font-style: italic; }
.tx-send-status.error { color: var(--danger); }
.tx-cast-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tx-cast-row {
    padding: 6px 8px;
    border-left: 2px solid var(--accent-deep);
    background: rgba(51, 255, 102, 0.03);
    border-radius: 2px;
}
.tx-cast-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-base);
}
.tx-cast-glyph { color: var(--accent); }
.tx-cast-target { font-weight: 600; }
.tx-cast-year { margin-left: auto; color: var(--text-muted); }
.tx-cast-line2 {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
}

#hud {
    position: absolute;
    top: 64px;
    left: 16px;
    background: var(--surface-1);
    backdrop-filter: blur(12px);
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    pointer-events: none;
    z-index: 10;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    box-shadow: 0 0 24px rgba(51, 255, 102, 0.06);
}

.hud-label {
    color: var(--text-muted);
    margin-right: 4px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.hud-hint {
    color: var(--text-dim);
    margin-top: 4px;
    font-size: 11px;
}

.hud-mag-row {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}

.hud-mag-row input[type="range"] {
    width: 120px;
    accent-color: #4ade80;
}

.hud-mag-row #mag-value {
    color: var(--text-bright);
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    text-align: right;
}

.info-icon {
    background: none;
    border: 1px solid var(--surface-edge);
    border-radius: 50%;
    width: 17px; height: 17px;
    padding: 0; line-height: 15px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 11px; font-style: italic; font-weight: 700;
    text-align: center;
    flex: none;
}
.info-icon:hover { color: var(--accent-bright); border-color: var(--accent); text-shadow: 0 0 5px var(--accent-glow); }
/* .info-icon is a lettered i now — the Bohr atom is retired with honors. */
.info-icon:hover { color: #4ade80; }

/* Per-pane "what is this?" icon — phosphor-tinted, hover-only (data-tip). */
.info-icon.pane-info { color: var(--text-dim); margin-left: 0; }
.info-icon.pane-info:hover,
.info-icon.pane-info:focus-visible { color: var(--accent-bright); outline: none; }

/* Reusable phosphor hover tooltip — one instance, appended to <body>,
   positioned via JS. visibility:hidden (not display:none) keeps it
   measurable off-screen so the JS can clamp it into the viewport. */
#hover-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 400;
    max-width: 236px;
    padding: 7px 10px;
    background: rgba(3, 14, 7, 0.97);
    border: 1px solid var(--accent-deep);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.6), 0 0 8px var(--accent-glow);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
#hover-tip.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Map-detail header row: system name + its hover info-icon. */
.sd-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
}
/* Transmissions header groups the unread count + info-icon at the right. */
.aside-header-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#info-popover {
    position: fixed;
    inset: 0;
    background: var(--modal-veil);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
#info-popover-content {
    background: var(--surface-glass-strong);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge-strong);
    border-radius: 6px;
    width: min(540px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 24px var(--accent-glow);
}
#info-popover-header {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.16);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#info-popover-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: #4ade80;
    letter-spacing: 0.04em;
}
#info-popover-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}
#info-popover-close:hover { color: var(--text-bright); }
#info-popover-body {
    padding: 18px 20px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-bright);
}
#info-popover-body pre {
    background: #030a04;
    border: 1px solid rgba(51, 255, 102, 0.14);
    border-radius: 4px;
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 12px;
    color: #67e8f9;
    overflow-x: auto;
    white-space: pre-wrap;
}
#info-popover-body code {
    background: rgba(51, 255, 102, 0.12);
    padding: 1px 4px;
    border-radius: 2px;
    color: #67e8f9;
    font-size: 12px;
}
#info-popover-body .info-section {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.14);
}
#info-popover-body .info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
#info-popover-body .info-section h4 {
    font-size: 13px;
    color: #4ade80;
    margin-bottom: 8px;
    font-weight: 600;
}
#info-popover-body p {
    margin-bottom: 8px;
}
#info-popover-body p:last-child {
    margin-bottom: 0;
}

#label-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.star-label {
    color: rgba(51, 255, 102, 0.75);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    transform: translate(-50%, 10px);
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.star-label.is-named {
    color: rgba(170, 255, 187, 0.95);
    font-weight: 600;
}

.star-label.is-home {
    color: #4ade80;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 11px;
}

/* Bayer landmark labels (α–ε of a constellation) — quieter than a player name:
   the Greek letter carries the meaning, so the tone is a soft catalogue-grey. */
.star-label.is-bayer {
    color: rgba(150, 200, 165, 0.78);
    font-weight: 500;
}
/* A discovered rogue world — cold, starless: a cool blue-grey label, italic. */
.star-label.is-rogue {
    color: rgba(140, 180, 205, 0.82);
    font-style: italic;
    text-shadow: 0 0 5px rgba(120, 170, 205, 0.35);
}
.rogue-name-row { margin-top: 12px; }

#star-tooltip {
    position: absolute;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-base);
    pointer-events: none;
    transform: translate(12px, -50%);
    white-space: nowrap;
    z-index: 10;
}

.hidden { display: none !important; }

/* BB — First-contact moment: cinematic overlay. Full-screen radial dim
   with a phosphor-glowing centered panel that pulses gently. Fires
   exactly once per account (LS-gated). */
#first-contact-overlay {
    position: absolute;
    inset: 0;
    z-index: 100;
    background: radial-gradient(ellipse at center, rgba(0, 20, 10, 0.55) 0%, rgba(0, 0, 0, 0.90) 75%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fc-fade-in 1.6s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.first-contact-panel {
    text-align: center;
    padding: 44px 60px 36px;
    background: rgba(5, 15, 10, 0.92);
    border: 1px solid var(--accent);
    border-radius: 8px;
    max-width: 640px;
    animation: fc-pulse 3s ease-in-out infinite;
}
.first-contact-prefix {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(51, 255, 102, 0.85);
    margin-bottom: 24px;
}
.first-contact-year {
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 52px;
    font-weight: 300;
    letter-spacing: 0.14em;
    text-shadow: 0 0 28px rgba(51, 255, 102, 0.85), 0 0 60px rgba(51, 255, 102, 0.35);
    margin-bottom: 28px;
    font-variant-numeric: tabular-nums;
}
.first-contact-title {
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 20px;
    letter-spacing: 0.08em;
    margin-bottom: 22px;
}
.first-contact-body {
    color: var(--text-base);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 32px;
    font-style: italic;
    opacity: 0.9;
}
/* The "so what is this?" line (Peter): one plain sentence of guidance —
   why this is joy, and where to go next. Quieter than the prose above. */
.first-contact-guide {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(51, 255, 102, 0.14);
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.65;
    letter-spacing: 0.02em;
}
.first-contact-guide:empty { display: none; }
.first-contact-close {
    display: block;
    margin: 18px auto 16px;
    background: rgba(51, 255, 102, 0.08);
    border: 1px solid var(--accent-deep);
    border-radius: 3px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    padding: 7px 18px;
    cursor: pointer;
}
.first-contact-close:hover {
    border-color: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}
.first-contact-hint {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    opacity: 0.7;
}
@keyframes fc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fc-pulse {
    0%, 100% { box-shadow: 0 0 40px rgba(51, 255, 102, 0.35); }
    50%      { box-shadow: 0 0 70px rgba(51, 255, 102, 0.75), 0 0 140px rgba(51, 255, 102, 0.20); }
}

#user-bar {
    position: absolute;
    top: 14px;
    right: 16px;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
    white-space: nowrap;
}

#user-badge { color: var(--text-muted); }

#logout-btn {
    background: transparent;
    color: #f87171;
    border: none;
    cursor: pointer;
    font-size: 9px;
    font-family: inherit;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0;
}

#logout-btn:hover { color: var(--danger); text-decoration: underline; }

#narrative-panel {
    background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%);
    border-left: 1px solid var(--surface-edge);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(51, 255, 102, 0.04);
}

#panel-header {
    padding: 20px;
    border-bottom: 1px solid var(--surface-edge);
    position: relative;
}
#panel-header::after {
    /* subtle holographic underline glow */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
    pointer-events: none;
}

#panel-header h1 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-bright);
    text-transform: uppercase;
    font-family: var(--font-mono);
    text-shadow: 0 0 12px var(--accent-glow);
}

/* Fermi szlogen — a klasszikus kérdés a glow-os FERMI alatt, italic
   monospace kis betűkkel. Halvány, mintha visszhang volna. */
#panel-header .panel-slogan {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-style: italic;
    letter-spacing: 0.04em;
    margin-top: 2px;
    margin-bottom: 0;
    text-shadow: 0 0 4px rgba(51, 255, 102, 0.18);
}

#panel-header .subtitle {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin-top: 6px;
    font-family: var(--font-mono);
}

#panel-search {
    padding: 12px 20px;
    border-bottom: 1px solid var(--surface-edge);
    position: relative;
}

#search-input {
    width: 100%;
    background: var(--bg-deep);
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 8px 10px;
    color: var(--text-bright);
    font-size: 12px;
    font-family: var(--font-mono);
    transition: border-color 0.15s, box-shadow 0.15s;
}

#search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow), inset 0 0 8px rgba(51, 255, 102, 0.08);
}

#search-results {
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    background: var(--surface-2);
    backdrop-filter: blur(12px);
    border: 1px solid var(--surface-edge-strong);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 20;
}

.search-result {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid rgba(51, 255, 102, 0.08);
    font-size: 12px;
}

.search-result:last-child { border-bottom: none; }
.search-result:hover { background: rgba(74, 222, 128, 0.12); }

.search-result .sr-name { color: var(--text-bright); font-weight: 500; }
.search-result .sr-meta { color: var(--text-dim); font-size: 11px; margin-top: 2px; }

#panel-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* ---- Aside tab-panes — single source of in-app navigation ------- */
.aside-pane {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.aside-pane.hidden { display: none; }
/* Every text field / select / textarea in a pane fills its container, so
   selects and inputs line up at the same width instead of drifting apart.
   Checkboxes/radios keep their intrinsic size; range sliders that live in a
   flex row keep their flex sizing. */
.aside-pane input:not([type="checkbox"]):not([type="radio"]),
.aside-pane select,
.aside-pane textarea {
    width: 100%;
    box-sizing: border-box;
}
.aside-pane-header {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--surface-edge);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.aside-pane-header h2 {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    text-shadow: 0 0 8px var(--accent-glow);
}
.aside-pane-header .muted {
    width: 100%;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
}
.settings-group {
    padding: 16px 20px;
    border-bottom: 1px solid var(--surface-edge);
}
.aside-pane[data-pane="constellations"] #constellation-list {
    padding: 12px 20px 0;
}
.aside-pane[data-pane="constellations"] > .muted.settings-hint {
    padding: 12px 20px 0;
}
.settings-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-bright);
    margin-bottom: 6px;
    font-family: var(--font-mono);
}

/* Colony allocation dial — a single Industry ↔ Research slider. */
.colony-alloc-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.colony-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--accent-bright), var(--surface-edge));
    outline: none;
    cursor: pointer;
    margin: 2px 0 8px;
}
.colony-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 6px var(--accent-glow);
    cursor: pointer;
}
.colony-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 50%;
    background: var(--accent-bright);
    box-shadow: 0 0 6px var(--accent-glow);
    cursor: pointer;
}
.colony-alloc-readout {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 6px var(--accent-glow);
    margin-bottom: 8px;
}
.colony-alloc-hint {
    font-size: 10px;
    line-height: 1.5;
}

/* ---- COLONY pane -------------------------------------------------------- */
/* A selectable list of colonies (one today) + a breathing detail dashboard. */
.colony-list {
    padding: 12px 20px 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
/* LIST IDIOM: the home-colony row speaks the same delimited-list language as
   the diaspora and the feed — hairline separator, left tint, quiet hover. */
.colony-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: none;
    border-left: 2px solid var(--accent);
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
    border-radius: 0;
    padding: 8px 8px 8px 10px;
    cursor: pointer;
    font-family: var(--font-mono);
    color: var(--text-base);
    text-align: left;
    transition: background 0.12s;
}
.colony-row:hover { background: rgba(51, 255, 102, 0.06); }
.colony-row.selected {
    background: rgba(51, 255, 102, 0.05);
    border-left-color: var(--accent-bright);
}
.colony-row-name {
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-bright);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.colony-row-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.colony-row-pop {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--accent-bright);
}
.colony-mini-bar {
    width: 46px;
    height: 4px;
    border-radius: 2px;
    background: var(--surface-edge);
    overflow: hidden;
}
.colony-mini-fill {
    display: block;
    height: 100%;
    background: var(--accent-bright);
    box-shadow: 0 0 6px var(--accent-glow);
}

.colony-detail {
    padding: 8px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.colony-detail-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    text-shadow: 0 0 8px var(--accent-glow);
    margin-top: 4px;
}
.colony-metric-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}
.colony-metric-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.colony-metric-fig {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-bright);
    font-family: var(--font-mono);
}
.colony-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--surface-1);
    border: 1px solid var(--surface-edge);
    overflow: hidden;
}
.colony-bar-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-deep), var(--accent-bright));
    box-shadow: 0 0 8px var(--accent-glow);
    transition: width 0.4s ease;
}
.colony-metric-pair {
    display: flex;
    gap: 12px;
}
.colony-metric-pair .colony-metric {
    flex: 1;
    background: var(--surface-1);
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 7px 9px;
}
/* Home-colony metric — dialed back so it no longer dwarfs the diaspora below.
   Some emphasis (glow, accent) stays; the outsized 20px number does not. */
.colony-metric-big {
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    text-shadow: 0 0 6px var(--accent-glow);
    margin: 3px 0 1px;
    line-height: 1;
}
.colony-metric-sub {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.colony-detail #colony-alloc-group {
    padding: 0;
    border-bottom: none;
}

/* System-modal → COL pane jump (home only). */
.system-colony-link {
    margin-left: 10px;
    background: transparent;
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    cursor: pointer;
    vertical-align: middle;
    transition: border-color 0.12s, background 0.12s;
}
.system-colony-link:hover {
    border-color: var(--accent-bright);
    background: var(--surface-2);
    box-shadow: 0 0 8px var(--accent-glow);
}
.settings-input {
    width: 100%;
    background: var(--surface-1);
    color: var(--text-base);
    border: 1px solid var(--surface-edge);
    padding: 6px 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    border-radius: 3px;
}
.settings-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.settings-hint {
    margin-top: 6px;
    font-size: 10px;
    color: var(--text-muted);
}

#star-disambig-popover {
    position: fixed;
    z-index: 100;
    background: var(--surface-glass-strong);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--accent);
    box-shadow: 0 0 12px var(--accent-glow), 0 0 24px rgba(51, 255, 102, 0.18);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-base);
    min-width: 240px;
    max-width: 320px;
    padding: 8px 0;
}
#star-disambig-popover .disambig-header {
    padding: 6px 14px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent-bright);
    border-bottom: 1px solid var(--surface-edge);
    text-shadow: 0 0 6px var(--accent-glow);
}
#star-disambig-popover ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 240px;
    overflow-y: auto;
}
#star-disambig-popover li {
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.12s;
}
#star-disambig-popover li:hover {
    background: rgba(51, 255, 102, 0.08);
}
#star-disambig-popover li .star-name {
    color: var(--accent-bright);
}
#star-disambig-popover li .star-meta {
    font-size: 10px;
    color: var(--text-muted);
}
.disambig-footer {
    padding: 6px 14px;
    font-size: 10px;
    border-top: 1px solid var(--surface-edge);
}

#route-builder {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 60;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-base);
    min-width: 200px;
    max-width: 260px;
    padding: 6px 0;
}
#route-builder-status {
    padding: 3px 12px;
    font-size: 9px;
    min-height: 1.3em;
}
#route-builder-status.success { color: var(--accent-bright); }
#route-builder-status.error   { color: var(--danger); }
.route-builder-header {
    padding: 5px 12px;
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--accent-bright);
    border-bottom: 1px solid var(--surface-edge);
    text-shadow: 0 0 6px var(--accent-glow);
}
#route-builder-list {
    list-style: decimal inside;
    margin: 0;
    padding: 6px 14px;
    color: var(--text-base);
}
#route-builder-list li {
    padding: 2px 0;
}
.route-builder-actions {
    padding: 6px 14px 4px;
    border-top: 1px solid var(--surface-edge);
    display: flex;
    gap: 8px;
}
.route-builder-actions button {
    flex: 1;
    background: var(--surface-1);
    color: var(--text-base);
    border: 1px solid var(--surface-edge);
    padding: 4px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    border-radius: 3px;
}
.route-builder-actions button:hover { border-color: var(--accent); color: var(--accent-bright); }
.route-builder-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
#probe-add-waypoint-btn {
    background: transparent;
    color: var(--accent-bright);
    border: 1px dashed var(--surface-edge);
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    border-radius: 3px;
    margin-left: 6px;
}
#probe-add-waypoint-btn:hover { border-color: var(--accent); }
#probe-add-waypoint-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.leg-badge {
    font-size: 9px;
    background: rgba(51, 255, 102, 0.14);
    color: var(--accent-bright);
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 4px;
    letter-spacing: 0.08em;
}
#aside-missions-list,
#aside-atlas-list,
.aside-pane #feed-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
#aside-missions-list .mission-card { margin: 6px 14px; }
#feed-unread-count {
    font-size: 11px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}
/* Compact atlas controls inside aside (narrower than the modal) */
.aside-pane .atlas-filters.compact {
    padding: 10px 14px 6px;
    gap: 4px;
}
.aside-pane #atlas-search-aside {
    margin: 0 14px 10px;
    width: calc(100% - 28px); /* keep the 14px side inset under the 100% rule */
    background: var(--bg-deep);
    border: 1px solid var(--surface-edge);
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 6px 8px;
    border-radius: 3px;
}
.aside-pane #atlas-search-aside:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-glow);
}

/* ---- In-pane tab strip (ATL: Atlas / Archive) --------------------------
   Same idiom as the modal .system-tabs, retuned to the aside's small
   monospace terminal scale: an accent underline marks the active tab. */
.pane-tabs {
    display: flex;
    gap: 4px;
    padding: 0 14px;
    border-bottom: 1px solid var(--surface-edge);
}
.pane-tab {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.pane-tab:hover { color: var(--text-base); }
.pane-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}
/* Each ATL sub-tab fills the pane and scrolls on its own. */
.atlas-subpane {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.atlas-subpane.hidden { display: none; }
.aside-atlas-row {
    padding: 6px 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    transition: background 0.1s;
}
.aside-atlas-row:hover { background: rgba(51, 255, 102, 0.06); }
.aside-atlas-row .ar-name { color: var(--text-bright); }
.aside-atlas-row .ar-meta { color: var(--text-muted); font-size: 10px; }
.aside-atlas-row .ar-dist { color: var(--accent); font-variant-numeric: tabular-nums; }

/* --- Minimalist aside panes: a step-smaller type so long system / probe
   names fit on one line more often. Scoped to the side panel only — the
   modals keep their larger reading size. Single-value name cells get
   nowrap+ellipsis (full text lives in a title= tooltip). ------------- */
.aside-pane #star-detail h2 {
    font-size: 14px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aside-pane #detail-fields { font-size: 11px; }
.aside-pane .feed-item { font-size: 11px; padding: 8px 20px; }
.aside-pane .feed-meta { font-size: 9px; }
.aside-pane .mission-card { font-size: 11px; }
.aside-pane .mission-target { font-size: 12px; }
.aside-pane .aside-atlas-row { font-size: 10px; }
.aside-pane .aside-atlas-row > div:first-child { min-width: 0; }
.aside-pane .aside-atlas-row .ar-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aside-pane .aside-atlas-row .ar-meta { font-size: 9px; }
.aside-pane .constellation-row { font-size: 10px; }
.aside-pane .seti-archive-row .sar-name { font-size: 11px; }

/* Map-tab footer — readouts that used to live in the loose left-side HUD */
#map-pane-footer {
    margin-top: auto;
    padding: 10px 18px 14px;
    border-top: 1px solid var(--surface-edge);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.6;
    color: var(--text-base);
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
}
#map-pane-footer .mpf-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}
#map-pane-footer .mpf-hint {
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.5;
    flex-wrap: wrap;
}
#map-pane-footer .mpf-mag {
    margin-top: 4px;
}
#map-pane-footer .mpf-mag input[type="range"] {
    flex: 1;
    accent-color: var(--accent);
}
#map-pane-footer .hud-label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.10em;
    margin-right: 4px;
}

/* ---- Planet modal (M6 — 3D bolygó-rendering) ---------------------- */
#planet-modal {
    position: fixed;
    inset: 0;
    background: #000;
    backdrop-filter: blur(8px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
#planet-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
}
#planet-header {
    position: absolute;
    top: 18px;
    left: 24px;
    right: 24px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}
#planet-header h2 {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-shadow: 0 0 12px var(--accent-glow);
    pointer-events: auto;
}
#planet-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    line-height: 1;
    border-radius: 4px;
    pointer-events: auto;
    transition: color 0.15s, background 0.15s;
}
#planet-close:hover {
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.10);
}
#planet-canvas {
    flex: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
}
#planet-canvas:active { cursor: grabbing; }

#planet-info {
    position: absolute;
    top: 64px;
    right: 24px;
    width: 320px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    z-index: 10;
    box-shadow: 0 0 24px rgba(51, 255, 102, 0.08);
}
#planet-info .info-section {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--surface-edge);
}
#planet-info .info-section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
#planet-info .info-section-title {
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.20em;
    margin-bottom: 8px;
    text-shadow: 0 0 6px var(--accent-glow);
}
#planet-info .info-section dl {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 4px;
    column-gap: 16px;
}
#planet-info .info-section dt {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 10px;
    white-space: nowrap;
}
#planet-info .info-section dd {
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* STARTUP PRELOADER — the planet scan-loader's phosphor aesthetic, scaled up
   for the full-sky first load (Peter). The global .scan-line + its ▸ prefix are
   reused so the two read as one family. Blocks the view until the sky is built. */
#preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    transition: opacity 0.55s ease-out;
}
#preloader.preloader-hidden { opacity: 0; pointer-events: none; }
.preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}
.preloader-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: 0.55em;
    /* push right to compensate the trailing letter-spacing, so it reads centered */
    padding-left: 0.55em;
    color: var(--accent);
    text-shadow: 0 0 22px var(--accent-glow);
    animation: preloader-pulse 2.6s ease-in-out infinite;
}
@keyframes preloader-pulse { 0%, 100% { opacity: 0.82; } 50% { opacity: 1; } }
.preloader-scanbox {
    position: relative;
    width: 360px;
    max-width: 80vw;
    padding: 12px 18px;
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
}
/* The scanning sweep — a phosphor bar tracking left→right, the "instrument is
   working" tell borrowed from the planet survey. */
.preloader-sweep {
    position: absolute;
    top: 0;
    left: -45%;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(51, 255, 102, 0.16), transparent);
    animation: preloader-sweep 1.5s linear infinite;
}
@keyframes preloader-sweep { from { left: -45%; } to { left: 100%; } }
#preloader .scan-line {
    position: relative;
    z-index: 1;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
    line-height: 1.6;
}
#preloader .scan-line.scan-complete { color: var(--accent-bright); }
@media (prefers-reduced-motion: reduce) {
    .preloader-title { animation: none; }
    .preloader-sweep { animation: none; opacity: 0.5; left: 28%; }
}

#planet-scan {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
    padding: 10px 18px;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    min-width: 320px;
    text-align: center;
    letter-spacing: 0.08em;
    /* Operativ konzol-szoveg — kapitalis (Peter: minden kapitalis, ami nem proza). */
    text-transform: uppercase;
}
.scan-line { line-height: 1.6; }
.scan-line::before { content: "▸ "; color: var(--accent-bright); }
.scan-line.scan-complete { color: var(--accent-bright); }
#planet-scan { transition: opacity 0.25s ease-out; opacity: 1; }
#planet-scan.scan-fade { opacity: 0; }

/* ---- Planetarium — "the dome" (ancestral sky) --------------------- */
/* LOOK UP entry button in the constellations pane. */
.pl-open-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 32px);
    margin: 14px 16px 8px;
    padding: 12px 16px;
    background: rgba(51, 255, 102, 0.06);
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pl-open-btn:hover {
    background: rgba(51, 255, 102, 0.12);
    border-color: var(--accent);
    box-shadow: 0 0 18px rgba(51, 255, 102, 0.12);
}
.pl-open-icon {
    font-size: 22px;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 12px var(--accent-glow);
}
.pl-open-text { display: flex; flex-direction: column; gap: 2px; }
.pl-open-text strong {
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.pl-open-text small {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}

#planetarium-modal {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 90; /* below #system-modal (100) so a clicked star opens on top */
    display: flex;
    align-items: center;
    justify-content: center;
}
#planetarium-content {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    display: flex;
    flex-direction: column;
}
#planetarium-header {
    position: absolute;
    top: 18px;
    left: 24px;
    right: 24px;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
}
#planetarium-header h2 {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-shadow: 0 0 12px var(--accent-glow);
    pointer-events: auto;
}
#planetarium-close {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    line-height: 1;
    border-radius: 4px;
    pointer-events: auto;
    transition: color 0.15s, background 0.15s;
}
#planetarium-close:hover {
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.10);
}
#planetarium-canvas {
    flex: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
    display: block;
}
#planetarium-canvas:active { cursor: grabbing; }

#planetarium-tooltip {
    position: absolute;
    z-index: 12;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    background: var(--surface-glass);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: nowrap;
    box-shadow: 0 0 16px rgba(51, 255, 102, 0.10);
}
#planetarium-tooltip .pl-tip-name {
    color: var(--accent-bright);
    text-shadow: 0 0 6px var(--accent-glow);
}
#planetarium-tooltip .pl-tip-mag {
    color: var(--text-muted);
    font-size: 10px;
    letter-spacing: 0.06em;
}

#planetarium-bar {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    font-family: var(--font-mono);
    box-shadow: 0 0 24px rgba(51, 255, 102, 0.08);
}
#planetarium-caption {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    text-shadow: 0 0 8px var(--accent-glow);
}
.pl-mag-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pl-mag-label {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.10em;
}
.pl-mag-row input[type="range"] {
    width: 200px;
    accent-color: var(--accent);
}
.pl-mag-row #pl-mag-value {
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    min-width: 30px;
    text-align: right;
    font-size: 11px;
}
/* The time-scrub row — same phosphor language as the magnitude row. */
.pl-time-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pl-time-row input[type="range"] {
    width: 200px;
    accent-color: var(--accent);
}
#pl-time-readout {
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    min-width: 118px;
    text-align: left;
    font-size: 11px;
}
#pl-rate-value {
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: right;
    font-size: 11px;
}
.pl-time-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(51, 255, 102, 0.06);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    padding: 4px 9px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.pl-time-btn:hover {
    background: rgba(51, 255, 102, 0.14);
    box-shadow: 0 0 10px rgba(51, 255, 102, 0.18);
}
.pl-time-btn.playing {
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.18);
    box-shadow: 0 0 12px rgba(51, 255, 102, 0.28);
}
.pl-hint {
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0.06em;
}

/* CSS2D label layer over the dome canvas — clicks/drags pass through. */
#planetarium-label-layer {
    position: absolute;
    inset: 0;
    z-index: 11;
    overflow: hidden;
    pointer-events: none;
}
.pl-star-label {
    color: rgba(170, 255, 187, 0.78);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 0 9px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    transform: translate(10px, -50%);
    pointer-events: none;
}
/* N / E / S / W markers on the horizon ring. Bolder + brighter than star
   labels so they read as the compass, centred on their horizon point. */
.pl-cardinal-label {
    color: rgba(51, 255, 102, 0.92);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.95), 0 0 12px rgba(26, 163, 64, 0.5);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* The star spec HUD — compact phosphor panel, bottom-left of the dome. */
#planetarium-hud {
    position: absolute;
    left: 24px;
    bottom: 24px;
    z-index: 13;
    width: 250px;
    padding: 14px 16px 16px;
    background: var(--surface-glass-strong);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 5px;
    font-family: var(--font-mono);
    box-shadow: 0 0 26px rgba(51, 255, 102, 0.10);
}
.pl-hud-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.15s, background 0.15s;
}
.pl-hud-close:hover {
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.10);
}
.pl-hud-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 26px 12px 0;
}
.pl-hud-bayer {
    color: var(--accent-bright);
    font-size: 15px;
    text-shadow: 0 0 8px var(--accent-glow);
}
.pl-hud-display {
    color: var(--accent);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px var(--accent-glow);
}
.pl-hud-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    margin: 0 0 14px;
    font-size: 11px;
}
.pl-hud-fields dt {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 10px;
}
.pl-hud-fields dd {
    margin: 0;
    color: var(--text-bright);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pl-hud-view {
    width: 100%;
    padding: 8px 10px;
    background: rgba(51, 255, 102, 0.08);
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.pl-hud-view:hover {
    background: rgba(51, 255, 102, 0.16);
    border-color: var(--accent);
    box-shadow: 0 0 16px rgba(51, 255, 102, 0.14);
}

/* Wanderer HUD naming — a text field + clear-× to name a planet from the dome. */
.pl-hud-namerow {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 0 12px;
}
.pl-hud-name-input {
    flex: 1;
    min-width: 0;
    background: #030a04;
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    padding: 4px 8px;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
}
.pl-hud-name-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(51, 255, 102, 0.12);
}
.pl-hud-name-clear,
.planet-name-clear {
    background: transparent;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
}

/* Planet-view naming — same field pattern inside the info panel's NAME section. */
#planet-info .info-section .planet-name-input {
    width: 70%;
    background: #030a04;
    border: 1px solid rgba(51, 255, 102, 0.24);
    border-radius: 3px;
    padding: 4px 8px;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
}
#planet-info .info-section .planet-name-input:focus {
    outline: none;
    border-color: #4ade80;
}

/* The ✎ DRAW toggle in the control bar — quiet until active, then it lights up
   phosphor-bright so the "drawing" state is unmistakable. */
.pl-draw-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    background: rgba(51, 255, 102, 0.06);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    padding: 4px 10px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, color 0.15s;
}
.pl-draw-btn:hover {
    background: rgba(51, 255, 102, 0.14);
    box-shadow: 0 0 10px rgba(51, 255, 102, 0.18);
}
.pl-draw-btn.active {
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.20);
    box-shadow: 0 0 14px rgba(51, 255, 102, 0.30);
}

/* The draw panel — reuses the star-HUD chrome, docked bottom-right so it does
   not collide with the star HUD (bottom-left). */
#planetarium-draw {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 13;
    width: 250px;
    padding: 14px 16px 16px;
    background: var(--surface-glass-strong);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 5px;
    font-family: var(--font-mono);
    box-shadow: 0 0 26px rgba(51, 255, 102, 0.10);
}
.pl-draw-header {
    color: var(--accent);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 0 8px var(--accent-glow);
    margin-bottom: 10px;
}
.pl-draw-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    max-height: 168px;
    overflow-y: auto;
    font-size: 11px;
}
.pl-draw-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
}
.pl-draw-list .pl-draw-empty {
    color: var(--text-dim);
    letter-spacing: 0.04em;
}
.pl-draw-rank {
    color: var(--accent-bright);
    font-variant-numeric: tabular-nums;
    min-width: 16px;
    text-align: right;
}
.pl-draw-star {
    color: var(--text-bright);
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pl-draw-name {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.pl-draw-name:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 10px rgba(51, 255, 102, 0.16);
}
.pl-draw-actions {
    display: flex;
    gap: 8px;
}
.pl-draw-cancel, .pl-draw-save {
    flex: 1;
    padding: 7px 10px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
.pl-draw-cancel {
    background: transparent;
    border: 1px solid var(--surface-edge);
    color: var(--text-muted);
}
.pl-draw-cancel:hover {
    color: var(--accent);
    background: rgba(51, 255, 102, 0.08);
}
.pl-draw-save {
    background: rgba(51, 255, 102, 0.10);
    border: 1px solid var(--surface-edge);
    color: var(--accent-bright);
}
.pl-draw-save:hover:not(:disabled) {
    background: rgba(51, 255, 102, 0.18);
    border-color: var(--accent);
    box-shadow: 0 0 14px rgba(51, 255, 102, 0.16);
}
.pl-draw-save:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.pl-draw-status {
    margin-top: 8px;
    min-height: 13px;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Figure name label at a constellation's centroid — subtle, muted. */
.pl-figure-label {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.95), 0 0 10px rgba(26, 163, 64, 0.35);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.85;
}
/* Ordered picks while drawing — a small bright numbered tick on each star. */
.pl-pick-marker {
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.95), 0 0 10px rgba(51, 255, 102, 0.6);
    white-space: nowrap;
    transform: translate(10px, -50%);
    pointer-events: none;
}
/* Un-constellated bright star — a very subtle ring inviting a story. */
.pl-invite-marker {
    color: rgba(51, 255, 102, 0.30);
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 6px rgba(26, 163, 64, 0.25);
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

#feed-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.feed-empty { padding: 14px 20px; font-size: var(--font-small); line-height: 1.5; }
.feed-item {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
    font-size: 12px;
    line-height: 1.45;
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}
.feed-item:hover { background: rgba(51, 255, 102, 0.05); }
.feed-item.unread {
    background: rgba(74, 222, 128, 0.04);
}
.feed-item.unread::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 8px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4ade80;
    transform: translateY(-50%);
}
.feed-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.feed-meta .feed-arrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    margin-right: 4px;
    width: 12px;
    display: inline-block;
}
.feed-meta .feed-type { color: var(--text-muted); flex: 1; }
.feed-meta .feed-arrival { font-variant-numeric: tabular-nums; }

.feed-item.dir-outbound .feed-arrow { color: #60a5fa; }
.feed-item.dir-inbound  .feed-arrow { color: #4ade80; }
.feed-item.dir-outbound { border-left: 2px solid rgba(96, 165, 250, 0.45); }
.feed-item.dir-inbound  { border-left: 2px solid rgba(74, 222, 128, 0.55); }
.feed-msg { color: var(--text-bright); }
.feed-msg .star-ref {
    color: #67e8f9;
    border-bottom: 1px dotted rgba(103, 232, 249, 0.4);
    cursor: pointer;
}
.severity-routine     { color: var(--text-muted); }
.severity-notable     { color: #facc15; }
.severity-significant { color: #fb923c; }
.severity-urgent      { color: #f87171; }

#panel-placeholder p {
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

#panel-placeholder .muted {
    color: var(--text-dim);
    font-size: 12px;
}

#star-detail h2 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
}

#detail-fields {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
    font-size: 12px;
    /* D (2026-07-10): csillag-panel kapitalis (Peter) — kiveve a szerkesztheto nev-input. */
    text-transform: uppercase;
}

#detail-fields dt {
    color: var(--text-dim);
}

#detail-fields dd {
    color: var(--text-bright);
    word-break: break-all;
}

#detail-fields #name-input {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    padding: 5px 8px;
    line-height: 1.4;
    height: auto;
    color: var(--text-bright);
    font-size: 11px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    /* D: a jatekos altal beirt nev NEM kapitalizalt. */
    text-transform: none;
}
/* D: a piros/friss-statusz sokkal kisebb fonttal, hogy ne torjon a szuk cellaban (Peter). */
#detail-fields .freshness {
    font-size: 8.5px;
    padding: 1px 4px;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

#detail-fields #name-input:focus {
    outline: none;
    border-color: #4ade80;
}

/* C3 (Peter): a name-input width:100%-a a × gombot új sorba törte —
   a dd flex-sorrá válik, az input rugalmas, a × mellé simul. */
#detail-fields dd:has(> #name-input) {
    display: flex;
    align-items: center;
    gap: 4px;
}
#detail-fields dd:has(> #name-input) #name-input {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

#detail-fields #name-clear {
    background: transparent;
    border: none;
    color: #f87171;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    margin-left: 4px;
}

.freshness {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
}
.freshness-live    { background: rgba(74, 222, 128, 0.18); color: #4ade80; }
.freshness-fresh   { background: rgba(56, 189, 248, 0.18); color: #38bdf8; }
.freshness-recent  { background: rgba(226, 232, 240, 0.10); color: #e2e8f0; }
.freshness-aged    { background: rgba(250, 204, 21, 0.16);  color: #facc15; }
.freshness-stale   { background: rgba(248, 113, 113, 0.16); color: #f87171; }
.freshness-unknown { background: rgba(100, 116, 139, 0.18); color: #94a3b8; }

#view-system-btn {
    margin-top: 12px;
    background: rgba(51, 255, 102, 0.10);
    border: 1px solid var(--surface-edge-strong);
    color: var(--accent);
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
#view-system-btn:hover {
    background: rgba(51, 255, 102, 0.20);
    border-color: var(--accent);
    box-shadow: 0 0 16px var(--accent-glow);
    color: var(--accent-bright);
}

/* System view modal */
#system-modal {
    position: fixed;
    inset: 0;
    background: var(--modal-veil);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

#system-content {
    position: relative;
    width: min(900px, 95vw);
    height: min(900px, 95vh);
    background: var(--surface-glass-strong);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge-strong);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 48px rgba(51, 255, 102, 0.10), inset 0 1px 0 var(--surface-edge);
}

#system-header {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.14);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#system-header h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

#system-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    line-height: 1;
    border-radius: 4px;
}
#system-close:hover { background: rgba(51, 255, 102, 0.14); color: var(--text-bright); }

.system-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.18);
}
.system-tab {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.system-tab:hover { color: var(--text-bright); }
.system-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}

.system-tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.system-tab-content.hidden { display: none; }
.system-tab-content.report-view {
    overflow-y: auto;
    padding: 18px 22px 22px;
}

#system-canvas {
    flex: 1;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

/* Report tab */
/* B (2026-07-10): rendszer-riport is kapitalis, mint a tobbi konzol-chrome (Peter). */
#system-report { text-transform: uppercase; }
/* Colony banner — names a colony as a colony at the top of the report. */
.report-colony-banner {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 12px;
    border: 1px solid rgba(51, 255, 102, 0.30);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    background: rgba(51, 255, 102, 0.06);
}
.report-colony-banner--proposed {
    border-color: rgba(51, 255, 102, 0.16);
    border-left-color: rgba(51, 255, 102, 0.40);
    background: rgba(51, 255, 102, 0.02);
}
.colony-badge {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
    white-space: nowrap;
}
.colony-badge--ghost {
    color: rgba(120, 200, 140, 0.75);
    text-shadow: none;
}
.colony-banner-note {
    font-size: 11px;
    color: rgba(160, 200, 170, 0.70);
    letter-spacing: 0.02em;
}

#system-report .report-section { margin-bottom: 22px; }
#system-report h3 {
    font-size: 11px;
    font-weight: 600;
    color: #4ade80;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.14);
}
#system-report dl.report-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    row-gap: 4px;
    column-gap: 12px;
    font-size: 12px;
}
/* Report in phosphor (Peter): values green, labels dim-green — console readout. */
#system-report dl.report-grid dt { color: var(--text-muted); }
#system-report dl.report-grid dd { color: var(--accent); }
#system-report .report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
/* #1 (2026-07-10): a history/transmission-uzenet kisebb + foszforzold — konzol-
   log erzes, nem nagy vilagosszurke tomb (Peter). */
#system-report .report-msg {
    font-size: 10px;
    line-height: 1.5;
    color: var(--accent);
    text-shadow: 0 0 5px var(--accent-glow);
}
#system-report .report-table th {
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.14);
}
#system-report .report-table td {
    color: var(--accent);
    padding: 6px 8px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
}
#system-report .report-row-empty { color: var(--text-dim); font-style: italic; padding: 6px 0; }
#system-report .body-type-pill {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(51, 255, 102, 0.14);
    color: var(--text-bright);
}
#system-report .hz-marker { color: #4ade80; font-size: 10px; margin-left: 4px; }
/* ⌂ HOME — a FILLED phosphor pill (dark text on bright green) so the cradle
   reads at a glance and doesn't get dwarfed by the ESTABLISH button below it. */
#system-report .cradle-marker {
    color: #030a05;
    background: var(--accent-bright);
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 3px;
    letter-spacing: 0.08em;
    text-shadow: none;
    box-shadow: 0 0 9px var(--accent-glow);
}

#system-report .body-row { cursor: pointer; transition: background 0.12s; }
#system-report .body-row:hover { background: rgba(51, 255, 102, 0.07); }
#system-report .body-row-arrow {
    color: var(--accent);
    margin-right: 4px;
    opacity: 0.6;
    transition: opacity 0.12s, transform 0.12s;
    display: inline-block;
}
#system-report .body-row:hover .body-row-arrow {
    opacity: 1;
    transform: translateX(2px);
}
#system-report .body-row-disabled { cursor: default; opacity: 0.55; }
#system-report .body-row-disabled:hover { background: transparent; }

/* ---- Installations: the Mind's suggestion + build affordance --------- */
#system-report .body-install-row > td {
    padding: 4px 8px 10px 8px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
    background: rgba(51, 255, 102, 0.025);
}
#system-report .install-line {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 11px; line-height: 1.5;
}
#system-report .install-line + .install-line { margin-top: 4px; }
#system-report .install-diamond { color: var(--accent-bright); text-shadow: 0 0 7px var(--accent-glow); }
#system-report .install-glyph { color: var(--accent-bright); font-size: 12px; }
#system-report .install-label { color: var(--text-bright); font-weight: 600; letter-spacing: 0.02em; }
#system-report .install-rationale { color: var(--text-muted); }
#system-report .install-note { color: var(--text-dim); font-style: italic; }
/* "ACTIVE" — a filled phosphor tag (matches the ⌂ HOME pill) so an established
   instrument reads as a real PRESENCE, not faint text next to the build button. */
#system-report .install-active {
    color: #030a05; background: var(--accent-bright);
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0 5px; border-radius: 2px; text-shadow: none; box-shadow: 0 0 7px var(--accent-glow);
}
#system-report .install-building,
.colony-install-row .install-building { color: var(--amber); }
#system-report .install-placed .install-label { color: var(--accent-bright); }

#system-report .install-build { margin-top: 5px; }
#system-report .install-type-picker {
    background: var(--bg-deep);
    color: var(--text-bright);
    border: 1px solid rgba(51, 255, 102, 0.28);
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 4px;
    font-family: inherit;
}
#system-report .install-build-btn {
    background: rgba(51, 255, 102, 0.10);
    color: var(--accent-bright);
    border: 1px solid var(--accent-deep);
    border-radius: 4px;
    font-size: 11px;
    padding: 2px 10px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s, box-shadow 0.12s;
}
#system-report .install-build-btn:hover:not(:disabled) {
    background: rgba(51, 255, 102, 0.20);
    box-shadow: 0 0 8px var(--accent-glow);
}
#system-report .install-build-btn:disabled,
#system-report .install-build-btn.is-disabled {
    opacity: 0.5; cursor: default; color: var(--text-muted); border-color: rgba(51, 255, 102, 0.28);
}
#system-report .install-cost { font-weight: 600; }
#system-report .install-short,
#system-report .install-error { color: #f87171; font-size: 10px; }

/* ---- Planet panel: per-body COLONY readout --------------------------- */
/* Same phosphor idiom as the system report's per-body install line, scoped to
   the single-body info panel so a body reads its own colony status inline. */
#planet-info .colony-body-readout {
    display: flex; flex-direction: column; gap: 5px;
}
#planet-info .install-line {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 11px; line-height: 1.5;
}
#planet-info .cbr-tag {
    color: var(--text-muted); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
}
#planet-info .cbr-none { color: var(--text-muted); }
#planet-info .cbr-tap { color: var(--text-muted); font-size: 10px; }
#planet-info .install-diamond { color: var(--accent); text-shadow: 0 0 6px var(--accent-glow); }
#planet-info .install-glyph { color: var(--accent-bright); font-size: 12px; }
#planet-info .install-label { color: var(--text-bright); font-weight: 600; letter-spacing: 0.02em; }
#planet-info .install-rationale { color: var(--text-muted); }
#planet-info .install-note { color: var(--text-dim); font-style: italic; }
#planet-info .install-active { color: var(--accent); text-shadow: 0 0 6px var(--accent-glow); }
#planet-info .install-building { color: var(--amber); }
#planet-info .install-placed .install-label { color: var(--accent-bright); }
#planet-info .install-build { margin-top: 2px; }
#planet-info .install-type-picker {
    background: var(--bg-deep); color: var(--text-bright);
    border: 1px solid rgba(51, 255, 102, 0.28); border-radius: 4px;
    font-size: 11px; padding: 2px 4px; font-family: inherit;
}
#planet-info .install-build-btn {
    background: rgba(51, 255, 102, 0.10); color: var(--accent-bright);
    border: 1px solid var(--accent-deep); border-radius: 4px;
    font-size: 11px; padding: 2px 10px; cursor: pointer; font-family: inherit;
    transition: background 0.12s, box-shadow 0.12s;
}
#planet-info .install-build-btn:hover:not(:disabled) {
    background: rgba(51, 255, 102, 0.20); box-shadow: 0 0 8px var(--accent-glow);
}
#planet-info .install-build-btn:disabled,
#planet-info .install-build-btn.is-disabled {
    opacity: 0.5; cursor: default; color: var(--text-muted); border-color: rgba(51, 255, 102, 0.28);
}
#planet-info .install-cost { font-weight: 600; }
#planet-info .install-short,
#planet-info .install-error { color: #f87171; font-size: 10px; }

/* ---- Colony pane: installations readout ------------------------------ */
.colony-installations-group .colony-install-row {
    padding: 6px 0;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
}
.colony-installations-group .colony-install-row:last-child { border-bottom: none; }
.colony-install-row .cir-head {
    display: flex; align-items: center; gap: 6px; font-size: 12px;
    cursor: pointer;
}
.colony-install-row .install-glyph { color: var(--accent-bright); }
.colony-install-row .install-label { color: var(--text-bright); font-weight: 600; }
.colony-install-row .cir-body { font-size: 11px; }
.colony-install-row .cir-tap { font-size: 10px; margin-top: 2px; padding-left: 18px; }
/* #3 (2026-07-10): each installation is a collapsible block — chevron rotates,
   detail folds away, so many installations stay scannable (Peter). */
.colony-install-row .cir-chevron {
    color: var(--text-muted); font-size: 9px; display: inline-block;
    transition: transform 0.15s ease; width: 9px;
}
.colony-install-row:not(.cir-collapsed) .cir-chevron { transform: rotate(90deg); }
.colony-install-row.cir-collapsed .cir-detail { display: none; }
.colony-install-row .cir-head:hover .install-label { color: var(--accent-bright); }

/* ---- Living, aging installation readout (point 7) -------------------------
   Shared by the system report, the COL pane and the planet view: ROI, a health
   bar, the Mind's aging cue and (report/COL only) the Refurbish/Decommission
   actions. Phosphor, compact; indented under the installation line. */
.install-readout {
    margin-top: 4px;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 10px;
}
.install-metrics { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.install-roi {
    color: var(--amber);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.install-roi--paid { color: var(--accent-bright); text-shadow: 0 0 6px var(--accent-glow); }
.install-returned { font-size: 10px; }
.install-health { display: flex; align-items: center; gap: 7px; }
.install-health-bar {
    position: relative;
    display: inline-block;
    width: 76px;
    height: 5px;
    border-radius: 3px;
    background: rgba(51, 255, 102, 0.18);
    overflow: hidden;
}
.install-health-bar > span {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
    border-radius: 3px;
}
.install-health.is-mid  .install-health-bar > span { background: var(--amber); box-shadow: 0 0 6px rgba(251,191,36,0.5); }
.install-health.is-low  .install-health-bar > span { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); }
.install-health-pct { font-size: 10px; }
.install-aging {
    color: var(--amber);
    font-size: 10px;
    letter-spacing: 0.02em;
}
.install-actions { display: flex; gap: 6px; margin-top: 1px; flex-wrap: wrap; }
.install-refurbish-btn,
.install-upgrade-btn,
.install-decommission-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(51, 255, 102, 0.32);
    color: var(--text-bright);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.install-refurbish-btn:hover:not(:disabled),
.install-upgrade-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent-bright);
    text-shadow: 0 0 6px var(--accent-glow);
}
.install-decommission-btn:hover {
    border-color: #f87171;
    color: #f87171;
}
.install-refurbish-btn:disabled,
.install-refurbish-btn.is-disabled,
.install-upgrade-btn:disabled,
.install-upgrade-btn.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ---- THE FRACTURE ARC — the diaspora readout -----------------------------
   Each distant colony as a compact, evocative row: status glyph + proper name
   (never shouted) + drift badge, a cohesion bar, the light-delayed "last heard"
   line (face 3), local economy and the invest/extract actions. Status tints the
   left edge: loyal green → independent amber → dark dim → alien magenta. */
/* The diaspora is its own major section — a clear separator + a stronger label
   so it holds equal weight with the home dashboard above, not lost beneath it. */
.distant-colonies-group { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(51, 255, 102, 0.16); }
.distant-colonies-group > .settings-label {
    color: var(--accent); letter-spacing: 0.14em; text-shadow: 0 0 6px var(--accent-glow);
}
.distant-colonies { display: flex; flex-direction: column; gap: 0; }
/* LIST IDIOM: delimited entries — hairline separators + status left-tint. */
.diaspora-row {
    padding: 8px 8px 8px 10px;
    border-left: 2px solid var(--accent);
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
    border-radius: 0;
    background: transparent;
    font-size: 11px;
}
.diaspora-row:last-child { border-bottom: none; }
.diaspora-row.status-independent { border-left-color: var(--amber); }
.diaspora-row.status-dark        { border-left-color: var(--fromdark-edge); opacity: 0.82; }
.diaspora-row.status-alien       { border-left-color: #c084fc; background: rgba(192, 132, 252, 0.07); }
/* Ruins — a dead site: the coldest, quietest row (dashed edge = nothing left). */
.diaspora-row.status-ruins       { border-left-style: dashed; border-left-color: var(--fromdark-edge); opacity: 0.62; }
.status-ruins .diaspora-glyph    { color: var(--fromdark-accent); }

.diaspora-head { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.diaspora-glyph { color: var(--accent-bright); }
.status-independent .diaspora-glyph { color: var(--amber); }
.status-dark  .diaspora-glyph { color: var(--fromdark-accent); }
.status-alien .diaspora-glyph { color: #c084fc; text-shadow: 0 0 6px rgba(192, 132, 252, 0.5); }
.diaspora-name { color: var(--text-bright); font-weight: 600; }   /* proper name — natural case */
.diaspora-loc  { font-size: 10px; }
.diaspora-badge {
    margin-left: auto;
    font-size: 9px;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(74, 222, 128, 0.16);
    color: #4ade80;
}
.drift-sibling  .diaspora-badge { background: rgba(251, 191, 36, 0.16);  color: var(--amber); }
.drift-stranger .diaspora-badge { background: rgba(248, 113, 113, 0.16); color: #f87171; }

.diaspora-line { margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.diaspora-heard { font-size: 10px; font-style: italic; }
.status-alien .diaspora-heard { color: #c084fc; font-style: italic; }
.diaspora-cohesion { display: inline-flex; align-items: center; gap: 6px; }
.diaspora-coh-bar {
    position: relative; display: inline-block;
    width: 64px; height: 5px; border-radius: 3px;
    background: rgba(51, 255, 102, 0.18); overflow: hidden;
}
.diaspora-coh-bar > span {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); border-radius: 3px;
}
.diaspora-cohesion.is-mid .diaspora-coh-bar > span { background: var(--amber); box-shadow: 0 0 6px rgba(251,191,36,0.5); }
.diaspora-cohesion.is-low .diaspora-coh-bar > span { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); }

.diaspora-actions { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.colony-invest-btn,
.colony-extract-btn {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
    border: 1px solid rgba(51, 255, 102, 0.32);
    color: var(--text-bright);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.colony-invest-btn:hover:not(:disabled) {
    border-color: var(--accent); color: var(--accent-bright); text-shadow: 0 0 6px var(--accent-glow);
}
.colony-extract-btn:hover:not(:disabled) { border-color: var(--amber); color: var(--amber); }
.colony-invest-btn:disabled,
.colony-invest-btn.is-disabled,
.colony-extract-btn:disabled,
.colony-extract-btn.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Diaspora — Industry<->Research dial (light-delayed directive). */
.diaspora-dial { margin-top: 6px; }
.diaspora-dial-labels {
    display: flex; justify-content: space-between;
    font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
}
.diaspora-slider {
    width: 100%; height: 4px; margin: 3px 0 0; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background: rgba(51, 255, 102, 0.22); border-radius: 3px;
}
.diaspora-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); cursor: pointer;
}
.diaspora-slider::-moz-range-thumb {
    width: 12px; height: 12px; border: 0; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); cursor: pointer;
}
.diaspora-directive {
    margin-top: 4px; font-size: 10px; color: var(--amber); letter-spacing: 0.02em;
}
/* Light-delayed actions in flight — your own aid/cargo crossing the dark. Dim
   phosphor, faintly pulsing, so "in transit" reads as ongoing, not settled. */
.diaspora-transit {
    margin-top: 4px; font-size: 10px; color: var(--accent-deep);
    letter-spacing: 0.02em; opacity: 0.9;
    animation: transit-pulse 3.2s ease-in-out infinite;
}
@keyframes transit-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1.0; } }

/* §4 policy stack — the delegate's tunable rule cards. */
.mind-policy {
    border: 1px solid var(--surface-edge, rgba(120,140,160,0.18));
    border-radius: 6px; padding: 7px 9px; margin: 6px 0;
    background: rgba(120,140,160,0.03);
}
.mind-policy.is-on { border-color: var(--accent, #33ff66); background: rgba(51,255,102,0.05); }
.mind-policy--coming { opacity: 0.5; }
.mind-policy-title { letter-spacing: 0.04em; }
.mind-policy-soon {
    font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px;
}
.mind-policy-desc { margin: 3px 0 5px; }
.mind-policy-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mind-policy-controls input { width: 4.5em; }
.mind-policy-plabel { font-size: 9px; letter-spacing: 0.04em; color: var(--text-muted); text-transform: uppercase; }
/* UI QA (Peter) — the controls flow as ONE inline sentence ("PRIORITY [50] ·
   REACH [25] ly · at most one launch every [8] y") instead of a broken column,
   and the inputs wear the phosphor instead of OS-white. */
.mind-policy-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; }
.mind-policy-controls input[type="number"],
.mind-policy-controls input[type="text"] {
    font: inherit; font-size: 12px; color: var(--text-bright);
    background: #020607; border: 1px solid var(--surface-edge);
    border-radius: 4px; padding: 4px 6px; width: 64px;
    color-scheme: dark;   /* the number-spinner arrows go dark too */
}
.mind-policy-controls input:focus { outline: none; border-color: var(--surface-edge-strong); box-shadow: 0 0 8px var(--accent-glow); }
.mind-policy-controls input:disabled { opacity: 0.45; }
/* UI QA (Peter) — native radios/checkboxes in the phosphor, not OS-white. */
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent-bright, #33ff66); color-scheme: dark; }
/* WHILE YOU SLEPT — expandable lines */
.brief-more { display: inline; }
.brief-more summary { list-style: none; cursor: pointer; }
.brief-more summary::-webkit-details-marker { display: none; }
.brief-more-cue { color: var(--accent); font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; }
.brief-more[open] summary { display: none; }

/* 🔮 the preview probe — the Mind's conditional answers. */
#mind-preview-btn { margin-top: 6px; }
.mind-preview-row {
    display: flex; gap: 7px; align-items: baseline;
    font-size: 10.5px; line-height: 1.55; color: var(--text-muted);
    padding: 5px 7px; margin-top: 4px; border-left: 2px solid rgba(120,140,160,0.25);
}
.mind-preview-row--act { color: var(--text-bright); border-left-color: var(--accent, #33ff66); }
.mind-preview-glyph { flex: 0 0 auto; }

/* §6 — the glossary reveal: their words, surrendered pair by pair. */
.tongue-gloss {
    margin: 2px 0 8px 18px; font-size: 11px; line-height: 1.7;
    border-left: 2px solid rgba(184, 166, 255, 0.25); padding-left: 8px;
}
.tongue-gloss-pair { margin-right: 12px; white-space: nowrap; }
.tongue-gloss-word { color: var(--alien-violet-bright, #b8a6ff); }

/* language.md §6 — PER-MEDIUM TRANSCRIPT TYPOGRAPHY. An undecoded foreign
   transcript wears the physics of its channel: photic text GLOWS (light is
   the word), chemical text LINGERS (a scent fades slowly), EM text carries a
   carrier-hum jitter, mechanical text sits heavy and spaced. Acoustic is the
   unmarked default — our own kind of voice. */
.prose--medium-photic {
    color: #d9ffe9;
    text-shadow: 0 0 6px rgba(120, 255, 170, 0.55), 0 0 14px rgba(120, 255, 170, 0.25);
    animation: photic-breathe 3.4s ease-in-out infinite;
}
@keyframes photic-breathe { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.prose--medium-chemical {
    letter-spacing: 0.09em; font-style: italic; opacity: 0.92;
    transition: opacity 4s ease;
    animation: chemical-linger 6s ease-out 1;
}
@keyframes chemical-linger { 0% { opacity: 0.35; letter-spacing: 0.22em; } 100% { opacity: 0.92; letter-spacing: 0.09em; } }
.prose--medium-EM {
    font-variant-ligatures: none;
    animation: em-jitter 0.9s steps(2) infinite;
}
@keyframes em-jitter { 0%, 100% { opacity: 0.94; } 50% { opacity: 0.88; } }
.prose--medium-mechanical { letter-spacing: 0.14em; font-weight: 600; opacity: 0.9; }

/* §7 reportback — a below-threshold feed entry, logged quietly. Dimmed and
   de-emphasised, never hidden; an unread one still keeps its accent marker. */
.feed-item--hushed { opacity: 0.45; }
.feed-item--hushed:hover { opacity: 0.85; }
.feed-item--hushed.unread { opacity: 0.62; }

/* Terraforming — the world bent toward you, tracked as a filling bar. Warm,
   sun-tinted: pushed to the end on a rogue, this glow becomes a real sun. */
.terra-bar {
    margin: 6px 0 2px; height: 6px; border-radius: 3px;
    background: rgba(255, 200, 120, 0.12);
    border: 1px solid rgba(255, 200, 120, 0.22);
    overflow: hidden;
}
.terra-bar-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, #b86a2e, #ffcf7a);
    box-shadow: 0 0 6px rgba(255, 190, 110, 0.5);
    transition: width 0.6s ease;
}

/* Diaspora — collapsible in-system instruments. */
.diaspora-insts { margin-top: 6px; }
.diaspora-inst-head {
    font-size: 10px; color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; gap: 5px;
}
.diaspora-inst-head:hover { color: var(--accent-bright); }
.diaspora-inst-head .cir-chevron {
    color: var(--text-muted); font-size: 9px; width: 9px; display: inline-block;
    transition: transform 0.15s ease;
}
.diaspora-insts:not(.di-collapsed) .cir-chevron { transform: rotate(90deg); }
.diaspora-insts.di-collapsed .diaspora-inst-detail { display: none; }
.diaspora-inst-detail { margin-top: 3px; padding-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.diaspora-inst-row { font-size: 10px; }
.diaspora-inst-row .install-glyph { color: var(--accent-bright); }
.diaspora-inst-row .install-label { color: var(--text-bright); }

/* Diaspora — navigation buttons. */
.diaspora-nav { display: flex; gap: 6px; margin-top: 7px; }
.colony-locate-btn,
.colony-system-btn {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em;
    text-transform: uppercase; padding: 3px 8px; border-radius: 3px; cursor: pointer;
    background: transparent; border: 1px solid rgba(51, 255, 102, 0.32); color: var(--text-bright);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.colony-locate-btn:hover,
.colony-system-btn:hover {
    border-color: var(--accent); color: var(--accent-bright); text-shadow: 0 0 6px var(--accent-glow);
}

/* ---- Atlas modal ----------------------------------------------------- */
#atlas-modal {
    position: fixed; inset: 0;
    background: rgba(0, 8, 4, 0.92);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
}
#atlas-content {
    position: relative;
    width: min(1100px, 96vw);
    height: min(820px, 92vh);
    background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%);
    border: 1px solid var(--surface-edge-strong);
    border-radius: 8px;
    display: flex; flex-direction: column;
    box-shadow: 0 0 48px rgba(51, 255, 102, 0.10), inset 0 1px 0 var(--surface-edge);
}
#atlas-header {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.14);
    display: flex; align-items: center; justify-content: space-between;
}
#atlas-header h2 { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; }
#atlas-close {
    background: transparent; border: none; color: var(--text-muted);
    font-size: 24px; cursor: pointer;
    width: 32px; height: 32px; line-height: 1; border-radius: 4px;
}
#atlas-close:hover { background: rgba(51, 255, 102, 0.14); color: var(--text-bright); }
#atlas-intro {
    padding: 12px 20px 0;
    font-size: 12px;
    line-height: 1.5;
}
#atlas-controls {
    padding: 10px 20px 12px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(51, 255, 102, 0.14);
}
.atlas-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.atlas-chip {
    background: transparent;
    border: 1px solid rgba(51, 255, 102, 0.28);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.atlas-chip:hover { color: var(--text-bright); border-color: rgba(51, 255, 102, 0.5); }
.atlas-chip.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(51, 255, 102, 0.10);
    box-shadow: 0 0 12px var(--accent-glow);
}
#atlas-search {
    margin-left: auto;
    background: rgba(3, 10, 4, 0.6);
    border: 1px solid rgba(51, 255, 102, 0.2);
    color: var(--text-bright);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 4px;
    width: 200px;
}
#atlas-search:focus { outline: none; border-color: rgba(74, 222, 128, 0.5); }

#atlas-table-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px 20px;
}
.atlas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.atlas-table thead th {
    position: sticky;
    top: 0;
    background: #000;
    text-align: left;
    color: var(--text-muted);
    font-weight: 500;
    padding: 10px 8px 8px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.2);
    cursor: pointer;
    user-select: none;
    z-index: 1;
}
.atlas-table thead th.num { text-align: right; }
.atlas-table thead th:hover { color: var(--text-bright); }
.atlas-table thead th.sorted { color: var(--accent); }
.atlas-table thead th.sorted::after {
    content: " ↓";
    font-size: 10px;
}
.atlas-table thead th.sorted.asc::after { content: " ↑"; }
.atlas-table tbody tr {
    cursor: pointer;
    transition: background 0.1s;
}
.atlas-table tbody tr:hover { background: rgba(51, 255, 102, 0.08); }
.atlas-table tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
    color: var(--text-bright);
}
.atlas-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.atlas-table .muted-cell { color: var(--text-dim); }
/* Lazy-load footer row — modal table (td) and aside list (div) share it. */
.tech-lens { padding: 6px 2px 10px; }
/* THE MIND chapter — inner sub-headings (NOT .settings-label: the accordion
   collapse rule keeps direct-child labels visible, so inner headings need
   their own class) + standing-order rows. */
.settings-sublabel {
    font-size: 9px; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--text-muted); margin: 12px 0 6px;
}
/* text-wrap:pretty tidies the ragged last line on these longer labels; the
   .nowrap-unit spans (in the markup) keep an inline number field glued to its
   unit so "ceiling 40 K" / "1 probe aloft" never split across a line break. */
.mind-order-row { display: block; margin: 4px 0; font-size: 11px; text-wrap: pretty; }
.nowrap-unit { white-space: nowrap; }
/* ⚛ MND pane — body padding + the ledger rows. */
#mind-pane-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
#mind-pane-body .settings-group { margin-bottom: 14px; padding-bottom: 6px; }
/* Air under the chapter head (Peter: zsufi) — the header is a rail, the
   content starts a breath below it. */
#mind-pane-body .settings-group > .settings-label { margin-bottom: 10px; }
/* The dials must actually BE dials in a narrow pane: labels shrink to
   words, the track takes the rest. */
#mind-pane-body .tech-weight-label { flex: 0 0 92px; font-size: 9px; }
#mind-pane-body .mind-dial, #mind-pane-body .mind-weight-slider { flex: 1; min-width: 70px; }
#mind-pane-body .tech-weight-row { margin: 8px 0; }
#mind-pane-body .mind-order-row { margin: 7px 0; line-height: 1.6; }
/* The K-ceiling field is a pocket number, not a form row — outweigh the
   generic .aside-pane full-width input rule. */
#mind-pane-body .mind-order-row input[type="number"] {
    width: 64px; display: inline-block; margin: 0 3px;
}
/* ✦ The Encyclopedia reader — pages of a sourceless book. */
.eg-reader { padding: 4px 0; }
.eg-entry { padding: 12px 2px; border-bottom: 1px solid rgba(51,255,102,0.12); }
.eg-entry:last-child { border-bottom: none; }
.eg-entry--you { border-left: 2px solid var(--amber); padding-left: 10px; }
.eg-head { font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; }
.eg-glyph { color: var(--accent); }
.eg-year { color: var(--accent-bright); }
.eg-text { font-size: 11.5px; line-height: 1.75; }
.eg-star { color: var(--accent-bright); text-shadow: 0 0 5px var(--accent-glow); }

/* The locked Encyclopedia pill — a promise, dimly phosphorescent. */
.fab-pill--locked { opacity: 0.55; }
.fab-pill--locked:hover { opacity: 0.8; }

/* LOG search — a display lens beside the chips, like the filter. */
.feed-search {
    width: calc(100% - 28px);
    margin: 8px 14px 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    color: var(--text-base);
    font: inherit; font-size: 11px;
    padding: 5px 8px;
}
.feed-search:focus { outline: none; border-color: var(--accent); }

/* D-PHASE — OUR KIND: the species readout (CFG pane). */
.species-head { font-size: 11px; color: var(--accent-bright); margin-bottom: 8px; letter-spacing: 0.05em; }
.species-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 10px; }
.species-row .sp-label { flex: 0 0 138px; color: var(--text-base); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.species-row .sp-meter { display: block; flex: 1; height: 7px; background: rgba(51,255,102,0.08); border: 1px solid var(--surface-edge); border-radius: 2px; overflow: hidden; }
.species-row .sp-fill { display: block; height: 100%; background: var(--accent-deep); }
.species-row.sp-strength .sp-fill { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.species-row.sp-weakness .sp-fill { background: rgba(51,255,102,0.25); }
.species-row .sp-val { flex: 0 0 26px; text-align: right; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
.species-row .sp-mark { flex: 0 0 14px; text-align: center; color: var(--text-muted); }
.species-info-btn {
    background: none; border: 1px solid var(--surface-edge); border-radius: 50%;
    width: 17px; height: 17px; line-height: 15px; padding: 0; margin-left: 8px;
    color: var(--text-muted); cursor: pointer; font-size: 11px;
    font-style: italic; font-weight: 700; text-align: center; vertical-align: -2px;
}
.species-info-btn:hover { color: var(--accent-bright); border-color: var(--accent); }
.species-explain dt { color: var(--accent-bright); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 12px; }
.species-explain dd { margin: 3px 0 0; font-size: 11px; line-height: 1.6; color: var(--text-base); }
.species-explain dd .sp-inplay { color: var(--text-muted); }

/* ⚔ Doctrine card — compact rows in the fleet composer. */
.doctrine-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.doctrine-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 10.5px; color: var(--text-base);
}
.doctrine-row .fleet-select { flex: 0 0 210px; }
.doctrine-threshold-row { margin: 8px 0 4px; }
.doctrine-threshold-row .colony-slider { flex: 1; min-width: 80px; }
/* ⛨ Mind defense posture row. */
.mind-posture-row { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0 8px; }
/* ✦ The market — listings + the announce affordance. */
.market-row { padding: 5px 0; border-bottom: 1px dotted var(--surface-edge); font-size: 11px; line-height: 1.5; }
.market-row:last-child { border-bottom: none; }
.market-row--foreign { cursor: pointer; }
.market-row--foreign:hover { background: rgba(51, 255, 102, 0.06); }
.amber-txt { color: var(--amber); text-shadow: 0 0 6px rgba(251, 191, 36, 0.3); }
/* ☠ Berserker danger marker on the map — the dead machines. */
.berserker-map-marker {
    color: var(--danger, #f87171);
    font-size: 15px;
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.7);
    pointer-events: auto; cursor: help;
    animation: berserker-pulse 2.5s ease-in-out infinite;
}
@keyframes berserker-pulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
.market-announce { display: flex; gap: 8px; align-items: center; margin: 10px 0 4px; }
.market-announce .fleet-select { flex: 1; min-width: 0; }
.fleet-deroute-btn {
    background: none; border: 1px solid var(--surface-edge); border-radius: 3px;
    color: var(--text-muted); cursor: pointer; font-size: 11px;
    padding: 1px 6px; margin-left: 6px; line-height: 1.4;
}
.fleet-deroute-btn:hover { color: var(--accent-bright); border-color: var(--accent); }
.mind-ledger-row {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 7px 2px; cursor: pointer;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
    font-size: 11px; line-height: 1.55;
}
.mind-ledger-row:hover { background: rgba(51, 255, 102, 0.06); }
.mind-ledger-year { flex: none; color: var(--text-muted); font-size: 10px; padding-top: 1px; }
.mind-ledger-msg {
    overflow: hidden; display: -webkit-box;
    -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.mind-order-row input[type="number"] {
    width: 64px; background: rgba(0,0,0,0.5); color: var(--text-base);
    border: 1px solid var(--surface-edge); border-radius: 3px;
    font: inherit; padding: 1px 4px;
}
.tech-lens .cmodal-foot-btn { margin: 4px 0 6px; }
.atlas-more-row td, div.atlas-more-row {
    padding: 12px 14px;
    text-align: center;
    color: var(--text-dim);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.atlas-table .pin { color: var(--amber); margin-right: 4px; font-size: 10px; }
.atlas-table .home-badge {
    color: #4ade80;
    font-size: 9px;
    font-weight: 700;
    margin-left: 6px;
    letter-spacing: 0.06em;
}

#body-tooltip {
    position: absolute;
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-base);
    pointer-events: none;
    z-index: 110;
    line-height: 1.6;
}

.hud-clickable {
    cursor: pointer;
    transition: color 0.15s;
    /* .hud parent's pointer-events: none disables clicks; opt back in
       per-row so the cursor: pointer above isn't a lie. */
    pointer-events: auto;
}

.missions-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 0 16px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.18);
}
.missions-tab {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}
.missions-tab:hover { color: var(--text-bright); }
.missions-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-shadow: 0 0 8px var(--accent-glow);
}

.feed-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
    justify-content: center;
}
.feed-chip {
    background: transparent;
    border: 1px solid rgba(51, 255, 102, 0.28);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.feed-chip:hover { color: var(--text-bright); border-color: rgba(51, 255, 102, 0.5); }
.feed-chip.active {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(51, 255, 102, 0.10);
    box-shadow: 0 0 12px var(--accent-glow);
}
/* SETI chip — distinctively phosphor-pulsed so the player can quickly
   isolate civilization events from the everyday telemetry stream. */
.feed-chip--seti {
    letter-spacing: 0.12em;
    font-weight: 700;
}
.feed-chip--seti.active {
    background: rgba(51, 255, 102, 0.18);
    box-shadow: 0 0 16px rgba(51, 255, 102, 0.45);
    animation: seti-chip-pulse 2.6s ease-in-out infinite;
}
@keyframes seti-chip-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(51, 255, 102, 0.45); }
    50%      { box-shadow: 0 0 26px rgba(51, 255, 102, 0.65); }
}
.hud-clickable:hover { color: var(--accent-bright); }
.hud-chevron {
    color: var(--text-dim);
    font-weight: 700;
    margin-left: 2px;
}

#missions-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
}
#missions-modal.hidden { display: none; }
#missions-content {
    width: min(820px, 92vw);
    max-height: 86vh;
    background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%);
    border: 1px solid var(--surface-edge-strong);
    border-radius: 8px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 48px rgba(51, 255, 102, 0.10), inset 0 1px 0 var(--surface-edge);
}
#missions-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(148,163,184,0.14);
}
#missions-header h2 { margin: 0; font-size: 18px; color: var(--text-bright); }
#missions-close {
    background: transparent; border: 0; color: var(--text-muted);
    font-size: 22px; cursor: pointer; padding: 0 6px; line-height: 1;
}
#missions-close:hover { color: #f87171; }
#missions-intro {
    padding: 10px 20px;
    font-size: 12px;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(148,163,184,0.08);
    display: flex; align-items: center; gap: 6px;
}
#missions-list {
    padding: 14px 20px;
    overflow-y: auto;
    flex: 1;
    display: flex; flex-direction: column; gap: 10px;
}
.mission-card {
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 10px 12px;
    background: rgba(2, 6, 22, 0.55);
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    font-size: 12px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.mission-card:hover {
    background: rgba(51, 255, 102, 0.05);
    border-color: var(--surface-edge-strong);
}
.mission-card.status-outbound  { border-left: 3px solid var(--info); }
.mission-card.status-reporting { border-left: 3px solid var(--accent); }
.mission-card.status-reported  { border-left: 3px solid var(--text-dim); opacity: 0.72; }
.mission-card.status-silent    { border-left: 3px solid var(--danger); opacity: 0.65; }
.mission-card.status-returned  { border-left: 3px solid var(--text-dim); opacity: 0.72; }
.mission-card.status-decayed   { border-left: 3px solid var(--text-dim); opacity: 0.62; }
.mission-card.status-lost      { border-left: 3px solid var(--danger); opacity: 0.62; }
/* Masked home-frame state: signals stopped arriving, fate unknown. Muted
   caution — dimmer than the active states, not the hard red of legacy lost. */
.mission-card.status-overdue   { border-left: 3px solid var(--warn); opacity: 0.80; }
.mission-target { font-weight: 600; color: var(--text-bright); font-size: 13px; }
.mission-probe-name { color: var(--text-bright); }
/* Unobtrusive ✎ rename affordance — dim until the card is hovered. */
.mission-rename-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.35;
    transition: opacity 0.15s, color 0.15s, text-shadow 0.15s;
}
.mission-card:hover .mission-rename-btn { opacity: 0.75; }
.mission-rename-btn:hover {
    color: var(--accent-bright);
    opacity: 1;
    text-shadow: 0 0 6px var(--accent-glow);
}
.mission-rename-input {
    background: var(--surface-1);
    border: 1px solid var(--accent);
    border-radius: 3px;
    padding: 1px 6px;
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 12px;
    max-width: 60%;
}
.mission-rename-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.mission-meta { color: var(--text-muted); }
.mission-meta strong { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 500; }
.mission-label { display: block; font-size: 9px; letter-spacing: 0.10em;
    color: var(--text-dim); text-transform: uppercase; margin-bottom: 2px; }
.mission-overdue { color: var(--danger); font-weight: 600; font-size: 11px; }

/* Aside-narrow override: stack vertically since the 4-column grid is for
   the wide modal. Target on top, meta entries in a tight column below. */
.aside-pane .mission-card {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 12px;
}
.aside-pane .mission-card .mission-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.aside-pane .mission-card .mission-meta .mission-label {
    display: inline-block;
    margin-bottom: 0;
}
.aside-pane .mission-card .mission-meta strong {
    text-align: right;
}

/* #1 (2026-07-10): a schematic a pozicio-horgony a jobb oldali control-oszlophoz. */
.schematic-view { position: relative; }

/* #1: SF-control oszlop a panel JOBB oldalan, egymas ala (a regi vizszintes sav
   tulcsordult es tordelt). A canvas fole lebeg, jobb felso sarok, konzol-panel. */
#system-mission {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: min(240px, 42%);
    padding: 12px;
    background: rgba(3, 10, 4, 0.72);
    border: 1px solid rgba(51, 255, 102, 0.18);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    font-size: 12px;
}
#system-mission > button:not(.info-icon),
#probe-dispatch-cluster > button:not(.info-icon),
#system-mission .probe-instrumented-toggle,
#system-mission .probe-name-input {
    width: 100%;
    box-sizing: border-box;
}
#system-mission .info-icon { align-self: flex-end; }
/* The dispatch cluster mirrors the panel's own stacking. */
#probe-dispatch-cluster { display: flex; flex-direction: column; gap: 8px; }

/* PROBE PRESENCE — the live readout that replaces the dispatch shortcut where
   a probe is en route or already in orbit (presence grammar). */
#probe-presence { display: flex; flex-direction: column; gap: 3px; }
#probe-presence.hidden { display: none; }
#probe-presence .pp-line { font-size: 9px; letter-spacing: 0.04em; line-height: 1.5; }
#probe-presence .pp-head { font-size: 10px; }
#probe-presence .pp-name { color: var(--text-bright); }
#probe-presence .pp-status {
    margin-left: auto; font-size: 8.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
}
#probe-presence .pp-head { display: flex; align-items: baseline; gap: 6px; }
#probe-presence .pp-glyph { color: var(--accent-deep); }
#probe-presence .pp-glyph--live {
    color: var(--accent);
    text-shadow: 0 0 6px var(--accent-glow);
    animation: pp-live-pulse 2.4s ease-in-out infinite;
}
@keyframes pp-live-pulse { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } }
#probe-dispatch-btn {
    /* C (2026-07-10): kek → foszforzold, mert SF (Peter). */
    background: var(--accent);
    color: var(--bg-base);
    border: 0;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
#probe-dispatch-btn:hover:not(:disabled) { background: var(--accent-bright); }
#probe-dispatch-btn:disabled { background: var(--surface-2); color: var(--text-dim); cursor: not-allowed; }
/* #1 (2026-07-10): teljes szelessegu also readout-sav — readout, nem proza →
   kapitalis kis font, max 2 sorra torik (line-clamp). */
#probe-status {
    color: var(--text-muted);
    width: 100%;
    box-sizing: border-box;
    padding: 8px 20px;
    font-size: var(--font-small);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-top: 1px solid rgba(51, 255, 102, 0.14);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#probe-status.success { color: #4ade80; }
#probe-status.error { color: #f87171; }

#system-legend {
    padding: 10px 20px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid rgba(51, 255, 102, 0.14);
}

#system-legend .legend-item { display: inline-flex; align-items: center; gap: 6px; }
#system-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
#system-legend .dot.terrestrial { background: #a78bfa; }
#system-legend .dot.gas_giant { background: var(--amber); }
#system-legend .dot.ice_giant { background: #67e8f9; }
#system-legend .dot.asteroid_belt { background: #64748b; }
#system-legend .hz-swatch {
    width: 14px; height: 10px;
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.55);
    display: inline-block;
    border-radius: 2px;
}

/* ---- FLEET pane (FLT) — collapsible composer + voyages list ------------ */
/* Mirrors the tx/colony phosphor styling. The composer builds a roster of
   base ship types; the list is a quiet record of your reach into the dark. */

/* The composer is a collapsible block — a header button toggles its body.
   Default collapsed once there are voyages out there (set from JS). */
.fleet-composer-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(51, 255, 102, 0.04);
    border: 0;
    border-bottom: 1px solid var(--surface-edge);
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s;
}
.fleet-composer-toggle:hover { background: rgba(51, 255, 102, 0.09); }
.fleet-composer-toggle .fct-glyph {
    color: var(--accent);
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 0 6px var(--accent-glow);
}
.fleet-composer-toggle .fct-label { flex: 1; text-align: left; }
.fleet-composer-toggle .fct-caret {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.15s;
}
.fleet-composer.collapsed .fct-caret { transform: rotate(-90deg); }
.fleet-composer.collapsed .fleet-composer-body { display: none; }
/* The dispatch block (cost readout + button + status) shares the standard
   settings-group inset, so the COST block is no longer flush to the edge. */
.fleet-dispatch-group .fleet-readout { margin: 0 0 12px; }

/* #8b: the pane ＋ button that opens a composer modal. Reuses the composer
   toggle chrome but sits flush as a full-width call to action. */
.composer-open-btn { border-top: 1px solid var(--surface-edge); }

/* ---- Composer modals (#fleet-modal / #seti-modal) --------------------- */
/* The FLEET and SETI composers, lifted into their own modals — same overlay/
   panel/header idiom as #missions-modal, sized for the narrow composer body. */
#fleet-modal, #seti-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.78);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
}
#fleet-modal.hidden, #seti-modal.hidden { display: none; }
#fleet-modal-content, #seti-modal-content {
    width: min(460px, 92vw);
    max-height: 88vh;
    background: linear-gradient(180deg, var(--bg-base) 0%, var(--bg-deep) 100%);
    border: 1px solid var(--surface-edge-strong);
    border-radius: 8px;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 0 48px rgba(51, 255, 102, 0.10), inset 0 1px 0 var(--surface-edge);
}
#fleet-modal-header, #seti-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(148,163,184,0.14);
}
#fleet-modal-header h2, #seti-modal-header h2 {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-bright);
}
#fleet-modal-close, #seti-modal-close {
    background: transparent; border: 0; color: var(--text-muted);
    font-size: 22px; cursor: pointer; padding: 0 6px; line-height: 1;
}
#fleet-modal-close:hover, #seti-modal-close:hover { color: #f87171; }
#fleet-modal-body, #seti-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
    flex: 1;
}
/* A locked target select (opened from a system view) reads as fixed, not broken. */
#fleet-modal-body select:disabled, #seti-modal-body select:disabled {
    opacity: 0.85;
    cursor: default;
}

/* System-view composer launchers — a two-up row under the probe controls. */
.system-compose-row { display: flex; gap: 6px; margin-top: 8px; }
.system-compose-btn {
    flex: 1;
    padding: 7px 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.06);
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
}
.system-compose-btn:hover { background: rgba(51, 255, 102, 0.12); }

/* Voyages: fleets and probes each in their own labelled sub-section. */
.fleet-deep-sub + .fleet-deep-sub { margin-top: 14px; }
.fleet-deep-sublabel {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
}
/* The moved missions list sheds the old full-height flex framing — inside the
   voyages group it's just a stack of probe blocks. */
.aside-pane[data-pane="fleet"] #aside-missions-list {
    flex: none;
    overflow: visible;
    padding: 0;
}
.aside-pane[data-pane="fleet"] #aside-missions-list .mission-card { margin: 6px 0; }

.fleet-select {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-base);
    background: var(--surface-2);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    padding: 5px 6px;
    margin-top: 6px;
}
/* Composer control unification (Peter): every field in the fleet/SETI modals
   shares ONE geometry — full width, same height, same face — no half-width
   taller input next to a full-width select. */
#fleet-modal-body input[type="text"],
#fleet-modal-body input[type="number"],
#fleet-modal-body select,
#seti-modal-body input[type="text"],
#seti-modal-body select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 30px;
    padding: 0 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    background: var(--surface-2);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    color: var(--text-bright);
}
#fleet-modal-body .settings-group > input + select { margin-top: 6px; }
.fleet-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.fleet-add-row .fleet-select { flex: 1 1 100%; margin-top: 0; }
.fleet-supply-input {
    flex: 1 1 100%;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-base);
    background: var(--surface-2);
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    padding: 5px 6px;
}
.fleet-supply-input.hidden, .fleet-select.hidden { display: none; }
.fleet-add-btn {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-bright);
    background: rgba(51, 255, 102, 0.10);
    border: 1px solid var(--surface-edge-strong);
    border-radius: 3px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.fleet-add-btn:hover { background: rgba(51, 255, 102, 0.18); box-shadow: 0 0 10px var(--accent-glow); }
.fleet-add-hint { font-size: 10px; line-height: 1.4; margin: 6px 0 2px; min-height: 1em; }
.fleet-ship-list { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.fleet-ship-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 3px 4px;
    border: 1px solid var(--surface-edge);
    border-radius: 2px;
    background: var(--surface-2);
}
.fleet-ship-glyph { color: var(--accent-bright); width: 1.2em; text-align: center; }
.fleet-ship-label { color: var(--text-base); }
.fleet-ship-cfg { flex: 1 1 auto; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-ship-remove {
    flex: 0 0 auto;
    color: var(--text-dim);
    background: none;
    border: none;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 3px;
}
.fleet-ship-remove:hover { color: var(--danger); }
.fleet-readout { margin: 12px 0; }
.fleet-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.fleet-row {
    padding: 7px 8px;
    border: 1px solid var(--surface-edge);
    border-radius: 3px;
    background: var(--surface-2);
}
.fleet-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.fleet-row-name { color: var(--accent-bright); font-size: 12px; }
.fleet-row-status {
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 2px;
    border: 1px solid var(--surface-edge);
}
.fleet-status-outbound { color: var(--accent); }
.fleet-status-arrived  { color: var(--accent-bright); border-color: var(--surface-edge-strong); }
.fleet-status-lost     { color: #ff9b5a; border-color: rgba(255, 155, 90, 0.5); }
.fleet-row-meta { font-size: 10px; margin: 4px 0; line-height: 1.4; }
.fleet-roster { letter-spacing: 0.12em; }
.fleet-roster-glyph { color: var(--accent-bright); }
.fleet-row-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(51, 255, 102, 0.10);
    overflow: hidden;
    margin: 4px 0 3px;
}
.fleet-row-fill { display: block; height: 100%; background: var(--accent-deep); transition: width 0.3s; }
.fleet-row-fill.fleet-status-arrived { background: var(--accent); }
.fleet-row-fill.fleet-status-lost { background: #ff9b5a; }
.fleet-row-eta { font-size: 10px; }

/* ======================================================================
   HYBRID UPPERCASE typography pass
   ----------------------------------------------------------------------
   (A) Console chrome → UPPERCASE. We target element-types + chrome classes
       (leaf nodes only — never a broad container like .aside-pane / body /
       a feed-item / a letter root) so the transform can't cascade into prose.
   (B) Narrative prose → stays sentence-case. The PROSE GUARD block below
       re-asserts text-transform:none on every narrative container; because
       those selectors are class/id-specificity they always outrank the
       element-level chrome rules here, even if one ever became an ancestor.
   ====================================================================== */

/* --- (A) CHROME → UPPERCASE ------------------------------------------- */
/* Element-type leaves that are always structural readouts, never sentences:
   every button (tabs, chips, composer + dispatch controls, fabs, rail, tx,
   fleet, mission, command, planetarium), pane/modal headings, table headers,
   and definition-list TERMS (field labels). Values live in <dd>, which we
   deliberately leave untouched. */
button,
h2,
th,
dt {
    text-transform: uppercase;
}

/* Small structural tags / status pills that aren't buttons or dt. */
/* C3 (Peter): a pill EGYSOROS műszer-címke — a "RADIO BURST" nem törhet
   ketté a szűk cellában. */
.body-type-pill { white-space: nowrap; }
.freshness,
.body-type-pill,
.leg-badge,
.rail-btn .rail-label,
.first-contact-title {
    text-transform: uppercase;
}

/* --- (B) PROSE GUARD → sentence-case (text-transform:none) ------------
   Every narrative / language string, plus the few proper-name and prose
   fragments that live *inside* an uppercased ancestor (a colony name in a
   <button>, the "open the sky" sub-label in the LOOK UP button). These must
   render sentence-case even if a parent is ever uppercased. */
.prose,
/* feed-item DESCRIPTIONS: the Mind's decade letter body, transmission /
   SETI-reply message bodies, and every ordinary feed row's sentence. */
.feed-msg,
/* Discovery-moment BODY/subtitle prose. */
.first-contact-body,
/* Installation RATIONALE ("difference = value") + the italic "needs a
   mission" note. */
.install-rationale,
.install-note,
/* Recon intel FACTS (Voyager-toned) + the in-transit pending line. */
.ri-facts,
.ri-facts li,
.ri-pending,
/* Active-SETI composer hints / void note. (A composer STATUS + a fleet-add
   hint operatív króm lett — kapitális, lásd a foundation blokkot; Peter.) */
.tx-hint,
.tx-void,
/* Every hint / info-tip / tooltip string. */
.settings-hint,
.hud-hint,
.pl-hint,
.build-hud-hint,
.colony-alloc-hint,
#map-pane-footer .mpf-hint,
#hover-tip,
/* Planet-panel per-body production tap (operational, in a non-uppercased panel). */
.cbr-tap,
/* Modal intros + slogan + info-popover — narrativ proza.
   (A .scan-line + az empty-state placeholderek MASHOL kapitalisak, lasd lentebb.) */
#missions-intro,
#atlas-intro,
.panel-slogan,
#info-popover-body,
/* Postcard caption WORLD NAME (a proper name, never a shouted label). */
.postcard-name,
/* Proper-name + prose fragments nested inside an uppercased ancestor. */
.colony-row-name,
.pl-open-text small {
    text-transform: none;
}

/* Placeholders + empty-states — operational hints, kapitalis a koherens konzol-
   erzesert (Peter: "a placeholderek is lehetnek mindenutt kapitalisak"). Az
   input ::placeholder CSAK a hint-szoveget nagybetusiti; a beirt ertek a sajat
   casingjet tartja. A narrativ introk/slogan/info-popover proza marad (fent). */
::placeholder { text-transform: uppercase; }
.feed-empty,
.constellation-empty,
.build-hud-empty,
.cmd-panel-empty,
.pl-draw-empty,
#panel-placeholder p,
#panel-placeholder .muted,
.cbr-none {
    text-transform: uppercase;
}

/* #1 finomitas (2026-07-10): kisebb SF-gombok + kisebb, kapitalis betuk a
   rendszernezet control-oszlopaban; a szin-legend sem proza → kis font, kapitalis.
   Lejjebb a fonttal ahol nagy = nagyobb SF-elmeny (Peter). */
#system-mission { font-size: var(--font-small); }
#system-mission button:not(.info-icon) {
    padding: 5px 9px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#system-mission .probe-instrumented-toggle { font-size: 9px; }
#system-mission .probe-name-input { font-size: 10px; padding: 5px 8px; }
#system-legend {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    gap: 12px;
}
#probe-status { font-size: 10px; }

/* ---- Toasts — ephemeral local acknowledgements ---------------------------
   Every diaspora command acts across light-years; the toast is the immediate
   confirmation that you SENT it (the lasting record of what returns is the LOG).
   Console chrome: uppercase, phosphor-green, slides in from the bottom-right. */
/* Toasts — DEAD CENTER (Peter), above everything: the acknowledgement is
   the moment's own voice, so it speaks from the middle of the room. */
.toast-stack {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 2147483647;
    display: flex; flex-direction: column; gap: 8px; align-items: center;
    pointer-events: none; max-width: min(480px, 90vw);
}
.toast {
    pointer-events: auto;
    font-size: 11px; line-height: 1.35; letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 16px; border-radius: 3px;
    background: rgba(6, 20, 10, 0.96);
    border: 1px solid var(--accent-deep);
    border-left: 3px solid var(--accent);
    color: var(--accent-bright);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.6), 0 0 14px var(--accent-glow);
    opacity: 0; transform: translateY(8px) scale(0.98);
    transition: opacity 0.32s ease, transform 0.32s ease;
}
.toast--in  { opacity: 1; transform: translateY(0) scale(1); }
.toast--out { opacity: 0; transform: translateY(-8px) scale(0.98); }
.toast--warn {
    border-color: var(--danger); border-left-color: var(--danger);
    color: var(--danger-bright); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 77, 77, 0.35);
}
.toast--info {
    border-color: var(--accent-deep); border-left-color: var(--accent-deep);
    color: var(--accent);
}
@media (max-width: 640px) {
    .toast-stack { left: 12px; right: 12px; bottom: 12px; max-width: none; align-items: stretch; }
    .toast { transform: translateY(16px); }
    .toast--in { transform: translateY(0); }
    .toast--out { transform: translateY(16px); }
}

/* ---- Detail modal — the reusable "list row → full exposition" overlay ------ */
.detail-modal {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
.detail-modal.hidden { display: none; }
/* FIXED SQUARE instrument panel (Peter: height = width, fixed; scroll is
   welcome INSIDE). Head and foot are delimited rails; only the body scrolls. */
.detail-modal-card {
    width: min(620px, 86vh, 94vw);
    height: min(620px, 86vh, 94vw);
    display: flex; flex-direction: column;
    background: rgba(6, 16, 10, 0.96);
    border: 1px solid var(--accent-deep);
    border-radius: 5px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 22px var(--accent-glow);
    overflow: hidden;
}
.detail-modal-head {
    flex: none;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 20px 9px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.22);
    background: rgba(51, 255, 102, 0.03);
}
.detail-modal-titles { flex: 1; min-width: 0; }
.detail-modal-title {
    margin: 0; font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--accent-bright); text-shadow: 0 0 8px var(--accent-glow);
}
.detail-modal-sub { margin-top: 3px; font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; }
.detail-modal-close {
    flex: none; background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 20px; line-height: 1; padding: 0 2px;
}
.detail-modal-close:hover { color: var(--accent-bright); text-shadow: 0 0 6px var(--accent-glow); }
.detail-modal-body { flex: 1; min-height: 0; padding: 14px 20px 16px; overflow-y: auto; font-size: 11px; }
/* The delimited FOOT rail — small function buttons, always visible. */
.detail-modal-foot {
    flex: none;
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    padding: 9px 20px;
    border-top: 1px solid rgba(51, 255, 102, 0.22);
    background: rgba(51, 255, 102, 0.03);
}

/* Modal tabs — spacious, small type. */
.cmodal-tabs {
    display: flex; gap: 2px; position: sticky; top: 0; z-index: 1;
    background: rgba(6, 16, 10, 0.96);
    padding: 8px 0 0; margin-bottom: 12px;
    border-bottom: 1px solid rgba(51, 255, 102, 0.18);
}
.cmodal-tab {
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    color: var(--text-muted); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 6px 12px 8px;
}
.cmodal-tab:hover { color: var(--accent); }
.cmodal-tab.active {
    color: var(--accent-bright); border-bottom-color: var(--accent);
    text-shadow: 0 0 6px var(--accent-glow);
    background: rgba(51, 255, 102, 0.08);
    border-radius: 3px 3px 0 0;
}
.cmodal-pane--hidden { display: none; }

/* Detail-modal content blocks — colony readout + LOG entry. */
.cdetail-cohesion { margin-bottom: 10px; font-size: 12px; }
.cdetail-heard { font-size: 11px; line-height: 1.55; margin: 0 0 12px; color: var(--text-base); }
.cdetail-econ { font-size: 10px; margin-bottom: 4px; }
.cdetail-block {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid rgba(51, 255, 102, 0.12);
}
.cdetail-block-h {
    font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-deep); margin-bottom: 6px;
}
/* Key-number grid in Overview. */
.cstat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; margin: 10px 0 2px; }
.cstat { display: flex; flex-direction: column; gap: 1px; }
.cstat-l { font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.cstat-v { font-size: 12px; color: var(--accent); }
.cdetail-thread-row {
    display: flex; gap: 7px; align-items: baseline;
    font-size: 10px; padding: 4px 0; line-height: 1.45;
    border-bottom: 1px solid rgba(51, 255, 102, 0.10);
}
.cdetail-thread-row:last-child { border-bottom: none; }
.cdetail-thread-row .feed-arrow { flex: none; color: var(--accent-deep); }
.cdetail-thread-row .feed-arrival { flex: none; color: var(--text-muted); font-size: 9px; }
/* Fracture #2 — the name-drift line: a living but estranging voice, tinted
   toward the alien violet (the same family as undecoded transcripts). */
.cdetail-namedrift { color: var(--alien-violet-text); font-style: italic; }
/* The Mind's unverified projection — hollow-diamond voice, quiet. */
.cdetail-projection {
    margin-top: 7px; font-size: 9px; letter-spacing: 0.04em;
    font-style: italic; color: var(--text-dim);
}

/* System-header inline rename (Peter: naming where you actually are). */
.system-rename-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 12px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.4;
    transition: opacity 0.15s, color 0.15s;
    text-transform: none;
}
.system-rename-btn:hover { opacity: 1; color: var(--accent-bright); text-shadow: 0 0 6px var(--accent-glow); }
#system-rename-input {
    background: var(--bg-deep);
    border: 1px solid var(--surface-edge-strong);
    border-radius: 3px;
    color: var(--text-bright);
    font-family: var(--font-ui);
    font-size: 12px;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    min-width: 200px;
    text-transform: none; /* a typed proper name keeps its own case */
}
#system-rename-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.cdetail-thread-row--fromdark { border-left: 2px solid var(--fromdark-edge); padding-left: 7px; }
.cdetail-thread-row--fromdark .prose { color: var(--fromdark-text); font-style: italic; }
.cdetail-thread-row--fromdark .feed-arrow { color: var(--fromdark-accent); }

/* Modal footer — small function buttons. */
.cmodal-foot {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 10px;
    border-top: 1px solid rgba(51, 255, 102, 0.18);
}
.cmodal-foot-btn {
    background: rgba(51, 255, 102, 0.04); border: 1px solid var(--accent-deep);
    color: var(--accent); cursor: pointer; font-size: 10px; letter-spacing: 0.03em;
    padding: 5px 9px; border-radius: 3px; text-transform: uppercase;
}
.cmodal-foot-btn:hover { color: var(--accent-bright); border-color: var(--accent); background: rgba(51, 255, 102, 0.1); }

/* Compact COL rows — the scannable list, carrying the main inline functions. */
.diaspora-row--compact { cursor: pointer; position: relative; transition: background 0.14s ease, border-color 0.14s ease; }
.diaspora-row--compact:hover { background: rgba(51, 255, 102, 0.06); border-color: var(--accent-deep); }
.diaspora-row--compact:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.diaspora-row--compact .diaspora-name { font-size: 11px; }
.diaspora-row--compact .diaspora-loc { font-size: 9px; }
.diaspora-row--compact .diaspora-line { font-size: 10px; }
.diaspora-transit-pip { margin-left: 6px; font-size: 9px; color: var(--accent-deep); letter-spacing: 0.03em; }
.diaspora-row-open {
    margin-left: auto; font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent-deep); opacity: 0.75; white-space: nowrap;
}
.diaspora-row--compact:hover .diaspora-row-open { color: var(--accent-bright); opacity: 1; }
/* Inline dial — compact, and it must NOT read as "click to open". */
.diaspora-dial--compact { display: flex; align-items: center; gap: 8px; margin-top: 5px; cursor: default; }
.diaspora-dial--compact .diaspora-slider { flex: 1; }
.diaspora-dial-mini { font-size: 8.5px; letter-spacing: 0.04em; white-space: nowrap; }
/* One-line last-log teaser in the row. */
.diaspora-lastlog { display: flex; gap: 5px; align-items: baseline; margin-top: 4px; font-size: 9px; }
.diaspora-lastlog .feed-arrow { flex: none; color: var(--accent-deep); }
.diaspora-lastlog-msg {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-muted); font-style: italic;
}

/* LOG (feed) — compact rows clamp the message; full text lives in the modal. */
.feed-item { cursor: pointer; }
.feed-item-chev { margin-left: auto; color: var(--accent-deep); font-size: 14px; opacity: 0.6; }
.feed-item:hover .feed-item-chev { color: var(--accent-bright); opacity: 1; }
.feed-msg--clamp {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; text-overflow: ellipsis;
}
.feed-archive-toggle {
    background: none; border: 1px solid transparent; cursor: pointer;
    color: var(--text-muted); font-size: 10px; letter-spacing: 0.04em;
    text-transform: uppercase; padding: 2px 6px; border-radius: 3px;
}
.feed-archive-toggle:hover { color: var(--accent-bright); border-color: var(--accent-deep); }
.feed-archive-toggle.active { color: var(--accent-bright); border-color: var(--accent); background: rgba(51, 255, 102, 0.08); }

/* LOG modal body. */
.logdetail-context { font-size: 9px; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 10px; }
.logdetail-msg { font-size: 11px; line-height: 1.6; }
.logdetail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.logdetail-actions button, .diaspora-nav button {
    background: rgba(51, 255, 102, 0.04); border: 1px solid var(--accent-deep);
    color: var(--accent); cursor: pointer; font-size: 11px; letter-spacing: 0.03em;
    padding: 6px 10px; border-radius: 3px; text-transform: uppercase;
}
.logdetail-actions button:hover, .diaspora-nav button:hover {
    color: var(--accent-bright); border-color: var(--accent);
    background: rgba(51, 255, 102, 0.1); text-shadow: 0 0 6px var(--accent-glow);
}
.feed-archive-btn:hover, .feed-restore-btn:hover { border-color: var(--warn); color: var(--warn); }

/* ---- The language bridge — a drifted reply awaiting decode ----------------
   Not the cold blue-grey of the dead (from-dark): a living but ALIEN voice — a
   faintly luminous violet cast, transcript set in mono to read as glyphs. Spend
   Knowledge (⌬ Decode) to reveal the plain text. */
.feed-item--undecoded {
    border-left: 3px solid var(--alien-violet) !important;
    background: rgba(96, 78, 156, 0.14) !important;
    padding-left: 10px; border-radius: 3px;
}
.feed-item--undecoded .feed-type { color: var(--alien-violet-bright) !important; letter-spacing: 0.10em; }
.feed-item--undecoded .feed-arrow { color: #a99cff !important; }
.feed-item--undecoded .feed-msg { color: var(--alien-violet-text); font-family: var(--font-mono); font-style: normal; }
.feed-item--undecoded .feed-item-chev { color: #a99cff; }
/* B4 — the ◈ attachment rail under a contact message. */
.logdetail-attach {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid var(--surface-edge);
    border-left: 2px solid var(--accent-deep);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.7;
}
.logdetail-attach .feed-decode-btn { margin-left: 8px; }
.logdetail-msg--undecoded {
    font-family: var(--font-mono); color: var(--alien-violet-text); font-style: normal;
    letter-spacing: 0.02em; text-shadow: 0 0 8px rgba(150, 130, 240, 0.22);
}
.cdetail-thread-row--undecoded { border-left: 2px solid var(--alien-violet-deep); padding-left: 7px; }
.cdetail-thread-row--undecoded .prose { color: var(--alien-violet-text); font-family: var(--font-mono); font-style: normal; }
.cdetail-thread-row--undecoded .feed-arrow { color: #a99cff; }
.feed-decode-btn {
    background: rgba(140, 120, 230, 0.12); border: 1px solid var(--alien-violet-deep); color: var(--alien-violet-bright);
    cursor: pointer; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
    padding: 5px 9px; border-radius: 3px;
}
.feed-decode-btn:hover {
    color: #d8ccff; border-color: #a99cff; background: rgba(140, 120, 230, 0.22);
    text-shadow: 0 0 6px rgba(150, 130, 240, 0.4);
}
.feed-decode-btn--mini { padding: 1px 6px; font-size: 8.5px; margin-left: 6px; vertical-align: middle; }

/* ═══ UI FOUNDATION (coherence pass, 2026-07-11) ══════════════════════════
   Peter's brief: console style, minimal, phosphor green; capitals ALWAYS
   phosphor; small discreet controls; themed instrument chrome everywhere. */

/* -- Scrollbars are instruments too. Thin phosphor rails; the OS scrollbar
      broke the CRT illusion in every scrollable modal body. */
* { scrollbar-width: thin; scrollbar-color: rgba(51, 255, 102, 0.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(51, 255, 102, 0.22);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(51, 255, 102, 0.45); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* -- Keyboard focus: one phosphor ring on every interactive element. */
button:focus-visible, [role="button"]:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

/* -- THE BUTTON LANGUAGE — three variants, all small, all discreet.
      .btn         quiet phosphor action (the default control)
      .btn-primary the ONE solid call-to-action per screen
      .btn-danger  destructive
   Existing button classes are mapped onto these recipes below. */
.btn, .cmodal-foot-btn, .logdetail-actions button,
.feed-focus-btn, .feed-archive-btn, .feed-restore-btn,
.colony-invest-btn, .colony-extract-btn, .colony-message-btn,
.colony-locate-btn, .colony-system-btn, .colony-relocate-btn {
    background: rgba(51, 255, 102, 0.05);
    border: 1px solid var(--surface-edge);
    color: var(--accent);
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: 9px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 3px;
    line-height: 1.4;
    transition: color 0.14s, border-color 0.14s, background 0.14s;
}
.btn:hover:not(:disabled), .cmodal-foot-btn:hover, .logdetail-actions button:hover,
.feed-focus-btn:hover,
.colony-invest-btn:hover:not(:disabled), .colony-extract-btn:hover:not(:disabled),
.colony-message-btn:hover:not(:disabled),
.colony-locate-btn:hover, .colony-system-btn:hover,
.colony-relocate-btn:hover:not(:disabled) {
    color: var(--accent-bright);
    border-color: var(--surface-edge-strong);
    background: rgba(51, 255, 102, 0.10);
    text-shadow: 0 0 6px var(--accent-glow);
}
/* The seat move is momentous — a slightly brighter resting border. */
.colony-relocate-btn { border-color: rgba(51, 255, 102, 0.28); }
.colony-relocate-btn:disabled, .colony-relocate-btn.is-disabled { opacity: 0.35; cursor: not-allowed; text-shadow: none; }
/* Danger-leaning quiet buttons keep their warning hover. */
.feed-archive-btn:hover, .feed-restore-btn:hover { border-color: var(--warn); color: var(--warn); text-shadow: none; }
/* Decode keeps its alien-violet identity, but the compact geometry. */
.feed-decode-btn { font-size: 9px; padding: 4px 9px; letter-spacing: 0.08em; }
/* One shared disabled recipe. */
.btn:disabled, .cmodal-foot-btn:disabled, .logdetail-actions button:disabled,
.colony-invest-btn:disabled, .colony-extract-btn:disabled, .colony-message-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    text-shadow: none;
}

/* -- Feed TYPE tag: the most-repeated chrome label finally obeys the console
      rule — uppercase, tracked, phosphor (never lowercase, never slate). */
.feed-meta .feed-type {
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

/* -- Capitals are ALWAYS phosphor (Peter). Structural uppercase leaves that
      inherited whitish text get the phosphor ramp explicitly. */
h2 { color: var(--text-bright); }
th, dt { color: var(--text-muted); }

/* -- Fleet composer voice (Peter): the hint, the status/error line and the
      ship roster are OPERATIVE CHROME — uppercase, small, tracked; never
      flowing body text. Errors: capitals, smaller, danger-red. */
.fleet-add-hint {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.06em;
    line-height: 1.6;
    color: var(--text-muted);
}
.tx-send-status {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.06em;
    font-style: normal;
}
.tx-send-status.tx-sent { font-style: normal; }
.fleet-ship-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
}
.fleet-ship-cfg {
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.04em;
}

/* -- Mission card status token: same vocabulary as the fleet rows, same
      casing (was lowercase in one house, uppercase in the other). */
.mission-status-token {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 9px;
    color: var(--text-muted);
}

/* ═══ MODAL LANGUAGE — one family ═════════════════════════════════════════
   Before this pass three unrelated close-button idioms and two header
   families coexisted; system/atlas/missions read as a different app than
   fleet/seti/probe/detail. One recipe for all. (The system modal keeps its
   deliberately light veil — the starmap stays visible behind it.) */

/* One close button. */
#system-close, #atlas-close, #missions-close,
#fleet-modal-close, #seti-modal-close, #probe-command-close,
#planet-close, #planetarium-close, .detail-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 3px;
    transition: color 0.14s;
}
#system-close:hover, #atlas-close:hover, #missions-close:hover,
#fleet-modal-close:hover, #seti-modal-close:hover, #probe-command-close:hover,
#planet-close:hover, #planetarium-close:hover, .detail-modal-close:hover {
    background: none;
    color: var(--accent-bright);
    text-shadow: 0 0 6px var(--accent-glow);
}

/* One modal title voice — phosphor small-caps, discreet glow. */
#system-header h2, #atlas-header h2, #missions-header h2,
#fleet-modal-header h2, #seti-modal-header h2,
#planet-header h2, #planetarium-header h2 {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: var(--accent-bright);
    text-shadow: 0 0 8px var(--accent-glow);
}

/* One backdrop voice for the card-modals (atlas had a navy near-opaque veil;
   missions/fleet/seti had no blur at all). */
#atlas-modal, #missions-modal, #fleet-modal, #seti-modal {
    background: rgba(0, 0, 0, 0.60);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* HOME dashboard mounted inside the detail modal: the modal supplies padding,
   title and shell — strip the panel-era duplicates. */
.detail-modal-body .colony-detail { padding: 0 0 8px; }
.detail-modal-body .colony-detail-name { display: none; }

/* ═══ PRESENCE GRAMMAR — proposal vs observed vs ours (Peter) ═════════════
   ◆ solid  = something IS there (ours: phosphor / alien: violet)
   ◇ hollow = a possibility only — the Mind's proposal, nothing built
   Distant "ours" is always a light-delayed LAST-KNOWN state, and says so. */
.install-rec--ghost { opacity: 0.75; }
.install-rec--ghost .install-label {
    color: var(--text-muted) !important;
    font-weight: 400 !important;
}
#system-report .install-diamond--hollow, #planet-info .install-diamond--hollow {
    color: var(--text-dim);
    text-shadow: none;
}
.install-proposed-tag {
    font-size: 8.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-dim);
    border: 1px dashed rgba(51, 255, 102, 0.28);
    border-radius: 3px;
    padding: 0px 5px;
    line-height: 1.6;
}
.install-lag {
    font-size: 9px;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    font-style: italic;
}
/* Case 2 (future wiring): infrastructure OBSERVED at an alien world — a
   stranger's presence, in the alien voice, stamped with the observation age. */
.install-alien .install-label { color: var(--alien-violet-bright) !important; }
.install-alien .install-diamond { color: var(--alien-violet); text-shadow: 0 0 6px rgba(150, 130, 240, 0.4); }
.install-alien .install-rationale { color: var(--alien-violet-text); }

/* LEFT instrument column of the planet view: the Mind's verdict card + the
   OBSERVATION provenance card below it (Peter). Shared card recipe. */
#planet-left {
    position: absolute;
    top: 64px;
    left: 24px;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}
#planet-mind, #planet-provenance {
    background: var(--surface-glass);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    isolation: isolate;
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    box-shadow: 0 0 24px rgba(51, 255, 102, 0.08);
}
#planet-mind.hidden, #planet-provenance.hidden { display: none; }
/* The Mind's working — one row per axis, measured against the cradle. */
.pm-factors { margin: 2px 0 9px; }
.pm-factors-h {
    font-size: 8.5px; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: 4px;
}
.pm-frow { display: flex; align-items: center; gap: 6px; padding: 1.5px 0; }
.pm-fk {
    flex: none; width: 62px;
    font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
}
.pm-fbar {
    flex: 1; height: 3px; border-radius: 2px;
    background: rgba(51, 255, 102, 0.08);
    overflow: hidden;
}
.pm-fbar > span { display: block; height: 100%; background: var(--accent-deep); }
.pm-fv { flex: none; font-size: 8.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* OBSERVATION provenance card. */
.pp2-head {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent-bright); text-shadow: 0 0 8px var(--accent-glow);
    margin-bottom: 6px;
}
.pp2-line { font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); line-height: 1.6; }
.pp2-age { color: var(--amber); }
.pp2-fid { color: var(--text-dim); }
.pp2-note {
    margin: 8px 0 0; padding-top: 7px;
    border-top: 1px solid rgba(51, 255, 102, 0.14);
    font-size: 9px; line-height: 1.55; font-style: italic;
    color: var(--fromdark-text);
}
.pm-head {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent-bright); text-shadow: 0 0 8px var(--accent-glow);
    display: flex; align-items: baseline; gap: 7px;
}
.pm-diamond { color: var(--accent); font-size: 12px; text-shadow: 0 0 6px var(--accent-glow); }
.pm-sub {
    margin-top: 3px; font-size: 8.5px; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--text-muted);
}
.pm-bar-row { margin: 9px 0 8px; display: flex; align-items: center; }
#planet-mind .envdist-bar { width: 100%; flex: 1; }
.pm-verdict { font-size: 10px; line-height: 1.5; color: var(--text-bright); margin: 0 0 6px; }
.pm-drift { font-size: 9px; line-height: 1.5; color: var(--text-muted); font-style: italic; margin: 0; }
.pm-legend {
    margin-top: 10px; padding-top: 7px;
    border-top: 1px solid rgba(51, 255, 102, 0.14);
    font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-dim);
}

/* THE MIND · COLONY FIT — environment-distance bar (0 = home-twin, 1 = alien).
   Near reads phosphor (kin), far reads alien-violet (it would become other). */
.envdist-bar {
    display: inline-block; vertical-align: middle;
    width: 84px; height: 5px; border-radius: 3px;
    background: rgba(51, 255, 102, 0.10);
    border: 1px solid rgba(51, 255, 102, 0.18);
    overflow: hidden; margin-right: 6px;
}
.envdist-fill {
    display: block; height: 100%;
    background: var(--amber);
}
.envdist-fill.is-near { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.envdist-fill.is-far  { background: var(--alien-violet); box-shadow: 0 0 6px rgba(150, 130, 240, 0.4); }
.envdist-val { font-variant-numeric: tabular-nums; color: var(--text-bright); }

/* LOEB — a loud fleet's visibility badge: amber warning, small chrome. */
.fleet-loud {
    margin-left: 6px;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--amber);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 3px;
    padding: 0 4px;
}

/* ═══ META M3 — THE EXODUS ═══════════════════════════════════════════════════
   Composer section (the species boards) + the fleet-row flag + the transit
   banner. Phosphor chrome; the flag rides amber like everything irreversible. */
.fleet-exodus-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.fleet-exodus-row input[type="checkbox"] { accent-color: var(--amber); }
.fleet-exodus-title {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
}
.fleet-exodus-badge { color: var(--amber); }
#nomad-banner {
    position: fixed;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    /* UI QA (Peter) — UNDER the modal veil (500): the crossing strip is
       ambient chrome, and it used to stamp itself over modal titles. */
    z-index: 400;
    max-width: min(92vw, 860px);
    padding: 4px 14px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber);
    background: rgba(20, 14, 2, 0.92);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.18);
    text-align: center;
    pointer-events: none;
}
#nomad-banner .nomad-lost { color: var(--danger, #f87171); }

/* PHASE A — the research-programs modal: a phosphor ladder list. Pips reuse
   the presence grammar (◆ earned · ◇ not yet). */
.tech-list { display: flex; flex-direction: column; gap: 14px; }
.tech-row { border: 1px solid var(--surface-edge); border-radius: 4px; padding: 10px 14px; }
.tech-row-head { display: flex; align-items: center; gap: 10px; }
.tech-glyph { color: var(--accent-bright); }
.tech-label { font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-bright); flex: 1; }
.tech-pips { font-size: 10px; letter-spacing: 0.18em; color: var(--accent); }
.tech-effect { font-size: 11px; color: var(--accent-bright); margin-top: 5px; }
.tech-blurb { font-size: 10.5px; line-height: 1.5; margin-top: 4px; }
.tech-action { margin-top: 8px; }
.tech-action .cmodal-foot-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.tech-running { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.tech-foot-hint { margin-top: 14px; font-size: 10px; line-height: 1.5; }
/* Typography rule (Peter): non-prose = CONSOLE CHROME = phosphor CAPS.
   Prose (blurbs, hints) stays sentence-case. */
.tech-sub {
    font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted); margin: 2px 0 12px;
}
.tech-effect { text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em; }
.tech-action .cmodal-foot-btn { text-transform: uppercase; letter-spacing: 0.06em; }
.tech-action .muted { text-transform: uppercase; font-size: 9.5px; letter-spacing: 0.05em; }
/* Home-detail tabs + breathing room (Peter: "zsufi") */
#home-detail-tabs { margin-top: 18px; }
#home-tab-research { margin-top: 12px; }
#home-tab-installations { margin-top: 12px; }
.colony-detail .settings-group { margin-top: 16px; }
.colony-alloc-readout span, .colony-metric-sub, .colony-metric-fig {
    text-transform: uppercase; letter-spacing: 0.05em; font-size: 9.5px;
}
.tech-theme-head {
    margin: 16px 0 4px;
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent);
    border-bottom: 1px solid var(--surface-edge);
    padding-bottom: 4px;
}
.tech-weights { border: 1px solid var(--surface-edge-strong); border-radius: 4px; padding: 12px 14px; margin-bottom: 16px; }
/* Research chapters — ONE frame idiom for every accordion section (Peter:
   some were boxed, some were bare). The ID-scoped rule outweighs the
   per-block styles above/below, so all six chapters read identically. */
#research-inline .settings-group {
    border: 1px solid var(--surface-edge);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 12px;
}
#research-inline .tech-weights { border-color: var(--surface-edge-strong); }
.tech-weight-row { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.tech-weight-label { flex: 0 0 130px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-bright); }
.tech-weight-slider { flex: 1; }
.tech-weight-val { flex: 0 0 42px; text-align: right; font-size: 10.5px; color: var(--accent-bright); font-variant-numeric: tabular-nums; }
/* The outbreak ledger — the named insights, the species' own trophies. */
.tech-discoveries { margin-top: 6px; }
.tech-disc-row { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px dotted var(--surface-edge); font-size: 11px; }
.tech-disc-row:last-child { border-bottom: none; }
.tech-disc--treasure { color: var(--amber); text-shadow: 0 0 6px rgba(251, 191, 36, 0.35); }
.tech-disc-year { flex: 0 0 52px; color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 10px; }
.tech-disc-name { color: var(--accent-bright); letter-spacing: 0.03em; }
.tech-disc-track { margin-left: auto; font-size: 9px; letter-spacing: 0.08em; }

/* GREAT FILTER — the detected-impactor strip. Danger chrome, CLICKABLE (the
   deflection act itself); pulses gently — the sky should not be ignorable. */
#impactor-banner {
    position: fixed;
    top: 44px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 951;
    max-width: min(92vw, 860px);
    padding: 5px 16px;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--danger, #f87171);
    background: rgba(24, 6, 6, 0.94);
    border: 1px solid rgba(248, 113, 113, 0.45);
    border-radius: 4px;
    box-shadow: 0 0 16px rgba(248, 113, 113, 0.22);
    text-align: center;
    cursor: pointer;
    animation: impactor-pulse 2.4s ease-in-out infinite;
}
#impactor-banner:hover { background: rgba(40, 10, 10, 0.96); border-color: rgba(248, 113, 113, 0.7); }
#impactor-banner .imp-hint { color: var(--text-muted); text-transform: none; letter-spacing: 0.04em; }
@keyframes impactor-pulse {
    0%, 100% { box-shadow: 0 0 16px rgba(248, 113, 113, 0.22); }
    50%      { box-shadow: 0 0 26px rgba(248, 113, 113, 0.40); }
}

/* GREAT FILTER — the full-screen states. EVACUATION: one word, one date, the
   dark, nothing clickable underneath (Peter: "és slussz"). Extinction: the
   same room, permanently. */
#evacuation-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(2, 6, 3, 0.93);
    backdrop-filter: blur(2px);
    text-align: center;
    padding: 24px;
}
#evacuation-overlay .evac-title {
    font-size: 34px;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--amber);
    text-shadow: 0 0 24px rgba(251, 191, 36, 0.35);
    animation: impactor-pulse 3.2s ease-in-out infinite;
}
#evacuation-overlay .evac-title.evac-end {
    color: var(--text-muted);
    text-shadow: none;
    animation: none;
}
#evacuation-overlay .evac-sub {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-bright);
}
#evacuation-overlay .evac-note {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

/* Installations 2.0 — the capacity chip (the continuous works). */
.install-cap {
    margin-left: 8px;
    font-size: 8.5px;
    letter-spacing: 0.08em;
    color: var(--accent-bright);
    border: 1px solid var(--surface-edge-strong);
    border-radius: 3px;
    padding: 0 4px;
    text-transform: uppercase;
}

/* Field programs + the beacon dial */
.install-mandate { margin-top: 8px; }
.install-mandate-select { width: 100%; font-size: 10.5px; }
.install-mandate-status { margin-top: 4px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.tech-broadcast { border: 1px solid var(--surface-edge); border-radius: 4px; padding: 10px 14px; margin-bottom: 16px; }
.tech-bc-row { display: flex; gap: 8px; margin-top: 6px; }
.tech-bc-btn {
    flex: 1; background: var(--bg-deep); border: 1px solid var(--surface-edge);
    border-radius: 3px; padding: 6px 4px; color: var(--text-muted);
    font-family: inherit; font-size: 9.5px; letter-spacing: 0.10em; cursor: pointer;
}
.tech-bc-btn:hover { border-color: var(--surface-edge-strong); color: var(--text-bright); }
.tech-bc-btn.active { color: var(--accent-bright); border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

/* B2 — the answer composer */
.creply-text { width: 100%; resize: vertical; font-family: inherit; margin-top: 4px; }
.feed-reply-btn { }

/* B2 answer-composer polish (Peter's screenshot): breathing room above
   section labels, block-laid checkboxes with gaps, CAPS chrome. */
.creply-body .settings-label { margin-top: 16px; }
.creply-body .settings-label:first-child { margin-top: 4px; }
.creply-comps { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.creply-check {
    display: flex; align-items: center; gap: 10px;
    font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
}
.creply-check input { flex: 0 0 auto; }
.creply-text { margin-top: 6px; }
/* Status feedback lines are console chrome — CAPS. */
.tx-send-status { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }

/* B2 — CONTACTS ledger + the conversation stream */
.contact-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 6px 8px; border: 1px solid var(--surface-edge); border-radius: 4px;
    margin-bottom: 6px; cursor: pointer; font-size: 11px;
}
.contact-row:hover { border-color: var(--surface-edge-strong); background: rgba(51,255,102,0.04); }
.contact-name { color: var(--text-bright); letter-spacing: 0.04em; }
.contact-est { color: var(--accent-bright); font-size: 9px; letter-spacing: 0.1em; }
.contact-meta { margin-left: auto; font-size: 9.5px; }
.contact-stream { display: flex; flex-direction: column; gap: 12px; }
.cmsg { max-width: 78%; border: 1px solid var(--surface-edge); border-radius: 6px; padding: 8px 12px; }
.cmsg-in  { align-self: flex-start; border-color: rgba(150,130,240,0.4); background: rgba(120,100,220,0.06); }
.cmsg-out { align-self: flex-end; background: rgba(51,255,102,0.05); }
.cmsg-undecoded .cmsg-body { color: var(--alien-violet-bright, #b8a6ff); font-style: italic; }
.cmsg-year { font-size: 9px; letter-spacing: 0.08em; margin-bottom: 4px; }
.cmsg-body { font-size: 12px; line-height: 1.55; }
.cmsg-state { margin-top: 6px; }

/* Accordion (Peter): collapsible pane blocks, phosphor "+N worth opening" badge. */
.settings-label.acc-head { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.settings-label.acc-head::before { content: "▾"; color: var(--text-muted); font-size: 9px; transition: transform 0.15s; }
.settings-group.acc-collapsed .settings-label.acc-head::before { transform: rotate(-90deg); }
.settings-group.acc-collapsed > *:not(.settings-label) { display: none; }
.acc-badge {
    margin-left: auto;
    font-size: 8.5px; letter-spacing: 0.08em;
    color: var(--bg-base); background: var(--accent);
    border-radius: 8px; padding: 0 6px;
    box-shadow: 0 0 8px var(--accent-glow);
}
.cmodal-tab .acc-badge { margin-left: 6px; }
#colony-pane-tabs { margin-bottom: 12px; }

/* ✦ Probe Hall of Fame (missions modal, hall tab) */
.hall-records { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 18px; }
.hall-record {
    display: flex; align-items: flex-start; gap: 12px;
    border: 1px solid var(--surface-edge);
    border-left: 3px solid var(--accent);
    padding: 10px 14px;
    box-shadow: 0 0 10px var(--accent-glow);
}
.hall-glyph { color: var(--accent); font-size: 18px; line-height: 1.2; text-shadow: 0 0 8px var(--accent-glow); }
.hall-title { font-size: 11px; letter-spacing: 0.14em; color: var(--accent); }
.hall-holder { margin-top: 2px; color: var(--text-bright); }
.hall-deed { margin-top: 2px; font-size: 11px; }
.hall-section-title { margin: 16px 0 6px; font-size: 11px; letter-spacing: 0.14em; color: var(--text-muted); }
.hall-line { padding: 3px 0; font-size: 12px; }

/* ⌬ The tongues (SETI Intel accordion) */
.tongue-row { padding: 4px 0; font-size: 12px; }
.tongue-row--own { color: var(--text-bright); }
.tongue-row--foreign { cursor: pointer; }
.tongue-row--foreign:hover { color: var(--text-bright); text-shadow: 0 0 6px var(--accent-glow); }

/* UI QA (Peter) — the Listen tab's block sat flush against the pane edge. */
#seti-tab-listen .seti-wf-wrap { padding: 0 12px 14px; }
#seti-tab-listen .tech-weight-row { margin-top: 10px; }

/* UI QA (Peter) — the rogue modal's found-buttons wore OS-white. Phosphor. */
.rogue-found-btn {
    font: inherit; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--accent-bright); background: rgba(51, 255, 102, 0.06);
    border: 1px solid var(--surface-edge-strong); border-radius: 5px;
    padding: 8px 12px; cursor: pointer;
}
.rogue-found-btn:hover { background: rgba(51, 255, 102, 0.14); box-shadow: 0 0 12px var(--accent-glow); }
#rogue-view-planet { margin-top: 10px; }

/* LAUNCH — the Welcome fab is an <a>, keep it pill-clean. */
a.fab-pill { text-decoration: none; }

/* ═══ C3 — MOBILE VEIL: the star map is a desktop instrument. ═══ */
#mobile-veil {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 6, 3, 0.96);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
}
#mobile-veil.hidden { display: none; }
.mobile-veil-card {
    max-width: 420px; text-align: center;
    border: 1px solid var(--surface-edge-strong);
    border-radius: 10px; padding: 30px 22px;
    background: var(--surface-1);
    box-shadow: 0 0 30px rgba(51, 255, 102, 0.15);
}
.mobile-veil-title {
    font-size: 26px; letter-spacing: 0.3em; color: var(--text-bright);
    text-shadow: 0 0 14px rgba(51, 255, 102, 0.4); padding-left: 0.3em;
}
.mobile-veil-sub { color: var(--accent); font-size: 11px; letter-spacing: 0.2em; margin: 6px 0 18px; }
.mobile-veil-text { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.mobile-veil-text strong { color: var(--text-bright); }
.mobile-veil-amber { color: var(--amber, #fbbf24); }
.mobile-veil-btn {
    display: block; margin: 18px 0 10px; padding: 13px;
    border: 1px solid var(--surface-edge-strong); border-radius: 6px;
    color: var(--accent); text-decoration: none; font-size: 12px;
    letter-spacing: 0.1em; text-transform: uppercase;
    background: rgba(51, 255, 102, 0.06);
}
.mobile-veil-foot { color: var(--text-muted); font-size: 11px; margin-bottom: 14px; }
#mobile-veil-anyway {
    background: transparent; border: none; color: var(--text-muted);
    font: inherit; font-size: 10px; text-decoration: underline; cursor: pointer;
}