NODEDC_MISSION_CORE/apps/control-station/src/styles/l3-pointpillars-visual-audit.css

.l3-visual-audit {
  display: grid;
  height: clamp(36rem, 68vh, 54rem);
  min-height: 36rem;
}

.l3-visual-audit > .laboratory-evidence-viewer {
  min-height: 0;
}

.l3-visual-audit__scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--nodedc-canvas);
}

.l3-visual-audit__scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.l32-camera-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--nodedc-canvas);
}

.l32-camera-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.l32-camera-scene > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.recorded-evidence-video-scene,
.recorded-evidence-image-scene {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--nodedc-canvas);
}

.recorded-evidence-image-scene > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

.recorded-evidence-video-scene > .recorded-media-player {
  position: absolute;
  inset: 0;
}

.recorded-evidence-video-scene > canvas,
.recorded-evidence-image-scene > canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.recorded-evidence-image-scene > .l3-visual-audit__state {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.recorded-evidence-semantic-mask-overlay__error {
  position: absolute;
  z-index: 4;
  top: 4.9rem;
  left: 50%;
  max-width: min(32rem, calc(100% - 2rem));
  border: 1px solid rgb(var(--nodedc-warning-rgb) / 0.44);
  border-radius: var(--nodedc-radius-control-compact);
  background: var(--nodedc-floating-surface);
  padding: 0.42rem 0.58rem;
  color: rgb(var(--nodedc-warning-rgb));
  font-size: 0.54rem;
  text-align: center;
  backdrop-filter: blur(var(--nodedc-blur-control));
  pointer-events: none;
  transform: translateX(-50%);
}

.m4-replay-threat-evidence-viewer .laboratory-metric-evidence-scene__legend,
.m4-replay-threat-evidence-viewer .m4-replay-threat-visual__overlay {
  bottom: 6.2rem;
}

.m4-replay-threat-visual__timeline {
  width: 100%;
}

.e46e-ready-stack-video {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: var(--nodedc-canvas);
}

.e46e-ready-stack-video > video,
.e46e-ready-stack-video > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.l3-visual-audit__state {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 22rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  background: var(--nodedc-canvas);
  color: var(--nodedc-text-muted);
  font-size: 0.62rem;
}

.l3-visual-audit__actions {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 0.45rem;
}

.l3-visual-audit__pagination {
  display: flex;
  flex: none;
  gap: 0.35rem;
}

.l3-visual-audit__actions .nodedc-select-anchor,
.l3-visual-audit__actions .nodedc-select {
  width: clamp(12rem, 23vw, 22rem);
}

.l3-visual-audit
  .laboratory-evidence-viewer__controls:has(.l3-visual-audit__actions) {
  right: 0.6rem;
  left: 0.6rem;
}

.l3-visual-audit__overlay {
  position: absolute;
  z-index: 3;
  left: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  width: min(58rem, calc(100% - 1.2rem));
  grid-template-columns: minmax(8rem, 0.55fr) minmax(13rem, 1fr) minmax(19rem, 1.2fr);
  align-items: end;
  gap: 0.7rem;
  border-radius: var(--nodedc-radius-control-compact);
  background: var(--nodedc-floating-surface);
  padding: 0.55rem 0.65rem;
  color: var(--nodedc-text-secondary);
  backdrop-filter: blur(var(--nodedc-blur-control));
  pointer-events: none;
}

.l3-visual-audit__overlay > div {
  display: grid;
  min-width: 0;
  gap: 0.12rem;
}

.l3-visual-audit__overlay span,
.l3-visual-audit__overlay small {
  color: var(--nodedc-text-muted);
  font-size: 0.49rem;
  line-height: 1.35;
}

.l3-visual-audit__overlay strong {
  color: var(--nodedc-text-primary);
  font-size: 0.6rem;
}

.l3-visual-audit__overlay--video {
  bottom: 3.55rem;
}

.l3-visual-audit__legend {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.6rem;
}

.l3-visual-audit__legend span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--nodedc-text-secondary);
  white-space: nowrap;
}

.l3-visual-audit__legend span::before {
  width: 0.42rem;
  height: 0.42rem;
  flex: none;
  border-radius: 50%;
  background: var(--nodedc-text-primary);
  content: "";
}

.l3-visual-audit__legend span[data-tone="tp"]::before {
  background: rgb(var(--nodedc-success-rgb));
}

.l3-visual-audit__legend span[data-tone="fp"]::before {
  background: rgb(var(--nodedc-danger-rgb));
}

.l3-visual-audit__legend span[data-tone="fn"]::before {
  background: rgb(var(--nodedc-warning-rgb));
}

.l3-visual-audit__legend span[data-tone="prediction"]::before {
  background: rgb(var(--nodedc-accent-rgb));
}

.l3-visual-audit__legend span[data-tone="warning"]::before {
  background: #ffc447;
}

@media (max-width: 900px) {
  .l3-visual-audit__overlay {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .l3-visual-audit__legend {
    display: none;
  }
}