/* CRUX Live Above the Karoo — static homepage/tool module
   Scoped component CSS. Safe to paste into the existing Crux static CSS bundle. */

:root {
  --crux-midnight: #141C24;
  --crux-blue: #12182C;
  --crux-sand: #A79A88;
  --crux-dune: #EDE6DB;
  --crux-silver: #70757C;
  --crux-copper: #C58A49;
  --crux-panel: rgba(18, 24, 44, 0.72);
  --crux-panel-soft: rgba(237, 230, 219, 0.055);
  --crux-line: rgba(167, 154, 136, 0.22);
  --crux-line-soft: rgba(167, 154, 136, 0.12);
  --crux-copper-soft: rgba(197, 138, 73, 0.22);
  --crux-shadow: 0 24px 80px rgba(0,0,0,0.38);
}

.crux-sky-signal,
.crux-satellite-tool {
  color: var(--crux-dune);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.crux-sky-signal *,
.crux-satellite-tool * {
  box-sizing: border-box;
}

.crux-sky-signal {
  position: relative;
  width: min(1180px, calc(100% - 32px));
  margin: 72px auto;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(197, 138, 73, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 8%, rgba(197, 138, 73, 0.14), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(112, 117, 124, 0.12), transparent 38%),
    linear-gradient(140deg, rgba(20, 28, 36, 0.96), rgba(18, 24, 44, 0.94));
  box-shadow: var(--crux-shadow);
  overflow: hidden;
  isolation: isolate;
}

.crux-sky-signal::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(237,230,219,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237,230,219,0.025) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.45), transparent 72%);
  pointer-events: none;
  z-index: -1;
}

.crux-sky-signal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(18px, 3vw, 28px);
  align-items: stretch;
}

.crux-sky-signal__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.crux-eyebrow {
  margin: 0 0 10px 0;
  color: var(--crux-copper);
  font: 600 11px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.crux-sky-signal h2,
.crux-satellite-tool h1,
.crux-satellite-tool h2,
.crux-satellite-tool h3 {
  margin: 0;
  font-family: Montserrat, Inter, system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.crux-sky-signal h2 {
  font-size: clamp(28px, 4vw, 50px);
  line-height: 0.96;
}

.crux-sky-signal__intro {
  max-width: 720px;
  margin: 14px 0 0 0;
  color: rgba(237, 230, 219, 0.78);
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.65;
}

.crux-sky-signal__meta {
  justify-self: end;
  padding: 10px 12px;
  min-width: 220px;
  border: 1px solid rgba(237,230,219,0.1);
  border-radius: 16px;
  background: rgba(0,0,0,0.14);
  color: rgba(237,230,219,0.7);
  font: 500 11px/1.45 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: right;
}

.crux-sky-signal__meta strong {
  color: var(--crux-dune);
  font-weight: 500;
}

.crux-sky-signal__stage {
  position: relative;
  min-height: 360px;
  border: 1px solid rgba(237,230,219,0.09);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(18,24,44,0.6), rgba(20,28,36,0.96)),
    radial-gradient(circle at 50% 7%, rgba(112,117,124,0.19), transparent 54%);
  overflow: hidden;
}

.crux-sky-signal__svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
}

.crux-sky-signal__svg text {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  fill: rgba(237,230,219,0.54);
  font-size: 11px;
  letter-spacing: 0.08em;
}

/* Sky-phase backdrop — solid gradient per solar-altitude band, dimmed back toward the
   Crux instrument palette by a separate SVG overlay rect (opacity set per phase from JS).
   This keeps daytime genuinely bright while night/twilight stay close to the original
   dark Crux look. Driven by both a data-sky-phase attribute and a sky-* class for easy
   debugging/inspection. */
.crux-sky-signal__stage { transition: background 4s ease; }
.crux-sky-signal__stage[data-sky-phase="day"] {
  background: linear-gradient(180deg, #5F7180 0%, #7F8B91 55%, #C6B79E 100%);
}
.crux-sky-signal__stage[data-sky-phase="golden"] {
  background: linear-gradient(180deg, #4A5C72 0%, #8A7868 55%, #C58A49 100%);
}
.crux-sky-signal__stage[data-sky-phase="civil"] {
  background: linear-gradient(180deg, #343A52 0%, #4A4350 55%, #6E5A48 100%);
}
.crux-sky-signal__stage[data-sky-phase="nautical"] {
  background: linear-gradient(180deg, #202B3D 0%, #1A2330 55%, #161C26 100%);
}
.crux-sky-signal__stage[data-sky-phase="astronomical"] {
  background: linear-gradient(180deg, #1B2433 0%, #161E2C 55%, #11161F 100%);
}
.crux-sky-signal__stage[data-sky-phase="night"] {
  background: linear-gradient(180deg, #141C24 0%, #12182C 55%, #0D1119 100%);
}

/* Dark "glass" overlay rect inside the SVG — dims the bright daytime gradient back toward
   the premium/muted Crux instrument feel without flattening every sky state to the same
   darkness. Opacity is set per-phase from JS (OVERLAY_OPACITY_BY_PHASE). */
.crux-sky-overlay {
  fill: #0B0F16;
  transition: opacity 4s ease;
  pointer-events: none;
}

/* Stars read as a night/twilight detail only — hidden (not just dim) in daylight so the
   brightened day gradient doesn't look like a starry afternoon. */
.crux-sky-stars { transition: opacity 3s ease; opacity: 1; }
.crux-sky-signal__stage[data-sky-phase="day"] .crux-sky-stars,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-sky-stars,
.crux-sky-signal__stage[data-sky-phase="civil"] .crux-sky-stars {
  opacity: 0;
}
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-sky-stars {
  opacity: 0.45;
}

.crux-sky-signal__sky-state,
.crux-sky-signal__data-status {
  display: inline-block;
  max-width: 100%;
  margin-top: 4px;
  color: rgba(237,230,219,0.5);
  font: 500 10px/1.4 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.crux-sky-signal__stage[data-sky-phase="day"] .crux-grid-line,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-grid-line {
  stroke: rgba(13,17,25,0.105);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-grid-line--major,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-grid-line--major {
  stroke: rgba(13,17,25,0.15);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-sky-signal__svg text,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-sky-signal__svg text {
  fill: rgba(13,17,25,0.58);
}

.crux-grid-line { fill: none; stroke: rgba(167,154,136,0.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.crux-grid-line--major { fill: none; stroke: rgba(167,154,136,0.145); stroke-width: 1; vector-effect: non-scaling-stroke; }
.crux-grid-arc { fill: none; stroke: rgba(167,154,136,0.11); stroke-width: 1; }
.crux-horizon-fill { fill: rgba(9, 13, 19, 0.92); }
.crux-horizon-edge { fill: none; stroke: rgba(197,138,73,0.42); stroke-width: 1.4; }
.crux-horizon-haze { pointer-events: none; }
.crux-star { fill: rgba(237,230,219,0.38); }
.crux-trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.crux-trail--tier-active { stroke-width: 1.7; opacity: 0.66; }
.crux-trail--tier-background { stroke-width: 1.1; opacity: 0.4; }
.crux-trail--iss { stroke: rgba(197,138,73,0.82); }
.crux-trail--tiangong { stroke: rgba(237,230,219,0.5); }
.crux-trail--starlink { stroke: rgba(112,117,124,0.36); }
.crux-trail--leo { stroke: rgba(167,154,136,0.26); }
.crux-sat-object { transition: transform 4.6s linear; transform-box: fill-box; }
.crux-sat-dot { filter: drop-shadow(0 0 7px rgba(197,138,73,0.42)); animation: crux-sat-pulse 5.4s ease-in-out infinite; }
@keyframes crux-sat-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0.98; }
}
.crux-sat-dot--iss { fill: var(--crux-copper); }
.crux-sat-dot--tiangong { fill: var(--crux-dune); }
.crux-sat-dot--starlink { fill: rgba(167,154,136,0.82); }
.crux-sat-dot--leo { fill: rgba(112,117,124,0.86); }
.crux-sat-label {
  paint-order: stroke;
  stroke: rgba(18,24,44,0.9);
  stroke-width: 5px;
  stroke-linejoin: round;
  font-size: 10px !important;
  fill: rgba(237,230,219,0.78) !important;
}
.crux-sat-object--starlink .crux-sat-label,
.crux-sat-object--leo .crux-sat-label {
  font-size: 9px !important;
  fill: rgba(237,230,219,0.5) !important;
}

.crux-sky-signal__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crux-sky-card {
  border: 1px solid rgba(237,230,219,0.1);
  border-radius: 20px;
  background: rgba(237,230,219,0.045);
  padding: 16px;
  overflow: visible; /* never an internal scroll container — page flow handles overflow */
}

.crux-sky-card h3 {
  margin: 0 0 12px 0;
  color: rgba(237,230,219,0.88);
  font: 500 12px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.crux-layer-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.crux-layer-toggle,
.crux-time-toggle {
  appearance: none;
  width: 100%;
  height: 38px;
  border: 1px solid rgba(167,154,136,0.22);
  border-radius: 999px;
  background: rgba(20,28,36,0.72);
  color: rgba(237,230,219,0.7);
  cursor: pointer;
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  padding: 0 10px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.crux-layer-toggle[data-crux-layer="tiangong"] {
  font-size: 9px;
  letter-spacing: 0.04em;
}

.crux-layer-toggle:hover,
.crux-time-toggle:hover {
  border-color: rgba(197,138,73,0.55);
  color: var(--crux-dune);
  transform: translateY(-1px);
}

.crux-layer-toggle.is-active,
.crux-time-toggle.is-active {
  border-color: rgba(197,138,73,0.82);
  background: rgba(197,138,73,0.14);
  color: var(--crux-dune);
}

.crux-mini-status {
  display: grid;
  gap: 10px;
  margin: 0;
}

.crux-mini-status__row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: baseline;
  min-height: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(237,230,219,0.07);
  font-size: 13px;
  line-height: 1.35;
}

.crux-mini-status__row:last-child { border-bottom: 0; padding-bottom: 0; }
.crux-mini-status dt { color: rgba(167,154,136,0.82); font: 600 10px/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.12em; text-transform: uppercase; }
.crux-mini-status dd {
  margin: 0;
  color: rgba(237,230,219,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crux-sky-signal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.crux-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(197,138,73,0.74);
  background: rgba(197,138,73,0.12);
  color: var(--crux-dune);
  text-decoration: none;
  font: 600 11px/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.crux-button:hover {
  background: rgba(197,138,73,0.2);
  border-color: var(--crux-copper);
  transform: translateY(-1px);
}

.crux-button--ghost {
  border-color: rgba(167,154,136,0.34);
  background: transparent;
  color: rgba(237,230,219,0.72);
}

.crux-sky-signal__note {
  margin: 14px 0 0 0;
  color: rgba(237,230,219,0.55);
  font-size: 12px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crux-sky-signal__note--empty {
  margin: 0;
  min-height: 34px;
}

.crux-now-crossing-text {
  margin: 0;
  min-height: 36px;
  font-size: 13px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Dedicated tool page scaffold */
.crux-satellite-tool {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(197,138,73,0.13), transparent 34%),
    linear-gradient(145deg, var(--crux-midnight), var(--crux-blue) 55%, #0b1018);
  padding: 0 0 72px 0;
}

.crux-tool-nav {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(237,230,219,0.08);
}

.crux-tool-nav__brand {
  color: var(--crux-dune);
  text-decoration: none;
  font: 300 18px/1 Montserrat, Inter, system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.crux-tool-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.crux-tool-nav__links a {
  color: rgba(237,230,219,0.68);
  text-decoration: none;
  font: 600 11px/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.crux-tool-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 56px auto 0;
}

.crux-tool-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  margin-bottom: 28px;
}

.crux-tool-hero h1 {
  font-size: clamp(34px, 5.2vw, 70px);
  line-height: 0.92;
}

.crux-tool-hero p {
  max-width: 760px;
  margin: 18px 0 0;
  color: rgba(237,230,219,0.76);
  font-size: 16px;
  line-height: 1.7;
}

.crux-tool-panel {
  border: 1px solid rgba(197,138,73,0.26);
  border-radius: 28px;
  background: rgba(20,28,36,0.72);
  box-shadow: var(--crux-shadow);
  padding: clamp(18px, 2.4vw, 28px);
}

.crux-tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
}

.crux-tool-stage .crux-sky-signal__stage {
  min-height: 520px;
}

.crux-tool-stage .crux-sky-signal__svg {
  min-height: 520px;
}

.crux-tool-controls {
  display: grid;
  gap: 16px;
}

.crux-time-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.crux-satellite-list {
  display: grid;
  gap: 10px;
  overflow: visible; /* page flow only — never an internal scroll container */
}

.crux-sat-card {
  border: 1px solid rgba(237,230,219,0.09);
  border-radius: 16px;
  padding: 12px;
  background: rgba(237,230,219,0.04);
  min-height: 78px;
}

.crux-sat-card__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.crux-sat-card__name {
  color: var(--crux-dune);
  font: 600 11px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.crux-sat-card__layer {
  flex-shrink: 0;
  color: var(--crux-copper);
  font: 600 10px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.crux-sat-card__data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
  color: rgba(237,230,219,0.7);
  font: 500 11px/1.35 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.crux-sat-card__data span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crux-tool-note {
  margin-top: 20px;
  padding: 16px 18px;
  border-left: 2px solid rgba(197,138,73,0.75);
  background: rgba(197,138,73,0.08);
  color: rgba(237,230,219,0.72);
  font-size: 13px;
  line-height: 1.65;
}

.crux-pass-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 18px;
  color: rgba(237,230,219,0.74);
  font-size: 13px;
}

.crux-pass-table th,
.crux-pass-table td {
  border-bottom: 1px solid rgba(237,230,219,0.08);
  padding: 12px 10px;
  text-align: left;
}

.crux-pass-table th {
  color: var(--crux-sand);
  font: 600 10px/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .crux-sky-signal__grid,
  .crux-tool-hero,
  .crux-tool-layout {
    grid-template-columns: 1fr;
  }

  .crux-sky-signal__header {
    grid-template-columns: 1fr;
  }

  .crux-sky-signal__meta {
    justify-self: start;
    text-align: left;
  }

  .crux-sky-signal__side {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .crux-sky-signal__actions {
    align-content: start;
  }
}

@media (max-width: 640px) {
  .crux-sky-signal {
    width: min(100% - 20px, 1180px);
    margin: 44px auto;
    padding: 16px;
    border-radius: 22px;
  }

  .crux-sky-signal__stage,
  .crux-sky-signal__svg {
    min-height: 300px;
  }

  .crux-tool-stage .crux-sky-signal__stage,
  .crux-tool-stage .crux-sky-signal__svg {
    min-height: 360px;
  }

  .crux-sky-signal__side {
    grid-template-columns: 1fr;
  }

  .crux-layer-controls,
  .crux-time-controls {
    grid-template-columns: 1fr 1fr;
  }

  .crux-tool-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .crux-pass-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .crux-sat-object--starlink .crux-sat-label,
  .crux-sat-object--leo .crux-sat-label {
    display: none;
  }
}

@media (max-width: 420px) {
  .crux-sat-object--tiangong .crux-sat-label {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .crux-layer-toggle,
  .crux-time-toggle,
  .crux-button {
    transition: none;
  }
  .crux-sat-object { transition: none; }
  .crux-sat-dot { animation: none; }
  .crux-sky-signal__stage { transition: none; }
  .crux-sky-overlay { transition: none; }
  .crux-sky-stars { transition: none; }
}

/* v0.5 — clearer orientation + data-state labelling */
.crux-sky-signal__orientation {
  position: absolute;
  z-index: 5;
  left: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 18px);
  max-width: calc(100% - 24px);
  padding: 7px 10px;
  border: 1px solid rgba(237,230,219,0.16);
  border-radius: 999px;
  background: rgba(9,13,19,0.58);
  color: rgba(237,230,219,0.76);
  font: 600 10px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.crux-sky-signal__orientation strong {
  color: var(--crux-dune);
  font-weight: 700;
}
.crux-cardinal-label {
  font-size: 13px !important;
  font-weight: 700;
  letter-spacing: 0.14em !important;
  paint-order: stroke;
  stroke: rgba(9,13,19,0.68);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.crux-view-label,
.crux-zenith-label {
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  opacity: 0.78;
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-cardinal-label,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-cardinal-label,
.crux-sky-signal__stage[data-sky-phase="day"] .crux-view-label,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-view-label,
.crux-sky-signal__stage[data-sky-phase="day"] .crux-zenith-label,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-zenith-label {
  stroke: rgba(237,230,219,0.52);
  fill: rgba(9,13,19,0.72) !important;
}
.crux-sky-signal__data-status::before {
  content: "DATA · ";
  color: rgba(197,138,73,0.86);
}
.crux-mini-status__row dd[data-crux-active-layers] {
  letter-spacing: 0.04em;
}
@media (max-width: 720px) {
  .crux-sky-signal__orientation {
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: 9px;
    text-align: center;
  }
  .crux-view-label { display: none; }
  .crux-cardinal-label { font-size: 12px !important; }
}


/* v0.5b — viewer readability pass: stronger top legend + visible live arcs */
.crux-view-label {
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: 0.08em !important;
  opacity: 1;
  fill: rgba(237,230,219,0.88) !important;
  paint-order: stroke;
  stroke: rgba(8,12,18,0.82);
  stroke-width: 5px;
  stroke-linejoin: round;
}
.crux-zenith-label {
  font-size: 11px !important;
  font-weight: 700;
  opacity: 0.9;
  paint-order: stroke;
  stroke: rgba(8,12,18,0.66);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-view-label,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-view-label {
  fill: rgba(8,12,18,0.84) !important;
  stroke: rgba(237,230,219,0.64);
  stroke-width: 5px;
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-zenith-label,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-zenith-label {
  fill: rgba(8,12,18,0.72) !important;
  stroke: rgba(237,230,219,0.5);
}
.crux-trail {
  vector-effect: non-scaling-stroke;
}
.crux-trail--tier-active {
  stroke-width: 2.45;
  opacity: 0.82;
}
.crux-trail--tier-background {
  stroke-width: 1.95;
  opacity: 0.64;
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-trail--tier-background,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-trail--tier-background {
  stroke-width: 2.15;
  opacity: 0.78;
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-trail--leo,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-trail--leo {
  stroke: rgba(8,12,18,0.58);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-trail--starlink,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-trail--starlink {
  stroke: rgba(13,17,25,0.42);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-trail--tiangong,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-trail--tiangong {
  stroke: rgba(13,17,25,0.62);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-trail--iss,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-trail--iss {
  stroke: rgba(124,72,26,0.82);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-sat-label,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-sat-label {
  fill: rgba(8,12,18,0.88) !important;
  stroke: rgba(237,230,219,0.72);
  stroke-width: 5px;
}

/* Night-mode trail contrast fix (v0.5d). Previously the dark base stroke colours
   (tuned for a translucent dark-on-dark look) combined multiplicatively with the
   tier opacity values, leaving Starlink/LEO arcs at an effective ~0.17-0.23 opacity
   against a near-black night sky — essentially invisible. These overrides target the
   brief's recommended ranges directly: ISS ~0.80-0.90, Tiangong ~0.72-0.84,
   Starlink ~0.45-0.60, LEO ~0.42-0.56 — readable but still calm, not neon. */
.crux-sky-signal__stage[data-sky-phase="night"] .crux-trail--iss,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-trail--iss,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-trail--iss {
  stroke: rgba(216,160,102,0.95);
  opacity: 0.86;
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-trail--tiangong,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-trail--tiangong,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-trail--tiangong {
  stroke: rgba(237,230,219,0.92);
  opacity: 0.78;
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-trail--starlink,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-trail--starlink,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-trail--starlink {
  stroke: rgba(172,178,186,0.85);
  opacity: 0.54;
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-trail--leo,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-trail--leo,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-trail--leo {
  stroke: rgba(196,188,174,0.8);
  opacity: 0.5;
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-sat-label,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-sat-label,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-sat-label {
  fill: rgba(237,230,219,0.86) !important;
  stroke: rgba(13,17,25,0.92);
  stroke-width: 5px;
}
@media (max-width: 720px) {
  .crux-view-label { font-size: 11px !important; }
}


/* v0.5f — trail visibility and dense-pass readability patch */
.crux-trail {
  vector-effect: non-scaling-stroke;
}
.crux-trail--tier-active {
  stroke-width: 2.7;
  opacity: 0.9;
}
.crux-trail--tier-background {
  stroke-width: 2.25;
  opacity: 0.78;
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-trail--iss,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-trail--iss,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-trail--iss {
  stroke: rgba(220,154,82,0.92);
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-trail--tiangong,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-trail--tiangong,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-trail--tiangong {
  stroke: rgba(237,230,219,0.82);
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-trail--starlink,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-trail--starlink,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-trail--starlink {
  stroke: rgba(167,154,136,0.66);
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-trail--leo,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-trail--leo,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-trail--leo {
  stroke: rgba(186,190,194,0.62);
}


/* v0.5g — marker brightness polish: make the actual satellite object easier to read
   than its trail. Trails remain secondary; dots get a small core-size lift plus a
   restrained halo so live objects do not disappear in day or night gradients. */
.crux-sat-halo {
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: screen;
}
.crux-sat-halo--iss { fill: rgba(216,150,82,0.46); }
.crux-sat-halo--tiangong { fill: rgba(237,230,219,0.40); }
.crux-sat-halo--starlink { fill: rgba(197,138,73,0.28); }
.crux-sat-halo--leo { fill: rgba(210,214,218,0.30); }
.crux-sat-dot {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(237,230,219,0.30)) drop-shadow(0 0 5px rgba(197,138,73,0.34));
}
@keyframes crux-sat-pulse {
  0%, 100% { opacity: 0.90; }
  50% { opacity: 1; }
}
.crux-sat-dot--iss { fill: rgba(221,149,75,1); }
.crux-sat-dot--tiangong { fill: rgba(246,239,226,0.98); }
.crux-sat-dot--starlink { fill: rgba(206,181,143,0.96); }
.crux-sat-dot--leo { fill: rgba(218,224,228,0.95); }

.crux-sky-signal__stage[data-sky-phase="day"] .crux-sat-halo,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-sat-halo,
.crux-sky-signal__stage[data-sky-phase="civil"] .crux-sat-halo {
  mix-blend-mode: normal;
  opacity: 0.34;
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-sat-dot--iss,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-sat-dot--iss,
.crux-sky-signal__stage[data-sky-phase="civil"] .crux-sat-dot--iss {
  fill: rgba(150,82,32,1);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-sat-dot--tiangong,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-sat-dot--tiangong,
.crux-sky-signal__stage[data-sky-phase="civil"] .crux-sat-dot--tiangong {
  fill: rgba(30,34,39,0.96);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-sat-dot--starlink,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-sat-dot--starlink,
.crux-sky-signal__stage[data-sky-phase="civil"] .crux-sat-dot--starlink {
  fill: rgba(70,50,28,0.94);
}
.crux-sky-signal__stage[data-sky-phase="day"] .crux-sat-dot--leo,
.crux-sky-signal__stage[data-sky-phase="golden"] .crux-sat-dot--leo,
.crux-sky-signal__stage[data-sky-phase="civil"] .crux-sat-dot--leo {
  fill: rgba(20,26,32,0.92);
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-sat-halo,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-sat-halo,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-sat-halo {
  opacity: 0.50;
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-sat-dot,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-sat-dot,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-sat-dot {
  filter: drop-shadow(0 0 12px rgba(237,230,219,0.36)) drop-shadow(0 0 8px rgba(197,138,73,0.34));
}


/* v0.5h — tool list limiter / table hierarchy polish */
.crux-satellite-list__more,
.crux-pass-summary {
  margin: 10px 0 0;
  color: rgba(237,230,219,0.55);
  font: 600 11px/1.45 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.05em;
}
.crux-pass-summary {
  margin-top: 8px;
  max-width: 860px;
}
.crux-sat-card--visible {
  border-color: rgba(197,138,73,0.18);
  background: rgba(237,230,219,0.055);
}
.crux-pass-table td:first-child {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* v0.5i — elevation-guide readability fix
   The horizontal curves are elevation guides (altitude above the horizon). Earlier builds
   allowed SVG path fills on these open curves, which made them read as heavy black bands.
   Keep them as fine non-scaling guide strokes only. */
.crux-grid-line,
.crux-grid-line--major {
  fill: none !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-grid-line,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-grid-line,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-grid-line,
.crux-sky-signal__stage[data-sky-phase="civil"] .crux-grid-line {
  stroke: rgba(167,154,136,0.075);
}
.crux-sky-signal__stage[data-sky-phase="night"] .crux-grid-line--major,
.crux-sky-signal__stage[data-sky-phase="astronomical"] .crux-grid-line--major,
.crux-sky-signal__stage[data-sky-phase="nautical"] .crux-grid-line--major,
.crux-sky-signal__stage[data-sky-phase="civil"] .crux-grid-line--major {
  stroke: rgba(167,154,136,0.12);
}