:root,
[data-theme="brass"] {
  --accent:      #b08d57;
  --accent-dim:  #8a6c3e;
  --text:        #f1e5c8;
  --panel-bg:    linear-gradient(180deg, #2a1408, #1a0904);
  --tooltip-bg:  linear-gradient(180deg, #2a1408ee, #1a0904ee);
  --page-bg:     radial-gradient(ellipse at center, #1a0d05, #050200);
  --input-bg:    #0d0703;
  --font-ui:     "Garamond", "Times New Roman", serif;
  --tracking:    0.22em;
  --transform:   uppercase;
  --border-w:    2px;
  --shadow:      0 6px 24px rgba(0,0,0,0.7),
                 inset 0 0 14px rgba(176,141,87,0.18);
}

[data-theme="modern"] {
  --accent:      #6cd4ff;
  --accent-dim:  #3d7e9a;
  --text:        #e6e8ea;
  --panel-bg:    linear-gradient(180deg, rgba(20,24,32,0.88), rgba(10,12,18,0.88));
  --tooltip-bg:  linear-gradient(180deg, rgba(20,24,32,0.94), rgba(10,12,18,0.94));
  --page-bg:     linear-gradient(180deg, #04060b, #0a0c12);
  --input-bg:    rgba(0,0,0,0.4);
  --font-ui:     system-ui, -apple-system, "Segoe UI", sans-serif;
  --tracking:    0;
  --transform:   none;
  --border-w:    1px;
  --shadow:      0 6px 32px rgba(0,0,0,0.55),
                 0 0 0 1px rgba(108,212,255,0.10);
}

/* Night-vision: monochrome red palette intended to preserve dark-adapted
   eyes during astronomy use. Pairs with a CSS filter on the #stage canvas
   that remaps the rendered scene to red shades, plus per-body emissive
   boosts in themes3d.js so blue-dominated planets remain visible. */
[data-theme="nightvision"] {
  --accent:      #ff4040;
  --accent-dim:  #993030;
  --text:        #d04040;
  --panel-bg:    linear-gradient(180deg, rgba(28,4,4,0.92), rgba(14,2,2,0.92));
  --tooltip-bg:  linear-gradient(180deg, rgba(28,4,4,0.96), rgba(14,2,2,0.96));
  --page-bg:     radial-gradient(ellipse at center, #100404, #050000);
  --input-bg:    rgba(0,0,0,0.5);
  /* Monospace reads as the conventional "instrument display" aesthetic for
     this mode and keeps the tabular-numeric clocks aligned. */
  --font-ui:     "Consolas", "Courier New", monospace;
  --tracking:    0.05em;
  --transform:   uppercase;
  --border-w:    1px;
  --shadow:      0 0 16px rgba(255, 32, 32, 0.25),
                 0 0 0 1px rgba(255, 64, 64, 0.18);
}
/* Canvas-only filter that collapses the rendered scene to red shades.
   Order matters: grayscale strips colour first, sepia gives a warm base,
   the negative hue-rotate shifts that warm tone toward pure red, and a
   heavy saturate boost keeps it from looking washed-out brown. The
   brightness bump compensates for the overall darkening the colour
   shift introduces (most pixels lose energy when remapped through this
   chain). HTML overlays (panel, labels, tooltips) sit above the canvas
   in the DOM so they're not affected — they pick up their reds from
   the CSS variables block above. */
[data-theme="nightvision"] #stage {
  filter: grayscale(1) sepia(1) hue-rotate(-30deg) saturate(8) brightness(1.15);
}
/* Ecliptic-longitude HTML labels are hardcoded yellow to match the
   on-canvas dashed line. The canvas filter remaps that yellow line to a
   bright red, but HTML overlays sit above the filter and stay yellow,
   which would clash. Override to a matching red in night-vision. */
[data-theme="nightvision"] .ecliptic-label {
  color: #ff4040;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-ui);
  overflow: hidden;
}
#cabinet { position: fixed; inset: 0; }
#stage { width: 100%; height: 100%; display: block; }

#panel {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--panel-bg);
  border: var(--border-w) solid var(--accent);
  border-radius: 4px;
  padding: 12px 14px;
  min-width: 320px;
  /* Cap the column width so the footer's hint text (and any future long
     control row) can't blow the panel out to its natural single-line
     width. Without this the <p class="note"> would let the panel grow
     to ~740px to fit "Drag to rotate · scroll to zoom · …" on one line.
     Pair with explicit wrapping on the note below. */
  max-width: 360px;
  box-shadow: var(--shadow);
  /* Tells the UA to render any native widgets we DON'T fully restyle —
     number-input spinner buttons, date pickers, fallback scrollbars —
     using their dark palette so they don't pop as bright grey blocks
     against the dark panel. Cheap, no JS, works in Chromium + Firefox. */
  color-scheme: dark;
}
#panel h1 {
  font-size: 18px;
  margin: 0 0 10px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 6px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#panel h1 .chevron {
  display: inline-block;
  font-size: 0.85em;
  transition: transform 0.3s ease;
  text-transform: none;
  letter-spacing: 0;
}
#panel.collapsed h1 {
  margin-bottom: 0;
  border-bottom-color: transparent;
  padding-bottom: 0;
}
#panel.collapsed h1 .chevron {
  transform: rotate(-90deg);
}
[data-id="panelBody"] {
  /* Cap height to the viewport (minus the panel's own top offset, the h1
     row, and a small bottom buffer) and let the body scroll internally
     when content overflows — otherwise the trailing rows (Labels,
     footer) silently disappear off the bottom on shorter windows.
     overflow-y: auto plays fine with the collapse transition: when
     max-height animates to 0 the constrained content suppresses the
     scrollbar.
     scrollbar-gutter:stable reserves the scrollbar's width inside the
     padding box so the bar sits in its own column instead of overlaying
     content (the Find dropdown on the right of the constellations row,
     and the Reset/Credits buttons in the footer would otherwise be
     half-covered by the bar's track). padding-right then nudges the
     content away from the gutter so e.g. the Reset button doesn't sit
     under the scrollbar's left edge. */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-right: 6px;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  /* Firefox scrollbar theming — Chromium picks this up too as a
     fallback, but the ::-webkit-scrollbar rules below give us finer
     control there. */
  scrollbar-color: var(--accent-dim) var(--input-bg);
  scrollbar-width: thin;
}
[data-id="panelBody"]::-webkit-scrollbar {
  width: 10px;
}
[data-id="panelBody"]::-webkit-scrollbar-track {
  background: var(--input-bg);
}
[data-id="panelBody"]::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border-radius: 4px;
  border: 2px solid var(--input-bg);   /* slim the thumb, keep clear of track edges */
}
[data-id="panelBody"]::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}
#panel.collapsed [data-id="panelBody"] {
  max-height: 0;
  overflow: hidden;
}
.collapsed-time {
  display: none;
  font-size: 12px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  color: var(--accent);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--accent-dim);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#panel.collapsed .collapsed-time {
  display: block;
}
.row {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
  align-items: center;
}
.section { margin: 10px 0; }
.section-title {
  font-size: 11px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.checkbox-column {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* A row inside .checkbox-column for the rare cases where two related
   controls share a line — currently just Constellations + the Find
   dropdown, but the same pattern would suit any "checkbox + selector". */
.checkbox-column .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.checkbox-column .checkbox-row .find-label {
  margin-left: auto;          /* push Find to the right of the row */
}
.checkbox-column .checkbox-row select:disabled { opacity: 0.4; }
.checkbox-column .satellite,
.checkbox-column .suboption { padding-left: 18px; }
.checkbox-column .suboption input:disabled + * { opacity: 0.4; }
.checkbox-column .suboption input:disabled,
.checkbox-column .suboption select:disabled { opacity: 0.4; }
/* Range sliders inside a suboption row stretch to fill the remaining width
   after the label text — mirrors the .size-row treatment. */
.checkbox-column .suboption input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}
.size-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.size-row label { flex-shrink: 0; }
.size-row input[type="range"] {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}
.size-row input[type="range"]:disabled { opacity: 0.4; }
.checkbox-column .master {
  color: var(--accent);
  border-bottom: 1px dashed var(--accent-dim);
  padding-bottom: 3px;
  margin-bottom: 3px;
}
label {
  font-size: 12px;
  display: flex;
  gap: 4px;
  align-items: center;
  color: var(--text);
}
input:not([type="checkbox"]), select, button {
  background: var(--input-bg);
  color: var(--text);
  border: 1px solid var(--accent);
  padding: 3px 6px;
  font-family: inherit;
  font-size: 13px;
}
input[type="checkbox"] {
  accent-color: var(--accent);
  margin: 0 4px 0 0;
}
input[data-id="year"]  { width: 70px; }
input[data-id="month"], input[data-id="day"] { width: 50px; }
input.time-part        { width: 48px; text-align: center; }
.time-sep              { color: var(--accent-dim); margin: 0 1px; }
input[data-id="jd"]    { width: 140px; }
button { cursor: pointer; }
button:hover { background: var(--accent); color: var(--input-bg); }
.icon-button {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-button svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.icon-button .icon-pause { display: none; }
.icon-button.playing .icon-play { display: none; }
.icon-button.playing .icon-pause { display: inline; }
.note { font-size: 11px; color: var(--accent-dim); margin: 8px 0 0; }
.footer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.footer .note { flex: 1; min-width: 0; margin: 0; }
.footer-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.footer-buttons button { width: 100%; }

#tooltip,
#info-box,
#credits-box,
#help-box {
  position: fixed;
  display: none;
  z-index: 100;
  min-width: 220px;
  max-width: 300px;
  background: var(--tooltip-bg);
  border: var(--border-w) solid var(--accent);
  border-radius: 4px;
  padding: 8px 12px 10px;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  box-shadow: var(--shadow);
}
#tooltip { pointer-events: none; }
#tooltip.visible,
#info-box.visible,
#credits-box.visible,
#help-box.visible { display: block; }
#tooltip h3,
#info-box h3,
#credits-box h3,
#help-box h3 {
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 14px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
}
#tooltip dl,
#info-box dl,
#credits-box dl,
#help-box dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 12px;
}
#tooltip dt,
#info-box dt,
#credits-box dt,
#help-box dt { color: var(--accent-dim); }
#tooltip dd,
#info-box dd,
#credits-box dd,
#help-box dd { margin: 0; color: var(--text); }
#tooltip sup,
#info-box sup { font-size: 0.8em; }
#credits-box {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 280px;
}
#credits-box a { color: var(--accent); text-decoration: underline; }
#credits-box a:hover { color: var(--text); }
#credits-box .credits-note {
  margin: 10px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--accent-dim);
  font-size: 11px;
  color: var(--accent-dim);
  text-align: center;
}

/* Help dialog — wider than the credits box (lots of definitions to fit
   in two columns) and capped to the viewport height with internal scroll
   for shorter windows. Shares the credits .note styling for the close
   hint at the bottom. */
#help-box {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 360px;
  max-width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  /* Match the panel scrollbar treatment so it doesn't pop as the only
     bright bar in an otherwise-themed UI. */
  scrollbar-color: var(--accent-dim) var(--input-bg);
  scrollbar-width: thin;
}
#help-box::-webkit-scrollbar { width: 10px; }
#help-box::-webkit-scrollbar-track { background: var(--input-bg); }
#help-box::-webkit-scrollbar-thumb {
  background: var(--accent-dim);
  border-radius: 4px;
  border: 2px solid var(--input-bg);
}
#help-box::-webkit-scrollbar-thumb:hover { background: var(--accent); }
#help-box section { margin: 10px 0 0; }
#help-box section:first-of-type { margin-top: 6px; }
#help-box h4 {
  margin: 0 0 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--accent-dim);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  font-weight: normal;
}
#help-box .help-blurb {
  margin: 0 0 4px;
  color: var(--text);
}
#help-box .help-blurb em { color: var(--accent); font-style: normal; }
#help-box .help-blurb strong { color: var(--accent); }
#help-box .credits-note {
  margin: 10px 0 0;
  padding-top: 6px;
  border-top: 1px solid var(--accent-dim);
  font-size: 11px;
  color: var(--accent-dim);
  text-align: center;
}

#labels,
#constellation-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.constellation-label {
  position: absolute;
  /* Container has pointer-events:none, so each label has to opt back in
     to receive clicks. */
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  color: var(--accent-dim);
  /* Centre on the projected constellation centroid rather than the
     top-left corner — names sit visually inside the figure. */
  transform: translate(-50%, -50%);
  user-select: none;
  /* Soft halo so the label still reads against bright catalog stars
     without an opaque background plate. */
  text-shadow: 0 0 4px #000, 0 0 4px #000;
}
.constellation-label:hover { color: var(--accent); }
.constellation-label.highlighted {
  color: var(--accent);
  font-weight: bold;
}

/* Ecliptic-longitude labels — one per 30° tick on the ecliptic great
   circle, positioned each frame by ecliptic.js. Yellow to match the
   dashed line and tick marks; text-shadow halo so the small numerals
   stay readable against bright sky textures. */
#ecliptic-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.ecliptic-label {
  position: absolute;
  pointer-events: none;
  /* Slight downward bias from the tick centre so the digits sit just
     under the tick instead of on top of it; the −50% X keeps it
     horizontally centred on the longitude. */
  transform: translate(-50%, 4px);
  color: #ffff00;
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: var(--tracking);
  font-variant-numeric: tabular-nums;
  user-select: none;
  text-shadow: 0 0 4px #000, 0 0 4px #000;
  white-space: nowrap;
}

/* Compass labels around the local horizon, only shown in earthSurface
   view. Centred on the projected screen point of each cardinal /
   intercardinal azimuth at altitude 0. Cardinal directions get a slightly
   larger / bolder treatment so they read as primary. */
#compass-labels {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}
.compass-label {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  /* Dark red, matching the compass ring + ticks (COMPASS_COLOR in
     view.js). Theme-independent — the surface view always reads the
     same regardless of accent palette. */
  color: #8b0000;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  user-select: none;
  /* Same halo trick as constellation labels so the text reads against
     bright sky textures (Milky Way, dense star fields). */
  text-shadow: 0 0 4px #000, 0 0 4px #000;
}
.compass-label.cardinal {
  font-size: 14px;
  font-weight: bold;
}

/* Alt/Az indicator — bottom-right corner badge active only in earthSurface
   view. Same chrome as the FOV badge (themed border + tooltip background)
   for visual consistency, but persistent rather than transient. */
#altaz-indicator {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: none;
  background: var(--tooltip-bg);
  border: var(--border-w) solid var(--accent);
  border-radius: 4px;
  padding: 4px 10px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 50;
  box-shadow: var(--shadow);
}
#altaz-indicator.visible { display: block; }

/* Transient FOV badge — fades in for ~1s on each ctrl+wheel notch (or
   "0" reset) so the user gets the current magnification value as feedback
   without permanent UI. Centre-top so it stays well clear of the panel. */
#fov-badge {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--tooltip-bg);
  border: var(--border-w) solid var(--accent);
  border-radius: 4px;
  padding: 4px 12px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 100;
  box-shadow: var(--shadow);
}
#fov-badge.visible { opacity: 1; }

/* Star Finder marker: a ring centred on the picked star plus a label
   below it. Lives outside #cabinet so it sits above the canvas without
   needing pointer-events trickery. The whole element is positioned by
   starfinder.js per-frame — the ring + label are static within it. */
#star-finder {
  position: fixed;
  pointer-events: none;
  z-index: 6;
  /* The fixed-position element is anchored at the projected screen point;
     translating moves the ring's *centre* onto that point. The label is
     re-centred on its own origin via its own transform below. */
  transform: translate(-50%, -50%);
}
.star-finder-ring {
  width: 22px;
  height: 22px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  /* Soft outer halo so the ring reads against bright textures (Milky Way,
     dense star fields) without an opaque background plate. */
  box-shadow: 0 0 6px rgba(0,0,0,0.7), 0 0 4px var(--accent);
}
.star-finder-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  text-shadow: 0 0 4px #000, 0 0 4px #000;
  white-space: nowrap;
}

/* Constrain the Find Star select. The longest catalogue label runs ~40
   chars (e.g. proper-name + Bayer + HR), so the natural width can blow
   the panel out of its column. Cap and ellipsise; the open dropdown still
   shows full strings because the browser sizes the popup independently. */
[data-id="findStar"] {
  max-width: 200px;
  text-overflow: ellipsis;
}
.label {
  position: absolute;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: var(--tracking);
  text-transform: var(--transform);
  color: var(--accent);
  background: var(--tooltip-bg);
  border: 1px solid var(--accent-dim);
  border-radius: 2px;
  padding: 1px 6px;
  user-select: none;
}
.label:hover { border-color: var(--accent); }
#label-lines {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 4;
}
.label-line {
  stroke: var(--accent-dim);
  stroke-width: 1;
}
#panel { z-index: 50; }