/* Give production choices the available height on every desktop screen. */
@media (min-width: 1025px) {
  body:not(.touch-layout) { --sidebar: clamp(380px, 30vw, 560px); }
  body:not(.touch-layout) .command > * { flex-shrink: 0; }
  body:not(.touch-layout) .command > .tabs { order: -5; }
  body:not(.touch-layout) .command > .army-filters { order: -4; }
  body:not(.touch-layout) .command > .catalog {
    order: -3;
    flex: 0 0 auto;
    height: max(280px, calc(100dvh - var(--hud) - 150px));
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
    overscroll-behavior: contain;
  }
  body:not(.touch-layout) .command > .queue-section { order: -2; }
  body:not(.touch-layout) .command .unit-card { min-height: 150px; padding: 7px; }
  body:not(.touch-layout) .command .unit-card img { height: 48px; }
  body:not(.touch-layout) .command .unit-role { margin-bottom: 4px; }
  body:not(.touch-layout) .command .locked-label {
    position: static;
    white-space: normal;
    overflow-wrap: anywhere;
    margin-top: 4px;
  }
  body:not(.touch-layout) .command .unit-bottom { gap: 3px 6px; padding-top: 4px; }
  body:not(.touch-layout) .command .unit-bottom > span { font-size: 17px; }
  body:not(.touch-layout) .command .queue-section { padding: 8px 12px; }
  body:not(.touch-layout) .command .command-heading { padding: 8px 14px; margin-bottom: 6px; }
}

@media (min-width: 1600px) {
  body:not(.touch-layout) .command > .catalog {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Keep the wider panel and the battlefield in sync through --sidebar. */
.touch-layout.touch-tablet { --sidebar: clamp(300px, 35vw, 380px); }
.touch-layout .command .unit-card { min-height: 150px; }
.touch-layout .command .unit-card img { height: 48px; }
.touch-layout .command .unit-role { margin-bottom: 4px; }
.touch-layout .command .unit-bottom { min-height: 25px; padding-top: 4px; }
.touch-layout .command .locked-label { overflow-wrap: anywhere; }
.touch-layout.touch-phone .command {
  max-height: min(82dvh, calc(100dvh - var(--hud) - var(--touch-bottom) - 12px));
  z-index: 13;
}
.touch-layout.touch-phone .command .catalog {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 7px;
}
.touch-layout.touch-phone .command .unit-card {
  min-height: 124px;
  padding: 6px;
}
.touch-layout.touch-phone .command .unit-card img { height: 46px; }
.touch-layout.touch-phone .command .unit-role {
  min-height: 0;
  font-size: 9px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.touch-layout.touch-phone .command .unit-bottom > span { font-size: 16px; }
.touch-layout.touch-phone .command .army-filters {
  gap: 5px;
  padding: 7px;
  background:#142a2ef2;
}
.touch-layout.touch-phone .command .army-filters button { min-height: 46px; font-size: 11px; }
@media (min-width: 1000px) {
  .touch-layout.touch-tablet .command .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-height: 540px) and (min-width: 600px) {
  .touch-layout.touch-phone .command { width: min(620px, 82vw); }
  .touch-layout.touch-phone #touchPanelHead { padding-block: 4px; }
  .touch-layout.touch-phone .command .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .touch-layout.touch-phone .command .unit-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 3px 6px;
    min-height: 110px;
    padding: 6px;
    align-content: start;
  }
  .touch-layout.touch-phone .command .unit-card img { grid-row: 1 / 3; height: 42px; }
  .touch-layout.touch-phone .command .unit-name { font-size: 11px; }
  .touch-layout.touch-phone .command .unit-role {
    font-size: 9px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 0;
  }
  .touch-layout.touch-phone .command .unit-bottom,
  .touch-layout.touch-phone .command .locked-label { grid-column: 1 / -1; }
}