NODEDC_MISSION_CORE/apps/control-station/src/styles/m4-replay-threat.css

.laboratory-metric-evidence-scene,
.laboratory-metric-evidence-scene__viewport {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.laboratory-metric-evidence-scene {
  position: relative;
  overflow: hidden;
  background: var(--nodedc-canvas);
}

.m4-replay-threat-visual__deck {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.m4-replay-threat-visual__deck[data-split="true"] {
  display: block;
}

.m4-replay-threat-visual__unified-content {
  position: absolute;
  z-index: 1;
  inset: 0;
  min-width: 0;
  min-height: 0;
}

.m4-replay-threat-visual__unified-content > *,
.m4-replay-threat-visual__unified-content .rerun-viewport {
  width: 100%;
  height: 100%;
}

.m4-replay-threat-visual__deck[data-native-rerun="true"] > .nodedc-split-pane {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.m4-replay-threat-visual__deck[data-native-rerun="true"]
  .m4-replay-threat-visual__pane {
  background: transparent;
  pointer-events: none;
}

.m4-replay-threat-visual__deck[data-native-rerun="true"]
  .nodedc-split-pane__separator,
.m4-replay-threat-visual__deck[data-native-rerun="true"]
  .m4-replay-threat-visual__pane-toolbar,
.m4-replay-threat-visual__deck[data-native-rerun="true"]
  .m4-replay-threat-visual__pane-toolbar * {
  pointer-events: auto;
}

.canonical-vegetation-rerun-replay {
  width: 100%;
  min-width: 0;
}

.canonical-vegetation-rerun-replay:not([data-presentation-state="ready"])
  .m4-replay-threat-visual__pane-toolbar,
.canonical-vegetation-rerun-replay:not([data-presentation-state="ready"])
  .laboratory-evidence-viewer__controls,
.canonical-vegetation-rerun-replay:not([data-presentation-state="ready"])
  .laboratory-evidence-viewer__transport {
  visibility: hidden;
  pointer-events: none;
}

.canonical-vegetation-rerun-replay[data-presentation-state="loading"]
  .m4-replay-threat-visual__unified-content {
  visibility: hidden;
}

.canonical-vegetation-rerun-replay__viewport-lock {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.canonical-vegetation-rerun-replay__loading {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--nodedc-canvas);
  pointer-events: none;
}

.m4-replay-threat-visual__deck[data-empty="true"] > .l3-visual-audit__state {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.m4-replay-threat-visual__pane {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--nodedc-canvas);
}

.m4-replay-threat-visual__deck > .nodedc-split-pane,
.m4-replay-threat-visual__deck > .nodedc-split-pane > .nodedc-split-pane__panel,
.m4-replay-threat-visual__deck > .nodedc-split-pane > .nodedc-split-pane__panel > .m4-replay-threat-visual__pane,
.m4-replay-threat-visual__media-layer {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.m4-replay-threat-visual__media-layer > * {
  width: 100%;
  height: 100%;
}

.m4-replay-threat-visual__pane > .recorded-evidence-video-scene,
.m4-replay-threat-visual__pane > .recorded-evidence-image-scene,
.m4-replay-threat-visual__pane > .laboratory-metric-evidence-scene,
.m4-replay-threat-visual__pane > .l3-visual-audit__state {
  width: 100%;
  height: 100%;
}

.m4-replay-threat-visual__pane-toolbar {
  position: absolute;
  z-index: 4;
  top: 0.6rem;
  right: 0.6rem;
  left: 0.6rem;
  display: flex;
  min-width: 0;
  align-items: center;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 0.35rem;
  pointer-events: none;
}

.m4-replay-threat-visual__pane-toolbar[data-pane-toolbar="media"] {
  justify-content: flex-start;
}

.m4-replay-threat-evidence-viewer[data-mode-controls="content"]:has(
  .m4-replay-threat-visual__review-controls
) .m4-replay-threat-visual__pane-toolbar[data-pane-toolbar="media"] {
  top: 3.8rem;
}

.m4-replay-threat-visual__pane-toolbar[data-pane-toolbar="spatial"] {
  justify-content: flex-start;
}

.m4-replay-threat-evidence-viewer[data-mode-controls="content"]
  .m4-replay-threat-visual__pane-toolbar[data-pane-toolbar="spatial"],
.m4-replay-threat-evidence-viewer[data-mode-controls="content"]
  .m4-replay-threat-visual__deck:not([data-split="true"])
  .m4-replay-threat-visual__pane-toolbar[data-pane-toolbar="media"] {
  /* The two viewer-wide actions stay at the deck's right edge. Keep their
     complete hit area out of this viewport-owned toolbar at every split. */
  right: 7rem;
}

.m4-replay-threat-visual__pane-toolbar > *,
.m4-replay-threat-visual__spatial-toolbar-end > * {
  pointer-events: auto;
}

.m4-replay-threat-visual__spatial-toolbar-end {
  display: contents;
}

.m4-replay-threat-visual__pane-toolbar > .m4-replay-threat-visual__pane-layer-controls,
.m4-replay-threat-visual__spatial-toolbar-end > .m4-replay-threat-visual__pane-layer-controls {
  /* A viewport toolbar is one adaptive flex sequence. `display: contents`
     keeps the semantic layer group while allowing each control to move to the
     next row only when the viewport itself runs out of width. */
  display: contents;
}

.m4-replay-threat-visual__pane-mode-controls {
  flex: none;
  pointer-events: auto;
}

.m4-replay-threat-visual__pane-status {
  position: absolute;
  z-index: 4;
  top: 4.2rem;
  right: 0.6rem;
  left: calc(33.333333% + 1.2rem);
  border-radius: var(--nodedc-radius-control-compact);
  background: var(--nodedc-floating-surface);
  padding: 0.42rem 0.58rem;
  color: var(--nodedc-text-secondary);
  font-size: 0.54rem;
  text-align: left;
  backdrop-filter: blur(var(--nodedc-blur-control));
  pointer-events: none;
}

.m4-replay-threat-evidence-viewer
  .m4-replay-threat-visual__pane[data-pane="spatial"]
  .laboratory-metric-evidence-scene__legend {
  box-sizing: border-box;
  top: 4.2rem;
  right: auto;
  bottom: auto;
  left: 0.6rem;
  width: 33.333333%;
  max-height: calc(100% - 8.4rem);
  flex-flow: column nowrap;
  align-items: flex-start;
  gap: 0.3rem;
  overflow-y: auto;
  background: color-mix(in srgb, var(--nodedc-floating-surface) 80%, transparent);
}

.m4-replay-threat-visual__buffering {
  position: absolute;
  z-index: 5;
  top: 4.9rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  outline: 0;
  border-radius: var(--nodedc-radius-control-compact);
  background: var(--nodedc-floating-surface);
  padding: 0.42rem 0.58rem;
  color: var(--nodedc-text-secondary);
  font-size: 0.54rem;
  backdrop-filter: blur(var(--nodedc-blur-control));
  pointer-events: none;
  transform: translateX(-50%);
}

.m4-replay-threat-evidence-viewer .laboratory-evidence-viewer__controls {
  width: calc(100% - 1.2rem);
  gap: 0.3rem;
}

.m4-replay-threat-evidence-viewer[data-mode-controls="content"] .laboratory-evidence-viewer__controls,
.m4-replay-threat-evidence-viewer[data-mode-controls="content"] .l3-visual-audit__actions {
  pointer-events: none;
}

.canonical-vegetation-rerun-replay
  .m4-replay-threat-evidence-viewer[data-mode-controls="content"]
  .laboratory-evidence-viewer__controls {
  right: 0.6rem;
  left: auto;
  width: auto;
  justify-content: flex-end;
}

.m4-replay-threat-evidence-viewer[data-mode-controls="content"] .laboratory-evidence-viewer__controls > .nodedc-icon-button {
  pointer-events: auto;
}

.m4-replay-threat-evidence-viewer .l3-visual-audit__actions {
  justify-content: space-between;
}

.m4-replay-threat-visual__single-pane-controls {
  margin-left: auto;
}

.m4-replay-threat-visual__review-controls,
.m4-replay-threat-visual__pane-layer-controls,
.m4-replay-threat-visual__single-pane-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.3rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.m4-replay-threat-visual__layer-with-settings {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.18rem;
  border: 0;
  border-radius: 999px;
  background: var(--nodedc-glass-control-bg);
  padding: 0.12rem;
}

.m4-replay-threat-visual__layer-with-settings > .nodedc-icon-button {
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  outline: 0;
  box-shadow: none;
}

.m4-replay-threat-visual__layer-with-settings > .nodedc-icon-button:focus-visible {
  background: var(--nodedc-focus-surface);
  box-shadow: inset 0 0 0 1px rgb(var(--nodedc-accent-rgb) / 0.22);
}

.m4-replay-threat-visual__review-controls,
.m4-replay-threat-visual__review-controls > *,
.m4-replay-threat-visual__single-pane-controls,
.m4-replay-threat-visual__single-pane-controls > * {
  pointer-events: auto;
}

.m4-replay-threat-visual__review-controls::-webkit-scrollbar,
.m4-replay-threat-visual__pane-layer-controls::-webkit-scrollbar,
.m4-replay-threat-visual__single-pane-controls::-webkit-scrollbar {
  display: none;
}

.m4-replay-threat-evidence-viewer .laboratory-evidence-viewer__transport {
  bottom: 0.3rem;
}

.m4-replay-threat-visual__timeline {
  padding: 0.5rem 0.55rem;
}

.m4-replay-threat-visual__timeline .observation-timeline__playback {
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
}

.canonical-vegetation-rerun-replay__timeline .observation-timeline__playback {
  grid-template-columns: auto auto minmax(0, 1fr) auto;
}

.m4-replay-threat-visual__overlay {
  box-sizing: border-box;
  min-width: 0;
  align-items: stretch;
  width: min(17.5rem, calc(var(--m4-replay-threat-overlay-pane-width, 100%) - 1.2rem));
  max-width: none;
  grid-auto-rows: 3.8rem;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  overflow: hidden;
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

.m4-replay-threat-visual__overlay > div {
  box-sizing: border-box;
  height: 3.8rem;
  grid-template-rows: auto auto minmax(1.32rem, 1fr);
  border-radius: var(--nodedc-radius-control-compact);
  background: color-mix(in srgb, var(--nodedc-floating-surface) 80%, transparent);
  padding: 0.55rem 0.65rem;
  backdrop-filter: blur(var(--nodedc-blur-control));
}

.m4-replay-threat-visual__overlay span,
.m4-replay-threat-visual__overlay strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m4-replay-threat-visual__overlay small {
  display: -webkit-box;
  min-height: 1.32rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

@media (max-width: 900px) {
  .m4-replay-threat-visual__overlay {
    width: min(17.5rem, calc(100% - 1.2rem));
    max-width: calc(100% - 1.2rem);
  }
}

.laboratory-metric-evidence-scene__viewport {
  position: absolute;
  inset: 0;
}

.laboratory-metric-evidence-scene__viewport canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.laboratory-metric-evidence-scene__viewport canvas:active {
  cursor: grabbing;
}

.laboratory-metric-evidence-scene__viewport p {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--nodedc-text-muted);
  font-size: 0.62rem;
}

.laboratory-metric-evidence-scene__legend {
  background: var(--nodedc-floating-surface);
  backdrop-filter: blur(var(--nodedc-blur-control));
}

.laboratory-metric-evidence-scene__legend {
  position: absolute;
  z-index: 3;
  right: 0.6rem;
  bottom: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  border-radius: var(--nodedc-radius-control-compact);
  padding: 0.42rem 0.55rem;
  color: var(--nodedc-text-secondary);
}

.laboratory-metric-evidence-scene__legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.5rem;
}

.laboratory-metric-evidence-scene__legend span::before {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--laboratory-metric-legend-color, var(--nodedc-text-muted));
  content: "";
}

.laboratory-metric-evidence-scene__legend span[data-decision="threat"]::before {
  background: rgb(var(--nodedc-danger-rgb));
}

.laboratory-metric-evidence-scene__legend span[data-decision="not-threat"]::before {
  background: rgb(var(--nodedc-success-rgb));
}

.laboratory-metric-evidence-scene__legend span[data-decision="unknown"]::before {
  background: rgb(var(--nodedc-warning-rgb));
}

.laboratory-metric-evidence-scene__legend span[data-decision="rolling"]::before {
  box-sizing: border-box;
  border: 1px solid rgb(var(--nodedc-accent-rgb));
  background: transparent;
}

.laboratory-metric-evidence-scene__legend span[data-decision="low-step"]::before {
  box-sizing: border-box;
  border: 1px solid rgb(var(--nodedc-foreground-rgb));
  background: rgb(var(--nodedc-accent-rgb));
}

.laboratory-metric-evidence-scene__legend span[data-decision="local-surface"]::before {
  background: rgb(var(--nodedc-accent-rgb));
  opacity: 0.72;
}

.laboratory-metric-evidence-scene__legend span[data-decision="ground-support"]::before {
  background: rgb(var(--nodedc-success-rgb));
}

.laboratory-metric-evidence-scene__legend span[data-decision="nonground-occupied"]::before {
  background: rgb(var(--nodedc-danger-rgb));
}

.laboratory-metric-evidence-scene__legend span[data-decision="unknown-rejected"]::before {
  background: rgb(var(--nodedc-warning-rgb));
}

.laboratory-metric-evidence-scene__legend span[data-decision="unobserved"]::before {
  background: var(--nodedc-text-muted);
  opacity: 0.42;
}

.laboratory-metric-evidence-scene__legend span[data-decision="performance"] {
  font-variant-numeric: tabular-nums;
}

.laboratory-metric-evidence-scene__legend span[data-decision="performance"]::before {
  box-sizing: border-box;
  border: 1px solid rgb(var(--nodedc-accent-rgb));
  background: transparent;
}