/* ===== Sun V2 — visual design system ===== */

:root {
  --bg: #0b0e14;
  --surface: rgba(18, 22, 30, 0.78);
  --surface-strong: rgba(22, 27, 36, 0.94);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #f3f4f6;
  --text-dim: rgba(243, 244, 246, 0.62);
  --text-faint: rgba(243, 244, 246, 0.38);
  --gold: #ffb845;
  --gold-soft: rgba(255, 184, 69, 0.22);
  --moonblue: #d0d8e8;
  --moonblue-soft: rgba(208, 216, 232, 0.18);
  --sun-rise: #ff8a3d;
  --sun-set: #ff5e3d;
  --sun-mid: #fff1c2;
  --reflect: #4dd2ff;
  --reflect-soft: rgba(77, 210, 255, 0.22);
  --shadow-clr: #3d5aad;
  --shadow-soft: rgba(61, 90, 173, 0.22);
  --twilight-civil: rgba(38, 64, 110, 0.55);
  --twilight-nautical: rgba(20, 32, 60, 0.65);
  --twilight-astro: rgba(8, 12, 28, 0.75);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --radius: 16px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%; width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overflow: hidden;
  overscroll-behavior: none;
}

/* Map needs pan/pinch but UI must not respond to page pinch zoom */
#dock, #cam-hud, #toast, #hint { touch-action: manipulation; }

button { font-family: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font-family: inherit; color: inherit; }

#map { position: fixed; inset: 0; background: var(--bg); }

/* Floating top-right toggle (currently used by photographer-view button). */
.floating-toggle {
  position: fixed;
  top: calc(18px + var(--safe-top));
  right: calc(10px + var(--safe-right));
  z-index: 9;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(11,14,20,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
.floating-toggle.active {
  background: var(--gold-soft);
  color: var(--gold);
  border-color: rgba(255,184,69,0.4);
}
.floating-toggle.is-disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
body.view-camera .floating-toggle { display: none !important; }
/* Hide MapLibre's stock chrome (controls, attribution) but NOT markers — markers
   live inside .maplibregl-canvas-container in MapLibre 4 and were being nuked
   by an over-broad `> *:not(canvas)` selector. */
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-top-left,
.maplibregl-ctrl-top-right { display: none !important; }
.maplibregl-canvas { outline: none !important; transition: opacity 0.55s ease; filter: brightness(1.6) contrast(1.1); }
/* Grid mode: fade tiles out, leave dark #map background + DOM markers visible */
body.grid-mode .maplibregl-canvas { opacity: 0; }
body.grid-mode .maplibregl-ctrl-bottom-left { display: none !important; }
/* Scale bar: position it just above the dock */
.maplibregl-ctrl-bottom-left {
  bottom: calc(var(--safe-bottom) + 170px) !important;
  left: 10px !important;
}
.maplibregl-ctrl-scale {
  background: rgba(10,14,20,0.6) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: rgba(255,255,255,0.65) !important;
  font-size: 10px !important;
  line-height: 16px !important;
  padding: 0 5px !important;
  border-radius: 4px !important;
  font-family: inherit !important;
}
/* Default theme: dark map, white labels (no canvas filter — actual fills brightened via setPaintProperty). */
body.invert .maplibregl-canvas { filter: invert(1) hue-rotate(180deg); }
/* Arc/shadow marker colors stay the same in both light and dark map modes. */

.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: var(--shadow);
}

/* ===== Bottom dock — slider + time + controls ===== */
#dock {
  position: fixed;
  bottom: calc(8px + var(--safe-bottom));
  left: calc(6px + var(--safe-left));
  right: calc(6px + var(--safe-right));
  z-index: 5;
  padding: 10px 8px 10px;
  max-width: 760px;
  margin: 0 auto;
}

/* ----- Slider: full-width within dock ----- */
#scrubber-wrap {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

#scrubber {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg,
    var(--twilight-astro) 0%,
    var(--twilight-nautical) 8%,
    var(--twilight-civil) 14%,
    var(--gold) 22%,
    var(--sun-mid) 50%,
    var(--gold) 78%,
    var(--twilight-civil) 86%,
    var(--twilight-nautical) 92%,
    var(--twilight-astro) 100%);
  border-radius: 999px;
  outline: none;
}

body.mode-moon #scrubber {
  background: linear-gradient(90deg,
    rgba(8,12,28,0.85) 0%,
    rgba(40,52,90,0.7) 25%,
    var(--moonblue) 50%,
    rgba(40,52,90,0.7) 75%,
    rgba(8,12,28,0.85) 100%);
}

#scrubber::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 6px rgba(255,255,255,0.06);
  cursor: grab;
}
#scrubber::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff; border: 2px solid #000; cursor: grab;
}

#scrubber-ticks {
  position: absolute;
  left: 4px; right: 4px;
  top: 50%;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.tick {
  position: absolute; top: 0;
  width: 2px; height: 14px;
  background: rgba(255,255,255,0.7);
  border-radius: 1px;
  transform: translateX(-1px);
}
.tick.sunrise { background: var(--sun-rise); }
.tick.sunset  { background: var(--sun-set); }

#moon-phase-marker {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  transform: translateX(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 30% 30%, #f0f3fa, #b6c2d8 70%, #7a8aa8 100%);
  box-shadow: 0 0 8px rgba(208,216,232,0.4);
}
#moon-phase-marker::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  /* shadow overlay computed inline by JS via clip-path */
  background: rgba(8,10,18,0.92);
  clip-path: var(--moon-clip, inset(0 50% 0 0));
}

/* ----- Time row (under slider) ----- */
#time-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 8px 4px;
  font-variant-numeric: tabular-nums;
}
#time-hh {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Date input is a transparent overlay that fills the date button.
   The user's tap hits the input directly, which opens the native date
   picker on all platforms including iOS Safari PWA mode. The button
   text shows through because the input is opacity:0. */
#date-btn { position: relative; overflow: hidden; }
#date-input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0; padding: 0; margin: 0;
  font-size: 16px; /* prevent iOS auto-zoom on focus */
}
#date-btn {
  font-size: 14px;
  color: var(--text);
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  font-weight: 500;
}
#sun-alt {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
  margin-left: auto;
}
#sun-alt.below { color: var(--text-dim); }
body.mode-moon #sun-alt:not(.below) { color: var(--moonblue); }

#rise-set {
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  gap: 8px;
  white-space: nowrap;
}
#rise-label { color: var(--sun-rise); }
#set-label  { color: var(--sun-set); }
body.mode-moon #rise-label, body.mode-moon #set-label { color: var(--moonblue); }

/* ----- Control row ----- */
#control-row {
  display: flex;
  gap: 6px;
  padding: 8px 4px 2px;
  justify-content: space-between;
}

.ctlbtn {
  flex: 1;
  height: 46px;
  min-width: 32px; /* 11 buttons × 32 + 10 gaps × 6 = 412 px → fits 390 px phones */
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease, opacity 140ms ease;
}
.ctlbtn:hover { background: rgba(255,255,255,0.12); }
.ctlbtn:disabled,
.ctlbtn.disabled {
  opacity: 0.32;
  pointer-events: none;
}

.ctlbtn .ico { display: block; }
.ctlbtn .ico.hide { display: none !important; }

/* On/off toggle visual: gold for all toggles — consistent active state */
.ctlbtn.toggle.active {
  background: var(--gold-soft);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255,184,69,0.4);
}

/* Body toggle: dim when in sun mode (default); highlight moonblue when in moon mode */
#body-toggle { color: var(--text-dim); }
body.mode-moon #body-toggle {
  background: var(--moonblue-soft);
  color: var(--moonblue);
  box-shadow: inset 0 0 0 1px rgba(208,216,232,0.4);
}
/* Invert button: highlight when inverted */
body.invert #invert-btn {
  background: var(--gold-soft);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255,184,69,0.4);
}
/* View toggle: highlight when in camera mode */
body.view-camera #view-toggle {
  background: var(--gold-soft);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(255,184,69,0.4);
}

/* Unit toggle: floating pill in grid mode, top-left so it doesn't crowd the dock */
#unit-toggle {
  position: fixed;
  top: calc(18px + var(--safe-top));
  left: calc(10px + var(--safe-left));
  z-index: 9;
  display: none;
  font-family: inherit;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.85);
  background: rgba(11,14,20,0.55);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.grid-mode #unit-toggle { display: block; }
body.view-camera #grid-toggle,
body.view-camera #unit-toggle { display: none !important; }

.ghostbtn {
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

/* ----- Alignment card (small, inside dock) ----- */
#alignment-card {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--gold-soft);
  border: 1px solid rgba(255, 184, 69, 0.35);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
#alignment-when { flex: 1; }
.closebtn {
  font-size: 18px;
  color: var(--text-dim);
  width: 22px; height: 22px;
}

/* Shadow elevation panel — always visible; dimmed when shadow mode is off */
#shadow-elev-panel {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 200ms ease;
}
#shadow-elev-panel.disabled {
  opacity: 0.35;
  pointer-events: none;
}
.elev-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  min-height: 44px;
  background: var(--shadow-soft);
  border: 1px solid rgba(61, 90, 173, 0.4);
  border-radius: 10px;
  font-size: 13px;
  color: #ffffff;
}
.elev-row label { font-weight: 600; white-space: nowrap; color: #ffffff; min-width: 42px; }
.elev-row input[type=range] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 24px;
  background: transparent; outline: none; cursor: pointer;
  margin: 0; padding: 0;
  /* Prevent Chrome/Android from filling track left of thumb in blue */
  accent-color: rgba(255,255,255,0.25);
}
.elev-row input[type=range]::-webkit-slider-runnable-track {
  height: 4px; background: rgba(255,255,255,0.25); border-radius: 2px;
}
.elev-row input[type=range]::-moz-range-track {
  height: 4px; background: rgba(255,255,255,0.25); border-radius: 2px;
}
/* Firefox filled portion matches track color → uniform appearance */
.elev-row input[type=range]::-moz-range-progress {
  height: 4px; background: rgba(255,255,255,0.25); border-radius: 2px;
}
.elev-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffffff 0%, #c8d8e8 55%, #8aaccc 100%);
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  cursor: pointer;
  /* Center the thumb on the 4px track: (4px - 20px) / 2 = -8px */
  margin-top: -8px;
}
.elev-row input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffffff 0%, #c8d8e8 55%, #8aaccc 100%);
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  cursor: pointer;
}
/* Tap-to-edit exact value input */
.elev-num {
  width: 48px;
  text-align: right;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.22);
  border-radius: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #ffffff;
  padding: 2px 2px;
  -moz-appearance: textfield;
}
.elev-num::-webkit-inner-spin-button,
.elev-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.elev-num:focus {
  outline: none;
  border-bottom-color: rgba(77,210,255,0.8);
}
.elev-unit {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* ===== Vertical sliders (right edge) =====
   Custom thin off-white tracks with a small flat thumb.
   Implemented as a vertical-rotated input range. */
.vslider {
  position: fixed;
  right: 4px;
  writing-mode: vertical-lr;
  direction: rtl;
  -webkit-appearance: none;
  appearance: none;
  width: 44px;
  z-index: 4;
  background: transparent;
  touch-action: none;
}
.vslider::-webkit-slider-runnable-track {
  width: 1.5px;
  background: rgba(255,255,255,0.45);
  border-radius: 1px;
}
.vslider::-moz-range-track {
  width: 1.5px;
  background: rgba(255,255,255,0.45);
  border-radius: 1px;
}
.vslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffffff 0%, #c8d8e8 55%, #8aaccc 100%);
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
  margin-left: -11.25px; /* precise: -(24-1.5)/2 */
  margin-top: 0; /* Chrome/Windows: prevent default vertical offset */
}
.vslider::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #ffffff 0%, #c8d8e8 55%, #8aaccc 100%);
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
/* Both vertical sliders get the same height (50vh - 130px each) with a 20px gap between them.
   Radius slider bottom clears the dock on all phones (100vh - 240px - safe-bottom). */
.vslider.tilt   { top: calc(10px + var(--safe-top)); height: calc(50vh - 130px); }
.vslider.radius { top: calc(50vh - 110px); height: calc(50vh - 130px - var(--safe-bottom)); min-height: 20px; }
body.view-camera .vslider { display: none; }

/* Hint banner */
#hint {
  position: fixed;
  top: calc(12px + var(--safe-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 16px;
  font-size: 13px;
  z-index: 6;
  border-radius: 999px;
  background: var(--surface-strong);
  white-space: nowrap;
}

/* 3D arc markers placed via maplibregl.Marker */
.arc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1c2 30%, rgba(255,184,69,0.9) 70%, rgba(255,184,69,0) 100%);
  box-shadow: 0 0 6px rgba(255,184,69,0.7);
  pointer-events: none;
}
body.mode-moon .arc-dot {
  background: radial-gradient(circle, #f0f3fa 30%, rgba(208,216,232,0.85) 70%, rgba(208,216,232,0) 100%);
  box-shadow: 0 0 6px rgba(208,216,232,0.5);
}
.arc-dot.head {
  width: 14px; height: 14px;
  background: radial-gradient(circle, #fff1c2, var(--gold) 60%, rgba(255,184,69,0) 100%);
  box-shadow: 0 0 18px 6px rgba(255,184,69,0.6);
}
body.mode-moon .arc-dot.head {
  background: radial-gradient(circle, #f0f3fa, var(--moonblue) 60%, rgba(208,216,232,0) 100%);
  box-shadow: 0 0 18px 6px rgba(208,216,232,0.5);
}

/* Shadow-mode 3D markers */
.caster-sphere {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #c8e6ff, #4dd2ff 70%, #1d6ea8 100%);
  box-shadow: 0 0 8px rgba(77,210,255,0.6);
  pointer-events: none;
}
.caster-pole {
  width: 2px;
  background: rgba(77,210,255,0.85);
  box-shadow: 0 0 4px rgba(77,210,255,0.6);
  pointer-events: none;
  transform-origin: bottom center;
}
.shadow-end {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(255,184,69,0.6);
  pointer-events: none;
}
body.mode-moon .shadow-end {
  background: var(--moonblue);
  box-shadow: 0 0 6px rgba(208,216,232,0.5);
}

/* ===== Underground (upward-look) view ===== */
/* CSS perspective+rotateX on #map container (includes Marker DOM elements).
   MapLibre's pitch is capped at 85°; this extends the visual tilt past horizontal. */
body.underground #map {
  background: #02040a;
  transition: transform 0.05s linear;
}

/* ===== Toast ===== */
#toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(220px + var(--safe-bottom));
  padding: 10px 16px;
  font-size: 13px;
  z-index: 20;
  border-radius: 999px;
  white-space: nowrap;
}

/* ===== Camera view ===== */
#camera-view {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: #000;
}
#cam-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Camera mode hides map chrome but keeps the dock visible */
body.view-camera #map { visibility: hidden; }

/* AR overlay — full-screen, transparent, only used in camera mode */
#ar-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}
.ar-dot {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff1c2 30%, rgba(255,184,69,0.9) 70%, rgba(255,184,69,0) 100%);
  box-shadow: 0 0 6px rgba(255,184,69,0.7);
  pointer-events: none;
}
body.mode-moon .ar-dot {
  background: radial-gradient(circle, #f0f3fa 30%, rgba(208,216,232,0.85) 70%, rgba(208,216,232,0) 100%);
  box-shadow: 0 0 6px rgba(208,216,232,0.5);
}
.ar-caster {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #c8e6ff, #4dd2ff 70%, #1d6ea8 100%);
  box-shadow: 0 0 8px rgba(77,210,255,0.7);
}
.ar-line {
  position: absolute;
  height: 2px;
  background: var(--gold);
  transform-origin: 0 50%;
  pointer-events: none;
}
body.mode-moon .ar-line { background: var(--moonblue); }

/* Sun or moon disk overlay */
#body-disk {
  position: fixed;
  width: 78px; height: 78px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
}
body.mode-sun #body-disk {
  background: radial-gradient(circle, rgba(255,241,194,0.95) 0%, rgba(255,184,69,0.6) 45%, transparent 100%);
  box-shadow: 0 0 40px 20px rgba(255,184,69,0.45), 0 0 80px 40px rgba(255,184,69,0.2);
  animation: sun-pulse 2.4s ease-in-out infinite;
}
body.mode-moon #body-disk {
  width: 70px; height: 70px;
  background: radial-gradient(circle at 35% 35%, #f0f3fa, #b6c2d8 70%, #7a8aa8 100%);
  box-shadow: 0 0 28px 8px rgba(208,216,232,0.35);
  overflow: hidden;
}
#body-disk-shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(8,10,18,0.92);
  clip-path: var(--moon-clip, inset(0 50% 0 0));
  display: none;
}
body.mode-moon #body-disk-shadow { display: block; }

@keyframes sun-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.92; }
  50%       { transform: translate(-50%, -50%) scale(1.10); opacity: 1; }
}

#guide-arrow {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 56px;
  pointer-events: none;
  z-index: 7;
  opacity: 0;
  transition: opacity 0.45s ease;
  filter: drop-shadow(0 0 8px rgba(255,184,69,0.7));
}

/* No top HUD in camera mode — sensors auto-request when entering camera. */
#cam-hud { display: none; }
#cam-actions {
  position: fixed;
  bottom: calc(260px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  gap: 10px;
}
#cam-sensor-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid rgba(255,184,69,0.35);
}
.cam-action {
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  background: rgba(255,255,255,0.10);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

/* Calibration crosshair: only visible in camera view */
#cam-crosshair {
  position: fixed;
  left: 50%; top: 50%;
  margin: -20px 0 0 -20px;
  pointer-events: none;
  z-index: 9;
  display: none;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
}
body.view-camera #cam-crosshair { display: block; }

/* FOV preset toggle (top of camera view) */
#cam-fov-row {
  position: fixed;
  top: calc(18px + var(--safe-top));
  left: 50%; transform: translateX(-50%);
  z-index: 9;
  display: none;
  gap: 2px;
  background: rgba(11,14,20,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 3px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.view-camera #cam-fov-row { display: flex; }
.cam-fov-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.65);
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cam-fov-btn.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* When in camera view, dock simplifies */
body.view-camera #scrubber-wrap,
body.view-camera #time-row { /* keep visible */ }

/* ===== Coord labels (DATA mode) ===== */
.coord-label {
  position: fixed;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.9);
  background: rgba(11,14,20,0.72);
  border-radius: 5px;
  padding: 3px 6px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ===== Alignment wizard — floats at top of screen ===== */
#align-panel {
  position: fixed;
  top: calc(12px + var(--safe-top));
  left: calc(6px + var(--safe-left));
  right: calc(6px + var(--safe-right));
  max-width: 540px;
  margin: 0 auto;
  z-index: 8;
  padding: 14px 14px 12px;
}
.align-close-btn {
  position: absolute; top: 10px; right: 12px;
  font-size: 20px; line-height: 1; color: var(--text-dim); cursor: pointer; background: none; border: 0;
}
.data-action-btn {
  width: 100%; height: 38px;
  border-radius: 10px;
  font-size: 13px; font-weight: 600;
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid rgba(255,184,69,0.35);
  cursor: pointer; font-family: inherit;
}
.data-action-btn:disabled { opacity: 0.35; pointer-events: none; }
.align-label { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; color: var(--text-dim); text-transform: uppercase; margin-bottom: 4px; }
.align-coords { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text); margin-bottom: 8px; min-height: 18px; }
.align-ht-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.align-ht-row label { color: var(--text-dim); min-width: 44px; font-family: inherit; }
.align-ht-row input { width: 70px; background: rgba(255,255,255,0.08); border: 1px solid var(--border-strong); border-radius: 7px; padding: 5px 8px; font-size: 13px; color: var(--text); text-align: right; -moz-appearance: textfield; font-family: inherit; }
.align-ht-row input::-webkit-inner-spin-button, .align-ht-row input::-webkit-outer-spin-button { -webkit-appearance: none; }
.align-ht-row span { color: var(--text-dim); font-size: 13px; }
.align-hint { font-size: 11px; color: var(--text-faint); margin: 0 0 8px; }

/* Coloured dot markers used in alignment wizard labels */
.dot-a {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; background: var(--reflect); /* caster blue */
  vertical-align: middle; margin: 0 3px;
}
.dot-b {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; background: var(--gold); /* shadow endpoint gold */
  vertical-align: middle; margin: 0 3px;
}