/* obs-sky.css — the sky: the whole word space as a night in three dimensions. Scoped under .obs-sky; tokens from
   observatory.css, no colour outside them (the star colours are mixes of the tokens, computed in obs-sky.js). */
.obs-sky .mechanism { margin: 0; }
.sky-stage { position: relative; width: 100%; height: clamp(420px, 70vh, 820px); border-radius: var(--radius-s); overflow: hidden; background: var(--space, #04060a); border: 1px solid var(--line); }
.sky-stage canvas { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; outline: none; }
.sky-stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--cobalt); }
.sky-stage.grabbing canvas { cursor: grabbing; }
/* a faint vignette so the edges of the sky recede; it sits above the canvas and below the labels */
.sky-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 70%, var(--night) 100%); opacity: 0.55; }
.sky-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.sky-label { position: absolute; left: 0; top: 0; white-space: nowrap; font: 500 12.5px/1.2 var(--font-ui); letter-spacing: 0.01em; color: var(--ink); opacity: 0; will-change: transform, opacity; text-shadow: 0 0 2px var(--night), 0 0 5px var(--night), 0 1px 3px var(--night), 0 0 9px var(--night); }
/* the ring on the star under the pointer or the one you searched for, and its tooltip */
.sky-mark { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 1.5px solid var(--gold); border-radius: 50%; pointer-events: none; box-shadow: 0 0 6px var(--night), inset 0 0 4px var(--night); }
.sky-mark.found { border-color: var(--gold); box-shadow: 0 0 0 1px var(--night), 0 0 10px var(--gold); }
.sky-tip { position: absolute; left: 0; top: 0; pointer-events: none; padding: 5px 9px 6px; background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--radius-s); font-size: 13.5px; line-height: 1.3; white-space: nowrap; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); }
.sky-tip .w { color: var(--gold); font-weight: 500; }
.sky-tip .num { color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.sky-tip .hint { display: block; color: var(--faint); font-size: 11px; margin-top: 1px; }
.sky-status { position: absolute; left: 12px; top: 9px; pointer-events: none; font-family: var(--font-num); font-size: 11.5px; color: var(--faint); transition: opacity 600ms; }
.sky-status.off { opacity: 0; }
.sky-nogl { padding: 24px; color: var(--muted); font-size: 15px; max-width: 60ch; }
.sky-nogl .err { display: block; margin-bottom: 6px; }

/* the controls under the canvas */
.sky-controls { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.sky-pair { display: inline-flex; gap: 0; }
.sky-pair button:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); }
.sky-pair button:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; margin-left: -1px; }
.sky-controls button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); position: relative; z-index: 1; }
.sky-controls button[disabled] { opacity: 0.45; }
.sky-controls label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); min-width: 0; }
.sky-controls select { background: var(--panel2); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-s); padding: 7px 10px; font: inherit; min-width: 0; }
.sky-find { flex: 1 1 200px; }
.sky-find input { flex: 1 1 100px; width: 100%; }
.sky-found { font-size: 13px; color: var(--muted); flex-basis: 100%; min-height: 1.3em; margin: 0; }
.sky-found .w { color: var(--gold); }
.sky-found .num { color: var(--ink); }
.sky-found .sky-travel { padding: 3px 9px; font-size: 13px; margin-left: 4px; border-color: var(--gold); color: var(--gold); }
.sky-caption { margin: 10px 0 0; color: var(--muted); font-size: 14px; max-width: 70ch; }
.sky-caption .num { color: var(--ink); }
.obs-sky .numbers p { margin: 0 0 4px; }
.obs-sky .numbers details { margin: 6px 0 2px; }
.obs-sky .numbers summary { cursor: pointer; color: var(--muted); }
.obs-sky .numbers summary:hover { color: var(--ink); }
.sky-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; font-size: 13px; }
.sky-legend li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sky-legend .num { color: var(--faint); font-size: 11.5px; margin-left: 4px; }

@media (max-width: 600px) {
  .sky-stage { border-radius: 8px; }
  .sky-controls { gap: 8px 10px; }
  .sky-controls button { padding: 8px 11px; font-size: 14px; }
  .sky-find { flex-basis: 100%; }
  .sky-label { font-size: 12px; }
}