/* ==========================================================================
   Deep Sky Objects — Catalog Browser & FOV Calculator
   ========================================================================== */

.dso-page {
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Catalog Filters
   -------------------------------------------------------------------------- */
.dso-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  align-items: flex-end;
}

.dso-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1;
  min-width: 140px;
}

.dso-filter-group.dso-filter-search {
  flex: 2;
  min-width: 200px;
}

.dso-filter-label {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.dso-filters select,
.dso-filters input[type="text"] {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-900);
  transition: border-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.dso-filters select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: var(--space-8);
}

.dso-filters select:focus,
.dso-filters input[type="text"]:focus {
  outline: none;
  border-color: var(--color-black);
}

.dso-count-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.dso-count-row strong {
  color: var(--color-black);
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   Catalog Grid
   -------------------------------------------------------------------------- */
.dso-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .dso-grid {
    grid-template-columns: 1fr;
  }
}

.dso-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--color-gray-500);
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   DSO Card
   -------------------------------------------------------------------------- */
.dso-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.dso-card:hover {
  border-color: var(--color-gray-400);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.dso-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dso-card-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dso-card-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-gray-500);
}

.dso-card-name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
  line-height: 1.3;
}

.dso-type-badge {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: color-mix(in srgb, var(--badge-color) 12%, transparent);
  color: var(--badge-color);
}

.dso-card-desc {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.dso-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-3);
}

.dso-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: center;
}

.dso-stat-label {
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-400);
}

.dso-stat-value {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}

.dso-stat-value.mono {
  font-family: var(--font-mono);
}

.dso-diff--beginner { color: #059669; }
.dso-diff--intermediate { color: #d97706; }
.dso-diff--advanced { color: #dc2626; }

.dso-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dso-constellation {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

.dso-card-cta {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-400);
  transition: color var(--transition-fast), gap var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.dso-cta-arrow {
  transition: transform var(--transition-fast);
}

.dso-card:hover .dso-card-cta {
  color: var(--color-black);
}

.dso-card:hover .dso-cta-arrow {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   FOV Calculator
   -------------------------------------------------------------------------- */
.fov-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-8);
}

@media (max-width: 900px) {
  .fov-layout {
    grid-template-columns: 1fr;
  }
}

.fov-inputs {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.input-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.input-hint {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  font-weight: var(--font-weight-normal);
}

.fov-inputs select,
.fov-inputs input[type="number"] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-mono);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  color: var(--color-gray-900);
  transition: border-color var(--transition-fast);
  appearance: none;
  -webkit-appearance: none;
}

.fov-inputs select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: var(--space-10);
}

.fov-inputs select:focus,
.fov-inputs input[type="number"]:focus {
  outline: none;
  border-color: var(--color-black);
}

.input-presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.input-presets button {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-medium);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.input-presets button:hover {
  border-color: var(--color-gray-400);
  color: var(--color-black);
}

.input-presets button.active {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

/* FOV Results Panel */
.fov-result-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.fov-diagram-container {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-gray-200);
}

.fov-diagram-container canvas {
  display: block;
  width: 100%;
  height: 320px;
}

.fov-results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

@media (max-width: 500px) {
  .fov-results-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fov-result-item {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}

.fov-result-label {
  display: block;
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-400);
  margin-bottom: 2px;
}

.fov-result-value {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-mono);
  color: var(--color-black);
}

.fov-verdict {
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  color: var(--color-gray-600);
  text-align: center;
}

.fov-verdict--good { background: rgba(5, 150, 105, 0.08); color: #059669; }
.fov-verdict--tight { background: rgba(217, 119, 6, 0.08); color: #d97706; }
.fov-verdict--overflow { background: rgba(220, 38, 38, 0.08); color: #dc2626; }
.fov-verdict--small { background: rgba(96, 165, 250, 0.08); color: #3b82f6; }

.fov-sampling {
  font-size: var(--text-xs);
  text-align: center;
  color: var(--color-gray-500);
}

.fov-sampling--good { color: #059669; }
.fov-sampling--ok { color: #d97706; }
.fov-sampling--caution { color: #dc2626; }

/* --------------------------------------------------------------------------
   Seasonal Visibility
   -------------------------------------------------------------------------- */
.season-highlight {
  margin-bottom: var(--space-4);
}

.season-highlight-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-black);
}

.season-targets {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.season-target {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.season-target:hover {
  border-color: var(--color-gray-400);
  background: var(--color-gray-50);
}

.season-target-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-500);
  min-width: 70px;
}

.season-target-name {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
  flex: 1;
}

.season-target-mag {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

/* Season Grid */
.season-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

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

@media (max-width: 500px) {
  .season-grid {
    grid-template-columns: 1fr;
  }
}

.season-column {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.season-column-header {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-gray-100);
}

.season-column-title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  margin: 0;
}

.season-column-months {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

.season-column-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-3);
}

.season-type-count {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

.season-column-objects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.season-object {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--obj-color) 10%, transparent);
  color: var(--obj-color);
  cursor: default;
}

/* --------------------------------------------------------------------------
   Imaging Reference Table
   -------------------------------------------------------------------------- */
.imaging-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.imaging-ref-table th,
.imaging-ref-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-gray-200);
}

.imaging-ref-table th {
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
  background: var(--color-gray-100);
}

.imaging-ref-table tbody tr:last-child td {
  border-bottom: none;
}

.imaging-ref-table tbody tr:hover {
  background: var(--color-gray-50);
}

.imaging-ref-table .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Night Vision Mode
   -------------------------------------------------------------------------- */
body.night-vision .dso-filters select,
body.night-vision .dso-filters input[type="text"] {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
  color: var(--nv-text);
}

body.night-vision .dso-filters select:focus,
body.night-vision .dso-filters input[type="text"]:focus {
  border-color: var(--nv-text-dim);
}

body.night-vision .dso-card {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .dso-card:hover {
  border-color: var(--nv-border);
  box-shadow: none;
}

body.night-vision .dso-card-name {
  color: var(--nv-text);
}

body.night-vision .dso-card-id {
  color: var(--nv-text-dim);
}

body.night-vision .dso-card-desc {
  color: var(--nv-text-muted);
}

body.night-vision .dso-card-stats {
  background: var(--nv-bg-elevated);
}

body.night-vision .dso-stat-value {
  color: var(--nv-text);
}

body.night-vision .dso-stat-label {
  color: var(--nv-text-dim);
}

body.night-vision .dso-type-badge {
  background: rgba(204, 51, 51, 0.15);
  color: var(--nv-text-muted);
}

body.night-vision .dso-constellation {
  color: var(--nv-text-dim);
}

body.night-vision .dso-card-cta {
  color: var(--nv-text-dim);
}

body.night-vision .dso-card:hover .dso-card-cta {
  color: var(--nv-text);
}

body.night-vision .fov-inputs select,
body.night-vision .fov-inputs input[type="number"] {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
  color: var(--nv-text);
}

body.night-vision .fov-inputs select:focus,
body.night-vision .fov-inputs input[type="number"]:focus {
  border-color: var(--nv-text-dim);
}

body.night-vision .input-presets button {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
  color: var(--nv-text-muted);
}

body.night-vision .input-presets button.active {
  background: var(--nv-text);
  border-color: var(--nv-text);
  color: var(--nv-bg);
}

body.night-vision .fov-diagram-container {
  border-color: var(--nv-border);
}

body.night-vision .fov-result-item {
  background: var(--nv-bg-elevated);
}

body.night-vision .fov-result-value {
  color: var(--nv-text);
}

body.night-vision .fov-result-label {
  color: var(--nv-text-dim);
}

body.night-vision .fov-verdict {
  background: var(--nv-bg-elevated);
  color: var(--nv-text-muted);
}

body.night-vision .fov-sampling {
  color: var(--nv-text-dim);
}

body.night-vision .season-target {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .season-target:hover {
  background: var(--nv-bg-elevated);
}

body.night-vision .season-target-name {
  color: var(--nv-text);
}

body.night-vision .season-target-id,
body.night-vision .season-target-mag {
  color: var(--nv-text-dim);
}

body.night-vision .season-column {
  background: var(--nv-bg-card);
  border-color: var(--nv-border);
}

body.night-vision .season-column-title {
  color: var(--nv-text);
}

body.night-vision .season-column-months,
body.night-vision .season-type-count {
  color: var(--nv-text-dim);
}

body.night-vision .season-column-header {
  border-bottom-color: var(--nv-border-subtle);
}

body.night-vision .season-object {
  background: rgba(204, 51, 51, 0.12);
  color: var(--nv-text-muted);
}

body.night-vision .imaging-ref-table th {
  background: var(--nv-bg-elevated);
  color: var(--nv-text-dim);
}

body.night-vision .imaging-ref-table td {
  border-bottom-color: var(--nv-border-subtle);
  color: var(--nv-text);
}

body.night-vision .imaging-ref-table tbody tr:hover {
  background: var(--nv-bg-card);
}

body.night-vision .dso-count-row {
  color: var(--nv-text-dim);
}

body.night-vision .dso-count-row strong {
  color: var(--nv-text);
}

body.night-vision .season-highlight-label {
  color: var(--nv-text);
}

body.night-vision .dso-diff--beginner { color: var(--nv-text-muted); }
body.night-vision .dso-diff--intermediate { color: var(--nv-text-muted); }
body.night-vision .dso-diff--advanced { color: var(--nv-text-muted); }