/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --paper:   #EFF0F2;
  --card:    #FFFFFF;
  --ink:     #14161A;
  --ink-2:   #5B6069;
  --ink-3:   #8B9099;
  --rule:    #D6D8DC;

  /* Wavelength ramp — 0.7 um to 4.8 um. Also the site's only colour. */
  --wl-1: #6B4FD6;
  --wl-2: #2F7DD1;
  --wl-3: #1F9E9E;
  --wl-4: #D89A1E;
  --wl-5: #C4452F;

  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body:    "Public Sans", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --pad: clamp(1.25rem, 4vw, 3.5rem);
  --max: 68rem;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wl-3); }

:focus-visible {
  outline: 2px solid var(--wl-1);
  outline-offset: 3px;
}

/* ── Masthead + tabs ────────────────────────────────────────── */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  padding: 1rem var(--pad) 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.wordmark { display: flex; align-items: baseline; gap: 0.65rem; text-decoration: none; }
.wordmark__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}
.wordmark__id {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

.tabs { display: flex; gap: 0.25rem; margin-left: auto; overflow-x: auto; }

.tab {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 0.6rem 0.85rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Panels ─────────────────────────────────────────────────── */
main { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 5rem; }

.panel { padding-top: 3rem; }
.panel[hidden] { display: none; }

.panel__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 0.75rem;
}
.panel__lede { max-width: 42rem; color: var(--ink-2); margin: 0 0 2.5rem; }

/* ── Hero ───────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.25rem;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.5rem, 12vw, 7rem);
  letter-spacing: -0.05em;
  line-height: 0.9;
  margin: 0 0 0.5rem;
}

.hero__expansion {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink-2);
  max-width: 26rem;
  margin: 0;
}

.hero__logo { margin: 0; }
.hero__logo img {
  display: block;
  width: clamp(9rem, 22vw, 15rem);
  height: auto;
}

/* Status line: the one thing most visitors arrive wanting to know. */
.announce {
  margin: 2.5rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--wl-4);
  background: var(--card);
  font-size: 0.98rem;
  color: var(--ink-2);
}
.announce strong { color: var(--ink); }

.credit {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-top: 2rem;
}

@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }
  .hero__logo { order: -1; }
  .hero__logo img { width: 8rem; }
}

/* ── Coverage plot (the signature element) ──────────────────── */
.coverage { margin: 3.5rem 0 4rem; }

.coverage__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-2);
  margin-bottom: 1rem;
}
.key { display: flex; align-items: center; gap: 0.45rem; }
.key__swatch { width: 1.5rem; height: 0.5rem; border-radius: 1px; }
.key__swatch--spam  { background: linear-gradient(90deg, var(--wl-1), var(--wl-3), var(--wl-5)); }
.key__swatch--ceers { background: var(--rule); }

#coverage-plot svg { width: 100%; height: auto; display: block; overflow: visible; }

.band { transition: opacity .15s ease; cursor: default; }
.coverage:hover .band { opacity: .45; }
.coverage .band:hover { opacity: 1; }

.band__label { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-2); }
.band__label--spam { font-size: 11px; font-weight: 500; fill: var(--ink); }
.axis__label { font-family: var(--mono); font-size: 10px; fill: var(--ink-3); }
.axis__line  { stroke: var(--ink-3); stroke-width: 1; }

/* ── Prose ──────────────────────────────────────────────────── */
.prose { max-width: 40rem; }
.prose h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.prose ol { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.65rem; }
.prose__links { display: flex; gap: 1.5rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.82rem; }

/* ── Generic list card ──────────────────────────────────────── */
.stack { display: flex; flex-direction: column; gap: 1rem; }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.4rem 1.6rem;
}

.card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-bottom: 0.4rem;
}
.card__title { font-weight: 600; font-size: 1.05rem; margin: 0; }
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }
.card__meta { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); }
.card__body { color: var(--ink-2); font-size: 0.94rem; margin: 0.35rem 0 0; }
.card__authors { color: var(--ink-2); font-size: 0.88rem; margin: 0.2rem 0 0; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.chip {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
  text-decoration: none;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip--download { border-color: var(--ink); font-weight: 500; color: var(--ink); }

/* ── Team roster ────────────────────────────────────────────── */
.team-group { margin-bottom: 2.75rem; }
.team-group__name {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
  margin: 0 0 0.25rem;
}

.person {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 0 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 55%, transparent);
}
.person:last-child { border-bottom: 0; }

.person__who { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.person__name { font-weight: 600; font-size: 0.98rem; }
.person__role {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wl-3);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.05rem 0.32rem;
  white-space: nowrap;
}

.person__where { min-width: 0; }
.person__affil {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0 0 0.25rem;
}
.person__affil:last-child { margin-bottom: 0; }
.person__affil--missing { color: var(--ink-3); font-style: italic; }

.person__note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  margin: 0.3rem 0 0;
}

@media (max-width: 700px) {
  .person { grid-template-columns: 1fr; gap: 0.3rem; }
}

/* ── Status text ────────────────────────────────────────────── */
.stamp, .status {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-3);
}
.stamp { margin: -1.75rem 0 2rem; }

.empty {
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--ink-2);
}

/* ── Colophon ───────────────────────────────────────────────── */
.colophon {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem var(--pad) 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-3);
}
.colophon p { margin: 0 0 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.card__note {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  margin: 0.6rem 0 0;
}

/* ── Coverage plot tooltip ──────────────────────────────────── */
#coverage-plot { position: relative; }

.tip {
  position: absolute;
  z-index: 5;
  transform: translateX(-50%);
  pointer-events: none;
  min-width: 11rem;
  padding: 0.7rem 0.85rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.tip[hidden] { display: none; }

.tip__name {
  display: block;
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tip__program {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-bottom: 0.5rem;
}
.tip__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.75rem;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
}
.tip__rows dt { color: var(--ink-3); }
.tip__rows dd { margin: 0; text-align: right; white-space: nowrap; }

.band { outline: none; }

/* The MINERVA bands are drawn with fill:none, so without this only their
   2px dashed outline would be hoverable. pointer-events:all makes the
   whole interior a target regardless of fill. */
.band rect { pointer-events: all; }
.band text { pointer-events: none; }

.band:focus-visible rect { stroke: var(--ink); stroke-width: 2; }
.band__label--minerva { font-size: 11px; font-weight: 500; }

.key__swatch--minerva {
  background: transparent;
  border: 1.5px dashed var(--wl-3);
  height: 0.6rem;
}

.source-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  margin: 0.9rem 0 0;
}

.member__note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  margin: 0.35rem 0 0;
}

/* ── Paper filters ──────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.filter {
  appearance: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  padding: 0.35rem 0.65rem;
  background: none;
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.filter:hover { border-color: var(--ink-3); color: var(--ink); }
.filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.filter__count { opacity: 0.55; margin-left: 0.15rem; }

.chip--tag { color: var(--wl-3); border-color: currentColor; }

/* ── Data release extras ────────────────────────────────────── */
.status-badge {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wl-4);
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

.card__cite {
  margin: 0.9rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: 0.86rem;
  color: var(--ink-2);
}
.card__cite-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 0.5rem;
}

/* ── Catalog release block ──────────────────────────────────── */
.release {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wl-4);
  border-radius: 3px;
  padding: 1.4rem 1.6rem;
}

.release__summary {
  color: var(--ink-2);
  font-size: 0.94rem;
  margin: 0.35rem 0 1rem;
  max-width: 46rem;
}

.release__host { margin: 0 0 1.1rem; }
.release__link {
  font-family: var(--mono);
  font-size: 0.82rem;
  word-break: break-all;
}

.release__contents {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.release__contents li { margin-bottom: 0.4rem; }

.release__cite-ask {
  margin: 0.5rem 0 0.6rem;
  font-size: 0.86rem;
  color: var(--ink-2);
}
.release__cites {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
}
.release__cites li { margin-bottom: 0.3rem; }
.release__cite-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink-3);
  margin-left: 0.4rem;
}

/* ── Sub-section within a panel ─────────────────────────────── */
.subsection { margin-top: 3.5rem; }
.subsection__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.subsection__lede {
  max-width: 42rem;
  color: var(--ink-2);
  font-size: 0.94rem;
  margin: 0 0 1.75rem;
}
.subsection__lede code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05rem 0.3rem;
}

/* ── Filter / mosaic table ──────────────────────────────────── */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--card);
}

.filters-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.filters-table th,
.filters-table td {
  text-align: left;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}

.filters-table thead th {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--paper);
  position: sticky;
  top: 0;
}

.filters-table tbody tr:last-child th,
.filters-table tbody tr:last-child td { border-bottom: 0; }
.filters-table tbody tr:hover { background: color-mix(in srgb, var(--wl-3) 5%, transparent); }

.filters-table__name {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.84rem;
}
.filters-table__program {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
}

.filters-table .num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-2);
  text-align: right;
}

.filters-table .dl { text-align: center; }
.filters-table .dl .chip { display: inline-block; }

/* Column header: label, then the bulk-list button under it. */
.filters-table thead .dl { vertical-align: top; padding-bottom: 0.7rem; }
.dl__head { display: block; margin-bottom: 0.35rem; }

.chip--all {
  appearance: none;
  cursor: pointer;
  background: none;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.4rem;
  border: 1px dashed var(--ink-3);
  border-radius: 2px;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip--all:hover { border-style: solid; border-color: var(--ink); color: var(--ink); }
.dl__size {
  display: block;
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-3);
  margin-top: 0.2rem;
}
.dl__none { color: var(--ink-3); }

/* Visible to screen readers, out of the way for everyone else. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .filters-table th,
  .filters-table td { padding: 0.5rem 0.6rem; }
  .filters-table__program { display: none; }
  .filters-table thead th:nth-child(2) { display: none; }
}

/* ── How-to block under the mosaic table ────────────────────── */
.howto {
  margin-top: 1.5rem;
  padding: 1.3rem 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--wl-3);
  border-radius: 3px;
}

.howto__title {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 0.7rem;
}

.howto__intro {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: var(--ink-2);
  max-width: 44rem;
}

.howto__steps {
  margin: 0;
  padding-left: 1.2rem;
  counter-reset: none;
}
.howto__steps > li { margin-bottom: 1rem; }
.howto__steps > li:last-child { margin-bottom: 0; }
.howto__steps::marker { color: var(--ink-3); }

.howto__text {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  max-width: 44rem;
}

.howto__cmd {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.6rem 0.5rem 0.8rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow-x: auto;
}
.howto__cmd code {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  white-space: nowrap;
}

.howto__copy {
  appearance: none;
  cursor: pointer;
  background: none;
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
}
.howto__copy:hover { border-color: var(--ink); color: var(--ink); }

.howto__foot {
  margin: 1.1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--ink-3);
  max-width: 44rem;
}

.sed-embed {
  display: block;
  width: 100%;
  height: 620px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--card);
}
@media (max-width: 900px) { .sed-embed { height: 1080px; } }

/* ── Spectroscopic redshift catalog ─────────────────────────── */
.specz__action { margin: 0 0 0.9rem; }
.specz__action .chip { font-size: 0.76rem; padding: 0.35rem 0.7rem; }

.specz__note {
  margin: 0;
  max-width: 44rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-2);
}

.release-figure {
  margin: 0 0 2rem;
  max-width: 900px;
}

.release-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.release-figure figcaption {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  opacity: 0.75;
}