/* =========================================================
   SPHEREx Blink – styles
   Structure:
   1. Design tokens (CSS variables)   4. Panels & form
   2. Base / reset                    5. Player
   3. Header, layout, footer          6. Utilities, responsive, motion
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
/* Semantic tokens: components use these names only, never a colour. The block below is the CLASSIC theme (the original teal and
   orange look); [data-theme="..."] blocks after it override the same names. js/features/theme.js sets data-theme on <html>.
   Tokens ending in -rgb are space-separated channels, for rgb(var(--x-rgb) / alpha). scratch/test_theme.mjs checks the contrast of
   every text/surface pair of every theme (WCAG 2.x, 4.5:1 for text). */
:root {
  color-scheme: light;
  --bg: #FCFAF5; --bg-2: #F2EEE5; --surface: #FFFFFF; --raised: #F6F0E8; --field: #FFFFFF;
  --border: #D8D0C3; --control-border: #75706A;
  --text: #1A1917; --text-muted: #514C46; --text-faint: #736D65;
  --accent: #A5482E; --accent-hi: #933A25; --accent-text: #933A25; --accent-rgb: 165 72 46;
  --accent-2: #514C46; --alt-rgb: 81 76 70; --rust: #8E583C; --on-accent: #FFFFFF;
  --warn: #7C4D00; --warn-rgb: 124 77 0; --danger: #A52323; --success: #28633B;
  --bg-rgb: 252 250 245; --surface-rgb: 255 255 255; --text-rgb: 26 25 23;
  --panel-alpha: .86;                        /* panels let a little of the nebula through */
  --veil-top:    .30;                        /* how strongly the page colour covers the nebula picture, top and bottom */
  --veil-bottom: .78;
  --chart-bg:     #0F2027;                   /* the Plotly palette in measure.js was validated against this surface */

  --radius:      16px;
  --radius-sm:   10px;
  --shadow:      0 20px 50px -20px rgb(0 0 0 / .7);
  --display:     "Georgia", "Times New Roman", serif;
  --font-body:   "Inter", system-ui, sans-serif;
  --font-head:   "Georgia", "Times New Roman", serif;
  --font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease:        cubic-bezier(.2, .8, .2, 1);
}

/* NEBULA (default since 10 Nov 2026): indigo-black ground, orchid / magenta accent, cyan secondary. Also the palette of the dark "islands" (the photo banner, the
   image stage, the charts) inside the light theme: they stay dark so that the images and the validated chart colours keep their ground. */
[data-theme="nebula"] {
  color-scheme: light;
  --bg: #FCFAFF; --bg-2: #F4F0FA; --surface: #FFFFFF; --raised: #F7F3FC; --field: #FFFFFF;
  --border: #D7CFE3; --control-border: #776C88; --text: #1D1728; --text-muted: #51495D; --text-faint: #746B80;
  --accent: #643A94; --accent-hi: #583180; --accent-text: #583180; --accent-rgb: 100 58 148; --accent-2: #51495D; --alt-rgb: 81 73 93; --rust: #7650A1; --on-accent: #FFFFFF;
  --warn: #734B00; --warn-rgb: 115 75 0; --danger: #A3214D; --success: #246442; --bg-rgb: 252 250 255; --surface-rgb: 255 255 255; --text-rgb: 29 23 40;
  --panel-alpha: 1; --veil-top: 1; --veil-bottom: 1; --display: "Instrument Serif", Georgia, serif; --font-head: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* The generated photo is orange and teal; in this theme it is tinted violet so that it belongs to the palette (the veil on top of it is near black, so the filter does not show there) */
[data-theme="nebula"] .hero::after, [data-theme="nebula"] body::before, [data-theme="light"] .hero::after { filter: grayscale(1) sepia(1) hue-rotate(238deg) saturate(2.4) brightness(.95); }
[data-theme="nebula"] .sky-bg { opacity: .9; }

/* DEEP SPACE: blue-black ground, blue / violet / cyan accents (the former default) */
[data-theme="deep-space"] {
  color-scheme: light; --bg: #F8FBFE; --bg-2: #EEF4F9; --surface: #FFFFFF; --raised: #F1F6FA; --field: #FFFFFF;
  --border: #CBD8E4; --control-border: #687B8D; --text: #152434; --text-muted: #485B6D; --text-faint: #6D8091;
  --accent: #1C6096; --accent-hi: #15547F; --accent-text: #15547F; --accent-rgb: 28 96 150; --accent-2: #485B6D; --alt-rgb: 72 91 109; --rust: #3578AB; --on-accent: #FFFFFF;
  --warn: #765000; --warn-rgb: 118 80 0; --danger: #A72C36; --success: #216442; --bg-rgb: 248 251 254; --surface-rgb: 255 255 255; --text-rgb: 21 36 52;
  --panel-alpha: 1; --veil-top: 1; --veil-bottom: 1; --display: "Instrument Serif", Georgia, serif; --font-head: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* OBSERVATORY: softer slate ground */
[data-theme="observatory"] {
  color-scheme: light; --bg: #F8FBF9; --bg-2: #EEF4F0; --surface: #FFFFFF; --raised: #F0F6F2; --field: #FFFFFF;
  --border: #CADAD1; --control-border: #677B70; --text: #15261E; --text-muted: #496056; --text-faint: #6E8378;
  --accent: #216B5A; --accent-hi: #185746; --accent-text: #185746; --accent-rgb: 33 107 90; --accent-2: #496056; --alt-rgb: 73 96 86; --rust: #477F72; --on-accent: #FFFFFF;
  --warn: #755000; --warn-rgb: 117 80 0; --danger: #A52A32; --success: #1F6542; --bg-rgb: 248 251 249; --surface-rgb: 255 255 255; --text-rgb: 21 38 30;
  --panel-alpha: 1; --veil-top: 1; --veil-bottom: 1; --display: "Instrument Serif", Georgia, serif; --font-head: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* LIGHT RESEARCH: white panels on a pale ground; images, banner and charts stay dark */
[data-theme="light"] {
  color-scheme: light;
  --bg: #FBFBF9; --bg-2: #F4F4EF; --surface: #FFFFFF; --raised: #F4F4EF; --field: #FFFFFF;
  --border: #D4D5D0; --control-border: #6F7586; --text: #121316; --text-muted: #525866; --text-faint: #6B7280;
  --accent: #C42A37; --accent-hi: #AD202D; --accent-text: #AD202D; --accent-rgb: 196 42 55; --accent-2: #525866; --alt-rgb: 82 88 102; --rust: #8B4550; --on-accent: #FFFFFF;
  --warn: #7A4C00; --warn-rgb: 122 76 0; --danger: #B3261E; --success: #1D6B38; --bg-rgb: 251 251 249; --surface-rgb: 255 255 255; --text-rgb: 18 19 22;
  --panel-alpha: 1; --veil-top: 1; --veil-bottom: 1; --shadow: none; --display: "Instrument Serif", Georgia, serif; --font-head: "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
[data-theme="light"] .sky-bg { display: none; }                    /* white stars on a pale page would be invisible noise */

[data-theme="light"] :is(.hero, .stage, .chart) { color-scheme: dark; color: var(--text); }

/* MIDNIGHT: one intentionally dark alternative to the Paper palettes. */
[data-theme="midnight"] {
  color-scheme: dark;
  --bg: #111213; --bg-2: #171819; --surface: #151617; --raised: #252627; --field: #1c1d1e;
  --border: #424344; --control-border: #757575; --text: #f1f1ee; --text-muted: #c4c4bf; --text-faint: #aaa9a4;
  --accent: #efb24f; --accent-hi: #ffd18b; --accent-text: #f5c16f; --accent-rgb: 239 178 79; --accent-2: #d1cec8; --alt-rgb: 209 206 200; --rust: #D85C74; --on-accent: #20180b;
  --warn: #FFD17A; --warn-rgb: 255 209 122; --danger: #FF9AA7; --success: #76E0A9; --bg-rgb: 17 18 19; --surface-rgb: 21 22 23; --text-rgb: 241 241 238;
  --panel-alpha: 1; --veil-top: 1; --veil-bottom: 1; --shadow: none; --display: "Georgia", "Times New Roman", serif; --font-head: "Georgia", "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--text);
  background: radial-gradient(ellipse at 85% 0%, rgb(var(--accent-rgb) / .07) 0%, transparent 55%),
              var(--bg);
  line-height: 1.5;
}

h1, h2, h3 { font-family: var(--font-head); margin: 0; line-height: 1.2; }

.skip-link {
  position: absolute; left: .75rem; top: -4rem; z-index: 10; padding: .6rem 1rem;
  background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.skip-link:focus { top: 0; }

/* Visible focus ring for keyboard users (accessibility) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

kbd {
  font-family: var(--font-body);
  font-size: max(.8em, 12px);
  padding: .1em .45em;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--bg-2);
}

/* Decorative twinkling stars: many tiny radial gradients, slowly pulsing */
.sky-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 70%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 30%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 75% 85%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 15%, #fff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 90%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 55%, #fff5 50%, transparent 51%);
  background-size: 400px 400px;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }

/* ---------- 3. Header, layout, footer ---------- */
.brand { display: flex; align-items: center; gap: .9rem; }
.brand h1 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.02em; }
.accent { color: var(--accent-hi); }
.tagline { margin: .15rem 0 0; color: var(--text-muted); font-size: .95rem; }

/* Small animated "blinking" logo: two dots that alternate */
.brand-logo {
  position: relative; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--raised);
  border: 1px solid var(--border);
}
.brand-logo::before, .brand-logo::after {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
  top: 18px; animation: blink-dot 1.2s steps(1) infinite;
}
.brand-logo::before { left: 11px; }
.brand-logo::after  { left: 25px; animation-delay: .6s; }
@keyframes blink-dot { 0% { opacity: 1; } 50% { opacity: 0; } }

.badge {
  font-size: .8rem; font-weight: 600; padding: .35rem .75rem; border-radius: 999px;
  color: var(--warn); background: rgb(var(--warn-rgb) / .12); border: 1px solid rgb(var(--warn-rgb) / .35);
}
.badge.real { color: var(--success); background: rgb(var(--alt-rgb) / .14); border-color: rgb(var(--alt-rgb) / .4); }

.layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);       /* minmax(0, ...): a wide table or plot inside a panel scrolls, it does not widen the page */
  gap: 1.5rem;
  max-width: 1280px; margin: 0 auto; padding: 1rem 1.5rem 2rem;
}

.site-footer { text-align: center; color: var(--text-muted); font-size: .85rem; padding: 1rem 1.5rem 2rem; }

/* ---------- 4. Panels & form ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
}
.panel h2 { font-size: 1.1rem; margin-bottom: 1rem; color: var(--text); }
.panel h3 { font-size: .95rem; margin-bottom: .6rem; color: var(--text-muted); font-weight: 500; }

.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: .9rem; font-weight: 500; }
.help { color: var(--text-muted); font-size: .78rem; }
.error-text { color: var(--danger); font-size: .8rem; min-height: 0; }
.error-text:empty { display: none; }

input[type="text"], select {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit; color: var(--text);
  background: var(--field);
  border: 1px solid var(--control-border);
  border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
input[type="text"]:hover, select:hover:not(:disabled) { border-color: rgb(var(--accent-rgb) / .45); }
input[type="text"]:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .25);
}
input[aria-invalid="true"] { border-color: var(--danger); }
select:disabled { opacity: .55; cursor: not-allowed; }

/* Range sliders – custom track & thumb */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; cursor: pointer;
  background: var(--accent);
  /* the visible track stays 6 px, but the touch/click target is 24 px tall (WCAG 2.5.8) */
  box-sizing: content-box; padding: 9px 0; background-clip: content-box;
}
input[type="range"]:disabled { opacity: .35; cursor: not-allowed; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 0 10px rgb(var(--accent-rgb) / .5);
  transition: transform .15s var(--ease);
}
input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent);
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); }
.range-scale { display: flex; justify-content: space-between; font-size: .75rem; color: var(--text-muted); }
output { font-weight: 600; color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--control-border); border-radius: var(--radius-sm);
  color: var(--text); background: var(--bg-2);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary {
  width: 100%; padding: .8rem 1rem; border: none; color: var(--on-accent);
  background: var(--accent);
  box-shadow: 0 8px 24px -8px rgb(var(--accent-rgb) / .35);
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hi); box-shadow: 0 10px 30px -6px rgb(var(--accent-rgb) / .45); }
/* Loading state: spinner before the label (toggled by JS in step 6) */
.btn-primary.is-loading .btn-label::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: .5rem;
  vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Quick-pick chips */
.quick-picks { margin-top: 1.5rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
  font: inherit; font-size: .85rem; cursor: pointer;
  padding: .45rem .8rem; border-radius: 999px;
  color: var(--text); background: var(--raised); border: 1px solid var(--border);
  transition: border-color .2s, background .2s, transform .15s var(--ease);
}
.chip:hover { border-color: var(--accent); background: rgb(var(--accent-rgb) / .12); transform: translateY(-1px); }
.chip[aria-pressed="true"] { border-color: var(--accent); background: rgb(var(--accent-rgb) / .22); }

/* Hint box */
.hint {
  margin-top: 1.5rem; padding: .9rem 1rem; border-radius: var(--radius-sm);
  background: rgb(var(--alt-rgb) / .07); border: 1px solid rgb(var(--alt-rgb) / .25);
  font-size: .88rem;
}
.hint summary { cursor: pointer; font-weight: 600; color: var(--accent-2); }
.hint ol { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--text-muted); }
.hint li + li { margin-top: .3rem; }
.hint strong { color: var(--text); }

/* ---------- 5. Player ---------- */
.player { display: flex; flex-direction: column; }

.stage {
  position: relative;
  width: 100%; max-width: 640px; margin: 0 auto;
  aspect-ratio: 1 / 1;                  /* cutouts are square */
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: inset 0 0 60px #04090c;
}
#blink-canvas {
  width: 100%; height: 100%; display: block;
  image-rendering: pixelated;           /* keep SPHEREx pixels sharp when scaled up */
}
/* Small crosshair marks the requested RA/Dec (center of the cutout) */
.crosshair {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px;
  transform: translate(-50%, -50%); pointer-events: none; opacity: .55;
  background:
    linear-gradient(var(--accent), var(--accent)) center top    / 1px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center bottom / 1px 10px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left center   / 10px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right center  / 10px 1px no-repeat;
}
/* Overlay for empty / loading / error / "no frames" states */
.stage-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 1.5rem;
  background: rgb(4 9 12 / .78);
  transition: opacity .3s var(--ease);
}
.stage-overlay.hidden { opacity: 0; pointer-events: none; }
.stage-overlay.error .overlay-title { color: var(--danger); }
.overlay-title { margin: 0; font-family: var(--font-head); font-size: 1.15rem; }
.overlay-sub { margin: .35rem 0 0; color: var(--text-muted); font-size: .9rem; max-width: 36ch; }
.overlay-progress {
  width: min(220px, 70%); height: 6px; margin-top: .9rem;
  appearance: none; -webkit-appearance: none; border: none; border-radius: 999px;
  background: rgb(var(--text-rgb) / .15); overflow: hidden;
}
.overlay-progress::-webkit-progress-bar { background: transparent; }
.overlay-progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
.overlay-progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.btn-retry { margin-top: 1rem; padding: .55rem 1.1rem; }
.btn-retry:hover { border-color: var(--accent); }
[hidden] { display: none !important; }

.shortcuts {
  max-width: 640px; width: 100%; margin: .8rem auto 0;
  font-size: .8rem; color: var(--text-muted); text-align: center;
}
/* Shortcuts make no sense on touch-only devices */
@media (hover: none) and (pointer: coarse) { .shortcuts { display: none; } }

.status {
  max-width: 640px; width: 100%; margin: .7rem auto 0; min-height: 1.2em;
  font-size: .85rem; color: var(--warn); text-align: center;
}
.status:empty { visibility: hidden; }

.player-controls {
  display: grid;
  grid-template-columns: auto 1fr minmax(140px, 200px);
  align-items: center; gap: 1rem;
  max-width: 640px; width: 100%; margin: 1.1rem auto 0;
}
.btn-icon {
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--accent);
  box-shadow: 0 6px 20px -6px rgb(var(--accent-rgb) / .5);
}
/* Play triangle and pause bars drawn with CSS (no icon font needed) */
.icon-play {
  width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid var(--on-accent);
  border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.icon-pause {
  width: 14px; height: 18px;
  border-left: 5px solid var(--on-accent); border-right: 5px solid var(--on-accent);
}
.frame-info {
  display: flex; justify-content: space-between; gap: .5rem;
  margin-top: .45rem; font-size: .85rem; color: var(--text-muted);
  font-variant-numeric: tabular-nums;   /* digits don't jump while playing */
}
#frame-counter { white-space: nowrap; }
#frame-date { color: var(--text); font-weight: 500; text-align: right; }
.speed label { display: block; font-size: .8rem; color: var(--text-muted); margin-bottom: .45rem; }

.meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem;
  max-width: 640px; width: 100%; margin: 1.2rem auto 0;
}
.meta > div {
  padding: .7rem .8rem; border-radius: var(--radius-sm);
  background: var(--field); border: 1px solid var(--border);
}
.meta dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.meta dd { margin: .2rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 6. Utilities, responsive, motion ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .player { order: -1; }                /* on phones, show the image first */
  .meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .player-controls { grid-template-columns: auto 1fr; }
  .speed { grid-column: 1 / -1; }
}

/* Respect users who disabled animations in their OS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   7. Stretch features: view modes, options, tools, overview,
      measurement charts, sky context
   ========================================================= */
.muted { color: var(--text-muted); }
.small { font-size: .8rem; }

/* Segmented control made of native radios (keyboard: arrow keys) */
.mode-switch {
  display: flex; gap: .25rem; margin: 0 auto .4rem; padding: .25rem;
  max-width: 640px; width: 100%;
  border: 1px solid var(--border); border-radius: 999px; background: var(--field);
}
.mode-switch label { flex: 1; position: relative; }
.mode-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode-switch span {
  display: block; text-align: center; padding: .4rem .5rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--text-muted);
  transition: background .2s, color .2s;
}
.mode-switch input:checked + span {
  color: var(--on-accent); background: var(--accent);
}
.mode-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mode-switch input:disabled + span { opacity: .4; }
.mode-help {
  max-width: 640px; width: 100%; margin: 0 auto .7rem; min-height: 2.6em;
  font-size: .82rem; color: var(--text-muted); text-align: center;
}
.mode-help .swatch { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: -1px; }

/* Legend of the red flagged pixels */
.flags-legend { margin: .4rem 0 0; font-size: .8rem; color: var(--text-muted); }
.flags-legend .swatch { display: inline-block; width: .8em; height: .8em; border-radius: 2px; vertical-align: -1px; background: rgb(255 40 60); }

/* ?embed=1 (the page inside an <iframe> on another site): only the workspace, no banner, about or footer */
.embed .hero, .embed #about, .embed #telescope, .embed footer { display: none; }
.embed .layout { padding-top: .75rem; }
.embed-note { display: none; }
.embed .embed-note { display: block; margin: 0; padding: .6rem clamp(1rem, 3vw, 2rem) 0; font-size: .8rem; color: var(--text-muted); }

/* Compare mode: image A, the operation, image B */
.compare-controls {
  display: grid; grid-template-columns: 1fr minmax(9.5rem, auto) 1fr; gap: .5rem;
  max-width: 640px; width: 100%; margin: 0 auto .7rem;
}
.compare-controls label { display: grid; gap: .2rem; min-width: 0; font-size: .78rem; color: var(--text-muted); }
.compare-controls select { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 560px) { .compare-controls { grid-template-columns: 1fr; } }

#blink-canvas { cursor: crosshair; }

.player-options, .tools {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; justify-content: center;
  max-width: 640px; width: 100%; margin: .8rem auto 0; font-size: .85rem;
}
.check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; color: var(--text-muted); }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.check:has(input:disabled) { opacity: .45; cursor: not-allowed; }

/* Zoom buttons, in the corner of the picture. The stage is a dark island in every theme (it takes the Deep Space tokens in the light theme). */
.stage-tools {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  display: flex; align-items: center; gap: .3rem;
}
.stage-btn {
  min-width: 32px; height: 32px; padding: 0 .5rem;
  font: 600 1rem/1 var(--font-body); color: var(--text); cursor: pointer;
  background: rgb(var(--bg-rgb) / .78); border: 1px solid var(--control-border); border-radius: 8px;
}
.stage-btn-wide { font-size: .78rem; letter-spacing: .02em; }
.stage-btn:hover:not(:disabled) { border-color: var(--accent); }
.stage-btn:disabled { opacity: .4; cursor: not-allowed; }
.zoom-level {
  min-width: 2.6rem; padding: .2rem .35rem; text-align: center;
  font: 600 .78rem/1.2 var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text); background: rgb(var(--bg-rgb) / .78); border-radius: 6px;
}
/* Dragging moves the picture only when it is zoomed in; a click without a drag still measures. On a phone a finger drag on a zoomed picture
   moves it, a drag on a whole picture scrolls the page (touch-action). */
#blink-canvas { touch-action: pan-y; }
#blink-canvas.zoomed { cursor: grab; touch-action: none; }
#blink-canvas.dragging { cursor: grabbing; }

/* What is under the pointer: pixel, sky position, offset from the centre of the field, value. A fixed height so the page does not jump. */
.readout {
  max-width: 640px; width: 100%; margin: .55rem auto 0; min-height: 2.9em;
  display: flex; flex-wrap: wrap; gap: .1rem 1rem; align-content: flex-start;
  font: .78rem/1.45 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted);
}
.readout .ro:empty { display: none; }
.readout .ro-value { color: var(--text); }
.readout-idle { font-family: var(--font-body); }
.readout.active .readout-idle { display: none; }

/* Candidate explorer: a table you can sort, filter, search and page, and a plot of support against S/N (features/candidateExplorerView.js). The plot sits on the dark chart ground. */
.explorer { margin-top: .8rem; }
.ex-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; }
.ex-toolbar label { display: grid; gap: .2rem; min-width: 0; font-size: .78rem; color: var(--text-muted); }
.ex-toolbar select, .ex-toolbar input { max-width: 100%; min-width: 0; }
.ex-count { margin: .55rem 0 .3rem; font-size: .82rem; color: var(--text-muted); }
.ex-plot { margin: .3rem 0 .8rem; }
.ex-plotbox { position: relative; height: 240px; padding: 0; overflow: hidden; }
.ex-axisbox { position: absolute; border-left: 1px solid var(--control-border); border-bottom: 1px solid var(--control-border); pointer-events: none; }
.ex-tick { position: absolute; font: .75rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); pointer-events: none; }
.ex-tick-y { left: 0; width: 7.5%; text-align: right; transform: translateY(-50%); }
.ex-tick-x { transform: translateX(-50%); margin-top: .25rem; }
.ex-axislabel { position: absolute; bottom: .1rem; left: 9%; font-size: .75rem; color: var(--text-muted); pointer-events: none; white-space: nowrap; }
.ex-threshold { position: absolute; border-top: 1px dashed var(--accent); pointer-events: none; }
.ex-thresholdlabel { position: absolute; right: 3.5%; transform: translateY(-115%); font-size: .75rem; color: var(--accent-text); pointer-events: none; }
.ex-plotnote { margin-top: .4rem; font-size: .78rem; color: var(--text-muted); }
/* the point is a 24 px button with the mark drawn inside: a diamond is a source nothing explains, a ring a weak one, a circle a known one, a square one not checked, a dashed square a possible artefact */
.ex-dot { position: absolute; width: 24px; height: 24px; padding: 0; margin: 0; transform: translate(-50%, -50%); border: 0; background: transparent; cursor: pointer; }
.ex-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; box-sizing: border-box; transform: translate(-50%, -50%); }
.ex-dot.cls-unknown::after { background: var(--accent); transform: translate(-50%, -50%) rotate(45deg); }
.ex-dot.cls-unknown-weak::after { border: 2px solid var(--warn); transform: translate(-50%, -50%) rotate(45deg); }
.ex-dot.cls-unchecked::after { background: var(--warn); }
.ex-dot.cls-artefact::after { border: 2px dashed var(--text-muted); }
.ex-dot.cls-catalogued::after, .ex-dot.cls-catalogued-moving::after, .ex-dot.cls-solar-system::after { border-radius: 50%; background: var(--success); }
.ex-dot.is-off { opacity: .22; }
.ex-dot.is-selected::after { outline: 2px solid var(--text); outline-offset: 3px; }
.explorer .table-scroll { max-height: none; overflow-x: auto; overflow-y: visible; }       /* the table pages instead of scrolling up and down; it still scrolls sideways on a phone */
.ex-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ex-table th, .ex-table td { padding: .35rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.ex-table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ex-table tr.is-selected td { background: rgb(var(--accent-rgb) / .12); }
.ex-sort, .ex-rowbtn { padding: .1rem .2rem; font: inherit; color: var(--text); text-align: inherit; cursor: pointer; background: transparent; border: 0; border-radius: 4px; }
.ex-sort { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--text-muted); white-space: nowrap; }
.ex-sort:hover, .ex-rowbtn:hover { color: var(--accent-hi); }
.ex-empty { padding: 1rem; text-align: center; color: var(--text-muted); }
.ex-pager { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .6rem; }
.ex-pagetext { font-size: .8rem; color: var(--text-muted); }
.discover-views { display: flex; gap: .4rem; margin: .6rem 0 0; }
.discover-views .btn[aria-pressed="true"] { border-color: var(--accent); background: rgb(var(--accent-rgb) / .14); }

/* "How this search was run": input, settings, algorithm version, time (features/provenance.js). Closed by default: a line for people who want to reproduce or doubt a result. */
.provenance { margin: .6rem 0 0; padding: .45rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .82rem; color: var(--text-muted); }
.provenance summary { cursor: pointer; color: var(--text); font-weight: 600; }
.provenance p { margin: .5rem 0 0; font-family: var(--font-mono); font-size: .76rem; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* Timeline: one button per image. Time order across (not to scale), wavelength up; a pass is a group; the filter greys out what it leaves out. */
.timeline { max-width: 640px; width: 100%; margin: 1rem auto 0; padding: .6rem .8rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .8rem; }
.tl-head h3 { margin: 0; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.tl-summary { margin: 0; font: .78rem/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.tl-plot { padding: .7rem .4rem 0 4.6rem; }
.tl-field { position: relative; height: 150px; border-left: 1px solid var(--control-border); border-bottom: 1px solid var(--control-border); }
.tl-points { position: absolute; inset: 12px; }
.tl-band { position: absolute; left: 0; right: 0; background: rgb(var(--accent-rgb) / .12); border-block: 1px dashed var(--accent); pointer-events: none; }
.tl-axis { position: absolute; right: calc(100% + .45rem); font: .75rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.tl-axis-hi { top: 0; }
.tl-axis-lo { bottom: 0; }
/* the button is 24 px (a comfortable target); the dot drawn in it is smaller */
.tl-dot { position: absolute; width: 24px; height: 24px; padding: 0; margin: 0; transform: translate(-50%, 50%); border: 0; background: transparent; cursor: pointer; }
.tl-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; box-sizing: border-box; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--accent); background: var(--accent); }
.tl-dot.has-flags::after { border-radius: 2px; transform: translate(-50%, -50%) rotate(45deg); }
.tl-dot.is-off::after { background: transparent; border-color: var(--text-faint); }
.tl-dot.is-current::after { outline: 2px solid var(--text); outline-offset: 3px; }
.tl-dot:hover::after { border-color: var(--text); }
.tl-passes { position: relative; height: 2rem; margin-top: .45rem; }
.tl-pass {
  position: absolute; top: 0; height: 100%; min-width: 24px; padding: 0 .15rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;      /* min-width: a target of at least 24 px (WCAG 2.2, 2.5.8) even for a pass of two images on a narrow screen */
  font: 600 .75rem/1 var(--font-body); cursor: pointer; color: var(--text-muted); background: transparent;
  border: 1px solid var(--control-border); border-radius: 6px;
}
.tl-pass[aria-pressed="true"] { color: var(--text); border-color: var(--accent); background: rgb(var(--accent-rgb) / .12); }
.tl-pass.is-off { border-style: dashed; text-decoration: line-through; }
.tl-pass:hover { border-color: var(--text); }
.tl-filter { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; margin-top: .7rem; }
.tl-range { flex: 1 1 11rem; display: grid; gap: .2rem; font-size: .78rem; color: var(--text-muted); }
.tl-range output { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.tl-range input[type="range"] { width: 100%; }
.tl-note { margin: .55rem 0 0; font-size: .8rem; color: var(--text-muted); }
@media (max-width: 560px) { .tl-plot { padding-left: 4.4rem; } .tl-pass-word { display: none; } }

/* Layers: what is drawn over the picture, each with its own switch. The key is drawn in the colour used on the canvas, on a dark chip
   (the colours were chosen for the dark picture, not for the page). */
.layers { max-width: 640px; width: 100%; margin: .8rem auto 0; padding: .5rem .8rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.layers legend { padding: 0 .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.layer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); gap: .15rem 1.2rem; font-size: .85rem; }
.layer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.layer .check { min-width: 0; }
.layer-name { min-width: 0; overflow-wrap: anywhere; }
.layer-count { flex: none; min-width: 1.6em; text-align: right; font: .75rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.layer-count:empty { visibility: hidden; }
.layer-key {
  --key: var(--text-muted);
  flex: none; position: relative; width: 20px; height: 20px; border-radius: 5px; background: var(--chart-bg);
}
.layer-key::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%); box-sizing: border-box; }
.layer-key[data-shape="square"]::after  { background: var(--key); border-radius: 2px; }
.layer-key[data-shape="ring"]::after    { border: 2px solid var(--key); border-radius: 50%; }
.layer-key[data-shape="diamond"]::after { border: 2px solid var(--key); transform: translate(-50%, -50%) rotate(45deg) scale(.85); }
.layer-key[data-shape="bar"]::after     { width: 12px; height: 6px; border: 2px solid var(--key); border-top: 0; }
.layer-key[data-shape="cross"]::after   { width: 12px; height: 12px; background: linear-gradient(var(--key), var(--key)) center / 100% 2px no-repeat, linear-gradient(var(--key), var(--key)) center / 2px 100% no-repeat; }
.layer:has(input:disabled) .layer-key { opacity: .5; }
@media (hover: none) and (pointer: coarse) { .stage-btn { min-width: 44px; height: 44px; } }
.tools { gap: .5rem; }
.btn-small { padding: .45rem .9rem; font-size: .82rem; }
.btn-small:hover:not(:disabled) { border-color: var(--accent); }
.btn-small.recording { border-color: var(--danger); color: var(--danger); }

/* Detector overview */
.overview { max-width: 640px; width: 100%; margin: 1.4rem auto 0; }
.overview h3 { font-size: .95rem; margin-bottom: .6rem; }
.overview h3 .muted { font-family: var(--font-body); font-weight: 400; font-size: .8rem; }
.overview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .6rem; }
.overview-item {
  font: inherit; color: var(--text); cursor: pointer; padding: .35rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--field);
  display: flex; flex-direction: column; gap: .3rem; text-align: left;
  transition: border-color .2s, transform .15s var(--ease);
}
.overview-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.overview-item[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.overview-item canvas { width: 100%; aspect-ratio: 1; image-rendering: pixelated; border-radius: 6px; background: #000; }
.overview-item .ov-name { font-weight: 600; font-size: .82rem; }
.overview-item .ov-sub { font-size: .8rem; color: var(--text-muted); }

/* Second row: full-width panels */
.measure, .context { grid-column: 1 / -1; }
.measure p, .context p { margin: .4rem 0; }
.measure-pos { font-variant-numeric: tabular-nums; font-size: .88rem; }
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: .6rem; }
.chart { margin: 0; padding: .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--chart-bg); }
.chart figcaption { font-size: .85rem; font-weight: 600; margin: 0 0 .3rem .3rem; }
.chart-box { width: 100%; height: 300px; }
.table-view { margin-top: .6rem; font-size: .85rem; }
.table-view summary { cursor: pointer; color: var(--accent); }
.table-scroll { max-height: 260px; overflow: auto; margin-top: .4rem; }
.table-view table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.table-view th, .table-view td { padding: .3rem .6rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.table-view th:first-child, .table-view td:first-child { text-align: left; }
.table-view th { position: sticky; top: 0; background: var(--bg-2); color: var(--text-muted); font-weight: 600; }

.context-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .6rem 0; }
.context-controls label { font-size: .9rem; }
.context-controls select { width: auto; min-width: 220px; }
.skymap { position: relative; width: 100%; height: 440px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
/* Coordinates of the cursor (or of the map centre) with, in brackets, the country that sky point is straight above (skyGeo.js) */
.sky-readout {
  position: absolute; left: .5rem; bottom: 2.6rem; z-index: 5; max-width: calc(100% - 1rem); pointer-events: none;   /* above Aladin's own zoom / field-of-view control (bottom left) */
  padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--border);
  background: rgb(var(--bg-rgb) / .86); color: var(--text); font-size: .8rem; line-height: 1.35; font-variant-numeric: tabular-nums;
}
.sky-readout:empty { display: none; }

/* Full-screen map: the frame (controls + map + status line) fills the screen.
   `is-fullscreen` = real Fullscreen API or CSS fallback; `is-fallback` = CSS fallback only (see fullscreen.js). */
.skyframe.is-fullscreen {
  display: flex; flex-direction: column; gap: .5rem; box-sizing: border-box;
  width: 100%; height: 100%; padding: .75rem 1rem; overflow: auto;   /* scrolls only on tiny screens */
  background: var(--bg);
}
.skyframe.is-fullscreen .context-controls { margin: 0; }
.skyframe.is-fullscreen .skymap { flex: 1 1 auto; height: auto; min-height: 14rem; }
.skyframe.is-fullscreen .muted { margin: 0; }
.skyframe.is-fallback { position: fixed; inset: 0; z-index: 1000; height: 100dvh; }
.panel.no-blur { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.fs-locked { overflow: hidden; }

@media (max-width: 860px) {
  .charts { grid-template-columns: 1fr; }
  .skymap { height: 340px; }
}
@media (max-width: 480px) {
  .mode-switch span { font-size: .78rem; padding: .4rem .2rem; }
  .context-controls select { min-width: 0; width: 100%; }
}

/* Predicted-track info line (green = same colour as the overlay ticks) */
.track-info {
  max-width: 640px; width: 100%; margin: .6rem auto 0; font-size: .8rem; text-align: center;
  color: var(--text-muted);
}
.track-info:empty { display: none; }
.track-info::before { content: "◆ "; color: var(--text); }

/* Find movers: button + status, ranked list, details of the selected candidate */
.movers { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.movers-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.movers-head .btn-primary { width: auto; padding: .55rem 1.1rem; }
.movers-status { flex: 1 1 14rem; margin: 0; font-size: .85rem; color: var(--text-muted); }
.movers-all { font-size: .85rem; }
.mover-list { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.mover-item {
  display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: baseline;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: .55rem .8rem; border-radius: var(--radius-sm);
  color: var(--text); background: var(--raised); border: 1px solid var(--border);
  transition: border-color .2s, background .2s;
}
.mover-item:hover { border-color: var(--accent); background: rgb(var(--accent-rgb) / .12); }
.mover-item[aria-pressed="true"] { border-color: var(--accent); background: rgb(var(--accent-rgb) / .22); }
.mover-rank { grid-row: 1 / span 2; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--accent-text); }
.mover-main { font-weight: 600; }
.mover-sub { font-size: .8rem; color: var(--text-muted); }
.mover-detail {
  margin-top: .6rem; padding: .7rem .8rem; font-size: .85rem;
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgb(var(--accent-rgb) / .08);
}
.mover-detail p { margin: 0 0 .55rem; }
.mover-detail .btn + .btn { margin-left: .4rem; }
.mover-export { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
summary { padding-block: .4rem; cursor: pointer; }          /* a 21 px tall summary is a small target */

/* Find everything: every source in the images, its class, and the dossier of the one you open (js/features/discoverPanel.js) */
.discover { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); }
.discover-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.discover-head .btn-primary { width: auto; padding: .55rem 1.1rem; }
.discover-status { flex: 1 1 14rem; margin: 0; font-size: .85rem; color: var(--text-muted); }
.discover-notes { margin: .6rem 0 0; padding: .5rem .8rem .5rem 1.6rem; font-size: .82rem; color: var(--warn); border-left: 3px solid var(--warn); background: rgb(var(--warn-rgb) / .07); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.discover-chips { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.discover-chips li { padding: .2rem .65rem; font-size: .82rem; color: var(--text-muted); background: var(--field); border: 1px solid var(--border); border-radius: 99px; }
.discover-chips strong { color: var(--text); font-family: var(--display); font-size: 1rem; }
.discover-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .7rem; font-size: .85rem; }
.discover-controls label { flex: 1 1 13rem; min-width: 0; display: flex; align-items: center; gap: .45rem; color: var(--text-muted); }
.discover-controls select { flex: 1 1 auto; width: 100%; min-width: 0; padding-block: .3rem; text-overflow: ellipsis; }
.discover-list { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .4rem; }
.discover-li { border-left: 3px solid var(--text-muted); border-radius: var(--radius-sm); background: var(--raised); }
.discover-li.cls-unknown { border-left-color: var(--accent); }
.discover-li.cls-unknown-weak { border-left-color: var(--warn); }
.discover-li.cls-artefact { border-left-style: dashed; }
.discover-li.cls-catalogued, .discover-li.cls-catalogued-moving, .discover-li.cls-solar-system { border-left-color: var(--success); }
.discover-item {
  display: grid; gap: .1rem; width: 100%; text-align: left; font: inherit; cursor: pointer;
  padding: .55rem .8rem; border-radius: var(--radius-sm); color: var(--text); background: transparent; border: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.discover-item:hover, .discover-item[aria-expanded="true"] { border-color: var(--accent); background: rgb(var(--accent-rgb) / .12); }
.discover-badge { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.cls-unknown .discover-badge { color: var(--accent-hi); font-weight: 700; }
.cls-unknown-weak .discover-badge { color: var(--warn); }
.discover-main { font-weight: 600; overflow-wrap: anywhere; }
.discover-sub { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.discover-more { padding: .4rem .8rem; font-size: .82rem; color: var(--text-muted); }
.discover-export { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.discover-list > li { min-width: 0; }                      /* a grid item would otherwise grow to fit a long catalogue name */
.discover-detail { margin: 0 .5rem .6rem; padding: .7rem .8rem; font-size: .85rem; border-radius: var(--radius-sm); background: rgb(var(--accent-rgb) / .08); overflow-wrap: anywhere; }
.discover-detail h3 { font-size: 1rem; margin-bottom: .4rem; overflow-wrap: anywhere; }
.discover-detail h4 { margin: .8rem 0 .3rem; font-size: .85rem; letter-spacing: .04em; color: var(--text-muted); }
.discover-lead { margin: 0 0 .6rem; }
.discover-stamps { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .3rem; }
.discover-stampnote { margin: 0 0 .8rem; font-size: .74rem; color: var(--text-muted); }
.stamp { margin: 0; width: 76px; text-align: center; }
.stamp-pic { position: relative; width: 76px; height: 76px; border: 1px solid var(--border); background: #000; }
.stamp.seen .stamp-pic { border-color: var(--accent); }
.stamp canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.stamp-ring { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 1px dashed var(--accent-hi); border-radius: 50%; pointer-events: none; }
.stamp figcaption { margin-top: .15rem; font-size: .68rem; line-height: 1.2; color: var(--text-muted); }
.discover-facts { margin: 0; display: grid; gap: .35rem; }
.discover-facts div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .6rem; }
.discover-facts dt { color: var(--text-muted); }
.discover-facts dd { margin: 0; overflow-wrap: anywhere; }
.discover-spectrum { margin-top: .6rem; }
.discover-spectrum table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.discover-spectrum th, .discover-spectrum td { padding: .15rem .4rem; text-align: right; border-bottom: 1px solid var(--border); }
.discover-flags, .discover-todo { margin: 0; padding-left: 1.2rem; }
.discover-flags li, .discover-todo li { margin-bottom: .25rem; }
.discover-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.discover-honest { margin: .7rem 0 0; font-size: .78rem; color: var(--text-muted); }
@media (max-width: 480px) { .discover-facts div { grid-template-columns: 1fr; gap: 0; } .discover-detail { margin-inline: 0; } }

/* Phones, tablets and projectors with a touch screen: every control at least 44 px high (the usual comfortable touch size) */
@media (pointer: coarse) {
  .btn, .btn-small, .chip, .mover-item, .discover-item, summary { min-height: 44px; }
  .check { min-height: 44px; }
  .check input { width: 22px; height: 22px; }
  input[type="range"] { padding: 18px 0; }                  /* 6 px track inside a 42 px band */
}

/* Guided tour (js/features/tour.js): a spotlight with a huge shadow dims the rest of the page */
.tour-spot {
  position: fixed; z-index: 1000; pointer-events: none;
  border-radius: var(--radius-sm); outline: 2px solid var(--accent);
  box-shadow: 0 0 0 100vmax rgb(5 12 16 / .72);
}
.tour-card {
  position: fixed; z-index: 1001; box-sizing: border-box; width: min(22rem, calc(100vw - 1rem));
  padding: 1rem 1.1rem; border-radius: var(--radius-sm);
  color: var(--text); background: var(--raised); border: 1px solid var(--accent);
  box-shadow: 0 10px 30px rgb(0 0 0 / .5);
}
.tour-count { margin: 0 0 .2rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tour-title { margin: 0 0 .4rem; font-size: 1.05rem; }
.tour-text { margin: 0 0 .9rem; font-size: .9rem; line-height: 1.45; }
.tour-actions { display: flex; align-items: center; gap: .5rem; }
.tour-spacer { flex: 1; }
.tour-card .btn-primary { width: auto; }
.tour-card button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.mover-colour { color: var(--text-muted); }
.chip-sim { border-style: dashed; }          /* the simulated object: not one of the real test objects */

/* =========================================================
   8. Hero header (photo banner)
   ========================================================= */
.hero {
  --ink: rgb(var(--bg-rgb)); --cta: var(--accent); --cta-hover: var(--accent-hi); --peach: var(--accent-hi);
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(400px, 62vh, 620px);
  display: flex; flex-direction: column; justify-content: space-between;
  background: #0b0d0c;
}
/* Legibility scrim behind the top bar (functional, not decorative) */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; z-index: -1;
  background: linear-gradient(to bottom, rgb(var(--bg-rgb) / .78), transparent);
}
.hero .badge { background: var(--ink); }
.hero-title {
  align-self: flex-start; width: min(100%, 660px);
  background: var(--ink); color: #fff;
  padding: clamp(1rem, 2.6vw, 2.4rem);
}
.hero-eyebrow {
  margin: 0 0 .8rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--peach);
}
.hero h1 {
  font-family: var(--display); font-size: clamp(3.4rem, 10vw, 7.6rem); line-height: .9; letter-spacing: -.01em; font-weight: 700;
}
.hero h1 span { display: block; }
.hero-tag { margin: .9rem 0 0; max-width: 28em; font-size: clamp(1rem, 1.6vw, 1.25rem); color: #fff; }
.hero-cta {
  display: inline-block; margin-top: 1.2rem; padding: .8rem 1.3rem;
  background: var(--cta); color: var(--ink); font-weight: 700; text-decoration: none;
  transition: background .2s var(--ease);
}
.hero-cta:hover { background: var(--cta-hover); }
.hero-credit {
  position: absolute; right: clamp(.8rem, 2vw, 1.5rem); bottom: clamp(.8rem, 2vw, 1.2rem); margin: 0;
  background: var(--ink); color: var(--text-muted); font-size: .75rem; padding: .3rem .6rem;
}
html { scroll-behavior: smooth; }
@media (max-width: 560px) {
  .hero { min-height: 460px; }
  .hero-title { width: 100%; }
  .hero-credit { top: 3.8rem; bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =========================================================
   9. Photo backgrounds (our own generated nebula, scratch/make_nebula.py)
   ========================================================= */
/* Hero picture: scaled from the left edge so the nebula sits in the right half,
   away from the title block. Scale >= 1 keeps the picture covering the banner. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/header-nebula-hd.jpg") center / cover no-repeat;
  transform: scale(1.5); transform-origin: 0% 62%;
}
/* Page background: fixed, darkened in steps so text on it keeps its contrast */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(var(--bg-rgb) / var(--veil-top)), rgb(var(--bg-rgb) / var(--veil-bottom))),
    url("../img/bg-nebula.jpg") center / cover no-repeat;
}
/* Panels let a little of the background through */
.panel {
  background: rgb(var(--surface-rgb) / var(--panel-alpha));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 560px) {
  .hero::after { transform: scale(1.12); transform-origin: 62% 40%; }
}

/* =========================================================
   10. Hero extras (nav, scroll ring) and info sections
   ========================================================= */
.hero-scroll {
  position: absolute; right: clamp(1rem, 7vw, 6rem); bottom: 4.2rem; width: 104px; height: 104px;
  display: grid; place-items: center; color: var(--accent); text-decoration: none;
}
.hero-scroll:hover { color: var(--accent-hi); }
.hero-scroll svg { width: 100%; height: 100%; }
.hero-scroll .ring { transform-origin: 50% 50%; animation: spin-slow 40s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero-scroll .ring { animation: none; } }
@media (max-width: 720px) {
  .hero-scroll { display: none; }
  .hero-credit { position: static; align-self: flex-end; margin: .5rem 1rem; }
}

.info { max-width: 1240px; margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem) 0; }
.info:last-of-type { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.info-box {
  background: rgb(var(--surface-rgb) / var(--panel-alpha)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border); padding: clamp(1.2rem, 3vw, 2.6rem);
}
.info-kicker { margin: 0 0 .6rem; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-hi); }
.info h2 {
  margin: 0 0 1rem; font-family: var(--display); font-weight: 700; color: var(--text);
  font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1; letter-spacing: -.005em;
}
.info h2::after { content: ""; display: block; width: 64px; height: 4px; margin-top: 1rem; background: var(--accent); }
.info h3 { margin: 0 0 .5rem; font-family: var(--display); font-weight: 500; font-size: 1.3rem; letter-spacing: .02em; color: var(--text); }
.info p { margin: 0 0 1rem; max-width: 64ch; color: var(--text-muted); }
.info strong { color: var(--text); font-weight: 600; }
.info p.info-lead { color: var(--text); font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; }
.info-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.2rem, 4vw, 3rem); align-items: start; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: step; position: relative; padding-left: 3.4rem; color: var(--text-muted); }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -.25rem;
  font-family: var(--display); font-weight: 700; font-size: 1.9rem; color: var(--accent-hi);
}
.steps b { display: block; color: var(--text); font-weight: 600; }
.info-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(1.4rem, 3vw, 2.4rem); padding-top: clamp(1.2rem, 3vw, 2rem); border-top: 1px solid var(--border);
}
.info-cols p { margin-bottom: 0; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.stats li { padding-left: .8rem; border-left: 3px solid var(--accent); }
.stats b { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--text); }
.stats span { font-size: .82rem; letter-spacing: .04em; color: var(--text-muted); }
.det-table { width: 100%; margin-top: .4rem; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.det-table th, .det-table td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--border); }
.det-table th { font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.det-table td { color: var(--text); }
.det-table td:first-child { font-family: var(--display); font-weight: 700; color: var(--accent-hi); }
.det-table td:last-child { color: var(--text-muted); }
.info-note { font-size: .8rem !important; margin-top: .6rem !important; }
.info-links { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1rem; }
.info-links a { padding: .5rem .9rem; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-weight: 500; }
.info-links a:hover { border-color: var(--accent); color: var(--accent-hi); }
@media (max-width: 860px) { .info-top { grid-template-columns: 1fr; } }

/* =========================================================
   Theme switch and numerals (css tokens: section 1; js/features/theme.js)
   ========================================================= */
.theme-switch { display: inline-flex; align-items: center; }
.theme-switch select { width: auto; min-width: 0; max-width: 100%; padding: .3rem 1.7rem .3rem .7rem; font-size: .8rem; border-radius: 999px; }
/* Numbers that people compare line by line: equal-width digits, and the monospace face in the themes that define one */
.meta dd, .frame-info, .measure-pos, .mover-sub, .discover-sub, .discover-facts dd, .discover-spectrum td, .stamp figcaption,
.discover-chips strong, #measure-table td, .rtable td, .stats b {
  font-variant-numeric: tabular-nums;
}
.meta dd, .measure-pos, .mover-sub, .discover-sub, .discover-facts dd, .discover-spectrum td, .stamp figcaption, #measure-table td, .rtable td {
  font-family: var(--font-mono);
}
.mover-sub, .discover-sub { font-size: .76rem; }
@media (max-width: 560px) {
  .theme-switch select { padding-block: .25rem; font-size: .75rem; }
}

/* ---------- Workspace panels: search | picture | inspector (features/workspace.js, workspaceView.js) ----------
   From 1180 px three columns; from 861 px the search panel beside the picture and the inspector below them; below that one column.
   The two side panels close (a button each, or the keys [ and ]): on a wide screen the closed panel is a thin rail with its heading
   written upright, so the picture takes the room; on a narrow one only its body is hidden. */
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.panel-head h2 { min-width: 0; }
.panel-toggle {
  flex: none; display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer;
}
.panel-toggle:hover { border-color: var(--accent); }
.panel-toggle-icon { width: .5rem; height: .5rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateX(.12rem) rotate(45deg); }   /* a chevron: points left */
.panel-toggle-right .panel-toggle-icon { transform: translateX(-.12rem) rotate(-135deg); }                                                                       /* points right */
.layout[data-left="closed"] #panel-left-btn .panel-toggle-icon { transform: translateX(-.12rem) rotate(-135deg); }
.layout[data-right="closed"] #panel-right-btn .panel-toggle-icon { transform: translateX(.12rem) rotate(45deg); }
@media (hover: none) and (pointer: coarse) { .panel-toggle { width: 2.75rem; height: 2.75rem; } }

.layout[data-left="closed"] .controls h2, .layout[data-right="closed"] .inspector h2 { margin-bottom: 0; }

.inspector { grid-column: 1 / -1; }
.inspector .panel-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.5rem; }
.insp-sec { min-width: 0; }
.insp-sec h3 { margin-bottom: .5rem; }
.inspector .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin: 0; }
.insp-mark { margin: 0; font-size: .85rem; font-variant-numeric: tabular-nums; font-family: var(--font-mono); overflow-wrap: anywhere; color: var(--text-muted); }
.insp-mark.has-mark { color: var(--text); }
.insp-slot > * + * { margin-top: .6rem; }
.insp-slot .mover-detail, .insp-slot .discover-detail { margin-inline: 0; }

@media (min-width: 1180px) {
  .layout { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) minmax(280px, 340px); max-width: 1560px; }
  .layout[data-left="closed"] { grid-template-columns: 3.25rem minmax(0, 1fr) minmax(280px, 340px); }
  .layout[data-right="closed"] { grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) 3.25rem; }
  .layout[data-left="closed"][data-right="closed"] { grid-template-columns: 3.25rem minmax(0, 1fr) 3.25rem; }
  .inspector { grid-column: auto; align-self: start; position: sticky; top: 1rem; max-height: calc(100dvh - 2rem); overflow: auto; }
  .inspector .panel-body { display: block; }
  .insp-sec + .insp-sec { margin-top: 1.1rem; }
  .layout[data-left="closed"] .controls, .layout[data-right="closed"] .inspector { padding: .7rem .4rem; overflow: hidden; }
  .layout[data-left="closed"] .controls .panel-head, .layout[data-right="closed"] .inspector .panel-head { flex-direction: column; align-items: center; }
  .layout[data-left="closed"] .controls h2, .layout[data-right="closed"] .inspector h2 { writing-mode: vertical-rl; font-size: .9rem; white-space: nowrap; margin-top: .4rem; }
  .layout[data-right="closed"] .inspector { position: static; max-height: none; }
  /* a closed side panel gives its room to the picture, but never more than the window is high (the picture is square) */
  .layout[data-left="closed"] .stage, .layout[data-right="closed"] .stage { max-width: max(640px, min(780px, calc(100dvh - 9rem))); }
  .layout[data-left="closed"][data-right="closed"] .stage { max-width: max(640px, min(920px, calc(100dvh - 9rem))); }
}

/* ---------- Shared interface pieces: icons, tooltips, dialog, state boxes (features/ui.js, tooltip.js, dialog.js) ---------- */
.icon { display: block; flex: none; }
.btn-ico { display: inline-flex; vertical-align: -3px; margin-right: .4rem; }
.btn-ico:empty { display: none; }

.tooltip {
  position: fixed; z-index: 1100; max-width: min(22rem, calc(100vw - 16px)); padding: .45rem .65rem; border-radius: var(--radius-sm);
  background: var(--raised); color: var(--text); border: 1px solid var(--control-border); box-shadow: var(--shadow);
  font-size: .8rem; line-height: 1.35; pointer-events: none; overflow-wrap: anywhere;
}

.dlg {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 1.2rem 1.4rem; overflow: auto;
  border: 1px solid var(--control-border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.dlg::backdrop { background: rgb(var(--bg-rgb) / .72); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.dlg-head h2 { margin: 0; font-size: 1.1rem; }
.keys { width: 100%; border-collapse: collapse; font-size: .9rem; }
.keys th, .keys td { padding: .45rem .5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.keys th { width: 1%; white-space: nowrap; font-weight: 400; }

.state {
  display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem; text-align: left; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgb(var(--accent-rgb) / .06);
}
.state-icon { display: inline-flex; margin-top: .1rem; color: var(--text-muted); }
.state-error { border-color: var(--danger); }
.state-error .state-icon { color: var(--danger); }
.state-partial { border-color: var(--warn); }
.state-partial .state-icon { color: var(--warn); }
.state-body { min-width: 0; }
.state-body p { margin: .25rem 0 .5rem; font-size: .85rem; color: var(--text-muted); }
.state-loading .icon { animation: state-spin 1s linear infinite; }
@keyframes state-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .state-loading .icon { animation: none; } }
.ex-empty { padding: 1rem; }

/* The explainer (features/assistantView.js): sentences with the ids of the measured values they are made of */
.assistant { grid-column: 1 / -1; }
.assistant p { margin: .4rem 0; }
.assistant-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.assistant-out { display: grid; gap: .6rem; max-width: 80ch; margin: .6rem 0; padding-left: 1.2rem; }
.assistant-out li.is-fixed { color: var(--text-muted); font-style: italic; }
.cites { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-left: .4rem; }
.cite { padding: .2rem .45rem; font: .72rem/1 var(--font-mono); color: var(--accent-text); cursor: pointer; border: 1px solid var(--control-border); border-radius: 999px; background: transparent; }
.cite:hover { border-color: var(--accent); }
.ss-table tr.is-cited th, .ss-table tr.is-cited td { background: rgb(var(--accent-rgb) / .14); }

/* The Solar System simulator (features/solarSystemView.js): the map sits in a .chart box, which keeps a dark ground and the Deep Space tokens in every theme */
.ss { grid-column: 1 / -1; }
.ss p { margin: .4rem 0; }
.ss-modes { display: grid; gap: .3rem; margin: .6rem 0; padding: .4rem .7rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ss-modes legend { padding: 0 .3rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.ss-controls, .ss-body-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: .5rem 0; font-size: .88rem; }
.ss-controls label, .ss-body-controls label { display: inline-flex; align-items: center; gap: .4rem; }
.ss-date input[type="range"] { width: min(18rem, 60vw); }
.ss-controls output { font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.ss-body-controls input[type="number"] { width: 6rem; min-height: 1.75rem; }      /* min-height: a target of at least 24 px (WCAG 2.2, 2.5.8); it was 21 px */
.ss-map { max-width: 640px; margin: .6rem auto; }
.ss-svg { display: block; width: 100%; height: auto; }
.ss-edge { fill: none; stroke: var(--text-muted); stroke-width: .006; }
.ss-ring { fill: none; stroke: var(--text-muted); stroke-opacity: .25; stroke-width: .004; }
.ss-orbit { fill: none; stroke: var(--text-muted); stroke-opacity: .45; stroke-width: .005; }
.ss-orbit.is-earth { stroke: var(--accent-hi); stroke-opacity: .8; }
.ss-sun { fill: var(--warn); }
.ss-planet { fill: var(--text); }
.ss-planet.is-earth { fill: var(--accent-hi); }
.ss-name, .ss-label { font-size: .055px; font-family: var(--font-body); }
.ss-name { fill: var(--text); }
.ss-label { fill: var(--text-muted); }
.ss-sight { stroke: var(--accent-2); stroke-width: .006; stroke-dasharray: .03 .02; }
.ss-earth-date { fill: none; stroke: var(--accent-hi); stroke-width: .006; }
.ss-body { stroke: var(--warn); stroke-width: .012; fill: none; }
.ss-table th, .ss-table td { padding: .35rem .6rem; border-bottom: 1px solid var(--border); text-align: left; font-size: .85rem; }
.ss-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* The sky explorer (features/skyExplorerView.js): the maps sit in .chart boxes, which keep a dark ground and the Deep Space tokens in every theme */
.sky { grid-column: 1 / -1; }
.sky p { margin: .4rem 0; }
.sky-map { max-width: 920px; margin: .6rem auto; }
.sky-svg { display: block; width: 100%; height: auto; cursor: crosshair; }
.sky-outline { fill: none; stroke: var(--text-muted); stroke-width: .012; }
.sky-grid { fill: none; stroke: var(--text-muted); stroke-opacity: .3; stroke-width: .006; }
.sky-ecliptic { fill: none; stroke: var(--warn); stroke-width: .016; stroke-dasharray: .07 .05; }
.sky-galactic { fill: none; stroke: var(--accent-2); stroke-width: .024; stroke-dasharray: .012 .04; stroke-linecap: round; }
.sky-label, .sky-field-label { font-size: .12px; font-family: var(--font-body); }
.sky-label { fill: var(--text-muted); }
.sky-field-label { fill: var(--text); font-weight: 600; }
.sky-field circle { fill: rgb(var(--accent-rgb) / .35); stroke: var(--accent-hi); stroke-width: .014; }
.sky-field.is-selected circle { fill: rgb(var(--accent-rgb) / .85); stroke: var(--text); }
.sky-list { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.sky-item { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; width: 100%; padding: .5rem .7rem; text-align: left; cursor: pointer;
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: transparent; color: var(--text); }
.sky-item:hover { border-color: var(--accent); }
.sky-item[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sky-item-id { grid-row: 1 / 3; align-self: center; font-weight: 700; color: var(--accent-text); }
.sky-item-main { font-family: var(--font-mono); font-size: .85rem; }
.sky-item-sub { grid-column: 2; font-size: .78rem; color: var(--text-muted); }
.sky-detail h3 { margin-top: 1rem; }
.sky-detail .chart { max-width: 460px; }
.sky-detail .btn, .sky .btn { width: auto; }
.sky-field-svg { display: block; width: 100%; height: auto; }
.fp-poly { fill: rgb(var(--accent-rgb) / .1); stroke: var(--accent-hi); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fp-poly.fp-dash { stroke: var(--accent-2); stroke-dasharray: 6 4; }
.fp-centre { fill: var(--text); }
.survey-chart { max-width: 560px; margin: .6rem auto; }
.survey-svg { display: block; width: 100%; height: auto; }
.survey-poly-far { fill: none; stroke: var(--text-muted); stroke-opacity: .45; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.survey-circle { fill: none; stroke: var(--warn); stroke-width: 1.5px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }

/* Detectors with no images of the field are shown as missing (main.js renderOverview, features/spectral.js), and the style of the spectrum's uncertainty */
.overview-item.is-missing { cursor: default; border-style: dashed; opacity: 1; }
.overview-item.is-missing:hover { border-color: var(--border); transform: none; }
.overview-item .ov-blank { display: block; width: 100%; aspect-ratio: 1; border-radius: 6px; background: repeating-linear-gradient(45deg, transparent 0 6px, rgb(var(--text-rgb) / .08) 6px 7px); border: 1px dashed var(--border); }
.measure-tools { display: grid; gap: .3rem; margin: .4rem 0; }
.chart-style { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1.2rem; margin: 0; padding: .3rem .6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.chart-style legend { padding: 0 .3rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

/* The Planet X Lab (features/planetLabView.js) */
.lab { grid-column: 1 / -1; }
.lab p { margin: .4rem 0; }
.lab h3 { margin-top: 1.3rem; }
.lab-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: .6rem 0; }
.lab-form label { display: grid; gap: .25rem; font-size: .85rem; color: var(--text-muted); }
.lab-form input[type="text"] { min-width: 12rem; }
.lab-form .btn { width: auto; }
.lab-progress { width: min(32rem, 100%); }
.lab-models, .lab-map { border-collapse: collapse; font-size: .85rem; }
.lab-models th, .lab-models td, .lab-map th, .lab-map td { padding: .4rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }
.lab-models .num { text-align: right; font-variant-numeric: tabular-nums; }
.lab-models .is-best th, .lab-models .is-best td { color: var(--text); font-weight: 600; }
.lab-verdict { font-weight: 600; }
.lab-distance { padding: .5rem .7rem; border-left: 3px solid var(--border); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: rgb(var(--accent-rgb) / .06); }
.lab-constrained { border-left-color: var(--accent); }
.lab-map th { font-weight: 500; color: var(--text-muted); }
.lab-swing { display: block; font-size: .72rem; font-weight: 400; }
.lab-map th.leaves { color: var(--warn); }
.lab-cell { text-align: center; min-width: 6.5rem; background: rgb(var(--accent-rgb) / calc(var(--f, 0) * .4)); }
.lab-cell.is-empty { background: transparent; }
.lab-cell-num { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.lab-cell-word { display: block; font-size: .72rem; color: var(--text); }
.lab-cell.is-empty .lab-cell-num, .lab-cell.is-empty .lab-cell-word { color: var(--text-muted); }

/* The spectrum sketch in a row of the candidate table (ui.js sparklineSvg) */
.ex-spec { width: 7rem; color: var(--text-muted); }
.spark { display: block; }

/* Opacity and order of the layers (viewerControls.js renderLayerOrder) */
.layer-settings { margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.layer-settings summary { cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--text-muted); min-height: 1.6rem; }
.layer-settings p { margin: .4rem 0 .6rem; }
.layer-order { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.layer-row { display: grid; grid-template-columns: 20px minmax(7rem, 1fr) minmax(5rem, 11rem) 3.2rem auto auto; align-items: center; gap: .5rem; font-size: .85rem; }
.layer-opacity { width: 100%; min-width: 0; }
.layer-pct { font: .75rem/1 var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-muted); }
.layer-move {
  width: 1.9rem; height: 1.9rem; padding: 0; display: inline-grid; place-items: center; cursor: pointer;
  border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: transparent; color: var(--text);
}
.layer-move:hover:not(:disabled) { border-color: var(--accent); }
.layer-move:disabled { opacity: .35; cursor: default; }
@media (hover: none) and (pointer: coarse) { .layer-move { width: 2.75rem; height: 2.75rem; } }
@media (max-width: 560px) {
  .layer-row { grid-template-columns: 20px 1fr auto auto; }
  .layer-opacity { grid-column: 2 / 4; grid-row: 2; }
  .layer-pct { grid-column: 4; grid-row: 2; }
}

/* ---------- From the other Blink 2.0 line: settings, image display, links to the standalone research pages, the pair of detectors ---------- */
.workspace-settings, .view-settings { margin: .7rem 0; }
.workspace-settings label, .view-settings label { display: flex; align-items: center; gap: .6rem; margin: .5rem 0; }
.workspace-settings select, .view-settings select { width: auto; }
.view-settings input[type="range"] { width: 10rem; }
.research-nav { display: flex; gap: .5rem 1rem; flex-wrap: wrap; }
.research-nav a { color: var(--accent-text); }
.detector-pair { margin: .75rem 0; }
.pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.pair-grid figure { margin: 0; }
.pair-grid img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; image-rendering: pixelated; }
.pair-grid figcaption { font-size: .85rem; font-variant-numeric: tabular-nums; }
.observation-select { display: grid; gap: .3rem; margin: .7rem 0; font-size: .88rem; color: var(--text-muted); }
.observation-select select { width: 100%; min-width: 0; }

/* "About the project" sits in the workspace grid, to the right of the text analysis (which is one narrow column and left the row empty). On a narrow screen it is a full-width block under it. */
.layout .info-aside { grid-column: 1 / -1; max-width: none; margin: 0; padding: 0; }
@media (min-width: 861px) { .layout .info-aside { grid-column: 2 / -1; align-self: start; position: sticky; top: 1rem; } }      /* the text analysis beside it is long: About stays in view while it scrolls */
/* Once the text analysis has built its tables it needs the whole row; About then takes the whole row below it */
@media (min-width: 861px) {
  .layout .textan:has(#ta-out:not([hidden])) { grid-column: 1 / -1; }
  .layout .textan:has(#ta-out:not([hidden])) + .info-aside { grid-column: 1 / -1; position: static; }
}

/* Blink 3.0 research interface. The same semantic colours and theme choices remain;
   surfaces, spacing and hierarchy are shared by the workspace and research pages. */
html[data-theme] {
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: none;
  --display: "Inter", system-ui, sans-serif;
  --font-head: "Inter", system-ui, sans-serif;
}
body { background: var(--bg); }
body::before, .sky-bg { display: none; }
h1, h2, h3 { letter-spacing: -.015em; }
.panel {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.layout { gap: .75rem; padding-top: .75rem; }
.panel h2 { font-size: 1rem; }
.panel h3 { font-size: .9rem; font-weight: 600; color: var(--text); }
.btn:hover:not(:disabled), .chip:hover, .overview-item:hover { transform: none; }
.btn-primary, .btn-primary:hover:not(:disabled) { box-shadow: none; }
.brand-logo::before, .brand-logo::after { animation: none; box-shadow: none; }
.brand-logo::after { opacity: .4; }
.badge {
  border-radius: var(--radius-sm);
  font-size: .75rem;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.chip, .discover-chips li { border-radius: var(--radius-sm); }
.hint, .mover-detail, .discover-detail, .rnotice, .rcaveat { box-shadow: none; }

/* Keep the complete introduction and navigation, with the workspace visible at once. */
.hero, [data-theme="light"] .hero {
  min-height: 0;
  background: var(--surface);
  color: var(--text);
  color-scheme: inherit;
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .hero {
  --surface: #FFFFFF;
  --raised: #F1F5FA;
  --border: #DCE3EC;
  --control-border: #77869C;
  --text: #172033;
  --text-muted: #56657C;
  --accent-text: #1D4ED8;
  --warn: #9A4A06;
}
.hero::before, .hero::after { display: none; }
.hero .brand-logo { width: 30px; height: 30px; border-radius: 5px; }
.hero .brand-logo::before, .hero .brand-logo::after { top: 10px; width: 6px; height: 6px; }
.hero .brand-logo::before { left: 7px; }
.hero .brand-logo::after { left: 17px; }
.hero .badge { background: var(--raised); }
.hero .theme-switch select { color: var(--text); background: var(--surface); border-radius: var(--radius-sm); }
.hero-title {
  align-self: stretch;
  width: auto;
  max-width: 1560px;
  margin: 0 auto;
  padding: .55rem clamp(1rem, 2vw, 1.5rem) .75rem;
  display: flex;
  align-items: baseline;
  gap: .35rem 1rem;
  flex-wrap: wrap;
  background: transparent;
  color: var(--text);
  border-top: 1px solid var(--border);
}
.hero-eyebrow { margin: 0; color: var(--text-muted); letter-spacing: .055em; font-size: .7rem; }
.hero h1 { font: 700 clamp(1.05rem, 2vw, 1.35rem)/1.2 var(--font-body); letter-spacing: -.03em; }
.hero h1 span { display: inline; }
.hero h1 span + span::before { content: " "; }
.hero-tag { margin: 0; max-width: none; color: var(--text-muted); font-size: .85rem; }
.hero-cta { margin: 0 0 0 auto; padding: .35rem .65rem; border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: transparent; color: var(--accent-text); font-size: .82rem; }
.hero-cta:hover { background: var(--raised); }
.hero-credit, .hero-scroll { display: none; }
.research-nav { display: grid; gap: 0; margin: .45rem 0 .8rem; border-block: 1px solid var(--border); }
.research-nav a {
  display: block;
  padding: .45rem .15rem;
  color: var(--text-muted);
  text-decoration: none;
  font-size: .85rem;
  border-bottom: 1px solid var(--border);
}
.research-nav a:last-child { border-bottom: 0; }
.research-nav a:hover, .research-nav a:focus-visible { color: var(--accent-text); background: var(--raised); }
@media (max-width: 720px) {
  .hero-title { gap: .3rem .8rem; }
  .hero-cta { margin-left: 0; }
}
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .layout > *, .panel, .table-scroll, .layers { min-width: 0; }
  .layer-list { grid-template-columns: minmax(0, 1fr); }
  .ss-date { flex-wrap: wrap; min-width: 0; }
  .ss-date input[type="range"] { max-width: 100%; width: min(18rem, 100%); }
}

/* ---------- Paper presentation: shared by every named palette ---------- */
html[data-theme] body::before, html[data-theme] .sky-bg { display: none; }
html[data-theme] .panel { box-shadow: none; border-radius: 2px; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme] .btn:hover:not(:disabled) { background: var(--raised); transform: none; }
html[data-theme] :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-theme] :is(input, select, textarea):focus { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }
html[data-theme] .hero { background: var(--bg); border-bottom: 1px solid var(--border); }
html[data-theme] .hero::before { display: none; }
html[data-theme] .hero-title { background: transparent; color: var(--text); }
html[data-theme] .hero h1 { font-family: var(--font-head); font-size: clamp(2.8rem, 6vw, 5.6rem); font-weight: 400; text-transform: none; color: var(--text); }
html[data-theme] .hero h1 span { display: inline; }
html[data-theme] .hero h1 span + span::before { content: " "; }
html[data-theme] .hero-tag, html[data-theme] .hero-eyebrow { color: var(--text-muted); }
html[data-theme] .hero-eyebrow, html[data-theme] .workspace-kicker, html[data-theme] .atlas-kicker { color: var(--accent-text); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; }
html[data-theme] .hero-cta { background: var(--text); border-color: var(--text); color: #fff; }
html[data-theme] .hero-cta:hover { background: var(--accent); }
html[data-theme] .stage, html[data-theme] .chart { color-scheme: dark; --bg: #0B0F19; --bg-2: #101724; --surface: #141D2B; --raised: #1E2A3A; --field: #0B0F19; --border: #536070; --control-border: #8D9AAD; --text: #F6F7F9; --text-muted: #CDD4DF; --text-faint: #9CA8B7; --accent: #F4F6F8; --accent-hi: #F4F6F8; --accent-text: #F4F6F8; --accent-rgb: 244 246 248; --accent-2: #CDD4DF; --alt-rgb: 205 212 223; --warn: #F5C451; --warn-rgb: 245 196 81; --danger: #FF9A9A; --success: #68D4A0; --bg-rgb: 11 15 25; --surface-rgb: 20 29 43; --text-rgb: 246 247 249; }
html[data-theme] .site-footer { border-top: 1px solid var(--border); background: var(--bg-2); }