/* CSS Document */

  /*  DARK MODE (default) */
  :root {
    --bg: #080c12;
    --surface: #0e1520;
    --surface2: #141e2e;
    --border: #1e2d44;
    --accent: #4d9fff;
    --accent2: #7fc4ff;
    --gold: #e8b84b;
    --text: #c8d8f0;
    --text-dim: #6a8ab0;
    --text-bright: #eef4ff;
    --green: #3ecf8e;
    --mono: 'Space Mono', monospace;
    --sans: 'Outfit', sans-serif;
    --radius: 6px;
    --max: 1280px;
    --nav-bg: rgba(8,12,18,.96);
    --header-bg1: #0a1628;
    --header-bg2: #080c12;
    --sticky-td-bg: #080c12;
    --sticky-td-hover: #0e1520;
  }

  /*  LIGHT MODE  */
  html.light {
    --bg: #f4f7fb;
    --surface: #ffffff;
    --surface2: #e8edf5;
    --border: #c8d4e8;
    --accent: #1a6fd4;
    --accent2: #1558b0;
    --gold: #b8860b;
    --text: #2c3e58;
    --text-dim: #5a7090;
    --text-bright: #0d1b30;
    --green: #1a8a5c;
    --nav-bg: rgba(244,247,251,.97);
    --header-bg1: #dce8f8;
    --header-bg2: #f4f7fb;
    --sticky-td-bg: #f4f7fb;
    --sticky-td-hover: #edf2fa;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.7;
    min-height: 100vh;
    transition: background .2s, color .2s;
  }

  /* ── STAR FIELD (dark only) ──────────────────────── */
  html:not(.light) body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      radial-gradient(1px 1px at 10% 15%, #fff9 0%, transparent 100%),
      radial-gradient(1px 1px at 25% 60%, #fff7 0%, transparent 100%),
      radial-gradient(1px 1px at 40% 30%, #fffd 0%, transparent 100%),
      radial-gradient(1px 1px at 55% 80%, #fff8 0%, transparent 100%),
      radial-gradient(1px 1px at 70% 10%, #fffb 0%, transparent 100%),
      radial-gradient(1px 1px at 85% 50%, #fff9 0%, transparent 100%),
      radial-gradient(1px 1px at 93% 75%, #fffd 0%, transparent 100%),
      radial-gradient(1px 1px at 5%  90%, #fff7 0%, transparent 100%),
      radial-gradient(2px 2px at 32% 45%, #fff5 0%, transparent 100%),
      radial-gradient(2px 2px at 68% 22%, #fff4 0%, transparent 100%),
      radial-gradient(1.5px 1.5px at 78% 88%, #fff6 0%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }

  /* ── HEADER ──────────────────────────────────────── */
  header {
    position: relative;
    background: linear-gradient(180deg, var(--header-bg1) 0%, var(--header-bg2) 100%);
    border-bottom: 1px solid var(--border);
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
    overflow: hidden;
  }

  html:not(.light) header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(77,159,255,.12) 0%, transparent 70%);
    pointer-events: none;
  }

  .header-label {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: .2em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: .75rem;
  }

  header h1 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    color: var(--text-bright);
    line-height: 1.25;
    max-width: 720px;
    margin: 0 auto .75rem;
  }

  header h1 span { color: var(--accent); }

  .header-sub {
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--text-dim);
    letter-spacing: .05em;
  }

  /* ── NAV ─────────────────────────────────────────── */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    padding: .6rem 1rem;
  }

  .nav-inner {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .6rem;
    align-items: center;
  }

  .nav-label {
    font-family: var(--mono);
    font-size: .65rem;
    color: var(--text-dim);
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    margin-right: .2rem;
  }

  nav a {
    font-family: var(--mono);
    font-size: .72rem;
    color: var(--accent);
    text-decoration: none;
    padding: .25rem .6rem;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: all .15s;
    white-space: nowrap;
  }

  nav a:hover {
    border-color: var(--accent);
    background: rgba(77,159,255,.1);
  }

  /* ── THEME TOGGLE ────────────────────────────────── */
  .theme-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
  }

  .toggle-btn {
    font-family: var(--mono);
    font-size: .65rem;
    background: var(--surface2);
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: .25rem .75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    transition: all .15s;
    white-space: nowrap;
  }

  .toggle-btn:hover {
    background: var(--surface);
    color: var(--text-bright);
    border-color: var(--accent);
  }

  .toggle-icon { font-size: .85rem; }

  /* ── CITATION BANNER ─────────────────────────────── */
  .citation-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    margin: 1.5rem auto;
    max-width: var(--max);
    padding: 1rem 1.5rem;
    border-radius: var(--radius);
  }

  .citation-banner p {
    font-size: .85rem;
    color: var(--text-dim);
    margin-bottom: .5rem;
  }

  .citation-banner p:last-child { margin-bottom: 0; }
  .citation-banner strong { color: var(--gold); }
  .citation-banner a { color: var(--accent); text-decoration: none; }
  .citation-banner a:hover { text-decoration: underline; }

  /* ── LAYOUT: single-column, no sidebar ──────────── */
  .page-wrapper {
    position: relative;
    z-index: 1;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 1rem 1rem;
  }

  main { margin-top: 2rem; }

  /* ── SECTION ─────────────────────────────────────── */
  section {
    margin-bottom: 1rem;
    scroll-margin-top: 60px;
  }

  .section-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
  }

  .section-num {
    font-family: var(--mono);
    font-size: .65rem;
    color: var(--accent);
    opacity: .6;
  }

  .section-header h2 {
    font-family: var(--sans);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-bright);
  }

  /* ── PROSE ───────────────────────────────────────── */
  .prose p {
    color: var(--text);
    margin-bottom: 1rem;
    font-size: .92rem;
    max-width: 80ch;
  }

  .prose a { color: var(--accent); text-decoration: none; }
  .prose a:hover { text-decoration: underline; }

  .prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
	max-width: 80ch;  
  }

  .prose ol li {
    color: var(--text);
    font-size: .9rem;
    margin-bottom: .5rem;
  }

  /* ── INFO CARD ───────────────────────────────────── */
  .info-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  /* ── ZOOMABLE IMAGES ─────────────────────────────── */
  .zoomable-fig {
    flex-shrink: 0;
    cursor: zoom-in;
    position: relative;
  }

  .zoomable-fig img {
    width: 200px;
    border-radius: 4px;
    border: 1px solid var(--border);
    display: block;
    transition: box-shadow .2s, transform .2s;
  }

  .zoomable-fig:hover img {
    box-shadow: 0 0 0 2px var(--accent);
    transform: scale(1.02);
  }

  .zoom-hint {
    font-size: .65rem;
    font-family: var(--mono);
    color: var(--text-dim);
    text-align: center;
    margin-top: .35rem;
  }

  .zoomable-fig figcaption {
    font-size: .75rem;
    color: var(--text-dim);
    text-align: center;
    font-style: italic;
    margin-top: .4rem;
    max-width: 200px;
  }

  @media (max-width: 600px) {
    .zoomable-fig img { width: 100%; }
    .zoomable-fig figcaption { max-width: 100%; }
  }

  /* ── LIGHTBOX ────────────────────────────────────── */
  #lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,.85);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    padding: 1rem;
  }

  #lightbox.open { display: flex; }

  #lightbox img {
    max-width: min(90vw, 900px);
    max-height: 90vh;
    border-radius: 6px;
    border: 2px solid var(--border);
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    animation: lb-in .15s ease;
  }

  #lightbox-caption {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.75);
    color: #fff;
    font-family: var(--mono);
    font-size: .72rem;
    padding: .4rem .9rem;
    border-radius: 20px;
    pointer-events: none;
    white-space: nowrap;
  }

  #lightbox-close {
    position: fixed;
    top: 1rem;
    right: 1.2rem;
    background: rgba(0,0,0,.6);
    color: #fff;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    z-index: 1000;
  }

  #lightbox-close:hover { background: rgba(255,255,255,.15); }

  @keyframes lb-in {
    from { opacity: 0; transform: scale(.94); }
    to   { opacity: 1; transform: scale(1); }
  }

  /* ── TABLE WRAPPER ───────────────────────────────── */
  .table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap::-webkit-scrollbar { height: 6px; }
  .table-wrap::-webkit-scrollbar-track { background: var(--surface); }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

  /* ── DATA TABLE ──────────────────────────────────── */
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: .8rem;
    white-space: nowrap;
  }

  thead tr { background: var(--surface2); }

  thead th {
    font-family: var(--mono);
    font-size: .65rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: .6rem .75rem;
    text-align: left;
    border-bottom: 2px solid var(--border);
  }

  thead th:first-child,
  thead th:nth-child(2) {
    position: sticky;
    left: 0;
    background: var(--surface2);
    z-index: 2;
  }

  thead th:nth-child(2) { left: 52px; }

  tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background .1s;
  }

  tbody tr:last-child { border-bottom: none; }

  tbody tr.type-M { --row-tint: rgba(62,207,142,.04); }
  tbody tr.type-L { --row-tint: rgba(232,184,75,.04); }
  tbody tr.type-T { --row-tint: rgba(77,159,255,.05); }
  tbody tr { background: var(--row-tint, transparent); }
  tbody tr:hover { background: rgba(77,159,255,.08); }

  tbody td {
    padding: .45rem .55rem;
    color: var(--text);
    vertical-align: middle;
  }

  tbody td:first-child,
  tbody td:nth-child(2) {
    position: sticky;
    background: var(--sticky-td-bg);
    z-index: 1;
  }

  tbody td:first-child { left: 0; }
  tbody td:nth-child(2) { left: 52px; border-right: 1px solid var(--border); }

  tbody tr:hover td:first-child,
  tbody tr:hover td:nth-child(2) { background: var(--sticky-td-hover); }

  .type-badge {
    font-family: var(--mono);
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .4rem;
    border-radius: 3px;
    letter-spacing: .03em;
  }

  .type-M .type-badge { background: rgba(62,207,142,.15); color: var(--green); }
  .type-L .type-badge { background: rgba(232,184,75,.15); color: var(--gold); }
  .type-T .type-badge { background: rgba(77,159,255,.15); color: var(--accent); }

  .obj-name { font-weight: 500; color: var(--text-bright); font-size: .82rem; min-width: 140px; }
  .coord { font-family: var(--mono); font-size: .72rem; color: var(--text-dim); }
  .mag { font-family: var(--mono); font-size: .75rem; text-align: right; }
  .coverage { font-family: var(--mono); font-size: .65rem; color: var(--text-dim); }

  .dl-pair { display: inline-flex; gap: .3rem; }

  .dl-pair a, .dl-solo, .btn-dl {
    font-family: var(--mono);
    font-size: .65rem;
    padding: .15rem .4rem;
    border-radius: 3px;
    text-decoration: none;
    transition: all .15s;
    font-weight: 700;
  }

  .dl-d { background: rgba(77,159,255,.12); color: var(--accent); border: 1px solid rgba(77,159,255,.25); }
  .dl-d:hover { background: rgba(77,159,255,.25); }
  .dl-p { background: rgba(62,207,142,.1); color: var(--green); border: 1px solid rgba(62,207,142,.2); }
  .dl-p:hover { background: rgba(62,207,142,.22); }
  .dl-empty { display: inline-block; width: 36px; text-align: center; color: var(--border); font-size: .6rem; }

  /* ── LEGEND ──────────────────────────────────────── */
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: .78rem;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--text-dim);
  }

  /* ── DOWNLOAD SECTION — 3-column grid ───────────── */
  .dl-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  @media (max-width: 900px) {
    .dl-groups { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 560px) {
    .dl-groups { grid-template-columns: 1fr; }
  }

  .dl-group-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
  }

  .dl-group-card h4 {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
  }

  .dl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3rem 0;
    border-bottom: 1px solid rgba(128,128,128,.1);
    font-size: .82rem;
    gap: .5rem;
  }

  .dl-row:last-child { border-bottom: none; }
  .dl-row span { color: var(--text); flex: 1; min-width: 0; font-size: .8rem; }
  .dl-links { display: flex; gap: .4rem; flex-shrink: 0; }

  .btn-gz {
    background: rgba(232,184,75,.12);
    color: var(--gold);
    border: 1px solid rgba(232,184,75,.25);
  }

  .btn-gz:hover { background: rgba(232,184,75,.25); }

  .btn-zip {
    background: rgba(62,207,142,.1);
    color: var(--green);
    border: 1px solid rgba(62,207,142,.2);
  }

  .btn-zip:hover { background: rgba(62,207,142,.22); }

  /* ── BOTTOM LINKS SECTION ────────────────────────── */
  .bottom-links {
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    margin-top: 2rem;
  }

  .bottom-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }

  .link-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
  }

  .link-group h3 {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--border);
  }

  .link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .35rem .4rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--text);
    font-size: .82rem;
    transition: background .15s;
    margin-bottom: .1rem;
  }

  .link-item:hover { background: var(--surface2); color: var(--accent); }

  .link-item .pill {
    font-family: var(--mono);
    font-size: .58rem;
    background: rgba(77,159,255,.12);
    color: var(--accent);
    padding: .1rem .4rem;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* ── SCROLL HINT ─────────────────────────────────── */
  .scroll-hint {
    display: none;
    align-items: center;
    gap: .4rem;
    font-family: var(--mono);
    font-size: .65rem;
    color: var(--text-dim);
    margin-bottom: .5rem;
  }

  @media (max-width: 768px) { .scroll-hint { display: flex; } }

  .scroll-hint::before { content: '←→'; font-size: .8rem; color: var(--accent); }

  /* ── FOOTER ──────────────────────────────────────── */
  footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem;
    text-align: center;
    font-size: .75rem;
    color: var(--text-dim);
    position: relative;
    z-index: 1;
  }

  footer a { color: var(--accent); text-decoration: none; }
  footer a:hover { text-decoration: underline; }

  /* ── RESPONSIVE ──────────────────────────────────── */
  @media (max-width: 600px) {
    header { padding: 2rem 1rem 1.5rem; }
    .section-header h2 { font-size: 1rem; }
    .prose p { font-size: .87rem; }
    .info-card { flex-direction: column; }
    .zoomable-fig img { width: 100%; }
    .zoomable-fig figcaption { max-width: 100%; }
  }

.dewar-img {
	width: 100%;
  max-width: 750px;
	height: auto;
}

.table-img {
	width: 95%;
	height: auto;
}