/* Camera controls. The Navigate card floats docked left in .cam; the 3D card
   (#cam-card-3d) lives INSIDE the right-edge "3D" drawer-tab (`boot/rail-features.js`
   mounts it — see the .drawer-body overrides below). Custom sliders (rail/fill/ticks/
   limit-pins) driven by camera.js via the --value-x/--min-x/--max-x custom properties.
   The crafted gradients keep their literals for now; tokenise with care (the
   rail/knob blues are tuned against the glass card). */
.cam {
  position: absolute;
  z-index: 6;
  top: calc(var(--hdr-h) + 10px);
  left: 12px;
  right: calc(var(--rail-w) + 10px + var(--cam-right-reserve)); /* clears the floating dock (10px inset) */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--ink-dim);
  pointer-events: none;
}
.cam-control {
  min-width: 0;
  flex: 1 1 0;
  display: grid;
  gap: 7px;
  width: auto;
  max-width: var(--cam-card-w);
  padding: 12px 14px 13px;
  border: 1px solid rgba(74,104,84,.68);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(22,38,28,.84), rgba(11,21,14,.76));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 6px 14px rgba(0,0,0,.16);
  pointer-events: auto;
  backdrop-filter: blur(8px);
}
/* 3D card: FUSED into the right-edge "3D" drawer (rail paneMount — James
   2026-07-04). `boot/rail-features.js` moves #cam-card-3d into #rail-stash and the drawer
   body on open; it never floats over the map anymore. The header switch is still
   THE mode toggle. The .cam rule only covers the pre-boot flash. */
.cam .cam-card-3d { display: none; }
/* Inside the drawer the panel supplies the card chrome — the floating skin comes off. */
.drawer-body .cam-card-3d { border: 0; background: none; box-shadow: none;
  backdrop-filter: none; max-width: none; }
.drawer-body .cam-card-3d .cam-3d-body { width: auto; }
.cam-card-3d .cam-3d-body { display: none; width: calc(var(--cam-card-w) - 18px); }
.cam-card-3d.cam-3d-on .cam-3d-body { display: grid; gap: 3px; }
.cam-card-3d.cam-3d-on {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
/* Mesh actually engaged (3D on AND inside the terrain zoom band). */
.cam-card-3d.cam-3d-on.cam-3d-active {
  background:
    linear-gradient(180deg, rgba(28,46,34,.92), rgba(11,21,15,.82)),
    linear-gradient(90deg, rgba(76,166,255,.22), rgba(92,190,150,.14));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 0 0 1px rgba(89,181,255,.08),
    0 7px 16px rgba(0,0,0,.18);
}
/* 3D header row — the label + switch IS the mode toggle. */
.cam-3d-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
}
.cam-3d-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.cam-3d-title {
  color: var(--ink);
  font-size: 20px;
  font-weight: 750;
  line-height: 1;
}
.cam-3d-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cam-3d-track {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f2b34, #25333e);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.045);
  transition: background .18s;
}
.cam-3d-knob {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #f8fbff 0 18%, #8bd0ff 19% 48%, #2f82c7 49% 100%);
  box-shadow: 0 0 0 2px rgba(13,19,24,.9), 0 5px 12px rgba(0,0,0,.32);
  transition: left .18s;
}
.cam-3d-switch input:checked + .cam-3d-track {
  background: linear-gradient(90deg, #2b5f8f, var(--accent));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 0 10px rgba(76,166,255,.28);
}
.cam-3d-switch input:checked + .cam-3d-track .cam-3d-knob { left: 28px; }
.cam-3d-switch input:focus-visible + .cam-3d-track {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);
}
.cam-card-3d.cam-3d-unavailable .cam-3d-title { color: var(--ink-dim); }
.cam-card-3d.cam-3d-unavailable .cam-3d-switch { cursor: not-allowed; }
.cam-card-3d.cam-3d-unavailable .cam-3d-track { opacity: .42; filter: grayscale(1); }
.cam-card-3d.cam-3d-unavailable .cam-tune-btn { display: none; }
.cam-card-3d.cam-3d-unavailable .cam-3d-body { display: none; }
.cam-3d-unavailable-note { display: grid; gap: 5px; margin-top: 10px; padding: 14px;
  border: 1px solid color-mix(in srgb, var(--ink-dim) 32%, var(--line)); border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 72%, black); color: var(--ink-dim); }
.cam-3d-unavailable-note[hidden] { display: none; }
.cam-3d-unavailable-note strong { color: var(--ink); font-size: 18px; }
.cam-3d-unavailable-note span { font-size: 16px; }
/* Tune tier — the dev-ish knobs stay hidden until the card's gear is pressed. */
.cam-tune-btn {
  margin-left: auto;
  align-self: center;
  border: 0;
  padding: 2px 4px;
  background: none;
  color: var(--ink-dim);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  opacity: .7;
}
.cam-tune-btn:hover { opacity: 1; color: var(--accent); }
.cam-control.cam-tuning .cam-tune-btn { opacity: 1; color: var(--accent); }
/* While tuning, the limits readout (margin-left:auto) owns the space; gear sits after. */
.cam-control.cam-tuning .cam-control-head .cam-tune-btn { margin-left: 8px; }
.cam-control:not(.cam-tuning) .cam-tune-only { display: none !important; }
.cam-control:not(.cam-tuning) .cam-limit-thumb { display: none; }
.cam-control.cam-tuning div.cam-tune-only { display: grid; gap: 8px; }
/* Tune mode = settings in use: open the whole card up so the knobs are easy to grab. */
.cam-control.cam-tuning { gap: 11px; padding: 14px 16px 16px; }
/* Hairline separators between the 3D card's control groups (Pitch | Terrain | Exaggeration). */
.cam-card-3d .cam-3d-body div.cam-tune-only .cam-control-head {
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 11px;
  margin-top: 2px;
}
/* No gear (nothing to tune) while the 3D body is collapsed; terrain band hint on the
   zoom rail only means something with 3D on. */
.cam-card-3d:not(.cam-3d-on) .cam-tune-btn { display: none; }
/* #app scope, NOT .cam — the 3D checkbox lives in the drawer/#rail-stash now
   (Codex review 2026-07-04: .cam:has() could never match → band hidden forever). */
#app:not(:has(#terrain-3d-toggle:checked)) .cam-terrain-band { display: none; }
/* Exaggeration (parked here until a real settings surface exists) — plain slider. */
.cam-tune-range {
  width: 100%;
  height: 22px;
  margin: 2px 0 4px;
  accent-color: var(--accent);
  cursor: ew-resize;
}

.cam-control-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
  font-size: 14px;
  min-height: 26px;
}
.cam-control-head span:first-child {
  color: var(--ink);
  font-size: 21px;
  font-weight: 750;
  line-height: 1;
}
.cam-control-head output {
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
}
.cam-control-sub {
  margin-left: auto;
  color: color-mix(in srgb, var(--warn) 78%, transparent);
  font-size: 13px;
  font-weight: 700;
}
.cam-control-sub output { color: #ffd7aa; font-size: 14px; }
.cam-mode-toggle,
.cam-snap-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.cam-mode-toggle {
  margin-left: 4px;
}
.cam-mode-toggle input,
.cam-snap-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}
.cam-mode-toggle:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
.cam-mode-toggle input:disabled {
  cursor: not-allowed;
}
/* (These were gated on the old details panel being expanded — the panel is gone,
   so the compact-map sizing is now the one and only sizing.) */
.cam-control-head span:first-child { font-size: 19px; }
.cam-control-head output { font-size: 15px; }
.cam-control-head { gap: 4px; }
.cam-mode-toggle, .cam-snap-toggle { font-size: 12px; }
.cam-slider {
  --value-x: 0%;
  --min-x: 0%;
  --max-x: 85.7143%;
  --track-h: 9px;
  position: relative;
  height: 40px;
  margin-inline: 10px;
  user-select: none;
  touch-action: none;
}
.cam-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: var(--track-h);
  overflow: visible;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f2b34, #25333e);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.045);
}
.cam-rail-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--value-x);
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(90deg, #4ca6ff, #78c8ff);
  box-shadow: 0 0 14px rgba(76,166,255,.22);
}
.cam-terrain-band {
  position: absolute;
  left: var(--terrain-min-x, 30%);
  right: calc(100% - var(--terrain-max-x, 80%));
  top: 2px;
  bottom: 2px;
  z-index: 2;
  border-radius: inherit;
  background:
    repeating-linear-gradient(135deg, rgba(242,166,90,.34) 0 5px, rgba(242,166,90,.14) 5px 10px),
    rgba(54,37,20,.48);
  box-shadow: inset 0 0 0 1px rgba(242,166,90,.18);
  pointer-events: none;
}
.cam-limit-mask {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,95,95,.15) 0 5px, rgba(255,95,95,.035) 5px 10px),
    rgba(21,24,27,.62);
}
.cam-limit-mask-low {
  left: 0;
  width: var(--min-x);
  border-radius: 999px 0 0 999px;
  box-shadow: inset -1px 0 0 rgba(255,95,95,.78);
}
.cam-limit-mask-high {
  left: var(--max-x);
  right: 0;
  border-radius: 0 999px 999px 0;
  box-shadow: inset 1px 0 0 rgba(255,95,95,.78);
}
.cam-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 9px;
  z-index: 4;
  transform: translateX(-.5px);
  background: rgba(255,255,255,.24);
}
.cam-tick strong {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,.78);
}
.cam-tick-default {
  width: 2px;
  background: color-mix(in srgb, var(--ok) 68%, transparent);
}
.cam-tick-default strong { color: var(--ok); }
.cam-handle {
  position: absolute;
  top: 15.5px;
  z-index: 6;
  width: 20px;
  height: 28px;
  border: 0;
  padding: 0;
  cursor: ew-resize;
  background: none;
}
.cam-handle-single {
  left: var(--value-x);
  top: 9px; /* ball bottom flush with the rail bottom — clears the limit pins + tick labels */
  width: 22px;
  height: 22px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 35% 30%, #f8fbff 0 18%, #8bd0ff 19% 48%, #2f82c7 49% 100%);
  box-shadow: 0 0 0 2px rgba(13,19,24,.9), 0 0 0 4px rgba(97,180,255,.24), 0 7px 16px rgba(0,0,0,.38);
}
.cam-handle[data-dragging="true"] { filter: brightness(1.08); }
.cam-limit-thumb {
  position: absolute;
  top: 7px; /* pin bottom flush with the rail bottom; tip rises above the ball */
  z-index: 5;
  width: 24px;
  height: 26px;
  border: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  cursor: ew-resize;
}
.cam-limit-thumb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  bottom: 3px;
  width: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8e8e, #db3f3f);
  box-shadow:
    0 0 0 2px rgba(13,19,24,.92),
    0 0 0 4px rgba(255,95,95,.18),
    0 6px 14px rgba(0,0,0,.35);
}
.cam-limit-thumb-min { left: var(--min-x); }
.cam-limit-thumb-max { left: var(--max-x); }
.cam-limit-thumb[data-dragging="true"]::before { filter: brightness(1.1); }
.cam-native-range {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cam-heading-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.cam-north-btn {
  width: 34px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.cam-north-btn:hover { border-color: var(--accent); color: var(--accent); }