body {
  background: var(  --neutral-900);
}

.radarcanvas {
  display: block;
  width: calc(900px * var(--ui-scale));
  height: calc(900px * var(--ui-scale));
  margin-left: auto;
  margin-right: auto;
  position: relative;
  
}

#radarCanvas {
  display: block;
  width: calc(900px * var(--ui-scale));
  height: calc(900px * var(--ui-scale));
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  left:28px;
}
.radar {
  align-self: stretch;
  flex: 1;
  min-width: 0;
  overflow: visible;
  z-index: 0;
  /* Prevent text selection and default gestures */
}
.iconsettings {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  object-fit: cover;
}
.buttonbase,
.menusettings {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
button.buttonbase {
  width: 48px;
  height: 48px;
  border-radius: var(--br-4);
  background-color: var(--neutral-800-alpha-80);
  align-items: center;
}
.menusettings {
  align-items: flex-start;
}
.iconmaximize {
  width: 20px;
  position: relative;
  max-height: 100%;
  overflow: hidden;
  object-fit: cover;
}
.buttontogglefullscreen,
.radarcontrols {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.buttontogglefullscreen {
  width: 48px;
  height: 48px;
  flex-direction: row;
}

.radarcontrols svg {
  color: var(--primary-500);
  fill:currentColor;
  height: 20px;
  width: 20px;
}

.radarcontrols,
#radar-settings-menu {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 1;
}

#radar-range svg {
 display: none;
}

#radar-range.range-3 .range-3,
#radar-range.range-6 .range-6,
#radar-range.range-12 .range-12,
#radar-range.range-24 .range-24 {
  display: block;
}


#polar-plots svg {
  height: 23px;
  width: 23px;
}

#radar-settings svg,
#polar-plots svg,
#track-ids svg,
#full-screen svg {
  color: #666;
  fill: currentColor;
}

#radar-settings.active svg,
#radar-settings svg,
#polar-plots.active svg,
#track-ids.active svg,
#full-screen.active svg {
  color: var(--primary-500);
  fill: currentColor;
}


#full-screen svg {
  color: var(--primary-500);
}

#full-screen.active svg.maximize,
#full-screen svg.minimize {
  display: none;
} 

#full-screen.active svg.minimize {
  display: block;
}


#radar-settings-menu {
  display:none;
}
#radar-settings-menu.active {
  display:flex;
}
.iconplay {
  height: 11px;
  width: 11px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.placeholder {
  position: relative;
  line-height: 24px;
}
.controlplay {
  align-self: stretch;
  flex: 1 1 auto;
  min-width: 0;
  border-right: 1px solid var(--color-darkslategray);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap-4);
}
.controlbackward-icon {
  align-self: stretch;
  flex: 1;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.controlsplayback,
.tracking {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}
.tracking {
  align-self: stretch;
}
.controlsplayback {
  height: 48px;
  border-radius: var(--br-4);
  background-color: var(--neutral-800-alpha-80);
  overflow: hidden;
}
.iconregenerate {
  width: 20px;
  position: relative;
  max-height: 100%;
  overflow: hidden;
}
.iconregenerate svg {
  color: var(--primary-500);
  fill: currentColor;
}
.buttonbase2 {
  height: 48px;
  width: 48px;
  border-radius: var(--br-4);
  background-color: var(--primary-500-alpha-70);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sim-controls {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-8);
}
.label {
  position: relative;
  line-height: 18px;
  text-transform: uppercase;
  font-weight: 500;
}
.panel-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.labeltext,
.metric-value {
  position: relative;
  /* line-height: 18px; */
}
.metric-value {
  flex: 1;
  font-size: var(--font-size-18);
  line-height: 24px;
  font-family: var(--font-ibm-plex-mono);
  color: var(--primary-500);
  text-align: right;
}

.metric-row {
  align-self: stretch;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap-12);
}
.card {
  border-radius: var(--br-4);
  background-color: var(--neutral-800-alpha-80);
  overflow: hidden;
  padding: var(--space-3) var(--padding-16) var(--padding-16);
  box-sizing: border-box;
}
.card,
.datacontainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.datacontainer {
  align-self: stretch;
  padding: var(--padding-4) 0 0;
  font-size: var(--font-size-14);
  color: var(--primary-600);
}

.track {
  text-transform: uppercase;
}
.track,
.track-label {
  position: relative;
  font-size: var(--font-size-11);
  line-height: 18px;
  font-weight: 500;
  font-family: var(--font-ibm-plex-sans);
  color: var(--neutral-900);
  text-align: left;
}
.metrictracklabel,
.panel-header1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.metrictracklabel {
  cursor: pointer;
  border: 0;
  padding: var(--padding-1) var(--padding-4);
  background-color: var(--primary-500-alpha-90);
  border-radius: var(--br-2);
  gap: var(--gap-4);
}
.panel-header1 {
  align-self: stretch;
}
.cardtrack,
.datacontainer1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.datacontainer1 {
  align-self: stretch;
  padding: var(--padding-4) 0 0;
  font-size: var(--font-size-14);
  color: var(--primary-600);
}
.datacontainer {
  align-self: stretch;
  padding: var(--padding-4) 0 0;
}


.card {
  border-radius: var(--br-4);
  overflow: hidden;
  padding: var(--space-3) var(--padding-16) var(--padding-16);
  box-sizing: border-box;
}

.card.secondary {
  border-radius: var(--br-4);
  background-color: var(--neutral-800-alpha-80);
  overflow: hidden;
  padding: var(--space-3) var(--padding-16) var(--padding-16);
  box-sizing: border-box;
}

.iconswitchon {
  width: 14px;
  position: relative;
  max-height: 100%;
  overflow: hidden;
}
.buttonswitch {
  height: 20px;
  width: 20px;
  border-radius: var(--br-2);
  background-color: var(--neutral-900);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.control,
.panel-header2 {
  align-self: stretch;
  flex-direction: row;
  align-items: center;
}
.control {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.panel-header2 {
  gap: var(--gap-10);
}
.secondary,
.metric-row,
.panel-header2 {
  display: flex;
  justify-content: flex-start;
}

.metric-row12 {
  align-self: stretch;
  flex-direction: row;
  align-items: center;
  gap: var(--gap-12);
}
.command-center,
.telemetry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-2);
  font-size: var(--font-size-12);
  color: var(--neutral-300);
  font-family: var(--font-ibm-plex-sans);
  overflow-x: auto;
  flex-wrap: nowrap !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.command-center {
  align-self: stretch;
  gap: var(--gap-8);
  z-index: 2;
  text-align: left;
  font-size: var(--font-size-18);
  color: var(--primary-500);
  font-family: var(--font-ibm-plex-mono);
}
.maneuver-logo-child {
  /* width: 20px;
  position: relative;
  max-height: 100%; */
}
.maneuver-logo-item {
  /* height: 12.8px;
  width: 112px; */
  position: relative;
}
.maneuver-logo {
  /* height: 24px; */
  /* overflow: hidden; */
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
}

.beta,
.maneuver-logo,
.maneuverlogo {
  display: flex;
  flex-direction: row;
}
.maneuverlogo {
  margin: 0 !important;
  position: absolute;
  top: 24px;
  left: 24px;
  align-items: center;
  justify-content: flex-start;
  z-index: 3;
}
.beta {
  width: 100vw;
  height: 100vh;
  position: relative;
  background-color: var(--neutral-900);
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--space-3);
  box-sizing: border-box;
  gap: var(--space-2);
  line-height: normal;
  letter-spacing: normal;
}

#ff-speed-indicator,
#rev-speed-indicator {
  display: none;
}

/* Reset defaults on our semantic buttons */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
  

/* Retain your existing divider on the play panel */
button.controlplay {
  border-right: 1px solid var(--color-darkslategray);
}

#play-pause .pause,
#play-pause .play {
  color: var(--primary-500); /* or another color */
  fill: currentColor;
  display: block;
  height: 12px;
}

#play-pause.selected .pause,
#play-pause .play  {
  display: none;
}
#play-pause .pause,
#play-pause.selected .play {
  display: block;
}


/* Keep the flex sizing you already have for back/forward */
button.control-backward,
button.control-forward {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure the playback time matches your typography */
button.controlplay .placeholder {
  font-family: var(--font-ibm-plex-mono);
  font-size: var(--font-size-18);
  color: var(--primary-500);
}

/* Visual feedback for playback controls */
.tracking .selected {
  background-color: var(--primary-500-alpha-70);
}

.unselected {
  opacity: 0.5;
}

.iconnumber {
  width: 20px;
  position: relative;
  max-height: 100%;
  overflow: hidden;
  object-fit: cover;
}

.label,
.metric-row,
.metric-value {
   /* Modern browsers */
  user-select: none;

  /* Webkit browsers (Safari, Chrome, Edge) */
  -webkit-user-select: none;
  
  /* Firefox */
  -moz-user-select: none;
  
  /* Internet Explorer/Edge Legacy */
  -ms-user-select: none;
  
  /* Disable touch callout on iOS */
  -webkit-touch-callout: none;
  
  /* Disable drag */
  -webkit-user-drag: none;
  
  /* Disable highlighting */
  -webkit-tap-highlight-color: transparent;
}

.control-backward{
  border-right: 1px solid #333;;
}

@media screen and (min-width: 793px) {

  .controlsplayback {
  height: 48px;
}

.radarcontrols .buttonbase img {
  width:24px;
}

.sim-controls .buttonbase2 img {
  width:26px;
}
.control-forward,
.control-backward,
.buttonbase2  {
  height: 48px;
  width: 48px;
}
.add-remove-tracks {
  display: none;
}
  .controlplay.pause {
    opacity: 0.5;
  }
}

.card {
  width: 304px;
}

@media screen and (max-width: 792px) {
  .beta{
    flex-direction: column;
    align-items: flex-end;
    padding-left: var(--padding-12);
    padding-right: var(--padding-12);
    padding-bottom: var(--padding-48);
  }

  .beta .maneuver-logo-child {
    width:32px!important;
  }

  #wind-data-container {
    display: none!important;
  }

  .beta .maneuverlogo {
    padding-left: 10px;
    padding-right:10px;
    padding-top:14px;
    padding-bottom:var(--padding-12);
    background-color: var(--neutral-800-alpha-80);
    border-radius: 100px;
    display: block;
  }

  .maneuver-logo-item{
    display: none;
  }

  .radarcontrols {
    flex-direction: row;
  }

  .radarcontrols .buttonbase {
    width: 56px;
    height: 56px;
  }


  .beta,
  .command-center,
  .telemetry {
    gap: var(--gap-12);
  }

  #radar-settings-menu {
    flex-direction: row;
  }

  body #radarCanvas {
    position: relative;
    width: calc(100% + 10px);
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .telemetry {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    width: calc(100vw - 2 * var(--padding-12));   /* subtract left/right padding */
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  
  .card {
    width: 180px;
  }
  .card.wide {
    width: 220px;
  }
  
  .secondary .metric-value {
    flex: 1;
    font-size: var(--font-size-14);
    line-height: 18px;
    font-family: var(--font-ibm-plex-mono);
    color: var(--primary-500);
    text-align: right;
  }
  .radar {
    min-width: 100%;
    flex: 1 1 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card {
    flex:1;
  }
  /* Swap the order of command center sections */
  .command-center > .sim-controls {
    order: 2;
  }

  .command-center > .telemetry {
    order: 1;
    align-self: stretch;  /* override the parent’s align-items:flex-start */
    min-width: 0;         /* allow it to shrink below its contents */
}

  /* Allow telemetry cards to overflow and scroll horizontally */
.telemetry {
  overflow-x: auto;
  flex-wrap: nowrap !important;
}

  /* Prevent cards from shrinking and make them horizontally scrollable */
  .telemetry > .cardownship,
  .telemetry > .cardtrack,
  .telemetry > .secondary {
    flex: 0 0 auto;
  }

/* Telemetry cards: scroll snap for horizontal scrolling */
.telemetry > .cardownship,
.telemetry > .cardtrack,
.telemetry > .secondary {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.controlsplayback,
.sim-controls .buttonbase2 {
  height: 64px;
}

.radarcontrols .buttonbase img {
  width:24px;
}

.sim-controls .buttonbase2 {
  width:64px;
}

.sim-controls .buttonbase2 img {
  width:26px;
}

.controlbackward-icon {
    all: unset;
}

.add-remove-tracks {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--gap-8);
  flex: 1;
}
#full-screen {
  display: none;
}

.control-forward,
.control-backward {
  height: 64px;
  width: 64px;
}

}




#drag-tooltip,
#order-tooltip {
  position: absolute;
  display: none;
  background-color: var(--neutral-900-alpha-80);
  color: var(--primary-500);
  font-size: var(--font-size-14);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--br-2);
  pointer-events: none;
  z-index: 3;
  white-space: nowrap;
  font-family: var(--font-ibm-plex-sans);
}

/* #radar-range.active {
  background: var(--primary-500);
}

#radar-range.active svg {
  color: var(--neutral-900);
  fill: currentColor;
} */