/* Horizon 23.8.5 — Immersive Field UI
   The landscape is the interface. Existing technical controls remain in the DOM
   for compatibility/diagnostics, but disappear from the normal field experience. */

html, body {
  margin: 0 !important;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #08131d;
}

body {
  overscroll-behavior: none;
}

.immersive-shell {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Everything technical is hidden in normal field use. */
.immersive-shell > header,
.immersive-shell > .system-status,
.immersive-shell > #security-warning,
.immersive-shell > section.card:not(.guide-card):not(.diagnostic),
.immersive-shell > #look-button,
.immersive-shell > #request-status,
.immersive-shell > .list-panel {
  display: none !important;
}

/* Full-screen augmented landscape. */
.immersive-shell > .landscape-card.camera-card {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #08131d;
  overflow: hidden;
}

.camera-card .landscape-heading,
.camera-card .camera-actions,
.camera-card > #camera-status,
.camera-card > .landscape-scale,
.camera-card > .status {
  display: none !important;
}

#landscape-view.landscape-view {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}

#camera-video.camera-video,
#camera-placeholder.camera-placeholder,
.camera-shade,
#landscape-labels.landscape-labels {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

#camera-video.camera-video {
  object-fit: cover !important;
}

/* Two intentions, always reachable with one thumb. */
.immersive-shell > .guide-card {
  position: fixed !important;
  z-index: 20;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.guide-card .guide-heading,
.guide-card #guide-description {
  display: none !important;
}

#guide-modes.guide-modes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  max-width: 560px;
  margin: 0 auto;
  padding: 5px;
  border-radius: 18px;
  background: rgba(5, 17, 27, .58);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#guide-modes .guide-mode {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background: rgba(10, 27, 40, .52) !important;
  color: white !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: none !important;
}

#guide-modes .guide-mode.active {
  background: rgba(245, 250, 252, .94) !important;
  color: #10283a !important;
  border-color: rgba(255,255,255,.72) !important;
}

#guide-modes .guide-mode > span {
  font-size: .92rem;
}

#guide-modes .guide-mode strong {
  font-size: .86rem;
}

#guide-modes .guide-mode small {
  display: none !important;
}

/* Diagnostics remain available, but deliberately out of the primary UI. */
.immersive-shell > details.diagnostic {
  display: block !important;
  position: fixed !important;
  z-index: 30;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: auto !important;
  max-width: min(92vw, 430px);
  max-height: 76dvh;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

details.diagnostic > summary {
  width: 38px;
  height: 38px;
  overflow: hidden;
  color: transparent;
  list-style: none;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(5,17,27,.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

details.diagnostic > summary::-webkit-details-marker { display: none; }
details.diagnostic > summary::after {
  content: "⋯";
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: rgba(255,255,255,.86);
  font-size: 1.35rem;
  line-height: 1;
}

details.diagnostic[open] {
  padding: 8px !important;
  border-radius: 14px !important;
  background: rgba(5,17,27,.92) !important;
  overflow: auto;
}

details.diagnostic[open] > summary {
  margin-left: auto;
  margin-bottom: 8px;
}

details.diagnostic dl {
  color: white;
  font-size: .78rem;
}

/* Only problems interrupt the field view. */
.field-alert {
  position: fixed;
  z-index: 40;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  max-width: min(88vw, 560px);
  padding: 9px 13px;
  border-radius: 12px;
  background: rgba(5,17,27,.84);
  color: white;
  font-size: .88rem;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

/* Keep labels legible over a full-screen moving image. */
.landscape-label {
  max-width: min(62vw, 300px);
}

@media (orientation: landscape) {
  .immersive-shell > .guide-card {
    left: 50%;
    right: auto;
    width: min(520px, 58vw);
    transform: translateX(-50%);
  }
}

/* Sprint 26.2 — Field readability correction.
   Overrides only: preserve full-screen and diagnostics behavior from 23.8.5. */
#guide-modes.guide-modes {
  grid-template-columns: repeat(2, auto) !important;
  justify-content: center !important;
  gap: 6px !important;
  width: max-content !important;
  max-width: calc(100vw - 24px) !important;
  margin: 0 auto !important;
  padding: 3px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 999px !important;
  background: rgba(5,17,27,.10) !important;
  box-shadow: none !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}
#guide-modes .guide-mode {
  min-height: 42px !important; /* legacy safe minimum; visual height reduced by padding */
  width: auto !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(5,17,27,.16) !important;
  color: rgba(255,255,255,.88) !important;
  gap: 5px !important;
  box-shadow: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
#guide-modes .guide-mode.active {
  background: rgba(238,247,251,.30) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.46) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.16) !important;
}
#guide-modes .guide-mode > span { font-size: .78rem !important; }
#guide-modes .guide-mode strong { font-size: .78rem !important; }
#guide-modes .guide-mode small { display: none !important; }
.immersive-shell > .guide-card {
  bottom: max(8px, env(safe-area-inset-bottom)) !important;
  pointer-events: none;
}
#guide-modes { pointer-events: auto; }
.landscape-label {
  max-width: min(54vw, 260px) !important;
  padding: .34rem .48rem !important;
  border-radius: .58rem !important;
  background: rgba(248,251,252,.76) !important;
  border: 1px solid rgba(255,255,255,.48) !important;
  box-shadow: 0 .18rem .55rem rgba(5,17,27,.20) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}
.landscape-label strong { font-size: .74rem !important; }
.landscape-label span { font-size: .61rem !important; }
.landscape-label.primary-target { transform: translate(-50%, -50%) !important; }
@media (orientation: landscape) {
  .immersive-shell > .guide-card {
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    transform: translateX(-50%) !important;
  }
}

/* Sprint 26.3 — mode controls truly transparent.
   Final override: keep the selected mode visible without covering the landscape. */
#guide-modes.guide-modes {
  background: rgba(5, 17, 27, .025) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#guide-modes .guide-mode {
  background: rgba(5, 17, 27, .045) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: rgba(255, 255, 255, .82) !important;
  box-shadow: none !important;
}

#guide-modes .guide-mode.active {
  background: rgba(255, 255, 255, .11) !important;
  border-color: rgba(255, 255, 255, .42) !important;
  color: rgba(255, 255, 255, .98) !important;
  box-shadow: none !important;
}

#guide-modes .guide-mode:active,
#guide-modes .guide-mode:focus-visible {
  background: rgba(255, 255, 255, .15) !important;
}

/* Sprint 26.4 — controls without opaque fills.
   The selected mode is indicated by text weight and an underline only. */
#guide-modes.guide-modes {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#guide-modes .guide-mode,
#guide-modes .guide-mode.active,
#guide-modes .guide-mode:active,
#guide-modes .guide-mode:focus,
#guide-modes .guide-mode:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#guide-modes .guide-mode {
  border-color: transparent !important;
  color: rgba(255,255,255,.72) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.95) !important;
}

#guide-modes .guide-mode.active {
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255,255,255,.82);
}