/* ── Atlas ──────────────────────────────────────────── */

.atlas-intro {
  margin-bottom: 10px;
}
.atlas-intro h2 { font-size: 20px; margin-bottom: 6px; }
.atlas-intro p { color: var(--text-secondary); font-size: 13px; }

/* DCOSMOS-GALAXYMAP: intro header row carries the Map | List toggle */
.atlas-intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.sharing-off .btn-share-atlas,
body.sharing-off .btn-share-card {
  opacity: 0.35;
  cursor: default;
}
.stat-box { position: relative; cursor: pointer; }
.stat-box .stat-icon { color: var(--text-secondary); display: inline-flex; }
.stat-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--bg-panel, #0d1526);
  border: 1px solid var(--accent-dim, rgba(245, 158, 11, 0.45));
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--text-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 20;
}
.stat-tip.show { opacity: 1; }
.stat-box .stat-icon svg { display: block; width: 17px; height: 17px; }
.star-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}

/* Atlas map-view: view-body becomes a flex column so the map fills all
   remaining space below the intro row. */
#atlas.map-view .view-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}
/* In map mode the heading and blurb go away so the map gets the space, but
   the control row STAYS -- it carries the Map | List toggle, the only way
   back to the list view. */
#atlas.map-view .atlas-intro {
  margin-bottom: 0;
  padding: 10px 14px;
  flex-shrink: 0;
}
#atlas.map-view .atlas-intro h2,
#atlas.map-view .atlas-intro p {
  display: none;
}

.atlas-intro-line {
  font-family: var(--font-data);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.atlas-map {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
}
#galaxyCanvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 0;
  background: #000;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
#galaxyCanvas:active { cursor: grabbing; }

/* hidden must win over the display:flex/grid/block these carry */
.atlas-map[hidden],
.atlas-stats[hidden],
.atlas-search[hidden],
.atlas-grid[hidden] { display: none !important; }

/* DCOSMOS-ATLASSEARCH: search/filter bar above the atlas card grid */
.atlas-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 12px;
}
.atlas-search input {
  flex: 1;
  min-width: 80px;
  max-width: 480px;
  padding: 9px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-body);
  transition: border-color 0.2s;
}
.atlas-search input::placeholder {
  color: var(--text-dim);
}
.atlas-search input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.1);
}
/* DCOSMOS-FAVSTAR: favorites filter toggle in the atlas search bar */
.atlas-fav-filter {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 7px 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.atlas-fav-filter:hover {
  color: var(--text-secondary);
  border-color: var(--accent);
}
.atlas-fav-filter.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(245, 158, 11, 0.08);
}
/* small star pinned to the top right of a favorited card */
.entry-fav-star {
  position: absolute;
  top: 5px;
  right: 10px;
  color: var(--accent);
  font-size: 12px;
}

.atlas-no-match {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-dim);
  font-size: 14px;
}

.atlas-stats {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.stat-box .stat-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}
.stat-box .stat-label {
  font-size: 10px;
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-top: 4px;
}

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.atlas-entry {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.atlas-entry:hover {
  border-color: var(--accent-dim);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.atlas-entry .entry-info {
  flex: 1;
  min-width: 0;
}

.atlas-entry .entry-age {
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
}
.atlas-entry .entry-name {
  font-size: 14px;
  font-weight: 600;
}
.atlas-entry .entry-id {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.atlas-entry .entry-source {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atlas-entry .entry-summary {
  font-family: var(--font-data);
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.5;
}
/* DCOSMOS-PLANETCOUNT: planet-type colored dots on atlas cards */
.planet-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
.pdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pdot-hab {
  box-shadow: 0 0 4px #34d399;
}
/* DCOSMOS-ENRICH: deepened / re-designated markers on atlas cards */
.atlas-entry .entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.atlas-entry .entry-tag {
  font-family: var(--font-data);
  font-size: 9px;
  padding: 1px 7px;
  border: 1px solid var(--accent-dim);
  border-radius: 8px;
  color: var(--accent);
  white-space: nowrap;
}

/* DCOSMOS-REVISIT: survey percentage badge on atlas cards */
.entry-survey-pct {
  font-family: var(--font-data);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  flex-shrink: 0;
}
.entry-survey-pct.fully-surveyed {
  background: rgba(245, 158, 11, 0.15);
  color: var(--accent);
}

.atlas-empty {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-dim);
}
.atlas-empty p { margin-bottom: 16px; font-size: 14px; }
/* DCOSMOS-MAPWELCOME: centered welcome card over an empty galaxy map. The
   outer layer spans the map but lets pointer events through; only the card
   itself catches taps. */
.atlas-map-welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.atlas-map-welcome[hidden] { display: none !important; }
.atlas-map-welcome-card {
  pointer-events: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 26px 22px;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.atlas-map-welcome-card p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* DCOSMOS-GALAXYMAP mobile: in map mode the atlas body becomes a column
   filling the viewport below the header (same recipe as the reveal view)
   and the map stage takes all the space left under the intro row.
   Short screens count as mobile so landscape phones stay full-bleed. */
@media (max-width: 720px), (max-height: 500px) {
  #atlas.map-view #galaxyCanvas { border-radius: 0; }
}

/* ── Scrollbar ──────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Responsive ─────────────────────────────────────── */

@media (max-width: 768px) {
  .landing-title { font-size: 28px; letter-spacing: 3px; }
  .landing-subtitle { font-size: 14px; }
  .landing-card { width: 100%; max-width: 300px; }
  header { padding: 10px 12px; }
  header nav { gap: 4px; }
  header nav button { padding: 5px 10px; font-size: 11px; }
  .view-body { padding: 16px 12px; }
  .atlas-grid { grid-template-columns: 1fr; }
}

/* DCOSMOS-ATLASLINK: the share button rides the header, right of the
   galaxy button, and pushes the rest of the nav to the right side. */
header nav .btn-share-atlas { margin-right: auto; color: var(--accent-dim, rgba(245, 158, 11, 0.6)); }
header nav .btn-share-atlas:hover { color: var(--accent); border-color: var(--accent); }
.btn-share-atlas:disabled { opacity: 0.5; cursor: default; }
.atlas-shared-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 6px; padding: 8px 14px; margin-bottom: 10px;
  font: 12px var(--font-data); color: var(--text-dim, #94a3b8);
}
.btn-exit-shared { font-size: 11px; padding: 3px 10px; }
.btn-merge-atlas {
  font-size: 11px; padding: 3px 12px; border-radius: 4px; cursor: pointer;
  background: var(--accent, #f59e0b); color: #000; border: 1px solid var(--accent, #f59e0b);
  font-family: var(--font-data); letter-spacing: 0.5px;
  transition: opacity 0.15s;
}
.btn-merge-atlas:hover { opacity: 0.85; }

/* DCOSMOS-MULTISURV: merge ceremony overlay */
.merge-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.merge-overlay[hidden] { display: none !important; }
.merge-card {
  background: var(--bg-card, #1e293b); border: 1px solid var(--border, #334155);
  border-radius: 10px; padding: 32px 28px; max-width: 400px; width: 90%;
  text-align: center;
}
.merge-title {
  font-size: 18px; font-weight: 700; margin-bottom: 18px;
  color: var(--accent, #f59e0b); letter-spacing: 1px;
}
.merge-names {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.merge-name {
  font-size: 15px; font-weight: 600; color: var(--text-primary, #e2e8f0);
}
.merge-amp {
  font-size: 18px; color: var(--accent, #f59e0b);
}
.merge-sub {
  color: var(--text-secondary, #94a3b8); font-size: 13px; margin-bottom: 14px;
}
.merge-hint {
  color: var(--text-dim, #64748b); font-size: 11px; margin-top: 8px;
}
.merge-list {
  max-height: 200px; overflow-y: auto; margin-bottom: 12px;
  text-align: left;
}
.merge-sys {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.merge-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.merge-sys-name {
  font-size: 13px; color: var(--text-primary, #e2e8f0); flex: 1;
}
.merge-sys-id {
  font: 10px var(--font-data); color: var(--text-dim, #64748b);
}
.merge-actions {
  display: flex; gap: 10px; justify-content: center; margin-top: 18px;
}
.merge-done { padding: 20px 0; }
.merge-done-icon { font-size: 36px; margin-bottom: 10px; }
.merge-done p { color: var(--text-secondary, #94a3b8); font-size: 14px; }