/* ---------------------------------------------------------------
   The sky atlas: full-bleed map, left rail, floating controls,
   first-run introduction.
   --------------------------------------------------------------- */

.body--app {
  overflow: hidden;
}

.atlas {
  /* Positioned, so the rail's absolute placement resolves against the atlas
     rather than the viewport — otherwise it slides up under the header. */
  position: relative;
  display: grid;
  grid-template-columns: 336px 1fr;
  height: calc(100vh - var(--nav-h));
  height: calc(100dvh - var(--nav-h));
}

/* --- Left rail ---------------------------------------------------- */

.rail {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  z-index: 20;
}

.rail__head {
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.rail__search {
  position: relative;
  display: flex;
  align-items: center;
}

.rail__search svg {
  position: absolute;
  left: 13px;
  width: 15px;
  height: 15px;
  color: var(--text-faint);
  pointer-events: none;
  transition: color var(--fast);
}

.rail__search input {
  width: 100%;
  padding: 11px 12px 11px 36px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #ffffff08;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  transition: border-color var(--fast), background var(--fast);
}

.rail__search input::placeholder {
  color: var(--text-faint);
}

.rail__search input:focus {
  outline: none;
  border-color: var(--gold-dim);
  background: #ffffff0f;
}

.rail__search input:focus + svg,
.rail__search:focus-within svg {
  color: var(--gold);
}

.rail__filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.rail__filters select,
.sky-select select {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #ffffff08;
  color: var(--text-dim);
  font: inherit;
  font-size: 12.5px;
  transition: border-color var(--fast);
}

.rail__filters select:focus,
.sky-select select:focus {
  outline: none;
  border-color: var(--gold-dim);
}

.rail__filters option,
.sky-select option {
  background: var(--bg-2);
  color: var(--text);
}

.rail__count {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.rail__list {
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bg-3) transparent;
}

.rail__list::-webkit-scrollbar {
  width: 10px;
}

.rail__list::-webkit-scrollbar-thumb {
  background: var(--bg-3);
  border-radius: 10px;
  border: 3px solid var(--bg-1);
}

.rail-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 13px;
  padding: 9px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  align-items: center;
  transition: background var(--fast), border-color var(--fast);
}

.rail-item:hover {
  background: #ffffff08;
}

.rail-item.is-active {
  background: var(--gold-glow);
  border-color: var(--gold-dim);
}

.rail-item__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--bg-3);
  opacity: 0;
  transition: opacity var(--med);
}

.rail-item__thumb.is-loaded {
  opacity: 1;
}

.rail-item__title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.38;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rail-item.is-active .rail-item__title {
  color: var(--gold-bright);
}

.rail-item__meta {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  letter-spacing: 0.02em;
}

.rail-item__award {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
}

.rail__empty {
  padding: 34px 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 13px;
}

/* --- Map surface -------------------------------------------------- */

.sky-wrap {
  position: relative;
  min-width: 0;
  background: #000;
}

.sky,
.sky-thumbs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sky-thumbs {
  pointer-events: none;
  z-index: 2;
}

/* A soft inner shadow so the map feels set into the page */
.sky-vignette {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 160px 40px #00000073;
}

.sky .aladin-location,
.sky .aladin-fov,
.sky .aladin-logo-container,
.sky .aladin-projSelection,
.sky .aladin-frameChoice {
  display: none !important;
}

/* --- Loading ------------------------------------------------------ */

.sky-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  background: var(--bg);
  color: var(--text-faint);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: opacity var(--slow);
}

.sky-loading.is-done {
  opacity: 0;
  pointer-events: none;
}

.sky-loading__ring {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}

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

.sky-loading p {
  margin: 0;
}

.sky-loading--error {
  color: var(--rose);
  text-transform: none;
  letter-spacing: 0;
  padding: 28px;
  text-align: center;
  max-width: 480px;
  line-height: 1.6;
  font-size: 14px;
}

/* --- First-run introduction ---------------------------------------- */

.intro {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(ellipse at center, #05070ec4 0%, #05070eeb 62%, #05070e 100%);
  backdrop-filter: blur(2px);
  transition: opacity var(--slow), visibility var(--slow);
}

.intro.is-gone {
  opacity: 0;
  visibility: hidden;
}

.intro__panel {
  text-align: center;
  max-width: 560px;
  animation: intro-rise 900ms var(--ease) both;
}

@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

.intro__lockup {
  width: min(340px, 76vw);
  margin: 0 auto 26px;
  color: var(--text);
}

.intro__lede {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 auto 26px;
  max-width: 46ch;
}

.intro__stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 30px;
}

.intro__stat {
  padding: 0 22px;
  border-left: 1px solid var(--line);
}

.intro__stat:first-child {
  border-left: none;
}

.intro__stat b {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

.intro__stat span {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 8px;
}

.intro__hint {
  margin: 20px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

/* --- Floating controls -------------------------------------------- */

.sky-controls {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}

.sky-controls__group {
  display: flex;
  gap: 6px;
}

.sky-btn,
.sky-panel > summary {
  background: #070b13cc;
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}

.sky-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 16px;
}

.sky-btn--wide {
  width: auto;
  padding: 0 15px;
  font-size: 12px;
  letter-spacing: 0.05em;
}

.sky-btn:hover,
.sky-panel > summary:hover {
  color: var(--gold);
  border-color: var(--gold-dim);
  background: #0a0f1ae6;
}

.sky-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 15px;
  display: inline-block;
  user-select: none;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.sky-panel > summary::-webkit-details-marker {
  display: none;
}

.sky-panel[open] > summary {
  color: var(--gold);
  border-color: var(--gold-dim);
}

.sky-panel__body {
  margin-top: 8px;
  padding: 15px;
  width: 244px;
  background: #070b13f2;
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 11px;
  animation: panel-in 260ms var(--ease) both;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.sky-panel__body hr {
  border: none;
  border-top: 1px solid var(--line-soft);
  margin: 3px 0;
  width: 100%;
}

.sky-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--fast);
}

.sky-toggle input {
  accent-color: var(--gold);
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.sky-toggle:hover {
  color: var(--text);
}

.sky-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --- Readout ------------------------------------------------------- */

.sky-readout {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  display: flex;
  gap: 16px;
  padding: 9px 15px;
  font-size: 11.5px;
  color: var(--text-dim);
  background: #070b13cc;
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.sky-readout span::before {
  content: attr(data-k);
  color: var(--text-faint);
  margin-right: 7px;
  font-size: 9px;
  letter-spacing: 0.16em;
}

/* --- Hover card ---------------------------------------------------- */

.sky-tip {
  position: absolute;
  z-index: 15;
  pointer-events: none;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px;
  max-width: 320px;
  background: #070b13f2;
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: tip-in 200ms var(--ease) both;
}

@keyframes tip-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

.sky-tip img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: none;
  background: var(--bg-3);
}

.sky-tip strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.32;
}

.sky-tip span {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 3px;
  letter-spacing: 0.03em;
}

/* --- Rail toggle (small screens) ----------------------------------- */

.rail-toggle {
  display: none;
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 12;
  width: 38px;
  height: 38px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: #070b13cc;
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.rail-toggle span {
  display: block;
  width: 15px;
  height: 1px;
  background: var(--text-dim);
}

@media (max-width: 980px) {
  .atlas {
    grid-template-columns: 1fr;
  }

  .rail {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(336px, 86vw);
    transform: translateX(-100%);
    transition: transform var(--med);
    box-shadow: var(--shadow);
  }

  .rail.is-open {
    transform: none;
  }

  .rail-toggle {
    display: flex;
  }

  .sky-readout {
    font-size: 10.5px;
    gap: 11px;
    padding: 7px 12px;
  }

  .intro__stat {
    padding: 0 14px;
  }

  .intro__stat b {
    font-size: 24px;
  }
}