/* =============================================================================
 * ExoAtlas — Tonight's Sky page styles
 * ============================================================================= */

/* Make the sidebar wrapper fill the body flex column (replaces .page role).
   Extend the page background to the full column so the side gutters next to
   the sidebars don't show the white site background. The hero now lives
   ABOVE this wrapper, so restore a normal top padding to give the cards and
   the side-rail ads breathing room below the hero. */
.page-with-sidebars {
  flex: 1 1 auto;
  background: #f5f6fb;
  padding: 2rem 1rem 4rem;
  align-items: stretch;
}

/* Side-rail ads: start at the TOP of the sidebar column (just below the
   hero, since the wrapper now begins under the hero). As the user scrolls
   past the hero, sticky pins the ad container so the primary 300×600
   creative sits roughly centered in the viewport. We can't use
   `translateY(-50%)` because at scroll=0 it would pull the ads upward,
   visually overlapping the hero. Instead we offset `top` by half the
   primary creative's height (≈ 300px) plus a bit of label padding so the
   ad's centerline lands near 50vh once pinned. */
.page-with-sidebars .ad-sidebar {
  align-items: flex-start;
}
.page-with-sidebars .ad-sidebar .ad-container {
  position: sticky;
  top: calc(50vh - 315px);
  max-height: none;
  margin: 0;
}

/* ── Light theme variables (matches site's white/black palette) ──────────── */
.tonight-page {
  --text:          #1f2937;
  --text-muted:    #6b7280;
  --surface:       #ffffff;
  --surface-hover: #f3f4f8;
  --border:        #e2e5ed;
  --accent:        #4a8fff;
  --bg:            #f5f6fb;

  color: var(--text);
  background: var(--bg);
}

/* ── Radial loaders ────────────────────────────────────────────────────────
 * Shown as initial placeholder content inside data containers; replaced
 * automatically when the render function calls innerHTML on the container.
 * ──────────────────────────────────────────────────────────────────────── */
@keyframes exo-spin { to { transform: rotate(360deg); } }

.exo-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 80px;
    padding: 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.exo-loader::before {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent);
    animation: exo-spin 0.9s linear infinite;
    flex-shrink: 0;
}
/* Loader row that fills a grid/list item width. */
.exo-loader-row { list-style: none; grid-column: 1 / -1; }

/* Overlay variant — sits absolutely over an SVG container until the SVG
 * is populated by JS. The :has() rules below auto-hide the overlay once
 * the target SVG has child content. */
.exo-loader-overlay {
    position: absolute;
    inset: 0;
    background: var(--surface);
    z-index: 1;
    border-radius: inherit;
}
.alt-chart-wrap:has(#altChart > *) .exo-loader-overlay,
.moon-display:has(#moonSvg > *) .exo-loader-overlay { display: none; }

/* HERO BANNER ───────────────────────────────────────────────────────────────
 * Modeled on /launches/ — full viewport-width background image with a
 * darkening overlay, centered white headline + tagline + mini-stats.
 * Lives OUTSIDE .page-with-sidebars in the DOM so it spans the entire
 * browser width and the side-rail ads start beneath it.
 * ──────────────────────────────────────────────────────────────────────── */
.tonight-hero {
  position: relative;
  width: 100%;
  /* Responsive height: ~360px on phones, ~500px on big desktops. */
  height: clamp(320px, 38vw, 520px);
  
  overflow: hidden;
  margin: 0;
  padding: 0;
  text-align: center;
  isolation: isolate; /* keep hero filter/blend contained */
  background: #000;   /* avoid white flash before image paints */
}

.tonight-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.tonight-hero .hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Favor the foreground observatories with Milky Way arching above; on
     narrower viewports we shift slightly to keep the dome visible. */
  object-position: center 85%;
  /* Subtle saturation + contrast bump to make the Milky Way pop without
     overpowering the white text overlay. */
  filter: saturate(1.1) contrast(1.05) brightness(0.95);
}

.tonight-hero .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.30) 45%,
      rgba(0, 0, 0, 0.55) 100%
    );
}

.tonight-hero .hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 900px);
  padding: 0 1rem;
  z-index: 2;
  text-align: center;
}

.tonight-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}

/* Dynamic one-liner (filled by JS once we have a verdict). */
.tonight-hero-live {
  font-size: clamp(1rem, 1.9vw, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
  margin: 0 0 1rem;
}

/* Mini-stats trio (clouds / moon / darkness). */
.tonight-hero-mini {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  margin: 0;
}
.tonight-hero-mini .thm { display: inline-flex; align-items: center; gap: 0.45rem; }
.tonight-hero-mini .thm i { color: #4a8fff; width: 1rem; text-align: center; }

/* Wrapper for the verdict + location cards below the hero. Centers the
   content using the same max-width as the rest of the page. */
.tonight-hero-cards {
  padding: clamp(1.25rem, 2.5vw, 2rem) 1rem 0;
}
.tonight-hero-inner { max-width: 1280px; margin: 0 auto; }

/* Verdict headline retained for any callers (legacy/JS reference). */
.tonight-hero-verdict {
  font-size: clamp(1.2rem, 2.8vw, 1.65rem);
  font-weight: 700;
  color: var(--verdict-accent, var(--accent));
  margin: 0 0 1rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
}

.tonight-tagline {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.location-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
.location-summary {
  display: flex; align-items: center; gap: 1rem;
}
.location-icon {
  font-size: 1.75rem;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(74, 143, 255, 0.1); border-radius: 12px;
  color: var(--accent);
}
.location-info { flex: 1; min-width: 0; }
.location-label { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.15rem; color: var(--text); }
.location-meta { font-size: 0.875rem; color: var(--text-muted); }
.location-edit-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.5rem 0.875rem; border-radius: 8px;
  font-size: 0.875rem; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.location-edit-btn:hover { background: var(--surface-hover); border-color: #bbb; }

.location-form {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.loc-search-row {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem;
}
.loc-search-row input[type="text"] {
  flex: 1 1 200px; min-width: 0;
  padding: 0.6rem 0.85rem;
  background: #fff; color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px; font-size: 1rem; font-family: inherit;
}
.loc-results {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; max-height: 240px; overflow-y: auto;
  margin-bottom: 0.75rem; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.loc-results-item {
  padding: 0.65rem 0.85rem; cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem; color: var(--text);
}
.loc-results-item:hover { background: var(--surface-hover); }
.loc-results-item:last-child { border-bottom: none; }
.loc-results-item-meta { font-size: 0.8rem; opacity: 0.65; margin-top: 0.15rem; }
.loc-results-empty { padding: 0.75rem; opacity: 0.7; font-size: 0.9rem; }

.loc-coord-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-top: 0.75rem; margin-bottom: 0.75rem; }
.loc-coord-row label { font-size: 0.85rem; opacity: 0.85; display: flex; flex-direction: column; gap: 0.3rem; }
.loc-coord-row input, .loc-coord-row select {
  padding: 0.5rem 0.7rem;
  background: #fff; color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px; font-size: 0.95rem; font-family: inherit;
}
.loc-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.loc-save-msg { font-size: 0.875rem; opacity: 0.85; }
.loc-save-msg.error { color: #ff8a8a; }
.loc-save-msg.success { color: #7fdf95; }
.loc-signin-hint {
  font-size: 0.85rem; opacity: 0.7; margin: 0.75rem 0 0;
}
.loc-signin-hint a { color: inherit; text-decoration: underline; }

.btn-primary, .btn-secondary, .btn-tertiary {
  font-family: inherit; font-size: 0.9rem;
  padding: 0.55rem 1rem; border-radius: 8px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
  display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
}
.btn-primary { background: #4a8fff; color: #fff; border: 1px solid #4a8fff; }
.btn-primary:hover { background: #3a7fee; }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--surface-hover); }
.btn-tertiary { background: transparent; color: var(--text); border: 1px solid transparent; }
.btn-tertiary:hover { background: var(--surface-hover); }

/* VERDICT — lives inside .tonight-hero-inner, above the location card. */
.verdict-section { margin: 0 0 1.25rem; padding: 0; }
.verdict-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center; gap: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Left accent bar (color set by JS via --verdict-accent) */
  border-left: 4px solid var(--verdict-accent, #4a8fff);
  border-radius: 14px; padding: 1.25rem 1.5rem;
  position: relative; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.verdict-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--verdict-accent, #4a8fff) 0%, transparent 35%);
  opacity: 0.18; pointer-events: none;
}
.verdict-score-num {
  font-size: 3rem; font-weight: 700; line-height: 1;
  color: var(--verdict-accent, #4a8fff);
}
.verdict-score-label { font-size: 0.85rem; color: var(--text-muted); }
.verdict-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--text); }
.verdict-sub { font-size: 0.95rem; color: var(--text-muted); }
.verdict-quick { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.88rem; }
.vq { color: var(--text-muted); }
.vq i { width: 1.25rem; text-align: center; color: var(--accent); opacity: 1; }

/* Moon-free dark window — astronomical darkness ∩ moon below horizon. */
.verdict-moonfree {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.verdict-moonfree i { width: 1.25rem; text-align: center; color: var(--accent); margin-right: 0.15rem; }
.verdict-moonfree .vmf-label { color: var(--text-muted); }
.verdict-moonfree strong { color: var(--text); font-weight: 600; }
.verdict-moonfree .vmf-none { color: var(--text-muted); font-style: italic; }

/* Score-factor breakdown — the "what's shaping tonight's score" panel.
   Spans the full card width below the score / headline / quick facts. */
.verdict-factors {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
  padding-top: 1rem;
}
.verdict-factors-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.85rem;
}
.verdict-factors-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}
.verdict-window { font-size: 0.85rem; color: var(--text-muted); }
.verdict-window strong { color: var(--text); font-weight: 600; }
.verdict-window i { color: var(--accent); margin-right: 0.3rem; }
.verdict-factors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 0.7rem;
}
.vfactor {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.7rem 0.65rem;
}
.vfactor-top {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.85rem; color: var(--text);
}
.vfactor-top i { width: 1rem; text-align: center; color: var(--text-muted); }
.vfactor-label { flex: 1; font-weight: 500; }
.vfactor-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.vfactor-bar {
  height: 5px; border-radius: 3px; margin: 0.45rem 0 0.4rem;
  background: rgba(107, 114, 128, 0.18); overflow: hidden;
}
.vfactor-bar span { display: block; height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.vfactor-detail { font-size: 0.78rem; color: var(--text-muted); line-height: 1.35; }
/* Rating ramp mirrors the verdict accent colors (good→bad). */
.vfactor[data-rating="good"] .vfactor-score { color: #2fa84f; }
.vfactor[data-rating="good"] .vfactor-bar span { background: #7fdf95; }
.vfactor[data-rating="fair"] .vfactor-score { color: #2f72d6; }
.vfactor[data-rating="fair"] .vfactor-bar span { background: #4a8fff; }
.vfactor[data-rating="poor"] .vfactor-score { color: #c87f1a; }
.vfactor[data-rating="poor"] .vfactor-bar span { background: #ffb84a; }
.vfactor[data-rating="bad"]  .vfactor-score { color: #e35d5d; }
.vfactor[data-rating="bad"]  .vfactor-bar span { background: #ff8a8a; }
.verdict-precip {
  margin-top: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 8px;
  background: rgba(255, 138, 138, 0.12);
  border: 1px solid rgba(227, 93, 93, 0.4);
  color: var(--text); font-size: 0.85rem; line-height: 1.4;
}
.verdict-precip i { color: #e35d5d; margin-right: 0.4rem; }

@media (max-width: 720px) {
  .verdict-card { grid-template-columns: auto 1fr; }
  .verdict-quick { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border); }
}

/* SKY CHART */
.sky-chart-section {
  max-width: 1280px;
  margin: 0 auto 1.25rem;
  padding: 0 1rem;
}
.sky-chart-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
}
.sky-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.sky-chart-head h2 {
  font-size: 1.1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text);
}
.sky-chart-head h2 i { color: var(--accent); }
.sky-chart-titlewrap {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
  min-width: 0;
}
.sky-chart-location {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
}
/* Date/time + place overlay inside the chart (top-left). The date/time is the
   prominent line; the reverse-geocoded place name sits smaller beneath it.
   A faint frosted chip keeps the dark text legible whether it sits on the light
   card corner (wide viewports) or over the dark sky circle (narrow viewports).
   The box uses a FIXED width so the frosted chip doesn't bounce as the slider
   advances the clock (weekday / AM-PM / day-of-month change text width). */
.sky-chart-info {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  width: 13rem;
  max-width: 62%;
  padding: 0.3rem 0.6rem;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  pointer-events: none;
}
.sky-chart-time {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sky-chart-place {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sky-chart-toggles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0.35rem 0rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  overflow-x: auto;
}
.sky-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.3rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.sky-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--surface);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.sky-toggle input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.sky-toggle input[type="checkbox"]:checked::after {
  content: '';
  width: 8px;
  height: 8px;
  background: #0b1220;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 20%, 86% 6%, 38% 70%);
}
.sky-toggle:hover { color: var(--text); }
.sky-toggle:has(input:checked) { color: var(--text); }

/* Limiting-magnitude picker — paired with the toggle bar above it. */
.sky-chart-controls {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.sky-density {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.4rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.sky-density-label {
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}
.sky-density-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.sky-density-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--surface);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 2rem 0.4rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  /* Let the browser size the select to its widest <option> (the "Dark-sky /
     telescopic" row); never overflow the parent on narrow screens. */
  width: auto;
  min-width: 0;
  max-width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sky-density-select:hover { border-color: var(--accent); }
.sky-density-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.sky-density-hint {
  font-size: 0.75rem;
  font-style: italic;
  opacity: 0.85;
  flex: 0 0 auto;
  margin-left: auto;
}
.sky-density-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: exo-spin 0.9s linear infinite;
  margin-left: 0.5rem;
}
.sky-density[data-loading="1"] .sky-density-spinner { display: inline-block; }
.sky-density[data-loading="1"] .sky-density-select { pointer-events: none; opacity: 0.6; }

/* ------------------------------------------------------------------------- */
/* Sky chart overlays — export controls (top-right) + watermark (bottom-right)
   Export controls use the page's light theme tokens (surface / border /
   accent) so they match the rest of the /tonight/ UI. The watermark uses
   `mix-blend-mode: screen` to drop the dark icon-tile background against the
   dark sky, leaving only the glyph + wordmark visible.                       */
/* ------------------------------------------------------------------------- */

.sky-chart-wrap .sky-export-wrap,
.sky-chart-wrap .sky-chart-watermark,
.sky-chart-wrap .sky-chart-info {
  position: absolute;
  z-index: 5;
}

/* Export controls --- top-right overlay ------------------------------------ */
.sky-export-wrap {
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.sky-export-select,
.sky-export-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.sky-export-select {
  /* Custom chevron rendered via background gradients (matches .sky-density-select) */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.85rem;
}
.sky-export-select:hover,
.sky-export-btn:hover {
  background-color: var(--surface-hover);
  border-color: var(--accent);
}
.sky-export-btn:active { transform: translateY(1px); }
.sky-export-btn svg { color: var(--accent); opacity: 0.95; }

.sky-export-select:focus-visible,
.sky-export-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Watermark --- bottom-right overlay --------------------------------------- */
.sky-chart-watermark {
  bottom: 1.2rem;
  right: 1.2rem;
  display: block;
  width: 96px;                       /* logo and wordmark share this width (textLength=64 in SVG) */
  height: 96px;                       /* viewBox 64:82 → 96 * 82/64 */
  line-height: 0;
  color: #000000;                    /* SVG text inherits via currentColor */
  opacity: 0.1;
  text-decoration: none;
  transition: opacity 0.2s;
}
.sky-chart-watermark:hover,
.sky-chart-watermark:focus-visible { opacity: 0.15; outline: none; }
.sky-watermark-svg {
  display: block;
  width: 96px;
  height: 96px;  /* viewBox 64:82 → 96 * 82/64 */
}
/* Blend the dark icon-tile into the dark sky so only the glyph shows.
   The text is rendered as a sibling element in the SVG, so we scope the
   blend to the <image> tag only — leaving the wordmark fully opaque. */
.sky-watermark-svg image {
  mix-blend-mode: screen;
}

/* Responsive: shrink overlays on smaller viewports --------------------------*/
@media (max-width: 640px) {
  .sky-export-wrap { top: 0.4rem; right: 0.4rem; gap: 0.25rem; }
  .sky-export-select,
  .sky-export-btn {
    padding: 0.28rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 7px;
  }
  .sky-export-select { padding-right: 1.4rem; }
  .sky-chart-watermark { bottom: 0.3rem; right: 0.3rem; width: 48px; height: 48px; }
  .sky-watermark-svg   { width: 48px; height: 48px; }
}

@media (max-width: 380px) {
  .sky-chart-watermark { bottom: 0.3rem; right: 0.3rem; width: 48px; height: 48px;}
  .sky-watermark-svg   { width: 48px; height: 48px; }
}

  .sky-export-btn[data-loading="1"],
  .sky-export-btn:disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

/* Deep-sky symbol key — single horizontal strip below the slider. */
.sky-dso-legend {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.6rem 1rem;
  margin: 0.85rem 0 0.6rem;
  padding: 0.55rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
  overflow-x: auto;
}
.sky-dso-legend-title {
  font-weight: 600;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  flex: 0 0 auto;
  white-space: nowrap;
}
.sky-dso-legend-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}
.sky-dso-legend-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}
.sky-dso-legend-row svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}
/* Deep-sky callout in the sky-chart card. Identical styling to `.dso-upsell`
   (amber-tinted card). Does NOT inherit .sky-chart-foot so its border is
   cleanly amber on all four sides without cascade conflicts. */
.sky-chart-foot-dso {
  margin-top: 0.6rem;
  margin-bottom: 0;
  padding: 0.7rem 0.85rem;
  background: rgba(255, 184, 74, 0.08);
  border: 1px solid rgba(255, 184, 74, 0.35);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
}
.sky-chart-foot-dso a { color: var(--accent); font-weight: 600; }

@media (max-width: 720px) {
  .sky-dso-legend {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .sky-dso-legend-row { flex-wrap: wrap; }
  .sky-density-select { width: 100%; }
}

.sky-chart-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 10px;
  padding: 0.5rem;
}
.sky-chart-wrap svg {
  display: block;
  width: 100%;
  max-width: 920px;
  height: auto;
}
.sky-tooltip {
  position: absolute;
  background: rgba(15, 23, 42, 0.96);
  color: #f1f5f9;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(125, 211, 252, 0.35);
  font-size: 0.82rem;
  line-height: 1.35;
  pointer-events: auto;
  z-index: 10;
  max-width: 240px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.sky-tooltip strong { color: #fafafa; display: block; font-size: 0.9rem; }
.sky-tooltip .tip-row { display: block; color: #cbd5e1; font-variant-numeric: tabular-nums; }
.sky-tooltip .tip-link {
  display: inline-block;
  margin-top: 0.35rem;
  color: #7dd3fc;
  text-decoration: none;
  font-weight: 600;
}
.sky-tooltip .tip-link:hover { text-decoration: underline; }
.sky-slider-wrap {
  margin-top: 1rem;
  padding: 0 0.5rem;
}
.sky-slider-wrap input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  cursor: grab;
}
.sky-slider-wrap input[type="range"]:active { cursor: grabbing; }
.sky-slider-ticks {
  position: relative;
  height: 1.5rem;
  margin-top: 0.1rem;
}
.sky-slider-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}
.sky-slider-tick::before {
  content: '';
  display: block;
  width: 1px;
  height: 4px;
  background: currentColor;
  margin: 0 auto 2px;
  opacity: 0.4;
}
.sky-slider-tops {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.15rem;
}
.sky-slider-top-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
}
.sky-slider-top-label::after {
  content: '';
  display: block;
  width: 1px;
  height: 4px;
  background: currentColor;
  margin-top: 2px;
  opacity: 0.4;
}
.sky-slider-wrap {
  margin-top: 1rem;
  padding: 0 0.5rem;
}
/* Base footnote beneath the sky-chart card. */
.sky-chart-foot {
  margin: 0.75rem 0.65rem 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* GRID */
.tonight-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr); gap: 1.25rem;
  max-width: 1280px; padding: 0 1rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 1.25rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; gap: 1rem;
}
.card-head h2 {
  font-size: 1.05rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;
  color: var(--text);
}
.card-head h2 i { color: var(--accent); }
.card-sub { font-size: 0.82rem; color: var(--text-muted); }
.card-foot { font-size: 0.76rem; color: var(--text-muted); margin: 0 0 0; padding-top: 0.6rem; }

.card-planets    { grid-column: span 12; }
.card-altitude   { grid-column: span 12; }
/* Moon + Weather share a row — 6/6 split now that they're the only two cards in it.
   Both use default align-self:stretch so they grow to the same row height. */
.card-moon       { grid-column: span 6; }
.card-weather    { grid-column: span 6; }
/* Naked-Eye Picks + Conjunctions also share a row — 6/6 split. */
.card-targets       { grid-column: span 6; }
.card-conjunctions  { grid-column: span 6; }
.card-dso        { grid-column: span 12; }
/* Exposure planner (Pro) sits directly under DSO as a full-width card. */
.tonight-grid > .card-exposure { grid-column: span 12; }
/* Imaging Conditions sits between Exposure and Session as a full-width card. */
.tonight-grid > .conditions-section { grid-column: span 12; }
/* Session Planner (Pro) spans the full grid row, same as the exposure card. */
.tonight-grid > .session-section { grid-column: span 12; }
/* Inline ad banners inside the grid span the full row and adopt a card
   aesthetic that matches the surrounding `.card` items. Hidden globally
   for premium users via `body.exoatlas-premium .ad-banner`. */
.tonight-grid > .home-inline-banner {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 0;
  padding: 0.25rem;
  width: auto;
  max-width: 100%;
}
@media (max-width: 960px) {
  .card-altitude { grid-column: span 12; }
  .card-moon, .card-weather,
  .card-targets, .card-conjunctions { grid-column: span 12; }
}
@media (max-width: 640px) {
  .card-moon { grid-column: span 12; }
}

/* Planet table */
.planet-table-wrap { overflow-x: auto; }
.planet-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.planet-table th, .planet-table td {
  padding: 0.6rem 0.5rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
.planet-table th { font-weight: 600; color: var(--text-muted); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.planet-table td { color: var(--text); }
.planet-table td:first-child { font-weight: 600; }
.body-symbol { display: inline-block; width: 1.5em; text-align: center; opacity: 0.85; }
.dim-row { opacity: 0.45; }
.below-horizon { font-style: italic; opacity: 0.6; }

/* Altitude chart band key */
.alt-band-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  padding: 0.5rem 0 0.25rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.alt-bk-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.alt-bk-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.alt-bk-day   { background: rgba(255, 160,  80, 0.75); }
.alt-bk-civil { background: rgba(253, 216, 120, 0.75); }
.alt-bk-naut  { background: rgba(100, 120, 200, 0.50); }
.alt-bk-astro { background: rgba( 50,  70, 160, 0.65); }
.alt-bk-night { background: rgba( 10,  20, 100, 0.85); }
.alt-bk-dash {
  display: inline-block;
  width: 18px;
  height: 0;
  border-top: 1.5px dashed rgba(30, 50, 160, 0.55);
  flex-shrink: 0;
}
.alt-bk-range { opacity: 0.7; }

/* Twilight boundary clock times */
.alt-twilight-times {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  padding: 0.5rem 0 0.1rem;
  font-size: 0.78rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.alt-tw-item { display: inline-flex; align-items: baseline; gap: 0.35rem; white-space: nowrap; }
.alt-tw-label { color: var(--text-muted); }
.alt-tw-dark { font-weight: 600; }
.alt-tw-none { color: var(--text-muted); font-style: italic; }

/* Altitude chart */
.alt-chart-wrap { width: 100%; position: relative; }
/* 900×240 viewBox → at 1200px rendered width, height ≈ 320px — good for full-width card */
#altChart { width: 100%; height: auto; display: block; cursor: crosshair; max-height: 380px; }
.alt-grid { stroke: rgba(0,0,0,0.07); stroke-width: 1; fill: none; }
.alt-axis { stroke: rgba(0,0,0,0.2); stroke-width: 1; }
.alt-axis-label { fill: #6b7280; font-size: 11px; font-family: 'Poppins', sans-serif; }
/* Twilight / daylight bands — Sun altitude zones */
.alt-twi-day   { fill: rgba(255, 160,  80, 0.30); }  /* Sun > 0°    — daylight         */
.alt-twi-civil { fill: rgba(253, 216, 120, 0.30); }  /* -6° to 0°   — civil twilight   */
.alt-twi-naut  { fill: rgba(100, 120, 200, 0.18); }  /* -12° to -6° — nautical twl.    */
.alt-twi-astro { fill: rgba( 50,  70, 160, 0.26); }  /* -18° to -12°— astronomical twl.*/
.alt-twi-night { fill: rgba( 10,  20, 100, 0.34); }  /* < -18°       — full night       */
/* Thin vertical mark at solar midnight (Sun's lowest point) */
.alt-solar-midnight {
  stroke: rgba(30, 50, 160, 0.30);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  fill: none;
}
.alt-curve { fill: none; stroke-width: 2.5; transition: opacity 0.15s; }
.alt-curve-hidden { opacity: 0 !important; pointer-events: none; }
/* Vertical time-cursor line — dashed, accent blue so it reads clearly */
.alt-crosshair {
  stroke: rgba(74,143,255,0.75);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  fill: none;
  pointer-events: none;
  visibility: hidden;
}
.alt-crosshair.is-visible { visibility: visible; }
/* Browser-enforced hide: no matter what JS state is set, if the cursor
   is not over the chart container the tooltip is invisible. */
.alt-chart-wrap:not(:hover) #altTooltip {
  visibility: hidden;
}
.alt-tooltip {
  position: absolute;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.8rem;
  white-space: nowrap;
  z-index: 10;
  color: var(--text);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.alt-tip-time { font-weight: 600; color: var(--accent); margin-bottom: 0.15rem; }
.alt-tip-body { display: flex; align-items: center; gap: 0.4rem; color: var(--text); }
.alt-tip-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8rem; }
.legend-btn { display: flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.5rem;
  border: 1px solid var(--border); border-radius: 4px; background: var(--surface-hover);
  color: var(--text); font: inherit; font-size: 0.8rem; cursor: pointer;
  transition: background 0.15s, opacity 0.15s, border-color 0.15s; }
.legend-btn:hover { background: #e8eaf0; }
.legend-btn.is-off { opacity: 0.4; background: transparent; }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; }

/* Moon */
.moon-display { display: flex; gap: 1rem; align-items: center; position: relative; }
#moonSvg { width: 80px; height: 80px; flex-shrink: 0; }
.moon-stats { margin: 0; display: grid; gap: 0.5rem; flex: 1; }
.moon-stats div { display: flex; justify-content: space-between; font-size: 0.9rem; gap: 1rem; }
.moon-stats dt { color: var(--text-muted); }
.moon-stats dd { margin: 0; font-weight: 500; color: var(--text); }

/* Weather */
.weather-now { font-size: 0.95rem; }
.weather-summary { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.weather-temp { font-size: 2rem; font-weight: 600; }
.weather-icon { font-size: 1.75rem; opacity: 0.85; }
.weather-meta { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
.weather-hourly {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 0.25rem; margin-top: 0.5rem; font-size: 0.72rem;
}
.weather-hour {
  text-align: center; padding: 0.4rem 0.15rem;
  background: var(--surface-hover); border-radius: 6px;
}
.weather-hour-label { opacity: 0.7; margin-bottom: 0.15rem; }
.weather-hour-cloud {
  height: 4px; background: linear-gradient(90deg, #4a8fff 0%, #cccccc 100%);
  border-radius: 2px; margin: 0.25rem 0; opacity: var(--cloud-opacity, 0.5);
}
.weather-hour-temp { font-weight: 500; }
.weather-precip {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 0.55rem; padding: 0.45rem 0.6rem;
  background: var(--surface-hover); border-radius: 6px;
  font-size: 0.85rem; color: var(--text);
}
.weather-precip-icon { opacity: 0.75; }
.weather-precip-text { color: var(--text-muted); }
.weather-error { color: #ff8a8a; font-size: 0.85rem; opacity: 0.85; }

/* Conjunctions */
.conj-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.conj-section-head {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
  margin-top: 0.35rem;
}
.conj-section-head:first-child { margin-top: 0; }
.conj-group { display: grid; gap: 0.4rem; }
.conj-primary { display: flex; align-items: center; gap: 0.45rem; }
.conj-symbol { font-size: 1.15rem; line-height: 1; min-width: 1.1em; text-align: center; }
.conj-primary-name { font-weight: 700; color: var(--text); }
.conj-companions { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.conj-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0.75rem; align-items: center;
  padding: 0.7rem 0.85rem;
  background: var(--surface); border-radius: 8px;
  border: 1px solid var(--border);
  border-left: 3px solid #ffb84a;
}
.conj-item.is-muted { opacity: 0.6; border-left-color: var(--border); }
.conj-pair { font-weight: 600; color: var(--text); }
.conj-when { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.15rem; }
.conj-muted { font-style: italic; }
.conj-meta { display: flex; align-items: center; gap: 0.5rem; }
.conj-sep { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 0.9rem; }
.conj-tier {
  font-size: 0.7rem; font-weight: 700; padding: 0.12rem 0.45rem;
  border-radius: 999px; white-space: nowrap;
}
.conj-tier.spectacular { background: rgba(168, 85, 247, 0.15); color: #9333ea; }
.conj-tier.close       { background: rgba(22, 163, 74, 0.14);  color: #15803d; }
.conj-tier.notable     { background: rgba(217, 119, 6, 0.14);  color: #b45309; }
.conj-tier.wide        { background: rgba(100, 116, 139, 0.14); color: #475569; }
.conj-empty { color: var(--text-muted); font-style: italic; padding: 1rem 0.5rem; text-align: center; }

/* Targets */
.target-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.target-item {
  display: flex; gap: 0.75rem; align-items: center;
  padding: 0.65rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.15s;
}
.target-item:hover { background: var(--surface-hover); }
.target-symbol { font-size: 1.5rem; opacity: 0.85; min-width: 1.5em; text-align: center; }
.target-name { font-weight: 600; color: var(--text); }
.target-meta { font-size: 0.78rem; color: var(--text-muted); }
.target-rating { margin-left: auto; font-weight: 600; font-size: 0.85rem; padding: 0.15rem 0.5rem; border-radius: 4px; }
.target-rating.good { background: rgba(22, 163, 74, 0.12); color: #15803d; }
.target-rating.ok   { background: rgba(217, 119, 6, 0.12); color: #b45309; }
.target-rating.poor { background: rgba(220, 38, 38, 0.1); color: #b91c1c; }

/* =============================================================================
 * DEEP-SKY TARGETS (dso.js)
 * ============================================================================= */
.card-dso .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }

.dso-filters {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.dso-filter-chip,
.dso-sort-btn {
  background: var(--surface); color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dso-filter-chip:hover,
.dso-sort-btn:hover { background: var(--surface-hover); color: var(--text); }
.dso-filter-chip.is-active,
.dso-sort-btn.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.dso-sort-group { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto; }
.dso-sort-label { font-size: 0.78rem; color: var(--text-muted); margin-right: 0.1rem; }

/* Minimum-altitude floor control. */
.dso-minalt-group { display: inline-flex; align-items: center; gap: 0.35rem; }
.dso-minalt-label { font-size: 0.78rem; color: var(--text-muted); }
.dso-minalt-input {
  width: 3.4rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem; font-weight: 500;
  text-align: right;
}
.dso-minalt-input:focus { outline: none; border-color: var(--accent); }
.dso-minalt-unit { font-size: 0.78rem; color: var(--text-muted); margin-left: -0.2rem; }

.dso-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dso-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: background 0.15s;
}
.dso-item:hover { background: var(--surface-hover); }

.dso-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1em; height: 2.1em;
  padding: 0 0.4em;
  border-radius: 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  color: #fff;
  background: var(--accent);
}
/* Per-type chip colors. Kept hardcoded since these are semantic tags
   distinct from the site accent palette. */
.dso-chip-g   { background: #5b8def; }  /* galaxies        — cool blue */
.dso-chip-gc  { background: #d97706; }  /* globulars       — amber */
.dso-chip-oc  { background: #16a34a; }  /* open clusters   — green */
.dso-chip-pn  { background: #14b8a6; }  /* planetaries     — teal */
.dso-chip-en  { background: #ef4444; }  /* emission        — red */
.dso-chip-rn  { background: #a855f7; }  /* reflection      — purple */
.dso-chip-snr { background: #f59e0b; }  /* SNR             — orange */
.dso-chip-dn  { background: #475569; }  /* dark nebula     — slate */
.dso-chip-ast { background: #64748b; }  /* asterism        — gray */
.dso-chip-other { background: #6b7280; }

.dso-body { min-width: 0; }
.dso-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; }
.dso-title  { font-weight: 600; color: var(--text); }
.dso-second { color: var(--text-muted); font-size: 0.85rem; }
.dso-meta { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.15rem; }
.dso-desc { font-size: 0.83rem; color: var(--text); margin-top: 0.2rem; line-height: 1.35; }

.dso-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.dso-score {
  font-weight: 700; font-size: 0.85rem;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  background: rgba(34, 197, 94, 0.12); color: #15803d;
  min-width: 2.5em; text-align: center;
}
.dso-vis {
  font-size: 0.72rem; font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
}
.dso-vis-easy     { background: rgba(34, 197, 94, 0.14); color: #15803d; }
.dso-vis-marginal { background: rgba(217, 119, 6, 0.14); color: #b45309; }
.dso-vis-imaging  { background: rgba(99, 102, 241, 0.14); color: #4338ca; }

.dso-copy {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dso-copy:hover { background: var(--surface-hover); color: var(--text); border-color: var(--accent); }

.dso-save {
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dso-save:hover { background: var(--surface-hover); color: var(--accent); border-color: var(--accent); }
.dso-save.is-saved { color: var(--accent); border-color: var(--accent); }

.dso-show-all {
  margin-top: 0.6rem;
  width: 100%;
  background: transparent; color: var(--accent);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 0.5rem;
  font-size: 0.85rem; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.dso-show-all:hover { background: var(--surface-hover); border-color: var(--accent); }

.dso-upsell {
  margin-top: 0.6rem; padding: 0.7rem 0.85rem;
  background: rgba(255, 184, 74, 0.08);
  border: 1px solid rgba(255, 184, 74, 0.35);
  border-radius: 8px;
  font-size: 0.85rem; color: var(--text);
}
.dso-upsell p { margin: 0; }
.dso-upsell a { color: var(--accent); font-weight: 600; }

.dso-loading, .dso-empty {
  list-style: none;
  padding: 0.85rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.dso-toast {
  position: fixed; left: 50%; bottom: 1.5rem;
  transform: translateX(-50%) translateY(20px);
  background: var(--text); color: var(--surface);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 9000;
}
.dso-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 480px) {
  .dso-item { grid-template-columns: auto 1fr; }
  .dso-right { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .dso-sort-group { margin-left: 0; width: 100%; justify-content: flex-start; margin-top: 0.3rem; }
}

/* PRO */
.pro-section { padding: 1rem; max-width: 1280px; }
.pro-section-inner { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 1.5rem; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.pro-section-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.pro-section-head h2 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 0.5rem; }
.pro-section-head h2 i { color: #ffb84a; }
.pro-badge {
  background: linear-gradient(90deg, #ffb84a, #ff8a4a); color: #1a1100;
  padding: 0.15rem 0.6rem; border-radius: 4px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
}
.pro-upsell-content h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.pro-upsell-content p { opacity: 0.85; line-height: 1.55; }
.pro-feature-list { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 0.4rem; }
.pro-feature-list i { color: #7fdf95; margin-right: 0.4rem; }
.forecast-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.forecast-strip { display: grid; grid-template-columns: repeat(14, 1fr); gap: 0.25rem; }
@media (max-width: 720px) { .forecast-strip { grid-template-columns: repeat(7, 1fr); } }
.forecast-night {
  background: var(--surface-hover); border-radius: 6px;
  padding: 0.5rem 0.25rem; text-align: center; cursor: default;
  border-top: 4px solid var(--night-color, #4a8fff);
  font-size: 0.72rem;
}
.forecast-night-day { font-weight: 600; }
.forecast-night-score { font-size: 1.25rem; font-weight: 600; margin: 0.25rem 0; line-height: 1; }
.forecast-night-meta { opacity: 0.7; font-size: 0.66rem; }

/* EXPOSURE PLANNER (Pro) */
.exposure-planner { display: grid; gap: 1rem; }
.exposure-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
}
.exposure-toolbar > .exposure-select { flex: 1 1 9rem; min-width: 0; }
.exposure-toolbar > .btn-secondary { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 720px) {
  .exposure-toolbar > .exposure-select { flex-basis: calc(50% - 0.375rem); }
  .exposure-toolbar > .btn-secondary { margin-left: 0; flex-basis: 100%; }
}
.exposure-select { display: grid; gap: 0.3rem; font-size: 0.8rem; }
.exposure-select span { opacity: 0.7; }
.exposure-select select {
  background: var(--surface-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.6rem; font: inherit;
}
/* Goal inputs (Target SNR / Preferred FWHM) — match the gear selects. */
.exposure-field { display: grid; gap: 0.3rem; font-size: 0.8rem; }
.exposure-field > span { opacity: 0.7; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.exposure-field input {
  width: 100%; box-sizing: border-box; font: inherit;
  background: var(--surface-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.6rem;
}
.exposure-field input:focus { outline: none; border-color: var(--accent); }
.exposure-field-input { position: relative; display: block; }
.exposure-field-input .exposure-field-unit {
  position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%);
  opacity: 0.55; pointer-events: none; font-size: 0.9em;
}
.exposure-field-input input { padding-right: 1.5rem; }
.exposure-info { opacity: 0.5; cursor: help; font-size: 0.85em; }
.exposure-info:hover { opacity: 0.95; color: var(--accent); }
/* Target chip + goal inputs share a row; goals wrap below on narrow screens. */
.exposure-target-row {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end;
}
.exposure-target-row > .exposure-target { flex: 1 1 16rem; min-width: 0; }
.exposure-goals { display: flex; gap: 0.75rem; flex: 0 0 auto; align-items: flex-end; }
.exposure-goals .exposure-field { flex: 0 1 9.5rem; min-width: 8.5rem; }
@media (max-width: 560px) {
  .exposure-goals { flex: 1 1 100%; }
  .exposure-goals .exposure-field { flex: 1 1 0; min-width: 0; }
}
.exposure-target { min-height: 1rem; }
.exposure-target-empty {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 1rem; border: 1px dashed var(--border);
  border-radius: 8px; font-size: 0.85rem; opacity: 0.8;
}
.exposure-target-empty i { color: var(--accent); }
.exposure-target-card {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 0.9rem; background: var(--surface-hover);
  border: 1px solid var(--border); border-radius: 8px;
  font-size: 0.9rem;
}
.exposure-target-card .muted { opacity: 0.7; font-size: 0.82rem; }
.exposure-target-tag {
  background: var(--accent); color: #fff;
  padding: 0.1rem 0.45rem; border-radius: 4px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
}
.exposure-target-clear {
  margin-left: auto; background: transparent; border: none;
  color: var(--text); opacity: 0.55; cursor: pointer;
  padding: 0.2rem 0.4rem; border-radius: 4px;
}
.exposure-target-clear:hover { opacity: 1; background: var(--surface); }
.exposure-results {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
}
@media (max-width: 900px) { .exposure-results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .exposure-results { grid-template-columns: 1fr; } }
.exposure-card {
  background: var(--surface-hover); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.9rem;
  display: grid; gap: 0.3rem; align-content: start;
}
.exposure-card-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6; }
.exposure-card-value { font-size: 1.4rem; font-weight: 600; line-height: 1.1; color: var(--text); }
.exposure-card-sub { font-size: 0.78rem; opacity: 0.75; line-height: 1.4; }
.exposure-empty {
  padding: 1rem; border: 1px dashed var(--border); border-radius: 8px;
  opacity: 0.75; text-align: center;
}
.exposure-footnote { font-size: 0.75rem; opacity: 0.65; margin: 0; }
.exposure-footnote a { color: inherit; }

/* IMAGING WINDOWS (FWHM / SNR-90%) — Task 6 ------------------------------- */
.exposure-windows {
  margin-top: 0.9rem; padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  display: grid; gap: 0.6rem;
}
.exposure-window-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.exposure-window-title {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; opacity: 0.7;
}
.exposure-window-pick {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; opacity: 0.85;
}
.exposure-window-pick select {
  background: var(--surface-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.25rem 0.5rem; font-size: 0.78rem;
}
.exposure-window-sub { font-size: 0.78rem; opacity: 0.7; margin: -0.2rem 0 0; line-height: 1.4; }
.exposure-window-list { display: grid; gap: 0.4rem; }
.exposure-window-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  width: 100%; text-align: left;
  background: var(--surface-hover); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.55rem 0.75rem;
  color: var(--text); cursor: pointer;
  font: inherit; transition: border-color 0.15s ease, background 0.15s ease;
}
.exposure-window-row:hover { border-color: var(--accent); }
.exposure-window-row.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-hover));
}
.exposure-window-main { display: grid; gap: 0.2rem; min-width: 0; }
.exposure-window-name {
  font-weight: 600; font-size: 0.85rem;
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.exposure-window-floor {
  font-size: 0.72rem; font-weight: 600;
  padding: 0.1rem 0.45rem; border-radius: 4px;
  background: rgba(99, 102, 241, 0.14); color: #4338ca; white-space: nowrap;
}
.exposure-window-rec {
  font-size: 0.68rem; font-weight: 600; white-space: nowrap;
  padding: 0.1rem 0.45rem; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
}
.exposure-window-rec i { margin-right: 0.2rem; }
.exposure-window-span { font-size: 0.76rem; }
.exposure-window-goal {
  display: grid; gap: 0.1rem; text-align: right; flex: 0 0 auto; justify-items: end;
}
.exposure-window-goal-val { font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
.exposure-window-goal-sub { font-size: 0.72rem; white-space: nowrap; }
.exposure-window-callout {
  margin: 0; font-size: 0.8rem; line-height: 1.4;
  padding: 0.5rem 0.7rem; border-radius: 8px;
  background: rgba(99, 102, 241, 0.12); color: #4338ca;
  border: 1px solid rgba(99, 102, 241, 0.28);
}
.exposure-window-callout i { margin-right: 0.35rem; }
.exposure-window-foot { font-size: 0.74rem; opacity: 0.7; margin: 0; line-height: 1.45; }
.exposure-window-foot i { margin-right: 0.3rem; }
@media (max-width: 480px) {
  .exposure-window-span { white-space: normal; }
  .exposure-window-goal-val { font-size: 0.88rem; }
}

/* DSO row hover/selected affordance (clickable target picker) */
.dso-item { cursor: pointer; }
.dso-item.is-selected { outline: 2px solid var(--accent); outline-offset: -2px; }

/* GEAR MODAL */
.gear-modal, .gear-picker, .gear-lens-dialog {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 0; max-width: min(640px, 92vw); width: 100%;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
.gear-modal::backdrop, .gear-picker::backdrop, .gear-lens-dialog::backdrop {
  background: rgba(0,0,0,0.55);
}
.gear-modal-form, .gear-picker-form, .gear-lens-form { padding: 1rem 1.25rem 1.25rem; }
.gear-modal-head, .gear-picker-form header, .gear-lens-form header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.gear-modal-head h3, .gear-picker-form h3, .gear-lens-form h3 { margin: 0; font-size: 1.05rem; }
.gear-modal-close {
  background: transparent; border: none; color: var(--text);
  opacity: 0.6; cursor: pointer; font-size: 1rem; padding: 0.25rem 0.5rem;
}
.gear-modal-close:hover { opacity: 1; }
.gear-section { margin-bottom: 1.25rem; }
.gear-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.gear-section-head h4 { margin: 0; font-size: 0.9rem; }
.gear-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.gear-item {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-hover); border: 1px solid var(--border);
  border-radius: 8px; font-size: 0.85rem;
}
.gear-default { display: flex; align-items: center; gap: 0.25rem; font-size: 0.7rem; opacity: 0.7; }
.gear-default input { margin: 0; }
.gear-name { font-weight: 500; }
.gear-meta { font-size: 0.75rem; opacity: 0.7; }
.gear-empty { padding: 0.6rem; opacity: 0.65; font-size: 0.85rem; }
.gear-remove, .gear-remove-lens {
  background: transparent; border: none; color: var(--text);
  opacity: 0.55; cursor: pointer; padding: 0.2rem 0.4rem; border-radius: 4px;
}
.gear-remove:hover, .gear-remove-lens:hover { opacity: 1; color: #ff6464; background: var(--surface); }

/* Camera picker */
.gear-picker-search {
  width: 100%; padding: 0.55rem 0.75rem;
  background: var(--surface-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  margin-bottom: 0.75rem; font: inherit;
}
.gear-picker-list { max-height: min(60vh, 520px); overflow-y: auto; display: grid; gap: 0.75rem; }
.gear-picker-group h4 {
  margin: 0 0 0.4rem; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.05em; opacity: 0.65;
}
.gear-picker-item {
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; text-align: left; gap: 0.15rem;
  background: var(--surface-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 0.55rem 0.8rem; cursor: pointer; margin-bottom: 0.3rem;
  font: inherit;
}
.gear-picker-item:hover { background: var(--surface); border-color: var(--accent); }
.gear-picker-name { font-weight: 500; font-size: 0.9rem; }
.gear-picker-meta { font-size: 0.75rem; opacity: 0.7; }

/* Lens-add form */
.gear-lens-form label { display: grid; gap: 0.3rem; font-size: 0.82rem; margin-bottom: 0.75rem; }
.gear-lens-form input {
  background: var(--surface-hover); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 0.5rem 0.65rem; font: inherit;
}
.gear-lens-form footer {
  display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.5rem;
}

/* METHODOLOGY */
.methodology { max-width: 1280px; margin: 0 auto 3rem; padding: 0 1rem; }
.methodology details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.75rem 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.methodology summary { cursor: pointer; font-weight: 500; color: var(--text); }
.methodology summary i { margin-right: 0.4rem; color: var(--accent); }
.methodology-body { padding-top: 0.75rem; color: var(--text-muted); line-height: 1.55; font-size: 0.9rem; }
.methodology-body ul { padding-left: 1.25rem; }
.methodology-body a { color: #4a8fff; }

/* BORTLE AUTO-DETECT HINT */
.loc-bortle-auto {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  opacity: 0.8;
  line-height: 1.3;
}
.loc-bortle-auto i { margin-right: 0.3rem; opacity: 0.85; }
.loc-bortle-auto strong { font-weight: 600; }
.loc-bortle-auto.overridden { color: #ffd27a; opacity: 0.95; }
.loc-bortle-auto.error { color: #ff8a8a; }
.btn-link {
  background: none; border: none; color: #4a8fff; cursor: pointer;
  font: inherit; font-size: 0.78rem; padding: 0.15rem 0;
  margin-top: 0.2rem; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.btn-link:hover { text-decoration: underline; }

/* LIGHT POLLUTION MAP */
.lp-section {
  max-width: 1280px;
  margin: 0 auto 2.5rem;
  padding: 0 1rem;
}
/* When lp-section lives inside the location card, remove the standalone outer
   spacing and let the card's own padding contain it flush. */
.location-card .lp-section {
  max-width: none;
  margin: 1rem 0 0;
  padding: 0;
}
.lp-section-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.25rem 1.25rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}
.lp-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.lp-head h2 {
  margin: 0; font-size: 1.15rem; font-weight: 600;
  display: flex; align-items: center; gap: 0.45rem;
}
.lp-head h2 i { color: var(--accent); }
.lp-head .card-sub { font-size: 0.8rem; opacity: 0.7; }

.lp-legend {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; opacity: 0.75; margin: 0.25rem 0 0.6rem;
}
.lp-legend-bar {
  flex: 1; height: 8px; border-radius: 4px;
  /* DJ Lorenz palette progression: black → gray → blue → green → yellow →
     orange → red → magenta → white. Matches what's painted on the map. */
  background: linear-gradient(90deg,
    #000000 0%, #373750 8%, #0000dc 18%, #006ec8 28%,
    #00c800 40%, #ffe600 55%, #ffa500 68%, #ff0000 80%,
    #ff3cdc 90%, #ffffff 100%);
  border: 1px solid var(--border);
}
.lp-legend-label { white-space: nowrap; }

.lp-map {
  width: 100%;
  height: clamp(260px, 45vh, 480px);
  border-radius: 10px;
  overflow: hidden;
  background: #e7eaf2;
  border: 1px solid var(--border);
}

/* Light theme: show OSM at natural brightness */
.lp-basemap { filter: none; }
.lp-lights   { filter: contrast(1.05) saturate(1.1) brightness(1.05); }

.leaflet-container {
  background: #e7eaf2;
  font-family: inherit;
}
.leaflet-control-attribution {
  background: rgba(255,255,255,0.9) !important;
  color: #444 !important;
  font-size: 0.7rem !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-bar a {
  background: #fff !important;
  color: #222 !important;
  border-bottom-color: var(--border) !important;
}
.leaflet-bar a:hover { background: var(--surface-hover) !important; }

/* =============================================================================
 * PRO UPSELL HINT (sky-density)
 * Shown temporarily under the limiting-magnitude dropdown when a free user
 * tries to select a Pro-only option.
 * ============================================================================= */
.sky-density-hint-upsell {
  font-style: normal;
  font-weight: 500;
  color: #b45309;
  opacity: 1;
}
.sky-density-hint-upsell a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}

/* =============================================================================
 * MOBILE AD SLOTS — Medium Rectangle (300x250) + Large Mobile Banner (320x100)
 * Mobile-only inline ad cards inside the tonight grid. Both span the full
 * row and adopt the surrounding card aesthetic. Hidden on tablet+ where the
 * 728/970 desktop banners already cover the same intent.
 * ============================================================================= */
.tonight-grid > .ad-mobile {
  display: none; /* hidden by default, revealed on mobile via @media below */
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 0;
  padding: 0.5rem 0.25rem;
  width: auto;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.tonight-grid > .ad-mobile .ad-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  font-weight: 500;
}
.tonight-grid > .ad-mobile .ad-unit {
  display: flex;
  justify-content: center;
}
.ad-unit.ad-300-250 { min-height: 250px; }
.ad-unit.ad-320-100 { min-height: 100px; }
/* Hide mobile units by default on desktop; revealed by @media (max-width: 720px) below. */
.ad-banner .ad-320-100 { display: none; }

/* =============================================================================
 * MOBILE RESPONSIVE PASS
 * Single consolidated breakpoint block covering tablet (≤720px) and phone
 * (≤480px) layouts. Existing per-component @media rules earlier in the file
 * stay in place; this block fills the remaining gaps.
 * ============================================================================= */
@media (max-width: 720px) {
  /* Hero — shorter banner + tighter type so it fits a single phone screen. */
  .tonight-hero { height: clamp(260px, 55vw, 360px); padding: 0; }
  .tonight-hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); margin-bottom: 0.4rem; }
  .tonight-tagline { margin-bottom: 1rem; }
  .tonight-hero-mini { gap: 0.25rem 1rem; font-size: 0.85rem; margin: 0; }
  .tonight-hero-live { font-size: 0.95rem; margin: 0 0 0.6rem; }
  .tonight-hero-verdict { font-size: 1.15rem; }
  /* Re-frame to keep the observatories in view when the image is cropped
     to a much narrower aspect. */
  .tonight-hero .hero-bg img { object-position: 60% 70%; }
  .tonight-hero-cards { padding: 1rem 0.75rem 0; }

  /* Location card — reduce padding and stack the summary. */
  .location-card { padding: 0.85rem 0.9rem; }
  .location-summary { gap: 0.75rem; }
  .location-icon { font-size: 1.4rem; width: 40px; height: 40px; }
  .location-edit-btn { padding: 0.4rem 0.6rem; font-size: 0.8rem; }

  /* Verdict card — already has a breakpoint; tighten padding here too. */
  .verdict-card { padding: 1rem 1rem; gap: 1rem; }
  .verdict-score-num { font-size: 2.4rem; }
  .verdict-title { font-size: 1.15rem; }

  /* Sky chart — let the toggle bar wrap so 8 chips fit without scroll. */
  .sky-chart-section { padding: 0 0.75rem; }
  .sky-chart-card { padding: 0.85rem 0.85rem; }
  .sky-chart-head { gap: 0.5rem; margin-bottom: 0.5rem; }
  .sky-chart-head h2 { font-size: 1rem; }
  /* Overlay — shrink so the date/time clears the export controls. */
  .sky-chart-info { top: 0.5rem; left: 0.5rem; width: 7.5rem; max-width: 43%; padding: 0.22rem 0.4rem; }
  .sky-chart-time { font-size: 0.68rem; }
  .sky-chart-place { font-size: 0.58rem; }
  .sky-chart-toggles {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.25rem 0.35rem;

    overflow-x: visible;
  }
  .sky-toggle { font-size: 0.74rem; padding: 0.2rem 0.4rem; }
  .sky-density { padding: 0.5rem 0.6rem; gap: 0.4rem 0.6rem; }
  .sky-density-hint { margin-left: 0; flex-basis: 100%; }
  .sky-density-select { width: 100%; min-width: 0; }
  .sky-chart-wrap { padding: 0.25rem; }

  /* Grid — drop side padding and gaps slightly. */
  .tonight-grid { padding: 0 0.75rem; gap: 0.85rem; }
  .card { padding: 0.95rem; }
  .card-head { gap: 0.5rem; margin-bottom: 0.75rem; }
  .card-head h2 { font-size: 0.98rem; }

  /* Weather hourly strip — 8 cols are too narrow on a phone. */
  .weather-hourly { grid-template-columns: repeat(4, 1fr); }
  .weather-summary { gap: 0.6rem; }
  .weather-temp { font-size: 1.6rem; }

  /* Moon — keep avatar smaller and stats on its right. */
  #moonSvg { width: 64px; height: 64px; }

  /* Planet table — already overflow-x: auto; reduce inline padding. */
  .planet-table th, .planet-table td { padding: 0.45rem 0.4rem; font-size: 0.85rem; }

  /* Targets/DSO — reduce internal padding. */
  .target-item, .dso-item { padding: 0.55rem 0.7rem; }

  /* Pro section — exposure planner card. */
  .pro-section { padding: 0 0.75rem; margin-bottom: 1.5rem; }
  .pro-section-inner { padding: 1rem; }
  .pro-section-head h2 { font-size: 1.05rem; }

  /* Light pollution map */
  .lp-section { padding: 0 0.75rem; }
  .lp-section-inner { padding: 0.85rem 0.9rem; }
  .lp-map { height: clamp(220px, 50vh, 360px); }

  /* Methodology */
  .methodology { padding: 0 0.75rem; }

  /* Reveal the mobile 320x100 ad inside .ad-banner now that we hid the
     desktop 728/970 units site-wide. Override the global ads.css rule
     that hides .ad-banner entirely below 728px so the mobile slot can
     render in its place. */
  .tonight-grid > .ad-banner.home-inline-banner { display: flex !important; padding: 0.4rem; }
  .tonight-grid > .ad-banner.home-inline-banner .ad-728,
  .tonight-grid > .ad-banner.home-inline-banner .ad-970 { display: none; }
  .tonight-grid > .ad-banner.home-inline-banner .ad-320-100 { display: flex; }

  /* Reveal medium-rectangle ad cards. */
  .tonight-grid > .ad-mobile.ad-mobile-300-250 { display: flex; }
}

@media (max-width: 480px) {
  /* Verdict — collapse to a single column on tiny phones. */
  .verdict-card { grid-template-columns: 1fr; text-align: center; }
  .verdict-card .verdict-score { margin: 0 auto; }
  .verdict-quick { align-items: flex-start; }

  /* Hero mini stats — keep on one row inside the banner; shrink instead. */
  .tonight-hero-mini { gap: 0.2rem 0.7rem; font-size: 0.8rem; }

  /* Toggle pills — even smaller. */
  .sky-toggle { font-size: 0.7rem; padding: 0.15rem 0.35rem; }
  .sky-toggle input[type="checkbox"] { width: 12px; height: 12px; }

  /* Card heads — let card-sub drop below the title. */
  .card-head { flex-wrap: wrap; }
  .card-sub { width: 100%; }

  /* DSO filter row — keep sort group inline with chips. */
  .dso-sort-group { width: 100%; margin: 0.3rem 0 0; justify-content: flex-start; }
}

/* =============================================================================
 * Astrophotography Session Planner (Pro)
 *   Light theme matching the rest of the Tonight's Sky cards.
 * ============================================================================= */
.session-section { margin-top: 0; }

.session-planner { display: flex; flex-direction: column; gap: 0.85rem; }

.session-toolbar {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
  align-items: center; justify-content: space-between;
}
.session-summary {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  font-size: 0.88rem; color: var(--text-muted);
}
.session-summary strong { color: var(--text); font-weight: 600; }
.session-summary i { color: var(--accent); margin-right: 0.25rem; }
.session-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Warning bar — red for visibility, follows site light theme. */
.session-warnings {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 8px; padding: 0.65rem 0.9rem;
  color: #991b1b; font-size: 0.85rem;
  line-height: 1.45;
}
.session-warnings ul { margin: 0; padding-left: 0; list-style: none; }
.session-warnings li { margin: 0.15rem 0; }
.session-warnings i { color: #dc2626; margin-right: 0.4rem; }

/* Timeline wrap: two-column grid — left gutter (camera labels) + main timeline. */
.session-timeline-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}
.session-timeline-grid {
  display: grid;
  grid-template-columns: 130px 1fr;
  min-height: 140px;
}
.session-lane-gutter {
  position: relative;
  background: var(--surface-hover);
  border-right: 1px solid var(--border);
}
.session-gutter-row {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center;
  padding: 0 0.6rem;
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.session-gutter-row:first-of-type { border-top: 0; }
.session-gutter-row > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.session-gutter-row--overflow {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
  font-style: italic;
}

.session-timeline {
  position: relative;
  min-height: 140px;
  user-select: none;
  background: var(--surface);
}

.session-axis {
  position: absolute; left: 0; right: 0; height: 1px;
  background: var(--border);
}
.session-tick {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--border);
  pointer-events: none;
}
.session-tick > span {
  position: absolute; top: 6px; left: 4px;
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap;
  background: var(--surface);
  padding: 0 3px;
}

/* Soft cool-gray diagonal stripes for the twilight bands (sunset → astro-dark
   and astro-dawn → sunrise). Subtle on white so the timeline reads as light. */
.session-twilight {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(74, 143, 255, 0.04) 0 8px,
    rgba(74, 143, 255, 0.10) 8px 16px
  );
  pointer-events: none;
}

/* Event blocks — use the site accent and a cycling palette of cool colors
   that read well on the light surface. */
.session-event {
  position: absolute;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  padding: 0.4rem 0.55rem;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  min-width: 8px;
  transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.session-event:nth-child(7n+1) { background: linear-gradient(180deg,#4a8fff,#2563eb); }
.session-event:nth-child(7n+2) { background: linear-gradient(180deg,#8b5cf6,#7c3aed); }
.session-event:nth-child(7n+3) { background: linear-gradient(180deg,#0ea5e9,#0284c7); }
.session-event:nth-child(7n+4) { background: linear-gradient(180deg,#10b981,#059669); }
.session-event:nth-child(7n+5) { background: linear-gradient(180deg,#f59e0b,#d97706); }
.session-event:nth-child(7n+6) { background: linear-gradient(180deg,#ec4899,#db2777); }
.session-event:nth-child(7n+7) { background: linear-gradient(180deg,#06b6d4,#0891b2); }
.session-event--overflow {
  outline: 2px dashed #dc2626;
  outline-offset: -2px;
}
.session-event:active { cursor: grabbing; transform: translateY(1px); }
.session-event:hover { box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25); }
.session-event:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.session-event-body { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; pointer-events: none; }
.session-event-body strong { font-size: 12px; }
.session-event-sub  { font-size: 10px; opacity: 0.92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-event-time { font-size: 10px; opacity: 0.82; }
.session-event-resize {
  position: absolute; top: 0; bottom: 0; width: 6px;
  cursor: ew-resize; background: rgba(255,255,255,0.18);
}
.session-event-resize-l { left: 0; border-radius: 8px 0 0 8px; }
.session-event-resize-r { right: 0; border-radius: 0 8px 8px 0; }

.session-visband {
  position: absolute;
  background: rgba(16, 185, 129, 0.05);
  border-top: 1px dashed rgba(16, 185, 129, 0.35);
  border-bottom: 1px dashed rgba(16, 185, 129, 0.35);
  pointer-events: none;
  border-radius: 4px;
}

.session-empty {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  color: var(--text-muted); font-size: 0.9rem; text-align: center;
  padding: 1rem; max-width: 80%;
}
.session-empty em { color: var(--text); font-style: normal; font-weight: 600; }

.session-footnote {
  font-size: 0.78rem; color: var(--text-muted);
  margin: 0;
}

/* Context menu */
.session-context-menu {
  position: fixed; z-index: 10000;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  padding: 0.3rem; min-width: 170px;
}
.session-context-menu button {
  width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 0.4rem 0.6rem; border-radius: 6px;
  font-size: 0.85rem; cursor: pointer;
  display: flex; gap: 0.5rem; align-items: center;
}
.session-context-menu button:hover { background: var(--surface-hover); }
.session-context-menu i { width: 14px; color: var(--text-muted); }

/* Edit dialog */
.session-edit-dialog {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text);
  padding: 0; max-width: 440px; width: 90vw;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}
.session-edit-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.session-edit-dialog form { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem 1.2rem; }
.session-edit-dialog header { display: flex; justify-content: space-between; align-items: center; }
.session-edit-dialog header h3 { margin: 0; font-size: 1.02rem; color: var(--text); }
.session-edit-dialog label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; color: var(--text-muted); }
.session-edit-dialog input,
.session-edit-dialog select,
.session-edit-dialog textarea {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); padding: 0.45rem 0.6rem; font: inherit;
}
.session-edit-dialog input:focus,
.session-edit-dialog select:focus,
.session-edit-dialog textarea:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent);
}
.session-edit-dialog footer { display: flex; gap: 0.5rem; justify-content: flex-end; }
.session-edit-close {
  background: transparent; border: 0; color: var(--text-muted);
  font-size: 1rem; cursor: pointer; padding: 0.2rem 0.4rem;
}
.session-edit-close:hover { color: var(--text); }

/* Exposure planner add-to-plan button */
.exposure-action-row {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  margin-top: 0.3rem;
}
.exposure-action-hint { font-size: 0.8rem; color: var(--text-muted); }
#expAddToPlan:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-success-flash {
  animation: btn-success-flash 0.9s ease;
}
@keyframes btn-success-flash {
  0%   { background-color: #10b981; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  50%  { background-color: #34d399; box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
  100% { background-color: ''; }
}
.pro-upsell--flash {
  animation: upsell-flash 1.6s ease;
}
@keyframes upsell-flash {
  0%   { box-shadow: 0 0 0 0 rgba(74, 143, 255, 0.0); }
  20%  { box-shadow: 0 0 0 8px rgba(74, 143, 255, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(74, 143, 255, 0); }
}

@media print {
  body * { visibility: hidden !important; }
  #sessionPlanner, #sessionPlanner * { visibility: visible !important; }
  #sessionPlanner { position: absolute; inset: 0; padding: 1cm; }
}


/* =============================================================================
 * Mobile overflow safeguards (fix for horizontal page extension)
 *   AdSense <ins> units inside .ad-banner / .ad-mobile carry hard-coded
 *   pixel widths (320px / 300px). On narrow phones (<= ~360px viewport,
 *   minus the .tonight-grid 12px horizontal padding) those would push the
 *   ad cards beyond the viewport, scrolling the whole page sideways.
 *
 *   Likewise the exposure-planner result cards can carry long unbreakable
 *   strings ("21.7 mag/arcmin^2") that overflow their grid track unless we
 *   set min-width: 0 and allow wrapping.
 * ============================================================================= */

.tonight-grid > .ad-banner,
.tonight-grid > .ad-mobile {
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.tonight-grid > .ad-banner ins.adsbygoogle,
.tonight-grid > .ad-mobile ins.adsbygoogle {
  max-width: 100% !important;
}

/* Exposure (equipment) planner cards — let long values wrap instead of
   pushing the card past the viewport. */
.exposure-card {
  min-width: 0;
  overflow-wrap: anywhere;
}
.exposure-card-value,
.exposure-card-sub {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.exposure-results { min-width: 0; }
.exposure-planner { min-width: 0; }

@media (max-width: 480px) {
  .exposure-card { padding: 0.7rem; }
  .exposure-card-value { font-size: 1.2rem; }
  /* Stack the toolbar fields so dropdowns can't overflow the card. */
  .exposure-select, .exposure-field { flex-basis: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
 * IMAGING CONDITIONS (Pro) — single-night scheduling predictors.
 * Sits between the Exposure Planner and the Session Planner.
 * ════════════════════════════════════════════════════════════════════════ */
.conditions { display: grid; gap: 0.9rem; min-width: 0; }
.conditions-empty {
  padding: 1rem; border: 1px dashed var(--border); border-radius: 8px;
  opacity: 0.8; text-align: center; line-height: 1.5;
}
.conditions-empty i { color: var(--accent); margin-right: 0.35rem; }

.conditions-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.conditions-title { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.conditions-target { font-size: 1.05rem; font-weight: 600; color: var(--text); }
.conditions-title .muted { font-size: 0.8rem; opacity: 0.7; }

/* Layer toggle chips */
.conditions-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.conditions-layers { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.conditions-seeing {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.76rem; font-weight: 600; color: var(--text-muted); white-space: nowrap;
}
.conditions-seeing input {
  width: 3.4rem; font: inherit; font-size: 0.8rem; text-align: right;
  padding: 0.24rem 0.4rem; border-radius: 6px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.conditions-seeing input:focus { outline: none; border-color: var(--accent); }
.conditions-seeing-unit { opacity: 0.7; }
.conditions-chip {
  font: inherit; font-size: 0.76rem; font-weight: 600;
  padding: 0.28rem 0.65rem; border-radius: 999px; cursor: pointer;
  background: var(--surface-hover); color: var(--text-muted);
  border: 1px solid var(--border);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.conditions-chip:hover { border-color: var(--accent); color: var(--text); }
.conditions-chip.is-on {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: var(--accent); color: var(--text);
}

/* Summary tiles — same language as the exposure result cards. */
.conditions-stats {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.conditions-stat {
  background: var(--surface-hover); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.75rem 0.85rem;
  display: grid; gap: 0.25rem; align-content: start; min-width: 0;
}
.conditions-stat-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.6;
}
.conditions-stat-value {
  font-size: 1.25rem; font-weight: 600; line-height: 1.1; color: var(--text);
  overflow-wrap: anywhere;
}
.conditions-stat-sub { font-size: 0.74rem; opacity: 0.75; line-height: 1.4; overflow-wrap: anywhere; }

/* Chart shell + stacked SVG panels */
.conditions-chart { position: relative; min-width: 0; }
.conditions-panels {
  display: block; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-hover); overflow: hidden;
}
.cond-svg { display: block; width: 100%; height: auto; }
.cond-svg + .cond-svg { border-top: 1px solid var(--border); }
.cond-svg text { font-family: inherit; }

/* Plot bands */
.cond-twi  { fill: rgba(99, 102, 241, 0.07); }
.cond-dark { fill: rgba(30, 41, 59, 0.04); }
.cond-floor { fill: rgba(180, 83, 9, 0.08); }
.cond-floor-line {
  stroke: #b45309; stroke-width: 1.2; stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke; opacity: 0.7;
}

/* Gridlines + axis text */
.cond-grid { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cond-axis-y, .cond-axis-x { fill: var(--text-muted); font-size: 13px; }
.cond-axis-y { text-anchor: end; }
.cond-axis-r { fill: var(--text-muted); font-size: 13px; text-anchor: start; }
.cond-axis-cap { fill: var(--text-muted); font-size: 12px; opacity: 0.8; }
.cond-tick { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.6; }

/* Data lines */
.cond-alt {
  fill: none; stroke: var(--accent); stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.cond-alt-faint {
  fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0.32;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.cond-moon {
  fill: none; stroke: #ca8a04; stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
/* Per-segment Moon line — stroke-width + opacity are set inline from the
   interference (how much the Moon brightens the sky), so NO non-scaling-stroke:
   the weight scales with the plot like a real "thin crescent → fat full". */
.cond-moon-seg { stroke: #ca8a04; stroke-linecap: round; }
.cond-snr {
  fill: none; stroke: #0d9488; stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.cond-fwhm {
  fill: none; stroke: #e11d48; stroke-width: 1.8; stroke-dasharray: 4 3;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}

/* Window lane — shaded analytical windows under the plot. SNR-90% (teal, the
   loose fast-signal span) sits above FWHM-10% (rose, the tight sharp core). */
.cond-win-snr  { fill: rgba(13, 148, 136, 0.30); stroke: #0d9488; stroke-width: 0.75; }
.cond-win-fwhm { fill: rgba(225, 29, 72, 0.26); stroke: #e11d48; stroke-width: 0.75; }
.cond-win-guide { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; opacity: 0.28; }
.cond-win-cap { fill: var(--text-muted); font-size: 11px; text-anchor: start; }

/* Event markers */
.cond-transit {
  stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke; opacity: 0.8;
}
.cond-flip {
  stroke: #dc2626; stroke-width: 1.4; stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke; opacity: 0.75;
}
.cond-mark-label { fill: var(--accent); font-size: 12px; opacity: 0.85; }

/* Hover cursor + readout */
.conditions-cursor {
  position: absolute; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed var(--accent); pointer-events: none; opacity: 0.8;
}
.conditions-readout {
  position: absolute; top: 6px; transform: translateX(-50%);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  padding: 0.5rem 0.65rem; min-width: 11rem; max-width: 15rem;
  font-size: 0.76rem; pointer-events: none; z-index: 3;
}
.cond-ro-head {
  font-weight: 600; font-size: 0.8rem; margin-bottom: 0.35rem;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.cond-ro-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.cond-ro-row span { opacity: 0.65; }
.cond-ro-row b { font-weight: 600; }
.cond-ro-good, .cond-ro-bad {
  font-size: 0.66rem; font-weight: 600; padding: 0.08rem 0.4rem;
  border-radius: 4px; white-space: nowrap;
}
.cond-ro-good { background: rgba(21, 128, 61, 0.14); color: #15803d; }
.cond-ro-bad  { background: rgba(180, 83, 9, 0.14); color: #b45309; }
.cond-ro-tag {
  font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.04rem 0.3rem; border-radius: 3px; margin-left: 0.25rem;
  background: rgba(225, 29, 72, 0.12); color: #e11d48;
}

.conditions-foot { font-size: 0.75rem; opacity: 0.65; margin: 0; line-height: 1.5; }

/* Chart key — mirrors the sky-chart "Deep-sky key". Swatches reuse the exact
   .cond-* chart classes so the legend colours always match the plot. */
.conditions-key {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.55rem 1.75rem;
  margin: 0; padding: 0.6rem 0.9rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  font-size: 0.76rem; color: var(--text-muted);
}
.conditions-key-group {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.9rem;
}
.conditions-key-title {
  font-weight: 600; color: var(--text); text-transform: uppercase;
  letter-spacing: 0.04em; font-size: 0.66rem; white-space: nowrap;
}
.conditions-key-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem;
  list-style: none; margin: 0; padding: 0;
}
.cond-key-item { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.cond-key-item.is-off { opacity: 0.35; }
.cond-key-swatch { flex: 0 0 26px; width: 26px; height: 10px; }
.cond-key-swatch--zone { flex-basis: 18px; width: 18px; height: 12px; }
.cond-key-swatch--zone rect { stroke: var(--border); stroke-width: 1; }
.cond-key-swatch--mark { flex-basis: 12px; width: 12px; height: 14px; }

@media (max-width: 480px) {
  .conditions-stat { padding: 0.6rem 0.7rem; }
  .conditions-stat-value { font-size: 1.05rem; }
  .conditions-readout { min-width: 9.5rem; font-size: 0.72rem; }
}

/* ── On-page intent / SEO explainer ─────────────────────────────────────────
 * Static, crawlable content block that answers the common "what's in the sky
 * tonight" search intents and links out to related ExoAtlas pages. Uses the
 * page's existing light-theme tokens so it matches the rest of the tool.
 * ──────────────────────────────────────────────────────────────────────── */
.tonight-about {
  margin: 2rem auto 0;
  width: 100%;
}
.tonight-about-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.tonight-about-inner h2 {
  margin: 0 0 0.9rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
}
.tonight-about-inner h3 {
  margin: 1.5rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.tonight-about-inner p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.tonight-about-inner p strong { color: var(--text); }
.tonight-about-inner a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.tonight-about-inner a:hover,
.tonight-about-inner a:focus-visible { text-decoration: underline; }
.tonight-about-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 0.5rem;
}
.tonight-about-list li {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}
.tonight-about-list li strong { color: var(--text); }
@media (max-width: 480px) {
  .tonight-about-inner { padding: 1.25rem; }
  .tonight-about-inner h2 { font-size: 1.15rem; }
}