/* ECHOWX_R235O_DESKTOP_RADAR_TWO_TIER_DOCK
   Desktop-only replacement for the unsuccessful r235j geometry reset.
   The Radar selector deck and persistent command dock receive independent,
   explicit viewport slots so neither row can cover the other.
   Radar data, playback, caching, publisher services, mobile UI, and Outlooks
   are intentionally unchanged.
*/

@media (min-width: 900px) {
  body.echowx-r235h-radar-page {
    --r235o-edge: 10px;
    --r235o-command-bottom: 10px;
    --r235o-command-height: 52px;
    --r235o-selector-height: 46px;
    --r235o-timeline-height: 44px;
    --r235o-row-gap: 6px;
    --r235o-selector-bottom: calc(
      var(--r235o-command-bottom) +
      var(--r235o-command-height) +
      var(--r235o-row-gap)
    );
    --r235o-timeline-bottom: calc(
      var(--r235o-selector-bottom) +
      var(--r235o-selector-height) +
      var(--r235o-row-gap)
    );
  }

  body.echowx-r235h-radar-page .echowx-r235o-row-host {
    overflow: visible !important;
    contain: none !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-selector-row,
  body.echowx-r235h-radar-page .echowx-r235h-command-row,
  body.echowx-r235h-radar-page .echowx-r235h-timeline-row {
    box-sizing: border-box !important;
    position: fixed !important;
    top: auto !important;
    right: var(--r235o-edge) !important;
    left: var(--r235o-edge) !important;
    transform: none !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: visible !important;
  }

  /* Row 1: Radar Location, Product, optional Tilt, Draw, and Live. */
  body.echowx-r235h-radar-page .echowx-r235h-selector-row {
    z-index: 2147483201 !important;
    bottom: var(--r235o-selector-bottom) !important;
    min-height: var(--r235o-selector-height) !important;
    height: var(--r235o-selector-height) !important;
    padding: 4px 10px !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: var(--r235h-surface, #0b1016) !important;
    border: 1px solid var(--r235h-border, rgba(148, 163, 184, 0.20)) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-selector {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-rows: 9px 21px !important;
    align-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    padding: 3px 9px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-selector label,
  body.echowx-r235h-radar-page .echowx-r235h-selector [class*="label"] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    min-height: 9px !important;
    height: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 9px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-selector select {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 21px !important;
    height: 21px !important;
    margin: 0 !important;
    padding: 0 24px 0 0 !important;
    line-height: 21px !important;
    overflow: visible !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-location-selector {
    flex: 0 1 270px !important;
    width: min(270px, 23vw) !important;
    max-width: 270px !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-product-selector {
    flex: 1 1 410px !important;
    width: auto !important;
    min-width: 260px !important;
    max-width: 600px !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-tilt-selector {
    flex: 0 1 165px !important;
    width: 165px !important;
    max-width: 165px !important;
  }

  body.echowx-r235h-radar-page
    .echowx-r235h-tilt-selector:has(select:disabled) {
    display: none !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-draw-button {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 92px !important;
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    min-height: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-live-pill {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 64px !important;
    width: 64px !important;
    min-width: 64px !important;
    max-width: 64px !important;
    min-height: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  /* Row 2: persistent page commands. */
  body.echowx-r235h-radar-page .echowx-r235h-command-row {
    z-index: 2147483200 !important;
    bottom: var(--r235o-command-bottom) !important;
    min-height: var(--r235o-command-height) !important;
    height: var(--r235o-command-height) !important;
    padding: 3px 12px !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    background: var(--r235h-surface, #0b1016) !important;
    border: 1px solid var(--r235h-border, rgba(148, 163, 184, 0.20)) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
  }

  body.echowx-r235h-radar-page .echowx-r235h-command-button {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 1 190px !important;
    width: 190px !important;
    min-width: 120px !important;
    max-width: 190px !important;
    min-height: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    border-radius: 8px !important;
  }

  body.echowx-r235h-radar-page
    .echowx-r235h-command-button + .echowx-r235h-command-button {
    border-left-color: transparent !important;
  }

  /* The real frame scrubber, when present, receives a third independent slot. */
  body.echowx-r235h-radar-page .echowx-r235h-timeline-row {
    z-index: 2147483202 !important;
    bottom: var(--r235o-timeline-bottom) !important;
    min-height: var(--r235o-timeline-height) !important;
    height: var(--r235o-timeline-height) !important;
    padding: 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: var(--r235h-surface, #0b1016) !important;
    border: 1px solid var(--r235h-border, rgba(148, 163, 184, 0.20)) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
  }

  @media (max-width: 1120px) {
    body.echowx-r235h-radar-page .echowx-r235h-location-selector {
      flex-basis: 220px !important;
      width: 220px !important;
      max-width: 220px !important;
    }

    body.echowx-r235h-radar-page .echowx-r235h-product-selector {
      flex: 1 1 300px !important;
      min-width: 230px !important;
      max-width: 430px !important;
    }

    body.echowx-r235h-radar-page .echowx-r235h-command-button {
      flex-basis: 160px !important;
      width: 160px !important;
      min-width: 105px !important;
      max-width: 160px !important;
    }
  }
}