/* ============================================================================
   ACU Log Viewer — Radeus Labs visual style
   ----------------------------------------------------------------------------
   Mirrors the design language of the Multi-Satellite Sky Chart tool: navy /
   blue / red palette, Montserrat for headings + buttons, Outfit for body
   text, light card background. Charts themselves are drawn in light colors
   to match the page surface.
   ============================================================================ */

:root {
  --navy:        #00205B;
  --navy-deep:   #001130;
  --blue:        #2C51C0;
  --red:         #BF0D23;
  --light-bg:    #F1F6FF;
  --white:       #FFFFFF;
  --fg:          #2b2d2f;
  --muted:       #5a6478;
  --border:      #dde1eb;
  --panel:       #FFFFFF;
  --accent:      #2C51C0;
  --error:       #BF0D23;
  --warn:        #c97c12;
  --tip-bg:      #fffdf0;
  --canvas:      #fbfcff;       /* chart background */
  --grid:        #e2e7f1;       /* chart gridline */
  --font-head:   'Montserrat', Helvetica, Arial, Lucida, sans-serif;
  --font-body:   'Outfit', Helvetica, Arial, sans-serif;
  --font-mono:   "Consolas", "Menlo", ui-monospace, monospace;
  --radius:      4px;
  --shadow-sm:   0 2px 10px rgba(0, 32, 91, 0.09);
  --shadow-md:   0 4px 16px rgba(0, 32, 91, 0.14);
  --shadow-lg:   0 12px 40px rgba(0, 32, 91, 0.22);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--light-bg);
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Site header (logo + nav) ────────────────────────────────────────────── */
.site-header {
  background: var(--white);
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  box-shadow: 0 2px 8px rgba(0, 32, 91, 0.12);
  border-bottom: 3px solid var(--navy);
  flex-shrink: 0;
  z-index: 50;
}
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 46px; width: auto; display: block; }
.site-header nav { display: flex; align-items: center; gap: 26px; }
.site-header nav a {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  transition: color 0.18s;
}
.site-header nav a:hover { color: var(--red); }

/* ── Title band ──────────────────────────────────────────────────────────── */
.page-title {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 60%, #0a2d78 100%);
  color: var(--white);
  padding: 28px 32px 26px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.page-title::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(44, 81, 192, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44, 81, 192, 0.14) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.page-title-inner { position: relative; max-width: 1800px; }
.page-eyebrow {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.page-eyebrow::after { content: ''; display: block; width: 32px; height: 2px; background: var(--red); }
.page-title h1 {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.page-title p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.55;
  max-width: 760px;
}

.section-divider { height: 5px; background: var(--blue); flex-shrink: 0; }

/* ── Full-window mode ────────────────────────────────────────────────────
   Hides the Radeus header, the navy title band, and the section-divider
   stripe so the toolbar + charts take the full browser viewport. NOT the
   Fullscreen API — the browser's own chrome (tabs / address bar / OS
   taskbar) all stay visible. Toggled via the "Full window" toolbar button
   or Esc; persisted in localStorage. */
body.full-window .site-header,
body.full-window .page-title,
body.full-window .section-divider { display: none !important; }
body.full-window main { padding-top: 10px; padding-bottom: 14px; }
/* Drop the 1800px content cap in full-window mode so the toolbar + charts
   actually fill the viewport on wide / ultrawide monitors. */
body.full-window .page-content { max-width: none; }

/* ── Main / page container ───────────────────────────────────────────────── */
main {
  flex: 1;
  min-height: 0;
  padding: 18px 32px 28px;
  display: flex;
  flex-direction: column;
}
.page-content {
  max-width: 1800px;
  width: 100%;
  margin: 0 auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Toolbar (fieldset wrapper) ──────────────────────────────────────────── */
fieldset.toolbar {
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 10px 16px 12px;
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
fieldset.toolbar legend {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0 6px;
}
.toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.control-cluster {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 0;
  border-right: 1px solid var(--border);
  flex-wrap: wrap;
}
.control-cluster:last-child { border-right: none; padding-right: 0; }
.cluster-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 4px;
}

/* ── Form controls ───────────────────────────────────────────────────────── */
label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fg);
  font-size: 13px;
}
label > span:first-child {
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

input[type="text"], input[type="number"], input[type="file"],
input[type="search"], input[type="datetime-local"], select, textarea {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 8px;
  background: var(--white);
  color: var(--fg);
  transition: border-color 0.15s, outline 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}

button {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
button:hover:not(:disabled) { background: var(--light-bg); border-color: var(--navy); color: var(--navy); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--navy); color: var(--white); border-color: var(--navy); }
button.primary:hover:not(:disabled) { background: var(--red); border-color: var(--red); color: var(--white); }

.mini-btn {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-width: 1px;
}

/* Source-picker radios styled like inline chips. */
.source-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
}
.source-radio input { accent-color: var(--navy); margin: 0; }
.source-radio span {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
}

#source-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* Refresh button — compact ↻ icon next to the source-info string. */
#refresh-source-btn {
  padding: 4px 9px;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
}
#refresh-source-btn:disabled {
  /* Brief disable while a refresh is in flight; we want it to read as
     "busy" rather than "unavailable". */
  opacity: 0.55;
  cursor: progress;
}

/* "Forget" button — only visible in Local mode when a saved handle exists. */
#forget-folder-btn { padding: 4px 9px; font-size: 11px; }
#forget-folder-btn.hidden { display: none; }

.muted { color: var(--muted); font-size: 12px; }
.status {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  align-self: center;
}

/* Global-size slider cluster */
.global-size-ctl { display: inline-flex; align-items: center; gap: 6px; }
.global-size-ctl > span:first-child {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
#global-size { width: 96px; accent-color: var(--navy); }
#global-size-val {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  width: 32px;
  text-align: right;
  font-size: 12px;
  color: var(--fg);
}

/* AZ vs El Plot toggle — larger and more distinct than the neighboring
   buttons (filled accent), turns red while the window is open. */
.azel-btn {
  padding: 8px 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
  box-shadow: 0 2px 8px rgba(44, 81, 192, 0.28);
}
.azel-btn:hover:not(:disabled) {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.azel-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  box-shadow: 0 0 0 2px rgba(191, 13, 35, 0.22);
}

/* Exclusion tool buttons — match base button look until activated. */
.tool-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
  box-shadow: 0 0 0 2px rgba(191, 13, 35, 0.22);
}
/* Keep / Include tools light up GREEN (they keep, not remove). */
.keep-tool.active,
#sky-track-includebox-btn.active {
  background: #0e9f6e;
  border-color: #0e9f6e;
  color: var(--white);
  box-shadow: 0 0 0 2px rgba(14, 159, 110, 0.22);
}
body.tool-active,
body.tool-active .chart-host,
body.tool-active .u-over { cursor: crosshair !important; }

/* ── Charts area ─────────────────────────────────────────────────────────── */
/* Charts on the left, the (optional) category color key on the right. */
.charts-row {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
}
#charts {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── Category color key (right sidebar) ──────────────────────────────────── */
#color-key {
  flex: 0 0 190px;
  min-height: 0;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 8px 10px 10px;
}
#color-key.hidden { display: none; }
.color-key-head {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.ck-section + .ck-section { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.ck-col {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 4px;
  word-break: break-word;
}
.ck-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.ck-check { accent-color: var(--navy); margin: 0; flex-shrink: 0; cursor: pointer; }
.ck-swatch {
  width: 13px; height: 13px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 2px;
}
.ck-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.panel {
  flex: 1 1 0;
  min-height: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 2px solid var(--navy);
  border-radius: var(--radius);
  padding: 6px 10px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
/* Bottom panel reserves room for uPlot's two-tier x-axis labels (size:50
   in JS) — time on top, calendar date underneath. Plus the panel's own
   padding (6px) + border (1px) below the chart, with a little breathing
   room so the descenders aren't clipped. */
#charts .panel:last-child { flex-basis: 65px; }

.chart-host { flex: 1; min-width: 0; min-height: 0; }

.panel-label {
  flex: 0 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  user-select: none;
}
.panel-label-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}
.panel-overlay-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
}
.panel-overlay-toggle input { accent-color: var(--navy); }
.panel-overlay-add {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 3px;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}
.panel-overlay-add:hover { color: var(--navy); border-color: var(--navy); border-style: solid; }

/* Per-row actions (top-right of each panel) */
.row-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  gap: 3px;
  z-index: 5;
}
.row-actions button {
  width: 22px;
  height: 22px;
  padding: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
}
.row-actions button:hover:not(:disabled) { color: var(--navy); border-color: var(--navy); background: var(--white); }
.row-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
.row-actions .row-remove:hover { color: var(--red); border-color: var(--red); }
.row-actions .row-by-active {
  background: rgba(44, 81, 192, 0.12);
  color: var(--navy);
  border-color: var(--navy);
}

/* Row color swatch (a little larger than other row-action buttons). */
.row-color {
  width: 34px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 3px;
  cursor: pointer;
}
.row-color:hover { border-color: var(--navy); }
.row-color .swatch-fill { display: block; width: 100%; height: 100%; border-radius: 2px; }

/* Placeholder row (no metric assigned yet) */
.placeholder-row {
  flex: 1;
  min-height: 0;
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-style: italic;
  position: relative;
}
.no-rows-hint {
  margin: 0 auto;
  max-width: 1200px;
  width: 100%;
  color: var(--muted);
  font-size: 13px;
  padding: 28px 24px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-y: auto;
}
.no-rows-hint .no-rows-prompt {
  text-align: center;
  font-size: 14px;
  font-style: italic;
  color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
/* Inline copy of the Instructions modal content. Slightly smaller padding
   than inside the modal since we already have the panel wrapper above. */
.no-rows-hint .no-rows-instructions section + section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.no-rows-hint .no-rows-instructions h3 {
  font-family: var(--font-head);
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.no-rows-hint .no-rows-instructions ul { margin: 0; padding-left: 20px; }
.no-rows-hint .no-rows-instructions li + li { margin-top: 5px; }
.no-rows-hint .no-rows-instructions code,
.no-rows-hint .no-rows-instructions kbd {
  /* Inherit from the modal kbd/code styles already defined. */
}
.no-rows-hint .no-rows-instructions .shortcut-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.no-rows-hint .no-rows-instructions .shortcut-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.no-rows-hint .no-rows-instructions .shortcut-table td:first-child {
  white-space: nowrap;
  width: 1%;
  padding-right: 16px;
}

/* "Add new row" CTA — emphasised, dashed. */
#add-row-btn:not(:disabled) {
  background: transparent;
  color: var(--navy);
  border: 1.5px dashed var(--navy);
}
#add-row-btn:not(:disabled):hover { background: rgba(44, 81, 192, 0.06); border-style: solid; }

/* ── Info panel (load metadata) ──────────────────────────────────────────── */
#meta {
  margin: 0;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
#meta.hidden { display: none; }

/* ── uPlot light-theme overrides ─────────────────────────────────────────── */
.u-wrap { background: var(--canvas); }
.u-axis { color: var(--muted); font-family: var(--font-mono) !important; font-size: 11px !important; }
.u-legend { display: none !important; }
/* The drag-zoom selection rectangle. uPlot keeps this element in the DOM at
   the top-left of every panel even when not selecting; with `border: 1px`
   plus `box-sizing: border-box` it'd render as a tiny 2px navy square in the
   corner. We use `inset` box-shadow instead of `border` so a zero-size
   element occupies zero pixels (no shadow, no visible square), and the drag
   rectangle still gets a clear navy outline once uPlot gives it real width. */
.u-select {
  background: rgba(44, 81, 192, 0.14);
  box-shadow: inset 0 0 0 1px var(--navy);
}

/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 17, 48, 0.50);
}
.modal-card {
  position: relative;
  width: min(480px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-lg);
}
.modal-card-wide { width: min(1200px, 94vw); max-height: 86vh; }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-head h2 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}

#modal-close, #directions-close {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  width: 26px;
  height: 26px;
  padding: 0;
  font: 600 13px/1 var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}
#modal-close:hover, #directions-close:hover { color: var(--navy); border-color: var(--navy); }

#column-search {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
}

/* Axis-key banner for the two-step AZ/El series picker. */
.modal-axis-key {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.modal-axis-key.hidden { display: none; }
.modal-axis-key .axis-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}
.modal-axis-key .axis-chip-axis {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.modal-axis-key .axis-chip-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
}
/* The axis currently being chosen is highlighted; the one already set reads
   "done"; the not-yet axis is dimmed. */
.modal-axis-key .axis-chip.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(44, 81, 192, 0.18);
}
.modal-axis-key .axis-chip.active .axis-chip-axis { color: var(--blue); }
.modal-axis-key .axis-chip.active .axis-chip-val { color: var(--blue); font-style: italic; }
.modal-axis-key .axis-chip.done { border-color: #0e9f6e; }
.modal-axis-key .axis-chip.done .axis-chip-axis { color: #0e9f6e; }
.modal-axis-key .axis-chip.pending .axis-chip-val { color: var(--muted); }
.modal-axis-key .axis-arrow {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 16px;
}

#column-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: 2px;
}
#column-list .hint {
  color: var(--muted);
  font-style: italic;
  padding: 6px 2px;
}

.col-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 13px;
  cursor: pointer;
  color: var(--fg);
}
.col-item:hover { background: var(--light-bg); }
.col-item.has-assignment { font-weight: 600; color: var(--navy); }
.col-item .assigned-badge {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.col-item.in-tooltip { background: rgba(201, 124, 18, 0.10); }
.col-item.in-tooltip .assigned-badge { color: var(--warn); }
.col-item.disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Directions modal content ────────────────────────────────────────────── */
.directions-body {
  overflow-y: auto;
  padding-right: 4px;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.6;
}
.directions-body section + section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.directions-body h3 {
  font-family: var(--font-head);
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
}
.directions-body ul,
.directions-body ol { margin: 0; padding-left: 20px; }
.directions-body li + li { margin-top: 5px; }
/* Intro block above the first labelled section — sits flush with the modal
   head, no section divider above (it's already the first child). */
.directions-body .directions-intro {
  padding: 4px 10px 10px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}
.directions-body .directions-intro p {
  margin: 4px 0 6px;
  font-weight: 600;
  color: var(--navy);
}
.directions-body .directions-intro a {
  color: var(--blue);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.directions-body .directions-intro a:hover { color: var(--red); text-decoration: underline; }
.directions-body code {
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font: 500 12px var(--font-mono);
}
.directions-body kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  font: 600 11px/1.4 var(--font-mono);
  color: var(--navy);
  text-align: center;
  white-space: nowrap;
}
.shortcut-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.shortcut-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.shortcut-table td:first-child {
  white-space: nowrap;
  width: 1%;
  padding-right: 16px;
}

/* ── Color popover ───────────────────────────────────────────────────────── */
#color-popover {
  position: fixed;
  z-index: 250;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 220px;
}
#color-popover.hidden { display: none; }

.cp-section { display: flex; flex-direction: column; gap: 5px; }
.cp-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cp-label > .mini-btn { margin-left: auto; }
.cp-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  opacity: 0.85;
}

.cp-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.cp-swatch {
  width: 26px;
  height: 26px;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  position: relative;
  background-clip: padding-box;
}
.cp-swatch:hover { transform: scale(1.08); border-color: var(--navy); }
.cp-swatch.empty {
  background:
    repeating-linear-gradient(45deg, transparent, transparent 4px,
                              rgba(0, 32, 91, 0.08) 4px, rgba(0, 32, 91, 0.08) 7px);
}

.cp-input-row { flex-direction: row; align-items: center; gap: 6px; }
.cp-input-row input[type="color"] {
  width: 38px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 3px;
  cursor: pointer;
}

#cp-size, #cp-overlay-size { width: 100%; accent-color: var(--navy); }
#cp-size:disabled, #cp-overlay-size:disabled { opacity: 0.45; cursor: not-allowed; }

.cp-overlay-section { border-top: 1px solid var(--border); padding-top: 10px; }
.cp-overlay-section.hidden { display: none; }
.cp-categories-section { border-top: 1px solid var(--border); padding-top: 10px; }

.cp-category-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.cp-category-row input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 3px;
  cursor: pointer;
}
.cp-category-row span { color: var(--fg); font-family: var(--font-mono); }
.cp-overlay-row { display: flex; align-items: center; gap: 8px; }
#cp-overlay-color {
  width: 38px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 3px;
  cursor: pointer;
}
.cp-override {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.cp-override input { accent-color: var(--navy); }

/* Gradient color-by editor in the popover (numeric color-by columns only).
   Three number inputs for min/center/max + a preview bar + reverse toggle. */
.cp-gradient-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  margin-top: 4px;
}
.cp-gradient-field {
  display: flex;
  flex-direction: column;
  font-size: 10px;
  color: var(--muted);
}
.cp-gradient-field-label {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cp-gradient-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
}
.cp-gradient-preview {
  height: 12px;
  border-radius: 3px;
  margin-top: 6px;
  border: 1px solid var(--border);
  /* background is set inline because the gradient stops depend on runtime
     values (min/center/max + reverse). */
}
.cp-gradient-row { margin-top: 6px; }

/* ── Tooltip (hover / pinned) ────────────────────────────────────────────── */
#tooltip {
  position: fixed;
  z-index: 100;
  pointer-events: none;
  user-select: none;
  display: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
}
#tooltip.pinned {
  pointer-events: auto;
  user-select: text;
  cursor: default;
  border-top-color: var(--red);
}
#tooltip .t-close { display: none; }
#tooltip.pinned .t-close {
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  cursor: pointer;
}
#tooltip.pinned .t-close:hover { color: var(--red); border-color: var(--red); }
#tooltip.pinned .t-time { padding-right: 26px; }
#tooltip .t-time {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  margin-bottom: 5px;
}
#tooltip .t-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
#tooltip .t-row .t-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
#tooltip .t-extra {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 11.5px;
}
#tooltip .t-extra .t-val { font-family: var(--font-mono); }
#tooltip .t-divider {
  border-top: 1px solid var(--border);
  margin: 5px 0;
}

/* ── Exclusion overlay drawn on each panel ──────────────────────────────── */
.exclusion-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Used during a drag (preview) only. Committed exclusions leave no marker. */
.exclusion-band.preview {
  position: absolute;
  background: rgba(191, 13, 35, 0.20);
  border: 2px solid var(--red);
}
/* Keep/Include drag preview — green to signal "keep this" vs red "remove this". */
.exclusion-band.preview.keep {
  background: rgba(14, 159, 110, 0.18);
  border-color: #0e9f6e;
}

/* ── Floating exclusions panel ───────────────────────────────────────────── */
#exclusions-panel {
  position: fixed;
  top: 110px;
  right: 24px;
  z-index: 150;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--red);
  border-radius: var(--radius);
  padding: 0;
  width: 260px;
  box-shadow: var(--shadow-md);
  font-size: 12px;
}
#exclusions-panel.hidden { display: none; }
#exclusions-panel .ex-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--light-bg);
  border-bottom: 1px solid var(--border);
  cursor: move;
  user-select: none;
}
#exclusions-panel .ex-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
#ex-list { max-height: 280px; overflow-y: auto; padding: 4px 0; }
#ex-list:empty::before {
  content: 'No filters. Activate a tool above and drag.';
  display: block;
  padding: 10px 12px;
  color: var(--muted);
  font-style: italic;
  font-size: 11px;
}
#ex-list .ex-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
}
#ex-list .ex-row:last-child { border-bottom: none; }
#ex-list .ex-row .ex-scope {
  display: inline-block;
  width: 26px;
  text-align: center;
  background: var(--light-bg);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 0;
}
#ex-list .ex-row .ex-scope.all {
  background: rgba(191, 13, 35, 0.12);
  color: var(--red);
  border-color: var(--red);
}
#ex-list .ex-row .ex-times {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ex-list .ex-row .ex-del {
  width: 24px;
  height: 20px;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}
#ex-list .ex-row .ex-del:hover { color: var(--red); border-color: var(--red); }
/* EXCL / KEEP mode badge on each exclusion row. */
#ex-list .ex-row .ex-mode {
  display: inline-block;
  width: 34px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 0;
  border-radius: 3px;
  background: rgba(191, 13, 35, 0.12);
  color: var(--red);
  border: 1px solid var(--red);
}
#ex-list .ex-row .ex-mode.keep {
  background: rgba(14, 159, 110, 0.12);
  color: #0e9f6e;
  border-color: #0e9f6e;
}
.ex-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}

/* ── Sky Track — floating Az/El scatter window ───────────────────────────── */
#sky-track-panel {
  position: fixed;
  z-index: 180;                 /* above exclusions (150), below modals (200) */
  width: min(760px, 92vw);
  height: min(520px, 80vh);
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;                 /* drag the bottom-right corner to resize */
  min-width: 360px;
  min-height: 260px;
}
#sky-track-panel.hidden { display: none; }

.sky-track-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--light-bg);
  flex-wrap: wrap;
  flex-shrink: 0;
  cursor: move;                 /* drag the header to move the window */
  user-select: none;
}
.sky-track-title {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  flex-shrink: 0;
}
#sky-track-series-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}
.st-series-row {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 4px 2px 6px;
  cursor: default;              /* don't show the move cursor over chips */
}
/* Swatch button that opens the shared color popover (mirrors .row-color). */
.st-color {
  width: 22px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 3px;
  cursor: pointer;
  flex-shrink: 0;
}
.st-color:hover { border-color: var(--navy); }
.st-color .st-color-fill { display: block; width: 100%; height: 100%; border-radius: 2px; }
.st-series-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg);
}
.sky-track-body {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--canvas);
}
#sky-track-canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Per-series "color by" button in the header chip. */
.st-by-btn { padding: 2px 7px; }
.st-by-btn.active {
  background: rgba(44, 81, 192, 0.12);
  border-color: var(--navy);
  color: var(--navy);
}

/* Active exclude-box tool button. */
#sky-track-boxtool-btn.active {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* ── Dual time-range slider row ──────────────────────────────────────────── */
.sky-track-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}
.st-time-field { display: inline-flex; align-items: center; gap: 5px; }
.st-time-field > span:first-child {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-time-field input {
  width: 168px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 4px 7px;
}

/* Dot-size slider in the controls row. */
.st-size-ctl { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.st-size-ctl > span:first-child {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.st-size-ctl input[type="range"] { width: 80px; accent-color: var(--navy); }
.st-size-ctl > span:last-child {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  width: 26px;
  font-size: 12px;
  color: var(--fg);
}

/* Two overlapping range inputs form the dual-handle slider. The inputs have
   no visible track (pointer-events only on the thumbs); a track div + fill div
   underneath provide the visual. */
.st-slider {
  position: relative;
  flex: 1;
  min-width: 120px;
  height: 28px;
}
.st-slider-track,
.st-slider-fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
}
.st-slider-track { left: 0; right: 0; background: var(--border); }
.st-slider-fill  { background: var(--blue); left: 0; width: 100%; }
.st-slider input[type="range"] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  pointer-events: none;       /* only the thumbs are interactive */
  -webkit-appearance: none;
  appearance: none;
}
.st-slider input[type="range"]::-webkit-slider-thumb {
  pointer-events: auto;
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--navy);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.st-slider input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--navy);
  cursor: pointer;
}
.st-slider input[type="range"]:disabled::-webkit-slider-thumb { background: var(--border); border-color: var(--muted); cursor: not-allowed; }
.st-slider input[type="range"]::-moz-range-track { background: transparent; }

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-header { padding: 0 16px; }
  .page-title  { padding: 22px 16px 20px; }
  main         { padding: 14px 16px 22px; }
  .control-cluster { border-right: none; padding-right: 0; }
}