/**
 * Astral Archive — Sky Atlas
 * ---------------------------------------------------------------------------
 * Styles for the in-page survey viewer. Kept module-local so the other six
 * pages do not download atlas-only rules.
 */

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

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

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

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

.atlas-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);
}

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

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

.atlas-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);
}

.atlas-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);
}

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

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

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

/* -------------------------------------------------------------------------- */
/* Wavelength bands                                                           */
/* -------------------------------------------------------------------------- */
.atlas-bands {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0 0.3rem;
}

.atlas-band-group {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.atlas-band-group-label {
  flex-shrink: 0;
  width: 5.6rem;
  padding-top: 0.32rem;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.atlas-band-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.atlas-band {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 26px;
  padding: 0 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-tertiary);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

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

.atlas-band.active {
  border-color: rgba(124, 134, 232, 0.5);
  background: rgba(124, 134, 232, 0.16);
  color: var(--text-primary);
}

.atlas-band[data-locked]::after {
  content: "member";
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-cyan);
  opacity: 0.8;
}

.atlas-band-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------- */
/* Stage                                                                      */
/* -------------------------------------------------------------------------- */
.atlas-stage {
  position: relative;
  height: 620px;
  border-radius: 18px;
  overflow: hidden;
  background: #05060A;
  border: 1px solid var(--glass-border);
  cursor: grab;
  touch-action: none;
}

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

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

/* -------------------------------------------------------------------------- */
/* HUD                                                                        */
/* -------------------------------------------------------------------------- */
.atlas-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;
}

.atlas-hud-tl {
  top: 0.75rem;
  left: 0.75rem;
  max-width: 16rem;
}

.atlas-hud-tr {
  top: 0.75rem;
  right: 0.75rem;
  text-align: right;
}

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

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

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

.atlas-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);
}

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

.atlas-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);
}

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

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

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

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

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

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

.atlas-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);
}

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

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

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

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

.atlas-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);
}

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

.atlas-result.active {
  background: rgba(124, 134, 232, 0.16);
  color: var(--text-primary);
}

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

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

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

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

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

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

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

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

/* Object index */
.atlas-index-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.9rem;
}

.atlas-index-filter button {
  height: 26px;
  padding: 0 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-tertiary);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.atlas-index-filter button:hover {
  color: var(--text-secondary);
}

.atlas-index-filter button.active {
  border-color: rgba(124, 134, 232, 0.5);
  background: rgba(124, 134, 232, 0.16);
  color: var(--text-primary);
}

.atlas-index-list {
  margin-top: 0.7rem;
  max-height: 17rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-right: 0.2rem;
}

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

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

.atlas-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. */
.atlas-legend i.galaxy { color: #C3B4F7; }
.atlas-legend i.nebula { color: #8FD4B4; border-style: dashed; }
.atlas-legend i.cluster { color: #E3C48D; border-style: dotted; }

/* -------------------------------------------------------------------------- */
/* Survey imagery viewer                                                      */
/* -------------------------------------------------------------------------- */
/* The frame above is a model of the sky. This block is the opposite: real
   cutouts from the survey archive, at one field of view per object so the same
   patch can be compared band by band. It is deliberately styled as data —
   flat, square, unbordered — rather than as another piece of chrome. */
.atlas-survey {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--glass-border);
}

.atlas-survey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.atlas-survey-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(143, 182, 218, 0.14);
  border: 1px solid rgba(143, 182, 218, 0.32);
  color: var(--brand-cyan);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.atlas-survey-count {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.atlas-survey-frame {
  position: relative;
  margin-top: 0.7rem;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #05060A;
  border: 1px solid var(--glass-border);
}

.atlas-survey-frame img,
.atlas-survey-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

/* The image and the composite canvas both fill the frame and only one of them
   is live at a time, so whichever is idle is hidden. `[hidden]` on its own is
   not enough here: the rule above sets `display: block` on both elements at
   the same specificity and comes later in the sheet, so it would win and the
   idle element would stay laid out at full size behind the live one. The
   frame's `aspect-ratio` is what sizes it, so nothing visible changes; what
   this prevents is the idle element still reporting a layout box, which reads
   as an unpainted canvas to anything measuring the page. */
.atlas-survey-frame img[hidden],
.atlas-survey-frame canvas[hidden] {
  display: none;
}

/* A member-only band is never fetched, so the frame says so instead of
   showing an empty square the visitor might read as "no data". */
.atlas-survey-frame.is-locked img,
.atlas-survey-frame.is-locked canvas {
  visibility: hidden;
}

.atlas-survey-locked {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 1.2rem;
  text-align: center;
  background: radial-gradient(120% 120% at 50% 30%, rgba(42, 39, 72, 0.85) 0%, rgba(7, 8, 12, 0.95) 100%);
}

/**
 * The membership notice is shown and hidden by toggling the `hidden`
 * attribute, and it has to lose to that attribute even though this sheet sets
 * `display: flex` on it.
 *
 * utilities.css carries the usual `[hidden] { display: none }`, but it is
 * linked before this sheet and a lone attribute selector loses to a class, so
 * the rule above wins the cascade and the notice stays on screen at full size
 * with the attribute correctly set. Nothing about the markup looks wrong,
 * which is what makes it worth a comment: the image behind it is covered, so
 * the frame reads as locked even when it is not.
 *
 * `[hidden]` here would still lose, because the class is on the same element
 * and specificity decides before order does. Matching the attribute as well
 * puts this rule ahead, and the two rules below hand the frame back whichever
 * of the image and the canvas is live.
 */
.atlas-survey-locked[hidden] {
  display: none;
}

.atlas-survey-locked svg {
  width: 18px;
  height: 18px;
  color: var(--brand-soft);
}

.atlas-survey-locked p {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.atlas-survey-locked button {
  margin-top: 0.15rem;
  height: 30px;
  padding: 0 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(124, 134, 232, 0.45);
  background: rgba(124, 134, 232, 0.16);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.atlas-survey-locked button:hover {
  background: rgba(124, 134, 232, 0.28);
  border-color: rgba(124, 134, 232, 0.7);
}

.atlas-survey-caption {
  margin-top: 0.6rem;
}

.atlas-survey-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
}

.atlas-survey-sub {
  margin-top: 0.1rem;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.atlas-survey-note {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.atlas-survey-strip {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.3rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

.atlas-survey-chip {
  flex: 0 0 auto;
  width: 58px;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-tertiary);
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: center;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast);
}

.atlas-survey-chip:hover {
  border-color: var(--glass-border-soft);
  color: var(--text-secondary);
}

.atlas-survey-chip.active {
  border-color: rgba(143, 182, 218, 0.6);
  background: rgba(143, 182, 218, 0.12);
  color: var(--text-primary);
}

.atlas-survey-chip img,
.atlas-survey-chip .atlas-survey-swatch {
  display: block;
  width: 100%;
  height: 42px;
  object-fit: cover;
  background: #05060A;
}

/* The composite is assembled in the browser from the three plates, so its
   chip carries a swatch of the same colours rather than a file. */
.atlas-survey-swatch {
  background: linear-gradient(115deg, #2A3A6E 0%, #6E4A8A 45%, #C08A6A 100%);
}

.atlas-survey-chip span {
  display: block;
  padding: 0.25rem 0.2rem 0.35rem;
  font-size: 0.58rem;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0.01em;
}

.atlas-survey-chip.is-locked {
  opacity: 0.55;
}

.atlas-survey-chip.is-locked img,
.atlas-survey-chip.is-locked .atlas-survey-swatch {
  background: repeating-linear-gradient(135deg, #14161F 0 6px, #1B1E2A 6px 12px);
}

.atlas-survey-chip.is-locked span::after {
  content: " · members";
  color: var(--brand-soft);
}

.atlas-survey-source {
  margin-top: 0.55rem;
  font-size: 0.65rem;
  line-height: 1.6;
  color: var(--text-muted);
}

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

  .atlas-band-group-label {
    width: 4.4rem;
  }
}

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

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

  .atlas-hud-tr {
    display: none;
  }

  .atlas-band-group {
    flex-direction: column;
    gap: 0.3rem;
  }

  .atlas-band-group-label {
    width: auto;
    padding-top: 0;
  }
}