/* ATLAS · components/crosshair.css
 * Provenance: AuditHunt v3 · Phase 1.4 · authored 2026-04-25
 * Spec: §XX.8 — horizon hairline at 62vh + 24px reticle + readout block
 */

.crosshair-horizon {
  position: fixed; left: 0; right: 0; top: 62vh;
  height: 1px; pointer-events: none; z-index: 4;
  background: linear-gradient(90deg,
    var(--line) 0%, var(--line) calc(50% - 24px),
    transparent calc(50% - 24px), transparent calc(50% + 24px),
    var(--line) calc(50% + 24px), var(--line) 100%);
  opacity: calc(0.5 + var(--depth, 0) * 0.4);
}
.crosshair-reticle {
  position: fixed; left: 50vw; top: 62vh;
  width: 24px; height: 24px;
  transform: translate(-50%, -50%) rotate(calc(var(--depth, 0) * 360deg));
  pointer-events: none; z-index: 5;
  color: var(--accent-depth, var(--shield-hi));
}
.crosshair-reticle::before, .crosshair-reticle::after {
  content: ""; position: absolute; background: currentColor;
}
.crosshair-reticle::before { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.crosshair-reticle::after  { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }

.crosshair-readout {
  position: fixed; right: 56px; top: calc(62vh + 16px);
  width: 120px; pointer-events: none; z-index: 5;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: 1.6px; color: var(--mute); text-transform: uppercase;
  display: flex; flex-direction: column; gap: 2px;
}
.crosshair-readout > span { display: block; }

@media (max-width: 1100px) { .crosshair-readout { display: none; } }
@media (max-width: 720px) {
  .crosshair-horizon, .crosshair-reticle { display: none; }
}