/**
 * Astral Archive — Planetarium
 * ---------------------------------------------------------------------------
 * Styles for the in-page sky viewer. Kept module-local so the other six pages
 * do not download planetarium-only rules.
 */

.sky-shell {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* -------------------------------------------------------------------------- */
/* Toolbar                                                                    */
/* -------------------------------------------------------------------------- */
.sky-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0 0.3rem;
}

.sky-toolbar-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.sky-toolbar-label {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.15rem;
}

.sky-toggle {
  height: 30px;
  padding: 0 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-tertiary);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.sky-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.sky-toggle[aria-pressed="true"] {
  background: rgba(124, 134, 232, 0.16);
  border-color: rgba(124, 134, 232, 0.45);
  color: var(--text-primary);
}

/* A layer that cannot be drawn yet stays switched on and says what it is
   waiting for, so supplying the site later makes it appear without the visitor
   having to remember to press the switch a second time. */
.sky-toggle[data-locked] {
  border-style: dashed;
  border-color: rgba(166, 146, 240, 0.34);
}

.sky-toggle[data-locked]::after {
  content: " · needs a site";
  font-size: 0.62rem;
  opacity: 0.75;
}

/* The one-line explanation that sits under the toolbar while a layer waits. */
.sky-notice {
  margin-top: 0.7rem;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  border: 1px solid rgba(166, 146, 240, 0.28);
  background: rgba(166, 146, 240, 0.08);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.sky-notice[hidden] {
  display: none;
}

.sky-depth {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.03);
}

.sky-depth button {
  height: 26px;
  padding: 0 0.7rem;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sky-depth button:hover {
  color: var(--text-secondary);
}

.sky-depth button.active {
  background: var(--brand-gradient);
  color: #fff;
}

.sky-depth button[data-locked]::after {
  content: " · member";
  font-size: 0.62rem;
  opacity: 0.75;
}

/* -------------------------------------------------------------------------- */
/* Stage                                                                      */
/* -------------------------------------------------------------------------- */
.sky-stage {
  position: relative;
  height: 620px;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #0C0E1A 0%, #06070C 62%, #04050A 100%);
  border: 1px solid var(--glass-border);
  cursor: grab;
  touch-action: none;
}

.sky-stage.is-panning {
  cursor: grabbing;
}

.sky-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* -------------------------------------------------------------------------- */
/* HUD                                                                        */
/* -------------------------------------------------------------------------- */
.sky-hud {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: rgba(8, 9, 15, 0.62);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.sky-hud-tl {
  top: 0.75rem;
  left: 0.75rem;
  max-width: 15rem;
}

.sky-hud-bl {
  bottom: 0.75rem;
  left: 0.75rem;
}

.sky-hud b {
  font-weight: 600;
  color: var(--text-secondary);
}

.sky-hud-key {
  color: var(--text-muted);
  margin-right: 0.3rem;
}

.sky-zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sky-zoom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(8, 9, 15, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-secondary);
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sky-zoom button:hover {
  background: rgba(124, 134, 232, 0.2);
  color: #fff;
}

.sky-tip {
  position: absolute;
  z-index: 3;
  max-width: 15rem;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: rgba(8, 9, 15, 0.86);
  border: 1px solid var(--glass-border-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.sky-tip[hidden] {
  display: none;
}

.sky-tip-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sky-tip-sub {
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--brand-cyan);
}

.sky-tip-meta {
  margin-top: 0.35rem;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------------------- */
/* Badges                                                                     */
/* -------------------------------------------------------------------------- */
.sky-badges {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0 0.3rem;
}

/* -------------------------------------------------------------------------- */
/* Sidebar                                                                    */
/* -------------------------------------------------------------------------- */
.sky-search {
  position: relative;
}

.sky-search input {
  width: 100%;
  height: 40px;
  padding: 0 0.9rem 0 2.3rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.sky-search input::placeholder {
  color: var(--text-muted);
}

.sky-search input:focus {
  border-color: rgba(124, 134, 232, 0.5);
  background: rgba(255, 255, 255, 0.07);
}

.sky-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}

.sky-results {
  margin-top: 0.6rem;
  max-height: 15rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-right: 0.2rem;
}

.sky-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.sky-result:hover,
.sky-result:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  outline: none;
}

.sky-result-kind {
  flex-shrink: 0;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sky-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.4rem 0.6rem;
}

.sky-card-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sky-card-sub {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-cyan);
}

.sky-card-list {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.78rem;
}

.sky-card-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.sky-card-list dt {
  color: var(--text-muted);
}

.sky-card-list dd {
  margin: 0;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sky-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: 0.9rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.sky-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.sky-legend i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: inline-block;
}

/* Marker shapes mirror what the stage draws for each object class. */
.sky-legend i.galaxy { color: #C3B4F7; }
.sky-legend i.nebula { color: #8FD4B4; border-style: dashed; }
.sky-legend i.cluster { color: #E3C48D; border-style: dotted; }

/* The spectral sequence, in the order the classes run from hottest to coolest.
   The swatches are the same blackbody values the stage paints with, so the
   legend is a scale rather than a decoration. */
.sky-legend i.spectral {
  border: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.sky-legend-spectral {
  margin-top: 0.55rem;
  gap: 0.3rem 0.7rem;
}

.sky-legend-spectral span {
  font-variant-numeric: tabular-nums;
}

.sky-legend-note {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .sky-stage {
    height: 480px;
  }
}

@media (max-width: 700px) {
  .sky-stage {
    height: 380px;
  }

  .sky-hud-tl {
    max-width: 11rem;
  }
}