/* Fixed slots keep late fonts, counters and connection notices from moving
   the venue controls. Narrow screens use deliberate rows instead of wrapping. */
main > header {
  display: grid;
  grid-template-columns: 90px 76px 376px minmax(94px, 1fr) 90px 100px;
  grid-template-areas: 'brand cli exchanges connection alerts ema';
  gap: 6px;
  height: 44px;
  min-height: 44px;
  padding: 0 0 6px;
  align-items: center;
  justify-content: stretch;
  overflow: visible;
}
main > header .brand { grid-area: brand; margin: 0; }
main > header .cliControlGroup { grid-area: cli; width: 76px; min-width: 0; }
main > header .cliControlGroup #helperDiagramButton { box-sizing: border-box; width: 50px; min-width: 0; flex: none; }
main > header .cliControlGroup #helperPendingButton { box-sizing: border-box; width: 22px; min-width: 0; flex: none; }
main > header .exchangeControls {
  grid-area: exchanges;
  display: grid;
  grid-template-columns: repeat(3, 112px) 28px;
  gap: 4px;
  width: 376px;
  min-width: 0;
  max-width: none;
  flex: none;
  order: initial;
}
main > header .exchangeControls > .headerControl {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 30px;
  min-height: 30px;
  margin: 0;
  padding: 4px 6px;
  justify-content: center;
  gap: 4px;
  font-size: 9px;
  line-height: 1;
  flex: none;
}
main > header .exchangeLogo { width: 15px; height: 15px; }
main > header .exchangeControl .headerControlState { font-size: 7px; }
main > header .connectionStatus { grid-area: connection; width: 100%; margin: 0; justify-content: flex-end; }
main > header .connectionStatus #banner { min-width: 0; flex: 1; }
main > header .movementAlertsButton { grid-area: alerts; width: 100%; min-width: 0; }
main > header .emaDistanceButton { grid-area: ema; width: 100%; min-width: 0; }
main > header .headerControlCount { min-width: 28px; padding: 0 3px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) {
  main > header {
    grid-template-columns: 90px 76px minmax(94px, 1fr) 90px 100px;
    grid-template-areas: 'brand cli connection alerts ema' 'exchanges exchanges exchanges exchanges exchanges';
    grid-template-rows: 30px 30px;
    height: 72px;
    min-height: 72px;
  }
}
@media (max-width: 600px) {
  main > header {
    grid-template-columns: 90px 76px minmax(0, 1fr);
    grid-template-areas: 'brand cli connection' 'exchanges exchanges exchanges' 'alerts alerts ema';
    grid-template-rows: 30px 30px 28px;
    height: 106px;
    min-height: 106px;
  }
  main > header .exchangeControls {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr)) 28px;
  }
  main > header .connectionStatus #banner { display: none; }
  main > header .movementAlertsButton { justify-self: end; width: 90px; }
}
@media (max-width: 420px) {
  main > header .exchangeControls > .exchangeControl {
    display: grid;
    grid-template-columns: 15px auto;
    grid-template-rows: 9px 9px;
    column-gap: 4px;
    row-gap: 2px;
    justify-content: center;
    padding: 4px;
  }
  main > header .exchangeLogo { grid-column: 1; grid-row: 1 / 3; }
  main > header .exchangeControl > span:not(.headerControlState) { grid-column: 2; grid-row: 1; }
  main > header .exchangeControl .headerControlState { grid-column: 2; grid-row: 2; padding: 0; background: none; }
}