/* Public lab mockups. Uses the existing charcoal, gold and teal palette. */

.calm-toggle,
.sound-toggle,
.rig-part,
.halo-command,
.globe-pin,
.globe-list button,
.bot-choice,
.lab-text-button,
.lab-action {
  font: inherit;
  color: var(--text);
  cursor: pointer;
}

.calm-toggle,
.sound-toggle {
  min-height: 44px;
  border: 1px solid rgba(215, 169, 63, 0.55);
  border-radius: 999px;
  background: #10140f;
  color: var(--gold-bright);
  padding: 8px 12px;
}

.calm-toggle[aria-pressed="true"],
.sound-toggle[aria-pressed="true"] {
  background: #1c2414;
  border-color: var(--focus-ring);
  color: var(--focus-ring);
}

.calm-toggle:focus-visible,
.sound-toggle:focus-visible,
.rig-part:focus-visible,
.halo-command:focus-visible,
.globe-pin:focus-visible,
.globe-list button:focus-visible,
.bot-choice:focus-visible,
.lab-text-button:focus-visible,
.lab-action:focus-visible,
#rigSlider:focus-visible,
#botName:focus-visible,
#missionGlobe:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.circuit-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

html.calm-mode .circuit-layer,
html.reduced-motion .circuit-layer {
  display: none;
}

.lab-rig-hero {
  align-items: start;
  min-height: 0;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
}

.lab-rig-hero h1 { font-size: clamp(2.1rem, 4vw, 3.8rem); line-height: 1.06; }
.lab-rig-hero .rig-photo { display: none; }

.rig-note {
  color: #c5d5cf;
  max-width: 46rem;
}

.rig-column {
  min-width: 0;
}

.rig-scroll {
  min-height: 0;
}

html.calm-mode .rig-scroll,
html.reduced-motion .rig-scroll {
  min-height: 0;
}

.rig-sticky {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 10px;
}

.rig-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transform-origin: center center;
  pointer-events: none;
  transition: opacity 160ms linear, transform 160ms linear;
}

.rig-photo-exploded {
  z-index: 2;
  opacity: 0;
  /* The exploded file is portrait, so its near-white canvas is narrower than
     the product photo. Multiply drops that white out against the frame.
     Brightness restores the render on #f7f7f7, since 255/247 cancels the
     multiply for every tone at or below the frame color. */
  mix-blend-mode: multiply;
  filter: brightness(1.03238866);
}

.rig-poster[hidden] {
  display: none !important;
}

html.calm-mode .rig-photo-assembled,
html.calm-mode .rig-photo-exploded,
html.reduced-motion .rig-photo-assembled,
html.reduced-motion .rig-photo-exploded {
  transition: none;
}

.rig-canvas,
.globe-webgl,
.bot-webgl {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
}

.globe-webgl { display: none; }
.globe-stage.is-webgl .globe-webgl { display: block; z-index: 2; }
.globe-stage.is-webgl #missionGlobe,
.globe-stage.is-webgl .globe-pin { visibility: hidden; }
.bot-preview { position: relative; overflow: hidden; }
.bot-preview.is-webgl { min-height: 280px; }
.bot-webgl { position: absolute; inset: 0; width: 100%; height: 100%; }
.cinematic-scope {
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.55), 0 0 28px rgba(109, 255, 218, 0.16);
}
.cinematic-screen {
  box-shadow: 0 0 32px rgba(215, 169, 63, 0.18), inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.rig-bay {
  position: relative;
  height: min(62vh, 560px);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid #6b5424;
  border-radius: 18px;
  background: #f7f7f7;
  isolation: isolate;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.rig-mark {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 14px;
  margin: 0;
  color: #d7c49a;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rig-part {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(215, 169, 63, 0.28);
  border-radius: 12px;
  background: rgba(8, 14, 12, 0.78);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  transition: transform 180ms linear, opacity 180ms linear, border-color 140ms linear;
}

.rig-part svg {
  width: 78%;
  height: 78%;
  overflow: visible;
}

.rig-part small {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  color: #d7ecdf;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.rig-part:hover,
.rig-part[aria-current="true"] {
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px rgba(109, 255, 218, 0.4), 0 0 22px rgba(109, 255, 218, 0.18);
}

.rig-part[aria-current="true"] {
  background: rgba(14, 32, 28, 0.92);
}

.rig-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.rig-slider {
  display: grid;
  gap: 6px;
  width: min(100%, 520px);
  color: #d5c7a4;
  font-size: 0.78rem;
  font-weight: 700;
}

.rig-slider-caption {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.rig-slider-ends {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

#rigSlider {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  accent-color: #d7a93f;
}

.rig-readout,
.globe-readout,
.nurse-screen,
.bot-card-wrap {
  border: 1px solid rgba(215, 169, 63, 0.38);
  background: rgba(7, 12, 11, 0.92);
  border-radius: 12px;
  padding: 14px 16px;
}

.rig-readout h2,
.talk-layout h2,
.globe-readout h2,
.bot-bench h2 {
  margin: 0.2rem 0 0.4rem;
  font-size: 1.35rem;
}

.rig-photo {
  margin: 0;
}

.rig-photo img {
  width: min(100%, 420px);
  height: auto;
}

.lab-section {
  display: grid;
  gap: 14px;
}

.sim-stamp {
  display: inline-block;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #d45b4f;
  color: #ffd0c8;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 800;
}

.talk-layout,
.globe-layout,
.bot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.trace-bay,
.globe-stage,
.bot-stage {
  position: relative;
  border: 1px solid #3e4f3a;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(16, 28, 24, 0.4), rgba(5, 8, 7, 0.2)),
    repeating-linear-gradient(180deg, rgba(109, 255, 218, 0.05) 0 1px, transparent 1px 18px);
  overflow: hidden;
}

#haloTrace,
#missionGlobe,
#botCard {
  display: block;
  width: 100%;
  height: auto;
  background: #070c0a;
}

.globe-stage {
  aspect-ratio: 1;
  max-height: 640px;
}

#missionGlobe {
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.globe-pin {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

.globe-pin span {
  display: block;
  width: 14px;
  height: 14px;
  margin: 15px auto;
  border: 2px solid #f3d37a;
  border-radius: 50%;
  background: #12362f;
  box-shadow: 0 0 0 6px rgba(109, 255, 218, 0.12);
}

.globe-pin[aria-current="true"] span {
  background: #f3d37a;
}

.globe-pin[hidden] {
  display: none;
}

.halo-command-grid,
.globe-list,
.bot-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.halo-command,
.globe-list button,
.bot-choice,
.lab-text-button,
.lab-action {
  min-height: 44px;
  border: 1px solid #4d5c45;
  border-radius: 8px;
  background: #101712;
  padding: 8px 12px;
}

.halo-command[aria-pressed="true"],
.bot-choice[aria-pressed="true"],
.globe-list button[aria-current="true"] {
  border-color: var(--focus-ring);
  color: var(--focus-ring);
}

.nurse-screen strong {
  display: block;
  margin: 8px 0;
  color: #f3d37a;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.04em;
}

.confirm-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed rgba(243, 211, 122, 0.7);
}

.confirm-panel[hidden] {
  display: none;
}

.lab-actions {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px;
}
.lab-actions .primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.bot-preview {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.bot-preview svg {
  width: min(100%, 280px);
  height: auto;
}

#botCard {
  border-radius: 12px;
}

.mission-drone {
  position: absolute;
  z-index: 4;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events: none;
  border: 1px solid #6dffda;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 35% 35%, #f3d37a, #12362f 68%);
  box-shadow: 0 0 12px rgba(109, 255, 218, 0.45);
}

.terrain-map {
  position: relative;
}

html.calm-mode .rig-part,
html.reduced-motion .rig-part,
html.calm-mode .halo-command,
html.reduced-motion .halo-command,
html.calm-mode .bot-choice,
html.reduced-motion .bot-choice {
  transition: none;
}

@media (hover: hover) {
  .halo-command:hover,
  .bot-choice:hover,
  .globe-list button:hover,
  .lab-text-button:hover,
  .lab-action:hover {
    transform: translateY(-2px);
    border-color: var(--gold-bright);
  }

  html.calm-mode .halo-command:hover,
  html.calm-mode .bot-choice:hover,
  html.calm-mode .globe-list button:hover,
  html.reduced-motion .halo-command:hover,
  html.reduced-motion .bot-choice:hover,
  html.reduced-motion .globe-list button:hover {
    transform: none;
  }
}

@media (max-width: 980px) {
  .talk-layout,
  .globe-layout,
  .bot-layout,
  .lab-rig-hero {
    grid-template-columns: 1fr;
  }

  .rig-bay {
    height: 460px;
    min-height: 420px;
  }
}

@media (max-width: 680px) {
  .rig-bay {
    height: clamp(260px, 78vw, 430px);
    min-height: 0;
  }

  .rig-part small {
    font-size: 0.55rem;
  }
}

#botChoices fieldset {
  margin: 0 0 12px;
  border: 1px solid #3e4f3a;
  border-radius: 12px;
}

#botChoices legend {
  padding: 0 6px;
  color: var(--gold-bright);
}

.bot-bench label {
  display: grid;
  gap: 6px;
  color: #d5c7a4;
  font-weight: 700;
}

#botName {
  width: 100%;
  min-height: 44px;
  border: 1px solid #4d5c45;
  border-radius: 8px;
  background: #070c0a;
  color: var(--text);
  padding: 8px 10px;
}

.mode-status {
  margin: 8px 0 0;
  color: #b7c8c2;
  font-size: 0.78rem;
}

@media (prefers-reduced-motion: reduce) {
  .rig-photo-assembled,
  .rig-photo-exploded {
    transition: none;
  }

  .circuit-layer {
    display: none;
  }

  .rig-scroll {
    min-height: 0;
  }

  .rig-part,
  .halo-command,
  .bot-choice,
  .globe-list button,
  .lab-action {
    transition: none;
  }

  .halo-command:hover,
  .bot-choice:hover,
  .globe-list button:hover {
    transform: none;
  }
}