/* ui451: production vector language for navigation glyphs and telemetry. */
:root {
  --v451-signal: #72d4e7;
  --v451-signal-bright: #d8fbff;
  --v451-signal-deep: #164653;
  --v451-ink: #9db5be;
  --v451-panel: #07141b;
  --v451-grid: rgba(114, 212, 231, 0.12);
  --v451-warn: #d7b36d;
  --v451-ease: cubic-bezier(0.2, 0.76, 0.2, 1);
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  overflow: visible !important;
  color: var(--v451-ink) !important;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.28)) !important;
  shape-rendering: geometricPrecision !important;
  transform: translateZ(0) !important;
  transition: color 180ms var(--v451-ease), filter 220ms var(--v451-ease), transform 220ms var(--v451-ease) !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon :is(path, rect, circle, line, polyline, polygon) {
  vector-effect: non-scaling-stroke !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-plate {
  fill: rgba(7, 20, 27, 0.96) !important;
  stroke: rgba(157, 181, 190, 0.36) !important;
  stroke-width: 0.9 !important;
  transition: fill 180ms var(--v451-ease), stroke 180ms var(--v451-ease) !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-main {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.55 !important;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
  opacity: 0.94 !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-fill {
  fill: rgba(114, 212, 231, 0.065) !important;
  stroke: currentColor !important;
  stroke-width: 1.35 !important;
  stroke-linejoin: miter !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-rail {
  fill: none !important;
  stroke: rgba(157, 181, 190, 0.56) !important;
  stroke-width: 0.85 !important;
  stroke-dasharray: 1.5 1.5 !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-signal {
  fill: none !important;
  stroke: var(--v451-signal) !important;
  stroke-width: 1.85 !important;
  stroke-linecap: square !important;
  stroke-linejoin: miter !important;
}

html body :is(#portal-root, #root) svg.cockpit-vector-icon .glyph-node {
  fill: var(--v451-signal-bright) !important;
  stroke: var(--v451-signal-deep) !important;
  stroke-width: 0.8 !important;
  transform-box: fill-box !important;
  transform-origin: center !important;
}

html body :is(#portal-root, #root) :is(button, a):is(:hover, :focus-visible) svg.cockpit-vector-icon {
  color: var(--v451-signal-bright) !important;
  filter: drop-shadow(0 0 9px rgba(114, 212, 231, 0.34)) drop-shadow(0 8px 13px rgba(0, 0, 0, 0.34)) !important;
  transform: translate3d(2px, -1px, 0) !important;
}

html body :is(#portal-root, #root) :is(button, a):is(:hover, :focus-visible) svg.cockpit-vector-icon .glyph-plate {
  fill: rgba(11, 34, 43, 0.98) !important;
  stroke: rgba(114, 212, 231, 0.76) !important;
}

html body :is(#portal-root, #root) :is(button, a):is(:hover, :focus-visible) svg.cockpit-vector-icon .glyph-signal {
  stroke-dasharray: 54 !important;
  animation: v451SignalAcquire 480ms var(--v451-ease) both !important;
}

html body #portal-root#portal-root#portal-root#portal-root main.portal-shell .client-nav-group button.active svg.cockpit-vector-icon,
html body #root#root#root#root#root#root#root#root main.geo-admin-shell .geo-nav button.active svg.cockpit-vector-icon {
  color: var(--v451-signal-bright) !important;
  filter: drop-shadow(0 0 11px rgba(114, 212, 231, 0.4)) !important;
  animation: v451GlyphLock 360ms var(--v451-ease) both !important;
}

html body #portal-root#portal-root#portal-root#portal-root main.portal-shell .client-nav-group button.active svg.cockpit-vector-icon .glyph-plate,
html body #root#root#root#root#root#root#root#root main.geo-admin-shell .geo-nav button.active svg.cockpit-vector-icon .glyph-plate {
  fill: rgba(15, 48, 58, 0.98) !important;
  stroke: var(--v451-signal) !important;
}

html body #portal-root#portal-root#portal-root#portal-root main.portal-shell .client-nav-group button.active svg.cockpit-vector-icon .glyph-node,
html body #root#root#root#root#root#root#root#root main.geo-admin-shell .geo-nav button.active svg.cockpit-vector-icon .glyph-node {
  animation: v451NodeLock 320ms var(--v451-ease) 120ms both !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector {
  isolation: isolate !important;
  border: 1px solid rgba(114, 212, 231, 0.12) !important;
  background:
    linear-gradient(rgba(114, 212, 231, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 212, 231, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 78% 18%, rgba(114, 212, 231, 0.1), transparent 42%),
    rgba(4, 13, 18, 0.9) !important;
  background-size: 20px 20px, 20px 20px, auto, auto !important;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.26)) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-frame {
  fill: rgba(4, 15, 20, 0.42) !important;
  stroke: rgba(114, 212, 231, 0.2) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-corners {
  stroke: var(--v451-signal) !important;
  stroke-width: 1.15 !important;
  filter: drop-shadow(0 0 3px rgba(114, 212, 231, 0.38)) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-grid path {
  stroke: var(--v451-grid) !important;
  stroke-width: 0.6 !important;
  stroke-dasharray: 1 3 !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector :is(.vector-axis, .vector-ticks) {
  stroke: rgba(216, 251, 255, 0.38) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-reference {
  stroke: rgba(215, 179, 109, 0.38) !important;
  stroke-dasharray: 4 4 !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector :is(.trend-line-shadow, .vector-line-shadow) {
  stroke: rgba(114, 212, 231, 0.14) !important;
  stroke-width: 8 !important;
  filter: blur(1.5px) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector :is(.trend-line-main, .vector-line.brand) {
  stroke-width: 2.1 !important;
  filter: drop-shadow(0 0 3px rgba(114, 212, 231, 0.62)) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-line.competitor {
  stroke: var(--v451-warn) !important;
  stroke-width: 1.25 !important;
  stroke-dasharray: 3 3 !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector :is(.trend-dot, .vector-node, .vector-terminal) {
  filter: drop-shadow(0 0 3px rgba(114, 212, 231, 0.72)) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-terminal-ring {
  stroke: var(--v451-signal-bright) !important;
  stroke-width: 1.15 !important;
  filter: drop-shadow(0 0 4px rgba(114, 212, 231, 0.58)) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-lock {
  stroke: var(--v451-signal-bright) !important;
}

html body #portal-root main.portal-shell svg.cockpit-data-vector .vector-sweep {
  stroke: rgba(216, 251, 255, 0.78) !important;
  stroke-width: 0.75 !important;
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
  transform-box: view-box !important;
  transform-origin: center !important;
  animation: v451TelemetrySweep 760ms var(--v451-ease) 80ms both !important;
}

html body #portal-root main.portal-shell[data-cockpit-busy="true"] svg.cockpit-data-vector .vector-sweep,
html body #portal-root main.portal-shell[aria-busy="true"] svg.cockpit-data-vector .vector-sweep {
  animation: v451TelemetrySweep 920ms var(--v451-ease) both !important;
}

@keyframes v451SignalAcquire {
  from { stroke-dashoffset: 54; opacity: 0.35; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes v451GlyphLock {
  0% { opacity: 0.5; transform: scale(0.92); }
  68% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes v451NodeLock {
  0% { opacity: 0; transform: scale(0.25); }
  72% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes v451TelemetrySweep {
  0% { opacity: 0; transform: translateY(0); }
  18% { opacity: 0.82; }
  100% { opacity: 0; transform: translateY(84px); }
}

@media (max-width: 820px) {
  html body :is(#portal-root, #root) svg.cockpit-vector-icon {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #portal-root#portal-root#portal-root#portal-root main.portal-shell svg.cockpit-vector-icon,
  html body #portal-root#portal-root#portal-root#portal-root main.portal-shell svg.cockpit-vector-icon *,
  html body #root#root#root#root#root#root#root#root main.geo-admin-shell svg.cockpit-vector-icon,
  html body #root#root#root#root#root#root#root#root main.geo-admin-shell svg.cockpit-vector-icon *,
  html body #portal-root#portal-root#portal-root#portal-root main.portal-shell svg.cockpit-data-vector * {
    animation: none !important;
    transform: none !important;
    transition-duration: 0.01ms !important;
  }

  html body #portal-root#portal-root#portal-root#portal-root main.portal-shell .client-nav-group button.active svg.cockpit-vector-icon,
  html body #portal-root#portal-root#portal-root#portal-root main.portal-shell .client-nav-group button:is(:hover, :focus-visible) svg.cockpit-vector-icon,
  html body #portal-root#portal-root#portal-root#portal-root main.portal-shell .client-nav-group button:is(:hover, :focus-visible) svg.cockpit-vector-icon .glyph-signal,
  html body #root#root#root#root#root#root#root#root main.geo-admin-shell .geo-nav button.active svg.cockpit-vector-icon,
  html body #root#root#root#root#root#root#root#root main.geo-admin-shell .geo-nav button:is(:hover, :focus-visible) svg.cockpit-vector-icon,
  html body #root#root#root#root#root#root#root#root main.geo-admin-shell .geo-nav button:is(:hover, :focus-visible) svg.cockpit-vector-icon .glyph-signal {
    animation: none !important;
    transform: none !important;
  }

  html body #portal-root#portal-root#portal-root#portal-root main.portal-shell svg.cockpit-data-vector .vector-sweep {
    opacity: 0 !important;
  }
}