/*! Strand UI | MIT License | dillingerstaffing.com */

/* cf: instrument-map-slot */
/* cf: surface-tokens */

.strand-instrument-viewport {
  background: var(--strand-blue-abyss);
  color: var(--strand-gray-100);
  border-radius: var(--strand-radius-lg);
  overflow: hidden;
  position: relative;
  padding: var(--strand-space-5);
}

.strand-instrument-viewport__label {
  color: var(--strand-gray-400);
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  letter-spacing: var(--strand-tracking-widest);
  text-transform: uppercase;
}

.strand-instrument-viewport__value {
  color: var(--strand-on-blue-primary);
  font-family: var(--strand-font-mono);
  font-variant-numeric: tabular-nums;
}

.strand-instrument-viewport .strand-instrument-viewport__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Optional grid overlay ── */
.strand-instrument-viewport--grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--strand-viewport-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--strand-viewport-grid-line) 1px, transparent 1px);
  background-size: var(--strand-viewport-grid-size) var(--strand-viewport-grid-size);
  pointer-events: none;
}

.strand-instrument-viewport--full-bleed {
  width: 100%;
  height: calc(100vh - var(--strand-nav-height));
  height: calc(100dvh - var(--strand-nav-height));
  border-radius: 0;
}

/* ── Atmospheric grid overlay (always-on for full-bleed) ── */
.strand-instrument-viewport--full-bleed::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--strand-viewport-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--strand-viewport-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 3;
}

/* ── Ambient breathing glow (DL Part 7: alive signal) ── */
.strand-instrument-viewport--full-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient( ellipse 60% 50% at 50% 40%, var(--strand-instrument-glow-soft) 0%, transparent 70% );
  pointer-events: none;
  z-index: 2;
  animation: strand-instrument-breathe 8s var(--strand-ease-in-out-sine) infinite;
}

@keyframes strand-instrument-breathe {
  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

.strand-body--instrument {
  background: var(--strand-instrument-bg);
  overflow: hidden;
}

.strand-instrument-viewport .maplibregl-marker {
  z-index: 6 !important;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-left {
  opacity: 0.25;
  transition: opacity var(--strand-duration-fast) ease;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-left:hover {
  opacity: 0.7;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right {
  bottom: 40px;
  right: 12px;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group {
  background: rgba(15, 25, 42, 0.85);
  border: 1px solid rgba(59, 142, 246, 0.2);
  border-radius: var(--strand-radius-md);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--strand-gray-300);
  cursor: pointer;
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button:hover {
  color: var(--strand-blue-primary);
}

.strand-instrument-viewport .maplibregl-ctrl-bottom-right .maplibregl-ctrl-group button + button {
  border-top: 1px solid rgba(59, 142, 246, 0.15);
}

.strand-instrument-viewport .maplibregl-popup-content {
  font-family: var(--strand-font-mono);
  font-size: var(--strand-text-xs);
  background: var(--strand-instrument-bg-translucent);
  color: var(--strand-instrument-text-primary);
  border: 1px solid rgba(59, 142, 246, 0.2);
  border-radius: var(--strand-radius-md);
  padding: var(--strand-space-2) var(--strand-space-3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.strand-instrument-viewport .maplibregl-popup-tip {
  border-top-color: var(--strand-instrument-bg-translucent);
}

.strand-instrument-viewport,
.strand-body--instrument {
  --strand-alert-bg: color-mix(in srgb, var(--strand-gray-400) 12%, transparent);
  --strand-alert-color: var(--strand-on-blue-primary);
  --strand-alert-dismiss-color: var(--strand-gray-300);
  --strand-alert-dismiss-hover-bg: color-mix(in srgb, var(--strand-gray-400) 20%, transparent);
  --strand-alert-dismiss-hover-color: var(--strand-on-blue-primary);
  --strand-alert-error-status-color: var(--strand-red-tint);
  --strand-alert-info-status-color: var(--strand-blue-indicator);
  --strand-alert-success-status-color: var(--strand-teal-tint);
  --strand-alert-warning-status-color: var(--strand-amber-tint);
  --strand-bar-chart-amount-color: var(--strand-gray-300);
  --strand-bar-chart-label-color: var(--strand-gray-400);
  --strand-big-mono-time-color: var(--strand-on-blue-primary);
  --strand-big-mono-time-sep-color: var(--strand-gray-300);
  --strand-btn-ghost-border-color: rgba(255, 255, 255, 0.2);
  --strand-btn-ghost-color: var(--strand-on-blue-primary);
  --strand-checkbox-label-color: var(--strand-on-blue-primary);
  --strand-data-readout-label-color: var(--strand-gray-400);
  --strand-data-readout-value-color: var(--strand-on-blue-primary);
  --strand-form-field-hint-color: var(--strand-gray-300);
  --strand-form-field-label-color: var(--strand-gray-300);
  --strand-heading-sm-color: var(--strand-on-blue-primary);
  --strand-headline-color: var(--strand-on-blue-primary);
  --strand-kv-label-color: var(--strand-gray-400);
  --strand-kv-value-color: var(--strand-gray-200);
  --strand-kv-value-status-color: var(--strand-teal-vital);
  --strand-lead-color: var(--strand-on-blue-primary);
  --strand-link-color: currentColor;
  --strand-link-mono-color: currentColor;
  --strand-link-mono-hover-color: currentColor;
  --strand-link-underline: none;
  --strand-log-text-color: var(--strand-gray-300);
  --strand-log-text-strong-color: var(--strand-gray-100);
  --strand-log-time-color: var(--strand-gray-400);
  --strand-overline-accent-color: var(--strand-blue-indicator);
  --strand-overline-color: var(--strand-gray-400);
  --strand-progress-track-color: var(--strand-instrument-border);
  --strand-radio-label-color: var(--strand-on-blue-primary);
  --strand-stat-strip-border-color: var(--strand-instrument-border);
  --strand-stat-strip-label-color: var(--strand-gray-300);
  --strand-stat-strip-value-color: var(--strand-on-blue-primary);
  --strand-status-chip-committed-color: var(--strand-teal-vital);
  --strand-status-chip-neutral-bg: color-mix(in srgb, var(--strand-gray-400) 12%, transparent);
  --strand-status-chip-neutral-border: 1px solid color-mix(in srgb, var(--strand-gray-400) 20%, transparent);
  --strand-status-chip-neutral-color: var(--strand-gray-300);
  --strand-switch-label-color: var(--strand-on-blue-primary);
  --strand-text-secondary-color: var(--strand-gray-200);
  --strand-text-secondary-xs-color: var(--strand-gray-300);
  --strand-title-color: var(--strand-on-blue-primary);
  --strand-value-negative-color: var(--strand-red-alert);
  --strand-value-positive-color: var(--strand-teal-vital);
}