/* Mobile tactical surface. Desktop keeps the established command layout. */
@media (max-width: 850px) {
  body {
    height: 100svh;
    height: 100dvh;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: auto;
  }
  /* Floor tabs and the contacts disclosure need their original vertical lane.
     A short screen scrolls the page instead of clipping these field controls. */
  main { flex: 1 0 280px; height: auto; min-height: 280px; }
  .command-deck { padding: 4px 6px; min-width: 0; }
  #squad, #squad.expanded-squad {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, calc((100% - 4px) / 2));
    gap: 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-padding-inline: 3px;
    padding: 3px;
  }
  #squad .unit { min-height: 62px; grid-template-rows: 18px minmax(32px, auto); }
  #squad .unit strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #squad .unit-metrics { flex-wrap: wrap; align-content: start; gap: 0 4px; line-height: 16px; }
  #squad .hp-meter { display: none; }
  #squad-controls { flex-wrap: wrap; }
  #squad-status { flex-basis: 100%; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  #squad-controls button, .fire-modes button, .maptools button, .decision-bar > button { min-height: 44px; }
  #squad-controls .fire-modes { flex-wrap: wrap; }
  #topbar-toggle { top: 6px; left: 6px; width: 98px; min-height: 44px; padding-inline: 4px; }
  .field .mapbar { left: 110px; right: 6px; top: 6px; opacity: 1; }
  .field .maptools {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .field .maptools > * { flex-shrink: 0; }
  .field .maptools button { min-width: 44px; white-space: nowrap; }
  .field #floor-selector { top: 70px; }
  .decision-bar {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto;
    min-height: 54px;
    height: auto;
    padding: 4px 6px max(4px, env(safe-area-inset-bottom));
    gap: 6px;
  }
  #mission-progress { grid-column: 1; grid-row: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; flex-wrap: wrap; }
  #cancel { grid-column: 2; grid-row: 1; }
  #end { grid-column: 3; grid-row: 1; }
  .field #preview {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 36px;
    z-index: 8;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: auto;
    height: auto;
    min-height: 44px;
    max-height: min(160px, 50%);
    margin: 0;
    padding: 7px;
    gap: 7px;
    align-items: center;
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid #557e8a;
    border-radius: 4px;
    background: #0b202bf5;
    box-shadow: 0 3px 12px #0008;
  }
  .field #preview:empty { display: none; }
  .field #preview .preview-content { display: block; grid-column: 1; grid-row: 1; min-width: 0; overflow: auto; overflow-wrap: anywhere; max-height: 120px; }
  .field #preview #confirm-action { grid-column: 2; grid-row: 1; min-height: 44px; max-width: 160px; white-space: normal; padding: 6px; }
  /* A short viewport can scroll naturally instead of clipping warnings/orders. */
  #brief.danger { flex-shrink: 0; }
}

/* At the first desktop width, four cards are narrower than their unbroken
   metrics row. Let the text wrap inside each card without widening the page. */
@media (min-width: 851px) and (max-width: 1100px) {
  #squad .unit { grid-template-rows: minmax(19px, auto) auto; }
  #squad .unit strong { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  #squad .unit-metrics { min-width: 0; flex-wrap: wrap; white-space: normal; row-gap: 0; line-height: 16px; }
  #squad .unit-metrics > span { max-width: 100%; overflow-wrap: anywhere; }
}